/*
 * WebDiagnosis marketing theme.
 *
 * Tokens are copied from the application's public/app.css so the site and the
 * product are one colour system. Several values are the result of a contrast
 * measurement; where that is true the comment says so. Do not re-pick by eye.
 *
 * COLOUR HAS JOBS. This is what stops the design becoming a paint chart:
 *   ORANGE is identity  - wordmark, section marks, eyebrow chips, brand washes.
 *   PURPLE is action    - every primary control, selected state, focus ring.
 *   GREEN is Copy       - the copy action and confirmed success, nothing else.
 *   Status hues (sky, teal, warn, red, good) are STATUS ONLY, and always arrive
 *   as a pale tint behind an icon and a word, never as a filled control.
 *   RED is not a brand colour. It means a real failure.
 *
 * DEPTH. Three band tones rather than two, ambient washes and real elevation.
 * A page built from white and one grey reads as a printout, which is the note
 * this file was rewritten to answer.
 */

/* ================================================================ tokens */

:root {
  --bg: #eceff4;
  --bg-2: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f6fa;
  --surface-3: #ffffff;

  /* Three section grounds, so the page reads as a sequence of rooms. */
  --band-plain: #ffffff;
  --band-ground: #eef1f7;
  --band-tint: #fbf7f3;

  --line: #dfe4ec;
  --line-2: #eef1f6;
  --line-strong: #c4cbd8;
  --ink: #18202f;
  --ink-2: #54607a;
  /* Muted ink must clear AA on --surface-2, not merely on white. 4.62:1 there. */
  --ink-3: #616c7e;

  /* Orange, identity. White on it is 2.6:1, so a filled orange carries near-black. */
  --brand: #f97316;
  --brand-ink: #c03f0a;
  --brand-soft: #fff2e8;
  --brand-line: #fbd0af;
  --brand-hover: #ea580c;
  --on-accent: #1b0d02;

  /* Purple, action. Dark enough to carry white at ~9:1. */
  --violet: #56309e;
  --violet-ink: #4a2789;
  --violet-soft: #f3f0fb;
  --violet-line: #d9d0f0;
  --on-violet: #ffffff;

  --sky: #2563eb;      --sky-soft: #e9effd;
  --teal: #0d9488;     --teal-soft: #e0f4f2;
  --warn: #b4770a;     --warn-soft: #fdf5e3;
  --red: #c73553;      --red-soft: #fdedf0;
  --good: #0f9d6e;     --good-soft: #e3f7ef;
  --copy: #0e7a4e;     --on-copy: #ffffff;

  /* Summary-card fills: the colour IS the category. Each hue was taken down
     its own path until white clears 4.6:1 on it. */
  --card-blue: #3972d2;   --card-blue-hover: #3264b9;
  --card-purple: #8551ee; --card-purple-hover: #7547d1;
  --card-green: #008174;  --card-green-hover: #007266;
  --card-orange: #b65908; --card-orange-hover: #a04e07;
  --on-card: #ffffff;

  --r: 16px;
  --r-sm: 11px;
  --r-lg: 22px;

  --sh-sm: 0 1px 2px rgba(24, 32, 47, .05);
  --sh: 0 1px 2px rgba(24, 32, 47, .05), 0 14px 28px -20px rgba(24, 32, 47, .5);
  --sh-md: 0 1px 2px rgba(24, 32, 47, .06), 0 24px 44px -26px rgba(24, 32, 47, .55);
  --sh-lg: 0 2px 4px rgba(24, 32, 47, .07), 0 40px 70px -32px rgba(24, 32, 47, .6);

  /* Ambient washes, kept low enough that a card under one does not look tinted. */
  --amb-warm: rgba(249, 115, 22, .09);
  --amb-cool: rgba(86, 48, 158, .07);
  --hairline: rgba(255, 255, 255, .9);

  --font-display: Manrope, "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --pad-x: clamp(20px, 3.4vw, 56px);
  /* The eyebrow's own metrics, so the hero report can align to the H1. */
  --eyebrow-h: 30px;
  --eyebrow-gap: 14px;
  --maxw: 1320px;
  /* The gutter either side of the panel. Zero on a phone: a 375px screen has no
     width to give away. */
  --gutter: clamp(0px, 2.4vw, 44px);
  --r-xl: 26px;
  /* The site has one theme, so native controls and scrollbars match it. */
  color-scheme: light;
}

/* ================================================================ base */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

body, header, footer, section { transition: background-color .15s linear, border-color .15s linear; }

a { color: var(--violet-ink); text-decoration: none; }
a:hover { color: var(--violet); text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2.5px solid var(--violet); outline-offset: 2px; border-radius: 4px; }

img { max-width: 100%; height: auto; }
table { border-collapse: collapse; }
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -.018em; }

.mono { font-family: var(--font-mono); }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; }

/* ================================================================== shell
 *
 * The page ground shows either side of the content, and the content sits on a
 * panel with rounded corners and an edge. That is the shape the prototype had
 * and it is what stops a full-bleed page reading as an undifferentiated sheet:
 * the gutter gives the eye somewhere to register that the content has an
 * outside, and the rounding makes the top and bottom of the document a
 * deliberate boundary rather than where the viewport happens to end.
 *
 * The sticky header stays OUTSIDE the shell on purpose. A rounded panel needs
 * either overflow clipping or corner radii on its first and last child, and
 * clipping would break `position: sticky` on the research page's aside. So the
 * corners are put on the children and nothing here creates a clipping context.
 */
.shell {
  width: min(100% - (var(--gutter) * 2), calc(var(--maxw) + var(--pad-x) * 2));
  margin: 0 auto var(--gutter);
  border-radius: var(--r-xl);
  background: var(--band-plain);
  box-shadow: var(--sh);
}
/* The radius lives on the first section and the footer, not on the shell, for
   the sticky reason above. */
.shell > main > .section:first-child,
.shell > main > article.section:first-child {
  border-top-left-radius: var(--r-xl);
  border-top-right-radius: var(--r-xl);
}
.shell .site-footer {
  border-bottom-left-radius: var(--r-xl);
  border-bottom-right-radius: var(--r-xl);
}
/* A hairline all the way round, so the panel has an edge against the ground. */
.shell { outline: 1px solid var(--line); outline-offset: -1px; }

@media (max-width: 700px) {
  /* No gutter and no rounding on a phone: the panel would be the whole screen
     and the radius would only clip content at the corners. */
  .shell { width: 100%; margin-bottom: 0; border-radius: 0; outline: 0; box-shadow: none; }
  .shell > main > .section:first-child,
  .shell > main > article.section:first-child,
  .shell .site-footer { border-radius: 0; }
}


.reading { max-width: 72ch; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 12px; top: 12px; z-index: 60; background: var(--surface); color: var(--ink); padding: 10px 16px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.screen-reader-text:focus { position: static !important; width: auto; height: auto; clip: auto; white-space: normal; }

/* ================================================================ bands
 * Every section is a band with its own ground and a gradient rule at the
 * bottom instead of a flat 1px line.
 */

.section { position: relative; padding: 58px var(--pad-x); background: var(--band-plain); }
.section::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
}
.section--white  { background: var(--band-plain); }
.section--ground { background: var(--band-ground); }
.section--tint   { background: var(--band-tint); }
.section--tight  { padding-top: 44px; padding-bottom: 44px; }
.section--flush::after { content: none; }

/* Eyebrow: orange mark plus a mono chip. Identity, never action. */
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: var(--eyebrow-gap); min-height: var(--eyebrow-h); }
.eyebrow__mark { width: 26px; height: 3px; border-radius: 2px; flex: none; background: linear-gradient(90deg, var(--brand), var(--brand-hover)); }
.eyebrow__chip {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  color: var(--brand-ink); background: var(--brand-soft);
  border: 1px solid var(--brand-line); border-radius: 999px;
  padding: 5px 12px; white-space: nowrap;
}

.h1 { font-weight: 800; font-size: clamp(28px, 2.5vw, 40px); line-height: 1.1; letter-spacing: -.022em; margin: 0 0 16px; }
.h2 { font-weight: 700; font-size: clamp(24px, 2.1vw, 34px); line-height: 1.16; margin: 0 0 12px; }
.h3 { font-weight: 700; font-size: 19px; line-height: 1.25; margin: 0; }
.lede { margin: 0 0 30px; font-size: 17px; color: var(--ink-2); max-width: 66ch; }
.note { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7; color: var(--ink-3); }

/* ================================================================ buttons
 * A filled button is PURPLE, because purple is the action colour. Orange never
 * fills a control on this site. Green fills only Copy.
 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  border-radius: var(--r-sm); padding: 12px 19px; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--violet); color: var(--on-violet); border-color: var(--violet); box-shadow: 0 8px 20px -10px rgba(86, 48, 158, .8); }
.btn--primary:hover { background: var(--violet-ink); color: var(--on-violet); transform: translateY(-1px); box-shadow: 0 12px 26px -10px rgba(86, 48, 158, .9); }
.btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); box-shadow: var(--sh-sm); }
.btn--secondary:hover { background: var(--surface-2); color: var(--ink); }
.btn--copy { background: var(--copy); color: var(--on-copy); border-color: var(--copy); }
.btn--sm { font-size: 14px; padding: 9px 15px; }
.btn--inert { background: var(--surface-2); color: var(--ink-3); border-color: var(--line); cursor: default; box-shadow: none; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ================================================================ header */
/*
 * The header sits on the same 1400px column as every section.
 *
 * It used to be padded from the viewport while the sections were padded from
 * a centred .wrap, so above 1512px the header's brand and its CTA hung 16px
 * outside the content edge on both sides. It read as an overflow because it
 * was one.
 */
.site-header {
  padding: 11px 0;
  background: color-mix(in srgb, var(--band-plain) 92%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
/*
 * Navigation sits beside the wordmark rather than floating in the middle. With
 * a centred nav, a 209px brand and a 489px action cluster, the gap left of the
 * nav measured 304px and the gap right of it measured 24px: an empty middle and
 * a crowded right, which is exactly how it read. Left-aligned, the whitespace
 * lands in one place, before the actions, where it is doing a job.
 */
.site-header__inner {
  /* The shell's box, so the header column and the panel column are identical. */
  width: min(100% - (var(--gutter) * 2), calc(var(--maxw) + var(--pad-x) * 2));
  margin-inline: auto;
  padding-inline: var(--pad-x);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 28px;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); flex: none; min-width: 0; }
.brand:hover { text-decoration: none; color: var(--ink); }
.brand__logo { display: block; width: auto; height: 48px; }
/* Fallback only, when the media library has no wordmark to render. */
.brand__mark {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: linear-gradient(140deg, var(--brand), var(--brand-hover));
  color: var(--on-accent); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px -4px rgba(249, 115, 22, .7);
}
.brand__name { font-family: var(--font-display); font-weight: 800; font-size: 17.5px; letter-spacing: -.01em; }
.brand__desc { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: .03em; }

.site-nav { display: flex; align-items: center; justify-content: center; gap: 26px; white-space: nowrap; }
.site-nav a { font-size: 14.5px; font-weight: 500; color: var(--ink-2); }
.site-nav a:hover { color: var(--ink); text-decoration: none; }
.site-nav .is-current { color: var(--ink); font-weight: 600; }
.site-nav .is-current::after { content: ""; display: block; height: 2px; border-radius: 2px; background: var(--brand); margin-top: 5px; }

.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex: none; }
.header-actions .signin {
  font-size: 14.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap;
  padding-left: 14px; border-left: 1px solid var(--line);
}

.nav-toggle { display: none; }

/* ================================================================ hero
 * Two columns, both with room. The copy column had four separate arguments in
 * it and pushed the buttons below the fold; it says one thing now, and the
 * band is sized to sit inside a single screen.
 */
.section--hero {
  padding-top: 36px;
  padding-bottom: 36px;
  background:
    radial-gradient(900px 380px at 8% -12%, var(--amb-warm), transparent 70%),
    radial-gradient(760px 340px at 96% -6%, var(--amb-cool), transparent 72%),
    var(--band-plain);
}

/*
 * The report is centred against the copy column rather than pinned to the top
 * of it. Aligned to the H1 it was still bottom-heavy, because the report is the
 * taller of the two: its head sat level with the headline and its foot hung
 * well below the last line of copy, which reads as a panel that has slipped
 * down. Centred, the two columns share a midline and the band closes evenly
 * above and below.
 *
 * The band's own padding is symmetric for the same reason: an uneven 26/40
 * would put the visual centre of the section below its geometric one.
 */
.hero { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.24fr); gap: 44px; align-items: center; }
.hero__copy { max-width: 58ch; }
.hero .h1 { margin-bottom: 14px; }
.hero__lede { margin: 0 0 20px; font-size: 16.5px; line-height: 1.55; color: var(--ink-2); max-width: 52ch; }

.hero__points { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.hero__points li { display: flex; gap: 12px; align-items: flex-start; }
.hero__point-icon {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--brand-soft); color: var(--brand-ink); border: 1px solid var(--brand-line);
}
.hero__points strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 15px; margin-bottom: 1px; }
.hero__points span span { display: block; font-size: 14px; line-height: 1.45; color: var(--ink-2); }

.hero__actions .btn { flex: 0 1 auto; }
.hero__foot { margin: 14px 0 0; font-size: 12px; color: var(--ink-3); }

/* ================================================================ cards */
.card {
  position: relative;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh);
  padding: 22px 24px 24px;
}
/* A hairline along the top edge is what makes a card sit on the page rather
   than be printed onto it. */
.card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  border-radius: var(--r) var(--r) 0 0; background: var(--hairline); pointer-events: none;
}
.card--flat { background: var(--surface-2); box-shadow: var(--sh-sm); }
.card__kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-3); margin-bottom: 12px; }

.grid { display: grid; gap: 20px; }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* Step cards: a coloured top edge is a marker on a surface, not a filled
   control, so it is allowed a hue. */
.step { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px 24px; border-top: 3px solid var(--line-strong); transition: transform .18s ease, box-shadow .18s ease; }
.step:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.step__top { display: flex; align-items: center; justify-content: space-between; }
.step__n { font-family: var(--font-mono); font-size: 12px; color: var(--brand-ink); letter-spacing: .08em; }
.step__foot { font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: var(--ink-3); margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line-2); }
.step--1 { border-top-color: var(--brand); }
.step--2 { border-top-color: var(--sky); }
.step--3 { border-top-color: var(--teal); }
.step--4 { border-top-color: var(--violet); }

/* ================================================================ summary cards */
.summary-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.summary-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 5px;
  border-radius: var(--r); padding: 18px 20px 20px;
  color: var(--on-card); border: 0; text-align: left; box-shadow: var(--sh);
}
/* A soft highlight in the corner gives the fill some form. */
.summary-card::after {
  content: ""; position: absolute; top: -40%; right: -20%;
  width: 160px; height: 160px; border-radius: 50%;
  background: rgba(255, 255, 255, .1); pointer-events: none;
}
.summary-card__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--on-card); position: relative; }
.summary-card__value { font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1.05; letter-spacing: -.04em; color: var(--on-card); position: relative; }
.summary-card__den { font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5; color: var(--on-card); position: relative; }
.summary-card--blue { background: var(--card-blue); }
.summary-card--purple { background: var(--card-purple); }
.summary-card--green { background: var(--card-green); }
.summary-card--orange { background: var(--card-orange); }
button.summary-card { cursor: pointer; transition: background-color .14s ease, transform .14s ease, box-shadow .14s ease; }
button.summary-card--blue:hover { background: var(--card-blue-hover); transform: translateY(-2px); box-shadow: var(--sh-md); }
button.summary-card--purple:hover { background: var(--card-purple-hover); transform: translateY(-2px); box-shadow: var(--sh-md); }
button.summary-card--green:hover { background: var(--card-green-hover); transform: translateY(-2px); box-shadow: var(--sh-md); }
button.summary-card--orange:hover { background: var(--card-orange-hover); transform: translateY(-2px); box-shadow: var(--sh-md); }
button.summary-card.is-on { box-shadow: inset 0 0 0 2px var(--on-card), var(--sh-md); }

