/* WindoorERP Documentation — brand design system.
   Premium · Technical · Precise · Modern · Enterprise. */

/* ── Fonts (self-hosted) ─────────────────────────────────────────── */
@font-face {
  font-family: 'Inter';
  src: url('../../fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../../fonts/jbmono-var.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('../../fonts/plexarabic-400-arabic.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('../../fonts/plexarabic-600-arabic.woff2') format('woff2');
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('../../fonts/plexarabic-700-arabic.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}

/* ── Tokens ──────────────────────────────────────────────────────── */
:root {
  --ink-1: #0F1A35;
  --ink-2: #334359;
  --ink-3: #5B7191;
  --ink-4: #8FA3BF;
  --rule: rgba(15, 26, 53, 0.10);
  --rule-soft: rgba(15, 26, 53, 0.06);
  --card-bg: #F5F8FC;
  --card-bg-alt: #FAFBFD;
  --blue: #3B9EFF;
  --blue-deep: #1B72D9;
  --blue-darker: #155CB0;
  --cyan: #06B6D4;
  --green: #16A34A;
  --tint-blue: #EAF3FF;
  --tint-blue-strong: #D6E8FF;
  --header-dark: #060B17;
  --grad: linear-gradient(90deg, #155CB0, #3B9EFF, #06B6D4);
  --font-ui: 'Inter', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --header-h: 64px;
}

/* ── Base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-block-start: calc(var(--header-h) + 24px); }
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-2);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.wd-rtl { font-family: 'IBM Plex Sans Arabic', 'Inter', system-ui, sans-serif; }
a { color: var(--blue-deep); text-decoration: none; }
a:hover { color: var(--blue-darker); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
button { font: inherit; cursor: pointer; }
img, svg, video { max-width: 100%; }
kbd {
  font-family: var(--font-mono);
  font-size: 0.72em;
  font-weight: 600;
  color: var(--ink-3);
  background: var(--card-bg);
  border: 1px solid var(--rule);
  border-block-end-width: 2px;
  border-radius: 5px;
  padding: 2px 7px;
  white-space: nowrap;
}
.wd-mono { font-family: var(--font-mono); font-size: 0.92em; font-weight: 600; }
.wd-muted { color: var(--ink-3); }
.wd-icon { inline-size: 18px; block-size: 18px; flex: none; }
.wd-eyebrow {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin: 0;
}
.wd-rtl .wd-eyebrow { letter-spacing: 0.06em; }
.wd-accent { color: var(--blue-deep); }

/* Directional arrows flip in RTL */
.wd-rtl .wd-icon-arrow, .wd-rtl .wd-icon-chevron { transform: scaleX(-1); }

/* ── Header ────────────────────────────────────────────────────────
   Light topbar, composed like the in-app workspace: gradient brand
   tile, filter pills, pill search. The gradient hairline is the only
   thing left of the old navy bar — it still stamps the surface as
   WindoorERP without darkening the whole page. */
.wd-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 60;
  background: #fff;
  color: var(--ink-2);
  border-block-end: 1px solid var(--rule-soft);
}
.wd-header-accent { block-size: 3px; background: var(--grad); }
.wd-header-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  block-size: calc(var(--header-h) - 3px);
  padding-inline: 20px;
  max-inline-size: 1560px;
  margin-inline: auto;
}
.wd-brand { display: flex; align-items: center; gap: 10px; color: var(--ink-1); flex: none; }
.wd-brand:hover { color: var(--ink-1); }
.wd-brand-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 34px;
  block-size: 34px;
  flex: none;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--blue-darker) 0%, var(--blue) 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(27, 114, 217, 0.25);
}
.wd-brand-tile .wd-icon { inline-size: 19px; block-size: 19px; }
.wd-brand-text { display: flex; align-items: baseline; gap: 8px; min-inline-size: 0; }
.wd-logo { inline-size: 24px; block-size: 24px; flex: none; }
.wd-brand-name {
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 16px;
  color: var(--ink-1);
  white-space: nowrap;
}
.wd-brand-sub { color: var(--ink-3); font-weight: 500; font-size: 12.5px; white-space: nowrap; }
.wd-header-sep {
  inline-size: 1px;
  block-size: 22px;
  flex: none;
  background: var(--rule);
}
.wd-header-sep-soft { color: var(--ink-4); font-size: 12px; }
.wd-version-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-4);
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 1px 6px;
  flex: none;
}

/* Filter pills — the header's two top-level destinations */
.wd-header-tabs { display: flex; align-items: center; gap: 6px; flex: none; }
.wd-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--card-bg-alt);
  border: 1px solid var(--rule-soft);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-3);
  white-space: nowrap;
  transition: background 150ms var(--ease), color 150ms var(--ease),
              border-color 150ms var(--ease);
}
.wd-pill .wd-icon { inline-size: 14px; block-size: 14px; }
.wd-pill:hover {
  background: var(--tint-blue);
  color: var(--blue-darker);
  border-color: var(--tint-blue-strong);
}
.wd-pill.active {
  background: var(--tint-blue);
  color: var(--blue-darker);
  border-color: var(--tint-blue-strong);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(21, 92, 176, 0.10);
}

.wd-search-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-4);
  background: var(--card-bg);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13.5px;
  min-inline-size: 0;
  transition: border-color 180ms var(--ease), background 180ms var(--ease);
}
.wd-header-inner > .wd-search-trigger {
  flex: 1;
  max-inline-size: 480px;
  margin-inline: auto;
}
.wd-search-trigger:hover { border-color: var(--blue); background: #fff; color: var(--ink-3); }
.wd-search-trigger span { flex: 1; text-align: start; overflow: hidden; white-space: nowrap; }
.wd-header-right { display: flex; align-items: center; gap: 10px; flex: none; }
.wd-lang { color: var(--ink-3); font-size: 13px; font-weight: 600; padding: 4px 2px; }
.wd-lang.active { color: var(--ink-1); }
.wd-lang:hover { color: var(--blue-deep); }
.wd-btn-demo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--tint-blue);
  border: 1px solid var(--tint-blue-strong);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--blue-darker);
  white-space: nowrap;
  transition: background 150ms var(--ease), box-shadow 150ms var(--ease);
}
.wd-btn-demo .wd-icon { inline-size: 15px; block-size: 15px; }
.wd-btn-demo:hover {
  background: var(--tint-blue-strong);
  color: var(--blue-darker);
  box-shadow: 0 2px 8px rgba(27, 114, 217, 0.15);
}
.wd-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 36px; block-size: 36px;
  color: var(--ink-3);
  background: none;
  border: none;
  border-radius: 8px;
  transition: color 150ms var(--ease), background 150ms var(--ease);
}
.wd-icon-btn:hover { color: var(--blue-darker); background: var(--card-bg); }
/* The CTA has a pill form on wide screens; this is its narrow fallback */
.wd-icon-btn-cta { display: none; }
.wd-menu-toggle { display: none; }

/* ── Shell ───────────────────────────────────────────────────────── */
.wd-shell {
  display: flex;
  max-inline-size: 1560px;
  margin-inline: auto;
  min-block-size: calc(100vh - var(--header-h));
}

/* ── Sidebar ─────────────────────────────────────────────────────── */
.wd-sidebar {
  inline-size: 288px;
  flex: none;
  border-inline-end: 1px solid var(--rule-soft);
  padding: 20px 14px 40px;
  position: sticky;
  inset-block-start: var(--header-h);
  block-size: calc(100vh - var(--header-h));
  overflow-y: auto;
  scrollbar-width: thin;
}
.wd-sidebar-search {
  inline-size: 100%;
  color: var(--ink-3);
  background: var(--card-bg);
  border-color: var(--rule);
  margin-block-end: 18px;
}
.wd-sidebar-search:hover { color: var(--ink-2); }
.wd-nav-label {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin: 22px 10px 8px;
}
.wd-rtl .wd-nav-label { letter-spacing: 0.05em; }
.wd-nav-rule {
  block-size: 1px;
  background: var(--rule-soft);
  margin: 12px 8px 0;
}
.wd-nav-section { margin-block-end: 2px; }
.wd-nav-section summary { list-style: none; }
.wd-nav-section summary::-webkit-details-marker { display: none; }
/* Chevron first, then the icon tile: the disclosure control reads as
   the leftmost thing in the row, matching the in-app tree. */
.wd-nav-summary {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-1);
  padding: 7px 9px;
  border-radius: 8px;
  user-select: none;
  transition: background 150ms var(--ease);
}
.wd-nav-summary:hover { background: var(--card-bg); }
.wd-nav-section[open] > .wd-nav-summary { color: var(--blue-darker); }
.wd-nav-name {
  flex: 1;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wd-nav-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 24px;
  block-size: 24px;
  flex: none;
  border-radius: 6px;
  color: var(--ink-3);
  background: var(--card-bg);
  border: 1px solid var(--rule-soft);
}
.wd-nav-ico .wd-icon { inline-size: 14px; block-size: 14px; }
.wd-nav-summary:hover .wd-nav-ico,
.wd-nav-section[open] > .wd-nav-summary .wd-nav-ico {
  color: var(--blue-deep);
  background: var(--tint-blue);
  border-color: var(--tint-blue-strong);
}
/* The journeys branch is the one thing above the index; a tinted tile
   keeps it distinct now that it folds like any other section. */
.wd-nav-jsection > .wd-nav-summary .wd-nav-ico {
  color: var(--blue-deep);
  background: var(--tint-blue);
  border-color: var(--tint-blue-strong);
}
.wd-nav-count {
  font-size: 10.5px;
  color: var(--ink-4);
  background: var(--card-bg);
  border: 1px solid var(--rule-soft);
  border-radius: 999px;
  padding: 1px 7px;
  flex: none;
  font-variant-numeric: tabular-nums;
}
.wd-nav-chevron {
  inline-size: 12px; block-size: 12px;
  flex: none;
  color: var(--ink-4);
  transition: transform 180ms var(--ease);
}
.wd-nav-section[open] > .wd-nav-summary .wd-nav-chevron { transform: rotate(90deg); }
.wd-rtl .wd-nav-chevron { transform: scaleX(-1); }
.wd-rtl .wd-nav-section[open] > .wd-nav-summary .wd-nav-chevron { transform: rotate(90deg); }
.wd-nav ul {
  list-style: none;
  margin: 2px 0 10px;
  padding: 0;
  margin-inline-start: 21px;
  padding-inline-start: 10px;
  border-inline-start: 1px solid var(--rule-soft);
}
.wd-nav-subgroups {
  margin: 2px 0 10px;
  margin-inline-start: 14px;
  padding-inline-start: 6px;
  border-inline-start: 1px solid var(--rule-soft);
}
.wd-nav-subgroup {
  margin-block: 8px 4px;
}
.wd-nav-subgroup:first-child {
  margin-block-start: 2px;
}
.wd-nav-subgroup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 8px 3px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-4);
  border-radius: 6px;
  background: var(--card-bg-alt);
  margin-block-end: 3px;
}
.wd-nav-subgroup-title {
  flex: 1;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wd-nav-subgroup-parent {
  font-weight: 700 !important;
  color: var(--ink-1) !important;
  background: var(--card-bg-alt);
  border-radius: 6px;
  margin-block-end: 2px;
}
.wd-nav-subgroup-parent:hover {
  background: var(--tint-blue);
  color: var(--blue-darker) !important;
}
.wd-nav-subgroup-list {
  list-style: none;
  margin: 2px 0 6px !important;
  padding: 0 !important;
  margin-inline-start: 10px !important;
  padding-inline-start: 8px !important;
  border-inline-start: 1.5px solid var(--rule-soft) !important;
}
.wd-nav-standalone-list {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
/* Article rows carry their read time, the way the in-app tree does:
   the cost of the click is visible before the click. */
.wd-nav-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
  font-size: 13.5px;
  padding: 7px 10px;
  border-radius: 7px;
  border-inline-start: 2px solid transparent;
  transition: background 150ms var(--ease), color 150ms var(--ease);
}
.wd-nav-row-name {
  flex: 1;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wd-nav-row:hover { background: var(--card-bg); color: var(--ink-1); }
.wd-nav-row.active {
  background: var(--tint-blue);
  color: var(--blue-darker);
  font-weight: 600;
  border-inline-start-color: var(--blue-deep);
}
.wd-nav-pill {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-4);
  background: var(--card-bg-alt);
  border: 1px solid var(--rule-soft);
  border-radius: 999px;
  padding: 1px 6px;
  flex: none;
  white-space: nowrap;
}
.wd-nav-row.active .wd-nav-pill {
  color: var(--blue-deep);
  background: #fff;
  border-color: var(--tint-blue-strong);
}
.wd-nav-row-all { color: var(--ink-3); font-weight: 600; font-size: 13px; }
.wd-nav-row-arrow { inline-size: 13px; block-size: 13px; flex: none; }
.wd-sidebar-scrim { display: none; }

/* ── Main / article grid ─────────────────────────────────────────── */
.wd-main { flex: 1; min-inline-size: 0; padding: 40px 48px 80px; }
.wd-main-article { display: flex; gap: 48px; align-items: flex-start; }
.wd-article { flex: 1; min-inline-size: 0; max-inline-size: 860px; }

/* ── Typography scale ────────────────────────────────────────────── */
h1 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--ink-1);
  margin: 8px 0 14px;
}
.wd-rtl h1 { letter-spacing: 0; }
h2 {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink-1);
  margin: 40px 0 12px;
}
.wd-rtl h2 { letter-spacing: 0; }
h3 { font-size: 18.5px; font-weight: 700; color: var(--ink-1); margin: 20px 0 8px; }
.wd-section-title {
  font-size: 21px;
  margin: 0 0 18px;
  padding-block-end: 10px;
  border-block-end: 1px solid var(--rule-soft);
}

