:root {
  color-scheme: light;
  /* Aliases, not values. The console and the editorial surfaces name the same colours
     differently for historical reasons, so these seven resolve to the shared token and there is
     one place to change them. The four that follow keep their own value on purpose: paper and
     canvas invert between themes, line sits a step off the console's, and amber lightens for
     dark. */
  --editorial-ink: var(--color-ink);
  --editorial-muted: var(--color-muted);
  --editorial-line: #d7dde5;
  --editorial-paper: #ffffff;
  /* The masthead is the top of the same sheet the article illustration is drawn on. That warm
     off-white is the ground of every hero (docs/seo-content-engine.md §6), so the header carries
     it too and the picture below sits on the page rather than on a different surface. */
  --editorial-hero-paper: #f6f3ec;
  --editorial-hero-wash: rgba(120, 152, 196, .12);
  --editorial-canvas: #f5f6f8;
  --editorial-brand: var(--color-brand);
  --editorial-brand-deep: var(--color-brand-deep);
  --editorial-brand-soft: var(--color-brand-soft);
  --editorial-green: var(--color-success);
  --editorial-green-soft: var(--color-success-soft);
  --editorial-amber: #574600;
  --editorial-radius-sm: 10px;
  --editorial-radius: 16px;
  --editorial-radius-lg: 24px;
  --editorial-shadow: 0 1px 2px rgba(15, 23, 42, .03), 0 10px 28px rgba(15, 23, 42, .045);
  --editorial-width: 1280px;
  --page-gutter: 24px;
  --editorial-reading-width: 720px;
  --editorial-header-height: 82px;
  --editorial-author-avatar: 72px;
  font-family: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* One expression, used by every band on the page - masthead, content, footer. Percentages
   resolve against the body's content box, which excludes the scrollbar; 100vw does not. A
   header centred on 100vw beside a footer centred on 100% sits 7.6px off it on any browser
   with a classic scrollbar, and agrees with it exactly on a headless probe, which draws
   overlay scrollbars of zero width. That is why this shipped: invisible to every sweep, plainly
   visible from a desk. Never centre a band on 100vw.

   Declared on body rather than :root so a page class can narrow the frame. A custom property
   is substituted where it is declared: on :root this resolved against the 1280px width once
   and every page inherited that result, so a policy page setting its own --editorial-width
   narrowed its content while the masthead and footer kept the old inset - three edges down
   the side again, by another route. On body, the page's class and this expression sit on the
   same element and every band re-evaluates together. */
body {
  --page-inset: max(var(--page-gutter), calc((100% - var(--editorial-width)) / 2));
}

/* A scrollbar that comes and goes is a 15px horizontal jump in everything, and these surfaces
   carry pages both shorter and longer than a window. Reserving the gutter always means a short
   page and a long one put the masthead in the same place. Every surface linking this file gets
   it, so the reference, the articles and the policies agree with each other as well as with
   themselves. */
html {
  scrollbar-gutter: stable;
}

* { box-sizing: border-box; }
html { background: var(--editorial-canvas); scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; color: var(--editorial-ink); background: var(--editorial-canvas); font-size: 16px; line-height: 1.68; }
.article-page { background: #fff; }
.article-page::before { display: none; }
body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0 0 auto;
  height: 520px;
  background:
    linear-gradient(rgba(0, 114, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 114, 255, .05) 1px, transparent 1px),
    linear-gradient(180deg, #fff 0%, rgba(255,255,255,0) 100%);
  background-size: 32px 32px, 32px 32px, auto;
  pointer-events: none;
}
button, input, select, textarea { font: inherit; }
a { color: inherit; text-underline-offset: 3px; }
img, svg { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid rgba(0,104,232,.38); outline-offset: 3px; }
.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 8px;
  color: white;
  background: var(--editorial-ink);
  transform: translateY(-160%);
  text-decoration: none;
}
.skip-link:focus-visible { transform: translateY(0); }

.manager-preview-banner {
  padding: 12px 20px;
  border-bottom: 1px solid #7c4d16;
  color: #fffdf7;
  background: var(--editorial-amber);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  letter-spacing: .01em;
}
.editorial-header {
  position: sticky;
  z-index: 60;
  top: 0;
  width: 100%;
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0;
  padding-inline: var(--page-inset);
  border-bottom: 1px solid rgba(217,222,231,.9);
  background: rgba(255,255,255,.94);
  box-shadow: 0 8px 24px rgba(23,33,58,.035);
  backdrop-filter: blur(14px);
}
.editorial-brand {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  color: var(--editorial-muted);
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
}
.editorial-brand img { width: 116px; height: auto; }
.editorial-brand__divider { color: #aab1bf; font-weight: 500; letter-spacing: -.08em; }
.editorial-brand__section { color: var(--editorial-ink); }
.editorial-header__nav { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.editorial-header__nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 9px;
  color: var(--editorial-muted);
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
}
.editorial-header__nav a:hover { color: var(--editorial-ink); background: var(--editorial-brand-soft); }
.editorial-header__nav .editorial-header__cta {
  white-space: nowrap;
  padding-inline: 16px;
  color: #fff;
  background: var(--editorial-brand);
  box-shadow: 0 7px 18px rgba(0,104,232,.16);
}
.editorial-header__nav .editorial-header__cta:hover { color: #fff; background: var(--editorial-brand-deep); }
.editorial-header__cta > span { margin-left: 3px; font-size: 16px; line-height: 1; }

:where(.articles-index, .article-detail-main, .legal-main) {
  width: min(var(--editorial-width), calc(100% - var(--page-gutter) * 2));
  margin: 0 auto;
}
.articles-index { width: 100%; max-width: none; padding: 0 0 88px; }
.article-detail-main { width: 100%; max-width: none; }
.articles-hero {
  position: relative;
  isolation: isolate;
  min-height: 420px;
  padding-inline: var(--page-inset);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  overflow: hidden;
  margin-bottom: 40px;
  border-block: 1px solid var(--editorial-line);
  background: var(--editorial-paper);
  box-shadow: var(--editorial-shadow);
}
.articles-hero::before {
  content: "";
  position: absolute;
  z-index: -3;
  inset: 0;
  /* Two soft pools of the same pale blue that settles in the illustrations' washes, on the warm
     paper they are drawn on. No photograph: a pixelated blue skyline above a watercolour reads as
     two different publications, and the picture directly below is doing the visual work already. */
  background-color: var(--editorial-hero-paper);
  background-image:
    radial-gradient(120% 90% at 82% 16%, var(--editorial-hero-wash), transparent 62%),
    radial-gradient(90% 72% at 10% 94%, var(--editorial-hero-wash), transparent 56%);
  pointer-events: none;
}
.article-detail-hero::before {
  content: "";
  position: absolute;
  z-index: -3;
  inset: 0;
  /* Two soft pools of the same pale blue that settles in the illustrations' washes, on the warm
     paper they are drawn on. No photograph: a pixelated blue skyline above a watercolour reads as
     two different publications, and the picture directly below is doing the visual work already. */
  background-color: var(--editorial-hero-paper);
  background-image:
    radial-gradient(120% 90% at 82% 16%, var(--editorial-hero-wash), transparent 62%),
    radial-gradient(90% 72% at 10% 94%, var(--editorial-hero-wash), transparent 56%);
  pointer-events: none;
}
.articles-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(250,253,255,.78) 0%, rgba(250,253,255,.52) 48%, rgba(236,246,255,.12) 100%),
    linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(240,247,255,.1) 65%, rgba(226,239,252,.28) 100%);
  pointer-events: none;
}
.article-detail-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.06), rgba(234,244,255,.2)),
    linear-gradient(90deg, rgba(255,254,251,.97) 0%, rgba(255,254,251,.9) 42%, rgba(241,247,255,.62) 66%, rgba(229,240,252,.18) 100%);
  pointer-events: none;
}
.articles-hero__copy {
  align-self: center;
  padding: clamp(42px, 6vw, 86px) clamp(28px, 5vw, 72px) clamp(42px, 6vw, 86px) 0;
}
.editorial-kicker, .legal-kicker {
  display: block;
  color: var(--editorial-brand);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .14em;
}
.editorial-kicker--uppercase { text-transform: uppercase; }
.articles-hero h1 {
  max-width: 760px;
  margin: 14px 0 18px;
  font-size: clamp(42px, 5.4vw, 72px);
  font-weight: 560;
  line-height: 1.04;
  letter-spacing: -.058em;
  padding-bottom: 4px;
}
.articles-hero p { max-width: 700px; margin: 0; color: var(--editorial-muted); font-size: 17px; line-height: 1.7; }
.articles-hero__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.articles-hero__meta span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border: 1px solid var(--editorial-line);
  border-radius: 999px;
  color: #596177;
  background: #fafbf8;
  font-size: 11px;
  font-weight: 650;
}
.articles-hero__visual {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: clamp(24px, 4vw, 54px) 0;
  background: transparent;
}
.articles-hero__visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  filter: drop-shadow(0 16px 24px rgba(48,55,105,.09));
}