/* ================================================================ tables */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; font-size: 14.5px; }
.data-table th, .data-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line-2); vertical-align: top; hyphens: none; }
/* Alternate rows, at a value change small enough to guide the eye across a wide
   row and not small enough to read as a highlight. */
.data-table tbody tr:nth-child(even) > * { background: var(--surface-2); }
.data-table tbody tr:last-child > * { border-bottom: 0; }
.data-table thead th {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  color: var(--ink-3); text-transform: uppercase; font-weight: 500;
  background: var(--surface-2); border-bottom: 1px solid var(--line); white-space: nowrap;
}
.data-table thead th button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.data-table td.u { font-family: var(--font-mono); font-size: 12.5px; overflow-wrap: break-word; word-break: normal; min-width: 230px; }
.data-table tbody tr:hover { background: var(--surface-2); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.table-caption { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); padding: 12px 16px 0; }

.pill {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px;
  border: 1px solid var(--line); border-radius: 7px; padding: 4px 9px; white-space: nowrap;
  background: var(--surface-2); color: var(--ink-2);
}
.pill--good { background: var(--good-soft); color: var(--ink); border-color: color-mix(in srgb, var(--good) 30%, transparent); }
.pill--bad  { background: var(--red-soft); color: var(--ink); border-color: color-mix(in srgb, var(--red) 30%, transparent); }
.pill--warn { background: var(--warn-soft); color: var(--ink); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.pill--info { background: var(--sky-soft); color: var(--ink); border-color: color-mix(in srgb, var(--sky) 30%, transparent); }

/* ================================================================ report card */
.report-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--sh-lg); }
.report-card__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; background: var(--surface); }
.report-card__filter { font-size: 12px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 7px; }
.report-card__actions { display: flex; gap: 8px; }
.report-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin: 0; padding: 11px 16px; border-top: 1px solid var(--line);
  background: var(--surface-2); font-size: 12px; color: var(--ink-3);
}
.report-card__foot a { font-size: 13px; }

/*
 * The list scrolls in its own pane. overscroll-behavior: contain is the part
 * that matters: without it, reaching the last row hands the wheel to the page
 * and throws the reader down the homepage.
 */
/*
 * Taller, and the rows are tighter. At 372px with two-line Link Type cells the
 * pane showed four and a half rows out of twelve, which reads as a cropped
 * screenshot rather than as a list you can scroll. Seven rows reads as a list.
 */
.table-scroll--pane { max-height: 480px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.table-scroll--pane:focus-visible { outline: 2.5px solid var(--violet); outline-offset: -2px; }
.table-scroll--pane::-webkit-scrollbar { width: 10px; height: 10px; }
.table-scroll--pane::-webkit-scrollbar-track { background: var(--surface-2); }
.table-scroll--pane::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; border: 3px solid var(--surface-2); }

/* Column names stay put while the rows move under them. */
.data-table--sticky thead th { position: sticky; top: 0; z-index: 1; box-shadow: inset 0 -1px 0 var(--line); }

/*
 * Denser cells inside the pane, and header labels that wrap.
 * `nowrap` on thead held "Comment Opportunity" and "Comment Spam Risk" on one
 * line each and pushed an 870px table into a 659px pane, so Verdict sat
 * outside the frame. The labels are not renamed: the site and the application
 * have to word a field the same way.
 */
.table-scroll--pane .data-table { min-width: 0; font-size: 13px; }
.table-scroll--pane .data-table th, .table-scroll--pane .data-table td { padding: 7px 10px; vertical-align: middle; }
.table-scroll--pane .data-table thead th { font-size: 10.5px; letter-spacing: .04em; white-space: normal; line-height: 1.3; }
.table-scroll--pane .data-table td.u { min-width: 0; width: 34%; font-size: 12px; line-height: 1.4; }
.table-scroll--pane .data-table td:nth-child(4) { white-space: nowrap; }
.table-scroll--pane .data-table .pill { font-size: 11px; padding: 3px 7px; }
.table-scroll--pane .data-table td .mono { font-size: 11.5px !important; }
/* The confidence line sits under the link type; 1.35 keeps the pair on two
   compact lines instead of two loose ones. */
.table-scroll--pane .data-table td .mono + br + .mono { line-height: 1.35; }
.table-scroll--pane .data-table tbody td { line-height: 1.35; }

/* ================================================================ evidence */
.callout {
  border-radius: var(--r-sm); padding: 15px 18px;
  border: 1px solid var(--brand-line); border-left: 4px solid var(--brand);
  background: var(--brand-soft);
}
.callout--violet { background: var(--violet-soft); border-color: var(--violet-line); border-left-color: var(--violet); }
.callout p { margin: 0; }
.callout__meta { margin-top: 7px !important; font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); }

.method-note { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--teal); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--sh-sm); }
.method-note dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; }
.method-note dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--ink-3); text-transform: uppercase; }
.method-note dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }

.evidence { display: flex; gap: 12px; align-items: flex-start; border-radius: var(--r-sm); padding: 15px 17px; border: 1px solid transparent; }
.evidence--observed { background: var(--teal-soft); border-color: color-mix(in srgb, var(--teal) 22%, transparent); }
.evidence--inferred { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 22%, transparent); }
.evidence--unknown  { background: var(--surface-2); border-color: var(--line); }
.evidence__icon { flex: none; margin-top: 1px; }
.evidence--observed .evidence__icon { color: var(--teal); }
.evidence--inferred .evidence__icon { color: var(--warn); }
.evidence--unknown .evidence__icon { color: var(--ink-2); }
.evidence__title { font-family: var(--font-display); font-weight: 700; font-size: 15px; margin: 0 0 3px; }
.evidence__body { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }

.calc { font-family: var(--font-mono); font-size: 13.5px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px 16px; line-height: 1.9; }
.calc strong { color: var(--brand-ink); font-weight: 500; }

/* ================================================================ funnel */
.funnel { display: flex; flex-direction: column; gap: 2px; }
.funnel__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: baseline; padding: 10px 0 5px; }
.funnel__label { font-size: 15px; }
.funnel__n { font-family: var(--font-mono); font-weight: 500; font-size: 19px; }
.funnel__pct { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); min-width: 12ch; text-align: right; }
.funnel__bar { height: 9px; border-radius: 5px; background: var(--surface-2); overflow: hidden; margin-bottom: 10px; box-shadow: inset 0 1px 2px rgba(24, 32, 47, .07); }
.funnel__fill { display: block; height: 100%; border-radius: 5px; box-shadow: 0 1px 3px rgba(24, 32, 47, .18); }

/* ================================================================ byline */
.byline { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-sm); }
.byline__avatar {
  width: 42px; height: 42px; border-radius: 999px; flex: none;
  background: linear-gradient(140deg, var(--brand), var(--brand-hover));
  color: var(--on-accent); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 16px;
}
.byline__name { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; }
.byline__meta { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); }

/* ================================================================ footer */
.site-footer { background: var(--band-ground); border-top: 1px solid var(--line); padding: 50px var(--pad-x) 34px; }
.site-footer__cols { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(auto-fit, minmax(170px, 1fr)); gap: 36px; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.site-footer__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-3); margin: 0 0 12px; font-weight: 400; text-transform: uppercase; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.site-footer a { font-size: 15px; color: var(--ink-2); }
.site-footer a:hover { color: var(--ink); }
.site-footer__base { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 20px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-3); }

/* ================================================================ prose */
.prose { max-width: 72ch; }
.prose h2 { font-size: 25px; margin: 40px 0 12px; }
.prose h3 { font-size: 18.5px; margin: 28px 0 10px; }
.prose p, .prose li { font-size: 16.5px; line-height: 1.65; color: var(--ink); }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose code { font-family: var(--font-mono); font-size: 15px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 5px; padding: 1px 5px; }
.prose table { width: 100%; margin: 0; border-collapse: collapse; font-size: 15.5px; }
.prose th, .prose td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.prose thead th { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.prose tbody tr:last-child th, .prose tbody tr:last-child td { border-bottom: 0; }
/*
 * A table inside prose still has to survive a 375px viewport, so it scrolls in
 * its own box rather than widening the page. Content files wrap tables in
 * .prose-table; anything that forgets still gets the border and the padding.
 */
.prose-table { margin: 22px 0; border: 1px solid var(--line); border-radius: var(--r-sm); overflow-x: auto; background: var(--surface); }
.prose blockquote {
  margin: 24px 0; padding: 16px 20px; border-left: 3px solid var(--violet);
  background: var(--violet-soft); border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.prose blockquote p { margin: 0; font-size: 17px; line-height: 1.6; }
.prose > :first-child { margin-top: 0; }
.prose h2 + p, .prose h3 + p { margin-top: 0; }
/* A key/value definition run, used by the guides for term definitions. */
.prose dl { margin: 22px 0; }
.prose dt { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; margin-top: 16px; }
.prose dd { margin: 4px 0 0; font-size: 16.5px; line-height: 1.65; color: var(--ink-2); }

.toc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 20px; box-shadow: var(--sh-sm); }
.toc ol { margin: 0; padding-left: 20px; }
.toc li { margin-bottom: 6px; font-size: 15px; }

.next-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 36px; }
.next-links a {
  display: block; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 15px 17px; color: var(--ink);
  box-shadow: var(--sh-sm); transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.next-links a:hover { border-color: var(--violet-line); background: var(--violet-soft); text-decoration: none; transform: translateY(-2px); }
.next-links { margin-top: 22px; }
.next-links span { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--ink-3); margin-bottom: 5px; }

.pagination { display: flex; gap: 8px; flex-wrap: wrap; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px;
  border-radius: var(--r-sm); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink); font-family: var(--font-mono); font-size: 14px;
}
.pagination .page-numbers:hover { background: var(--surface-2); text-decoration: none; }
.pagination .page-numbers.current { background: var(--violet); border-color: var(--violet); color: var(--on-violet); }

tr[hidden] { display: none; }

/* ============================================================== breadcrumbs */
/*
 * The trail is orientation, not navigation furniture, so it stays quiet and
 * sits above the H1 without competing with it. Rendered only from three levels
 * deep; "Home > This page" tells a reader nothing they cannot already see.
 */
.crumbs { margin: 0 0 14px; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-3); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line-strong); }
.crumbs a { color: var(--ink-3); }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current="page"] { color: var(--ink-2); }

/* =============================================================== categories */
/*
 * The category row on the blog index and on each archive.
 *
 * The current item borrows the header's own idiom for "you are here": orange,
 * which is the identity colour. It is deliberately NOT purple. Purple is the
 * conversion colour on this site and moving between categories is navigation,
 * not conversion, so a category chip must never read as a call to action.
 */
.cat-nav { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 4px; }
.cat-nav__item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; min-height: 38px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink-2);
  font-size: 14px; font-weight: 500; line-height: 1.2;
  box-shadow: var(--sh-sm);
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.cat-nav__item:hover { border-color: var(--line-strong); background: var(--surface-2); color: var(--ink); text-decoration: none; }
.cat-nav__item.is-current {
  background: var(--brand-soft); border-color: var(--brand-line);
  color: var(--brand-ink); font-weight: 600;
}
.cat-nav__n { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); }
.cat-nav__item.is-current .cat-nav__n { color: var(--brand-ink); }

/* ============================================================ takeaway grid */
/*
 * Four findings, each led by its own number so the figure and its denominator
 * are read together. Deliberately not four identical benefit cards: every one
 * of these carries a measurement, and the stat line is the reason the card is
 * on the page.
 */
.tk { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 18px; margin-top: 30px; }
.tk__item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px 22px; }
.tk__stat { display: block; font-size: 21px; font-weight: 500; color: var(--brand-ink); letter-spacing: -.02em; margin-bottom: 8px; }
.tk__title { font-family: var(--font-display); font-weight: 700; font-size: 16px; margin: 0 0 8px; letter-spacing: -.01em; }
.tk__body { margin: 0; font-size: 14.8px; line-height: 1.6; color: var(--ink-2); }

/* ================================================================= workflow */
/*
 * Five stages, two of which WebDiagnosis does not do and two of which it does
 * not do YET. The status pill carries that, so the row's own styling stays
 * uniform: dimming the planned rows would read as "coming soon" marketing, and
 * brightening them would read as a claim.
 */
.wf { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.wf__item {
  display: grid; grid-template-columns: 42px 116px minmax(0, 1fr) 260px;
  align-items: center; gap: 18px; padding: 18px 22px; background: var(--surface);
}
.wf__item--live {
  background-color: var(--surface);
  background-image: linear-gradient(var(--brand-soft), var(--brand-soft));
}
.wf__n { font-size: 12px; color: var(--ink-3); letter-spacing: .08em; }
.wf__stage { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; }
.wf__body { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.wf__tool { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14.5px; }
.wf__ext { font-size: 12.5px; color: var(--ink-3); }

/* ==================================================================== tools */
.tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 32px; align-items: start; }
.tool-card { display: flex; flex-direction: column; }
/*
 * The live tool is the only one a reader can act on, so it is the only one that
 * carries the identity wash. The planned two are not dimmed: they are real work,
 * and greying them out would read as "coming soon" theatre.
 */
.tool-card--live {
  border-color: var(--brand-line);
  background-color: var(--surface);
  background-image: linear-gradient(var(--brand-soft), var(--brand-soft));
}
.tool-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tool-card__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2);
}
.tool-card--live .tool-card__icon { background: var(--bg-2); border-color: var(--brand-line); color: var(--brand-ink); }
.tool-card__benefit { margin: 0 0 14px; font-size: 14.5px; line-height: 1.55; color: var(--ink); border-left: 2px solid var(--brand-line); padding-left: 12px; }
.tool-card__io { margin: 0; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line-2); padding-top: 14px; }
.tool-card__io > div { display: flex; gap: 12px; align-items: baseline; }
.tool-card__io dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); min-width: 30px; }
.tool-card__io dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }

/* ============================================================ tick / no list */
/*
 * Scope and boundary lists sit side by side, so the marks must be legible as a
 * pair without colour alone carrying the difference: the icon shape does the
 * work and the tint only reinforces it.
 */
.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.ticks__mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; flex: none; margin-top: 1px; }
.ticks__mark--yes { background: var(--good-soft); color: var(--ink); }
.ticks__mark--no { background: var(--surface-2); color: var(--ink-3); border: 1px solid var(--line); }