/* ── Home / hero ─────────────────────────────────────────────────── */
.wd-main-home { max-inline-size: 1080px; margin-inline: auto; }
.wd-hero {
  position: relative;
  padding: 54px 0 46px;
  overflow: hidden;
}
/* Faint engineering grid + a single warm glow: enough texture to stop
   the page reading as a blank document, quiet enough to keep the h1
   the loudest thing on screen. */
.wd-hero-grid {
  position: absolute;
  inset-block-start: -40px;
  inset-inline: -40px;
  block-size: 320px;
  pointer-events: none;
  background-image:
    linear-gradient(var(--rule-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(90% 70% at 20% 0%, #000 0%, transparent 70%);
  mask-image: radial-gradient(90% 70% at 20% 0%, #000 0%, transparent 70%);
}
.wd-hero > *:not(.wd-hero-grid):not(.wd-hero-watermark) { position: relative; }
.wd-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  max-inline-size: 720px;
}
.wd-hero-actions .wd-hero-search { margin: 0; flex: 1 1 340px; }
.wd-hero-cta { flex: none; white-space: nowrap; }
.wd-hero-hint {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13.5px;
  color: var(--ink-3);
  margin: 14px 0 0;
}
.wd-hero-hint-name { color: var(--ink-1); font-weight: 600; }
.wd-hero-watermark {
  position: absolute;
  inset-block-start: -60px;
  inset-inline-end: -80px;
  inline-size: 420px;
  opacity: 0.035;
  pointer-events: none;
}
.wd-hero-watermark img { inline-size: 100%; block-size: auto; filter: grayscale(1); }
.wd-hero h1 { margin: 10px 0 12px; }
.wd-hero-sub { font-size: 16.5px; color: var(--ink-3); max-inline-size: 560px; margin: 0 0 26px; }
.wd-hero h1 .wd-accent { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wd-hero-search {
  display: flex;
  align-items: center;
  gap: 12px;
  inline-size: 100%;
  max-inline-size: 620px;
  background: #fff;
  color: var(--ink-3);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 15px 18px;
  font-size: 15.5px;
  box-shadow: 0 1px 2px rgba(15, 26, 53, 0.04);
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.wd-hero-search:hover, .wd-hero-search:focus-visible {
  border-color: var(--blue);
  box-shadow: 0 2px 10px rgba(27, 114, 217, 0.10);
}
.wd-hero-search span { flex: 1; text-align: start; }
.wd-section { margin-block-start: 44px; }

/* ── Cards ───────────────────────────────────────────────────────── */
.wd-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}
.wd-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--card-bg-alt);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 15px 16px;
  color: var(--ink-2);
  overflow: hidden;
  transition: border-color 180ms var(--ease), background 180ms var(--ease),
              transform 180ms var(--ease);
}
.wd-card::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block: 0;
  inline-size: 3px;
  background: var(--grad);
  opacity: 0;
  transition: opacity 180ms var(--ease);
}
.wd-card:hover {
  border-color: var(--tint-blue-strong);
  background: #fff;
  color: var(--ink-2);
}
.wd-card:hover::before { opacity: 1; }
.wd-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 36px; block-size: 36px;
  flex: none;
  color: var(--blue-deep);
  background: var(--tint-blue);
  border-radius: 8px;
}
.wd-card-body { flex: 1; min-inline-size: 0; display: block; }
.wd-card-title { display: block; font-weight: 700; color: var(--ink-1); font-size: 14.5px; }
.wd-card-desc { display: block; font-size: 13px; color: var(--ink-3); margin-block-start: 2px; }
.wd-card-arrow {
  inline-size: 15px;
  color: var(--ink-4);
  margin-block-start: 4px;
  transition: color 150ms var(--ease), transform 180ms var(--ease);
}
.wd-card:hover .wd-card-arrow { color: var(--blue-deep); transform: translateX(2px); }
.wd-rtl .wd-card:hover .wd-card-arrow { transform: translateX(-2px) scaleX(-1); }

/* ── Role cards ──────────────────────────────────────────────────── */
.wd-role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.wd-role-card {
  background: var(--card-bg-alt);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 180ms var(--ease);
}
.wd-role-card:hover { border-color: var(--tint-blue-strong); }
.wd-role-head { display: flex; gap: 12px; align-items: flex-start; }
.wd-role-head h3 { margin: 2px 0 4px; font-size: 16px; }
.wd-role-desc { margin: 0; font-size: 13px; color: var(--ink-3); }
.wd-role-links { list-style: none; margin: 0; padding: 0; flex: 1; }
.wd-role-links a {
  display: block;
  font-size: 13.5px;
  padding: 5px 0;
  color: var(--ink-2);
  border-block-start: 1px solid var(--rule-soft);
}
.wd-role-links li:first-child a { border-block-start: none; }
.wd-role-links a:hover { color: var(--blue-darker); }
.wd-role-count { font-size: 12px; color: var(--ink-4); }

/* ── Workflow ────────────────────────────────────────────────────── */
.wd-workflow {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  counter-reset: none;
}
.wd-workflow li { display: flex; align-items: center; }
.wd-workflow li:not(:last-child)::after {
  content: '';
  inline-size: 28px;
  block-size: 1px;
  background: var(--rule);
  margin-inline: 6px;
}
.wd-workflow a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--ink-2);
  transition: background 150ms var(--ease);
}
.wd-workflow a:hover { background: var(--tint-blue); color: var(--blue-darker); }
.wd-workflow-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 30px; block-size: 30px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--tint-blue-strong);
  color: var(--blue-deep);
  background: #fff;
  font-size: 11.5px;
}
.wd-workflow a:hover .wd-workflow-num {
  border-color: transparent;
  background: var(--grad);
  color: #fff;
}
.wd-workflow-label { font-size: 13.5px; font-weight: 600; max-inline-size: 150px; }

/* ── Article chrome ──────────────────────────────────────────────── */
.wd-breadcrumb { font-size: 13px; color: var(--ink-4); margin-block-end: 18px; }
.wd-breadcrumb a { color: var(--ink-3); }
.wd-breadcrumb a:hover { color: var(--blue-darker); }
.wd-breadcrumb-sep { margin-inline: 7px; color: var(--ink-4); }
.wd-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-3);
  margin-block-end: 14px;
}
.wd-meta .wd-chip .wd-mono { font-size: 12px; color: inherit; }
.wd-meta-plain { color: var(--ink-3); font-size: 12.5px; }
.wd-meta-plain .wd-mono { font-size: 12px; color: var(--ink-3); }
.wd-chip-quiet {
  color: var(--ink-3);
  background: var(--card-bg-alt);
  font-size: 11.5px;
}
.wd-chip-warn {
  color: #92610A;
  background: #FFF9EF;
  border-color: #F1E2C4;
}
.wd-chip-warn .wd-icon { color: #92610A; }
.wd-toolbar {
  display: flex;
  gap: 8px;
  padding-block: 12px 20px;
  border-block-end: 1px solid var(--rule-soft);
  margin-block-end: 8px;
}
.wd-tool {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-3);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 7px;
  padding: 6px 11px;
  transition: color 150ms var(--ease), border-color 150ms var(--ease);
}
.wd-tool:hover { color: var(--blue-darker); border-color: var(--tint-blue-strong); }
.wd-tool .wd-icon { inline-size: 14px; block-size: 14px; }
/* Inline video from the article editor's /video command. The stored
   host is an empty placeholder div; windoor_manual's `manual_embedded`
   turns it into this iframe at display time, so the frame needs a box. */
.wd-video {
  position: relative;
  margin-block: 22px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--header-dark);
  aspect-ratio: 16 / 9;
}
.wd-video iframe {
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  display: block;
}
.wd-tour { margin-block: 20px; }
.wd-tour video { inline-size: 100%; border-radius: 10px; border: 1px solid var(--rule); }
.wd-tour-preview {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--rule);
  aspect-ratio: 2.2;
  max-block-size: 340px;
  cursor: pointer;
  background: var(--header-dark);
  box-shadow: 0 1px 3px rgba(15, 26, 53, 0.06);
  transition: box-shadow 200ms var(--ease), border-color 200ms var(--ease);
}
.wd-tour-preview:hover {
  border-color: var(--tint-blue-strong);
  box-shadow: 0 8px 28px rgba(27, 114, 217, 0.16);
}
.wd-tour-frame {
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  pointer-events: none; /* the preview teases; the overlay owns the click */
}
.wd-tour-pattern {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(21, 92, 176, 0.9), rgba(6, 11, 23, 0.96)),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(59, 158, 255, 0.14) 46px 48px),
    repeating-linear-gradient(0deg, transparent 0 46px, rgba(6, 182, 212, 0.10) 46px 48px);
}
.wd-tour-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(6, 11, 23, 0.10) 30%, rgba(6, 11, 23, 0.55));
  transition: background 200ms var(--ease);
}
.wd-tour-preview:hover .wd-tour-overlay {
  background: linear-gradient(180deg, rgba(6, 11, 23, 0.02) 30%, rgba(6, 11, 23, 0.45));
}
.wd-tour-cta {
  font-size: 15px;
  padding: 13px 24px;
  box-shadow: 0 10px 30px rgba(6, 11, 23, 0.4);
  transition: transform 180ms var(--ease), background 150ms var(--ease);
}
.wd-tour-preview:hover .wd-tour-cta { transform: translateY(-2px) scale(1.02); }
.wd-tour-cta .wd-icon { inline-size: 19px; block-size: 19px; }
.wd-tour-video { aspect-ratio: 16 / 9; max-block-size: 420px; }
.wd-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--blue-deep);
  border: none;
  border-radius: 8px;
  padding: 11px 20px;
  transition: background 150ms var(--ease);
}
.wd-btn-primary:hover { background: var(--blue-darker); color: #fff; }

/* ── Article content ─────────────────────────────────────────────── */
.wd-content { font-size: 15.5px; }
.wd-content p { margin: 0 0 14px; }
.wd-content ul { padding-inline-start: 22px; }
.wd-lede p {
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.7;
  padding-inline-start: 16px;
  border-inline-start: 3px solid;
  border-image: linear-gradient(180deg, #155CB0, #3B9EFF, #06B6D4) 1;
}

/* Steps */
.wd-steps { list-style: none; margin: 14px 0 0; padding: 0; }
.wd-step {
  display: flex;
  gap: 18px;
  padding-block: 18px;
  border-block-start: 1px solid var(--rule-soft);
}
.wd-step:first-child { border-block-start: none; padding-block-start: 6px; }
.wd-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 34px; block-size: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--tint-blue);
  color: var(--blue-darker);
  font-size: 12.5px;
  font-weight: 700;
}
.wd-step-body { flex: 1; min-inline-size: 0; padding-block-start: 4px; }
.wd-step-body strong { color: var(--ink-1); }

/* Callouts */
.wd-callout {
  display: flex;
  gap: 13px;
  border: 1px solid var(--tint-blue-strong);
  background: var(--tint-blue);
  border-radius: 10px;
  padding: 15px 17px;
  margin-block: 22px;
}
.wd-callout p { margin: 0 0 6px; }
.wd-callout ul { margin: 0; padding-inline-start: 18px; }
.wd-callout-icon { color: var(--blue-deep); margin-block-start: 1px; }
.wd-callout-title {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-darker);
}
.wd-rtl .wd-callout-title { letter-spacing: 0.04em; }
.wd-callout-warning {
  background: #FFF9EF;
  border-color: #F1E2C4;
}
.wd-callout-warning .wd-callout-icon,
.wd-callout-warning .wd-callout-title { color: #92610A; }

/* Related / pager / feedback / CTA */
.wd-related { margin-block-start: 40px; }
.wd-pager {
  display: flex;
  gap: 12px;
  margin-block-start: 44px;
}
.wd-pager-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--card-bg-alt);
  transition: border-color 180ms var(--ease), background 180ms var(--ease);
}
.wd-pager-card:hover { border-color: var(--tint-blue-strong); background: #fff; }
.wd-pager-next { text-align: end; align-items: flex-end; }
.wd-pager-title { font-weight: 700; color: var(--ink-1); font-size: 14.5px; }
.wd-pager-spacer { flex: 1; }
.wd-feedback { margin-block-start: 44px; }
.wd-feedback-buttons { display: flex; gap: 8px; }
.wd-feedback-form { margin-block-start: 14px; max-inline-size: 480px; }
.wd-feedback-form label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-2); margin-block-end: 6px; }
.wd-feedback-form textarea {
  inline-size: 100%;
  font: inherit;
  font-size: 14px;
  color: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 10px 12px;
  margin-block-end: 10px;
  resize: vertical;
}
.wd-feedback-form textarea:focus { outline: 2px solid var(--blue); border-color: transparent; }
.wd-feedback-thanks {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--green);
  font-weight: 600;
  font-size: 14px;
}
.wd-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--card-bg);
  padding: 20px 22px;
  margin-block-start: 44px;
}
.wd-cta p { margin: 0; font-weight: 600; color: var(--ink-1); }

