/* winnfield.ai redesign prototype, v2: design A, "Casefile".
   IBM Plex Sans and Mono served from the site, square corners, hairline rules, one accent (#B4410C).
   Porting to the winnfield block theme: every wf-* class goes on a core block (Group, Columns, List, Details,
   Buttons); the mk-* product mockups are HTML components (a Custom HTML block or a block pattern each).
   Sections: 1 fonts · 2 tokens and base · 3 layout · 4 the thread · 5 header, footer, bars · 6 buttons, labels, chips
   · 7 home sections · 8 inner pages and diagrams · 9 forms · 10 product mockups · 11 motion */

/* ---------- 1. Fonts (self-hosted; Latin-1 subsets, the Pi subsets only for arrows and ticks) ---------- */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/IBMPlexSans-Regular-Latin1.woff2) format("woff2");
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/IBMPlexSans-Regular-Pi.woff2) format("woff2"); unicode-range: U+2190-2199, U+2713; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/IBMPlexSans-Medium-Latin1.woff2) format("woff2");
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/IBMPlexSans-SemiBold-Latin1.woff2) format("woff2");
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02; }
/* One mono face serves 400 and 500, so no weight is synthesised. */
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url(fonts/IBMPlexMono-Medium-Latin1.woff2) format("woff2");
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url(fonts/IBMPlexMono-Medium-Pi.woff2) format("woff2"); unicode-range: U+2190-2199, U+2713; }

/* ---------- 2. Tokens and base ---------- */
:root {
  --ground: #F3F5F7;      /* page */
  --ink: #111827;         /* headings, buttons */
  --body: #374151;        /* body text */
  --muted: #4B5563;       /* secondary text, on the ground too (6.9:1) */
  --muted-2: #6B7280;     /* on white only (4.8:1); field borders (WCAG 1.4.11) */
  --rule: #D7DCE2;        /* hairlines */
  --card: #FFFFFF;
  --field: #6B7280;
  --accent: #B4410C;      /* evidence and the thread; 5.2:1 on the ground */
  --accent-hover: #8A3209;
  --on-ink: #F3F5F7;
  --on-ink-muted: #C4CAD3; /* 10.6:1 on ink */
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --wrap: 1200px;
  --gutter: 32px;
  --header-h: 64px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 18px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-synthesis: none; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: #F6D9C9; color: var(--ink); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.wf-skip { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--ink); color: var(--on-ink);
  padding: 12px 16px; font-weight: 500; text-decoration: none; }
.wf-skip:focus { top: 8px; color: var(--on-ink); }

/* ---------- 3. Layout ---------- */
.wf-wrap { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.wf-section { padding: 72px 0; border-top: 1px solid var(--rule); }
.wf-section-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: 40px; }
.wf-h1 { font-size: 60px; line-height: 1.04; letter-spacing: -0.025em; font-weight: 600; color: var(--ink); text-wrap: balance; }
.wf-h2 { font-size: 40px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 600; color: var(--ink); text-wrap: balance; }
.wf-h3 { font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; font-weight: 600; color: var(--ink); }
.wf-lead { font-size: 20px; line-height: 1.55; color: var(--body); max-width: 40em; text-wrap: pretty; }
.wf-p { font-size: 17px; line-height: 1.6; color: var(--body); max-width: 38em; text-wrap: pretty; }
.wf-small { font-size: 15px; line-height: 1.55; color: var(--muted); }
.wf-more { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 16px; min-height: 44px; }
.wf-more::after { content: "→"; text-decoration: none; display: inline-block; }
@media (max-width: 1023px) {
  :root { --gutter: 24px; }
  .wf-section { padding: 72px 0; }
  .wf-h1 { font-size: 48px; }
  .wf-h2 { font-size: 34px; }
}
@media (max-width: 639px) {
  :root { --gutter: 16px; --header-h: 56px; }
  body { font-size: 17px; }
  .wf-section { padding: 48px 0; }
  .wf-section-head { margin-bottom: 24px; gap: 10px; }
  .wf-h1 { font-size: 34px; line-height: 1.08; letter-spacing: -0.02em; }
  .wf-h2 { font-size: 28px; line-height: 1.15; }
  .wf-h3 { font-size: 18px; }
  .wf-lead { font-size: 17px; line-height: 1.55; }
  .wf-p { font-size: 16px; }
}

/* ---------- 4. The thread: the one visual device ----------
   A 2px accent line, 10px square nodes (filled when done, hollow when next), mono labels in ink, and record chips
   (mono, 1px accent border, white fill) that repeat the same id wherever it appears. */
.wf-node { display: inline-block; flex: none; width: 10px; height: 10px; background: var(--accent); border: 2px solid var(--accent); }
.wf-label { font-family: var(--mono); font-weight: 500; font-size: 12.5px; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.wf-label--accent { color: var(--accent); }
.wf-label--muted { color: var(--muted); }
.wf-chip { display: inline-flex; align-items: center; flex: none; font-family: var(--mono); font-weight: 500; font-size: 12px; line-height: 1;
  letter-spacing: 0.02em; color: var(--accent); background: var(--card); border: 1px solid var(--accent); padding: 4px 6px; white-space: nowrap; }
/* A record id inside a mockup: the same id, marked the same way everywhere (colour is never the only cue). */

/* The one highlighted region of a frame. */
.hl { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- 5. Header, footer, bars ---------- */
.wf-header { position: sticky; top: 0; z-index: 40; background: rgba(243, 245, 247, 0.96); border-bottom: 1px solid var(--rule); }
@supports (backdrop-filter: blur(6px)) { .wf-header { background: rgba(243, 245, 247, 0.88); backdrop-filter: blur(6px); } }
.wf-header-inner { height: var(--header-h); display: flex; align-items: center; gap: 24px; }
.wf-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 19px; letter-spacing: -0.01em; min-height: 44px; }
.wf-brand:hover { color: var(--ink); }
.wf-mark { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 2px solid var(--ink); font-family: var(--mono); font-weight: 500; font-size: 14px; letter-spacing: 0; flex: none; }
.wf-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.wf-nav a:not(.wf-btn) { color: var(--body); text-decoration: none; font-size: 15px; padding: 10px 12px; min-height: 44px; display: inline-flex; align-items: center; }
.wf-nav a:not(.wf-btn):hover, .wf-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; }
.wf-nav .wf-btn { margin-left: 12px; }
.wf-menu { display: none; }
@media (max-width: 899px) {
  .wf-header { position: relative; background: var(--ground); backdrop-filter: none; }
  .wf-header-inner { gap: 8px; }
  .wf-nav { display: none; }
  .wf-brand { font-size: 18px; gap: 8px; margin-right: auto; }   /* the menu keeps to the right on /start/, which has no header button */
  .wf-mark { width: 28px; height: 28px; font-size: 13px; }
  .wf-header-cta { margin-left: auto; }
  .wf-menu { display: block; position: static; }
  .wf-menu > summary { list-style: none; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; border: 1px solid var(--ink); }
  .wf-menu > summary::-webkit-details-marker { display: none; }
  .wf-menu > summary svg { width: 18px; height: 18px; }
  .wf-menu[open] > summary { background: var(--ink); }
  .wf-menu[open] > summary svg path { stroke: var(--on-ink); }
  .wf-menu-panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; min-height: calc(100vh - var(--header-h)); min-height: calc(100dvh - var(--header-h)); background: var(--ground); border-top: 1px solid var(--rule); padding: 8px var(--gutter) 24px; display: grid; align-content: start; }
  .wf-menu-panel a { color: var(--ink); text-decoration: none; font-size: 18px; font-weight: 500; padding: 12px 0; border-bottom: 1px solid var(--rule); min-height: 48px; display: flex; align-items: center; }
}
@media (min-width: 900px) { .wf-header .wf-header-cta { display: none; } }
@media (max-width: 380px) { .wf-header .wf-header-cta { display: none; } .wf-menu { margin-left: auto; } }

.wf-badge { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-weight: 500; font-size: 12.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent); text-decoration: none; min-height: 44px; }
.wf-badge::before { content: ""; width: 8px; height: 8px; background: var(--accent); flex: none; }
.wf-badge:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 4px; }

.wf-footer { border-top: 1px solid var(--rule); padding: 56px 0 40px; font-size: 15px; color: var(--muted); }
.wf-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.wf-footer-h { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); margin-bottom: 12px; }
.wf-footer ul { list-style: none; display: grid; gap: 2px; }
.wf-footer a { color: var(--body); text-decoration: none; display: inline-flex; min-height: 32px; align-items: center; }
.wf-footer a:hover { color: var(--ink); text-decoration: underline; }
.wf-footer-brand p { margin-top: 14px; max-width: 26em; }
.wf-footer-legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 13.5px; }
.wf-footer-legal p { max-width: 64em; }
@media (max-width: 639px) {
  .wf-footer { padding: 32px 0 96px; }
  .wf-footer-grid { grid-template-columns: 1fr 1fr; }
  .wf-footer-brand { grid-column: 1 / -1; }
}

/* The phone's sign-up bar: appears once the hero's buttons scroll away, hides over the final band. */
.wf-ctabar { display: none; }
@media (max-width: 639px) {
  .wf-ctabar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom));
    background: var(--ground); border-top: 1px solid var(--rule); transform: translateY(110%); visibility: hidden; }
  .wf-ctabar.is-on { transform: none; visibility: visible; }
  .wf-ctabar .wf-btn { width: 100%; min-height: 48px; }
}

/* ---------- 6. Buttons ---------- */
.wf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border: 1px solid var(--ink);
  background: var(--ink); color: var(--on-ink); font: 500 16px/1.2 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; border-radius: 0; }
.wf-btn:hover { background: #000; color: #fff; }
.wf-btn--ghost { background: transparent; color: var(--ink); }
.wf-btn--ghost:hover { background: var(--card); color: var(--ink); }
.wf-btn--sm { min-height: 40px; padding: 0 14px; font-size: 14.5px; }
.wf-btn--lg { min-height: 56px; padding: 0 28px; font-size: 17px; }
.wf-btn--light { background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); }
.wf-btn--light:hover { background: #fff; color: var(--ink); }
.wf-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 639px) {
  .wf-header .wf-btn--sm { min-height: 44px; padding: 0 12px; font-size: 13.5px; }
}

/* ---------- 7. Home ---------- */
/* 7.1 Hero */
.wf-hero { padding: 8px 0 64px; }  /* v2: 40px of top padding went to the role row (B1) */
.wf-hero-stack { display: flex; flex-direction: column; }
.wf-hero-copy { display: grid; gap: 22px; justify-items: start; }
.wf-hero .wf-h1 { font-size: 60px; max-width: none; }
.wf-hero .wf-h1 span { display: block; }
.wf-sub { font-size: 20px; line-height: 1.5; color: var(--body); max-width: 37em; text-wrap: pretty; }
.wf-assure { font-size: 15px; color: var(--muted); }
/* The role path (B1): For: Support · QA · Product · Engineering, each a link into its tab */
.wf-roles-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; margin-top: 16px; }
.wf-roles-row .wf-label { margin-right: 8px; }
.wf-roles-row a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; font-size: 16px; font-weight: 500; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--rule); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.wf-roles-row a:hover { text-decoration-color: var(--accent); color: var(--ink); }
.wf-roles-row > span[aria-hidden] { color: var(--muted); }
.wf-relay-phone { display: none; }
.wf-hero-copy .wf-actions { margin-top: 6px; }