/* ================================================================== how-to */
.howto { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.howto li { display: flex; gap: 18px; align-items: flex-start; padding: 20px 24px; background: var(--surface); }
.howto__n { font-size: 12px; color: var(--brand-ink); letter-spacing: .08em; flex: none; padding-top: 3px; }
.howto__title { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; margin: 0 0 6px; letter-spacing: -.01em; }
.howto__body { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); max-width: 74ch; }

/* ============================================================== study card */
.study-card { margin-top: 26px; }
.study-card__meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--ink-3); letter-spacing: .04em; }
.study-card__figs { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; border-top: 1px solid var(--line-2); padding-top: 18px; }
.study-card__figs dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.study-card__figs dd { margin: 0; font-size: 17px; font-weight: 500; color: var(--ink); }

/* ============================================================== jobs table */
.jobs-table__q { text-align: left; font-weight: 600; font-size: 15px; width: 24%; }
.jobs-table td { font-size: 14.5px; line-height: 1.55; }
.jobs-table__field { display: block; font-size: 12.5px; color: var(--brand-ink); font-weight: 500; margin-bottom: 3px; }
.jobs-table__extra { display: block; font-size: 13px; line-height: 1.45; color: var(--ink-3); }

/* ============================================================ check groups */
/*
 * Four groups, and the one that costs no extra request is marked, because that
 * is the fact that decides whether a reader turns relevance on.
 */
.groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; align-items: start; }
.group-card { padding: 22px 24px; }
.group-card--free { border-color: var(--brand-line); }
.group-card__head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.group-card__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none;
  border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2);
}
.group-card--free .group-card__icon { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-ink); }
.group-card__title { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin: 0; letter-spacing: -.01em; }
.group-card__n { margin-left: auto; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.group-card__body { margin: 0 0 16px; font-size: 14.8px; line-height: 1.55; color: var(--ink-2); }
.group-card__fields { margin: 0; border-top: 1px solid var(--line-2); }
.group-card__fields > div { padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.group-card__fields > div:last-child { border-bottom: 0; padding-bottom: 0; }
.group-card__fields dt { font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; color: var(--ink); margin-bottom: 3px; }
.group-card__fields dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }

/* ====================================================== group brief (home)
 *
 * The homepage summarises the four check groups; the product page lists their
 * fields. These are deliberately uniform in height, which the full cards could
 * never be: the groups hold between three and seven fields each, so a card that
 * printed them all produced four columns of wildly different lengths.
 */
.groups--compact { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.group-brief {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 11px; align-items: center;
  padding: 18px 20px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--sh-sm);
}
.group-brief--free { border-color: var(--brand-line); }
.group-brief__icon {
  grid-row: 1 / 3; align-self: start; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2);
}
.group-brief--free .group-brief__icon { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-ink); }
.group-brief__title { font-family: var(--font-display); font-weight: 700; font-size: 16px; margin: 0; letter-spacing: -.01em; }
.group-brief__n { font-size: 11px; color: var(--ink-3); letter-spacing: .04em; }
.group-brief__body { grid-column: 1 / -1; margin: 8px 0 0; font-size: 14.2px; line-height: 1.55; color: var(--ink-2); }

/* ================================================================ tool strip */
.tool-strip { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tool-strip__item {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 18px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--sh-sm);
}
.tool-strip__item--live { border-color: var(--brand-line); background-image: linear-gradient(var(--brand-soft), var(--brand-soft)); }
.tool-strip__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none;
  border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2);
}
.tool-strip__item--live .tool-strip__icon { background: var(--bg-2); border-color: var(--brand-line); color: var(--brand-ink); }
.tool-strip__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin-right: auto; }
.tool-strip__name { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; color: var(--ink); }
.tool-strip__one { font-size: 13.8px; line-height: 1.45; color: var(--ink-2); }

/* ================================================================ stat line
 * Four figures on one row. Replaces a paragraph beside a tall card, which is a
 * layout that only works when the two sides are close in height.
 */
.statline {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px; margin: 22px 0 0; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
}
.statline > div { padding: 16px 20px; background: var(--surface); }
.statline dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; }
.statline dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 15.5px; line-height: 1.35; color: var(--ink); letter-spacing: -.01em; }
.statline dd.mono { font-family: var(--font-mono); font-weight: 500; font-size: 14px; }