/* ── Right rail ──────────────────────────────────────────────────
   Stacked cards — actions, page map, quick rating — the same rail the
   in-app workspace puts beside an article. */
.wd-rail {
  inline-size: 244px;
  flex: none;
  position: sticky;
  inset-block-start: calc(var(--header-h) + 32px);
  max-block-size: calc(100vh - var(--header-h) - 64px);
  overflow-y: auto;
  scrollbar-width: thin;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 13px;
}
.wd-rail-card {
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: #fff;
  padding: 13px 14px;
  box-shadow: 0 1px 3px rgba(15, 26, 53, 0.04);
}
.wd-rail-card-quiet { background: var(--card-bg); }
.wd-rail-actions { display: flex; flex-direction: column; gap: 7px; margin-block-start: 10px; }
.wd-rail-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  inline-size: 100%;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-3);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 7px 12px;
  transition: color 150ms var(--ease), border-color 150ms var(--ease),
              background 150ms var(--ease);
}
.wd-rail-btn:hover {
  color: var(--blue-darker);
  border-color: var(--tint-blue-strong);
  background: var(--tint-blue);
}
.wd-rail-btn .wd-icon { inline-size: 14px; block-size: 14px; }

/* On this page */
.wd-toc ul { list-style: none; margin: 10px 0 0; padding: 0; }
.wd-toc a {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--ink-3);
  padding: 5px 8px;
  border-radius: 6px;
  border-inline-start: 2px solid transparent;
  transition: color 150ms var(--ease), border-color 150ms var(--ease),
              background 150ms var(--ease);
}
.wd-toc a:hover { color: var(--ink-1); background: var(--card-bg); }
.wd-toc a.active {
  color: var(--blue-darker);
  font-weight: 600;
  border-inline-start-color: var(--blue-deep);
}
.wd-toc-chevron {
  inline-size: 11px;
  block-size: 11px;
  flex: none;
  color: var(--blue-deep);
  margin-block-start: 4px;
}
.wd-toc-sub { margin: 0 !important; }
.wd-toc-sub a {
  padding-inline-start: 25px;
  font-size: 12.5px;
  color: var(--ink-4);
}

/* Quick rating */
.wd-rail-fb { text-align: center; }
.wd-rail-fb-q { display: block; font-size: 12px; color: var(--ink-3); margin-block-end: 9px; }
.wd-rail-fb-btns { display: flex; justify-content: center; gap: 8px; }
.wd-rail-fb-btns[hidden] { display: none; }
.wd-rail-fb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 34px;
  block-size: 34px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--rule);
  color: var(--ink-3);
  transition: color 150ms var(--ease), border-color 150ms var(--ease);
}
.wd-rail-fb-btn .wd-icon { inline-size: 15px; block-size: 15px; }
.wd-rail-fb-btn.up:hover { color: var(--green); border-color: var(--green); }
.wd-rail-fb-btn.down:hover { color: #B4413F; border-color: #E2B4B3; }
.wd-rail-fb-done {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--green);
}
.wd-rail-fb-done[hidden] { display: none; }
.wd-rail-fb-done .wd-icon { inline-size: 15px; block-size: 15px; }

/* The rail owns copy/print wherever it is visible; the in-flow toolbar
   is the fallback for the widths that drop the rail. */
@media (min-width: 1241px) {
  .wd-toolbar { display: none; }
}

/* ── Font Awesome glyphs for article content ──────────────────
   Odoo 19 ships the webfont but compiles its CSS into the backend
   bundles, and this docs layout is deliberately standalone — so the
   face and the glyph table are declared here. The table is the COMPLETE
   Font Awesome 4.7 set, generated from Odoo's own
   web/static/src/libs/fontawesome/css/font-awesome.css. It used to be a
   hand-picked subset, which silently blanks any icon an author adds
   later: fa-question-circle, fa-eye, fa-th-large, fa-bullhorn and
   fa-comments all rendered as nothing on the website while looking fine
   in the backend. Shipping the whole table costs ~26KB and ends that
   class of bug. Same font file the backend uses, so an icon looks
   identical in the drawer and here. */
@font-face {
  font-family: 'WD FontAwesome';
  src: url('/web/static/lib/fontawesome/fonts/fontawesome-webfont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.wd-article .fa {
  font-family: 'WD FontAwesome';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--blue-deep);
  margin-inline-end: 2px;
}
/* Sizing helpers, matching the backend bundle — authors reach for
   fa-lg / fa-2x the same way there and here. */
