/* Paligo demo theme: the brand layer, written from brief.md. Values come from the Paligo Marketing Design System
 * (tokens.md) and the measured paligo.net (design/design.md, round-0 judge notes). Helvetica Now is licensed to
 * paligo.net only, so the brand-approved Inter and Inter Tight stand in. */

/* ===== 1. Tokens ========================================================== */
:root {
  /* Illustration scale (the drawn product UI in the hero and the rows): smaller than reading text on purpose. */
  --pg-ui-1: 10px; --pg-ui-2: 11px; --pg-ui-3: 12px;
  --dp-brand-loaded: 1;

  /* Paligo Base tokens (light, pinned: paligo.net has a single light scheme) */
  --paligo-font: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --paligo-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --paligo-bg: #ffffff;
  --paligo-surface: #f6f8f9;
  --paligo-surface-2: #eff3f4;
  --paligo-text: #121317;
  --paligo-muted: #666869;
  --paligo-faint: #6f7172;
  --paligo-border: #e2e6e7;
  --paligo-border-strong: #cdd0d1;
  --paligo-primary: #0055ff;
  --paligo-primary-hover: #0044cc;
  --paligo-brand: #017efa;
  --paligo-brand-end: #bb82e9;
  --paligo-gradient: linear-gradient(100deg, #017efa 0%, #6e8bf5 40%, #bb82e9 72%, #e597da 100%);
  --paligo-brand-wash: #ecf4fe;
  --paligo-radius-sm: 6px;
  --paligo-radius: 10px;
  --paligo-radius-lg: 16px;
  --paligo-header-h: 72px;
  --paligo-note: #017efa;
  --paligo-tip: #12b76a;
  --paligo-important: #8b45c4;
  --paligo-caution: #f79009;
  --paligo-warning: #f79009;
  --paligo-danger: #f04438;

  /* Chrome, hero, bands */
  --dp-chrome-bg: #ffffff; --dp-chrome-fg: #121317; --dp-chrome-fg-rgb: 18 19 23; --dp-chrome-line: #eaeaea;
  --dp-chrome-bg-top: transparent; --dp-chrome-line-top: transparent;
  --dp-hero-bg: #ffffff; --dp-hero-fg: #121317; --dp-hero-fg-rgb: 18 19 23;
  --dp-hero-glow-rgb: 1 126 250;
  --dp-band-bg: #eff3f4; --dp-band-fg: #121317; --dp-band-fg-rgb: 18 19 23; --dp-band-glow: 0;
  --dp-footer-bg: #000000; --dp-footer-fg: #ffffff; --dp-footer-fg-rgb: 255 255 255;
  --dp-panel-bg: #000000; --dp-panel-fg: #ffffff; --dp-panel-fg-rgb: 255 255 255;

  /* Actions */
  --dp-cta-bg: #121317; --dp-cta-fg: #ffffff; --dp-cta-bg-hover: #444546;
  --dp-pill2-bg: #ffffff; --dp-pill2-fg: #121317; --dp-pill2-bg-hover: #eff3f4;
  --dp-current: #121317;

  /* Surfaces */
  --dp-rule: transparent;
  --dp-card-bg: #f6f8f9; --dp-card-border: #e2e6e7;
  --dp-hover-bg: #eff3f4; --dp-hover-fg: #121317; --dp-hover-border: #cdd0d1;
  --dp-card-lift: 0px;
  --dp-tile: #eff3f4; --dp-media-ground: #eff3f4; --dp-progress-on: #017efa;

  /* Type */
  --dp-display: 'Inter Tight', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --dp-display-weight: 400;
  --dp-display-tracking: -0.03em;
  --dp-label-font: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --dp-label-case: none;
  --dp-label-tracking: 0;
  --dp-hero-h1: clamp(3rem, 5.4vw, 4.75rem);
  --dp-statement: clamp(2rem, 3.4vw, 3rem);

  /* Shape and rhythm */
  --dp-radius-card: 16px; --dp-radius-pill: 999px; --dp-radius-panel: 32px; --dp-radius-search: 999px;
  --dp-wrap: 1368px;
  --dp-section-gap: clamp(5rem, 9vw, 7.5rem);
  --dp-header-cta-w: 7.5rem;
  --dp-header-search-w: 15rem;

  /* Header nav: plain text, a 2 px bar at the header's bottom edge for the current section */
  --dp-nav-fg: #121317; --dp-nav-size: 16px; --dp-nav-weight: 400; --dp-nav-pad: 25px 2px 23px;
  --dp-nav-hover-fg: #666869; --dp-nav-hover-line: transparent; --dp-nav-current-line: #121317;

  /* Answers widget */
  --dp-widget-font: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --dp-widget-radius-sm: 8px; --dp-widget-radius-md: 12px; --dp-widget-radius-lg: 16px;
  --dp-widget-link: #0055ff;
  --dp-widget-shadow-panel: 0 28px 64px rgba(11, 18, 38, 0.16);
  --dp-widget-shadow-launcher: 0 10px 28px rgba(1, 126, 250, 0.30);
  --dp-widget-greeting-font: 'Inter Tight', 'Inter', sans-serif; --dp-widget-greeting-weight: 500; --dp-widget-greeting-size: 24px;

  /* Demo notice */
  --dp-demo-bg: rgba(255, 255, 255, 0.92); --dp-demo-fg: #45474a; --dp-demo-border: #e2e6e7;

  --pg-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pg-grad-soft: linear-gradient(120deg, #dceaff 0%, #e4dbfb 52%, #fbe7f6 100%);
  --pg-grad-nexus: linear-gradient(91deg, #017efa 5.8%, #86dbff 43.11%, #38ffac 97.06%);
}
/* One scheme on purpose (brief section 3): paligo.net has no dark mode, so the light tokens hold in both. */
:root[data-theme="dark"] {
  --paligo-bg: #ffffff; --paligo-surface: #f6f8f9; --paligo-surface-2: #eff3f4; --paligo-text: #121317;
  --paligo-muted: #666869; --paligo-faint: #6f7172; --paligo-border: #e2e6e7; --paligo-border-strong: #cdd0d1;
  --paligo-primary: #0055ff; --paligo-primary-hover: #0044cc; --paligo-brand-wash: #ecf4fe;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paligo-bg: #ffffff; --paligo-surface: #f6f8f9; --paligo-surface-2: #eff3f4; --paligo-text: #121317;
    --paligo-muted: #666869; --paligo-faint: #6f7172; --paligo-border: #e2e6e7; --paligo-border-strong: #cdd0d1;
    --paligo-primary: #0055ff; --paligo-primary-hover: #0044cc; --paligo-brand-wash: #ecf4fe;
    color-scheme: light;
  }
}
.theme-toggle { display: none !important; }

body { font-family: var(--paligo-font); color: var(--paligo-text); }

/* ===== 2. Header ========================================================== */
.brand .dp-logo { height: 26px; color: #121317; }
.dp-docs-label {
  border: 0; border-left: 1px solid #cdd0d1; border-radius: 0; padding: 2px 0 2px 14px; margin-left: 2px;
  font-family: var(--dp-display); font-size: var(--t-md); font-weight: 500; color: #121317; letter-spacing: -0.01em;
}
.topbar .dp-top-nav a,
body.portal .topbar:not(.is-scrolled) .dp-top-nav a,
body.portal .topbar.is-scrolled .dp-top-nav a { border-bottom-width: 2px; }
.dp-top-nav ul { gap: 2rem; }
/* The header actions on paligo.net are plain text links, not pills. */
.topbar .dp-pill--cta.dp-header-cta,
body.portal .topbar .dp-pill--cta.dp-header-cta {
  background: transparent; border-color: transparent; color: #121317; font-family: var(--paligo-font);
  font-size: var(--t-md); font-weight: 400; padding: .5rem 0; justify-content: flex-end;
}
.topbar .dp-pill--cta.dp-header-cta:hover { background: transparent; border-color: transparent; color: #666869; }
.topbar .dp-header-cta > span[aria-hidden] { display: none; }
.topbar .site-search__form { background: #f6f8f9; border-color: #e2e6e7; }
.topbar .site-search__form:focus-within { background: #ffffff; border-color: #121317; }
.topbar .site-search__input::placeholder { color: #6f7172; }
body.portal .topbar.is-scrolled { border-bottom-color: #eaeaea; }

/* ===== 3. Hero (hero-split over the site's own atmosphere) ================= */
.portal-hero.dp-hero-split {
  /* Round 3 (Shirley, 2026-10-09): a ground of its own, so readers can tell they left paligo.net. White with a
     fine dot grid from the logomark; the product sits on a rounded stage in the Nexus gradient (DS grad-nexus). */
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(60% 90% at 6% 104%, rgba(120, 235, 200, 0.50), transparent 70%),
    radial-gradient(58% 82% at 50% 108%, rgba(90, 190, 255, 0.52), transparent 70%),
    radial-gradient(40% 62% at 100% 8%, rgba(190, 170, 255, 0.30), transparent 70%),
    radial-gradient(34% 50% at 0% 0%, rgba(1, 126, 250, 0.10), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #eef6fb 100%);
  padding: calc(var(--paligo-header-h) + clamp(3.5rem, 7vw, 6rem)) 0 clamp(4.5rem, 8vw, 7rem);
}
.portal-hero.dp-hero-split::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(1, 126, 250, 0.22) 1px, transparent 1.4px); background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 38%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 38%);
}
@media (min-width: 52.01rem) {
  .dp-hero-split__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(2rem, 4vw, 4rem); }
}
.portal-hero.dp-hero-split h1 { line-height: .95; max-width: 11.5ch; margin-bottom: 1.5rem; }
.portal-hero.dp-hero-split .portal-sub { color: #45474a; font-size: var(--t-md); line-height: 1.55; max-width: 40ch; }
.dp-hero .dp-eyebrow > span {
  border: 0; padding: 0; font-family: var(--dp-display); font-size: var(--t-md); font-weight: 500; color: #121317;
}
.dp-hero .portal-search .site-search__form {
  background: #ffffff; border-color: #cdd0d1; box-shadow: 0 2px 6px rgba(11, 18, 38, 0.07);
}
.dp-hero .portal-search .site-search__form:focus-within { border-color: #121317; box-shadow: 0 0 0 4px rgba(1, 126, 250, 0.18); }
.dp-hero .site-search__input { color: #121317; }
.dp-hero-split__media {
  aspect-ratio: auto; overflow: visible; border-radius: 32px; padding: clamp(2.25rem, 3.6vw, 3.25rem) 0;
  background:
    radial-gradient(70% 90% at 82% 100%, rgba(56, 255, 172, 0.55), transparent 70%),
    linear-gradient(135deg, #e8f4ff 0%, #a6dbff 45%, #3d9bff 82%, #017efa 100%);
}
/* The product shot is wider than its stage, so the floating cards hang over both edges. */
.dp-hero-split__media img { position: static; display: block; width: 104%; max-width: none; height: auto; margin-left: -6%; }
.dp-hero-split__media--contain img { padding: 0; }

/* ===== 4. Shared Paligo pieces ============================================ */
.pg-kicker { display: flex; align-items: center; gap: .65rem; margin: 0 0 1rem; font-family: var(--dp-display); font-size: var(--t-md); font-weight: 500; color: #121317; }
.pg-kicker--dark { color: #ffffff; }
/* Product icon tiles: white rounded squares holding blue dot grids, as on paligo.net (3x3, sparse grid, three dots). */
.pg-tile {
  --s: 40px; width: var(--s); height: var(--s); flex: none; display: inline-block; border-radius: calc(var(--s) * .22);
  background-color: #ffffff; box-shadow: 0 0 0 1px rgba(18, 19, 23, 0.08), 0 2px 6px rgba(11, 18, 38, 0.07);
  background-repeat: no-repeat;
}
.pg-tile--sm { --s: 28px; }
.pg-tile--1 { background-image: radial-gradient(circle at 25% 25%, #017efa 2.4px, transparent 2.8px), radial-gradient(circle at 50% 25%, #017efa 2.4px, transparent 2.8px), radial-gradient(circle at 75% 25%, #51cbff 2.4px, transparent 2.8px), radial-gradient(circle at 25% 50%, #017efa 2.4px, transparent 2.8px), radial-gradient(circle at 50% 50%, #017efa 2.4px, transparent 2.8px), radial-gradient(circle at 75% 50%, #017efa 2.4px, transparent 2.8px), radial-gradient(circle at 25% 75%, #017efa 2.4px, transparent 2.8px), radial-gradient(circle at 50% 75%, #017efa 2.4px, transparent 2.8px), radial-gradient(circle at 75% 75%, #017efa 2.4px, transparent 2.8px); }
.pg-tile--2 { background-image: radial-gradient(circle at 30% 30%, #017efa 2.6px, transparent 3px), radial-gradient(circle at 70% 30%, #51cbff 2.6px, transparent 3px), radial-gradient(circle at 30% 70%, #017efa 2.6px, transparent 3px), radial-gradient(circle at 70% 70%, #017efa 2.6px, transparent 3px); }
.pg-tile--3 { background-image: radial-gradient(circle at 28% 50%, #017efa 2.6px, transparent 3px), radial-gradient(circle at 50% 50%, #017efa 2.6px, transparent 3px), radial-gradient(circle at 72% 50%, #51cbff 2.6px, transparent 3px); }
.pg-tile--sm { --dot: 1.7px; }
.pg-link { color: #121317; font-weight: 500; text-decoration: underline; text-decoration-color: #cdd0d1; text-underline-offset: 4px; transition: text-decoration-color 220ms var(--pg-ease); }
.pg-link:hover { color: #121317; text-decoration-color: #121317; }
.dp-kicker { font-family: var(--dp-display); font-weight: 500; letter-spacing: 0; }

/* ===== 5. Journey (signatures 2, 6, 7): black band, gradient headline, staircase of pastel cards ===== */
.pg-journey { background: #000000; color: #ffffff; padding: clamp(5rem, 9vw, 7.5rem) 0; }
.pg-journey__head { max-width: 48rem; margin-bottom: 3rem; }
.pg-journey h2 {
  font-family: var(--dp-display); font-weight: 400; letter-spacing: -0.03em; font-size: clamp(2.4rem, 4vw, 3.25rem); line-height: 1;
  margin: 0 0 1.1rem; color: #86dbff; background-image: var(--pg-grad-nexus); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; padding-bottom: .06em;
}
.pg-journey__body { color: #b8c0d4; font-size: var(--t-md); line-height: 1.5; margin: 0; max-width: 52ch; }
.pg-journey__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.pg-journey__item { margin: 0; }
.pg-journey__item--2 { width: 88%; }
.pg-journey__item--3 { width: 76%; }
.pg-journey__card {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) minmax(0, 1.2fr); gap: 1.75rem; align-items: center;
  padding: 1.9rem 2.25rem; border-radius: 16px; text-decoration: none; color: #121317;
  border: 1px solid rgba(255, 255, 255, 0.35); transition: filter 220ms var(--pg-ease), border-color 220ms var(--pg-ease);
}
.pg-journey__item--1 .pg-journey__card { background: linear-gradient(90deg, #92c9fe 0%, #c4edff 38%, #f8e1f8 72%, #ffcfff 100%); }
.pg-journey__item--2 .pg-journey__card { background: linear-gradient(90deg, #aad5ff 0%, #afe8ff 49%, #d4f7ec 100%); }
.pg-journey__item--3 .pg-journey__card { background: linear-gradient(90deg, #aaf0dc 0%, #d3f7ed 55%, #f0fcf8 100%); }
.pg-journey__card:hover { filter: brightness(1.04); border-color: rgba(255, 255, 255, 0.9); text-decoration: none; color: #121317; }
.pg-journey__step { font-size: var(--t-sm); color: #45474a; }
.pg-journey__title { display: flex; align-items: center; gap: .9rem; font-family: var(--dp-display); font-weight: 400; font-size: clamp(1.4rem, 2vw, 1.75rem); letter-spacing: -0.03em; line-height: 1.1; }
.pg-journey__text { font-size: var(--t-sm); line-height: 1.5; color: #45474a; }
.pg-more { display: inline-block; margin-left: .35rem; color: #121317; font-weight: 500; white-space: nowrap; }
.pg-more span { display: inline-block; transition: transform 220ms var(--pg-ease); }
.pg-journey__card:hover .pg-more span { transform: translateX(3px); }

/* ===== 6. Chapters (chapters-cards, restyled) ============================== */
.dp-chapters .dp-section-head { border-top: 0; padding-top: 0; margin-bottom: 2rem; align-items: flex-end; }
.dp-chapters .dp-section-head .dp-kicker { font-size: clamp(2.4rem, 3.6vw, 3rem); font-weight: 400; line-height: 1; letter-spacing: -0.03em; color: #121317; }
.dp-section-meta { font-size: var(--t-sm); color: #666869; }
.dp-card { padding: 1.6rem 1.6rem 1.35rem; min-height: 15rem; }
.dp-card__index { font-size: var(--t-sm); color: #6f7172; }
.dp-card__title { font-size: var(--t-xl); margin-top: 1.6rem; }
.dp-card__desc { color: #666869; }
.dp-card__foot { font-size: var(--t-xs); color: #6f7172; }
.dp-card--start { background: #000000; border-color: #000000; }
.dp-card--start .dp-card__index, .dp-card--start .dp-card__desc { color: #b8c0d4; }
.dp-card--start .dp-pill--cta { background: #ffffff; border-color: #ffffff; color: #121317; }

/* ===== 7. Rows (signature 3) =============================================== */
.pg-rows { margin-top: var(--dp-section-gap); }
.pg-rows__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.pg-rows__head h2, .pg-faq__head h2 { font-family: var(--dp-display); font-weight: 400; letter-spacing: -0.03em; font-size: clamp(2.4rem, 3.6vw, 3rem); line-height: 1; margin: 0; color: #121317; }
.pg-row { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding: clamp(2rem, 4vw, 3rem) 0; }
.pg-row--flip .pg-row__media { order: 2; }
.pg-row__media { border-radius: 32px; overflow: hidden; background: var(--pg-grad-soft); aspect-ratio: 939 / 780; }
.pg-row__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pg-row h3 { font-family: var(--dp-display); font-weight: 400; letter-spacing: -0.03em; font-size: clamp(2rem, 2.6vw, 2.25rem); line-height: 1; margin: 0 0 1.25rem; color: #121317; }
.pg-row__lead { font-family: var(--dp-display); font-weight: 500; font-size: var(--t-lg); line-height: 1.25; letter-spacing: -0.01em; color: #121317; margin: 0 0 1rem; max-width: 30ch; }
.pg-row__body { font-size: var(--t-md); line-height: 1.5; color: #666869; margin: 0 0 1.5rem; max-width: 46ch; }

/* ===== 8. FAQ (signature 4) ================================================ */
.pg-faq { margin-top: var(--dp-section-gap); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(2rem, 5vw, 5rem); }
.pg-faq__list { border-top: 1px solid #e2e6e7; }
.pg-faq__item { border-bottom: 1px solid #e2e6e7; }
.pg-faq__item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.5rem 0; cursor: pointer; list-style: none;
  font-size: var(--t-md); font-weight: 500; color: #121317;
}
.pg-faq__item summary::-webkit-details-marker { display: none; }
.pg-faq__icon { position: relative; width: 16px; height: 16px; flex: none; }
.pg-faq__icon::before, .pg-faq__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: #121317; transition: transform 220ms var(--pg-ease); }
.pg-faq__icon::after { transform: rotate(90deg); }
.pg-faq__item[open] .pg-faq__icon::after { transform: rotate(0deg); }
.pg-faq__answer p { margin: 0 0 1.5rem; max-width: 64ch; font-size: var(--t-md); line-height: 1.6; color: #666869; }

/* ===== 9. Closing band (help-band on Stellar Gray) ======================== */
.dp-help h2 { font-size: clamp(2.6rem, 4.6vw, 3.5rem); line-height: 1; color: #121317; }
.dp-help p { color: #666869; }
.dp-help .dp-pill--alt { background: #121317; border-color: #121317; color: #ffffff; }
.dp-help .dp-pill--alt:hover { background: #444546; border-color: #444546; color: #ffffff; }

/* Pills: paligo.net's 38 px pills, 14 px Inter 500; secondary is outlined. */
.dp-pill { font-family: var(--paligo-font); font-size: var(--t-sm); font-weight: 500; padding: .7rem 1.1rem; }
.dp-pill--alt { background: transparent; border-color: #121317; color: #121317; }
.dp-pill--alt:hover { background: #121317; border-color: #121317; color: #ffffff; }

/* ===== 10. Footer ========================================================= */
.dp-footer__brand .dp-logo { height: 30px; color: #ffffff; }
.dp-footer__guide { font-family: var(--dp-display); font-weight: 400; letter-spacing: -0.03em; }
.dp-footer__nav .dp-kicker { color: rgb(255 255 255 / .6); font-size: var(--t-sm); }
.site-footer .dp-footer__nav a { font-size: var(--t-sm); }
.site-footer .dp-pill--cta { background: #ffffff; border-color: #ffffff; color: #121317; }
.site-footer .dp-pill--cta:hover { background: #eff3f4; border-color: #eff3f4; color: #121317; }

/* ===== 11. Content pages ================================================== */
.dp-eyebrow--page > span { border: 0; padding: 0; font-family: var(--dp-display); font-size: var(--t-sm); font-weight: 500; color: #666869; }
main > :is(section, article):first-of-type > header > :is(h1, h2, h3, h4, h5, h6),
main > :first-child > header > :is(h1, h2, h3, h4, h5, h6) { letter-spacing: -0.02em; line-height: 1; color: #121317; }
main > section > header + p { font-size: var(--t-lg); line-height: 1.5; color: #666869; }
.dp-pagebody > main > .breadcrumb { color: #6f7172; }
aside.site-nav a[aria-current="page"] { background: #eff3f4; color: #121317; border-radius: 8px; font-weight: 500; }
aside.site-nav a:hover { color: #121317; }
.dp-rail__label { text-transform: none; letter-spacing: 0; font-size: var(--t-sm); font-weight: 500; color: #121317; }
.dp-rail__chapter-title { letter-spacing: -0.02em; }
.dp-rail__chapter li a[aria-current="page"]::before { color: #017efa; }
.dp-rail__help { background: #eff3f4; border-radius: 16px; }
.dp-rail__help p { letter-spacing: -0.01em; }
/* Procedures: Gravity Blue numerals, like the steps in paligo.net's closing section. */
main ol.procedure > li.step::before { background: #017efa; border-color: #017efa; color: #ffffff; font-family: var(--paligo-font); font-weight: 600; font-size: var(--t-xs); }
main ol.procedure > li.step:not(:last-child)::after { background: #cce5fe; }
/* Admonitions: Stellar Gray cards, 16 px radius. */
.admonition { background: #f6f8f9; border: 0; border-radius: 16px; }
.admonition .title { text-transform: none; letter-spacing: 0; font-size: var(--t-sm); font-weight: 600; }
.admonition.warning, .admonition.danger { background: #fef4e6; border: 0; }
/* Figures: product screens in a soft brand-gradient panel, as on paligo.net's articles. */
main .figure .mediaobject, main .informalfigure .mediaobject { background: var(--pg-grad-soft); border-radius: 24px; padding: clamp(1rem, 2.4vw, 1.75rem); }
main .figure img, main .informalfigure img { border-radius: 12px; box-shadow: 0 8px 20px rgba(11, 18, 38, 0.08); }
main .figure > header .title { font-size: var(--t-sm); color: #666869; }
/* Tables */
main table { border-collapse: separate; border-spacing: 0; border: 1px solid #e2e6e7; border-radius: 12px; overflow: hidden; }
main thead th, main thead td { background: #f6f8f9; color: #121317; font-weight: 600; }
.pager a { border-radius: 16px; }
.pager .dir { text-transform: none; letter-spacing: 0; font-size: var(--t-xs); }

/* ===== 12. Demo notice ==================================================== */
.dp-demo-pill__label { font-size: var(--t-xs); }

/* ===== 13. Responsive ===================================================== */
@media (max-width: 64rem) {
  .pg-journey__card { grid-template-columns: 1fr; gap: .75rem; }
  .pg-journey__item--2, .pg-journey__item--3 { width: 100%; }
  .pg-faq { grid-template-columns: 1fr; }
}
@media (max-width: 52rem) {
  .pg-row { grid-template-columns: 1fr; }
  .pg-row--flip .pg-row__media { order: 0; }
  .portal-hero.dp-hero-split h1 { max-width: none; }
}

/* ===== Round 2 ============================================================ */
/* Header: logo and actions sit on the content edge, as on paligo.net. */
.topbar { padding-inline: max(clamp(1.25rem, 3vw, 2.5rem), calc((100% - var(--dp-wrap)) / 2)); }
/* Hero: the button pair from paligo.net's hero (black pill, outlined pill). */
.dp-hero-actions .dp-pill { font-size: var(--t-md); padding: .8rem 1.25rem; }
.dp-hero-actions .dp-pill--alt { background: transparent; border: 1px solid #121317; color: #121317; }
.dp-hero-actions .dp-pill--alt:hover { background: #121317; color: #ffffff; }
.portal-hero.dp-hero-split h1 { font-weight: 400; letter-spacing: -0.035em; }
/* Cards: white with a hairline, the black start card spans two columns so the grid closes evenly. */
.dp-card { background: #ffffff; border: 1px solid #e2e6e7; border-radius: 16px; transition: border-color 220ms var(--pg-ease); }
.dp-card:hover { background: #ffffff; border-color: #121317; }
.dp-card__title { font-weight: 400; letter-spacing: -0.02em; }
.dp-cards > li:first-child:has(.dp-card--start) { grid-column: span 2; }
.dp-card.dp-card--start, .dp-card.dp-card--start:hover { background: #000000; border-color: #000000; }
/* Procedures: tinted Gravity Blue numerals instead of solid discs. */
main ol.procedure > li.step::before { background: #e6f2ff; border-color: #e6f2ff; color: #0055ff; }
main ol.procedure.substeps > li.step::before { background: #ffffff; border-color: #99cbfd; color: #0055ff; font-weight: 500; }
/* Demo label: glass, so content shows through. */
.dp-demo-pill__label { background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
@media (max-width: 75rem) and (min-width: 36.01rem) { .dp-cards > li:first-child:has(.dp-card--start) { grid-column: span 2; } }
@media (max-width: 36rem) {
  .dp-cards > li:first-child:has(.dp-card--start) { grid-column: auto; }
  .dp-chapters .dp-section-head { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .dp-hero-split__media { display: none; }
}
@media (max-width: 53.75rem) {
  .breadcrumb ol { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
  .breadcrumb li { flex: 0 0 auto; }
  .breadcrumb ol::-webkit-scrollbar { display: none; }
}

/* ===== Round 4 (Shirley, 2026-10-09): tell readers they are in the docs ===== */
/* Header lockup: the logo plus "Docs", in Paligo type. */
.dp-docs-label { font-family: var(--dp-display); font-size: var(--t-lg); font-weight: 400; letter-spacing: -0.02em; color: #121317; padding-left: 14px; border-left-color: #cdd0d1; }
/* Hero: a reading path instead of marketing buttons. Numbered like the guide's own procedure steps. */
.dp-hero-split .dp-quick { display: block; counter-reset: dp-path; margin: 2rem 0 0; max-width: 28rem; }
.dp-hero-split .dp-quick li { display: block; }
.dp-hero-split .dp-quick__label { margin: 0 0 .5rem !important; font-family: var(--dp-display); font-size: var(--t-sm); font-weight: 500; color: #121317; }
.dp-hero-split .dp-quick li:not(.dp-quick__label) { counter-increment: dp-path; border-top: 1px solid #e2e6e7; }
.dp-hero-split .dp-quick li:last-child { border-bottom: 1px solid #e2e6e7; }
.dp-hero-split .dp-quick a {
  display: flex; align-items: center; gap: .9rem; padding: .8rem 0; border: 0; border-radius: 0; background: none;
  font-family: var(--paligo-font); font-size: var(--t-md); font-weight: 400; color: #121317; text-decoration: none;
}
.dp-hero-split .dp-quick a::before {
  content: counter(dp-path, decimal-leading-zero); flex: none; width: 28px; height: 28px; border-radius: 999px;
  display: grid; place-items: center; background: #e6f2ff; color: #0055ff; font-size: var(--t-xs); font-weight: 600;
}
.dp-hero-split .dp-quick a::after { content: "\2192"; margin-left: auto; color: #898b8b; transition: transform 220ms var(--pg-ease), color 220ms var(--pg-ease); }
.dp-hero-split .dp-quick a:hover { background: none; color: #0055ff; }
.dp-hero-split .dp-quick a:hover::after { color: #0055ff; transform: translateX(3px); }

/* Round 4: tighter hero, so the black band's headline stays in the first screen; cards stay inside the gutter. */
.portal-hero.dp-hero-split { padding-bottom: clamp(2.5rem, 4vw, 3.5rem); }
@media (min-width: 52.01rem) { .dp-hero-split__media { margin-right: 1.25rem; box-shadow: 0 40px 80px -24px rgba(1, 126, 250, 0.35); } }

/* ===== Round 5 (target 8.5 or more) ======================================= */
/* Hero particles, denser toward the bottom, as on paligo.net, in the cooler Nexus tones. */
.portal-hero.dp-hero-split::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle, rgba(255,255,255,0.7) 0 1.5px, rgba(120,190,255,0.39) 2.5px, transparent 8.5px) 97.1% 67.7% / 20px 20px no-repeat,
    radial-gradient(circle, rgba(255,255,255,0.7) 0 1.5px, rgba(120,190,255,0.39) 2.5px, transparent 8.5px) 51.9% 91.8% / 20px 20px no-repeat,
    radial-gradient(circle, rgba(255,255,255,0.7) 0 1.5px, rgba(120,190,255,0.39) 2.5px, transparent 8.5px) 69.8% 82.4% / 20px 20px no-repeat,
    radial-gradient(circle, rgba(255,255,255,0.9) 0 2.0px, rgba(120,190,255,0.50) 3.0px, transparent 9.0px) 39.1% 78.1% / 20px 20px no-repeat,
    radial-gradient(circle, rgba(255,255,255,0.5) 0 1.0px, rgba(120,190,255,0.28) 2.0px, transparent 8.0px) 43.1% 91.8% / 20px 20px no-repeat,
    radial-gradient(circle, rgba(255,255,255,0.9) 0 2.0px, rgba(120,190,255,0.50) 3.0px, transparent 9.0px) 52.9% 67.4% / 20px 20px no-repeat,
    radial-gradient(circle, rgba(255,255,255,1.0) 0 3.0px, rgba(120,190,255,0.55) 4.0px, transparent 10.0px) 83.5% 94.4% / 20px 20px no-repeat,
    radial-gradient(circle, rgba(255,255,255,0.7) 0 1.5px, rgba(120,190,255,0.39) 2.5px, transparent 8.5px) 45.9% 96.9% / 20px 20px no-repeat,
    radial-gradient(circle, rgba(255,255,255,0.7) 0 1.5px, rgba(120,190,255,0.39) 2.5px, transparent 8.5px) 48.2% 92.6% / 20px 20px no-repeat,
    radial-gradient(circle, rgba(255,255,255,0.9) 0 2.0px, rgba(120,190,255,0.50) 3.0px, transparent 9.0px) 98.5% 57.3% / 20px 20px no-repeat,
    radial-gradient(circle, rgba(255,255,255,0.9) 0 2.0px, rgba(120,190,255,0.50) 3.0px, transparent 9.0px) 59.6% 81.8% / 20px 20px no-repeat,
    radial-gradient(circle, rgba(255,255,255,0.7) 0 1.5px, rgba(120,190,255,0.39) 2.5px, transparent 8.5px) 86.0% 72.8% / 20px 20px no-repeat,
    radial-gradient(circle, rgba(255,255,255,0.9) 0 2.0px, rgba(120,190,255,0.50) 3.0px, transparent 9.0px) 92.9% 90.5% / 20px 20px no-repeat,
    radial-gradient(circle, rgba(255,255,255,0.7) 0 1.5px, rgba(120,190,255,0.39) 2.5px, transparent 8.5px) 74.0% 89.7% / 20px 20px no-repeat,
    radial-gradient(circle, rgba(255,255,255,0.7) 0 1.5px, rgba(120,190,255,0.39) 2.5px, transparent 8.5px) 95.9% 78.7% / 20px 20px no-repeat,
    radial-gradient(circle, rgba(255,255,255,0.9) 0 2.0px, rgba(120,190,255,0.50) 3.0px, transparent 9.0px) 99.0% 78.6% / 20px 20px no-repeat,
    radial-gradient(circle, rgba(255,255,255,0.5) 0 1.0px, rgba(120,190,255,0.28) 2.0px, transparent 8.0px) 93.6% 72.5% / 20px 20px no-repeat,
    radial-gradient(circle, rgba(255,255,255,1.0) 0 3.0px, rgba(120,190,255,0.55) 4.0px, transparent 10.0px) 49.2% 77.3% / 20px 20px no-repeat,
    radial-gradient(circle, rgba(255,255,255,0.5) 0 1.0px, rgba(120,190,255,0.28) 2.0px, transparent 8.0px) 45.1% 68.1% / 20px 20px no-repeat,
    radial-gradient(circle, rgba(255,255,255,0.7) 0 1.5px, rgba(120,190,255,0.39) 2.5px, transparent 8.5px) 79.7% 95.2% / 20px 20px no-repeat,
    radial-gradient(circle, rgba(255,255,255,1.0) 0 3.0px, rgba(120,190,255,0.55) 4.0px, transparent 10.0px) 63.5% 98.1% / 20px 20px no-repeat,
    radial-gradient(circle, rgba(255,255,255,0.9) 0 2.0px, rgba(120,190,255,0.50) 3.0px, transparent 9.0px) 61.6% 74.0% / 20px 20px no-repeat,
    radial-gradient(circle, rgba(255,255,255,0.5) 0 1.0px, rgba(120,190,255,0.28) 2.0px, transparent 8.0px) 48.7% 68.3% / 20px 20px no-repeat,
    radial-gradient(circle, rgba(255,255,255,0.9) 0 2.0px, rgba(120,190,255,0.50) 3.0px, transparent 9.0px) 85.6% 81.7% / 20px 20px no-repeat,
    radial-gradient(circle, rgba(255,255,255,1.0) 0 3.0px, rgba(120,190,255,0.55) 4.0px, transparent 10.0px) 42.0% 74.4% / 20px 20px no-repeat,
    radial-gradient(circle, rgba(255,255,255,0.5) 0 1.0px, rgba(120,190,255,0.28) 2.0px, transparent 8.0px) 64.2% 71.5% / 20px 20px no-repeat,
    radial-gradient(circle, rgba(255,255,255,0.5) 0 1.0px, rgba(120,190,255,0.28) 2.0px, transparent 8.0px) 86.9% 94.6% / 20px 20px no-repeat,
    radial-gradient(circle, rgba(255,255,255,1.0) 0 3.0px, rgba(120,190,255,0.55) 4.0px, transparent 10.0px) 64.6% 84.9% / 20px 20px no-repeat,
    radial-gradient(circle, rgba(255,255,255,0.5) 0 1.0px, rgba(120,190,255,0.28) 2.0px, transparent 8.0px) 85.3% 66.3% / 20px 20px no-repeat,
    radial-gradient(circle, rgba(255,255,255,0.5) 0 1.0px, rgba(120,190,255,0.28) 2.0px, transparent 8.0px) 54.4% 79.2% / 20px 20px no-repeat;
}
/* Closing band: a brand band, black with the Nexus gradient on the headline, joined to the footer. */
:root { --dp-band-bg: #000000; --dp-band-fg: #ffffff; --dp-band-fg-rgb: 255 255 255; }
.dp-help { position: relative; isolation: isolate; background: #000000; color: #ffffff; }
.dp-help::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(50% 120% at 12% 120%, rgba(1, 126, 250, 0.35), transparent 70%),
    radial-gradient(44% 100% at 92% 130%, rgba(56, 255, 172, 0.16), transparent 70%),
    radial-gradient(circle, rgba(255,255,255,.7) 0 2px, rgba(134,219,255,.25) 2.6px, transparent 7px) 46.0% 11.6% / 14px 14px no-repeat,
    radial-gradient(circle, rgba(255,255,255,.7) 0 2px, rgba(134,219,255,.25) 2.6px, transparent 7px) 33.0% 89.7% / 14px 14px no-repeat,
    radial-gradient(circle, rgba(255,255,255,.7) 0 2px, rgba(134,219,255,.25) 2.6px, transparent 7px) 39.6% 56.2% / 14px 14px no-repeat,
    radial-gradient(circle, rgba(255,255,255,.7) 0 2px, rgba(134,219,255,.25) 2.6px, transparent 7px) 30.7% 21.7% / 14px 14px no-repeat,
    radial-gradient(circle, rgba(255,255,255,.7) 0 2px, rgba(134,219,255,.25) 2.6px, transparent 7px) 37.1% 10.8% / 14px 14px no-repeat,
    radial-gradient(circle, rgba(255,255,255,.7) 0 2px, rgba(134,219,255,.25) 2.6px, transparent 7px) 39.8% 76.4% / 14px 14px no-repeat,
    radial-gradient(circle, rgba(255,255,255,.7) 0 2px, rgba(134,219,255,.25) 2.6px, transparent 7px) 36.2% 15.9% / 14px 14px no-repeat,
    radial-gradient(circle, rgba(255,255,255,.7) 0 2px, rgba(134,219,255,.25) 2.6px, transparent 7px) 33.3% 60.9% / 14px 14px no-repeat,
    radial-gradient(circle, rgba(255,255,255,.7) 0 2px, rgba(134,219,255,.25) 2.6px, transparent 7px) 30.2% 39.5% / 14px 14px no-repeat,
    radial-gradient(circle, rgba(255,255,255,.7) 0 2px, rgba(134,219,255,.25) 2.6px, transparent 7px) 40.0% 20.2% / 14px 14px no-repeat,
    radial-gradient(circle, rgba(255,255,255,.7) 0 2px, rgba(134,219,255,.25) 2.6px, transparent 7px) 95.3% 76.6% / 14px 14px no-repeat,
    radial-gradient(circle, rgba(255,255,255,.7) 0 2px, rgba(134,219,255,.25) 2.6px, transparent 7px) 91.2% 40.9% / 14px 14px no-repeat,
    radial-gradient(circle, rgba(255,255,255,.7) 0 2px, rgba(134,219,255,.25) 2.6px, transparent 7px) 95.6% 34.9% / 14px 14px no-repeat,
    radial-gradient(circle, rgba(255,255,255,.7) 0 2px, rgba(134,219,255,.25) 2.6px, transparent 7px) 92.1% 58.8% / 14px 14px no-repeat,
    radial-gradient(circle, rgba(255,255,255,.7) 0 2px, rgba(134,219,255,.25) 2.6px, transparent 7px) 96.5% 22.7% / 14px 14px no-repeat,
    radial-gradient(circle, rgba(255,255,255,.7) 0 2px, rgba(134,219,255,.25) 2.6px, transparent 7px) 95.7% 54.3% / 14px 14px no-repeat;
}
.dp-help h2 { background: var(--pg-grad-nexus); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; }
.dp-help p { color: #b8c0d4; }
.dp-help .dp-pill--alt { background: #ffffff; border-color: #ffffff; color: #121317; }
.dp-help .dp-pill--alt:hover { background: #eff3f4; border-color: #eff3f4; color: #121317; }
.dp-footer { border-top: 0; }
/* Chapter cards: a dot-grid glyph tile, the guide's own brand detail, and a gradient edge on hover. */
.dp-card:not(.dp-card--start) .dp-card__top { justify-content: space-between; }
.dp-card:not(.dp-card--start) .dp-card__top::before {
  content: ""; order: -1; flex: none; width: 36px; height: 36px; border-radius: 10px; background-color: #eef5ff;
  background-image: radial-gradient(circle at 28% 28%, #017efa 2.4px, transparent 2.9px), radial-gradient(circle at 72% 28%, #51cbff 2.4px, transparent 2.9px),
    radial-gradient(circle at 28% 72%, #017efa 2.4px, transparent 2.9px), radial-gradient(circle at 72% 72%, #017efa 2.4px, transparent 2.9px);
}
.dp-cards > li:nth-child(3n) .dp-card__top::before {
  background-image: radial-gradient(circle at 25% 50%, #017efa 2.4px, transparent 2.9px), radial-gradient(circle at 50% 50%, #017efa 2.4px, transparent 2.9px), radial-gradient(circle at 75% 50%, #51cbff 2.4px, transparent 2.9px);
}
.dp-cards > li:nth-child(3n+2) .dp-card__top::before {
  background-image: radial-gradient(circle at 50% 24%, #017efa 2.4px, transparent 2.9px), radial-gradient(circle at 24% 62%, #51cbff 2.4px, transparent 2.9px), radial-gradient(circle at 76% 62%, #017efa 2.4px, transparent 2.9px);
}
.dp-card { transition: transform 220ms var(--pg-ease), box-shadow 220ms var(--pg-ease), border-color 220ms var(--pg-ease); }
.dp-card:not(.dp-card--start):hover {
  border-color: transparent; transform: translateY(-2px); box-shadow: 0 14px 32px -16px rgba(1, 126, 250, 0.35);
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(120deg, #017efa, #5ceed2) border-box;
}
/* Nexus Portal row: the portal screen on a light gradient tile, like its two siblings (no black bezel). */
.pg-row__media:has(img[src*="nexus-portal-screen"]) {
  display: grid; place-items: center; padding: clamp(1.25rem, 3vw, 2.5rem);
  background: linear-gradient(160deg, #e8f4ff 0%, #8fd3fe 55%, #017efa 100%);
}
.pg-row__media img[src*="nexus-portal-screen"] { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 24px 56px -18px rgba(11, 18, 38, 0.45); }
/* Content pages: the landing page's wash behind the title area, white boxes with hairlines instead of gray fills. */
body:not(.portal) {
  background:
    radial-gradient(52% 300px at 64% 72px, rgba(134, 219, 255, 0.34), transparent 72%),
    radial-gradient(40% 260px at 94% 72px, rgba(56, 255, 172, 0.18), transparent 72%),
    radial-gradient(40% 240px at 34% 72px, rgba(190, 170, 255, 0.14), transparent 72%), #ffffff;
  background-repeat: no-repeat;
}
main > section > header + p { font-size: var(--t-lg); line-height: 1.55; color: #45474a; max-width: 62ch; }
.dp-rail__help { background: #ffffff; border: 1px solid #e2e6e7; }
.admonition { background: #f2f8ff; }
.admonition.warning, .admonition.danger { background: #ffffff; border: 1px solid #e2e6e7; border-left: 3px solid #f5a524; }
@media (max-width: 53.75rem) {
  .breadcrumb ol { -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
}


/* ===== Round 6 (polish toward 8.5) ======================================== */
/* No page texture: the wash and the particles carry the brand. */
.portal-hero.dp-hero-split::before { display: none; }
/* Footer ends on a real legal line, not an orphan rule. */
.dp-footer__bottom { padding: 1.5rem 0 2rem; }
.site-footer .footer-text { font-size: var(--t-xs); color: rgba(255, 255, 255, 0.55); }
/* One eyebrow style everywhere. */
.pg-kicker, .dp-eyebrow--page > span, .dp-hero-split .dp-quick__label { font-family: var(--dp-display); font-size: var(--t-sm); font-weight: 500; letter-spacing: 0; color: #45474a; }
.pg-kicker--dark { color: rgba(255, 255, 255, 0.75); }
/* One number style: tabular, Gravity Blue. */
.dp-card__index, .dp-rail__chapter li a::before, .dp-hero-split .dp-quick a::before, main ol.procedure > li.step::before { font-variant-numeric: tabular-nums; }
.dp-card:not(.dp-card--start) .dp-card__index { font-size: var(--t-xs); font-weight: 600; color: #0055ff; }
/* Hero path rows respond as a whole. */
.dp-hero-split .dp-quick a { margin: 0 -.75rem; padding: .8rem .75rem; border-radius: 10px; transition: background-color 220ms var(--pg-ease), color 220ms var(--pg-ease); }
.dp-hero-split .dp-quick a:hover { background: rgba(1, 126, 250, 0.06); }
.dp-hero-split .dp-quick a:hover::before { background: #017efa; color: #ffffff; }
/* FAQ: a tile for the toggle, a gradient edge on the open answer. */
.pg-faq__item { position: relative; }
.pg-faq__item[open]::before { content: ""; position: absolute; left: -1.25rem; top: 1.25rem; bottom: 1.25rem; width: 2px; border-radius: 2px; background: linear-gradient(180deg, #017efa, #5ceed2); }
.pg-faq__icon { width: 30px; height: 30px; border: 1px solid #e2e6e7; border-radius: 9px; background: #ffffff; }
.pg-faq__icon::before, .pg-faq__icon::after { left: 8px; right: 8px; top: 13px; }
.pg-faq__item summary:hover .pg-faq__icon { border-color: #121317; }
.pg-faq__answer p { color: #2b2d31; }
/* Content pages: the sidebar joins the brand. */
.nav-filter-wrap { background: transparent; }
.nav-filter { background: #ffffff; border: 1px solid #e2e6e7; border-radius: 10px; }
aside.site-nav a[aria-current="page"] { background: rgba(1, 126, 250, 0.08); color: #0b5fd1; box-shadow: inset 2px 0 0 #017efa; border-radius: 0 8px 8px 0; }
aside.site-nav .nav-tree > ul > li > a, aside.site-nav > .nav-inner > ul > li > a { color: #121317; font-size: var(--t-sm); }
aside.site-nav ul ul li > a { color: #45474a; font-size: var(--t-sm); }
main > section > header + p { font-size: var(--t-md); color: #2b2d31; }
/* Phones keep the Docs lockup: it is the clearest sign of where the reader is. */
@media (max-width: 70rem) { .dp-docs-label { display: inline-block !important; font-size: var(--t-md); padding-left: 12px; } }

/* ===== Round 7 (focal point, sparkle, content-page brand) ================= */
.portal-hero.dp-hero-split { padding-bottom: 2.5rem; }
.dp-hero-split__media { position: relative; }
.dp-hero-split__media img { opacity: 0.94; filter: saturate(0.92); }
/* The focal card: a real answer from the guide, in Nexus Answers' dark glass. */
.pg-ask {
  position: absolute; right: -1.25rem; bottom: -1.75rem; z-index: 2; width: min(22rem, 62%); margin: 0; padding: 1.1rem 1.2rem 1.15rem;
  border-radius: 18px; color: #ffffff; background: rgba(22, 24, 30, 0.86); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 30px 60px -18px rgba(11, 18, 38, 0.55);
}
.pg-ask__head { display: flex; align-items: center; gap: .5rem; margin: 0 0 .85rem; font-size: var(--t-xs); font-weight: 500; color: rgba(255, 255, 255, 0.72); }
.pg-ask__spark { width: 18px; height: 18px; border-radius: 6px; background: var(--pg-grad-nexus); flex: none; }
.pg-ask__q { margin: 0 0 .6rem; padding: .55rem .8rem; border-radius: 12px; background: rgba(255, 255, 255, 0.10); font-size: var(--t-sm); line-height: 1.4; color: #ffffff; }
.pg-ask__a { margin: 0 0 .8rem; font-size: var(--t-sm); line-height: 1.5; color: #e7ecf3; }
.pg-ask__src { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem; border-radius: 999px; font-size: var(--pg-ui-3); font-weight: 500; color: #9fd8ff; background: rgba(1, 126, 250, 0.18); text-decoration: none; }
.pg-ask__src:hover { color: #ffffff; background: rgba(1, 126, 250, 0.35); }
@media (max-width: 52rem) { .pg-ask { position: static; width: auto; margin: 1rem 1rem 0; } }
/* Content pages: the Structured Intelligence line under the header, a glyph on the chapter eyebrow. */
body:not(.portal) .topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: linear-gradient(90deg, #017efa, #86dbff 55%, #5ceed2); pointer-events: none; }
.dp-eyebrow--page > span { display: inline-flex; align-items: center; gap: .55rem; }
.dp-eyebrow--page > span::before {
  content: ""; width: 22px; height: 22px; border-radius: 7px; background-color: #eef5ff; flex: none;
  background-image: radial-gradient(circle at 28% 28%, #017efa 1.7px, transparent 2.1px), radial-gradient(circle at 72% 28%, #51cbff 1.7px, transparent 2.1px),
    radial-gradient(circle at 28% 72%, #017efa 1.7px, transparent 2.1px), radial-gradient(circle at 72% 72%, #017efa 1.7px, transparent 2.1px);
}

/* ===== Round 8 (layout polish) =========================================== */
/* The first screen ends on the band's eyebrow, never on half a headline. */
.pg-journey { padding-top: clamp(5rem, 10vw, 9.5rem); }
/* The answer card overhangs the tile by the same amount on both axes. */
.pg-ask { right: -1.75rem; bottom: -1.75rem; box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.45); }
/* Start-here rows: a title and a one-line hint. */
.dp-quick__text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.dp-quick__title { font-size: var(--t-md); color: inherit; }
.dp-quick__hint { font-size: var(--t-xs); color: #45474a; }
.dp-hero-split .dp-quick a { padding-block: .65rem; }
/* Content pages share the landing page's lavender note. */
body:not(.portal) {
  background:
    radial-gradient(52% 300px at 64% 72px, rgba(134, 219, 255, 0.34), transparent 72%),
    radial-gradient(40% 260px at 94% 72px, rgba(56, 255, 172, 0.16), transparent 72%),
    radial-gradient(42% 260px at 30% 72px, rgba(190, 170, 255, 0.24), transparent 72%), #ffffff;
  background-repeat: no-repeat;
}
/* Phones: the answer card under the path, and a few particles. */
@media (max-width: 36rem) {
  .dp-hero-split__media { display: block; padding: 0; background: none; box-shadow: none; margin: 1.75rem 0 0; }
  .dp-hero-split__media img { display: none; }
  .pg-ask { position: static; width: auto; margin: 0; }
}
@media (max-width: 52rem) {
  .portal-hero.dp-hero-split::after {
    background:
    radial-gradient(circle, rgba(255,255,255,0.5) 0 1.0px, rgba(120,190,255,0.28) 2.0px, transparent 8.0px) 80.5% 90.0% / 20px 20px no-repeat,
    radial-gradient(circle, rgba(255,255,255,0.7) 0 1.5px, rgba(120,190,255,0.39) 2.5px, transparent 8.5px) 89.5% 91.0% / 20px 20px no-repeat,
    radial-gradient(circle, rgba(255,255,255,0.5) 0 1.0px, rgba(120,190,255,0.28) 2.0px, transparent 8.0px) 81.6% 94.3% / 20px 20px no-repeat,
    radial-gradient(circle, rgba(255,255,255,1.0) 0 3.0px, rgba(120,190,255,0.55) 4.0px, transparent 10.0px) 70.2% 93.4% / 20px 20px no-repeat,
    radial-gradient(circle, rgba(255,255,255,0.5) 0 1.0px, rgba(120,190,255,0.28) 2.0px, transparent 8.0px) 77.3% 85.5% / 20px 20px no-repeat,
    radial-gradient(circle, rgba(255,255,255,0.7) 0 1.5px, rgba(120,190,255,0.39) 2.5px, transparent 8.5px) 85.0% 81.0% / 20px 20px no-repeat,
    radial-gradient(circle, rgba(255,255,255,0.7) 0 1.5px, rgba(120,190,255,0.39) 2.5px, transparent 8.5px) 92.6% 90.7% / 20px 20px no-repeat,
    radial-gradient(circle, rgba(255,255,255,1.0) 0 3.0px, rgba(120,190,255,0.55) 4.0px, transparent 10.0px) 86.2% 71.9% / 20px 20px no-repeat,
    radial-gradient(circle, rgba(255,255,255,0.5) 0 1.0px, rgba(120,190,255,0.28) 2.0px, transparent 8.0px) 60.2% 70.0% / 20px 20px no-repeat;
  }
}

/* ===== Round 9: Paligo's icon rule, Material Symbols Outlined 400 everywhere ===== */
:root {
  --ms-chevron: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 -960 960 960%22%3E%3Cpath d=%22M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z%22/%3E%3C/svg%3E");
  --ms-arrow: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 -960 960 960%22%3E%3Cpath d=%22M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z%22/%3E%3C/svg%3E");
  --ms-info: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 -960 960 960%22%3E%3Cpath d=%22M440-280h80v-240h-80v240Zm68.5-331.5Q520-623 520-640t-11.5-28.5Q497-680 480-680t-28.5 11.5Q440-657 440-640t11.5 28.5Q463-600 480-600t28.5-11.5ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z%22/%3E%3C/svg%3E");
  --ms-tip: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 -960 960 960%22%3E%3Cpath d=%22M423.5-103.5Q400-127 400-160h160q0 33-23.5 56.5T480-80q-33 0-56.5-23.5ZM320-200v-80h320v80H320Zm10-120q-69-41-109.5-110T180-580q0-125 87.5-212.5T480-880q125 0 212.5 87.5T780-580q0 81-40.5 150T630-320H330Zm24-80h252q45-32 69.5-79T700-580q0-92-64-156t-156-64q-92 0-156 64t-64 156q0 54 24.5 101t69.5 79Zm126 0Z%22/%3E%3C/svg%3E");
  --ms-important: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 -960 960 960%22%3E%3Cpath d=%22M508.5-291.5Q520-303 520-320t-11.5-28.5Q497-360 480-360t-28.5 11.5Q440-337 440-320t11.5 28.5Q463-280 480-280t28.5-11.5ZM440-440h80v-240h-80v240Zm40 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z%22/%3E%3C/svg%3E");
  --ms-warning: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 -960 960 960%22%3E%3Cpath d=%22m40-120 440-760 440 760H40Zm138-80h604L480-720 178-200Zm330.5-51.5Q520-263 520-280t-11.5-28.5Q497-320 480-320t-28.5 11.5Q440-297 440-280t11.5 28.5Q463-240 480-240t28.5-11.5ZM440-360h80v-200h-80v200Zm40-100Z%22/%3E%3C/svg%3E");
}
.ms-icon { width: 1.25em; height: 1.25em; }
/* Sidebar toggles: the platform script injects its own chevron; draw the brand one instead. */
aside.site-nav .nav-toggle svg { display: none; }
aside.site-nav .nav-toggle::before {
  content: ""; display: block; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--ms-chevron) center / contain no-repeat; mask: var(--ms-chevron) center / contain no-repeat;
  transition: transform 180ms var(--pg-ease);
}
aside.site-nav .nav-toggle[aria-expanded="true"]::before { transform: rotate(90deg); }
/* Admonition icons by type. */
.admonition .icon-container { -webkit-mask: var(--ms-info) center / contain no-repeat; mask: var(--ms-info) center / contain no-repeat; }
.admonition.tip .icon-container { -webkit-mask-image: var(--ms-tip); mask-image: var(--ms-tip); }
.admonition.important .icon-container { -webkit-mask-image: var(--ms-important); mask-image: var(--ms-important); }
.admonition:is(.warning, .caution, .danger) .icon-container { -webkit-mask-image: var(--ms-warning); mask-image: var(--ms-warning); }
/* Arrows: the brand arrow, not a typographic one. */
.dp-hero-split .dp-quick a::after {
  content: ""; width: 20px; height: 20px; flex: none; background: currentColor; color: #898b8b;
  -webkit-mask: var(--ms-arrow) center / contain no-repeat; mask: var(--ms-arrow) center / contain no-repeat;
}
.dp-hero-split .dp-quick a:hover::after { background: #0055ff; }
.dp-card__arrow { font-size: 0; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--ms-arrow) center / contain no-repeat; mask: var(--ms-arrow) center / contain no-repeat; }

/* ===== Round 9: the hero visual in HTML (partials/pg-hero-visual) ========= */
.dp-hero-split__media:has(.pg-hv) { padding: clamp(3rem, 5vw, 4.25rem) clamp(1.75rem, 3vw, 2.5rem) clamp(4.5rem, 6vw, 5.5rem); }
.pg-hv { position: relative; font-family: var(--paligo-font); color: #121317; }
.pg-hv .ms-icon { width: 15px; height: 15px; flex: none; }
.pg-hv__chip {
  position: absolute; top: -2.1rem; left: 1.25rem; z-index: 3; display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .75rem; border-radius: 999px; font-size: var(--pg-ui-3); font-weight: 500; color: #ffffff;
  background: rgba(22, 24, 30, 0.84); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 12px 28px -10px rgba(11, 18, 38, 0.45);
}
.pg-hv__live { width: 7px; height: 7px; border-radius: 50%; background: #38ffac; box-shadow: 0 0 0 3px rgba(56, 255, 172, 0.25); }
.pg-hv__win { position: relative; z-index: 1; border-radius: 14px; background: #ffffff; overflow: hidden; box-shadow: 0 30px 60px -22px rgba(11, 18, 38, 0.45); }
.pg-hv__bar { display: flex; align-items: center; gap: .5rem; height: 40px; padding: 0 .9rem; border-bottom: 1px solid #e9edee; font-size: var(--pg-ui-3); }
.pg-hv__bar b { font-family: var(--dp-display); font-weight: 400; font-size: var(--t-xs); padding-left: .5rem; border-left: 1px solid #d6dadb; }
.pg-hv__logo { display: grid; grid-template-columns: repeat(2, 5px); gap: 2px; }
.pg-hv__logo i { width: 5px; height: 5px; border-radius: 50%; background: #017efa; }
.pg-hv__logo i:nth-child(2) { background: #51cbff; }
.pg-hv__search { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; width: 42%; padding: .3rem .6rem; border: 1px solid #e2e6e7; border-radius: 999px; color: #898b8b; font-size: var(--pg-ui-2); }
.pg-hv__search .ms-icon { width: 13px; height: 13px; }
.pg-hv__body { display: grid; grid-template-columns: 34% 1fr; min-height: 18rem; }
.pg-hv__nav, .pg-hv__nav ul { list-style: none; margin: 0; padding: 0; }
.pg-hv__nav { padding: .9rem .7rem; border-right: 1px solid #eef1f2; font-size: var(--pg-ui-2); line-height: 1.35; color: #45474a; }
.pg-hv__nav > li { padding: .3rem .35rem; }
.pg-hv__nav > li.is-open { color: #121317; font-weight: 500; }
.pg-hv__nav ul { margin: .3rem 0 0 .4rem; font-weight: 400; }
.pg-hv__nav ul li { padding: .28rem .45rem; color: #666869; border-radius: 0 6px 6px 0; }
.pg-hv__nav ul li.is-active { color: #0b5fd1; background: rgba(1, 126, 250, 0.08); box-shadow: inset 2px 0 0 #017efa; }
.pg-hv__page { padding: 1rem 1.1rem 1.1rem; }
.pg-hv__eyebrow { display: flex; align-items: center; gap: .4rem; margin: 0 0 .45rem; font-size: var(--pg-ui-2); font-weight: 500; color: #45474a; }
.pg-hv__glyph { width: 14px; height: 14px; border-radius: 4px; background-color: #eef5ff;
  background-image: radial-gradient(circle at 30% 30%, #017efa 1.2px, transparent 1.5px), radial-gradient(circle at 70% 30%, #51cbff 1.2px, transparent 1.5px), radial-gradient(circle at 30% 70%, #017efa 1.2px, transparent 1.5px), radial-gradient(circle at 70% 70%, #017efa 1.2px, transparent 1.5px); }
.pg-hv__title { margin: 0 0 .8rem; font-family: var(--dp-display); font-size: var(--t-lg); line-height: 1.12; letter-spacing: -0.02em; }
.pg-hv__note { display: grid; grid-template-columns: auto 1fr; gap: .2rem .5rem; align-items: start; margin: 0 0 .8rem; padding: .6rem .7rem; border-radius: 10px; background: #f2f8ff; font-size: var(--pg-ui-1); line-height: 1.4; color: #2b2d31; }
.pg-hv__note > .ms-icon { color: #017efa; width: 14px; height: 14px; }
.pg-hv__note b { display: block; color: #0055ff; font-weight: 600; }
.pg-hv__note em { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: .25rem; margin-top: .25rem; padding: .12rem .45rem; border-radius: 999px; font-style: normal; font-weight: 500; font-size: var(--pg-ui-1); color: #0b5fd1; background: rgba(1, 126, 250, 0.10); }
.pg-hv__note em .ms-icon { width: 11px; height: 11px; }
.pg-hv__steps { list-style: none; margin: 0; padding: 0; counter-reset: hv; font-size: var(--pg-ui-2); line-height: 1.4; color: #2b2d31; }
.pg-hv__steps li { counter-increment: hv; display: flex; align-items: center; gap: .5rem; padding: .28rem 0; }
.pg-hv__steps li::before { content: counter(hv, decimal-leading-zero); flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #e6f2ff; color: #0055ff; font-size: var(--pg-ui-1); font-weight: 600; }
.pg-hv__tree {
  position: absolute; left: -2rem; bottom: -3.4rem; z-index: 2; width: 52%; padding: .8rem .85rem .7rem; border-radius: 14px; color: #ffffff;
  background: rgba(22, 24, 30, 0.86); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 24px 50px -16px rgba(11, 18, 38, 0.55); font-size: var(--pg-ui-2);
}
.pg-hv__tree-head { display: flex; align-items: center; gap: .4rem; margin: 0 0 .5rem; font-weight: 500; color: rgba(255, 255, 255, 0.78); }
.pg-hv__tree ul { list-style: none; margin: 0; padding: 0; }
.pg-hv__tree li { display: flex; align-items: center; gap: .45rem; padding: .32rem .4rem; border-radius: 7px; color: #d7dde6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-hv__tree li.is-active { background: rgba(1, 126, 250, 0.28); color: #ffffff; }
.pg-hv__tree li.is-comp { color: #9fd8ff; }
.pg-hv__tree li em { margin-left: auto; font-style: normal; font-size: var(--pg-ui-1); padding: .08rem .4rem; border-radius: 999px; background: rgba(56, 255, 172, 0.16); color: #7dffcc; }
/* The answer card now overhangs the portal window, not the old screenshot. */
.dp-hero-split__media:has(.pg-hv) .pg-ask { right: -1.75rem; bottom: -2.25rem; width: min(20rem, 56%); }
@media (max-width: 36rem) { .pg-hv { display: none; } .dp-hero-split__media:has(.pg-hv) { padding: 0; } }

/* ===== Round 9: calibrated-judge fixes ===================================== */
/* The hero fills the first screen: no empty black strip under it. */
.portal-hero.dp-hero-split { min-height: 100svh; box-sizing: border-box; display: flex; align-items: center; }
.portal-hero.dp-hero-split > .dp-hero-split__inner { width: min(var(--dp-wrap), calc(100% - 2 * clamp(1.25rem, 3vw, 2.5rem))); }
.portal-hero.dp-hero-split h1 { font-size: clamp(3.2rem, 6vw, 5.6rem); }
/* Search is the hero's first action; the header search steps back on this page. */
.dp-hero-split .portal-search { max-width: 30rem; margin: 0 0 1.75rem; }
.dp-hero .portal-search .site-search__form { height: 56px; border-radius: 12px; border: 1px solid transparent; background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(110deg, #017efa, #86dbff 55%, #5ceed2) border-box; box-shadow: 0 14px 34px -18px rgba(1, 126, 250, 0.45); }
.dp-hero .portal-search .site-search__input { font-size: var(--t-md); }
body.portal .topbar .site-search { display: none; }
/* The hero visual: less crowding, the steps stay readable. */
.pg-hv__tree { width: 44%; left: -2.25rem; bottom: -3rem; }
.dp-hero-split__media:has(.pg-hv) .pg-ask { width: min(17.5rem, 50%); right: -2rem; bottom: -2.75rem; }
.pg-hv__body { min-height: 20rem; }
/* Chapter cards: a distinct Material Symbol per chapter, on a tint from the brand gradient. */
.dp-card:not(.dp-card--start) .dp-card__top { position: relative; }
.dp-card:not(.dp-card--start) .dp-card__top::before { background-image: none; background-color: var(--chap-tint, #eef5ff); }
.dp-card:not(.dp-card--start) .dp-card__top::after { content: ""; position: absolute; left: 8px; top: 50%; width: 20px; height: 20px; margin-top: -10px; background: var(--chap-ink, #017efa); -webkit-mask: var(--chap-icon) center / contain no-repeat; mask: var(--chap-icon) center / contain no-repeat; }
.dp-card[href="introducing-paligo.html"] { --chap-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 -960 960 960%22%3E%3Cpath d=%22M480-160q-48-38-104-59t-116-21q-42 0-82.5 11T100-198q-21 11-40.5-1T40-234v-482q0-11 5.5-21T62-752q46-24 96-36t102-12q58 0 113.5 15T480-740v484q51-32 107-48t113-16q36 0 70.5 6t69.5 18v-480q15 5 29.5 10.5T898-752q11 5 16.5 15t5.5 21v482q0 23-19.5 35t-40.5 1q-37-20-77.5-31T700-240q-60 0-116 21t-104 59Zm80-200v-380l200-200v400L560-360Zm-160 65v-396q-33-14-68.5-21.5T260-720q-37 0-72 7t-68 21v397q35-13 69.5-19t70.5-6q36 0 70.5 6t69.5 19Zm0 0v-396 396Z%22/%3E%3C/svg%3E"); --chap-tint: #e6f2ff; --chap-ink: #017efa; }
.dp-card[href="setting-up-your-workspace.html"] { --chap-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 -960 960 960%22%3E%3Cpath d=%22m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z%22/%3E%3C/svg%3E"); --chap-tint: #e8f6ff; --chap-ink: #0a8fd8; }
.dp-card[href="writing-structured-content.html"] { --chap-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 -960 960 960%22%3E%3Cpath d=%22M160-400v-80h280v80H160Zm0-160v-80h440v80H160Zm0-160v-80h440v80H160Zm360 560v-123l221-220q9-9 20-13t22-4q12 0 23 4.5t20 13.5l37 37q8 9 12.5 20t4.5 22q0 11-4 22.5T863-380L643-160H520Zm300-263-37-37 37 37ZM580-220h38l121-122-18-19-19-18-122 121v38Zm141-141-19-18 37 37-18-19Z%22/%3E%3C/svg%3E"); --chap-tint: #ecf2ff; --chap-ink: #3d6bff; }
.dp-card[href="reusing-content.html"] { --chap-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 -960 960 960%22%3E%3Cpath d=%22M204-318q-22-38-33-78t-11-82q0-134 93-228t227-94h7l-64-64 56-56 160 160-160 160-56-56 64-64h-7q-100 0-170 70.5T240-478q0 26 6 51t18 49l-60 60ZM481-40 321-200l160-160 56 56-64 64h7q100 0 170-70.5T720-482q0-26-6-51t-18-49l60-60q22 38 33 78t11 82q0 134-93 228t-227 94h-7l64 64-56 56Z%22/%3E%3C/svg%3E"); --chap-tint: #e6fbf3; --chap-ink: #0f9d6e; }
.dp-card[href="reviewing-and-collaborating.html"] { --chap-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 -960 960 960%22%3E%3Cpath d=%22M240-400h122l200-200q9-9 13.5-20.5T580-643q0-11-5-21.5T562-684l-36-38q-9-9-20-13.5t-23-4.5q-11 0-22.5 4.5T440-722L240-522v122Zm280-243-37-37 37 37ZM300-460v-38l101-101 20 18 18 20-101 101h-38Zm121-121 18 20-38-38 20 18Zm26 181h273v-80H527l-80 80ZM80-80v-720q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H240L80-80Zm126-240h594v-480H160v525l46-45Zm-46 0v-480 480Z%22/%3E%3C/svg%3E"); --chap-tint: #f1ecff; --chap-ink: #7a4fe0; }
.dp-card[href="translating-content.html"] { --chap-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 -960 960 960%22%3E%3Cpath d=%22m476-80 182-480h84L924-80h-84l-43-122H603L560-80h-84ZM160-200l-56-56 202-202q-35-35-63.5-80T190-640h84q20 39 40 68t48 58q33-33 68.5-92.5T484-720H40v-80h280v-80h80v80h280v80H564q-21 72-63 148t-83 116l96 98-30 82-122-125-202 201Zm468-72h144l-72-204-72 204Z%22/%3E%3C/svg%3E"); --chap-tint: #fbeefb; --chap-ink: #b64fb0; }
.dp-card[href="publishing-your-content.html"] { --chap-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 -960 960 960%22%3E%3Cpath d=%22M440-200h80v-167l64 64 56-57-160-160-160 160 57 56 63-63v167ZM240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM240-800v200-200 640-640Z%22/%3E%3C/svg%3E"); --chap-tint: #e8f6ff; --chap-ink: #0a8fd8; }
.dp-card[href="publishing-to-nexus.html"] { --chap-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 -960 960 960%22%3E%3Cpath d=%22M324-111.5Q251-143 197-197t-85.5-127Q80-397 80-480t31.5-156Q143-709 197-763t127-85.5Q397-880 480-880t156 31.5Q709-817 763-763t85.5 127Q880-563 880-480t-31.5 156Q817-251 763-197t-127 85.5Q563-80 480-80t-156-31.5ZM440-162v-78q-33 0-56.5-23.5T360-320v-40L168-552q-3 18-5.5 36t-2.5 36q0 121 79.5 212T440-162Zm276-102q41-45 62.5-100.5T800-480q0-98-54.5-179T600-776v16q0 33-23.5 56.5T520-680h-80v80q0 17-11.5 28.5T400-560h-80v80h240q17 0 28.5 11.5T600-440v120h40q26 0 47 15.5t29 40.5Z%22/%3E%3C/svg%3E"); --chap-tint: #e6fbf3; --chap-ink: #0f9d6e; }
.dp-card[href="a-reference.html"] { --chap-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 -960 960 960%22%3E%3Cpath d=%22M560-564v-68q33-14 67.5-21t72.5-7q26 0 51 4t49 10v64q-24-9-48.5-13.5T700-600q-38 0-73 9.5T560-564Zm0 220v-68q33-14 67.5-21t72.5-7q26 0 51 4t49 10v64q-24-9-48.5-13.5T700-380q-38 0-73 9t-67 27Zm0-110v-68q33-14 67.5-21t72.5-7q26 0 51 4t49 10v64q-24-9-48.5-13.5T700-490q-38 0-73 9.5T560-454ZM260-320q47 0 91.5 10.5T440-278v-394q-41-24-87-36t-93-12q-36 0-71.5 7T120-692v396q35-12 69.5-18t70.5-6Zm260 42q44-21 88.5-31.5T700-320q36 0 70.5 6t69.5 18v-396q-33-14-68.5-21t-71.5-7q-47 0-93 12t-87 36v394Zm-40 118q-48-38-104-59t-116-21q-42 0-82.5 11T100-198q-21 11-40.5-1T40-234v-482q0-11 5.5-21T62-752q46-24 96-36t102-12q58 0 113.5 15T480-740q51-30 106.5-45T700-800q52 0 102 12t96 36q11 5 16.5 15t5.5 21v482q0 23-19.5 35t-40.5 1q-37-20-77.5-31T700-240q-60 0-116 21t-104 59ZM280-494Z%22/%3E%3C/svg%3E"); --chap-tint: #ecf2ff; --chap-ink: #3d6bff; }
.dp-card[href="b-glossary.html"] { --chap-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 -960 960 960%22%3E%3Cpath d=%22M564-80 394-250l56-56 114 114 226-226 56 56L564-80ZM120-320l194-520h94l194 520h-92l-46-132H254l-46 132h-88Zm162-208h156l-76-216h-4l-76 216Z%22/%3E%3C/svg%3E"); --chap-tint: #f1ecff; --chap-ink: #7a4fe0; }
/* Journey cards: the Explore link never wraps, descriptions line up. */
/* (journey card columns set in the media query below) */
.pg-more { white-space: nowrap; }
/* The black Overview card: a dot field fills its corner, the button sits at the bottom. */
.dp-card--start { position: relative; overflow: hidden; display: flex; flex-direction: column; }
.dp-card--start .dp-card__foot { margin-top: auto; }
.dp-card--start::after { content: ""; position: absolute; right: -10px; bottom: -10px; width: 46%; height: 70%; pointer-events: none; background-image: radial-gradient(circle, rgba(81, 203, 255, 0.55) 1.6px, transparent 2px); background-size: 18px 18px; -webkit-mask: radial-gradient(circle at 100% 100%, #000 0, transparent 70%); mask: radial-gradient(circle at 100% 100%, #000 0, transparent 70%); }
/* Inside-the-guide rows: an even rhythm and a wider copy column. */
@media (min-width: 52.01rem) {
  .pg-row { grid-template-columns: 7fr 5fr; padding-block: clamp(2.5rem, 5vw, 4rem); }
  .pg-row--flip { grid-template-columns: 5fr 7fr; }
  .pg-journey__card { grid-template-columns: 8.5rem minmax(0, 1fr) minmax(18rem, 24rem); }
}
/* Tables. */
main tbody td:first-child { font-weight: 500; color: #121317; }
main tbody tr { transition: background-color 160ms ease; }
main tbody tr:hover { background: #f5f9ff; }
main table { border-radius: 12px; }

/* ===== Round 9: the search page, designed like the landing page ========== */
body.searchpage .paligo-search-page { width: min(46rem, calc(100% - 2.5rem)); margin: 0 auto; padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(4rem, 8vw, 6rem); }
body.searchpage .paligo-search-page h1 { font-family: var(--dp-display); font-weight: 400; letter-spacing: -0.035em; font-size: clamp(2.8rem, 5vw, 4rem); line-height: 1; margin: 0 0 1.75rem; color: #121317; }
body.searchpage .site-search__form { height: 58px; border-radius: 12px; border: 1px solid transparent; background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(110deg, #017efa, #86dbff 55%, #5ceed2) border-box; box-shadow: 0 14px 34px -18px rgba(1, 126, 250, 0.45); }
body.searchpage .site-search__input { font-size: var(--t-md); }
.pg-search-start .dp-quick { display: block; counter-reset: dp-path; margin: 2.5rem 0 0; }
.pg-search-start .dp-quick li { display: block; }
.pg-search-start .dp-quick__label { margin: 0 0 .5rem !important; font-family: var(--dp-display); font-size: var(--t-sm); font-weight: 500; color: #45474a; }
.pg-search-start .dp-quick li:not(.dp-quick__label) { counter-increment: dp-path; border-top: 1px solid #e2e6e7; }
.pg-search-start .dp-quick li:last-child { border-bottom: 1px solid #e2e6e7; }
.pg-search-start .dp-quick a { display: flex; align-items: center; gap: .9rem; margin: 0 -.75rem; padding: .7rem .75rem; border: 0; border-radius: 10px; background: none; color: #121317; text-decoration: none; }
.pg-search-start .dp-quick a::before { content: counter(dp-path, decimal-leading-zero); flex: none; width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; background: #e6f2ff; color: #0055ff; font-size: var(--t-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.pg-search-start .dp-quick a::after { content: ""; margin-left: auto; width: 20px; height: 20px; flex: none; background: #898b8b; -webkit-mask: var(--ms-arrow) center / contain no-repeat; mask: var(--ms-arrow) center / contain no-repeat; }
.pg-search-start .dp-quick a:hover { background: rgba(1, 126, 250, 0.06); color: #0055ff; }
.pg-search-start .dp-quick a:hover::before { background: #017efa; color: #ffffff; }
.paligo-search-page:has(.site-search__results li) .pg-search-start { display: none; }

/* ===== Round 9: content-page meta, figure zoom ============================ */
.pg-meta { display: flex; align-items: center; gap: .75rem; margin: -.25rem 0 1rem; font-size: var(--t-xs); color: #666869; }
.pg-meta__bar { width: 72px; height: 4px; border-radius: 999px; background: #e6eef5; position: relative; overflow: hidden; }
.pg-meta__bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--pg-progress, 0%); border-radius: inherit; background: linear-gradient(90deg, #017efa, #5ceed2); }
.pg-meta__read::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 .6rem .2rem 0; border-radius: 50%; background: #b9bdc0; vertical-align: middle; }
.pg-meta__pos:only-child + .pg-meta__read::before, .pg-meta > .pg-meta__read:first-child::before { display: none; }

/* ===== Round 10 =========================================================== */
/* Chapter icons: the appendices link by anchor; one ink for every glyph, only the tile tint varies. */
.dp-card[href*="UUID-67d352d7"] { --chap-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 -960 960 960%22%3E%3Cpath d=%22M560-564v-68q33-14 67.5-21t72.5-7q26 0 51 4t49 10v64q-24-9-48.5-13.5T700-600q-38 0-73 9.5T560-564Zm0 220v-68q33-14 67.5-21t72.5-7q26 0 51 4t49 10v64q-24-9-48.5-13.5T700-380q-38 0-73 9t-67 27Zm0-110v-68q33-14 67.5-21t72.5-7q26 0 51 4t49 10v64q-24-9-48.5-13.5T700-490q-38 0-73 9.5T560-454ZM260-320q47 0 91.5 10.5T440-278v-394q-41-24-87-36t-93-12q-36 0-71.5 7T120-692v396q35-12 69.5-18t70.5-6Zm260 42q44-21 88.5-31.5T700-320q36 0 70.5 6t69.5 18v-396q-33-14-68.5-21t-71.5-7q-47 0-93 12t-87 36v394Zm-40 118q-48-38-104-59t-116-21q-42 0-82.5 11T100-198q-21 11-40.5-1T40-234v-482q0-11 5.5-21T62-752q46-24 96-36t102-12q58 0 113.5 15T480-740q51-30 106.5-45T700-800q52 0 102 12t96 36q11 5 16.5 15t5.5 21v482q0 23-19.5 35t-40.5 1q-37-20-77.5-31T700-240q-60 0-116 21t-104 59ZM280-494Z%22/%3E%3C/svg%3E"); --chap-tint: #ecf2ff; }
.dp-card[href*="UUID-0c500ec4"] { --chap-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 -960 960 960%22%3E%3Cpath d=%22M564-80 394-250l56-56 114 114 226-226 56 56L564-80ZM120-320l194-520h94l194 520h-92l-46-132H254l-46 132h-88Zm162-208h156l-76-216h-4l-76 216Z%22/%3E%3C/svg%3E"); --chap-tint: #f1ecff; }
.dp-card:not(.dp-card--start) .dp-card__top::after { background: #0b5fd1; }
/* Eyebrows: a brand signature without capitals, a small dot glyph and Gravity Blue. */
.pg-kicker:not(.pg-kicker--dark), .dp-hero-split .dp-quick__label, .pg-search-start .dp-quick__label, .dp-card--start .dp-card__index { display: inline-flex; align-items: center; gap: .5rem; color: #0b5fd1; font-weight: 500; }
.pg-kicker--dark { display: inline-flex; align-items: center; gap: .5rem; color: #86dbff; }
.dp-hero-split .dp-quick__label::before, .pg-search-start .dp-quick__label::before, .pg-journey__head .pg-kicker::before, .pg-rows__head .pg-kicker::before {
  content: ""; width: 9px; height: 9px; flex: none;
  background-image: radial-gradient(circle, currentColor 1.4px, transparent 1.8px); background-size: 4.5px 4.5px;
}
.dp-card--start .dp-card__index { color: #86dbff; }
/* Rhythm below the chapter grid. */
@media (min-width: 52.01rem) { .pg-row { padding-block: clamp(2.25rem, 4vw, 3.5rem); } .pg-faq { align-items: start; } .pg-faq__head h2 { margin-top: 1.4rem; } }
.pg-rows { margin-top: clamp(4rem, 7vw, 6rem); }
.pg-faq { margin-top: clamp(4rem, 7vw, 6rem); }
/* Hero: the answer card swaps with a soft fade when a Start-here step is pointed at. */
@media (prefers-reduced-motion: no-preference) { .pg-ask--swap [data-pg-q], .pg-ask--swap [data-pg-a] { animation: pg-fade 260ms var(--pg-ease); } }
@keyframes pg-fade { from { opacity: .2; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.pg-hv__nav li, .pg-hv__nav ul li { transition: background-color 200ms var(--pg-ease), color 200ms var(--pg-ease); }
.pg-hv__nav > li.is-active { color: #0b5fd1; background: rgba(1, 126, 250, 0.08); box-shadow: inset 2px 0 0 #017efa; border-radius: 0 6px 6px 0; }
.pg-hv__nav:has(> li.is-active) ul li.is-active { color: #666869; background: none; box-shadow: none; }
/* Phones: the answer card spans the column; the headline clears the header. */
@media (max-width: 36rem) {
  .dp-hero-split__media, .dp-hero-split__media:has(.pg-hv) { width: 100%; }
  .dp-hero-split__media:has(.pg-hv) .pg-ask, .pg-ask { position: static; width: 100%; max-width: none; margin: 0; }
  .portal-hero.dp-hero-split { padding-top: calc(var(--paligo-header-h) + 2.5rem); }
  .breadcrumb li:not(:first-child):not(:last-child):not(:nth-last-child(2)) { display: none; }
}
/* Row visuals in HTML, on the rows' gradient tiles. */
.pg-row__media--html { display: grid; place-items: center; padding: clamp(1.5rem, 4vw, 3rem); aspect-ratio: auto; min-height: 22rem; background: linear-gradient(160deg, #eaf5ff 0%, #a9dcff 55%, #4aa6ff 100%); }
.pg-row__media--html .ms-icon { width: 16px; height: 16px; flex: none; }
.pg-rv { width: 100%; max-width: 30rem; font-family: var(--paligo-font); font-size: var(--t-xs); color: #121317; }
.pg-rv__comp { position: relative; z-index: 1; padding: 1rem 1.1rem; border-radius: 14px; background: #ffffff; border-left: 3px solid #f5a524; box-shadow: 0 24px 50px -20px rgba(11, 18, 38, 0.45); }
.pg-rv__comp-head { display: flex; align-items: center; gap: .45rem; margin: 0 0 .4rem; color: #b7650b; }
.pg-rv__comp-head b { color: #b7650b; font-weight: 600; }
.pg-rv__comp-head em { margin-left: auto; display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 999px; font-style: normal; font-size: var(--pg-ui-2); font-weight: 500; color: #0b5fd1; background: rgba(1, 126, 250, 0.10); }
.pg-rv__comp > p:last-child { margin: 0; line-height: 1.45; color: #2b2d31; }
.pg-rv__uses { list-style: none; margin: -.4rem 1.2rem 0; padding: 1.1rem .9rem .6rem; border-radius: 0 0 14px 14px; background: rgba(22, 24, 30, 0.86); color: #e7ecf3; }
.pg-rv__uses li { display: flex; align-items: center; gap: .5rem; padding: .38rem 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.pg-rv__uses li:first-child { border-top: 0; }
.pg-rv__ok { margin-left: auto; color: #38ffac; }
.pg-rv__win { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: 0 28px 60px -22px rgba(11, 18, 38, 0.5); }
.pg-rv__bar { display: flex; align-items: center; gap: .5rem; height: 36px; padding: 0 .9rem; border-bottom: 1px solid #e9edee; }
.pg-rv__bar b { font-family: var(--dp-display); font-weight: 400; padding-left: .5rem; border-left: 1px solid #d6dadb; }
.pg-rv__hero { padding: 1.3rem 1.1rem 1.1rem; background: radial-gradient(70% 120% at 0% 100%, rgba(120, 235, 200, 0.45), transparent 70%), radial-gradient(60% 120% at 70% 110%, rgba(90, 190, 255, 0.45), transparent 70%), #f6fbfd; }
.pg-rv__hero p { margin: 0 0 .7rem; font-family: var(--dp-display); font-size: var(--t-lg); letter-spacing: -0.03em; line-height: 1.05; }
.pg-rv__search { display: flex; align-items: center; gap: .4rem; padding: .4rem .7rem; border-radius: 8px; color: #898b8b; background: #ffffff; border: 1px solid #cfe6fb; font-size: var(--pg-ui-3); }
.pg-rv__tiles { list-style: none; margin: 0; padding: .9rem; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.pg-rv__tiles li { display: flex; align-items: center; gap: .45rem; padding: .55rem .6rem; border: 1px solid #e6eaeb; border-radius: 10px; font-size: var(--pg-ui-3); }
.pg-rv__tiles .ms-icon { color: #0b5fd1; }
.pg-rv__chat { padding: 1.1rem 1.15rem 1.15rem; border-radius: 18px; color: #ffffff; background: rgba(22, 24, 30, 0.9); box-shadow: 0 30px 60px -18px rgba(11, 18, 38, 0.55); }
.pg-rv__head { display: flex; align-items: center; gap: .5rem; margin: 0 0 .8rem; font-size: var(--t-xs); font-weight: 500; color: rgba(255, 255, 255, 0.72); }
.pg-rv__q { margin: 0 0 .6rem auto; width: fit-content; max-width: 85%; padding: .55rem .8rem; border-radius: 12px; background: rgba(255, 255, 255, 0.12); font-size: var(--t-sm); line-height: 1.4; }
.pg-rv__a { margin: 0 0 .8rem; font-size: var(--t-sm); line-height: 1.5; color: #e7ecf3; }
.pg-rv__srcs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
.pg-rv__srcs span { display: inline-flex; align-items: center; gap: .3rem; padding: .28rem .6rem; border-radius: 999px; font-size: var(--pg-ui-3); font-weight: 500; color: #9fd8ff; background: rgba(1, 126, 250, 0.18); }
/* Search page: chapters as entry chips, and the footer never floats. */
body.searchpage .paligo-search-page { min-height: calc(100svh - var(--paligo-header-h) - 18rem); }
.pg-search-chapters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.pg-search-chapters a { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border: 1px solid #e2e6e7; border-radius: 999px; background: #ffffff; color: #121317; font-size: var(--t-sm); text-decoration: none; transition: border-color 200ms var(--pg-ease), color 200ms var(--pg-ease); }
.pg-search-chapters a:hover { border-color: #017efa; color: #0b5fd1; }
.paligo-search-page:has(.site-search__results li) .pg-search-chapters { display: none; }

/* ===== Round 11 ============================================================ */
[data-chapter="introducing-paligo"], .pg-search-chapters a[href="introducing-paligo.html"] { --chap-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 -960 960 960%22%3E%3Cpath d=%22M480-160q-48-38-104-59t-116-21q-42 0-82.5 11T100-198q-21 11-40.5-1T40-234v-482q0-11 5.5-21T62-752q46-24 96-36t102-12q58 0 113.5 15T480-740v484q51-32 107-48t113-16q36 0 70.5 6t69.5 18v-480q15 5 29.5 10.5T898-752q11 5 16.5 15t5.5 21v482q0 23-19.5 35t-40.5 1q-37-20-77.5-31T700-240q-60 0-116 21t-104 59Zm80-200v-380l200-200v400L560-360Zm-160 65v-396q-33-14-68.5-21.5T260-720q-37 0-72 7t-68 21v397q35-13 69.5-19t70.5-6q36 0 70.5 6t69.5 19Zm0 0v-396 396Z%22/%3E%3C/svg%3E"); --chap-tint: #e6f2ff; }
[data-chapter="setting-up-your-workspace"], .pg-search-chapters a[href="setting-up-your-workspace.html"] { --chap-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 -960 960 960%22%3E%3Cpath d=%22m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z%22/%3E%3C/svg%3E"); --chap-tint: #e8f6ff; }
[data-chapter="writing-structured-content"], .pg-search-chapters a[href="writing-structured-content.html"] { --chap-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 -960 960 960%22%3E%3Cpath d=%22M160-400v-80h280v80H160Zm0-160v-80h440v80H160Zm0-160v-80h440v80H160Zm360 560v-123l221-220q9-9 20-13t22-4q12 0 23 4.5t20 13.5l37 37q8 9 12.5 20t4.5 22q0 11-4 22.5T863-380L643-160H520Zm300-263-37-37 37 37ZM580-220h38l121-122-18-19-19-18-122 121v38Zm141-141-19-18 37 37-18-19Z%22/%3E%3C/svg%3E"); --chap-tint: #ecf2ff; }
[data-chapter="reusing-content"], .pg-search-chapters a[href="reusing-content.html"] { --chap-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 -960 960 960%22%3E%3Cpath d=%22M204-318q-22-38-33-78t-11-82q0-134 93-228t227-94h7l-64-64 56-56 160 160-160 160-56-56 64-64h-7q-100 0-170 70.5T240-478q0 26 6 51t18 49l-60 60ZM481-40 321-200l160-160 56 56-64 64h7q100 0 170-70.5T720-482q0-26-6-51t-18-49l60-60q22 38 33 78t11 82q0 134-93 228t-227 94h-7l64 64-56 56Z%22/%3E%3C/svg%3E"); --chap-tint: #e6fbf3; }
[data-chapter="reviewing-and-collaborating"], .pg-search-chapters a[href="reviewing-and-collaborating.html"] { --chap-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 -960 960 960%22%3E%3Cpath d=%22M240-400h122l200-200q9-9 13.5-20.5T580-643q0-11-5-21.5T562-684l-36-38q-9-9-20-13.5t-23-4.5q-11 0-22.5 4.5T440-722L240-522v122Zm280-243-37-37 37 37ZM300-460v-38l101-101 20 18 18 20-101 101h-38Zm121-121 18 20-38-38 20 18Zm26 181h273v-80H527l-80 80ZM80-80v-720q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H240L80-80Zm126-240h594v-480H160v525l46-45Zm-46 0v-480 480Z%22/%3E%3C/svg%3E"); --chap-tint: #f1ecff; }
[data-chapter="translating-content"], .pg-search-chapters a[href="translating-content.html"] { --chap-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 -960 960 960%22%3E%3Cpath d=%22m476-80 182-480h84L924-80h-84l-43-122H603L560-80h-84ZM160-200l-56-56 202-202q-35-35-63.5-80T190-640h84q20 39 40 68t48 58q33-33 68.5-92.5T484-720H40v-80h280v-80h80v80h280v80H564q-21 72-63 148t-83 116l96 98-30 82-122-125-202 201Zm468-72h144l-72-204-72 204Z%22/%3E%3C/svg%3E"); --chap-tint: #fbeefb; }
[data-chapter="publishing-your-content"], .pg-search-chapters a[href="publishing-your-content.html"] { --chap-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 -960 960 960%22%3E%3Cpath d=%22M440-200h80v-167l64 64 56-57-160-160-160 160 57 56 63-63v167ZM240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM240-800v200-200 640-640Z%22/%3E%3C/svg%3E"); --chap-tint: #e8f6ff; }
[data-chapter="publishing-to-nexus"], .pg-search-chapters a[href="publishing-to-nexus.html"] { --chap-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 -960 960 960%22%3E%3Cpath d=%22M324-111.5Q251-143 197-197t-85.5-127Q80-397 80-480t31.5-156Q143-709 197-763t127-85.5Q397-880 480-880t156 31.5Q709-817 763-763t85.5 127Q880-563 880-480t-31.5 156Q817-251 763-197t-127 85.5Q563-80 480-80t-156-31.5ZM440-162v-78q-33 0-56.5-23.5T360-320v-40L168-552q-3 18-5.5 36t-2.5 36q0 121 79.5 212T440-162Zm276-102q41-45 62.5-100.5T800-480q0-98-54.5-179T600-776v16q0 33-23.5 56.5T520-680h-80v80q0 17-11.5 28.5T400-560h-80v80h240q17 0 28.5 11.5T600-440v120h40q26 0 47 15.5t29 40.5Z%22/%3E%3C/svg%3E"); --chap-tint: #e6fbf3; }
.pg-search-chapters a[href*="UUID-67d352d7"] { --chap-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 -960 960 960%22%3E%3Cpath d=%22M560-564v-68q33-14 67.5-21t72.5-7q26 0 51 4t49 10v64q-24-9-48.5-13.5T700-600q-38 0-73 9.5T560-564Zm0 220v-68q33-14 67.5-21t72.5-7q26 0 51 4t49 10v64q-24-9-48.5-13.5T700-380q-38 0-73 9t-67 27Zm0-110v-68q33-14 67.5-21t72.5-7q26 0 51 4t49 10v64q-24-9-48.5-13.5T700-490q-38 0-73 9.5T560-454ZM260-320q47 0 91.5 10.5T440-278v-394q-41-24-87-36t-93-12q-36 0-71.5 7T120-692v396q35-12 69.5-18t70.5-6Zm260 42q44-21 88.5-31.5T700-320q36 0 70.5 6t69.5 18v-396q-33-14-68.5-21t-71.5-7q-47 0-93 12t-87 36v394Zm-40 118q-48-38-104-59t-116-21q-42 0-82.5 11T100-198q-21 11-40.5-1T40-234v-482q0-11 5.5-21T62-752q46-24 96-36t102-12q58 0 113.5 15T480-740q51-30 106.5-45T700-800q52 0 102 12t96 36q11 5 16.5 15t5.5 21v482q0 23-19.5 35t-40.5 1q-37-20-77.5-31T700-240q-60 0-116 21t-104 59ZM280-494Z%22/%3E%3C/svg%3E"); --chap-tint: #ecf2ff; }
.pg-search-chapters a[href*="UUID-0c500ec4"] { --chap-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 -960 960 960%22%3E%3Cpath d=%22M564-80 394-250l56-56 114 114 226-226 56 56L564-80ZM120-320l194-520h94l194 520h-92l-46-132H254l-46 132h-88Zm162-208h156l-76-216h-4l-76 216Z%22/%3E%3C/svg%3E"); --chap-tint: #f1ecff; }
:root { --ms-expand: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 -960 960 960%22%3E%3Cpath d=%22M120-120v-320h80v184l504-504H520v-80h320v320h-80v-184L256-200h184v80H120Z%22/%3E%3C/svg%3E"); }
/* Content eyebrow: the chapter's own icon tile, as on the landing cards. */
.dp-eyebrow--page[data-chapter] > span::before { background-image: none; background-color: var(--chap-tint, #eef5ff); position: relative; }
.dp-eyebrow--page[data-chapter] > span { position: relative; }
.dp-eyebrow--page[data-chapter] > span::after { content: ""; position: absolute; left: 4px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: #0b5fd1; -webkit-mask: var(--chap-icon) center / contain no-repeat; mask: var(--chap-icon) center / contain no-repeat; }
/* Search chips carry the chapter icon. */
.pg-chip-icon { width: 22px; height: 22px; border-radius: 7px; flex: none; position: relative; background: var(--chap-tint, #eef5ff); }
.pg-chip-icon::after { content: ""; position: absolute; inset: 4px; background: #0b5fd1; -webkit-mask: var(--chap-icon) center / contain no-repeat; mask: var(--chap-icon) center / contain no-repeat; }
.pg-search-chapters a { padding: .35rem .8rem .35rem .4rem; }
body.searchpage main { min-height: calc(100svh - var(--paligo-header-h) - 22rem); }
/* Hero at rest: nothing covers text; step 03 is shown as the active step, matching the window. */
.pg-hv__body { min-height: 24rem; }
.dp-hero-split__media:has(.pg-hv) .pg-ask { bottom: -4rem; right: -2rem; }
.pg-hv__tree { bottom: -4.25rem; }
.dp-hero-split .dp-quick:not(:hover):not(:focus-within) li:nth-child(4) a { background: rgba(1, 126, 250, 0.06); color: #0055ff; }
.dp-hero-split .dp-quick:not(:hover):not(:focus-within) li:nth-child(4) a::before { background: #017efa; color: #ffffff; }
.dp-hero-split .dp-quick:not(:hover):not(:focus-within) li:nth-child(4) a::after { background: #0055ff; transform: translateX(3px); }
.dp-hero-split .dp-quick a:focus-visible { background: rgba(1, 126, 250, 0.06); color: #0055ff; outline: none; box-shadow: inset 0 0 0 2px #017efa; }
.dp-hero-split .dp-quick a:focus-visible::before { background: #017efa; color: #ffffff; }
/* Inside the guide: three gradients, the same stops as the Create, Reuse, Publish cards. */
.pg-row:nth-of-type(1) .pg-row__media--html { background: linear-gradient(150deg, #e3efff 0%, #b9d6ff 45%, #d9c6ff 100%); }
.pg-row:nth-of-type(2) .pg-row__media--html { background: linear-gradient(150deg, #e8f6ff 0%, #9ed9ff 50%, #3fb4f2 100%); }
.pg-row:nth-of-type(3) .pg-row__media--html { background: linear-gradient(150deg, #e8fbf6 0%, #a9ecdb 50%, #5fd3c3 100%); }
/* Feature rows: two text levels, the section head leads. */
.pg-row h3 { font-size: clamp(1.7rem, 2.2vw, 1.9rem); }
.pg-row__lead { font-family: var(--paligo-font); font-size: var(--t-md); font-weight: 500; letter-spacing: 0; color: #2b2d31; max-width: 40ch; }
/* Create, Reuse, Publish cards: the description follows the title. */
@media (min-width: 52.01rem) { .pg-journey__card { grid-template-columns: 8.5rem auto minmax(0, 1fr); column-gap: 3rem; } }
/* FAQ: the left column carries a line and an action, and stays in view. */
.pg-faq__body { margin: 1.25rem 0 1.5rem; max-width: 30ch; font-size: var(--t-md); line-height: 1.55; color: #45474a; }
@media (min-width: 52.01rem) { .pg-faq__head { position: sticky; top: calc(var(--paligo-header-h) + 2rem); align-self: start; } }
/* Figures: a visible expand control in the frame's corner. */
main .figure .mediaobject, main .informalfigure .mediaobject { position: relative; }
main .mediaobject:has(.dp-zoomable)::after {
  content: ""; position: absolute; top: .9rem; right: .9rem; width: 34px; height: 34px; border-radius: 10px; pointer-events: none;
  background: rgba(18, 19, 23, 0.72) var(--ms-expand) center / 18px 18px no-repeat; opacity: .85; transition: opacity 200ms var(--pg-ease);
}
main .mediaobject:has(.dp-zoomable)::after { background: none; }
main .mediaobject:has(.dp-zoomable)::before {
  content: ""; position: absolute; z-index: 1; top: .9rem; right: .9rem; width: 34px; height: 34px; border-radius: 10px; pointer-events: none;
  background-color: rgba(18, 19, 23, 0.72);
}
main .mediaobject:has(.dp-zoomable)::after {
  z-index: 2; top: calc(.9rem + 8px); right: calc(.9rem + 8px); width: 18px; height: 18px; border-radius: 0; opacity: 1;
  background: #ffffff; -webkit-mask: var(--ms-expand) center / contain no-repeat; mask: var(--ms-expand) center / contain no-repeat;
}

.pg-hv__note[hidden] { display: none; }
.pg-hv__note.is-warning { background: #ffffff; border: 1px solid #f1e3c8; border-left: 3px solid #f5a524; }
.pg-hv__note.is-warning b { color: #b7650b; }
.pg-hv__note.is-warning > .ms-icon { color: #f5a524; }
.pg-hv__note.is-warning em { display: none; }
.pg-hv__tree { transition: opacity 260ms var(--pg-ease), transform 260ms var(--pg-ease); }
.pg-hv.is-alt .pg-hv__tree { opacity: 0; transform: translateY(8px); }

/* ===== Round 12 ============================================================ */
/* Hero window: no blank area, UI text at a readable size; the tree card sits in the corner on purpose. */
.pg-hv__body { min-height: 0; }
.pg-hv__page { padding-bottom: 1.4rem; }
.pg-hv__nav { padding-bottom: 1.4rem; font-size: var(--pg-ui-3); }
.pg-hv__note { font-size: var(--pg-ui-2); }
.pg-hv__steps { font-size: var(--pg-ui-3); }
.pg-hv__steps li::before { width: 22px; height: 22px; font-size: var(--pg-ui-1); }
.pg-hv__tree { font-size: var(--pg-ui-3); bottom: -2.75rem; left: -2.5rem; }
.pg-hv__eyebrow { font-size: var(--pg-ui-3); }
.pg-hv__title { font-size: var(--t-lg); }
.dp-hero-split__media:has(.pg-hv) .pg-ask { bottom: -3rem; }
/* One section-heading scale. */
:root { --pg-h2: clamp(2.5rem, 4vw, 3.5rem); }
.pg-journey h2, .pg-rows__head h2, .pg-faq__head h2, .dp-help h2, .dp-chapters .dp-section-head .dp-kicker { font-size: var(--pg-h2); line-height: 1; letter-spacing: -0.035em; }
.pg-kicker--dark, .pg-journey__head .pg-kicker { font-size: var(--t-sm); }
/* Content eyebrow tile at a size that reads, matching the landing cards. */
.dp-eyebrow--page > span::before { width: 28px; height: 28px; border-radius: 8px; }
.dp-eyebrow--page[data-chapter] > span::after { left: 6px; width: 16px; height: 16px; margin-top: -8px; }
/* Figures: wider than the text measure, so screenshots read at rest. */
@media (min-width: 64rem) {
  main .figure, main .informalfigure { margin-inline: -4rem; }
  main .figure .mediaobject, main .informalfigure .mediaobject { padding: clamp(.75rem, 1.6vw, 1.25rem); }
}
/* Rail: an Up next card. */
.pg-upnext { display: block; margin: 0 0 1.5rem; padding: 1rem 1.1rem; border-radius: 14px; text-decoration: none; color: #121317; border: 1px solid transparent; background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(120deg, #017efa, #5ceed2) border-box; transition: transform 220ms var(--pg-ease), box-shadow 220ms var(--pg-ease); }
.pg-upnext:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -16px rgba(1, 126, 250, 0.35); }
.pg-upnext__label { display: flex; align-items: center; gap: .4rem; font-size: var(--t-xs); font-weight: 500; color: #0b5fd1; margin-bottom: .3rem; }
.pg-upnext__label::after { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--ms-arrow) center / contain no-repeat; mask: var(--ms-arrow) center / contain no-repeat; }
.pg-upnext__title { font-family: var(--dp-display); font-size: var(--t-md); line-height: 1.2; letter-spacing: -0.02em; }
/* Search page: the footer sits low; the path fills the column. */
body.searchpage .paligo-search-page { min-height: calc(100svh - var(--paligo-header-h) - 16rem); }
/* Tables. */
main table td:first-child, main table th:first-child { width: 30%; }
main thead th, main thead td { background: #eef5ff; }
/* Mobile: the hero visual scaled into the column, the Ask card overlapping its corner; the last crumb ellipsizes. */
@media (max-width: 36rem) {
  .dp-hero-split__media:has(.pg-hv) { position: relative; display: block; height: 268px; margin-top: 1.75rem; padding: 0; overflow: visible; background: none; box-shadow: none; }
  .dp-hero-split__media:has(.pg-hv) .pg-hv { display: block; width: 640px; transform: scale(.52); transform-origin: top left; }
  .dp-hero-split__media:has(.pg-hv) .pg-hv__tree, .dp-hero-split__media:has(.pg-hv) .pg-hv__chip { display: none; }
  .dp-hero-split__media:has(.pg-hv) .pg-ask { position: relative; margin: -2rem 0 0 1.25rem; width: calc(100% - 1.25rem); }
  .breadcrumb li:last-child { min-width: 0; overflow: hidden; }
  .breadcrumb li:last-child span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* Hero stage: aligned with the headline, so the cards can hang below the window's text instead of over it. */
@media (min-width: 52.01rem) {
  .dp-hero-split__media:has(.pg-hv) { align-self: start; margin-top: 1rem; }
}
@media (min-width: 52.01rem) {
  .dp-hero-split__media:has(.pg-hv) { padding-bottom: 13rem; }
  .dp-hero-split__media:has(.pg-hv) .pg-ask { bottom: -3.5rem; }
  .pg-hv__tree { bottom: -7.75rem; }
}
/* Phones: the scaled visual keeps its 640 px layout box inside a clipped frame, so the page never widens. */
@media (max-width: 36rem) {
  .dp-hero-split__media:has(.pg-hv) { height: auto; overflow: visible; }
  .pg-hv-frame { position: relative; }
  .dp-hero-split__media:has(.pg-hv) .pg-hv { position: absolute; top: 0; left: 0; }
  .dp-hero-split__media:has(.pg-hv)::before { content: ""; display: block; height: 220px; }
  .dp-hero-split__inner, .dp-hero-split__copy { min-width: 0; max-width: 100%; }
  .portal-hero.dp-hero-split { overflow: hidden; }
}
@media (max-width: 36rem) {
  .dp-hero-split__media:has(.pg-hv) .pg-ask { right: auto; bottom: auto; margin: -1.5rem 0 0 1.25rem; width: calc(100% - 1.25rem); }
  .dp-hero-split__media:has(.pg-hv)::before { height: 182px; }
}

/* ===== Round 13 ============================================================ */
/* Figures: the frame fills the figure, the screenshot fills the frame, and on wide screens the figure reaches into
   the gutters, so dialog labels read at rest. */
main section .figure.formalobject .mediaobject, main section .informalfigure .mediaobject { display: block; width: 100%; box-sizing: border-box; }
main section .figure.formalobject .mediaobject img, main section .informalfigure .mediaobject img { width: 100%; max-width: 100%; height: auto; }
@media (min-width: 64rem) {
  main section .figure.formalobject, main section .informalfigure { margin-inline: -4rem; width: calc(100% + 8rem); max-width: none; }
}
/* Search page: the footer sits at the bottom of the screen. */
body.searchpage .paligo-search-page { min-height: 0; padding-bottom: 2rem; }
body.searchpage main { min-height: 0; padding-bottom: 0; }
/* Phones: the hero window shows its page column only, at a size that reads; the Ask card sits under it. */
@media (max-width: 36rem) {
  .dp-hero-split__media:has(.pg-hv)::before { height: 236px; }
  .dp-hero-split__media:has(.pg-hv) .pg-hv { width: 400px; transform: scale(.835); }
  .dp-hero-split__media:has(.pg-hv) .pg-hv__body { grid-template-columns: 1fr; }
  .dp-hero-split__media:has(.pg-hv) .pg-hv__nav { display: none; }
  .dp-hero-split__media:has(.pg-hv) .pg-hv__search { display: none; }
  .dp-hero-split__media:has(.pg-hv) .pg-ask { margin: .75rem 0 0; width: 100%; }
}
@media (max-width: 36rem) { .dp-hero-split__media:has(.pg-hv)::before { height: 268px; } }
/* Figures bleed toward the right rail only, keeping a clear gutter against the sidebar. */
@media (min-width: 64rem) {
  main section .figure.formalobject, main section .informalfigure { margin-inline: 0 -2.5rem; width: calc(100% + 2.5rem); }
}
/* Polish: the expand control sits on the gradient frame, clear of the screenshot's own controls. */
main .mediaobject:has(.dp-zoomable)::before { top: auto; bottom: 1rem; right: 1rem; }
main .mediaobject:has(.dp-zoomable)::after { top: auto; bottom: calc(1rem + 8px); right: calc(1rem + 8px); }
@media (max-width: 53.75rem) {
  .breadcrumb ol { -webkit-mask-image: none; mask-image: none; }
  .breadcrumb li:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; }
  .breadcrumb li:last-child span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .breadcrumb ol { overflow: hidden; }
}

/* ===== Hero fits the first screen on laptop heights (Victor, 2026-10-09) =====
   Desktop widths only. Below 900 px of height the hero's vertical sizes scale with the viewport height, so the
   fourth Start-here step and the hero visual stay in the first screen. */
@media (min-width: 52.01rem) and (max-height: 899px) {
  .portal-hero.dp-hero-split { padding-top: calc(var(--paligo-header-h) + clamp(1rem, 4svh, 3rem)); padding-bottom: clamp(1rem, 3svh, 2rem); }
  .portal-hero.dp-hero-split h1 { font-size: clamp(2.8rem, min(6vw, 10.2svh), 5.6rem); margin-bottom: clamp(.85rem, 2.6svh, 1.5rem); }
  .portal-hero.dp-hero-split .portal-sub { font-size: clamp(15px, 2.1svh, 18px); margin-bottom: clamp(.75rem, 2.4svh, 1.5rem); }
  .dp-hero-split .portal-search { margin-bottom: clamp(.75rem, 2.2svh, 1.5rem); }
  .dp-hero .portal-search .site-search__form { height: clamp(44px, 6.4svh, 56px); }
  .dp-hero-split .dp-quick { margin-top: clamp(.5rem, 1.6svh, 1.25rem); }
  .dp-hero-split .dp-quick__label { margin-bottom: .25rem !important; }
  .dp-hero-split .dp-quick a { padding-block: clamp(.3rem, 1.1svh, .65rem); }
  .dp-quick__title { font-size: clamp(15px, 2svh, 17px); }
  .dp-quick__hint { font-size: clamp(12px, 1.55svh, 13px); }
  .dp-hero-split .dp-quick a::before { width: 26px; height: 26px; }
  .dp-hero-split__media:has(.pg-hv) { margin-top: 0; zoom: clamp(.62, calc(100svh / 960px), 1); }
}
@media (min-width: 52.01rem) and (max-height: 700px) {
  .dp-quick__hint { display: none; }
}

/* ===== Round 16: retrofit on the scaffold's token scale (2026-10-15) ======== */
/* Chapter pages: the chapter's topics as cards. */
.pg-ctopics { margin: var(--s-10) 0 var(--s-8); }
.pg-ctopics__title { font-family: var(--dp-display); font-weight: 400; font-size: var(--t-xl); line-height: var(--lh-snug); letter-spacing: -0.02em; margin: 0 0 var(--s-4); }
.pg-ctopics__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.pg-ctopics__list li { margin: 0; }
.pg-ctopic { display: grid; gap: var(--s-2); height: 100%; box-sizing: border-box; padding: var(--s-6); border: 1px solid #e2e6e7; border-radius: 16px; background: #ffffff; color: #121317; text-decoration: none; transition: border-color 220ms var(--pg-ease), box-shadow 220ms var(--pg-ease); }
.pg-ctopic:hover { border-color: #017efa; box-shadow: 0 12px 28px -16px rgba(1, 126, 250, 0.35); }
.pg-ctopic__n { font-size: var(--t-xs); font-weight: 600; color: #0055ff; font-variant-numeric: tabular-nums; }
.pg-ctopic__title { font-size: var(--t-md); font-weight: 600; line-height: var(--lh-snug); }
.pg-ctopic__sum { font-size: var(--t-sm); line-height: var(--lh-ui); color: #45474a; }
@media (max-width: 36rem) { .pg-ctopics__list { grid-template-columns: 1fr; } }
/* Figures: a quiet frame (border, radius, soft shadow) instead of the gradient mat; caption left, under the image. */
main section .figure.formalobject, main section .informalfigure { margin-inline: 0; width: auto; max-width: none; }
main .figure .mediaobject, main .informalfigure .mediaobject { background: none; padding: 0; border-radius: 0; max-width: 680px; }
main .figure img, main .informalfigure img { border: 1px solid #e3e8ef; border-radius: 12px; box-shadow: 0 8px 24px rgba(16, 24, 40, 0.08); }
main .figure > header .title, main .figure .title, main .figure figcaption { text-align: left; font-size: var(--t-sm); line-height: var(--lh-ui); color: #45474a; margin-top: var(--s-3); }
main .mediaobject:has(.dp-zoomable)::before { bottom: auto; top: var(--s-3); right: var(--s-3); }
main .mediaobject:has(.dp-zoomable)::after { bottom: auto; top: calc(var(--s-3) + 8px); right: calc(var(--s-3) + 8px); }
/* Topic header: title owns the first screen; lead and body on the reading scale. */
.dp-pagebody > main > section > header :is(h1, h2, h3) { font-size: clamp(var(--t-3xl), 4vw, 52px); line-height: 1.06; letter-spacing: -0.025em; }
main > section > header + p { font-size: var(--t-lg); line-height: 1.5; max-width: 62ch; color: #2b2d31; }
.dp-pagebody > main :is(p, li) { line-height: 1.7; }
.pg-meta { margin: 0 0 var(--s-3); }
.dp-eyebrow--page { margin-bottom: var(--s-2); }
/* Right rail steps back so the article leads. */
.dp-rail__chapter-title { font-family: var(--paligo-font); font-size: var(--t-sm); font-weight: 600; letter-spacing: 0; color: #121317; }
.dp-rail__chapter li a { font-size: var(--t-sm); line-height: var(--lh-ui); }
/* Scale retune: the topic title step at 52 px (judges, round 15), set once here. */
:root { --t-3xl: 52px; }
.dp-pagebody > main > section > header :is(h1, h2, h3) { font-size: var(--t-3xl); }
/* Inside the guide: rows sit closer, no empty bands between them. */
@media (min-width: 52.01rem) { .pg-row { padding-block: var(--s-8); } }
.pg-ctopic { align-content: start; }

/* ===== Round 17 ============================================================ */
:root { --t-3xl: 56px; }
.dp-pagebody > main > section > header :is(h1, h2, h3) { letter-spacing: -0.035em; line-height: 1.05; margin-bottom: var(--s-3); }
.dp-pagebody > main p.pg-meta, .dp-pagebody > main p.pg-meta span { font-size: var(--t-xs); line-height: var(--lh-ui); color: #666869; }
.dp-pagebody > main p.pg-meta { margin: 0 0 var(--s-3); }
/* Start card and chapter cards: equal heights, footers on one line. */
.dp-cards > li { display: flex; }
.dp-cards > li > .dp-card { flex: 1; display: flex; flex-direction: column; }
.dp-card__foot { margin-top: auto; padding-top: var(--s-4); }
.dp-card--start .dp-card__step { color: #ffffff; font-size: var(--t-sm); }
.dp-card--start .dp-card__step-n { color: #86dbff; opacity: 1; }
/* Admonitions: tinted, rounded, no hard rules. */
main .admonition { background: #eef5ff; border: 0; border-radius: 14px; }
main .admonition:is(.warning, .caution, .danger) { background: #fff8ec; border: 0; border-left: 0; }
/* Figures: a thin brand-gradient frame around a bordered screenshot. */
main .figure .mediaobject, main .informalfigure .mediaobject { background: var(--pg-grad-soft); padding: var(--s-4); border-radius: 20px; }
main .figure img, main .informalfigure img { border-radius: 10px; }
/* The black band starts closer to its content. */
.pg-journey { padding-top: clamp(5rem, 8vw, 6.5rem); }

/* Table filter: the brand's Material search icon instead of the script's own. */
.dp-tfilter__field svg { display: none; }
.dp-tfilter__field::before { content: ""; width: 18px; height: 18px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 -960 960 960%22%3E%3Cpath d=%22M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 -960 960 960%22%3E%3Cpath d=%22M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z%22/%3E%3C/svg%3E") center / contain no-repeat; }

/* Header tabs on one row, never wrapped or clipped (scaffold rule from a rep report, 21 Oct 2026). Content
   pages also carry the header search and CTA, so the row runs out of room below about 1440 px: the gap tightens
   first, then the type, then the tabs fold into the header menu (.dp-menu) until the sidebar drawer takes over. */
.topbar .dp-top-nav { flex: none; }
.dp-top-nav ul { flex-wrap: nowrap; }
.topbar .dp-top-nav a { white-space: nowrap; }
@media (max-width: 90rem) { body:not(.portal) .dp-top-nav ul { gap: var(--s-5, 1.25rem); } }
@media (max-width: 84rem) { body:not(.portal) .dp-top-nav ul { gap: var(--s-4, 1rem); } body:not(.portal) .topbar .dp-top-nav a { font-size: var(--t-xs); } }
@media (max-width: 78rem) { body:not(.portal) .dp-top-nav { display: none; } body:not(.portal) .dp-menu { display: block; } }
@media (max-width: 860px) { body:not(.portal) .dp-menu { display: none; } }

/* ===== 1.3.3: landing header ink ========================================== */
/* Paligo Base whitens the portal top bar's links until the page scrolls; this header sits on a light hero, so it keeps its dark ink. */
body.portal .topbar:not(.is-scrolled) :is(a:not(.dp-pill):not(.skip-link), .brand, .brand-name, .dp-docs-label, .langswitch > summary, .icon-btn) { color: #121317; }

/* ===== 1.3.4: headings sized by position, subtitles as a lead (real Paligo docs) ======================== */
/* The topic's own title is the FIRST heading in the page section's header, whatever its level (the real docs open
   pages with h2, h3 or h4 depending on depth). Paligo's subtitle is a second heading in that header (h3.subtitle):
   it reads as a lead, never at title size, and an empty one takes no space. */
.dp-pagebody > main > section:first-of-type > header > :is(h1, h2, h3, h4, h5, h6):first-child {
  font-family: var(--dp-display); font-weight: var(--dp-display-weight); font-size: var(--t-3xl);
  line-height: 1.05; letter-spacing: -0.035em; color: #121317; margin: 0 0 var(--s-3); text-wrap: balance;
}
.dp-pagebody > main > section > header > .subtitle {
  font-family: var(--paligo-font-sans); font-weight: 400; font-size: var(--t-lg); line-height: 1.5; letter-spacing: 0;
  color: #45474a; max-width: 62ch; margin: 0 0 var(--s-6); text-wrap: pretty;
}
.dp-pagebody > main > section > header > .subtitle:empty { display: none; }
.dp-pagebody > main > section > header > .subtitle a { color: var(--paligo-link); }
/* A chapter page with only a title and the topic grid: no empty band between them. */
.dp-pagebody > main > section:first-of-type:not(:has(> :not(header))) { margin-bottom: 0; }
/* Nested sections step down by depth, not by tag: depth 2 at xl (core), depth 3 at lg, deeper at md. */
.dp-pagebody > main > section section section > header > :is(h2, h3, h4, h5, h6) { font-size: var(--t-lg); line-height: var(--lh-snug); letter-spacing: 0; }
.dp-pagebody > main > section section section section > header > :is(h2, h3, h4, h5, h6) { font-size: var(--t-md); }
/* Bold-only paragraphs the docs use as run-in labels ("AI Assistant") sit closer to the list they introduce. */
.dp-pagebody > main p:has(> strong.bold:only-child) { margin: var(--s-5) 0 var(--s-2); color: #121317; }
.pg-hv__note em[hidden] { display: none; }
/* Language switch before the page scrolls: dark icons and the search field's light pill, not Paligo Base's white-on-hero. */
body.portal .topbar:not(.is-scrolled) .langswitch > summary { color: #121317; background: #f6f8f9; border-color: #e2e6e7; }
body.portal .topbar:not(.is-scrolled) .langswitch > summary :is(.ms-icon, .globe, .chevron) { color: #45474a; fill: currentColor; }
body.portal .topbar:not(.is-scrolled) .langswitch > summary:hover { background: #ffffff; border-color: #121317; }

/* ===== 1.4.0: long chapters ================================================================================ */
/* A chapter of more than 8 topics lists them as a compact two-column directory instead of a wall of cards. */
.pg-ctopics__list:has(> li:nth-child(9)) { gap: 0 var(--s-8); border-top: 1px solid #e2e6e7; }
.pg-ctopics__list:has(> li:nth-child(9)) > li { border-bottom: 1px solid #e2e6e7; }
.pg-ctopics__list:has(> li:nth-child(9)) .pg-ctopic { grid-template-columns: 2rem minmax(0, 1fr); gap: 0 var(--s-2); padding: var(--s-3) var(--s-2); border: 0; border-radius: 8px; background: transparent; box-shadow: none; }
.pg-ctopics__list:has(> li:nth-child(9)) .pg-ctopic:hover { background: #f6f8f9; box-shadow: none; }
.pg-ctopics__list:has(> li:nth-child(9)) .pg-ctopic:hover .pg-ctopic__title { color: #0055ff; }
.pg-ctopics__list:has(> li:nth-child(9)) .pg-ctopic__n { padding-top: .15em; font-weight: 500; color: #898b8b; }
.pg-ctopics__list:has(> li:nth-child(9)) .pg-ctopic__title { font-size: var(--t-sm); font-weight: 500; }
.pg-ctopics__list:has(> li:nth-child(9)) .pg-ctopic__sum { grid-column: 2; font-size: var(--t-xs); }
.pg-ctopics__list > li[hidden] { display: none; }
.dp-cfilter { display: grid; gap: var(--s-2); margin: 0 0 var(--s-4); max-width: 24rem; }
.dp-cfilter__label { font-size: var(--t-xs); line-height: var(--lh-ui); color: #666869; }
.dp-cfilter__input { height: 40px; padding: 0 var(--s-3) 0 2.25rem; border: 1px solid #cdd0d1; border-radius: 999px; font: inherit; font-size: var(--t-sm); color: #121317; background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%23666869'%3E%3Cpath d='M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z'/%3E%3C/svg%3E") no-repeat .75rem center / 18px; }
.dp-cfilter__input:focus { outline: 2px solid #0055ff; outline-offset: 1px; border-color: transparent; }
.dp-cfilter__none { font-size: var(--t-sm); color: #666869; }
/* The rail's chapter list: a window around the current topic, expandable. */
.dp-rail__chapter[hidden], .dp-rail__chapter li[hidden] { display: none; }
.dp-rail__more { margin-top: var(--s-2); padding: var(--s-1) 0; border: 0; background: none; font: inherit; font-size: var(--t-xs); font-weight: 500; color: #0055ff; cursor: pointer; }
.dp-rail__more:hover { text-decoration: underline; }

/* ===== 1.4.0: code ========================================================================================== */
.dp-code { --dp-code-bg: #121317; --dp-code-head: #1b1c21; --dp-code-fg: #e7e9ec; --dp-code-dim: #9a9ca0;
  margin: 0 0 var(--s-5); border-radius: 12px; overflow: hidden; background: var(--dp-code-bg); color: var(--dp-code-fg); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset; }
.dp-code[hidden] { display: none; }
.dp-code__head { display: flex; align-items: center; gap: var(--s-2); min-height: 40px; padding: 0 3rem 0 var(--s-4); background: var(--dp-code-head); border-bottom: 1px solid rgba(255,255,255,.06); font-size: var(--t-xs); line-height: 1; color: var(--dp-code-dim); }
.dp-code__kind { font-weight: 600; color: var(--dp-code-fg); }
.dp-code__kind + .dp-code__lang::before { content: "·"; margin-right: var(--s-2); }
.dp-code__body { position: relative; }
.dp-code .pre-wrap, .dp-code .code-block { margin: 0; position: static; }
.dp-pagebody > main .dp-code pre { margin: 0; padding: var(--s-4); max-width: none; background: transparent; border: 0; border-radius: 0; color: var(--dp-code-fg); font-size: 13px; line-height: 1.6; overflow: auto; max-height: 34rem; }
.dp-code pre code, .dp-code pre .ld code { color: inherit; background: none; border: 0; padding: 0; }
.dp-code .code-copy { position: absolute; top: 6px; right: 8px; width: 28px; height: 28px; color: var(--dp-code-dim); background: transparent; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; opacity: 1; }
.dp-code .code-copy:hover { color: #ffffff; border-color: rgba(255,255,255,.3); }
.dp-code .code-copy.copied { color: #86dbff; border-color: #86dbff; }
.dp-code .tk-s { color: #a5e2ff; } .dp-code .tk-k { color: #d7b2f2; } .dp-code .tk-kw { color: #ff9eff; }
.dp-code .tk-n, .dp-code .tk-b { color: #ffc27a; } .dp-code .tk-c { color: #8b8e94; font-style: italic; }
.dp-code .tk-t { color: #86dbff; } .dp-code .tk-a { color: #e597da; }
/* The example's own title sits above the card, not inside it. */
main :is(.example, .informalexample) > header .title { font-size: var(--t-sm); font-weight: 600; color: #121317; margin: 0 0 var(--s-2); }

/* Endpoint summary: method badge and path. */
.dp-endpoint-box { margin: 0 0 var(--s-6); }
.dp-endpoint-box > p { max-width: var(--dp-measure); }
.dp-endpoint { display: inline-flex; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-3) !important; padding: var(--s-1) var(--s-3) var(--s-1) var(--s-1); border: 1px solid #e2e6e7; border-radius: 999px; background: #f6f8f9; }
.dp-endpoint__method { padding: .3em .7em; border-radius: 999px; font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em; line-height: 1; color: #121317; }
.dp-endpoint__method--get { background: #cce5fe; } .dp-endpoint__method--post { background: #e7d6f7; }
.dp-endpoint__method--put, .dp-endpoint__method--patch { background: #f7dcf3; } .dp-endpoint__method--delete { background: #fbd9d6; }
.dp-endpoint__path { font-size: var(--t-sm) !important; background: none !important; border: 0 !important; padding: 0 !important; color: #121317; }
/* Inlined endpoint sub-pages read as sections of the endpoint. */
.dp-inlined { margin-top: var(--s-10); }

/* The code column: text left, sticky code right, on wide screens only (dp-code.js builds it at 75rem). */
body.dp-code-split .pagebody.dp-pagebody { grid-template-columns: minmax(0, 1fr); max-width: 90rem; }
body.dp-code-split .dp-rail { display: none; }
.dp-code__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: start; }
.dp-code__col { position: sticky; top: calc(var(--paligo-header-h, 64px) + var(--s-4)); max-height: calc(100vh - var(--paligo-header-h, 64px) - var(--s-8)); overflow: auto; padding: var(--s-3); border-radius: 16px; background: #0b0c0f; scrollbar-color: #2a2c31 transparent; }
.dp-code__col .dp-code { margin-bottom: var(--s-3); box-shadow: none; }
.dp-code__col .dp-code:last-child { margin-bottom: 0; }
.dp-code__col .dp-code pre { max-height: none; }
.dp-code__col :is(.openapi-samples, .openapi-responses, .example, .informalexample) { margin: 0; }
.dp-code__col :is(.example, .informalexample) > header .title { color: #c9ccd1; padding: var(--s-1) var(--s-1) var(--s-2); }
.dp-code__tabs { display: flex; flex-wrap: wrap; gap: var(--s-1); margin: 0 0 var(--s-3); padding: 3px; border-radius: 999px; background: #1b1c21; width: max-content; max-width: 100%; }
.dp-code__tab { padding: .45rem .9rem; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: var(--t-xs); font-weight: 600; line-height: 1; color: #9a9ca0; cursor: pointer; }
.dp-code__tab:hover:not(:disabled) { color: #ffffff; }
.dp-code__tab.is-on, .dp-code__tab:disabled { background: #017efa; color: #ffffff; cursor: default; }
.dp-code__text > :first-child { margin-top: 0; }
/* Reader tools move under the title when the rail is gone. */
.dp-rail__tools.dp-rail__tools--inline { flex-direction: row; flex-wrap: wrap; gap: var(--s-1) var(--s-5); margin: 0 0 var(--s-4); padding: 0; border: 0; }
.dp-rail__tools--inline button { padding: var(--s-1) 0; font-size: var(--t-xs); }
.dp-rail__tools--inline kbd { display: none; }
body.dp-code-split .dp-pagebody > main { max-width: none; }
body.dp-code-split .dp-pagebody > main :is(.breadcrumb, .dp-eyebrow, .pg-meta) { max-width: none; }
/* With one language the tab already names it: the request card's header keeps only its kind. */
.dp-code__col .openapi-samples .dp-code__lang, .dp-code__col .openapi-samples .dp-code__kind + .dp-code__lang::before { display: none; }
@media print { .dp-code__col { position: static; max-height: none; } .dp-code__row { display: block; } }
/* 1.4.0 polish: copy button in the card header; code in the column wraps instead of scrolling sideways;
   reference tables in the text column scroll inside themselves and sit tighter. */
.dp-code { position: relative; }
.dp-code__body { position: static; }
.dp-code__col .dp-code pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.dp-code__text :is(.informaltable, .table, .table-contents) { max-width: 100%; overflow-x: auto; }
.dp-code__text table { font-size: var(--t-xs); }
.dp-code__text table :is(td, th) { padding: var(--s-2) var(--s-3); vertical-align: top; }
.dp-code__text table :is(td, th) p { margin: 0; max-width: none; }
.dp-code__text table td:first-child { font-family: var(--paligo-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); overflow-wrap: anywhere; }
.dp-code__text table { width: 100%; }
.dp-code__text table :is(td, th) { overflow-wrap: break-word; }
.dp-code__text table :is(td, th):is(:first-child, :nth-child(3)) { overflow-wrap: anywhere; }
.dp-code__text table th { white-space: nowrap; }
.dp-code__row { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.dp-rail__chapter li.is-out { height: 0; overflow: hidden; border: 0; margin: 0; padding: 0; visibility: hidden; }
/* No code twice (dp-code.js): a body block already inside the request sample is hidden. */
.dp-dup { display: none !important; }

/* ===== 1.4.0: landing, developers band and popular topics ================================================ */
.pg-dev { background: #000000; color: #ffffff; padding: clamp(4rem, 7vw, 6rem) 0; overflow: hidden; position: relative; }
.pg-dev::before { content: ""; position: absolute; inset: auto -10% -60% 30%; height: 120%; background: radial-gradient(closest-side, rgba(1, 126, 250, 0.28), transparent 70%); pointer-events: none; }
.pg-dev__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.pg-dev h2 { font-family: var(--dp-display); font-weight: 400; font-size: var(--t-3xl); line-height: 1.05; letter-spacing: -0.03em; color: #ffffff; margin: 0 0 var(--s-4); }
.pg-dev__body { font-size: var(--t-lg); line-height: 1.5; color: rgba(255, 255, 255, 0.72); max-width: 34rem; margin: 0 0 var(--s-8); }
.pg-dev__links { list-style: none; margin: 0 0 var(--s-8); padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.pg-dev__links li { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.pg-dev__links a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-4); padding: var(--s-4) 0; color: #ffffff; text-decoration: none; }
.pg-dev__link-title { font-size: var(--t-md); font-weight: 500; }
.pg-dev__link-line { grid-column: 1; font-size: var(--t-sm); color: rgba(255, 255, 255, 0.6); }
.pg-dev__arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: rgba(255, 255, 255, 0.5); transition: transform 200ms var(--pg-ease), color 200ms var(--pg-ease); }
.pg-dev__links a:hover .pg-dev__arrow { transform: translateX(4px); color: #86dbff; }
.pg-dev__links a:hover .pg-dev__link-title { color: #86dbff; }
.pg-dev__cta.dp-pill { background: #ffffff; color: #121317; border-color: #ffffff; }
.pg-dev__code { padding: var(--s-3); border-radius: 20px; background: #121317; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 40px 80px -40px rgba(1, 126, 250, 0.45); }
.pg-dev__code .dp-code { margin: 0; }
.pg-dev__code .dp-code pre { margin: 0; padding: var(--s-5); max-width: none; background: transparent; border: 0; color: #e7e9ec; font-size: 13px; line-height: 1.7; white-space: pre; overflow: auto; }
@media (max-width: 60rem) { .pg-dev__inner { grid-template-columns: minmax(0, 1fr); } }

.pg-links { padding-block: clamp(3.5rem, 6vw, 5rem); }
.pg-links__title { font-family: var(--dp-display); font-weight: 400; font-size: var(--t-2xl); letter-spacing: -0.02em; margin: 0 0 var(--s-8); }
.pg-links__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-8); }
.pg-links__col h3 { font-size: var(--t-sm); font-weight: 600; color: #121317; margin: 0 0 var(--s-3); padding-bottom: var(--s-3); border-bottom: 1px solid #e2e6e7; }
.pg-links__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.pg-links__col a { display: inline-block; padding: var(--s-1) 0; font-size: var(--t-sm); color: #45474a; text-decoration: none; }
.pg-links__col a:hover { color: #0055ff; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 60rem) { .pg-links__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 36rem) { .pg-links__cols { grid-template-columns: minmax(0, 1fr); } }
.pg-dev__code .dp-code__head { display: none; }
.pg-dev__code .dp-code .code-copy { top: 12px; right: 12px; }
.pg-dev__code .dp-code__tabs { margin: var(--s-1) var(--s-1) var(--s-2); }

/* ===== 1.5.0: reader view vs coder view ===================================================================== */
/* Reader view (default for the guides): code blocks are quiet light panels that sit in the page like any other
   block, so a topic that happens to show XML looks like its neighbours. Coder view turns the whole page dark and
   moves code samples beside the text. */
.dp-code { --dp-code-bg: #f6f8f9; --dp-code-head: #eef1f3; --dp-code-fg: #121317; --dp-code-dim: #666869; border: 1px solid #e2e6e7; box-shadow: none; }
.dp-code__head { border-bottom-color: #e2e6e7; }
.dp-code .code-copy { color: #666869; border-color: #cdd0d1; background: #ffffff; }
.dp-code .code-copy:hover { color: #121317; border-color: #121317; }
.dp-code .tk-s { color: #0b5fd1; } .dp-code .tk-k { color: #7a3db8; } .dp-code .tk-kw { color: #b0306a; }
.dp-code .tk-n, .dp-code .tk-b { color: #9a5b00; } .dp-code .tk-c { color: #6f7172; } .dp-code .tk-t { color: #0b5fd1; } .dp-code .tk-a { color: #8a3a7d; }
:is(html.dp-coder, .pg-dev) .dp-code { --dp-code-bg: #121317; --dp-code-head: #1b1c21; --dp-code-fg: #e7e9ec; --dp-code-dim: #9a9ca0; border-color: rgba(255,255,255,.08); }
:is(html.dp-coder, .pg-dev) .dp-code__head { border-bottom-color: rgba(255,255,255,.06); }
:is(html.dp-coder, .pg-dev) .dp-code .code-copy { color: #9a9ca0; border-color: rgba(255,255,255,.14); background: transparent; }
:is(html.dp-coder, .pg-dev) .dp-code .code-copy:hover { color: #ffffff; border-color: rgba(255,255,255,.35); }
:is(html.dp-coder, .pg-dev) .dp-code .tk-s { color: #a5e2ff; } :is(html.dp-coder, .pg-dev) .dp-code .tk-k { color: #d7b2f2; }
:is(html.dp-coder, .pg-dev) .dp-code .tk-kw { color: #ff9eff; } :is(html.dp-coder, .pg-dev) .dp-code :is(.tk-n, .tk-b) { color: #ffc27a; }
:is(html.dp-coder, .pg-dev) .dp-code .tk-c { color: #8b8e94; } :is(html.dp-coder, .pg-dev) .dp-code .tk-t { color: #86dbff; } :is(html.dp-coder, .pg-dev) .dp-code .tk-a { color: #e597da; }

/* The switch in the header. */
.dp-viewtoggle { display: inline-flex; align-items: center; gap: var(--s-2); height: 36px; padding: 0 var(--s-2) 0 var(--s-3); border: 1px solid #e2e6e7; border-radius: 999px; background: #f6f8f9; font: inherit; font-size: var(--t-xs); font-weight: 500; color: #121317; cursor: pointer; white-space: nowrap; }
.dp-viewtoggle:hover { border-color: #121317; background: #ffffff; }
.dp-viewtoggle .ms-icon { width: 18px; height: 18px; color: #45474a; }
.dp-viewtoggle__switch { position: relative; width: 30px; height: 18px; border-radius: 999px; background: #cdd0d1; transition: background-color 180ms var(--pg-ease); }
.dp-viewtoggle__switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #ffffff; transition: transform 180ms var(--pg-ease); }
.dp-viewtoggle[aria-pressed="true"] .dp-viewtoggle__switch { background: #017efa; }
.dp-viewtoggle[aria-pressed="true"] .dp-viewtoggle__switch::after { transform: translateX(12px); }
html.dp-coder .dp-viewtoggle { background: #10233d; border-color: #4da3ff; color: #ffffff; }
html.dp-coder .dp-viewtoggle .ms-icon { color: #86dbff; }
@media (max-width: 70rem) { .dp-viewtoggle__label { display: none; } }
@media (prefers-reduced-motion: reduce) { .dp-viewtoggle__switch, .dp-viewtoggle__switch::after { transition: none; } }

/* Header tabs for the two parts. */
.dp-parts { display: flex; align-items: stretch; gap: var(--s-1); align-self: stretch; margin-left: var(--s-6); }
.dp-parts__tab { display: inline-flex; align-items: center; padding: 0 var(--s-3); font-size: var(--t-sm); font-weight: 500; color: #45474a; text-decoration: none; border-bottom: 2px solid transparent; }
.dp-parts__tab:hover { color: #121317; }
.dp-parts__tab[aria-current="true"] { color: #121317; border-bottom-color: #017efa; }
html.dp-coder .dp-parts__tab { color: #a0a3a8; }
html.dp-coder .dp-parts__tab:hover, html.dp-coder .dp-parts__tab[aria-current="true"] { color: #ffffff; }
@media (max-width: 60rem) { .dp-parts { display: none; } }

/* Landing: the two ways in. */
.pg-parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); padding-block: var(--s-12) var(--s-4); }
.pg-part { position: relative; display: grid; gap: var(--s-3); align-content: start; padding: var(--s-8); border: 1px solid #e2e6e7; border-radius: 20px; background: #ffffff; color: #121317; text-decoration: none; overflow: hidden; transition: border-color 220ms var(--pg-ease), box-shadow 220ms var(--pg-ease), transform 220ms var(--pg-ease); }
.pg-part:hover { border-color: #017efa; box-shadow: 0 24px 48px -28px rgba(1, 126, 250, 0.45); transform: translateY(-2px); }
.pg-part--code { background: #0b0c0f; border-color: #0b0c0f; color: #ffffff; }
.pg-part--code::after { content: ""; position: absolute; inset: auto -20% -70% 35%; height: 140%; background: radial-gradient(closest-side, rgba(1, 126, 250, 0.35), transparent 70%); pointer-events: none; }
.pg-part__kicker { font-size: var(--t-xs); font-weight: 600; color: #0055ff; font-variant-numeric: tabular-nums; }
.pg-part--code .pg-part__kicker { color: #86dbff; }
.pg-part__title { font-family: var(--dp-display); font-size: var(--t-2xl); line-height: 1.1; letter-spacing: -0.02em; }
.pg-part__sum { font-size: var(--t-md); line-height: 1.5; color: #45474a; max-width: 34rem; }
.pg-part--code .pg-part__sum { color: rgba(255, 255, 255, 0.72); }
.pg-part__list { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); position: relative; z-index: 1; }
.pg-part__chip { padding: .35rem .7rem; border-radius: 999px; background: #f6f8f9; border: 1px solid #e2e6e7; font-size: var(--t-xs); color: #45474a; }
.pg-part--code .pg-part__chip { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); color: #e7e9ec; font-family: var(--paligo-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); }
.pg-part__meta { margin-top: var(--s-3); font-size: var(--t-sm); font-weight: 500; color: #0055ff; position: relative; z-index: 1; }
.pg-part--code .pg-part__meta { color: #86dbff; }
@media (max-width: 48rem) { .pg-parts { grid-template-columns: minmax(0, 1fr); } }

/* Developer band: the live list of endpoint groups. */
.pg-dev__groups-label { margin: 0 0 var(--s-3); font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em; color: rgba(255, 255, 255, 0.6); }
.pg-dev__groups { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-8); padding: 0; }
.pg-dev__groups a { display: inline-block; padding: .4rem .75rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04); font-family: var(--paligo-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: var(--t-xs); color: #e7e9ec; text-decoration: none; }
.pg-dev__groups a:hover { border-color: #86dbff; color: #86dbff; }
/* Landing: breathing room between the chapter grid and the black developer band. */
.dp-chapters { padding-bottom: clamp(4rem, 7vw, 6rem); }