/* ============================================================ compare list */
.compare { margin: 0; }
.compare > div { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; padding-bottom: 11px; margin-bottom: 11px; border-bottom: 1px solid var(--line-2); }
.compare > div:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.compare dt { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.compare dd { margin: 0; font-size: 14.5px; color: var(--ink); text-align: right; }

/* ================================================================ responsive */
@media (max-width: 1080px) {
  .split { grid-template-columns: minmax(0, 1fr) !important; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .hero__copy { max-width: none; }
  .table-scroll--pane { max-height: 360px; }
}

@media (max-width: 860px) {
  .site-header__inner { grid-template-columns: auto 1fr; gap: 12px; }
  .site-nav {
    grid-column: 1 / -1; display: none; flex-wrap: wrap; justify-content: flex-start;
    gap: 14px 20px; padding-top: 10px; border-top: 1px solid var(--line);
  }
  .site-header.is-open .site-nav { display: flex; }
  .brand__logo { height: 42px; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: var(--r-sm);
    background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--ink); cursor: pointer;
  }
  .header-actions .signin { display: none; }
  .header-actions .btn svg { display: none; }
  .header-actions .btn { padding: 9px 13px; }

  .section { padding: 42px var(--pad-x); }
  .section--hero { padding-top: 22px; padding-bottom: 32px; }
  .lede { font-size: 16px; }
  body { font-size: 16px; }
  .funnel__row { grid-template-columns: minmax(0, 1fr) auto; }
  .funnel__pct { grid-column: 1 / -1; text-align: left; min-width: 0; }
  .btn { width: 100%; }
  .btn-row .btn { width: auto; flex: 1 1 220px; }
  .hero__actions .btn { flex: 1 1 100%; }

  .wf__item { grid-template-columns: 34px minmax(0, 1fr); gap: 6px 14px; padding: 16px 18px; }
  .wf__stage { grid-column: 2; }
  .wf__body { grid-column: 2; }
  .wf__tool { grid-column: 2; margin-top: 4px; }
  .howto li { padding: 16px 18px; gap: 14px; }
  .jobs-table__q { width: auto; }
}

/*
 * WCAG 2.5.8 asks for a 24px minimum target. The footer and secondary nav links
 * were 19px tall, which is a real miss on a phone rather than a theoretical one.
 * Padding is used rather than a min-height so the text baseline does not move.
 */
.site-footer ul a,
.site-footer__base a,
.crumbs a { display: inline-block; padding: 4px 0; }
.site-footer ul li { margin-bottom: 2px; }

/* The two profiles WebDiagnosis runs, as their own recognisable marks. */
.site-footer .site-footer__social { flex-direction: row; gap: 10px; margin-top: 18px; }
.site-footer .site-footer__social li { margin: 0; }
.site-footer .site-footer__social a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); transition: border-color .15s ease, transform .15s ease; }
.site-footer .site-footer__social a:hover { border-color: currentColor; transform: translateY(-1px); }
.site-footer__social svg { display: block; width: 22px; height: 22px; }
.site-footer .site-footer__social .is-linkedin { color: #0a66c2; }
.site-footer .site-footer__social .is-youtube { color: #ff0000; }

/*
 * Below 620 the actions cluster is wider than the space beside the wordmark and
 * the two overlap. The header CTA goes first, because it is the one element
 * repeated verbatim in the hero directly beneath it.
 */
@media (max-width: 620px) {
  .site-header__inner { gap: 10px; }
  .brand__logo { height: 42px; }
  .brand__name { font-size: 16px; }
  .header-actions { gap: 10px; }
  .header-actions .signin { padding-left: 10px; }
  .header-actions .btn { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .step:hover, button.summary-card:hover, .btn--primary:hover, .next-links a:hover { transform: none; }
}

/* Product design system: neutral surfaces; purple actions; orange activity.
   Keep these shared palette values aligned with the other WebDiagnosis surface. */
:root {
  --bg: #f5f6f8; --bg-2: #ffffff; --surface: #ffffff; --surface-2: #f5f6f8; --surface-3: #ffffff;
  --band-plain: #ffffff; --band-ground: #f5f6f8; --band-tint: #f8f7f5;
  --ink: #20242c; --ink-2: #525c69; --ink-3: #606a76;
  --line: #dfe3e8; --line-2: #edf0f3; --line-strong: #bec5ce;
  --brand: #e66b27; --brand-ink: #a74714; --brand-soft: #fff2e9; --brand-line: #edc3a9;
  --violet: #5936a2; --violet-ink: #513090; --violet-soft: #f2eef9; --violet-line: #d5c7ec; --on-violet: #ffffff;
  --r: 12px; --r-sm: 8px; --r-lg: 16px;
  --sh-sm: 0 1px 2px rgb(20 28 40 / 4%); --sh: 0 2px 6px rgb(20 28 40 / 4%);
  --sh-md: 0 4px 14px rgb(20 28 40 / 5%); --sh-lg: 0 16px 40px -16px rgb(20 28 40 / 20%);

  /*
   * The dark section treatment, named rather than repeated.
   *
   * These are the exact values .wd-research, .wd-dark and .wd-page .wd-hero
   * have always used - #242638 ground, #ffba8c kicker ink, #f4a16a mark. No new
   * colour is introduced here; the homepage eyebrow now borrows the same three
   * so the two treatments cannot drift apart.
   */
  --dark-ground: #242638;
  --dark-mark: #f4a16a;
  --dark-ink: #f4f4fa;
  --dark-ink-2: #d0d1df;
  --dark-line: #45485c;
}

/* Shared marketing chrome and interior pages. */
body { background: var(--bg-2); }
body::before, .section::after { content: none; }
.shell { width: 100%; max-width: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; outline: none; }
.site-header { background: var(--bg-2); backdrop-filter: none; box-shadow: none; border-bottom: 1px solid var(--line); }
.site-header__inner { width: 100%; max-width: 1320px; padding-inline: clamp(20px, 4vw, 56px); min-height: 80px; }
.site-nav ul { display: flex; gap: 24px; list-style: none; padding: 0; margin: 0; }
.btn { border-radius: 8px; min-height: 44px; box-shadow: none; }
.btn:hover { transform: none; }
.card, .report-card { background: var(--surface); background-image: none; border-radius: 12px; box-shadow: var(--sh-sm); }
.section--hero, .section--tint, .section--cta { background: var(--band-tint); }
.summary-card, .summary-card:hover { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: none; }
.summary-card .summary-card__label, .summary-card .summary-card__den { color: var(--ink-2); }
.summary-card .summary-card__value { color: var(--ink); }
.summary-card[aria-pressed="true"] { border-color: var(--violet); box-shadow: inset 0 0 0 1px var(--violet); }
.summary-card:hover { border-color: var(--line-strong); transform: none; }
.summary-card:focus-visible, .wd-home a:focus-visible, .wd-home button:focus-visible, .wd-home summary:focus-visible { outline: 3px solid var(--violet); outline-offset: 4px; }
.site-footer { background: var(--bg-2); border-top: 1px solid var(--line); }
.site-footer__base { color: var(--ink-3); }

/* Homepage: one reusable grid, clear rules, real report fields. No image payload. */
.wd-home { font-size: 16px; line-height: 1.65; }
.wd-home .wrap { max-width: 1320px; padding-inline: clamp(20px, 4vw, 56px); }
.wd-home h1, .wd-home h2, .wd-home h3 { font-family: var(--font-display); color: var(--ink); }
.wd-home h1 { font-size: clamp(36px, 3.7vw, 56px); line-height: 1.1; letter-spacing: -.045em; margin: 22px 0; font-weight: 800; }
.wd-home h1 span { color: var(--violet-ink); }
.wd-home h2 { font-size: clamp(29px, 2.7vw, 40px); line-height: 1.2; letter-spacing: -.035em; margin: 12px 0 20px; }
.wd-home h3 { font-size: 21px; line-height: 1.3; letter-spacing: -.02em; margin: 14px 0; }
.wd-home p { color: var(--ink-2); }
.wd-kicker { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; letter-spacing: .075em; text-transform: uppercase; margin: 0; }
.wd-kicker > span { width: 8px; height: 8px; background: var(--brand); border-radius: 2px; }
.wd-hero { padding-top: clamp(42px, 5vw, 72px); }
.wd-hero-grid { display: grid; grid-template-columns: .95fr 1.15fr; gap: 40px; align-items: center; }
.wd-hero-copy { padding-bottom: 12px; }
.wd-intro { font-size: 17px; line-height: 1.7; max-width: 49ch; margin: 0 0 26px; }
.wd-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 24px; }
.wd-actions .btn, .wd-credit-card .btn { min-height: 50px; font-size: 15px; gap: 18px; padding: 12px 20px; }
.wd-text-link { display: inline-flex; gap: 10px; align-items: center; color: var(--violet-ink); font-size: 14px; font-weight: 600; text-underline-offset: 4px; }
.wd-text-link:hover { text-decoration: underline; }
.wd-micro { font-size: 12px; margin: 16px 0 0; }
/*
 * Homepage demo video. A poster and a link to YouTube until someone presses
 * play; theme.js swaps in the player on that click, never with the page.
 */
.wd-video { margin: 0; min-width: 0; }
.wd-video-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 12px; background: #5416f0; box-shadow: var(--sh-lg); }
.wd-video-play, .wd-video-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wd-video-play { display: block; color: #150f2e; text-decoration: none; }
.wd-video-play img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.wd-video-button { position: absolute; left: 5.5%; bottom: 8%; display: inline-flex; align-items: center; gap: 10px; padding: 6px 18px 6px 6px; border-radius: 999px; background: #fff; font-family: var(--font-display); font-size: 15px; font-weight: 800; line-height: 1; box-shadow: 0 10px 28px rgba(21, 15, 46, .35); transition: transform .2s ease, box-shadow .2s ease; }
.wd-video-icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: #5416f0; }
.wd-video-icon svg { width: 18px; height: 18px; margin-left: 3px; fill: #fff; }
.wd-video-play:hover img { transform: scale(1.015); }
.wd-video-play:hover .wd-video-button, .wd-video-play:focus-visible .wd-video-button { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(21, 15, 46, .45); }
.wd-home .wd-video-play:focus-visible { outline: 3px solid #fff; outline-offset: -8px; }
.wd-video figcaption { margin-top: 12px; font-size: 13px; color: var(--ink-2); text-align: center; }

/* ---------- homepage hero: actions and video height --------------------- */

/*
 * Two buttons, not a button and a sentence.
 *
 * The secondary action was a text link, so the pair read as one control with a
 * footnote. Making it a real secondary button gives the row a shape, and the
 * hierarchy is then carried by weight and fill rather than by one of them
 * barely existing: the primary is taller, heavier and keeps its lifted shadow,
 * the secondary sits flat on the surface.
 */
.wd-actions-hero { gap: 14px; }
.wd-actions-hero .btn { min-height: 52px; }
.wd-actions-hero .btn--primary {
  font-size: 16px;
  font-weight: 700;
  padding-inline: 26px;
  box-shadow: 0 10px 24px -10px rgba(89, 54, 162, .85);
}
.wd-actions-hero .btn--primary:hover { box-shadow: 0 14px 30px -10px rgba(89, 54, 162, .95); }
.wd-actions-hero .btn--secondary { font-size: 15px; font-weight: 600; padding-inline: 20px; }

/*
 * A little more height on the video card.
 *
 * The copy column runs to the micro line under the actions and the 16:9 card
 * finished well above it, which left the grid looking bottom-light. 16:10 adds
 * about 11% and the poster is object-fit: cover, so it crops evenly top and
 * bottom - the play button sits at 8% from the bottom and is unaffected.
 */
.wd-home .wd-hero .wd-video-media { aspect-ratio: 16 / 10; }
@media (max-width: 959px) { .wd-video { width: 100%; max-width: 720px; } }
@media (max-width: 600px) {
  .wd-video-button { left: 4%; bottom: 7%; gap: 8px; padding: 4px 13px 4px 4px; font-size: 13px; }
  .wd-video-icon { width: 34px; height: 34px; }
  .wd-video-icon svg { width: 15px; height: 15px; margin-left: 2px; }
  .wd-video figcaption { margin-top: 10px; font-size: 12px; }
}
.wd-status { display: inline-block; font-size: 10px; padding: 3px 6px; background: var(--surface-2); border-radius: 4px; color: var(--ink-2); }
.wd-status-good { background: #eaf5ee; color: #246443; }
.wd-status-warn { background: #fff0e3; color: #91470e; }
.wd-workbench { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 36px; margin-top: 54px; padding-block: 24px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--ink-2); }
.wd-workbench > span { color: var(--ink-3); }
.wd-workbench ul { display: flex; flex-wrap: wrap; gap: 12px 28px; list-style: none; padding: 0; margin: 0; font-weight: 600; }
.wd-workbench li::before { content: '↗'; color: var(--brand-ink); margin-right: 8px; }
.wd-section { padding: 76px 0; }
.wd-ground { background: var(--band-ground); border-block: 1px solid var(--line); }
.wd-section-head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: end; margin-bottom: 32px; }
.wd-section-head h2 { margin-bottom: 0; }
.wd-section-head > p { max-width: 49ch; margin: 0 0 4px; font-size: 15px; }
.wd-workflow { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; padding: 0; margin: 0 0 26px; border-block: 1px solid var(--line); }
.wd-workflow li { padding: 28px 28px 26px 0; }
.wd-workflow li + li { border-left: 1px solid var(--line); padding-left: 28px; }
.wd-step-number { font-family: var(--font-mono); color: var(--brand-ink); font-size: 13px; }
.wd-workflow p, .wd-usecases p { font-size: 14px; margin: 0 0 20px; line-height: 1.75; }
.wd-step-detail { font-size: 12px; color: var(--ink-3); }
.wd-evidence-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.wd-body { max-width: 46ch; margin-bottom: 24px; }
.wd-evidence-list { margin: 0; }
.wd-evidence-list > div { padding: 22px 0; border-bottom: 1px solid var(--line); }
.wd-evidence-list > div:first-child { padding-top: 0; }
.wd-evidence-list > div:last-child { border: 0; padding-bottom: 0; }
.wd-evidence-list dt { font-size: 17px; font-weight: 600; color: var(--ink); }
.wd-evidence-list dt > span { color: var(--brand-ink); font-family: var(--font-mono); font-size: 12px; margin-right: 10px; }
.wd-evidence-list dd { margin: 10px 0 0 31px; font-size: 14px; color: var(--ink-2); }
.wd-usecases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 26px; }
.wd-usecases article { border-top: 2px solid var(--line-strong); padding-top: 8px; }
.wd-start-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.wd-credit-card { padding: 32px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.wd-credit-card h2 { font-size: clamp(28px, 2.4vw, 34px); }
.wd-credit-card > p { font-size: 14px; }
.wd-credit-rules { margin: 24px 0; }
.wd-credit-rules > div { display: grid; grid-template-columns: 1fr 1.2fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); font-size: 14px; }
.wd-credit-rules dt { color: var(--ink-2); }
.wd-credit-rules dd { margin: 0; font-weight: 600; color: var(--ink); }
.wd-credit-rules dd span { display: block; font-size: 11px; font-weight: 400; color: var(--ink-3); margin-top: 4px; }
.wd-credit-card > .wd-text-link { display: flex; margin-top: 16px; }
.wd-expectations { padding-top: 24px; }
.wd-expectations details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.wd-expectations summary { font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; }
.wd-expectations details p { font-size: 14px; line-height: 1.75; margin: 12px 0 0; }
.wd-expectations > .wd-text-link { margin-top: 24px; }
@media (max-width: 1100px) {
  .wd-hero-grid { grid-template-columns: 1fr 1.1fr; gap: 24px; }
  .wd-hero h1 { font-size: 40px; }
  .wd-evidence-grid, .wd-start-grid { gap: 40px; }
}
@media (max-width: 959px) {
  .wd-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .wd-hero h1 { font-size: clamp(38px, 6.5vw, 56px); }
  .wd-hero h1 br:nth-child(2) { display: none; }
  .wd-intro { max-width: 60ch; }
  .wd-workbench { margin-top: 32px; gap: 14px; }
  .wd-section { padding: 52px 0; }
  .wd-section-head, .wd-evidence-grid, .wd-start-grid { grid-template-columns: 1fr; gap: 28px; }
  .wd-section-head > p, .wd-body { max-width: 65ch; }
  .wd-expectations { padding-top: 0; }
  .site-nav ul { flex-direction: column; }
}
@media (max-width: 600px) {
  .wd-home .wrap { padding-inline: 20px; }
  .wd-home h1 { font-size: 38px; }
  .wd-home h1 br:nth-child(2) { display: initial; }
  .wd-kicker { font-size: 10px; letter-spacing: .06em; }
  .wd-intro { font-size: 16px; }
  .wd-actions { align-items: flex-start; flex-direction: column; gap: 18px; }
  .wd-micro { font-size: 11px; }
  .wd-workbench ul { gap: 10px 16px; font-size: 11px; }
  .wd-workflow, .wd-usecases { grid-template-columns: 1fr; }
  .wd-workflow li, .wd-workflow li + li { border-left: 0; padding: 24px 0; }
  .wd-workflow li + li { border-top: 1px solid var(--line); }
  .wd-workflow h3 { margin: 8px 0; }
  .wd-workflow p { margin-bottom: 10px; }
  .wd-usecases { gap: 12px; }
  .wd-credit-card { padding: 24px 20px; }
  .summary-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summary-card { padding: 16px; }
  .summary-card__label { font-size: 10px; }
  .summary-card__den { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .wd-home *, .wd-home *::before, .wd-home *::after { scroll-behavior: auto; transition: none; animation: none; } }

.header-actions .btn { width: auto; flex: none; }
.btn--copy, .btn--copy:hover { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); }
.shell .site-footer, .shell > main > .section:first-child { border-radius: 0; }

/* Component display rules must not reveal deliberately hidden controls. */
[hidden] { display: none !important; }

/* Editorial marketing system: content-led pages, evidence and reading navigation. */
.site-header { padding-block: 0; }
.site-header__inner { min-height: 80px; }
.wd-editorial .wd-hero { background: var(--band-tint); border-bottom: 1px solid var(--line); padding-top: 54px; }
.wd-editorial .wd-hero h1 { font-size: clamp(40px,4.1vw,60px); max-width: 15ch; line-height: 1.09; letter-spacing: -.035em; }
.wd-editorial .wd-hero h1 span { display: block; }
.wd-editorial .wd-hero-grid { align-items: center; gap: 44px; }
.wd-editorial .wd-intro { font-size: 17px; }
.wd-editorial .wd-workbench { margin-top: 38px; border-top: 1px solid var(--line); border-bottom: 0; }
.wd-editorial .wd-section { padding-block: 64px; }
.wd-editorial .wd-section-head { gap: 56px; }
.wd-before-after { display: grid; grid-template-columns: .7fr 1.3fr; border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden; }
.wd-before { background: var(--surface-2); padding: 28px; border-right: 1px solid var(--line); }
.wd-before p { font-size: 14px; }
.wd-before dl { font-size: 13px; margin: 22px 0 0; }
.wd-before dl div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.wd-before dd { margin: 0; color: var(--ink-2); }
.wd-after { padding: 28px; min-width: 0; }
.wd-after .table-scroll { margin-top: 20px; }
.wd-after .data-table { min-width: 520px; }
.wd-after .data-table th { white-space: normal; }
.wd-after th[scope="row"] { text-align: left; font-size: 14px; color: var(--ink); font-weight: 600; }
.wd-context-link { font-size: 14px; line-height: 1.7; margin: 24px 0 0; color: var(--ink-2); max-width: 85ch; }
.wd-research { --ink:#f4f4fa; --ink-2:#d0d1df; --ink-3:#b7b9cc; --line:#45485c; background:#242638; color:var(--ink); }
.wd-research h2,.wd-research h3 { color:var(--ink); }
.wd-research a { color:#e0c7ff; text-underline-offset:4px; }
.wd-research .btn { color:#f4f4fa; border-color:#6b6d83; background:transparent; }
.wd-research .btn:hover { background:#34364c; }
.wd-research .wd-kicker { color:#ffba8c; }
.wd-study-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:64px; border-top:1px solid var(--line); padding-top:32px; }
.wd-study-row { margin-bottom:24px; }
.wd-study-row > div { display:flex; align-items:baseline; gap:18px; margin-bottom:10px; }
.wd-study-row strong { min-width:72px; font-family:var(--font-display); font-size:25px; font-variant-numeric:tabular-nums; }
.wd-study-row > div > span { font-size:14px; color:var(--ink-2); }
.wd-study-track { display:block; height:10px; background:#404257; border-radius:2px; }
.wd-study-track > span { display:block; height:100%; background:#f4a16a; border-radius:2px; min-width:6px; }
.wd-study-reading { border-left:1px solid var(--line); padding-left:48px; }
.wd-study-fraction { font-family:var(--font-display); font-size:64px; font-weight:800; line-height:1; letter-spacing:-.04em; }
.wd-study-fraction small { font-size:24px; color:var(--ink-3); }
.wd-study-reading p { font-size:14px; }
.wd-study-reading .wd-study-note { font-size:12px; }
.wd-research-source { border-top:1px solid var(--line); margin:28px 0 0; padding-top:18px; font-size:12px; }
.wd-tool-catalog { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.wd-live-tool { padding:32px; background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--brand); border-radius:12px; }
.wd-tool-title { display:flex; align-items:center; justify-content:space-between; gap:16px; color:var(--brand-ink); }
.wd-live-tool p,.wd-planned-tools p { font-size:14px; }
.wd-planned-tools article { padding:20px 0; border-top:1px solid var(--line-strong); }
.wd-planned-tools article:first-child { padding-top:0; border-top:0; }
.wd-page-nav { position:sticky; top:80px; z-index:20; display:flex; align-items:center; gap:24px; padding:14px max(20px,calc((100vw - 1208px)/2)); background:var(--bg-2); border-block:1px solid var(--line); overflow-x:auto; scrollbar-width:thin; }
.wd-page-nav > span { font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); white-space:nowrap; }
.wd-page-nav a { white-space:nowrap; font-size:12px; color:var(--ink-2); }
.wd-page-nav a:hover { color:var(--violet-ink); }
section[id],h2[id] { scroll-margin-top:154px; }
.site-header.is-open ~ .shell .wd-page-nav { position:static; }
.prose { max-width:74ch; font-size:17px; line-height:1.85; }
.prose h2 { font-size:29px; line-height:1.25; margin-top:48px; }
.prose h3 { font-size:22px; margin-top:30px; }
.prose p,.prose ul,.prose ol { margin-bottom:22px; }
.prose table { display:block; max-width:100%; overflow-x:auto; }
.prose a { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.section > .wrap > .h1 { font-size:clamp(32px,3.2vw,48px); line-height:1.17; letter-spacing:-.03em; }
.section > .wrap > .lede { max-width:70ch; font-size:17px; line-height:1.75; }
.wd-pricing-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.wd-plan-top { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.wd-plan-top h2 { margin:0; font-size:28px; }
.wd-credit-card .wd-price { color:var(--ink); font-family:var(--font-display); font-size:64px; margin:22px 0; font-weight:800; letter-spacing:-.04em; }
.wd-price span { font-family:var(--font-body); font-size:14px; font-weight:400; color:var(--ink-2); letter-spacing:0; }
.wd-calculator { padding-block:24px; }
.wd-calculator h2 { font-size:28px; margin:12px 0; }
.wd-calculator p { color:var(--ink-2); font-size:15px; line-height:1.7; }
.wd-calculator-inputs { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:24px; }
.wd-calculator label { display:flex; flex-direction:column; gap:10px; font-size:13px; color:var(--ink); font-weight:600; }
.wd-calculator input,.wd-calculator select { width:100%; min-width:0; border:1px solid var(--line-strong); padding:12px; min-height:48px; background:var(--surface); color:var(--ink); border-radius:8px; font:inherit; }
.wd-calculator input[aria-invalid="true"] { border-color:var(--red); }
.wd-estimate-result { background:var(--violet-soft); border:1px solid var(--violet-line); border-radius:10px; padding:24px; margin-top:24px; }
.wd-estimate-result strong { font-size:32px; font-family:var(--font-display); color:var(--violet-ink); }
.wd-estimate-result p { font-size:14px; margin:8px 0 0; }
.wd-pricing-table { width:100%; min-width:650px; border:1px solid var(--line); }
.wd-pricing-table th[scope="row"] { text-align:left; font-size:14px; color:var(--ink); }
.wd-paid-note { display:flex; align-items:center; justify-content:space-between; gap:40px; }
.wd-paid-note p { max-width:65ch; color:var(--ink-2); }
.wd-paid-note .btn { flex:none; }
.report-card__bar { flex-wrap:wrap; }
@media(max-width:960px) {
 .wd-editorial .wd-hero-grid,.wd-before-after,.wd-study-grid,.wd-tool-catalog,.wd-pricing-grid { grid-template-columns:1fr; gap:28px; }
 .wd-editorial .wd-hero h1 { max-width:20ch; font-size:46px; }
 .wd-before { border-right:0; border-bottom:1px solid var(--line); }
 .wd-study-reading { padding-left:0; border-left:0; padding-top:24px; border-top:1px solid var(--line); }
 .wd-study-fraction { font-size:48px; }
 .wd-paid-note { display:block; }
 .wd-paid-note .btn { margin-top:18px; }
}
@media(max-width:600px) {
 .site-header__inner { min-height:72px; }
 .wd-page-nav { top:72px; gap:18px; padding-block:12px; }
 .wd-editorial .wd-hero h1 { font-size:38px; }
 .wd-editorial .wd-hero { padding-top:32px; }
 .wd-editorial .wd-section { padding-block:44px; }
 .wd-editorial .wd-section-head { gap:20px; }
 .wd-before,.wd-after,.wd-live-tool { padding:22px; }
 .wd-calculator-inputs { grid-template-columns:1fr; }
 .prose { font-size:16px; }
 .prose h2 { font-size:25px; }
 .wd-research .wd-study-fraction { font-size:48px; }
}

/* Marketing refinement: compact product hero and deliberate section rhythm. */
.wd-editorial .wd-hero { padding:28px 0 30px; background:var(--band-plain); }
.wd-editorial .wd-hero-grid { grid-template-columns:.95fr 1.12fr; gap:36px; }
.wd-editorial .wd-hero h1 { font-size:clamp(38px,3.65vw,54px); max-width:17ch; margin:16px 0 20px; }
.wd-editorial .wd-intro { font-size:16px; line-height:1.65; margin-bottom:22px; }
/*
 * The workflow ribbon wears the research section's dark treatment.
 *
 * It was a pale lavender band sitting between a white hero and a white section,
 * which made it read as a gap rather than as a row of facts. On the dark ground
 * it becomes the same kind of object as the research band lower down the page -
 * the theme's own "sequence of rooms" idea - and the four inputs it lists
 * actually get looked at.
 *
 * The local ink overrides are the pattern .wd-research already uses: redefine
 * the palette for the block and let the rules underneath resolve against it,
 * rather than repainting each one. Same values, no new colour.
 */
.wd-workflow-ribbon {
  --ink: var(--dark-ink);
  --ink-2: var(--dark-ink-2);
  --line: var(--dark-line);
  background: var(--dark-ground);
  border-block: 1px solid var(--dark-line);
  color: var(--dark-ink);
}
.wd-workflow-ribbon .wrap { display:flex; align-items:center; gap:26px; padding-block:24px; }
.wd-workflow-ribbon p { flex:none; font-size:12px; line-height:1.5; margin:0; color:var(--dark-ink-2); }
.wd-workflow-ribbon strong { font-weight:600; color:var(--dark-ink); }
.wd-workflow-ribbon ul { display:grid; grid-template-columns:repeat(4,1fr); flex:1; list-style:none; margin:0; padding:0; }
.wd-workflow-ribbon li { display:flex; align-items:center; gap:12px; padding-inline:20px; border-left:1px solid var(--dark-line); font-size:13px; font-weight:600; line-height:1.4; color:var(--dark-ink); }
/* The mark colour, the same orange the research section's bars use. */
.wd-workflow-ribbon svg { flex:none; color:var(--dark-mark); }
.wd-workflow-ribbon small { display:block; font-size:11px; font-weight:400; color:var(--dark-ink-2); margin-top:4px; }
.wd-editorial .wd-section { padding-block:64px; border-bottom:1px solid var(--line); }
.wd-editorial #workflow { background:var(--band-ground); }
.wd-editorial #report-fields { background:var(--brand-soft); }
.wd-editorial #toolbox { background:var(--band-plain); }
.wd-editorial #use-cases { background:var(--band-ground); }
.wd-editorial #start-free { background:var(--violet-soft); }
.wd-workflow { gap:18px; }
.wd-workflow li { position:relative; padding:24px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.wd-step-top { display:flex; align-items:center; justify-content:space-between; color:var(--violet-ink); }
.wd-step-top .wd-step-number { margin:0; }
.wd-workflow .wd-step-detail { border-top:1px solid var(--line); padding-top:16px; margin-top:20px; font-size:12px; }
.wd-signal-cards { display:grid; gap:14px; }
.wd-signal-cards > div { background:var(--surface); border:1px solid var(--brand-line); border-radius:10px; padding:20px 22px; }
.wd-signal-cards dd { margin-left:0; }
.wd-signal-values { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.wd-signal-values > span:not(.wd-status) { font-size:11px; padding:4px 8px; border-radius:4px; border:1px solid var(--line); color:var(--ink-2); }
.wd-signal-values .wd-status { font-size:11px; padding:5px 8px; }
.wd-usecases { gap:18px; }
.wd-usecases article { border:1px solid var(--line); border-radius:12px; padding:24px; background:var(--surface); display:flex; flex-direction:column; align-items:flex-start; }
.wd-usecases article p { flex:1; }
.wd-audience-icon { display:inline-flex; padding:10px; background:var(--brand-soft); color:var(--brand-ink); border-radius:8px; }
.wd-expectations details { background:var(--surface); border:1px solid var(--violet-line); border-radius:8px; padding:0 18px; margin-bottom:10px; }
.wd-expectations details p { padding-bottom:8px; }
.wd-section h2 { scroll-margin-top:150px; }
@media(max-width:1100px) {
 .wd-workflow-ribbon .wrap { flex-direction:column; align-items:stretch; gap:18px; }
 /* The markup carries a space before this <br>: at a line end it collapses,
    and once the break is hidden it becomes the gap between the two halves.
    Hiding the break used to run "Fits your" into the bold half. */
 .wd-workflow-ribbon p br { display:none; }
 .wd-workflow-ribbon li:first-child { border-left:0; padding-left:0; }
}
@media(max-width:960px) {
 .wd-editorial .wd-hero-grid { grid-template-columns:1fr; gap:24px; }
 .wd-editorial .wd-hero h1 { max-width:24ch; font-size:46px; }
 .wd-editorial .wd-hero-copy { padding-bottom:0; }
 .wd-editorial .wd-intro { max-width:65ch; }
}
@media(max-width:600px) {
 .wd-editorial .wd-hero { padding:22px 0 26px; }
 .wd-editorial .wd-hero h1 { font-size:36px; margin:12px 0 16px; }
 .wd-editorial .wd-hero .wd-kicker { font-size:10px; }
 .wd-editorial .wd-intro { font-size:15px; line-height:1.65; }
 .wd-workflow-ribbon ul { grid-template-columns:1fr 1fr; gap:20px 0; }
 .wd-workflow-ribbon li { padding-inline:12px; font-size:12px; gap:8px; }
 .wd-workflow-ribbon li:nth-child(odd) { border-left:0; padding-left:0; }
 .wd-workflow-ribbon li svg { width:18px; }
 .wd-editorial .wd-section { padding-block:44px; }
 .wd-workflow li,.wd-usecases article { padding:22px; }
 .wd-signal-cards > div { padding:18px; }
}

@media(max-width:860px) {
 .site-header__inner > .brand { grid-row:1; grid-column:1; }
 .site-header__inner > .header-actions { grid-row:1; grid-column:2; }
 .site-header__inner > .site-nav { grid-row:2; padding-bottom:16px; }
 .site-nav a { padding-block:8px; }
}

/* Final tool-entry language and compact software workspace. */
.header-actions .signin.btn { display:inline-flex; border:1px solid var(--line-strong); border-radius:8px; padding:10px 15px; color:var(--ink); font-size:14px; min-height:42px; background:var(--surface); }
.header-actions .signin.btn:hover { border-color:var(--violet); color:var(--violet-ink); background:var(--violet-soft); }
@media(min-width:861px) and (max-width:1180px) { .site-nav { gap:14px; } .site-nav a { font-size:12px; } .header-actions { gap:8px; } .header-actions .btn { font-size:12px; padding-inline:12px; } }
@media(max-width:600px) {
 .header-actions .signin.btn { display:inline-flex; padding:8px 11px; font-size:12px; min-height:40px; }
 .header-actions { gap:6px; }
}

/* ================================================ inner pages, blog, author
 *
 * The homepage design system, extended to the rest of the site. Nothing here
 * invents a new colour, radius or type scale: every value below is one of the
 * tokens the homepage already uses. What is new is the page furniture the
 * homepage never needed - a page hero that is not a product demo, article
 * cards, an article body, and an author.
 *
 * .wd-page is to an inner page what .wd-editorial is to the homepage: the one
 * scoping class that separates this page's rhythm from the shared parts.
 */

.wd-page .wd-hero { background: var(--band-tint); border-bottom: 1px solid var(--line); padding: 30px 0 40px; }
.wd-page .wd-hero h1 { font-size: clamp(31px, 3.3vw, 46px); line-height: 1.13; letter-spacing: -.032em; max-width: 20ch; margin: 14px 0 18px; }
.wd-page .wd-hero .wd-intro { max-width: 62ch; margin-bottom: 0; }
.wd-page .wd-hero .wd-actions { margin-top: 26px; }
.wd-page .wd-hero .crumbs { margin-bottom: 16px; }
.wd-page .wd-section { padding-block: 62px; }
.wd-page .wd-section + .wd-section { border-top: 1px solid var(--line); }
.wd-page .wd-section.wd-ground + .wd-section, .wd-page .wd-section + .wd-section.wd-ground { border-top: 0; }

/* A hero that carries a summary panel beside the copy, for pages where a
 * number or a short fact list earns its place next to the promise. */
.wd-hero-aside { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); gap: 48px; align-items: start; }
.wd-facts { padding: 24px 26px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: var(--r); box-shadow: var(--sh-sm); }
.wd-facts dl { margin: 0; font-size: 14px; }
.wd-facts div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-top: 1px solid var(--line); }
.wd-facts div:first-child { padding-top: 0; border-top: 0; }
.wd-facts dt { color: var(--ink-2); }
.wd-facts dd { margin: 0; font-weight: 700; font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }

/* Prose with a sidecar. Used where a long argument needs contact details or a
 * byline beside it rather than buried under it. */
.wd-prose-grid { display: grid; grid-template-columns: minmax(0,1fr) 316px; gap: 52px; align-items: start; }
.wd-prose-grid > .prose { max-width: none; }
.wd-sidecar { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 96px; }
.wd-sidecar-card { padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.wd-sidecar-card h2, .wd-sidecar-card h3 { font-size: 12px; font-weight: 700; letter-spacing: .075em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 10px; }
.wd-sidecar-card p { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--ink-2); }
.wd-sidecar-card p + p { margin-top: 10px; }

/* Cards that repeat: principles, fields, FAQ answers, tool notes. One card
 * language for the whole site, so a card on Help and a card on About are the
 * same object. */
.wd-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 20px; }
.wd-cards--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.wd-note-card { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.wd-note-card h3 { font-size: 17px; line-height: 1.3; margin: 0 0 9px; }
.wd-note-card p { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--ink-2); }
.wd-note-card p + p { margin-top: 10px; }
.wd-note-index { display: block; font-family: var(--font-mono); font-size: 11.5px; color: var(--brand-ink); margin-bottom: 10px; }

/* Article CTA: early enough to help a reader acting on the diagnosis, but
 * specific about the tool's page-level role rather than promising rankings. */
.wd-article-tool-cta {
  width: calc(100% + 72px);
  max-width: 860px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(216px, auto);
  gap: 22px;
  align-items: center;
  margin: 26px 0 32px -36px;
  padding: 20px 22px;
  background:
    radial-gradient(circle at 94% 8%, rgba(240, 106, 42, .13), transparent 30%),
    linear-gradient(135deg, var(--surface), var(--violet-soft));
  border: 1px solid var(--violet-line);
  border-left: 4px solid var(--brand);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
}
.wd-article-tool-cta__copy { min-width: 0; }
.wd-article-tool-cta__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px !important;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--brand-ink);
}
.wd-article-tool-cta__eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 2px;
  background: var(--brand);
}
.prose .wd-article-tool-cta h3 {
  margin: 0 0 7px;
  font-size: 20px;
  line-height: 1.24;
}
.prose .wd-article-tool-cta__copy > p:last-child {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}
.wd-article-tool-cta__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.wd-article-tool-cta__action .btn { width: 100%; white-space: nowrap; justify-content: center; }
.wd-article-tool-cta__action > span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  text-align: center;
}
@media (max-width: 720px) {
  .wd-article-tool-cta { width: 100%; grid-template-columns: 1fr; gap: 16px; margin: 24px 0 30px; padding: 20px; }
  .wd-article-tool-cta__action { align-items: stretch; }
  .wd-article-tool-cta__action .btn { width: 100%; white-space: normal; }
}
/* In-page navigation for the long reference pages. Sticky, quiet, and it
 * goes static rather than wrapping when the header menu is open. */
.wd-page-nav ol { display: flex; align-items: center; gap: 24px; margin: 0; padding: 0; list-style: none; }

/* --------------------------------------------------------------- the blog */

.wd-post-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 30px 26px; }
.wd-post-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.wd-post-card:hover, .wd-post-card:focus-within { border-color: var(--line-strong); box-shadow: var(--sh-md); transform: translateY(-2px); }
.wd-post-media { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--surface-2); border-bottom: 1px solid var(--line); overflow: hidden; }
.wd-post-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* No featured image is a normal state, not a broken one: the placeholder
 * carries the category initial rather than a grey rectangle. */
.wd-post-media--empty { display: grid; place-items: center; background: linear-gradient(140deg, var(--brand-soft), var(--violet-soft)); }
.wd-post-media--empty span { font-family: var(--font-display); font-size: 34px; font-weight: 800; color: var(--brand-ink); opacity: .55; }
.wd-post-cat { position: absolute; left: 12px; top: 12px; z-index: 3; padding: 5px 10px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--brand-ink); }
.wd-post-body { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 20px 22px 22px; }
.wd-post-body h2, .wd-post-body h3 { font-size: 19px; line-height: 1.32; letter-spacing: -.01em; margin: 0; }
.wd-post-body h2 a, .wd-post-body h3 a { color: var(--ink); }
/* The whole card is the target; the link keeps its own focus ring. */
.wd-post-body h2 a::after, .wd-post-body h3 a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.wd-post-card:hover h2 a, .wd-post-card:hover h3 a { color: var(--violet-ink); }
.wd-post-excerpt { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.wd-post-meta { display: flex; align-items: center; gap: 9px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-3); }
.wd-post-meta strong { color: var(--ink-2); font-weight: 600; }
.wd-post-meta time { font-family: var(--font-mono); }
.wd-avatar { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; background: linear-gradient(140deg, var(--brand), var(--violet)); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; overflow: hidden; }
.wd-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wd-avatar--lg { width: 62px; height: 62px; flex-basis: 62px; font-size: 20px; }

.wd-pagination { display: flex; justify-content: center; margin-top: 46px; }
.wd-pagination .nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wd-pagination .page-numbers { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 14px; font-weight: 600; color: var(--ink-2); }
.wd-pagination a.page-numbers:hover { border-color: var(--line-strong); color: var(--ink); }
.wd-pagination .page-numbers.current { background: var(--violet); border-color: var(--violet); color: var(--on-violet); }
.wd-pagination .page-numbers.dots { border-color: transparent; background: none; }

/* ------------------------------------------------------------ the article */

.wd-article-head { max-width: 74ch; }
.wd-article-head h1 { font-size: clamp(30px, 3.1vw, 44px); line-height: 1.16; letter-spacing: -.03em; margin: 14px 0 18px; }
.wd-article-standfirst { font-size: 18px; line-height: 1.66; color: var(--ink-2); margin: 0 0 26px; max-width: 66ch; }
.wd-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 16px 0; border-block: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
.wd-article-meta strong { color: var(--ink); font-weight: 600; }
.wd-article-meta time { font-family: var(--font-mono); }
/* --line-strong is a border colour and reads at 1.63:1 as text. The separator
 * is aria-hidden and so exempt from the contrast rule, but at that ratio it is
 * invisible rather than subtle, which is not what a separator is for. */
.wd-article-meta .wd-sep { color: var(--ink-3); }
.wd-article-media { margin: 34px 0 0; }
.wd-article-media img { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: var(--r); }
.wd-article-media figcaption { margin-top: 10px; font-size: 13px; color: var(--ink-3); }
.wd-article-body { margin-top: 36px; }
.wd-article-body.prose table { width: 100%; border-collapse: collapse; font-size: 15px; margin-bottom: 24px; }
.wd-article-body.prose th, .wd-article-body.prose td { padding: 11px 14px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.wd-article-body.prose thead th { background: var(--surface-2); font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); white-space: normal; }
.wd-article-body.prose blockquote { margin: 0 0 22px; padding: 4px 0 4px 22px; border-left: 3px solid var(--brand); font-size: 17px; color: var(--ink-2); }
.wd-article-body.prose ul, .wd-article-body.prose ol { padding-left: 22px; }
.wd-article-body.prose li { margin-bottom: 8px; }
.wd-article-body.prose li::marker { color: var(--brand-ink); }
.wd-article-body.prose h2 { scroll-margin-top: 100px; }

/* ------------------------------------------------------- the author block */

.wd-author-card { position: relative; display: flex; gap: 20px; align-items: flex-start; max-width: 74ch; margin-top: 48px; padding: 24px 26px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--violet); border-radius: var(--r); transition: border-color .18s ease, box-shadow .18s ease; }
.wd-author-card:hover { box-shadow: var(--sh-md); }
.wd-author-name { font-size: 17px; margin: 0 0 3px; }
.wd-author-name a { color: var(--ink); }
.wd-author-card .wd-author-name a::after { content: ""; position: absolute; inset: 0; }
.wd-author-card:hover .wd-author-name a { color: var(--violet-ink); }
.wd-author-role { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-ink); }
.wd-author-card p:last-of-type { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--ink-2); }
.wd-author-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13.5px; font-weight: 600; color: var(--violet-ink); }