.wd-article .fa-lg { font-size: 1.315em; vertical-align: -6%; }
.wd-article .fa-2x { font-size: 2em; }
.wd-article .fa-3x { font-size: 3em; }
.wd-article .fa-fw { inline-size: 1.28571em; text-align: center; }
.wd-article .fa-500px::before { content: '\f26e'; }
.wd-article .fa-address-book::before { content: '\f2b9'; }
.wd-article .fa-address-book-o::before { content: '\f2ba'; }
.wd-article .fa-address-card::before { content: '\f2bb'; }
.wd-article .fa-address-card-o::before { content: '\f2bc'; }
.wd-article .fa-adjust::before { content: '\f042'; }
.wd-article .fa-adn::before { content: '\f170'; }
.wd-article .fa-align-center::before { content: '\f037'; }
.wd-article .fa-align-justify::before { content: '\f039'; }
.wd-article .fa-align-left::before { content: '\f036'; }
.wd-article .fa-align-right::before { content: '\f038'; }
.wd-article .fa-amazon::before { content: '\f270'; }
.wd-article .fa-ambulance::before { content: '\f0f9'; }
.wd-article .fa-american-sign-language-interpreting::before { content: '\f2a3'; }
.wd-article .fa-anchor::before { content: '\f13d'; }
.wd-article .fa-android::before { content: '\f17b'; }
.wd-article .fa-angellist::before { content: '\f209'; }
.wd-article .fa-angle-double-down::before { content: '\f103'; }
.wd-article .fa-angle-double-left::before { content: '\f100'; }
.wd-article .fa-angle-double-right::before { content: '\f101'; }
.wd-article .fa-angle-double-up::before { content: '\f102'; }
.wd-article .fa-angle-down::before { content: '\f107'; }
.wd-article .fa-angle-left::before { content: '\f104'; }
.wd-article .fa-angle-right::before { content: '\f105'; }
.wd-article .fa-angle-up::before { content: '\f106'; }
.wd-article .fa-apple::before { content: '\f179'; }
.wd-article .fa-archive::before { content: '\f187'; }
.wd-article .fa-area-chart::before { content: '\f1fe'; }
.wd-article .fa-arrow-circle-down::before { content: '\f0ab'; }
.wd-article .fa-arrow-circle-left::before { content: '\f0a8'; }
.wd-article .fa-arrow-circle-o-down::before { content: '\f01a'; }
.wd-article .fa-arrow-circle-o-left::before { content: '\f190'; }
.wd-article .fa-arrow-circle-o-right::before { content: '\f18e'; }
.wd-article .fa-arrow-circle-o-up::before { content: '\f01b'; }
.wd-article .fa-arrow-circle-right::before { content: '\f0a9'; }
.wd-article .fa-arrow-circle-up::before { content: '\f0aa'; }
.wd-article .fa-arrow-down::before { content: '\f063'; }
.wd-article .fa-arrow-left::before { content: '\f060'; }
.wd-article .fa-arrow-right::before { content: '\f061'; }
.wd-article .fa-arrow-up::before { content: '\f062'; }
.wd-article .fa-arrows::before { content: '\f047'; }
.wd-article .fa-arrows-alt::before { content: '\f0b2'; }
.wd-article .fa-arrows-h::before { content: '\f07e'; }
.wd-article .fa-arrows-v::before { content: '\f07d'; }
.wd-article .fa-asl-interpreting::before { content: '\f2a3'; }
.wd-article .fa-assistive-listening-systems::before { content: '\f2a2'; }
.wd-article .fa-asterisk::before { content: '\f069'; }
.wd-article .fa-at::before { content: '\f1fa'; }
.wd-article .fa-audio-description::before { content: '\f29e'; }
.wd-article .fa-automobile::before { content: '\f1b9'; }
.wd-article .fa-backward::before { content: '\f04a'; }
.wd-article .fa-balance-scale::before { content: '\f24e'; }
.wd-article .fa-ban::before { content: '\f05e'; }
.wd-article .fa-bandcamp::before { content: '\f2d5'; }
.wd-article .fa-bank::before { content: '\f19c'; }
.wd-article .fa-bar-chart::before { content: '\f080'; }
.wd-article .fa-bar-chart-o::before { content: '\f080'; }
.wd-article .fa-barcode::before { content: '\f02a'; }
.wd-article .fa-bars::before { content: '\f0c9'; }
.wd-article .fa-bath::before { content: '\f2cd'; }
.wd-article .fa-bathtub::before { content: '\f2cd'; }
.wd-article .fa-battery::before { content: '\f240'; }
.wd-article .fa-battery-0::before { content: '\f244'; }
.wd-article .fa-battery-1::before { content: '\f243'; }
.wd-article .fa-battery-2::before { content: '\f242'; }
.wd-article .fa-battery-3::before { content: '\f241'; }
.wd-article .fa-battery-4::before { content: '\f240'; }
.wd-article .fa-battery-empty::before { content: '\f244'; }
.wd-article .fa-battery-full::before { content: '\f240'; }
.wd-article .fa-battery-half::before { content: '\f242'; }
.wd-article .fa-battery-quarter::before { content: '\f243'; }
.wd-article .fa-battery-three-quarters::before { content: '\f241'; }
.wd-article .fa-bed::before { content: '\f236'; }
.wd-article .fa-beer::before { content: '\f0fc'; }
.wd-article .fa-behance::before { content: '\f1b4'; }
.wd-article .fa-behance-square::before { content: '\f1b5'; }
.wd-article .fa-bell::before { content: '\f0f3'; }
.wd-article .fa-bell-o::before { content: '\f0a2'; }
.wd-article .fa-bell-slash::before { content: '\f1f6'; }
.wd-article .fa-bell-slash-o::before { content: '\f1f7'; }
.wd-article .fa-bicycle::before { content: '\f206'; }
.wd-article .fa-binoculars::before { content: '\f1e5'; }
.wd-article .fa-birthday-cake::before { content: '\f1fd'; }
.wd-article .fa-bitbucket::before { content: '\f171'; }
.wd-article .fa-bitbucket-square::before { content: '\f172'; }
.wd-article .fa-bitcoin::before { content: '\f15a'; }
.wd-article .fa-black-tie::before { content: '\f27e'; }
.wd-article .fa-blind::before { content: '\f29d'; }
.wd-article .fa-bluetooth::before { content: '\f293'; }
.wd-article .fa-bluetooth-b::before { content: '\f294'; }
.wd-article .fa-bold::before { content: '\f032'; }
.wd-article .fa-bolt::before { content: '\f0e7'; }
.wd-article .fa-bomb::before { content: '\f1e2'; }
.wd-article .fa-book::before { content: '\f02d'; }
.wd-article .fa-bookmark::before { content: '\f02e'; }
.wd-article .fa-bookmark-o::before { content: '\f097'; }
.wd-article .fa-braille::before { content: '\f2a1'; }
.wd-article .fa-briefcase::before { content: '\f0b1'; }
.wd-article .fa-btc::before { content: '\f15a'; }
.wd-article .fa-bug::before { content: '\f188'; }
.wd-article .fa-building::before { content: '\f1ad'; }
.wd-article .fa-building-o::before { content: '\f0f7'; }
.wd-article .fa-bullhorn::before { content: '\f0a1'; }
.wd-article .fa-bullseye::before { content: '\f140'; }
.wd-article .fa-bus::before { content: '\f207'; }
.wd-article .fa-buysellads::before { content: '\f20d'; }
.wd-article .fa-cab::before { content: '\f1ba'; }
.wd-article .fa-calculator::before { content: '\f1ec'; }
.wd-article .fa-calendar::before { content: '\f073'; }
.wd-article .fa-calendar-check-o::before { content: '\f274'; }
.wd-article .fa-calendar-minus-o::before { content: '\f272'; }
.wd-article .fa-calendar-o::before { content: '\f133'; }
.wd-article .fa-calendar-plus-o::before { content: '\f271'; }
.wd-article .fa-calendar-times-o::before { content: '\f273'; }
.wd-article .fa-camera::before { content: '\f030'; }
.wd-article .fa-camera-retro::before { content: '\f083'; }
.wd-article .fa-car::before { content: '\f1b9'; }
.wd-article .fa-caret-down::before { content: '\f0d7'; }
.wd-article .fa-caret-left::before { content: '\f0d9'; }
.wd-article .fa-caret-right::before { content: '\f0da'; }
.wd-article .fa-caret-square-o-down::before { content: '\f150'; }
.wd-article .fa-caret-square-o-left::before { content: '\f191'; }
.wd-article .fa-caret-square-o-right::before { content: '\f152'; }
.wd-article .fa-caret-square-o-up::before { content: '\f151'; }
.wd-article .fa-caret-up::before { content: '\f0d8'; }
.wd-article .fa-cart-arrow-down::before { content: '\f218'; }
.wd-article .fa-cart-plus::before { content: '\f217'; }
.wd-article .fa-cc::before { content: '\f20a'; }
.wd-article .fa-cc-amex::before { content: '\f1f3'; }
.wd-article .fa-cc-diners-club::before { content: '\f24c'; }
.wd-article .fa-cc-discover::before { content: '\f1f2'; }
.wd-article .fa-cc-jcb::before { content: '\f24b'; }
.wd-article .fa-cc-mastercard::before { content: '\f1f1'; }
.wd-article .fa-cc-paypal::before { content: '\f1f4'; }
.wd-article .fa-cc-stripe::before { content: '\f1f5'; }
.wd-article .fa-cc-visa::before { content: '\f1f0'; }
.wd-article .fa-certificate::before { content: '\f0a3'; }
.wd-article .fa-chain::before { content: '\f0c1'; }
.wd-article .fa-chain-broken::before { content: '\f127'; }
.wd-article .fa-check::before { content: '\f00c'; }
.wd-article .fa-check-circle::before { content: '\f058'; }
.wd-article .fa-check-circle-o::before { content: '\f05d'; }
.wd-article .fa-check-square::before { content: '\f14a'; }
.wd-article .fa-check-square-o::before { content: '\f046'; }
.wd-article .fa-chevron-circle-down::before { content: '\f13a'; }
.wd-article .fa-chevron-circle-left::before { content: '\f137'; }
.wd-article .fa-chevron-circle-right::before { content: '\f138'; }
.wd-article .fa-chevron-circle-up::before { content: '\f139'; }
.wd-article .fa-chevron-down::before { content: '\f078'; }
.wd-article .fa-chevron-left::before { content: '\f053'; }
.wd-article .fa-chevron-right::before { content: '\f054'; }
.wd-article .fa-chevron-up::before { content: '\f077'; }
.wd-article .fa-child::before { content: '\f1ae'; }
.wd-article .fa-chrome::before { content: '\f268'; }
.wd-article .fa-circle::before { content: '\f111'; }
.wd-article .fa-circle-o::before { content: '\f10c'; }
.wd-article .fa-circle-o-notch::before { content: '\f1ce'; }
.wd-article .fa-circle-thin::before { content: '\f1db'; }
.wd-article .fa-clipboard::before { content: '\f0ea'; }
.wd-article .fa-clock-o::before { content: '\f017'; }
.wd-article .fa-clone::before { content: '\f24d'; }
.wd-article .fa-close::before { content: '\f00d'; }
.wd-article .fa-cloud::before { content: '\f0c2'; }
.wd-article .fa-cloud-download::before { content: '\f0ed'; }
.wd-article .fa-cloud-upload::before { content: '\f0ee'; }
.wd-article .fa-cny::before { content: '\f157'; }
.wd-article .fa-code::before { content: '\f121'; }
.wd-article .fa-code-fork::before { content: '\f126'; }
.wd-article .fa-codepen::before { content: '\f1cb'; }
.wd-article .fa-codiepie::before { content: '\f284'; }
.wd-article .fa-coffee::before { content: '\f0f4'; }
.wd-article .fa-cog::before { content: '\f013'; }
.wd-article .fa-cogs::before { content: '\f085'; }
.wd-article .fa-columns::before { content: '\f0db'; }
.wd-article .fa-comment::before { content: '\f075'; }
.wd-article .fa-comment-o::before { content: '\f0e5'; }
.wd-article .fa-commenting::before { content: '\f27a'; }
.wd-article .fa-commenting-o::before { content: '\f27b'; }
.wd-article .fa-comments::before { content: '\f086'; }
.wd-article .fa-comments-o::before { content: '\f0e6'; }
.wd-article .fa-compass::before { content: '\f14e'; }
.wd-article .fa-compress::before { content: '\f066'; }
.wd-article .fa-connectdevelop::before { content: '\f20e'; }
.wd-article .fa-contao::before { content: '\f26d'; }
.wd-article .fa-copy::before { content: '\f0c5'; }
.wd-article .fa-copyright::before { content: '\f1f9'; }
.wd-article .fa-creative-commons::before { content: '\f25e'; }
.wd-article .fa-credit-card::before { content: '\f09d'; }
.wd-article .fa-credit-card-alt::before { content: '\f283'; }
.wd-article .fa-crop::before { content: '\f125'; }
.wd-article .fa-crosshairs::before { content: '\f05b'; }
.wd-article .fa-css3::before { content: '\f13c'; }
.wd-article .fa-cube::before { content: '\f1b2'; }
.wd-article .fa-cubes::before { content: '\f1b3'; }
.wd-article .fa-cut::before { content: '\f0c4'; }
.wd-article .fa-cutlery::before { content: '\f0f5'; }
.wd-article .fa-dashboard::before { content: '\f0e4'; }
.wd-article .fa-dashcube::before { content: '\f210'; }
.wd-article .fa-database::before { content: '\f1c0'; }
.wd-article .fa-deaf::before { content: '\f2a4'; }
.wd-article .fa-deafness::before { content: '\f2a4'; }
.wd-article .fa-dedent::before { content: '\f03b'; }
.wd-article .fa-delicious::before { content: '\f1a5'; }
.wd-article .fa-desktop::before { content: '\f108'; }
.wd-article .fa-deviantart::before { content: '\f1bd'; }
.wd-article .fa-diamond::before { content: '\f219'; }
.wd-article .fa-digg::before { content: '\f1a6'; }
.wd-article .fa-dollar::before { content: '\f155'; }
.wd-article .fa-dot-circle-o::before { content: '\f192'; }
.wd-article .fa-download::before { content: '\f019'; }
.wd-article .fa-dribbble::before { content: '\f17d'; }
.wd-article .fa-drivers-license::before { content: '\f2c2'; }
.wd-article .fa-drivers-license-o::before { content: '\f2c3'; }
.wd-article .fa-dropbox::before { content: '\f16b'; }
.wd-article .fa-drupal::before { content: '\f1a9'; }
.wd-article .fa-edge::before { content: '\f282'; }
.wd-article .fa-edit::before { content: '\f044'; }
.wd-article .fa-eercast::before { content: '\f2da'; }
.wd-article .fa-eject::before { content: '\f052'; }
.wd-article .fa-ellipsis-h::before { content: '\f141'; }
.wd-article .fa-ellipsis-v::before { content: '\f142'; }
.wd-article .fa-empire::before { content: '\f1d1'; }
.wd-article .fa-envelope::before { content: '\f0e0'; }
.wd-article .fa-envelope-o::before { content: '\f003'; }
.wd-article .fa-envelope-open::before { content: '\f2b6'; }
.wd-article .fa-envelope-open-o::before { content: '\f2b7'; }
.wd-article .fa-envelope-square::before { content: '\f199'; }
.wd-article .fa-envira::before { content: '\f299'; }
.wd-article .fa-eraser::before { content: '\f12d'; }
.wd-article .fa-etsy::before { content: '\f2d7'; }
.wd-article .fa-eur::before { content: '\f153'; }
.wd-article .fa-euro::before { content: '\f153'; }
.wd-article .fa-exchange::before { content: '\f0ec'; }
.wd-article .fa-exclamation::before { content: '\f12a'; }
.wd-article .fa-exclamation-circle::before { content: '\f06a'; }
.wd-article .fa-exclamation-triangle::before { content: '\f071'; }
.wd-article .fa-expand::before { content: '\f065'; }
.wd-article .fa-expeditedssl::before { content: '\f23e'; }
.wd-article .fa-external-link::before { content: '\f08e'; }
.wd-article .fa-external-link-square::before { content: '\f14c'; }
.wd-article .fa-eye::before { content: '\f06e'; }
.wd-article .fa-eye-slash::before { content: '\f070'; }
.wd-article .fa-eyedropper::before { content: '\f1fb'; }
.wd-article .fa-fa::before { content: '\f2b4'; }
.wd-article .fa-facebook::before { content: '\f09a'; }
.wd-article .fa-facebook-f::before { content: '\f09a'; }
.wd-article .fa-facebook-official::before { content: '\f230'; }
.wd-article .fa-facebook-square::before { content: '\f082'; }
.wd-article .fa-fast-backward::before { content: '\f049'; }
.wd-article .fa-fast-forward::before { content: '\f050'; }
.wd-article .fa-fax::before { content: '\f1ac'; }
.wd-article .fa-feed::before { content: '\f09e'; }
.wd-article .fa-female::before { content: '\f182'; }
.wd-article .fa-fighter-jet::before { content: '\f0fb'; }
.wd-article .fa-file::before { content: '\f15b'; }
.wd-article .fa-file-archive-o::before { content: '\f1c6'; }
.wd-article .fa-file-audio-o::before { content: '\f1c7'; }
.wd-article .fa-file-code-o::before { content: '\f1c9'; }
.wd-article .fa-file-excel-o::before { content: '\f1c3'; }
.wd-article .fa-file-image-o::before { content: '\f1c5'; }
.wd-article .fa-file-movie-o::before { content: '\f1c8'; }
.wd-article .fa-file-o::before { content: '\f016'; }
.wd-article .fa-file-pdf-o::before { content: '\f1c1'; }
.wd-article .fa-file-photo-o::before { content: '\f1c5'; }
.wd-article .fa-file-picture-o::before { content: '\f1c5'; }
.wd-article .fa-file-powerpoint-o::before { content: '\f1c4'; }
.wd-article .fa-file-sound-o::before { content: '\f1c7'; }
.wd-article .fa-file-text::before { content: '\f15c'; }
.wd-article .fa-file-text-o::before { content: '\f0f6'; }
.wd-article .fa-file-video-o::before { content: '\f1c8'; }
.wd-article .fa-file-word-o::before { content: '\f1c2'; }
.wd-article .fa-file-zip-o::before { content: '\f1c6'; }
.wd-article .fa-files-o::before { content: '\f0c5'; }
.wd-article .fa-film::before { content: '\f008'; }
.wd-article .fa-filter::before { content: '\f0b0'; }
.wd-article .fa-fire::before { content: '\f06d'; }
.wd-article .fa-fire-extinguisher::before { content: '\f134'; }
.wd-article .fa-firefox::before { content: '\f269'; }
.wd-article .fa-first-order::before { content: '\f2b0'; }
.wd-article .fa-flag::before { content: '\f024'; }
.wd-article .fa-flag-checkered::before { content: '\f11e'; }
.wd-article .fa-flag-o::before { content: '\f11d'; }
.wd-article .fa-flash::before { content: '\f0e7'; }
.wd-article .fa-flask::before { content: '\f0c3'; }
.wd-article .fa-flickr::before { content: '\f16e'; }
.wd-article .fa-floppy-o::before { content: '\f0c7'; }
.wd-article .fa-folder::before { content: '\f07b'; }
.wd-article .fa-folder-o::before { content: '\f114'; }
.wd-article .fa-folder-open::before { content: '\f07c'; }
.wd-article .fa-folder-open-o::before { content: '\f115'; }
.wd-article .fa-font::before { content: '\f031'; }
.wd-article .fa-font-awesome::before { content: '\f2b4'; }
.wd-article .fa-fonticons::before { content: '\f280'; }
.wd-article .fa-fort-awesome::before { content: '\f286'; }
.wd-article .fa-forumbee::before { content: '\f211'; }
.wd-article .fa-forward::before { content: '\f04e'; }
.wd-article .fa-foursquare::before { content: '\f180'; }
.wd-article .fa-free-code-camp::before { content: '\f2c5'; }
.wd-article .fa-frown-o::before { content: '\f119'; }
.wd-article .fa-futbol-o::before { content: '\f1e3'; }
.wd-article .fa-gamepad::before { content: '\f11b'; }
.wd-article .fa-gavel::before { content: '\f0e3'; }
.wd-article .fa-gbp::before { content: '\f154'; }
.wd-article .fa-ge::before { content: '\f1d1'; }
.wd-article .fa-gear::before { content: '\f013'; }
.wd-article .fa-gears::before { content: '\f085'; }
.wd-article .fa-genderless::before { content: '\f22d'; }
.wd-article .fa-get-pocket::before { content: '\f265'; }
.wd-article .fa-gg::before { content: '\f260'; }
.wd-article .fa-gg-circle::before { content: '\f261'; }
.wd-article .fa-gift::before { content: '\f06b'; }
.wd-article .fa-git::before { content: '\f1d3'; }
.wd-article .fa-git-square::before { content: '\f1d2'; }
.wd-article .fa-github::before { content: '\f09b'; }
.wd-article .fa-github-alt::before { content: '\f113'; }
.wd-article .fa-github-square::before { content: '\f092'; }
.wd-article .fa-gitlab::before { content: '\f296'; }
.wd-article .fa-gittip::before { content: '\f184'; }
.wd-article .fa-glass::before { content: '\f000'; }
.wd-article .fa-glide::before { content: '\f2a5'; }
.wd-article .fa-glide-g::before { content: '\f2a6'; }
.wd-article .fa-globe::before { content: '\f0ac'; }
.wd-article .fa-google::before { content: '\f1a0'; }
.wd-article .fa-google-plus::before { content: '\f0d5'; }
.wd-article .fa-google-plus-circle::before { content: '\f2b3'; }
.wd-article .fa-google-plus-official::before { content: '\f2b3'; }
.wd-article .fa-google-plus-square::before { content: '\f0d4'; }
.wd-article .fa-google-wallet::before { content: '\f1ee'; }
.wd-article .fa-graduation-cap::before { content: '\f19d'; }
.wd-article .fa-gratipay::before { content: '\f184'; }
.wd-article .fa-grav::before { content: '\f2d6'; }
.wd-article .fa-group::before { content: '\f0c0'; }
.wd-article .fa-h-square::before { content: '\f0fd'; }
.wd-article .fa-hacker-news::before { content: '\f1d4'; }
.wd-article .fa-hand-grab-o::before { content: '\f255'; }
.wd-article .fa-hand-lizard-o::before { content: '\f258'; }
.wd-article .fa-hand-o-down::before { content: '\f0a7'; }
.wd-article .fa-hand-o-left::before { content: '\f0a5'; }
.wd-article .fa-hand-o-right::before { content: '\f0a4'; }
.wd-article .fa-hand-o-up::before { content: '\f0a6'; }
.wd-article .fa-hand-paper-o::before { content: '\f256'; }
.wd-article .fa-hand-peace-o::before { content: '\f25b'; }
.wd-article .fa-hand-pointer-o::before { content: '\f25a'; }
.wd-article .fa-hand-rock-o::before { content: '\f255'; }
.wd-article .fa-hand-scissors-o::before { content: '\f257'; }
.wd-article .fa-hand-spock-o::before { content: '\f259'; }
.wd-article .fa-hand-stop-o::before { content: '\f256'; }
.wd-article .fa-handshake-o::before { content: '\f2b5'; }
.wd-article .fa-hard-of-hearing::before { content: '\f2a4'; }
.wd-article .fa-hashtag::before { content: '\f292'; }
.wd-article .fa-hdd-o::before { content: '\f0a0'; }
.wd-article .fa-header::before { content: '\f1dc'; }
.wd-article .fa-headphones::before { content: '\f025'; }
.wd-article .fa-heart::before { content: '\f004'; }
.wd-article .fa-heart-o::before { content: '\f08a'; }
.wd-article .fa-heartbeat::before { content: '\f21e'; }
.wd-article .fa-history::before { content: '\f1da'; }
.wd-article .fa-home::before { content: '\f015'; }
.wd-article .fa-hospital-o::before { content: '\f0f8'; }
.wd-article .fa-hotel::before { content: '\f236'; }
.wd-article .fa-hourglass::before { content: '\f254'; }
.wd-article .fa-hourglass-1::before { content: '\f251'; }
.wd-article .fa-hourglass-2::before { content: '\f252'; }
.wd-article .fa-hourglass-3::before { content: '\f253'; }
.wd-article .fa-hourglass-end::before { content: '\f253'; }
.wd-article .fa-hourglass-half::before { content: '\f252'; }
.wd-article .fa-hourglass-o::before { content: '\f250'; }
.wd-article .fa-hourglass-start::before { content: '\f251'; }
.wd-article .fa-houzz::before { content: '\f27c'; }
.wd-article .fa-html5::before { content: '\f13b'; }
.wd-article .fa-i-cursor::before { content: '\f246'; }
.wd-article .fa-id-badge::before { content: '\f2c1'; }
.wd-article .fa-id-card::before { content: '\f2c2'; }
.wd-article .fa-id-card-o::before { content: '\f2c3'; }
.wd-article .fa-ils::before { content: '\f20b'; }
.wd-article .fa-image::before { content: '\f03e'; }
.wd-article .fa-imdb::before { content: '\f2d8'; }
.wd-article .fa-inbox::before { content: '\f01c'; }
.wd-article .fa-indent::before { content: '\f03c'; }
.wd-article .fa-industry::before { content: '\f275'; }
.wd-article .fa-info::before { content: '\f129'; }
.wd-article .fa-info-circle::before { content: '\f05a'; }
.wd-article .fa-inr::before { content: '\f156'; }
.wd-article .fa-instagram::before { content: '\f16d'; }
.wd-article .fa-institution::before { content: '\f19c'; }
.wd-article .fa-internet-explorer::before { content: '\f26b'; }
.wd-article .fa-intersex::before { content: '\f224'; }
.wd-article .fa-ioxhost::before { content: '\f208'; }
.wd-article .fa-italic::before { content: '\f033'; }
.wd-article .fa-joomla::before { content: '\f1aa'; }
.wd-article .fa-jpy::before { content: '\f157'; }
.wd-article .fa-jsfiddle::before { content: '\f1cc'; }
.wd-article .fa-key::before { content: '\f084'; }
.wd-article .fa-keyboard-o::before { content: '\f11c'; }
.wd-article .fa-krw::before { content: '\f159'; }
.wd-article .fa-language::before { content: '\f1ab'; }
.wd-article .fa-laptop::before { content: '\f109'; }
.wd-article .fa-lastfm::before { content: '\f202'; }
.wd-article .fa-lastfm-square::before { content: '\f203'; }
.wd-article .fa-leaf::before { content: '\f06c'; }
.wd-article .fa-leanpub::before { content: '\f212'; }
.wd-article .fa-legal::before { content: '\f0e3'; }
.wd-article .fa-lemon-o::before { content: '\f094'; }
.wd-article .fa-level-down::before { content: '\f149'; }
.wd-article .fa-level-up::before { content: '\f148'; }
.wd-article .fa-life-bouy::before { content: '\f1cd'; }
.wd-article .fa-life-buoy::before { content: '\f1cd'; }
.wd-article .fa-life-ring::before { content: '\f1cd'; }
.wd-article .fa-life-saver::before { content: '\f1cd'; }
.wd-article .fa-lightbulb-o::before { content: '\f0eb'; }
.wd-article .fa-line-chart::before { content: '\f201'; }
.wd-article .fa-link::before { content: '\f0c1'; }
.wd-article .fa-linkedin::before { content: '\f0e1'; }
.wd-article .fa-linkedin-square::before { content: '\f08c'; }
.wd-article .fa-linode::before { content: '\f2b8'; }
.wd-article .fa-linux::before { content: '\f17c'; }
.wd-article .fa-list::before { content: '\f03a'; }
.wd-article .fa-list-alt::before { content: '\f022'; }
.wd-article .fa-list-ol::before { content: '\f0cb'; }
.wd-article .fa-list-ul::before { content: '\f0ca'; }
.wd-article .fa-location-arrow::before { content: '\f124'; }
.wd-article .fa-lock::before { content: '\f023'; }
.wd-article .fa-long-arrow-down::before { content: '\f175'; }
.wd-article .fa-long-arrow-left::before { content: '\f177'; }
.wd-article .fa-long-arrow-right::before { content: '\f178'; }
.wd-article .fa-long-arrow-up::before { content: '\f176'; }
.wd-article .fa-low-vision::before { content: '\f2a8'; }
.wd-article .fa-magic::before { content: '\f0d0'; }
.wd-article .fa-magnet::before { content: '\f076'; }
.wd-article .fa-mail-forward::before { content: '\f064'; }
.wd-article .fa-mail-reply::before { content: '\f112'; }
.wd-article .fa-mail-reply-all::before { content: '\f122'; }
.wd-article .fa-male::before { content: '\f183'; }
.wd-article .fa-map::before { content: '\f279'; }
.wd-article .fa-map-marker::before { content: '\f041'; }
.wd-article .fa-map-o::before { content: '\f278'; }
.wd-article .fa-map-pin::before { content: '\f276'; }
.wd-article .fa-map-signs::before { content: '\f277'; }
.wd-article .fa-mars::before { content: '\f222'; }
.wd-article .fa-mars-double::before { content: '\f227'; }
.wd-article .fa-mars-stroke::before { content: '\f229'; }
.wd-article .fa-mars-stroke-h::before { content: '\f22b'; }
.wd-article .fa-mars-stroke-v::before { content: '\f22a'; }
.wd-article .fa-maxcdn::before { content: '\f136'; }
.wd-article .fa-meanpath::before { content: '\f20c'; }
.wd-article .fa-medium::before { content: '\f23a'; }
.wd-article .fa-medkit::before { content: '\f0fa'; }
.wd-article .fa-meetup::before { content: '\f2e0'; }
.wd-article .fa-meh-o::before { content: '\f11a'; }
.wd-article .fa-mercury::before { content: '\f223'; }
.wd-article .fa-microchip::before { content: '\f2db'; }
.wd-article .fa-microphone::before { content: '\f130'; }
.wd-article .fa-microphone-slash::before { content: '\f131'; }
.wd-article .fa-minus::before { content: '\f068'; }
.wd-article .fa-minus-circle::before { content: '\f056'; }
.wd-article .fa-minus-square::before { content: '\f146'; }
.wd-article .fa-minus-square-o::before { content: '\f147'; }
.wd-article .fa-mixcloud::before { content: '\f289'; }
.wd-article .fa-mobile::before { content: '\f10b'; }
.wd-article .fa-mobile-phone::before { content: '\f10b'; }
.wd-article .fa-modx::before { content: '\f285'; }
.wd-article .fa-money::before { content: '\f0d6'; }
.wd-article .fa-moon-o::before { content: '\f186'; }
.wd-article .fa-mortar-board::before { content: '\f19d'; }
.wd-article .fa-motorcycle::before { content: '\f21c'; }
.wd-article .fa-mouse-pointer::before { content: '\f245'; }
.wd-article .fa-music::before { content: '\f001'; }
.wd-article .fa-navicon::before { content: '\f0c9'; }
.wd-article .fa-neuter::before { content: '\f22c'; }
.wd-article .fa-newspaper-o::before { content: '\f1ea'; }
.wd-article .fa-object-group::before { content: '\f247'; }
.wd-article .fa-object-ungroup::before { content: '\f248'; }
.wd-article .fa-odnoklassniki::before { content: '\f263'; }
.wd-article .fa-odnoklassniki-square::before { content: '\f264'; }
.wd-article .fa-opencart::before { content: '\f23d'; }
.wd-article .fa-openid::before { content: '\f19b'; }
.wd-article .fa-opera::before { content: '\f26a'; }
.wd-article .fa-optin-monster::before { content: '\f23c'; }
.wd-article .fa-outdent::before { content: '\f03b'; }
.wd-article .fa-pagelines::before { content: '\f18c'; }
.wd-article .fa-paint-brush::before { content: '\f1fc'; }
.wd-article .fa-paper-plane::before { content: '\f1d8'; }
.wd-article .fa-paper-plane-o::before { content: '\f1d9'; }
.wd-article .fa-paperclip::before { content: '\f0c6'; }
.wd-article .fa-paragraph::before { content: '\f1dd'; }
.wd-article .fa-paste::before { content: '\f0ea'; }
.wd-article .fa-pause::before { content: '\f04c'; }
.wd-article .fa-pause-circle::before { content: '\f28b'; }
.wd-article .fa-pause-circle-o::before { content: '\f28c'; }
.wd-article .fa-paw::before { content: '\f1b0'; }
.wd-article .fa-paypal::before { content: '\f1ed'; }
.wd-article .fa-pencil::before { content: '\f040'; }
.wd-article .fa-pencil-square::before { content: '\f14b'; }
.wd-article .fa-pencil-square-o::before { content: '\f044'; }
.wd-article .fa-percent::before { content: '\f295'; }
.wd-article .fa-phone::before { content: '\f095'; }
.wd-article .fa-phone-square::before { content: '\f098'; }
.wd-article .fa-photo::before { content: '\f03e'; }
.wd-article .fa-picture-o::before { content: '\f03e'; }
.wd-article .fa-pie-chart::before { content: '\f200'; }
.wd-article .fa-pied-piper::before { content: '\f2ae'; }
.wd-article .fa-pied-piper-alt::before { content: '\f1a8'; }
.wd-article .fa-pied-piper-pp::before { content: '\f1a7'; }
.wd-article .fa-pinterest::before { content: '\f0d2'; }
.wd-article .fa-pinterest-p::before { content: '\f231'; }
.wd-article .fa-pinterest-square::before { content: '\f0d3'; }
.wd-article .fa-plane::before { content: '\f072'; }
.wd-article .fa-play::before { content: '\f04b'; }
.wd-article .fa-play-circle::before { content: '\f144'; }
.wd-article .fa-play-circle-o::before { content: '\f01d'; }
.wd-article .fa-plug::before { content: '\f1e6'; }
.wd-article .fa-plus::before { content: '\f067'; }
.wd-article .fa-plus-circle::before { content: '\f055'; }
.wd-article .fa-plus-square::before { content: '\f0fe'; }
.wd-article .fa-plus-square-o::before { content: '\f196'; }
.wd-article .fa-podcast::before { content: '\f2ce'; }
.wd-article .fa-power-off::before { content: '\f011'; }
.wd-article .fa-print::before { content: '\f02f'; }
.wd-article .fa-product-hunt::before { content: '\f288'; }
.wd-article .fa-puzzle-piece::before { content: '\f12e'; }
.wd-article .fa-qq::before { content: '\f1d6'; }
.wd-article .fa-qrcode::before { content: '\f029'; }
.wd-article .fa-question::before { content: '\f128'; }
.wd-article .fa-question-circle::before { content: '\f059'; }
.wd-article .fa-question-circle-o::before { content: '\f29c'; }
.wd-article .fa-quora::before { content: '\f2c4'; }
.wd-article .fa-quote-left::before { content: '\f10d'; }
.wd-article .fa-quote-right::before { content: '\f10e'; }
.wd-article .fa-ra::before { content: '\f1d0'; }
.wd-article .fa-random::before { content: '\f074'; }
.wd-article .fa-ravelry::before { content: '\f2d9'; }
.wd-article .fa-rebel::before { content: '\f1d0'; }
.wd-article .fa-recycle::before { content: '\f1b8'; }
.wd-article .fa-reddit::before { content: '\f1a1'; }
.wd-article .fa-reddit-alien::before { content: '\f281'; }
.wd-article .fa-reddit-square::before { content: '\f1a2'; }
.wd-article .fa-refresh::before { content: '\f021'; }
.wd-article .fa-registered::before { content: '\f25d'; }
.wd-article .fa-remove::before { content: '\f00d'; }
.wd-article .fa-renren::before { content: '\f18b'; }
.wd-article .fa-reorder::before { content: '\f0c9'; }
.wd-article .fa-repeat::before { content: '\f01e'; }
.wd-article .fa-reply::before { content: '\f112'; }
.wd-article .fa-reply-all::before { content: '\f122'; }
.wd-article .fa-resistance::before { content: '\f1d0'; }
.wd-article .fa-retweet::before { content: '\f079'; }
.wd-article .fa-rmb::before { content: '\f157'; }
.wd-article .fa-road::before { content: '\f018'; }
.wd-article .fa-rocket::before { content: '\f135'; }
.wd-article .fa-rotate-left::before { content: '\f0e2'; }
.wd-article .fa-rotate-right::before { content: '\f01e'; }
.wd-article .fa-rouble::before { content: '\f158'; }
.wd-article .fa-rss::before { content: '\f09e'; }
.wd-article .fa-rss-square::before { content: '\f143'; }
.wd-article .fa-rub::before { content: '\f158'; }
.wd-article .fa-ruble::before { content: '\f158'; }
.wd-article .fa-rupee::before { content: '\f156'; }
.wd-article .fa-s15::before { content: '\f2cd'; }
.wd-article .fa-safari::before { content: '\f267'; }
.wd-article .fa-save::before { content: '\f0c7'; }
.wd-article .fa-scissors::before { content: '\f0c4'; }
.wd-article .fa-scribd::before { content: '\f28a'; }
.wd-article .fa-search::before { content: '\f002'; }
.wd-article .fa-search-minus::before { content: '\f010'; }
.wd-article .fa-search-plus::before { content: '\f00e'; }
.wd-article .fa-sellsy::before { content: '\f213'; }
.wd-article .fa-send::before { content: '\f1d8'; }
.wd-article .fa-send-o::before { content: '\f1d9'; }
.wd-article .fa-server::before { content: '\f233'; }
.wd-article .fa-share::before { content: '\f064'; }
.wd-article .fa-share-alt::before { content: '\f1e0'; }
.wd-article .fa-share-alt-square::before { content: '\f1e1'; }
.wd-article .fa-share-square::before { content: '\f14d'; }
.wd-article .fa-share-square-o::before { content: '\f045'; }
.wd-article .fa-shekel::before { content: '\f20b'; }
.wd-article .fa-sheqel::before { content: '\f20b'; }
.wd-article .fa-shield::before { content: '\f132'; }
.wd-article .fa-ship::before { content: '\f21a'; }
.wd-article .fa-shirtsinbulk::before { content: '\f214'; }
.wd-article .fa-shopping-bag::before { content: '\f290'; }
.wd-article .fa-shopping-basket::before { content: '\f291'; }
.wd-article .fa-shopping-cart::before { content: '\f07a'; }
.wd-article .fa-shower::before { content: '\f2cc'; }
.wd-article .fa-sign-in::before { content: '\f090'; }
.wd-article .fa-sign-language::before { content: '\f2a7'; }
.wd-article .fa-sign-out::before { content: '\f08b'; }
.wd-article .fa-signal::before { content: '\f012'; }
.wd-article .fa-signing::before { content: '\f2a7'; }
.wd-article .fa-simplybuilt::before { content: '\f215'; }
.wd-article .fa-sitemap::before { content: '\f0e8'; }
.wd-article .fa-skyatlas::before { content: '\f216'; }
.wd-article .fa-skype::before { content: '\f17e'; }
.wd-article .fa-slack::before { content: '\f198'; }
.wd-article .fa-sliders::before { content: '\f1de'; }
.wd-article .fa-slideshare::before { content: '\f1e7'; }
.wd-article .fa-smile-o::before { content: '\f118'; }
.wd-article .fa-snapchat::before { content: '\f2ab'; }
.wd-article .fa-snapchat-ghost::before { content: '\f2ac'; }
.wd-article .fa-snapchat-square::before { content: '\f2ad'; }
.wd-article .fa-snowflake-o::before { content: '\f2dc'; }
.wd-article .fa-soccer-ball-o::before { content: '\f1e3'; }
.wd-article .fa-sort::before { content: '\f0dc'; }
.wd-article .fa-sort-alpha-asc::before { content: '\f15d'; }
.wd-article .fa-sort-alpha-desc::before { content: '\f15e'; }
.wd-article .fa-sort-amount-asc::before { content: '\f160'; }
.wd-article .fa-sort-amount-desc::before { content: '\f161'; }
.wd-article .fa-sort-asc::before { content: '\f0de'; }
.wd-article .fa-sort-desc::before { content: '\f0dd'; }
.wd-article .fa-sort-down::before { content: '\f0dd'; }
.wd-article .fa-sort-numeric-asc::before { content: '\f162'; }
.wd-article .fa-sort-numeric-desc::before { content: '\f163'; }
.wd-article .fa-sort-up::before { content: '\f0de'; }
.wd-article .fa-soundcloud::before { content: '\f1be'; }
.wd-article .fa-space-shuttle::before { content: '\f197'; }
.wd-article .fa-spinner::before { content: '\f110'; }
.wd-article .fa-spoon::before { content: '\f1b1'; }
.wd-article .fa-spotify::before { content: '\f1bc'; }
.wd-article .fa-square::before { content: '\f0c8'; }
.wd-article .fa-square-o::before { content: '\f096'; }
.wd-article .fa-stack-exchange::before { content: '\f18d'; }
.wd-article .fa-stack-overflow::before { content: '\f16c'; }
.wd-article .fa-star::before { content: '\f005'; }
.wd-article .fa-star-half::before { content: '\f089'; }
.wd-article .fa-star-half-empty::before { content: '\f123'; }
.wd-article .fa-star-half-full::before { content: '\f123'; }
.wd-article .fa-star-half-o::before { content: '\f123'; }
.wd-article .fa-star-o::before { content: '\f006'; }
.wd-article .fa-steam::before { content: '\f1b6'; }
.wd-article .fa-steam-square::before { content: '\f1b7'; }
.wd-article .fa-step-backward::before { content: '\f048'; }
.wd-article .fa-step-forward::before { content: '\f051'; }
.wd-article .fa-stethoscope::before { content: '\f0f1'; }
.wd-article .fa-sticky-note::before { content: '\f249'; }
.wd-article .fa-sticky-note-o::before { content: '\f24a'; }
.wd-article .fa-stop::before { content: '\f04d'; }
.wd-article .fa-stop-circle::before { content: '\f28d'; }
.wd-article .fa-stop-circle-o::before { content: '\f28e'; }
.wd-article .fa-street-view::before { content: '\f21d'; }
.wd-article .fa-strikethrough::before { content: '\f0cc'; }
.wd-article .fa-stumbleupon::before { content: '\f1a4'; }
.wd-article .fa-stumbleupon-circle::before { content: '\f1a3'; }
.wd-article .fa-subscript::before { content: '\f12c'; }
.wd-article .fa-subway::before { content: '\f239'; }
.wd-article .fa-suitcase::before { content: '\f0f2'; }
.wd-article .fa-sun-o::before { content: '\f185'; }
.wd-article .fa-superpowers::before { content: '\f2dd'; }
.wd-article .fa-superscript::before { content: '\f12b'; }
.wd-article .fa-support::before { content: '\f1cd'; }
.wd-article .fa-table::before { content: '\f0ce'; }
.wd-article .fa-tablet::before { content: '\f10a'; }
.wd-article .fa-tachometer::before { content: '\f0e4'; }
.wd-article .fa-tag::before { content: '\f02b'; }
.wd-article .fa-tags::before { content: '\f02c'; }
.wd-article .fa-tasks::before { content: '\f0ae'; }
.wd-article .fa-taxi::before { content: '\f1ba'; }
.wd-article .fa-telegram::before { content: '\f2c6'; }
.wd-article .fa-television::before { content: '\f26c'; }
.wd-article .fa-tencent-weibo::before { content: '\f1d5'; }
.wd-article .fa-terminal::before { content: '\f120'; }
.wd-article .fa-text-height::before { content: '\f034'; }
.wd-article .fa-text-width::before { content: '\f035'; }
.wd-article .fa-th::before { content: '\f00a'; }
.wd-article .fa-th-large::before { content: '\f009'; }
.wd-article .fa-th-list::before { content: '\f00b'; }
.wd-article .fa-themeisle::before { content: '\f2b2'; }
.wd-article .fa-thermometer::before { content: '\f2c7'; }
.wd-article .fa-thermometer-0::before { content: '\f2cb'; }
.wd-article .fa-thermometer-1::before { content: '\f2ca'; }
.wd-article .fa-thermometer-2::before { content: '\f2c9'; }
.wd-article .fa-thermometer-3::before { content: '\f2c8'; }
.wd-article .fa-thermometer-4::before { content: '\f2c7'; }
.wd-article .fa-thermometer-empty::before { content: '\f2cb'; }
.wd-article .fa-thermometer-full::before { content: '\f2c7'; }
.wd-article .fa-thermometer-half::before { content: '\f2c9'; }
.wd-article .fa-thermometer-quarter::before { content: '\f2ca'; }
.wd-article .fa-thermometer-three-quarters::before { content: '\f2c8'; }
.wd-article .fa-thumb-tack::before { content: '\f08d'; }
.wd-article .fa-thumbs-down::before { content: '\f165'; }
.wd-article .fa-thumbs-o-down::before { content: '\f088'; }
.wd-article .fa-thumbs-o-up::before { content: '\f087'; }
.wd-article .fa-thumbs-up::before { content: '\f164'; }
.wd-article .fa-ticket::before { content: '\f145'; }
.wd-article .fa-times::before { content: '\f00d'; }
.wd-article .fa-times-circle::before { content: '\f057'; }
.wd-article .fa-times-circle-o::before { content: '\f05c'; }
.wd-article .fa-times-rectangle::before { content: '\f2d3'; }
.wd-article .fa-times-rectangle-o::before { content: '\f2d4'; }
.wd-article .fa-tint::before { content: '\f043'; }
.wd-article .fa-toggle-down::before { content: '\f150'; }
.wd-article .fa-toggle-left::before { content: '\f191'; }
.wd-article .fa-toggle-off::before { content: '\f204'; }
.wd-article .fa-toggle-on::before { content: '\f205'; }
.wd-article .fa-toggle-right::before { content: '\f152'; }
.wd-article .fa-toggle-up::before { content: '\f151'; }
.wd-article .fa-trademark::before { content: '\f25c'; }
.wd-article .fa-train::before { content: '\f238'; }
.wd-article .fa-transgender::before { content: '\f224'; }
.wd-article .fa-transgender-alt::before { content: '\f225'; }
.wd-article .fa-trash::before { content: '\f1f8'; }
.wd-article .fa-trash-o::before { content: '\f014'; }
.wd-article .fa-tree::before { content: '\f1bb'; }
.wd-article .fa-trello::before { content: '\f181'; }
.wd-article .fa-tripadvisor::before { content: '\f262'; }
.wd-article .fa-trophy::before { content: '\f091'; }
.wd-article .fa-truck::before { content: '\f0d1'; }
.wd-article .fa-try::before { content: '\f195'; }
.wd-article .fa-tty::before { content: '\f1e4'; }
.wd-article .fa-tumblr::before { content: '\f173'; }
.wd-article .fa-tumblr-square::before { content: '\f174'; }
.wd-article .fa-turkish-lira::before { content: '\f195'; }
.wd-article .fa-tv::before { content: '\f26c'; }
.wd-article .fa-twitch::before { content: '\f1e8'; }
.wd-article .fa-twitter::before { content: '\f099'; }
.wd-article .fa-twitter-square::before { content: '\f081'; }
.wd-article .fa-umbrella::before { content: '\f0e9'; }
.wd-article .fa-underline::before { content: '\f0cd'; }
.wd-article .fa-undo::before { content: '\f0e2'; }
.wd-article .fa-universal-access::before { content: '\f29a'; }
.wd-article .fa-university::before { content: '\f19c'; }
.wd-article .fa-unlink::before { content: '\f127'; }
.wd-article .fa-unlock::before { content: '\f09c'; }
.wd-article .fa-unlock-alt::before { content: '\f13e'; }
.wd-article .fa-unsorted::before { content: '\f0dc'; }
.wd-article .fa-upload::before { content: '\f093'; }
.wd-article .fa-usb::before { content: '\f287'; }
.wd-article .fa-usd::before { content: '\f155'; }
.wd-article .fa-user::before { content: '\f007'; }
.wd-article .fa-user-circle::before { content: '\f2bd'; }
.wd-article .fa-user-circle-o::before { content: '\f2be'; }
.wd-article .fa-user-md::before { content: '\f0f0'; }
.wd-article .fa-user-o::before { content: '\f2c0'; }
.wd-article .fa-user-plus::before { content: '\f234'; }
.wd-article .fa-user-secret::before { content: '\f21b'; }
.wd-article .fa-user-times::before { content: '\f235'; }
.wd-article .fa-users::before { content: '\f0c0'; }
.wd-article .fa-vcard::before { content: '\f2bb'; }
.wd-article .fa-vcard-o::before { content: '\f2bc'; }
.wd-article .fa-venus::before { content: '\f221'; }
.wd-article .fa-venus-double::before { content: '\f226'; }
.wd-article .fa-venus-mars::before { content: '\f228'; }
.wd-article .fa-viacoin::before { content: '\f237'; }
.wd-article .fa-viadeo::before { content: '\f2a9'; }
.wd-article .fa-viadeo-square::before { content: '\f2aa'; }
.wd-article .fa-video-camera::before { content: '\f03d'; }
.wd-article .fa-vimeo::before { content: '\f27d'; }
.wd-article .fa-vimeo-square::before { content: '\f194'; }
.wd-article .fa-vine::before { content: '\f1ca'; }
.wd-article .fa-vk::before { content: '\f189'; }
.wd-article .fa-volume-control-phone::before { content: '\f2a0'; }
.wd-article .fa-volume-down::before { content: '\f027'; }
.wd-article .fa-volume-off::before { content: '\f026'; }
.wd-article .fa-volume-up::before { content: '\f028'; }
.wd-article .fa-warning::before { content: '\f071'; }
.wd-article .fa-wechat::before { content: '\f1d7'; }
.wd-article .fa-weibo::before { content: '\f18a'; }
.wd-article .fa-weixin::before { content: '\f1d7'; }
.wd-article .fa-whatsapp::before { content: '\f232'; }
.wd-article .fa-wheelchair::before { content: '\f193'; }
.wd-article .fa-wheelchair-alt::before { content: '\f29b'; }
.wd-article .fa-wifi::before { content: '\f1eb'; }
.wd-article .fa-wikipedia-w::before { content: '\f266'; }
.wd-article .fa-window-close::before { content: '\f2d3'; }
.wd-article .fa-window-close-o::before { content: '\f2d4'; }
.wd-article .fa-window-maximize::before { content: '\f2d0'; }
.wd-article .fa-window-minimize::before { content: '\f2d1'; }
.wd-article .fa-window-restore::before { content: '\f2d2'; }
.wd-article .fa-windows::before { content: '\f17a'; }
.wd-article .fa-won::before { content: '\f159'; }
.wd-article .fa-wordpress::before { content: '\f19a'; }
.wd-article .fa-wpbeginner::before { content: '\f297'; }
.wd-article .fa-wpexplorer::before { content: '\f2de'; }
.wd-article .fa-wpforms::before { content: '\f298'; }
.wd-article .fa-wrench::before { content: '\f0ad'; }
.wd-article .fa-xing::before { content: '\f168'; }
.wd-article .fa-xing-square::before { content: '\f169'; }
.wd-article .fa-y-combinator::before { content: '\f23b'; }
.wd-article .fa-y-combinator-square::before { content: '\f1d4'; }
.wd-article .fa-yahoo::before { content: '\f19e'; }
.wd-article .fa-yc::before { content: '\f23b'; }
.wd-article .fa-yc-square::before { content: '\f1d4'; }
.wd-article .fa-yelp::before { content: '\f1e9'; }
.wd-article .fa-yen::before { content: '\f157'; }
.wd-article .fa-yoast::before { content: '\f2b1'; }
.wd-article .fa-youtube::before { content: '\f167'; }
.wd-article .fa-youtube-play::before { content: '\f16a'; }
.wd-article .fa-youtube-square::before { content: '\f166'; }