/* 7.2 The relay: four product screens on one thread */
.wf-relay { margin-top: 24px; }
.wf-relay-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.wf-relay-list { list-style: none; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch; counter-reset: wf-relay; }
.wf-relay-list::before { content: ""; position: absolute; left: 5px; right: 8px; top: 11px; height: 2px; background: var(--accent); transform-origin: left center; }
.wf-relay-step { display: flex; flex-direction: column; min-width: 0; counter-increment: wf-relay; }
.wf-relay-head { position: relative; z-index: 1; height: 24px; display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.wf-relay-head .wf-label { background: var(--ground); padding: 0 8px 0 2px; white-space: nowrap; font-size: 13px; }
.wf-relay-head .wf-label b { font-weight: 500; color: var(--accent); }
.wf-relay-head .wf-label::before { content: counter(wf-relay, decimal-leading-zero) "\00a0\00a0"; color: var(--muted); }
.wf-relay .wf-frame { flex: 1; }
@media (max-width: 1199px) and (min-width: 1024px) {
  .wf-hero .wf-h1 { font-size: 54px; }
  .wf-relay-list { gap: 16px; }
  .wf-relay-head .wf-label { font-size: 12px; padding-right: 4px; letter-spacing: 0.06em; }
}
@media (max-width: 1023px) and (min-width: 768px) {
  .wf-relay-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .wf-relay-list::before { display: none; }
  .wf-relay-head { border-bottom: 2px solid var(--accent); padding-bottom: 6px; height: 32px; }
}
/* Phones (B3): the button full width, "See how it works" as a text link, the proof line on one row, the four verbs as
   36px list rows (no chips), then the role row, then the GitHub card. */
@media (max-width: 767px) {
  .wf-hero-stack > .wf-hero-copy { order: 1; }
  .wf-hero-stack > .wf-relay { order: 2; }
  .wf-hero-stack > .wf-roles-row { order: 3; }
  .wf-hero-stack > .wf-relay-phone { order: 4; display: grid; gap: 8px; margin-top: 14px; }
  .wf-relay-phone .wf-frame { padding: 6px; max-height: 240px; overflow: hidden; }
  .wf-relay-phone .mk--hero .mkg-title { font-size: 15px; line-height: 20px; }
  .wf-relay-cap { display: none; }
  .wf-relay-list { grid-template-columns: 1fr; gap: 0; }
  .wf-relay-list::before { left: 5px; right: auto; top: 18px; bottom: 18px; width: 2px; height: auto; transform-origin: center top; }
  .wf-relay-head { height: 36px; margin: 0; }
  .wf-relay .wf-frame { display: none; }
  .wf-roles-row { margin-top: 4px; }
}
@media (max-width: 639px) {
  .wf-hero { padding: 4px 0 40px; }
  .wf-hero-copy { gap: 12px; }
  .wf-hero .wf-h1 { font-size: 34px; }
  .wf-sub { font-size: 17px; line-height: 1.5; }
  .wf-hero-copy .wf-actions { width: 100%; margin-top: 4px; gap: 0; flex-direction: column; align-items: flex-start; }
  .wf-hero-copy .wf-actions .wf-cta { width: 100%; min-height: 50px; }
  .wf-hero-copy .wf-actions .wf-hero-more { background: none; border: 0; padding: 0; min-height: 44px; color: var(--accent); font-size: 16px;
    text-decoration: underline; text-underline-offset: 4px; justify-content: flex-start; }
  .wf-hero-copy .wf-actions .wf-hero-more::after { content: "→"; text-decoration: none; margin-left: 6px; display: inline-block; }
  .wf-assure { font-size: 12.5px; white-space: nowrap; letter-spacing: -0.01em; margin-top: -2px; }
  .wf-relay { margin-top: 18px; }
  .wf-relay-head .wf-label { font-size: 13px; }
  .wf-roles-row a { font-size: 15px; padding: 0 4px; }
}
@media (max-width: 379px) { .wf-assure { white-space: normal; }
  /* 360: the role row stays on one line */
  .wf-roles-row { gap: 0 2px; } .wf-roles-row .wf-label { margin-right: 4px; } .wf-roles-row a { font-size: 14.5px; padding: 0 3px; } }

/* Frames: the Casefile way. White card, hairline border, square, no shadow. Vendor colours only inside. */
.wf-frame { background: var(--card); border: 1px solid var(--rule); padding: 10px; min-width: 0; position: relative; }
.wf-frame > .mk { width: 100%; }
.wf-fig-note { margin-top: 10px; font-size: 14px; color: var(--muted); }

/* 7.3 The step-through: one bug, start to finish */
.wf-story-head { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 32px; align-items: end; margin-bottom: 48px; }
.wf-story-title { display: grid; gap: 12px; }
.wf-story-title .wf-h2 { max-width: 17em; }
.wf-story-head > .wf-label { justify-self: end; text-align: right; max-width: 22em; }
.wf-story { list-style: none; display: grid; gap: 40px; counter-reset: wf-step; }
.wf-step { position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px 48px; align-items: start; counter-increment: wf-step; }
.wf-step::before { content: ""; position: absolute; left: 4px; top: 14px; bottom: -40px; width: 2px; background: var(--accent); }
.wf-step:last-child::before { display: none; }
.wf-step-cap { position: relative; padding-left: 34px; display: grid; gap: 8px; }
.wf-step-cap > .wf-node { position: absolute; left: 0; top: 9px; }
.wf-step-cap .wf-label { color: var(--accent); }
.wf-step-cap .wf-label::before { content: counter(wf-step, decimal-leading-zero) "\00a0\00a0"; color: var(--ink); }
.wf-step--close .wf-step-cap .wf-label::before { content: ""; }
.wf-step-cap .wf-p { font-size: 16.5px; }
.wf-step-cta { display: grid; gap: 14px; justify-items: start; margin-top: 16px; padding-top: 18px; border-top: 1px solid var(--rule); }
.wf-step-cta p { font-weight: 600; font-size: 18px; line-height: 1.35; color: var(--ink); }
@media (min-width: 1024px) and (min-height: 700px) {
  .wf-step-cap { position: sticky; top: calc(var(--header-h) + 40px); }
}
@media (max-width: 1023px) {
  .wf-story-head { grid-template-columns: 1fr; gap: 12px; }
  .wf-story-head > .wf-label { justify-self: start; text-align: left; }
  .wf-step { grid-template-columns: 1fr; gap: 16px; }
  .wf-step > .wf-frame { margin-left: 34px; }
  .wf-story { gap: 48px; }
  .wf-step::before { bottom: -48px; }
}
@media (max-width: 639px) {
  .wf-story-head { margin-bottom: 28px; }
  .wf-step > .wf-frame { margin-left: 22px; padding: 6px; }
  .wf-step-cap { padding-left: 22px; gap: 6px; }
  .wf-story { gap: 32px; }
  .wf-step::before { bottom: -32px; }
}

/* 7.4 Every role, one record: WAI-ARIA tabs. Without JS every panel shows, stacked. */
.wf-tablist { display: none; }
.js .wf-tablist { display: flex; border-bottom: 1px solid var(--rule); margin-bottom: 32px; overflow-x: auto; scrollbar-width: none; }
.wf-tab { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 0 22px; min-height: 52px;
  font: 500 17px/1 var(--sans); color: var(--muted); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; }
.wf-tab:hover { color: var(--ink); }
.wf-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.wf-tab .wf-node { width: 8px; height: 8px; border-width: 1.5px; background: var(--card); }
.wf-tab[aria-selected="true"] .wf-node { background: var(--accent); }
.wf-tabpanel { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; }
.wf-tabpanel + .wf-tabpanel { margin-top: 48px; }
.js .wf-tabpanel + .wf-tabpanel { margin-top: 0; }
.wf-tabpanel[hidden] { display: none; }
.wf-tabpanel:focus-visible { outline-offset: 8px; }
.wf-tabpanel-copy { display: grid; gap: 18px; align-content: start; }
.wf-ticks { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.wf-ticks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 18px; line-height: 1.45; color: var(--ink); }
.wf-ticks li::before { content: ""; width: 10px; height: 10px; margin-top: 8px; background: var(--accent); }
@media (max-width: 1023px) {
  .wf-tabpanel { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 639px) {
  .js .wf-tablist { margin: 0 calc(-1 * var(--gutter)) 24px; padding: 0 var(--gutter); }
  .wf-tab { padding: 0 12px; font-size: 15.5px; min-height: 48px; gap: 8px; }
  .wf-ticks li { font-size: 16.5px; padding: 11px 0; }
}

/* 7.5 Support desk: the swimlane */
.wf-desk-head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 16px 56px; align-items: end; margin-bottom: 36px; }
.wf-desk-head > div { display: grid; gap: 14px; justify-items: start; }
.wf-tag { display: inline-flex; align-items: center; font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); border: 1px solid var(--ink); padding: 5px 8px; }
.wf-lanes { --lane-label: 220px; position: relative; background: var(--card); border: 1px solid var(--rule); }
.wf-lanes-grid { position: relative; display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(3, 72px) 104px; }  /* the team lane is taller: it carries the bracket */
.wf-lane { grid-column: 1; border-bottom: 1px solid var(--rule); display: flex; align-items: center; }
.wf-lane:nth-child(4) { border-bottom: 0; }
.wf-lane:nth-child(odd) { background: #FAFBFC; }
.wf-lane-name { width: var(--lane-label); padding: 0 16px; font-family: var(--mono); font-weight: 500; font-size: 12px; line-height: 1.35; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); }
.wf-lane-name b { display: block; font-weight: 500; font-size: 12.5px; color: var(--ink); }
.wf-lane-steps { list-style: none; position: absolute; top: 0; bottom: 0; left: var(--lane-label); right: 0; z-index: 2; display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(3, 72px) 104px; }
.wf-lane-step { grid-column: var(--c); grid-row: var(--r); align-self: center; justify-self: center; position: relative;
  width: calc(100% - 20px); max-width: 196px; background: var(--card); border: 1px solid var(--ink); padding: 6px 10px;
  font-size: 14px; line-height: 1.3; color: var(--ink); font-weight: 500; text-align: left; }