.wd-author-hero { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 26px; align-items: start; }
.wd-author-hero h1 { font-size: clamp(29px,2.9vw,40px); margin: 10px 0 12px; max-width: none; }
.wd-author-links { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 20px; font-size: 14px; }

.wd-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 18px; }
.wd-related a { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); }
.wd-related a:hover { border-color: var(--line-strong); box-shadow: var(--sh-sm); color: var(--violet-ink); }
.wd-related span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-ink); }
.wd-related strong { font-size: 15.5px; font-weight: 650; line-height: 1.4; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 1000px) {
  .wd-post-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .wd-prose-grid, .wd-hero-aside { grid-template-columns: 1fr; gap: 34px; }
  .wd-sidecar { position: static; }
}
@media (max-width: 720px) {
  .wd-page .wd-hero { padding: 22px 0 30px; }
  .wd-page .wd-section { padding-block: 46px; }
  .wd-post-grid { grid-template-columns: 1fr; gap: 22px; }
  .wd-author-card { flex-direction: column; gap: 14px; padding: 20px; }
  .wd-author-hero { grid-template-columns: 1fr; gap: 16px; }
  .wd-article-meta { font-size: 12.5px; }
  .wd-facts { padding: 20px; }
}

/* --------------------------------------------- migration and page details */