/* ── Reference structure: authored callouts, sub-headings, tables ── */
.wd-article h2 {
  padding-block-end: 7px;
  border-block-end: 1px solid var(--rule-soft);
  margin-block: 38px 14px;
}
.wd-article h2:first-of-type { margin-block-start: 24px; }
.wd-article h3 {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-block: 26px 8px;
  scroll-margin-block-start: calc(var(--header-h) + 20px);
}
.wd-callout.wd-note { background: var(--tint-blue); border-color: var(--tint-blue-strong); }
.wd-callout.wd-important { background: #FFF4F4; border-color: #F2D6D6; }
.wd-callout.wd-important .wd-callout-title { color: #9B2C2C; }
.wd-callout.wd-example { background: #F6F8FA; border-color: var(--rule-soft); }
.wd-callout.wd-example .wd-callout-title { color: var(--ink-3); }
.wd-callout.wd-seealso { background: transparent; border-style: dashed; }
.wd-callout.wd-seealso .wd-callout-title { color: var(--ink-3); }
.wd-callout > div { min-inline-size: 0; }
.wd-article table {
  inline-size: 100%;
  border-collapse: collapse;
  margin-block: 20px;
  font-size: 0.94rem;
}
.wd-article table th,
.wd-article table td {
  border: 1px solid var(--rule-soft);
  padding: 9px 12px;
  text-align: start;
  vertical-align: top;
}
.wd-article table th { background: #F6F8FA; font-weight: 700; }
.wd-table-scroll { overflow-x: auto; }
.wd-article kbd {
  font-family: var(--font-mono);
  font-size: 0.85em;
  padding: 2px 6px;
  border: 1px solid var(--rule);
  border-block-end-width: 2px;
  border-radius: 5px;
  background: #F6F8FA;
  color: var(--ink-1);
  white-space: nowrap;
}
.wd-article pre {
  background: #0F1729;
  color: #E7EDF6;
  padding: 14px 16px;
  border-radius: 10px;
  overflow-x: auto;
  margin-block: 18px;
}
.wd-article pre code { font-family: var(--font-mono); font-size: 0.86rem; }
.wd-article :not(pre) > code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: #F1F4F9;
  padding: 1px 5px;
  border-radius: 4px;
}

/* ── Command palette ─────────────────────────────────────────────── */
.wd-palette { position: fixed; inset: 0; z-index: 100; }
.wd-palette-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 11, 23, 0.55);
  backdrop-filter: blur(2px);
}
.wd-palette-panel {
  position: relative;
  max-inline-size: 620px;
  margin: 12vh auto 0;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--rule);
  box-shadow: 0 24px 70px rgba(6, 11, 23, 0.35);
  overflow: hidden;
  animation: wd-pop 180ms var(--ease);
}
@keyframes wd-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.99); }
  to { opacity: 1; transform: none; }
}
.wd-palette-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px 0;
}
.wd-palette-inputwrap {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 16px;
  border-block-end: 1px solid var(--rule-soft);
  color: var(--ink-4);
}
.wd-palette-inputwrap input {
  flex: 1;
  border: none;
  outline: none;
  font: inherit;
  font-size: 16px;
  color: var(--ink-1);
  background: none;
}
.wd-palette-results { max-block-size: 46vh; overflow-y: auto; padding: 8px; }
.wd-palette-hit {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--ink-2);
}
.wd-palette-hit .wd-eyebrow { margin-block-start: 2px; }
.wd-palette-hit:hover, .wd-palette-hit.active { background: var(--tint-blue); }
.wd-palette-hit-title { display: block; font-weight: 700; color: var(--ink-1); font-size: 14px; }
.wd-palette-hit-snippet { display: block; font-size: 12.5px; color: var(--ink-3); margin-block-start: 2px; }
.wd-palette-empty { padding: 22px 14px; color: var(--ink-3); font-size: 14px; text-align: center; }