.wf-lane-steps { counter-reset: wf-lane; }
.wf-lane-step { counter-increment: wf-lane; }
.wf-lane-step .wf-n { display: block; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; color: var(--accent); margin-bottom: 1px; }
.wf-lane-step .wf-n::before { content: counter(wf-lane, decimal-leading-zero); }
.wf-lane-step .wf-who::before { content: " · "; }
.wf-lane-step--you { border-color: var(--accent); border-width: 2px; padding: 5px 9px; align-self: start; margin-top: 10px; }
.wf-lanes-path { position: absolute; top: 0; bottom: 0; left: var(--lane-label); width: calc(100% - var(--lane-label)); height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.wf-lanes-path path { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.wf-lanes-bracket { position: absolute; left: var(--lane-label); right: 0; bottom: 6px; z-index: 3; margin: 0; padding: 0 10px; height: 14px; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
.wf-lanes-bracket::before { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 7px; border: 1.5px solid var(--accent); border-top: 0; }
.wf-lanes-bracket span { position: relative; z-index: 1; transform: translateY(5px); background: #fff; padding: 0 8px; font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: 0.04em; color: var(--accent); white-space: nowrap; }
.wf-lanes-grid { padding-bottom: 0; }
.wf-lanes-foot { display: grid; gap: 4px; padding: 12px 16px; border-top: 1px solid var(--rule); font-size: 14.5px; color: var(--body); }
.wf-lanes-foot p { margin: 0; }
.wf-lanes-foot b { font-weight: 600; color: var(--ink); }
.wf-lanes-foot .wf-branch { display: inline-flex; align-items: center; gap: 8px; }
.wf-lanes-foot .wf-branch::before { content: ""; width: 18px; height: 2px; background: var(--accent); flex: none; }
.wf-lanes-foot .wf-branch b { white-space: nowrap; flex: none; }
@media (max-width: 1023px) { .wf-desk-head { grid-template-columns: 1fr; } }
/* 1024–1279: a narrower label column, and the lanes scaled up together (the path's viewBox scales with them) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .wf-lanes { --lane-label: 132px; }
  .wf-lanes-grid, .wf-lane-steps { grid-template-rows: repeat(3, 80px) 116px; }
  .wf-lane-step { font-size: 13px; padding: 5px 8px; width: calc(100% - 12px); }
  .wf-lane-step--you { padding: 4px 7px; }
}
/* below 1024 the lanes would squeeze each step into a column too narrow to read: they become a numbered list */
@media (max-width: 1023px) {
  .wf-lanes-grid { display: block; padding: 4px 14px; }
  .wf-lane { display: none; }
  .wf-lane-steps { position: relative; inset: auto; left: auto; display: grid; grid-template-columns: 1fr; grid-template-rows: none; gap: 0; }
  .wf-lane-steps::before { content: ""; position: absolute; left: 4px; top: 22px; bottom: 22px; width: 2px; background: var(--accent); }
  .wf-lane-step { grid-column: auto; grid-row: auto; max-width: none; width: auto; margin: 0; border: 0; border-bottom: 1px solid var(--rule); padding: 11px 0 11px 26px; font-size: 15px; display: grid; gap: 2px; justify-self: stretch; }
  .wf-lane-step--you { border: 0; border-bottom: 1px solid var(--rule); padding: 11px 0 11px 26px; }
  .wf-lane-step:last-child { border-bottom: 0; }
  .wf-lane-step::before { content: ""; position: absolute; left: 0; top: 16px; width: 10px; height: 10px; background: var(--accent); }
  .wf-lane-step .wf-n { margin: 0; }
  .wf-lane-step .wf-who { display: inline; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); font-weight: 500; }
  .wf-lanes-path { display: none; }
  .wf-lanes-bracket { position: static; height: auto; display: block; padding: 8px 0 12px 26px; }
  .wf-lanes-bracket::before { display: none; }
  .wf-lanes-bracket span { transform: none; background: none; padding: 0; white-space: normal; }
  .wf-lanes-bracket span { line-height: 1.5; }
  .wf-lanes-bracket span::before { content: "Your team \00b7  "; color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.06em; }   /* the bracket's lane, named in the list */
  .wf-lane-step, .wf-lane-step--you { background: transparent; }   /* the list's thread line shows between the nodes */
  .wf-lanes-foot { padding: 12px 14px; font-size: 14px; }
}
@media (min-width: 1024px) { .wf-lane-step .wf-who { display: none; } }

/* 7.6 One understanding: sources → Runbook → answer → the verdict router */
.wf-understand { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 3fr) minmax(0, 2.2fr) minmax(0, 4.6fr); gap: 0; align-items: center; }
.wf-u-col { position: relative; display: grid; gap: 8px; }
.wf-u-col + .wf-u-col { margin-left: 40px; }
.wf-u-col + .wf-u-col::before { content: ""; position: absolute; left: -32px; top: 50%; width: 24px; height: 2px; background: var(--ink); }
.wf-u-col + .wf-u-col::after { content: ""; position: absolute; left: -14px; top: calc(50% - 4px); border: 5px solid transparent; border-left: 7px solid var(--ink); border-right: 0; }
.wf-src { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--rule); padding: 10px 12px; font-size: 15px; font-weight: 500; color: var(--ink); }
.wf-src svg { width: 20px; height: 20px; flex: none; }
.wf-src small { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted-2); }
.wf-u-answer { background: var(--card); border: 1px solid var(--ink); padding: 14px; display: grid; gap: 6px; }
.wf-u-answer b { font-size: 16px; font-weight: 600; }
.wf-router { list-style: none; display: grid; gap: 8px; position: relative; padding-left: 26px; }
.wf-router::before { content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 2px; background: var(--accent); }
.wf-router li { position: relative; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr); align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--rule); padding: 9px 12px; font-size: 15px; line-height: 1.35; }
.wf-router li::before { content: ""; position: absolute; left: -26px; top: 50%; width: 26px; height: 2px; background: var(--accent); }
.wf-router .v { font-family: var(--mono); font-weight: 500; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.wf-router .to { color: var(--ink); font-weight: 500; }
.wf-router .to small { display: block; font-weight: 400; color: var(--muted-2); font-size: 13px; }
.wf-u-cap { margin-bottom: 8px; }
.wf-u-lead { max-width: 62ch; margin: -8px 0 32px; }
.wf-u-note { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; }
.wf-u-note p { font-size: 18px; color: var(--ink); font-weight: 500; }
@media (max-width: 1023px) {
  .wf-understand { grid-template-columns: 1fr; gap: 0; }
  .wf-u-cap { margin-bottom: 6px; }
  .wf-u-col + .wf-u-col { margin: 36px 0 0; }
  .wf-u-col + .wf-u-col::before { left: 24px; top: -28px; width: 2px; height: 20px; }
  .wf-u-col + .wf-u-col::after { left: 20px; top: -12px; border: 5px solid transparent; border-top: 7px solid var(--ink); border-bottom: 0; }
  .wf-u-sources { grid-template-columns: 1fr 1fr; }
}

/* 7.7 Control: the trust ladder and the security lines */
.wf-control { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; }
.wf-ladder { list-style: none; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.wf-ladder::before { content: ""; position: absolute; left: 5px; right: 12%; top: 5px; height: 2px; background: var(--accent); }
.wf-ladder li { position: relative; padding: 26px 16px 0 0; display: grid; gap: 4px; align-content: start; }
.wf-ladder li > .wf-node { position: absolute; left: 0; top: 0; }
.wf-ladder .wf-label { color: var(--accent); font-size: 12px; }
.wf-ladder b { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.wf-ladder span:not(.wf-label):not(.wf-node) { font-size: 15px; line-height: 1.45; color: var(--body); }
.wf-ladder-rule { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 16px; color: var(--body); }
.wf-seclist { list-style: none; display: grid; border-top: 1px solid var(--rule); }
.wf-seclist li { display: grid; grid-template-columns: 24px 1fr; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 17px; font-weight: 500; color: var(--ink); line-height: 1.35; }
.wf-seclist svg { width: 24px; height: 24px; }
.wf-control .wf-more { margin-top: 14px; }
@media (max-width: 1023px) {
  .wf-control { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 639px) {
  .wf-ladder { grid-template-columns: 1fr; }
  .wf-ladder::before { left: 4px; right: auto; top: 6px; bottom: 30px; width: 2px; height: auto; }
  .wf-ladder li { padding: 0 0 18px 30px; grid-template-columns: auto 1fr; column-gap: 12px; align-items: baseline; }
  .wf-ladder li .wf-label { grid-column: 1 / -1; }
  .wf-ladder b { font-size: 18px; }
  .wf-ladder span:not(.wf-label):not(.wf-node) { font-size: 15px; }
  .wf-ladder li > .wf-node { top: 4px; }
  .wf-seclist li { font-size: 16px; padding: 10px 0; }
}

/* 7.8 Questions: <details>, keyboard and screen-reader native */
.wf-faq { border-top: 1px solid var(--ink); }
.wf-faq details { border-bottom: 1px solid var(--rule); }
.wf-faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 24px; gap: 16px; align-items: center; padding: 18px 0; min-height: 56px;
  font-size: 19px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.wf-faq summary::-webkit-details-marker { display: none; }
.wf-faq summary::after { content: ""; width: 14px; height: 14px; justify-self: end; margin-right: 4px;
  background: linear-gradient(var(--ink), var(--ink)) center / 14px 2px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 2px 14px no-repeat; }
.wf-faq details[open] > summary::after { background: linear-gradient(var(--ink), var(--ink)) center / 14px 2px no-repeat; }
.wf-faq summary:hover { color: var(--accent-hover); }
.wf-faq .wf-answer { padding: 0 40px 22px 0; font-size: 17px; line-height: 1.6; color: var(--body); max-width: 44em; display: grid; gap: 10px; }
.wf-faq-group + .wf-faq-group { margin-top: 56px; }
.wf-faq-group > h2 { margin-bottom: 16px; }
.wf-questions { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; }
.wf-questions .wf-section-head { margin: 0; align-content: start; }
@media (max-width: 1023px) { .wf-questions { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 639px) {
  .wf-faq summary { font-size: 17px; padding: 14px 0; }
  .wf-faq .wf-answer { font-size: 16px; padding-right: 0; }
}

/* 7.9 The final band, which ends every page */
.wf-band { background: var(--ink); color: var(--on-ink); padding: 80px 0; }
.wf-band .wf-h2 { color: var(--on-ink); max-width: 14em; }
.wf-band-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 32px 56px; align-items: start; }
.wf-band-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.wf-band-lists h3 { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-ink-muted); margin-bottom: 10px; }
.wf-band-lists ul { list-style: none; display: grid; gap: 0; border-top: 1px solid #374151; }
.wf-band-lists li { padding: 10px 0; border-bottom: 1px solid #374151; font-size: 16px; line-height: 1.4; color: var(--on-ink); }
.wf-band-foot { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.wf-band-foot p { font-size: 16px; color: var(--on-ink-muted); max-width: 34em; }
.wf-band .wf-btn--light { min-height: 56px; }
.wf-band :focus-visible { outline-color: #F3B08F; }
.wf-band--compact { padding: 64px 0; }
.wf-band--compact .wf-band-grid { align-items: center; }
.wf-band--compact .wf-band-cta { justify-self: end; display: grid; gap: 12px; justify-items: start; }
.wf-band--compact .wf-band-cta p { color: var(--on-ink-muted); font-size: 15px; }
@media (max-width: 1023px) {
  .wf-band-grid { grid-template-columns: 1fr; }
  .wf-band--compact .wf-band-cta { justify-self: start; }
}
@media (max-width: 639px) {
  .wf-band { padding: 48px 0; }
  .wf-band-lists { grid-template-columns: 1fr; gap: 20px; }
  .wf-band .wf-btn--light { width: 100%; }
}

/* ---------- 8. Inner pages ---------- */
.wf-pagehead { padding: 56px 0 56px; }
.wf-pagehead-inner { display: grid; gap: 20px; justify-items: start; max-width: 880px; }
.wf-pagehead .wf-h1 { font-size: 56px; }
.wf-pagehead--split .wf-pagehead-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.wf-pagehead--split .wf-pagehead-inner { padding-top: 24px; }
.wf-pagehead--split .wf-h1 { font-size: 52px; }
.wf-headfig { display: grid; gap: 12px; min-width: 0; }
.wf-pagenote { margin-top: 28px; }
@media (max-width: 1023px) { .wf-pagehead--split .wf-pagehead-grid { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 639px) {
  .wf-pagehead { padding: 28px 0 36px; }
  .wf-pagehead-inner { gap: 14px; }
  .wf-pagehead .wf-h1, .wf-pagehead--split .wf-h1 { font-size: 32px; }
}
/* The loop map at the top of How it works */
.wf-loopmap { list-style: none; position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
.wf-loopmap::before { content: ""; position: absolute; left: 5px; right: 5px; top: 5px; height: 2px; background: var(--accent); }
.wf-loopmap a { position: relative; display: grid; gap: 4px; padding-top: 22px; text-decoration: none; color: var(--ink); min-height: 44px; }
.wf-loopmap a::before { content: ""; position: absolute; left: 0; top: 0; width: 12px; height: 12px; background: var(--accent); }
.wf-loopmap b { font-weight: 600; font-size: 16px; }
.wf-loopmap span { font-size: 14px; color: var(--muted); line-height: 1.35; }
.wf-loopmap a:hover b { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1023px) { .wf-loopmap { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; } .wf-loopmap::before { display: none; } }
@media (max-width: 639px) { .wf-loopmap { grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; } }

/* Chapters: an H2, at most two sentences, and the visual that does the work. */
.wf-chapter { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; padding: 80px 0; border-top: 1px solid var(--rule); align-items: start; }
.wf-chapter--wide { grid-template-columns: 1fr; gap: 32px; }
.wf-chapter-copy { display: grid; gap: 16px; align-content: start; justify-items: start; }
@media (min-width: 1024px) and (min-height: 700px) { .wf-chapter-copy--sticky { position: sticky; top: calc(var(--header-h) + 32px); } }
.wf-chapter .wf-h2 { font-size: 34px; }
@media (max-width: 639px) { .wf-chapter .wf-h2 { font-size: 26px; } }
.wf-kicker { font-family: var(--mono); font-weight: 500; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
@media (max-width: 1023px) { .wf-chapter { grid-template-columns: 1fr; gap: 28px; padding: 64px 0; } }
@media (max-width: 639px) { .wf-chapter { padding: 48px 0; gap: 22px; } }

/* Generic diagram parts */

.wf-box { background: var(--card); border: 1px solid var(--rule); padding: 16px; display: grid; gap: 6px; align-content: start; }
.wf-box--ink { border-color: var(--ink); }
.wf-box--accent { border-color: var(--accent); }
.wf-box b, .wf-box strong { font-weight: 600; color: var(--ink); font-size: 16px; line-height: 1.35; }
.wf-box p, .wf-box span.d { font-size: 15px; line-height: 1.5; color: var(--body); }
.wf-box .wf-label { font-size: 12px; }
/* Four sources */
.wf-sources { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.wf-sources .wf-box { min-height: 132px; }
.wf-sources svg { width: 24px; height: 24px; margin-bottom: 6px; }
.wf-sources-out { margin-top: 12px; display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--body); }
.wf-sources-out::before { content: ""; height: 2px; flex: 1; background: var(--accent); }
@media (max-width: 1023px) { .wf-sources { grid-template-columns: 1fr 1fr; } }
/* Verdicts, full */
.wf-verdicts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wf-verdicts .wf-box { border-top: 3px solid var(--ink); }
.wf-verdicts .wf-box:first-child { border-top-color: var(--accent); }
@media (max-width: 639px) { .wf-verdicts { grid-template-columns: 1fr; } }
/* The evidence gate */
.wf-gate { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 2fr) auto minmax(0, 1fr); gap: 12px; align-items: center; }
.wf-gate-checks { list-style: none; display: grid; gap: 8px; }
.wf-gate-checks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; background: var(--card); border: 1px solid var(--rule); padding: 11px 12px; font-size: 15.5px; line-height: 1.4; color: var(--ink); }
.wf-gate-checks svg { width: 20px; height: 20px; margin-top: 1px; }
.wf-arrow { display: block; justify-self: center; width: 22px; height: 2px; background: var(--ink); position: relative; }
.wf-arrow::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left: 7px solid var(--ink); border-right: 0; }
.wf-gate-out { display: grid; gap: 8px; }
.wf-gate-out .wf-box { padding: 12px; }
.wf-gate-out .drop { border-style: dashed; border-color: var(--muted-2); }
@media (max-width: 1023px) { .wf-gate { grid-template-columns: 1fr; } .wf-gate .wf-arrow { transform: rotate(90deg); justify-self: start; margin: 12px 0 12px 14px; } }
/* Pipelines: proof of fix, the knowledge base */
.wf-pipe { list-style: none; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 0; position: relative; }
.wf-pipe > li { position: relative; display: grid; gap: 6px; align-content: start; background: var(--card); border: 1px solid var(--rule); padding: 14px; margin-right: 22px; }
.wf-pipe > li:last-child { margin-right: 0; }
.wf-pipe > li:not(:last-child)::after { content: ""; position: absolute; right: -22px; top: 30px; width: 22px; height: 2px; background: var(--accent); }
.wf-pipe > li.is-result { border-color: #1F6F43; background: #F2F8F4; }
.wf-pipe b { font-size: 15.5px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.wf-pipe p { font-size: 14px; line-height: 1.45; color: var(--body); }
.wf-pipe .big { font-size: 26px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
@media (max-width: 1023px) {
  .wf-pipe { grid-template-columns: 1fr; }
  .wf-pipe > li { margin: 0 0 18px 0; }
  .wf-pipe > li:not(:last-child)::after { right: auto; left: 20px; top: auto; bottom: -18px; width: 2px; height: 18px; }
  .wf-pipe > li:last-child { margin: 0; }
}
.wf-rules { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.wf-rules li { border-top: 2px solid var(--ink); padding-top: 10px; display: grid; gap: 2px; font-size: 14.5px; line-height: 1.4; color: var(--body); }
.wf-rules b { font-weight: 600; color: var(--ink); }
@media (max-width: 639px) { .wf-rules { grid-template-columns: 1fr; } }
/* Three ways in (Slack) and strike list */
.wf-ways { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.wf-ways li { background: var(--card); border: 1px solid var(--rule); padding: 12px 14px; display: grid; gap: 2px; }
.wf-ways b { font-family: var(--mono); font-weight: 500; font-size: 14px; color: var(--ink); }
.wf-ways span { font-size: 14px; color: var(--muted-2); }
@media (max-width: 639px) { .wf-ways { grid-template-columns: 1fr; } }
.wf-never { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule); }
.wf-never li { padding: 16px 0; border-bottom: 1px solid var(--rule); font-size: 18px; color: var(--muted); display: flex; align-items: center; gap: 12px; }
.wf-never li s { text-decoration-thickness: 2px; text-decoration-color: var(--accent); }
.wf-never li::before { content: "✕"; font-family: var(--mono); color: var(--accent); font-size: 14px; }
@media (max-width: 639px) { .wf-never { grid-template-columns: 1fr 1fr; } .wf-never li { font-size: 16px; padding: 12px 0; } }
/* Feedback loop (when it's wrong) */
.wf-flow { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; counter-reset: wf-flow; }
.wf-flow li { position: relative; padding: 0 20px 0 0; display: grid; gap: 6px; counter-increment: wf-flow; align-content: start; }
.wf-flow li::before { content: counter(wf-flow, decimal-leading-zero); font-family: var(--mono); font-weight: 500; font-size: 12.5px; color: var(--accent); border-top: 2px solid var(--accent); padding-top: 10px; }
.wf-flow b { font-weight: 600; font-size: 16.5px; line-height: 1.35; color: var(--ink); }
.wf-flow span { font-size: 15px; line-height: 1.5; color: var(--body); }
@media (max-width: 639px) { .wf-flow { grid-template-columns: 1fr; gap: 18px; } }
/* Statements (Security) */
.wf-statements { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.wf-statements li { background: var(--card); border: 1px solid var(--rule); border-top: 3px solid var(--ink); padding: 22px; display: grid; gap: 10px; align-content: start; }
.wf-statements b { font-size: 21px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.wf-statements p { font-size: 15.5px; line-height: 1.5; color: var(--body); }
.wf-statements-note { margin-top: 16px; display: flex; gap: 12px; align-items: center; font-size: 16px; color: var(--ink); }
.wf-statements-note .wf-chip { font-size: 12px; }
@media (max-width: 1023px) { .wf-statements { grid-template-columns: 1fr; } }
/* Credential map */
.wf-credmap { display: grid; grid-template-columns: minmax(0, 1fr) 180px minmax(0, 1fr); gap: 16px 0; align-items: center; }
.wf-cred-col { list-style: none; display: grid; gap: 12px; }
.wf-cred { position: relative; background: var(--card); border: 1px solid var(--rule); padding: 12px 14px; display: grid; gap: 4px; }
.wf-cred b { font-size: 15.5px; font-weight: 600; color: var(--ink); }
.wf-cred .scope { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.wf-cred .worst { font-size: 14px; color: var(--body); line-height: 1.45; }
.wf-cred .worst i { font-style: normal; color: var(--muted-2); }
.wf-cred-col--l .wf-cred::after, .wf-cred-col--r .wf-cred::after { content: ""; position: absolute; top: 50%; width: 32px; height: 2px; background: var(--rule); }
.wf-cred-col--l .wf-cred::after { right: -33px; }
.wf-cred-col--r .wf-cred::after { left: -33px; }
.wf-cred--never { border-style: dashed; border-color: var(--accent); }
.wf-cred-core { margin: 0 32px; align-self: stretch; display: grid; place-items: center; text-align: center; background: var(--ink); color: var(--on-ink); padding: 16px 12px; }
.wf-cred-core b { font-size: 16px; font-weight: 600; display: block; }
.wf-cred-core span { font-size: 13px; color: var(--on-ink-muted); display: block; margin-top: 6px; line-height: 1.4; }
@media (max-width: 899px) {
  .wf-credmap { grid-template-columns: 1fr; }
  .wf-cred-core { margin: 0; order: -1; }
  .wf-cred-col--l .wf-cred::after, .wf-cred-col--r .wf-cred::after { display: none; }
}
/* Isolation */
.wf-iso { border: 2px solid var(--ink); background: var(--card); padding: 18px; position: relative; display: grid; gap: 14px; }
.wf-iso-title { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wf-iso-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.wf-iso-vm { border: 1px dashed var(--muted-2); padding: 12px; display: grid; gap: 4px; font-size: 14.5px; color: var(--body); }
.wf-iso-vm b { font-size: 15px; color: var(--ink); font-weight: 600; }
.wf-iso-edge { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.wf-iso-edge > div { border-top: 2px solid var(--accent); padding-top: 8px; font-size: 14.5px; line-height: 1.45; color: var(--body); }
.wf-iso-edge b { display: block; color: var(--ink); font-weight: 600; font-size: 15px; }
.wf-iso-out { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 899px) { .wf-iso-row, .wf-iso-edge, .wf-iso-out { grid-template-columns: 1fr; } }
/* Offboarding timeline */
.wf-timeline { list-style: none; position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.wf-timeline::before { content: ""; position: absolute; left: 5px; right: 5px; top: 5px; height: 2px; background: var(--accent); }
.wf-timeline li { position: relative; padding-top: 26px; display: grid; gap: 6px; align-content: start; }
.wf-timeline li::before { content: ""; position: absolute; left: 0; top: 0; width: 12px; height: 12px; background: var(--accent); }
.wf-timeline b { font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.wf-timeline span { font-size: 15px; line-height: 1.45; color: var(--body); }
@media (max-width: 899px) {
  .wf-timeline { grid-template-columns: 1fr; gap: 0; }
  .wf-timeline::before { top: 6px; bottom: 6px; left: 5px; right: auto; width: 2px; height: auto; }
  .wf-timeline li { padding: 0 0 18px 28px; }
}
/* Tables (Security's retention) */
.wf-table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--rule); font-size: 15.5px; }
.wf-table th, .wf-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--rule); vertical-align: top; line-height: 1.45; }
.wf-table thead th { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--ink); background: #FAFBFC; }
.wf-table tbody th { font-weight: 600; color: var(--ink); width: 44%; }
.wf-table td { color: var(--body); }
.wf-table tr:last-child th, .wf-table tr:last-child td { border-bottom: 0; }
@media (max-width: 639px) { .wf-table th, .wf-table td { padding: 10px 12px; font-size: 14.5px; } .wf-table tbody th { width: 46%; } }
/* Lists that stay lists */
.wf-list { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.wf-list li { padding: 12px 0 12px 22px; border-bottom: 1px solid var(--rule); font-size: 16px; line-height: 1.5; color: var(--body); position: relative; }
.wf-list li::before { content: ""; position: absolute; left: 0; top: 21px; width: 8px; height: 2px; background: var(--ink); }
.wf-list b { color: var(--ink); font-weight: 600; }
/* Tiers (support desk) */
.wf-tiers { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.wf-tiers li { background: var(--card); border: 1px solid var(--rule); border-top: 3px solid var(--ink); padding: 16px; display: grid; gap: 8px; align-content: start; }
.wf-tiers li.is-wf { border-top-color: var(--accent); }
.wf-tiers b { font-size: 17px; font-weight: 600; color: var(--ink); }
.wf-tiers ul { list-style: none; display: grid; gap: 4px; }
.wf-tiers ul li { all: unset; display: block; font-size: 14.5px; line-height: 1.45; color: var(--body); padding-left: 14px; position: relative; }
.wf-tiers ul li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 2px; background: var(--ink); }
@media (max-width: 899px) { .wf-tiers { grid-template-columns: 1fr; } }
/* The scope boundary (support desk) */
.wf-scope { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.3fr); gap: 16px; align-items: center; }
.wf-scope-table { background: var(--card); border: 1px solid var(--rule); font-family: var(--mono); font-size: 13px; }
.wf-scope-table div { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--rule); color: var(--muted-2); }
.wf-scope-table div:last-child { border-bottom: 0; }
.wf-scope-table div.is-in { color: var(--ink); background: #FBF3EE; box-shadow: inset 3px 0 0 var(--accent); }
.wf-scope-table div span:last-child { font-family: var(--sans); font-size: 12.5px; }
@media (max-width: 899px) { .wf-scope { grid-template-columns: 1fr; } .wf-scope .wf-arrow { transform: rotate(90deg); justify-self: start; margin: 12px 0 12px 14px; } }
/* Prose pages (privacy, terms) */
.wf-prose { max-width: 760px; padding: 8px 0 88px; }
.wf-prose h2 { font-size: 26px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; margin: 48px 0 12px; color: var(--ink); }
.wf-prose h3 { font-size: 18px; font-weight: 600; margin: 24px 0 6px; color: var(--ink); }
.wf-prose p, .wf-prose li { font-size: 17px; line-height: 1.65; color: var(--body); }
.wf-prose p + p { margin-top: 12px; }
.wf-prose ul { list-style: none; display: grid; gap: 8px; margin-top: 8px; }
.wf-prose ul li { padding-left: 20px; position: relative; }
.wf-prose ul li::before { content: ""; position: absolute; left: 0; top: 13px; width: 8px; height: 2px; background: var(--ink); }
.wf-prose .wf-meta { font-family: var(--mono); font-size: 13px; color: var(--muted); letter-spacing: 0.04em; }
.wf-prose dl { display: grid; gap: 0; border-top: 1px solid var(--rule); margin-top: 12px; }
.wf-prose dl > div { display: grid; grid-template-columns: 220px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.wf-prose dt { font-weight: 600; color: var(--ink); font-size: 16px; line-height: 1.5; }
.wf-prose dd { font-size: 16px; line-height: 1.6; color: var(--body); }
.wf-prose .wf-note { margin-top: 16px; font-size: 14px; color: var(--muted); border-left: 3px solid var(--accent); padding: 8px 12px; background: var(--card); }
@media (max-width: 639px) { .wf-prose dl > div { grid-template-columns: 1fr; gap: 4px; } .wf-prose h2 { font-size: 22px; margin-top: 36px; } }

/* ---------- 9. Forms (Contact Form 7 output maps onto these) ---------- */
.wf-start { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 48px; align-items: start; padding-top: 0; padding-bottom: 88px; }
.wf-form { background: var(--card); border: 1px solid var(--rule); padding: 28px 32px; display: grid; gap: 18px; }
.wf-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wf-pagehead--form { padding: 40px 0 28px; }
.wf-pagehead--form .wf-pagehead-inner { gap: 12px; }
.wf-pagehead .wf-h1.wf-h1--h2 { font-size: 40px; line-height: 1.1; letter-spacing: -0.02em; }   /* /start/: the H1 at H2 size (B12) */
.wf-field { display: grid; gap: 8px; }
.wf-field > label, .wf-field > legend, .wf-fieldset > legend { font-size: 15.5px; font-weight: 600; color: var(--ink); padding: 0; }
.wf-field .wf-opt { font-weight: 400; color: var(--muted-2); }
.wf-field input[type="text"], .wf-field input[type="email"], .wf-field select, .wf-field textarea {
  font: 400 17px/1.4 var(--sans); color: var(--ink); background: var(--card); border: 1px solid var(--field); border-radius: 0; padding: 12px 14px; min-height: 50px; width: 100%; }
.wf-field select { appearance: none; padding-right: 40px; cursor: pointer;
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23111827' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 14px center; }
.wf-field input:focus-visible, .wf-field select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--ink); }
.wf-error { display: none; font-size: 14.5px; color: #A11D1D; font-weight: 500; }
.wf-error::before { content: "! "; font-family: var(--mono); }
.wf-field input:user-invalid, .wf-field select:user-invalid,
.wf-form.was-submitted .wf-field input:invalid, .wf-form.was-submitted .wf-field select:invalid { border-color: #A11D1D; border-width: 2px; padding: 11px 13px; }
.wf-field:has(input:user-invalid) .wf-error, .wf-field:has(select:user-invalid) .wf-error,
.wf-form.was-submitted .wf-field:has(:invalid) .wf-error { display: block; }
.wf-fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
.wf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wf-chips label { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 9px; border: 1px solid var(--field);
  font-size: 14.5px; font-weight: 500; color: var(--ink); cursor: pointer; background: var(--card); user-select: none; }
.wf-chips input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.wf-chips label::before { content: ""; width: 12px; height: 12px; border: 1.5px solid var(--field); flex: none; }
.wf-chips label:has(input:checked) { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
.wf-chips label:has(input:checked)::before { border-color: var(--on-ink); background: var(--on-ink);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5' fill='none' stroke='%23F3F5F7' stroke-width='1.8'/%3E%3C/svg%3E") center/12px no-repeat; }
.wf-chips label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.wf-check { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; padding: 14px; border: 1px solid var(--rule); background: #FAFBFC; cursor: pointer; font-size: 16px; line-height: 1.45; color: var(--ink); }
.wf-check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink); }
.wf-check b { font-weight: 600; }
.wf-check span span { color: var(--body); }
.wf-form .wf-btn { justify-self: start; min-height: 54px; }
.wf-form-note { font-size: 14.5px; color: var(--muted-2); }
.wf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wf-start-aside { display: grid; gap: 28px; }
.wf-gets { display: grid; gap: 10px; }
.wf-gets h2 { font-family: var(--mono); font-weight: 500; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.wf-disclose { font-size: 15px; line-height: 1.55; color: var(--body); border-left: 3px solid var(--accent); background: var(--card); padding: 12px 14px; }
@media (max-width: 1023px) { .wf-start { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 639px) {
  .wf-form { padding: 20px 16px; gap: 18px; } .wf-form .wf-btn { width: 100%; } .wf-start { padding-bottom: 56px; }
  .wf-form-row { grid-template-columns: 1fr; gap: 18px; }
  .wf-pagehead .wf-h1.wf-h1--h2 { font-size: 28px; line-height: 1.15; }
  .wf-pagehead--form { padding: 24px 0 20px; }
}
.wf-prose .wf-error { font-size: 14.5px; line-height: 1.5; color: #A11D1D; }   /* the privacy form sits in the prose */
/* Contact Form 7, in WordPress (its own stylesheet isn't loaded): its wrapper spans take no box, so each control sits in
   its .wf-field, .wf-chips or .wf-check as in the plain form; a field's plain-word .wf-error shows instead of Contact
   Form 7's tip, also without JavaScript (from the class its server-side check adds), and a field without one (such as
   an over-long company name) shows the tip, styled the same; the response line shows only for a sent or failed
   request, since /start/ moves on to the thanks page and field errors speak for themselves. */
.wpcf7 .screen-reader-response { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.wpcf7 .hidden-fields-container { display: none; }
.wf-form .wpcf7-form-control-wrap { display: contents; }
.wf-form .wpcf7-not-valid-tip { display: block; font-size: 14.5px; color: #A11D1D; font-weight: 500; }
.wf-form .wpcf7-not-valid-tip::before { content: "! "; font-family: var(--mono); }
.wf-form .wf-field:has(.wf-error) .wpcf7-not-valid-tip { display: none; }
.wf-form .wf-field .wpcf7-not-valid { border-color: #A11D1D; border-width: 2px; padding: 11px 13px; }
.wf-form .wf-field:has(.wpcf7-not-valid) .wf-error { display: block; }
.wf-form .wpcf7-response-output { font-size: 15.5px; line-height: 1.5; font-weight: 500; color: var(--ink); border-left: 3px solid var(--accent); padding: 8px 12px; }
.wf-form .wpcf7-response-output:empty, .wf-form.invalid .wpcf7-response-output, .wf-form.submitting .wpcf7-response-output { display: none; }
/* PROTOTYPE NOTE placeholders: visible until the owner decides (brief D) */
.wf-proto { display: inline; background: #FFF8E6; outline: 1px dashed #9A6700; outline-offset: 1px; color: var(--ink); }
.wf-proto-tag { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #7A5200; background: #FFE9B0; padding: 1px 5px; margin-right: 4px; }
.wf-footer-proto { margin-top: 28px; font-size: 13.5px; line-height: 1.6; color: var(--body); max-width: 64em; }
.wf-faqwrap { max-width: calc(880px + 2 * var(--gutter)); margin-left: max(0px, calc((100vw - 1264px) / 2)); margin-right: auto; padding-bottom: 88px; }
@media (max-width: 1263px) { .wf-faqwrap { margin-left: 0; } }
/* Thanks */
.wf-next { list-style: none; display: grid; gap: 0; counter-reset: wf-next; border-top: 1px solid var(--ink); max-width: 760px; }
.wf-next li { counter-increment: wf-next; display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--rule); font-size: 18px; line-height: 1.45; color: var(--ink); }
.wf-next li::before { content: counter(wf-next, decimal-leading-zero); font-family: var(--mono); font-weight: 500; font-size: 14px; color: var(--accent); padding-top: 3px; }
.wf-next li span { display: block; font-size: 16px; color: var(--body); margin-top: 2px; }
.wf-copybox { background: var(--card); border: 1px solid var(--rule); max-width: 760px; }
.wf-copybox summary { cursor: pointer; padding: 16px; font-weight: 600; display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 52px; }
.wf-copybox pre { margin: 0; padding: 16px; border-top: 1px solid var(--rule); white-space: pre-wrap; font: 400 14.5px/1.6 var(--mono); color: var(--ink); background: #FAFBFC; }
.wf-copybox .wf-btn { margin: 0 16px 16px; }

/* ---------- 10. Product mockups (mk-*) ----------
   Recreations from the site-mockups scenes. Larkspur and everyone in them are fictional; no vendor artwork. Each
   mockup is one role="img" with alt text, so a screen reader hears what it proves, not every pixel of text. */
.mk { position: relative; overflow: hidden; text-align: left; font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
.mk * { box-sizing: border-box; }
.mk p { margin: 0; }
.mk-mark { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border: 2px solid #111827; background: #fff; color: #111827;
  font: 500 11px/1 var(--mono); }

/* 10.1 Larkspur Help, the chat widget in Larkspur's product (scene 01). System font for Larkspur's own UI. */
.mk-widget { --lk: #5A3FC0; --lk-d: #47309F; --lk-tint: #F2EFFC; --lk-tint2: #E7E1FA; --tx: #1D1A2B; --tx2: #4A4660; --tx3: #6C6880; --line: #E7E4EE;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--tx); background: #fff; border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; }
.mkw-head { background: var(--lk); color: #fff; padding: 12px 14px; display: flex; align-items: center; gap: 11px; flex: none; }
.mkw-logo { width: 32px; height: 32px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; }
.mkw-head b { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.mkw-head small { display: block; font-size: 12px; opacity: 0.88; line-height: 1.3; }
.mkw-msgs { padding: 12px 14px 10px; display: flex; flex-direction: column; gap: 8px; }
.mkw-me { align-self: flex-end; max-width: 86%; background: var(--lk); color: #fff; border-radius: 15px 15px 4px 15px; padding: 9px 12px; font-size: 14px; line-height: 1.42; }
.mkw-bot { display: flex; gap: 8px; align-items: flex-start; }
.mkw-av { width: 24px; height: 24px; border-radius: 50%; background: var(--lk-tint2); display: grid; place-items: center; flex: none; margin-top: 2px; }
.mkw-stack { min-width: 0; }
.mkw-who { font-size: 12px; font-weight: 700; margin: 0 0 3px 2px; }
.mkw-who span { font-weight: 500; color: var(--tx3); margin-left: 4px; }
.mkw-bubble { background: #F2F1F6; border-radius: 4px 15px 15px 15px; padding: 9px 12px; font-size: 14px; line-height: 1.42; }
.mkw-bubble b { font-weight: 700; }
.mkw-src { display: flex; align-items: center; gap: 6px; margin-top: 7px; padding-top: 7px; border-top: 1px solid #E2DFEA; font-size: 12px; color: var(--tx3); }
.mkw-src b { color: var(--lk-d); }

/* 10.2 Slack, #support-escalations (scene 02). Slack's look in HTML and Lato; no Slack artwork. */
.mk-slack { --aub: #3F0E40; --tx: #1D1C1D; --tx2: #616061; --line: #E8E8E8; --line2: rgba(29,28,29,.13); --link: #1264A3; --green: #007A5A;
  font-family: var(--sans); border-left: 4px solid var(--aub) !important; color: var(--tx); background: #fff; border: 1px solid #DDD; border-radius: 8px; display: flex; }
.mks-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mks-body { padding: 4px 0 8px; }
.mks-msg { display: grid; grid-template-columns: 34px 1fr; gap: 9px; padding: 7px 16px; font-size: 14.5px; line-height: 21px; }
.mks-av { width: 34px; height: 34px; border-radius: 7px; display: grid; place-items: center; font-weight: 600; font-size: 13px; color: #fff; }
.mks-av.wf { background: #fff; border: 2px solid #111827; color: #111827; font: 500 16px/1 var(--mono); }
.mks-n { display: flex; align-items: baseline; gap: 6px; line-height: 20px; flex-wrap: wrap; }
.mks-n b { font-weight: 600; font-size: 15px; }
.mks-app { font-size: 12px; font-weight: 700; color: var(--tx2); background: rgba(29,28,29,.08); border-radius: 3px; padding: 1px 4px; position: relative; top: -1px; }
.mks-t { font-size: 12px; color: var(--tx2); }
.mks-msg p + p { margin-top: 6px; }
.mk-slack code { font-family: Monaco, Menlo, Consolas, monospace; font-size: 12px; color: #C01343; background: #F7F7F9; border: 1px solid var(--line2); border-radius: 3px; padding: 1px 3px; }
.mks-ev { margin-top: 6px; border-left: 4px solid #B4410C; border-radius: 2px; padding: 1px 0 1px 12px; }
.mks-eh { font-size: 13px; color: var(--tx2); display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.mks-eh b { color: var(--tx); font-weight: 600; }
.mks-eh a, .mks-eh .lnk { margin-left: auto; color: var(--link); text-decoration: none; }
.mks-ev ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.mks-ev li { font-size: 14px; line-height: 21px; }
.mks-ev li > b { font-weight: 600; margin-right: 5px; }
.mks-verdict { margin-top: 6px; font-size: 13px; color: var(--tx2); line-height: 18px; }
.mks-verdict b { color: var(--tx); font-weight: 600; }
.mks-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mks-btn { height: 28px; display: inline-flex; align-items: center; padding: 0 11px; border: 1px solid rgba(29,28,29,.3); border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--tx); background: #fff; }
.mks-btn.pri { background: var(--green); border-color: var(--green); color: #fff; }
.mks-link { color: var(--link); font-weight: 600; }

/* 10.3 Jira (scenes 03 and 07). System font, as Jira's own; no Atlassian artwork. */
.mk-jira { --tx: #172B4D; --tx2: #44546F; --tx3: #626F86; --line: #DCDFE4; --blue: #0C66E4; --sunk: #F7F8F9; --neutral: #F1F2F4; --green: #22A06B;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; color: var(--tx); background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.mkj-main { padding: 12px 16px 14px; }
.mkj-crumbs { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--tx2); flex-wrap: wrap; }
.mkj-crumbs b { font-weight: 500; display: inline-flex; align-items: center; gap: 5px; }
.mkj-title { margin: 6px 0 0; font-size: 19px; line-height: 25px; font-weight: 600; letter-spacing: -0.01em; color: var(--tx); }
.mkj-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; margin-top: 12px; align-items: start; }
.mkj-desc { font-size: 13.5px; line-height: 19px; }
.mkj-desc .mk-h { font-size: 13.5px; font-weight: 700; margin: 10px 0 4px; }
.mkj-desc .mk-h:first-child { margin-top: 0; }
.mkj-desc p { margin: 0 0 6px; }
.mk-jira code { font-family: "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; background: var(--neutral); border-radius: 3px; padding: 1px 4px; color: var(--tx); }
.mkj-desc ol { margin: 0; padding-left: 20px; display: grid; gap: 3px; }
.mkj-agent { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.mkj-ah { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--sunk); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.mkj-ah .mk-mark { border-radius: 5px; width: 24px; height: 24px; font-size: 12px; }
.mkj-ah b { font-size: 13.5px; font-weight: 650; }
.mkj-loz { font-size: 12px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 1px 5px; border-radius: 3px; background: #F3F0FF; color: #5E4DB2; }
.mkj-steps { list-style: none; margin: 0; padding: 4px 12px 6px; }
.mkj-steps > li { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; padding: 7px 0; font-size: 13px; line-height: 18px; border-bottom: 1px solid #EBECF0; }
.mkj-steps > li:last-child { border-bottom: 0; }
.mkj-ok { width: 18px; height: 18px; border-radius: 50%; background: var(--green); display: grid; place-items: center; margin-top: 1px; }
.mkj-q { width: 18px; height: 18px; border-radius: 50%; background: #E2B203; display: grid; place-items: center; margin-top: 1px; color: #172B4D; font-size: 12px; font-weight: 800; }
.mkj-w { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #B3B9C4; margin-top: 1px; }
.mkj-steps b { font-weight: 650; }
.mkj-steps .s { color: var(--tx2); display: block; }
.mkj-steps code { font-size: 12px; padding: 0 3px; overflow-wrap: anywhere; }
.mkj-qbox { margin: 6px 0 2px; border: 1px solid #F5CD47; background: #FFFBEB; border-radius: 6px; padding: 8px 10px; }
.mkj-qbox p { font-size: 13px; line-height: 18px; }
.mkj-qbox ol { margin: 5px 0 0; padding-left: 18px; font-size: 13px; line-height: 18px; }
.mkj-qbtns { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.mkj-qb { height: 26px; display: inline-flex; align-items: center; padding: 0 9px; border-radius: 4px; background: var(--neutral); font-size: 12.5px; font-weight: 600; }
.mkj-qb.pri { background: var(--blue); color: #fff; }

/* 10.4 GitHub pull request #1187 (scene 04). System font; icons drawn by hand, no GitHub artwork. */
.mk-gh { --fg: #1F2328; --muted: #59636E; --line: #D1D9E0; --subtle: #F6F8FA; --acc: #0969DA; --green: #1A7F37; --open: #1F883D; --red: #D1242F;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif; color: var(--fg); background: #fff; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; line-height: 1.5; }
.mkg-main { padding: 12px 16px 14px; }
.mkg-title { font-size: 20px; line-height: 27px; font-weight: 400; margin: 0; }
.mkg-title span { color: var(--muted); font-weight: 300; }
.mkg-title--clip { display: flex; white-space: nowrap; }
.mkg-title--clip .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: inherit; font-weight: 400; }
.mkg-state { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--muted); flex-wrap: wrap; font-size: 13.5px; }
.mkg-pill { height: 28px; display: inline-flex; align-items: center; gap: 5px; padding: 0 11px; border-radius: 2em; background: var(--open); color: #fff; font-weight: 500; font-size: 13.5px; flex: none; }
.mkg-state b { color: var(--fg); font-weight: 600; }
.mkg-box { border: 1px solid var(--line); border-radius: 6px; margin-top: 12px; background: #fff; }
.mkg-md { padding: 10px 14px 10px; font-size: 13.5px; line-height: 20px; }
.mkg-md p { margin: 0 0 6px; }
.mkg-md .mk-h { font-size: 14.5px; font-weight: 600; margin: 8px 0 5px; padding-bottom: 3px; border-bottom: 1px solid rgba(209,217,224,.7); }
.mkg-md .mk-h:first-child { margin-top: 0; }
.mk-gh code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; background: rgba(129,139,152,.12); border-radius: 6px; padding: 2px 5px; }
.mkg-md a, .mkg-lk { color: var(--acc); text-decoration: none; }
.mkg-table { border-collapse: collapse; margin: 2px 0 6px; font-size: 13px; width: 100%; max-width: 460px; }
.mkg-table th, .mkg-table td { border: 1px solid var(--line); padding: 3px 10px; text-align: left; }
.mkg-table th { font-weight: 600; }
.mkg-table tr:nth-child(2n) td { background: var(--subtle); }
.mkg-table td.n { font-variant-numeric: tabular-nums; text-align: right; }
.mkg-table td.m { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.mkg-tasks { list-style: none; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 16px; font-size: 13px; }
.mkg-tasks li { display: flex; gap: 7px; align-items: flex-start; }
.mkg-cb { width: 13px; height: 13px; border: 1px solid #6E7781; border-radius: 3px; flex: none; margin-top: 4px; display: grid; place-items: center; }
.mkg-cb.on { background: var(--acc); border-color: var(--acc); }
.mkg-note { font-size: 12.5px; color: var(--muted); }
.mkg-row { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--line); }
.mkg-row:last-child { border-bottom: 0; }
.mkg-row b { display: block; font-weight: 600; font-size: 13.5px; line-height: 19px; }
.mkg-row span { color: var(--muted); font-size: 12.5px; line-height: 17px; display: block; }
.mkg-mi { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; }

/* 10.5 Winnfield's own app (scenes 05 and 05b), in design A */
.mk-wf { --note: #FAF3EF; --note-rule: #EBCDBD; --ok: #1F6F43; font-family: var(--sans); color: var(--ink); background: var(--ground); border: 1px solid var(--rule); }
.mkf-body { padding: 12px 14px 14px; display: grid; gap: 8px; }
.mkf-th { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mkf-th h5 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.mkf-btn { white-space: nowrap; height: 28px; display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid var(--ink); font-size: 12.5px; font-weight: 500; background: #fff; }
.mkf-btn.dark { background: var(--ink); color: var(--ground); }
.mkf-mh { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; flex-wrap: wrap; }
.mkf-mh b { color: var(--ink); font-weight: 600; font-size: 13px; }
.mkf-who { font: 500 12px/1.2 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); }
.mkf-mh .t { margin-left: auto; font: 400 12px/1 var(--mono); color: var(--muted-2); }
.mkf-note { background: var(--note); border: 1px solid var(--note-rule); border-left: 3px solid var(--accent); padding: 8px 12px; font-size: 13px; line-height: 18px; color: var(--body); }
.mkf-note .mkf-who { color: var(--accent); }
.mkf-note > .hl { margin-top: 8px; }
.mkf-blk { display: grid; grid-template-columns: 112px 1fr; gap: 10px; padding: 6px 0; border-top: 1px solid var(--note-rule); }
.mkf-blk:first-of-type { border-top: 0; }
.mkf-blk > span { font: 500 12px/16px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); padding-top: 2px; }
.mkf-blk > span small { display: block; font-size: 12px; letter-spacing: 0.04em; color: var(--muted); margin-top: 2px; }
.mkf-blk ul { margin: 0; padding-left: 14px; }
.mkf-ans { background: #fff; border: 1px solid var(--note-rule); padding: 6px 9px; color: var(--ink); }
.mk-wf code { font-family: var(--mono); font-size: 12px; color: var(--ink); background: #EEF0F3; padding: 0 3px; }
.mkf-composer { border: 1px solid var(--accent); background: var(--note); display: flex; align-items: stretch; font-size: 12.5px; height: 34px; }
.mkf-composer span { padding: 0 12px; display: flex; align-items: center; color: var(--muted); }
.mkf-composer .on { background: var(--accent); color: #fff; font-weight: 500; }
.mkf-composer .warn { margin-left: auto; color: var(--accent); font: 500 12px/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
/* the record (05b) */

.mkf-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12.5px; color: var(--body); margin-top: 8px; }
.mkf-meta b { font-weight: 600; color: var(--ink); }
.mkf-stamp { display: inline-block; font: 500 12px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; border: 1.5px solid var(--accent); color: var(--accent); padding: 4px 6px; }
.mkf-stamp.ok { border-color: var(--ok); color: var(--ok); }
.mkf-card { background: #fff; border: 1px solid var(--rule); }
.mkf-ch { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 12px 8px; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.mkf-ch span { font: 500 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.mkf-ch small { font-size: 12px; color: var(--muted-2); }
.mkf-track { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 14px 12px 12px; gap: 0; }
.mkf-track::before { content: ""; position: absolute; left: 22px; right: 22px; top: 23px; height: 2px; background: var(--accent); }
.mkf-stop { position: relative; padding-right: 10px; }
.mkf-node { width: 20px; height: 20px; background: #fff; border: 2px solid var(--accent); display: grid; place-items: center; position: relative; z-index: 1; }
.mkf-node i { width: 8px; height: 8px; background: var(--accent); }
.mkf-stop .where { font: 500 12px/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-top: 8px; }
.mkf-stop b { display: block; font-size: 13.5px; font-weight: 600; margin-top: 3px; line-height: 18px; }
.mkf-stop p { margin: 3px 0 0; font-size: 12.5px; line-height: 17px; color: var(--body); }
/* The Runbook card (How it works) */
.mkf-doc { background: #fff; border: 1px solid var(--rule); }
.mkf-doc dl { margin: 0; display: grid; }
.mkf-doc dl > div { display: grid; grid-template-columns: 128px 1fr; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--rule); font-size: 13px; line-height: 18px; }
.mkf-doc dl > div:last-child { border-bottom: 0; }
.mkf-doc dt { font: 500 12px/18px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); }
.mkf-doc dd { margin: 0; color: var(--ink); }
.mkf-doc .warn { color: #8A3209; }

/* v2: record chips on the cards (B4), one-line mockups, thinner crops */
.mk-chip { display: inline-flex; align-items: center; font-family: var(--mono); font-weight: 500; font-size: 12px; line-height: 1; letter-spacing: 0.02em;
  color: var(--accent); background: #fff; border: 1px solid var(--accent); padding: 3px 5px; white-space: nowrap; vertical-align: 1px; }
.mk-chip--fill { background: #1F6F43; border-color: #1F6F43; color: #fff; }   /* a result met: the success green, not the accent used for actions */
.mkw-head > b { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.mk-widget { font-family: var(--sans); }
.mkf-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 12px; background: #fff; border: 1px solid var(--rule); font-size: 13.5px; color: var(--body); }
.mkf-line b { color: var(--ink); font-weight: 600; }
.mkf-ok { margin-left: auto; font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--ok); border: 1px solid var(--ok); padding: 3px 6px; }
.mk-wf--line { background: transparent; border: 0; }
.mkf-tt { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); margin-right: auto; }
.mkj-rec { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 8px 0 10px; font-size: 13px; color: var(--tx2); }
.mkj-more { margin: 4px 0 0 20px; font-size: 13px; color: var(--tx2); }
.mkj-qli { display: block !important; }
.mkj-qrow { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; }
.mkg-res { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 13.5px; }
.mk-gh--line .mkg-main { padding: 10px; }
.mk-gh--line .mkg-box { margin: 0; }
.mk-gh--line .mkg-row span { display: block; }
.mks-pane .mks-body { padding: 6px 0 8px; }
.mkf-meta { margin: 0 0 8px; }
.mkf-track .mkf-stop .mk-chip { margin-top: 8px; }
.mkf-track .mkf-stop .where { margin-top: 8px; }

/* Mockup size variants: the same components, cropped for a slot */
.mk--hero { font-size: 13px; }
.mk--hero.mk-widget .mkw-msgs { padding: 10px 12px; gap: 7px; }
.mk--hero.mk-widget .mkw-me, .mk--hero.mk-widget .mkw-bubble { font-size: 13px; padding: 8px 11px; }
.mk--hero .mks-msg { font-size: 13.5px; line-height: 19px; padding: 9px 12px; grid-template-columns: 30px 1fr; gap: 8px; }
.mk--hero .mks-av { width: 30px; height: 30px; }
.mk--hero .mks-av.wf { font-size: 14px; }
.mk--hero.mk-jira .mkj-main { padding: 10px 12px 12px; }
.mk--hero.mk-jira .mkj-title { font-size: 15px; line-height: 20px; }
.mk--hero.mk-gh .mkg-main { padding: 10px 12px 12px; }
.mk--hero.mk-gh .mkg-title { font-size: 15.5px; line-height: 21px; }
.mk--hero .mkg-row { padding: 7px 10px; grid-template-columns: 26px 1fr; gap: 8px; }
.mk--hero .mkg-md { padding: 8px 10px; }
.mkg-table th, .mkg-table td { white-space: nowrap; }
.mk--hero .mkg-table { font-size: 12px; margin: 0; width: 100%; }
.mk--hero .mkg-table th, .mk--hero .mkg-table td { padding: 2px 7px; }
.mk--hero .mkg-res { font-size: 13px; }
.mk--hero .mks-eh { font-size: 12.5px; }
.mk--hero .mkj-rec { margin: 6px 0 8px; font-size: 12.5px; }
.mk--hero.mk-widget .mkw-head { padding: 9px 12px; }
.mk--hero.mk-widget .mkw-logo { width: 26px; height: 26px; }
.mk--hero .mkg-mi { width: 26px; height: 26px; }

@media (max-width: 719px) {
  .mkj-cols, .mkg-cols { grid-template-columns: 1fr; }
  .mkf-track { grid-template-columns: 1fr; padding: 12px 12px 4px 12px; }
  .mkf-track::before { left: 21px; right: auto; top: 22px; bottom: 30px; width: 2px; height: auto; }
  .mkf-stop { display: grid; grid-template-columns: 20px 1fr; column-gap: 12px; padding: 0 0 12px; }
  .mkf-stop > * { grid-column: 2; }
  .mkf-stop > .mkf-node { grid-column: 1; grid-row: 1 / span 4; }
  .mkf-stop .where { margin-top: 1px; }
  .mkf-blk { grid-template-columns: 1fr; gap: 3px; }
  .mkg-tasks { grid-template-columns: 1fr; }
  .mkf-doc dl > div { grid-template-columns: 1fr; gap: 2px; }
}

@media (max-width: 719px) {
  .wf-u-sources .wf-src { padding: 7px 10px; font-size: 14px; gap: 8px; }
  .wf-u-sources .wf-src small { display: inline; margin-left: 4px; }
  .wf-u-sources .wf-src svg { width: 16px; height: 16px; }
  .wf-u-col + .wf-u-col { margin-top: 26px; }
  .wf-u-col + .wf-u-col::before { top: -20px; height: 12px; }
  .wf-u-col + .wf-u-col::after { top: -10px; }
  .wf-u-answer { padding: 8px 12px; }
  .wf-u-answer b { font-size: 15px; }
  .wf-router { gap: 4px; }
  .wf-router li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 6px 10px; font-size: 14px; }
  .wf-router .to small { display: none; }
  .mk-runbook-mini .mkf-doc dl > div { grid-template-columns: 52px 1fr; padding: 4px 10px; }
  .wf-u-note { margin-top: 20px; }
  .mkf-track .mkf-stop { grid-template-columns: 20px auto 1fr; align-items: center; padding-bottom: 10px; }
  .mkf-track .mkf-stop > .mkf-node { grid-row: 1; grid-column: 1; }
  .mkf-track .mkf-stop > .where { grid-column: 2; margin: 0; }
  .mkf-track::before { top: 22px; bottom: 26px; }
  .mkg-table td.m { white-space: nowrap; }
  .wf-frame .mk-widget .mkw-msgs { padding-bottom: 12px; }
}

/* Composites inside one frame */
.wf-duo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px; align-items: start; }
.wf-duo--head { gap: 14px; grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); }
.wf-duo--head .mkf-blk { grid-template-columns: 1fr; gap: 4px; }
@media (max-width: 719px) { .wf-duo { grid-template-columns: 1fr; } }
.wf-frame--relay { padding: 8px; }
.wf-frame--relay > .mk { height: 100%; }
.wf-desk-fig { min-width: 0; }
.wf-chapter-visual { min-width: 0; }
.mk-runbook-mini { border-left: 3px solid var(--accent) !important; }
.mk-runbook-mini .mkf-doc dl > div { grid-template-columns: 52px 1fr; padding: 7px 12px; }
/* The full ladder (How it works): blast radius under each stage */
.wf-ladder--full li .wf-label { order: 3; margin-top: 4px; color: var(--muted); }

/* ---------- 11. Motion: CSS only, once, and every state readable at rest ---------- */
@media (prefers-reduced-motion: no-preference) {
  .wf-relay-list::before { animation: wf-draw-x 1.5s cubic-bezier(.45,0,.2,1) .25s both; }
  .wf-relay-step .wf-node { animation: wf-fill .35s ease-out both; }
  .wf-relay-step:nth-child(1) .wf-node { animation-delay: .25s; }
  .wf-relay-step:nth-child(2) .wf-node { animation-delay: .7s; }
  .wf-relay-step:nth-child(3) .wf-node { animation-delay: 1.15s; }
  .wf-relay-step:nth-child(4) .wf-node { animation-delay: 1.6s; }
  .wf-ctabar { transition: transform .2s ease-out, visibility 0s linear .2s; }
  .wf-ctabar.is-on { transition: transform .2s ease-out, visibility 0s; }
  .wf-tabpanel:not([hidden]) { animation: wf-fade .18s ease-out; }
  @media (max-width: 639px) { .wf-relay-list::before { animation-name: wf-draw-y; } }
}
@keyframes wf-draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes wf-draw-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes wf-fill { from { background-color: var(--card); } to { background-color: var(--accent); } }
@keyframes wf-fade { from { opacity: .4; } to { opacity: 1; } }

/* ---------- 12. v2: fit on phones (brief B7) and the narrow desktop relay (B2) ----------
   Last in the file on purpose: these override the general mockup rules above at the same specificity. */
.mks-msg--cont { padding-top: 0; }
.wf-nw { white-space: nowrap; }
/* 1024–1279: the hero's GitHub card is ~230px wide, too narrow for three columns; it keeps Booking and On the fix */
@media (min-width: 1024px) and (max-width: 1279px) {
  .wf-relay .mk--hero .mkg-table th:nth-child(2), .wf-relay .mk--hero .mkg-table td:nth-child(2) { display: none; }
}
@media (max-width: 639px) {
  .wf-section { padding: 40px 0; }
  .wf-section-head { margin-bottom: 20px; }

  /* the hero's phone card: everything inside its 240px */
  .wf-relay-phone .mk--hero .mkg-main { padding: 8px 10px 10px; }
  .wf-relay-phone .mk--hero .mkg-state { margin-top: 4px; }
  .wf-relay-phone .mk--hero .mkg-box { margin-top: 8px; }
  .wf-relay-phone .mk--hero .mkg-md { padding: 6px 8px; }
  .wf-relay-phone .mk--hero .mkg-row { padding: 5px 8px; }

  /* the story: shorter rhythm, each frame cropped to what its caption names */
  .wf-story-head { margin-bottom: 24px; gap: 10px; }
  .wf-story-head > .wf-label { max-width: none; }
  .wf-story { gap: 26px; }
  .wf-step::before { bottom: -26px; }
  .wf-step { gap: 12px; }
  .wf-step-cap .wf-p { font-size: 16px; line-height: 1.5; }
  .wf-step > .wf-frame { padding: 4px; }
  .wf-step .wf-duo { gap: 6px; }
  /* 01: the widget's header slim; the note's two labels on one line */
  .wf-step .mk-widget { border-radius: 10px; }
  .wf-step .mk-widget .mkw-head { padding: 6px 10px; gap: 8px; }
  .wf-step .mk-widget .mkw-logo { width: 24px; height: 24px; }
  .wf-step .mk-widget .mkw-head b { font-size: 14px; }
  .wf-step .mk-widget .mkw-msgs { padding: 8px 10px 10px; }
  .wf-step .mk-widget .mkw-me { font-size: 13.5px; padding: 7px 11px; max-width: 92%; }
  .wf-step .mkf-body { padding: 8px; }
  .wf-step .mkf-note { padding: 6px 10px 8px; }
  .wf-step .mkf-blk { padding: 4px 0 0; gap: 4px; }
  .wf-step .mkf-blk > span small { display: inline; margin-left: 8px; }
  /* 02: Slack, a little tighter */
  .wf-step .mk-slack .mks-msg { grid-template-columns: 28px 1fr; gap: 8px; padding: 6px 10px; font-size: 13.5px; line-height: 19px; }
  .wf-step .mk-slack .mks-av { width: 28px; height: 28px; font-size: 14px; }
  .wf-step .mk-slack .mks-msg--cont { padding-top: 0; }
.wf-nw { white-space: nowrap; }
  .wf-step .mk-slack .mks-body { padding: 4px 0 6px; }
  .wf-step .mk-slack .mks-eh { font-size: 12.5px; display: block; line-height: 18px; }
  .wf-step .mk-slack .mks-eh .lnk { margin-left: 4px; }
  .wf-step .mk-slack .mks-btns { margin-top: 6px; }
  /* 03: Jira, title on two lines, the agent's steps one line each */
  .wf-step .mk-jira .mkj-main { padding: 10px 12px; }
  .wf-step .mk-jira .mkj-title { font-size: 16px; line-height: 21px; margin-top: 4px; }
  .wf-step .mk-jira .mkj-cols { gap: 10px; margin-top: 8px; }
  .wf-step .mk-jira .mkj-desc .mk-h { margin-bottom: 2px; }
  .wf-step .mk-jira .mkj-ah { padding: 6px 10px; }
  .wf-step .mk-jira .mkj-steps { padding: 2px 10px; }
  .wf-step .mk-jira .mkj-steps > li { padding: 6px 0; }
  .wf-step .mk-jira .mkj-steps .s { display: none; }
  /* 04: GitHub */
  .wf-step .mk-gh .mkg-main { padding: 10px 12px; }
  .wf-step .mk-gh .mkg-title { font-size: 17px; line-height: 23px; }
  .wf-step .mk-gh .mkg-box { margin-top: 8px; }
  .wf-step .mk-gh .mkg-md { padding: 8px 10px; }
  .wf-step .mk-gh .mkg-row { padding: 6px 10px; }
  /* the close: one line per stop */
  .wf-step .mkf-meta { margin: 0; }
  .wf-step .mkf-ch { padding: 7px 10px 6px; }
  .wf-step .mkf-track { padding: 10px 10px 2px; }
  .wf-step .mkf-track .mkf-stop { grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; padding: 0 0 8px; }
  .wf-step .mkf-track .mkf-stop > .mkf-node { grid-row: 1; grid-column: 1; }
  .wf-step .mkf-track .mkf-stop > .where { grid-column: 2; margin: 0; }
  .wf-step .mkf-track .mkf-stop > .mk-chip { grid-column: 3; margin: 0; }
  .wf-step .mkf-track::before { left: 19px; top: 20px; bottom: 18px; }
  .wf-step-cta { gap: 12px; margin-top: 12px; padding-top: 14px; }
  .wf-step-cta p { font-size: 17px; }

  /* One understanding: ≤ 600px. Sources as a 2×2 chip grid, the Runbook in three rows, the verdict on one line
     beside its arrow, the router as four one-line rows, and the link inside the closing sentence. */
  #understanding .wf-u-sources { display: flex; flex-wrap: wrap; gap: 6px; }
  #understanding .wf-src { padding: 4px 9px; font-size: 14px; gap: 7px; min-height: 30px; }
  #understanding .wf-src svg { width: 15px; height: 15px; }
  #understanding .wf-src small { display: inline; margin-left: 4px; font-size: 12.5px; }
  #understanding .wf-u-col + .wf-u-col { margin-top: 26px; }
  #understanding .wf-section-head { margin-bottom: 16px; }
  #understanding .wf-u-col + .wf-u-col::before { left: 9px; top: -22px; height: 12px; }
  #understanding .wf-u-col + .wf-u-col::after { left: 5px; top: -12px; }
  #understanding .wf-u-cap { position: absolute; top: -22px; left: 28px; margin: 0; line-height: 18px; }
  #understanding .mk-runbook-mini .mkf-ch { padding: 4px 10px; }
  #understanding .mk-runbook-mini .mkf-doc dl > div { grid-template-columns: 52px 1fr; padding: 2px 10px; line-height: 18px; }
  #understanding .wf-u-answer { position: absolute; top: -24px; left: 28px; right: 0; padding: 0; border: 0; background: none; line-height: 20px; }
  #understanding .wf-u-answer b { font-size: 15px; }
  #understanding .wf-u-col:has(.wf-u-answer) { height: 0; margin-top: 30px; }
  #understanding .wf-u-col:has(.wf-u-answer)::before, #understanding .wf-u-col:has(.wf-u-answer)::after { display: none; }
  #understanding .wf-u-col:has(.wf-router) { margin-top: 0; }
  #understanding .wf-u-col:has(.wf-router)::before { left: 9px; top: -28px; height: 18px; }
  #understanding .wf-u-col:has(.wf-router)::after { left: 5px; top: -12px; }
  #understanding .wf-router { gap: 4px; padding-left: 22px; }
  #understanding .wf-router::before { top: 0; bottom: 13px; left: 9px; }
  #understanding .wf-router { gap: 3px; }
  #understanding .wf-router li { padding: 3px 10px; font-size: 14px; line-height: 18px; }
  #understanding .wf-router li::before { left: -13px; width: 13px; }
  #understanding .wf-router .v { font-size: 12px; }
  #understanding .wf-u-note { display: block; margin-top: 12px; }
  #understanding .wf-u-note p { display: inline; font-size: 16px; line-height: 1.5; }
  #understanding .wf-u-note .wf-more { display: inline; min-height: 0; font-size: 16px; line-height: 1.5; margin-left: 4px; }
}

/* ---------- 13. v3: descriptive links without extra words ---------- */
/* The story's step headings open their How it works chapter. */
.wf-h3-link { display: block; padding: 11px 0; margin: -11px 0; color: inherit; text-decoration: underline; text-decoration-color: var(--rule); text-decoration-thickness: 2px; text-underline-offset: 5px; }   /* a 44px+ target, laid out as the plain heading */
.wf-h3-link:hover { color: inherit; text-decoration-color: var(--accent); }
.wf-h3-arrow { display: inline-block; margin-left: 8px; color: var(--accent); }
/* An FAQ answer's closing link to the page that covers it. */
.wf-answer-more .wf-more { font-size: 15.5px; min-height: 32px; }
/* Home, You stay in control: each security line opens the Security section that proves it. */
.wf-seclist--links li { display: block; padding: 0; }
.wf-seclist--links a { display: grid; grid-template-columns: 24px 1fr 16px; gap: 14px; align-items: center; min-height: 52px; padding: 12px 0; color: var(--ink); text-decoration: none; }
.wf-seclist--links a::after { content: "\2192"; content: "\2192" / ""; color: var(--accent); justify-self: end; }
.wf-seclist--links a:hover span, .wf-seclist--links a:focus-visible span { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
/* Home's four stages, names only */
.wf-ladder--names li { padding-top: 22px; }
@media (max-width: 639px) {
  .wf-seclist--links a { min-height: 44px; padding: 8px 0; }
  .wf-ladder--names { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wf-ladder--names::before { left: 5px; right: 12%; top: 5px; bottom: auto; width: auto; height: 2px; }
  .wf-ladder--names li { padding: 22px 8px 0 0; display: block; }
  .wf-ladder--names li > .wf-node { top: 0; }
  .wf-ladder--names b { font-size: 17px; }
}

/* How it works, in four steps (after the hero: the plain picture before the example) */
.wf-how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; }
.wf-how-steps li { display: grid; gap: 10px; align-content: start; }
.wf-how-steps picture { display: block; }
.wf-how-steps img { display: block; width: 100%; max-width: 176px; height: auto; margin: 0 0 6px -8px; }
.wf-how-steps h3 { font-size: 20px; line-height: 1.3; font-weight: 600; color: var(--ink); }
.wf-how-steps p { font-size: 16px; line-height: 1.55; color: var(--body); }
.wf-how-more { margin-top: 40px; }
@media (max-width: 1023px) { .wf-how-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .wf-how-steps { grid-template-columns: 1fr; gap: 28px; }
  .wf-how-steps li { grid-template-columns: 84px minmax(0, 1fr); column-gap: 16px; row-gap: 6px; }
  .wf-how-steps picture { grid-row: 1 / span 3; }
  .wf-how-steps img { max-width: 84px; margin: 0; }
  .wf-how-more { margin-top: 28px; }
}

/* The hero relay in plain words: sentence-case step labels, a one-line caption */
.wf-relay-head .wf-label.wf-relay-label { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 14.5px; font-weight: 500; color: var(--ink); }
.wf-relay-head .wf-label.wf-relay-label::before { font-family: var(--mono); font-size: 12.5px; }
.wf-relay-note { font-size: 15px; line-height: 1.5; color: var(--body); }
.wf-relay-note span { color: var(--muted); }
.wf-relay-cap.wf-relay-note { display: block; margin-bottom: 12px; }
@media (max-width: 1279px) { .wf-relay-head .wf-label.wf-relay-label { font-size: 13px; } }
@media (max-width: 767px) { .wf-relay-cap.wf-relay-note { display: none; } }

/* ---------- 14. The critic's round (2026-10-30) ---------- */
/* The widget's reply, approved by a person: the same fact the story's caption states */
.mkw-ok { display: flex; align-items: center; gap: 4px; margin: 4px 0 0 4px; font-size: 12px; line-height: 16px; font-weight: 500; color: #1F6F43; }
.mkw-ok svg { flex: none; }
/* GitHub: the suite's result beside the records', and a neutral merge box */
.mkg-res--tests { margin-top: 4px; }
.mkg-tick { display: inline-grid; place-items: center; width: 18px; flex: none; }
.mk--hero .mkg-res--tests { margin-top: 3px; }
/* The QA checklist: one box left open, with its reason, spans both columns */
.mkg-task--open { grid-column: 1 / -1; color: var(--muted); }
/* Jira, the Engineering tab's crop: the causal chain under the title */
.mkj-desc--tab { margin-top: 10px; }
/* Home and /support-desk/: keep your help desk, or add this one */
.wf-choice { color: var(--ink); border-left: 3px solid var(--accent); padding-left: 12px; }
.wf-desk-head .wf-choice { margin-top: -2px; }
/* /support-desk/: the controls on replies sent without approval */
.wf-controls { list-style: none; display: grid; gap: 0; margin-top: 18px; border-top: 1px solid var(--rule); }
.wf-controls li { padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 15.5px; line-height: 1.5; color: var(--body); }
.wf-controls li b { display: block; color: var(--ink); font-weight: 600; }
/* /faq/ "Does it fit our stack?": two lists */
.wf-answer .wf-fit-h { font-family: var(--mono); font-weight: 500; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); margin-top: 6px; }
.wf-answer .wf-fit { list-style: none; display: grid; gap: 6px; margin: 0; padding: 0; }
.wf-answer .wf-fit li { position: relative; padding-left: 20px; font-size: 16px; line-height: 1.5; }
.wf-answer .wf-fit li::before { content: ""; position: absolute; left: 0; top: 9px; width: 10px; height: 10px; background: var(--accent); }
.wf-answer .wf-fit--not li::before { background: var(--card); border: 1.5px solid var(--muted); width: 9px; height: 9px; }
.wf-answer .wf-fit b { color: var(--ink); font-weight: 600; }
/* The phone hero card: within its 240px, without GitHub's state row (the label above names the pull request) */
.wf-relay-phone .mk--hero .mkg-state { display: none; }
.wf-relay-phone .mk--hero .mkg-row b { font-size: 13px; }
/* /security/ #your-cloud: hosted by Winnfield against in your cloud */
.wf-table--compare thead td { background: #FAFBFC; border-bottom: 1px solid var(--ink); }
.wf-table--compare tbody th { width: 30%; }
.wf-table--compare td { width: 35%; }
.wf-table--compare + .wf-fig-note { margin-top: 14px; }
#your-cloud .wf-fig-note { font-size: 15px; color: var(--body); max-width: 60em; }
@media (max-width: 639px) {
  .wf-table--compare, .wf-table--compare thead, .wf-table--compare tbody, .wf-table--compare tr { display: block; }
  .wf-table--compare thead { display: none; }
  .wf-table--compare tr { border-bottom: 1px solid var(--rule); padding: 10px 12px; display: grid; gap: 4px; }
  .wf-table--compare tr:last-child { border-bottom: 0; }
  .wf-table--compare tbody th, .wf-table--compare td { width: auto; padding: 0; border: 0; }
  .wf-table--compare td::before { display: block; font-family: var(--mono); font-weight: 500; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
  .wf-table--compare td:nth-of-type(1)::before { content: "Hosted by Winnfield"; }
  .wf-table--compare td:nth-of-type(2)::before { content: "In your cloud"; }
}
/* /start/: one choice, on one row: where they'd run it */
.wf-inline-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.wf-group-label { font-size: 15.5px; font-weight: 600; color: var(--ink); }
.wf-chips--radio label::before { border-radius: 50%; }
.wf-chips--radio label:has(input:checked)::before { background: var(--on-ink); box-shadow: inset 0 0 0 3px var(--ink); }
/* the form, a little tighter, so the button stays in the first screen at 1440×900 */
@media (min-width: 640px) { .wf-form { gap: 14px; } .wf-pagehead--form { padding: 32px 0 24px; } }
/* /how-it-works/#filing: two ways bugs get filed, and the non-bug outcome */
.wf-filing { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; }
.wf-filing .wf-box { padding: 18px; gap: 8px; border-top: 3px solid var(--accent); }
.wf-filing .wf-box--alt { border-top-color: var(--ink); }
.wf-filing .wf-box b { font-size: 17px; }
.wf-filing .wf-box p { font-size: 15.5px; line-height: 1.55; color: var(--body); }
.wf-filing .wf-tag { justify-self: start; }
@media (max-width: 1023px) { .wf-filing { grid-template-columns: 1fr; } }
/* /security/ "Three sentences": the own-cloud line, linked to #your-cloud */
.wf-statements-note--cloud { margin-top: 10px; }
.wf-statements-note--cloud a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 500; }
.wf-statements-note--cloud a::after { content: "\2192"; content: "\2192" / ""; text-decoration: none; display: inline-block; }
/* Jira: the ticket Winnfield filed from a help-desk question, and the agent assigned to it */
.mkj-meta { margin: 6px 0 0; font-size: 12.5px; line-height: 17px; color: var(--tx2); }
.mkj-evidence { margin-top: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--sunk); }
.mkj-evidence .mkj-rec { margin: 0 0 6px; }
.mkj-impact { margin: 0; font-size: 13px; line-height: 18px; color: var(--tx); }
.mkj-impact b { font-weight: 650; }
.mkj-assign { margin: 8px 0 10px; font-size: 13px; color: var(--tx2); }
.mkj-assign b { color: var(--tx); font-weight: 650; }
.mkj-crumbs .mk-chip { margin-left: auto; }
.mk--hero .mkj-evidence { padding: 7px 9px; margin-top: 8px; }
.mk--hero .mkj-impact { font-size: 12.5px; line-height: 17px; }
/* the evidence trail in four tools */
@media (min-width: 720px) { .mkf-track.mkf-track--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* /how-it-works/#filing: the gate, and the two triggers */
.wf-filing-gate { font-size: 14px !important; color: var(--muted) !important; }
.wf-filing-ways { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wf-filing-ways li { position: relative; padding-left: 16px; font-size: 15.5px; line-height: 1.55; color: var(--body); }
.wf-filing-ways li::before { content: ""; position: absolute; left: 0; top: 10px; width: 8px; height: 2px; background: var(--accent); }
/* the trail's ids: one or two chips per stop */
.mkf-ids { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.mkf-ids .mk-chip { margin: 0 !important; }
@media (max-width: 719px) {
  .mkf-track .mkf-stop > .mkf-ids { grid-column: 3; justify-self: end; justify-content: flex-end; margin: 0; }
}
@media (max-width: 639px) {
  .wf-step .mkf-track .mkf-stop > .mkf-ids { grid-column: 3; margin: 0; }
}

/* ---------- 15. The hero's four examples (the owner, 2026-10-30) ----------
   Work reaches Winnfield from a customer (your app's chat) or from your team (Slack), and either can be a bug or a
   feature: four examples as WAI-ARIA tabs, grouped by who asks. Without JS the first example shows, and no tabs. */
.wf-routes-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; margin-bottom: 16px; }
.wf-routes-tabs { display: none; }
.js .wf-routes-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 32px; }
.wf-routes-group { display: flex; align-items: center; gap: 8px; }
.wf-routes-from { margin-right: 6px; white-space: nowrap; }
.wf-rtab { appearance: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; background: var(--card);
  border: 1px solid var(--rule); font: 500 15px/1 var(--sans); color: var(--body); cursor: pointer; white-space: nowrap; }
.wf-rtab:hover { border-color: var(--muted); color: var(--ink); }
.wf-rtab[aria-selected="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
.wf-rtab .wf-node { display: none; width: 8px; height: 8px; border-width: 1.5px; }
.wf-rtab[aria-selected="true"] .wf-node { display: inline-block; }
.wf-routes-note { margin: 0; }
.wf-route[hidden] { display: none; }
.wf-route:focus-visible { outline-offset: 6px; }
.wf-route .wf-relay-phone { display: none; }
@media (prefers-reduced-motion: no-preference) { .wf-route:not([hidden]) { animation: wf-fade .18s ease-out; } }
@media (max-width: 767px) {
  .wf-routes-bar { margin-bottom: 8px; }
  .wf-routes-note { margin-top: 4px; }
  .js .wf-routes-tabs { display: grid; grid-template-columns: max-content 1fr 1fr; gap: 6px 8px; width: 100%; }
  .wf-routes-group { display: contents; }
  .wf-routes-from { margin-right: 2px; }
  .wf-rtab { min-height: 44px; justify-content: center; padding: 0 10px; }
  .wf-route .wf-relay-phone { display: grid; gap: 8px; margin-top: 14px; }
  .wf-relay .wf-route .wf-relay-phone .wf-frame { display: block; }
  .wf-route .wf-relay-head { height: 32px; }
  .wf-route .wf-relay-phone .wf-frame { max-height: none; }
}
/* Slack: an @mention, as Slack marks one */
.mks-at { color: var(--link); background: rgba(29,155,209,.1); border-radius: 3px; padding: 0 2px; font-weight: 500; }
.mks-small { font-size: 12.5px; line-height: 17px; color: var(--tx2); }
/* the hero's Slack threads: two people and a confirmation, within the other cards' height */
.wf-relay .mk--hero.mk-slack .mks-body { padding: 4px 0 6px; }
.wf-relay .mk--hero.mk-slack .mks-msg { padding: 6px 12px; }
.wf-relay .mk--hero.mk-slack .mks-msg--cont { padding-top: 0; }
.wf-relay .mk--hero.mk-slack .mks-btns { margin-top: 6px; }
.wf-relay .mk--hero.mk-slack .mks-btn { height: 26px; font-size: 12.5px; }
/* the hero's subhead on two lines at desktop widths */
@media (min-width: 1024px) { .wf-sub--hero { max-width: 48em; } }
/* Jira: a story's acceptance criteria, the first two and how many more */
.mkj-ac { margin-top: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--sunk); font-size: 13px; line-height: 18px; }
.mkj-ac .mk-h { font-size: 12.5px; font-weight: 700; margin: 0 0 4px; color: var(--tx2); }
.mkj-ac ol { margin: 0; padding-left: 18px; display: grid; gap: 2px; }
.mkj-ac .mkj-more { margin: 3px 0 0 18px; font-size: 12.5px; }
.mkj-main > .mkj-rec { margin: 8px 0 0; }
.mk--hero .mkj-ac { padding: 7px 9px; margin-top: 8px; font-size: 12.5px; line-height: 17px; }
/* GitHub: a line under a result */
.mkg-sub { margin: 2px 0 0; font-size: 12.5px; line-height: 17px; color: var(--muted); }

/* v4, the clarity pass (2026-10-30): each feature with a visual and a Larkspur example, the case flow, Winnfield Chat's tiers */
.wf-ex { font-size: 15px; line-height: 1.55; color: var(--body); border-left: 2px solid var(--accent); padding-left: 12px; max-width: 38em; }
.wf-ex b { font-family: var(--mono); font-weight: 500; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-right: 4px; }
.wf-box .wf-ex, .wf-filing .wf-ex { font-size: 14px; margin-top: 4px; }
.wf-vis-h { font-family: var(--mono); font-weight: 500; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.wf-stack { display: grid; gap: 10px; }
.wf-features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 40px; }
.wf-feature { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.wf-feature > .wf-frame { margin: 0; }
.wf-feature-copy { display: grid; gap: 10px; align-content: start; }
.wf-feature-copy h3 { font-size: 19px; line-height: 1.3; font-weight: 600; color: var(--ink); }
.wf-feature-copy > p:not(.wf-ex) { font-size: 15.5px; line-height: 1.55; color: var(--body); }
.wf-feature .wf-ex { font-size: 14.5px; }
@media (max-width: 1199px) { .wf-features { grid-template-columns: 1fr; gap: 48px; } }
@media (max-width: 639px) { .wf-features { gap: 40px; } .wf-feature { grid-template-columns: 1fr; gap: 14px; } }
.wf-reads { display: grid; gap: 8px; }
.wf-reads-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.wf-reads-src { border: 1px solid var(--rule); padding: 8px 10px; display: grid; gap: 2px; font-size: 13px; line-height: 1.35; color: var(--body); }
.wf-reads-src b { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.wf-reads-out { border: 1.5px solid var(--accent); padding: 8px 10px; display: grid; gap: 2px; font-size: 13.5px; line-height: 1.4; color: var(--ink); }
.wf-reads-out b { font-family: var(--mono); font-weight: 500; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.wf-caseflow-fig { margin: 0 0 56px; display: grid; gap: 14px; }
.wf-pagehead .wf-caseflow-fig { margin: 40px 0 0; }
.wf-caseflow-cap { font-size: 15px; line-height: 1.5; color: var(--muted); max-width: 46em; }
.wf-caseflow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.wf-caseflow > li { position: relative; display: grid; gap: 8px; align-content: start; background: var(--card); border: 1px solid var(--rule); border-top: 3px solid var(--ink); padding: 14px 14px 16px; margin-right: 20px; min-width: 0; }
.wf-caseflow > li:first-child { border-top-color: var(--accent); }
.wf-caseflow > li:last-child { margin-right: 0; }
.wf-caseflow > li:not(:last-child)::after { content: ""; position: absolute; right: -21px; top: 30px; width: 20px; height: 2px; background: var(--accent); }
.wf-caseflow .wf-label { font-size: 11.5px; color: var(--accent); }
.wf-caseflow > li > b { font-size: 15.5px; line-height: 1.3; font-weight: 600; color: var(--ink); }
.wf-caseflow ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.wf-caseflow ul li { position: relative; padding-left: 12px; font-size: 14px; line-height: 1.4; color: var(--body); }
.wf-caseflow ul li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; background: var(--accent); }
.wf-caseflow .wf-ex { font-size: 13.5px; line-height: 1.45; padding-left: 10px; margin-top: 4px; }
.wf-caseflow .wf-ex b { display: block; margin: 0 0 2px; }
@media (max-width: 1199px) { .wf-caseflow { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; }
  .wf-caseflow > li:nth-child(3n) { margin-right: 0; } .wf-caseflow > li:nth-child(3n)::after { display: none; } }
@media (max-width: 639px) { .wf-caseflow { grid-template-columns: 1fr; row-gap: 18px; }
  .wf-caseflow > li, .wf-caseflow > li:nth-child(3n) { margin-right: 0; }
  .wf-caseflow > li:not(:last-child)::after, .wf-caseflow > li:nth-child(3n):not(:last-child)::after { display: block; right: auto; left: 22px; top: auto; bottom: -19px; width: 2px; height: 18px; } }
.wf-tiers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.wf-tiers > li { display: grid; gap: 10px; align-content: start; background: var(--card); border: 1px solid var(--rule); border-top: 3px solid var(--ink); padding: 16px; min-width: 0; }
.wf-tiers > li.is-wf { border-top-color: var(--accent); }
.wf-tiers > li > b { font-size: 16.5px; line-height: 1.3; font-weight: 600; color: var(--ink); }
.wf-tiers ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wf-tiers ul li { position: relative; padding-left: 12px; font-size: 14.5px; line-height: 1.45; color: var(--body); }
.wf-tiers ul li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; background: var(--accent); }
.wf-tiers .wf-ex { font-size: 14px; }
@media (max-width: 1023px) { .wf-tiers { grid-template-columns: 1fr 1fr; } }
@media (max-width: 639px) { .wf-tiers { grid-template-columns: 1fr; } }
.mk-check .mkf-doc dl > div { grid-template-columns: 1fr; gap: 2px; }
.wf-routes-note, .wf-relay-cap.wf-relay-note { max-width: 62em; }
@media (max-width: 639px) { .wf-feature > .wf-feature-copy { order: -1; } }
@media (max-width: 639px) { .wf-feature .wf-stack > .mk-jira { display: none; } }
p.wf-ex > b { font: 500 11.5px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-right: 4px; }
.wf-caseflow p.wf-ex > b { display: block; margin: 0 0 2px; }
@media (max-width: 767px) { .wf-lanes-foot .wf-branch { display: block; } .wf-lanes-foot .wf-branch::before { display: inline-block; vertical-align: middle; margin-right: 8px; } .wf-lanes-foot .wf-branch b { white-space: normal; } }