/* The old next-links markup is <a><span>LABEL</span>Text</a> with no <strong>
 * around the text, and it survives in several templates. Style the bare text
 * node the same way the <strong> is styled so both spellings render alike. */
.wd-related a { font-size: 15.5px; font-weight: 650; line-height: 1.4; }
.wd-related a span { font-weight: 700; }

/* The tools catalogue. Astra's .wd-live-tool and .wd-planned-tools set the
 * containers; these are the headings inside them. */
.wd-live-tool h2 { font-size: 24px; line-height: 1.25; margin: 14px 0 12px; }
/* The two planned tools are h2 like the live one - three peers under the page's
 * "Three tools..." h1, not two children of the tool that happens to ship. They
 * still read as secondary through size and the "In build" pill, which is where
 * that distinction belongs. */
.wd-planned-tools h2 { font-size: 18px; margin: 10px 0 8px; }
.wd-tool-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }
.wd-tool-title > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.wd-planned-tools > .wd-kicker { margin-bottom: 18px; }
.wd-live-tool .wd-credit-rules { margin: 18px 0; }

/* A page hero that opens with a kicker rather than a trail still needs the
 * trail to sit above it without collapsing the gap. */
.wd-hero .crumbs + .wd-kicker { margin-top: 0; }

/* Long reference pages keep their own H1 sizing inside the hero band even when
 * the template still writes class="h1" on it. */
.wd-page .wd-hero h1.h1 { font-size: clamp(31px, 3.3vw, 46px); }

/* An article's prose column is centred on wide screens the way the head is,
 * so the body does not drift left of its own title. */
.wd-article-body, .wd-author-card { margin-inline: 0; }

/* WCAG 2.2 target size (2.5.8): a standalone arrow link is a control, not an
 * inline word in a sentence, so the 24px minimum applies to it. These render at
 * 23px on their own line, which the previous audit had already fixed once for
 * the footer links. Padding rather than line-height, so the text baseline and
 * the section rhythm do not move. */
.wd-text-link, .wd-author-more { min-height: 24px; padding-block: 2px; }

/* ============================================ the dark band, generalised
 *
 * .wd-research was a one-off palette for the homepage research section. It is
 * the surface this site looks most like itself on, so it becomes a band any
 * section can wear: the inner-page hero and the closing CTA both use it now.
 *
 * It re-points the ink and line tokens rather than overriding each rule, so
 * everything nested inside - kickers, tables, pills, cards, the trail - follows
 * without knowing it is on a dark band. Same values in both themes on purpose:
 * this band is a constant, not a thing that inverts.
 */