/* ── Search page ─────────────────────────────────────────────────── */
.wd-searchform {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 12px 16px;
  margin-block: 18px 26px;
  color: var(--ink-4);
  max-inline-size: 560px;
}
.wd-searchform input { flex: 1; border: none; outline: none; font: inherit; font-size: 15.5px; color: var(--ink-1); }
.wd-search-results { display: flex; flex-direction: column; gap: 6px; }
.wd-search-hit {
  display: block;
  padding: 13px 15px;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: background 150ms var(--ease), border-color 150ms var(--ease);
}
.wd-search-hit:hover { background: var(--card-bg-alt); border-color: var(--rule); }
.wd-search-hit .wd-card-title { font-size: 15.5px; }
.wd-search-hit .wd-eyebrow { margin-block: 3px; }

/* ── Journeys ────────────────────────────────────────────────────── */
.wd-article-wide { max-inline-size: 960px; }
.wd-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-block-end: 18px;
  padding-block-end: 10px;
  border-block-end: 1px solid var(--rule-soft);
}
.wd-section-head .wd-section-title { margin: 0; padding: 0; border: none; }
.wd-section-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
}
.wd-section-more .wd-icon { inline-size: 15px; block-size: 15px; }

/* Journey cards ---------------------------------------------------- */
.wd-jcard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.wd-jcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 18px 18px 16px;
  color: var(--ink-2);
  overflow: hidden;
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease),
              transform 180ms var(--ease);
}
.wd-jcard::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  background: var(--grad);
  opacity: 0.85;
}
.wd-jcard:hover {
  border-color: var(--blue);
  box-shadow: 0 10px 26px rgba(27, 114, 217, 0.10);
  transform: translateY(-2px);
  color: var(--ink-2);
}
.wd-jcard-top { display: flex; align-items: flex-start; gap: 13px; }
.wd-jcard-heads { display: flex; flex-direction: column; gap: 4px; min-inline-size: 0; }
.wd-jcard .wd-card-title { font-size: 16px; }
.wd-jcard-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-block-start: auto; }
.wd-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-3);
  background: var(--card-bg);
  border: 1px solid var(--rule-soft);
  border-radius: 999px;
  padding: 4px 11px;
}
.wd-chip .wd-icon { inline-size: 14px; block-size: 14px; }
.wd-jcard-bar {
  display: block;
  block-size: 4px;
  border-radius: 999px;
  background: var(--rule-soft);
  overflow: hidden;
}
.wd-jcard-bar-fill {
  display: block;
  block-size: 100%;
  inline-size: 0;
  border-radius: 999px;
  background: var(--grad);
  transition: inline-size 300ms var(--ease);
}