/* The blurred backdrop, on both heroes.
 *
 * The gradient wash below this refused a photograph because a pixelated blue skyline above a
 * watercolour read as two different publications. This is not a photograph and not a second
 * picture: it is the one already in the hero, out of focus. The washes stay underneath it so a
 * slow image never leaves the band empty.
 *
 * Geometry is identical in both themes - only the veil above it changes colour - because a
 * [data-theme] rule may change paint and nothing else. The image is scaled past its own frame so
 * the blur has pixels to pull from rather than smearing the edges into the border. */
.articles-hero__wash,
.article-detail-hero__wash {
  position: absolute;
  z-index: -2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.articles-hero__wash img,
.article-detail-hero__wash img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.2);
  opacity: .5;
  filter: blur(46px) saturate(1.06);
}

/* The artwork is a picture on a page, not a panel welded into the band. */
.article-detail-hero__art {
  align-self: center;
  min-width: 0;
  margin: 0;
  padding: clamp(24px, 4vw, 54px) 0;
}
.article-detail-hero__art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  filter: drop-shadow(0 16px 24px rgba(48,55,105,.09));
}

.article-grid { width: min(var(--editorial-width), calc(100% - var(--page-gutter) * 2)); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; margin-inline: auto; }
.article-card {
  grid-column: span 4;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--editorial-line);
  border-radius: var(--editorial-radius);
  background: var(--editorial-paper);
  box-shadow: 0 6px 24px rgba(35,45,68,.045);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.article-card:first-child { grid-column: span 7; }