.wd-dark, .wd-research, .wd-page .wd-hero {
  --ink: #f4f4fa;
  --ink-2: #d0d1df;
  --ink-3: #b7b9cc;
  --line: #45485c;
  --line-2: #3a3d51;
  --line-strong: #5a5d74;
  --surface: #2c2f43;
  --surface-2: #333650;
  background: #242638;
  color: var(--ink);
}
.wd-dark h1, .wd-dark h2, .wd-dark h3, .wd-research h2, .wd-research h3 { color: var(--ink); }
.wd-dark .wd-kicker, .wd-research .wd-kicker { color: #ffba8c; }
.wd-dark .wd-kicker > span { background: #f4a16a; }
.wd-dark a { color: #e0c7ff; }
.wd-dark .crumbs ol, .wd-dark .crumbs a { color: #b7b9cc; }
.wd-dark .crumbs a:hover { color: #fff; }
.wd-dark .crumbs li + li::before { color: #5a5d74; }
.wd-dark .crumbs [aria-current="page"] { color: #e5e6ef; }
.wd-dark .wd-text-link { color: #e0c7ff; }
.wd-dark .btn--secondary, .wd-research .btn {
  color: #f4f4fa;
  border-color: #6b6d83;
  background: transparent;
}
.wd-dark .btn--secondary:hover, .wd-research .btn:hover { background: #34364c; border-color: #8a8ca3; }
/* The primary control keeps its purple. It is the one thing on the band that
 * must not recede, and purple on #242638 clears AA comfortably. */
.wd-dark .btn--primary { background: var(--violet); border-color: var(--violet); color: var(--on-violet); }
.wd-dark .wd-facts { background: #2c2f43; border-color: #45485c; border-left-color: #f4a16a; box-shadow: none; }
.wd-dark .wd-note-card { background: #2c2f43; border-color: #45485c; }
.wd-dark .note, .wd-dark .wd-micro { color: #b7b9cc; }

/* The inner-page hero wears it. The homepage hero does not: its product panel
 * is designed against a light band and that design was approved as it is. */
.wd-page .wd-hero { background: #242638; border-bottom: 0; padding: 34px 0 46px; }
.wd-page .wd-hero .wd-intro { color: #d0d1df; }
.wd-page .wd-hero .wd-article-standfirst { color: #d0d1df; }
.wd-page .wd-hero .wd-article-meta { border-color: #45485c; color: #b7b9cc; }
.wd-page .wd-hero .wd-article-meta strong { color: #f4f4fa; }
.wd-page .wd-hero .wd-article-meta a { color: #e0c7ff; }
.wd-page .wd-hero .wd-sep { color: #9c9fb4; }
/* The first band after a dark hero is always plain, so the page opens with one
 * clean contrast step instead of dark-to-grey-to-white. */
.wd-page .wd-hero + .wd-section { background: var(--bg-2); border-top: 0; }

/* ==================================================== spacing and reading
 *
 * The complaint these answer: sections that were too tight at the top and too
 * loose at the bottom, and prose set at a measure that made long paragraphs
 * hard to track back from the end of a line to the start of the next.
 */
.wd-page .wd-section { padding-block: 72px; }
.wd-page .wd-section > .wrap > .wd-section-head { margin-bottom: 38px; }
.prose { max-width: 72ch; font-size: 17.5px; line-height: 1.78; }
.prose p, .prose ul, .prose ol { margin-bottom: 26px; }
.prose h2 { font-size: 28px; line-height: 1.28; margin: 52px 0 18px; letter-spacing: -.02em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 21px; line-height: 1.35; margin: 34px 0 14px; }
.prose li { margin-bottom: 10px; line-height: 1.72; }
.prose > *:last-child { margin-bottom: 0; }


/* The author page portrait. Same photo, framed tight and biased upward so the
 * face sits in the circle rather than the middle of a full-length shot. */
.wd-author-portrait { width: 132px; height: 132px; flex: 0 0 132px; border-radius: 50%; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); }
.wd-author-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; }
.wd-page .wd-hero .wd-author-portrait { border-color: #45485c; }

/* ======================================= the article: TOC, share, layout */

.wd-article-grid { display: grid; grid-template-columns: 252px minmax(0,1fr); gap: 56px; align-items: start; }
.wd-article-aside { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 18px; }

.wd-toc { padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.wd-toc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
/* The one scroll area in the rail. It was nested inside a second scrolling
 * container, which is why a scrollbar could sit still while the highlight
 * moved. Sized against the viewport so the share card below it is always
 * reachable without scrolling the rail itself. */
.wd-toc ol {
  list-style: none; margin: 0; padding: 0;
  max-height: calc(100vh - 330px);
  min-height: 120px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scroll-behavior: smooth;
}
.wd-toc li { margin: 0; }
.wd-toc a { display: block; padding: 7px 0 7px 14px; border-left: 2px solid transparent; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.wd-toc a:hover { color: var(--ink); }
.wd-toc a.is-current { border-left-color: var(--violet); color: var(--violet-ink); font-weight: 600; }
.wd-toc li.is-sub a { padding-left: 26px; font-size: 13px; color: var(--ink-3); }

.wd-share { padding: 18px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.wd-share p { margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.wd-share-row { display: flex; flex-wrap: wrap; gap: 8px; }
.wd-share-row a, .wd-share-row button {
  display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--ink-2); cursor: pointer; font: inherit;
}
.wd-share-row a:hover, .wd-share-row button:hover { border-color: var(--line-strong); color: var(--violet-ink); background: var(--surface); }
.wd-share-row button.is-done { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.wd-share-note { margin: 10px 0 0; font-size: 12px; color: var(--ink-3); min-height: 1.2em; }

.wd-article-grid .wd-article-body { margin-top: 0; }
.wd-article-grid .wd-author-card { max-width: none; }

/* ===================================================== blog card details
 *
 * The card no longer carries the author. One person writes everything here, so
 * repeating the name nine times on one screen is noise that pushes out the
 * facts a reader actually sorts on: how long it is, and how recent.
 */
.wd-post-meta { gap: 8px; }
.wd-post-read { display: inline-flex; align-items: center; gap: 6px; }
.wd-post-read::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); }

.wd-cat-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 30px; }
.wd-cat-row .cat-nav__item { margin: 0; }

@media (max-width: 1080px) {
  .wd-article-grid { grid-template-columns: 1fr; gap: 30px; }
  /* The sidebar becomes a collapsed block above the article rather than a
   * sticky rail with nothing to stick to. */
  .wd-article-aside { position: static; flex-direction: row; flex-wrap: wrap; gap: 14px; }
  .wd-toc { flex: 1 1 320px; }
  .wd-toc ol { max-height: none; }
  .wd-share { flex: 0 1 auto; }
}
@media (max-width: 720px) {
  .wd-page .wd-hero { padding: 24px 0 32px; }
  .wd-page .wd-section { padding-block: 50px; }
  .prose { font-size: 16.5px; line-height: 1.76; }
  .prose h2 { font-size: 24px; margin-top: 40px; }
  .wd-article-aside { flex-direction: column; }
  .wd-author-portrait { width: 96px; height: 96px; flex-basis: 96px; }
}

/* The closing CTA on the dark band. */
.wd-cta-grid { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 56px; align-items: center; }
.wd-cta-grid h2 { font-size: clamp(27px,2.6vw,37px); line-height: 1.18; letter-spacing: -.028em; margin: 14px 0 16px; max-width: 20ch; }
.wd-cta-body { margin: 0 0 28px; max-width: 60ch; font-size: 16px; line-height: 1.72; color: var(--ink-2); }
.wd-cta-plan dl { margin: 0; font-size: 14px; }
.wd-cta-plan dl div { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-top: 1px solid var(--line); }
.wd-cta-plan dl div:first-child { padding-top: 0; border-top: 0; }
.wd-cta-plan dt { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-3); }
.wd-cta-plan dd { margin: 0; font-family: var(--font-mono); font-size: 12.5px; text-align: right; color: var(--ink); }
.wd-cta-plan .note { margin: 16px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }
@media (max-width: 900px) { .wd-cta-grid { grid-template-columns: 1fr; gap: 30px; } }

/* The inner-page hero is a dark band, so it needs the dark band's descendant
 * rules too. Re-pointing the tokens above covers everything that reads var(),
 * but the kicker, the trail, the links and the secondary button all carry
 * literal colours, and those have to be named for this surface as well. */
.wd-page .wd-hero h1,
.wd-page .wd-hero h2 { color: var(--ink); }
.wd-page .wd-hero .wd-kicker { color: #ffba8c; }
.wd-page .wd-hero .wd-kicker > span { background: #f4a16a; }
.wd-page .wd-hero a { color: #e0c7ff; }
.wd-page .wd-hero .crumbs ol,
.wd-page .wd-hero .crumbs a { color: #b7b9cc; }
.wd-page .wd-hero .crumbs a:hover { color: #fff; }
.wd-page .wd-hero .crumbs li + li::before { color: #5a5d74; }
.wd-page .wd-hero .crumbs [aria-current="page"] { color: #e5e6ef; }
.wd-page .wd-hero .wd-text-link { color: #e0c7ff; }
.wd-page .wd-hero .btn--secondary { color: #f4f4fa; border-color: #6b6d83; background: transparent; }
.wd-page .wd-hero .btn--secondary:hover { background: #34364c; border-color: #8a8ca3; }
.wd-page .wd-hero .btn--primary { background: var(--violet); border-color: var(--violet); color: var(--on-violet); }
.wd-page .wd-hero .wd-facts { background: #2c2f43; border-color: #45485c; border-left-color: #f4a16a; box-shadow: none; }
.wd-page .wd-hero .wd-avatar { border: 1px solid #45485c; }

/* Line length, measured rather than assumed.
 *
 * max-width was set in ch, which is the width of the "0" glyph. In Plus Jakarta
 * Sans at 17.5px that is about 13px, so 72ch resolved to 936px and put 98
 * characters on a line. Comfortable running text is 65 to 75. The cap is in
 * pixels because it is the line that has to be right, not the arithmetic.
 *
 * The cap sits on the text elements, not the container, so a wide table, a
 * figure or a scrolling data block still gets the full column while the prose
 * around it stays readable. */
.prose { max-width: 680px; }
.wd-article-body { max-width: none; }
.wd-article-body > p,
.wd-article-body > ul,
.wd-article-body > ol,
.wd-article-body > h2,
.wd-article-body > h3,
.wd-article-body > h4,
.wd-article-body > blockquote,
.wd-article-body > .note { max-width: 680px; }
.wd-article-body > figure,
.wd-article-body > table,
.wd-article-body > .table-scroll,
.wd-article-body > .wp-block-table { max-width: none; }
.wd-prose-grid > .prose > * { max-width: 680px; }
.wd-prose-grid > .prose > figure,
.wd-prose-grid > .prose > table,
.wd-prose-grid > .prose > .table-scroll { max-width: none; }

/* The at-a-glance figures, out of the hero and on a light band where the brand
 * ink they are set in actually reads. */
.wd-stat { display: flex; flex-direction: column; gap: 8px; }
.wd-stat strong { font-family: var(--font-display); font-size: 32px; line-height: 1; letter-spacing: -.03em; color: var(--brand-ink); }
.wd-stat span { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
#at-a-glance .callout { max-width: 76ch; margin-top: 26px; }

/* A grid column written as 1fr is really minmax(auto,1fr), so it cannot shrink
 * below its content's min-content width. The contents list has long headings in
 * it, which pushed the article grid to 402px inside a 375px viewport and gave
 * the whole page a horizontal scrollbar. minmax(0,1fr) plus min-width:0 on the
 * flex children lets the column actually be as narrow as the screen. */
.wd-article-grid { grid-template-columns: 252px minmax(0,1fr); }
.wd-article-grid > * { min-width: 0; }
.wd-article-aside, .wd-toc, .wd-share { min-width: 0; }
.wd-toc a { overflow-wrap: break-word; }

@media (max-width: 1080px) {
  .wd-article-grid { grid-template-columns: minmax(0,1fr); }
  .wd-toc { flex: 1 1 300px; min-width: 0; }
}
@media (max-width: 720px) {
  .wd-toc, .wd-share { flex: 1 1 auto; width: 100%; }
}

/* ===================================================== spacing, tightened
 *
 * The pass before this one over-corrected: 72px bands, 52px above every H2 and
 * 26px between paragraphs made short sections look padded and long articles
 * look loose. These are the values the pages actually read well at, measured on
 * the live pages rather than picked as a scale.
 */
.wd-page .wd-section { padding-block: 54px; }
.wd-page .wd-hero { padding: 28px 0 36px; }
.wd-page .wd-hero h1 { margin: 12px 0 14px; }
.wd-page .wd-section > .wrap > .wd-section-head { margin-bottom: 28px; }
.wd-section-head { gap: 48px; margin-bottom: 28px; }

/* Article body. Line height stays generous because the measure is 73
 * characters; the paragraph gap comes down because it was doing the job of the
 * line height as well and left holes in the column. */
.prose { line-height: 1.72; }
.prose p, .prose ul, .prose ol { margin-bottom: 20px; }
.prose h2 { margin: 38px 0 14px; }
.prose h3 { margin: 26px 0 10px; }
.prose li { margin-bottom: 6px; line-height: 1.7; }
.wd-article-body { margin-top: 28px; }
.wd-article-media { margin-top: 26px; }
.wd-author-card { margin-top: 36px; padding: 20px 22px; }
.wd-post-grid { gap: 26px 24px; }
.wd-pagination { margin-top: 34px; }
.wd-cards { gap: 18px; }
.wd-note-card { padding: 22px; }

/* ============================================ the author card photograph */

.wd-author-face { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); }
.wd-author-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }

/* Two columns of running text for a page that is wide rather than a reading
 * column. Used where the copy is two or three paragraphs and a single 680px
 * column would leave half the band empty. */
.wd-columns { column-count: 2; column-gap: 56px; max-width: 1100px; }
.wd-columns p { margin: 0 0 18px; font-size: 16.5px; line-height: 1.72; color: var(--ink-2); break-inside: avoid; }
.wd-columns p:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
  .wd-columns { column-count: 1; }
  .wd-author-face { width: 60px; height: 60px; }
}
@media (max-width: 720px) {
  .wd-page .wd-section { padding-block: 40px; }
  .wd-page .wd-hero { padding: 22px 0 28px; }
  .prose p, .prose ul, .prose ol { margin-bottom: 18px; }
  .prose h2 { margin: 32px 0 12px; }
}

/* One type size for running text.
 *
 * The container was 17.5px and an older rule set .prose p and .prose li to
 * 16.5px, so headings scaled off one number and the paragraphs off another.
 * Both are named here so the cascade cannot pick a different answer for the
 * text than for the space around it. */
.prose,
.prose p,
.prose li,
.prose dt,
.prose dd { font-size: 17px; }
.prose blockquote p { font-size: 17.5px; }
@media (max-width: 720px) {
  .prose, .prose p, .prose li, .prose dt, .prose dd { font-size: 16.5px; }
}

/* ================================================== the founder section
 *
 * Second on About, under the hero. Wide: copy on the left at a readable
 * measure, photograph on the right, and one badge over the corner of it
 * carrying the number the whole site rests on.
 */
.wd-founder { display: grid; grid-template-columns: minmax(0,1fr) 400px; gap: 60px; align-items: center; }
.wd-founder-copy h2 { font-size: clamp(29px,2.9vw,40px); line-height: 1.14; letter-spacing: -.03em; margin: 12px 0 6px; }
.wd-founder-role { margin: 0 0 20px; font-size: 15.5px; font-weight: 600; color: var(--brand-ink); }
.wd-founder-copy > p { font-size: 16.5px; line-height: 1.72; color: var(--ink-2); margin: 0 0 16px; max-width: 60ch; }
.wd-founder-tags { display: flex; flex-wrap: wrap; gap: 9px; margin: 22px 0; padding: 0; list-style: none; }
.wd-founder-tags li { padding: 8px 15px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.wd-founder-proof { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 15px 17px; background: var(--violet-soft); border: 1px solid var(--violet-line); border-radius: var(--r); font-size: 14.5px; line-height: 1.6; color: var(--ink-2); max-width: 62ch; }
.wd-founder-proof svg { flex: 0 0 auto; color: var(--violet-ink); margin-top: 2px; }
.wd-founder-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 22px 0 0; }

.wd-founder-photo { position: relative; margin: 0; }
.wd-founder-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r-lg); border: 1px solid var(--line); }
.wd-founder-badge { position: absolute; left: -20px; bottom: 26px; display: flex; align-items: baseline; gap: 10px; padding: 13px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-lg); }
.wd-founder-badge strong { font-family: var(--font-display); font-size: 25px; line-height: 1; letter-spacing: -.02em; }
.wd-founder-badge span { font-size: 12px; line-height: 1.35; color: var(--ink-3); max-width: 11ch; }

@media (max-width: 980px) {
  .wd-founder { grid-template-columns: 1fr; gap: 30px; }
  .wd-founder-photo { max-width: 340px; }
  .wd-founder-badge { left: auto; right: 14px; }
}
@media (max-width: 720px) {
  .wd-founder-badge { position: static; margin-top: 12px; box-shadow: none; }
}

/* ================================================== the article, rebuilt
 *
 * What was wrong, measured on the live page at 1440:
 *
 *   - The header sat on the dark band and the featured image landed under it
 *     inside the body column: two competing full-width blocks back to back,
 *     before a word of the article.
 *   - The body column was 1012px wide and the paragraphs inside it were capped
 *     at 680px, so every line had 332px of dead space to its right. That is the
 *     "enormous margin" and the "thin line" - one measurement, two symptoms.
 *   - The picture ran at 1012px and the text under it at 680px, so the two
 *     never shared an edge.
 *
 * The shape now: trail, picture, title, then the read. One centred column,
 * with the contents list hanging in the left margin rather than taking width
 * from the text. Picture, headline and paragraphs share a left and right edge
 * at every size.
 */

/* The article is not inside a .section, and .section is where this theme keeps
 * its horizontal padding, so the article carries its own. Without it the text
 * runs to the screen edge as soon as the column stops being the narrower of
 * the two - which is what happened at 820px: an 805px line in an 820px window. */
.wd-article { padding-bottom: 8px; padding-inline: var(--pad-x); }

/*
 * The article column is centred on the page, full stop. The contents list is
 * absolutely positioned to its left and is free to use as much of that margin
 * as it needs, including all of it.
 *
 * An earlier attempt padded the left side by the rail's width so the rail and
 * the column together sat centred. It balanced the gutters and it moved the
 * article off centre to do it, which is the wrong trade: the thing a reader
 * looks at should be in the middle of the screen.
 */

.wd-article-trail { max-width: var(--wd-col); margin-inline: auto; padding-top: 22px; padding-bottom: 18px; }
.wd-article-trail .crumbs { margin: 0; }

/* The picture: wider than the reading column, centred on it, and capped in
 * height so a tall upload cannot push the headline off the first screen. */
.wd-article-hero { margin: 0 0 34px; }
.wd-article-hero img {
  display: block;
  width: 100%;
  max-width: var(--wd-hero-w);
  height: auto;
  max-height: 520px;
  object-fit: cover;
  margin-inline: auto;
  border-radius: var(--r-lg);
  background: var(--surface-2);
}
.wd-article-hero figcaption { max-width: var(--wd-col); margin: 12px auto 0; font-size: 13px; color: var(--ink-3); }

/* Overrides the earlier 74ch rule, which resolved to 888px and left the
 * headline hanging wider than the article under it. */
.wd-article-head { max-width: var(--wd-col); margin-inline: auto; padding-bottom: 8px; }
.wd-article-head .wd-kicker { margin-bottom: 14px; }
.wd-article-head h1 {
  font-size: clamp(32px, 3.4vw, 47px);
  line-height: 1.14;
  letter-spacing: -.032em;
  margin: 0 0 18px;
  max-width: 22ch;
}
.wd-article-head .wd-article-standfirst { font-size: 19px; line-height: 1.6; color: var(--ink-2); margin: 0 0 26px; max-width: 60ch; }
.wd-article-head .wd-article-meta { margin: 0; }

/*
 * The reading column is centred on the page and the contents list hangs in the
 * left margin beside it, out of the layout flow.
 *
 * Three grid tracks were the obvious way to do this and the wrong one. Every
 * flexible track shrinks together when space runs short, so the middle column
 * gave up width before the empty right gutter did: at 1280 the article read at
 * 618px and at 1100 it was down to 450px, a worse version of the problem this
 * was meant to fix.
 *
 * Out of the flow, the column's width is the one thing that never negotiates.
 * The rail simply stops being shown when there is no margin left to hang it in.
 */
.wd-article-grid {
  position: relative;
  display: block;
  max-width: var(--wd-col);
  margin-inline: auto;
  padding-top: 10px;
}
/*
 * The rail takes the space to the left of the centred column: up to --wd-rail,
 * and whatever is actually there when that is less. It may run right out to the
 * edge of the viewport; that margin has nothing else to do.
 */
.wd-article-aside {
  position: absolute;
  top: 0;
  right: calc(100% + var(--wd-rail-gap));
  width: min(var(--wd-rail), calc((100vw - var(--wd-col)) / 2 - var(--wd-rail-gap) - 12px));
  height: 100%;
  display: block;
}
/*
 * One sticky element, not two. The contents list and the share card were
 * sticky siblings sharing a `top`, so each pinned itself to the same line and
 * the share card climbed over the list on scroll. The rail is the sticky thing;
 * the cards just sit inside it.
 *
 * It is also capped to the viewport and scrolls internally, so a long contents
 * list on a short screen cannot push sharing out of reach.
 */
.wd-article-rail { position: sticky; top: 96px; }
.wd-article-rail > * + * { margin-top: 16px; }
.wd-article-main { min-width: 0; }

/* Inside the article the text fills its column. The 680px cap that used to sit
 * here is what stranded every line; the column is the measure now, and it is
 * sized to be one. */
.wd-article-body { max-width: none; margin-top: 0; }
.wd-article-body > p,
.wd-article-body > ul,
.wd-article-body > ol,
.wd-article-body > h2,
.wd-article-body > h3,
.wd-article-body > h4,
.wd-article-body > blockquote,
.wd-article-body > .note { max-width: none; }
.wd-article-main .wd-author-card { max-width: none; }

.wd-article-body img { border-radius: var(--r); }
.wd-article-body figure { margin: 28px 0; }
.wd-article-body figcaption { margin-top: 10px; font-size: 13px; color: var(--ink-3); }

/* Widths in one place, so the picture, the headline and the paragraphs cannot
 * drift apart. min() so a single declaration covers every screen: the column is
 * 740px where there is room and the available space where there is not. */
:root {
  --wd-col: min(100%, 780px);
  --wd-rail: 292px;
  --wd-rail-gap: 32px;
  --wd-hero-w: min(100%, 1100px);
}

/*
 * Below this there is no margin to hang the rail in: half the column (370) plus
 * the gap (36) plus the rail (220) needs 626px of clearance either side of
 * centre. The contents list returns to the flow above the article, beside
 * sharing while there is room for both.
 */
@media (max-width: 1240px) {
  .wd-article-aside {
    position: static;
    width: auto;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 26px;
  }
  .wd-article-rail { position: static; max-height: none; overflow: visible; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; }
  .wd-article-rail > * { flex: 1 1 300px; }
  .wd-article-rail > * + * { margin-top: 0; }
  .wd-share { flex: 0 1 auto; }
  .wd-toc ol { max-height: none; }
}

@media (max-width: 820px) {
  .wd-article-hero { margin-bottom: 24px; }
  .wd-article-hero img { max-height: 300px; border-radius: var(--r); }
  .wd-article-trail { padding-top: 14px; padding-bottom: 12px; }
  .wd-article-head h1 { max-width: none; }
  .wd-article-head .wd-article-standfirst { font-size: 17px; }
  .wd-article-rail { flex-direction: column; }
  .wd-article-rail > * { flex: 1 1 auto; width: 100%; }
}

/* The one line of orientation the blog index keeps, as a labelled note rather
 * than a loose paragraph floating above the grid. */
.wd-writing-note {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  max-width: 78ch; margin: 0 0 30px; padding: 14px 18px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-left: 3px solid var(--brand); border-radius: var(--r-sm);
  font-size: 14.5px; line-height: 1.62; color: var(--ink-2);
}
.wd-writing-note > span {
  flex: 0 0 auto; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--brand-ink);
}
@media (max-width: 620px) { .wd-writing-note { padding: 12px 14px; font-size: 14px; } }

/* Article type, sized against a measured line rather than a guess.
 *
 * The average advance of this font at 17px is 8.18px, so the 820px column was
 * running at 100 characters a line. Comfortable running text is 65 to 75. Two
 * earlier readings said 67 and were wrong: getClientRects() returns one rect
 * per inline element, so a paragraph with links in it reports far more lines
 * than it has and the arithmetic flatters itself. A paragraph with no inline
 * markup at all is the honest check, and it agreed with the canvas.
 *
 * 780px at 18px lands at about 88. That is wider than the comfort range and it
 * is a deliberate trade: the column had to grow, so the type grows with it
 * rather than leaving the line to stretch on its own.
 */
.wd-article-body,
.wd-article-body > p,
.wd-article-body > ul,
.wd-article-body > ol,
.wd-article-body > dl { font-size: 18px; line-height: 1.74; }
.wd-article-body > li,
.wd-article-body li { font-size: inherit; }
.wd-article-body > h2 { font-size: 29px; }
.wd-article-body > h3 { font-size: 22px; }
.wd-article-head .wd-article-standfirst { font-size: 20px; }

@media (max-width: 820px) {
  .wd-article-body,
  .wd-article-body > p,
  .wd-article-body > ul,
  .wd-article-body > ol,
  .wd-article-body > dl { font-size: 17px; line-height: 1.72; }
  .wd-article-body > h2 { font-size: 25px; }
  .wd-article-head .wd-article-standfirst { font-size: 17.5px; }
}

/*
 * Phones: both header actions stay visible, Start Free and Open Tool.
 *
 * At 620px and below an older rule hid every .header-actions .btn, and the
 * 600px rule brought back only the secondary one. These two buttons are the
 * only way into the app from the header, so neither is hidden at any width.
 * On the narrowest phones the room comes from a smaller logo and tighter button
 * padding instead.
 */
@media (max-width: 620px) {
  .header-actions { gap: 6px; }
  .header-actions .btn--primary,
  .header-actions .signin.btn { display: inline-flex; padding: 7px 10px; font-size: 12.5px; min-height: 38px; white-space: nowrap; }
}
@media (max-width: 440px) {
  .site-header__inner { padding-inline: 14px; gap: 8px; }
  .brand__logo { height: 32px; }
  .header-actions { gap: 5px; }
  .header-actions .btn--primary,
  .header-actions .signin.btn { padding: 7px 8px; font-size: 12px; min-height: 36px; }
  .nav-toggle { width: 36px; height: 36px; }
}

/* ================================================ the article, third pass
 *
 * What readers reported, and what it was on the page:
 *
 *   - The title twice. The featured image carries the headline as artwork and
 *     sat directly above the H1 saying the same words. The picture now follows
 *     the byline, and it is never cropped: object-fit cover cut the lettering
 *     off the top of the image on tablets.
 *   - The contents list. On desktop it was an absolutely positioned card
 *     squeezed into whatever margin was left, flush to the screen edge, in
 *     13px type wrapping each entry onto three lines, with a percentage, a
 *     progress bar and a share box stacked in it. Below 1240px the whole list
 *     and the share box sat above the first paragraph and pushed the article a
 *     screen down.
 *   - Congested text. A 780px column at 18px runs about 88 characters a line;
 *     comfortable running text is 50 to 75. Paragraphs were 20px apart.
 *
 * The shape now follows the usual long-read pattern (Nielsen Norman Group's
 * table-of-contents guidance): a plain sticky list in the left rail that
 * highlights the current section where the screen has room for it, and a
 * closed, non-sticky accordion in the body where it does not. Sharing moved to
 * the end of the article.
 */
:root {
  --wd-col: min(100%, 680px);
  --wd-rail: 224px;
  --wd-rail-gap: 64px;
  --wd-hero-w: min(100%, 880px);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* The picture, after the byline, whole. */
.wd-article-hero { margin: 34px 0 46px; }
.wd-article-hero img {
  max-width: var(--wd-hero-w);
  max-height: none;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

/* The column, centred; the rail hangs a fixed distance to its left. */
.wd-article-grid { position: relative; max-width: var(--wd-col); margin-inline: auto; padding-top: 0; }
.wd-article-aside {
  position: absolute;
  top: 0;
  right: calc(100% + var(--wd-rail-gap));
  width: var(--wd-rail);
  height: 100%;
  display: block;
}
.wd-article-rail { position: sticky; top: 108px; }

/* The rail list: plain, one quiet line, the current section marked. */
.wd-toc { padding: 0; background: none; border: 0; border-radius: 0; }
.wd-toc-head { display: block; margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.wd-toc ol {
  list-style: none; margin: 0; padding: 0;
  border-left: 1px solid var(--line);
  max-height: calc(100vh - 170px);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.wd-toc li { margin: 0; }
.wd-toc a {
  display: block; margin-left: -1px; padding: 7px 0 7px 16px;
  border-left: 2px solid transparent;
  font-size: 14px; line-height: 1.45; color: var(--ink-2); text-decoration: none;
}
.wd-toc a:hover { color: var(--violet-ink); }
.wd-toc a.is-current { border-left-color: var(--violet); color: var(--ink); font-weight: 600; }
.wd-toc li.is-sub a { padding-left: 30px; font-size: 13.5px; color: var(--ink-3); }
.wd-toc li.is-sub a.is-current { color: var(--ink); }

/* The accordion, for everything narrower than the rail needs. */
.wd-toc-inline { margin: 0 0 40px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.wd-toc-inline > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; cursor: pointer; list-style: none;
  font-size: 15px; font-weight: 600; color: var(--ink);
}
.wd-toc-inline > summary::-webkit-details-marker { display: none; }
.wd-toc-inline > summary::after {
  content: ''; margin-left: auto; width: 8px; height: 8px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: translateY(-2px) rotate(45deg); transition: transform .15s ease;
}
.wd-toc-inline[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.wd-toc-inline-count { font-size: 13.5px; font-weight: 400; color: var(--ink-3); }
.wd-toc-inline ol { list-style: none; margin: 0; padding: 4px 18px 12px; border-top: 1px solid var(--line); }
.wd-toc-inline li { margin: 0; }
.wd-toc-inline li + li { border-top: 1px solid var(--line-2); }
.wd-toc-inline a { display: block; padding: 10px 0; font-size: 15px; line-height: 1.45; color: var(--violet-ink); text-decoration: none; }
.wd-toc-inline a:hover { text-decoration: underline; text-underline-offset: 3px; }
.wd-toc-inline li.is-sub a { padding-left: 18px; font-size: 14.5px; color: var(--ink-2); }

@media (max-width: 1279px) {
  .wd-article-aside { display: none; }
}
@media (min-width: 1280px) {
  .wd-toc-inline { display: none !important; }
}

/* Room to read. */
.wd-article-body,
.wd-article-body > p,
.wd-article-body > ul,
.wd-article-body > ol,
.wd-article-body > dl { font-size: 18px; line-height: 1.75; }
.wd-article-body > p,
.wd-article-body > ul,
.wd-article-body > ol,
.wd-article-body > dl,
.wd-article-body > blockquote { margin: 0 0 26px; }
.wd-article-body > h2 { font-size: 28px; line-height: 1.3; letter-spacing: -.02em; margin: 64px 0 18px; }
.wd-article-body > h3 { font-size: 21px; line-height: 1.4; letter-spacing: -.01em; margin: 42px 0 12px; }
.wd-article-body > h2,
.wd-article-body > h3 { scroll-margin-top: 112px; }
.wd-article-body > :first-child { margin-top: 0; }
.wd-article-body li { margin-bottom: 12px; line-height: 1.7; }
.wd-article-body li:last-child { margin-bottom: 0; }
.wd-article-body > figure,
.wd-article-body > .wp-block-image,
.wd-article-body > .wp-block-table,
.wd-article-body > .table-scroll,
.wd-article-body > table { margin: 38px 0; }
.wd-article-body > .wd-article-tool-cta { margin: 48px 0; }

/* Sharing and the author, closing the article. */
.wd-share {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  margin: 56px 0 0; padding: 22px 0 0;
  background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0;
}
.wd-share .wd-share-label { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.wd-share .wd-share-note { margin: 0; min-height: 0; font-size: 13px; }
.wd-article-main .wd-author-card { margin-top: 28px; }

@media (max-width: 820px) {
  .wd-article-hero { margin: 26px 0 34px; }
  .wd-article-hero img { max-height: none; border-radius: var(--r); }
  .wd-article-body,
  .wd-article-body > p,
  .wd-article-body > ul,
  .wd-article-body > ol,
  .wd-article-body > dl { font-size: 17px; line-height: 1.72; }
  .wd-article-body > p,
  .wd-article-body > ul,
  .wd-article-body > ol,
  .wd-article-body > dl,
  .wd-article-body > blockquote { margin-bottom: 22px; }
  .wd-article-body > h2 { font-size: 24px; margin: 48px 0 14px; }
  .wd-article-body > h3 { font-size: 19.5px; margin: 34px 0 10px; }
  .wd-toc-inline { margin-bottom: 32px; }
  .wd-share { margin-top: 44px; }
}

/*
 * Phones: the byline and the trail.
 *
 * The byline wrapped onto three lines with a separator dot left hanging at the
 * end of each, and the trail ran to three lines of monospace repeating the
 * headline printed directly beneath it. On a narrow screen the byline stacks
 * without dots, and the trail keeps only the sections above the article.
 */
@media (max-width: 620px) {
  .wd-article-head .wd-article-meta { gap: 6px 12px; }
  .wd-article-head .wd-article-meta .wd-sep { display: none; }
  .wd-article-head .wd-article-meta > a { margin-right: 4px; }
  .wd-article-trail .crumbs li:last-child { display: none; }
}

/*
 * The rail's distance from the column, and the byline on one line.
 *
 * At 1280 a fixed 64px gap left the rail 12px from the edge of the screen.
 * The gap now gives way first, down to 32px, so the rail keeps 40px of margin
 * at the narrowest width it is shown at.
 *
 * The byline carried a separator dot between items and set the dates in
 * monospace, which made it wider than the column: "Updated" wrapped onto its
 * own line with a dot hanging at the end of the first. Spacing separates the
 * items instead, and the dates are set like the rest of the line.
 */
:root { --wd-rail-gap: clamp(32px, calc((100vw - 680px) / 2 - 264px), 64px); }
.wd-article-head .wd-article-meta { gap: 8px 20px; }
.wd-article-head .wd-article-meta .wd-sep { display: none; }
.wd-article-head .wd-article-meta time { font-family: inherit; }
.wd-article-head .wd-article-meta > a { display: inline-flex; align-items: center; margin-left: -10px; }

/* ================================================ the article, fourth pass
 *
 * Asked for after reading the third: a wider column, the byline under the
 * picture rather than above it, a wider contents list with a design of its
 * own, and a shorter trail.
 *
 * The column grows to 720 and the type with it, to 19px. Both move together on
 * purpose: widening the column alone stretches the line, and the measure is
 * what makes long text readable. At 19px a 720px column runs about 79
 * characters, the same line the 680/18 column had.
 */
:root {
  --wd-col: min(100%, 720px);
  --wd-rail: 248px;
  --wd-rail-gap: clamp(28px, calc((100vw - 720px) / 2 - 272px), 56px);
  --wd-hero-w: min(100%, 960px);
}

.wd-article-body,
.wd-article-body > p,
.wd-article-body > ul,
.wd-article-body > ol,
.wd-article-body > dl { font-size: 19px; line-height: 1.72; }
.wd-article-body > h2 { font-size: 29px; }
.wd-article-body > h3 { font-size: 22px; }

/* The byline, under the picture and above the first paragraph. */
.wd-article-byline { max-width: var(--wd-col); margin: -14px auto 30px; }
.wd-article .wd-article-meta { margin: 0; gap: 8px 20px; }
.wd-article .wd-article-meta .wd-sep { display: none; }
.wd-article .wd-article-meta time { font-family: inherit; }
.wd-article-hero { margin: 30px 0 26px; }

/*
 * The contents list, with a design rather than a column of grey links: the
 * brand mark on the label, the sections numbered the way the steps elsewhere
 * on this site are, and the section being read filled in violet.
 */
.wd-toc {
  padding: 16px 14px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.wd-toc-head {
  display: flex; align-items: center; gap: 9px;
  margin: 0 4px 10px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--violet-ink);
}
.wd-toc-head::before {
  content: ''; flex: none; width: 14px; height: 14px; border-radius: 4px;
  background: linear-gradient(140deg, var(--brand), var(--violet));
}
.wd-toc ol { counter-reset: wd-toc; border-left: 0; max-height: calc(100vh - 190px); }
.wd-toc > ol > li:not(.is-sub) { counter-increment: wd-toc; }
.wd-toc a {
  display: flex; align-items: baseline; gap: 10px;
  margin-left: 0; padding: 8px 10px;
  border-left: 0; border-radius: 9px;
  font-size: 14px; line-height: 1.45; color: var(--ink-2);
}
.wd-toc > ol > li:not(.is-sub) > a::before {
  content: counter(wd-toc, decimal-leading-zero);
  flex: none; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3);
}
.wd-toc a:hover { background: var(--surface-2); color: var(--ink); }
.wd-toc a.is-current { background: var(--violet-soft); color: var(--violet-ink); font-weight: 600; }
.wd-toc > ol > li:not(.is-sub) > a.is-current::before { color: var(--violet-ink); }
.wd-toc li.is-sub a { margin-left: 26px; padding-block: 6px; font-size: 13.5px; color: var(--ink-3); }
.wd-toc li.is-sub a.is-current { color: var(--violet-ink); }

/* The accordion carries the same marks, so the two forms are one component. */
.wd-toc-inline { border-radius: var(--r-lg); box-shadow: var(--sh-sm); }
.wd-toc-inline > summary { gap: 9px; }
.wd-toc-inline > summary::before {
  content: ''; flex: none; width: 14px; height: 14px; border-radius: 4px;
  background: linear-gradient(140deg, var(--brand), var(--violet));
}
.wd-toc-inline ol { counter-reset: wd-toc; }
.wd-toc-inline > nav > ol > li:not(.is-sub) { counter-increment: wd-toc; }
.wd-toc-inline a { display: flex; align-items: baseline; gap: 12px; color: var(--ink); }
.wd-toc-inline > nav > ol > li:not(.is-sub) > a::before {
  content: counter(wd-toc, decimal-leading-zero);
  flex: none; font-family: var(--font-mono); font-size: 11px; color: var(--violet-ink);
}
.wd-toc-inline li.is-sub a { padding-left: 34px; color: var(--ink-2); }

/*
 * The rail needs its own width, its gap and 24px of margin beside the column
 * before it is worth showing. Below that the accordion does the job.
 */
@media (max-width: 1319px) {
  .wd-article-aside { display: none; }
  .wd-toc-inline { display: block !important; }
}
@media (min-width: 1320px) {
  .wd-toc-inline { display: none !important; }
}

/*
 * The trail ends in the article's own headline, which is printed in full two
 * lines below it. It keeps its place for search engines - the BreadcrumbList
 * carries the same items - and gives up its width on screen.
 */
.wd-article-trail .crumbs [aria-current=page] {
  max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 820px) {
  .wd-article-body,
  .wd-article-body > p,
  .wd-article-body > ul,
  .wd-article-body > ol,
  .wd-article-body > dl { font-size: 17.5px; line-height: 1.7; }
  .wd-article-body > h2 { font-size: 25px; }
  .wd-article-body > h3 { font-size: 20px; }
  .wd-article-byline { margin: -8px auto 26px; }
  .wd-article-hero { margin: 24px 0 22px; }
}

/* A signal card is a card, including the last one.
 *
 * .wd-signal-cards turns an .wd-evidence-list into bordered cards, but the
 * list's own `> div:last-child { border: 0; padding-bottom: 0 }` — which exists
 * so a plain list does not end on a rule — is the more specific selector and
 * wins, so the final card rendered borderless and flush. Visible on the
 * homepage's "What does a prospect report tell you?" and on the Verifier's
 * three answers, where the missing border reads as the third answer mattering
 * less than the other two. */
.wd-evidence-list.wd-signal-cards > div:last-child {
  border: 1px solid var(--brand-line);
  padding-bottom: 20px;
}