/* Journey hero ----------------------------------------------------- */
.wd-jhero {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background:
    radial-gradient(120% 140% at 100% 0%, var(--tint-blue) 0%, transparent 55%),
    var(--card-bg-alt);
  padding: 30px 32px 28px;
  margin-block-start: 8px;
  overflow: hidden;
}
.wd-jhero::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 4px;
  background: var(--grad);
}
.wd-jhero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 42px;
  block-size: 42px;
  border-radius: 11px;
  background: #fff;
  border: 1px solid var(--rule);
  color: var(--blue-deep);
  margin-block-end: 14px;
}
.wd-jhero-icon .wd-icon { inline-size: 22px; block-size: 22px; }
.wd-jhero h1 { margin: 6px 0 10px; }
.wd-jhero-sub { font-size: 17px; color: var(--ink-3); margin: 0 0 18px; max-inline-size: 640px; }
.wd-jhero-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.wd-jhero-progress[hidden] { display: none; }
.wd-jhero-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block-start: 20px;
  max-inline-size: 420px;
  font-size: 12.5px;
  color: var(--ink-3);
}
.wd-jhero-progress .wd-jcard-bar { flex: 1; }
.wd-jhero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-block-start: 22px;
}
.wd-btn-lg { padding: 13px 24px; font-size: 15px; }
.wd-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 700;
  color: var(--blue-deep);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 11px 18px;
  transition: border-color 150ms var(--ease), background 150ms var(--ease);
}
.wd-btn-ghost:hover { border-color: var(--blue); background: var(--tint-blue); }
.wd-btn-quiet {
  background: none;
  border: none;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  padding: 8px 4px;
}
.wd-btn-quiet:hover { color: var(--ink-1); }