.article-card:nth-child(2) { grid-column: span 5; }
.article-card:hover { transform: translateY(-3px); border-color: #b6bdd0; box-shadow: 0 16px 36px rgba(35,45,68,.09); }
.article-card__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-bottom: 1px solid var(--editorial-line);
  background: var(--editorial-brand-soft);
}
.article-card__media :is(img, svg) { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.article-card:hover .article-card__media :is(img, svg) { transform: scale(1.018); }
.article-card__body { flex: 1; display: flex; flex-direction: column; padding: 22px; }
.article-card__eyebrow { color: var(--editorial-green); font-size: 10px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.article-card h2 { margin: 10px 0; font-size: clamp(21px, 2vw, 29px); font-weight: 600; line-height: 1.15; letter-spacing: -.03em; }
.article-card:first-child h2 { font-size: clamp(28px, 3vw, 42px); }
.article-card h2 a { text-decoration: none; }
.article-card p { margin: 0 0 22px; color: var(--editorial-muted); font-size: 14px; }
.article-card__footer {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  border-top: 1px solid #e9ecef;
  color: var(--editorial-muted);
  font-size: 11px;
  font-weight: 650;
}
.article-card__footer a { min-height: 44px; display: inline-flex; align-items: center; color: var(--editorial-brand); }

.article-detail { padding: 0 0 88px; }
.article-detail-hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: clamp(390px, 40vw, 520px);
  padding-inline: var(--page-inset);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
  align-items: center;
  overflow: hidden;
  margin: 0;
  border-block: 1px solid var(--editorial-line);
  background: var(--editorial-paper);
}
.article-detail-copy {
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding-block: clamp(54px, 7vw, 88px);
  padding-inline: 0 clamp(24px, 3vw, 48px);
  text-align: left;
}
.article-backlink { width: fit-content; min-height: 44px; display: inline-flex; align-items: center; gap: .35em; margin-bottom: 2px; color: var(--editorial-brand); font-size: 12px; font-weight: 700; }
.article-detail__eyebrow, .article-detail-copy [data-blog-eyebrow] { display: block; color: var(--editorial-green); font-size: 10px; font-weight: 750; letter-spacing: .15em; text-transform: uppercase; }
/* A draft with no picture yet - which publishing forbids and a manager preview allows - gets one
   column rather than a headline in half the band beside an empty half. */
.article-detail-hero:not(:has(.article-detail-hero__art)) {
  grid-template-columns: minmax(0, 1fr);
}

.article-detail-hero h1 {
  max-width: 820px;
  margin: 10px 0 14px;
  padding-bottom: 2px;
  font-size: clamp(40px, 4.2vw, 58px);
  font-weight: 580;
  line-height: 1.02;
  letter-spacing: -.042em;
}
.article-detail-hero p { max-width: 720px; margin: 0; color: var(--editorial-muted); font-size: clamp(16px, 1.35vw, 18px); line-height: 1.58; }
.article-byline { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 4px 16px; margin-top: 10px; color: #535c70; font-size: 11px; font-weight: 650; }
.article-byline span { display: inline-flex; align-items: center; min-height: 28px; }
.article-byline span > a { margin-left: .3em; }
.article-byline span + span::before { content: ""; width: 4px; height: 4px; margin-right: 16px; border-radius: 50%; background: var(--editorial-green); }
/* An article page is the docs shell: a sidebar of the other articles, the reading lane 88px in
   from it, and the section rail close on the right - 260 | 888 | 212 on a 1360 frame, the same
   geometry the docs and the policy pages use, so the reference side of the site is one shell.
   The lane used to be a flush-left 969px track with a 720px measure inside it and the rail at
   the frame's edge, which put 250px of empty column beside every paragraph. The frame is set
   on the body class so --page-inset re-evaluates with it and the masthead and footer follow. */
.article-page {
  --editorial-width: 1360px;
  --article-nav-width: 260px;
  --article-rail-width: 212px;
  --article-gutter: 88px;
}
.article-detail-layout {
  width: min(var(--editorial-width), calc(100% - var(--page-gutter) * 2));
  display: grid;
  grid-template-columns: var(--article-nav-width) minmax(0, 1fr) var(--article-rail-width);
  margin: 64px auto 0;
}

/* Placement by area, so the document order - sidebar, rail, then the article - can stay what a
   screen reader should hear while the columns land sidebar left, lane centre, rail right. */
.article-nav { grid-area: 1 / 1; }
.article-body { grid-area: 1 / 2; }
.article-toc { grid-area: 1 / 3; }
.article-nav {
  position: sticky;
  top: calc(var(--editorial-header-height) + 24px);
  align-self: start;
  max-height: calc(100vh - var(--editorial-header-height) - 24px);
  padding: 0 24px 48px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--editorial-line) transparent;
}
/* The sidebar is the docs sidebar: category groups, each a label over its articles, the current
   one marked. Titles run to two or three lines at this width, so the rhythm is set by the line
   height and a small gap rather than the rail's 44px rows, which read as a loose list. */
.article-nav .article-sidebar-group { gap: 2px; padding: 0; }
.article-nav .article-sidebar-group + .article-sidebar-group { margin-top: 22px; padding-top: 0; border-top: 0; }
.article-nav .article-sidebar-group strong { margin-bottom: 6px; padding-inline: 10px; color: var(--editorial-muted); font-size: 11px; font-weight: 600; letter-spacing: .09em; }
.article-nav .article-sidebar-group a { min-height: 0; margin-left: 0; padding: 5px 10px; font-size: 13px; line-height: 1.4; }
.article-nav .article-sidebar-group a:hover,
.article-nav .article-sidebar-group a:focus-visible { color: var(--editorial-ink); background: var(--color-surface-sunken); }
.article-nav .article-sidebar-group a[aria-current="page"] { color: var(--editorial-brand); background: var(--editorial-brand-soft); font-weight: 500; }
.article-toc {
  position: sticky;
  top: calc(var(--editorial-header-height) + 24px);
  align-self: start;
  max-height: calc(100vh - var(--editorial-header-height) - 48px);
  height: fit-content;
  display: grid;
  gap: 0;
  padding-left: 18px;
  overflow-y: auto;
  border-left: 1px solid var(--editorial-line);
  background: transparent;
  overscroll-behavior: contain;
  scrollbar-color: var(--editorial-line) transparent;
  scrollbar-gutter: stable;
}
.article-sidebar-group { display: grid; gap: 2px; padding: 0 0 18px; }
.article-sidebar-group + .article-sidebar-group { padding-top: 18px; border-top: 1px solid var(--editorial-line); }
.article-sidebar-group strong { margin-bottom: 10px; color: var(--editorial-ink); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.article-sidebar-group :is(a, span) { color: var(--editorial-muted); font-size: 12px; line-height: 1.45; }
.article-sidebar-group a { min-height: 44px; display: flex; align-items: center; margin-left: -10px; padding: 6px 10px; border-radius: 8px; text-decoration: none; transition: color .16s ease, background-color .16s ease; }
.article-sidebar-group a:hover,
.article-sidebar-group a:focus-visible { color: var(--editorial-brand); background: var(--editorial-brand-soft); }
/* The gutter from the sidebar is the lane's own padding; the blocks inside stop at the measure,
   and what remains of the track is the 80px to the rail. */
.article-body { min-width: 0; padding-left: var(--article-gutter); color: #313a50; font-size: 17px; line-height: 1.82; }
.article-body > section:not(.article-takeaways, .article-action-card) { max-width: var(--editorial-reading-width); padding: 42px 0; border-bottom: 1px solid var(--editorial-line); scroll-margin-top: calc(var(--editorial-header-height) + 24px); }
.article-body > section:not(.article-takeaways, .article-action-card):first-of-type { padding-top: 12px; }
.article-body h2 { margin: 0; color: var(--editorial-ink); font-size: clamp(29px, 3vw, 38px); font-weight: 600; line-height: 1.16; letter-spacing: -.038em; }
.article-body h2[id] { scroll-margin-top: calc(var(--editorial-header-height) + 24px); }
.article-body > h2:not(:first-child) { margin-top: 48px; padding-top: 36px; border-top: 1px solid var(--editorial-line); }
.article-body h3 { margin: 34px 0 12px; color: var(--editorial-ink); font-size: 22px; }
.article-body p { margin: 16px 0 0; }
.article-body :is(ul, ol) { display: grid; gap: 8px; margin: 16px 0 0; padding-left: 24px; }
.article-body a { color: var(--editorial-brand); font-weight: 650; }
.article-lede { color: #293249; font-size: 19px; line-height: 1.75; }
.article-lede::first-letter { float: left; margin: 6px 10px 0 0; color: var(--editorial-brand); font-size: 58px; font-weight: 650; line-height: .76; }
.article-body > * { max-width: var(--editorial-reading-width); }

.article-takeaways {
  max-width: var(--editorial-reading-width);
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 28px;
  margin-bottom: 16px;
  padding: 22px 24px;
  border: 1px solid var(--editorial-line);
  border-radius: 8px;
  background: var(--editorial-paper);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}
.article-takeaways__intro span { display: inline-flex; align-items: center; gap: 7px; color: var(--editorial-brand); font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.article-takeaways__intro span::before { content: ""; width: 8px; height: 8px; border: 2px solid currentColor; border-radius: 2px; background: var(--editorial-paper); }
.article-takeaways__intro h2 { margin-top: 8px; font-size: 20px; line-height: 1.18; }
.article-takeaways ol { margin: 0; padding: 0; list-style: none; counter-reset: takeaways; }
.article-takeaways li { min-height: 44px; display: grid; grid-template-columns: 28px 1fr; gap: 9px; align-items: start; padding: 9px 0; border-top: 1px solid #e4e7f0; counter-increment: takeaways; }
.article-takeaways li:first-child { padding-top: 0; border-top: 0; }
.article-takeaways li::before { content: "0" counter(takeaways); color: var(--editorial-green); font-size: 10px; font-weight: 800; }
.article-takeaways li p { margin: 0; color: #4e576c; font-size: 13px; line-height: 1.55; }
.article-route-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 26px; }
.article-route-step { min-width: 0; padding: 16px 6px 0; border-top: 2px solid #d9ddea; }
.article-route-step > span { color: var(--editorial-brand); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.article-route-step strong { display: block; margin-top: 10px; color: var(--editorial-ink); font-size: 15px; }
.article-route-step p { margin-top: 7px; color: var(--editorial-muted); font-size: 12px; line-height: 1.55; }
.article-pullquote { position: relative; max-width: var(--editorial-reading-width); margin: 46px 0; padding: 24px 38px 24px 50px; border: 1px solid var(--editorial-line); border-radius: 8px; background: var(--editorial-paper); }
.article-pullquote::before { content: ""; position: absolute; top: 30px; left: 24px; width: 10px; height: 10px; border: 2px solid var(--editorial-paper); border-radius: 2px; background: var(--editorial-green); box-shadow: 0 0 0 1px var(--editorial-green); }
.article-pullquote p { margin: 0; color: var(--editorial-ink); font-size: clamp(23px, 3vw, 31px); font-weight: 560; line-height: 1.32; letter-spacing: -.025em; }
.article-pullquote cite { display: block; margin-top: 14px; color: var(--editorial-muted); font-size: 10px; font-style: normal; font-weight: 750; letter-spacing: .12em; }
.article-insight-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 25px; }
.article-insight-card { padding: 18px 0 0; border-top: 1px solid var(--editorial-line); }
.article-insight-card span { color: var(--editorial-green); font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.article-insight-card strong { display: block; margin-top: 8px; color: var(--editorial-ink); font-size: 16px; }
.article-insight-card p { margin-top: 8px; color: var(--editorial-muted); font-size: 13px; line-height: 1.6; }
/* Paints as the inverse of the page, so it reads as a block in both themes. The text colour was a
   raw #fff, which is a light-only value: `--editorial-ink` is the body's *text* colour, so in dark
   it resolves near-white and the block became white on white at about 1.05 to 1. Nothing caught it
   because no article carried a code sample until one did. Both halves are tokens now, so the pair
   inverts together. */
.article-body pre { overflow-x: auto; padding: 18px; border-radius: 10px; color: var(--editorial-canvas); background: var(--editorial-ink); font-size: 13px; }
.article-wide-visual { width: 100%; margin: 42px 0; overflow: hidden; border-radius: 12px; background: var(--editorial-paper); }
.article-wide-visual :is(img, svg, picture) { display: block; width: 100%; }
.article-wide-visual img { height: auto; }
.article-system-diagram { border: 1px solid var(--editorial-line); background: #fffefb; }
.article-wide-visual figcaption { padding: 12px 16px; color: var(--editorial-muted); font-size: 11px; }
.article-checklist { position: relative; margin: 32px 0; padding: 24px 26px 24px 50px; border: 1px solid var(--editorial-line); border-radius: 8px; background: var(--editorial-green-soft); }
.article-checklist::before { content: ""; position: absolute; top: 30px; left: 24px; width: 10px; height: 10px; border: 2px solid var(--editorial-green-soft); border-radius: 2px; background: var(--editorial-green); box-shadow: 0 0 0 1px var(--editorial-green); }
.article-checklist h2 { font-size: 24px; }
.article-action-card { max-width: var(--editorial-reading-width); margin-top: 44px; padding: clamp(26px, 4vw, 38px); border-radius: 8px; color: #f8f9ff; background: var(--editorial-ink); }
.article-action-card span { color: #8fe0c1; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.article-action-card h2 { max-width: 560px; margin-top: 10px; color: #fff; font-size: clamp(27px, 4vw, 38px); }
.article-action-card p { max-width: 620px; color: #c8cede; }
.article-action-card a { min-height: 46px; display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 0 17px; border-radius: 9px; color: var(--editorial-ink); background: #fff; text-decoration: none; }
/* A search-led article ends with a lookup list rather than more prose: a reader who arrived on one
   question scans for their own wording. The questions stay open - an accordion would hide the
   answer from exactly that scan, and the FAQPage structured data already covers the
   machine-readable half. The hairline rhythm is the one .article-insight-card and
   .article-takeaways li already use, so the lookup blocks bracketing an article read as the same
   kind of thing rather than as a new component. */
.article-faq__item { padding: 18px 0 0; border-top: 1px solid var(--editorial-line); }
.article-faq__item:first-of-type { margin-top: 24px; }
.article-faq h3 { margin: 0; color: var(--editorial-ink); font-size: 17px; font-weight: 640; line-height: 1.36; letter-spacing: -.012em; }
.article-faq h3 + p { margin-top: 8px; color: #4e576c; font-size: 15px; line-height: 1.62; }
/* A reader who reaches the end of an article is at the exact moment a worked tutorial or the
   reference page it draws from is most useful. Reuses .article-sidebar-group's own rhythm -
   heading, then a column of 44px link rows - rather than a new list component, so this reads as
   the same kind of thing as the rail beside it instead of a fourth visual language on the page. */
.article-related-links__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 32px; margin-top: 20px; }
.article-related-links__groups .article-sidebar-group { align-content: start; padding: 0; border-top: 0; }
.article-body > section:has(+ .article-author) { border-bottom: 0; }

.article-author { max-width: var(--editorial-reading-width); display: grid; grid-template-columns: var(--editorial-author-avatar) minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 26px; padding: 22px 0; border-top: 1px solid var(--editorial-line); }
.article-next { max-width: var(--editorial-reading-width); margin-top: 26px; padding: 22px 0; border-top: 1px solid var(--editorial-line); }
.article-author__avatar {
  width: var(--editorial-author-avatar);
  height: var(--editorial-author-avatar);
  border: 2px solid #fff;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--editorial-line), 0 8px 20px rgba(23,33,58,.12);
}
.article-author__identity { min-width: 0; }
.article-author__identity:only-child { grid-column: 1 / -1; }
.article-author span, .article-next span { display: block; color: var(--editorial-muted); font-size: 10px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.article-author strong { display: block; margin-top: 7px; color: var(--editorial-ink); font-size: 17px; }
.article-author p { margin-top: 5px; color: var(--editorial-muted); font-size: 13px; }
.article-next a { min-height: 44px; display: inline-flex; align-items: center; margin-top: 5px; color: var(--editorial-brand); font-size: 19px; font-weight: 650; line-height: 1.3; }

.btn { min-height: var(--control-height); display: inline-flex; align-items: center; justify-content: center; padding: 0 17px; border: 1px solid var(--editorial-line); border-radius: 9px; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; }
.btn-primary { border-color: var(--editorial-brand); color: #fff; background: var(--editorial-brand); box-shadow: 0 7px 18px rgba(0,104,232,.2); }
.btn-primary:hover { background: var(--editorial-brand-deep); }

.editorial-footer {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.25fr;
  gap: 48px;
  margin: 0;
  padding: 46px var(--page-inset) 60px;
  border-top: 1px solid var(--editorial-line);
}
.editorial-footer__intro p { max-width: 400px; margin: 10px 0 0; color: var(--editorial-muted); font-size: 13px; }
.editorial-footer .editorial-brand { gap: 0; }
.editorial-footer .editorial-brand__divider,
.editorial-footer .editorial-brand__section { display: none; }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.footer-link-group, .editorial-footer nav > div { display: grid; align-content: start; gap: 0; }
.footer-link-group span, .editorial-footer nav > div > span { margin-bottom: 4px; color: var(--editorial-muted); font-size: 10px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.footer-link-group a, .editorial-footer nav > div > a { min-height: 44px; display: inline-flex; align-items: center; font-size: 12px; text-decoration: none; }
.footer-link-group a:hover, .editorial-footer nav > div > a:hover { color: var(--editorial-brand); }
.editorial-footer > nav > a { min-height: 44px; display: inline-flex; align-items: center; font-size: 12px; text-decoration: none; }
.editorial-footer > nav > a:hover { color: var(--editorial-brand); }

/* Three columns need 260 + 88 + 720 + 80 + 212 plus the page gutters. The sidebar goes first -
   the masthead and footer both reach the other articles - and the lane centres in what is left,
   the slack on both sides of the text rather than all of it to one, which is how the docs and
   the policy pages step down too. */
@media (max-width: 1320px) {
  .article-detail-layout { grid-template-columns: minmax(0, 1fr) var(--article-rail-width); column-gap: 40px; }
  .article-nav { display: none; }
  .article-body { grid-area: 1 / 1; max-width: var(--editorial-reading-width); margin-inline: auto; padding-left: 0; }
  .article-toc { grid-area: 1 / 2; }
}

@media (max-width: 1100px) {
  .article-pullquote, .article-wide-visual { margin-right: 0; margin-left: 0; }
}

/* The rail leaves where the track is exactly the measure - 1020 less the gutters, the 40px gap
   and the rail - so the prose is never squeezed for a column, and below it the page is one
   column with the sections as a strip under a hairline rather than a bordered panel: a boxed
   index above a page of boxed cards was a frame around a frame. */
@media (max-width: 1020px) {
  .article-detail-layout { grid-template-columns: 1fr; gap: 28px; }
  .article-body, .article-toc { grid-area: auto; }
  .article-body { margin-inline: 0; }
  .article-toc { position: static; max-width: var(--editorial-reading-width); max-height: none; height: auto; padding: 0 0 14px; overflow: visible; border-left: 0; border-bottom: 1px solid var(--editorial-line); scrollbar-gutter: auto; }
  .article-toc .article-sidebar-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; padding-bottom: 0; }
  .article-toc .article-sidebar-group strong { margin: 0 12px 0 0; }
  .article-toc .article-sidebar-group a { margin-left: 0; padding-inline: 8px; }
  .article-toc .article-sidebar-group a:first-of-type { margin-left: -8px; }
}

@media (max-width: 900px) {
  /* One token narrows every band together. */
  :root { --page-gutter: 16px; }
  .legal-main { width: min(var(--editorial-width), calc(100% - var(--page-gutter) * 2)); }
  .article-grid { width: min(var(--editorial-width), calc(100% - var(--page-gutter) * 2)); }
  .articles-hero { grid-template-columns: 1fr; min-height: 0; }
  .article-detail-hero { width: 100%; min-height: 420px; }
  .articles-hero__visual { min-height: 260px; }
  .article-card, .article-card:first-child, .article-card:nth-child(2) { grid-column: span 6; }
  .article-detail-layout { width: min(var(--editorial-width), calc(100% - var(--page-gutter) * 2)); margin-top: 44px; }
  .article-detail-hero { grid-template-columns: 1fr; align-items: start; }
  .article-detail-copy { width: 100%; margin: 0; padding: 48px 0; text-align: left; }
  .article-detail-hero__art { padding: 0 0 40px; }
}

@media (max-width: 620px) {
  :root { --editorial-header-height: 68px; --editorial-author-avatar: 64px; }
  body { font-size: 15px; }
  .editorial-header { min-height: 68px; gap: 10px; }
  .editorial-brand { gap: 7px; font-size: 12px; }
  .editorial-brand img { width: 102px; }
  .editorial-header__nav a:not(.editorial-header__cta) { display: none; }
  .editorial-header__nav .editorial-header__cta { padding-inline: 13px; }
  .articles-index { padding-top: 0; }
  .articles-hero__copy { padding: 30px 0 32px; }
  .articles-hero h1 { font-size: 42px; }
  .articles-hero__visual { min-height: 190px; padding: 18px 0; }
  .article-grid { grid-template-columns: 1fr; gap: 14px; }
  .article-card, .article-card:first-child, .article-card:nth-child(2) { grid-column: 1; }
  .article-card h2, .article-card:first-child h2 { font-size: 25px; }
  .article-detail { padding-top: 0; }
  .article-detail-hero { min-height: 440px; }
  .article-detail-copy { padding: 42px 0; }
  .article-detail-hero h1 { margin-left: 0; font-size: 36px; }
  .article-detail-hero p { font-size: 16px; }
  .article-byline { justify-content: flex-start; }
  .article-byline span + span::before { margin-right: 10px; }
  .article-detail-layout { margin-top: 30px; gap: 30px; }
  .article-toc { grid-template-columns: 1fr; }
  .article-toc .article-sidebar-group:first-child { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .article-toc .article-sidebar-group:first-child strong { grid-column: 1 / -1; }
  .article-toc .article-sidebar-group + .article-sidebar-group { display: none; }
  .article-related-links__groups { grid-template-columns: 1fr; gap: 18px; }
  .article-body { font-size: 16px; }
  .article-body h2 { font-size: 28px; }
  .article-lede { font-size: 18px; }
  .article-takeaways { grid-template-columns: 1fr; gap: 18px; padding: 22px; }
  .article-route-steps, .article-insight-grid { grid-template-columns: 1fr; }
  .article-pullquote { margin: 34px 0; padding: 26px 24px; }
  .article-wide-visual { margin: 34px 0; }
  .editorial-footer { grid-template-columns: 1fr; gap: 28px; }
  .footer-links { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 360px) {
  .editorial-brand { gap: 5px; font-size: 11px; }
  .editorial-brand img { width: 94px; }
  .editorial-header__nav .editorial-header__cta { display: none; }
  .article-toc .article-sidebar-group:first-child { grid-template-columns: 1fr; }
  .footer-links { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms; animation-iteration-count: 1; transition-duration: .01ms; }
}

@keyframes editorialCloudPulse {
  from { opacity: .68; }
  to { opacity: .9; }
}