/* Outcomes / prerequisites ----------------------------------------- */
.wd-jpanels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  margin-block-start: 40px;
}
.wd-jpanel {
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 20px 22px;
  background: #fff;
}
.wd-jpanel-quiet { background: var(--card-bg-alt); }
.wd-jpanel .wd-section-title { font-size: 15px; text-transform: none; }
.wd-jchecklist, .wd-jprereq { list-style: none; margin: 0; padding: 0; font-size: 14.5px; }
.wd-jchecklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-block: 7px;
}
.wd-jchecklist .wd-icon { color: var(--green); margin-block-start: 2px; }
.wd-jprereq li {
  position: relative;
  padding-block: 6px;
  padding-inline-start: 18px;
  color: var(--ink-3);
}
.wd-jprereq li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  inset-block-start: 15px;
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background: var(--ink-4);
}

/* The path (timeline) ---------------------------------------------- */
.wd-jpath { margin-block-start: 44px; }
.wd-jphase { margin-block-end: 26px; }
.wd-jphase-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block: 0 12px;
}
.wd-jphase-head h3 { margin: 0; font-size: 16px; }
.wd-jphase-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 28px;
  block-size: 28px;
  border-radius: 8px;
  font-size: 12px;
  color: var(--blue-deep);
  background: var(--tint-blue);
}
.wd-jsteps { list-style: none; margin: 0; padding: 0; }
.wd-jstep { position: relative; }
.wd-jstep::before {
  content: "";
  position: absolute;
  inset-block: 34px -6px;
  inset-inline-start: 32px;
  inline-size: 2px;
  background: var(--rule-soft);
}
.wd-jstep:last-child::before { display: none; }
.wd-jstep-link {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--ink-2);
  transition: background 160ms var(--ease), border-color 160ms var(--ease);
}
.wd-jstep-link:hover {
  background: var(--card-bg-alt);
  border-color: var(--rule);
  color: var(--ink-2);
}
.wd-jstep-marker {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 42px;
  block-size: 42px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--rule);
  color: var(--ink-3);
}
.wd-jstep-tick { display: none; color: #fff; }
.wd-jstep-tick .wd-icon { inline-size: 20px; block-size: 20px; }
.wd-jstep.done .wd-jstep-marker {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.wd-jstep.done .wd-jstep-num { display: none; }
.wd-jstep.done .wd-jstep-tick { display: inline-flex; }
.wd-jstep-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-inline-size: 0; }
.wd-jstep-title { font-size: 15.5px; font-weight: 700; color: var(--ink-1); }
.wd-jstep-desc { font-size: 14px; color: var(--ink-3); }
.wd-jstep-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--ink-4);
  margin-block-start: 3px;
}
.wd-jstep-article { display: inline-flex; align-items: center; gap: 6px; }
.wd-jstep-article::before {
  content: "";
  inline-size: 3px;
  block-size: 3px;
  border-radius: 50%;
  background: var(--ink-4);
}

/* Completion banner ------------------------------------------------ */
.wd-jdone {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-block-start: 24px;
  padding: 20px 22px;
  border-radius: 12px;
  border: 1px solid rgba(22, 163, 74, 0.35);
  background: rgba(22, 163, 74, 0.07);
}
.wd-jdone h2 { margin: 0 0 6px; font-size: 20px; }
.wd-jdone p { margin: 0 0 12px; color: var(--ink-2); }
.wd-jdone-icon { color: var(--green); }
.wd-jdone-icon .wd-icon { inline-size: 26px; block-size: 26px; }

/* Article ↔ journey banner ----------------------------------------- */
.wd-journey-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-block: 20px 8px;
  padding: 13px 16px;
  border: 1px solid var(--rule);
  border-inline-start: 3px solid var(--blue);
  border-radius: 10px;
  background: var(--tint-blue);
  color: var(--ink-2);
  transition: box-shadow 160ms var(--ease);
}
.wd-journey-banner:hover { box-shadow: 0 4px 14px rgba(27, 114, 217, 0.12); color: var(--ink-2); }
.wd-journey-banner-icon { color: var(--blue-deep); }
.wd-journey-banner-body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.wd-journey-banner-title { font-weight: 700; color: var(--ink-1); }

/* Step player ------------------------------------------------------ */
.wd-jplayer { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.wd-jbar {
  inline-size: 100%;
  position: sticky;
  inset-block-start: var(--header-h);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0 14px;
  margin-block-end: 8px;
  background: linear-gradient(#fff 70%, rgba(255, 255, 255, 0));
}
.wd-jbar-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-2);
  min-inline-size: 0;
}
.wd-jbar-back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-jbar-back:hover { color: var(--blue-darker); }
.wd-jbar-progress { display: flex; align-items: center; gap: 12px; flex: 1; max-inline-size: 340px; }
.wd-jbar-label { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.wd-jbar-track {
  flex: 1;
  block-size: 6px;
  border-radius: 999px;
  background: var(--rule-soft);
  overflow: hidden;
}
.wd-jbar-fill { display: block; block-size: 100%; border-radius: 999px; background: var(--grad); }
.wd-jwhy {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--tint-blue);
  border: 1px solid var(--tint-blue-strong);
  margin-block: 18px 24px;
}
.wd-jwhy p { margin: 0; }
.wd-jwhy .wd-callout-icon { color: var(--blue-deep); }
.wd-jstep-tools { display: flex; flex-wrap: wrap; gap: 10px; margin-block-end: 22px; }
.wd-jcheckpoint {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 20px;
  border-radius: 12px;
  border: 1px solid rgba(22, 163, 74, 0.3);
  background: rgba(22, 163, 74, 0.06);
  margin-block-start: 34px;
}
.wd-jcheckpoint p { margin: 0; }
.wd-jcheckpoint .wd-callout-icon, .wd-jcheckpoint .wd-callout-title { color: #12803B; }
.wd-jnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-block-start: 36px;
  padding-block-start: 24px;
  border-block-start: 1px solid var(--rule-soft);
}

/* Step rail -------------------------------------------------------- */
.wd-jrail {
  inline-size: 264px;
  flex: none;
  position: sticky;
  inset-block-start: calc(var(--header-h) + 76px);
  max-block-size: calc(100vh - var(--header-h) - 120px);
  overflow-y: auto;
  font-size: 13px;
  border-inline-start: 1px solid var(--rule-soft);
  padding-inline-start: 18px;
}
.wd-jrail-head { display: block; color: var(--ink-1); }
.wd-jrail-title { display: block; font-weight: 700; font-size: 14.5px; margin-block-start: 3px; }
.wd-jrail-progress { display: flex; align-items: center; gap: 8px; margin-block: 12px 14px; }
.wd-jrail-progress .wd-jcard-bar { flex: 1; }
.wd-jrail-count { font-size: 11.5px; color: var(--ink-3); }
.wd-jrail-list { list-style: none; margin: 0; padding: 0; counter-reset: rail; }
.wd-jrail-item a {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--ink-3);
  padding: 6px 10px;
  border-inline-start: 2px solid var(--rule-soft);
  transition: color 150ms var(--ease), border-color 150ms var(--ease);
}
.wd-jrail-item a:hover { color: var(--ink-1); }
.wd-jrail-num { font-size: 11px; color: var(--ink-4); padding-block-start: 1px; }
.wd-jrail-item.current a {
  color: var(--blue-darker);
  font-weight: 700;
  border-inline-start-color: var(--blue-deep);
}
.wd-jrail-item.done a { color: var(--ink-2); }
.wd-jrail-item.done .wd-jrail-num { color: var(--green); }

/* ── Responsive ──────────────────────────────────────────────────── */
/* The header carries brand + tabs + search + langs + CTA. Below ~1150px
   that is one item too many, and the search box is the one that must not
   shrink — so the CTA pill folds to its icon first. */
@media (max-width: 1150px) {
  .wd-btn-demo { display: none; }
  .wd-icon-btn-cta { display: inline-flex; }
}
@media (max-width: 1240px) {
  .wd-rail { display: none; }
  .wd-jrail {
    inline-size: 100%;
    position: static;
    max-block-size: none;
    border-inline-start: none;
    border-block-start: 1px solid var(--rule-soft);
    padding-inline-start: 0;
    padding-block-start: 20px;
    margin-block-start: 8px;
  }
  .wd-jrail-list { columns: 2; column-gap: 24px; }
}
@media (max-width: 980px) {
  .wd-menu-toggle { display: inline-flex; }
  .wd-brand-sub, .wd-version-chip, .wd-header-sep,
  .wd-header-tabs, .wd-btn-demo { display: none; }
  .wd-icon-btn-cta { display: inline-flex; }
  .wd-header-inner { gap: 8px; padding-inline: 12px; }
  /* Search collapses to a round icon button: its label AND its shortcut
     hint both go, or the hint alone keeps the pill wide enough to sit on
     top of the language links. */
  .wd-header-inner > .wd-search-trigger {
    flex: none;
    inline-size: 38px;
    block-size: 38px;
    max-inline-size: none;
    margin-inline: 0 auto;
    padding: 0;
    justify-content: center;
  }
  .wd-header-inner > .wd-search-trigger span,
  .wd-header-inner > .wd-search-trigger kbd { display: none; }
  /* The brand is the only elastic thing left in the row */
  .wd-brand { min-inline-size: 0; }
  .wd-brand-text { min-inline-size: 0; }
  .wd-brand-name { overflow: hidden; text-overflow: ellipsis; }
  .wd-sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 90;
    background: #fff;
    block-size: 100vh;
    transform: translateX(-100%);
    transition: transform 220ms var(--ease);
    box-shadow: 0 0 40px rgba(6, 11, 23, 0.2);
  }
  .wd-rtl .wd-sidebar { transform: translateX(100%); }
  body.wd-menu-open .wd-sidebar { transform: none; }
  body.wd-menu-open .wd-sidebar-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(6, 11, 23, 0.4);
  }
  .wd-main { padding: 26px 20px 60px; }
  .wd-tool, .wd-nav-row, .wd-lang, .wd-icon-btn { min-block-size: 44px; }
  .wd-pager { flex-direction: column; }
  .wd-jhero { padding: 24px 20px; border-radius: 12px; }
  .wd-jbar { flex-wrap: wrap; gap: 10px; }
  .wd-jbar-progress { max-inline-size: none; }
  .wd-jnav { flex-direction: column-reverse; align-items: stretch; }
  .wd-jnav a { justify-content: center; }
  .wd-jrail-list { columns: 1; }
  .wd-jstep-link { padding-inline: 8px; }
  .wd-jstep::before { inset-inline-start: 28px; }
  .wd-pager-next { align-items: flex-start; text-align: start; }
}

/* ── Print ───────────────────────────────────────────────────────── */
@media print {
  .wd-header, .wd-sidebar, .wd-rail, .wd-toolbar, .wd-feedback,
  .wd-pager, .wd-cta, .wd-tour, .wd-palette, .wd-jrail, .wd-jbar,
  .wd-jhero-actions, .wd-jnav { display: none !important; }
  .wd-main { padding: 0; }
  body { font-size: 12pt; }
}

/* ── Motion preferences ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}