/* ==========================================================================
   site-ds.css: what the public site needs on top of ds.css.
   Tokens only: no colour, size, radius or duration is written here that is not
   a --ds-* token. Every block is a candidate to fold back into ds.css; the
   numbered list in each comment says what it adds and why.

   1 page hero  2 compact sections  3 row header cells  4 link lists and ruled index
   5 disclosure list (FAQ)  6 numbered steps  7 prose additions  8 callout content
   9 docs layout (side tabs on the desk, sheet beside)  10 endpoint line
   11 heading anchors  12 closing call  13 small pieces
   ========================================================================== */

/* 1. PAGE HERO: the inner-page version of ds-hero. Smaller block padding, and a
      slot under the two columns for facts, filters and a callout. */
.ds-hero--page { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) clamp(2rem, 1.2rem + 3vw, 3.5rem); }
/* A faint version of the landing glow (tokens in section 14) behind inner page heroes. */
.ds-hero--page { position: relative; isolation: isolate; }
.ds-hero--page::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(36rem 20rem at 88% 0%, color-mix(in oklab, var(--lp-glow) 55%, transparent), transparent 70%); }
.ds-hero__head { display: grid; gap: var(--ds-space-4); align-content: start; }
.ds-hero__below { display: grid; gap: var(--ds-space-6); max-width: 60rem; margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.ds-hero + .ds-section { border-top: var(--ds-border); }

/* 2. COMPACT SECTIONS: reference pages (engine, benchmarks, comparisons) have many
      short sections; the landing rhythm of 64 to 128px is too open for them. */
.ds-section--compact { padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); }
.ds-section--compact .ds-section__head, .ds-section__head--tight { margin-bottom: clamp(1.25rem, 1rem + 1.2vw, 2rem); }
.ds-section__head .ds-h3 { max-width: 40rem; }

/* 3. ROW HEADER CELLS: comparison tables name each row in the first column.
      ds.css styles every th as a column header; this gives th[scope=row] the
      weight of a primary cell and lets it stack with the row. */
.ds-table tbody th[scope="row"] { padding: 0.5625rem 0.75rem; border-bottom: var(--ds-border); color: var(--ds-ink); font: 500 var(--ds-text-sm)/1.35 var(--ds-font-text); text-align: start; white-space: normal; vertical-align: top; }
.ds-table tbody th[scope="row"]:first-child { padding-inline-start: 0; }
.ds-table--compare tbody th[scope="row"] { width: var(--w, 22%); min-width: 8rem; padding-block: 0.875rem; font-size: var(--ds-text-md); font-weight: 600; }
.ds-table--compare td > div { min-width: 0; }
.ds-table--compare td { overflow-wrap: anywhere; }
.ds-table--compare :where(td, th) :where(code) { padding: 0.1em 0.35em; border-radius: var(--ds-radius-xs); background: var(--ds-sunken); box-shadow: inset 0 0 0 1px var(--ds-line); color: var(--ds-ink); overflow-wrap: anywhere; }
.ds-table--compare :where(td, th) :where(a) { color: var(--ds-ink); text-decoration-color: var(--ds-line-control); text-underline-offset: 3px; }
.ds-table--compare :where(td, th) :where(a:hover) { text-decoration-color: currentColor; }
.ds-table .ds-btn { text-decoration: none; }
@container (max-width: 40rem) {
  .ds-table--stack tbody th[scope="row"] { display: block; grid-column: 1 / -1; width: auto; padding: 0 0 var(--ds-space-1); border: 0; font-size: var(--ds-text-base); }
  .ds-table--compare.ds-table--stack td[data-label]::before { flex: 0 0 6.5rem; }
  .ds-table--compare.ds-table--stack td { flex-wrap: nowrap; }
  .ds-table--compare.ds-table--stack td > div { flex: 1 1 0; }
}

/* 4. LINK LISTS AND RULED INDEX
      ds-list--links: ds-row was built for dashboard lists with a lead glyph. On the
      site a row is a title, one line of text and where it goes; the body starts at
      the page edge and the title may wrap.
      ds-index: a ruled grid of plain blocks (no boxes) for many small entries. */
.ds-list--links { border-top: 1px solid var(--ds-line-2); }
.ds-list--links .ds-row { padding-block: var(--ds-space-4); gap: var(--ds-space-1) var(--ds-space-6); align-items: baseline; }
.ds-list--links .ds-row:last-child { border-bottom: var(--ds-border); }
.ds-list--links .ds-row__body { grid-column: 1 / 3; display: grid; gap: var(--ds-space-1); }
.ds-list--links .ds-row__title { white-space: normal; font: 600 var(--ds-text-h4)/1.3 var(--ds-font-text); }
.ds-list--links .ds-row__meta { display: block; max-width: 62ch; font-size: var(--ds-text-base); line-height: 1.5; color: var(--ds-ink-2); }
.ds-list--links .ds-row__trail .ds-icon { transition: transform var(--ds-dur-2) var(--ds-ease-out); }
.ds-list--links a.ds-row:hover .ds-row__trail .ds-icon { transform: translateX(3px); }
@container (max-width: 30rem) { .ds-list--links .ds-row { grid-template-columns: minmax(0, 1fr) auto; } .ds-list--links .ds-row__body { grid-column: 1; } .ds-list--links .ds-row__trail { grid-column: 2; } .ds-list--links .ds-row__trail > span { display: none; } }

.ds-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--min, 18rem), 100%), 1fr)); gap: var(--ds-space-8); }
.ds-index--fit { grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 14rem), 100%), 1fr)); }
.ds-index__item { display: grid; gap: var(--ds-space-2); align-content: start; min-width: 0; padding-top: var(--ds-space-4); border-top: 1px solid var(--ds-line-2); }
.ds-index__item > p:not([class]) { color: var(--ds-ink-2); font-size: var(--ds-text-base); line-height: 1.5; }
.ds-index__item :where(p a) { color: var(--ds-ink); text-decoration-color: var(--ds-line-control); text-underline-offset: 3px; }
.ds-index__links { display: flex; flex-wrap: wrap; gap: var(--ds-space-1) var(--ds-space-5); margin-top: var(--ds-space-1); font-size: var(--ds-text-base); }
@media (pointer: coarse), (max-width: 640px) { .ds-index__links .ds-link, .ds-linkrow .ds-link { min-height: 2.75rem; align-items: center; display: inline-flex; } }

/* 5. DISCLOSURE LIST: questions and answers as native details, ruled, no boxes. */
.ds-faq { max-width: 60rem; border-top: 1px solid var(--ds-line-2); }
.ds-faq details { border-bottom: var(--ds-border); }
.ds-faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-4); min-height: 3.25rem; padding-block: var(--ds-space-3); cursor: pointer; list-style: none; font: 600 var(--ds-text-h4)/1.3 var(--ds-font-text); color: var(--ds-ink); -webkit-tap-highlight-color: transparent; }
.ds-faq summary::-webkit-details-marker { display: none; }
.ds-faq summary::after { content: ""; flex: none; width: 0.5rem; height: 0.5rem; margin-inline-end: 0.25rem; border-right: 1.5px solid var(--ds-ink-2); border-bottom: 1.5px solid var(--ds-ink-2); transform: translateY(-25%) rotate(45deg); transition: transform var(--ds-dur-2) var(--ds-ease-out); }
.ds-faq details[open] > summary::after { transform: translateY(25%) rotate(225deg); }
.ds-faq summary:hover::after { border-color: var(--ds-ink); }
.ds-faq summary:focus-visible { outline-offset: -2px; border-radius: var(--ds-radius-xs); }
.ds-faq details > :not(summary) { max-width: var(--ds-w-prose); padding-bottom: var(--ds-space-5); font-size: var(--ds-text-base); line-height: var(--ds-leading-prose); color: var(--ds-ink-2); }
.ds-faq details > :not(summary) :where(a) { color: var(--ds-ink); text-decoration-color: var(--ds-line-control); text-underline-offset: 3px; }

/* 6. NUMBERED STEPS: how something works, in order. The number is text, not a tile. */
.ds-steps { display: grid; gap: var(--ds-space-5); counter-reset: ds-step; }
.ds-steps > li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--ds-space-3); counter-increment: ds-step; padding-top: var(--ds-space-4); border-top: var(--ds-border); }
.ds-steps > li:first-child { border-top: 1px solid var(--ds-line-2); }
.ds-steps > li::before { content: counter(ds-step); font: 600 var(--ds-text-h4)/1.3 var(--ds-font-text); color: var(--ds-ink-3); }
.ds-steps p { margin-top: var(--ds-space-1); color: var(--ds-ink-2); font-size: var(--ds-text-base); line-height: 1.5; }

/* 7. PROSE ADDITIONS: long pages hold code, tables and callouts between paragraphs,
      and group their content in sections. */
.ds-prose--wide { max-width: 54rem; }
.ds-prose--wide :where(p, ul, ol, h2, h3, h4) { max-width: var(--ds-w-prose); }
.ds-prose :where(section, article) > * + * { margin-top: 1em; }
.ds-prose :where(section, article) > :where(h2) { margin-top: 2.4em; }
.ds-prose :where(section, article) > :where(h3) { margin-top: 2em; }
.ds-prose :where(section, article) > :where(h4) { margin-top: 1.6em; }
.ds-prose :where(section, article) > :where(h2, h3, h4):first-child { margin-top: 0; }
.ds-prose > section + section { margin-top: var(--ds-space-12); padding-top: var(--ds-space-12); border-top: var(--ds-border); }
.ds-prose > section[id], .ds-prose > article[id] { scroll-margin-top: var(--ds-space-6); }
.ds-prose :where(section > h2:first-child) { margin-top: 0; }
.ds-prose :where(h4) { font: 600 var(--ds-text-md)/1.4 var(--ds-font-text); color: var(--ds-ink); margin-top: 1.6em; scroll-margin-top: 6rem; }
.ds-prose :where(h2, h3, h4) :where(code) { font-size: 0.9em; }
.ds-prose :where(ul, ol) :where(ul, ol) { margin-top: 0.35em; }
.ds-prose .ds-code :where(code), .ds-prose .ds-table :where(code) { box-shadow: none; }
.ds-prose .ds-code pre :where(code) { padding: 0; background: none; color: inherit; }
.ds-prose .ds-table { font-size: var(--ds-text-sm); }
.ds-prose .ds-list a, .ds-prose a.ds-btn, .ds-prose a.ds-anchor { text-decoration: none; }
.ds-prose .ds-row__title, .ds-prose .ds-row__meta { margin-top: 0; }
.ds-prose > article + article { margin-top: var(--ds-space-12); padding-top: var(--ds-space-12); border-top: var(--ds-border); }
.ds-prose :where(p, li, dd) { overflow-wrap: break-word; }

/* 8. CALLOUT CONTENT: callouts on the site hold paragraphs and sometimes code. */
.ds-callout > div > * + * { margin-top: 0.5em; }
.ds-callout :where(strong) { color: var(--ds-ink); font-weight: 600; }
.ds-callout :where(a) { color: var(--ds-ink); text-decoration-color: var(--ds-line-control); text-underline-offset: 3px; }
.ds-callout :where(:not(pre) > code) { padding: 0.1em 0.35em; border-radius: var(--ds-radius-xs); background: var(--ds-sheet); box-shadow: inset 0 0 0 1px var(--ds-line); color: var(--ds-ink); overflow-wrap: anywhere; }
.ds-callout .ds-code { background: var(--ds-sheet); }
.ds-marketing .ds-callout { font-size: var(--ds-text-base); line-height: 1.55; }

/* 9. DOCS LAYOUT: the side-tab pattern at page size. The navigation sits on the desk,
      the reading column is the sheet, and the current section is a tab joined to it.
      Under 62rem the navigation is a disclosure above the sheet. */
.ds-docs { display: grid; grid-template-columns: minmax(0, 1fr); }
.ds-docsmain { overflow-x: clip; }
.ds-docs__nav { min-width: 0; padding-block: var(--ds-space-3); }
.ds-docs__nav > summary { display: flex; align-items: center; gap: var(--ds-space-2); min-height: 2.75rem; cursor: pointer; list-style: none; font: 500 var(--ds-text-md)/1 var(--ds-font-text); color: var(--ds-ink); }
.ds-docs__nav > summary::-webkit-details-marker { display: none; }
.ds-docs__nav > summary .ds-icon { transition: transform var(--ds-dur-2) var(--ds-ease-out); }
.ds-docs__nav[open] > summary .ds-icon { transform: rotate(90deg); }
.ds-docs__tools { display: grid; gap: var(--ds-space-2); padding-block: var(--ds-space-2) var(--ds-space-3); }
.ds-docs__nav .ds-sidenav { padding-block: 0 var(--ds-space-4); box-shadow: none; }
.ds-docs__nav .ds-sidenav__item[aria-current="location"] { background: var(--ds-sheet); border-color: var(--ds-line-2); color: var(--ds-ink); }
.ds-docs__nav .ds-sidenav__item { min-height: var(--ds-h-sm); }
.ds-docs__hint { font-size: var(--ds-text-sm); color: var(--ds-ink-3); padding-inline: 0.625rem; }
.ds-docs__sheet { position: relative; isolation: isolate; min-width: 0; padding-block: var(--ds-space-8) var(--ds-space-16); }
.ds-docs__sheet::before { content: ""; position: absolute; z-index: -1; inset: 0 -100vw; background: var(--ds-sheet); box-shadow: inset 0 1px 0 var(--ds-line-2); }
.ds-docs__head { display: grid; gap: var(--ds-space-4); padding-bottom: var(--ds-space-8); margin-bottom: var(--ds-space-8); border-bottom: var(--ds-border); }
.ds-docs__pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ds-space-3) var(--ds-space-6); padding-top: var(--ds-space-4); font-size: var(--ds-text-base); }
.ds-docs__pager a { display: grid; gap: 0.125rem; min-height: 2.75rem; align-content: center; text-decoration: none; color: var(--ds-ink); font-weight: 500; }
.ds-docs__pager a small { font-weight: 400; font-size: var(--ds-text-sm); color: var(--ds-ink-3); }
.ds-docs__pager a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.ds-docs__pager a[rel="next"] { margin-inline-start: auto; text-align: end; }
@media (min-width: 62rem) {
  .ds-docs { grid-template-columns: 15.5rem minmax(0, 1fr); }
  .ds-docs__nav { position: sticky; top: 0; align-self: start; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--ds-line-2) transparent; padding-block: var(--ds-space-6) var(--ds-space-10); box-shadow: inset -1px 0 0 var(--ds-line-2); }
  .ds-docs__nav > summary { display: none; }
  .ds-docs__tools { padding-inline-end: var(--ds-space-4); }
  .ds-docs__sheet { padding-inline-start: var(--ds-space-12); padding-block: var(--ds-space-10) var(--ds-space-20); }
  .ds-docs__sheet::before { inset: 0 -100vw 0 0; box-shadow: none; }
}

/* 10. ENDPOINT LINE: method, path and what it does, on one ruled line. */
.ds-endpoint { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ds-space-1) var(--ds-space-3); padding: var(--ds-space-2) var(--ds-space-3); border: var(--ds-border-frame); border-radius: var(--ds-radius-sm); background: var(--ds-sunken); font-size: var(--ds-text-md); }
.ds-endpoint .ds-badge { align-self: center; min-width: 3.25rem; justify-content: center; }
.ds-endpoint code { color: var(--ds-ink); font-size: var(--ds-text-sm); overflow-wrap: anywhere; min-width: 0; padding: 0; background: none; box-shadow: none; }
.ds-endpoint__desc { margin-inline-start: auto; color: var(--ds-ink-3); font-size: var(--ds-text-sm); }
.ds-endpoint + .ds-endpoint { margin-top: var(--ds-space-2); }
@media (max-width: 640px) { .ds-endpoint__desc { flex-basis: 100%; margin-inline-start: 0; } }

/* 11. HEADING ANCHORS: a link to the section, shown on hover and focus, always on touch. */
.ds-anchor { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-inline-start: 0.25rem; vertical-align: middle; border-radius: var(--ds-radius-xs); color: var(--ds-ink-3); opacity: 0; transition: opacity var(--ds-dur-1), background-color var(--ds-dur-1); }
:is(h2, h3, h4):hover > .ds-anchor, .ds-anchor:focus { opacity: 1; }
.ds-anchor:hover { background: var(--ds-hover); color: var(--ds-ink); }
.ds-anchor[data-copied] { opacity: 1; color: var(--ds-green-ink); }
@media (hover: none) { .ds-anchor { opacity: 1; } }
@media (pointer: coarse) { .ds-anchor { width: 2.75rem; height: 2.75rem; margin-block: -0.625rem; } }

/* ==========================================================================
   16. ROUND 4: DEVELOPER PAGES (docs, cookbook, guides, engine, benchmarks, status)
       body.dv sits on the landing surfaces (body also carries .lp for the
       page colour and the see-through chrome). Pieces are prefixed dv-.
       16a shared pieces  16b docs  16c proof pages and status  16d guides and cookbook
   ========================================================================== */
/* 16a. Shared --------------------------------------------------------------- */
.dv .ds-section + .ds-section, .dv .ds-hero + .ds-section { border-top: 0; }
.dv-main { position: relative; overflow-x: clip; }

/* Hero: the landing glow and grid, fainter, in the top right corner. */
.dv-hero { position: relative; isolation: isolate; padding-block: clamp(2.25rem, 1rem + 4vw, 4.5rem) clamp(1.75rem, 1rem + 2.5vw, 3rem); }
.dv-hero::before { content: ""; position: absolute; z-index: -2; inset: -6rem 0 -2rem; pointer-events: none;
  background: radial-gradient(38rem 24rem at 82% 18%, color-mix(in oklab, var(--lp-glow) 70%, transparent), transparent 70%), radial-gradient(26rem 18rem at 6% 0%, var(--lp-glow-2), transparent 70%); }
.dv-hero::after { content: ""; position: absolute; z-index: -1; inset: -6rem 0 0; pointer-events: none;
  background-image: linear-gradient(var(--lp-grid) 1px, transparent 1px), linear-gradient(90deg, var(--lp-grid) 1px, transparent 1px); background-size: 3.5rem 3.5rem; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 55% 75% at 78% 20%, black, transparent 72%); mask-image: radial-gradient(ellipse 55% 75% at 78% 20%, black, transparent 72%); }
.dv-hero__grid { display: grid; gap: var(--ds-space-6) var(--ds-space-12); align-items: end; }
.dv-hero__copy { display: grid; gap: var(--ds-space-5); justify-items: start; align-content: start; max-width: 50rem; }
.dv-hero__title { font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); line-height: 1.02; letter-spacing: -0.04em;
  background: linear-gradient(180deg, var(--ds-ink) 35%, color-mix(in oklab, var(--ds-ink) 72%, var(--lp-bg))); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 0.06em; }
.dv-hero .lp-lead :where(a) { color: var(--ds-ink); text-decoration-color: var(--ds-line-control); text-underline-offset: 3px; }
.dv-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-3) var(--ds-space-5); }

/* Facts: a strip of icon, label and value under a hero (time, needs, package, tested). */
.dv-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: 1px; margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); overflow: hidden; border: 1px solid var(--lp-edge); border-radius: var(--lp-radius); background: var(--lp-edge); box-shadow: var(--lp-shadow); }
.dv-facts > div { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon label" "icon value"; align-items: center; gap: 0.125rem var(--ds-space-3); padding: var(--ds-space-4) var(--ds-space-5); background: var(--lp-surface); }
.dv-facts .lp-icon { grid-area: icon; width: 2.25rem; height: 2.25rem; }
.dv-facts dt { grid-area: label; font-size: var(--ds-text-sm); color: var(--ds-ink-3); }
.dv-facts dd { grid-area: value; min-width: 0; font-weight: 600; font-size: var(--ds-text-md); line-height: 1.35; color: var(--ds-ink); overflow-wrap: anywhere; }
.dv-facts dd :where(code) { font-weight: 400; }

/* A surface card, as on the landing page. */
.dv-card { padding: clamp(1.25rem, 0.9rem + 1.5vw, 2rem); border: 1px solid var(--lp-edge); border-radius: var(--lp-radius-lg); background: var(--lp-surface); box-shadow: var(--lp-shadow); }

/* Code blocks and callouts sit on the landing surfaces. */
.dv .ds-code { border: 1px solid var(--lp-edge); border-radius: var(--lp-radius); background: var(--lp-surface); box-shadow: var(--lp-shadow); }
.dv .ds-code__bar { background: var(--lp-surface-2); box-shadow: inset 0 -1px 0 var(--lp-edge); padding-inline-start: 0.75rem; }
.dv .ds-code__bar .ds-tabs { --_surface: var(--lp-surface); }
.dv .ds-code__bar .ds-tab[aria-selected="true"] { border-color: var(--lp-edge); }
.dv .ds-code__title { display: inline-flex; align-items: center; gap: var(--ds-space-2); }
.dv .ds-code__title::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--lp-edge-2); }
.dv .ds-code pre { font-size: var(--ds-text-xs); line-height: 1.75; }
.dv .ds-callout { border-radius: var(--ds-radius-md); padding: var(--ds-space-4) var(--ds-space-5); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--_ink) 26%, transparent), inset 3px 0 0 color-mix(in oklab, var(--_ink) 70%, transparent); }
.dv .ds-callout:not([class*="ds-callout--"]) { --_wash: var(--lp-surface); }

/* What you get: a check list on a card. */
.dv-get { display: grid; gap: var(--ds-space-4); padding: clamp(1.25rem, 0.9rem + 1.5vw, 1.75rem); border: 1px solid color-mix(in oklab, var(--ds-green) 30%, var(--lp-edge)); border-radius: var(--lp-radius); background: linear-gradient(135deg, color-mix(in oklab, var(--ds-green-wash) 55%, var(--lp-surface)), var(--lp-surface) 60%); box-shadow: var(--lp-shadow); }
.dv-get__title { display: flex; align-items: center; gap: var(--ds-space-3); font: 600 var(--ds-text-h4)/1.3 var(--ds-font-text); color: var(--ds-ink); }
.dv-get .lp-points { font-size: var(--ds-text-base); }

/* Related pages: landing tiles, two or three across. */
.dv-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: var(--ds-space-3); }
.dv-related .lp-tile { align-items: start; }
.dv-related .lp-tile__title { font-size: var(--ds-text-base); }

/* Section heads on dv pages: the landing head with a smaller h2. */
.dv-head { display: grid; gap: var(--ds-space-3); max-width: 46rem; margin-bottom: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
.dv-head .ds-h2 { letter-spacing: -0.04em; }
.dv-head p { color: var(--ds-ink-2); font-size: var(--ds-text-lg); line-height: 1.5; }
.dv-section { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }

/* Closing call on dv pages: the landing box. */
.dv .lp-cta { padding-top: clamp(1rem, 0.5rem + 2vw, 2rem); }

/* Fold: a quiet details for detail that most readers skip. */
.dv-fold { border: 1px solid var(--lp-edge); border-radius: var(--lp-radius); background: var(--lp-surface); }
.dv-fold > summary { display: flex; align-items: center; gap: var(--ds-space-3); min-height: 3rem; padding: var(--ds-space-3) var(--ds-space-5); cursor: pointer; list-style: none; font-weight: 600; color: var(--ds-ink); }
.dv-fold > summary::-webkit-details-marker { display: none; }
.dv-fold > summary::after { content: ""; flex: none; width: 0.5rem; height: 0.5rem; margin-inline-start: auto; border-right: 1.5px solid var(--ds-ink-2); border-bottom: 1.5px solid var(--ds-ink-2); transform: translateY(-25%) rotate(45deg); transition: transform var(--ds-dur-2) var(--ds-ease-out); }
.dv-fold[open] > summary::after { transform: translateY(25%) rotate(225deg); }
.dv-fold > summary small { font-weight: 400; color: var(--ds-ink-3); font-size: var(--ds-text-sm); }
.dv-fold > :not(summary) { margin: 0 var(--ds-space-5) var(--ds-space-5); }
.dv-fold > summary:focus-visible { outline-offset: -2px; border-radius: var(--lp-radius); }

/* 16b. Docs (docs.html) ----------------------------------------------------- */
/* Layout: the page colour runs under nav and reading column; the nav is a quiet rail. */
.dv .ds-docs__sheet::before { background: none; box-shadow: none; }
.dv .ds-docs .ds-prose > section + section { margin-top: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); padding-top: clamp(3rem, 2rem + 3vw, 4.5rem); border-top: 1px solid var(--lp-edge); }
@media (min-width: 62rem) {
  .dv .ds-docs { grid-template-columns: 16.5rem minmax(0, 1fr); }
  .dv .ds-docs__nav { padding-block: var(--ds-space-6) var(--ds-space-12); box-shadow: inset -1px 0 0 var(--lp-edge); }
  .dv .ds-docs__sheet { padding-inline-start: clamp(2rem, 0.5rem + 3vw, 3.5rem); padding-block-start: 0; }
}

/* Side nav: group titles in ink, items on a guide line, the current one marked in ink. */
.dv .ds-docs__tools .ds-input { background: var(--lp-surface); border-color: var(--lp-edge-2); }
.dv .ds-docs__tools .ds-input:hover { border-color: var(--ds-ink-3); }
.dv .ds-docs__nav .ds-sidenav { gap: 0; padding-inline-end: var(--ds-space-3); }
.dv .ds-docs__nav .ds-sidenav__label { margin: var(--ds-space-6) 0 var(--ds-space-2); padding-inline: 0.625rem; font: 600 var(--ds-text-sm)/1.3 var(--ds-font-text); color: var(--ds-ink); }
.dv .ds-docs__nav .ds-sidenav__label:first-child { margin-top: var(--ds-space-2); }
.dv .ds-docs__nav .ds-sidenav__item { position: relative; min-height: 2rem; margin-inline-start: 0.625rem; padding: 0.3125rem 0.5rem 0.3125rem 0.875rem; border: 0; border-radius: 0 var(--ds-radius-sm) var(--ds-radius-sm) 0; box-shadow: inset 1px 0 0 var(--lp-edge-2); color: var(--ds-ink-2); font: 400 var(--ds-text-sm)/1.35 var(--ds-font-text); transition: background-color var(--ds-dur-1), color var(--ds-dur-1), box-shadow var(--ds-dur-1); }
.dv .ds-docs__nav .ds-sidenav__item:hover { background: var(--lp-surface); color: var(--ds-ink); box-shadow: inset 1px 0 0 var(--ds-ink-3); }
.dv .ds-docs__nav .ds-sidenav__item[aria-current="location"] { background: var(--lp-surface-2); color: var(--ds-ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--ds-ink); }
.dv .ds-docs__nav [data-docs-results] .ds-sidenav__item { margin-inline-start: 0; }
.dv .ds-docs__hint { padding-inline: 0; }
/* Method tag on nav items that are one endpoint. */
.dv-navm { --_m: var(--ds-ink-2); flex: none; margin-inline-start: auto; padding-inline-start: var(--ds-space-2); font: 600 0.625rem/1 var(--ds-font-code); letter-spacing: 0.02em; color: var(--_m); }
.dv-navm[data-m="get"] { --_m: var(--ds-blue-ink); }
.dv-navm:is([data-m="patch"], [data-m="put"]) { --_m: var(--ds-amber-ink); }
.dv-navm[data-m="delete"] { --_m: var(--ds-red-ink); }
.dv-navm[data-m="post"] { --_m: var(--ds-ink-3); }

/* Phones and tablets: the section list is a sticky bar naming where you are; it opens over the page. */
@media (max-width: 61.99rem) {
  .dv .ds-docs__nav { position: sticky; top: 0; z-index: var(--ds-z-sticky); margin-inline: calc(-1 * var(--ds-gutter)); padding: 0 var(--ds-gutter); background: color-mix(in oklab, var(--lp-bg) 84%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 1px 0 var(--lp-edge); }
  .dv .ds-docs__nav > summary { gap: 0.625rem; min-height: 3rem; font-size: var(--ds-text-sm); }
  .dv .ds-docs__nav > summary .ds-icon, .dv .ds-docs__nav[open] > summary .ds-icon { transform: none; color: var(--ds-ink-3); }
  .dv-docnav__label { flex: none; color: var(--ds-ink-2); font-weight: 500; }
  .dv-docnav__now { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ds-ink); font-weight: 600; }
  .dv-docnav__now:not(:empty)::before { content: "/"; margin-inline-end: 0.625rem; color: var(--ds-ink-4); font-weight: 400; }
  .dv-docnav__chev { flex: none; margin-inline-start: auto; }
  .dv-docnav__panel { position: absolute; top: calc(100% + 0.375rem); left: var(--ds-space-2); right: var(--ds-space-2); max-height: min(72dvh, 40rem); overflow-y: auto; overscroll-behavior: contain; padding: var(--ds-space-3); border: 1px solid var(--lp-edge-2); border-radius: var(--lp-radius); background: var(--lp-surface); box-shadow: var(--lp-shadow), 0 1.5rem 3rem -1rem var(--lp-drop); }
  .dv-docnav__panel { padding-block-start: 0; }
  .dv-docnav__panel .ds-docs__tools { position: sticky; top: 0; z-index: 1; margin-inline: calc(-1 * var(--ds-space-3)); padding: var(--ds-space-3); background: var(--lp-surface); box-shadow: 0 1px 0 var(--lp-edge); }
  .dv .dv-start { padding: var(--ds-space-4); margin-inline: calc(-1 * var(--ds-space-2)); }
  .dv .ds-docs__nav .ds-sidenav { padding-block-end: 0; }
  .dv .ds-docs__nav .ds-sidenav__item { min-height: 2.75rem; }
  .dv .ds-docs__sheet { padding-block-start: var(--ds-space-2); }
}

/* Header: the hero glow, the title, and a three step start. */
.dv .dv-dochead { gap: clamp(1.75rem, 1rem + 2.5vw, 2.75rem); padding-block: clamp(1.5rem, 0.5rem + 3vw, 3rem) clamp(2rem, 1rem + 3vw, 3.5rem); margin-bottom: 0; border-bottom: 0; }
.dv .dv-dochead::before { inset: -6rem calc(-1 * var(--ds-gutter)) -2rem 0; background: radial-gradient(40rem 26rem at 80% 16%, color-mix(in oklab, var(--lp-glow) 70%, transparent), transparent 70%); }
.dv .dv-dochead::after { inset: -6rem calc(-1 * var(--ds-gutter)) 0 0; -webkit-mask-image: radial-gradient(ellipse 50% 60% at 80% 18%, black, transparent 72%); mask-image: radial-gradient(ellipse 50% 60% at 80% 18%, black, transparent 72%); }
.dv .dv-dochead .dv-hero__copy { gap: var(--ds-space-4); }
.dv .dv-dochead .lp-lead { max-width: 40em; font-size: var(--ds-text-lg); }
.dv .dv-dochead .ds-linkrow { margin-top: var(--ds-space-1); }
.dv-dochead__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); }
.dv-dochead__kicker .ds-badge { font: 600 var(--ds-text-2xs)/1 var(--ds-font-code); letter-spacing: 0.04em; background: var(--lp-surface-2); box-shadow: inset 0 0 0 1px var(--lp-edge-2); color: var(--ds-ink-2); }
.dv-dochead__kicker code { font: 400 var(--ds-text-sm)/1.3 var(--ds-font-code); color: var(--ds-ink-2); }

.dv-start { display: grid; gap: var(--ds-space-6) var(--ds-space-8); padding: clamp(1.25rem, 0.8rem + 1.6vw, 2rem); border: 1px solid var(--lp-edge); border-radius: var(--lp-radius-lg); background: linear-gradient(160deg, var(--lp-surface-2), var(--lp-surface) 45%); box-shadow: var(--lp-shadow); }
.dv-start__title { font: 600 var(--ds-text-h4)/1.3 var(--ds-font-display); font-stretch: 108%; letter-spacing: -0.02em; color: var(--ds-ink); }
.dv-start__steps { display: grid; align-content: start; margin: 0; padding: 0; list-style: none; }
.dv-start__steps > li { position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--ds-space-4); padding-bottom: var(--ds-space-6); }
.dv-start__steps > li:last-child { padding-bottom: 0; }
.dv-start__steps > li:not(:last-child)::before { content: ""; position: absolute; left: calc(1rem - 0.5px); top: 2.5rem; bottom: 0.5rem; width: 1px; background: linear-gradient(var(--lp-edge-2), var(--lp-edge)); }
.dv-start__n { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--lp-edge-2); border-radius: 50%; background: var(--lp-surface-2); box-shadow: inset 0 1px 0 var(--lp-shine); font: 600 var(--ds-text-sm)/1 var(--ds-font-text); color: var(--ds-ink); }
.dv-start__steps h3 { margin-top: 0.3125rem; font: 600 var(--ds-text-md)/1.3 var(--ds-font-text); color: var(--ds-ink); }
.dv-start__steps p { margin-top: var(--ds-space-1); font-size: var(--ds-text-sm); line-height: 1.55; color: var(--ds-ink-2); }
.dv-start__steps p :where(a:not(.ds-btn)) { color: var(--ds-ink); text-decoration: underline; text-decoration-color: var(--ds-line-control); text-underline-offset: 3px; }
.dv-start__steps p :where(a:not(.ds-btn):hover) { text-decoration-color: currentColor; }
.dv-start__steps code { padding: 0.1em 0.35em; border-radius: var(--ds-radius-xs); background: var(--lp-bg); box-shadow: inset 0 0 0 1px var(--lp-edge); font: 400 0.92em/1 var(--ds-font-code); color: var(--ds-ink); }
.dv-start__steps .dv-start__act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2) var(--ds-space-4); margin-top: var(--ds-space-3); }
.dv-start__act .ds-link { font-size: var(--ds-text-sm); }
.dv-start__demo { display: grid; gap: var(--ds-space-3); min-width: 0; }
.dv-start .ds-code { box-shadow: none; }
.dv-start .ds-code pre { white-space: pre; }
.dv-start__res pre { padding-block: var(--ds-space-3); }
.dv-start__res .ds-code__title::before { display: none; }
@media (min-width: 75rem) {
  .dv-start { grid-template-columns: minmax(16rem, 0.75fr) minmax(0, 1.5fr); }
  .dv-start__title { grid-column: 1 / -1; }
}

/* Section titles: bigger, with an icon tile beside them. */
.dv .ds-docs .dv-h2 { display: flex; align-items: center; gap: var(--ds-space-3); font-size: clamp(1.5rem, 1.2rem + 0.9vw, 1.875rem); line-height: 1.15; letter-spacing: -0.035em; }
.dv .ds-docs .dv-h2 .lp-icon { width: 2.25rem; height: 2.25rem; }
.dv .ds-docs .ds-prose :where(h3) { font-size: var(--ds-text-lg); letter-spacing: -0.01em; }
.dv .ds-docs .ds-prose > section > h3 { margin-top: 2.75em; }
.dv .ds-docs .ds-prose :where(:not(pre) > code) { background: var(--lp-surface-2); box-shadow: inset 0 0 0 1px var(--lp-edge); }
.dv .ds-docs .ds-prose :where(h2, h3, h4) :where(code) { background: none; box-shadow: none; padding: 0; }

/* Endpoint line: method badge, the path in mono, what it does. */
.dv .ds-docs .ds-endpoint { align-items: center; gap: var(--ds-space-2) var(--ds-space-3); padding: 0.625rem 0.875rem 0.625rem 0.625rem; border: 1px solid var(--lp-edge); border-radius: var(--ds-radius-md); background: var(--lp-surface); box-shadow: inset 0 1px 0 var(--lp-shine); }
.dv .ds-docs .ds-prose .ds-endpoint { max-width: none; }
.dv .ds-docs .ds-endpoint + .ds-endpoint { margin-top: -1px; }
.dv .ds-docs .ds-endpoint:has(+ .ds-endpoint) { border-end-start-radius: 0; border-end-end-radius: 0; }
.dv .ds-docs .ds-endpoint + .ds-endpoint { border-start-start-radius: 0; border-start-end-radius: 0; }
.dv .ds-docs .ds-endpoint .ds-badge { --_m: var(--ds-ink); min-width: 3.75rem; height: 1.5rem; padding-inline: 0.5rem; font: 600 var(--ds-text-2xs)/1 var(--ds-font-code); letter-spacing: 0.04em; color: var(--_m); background: color-mix(in oklab, var(--_m) 11%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--_m) 30%, transparent); }
.dv .ds-docs .ds-endpoint .ds-badge--blue { --_m: var(--ds-blue-ink); }
.dv .ds-docs .ds-endpoint .ds-badge--amber { --_m: var(--ds-amber-ink); }
.dv .ds-docs .ds-endpoint .ds-badge--red { --_m: var(--ds-red-ink); }
.dv .ds-docs .ds-endpoint > code { font: 500 var(--ds-text-md)/1.4 var(--ds-font-code); color: var(--ds-ink); background: none; box-shadow: none; padding: 0; }
.dv-pp { color: var(--ds-ink-3); }
.dv .ds-docs .ds-endpoint__desc { color: var(--ds-ink-3); font-size: var(--ds-text-sm); line-height: 1.45; text-align: end; }
.dv .ds-docs .ds-endpoint__desc code { font-size: 0.95em; }
@media (max-width: 640px) {
  .dv .ds-docs .ds-endpoint { padding: 0.625rem 0.75rem; }
  .dv .ds-docs .ds-endpoint > code { font-size: var(--ds-text-sm); }
  .dv .ds-docs .ds-endpoint__desc { text-align: start; }
}

/* HTTP status: a small pill, amber for 4xx, red for 5xx. */
.dv-http { --_s: var(--ds-ink-2); display: inline-flex; align-items: center; height: 1.375rem; padding-inline: 0.4375rem; border-radius: var(--ds-radius-xs); background: color-mix(in oklab, var(--_s) 11%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--_s) 28%, transparent); color: var(--_s); font: 600 var(--ds-text-xs)/1 var(--ds-font-code); white-space: nowrap; }
.dv-http[data-c="4"] { --_s: var(--ds-amber-ink); }
.dv-http[data-c="5"] { --_s: var(--ds-red-ink); }

/* Tables: a framed card with a header band; field names in mono, types quiet. */
.dv .ds-docs .ds-prose .ds-table-wrap { border: 1px solid var(--lp-edge); border-radius: var(--lp-radius); background: var(--lp-surface); box-shadow: inset 0 1px 0 var(--lp-shine); }
.dv .ds-docs .ds-table thead th { padding: 0.625rem 1rem; background: var(--lp-surface-2); border-bottom: 1px solid var(--lp-edge); color: var(--ds-ink-3); font: 500 var(--ds-text-xs)/1.3 var(--ds-font-text); }
.dv .ds-docs .ds-table tbody :is(th, td) { padding: 0.8125rem 1rem; border-bottom: 1px solid var(--lp-edge); }
.dv .ds-docs .ds-table tbody tr:last-child > :is(th, td) { border-bottom: 0; }
.dv .ds-docs .ds-table tbody tr:hover { background: color-mix(in oklab, var(--lp-surface-2) 55%, transparent); }
.dv .ds-docs .ds-table tbody th[scope="row"] { font-size: var(--ds-text-sm); }
.dv .ds-docs .ds-table tbody th[scope="row"] code { padding: 0; background: none; box-shadow: none; font: 500 var(--ds-text-sm)/1.45 var(--ds-font-code); color: var(--ds-ink); overflow-wrap: anywhere; }
.dv .ds-docs .ds-table td code { background: var(--lp-surface-2); box-shadow: inset 0 0 0 1px var(--lp-edge); }
.dv .ds-docs .ds-table td[data-label="Type"] { white-space: nowrap; font: 400 var(--ds-text-xs)/1.75 var(--ds-font-code); color: var(--ds-ink-3); }
.dv .ds-docs .ds-table td[data-label="Code"] code { padding: 0; background: none; box-shadow: none; font-weight: 500; color: var(--ds-ink); }
.dv .ds-docs .ds-table tbody th[scope="row"]:has(> .dv-http) { width: 1%; min-width: 0; white-space: nowrap; }
.dv .ds-docs .ds-table--compare td { font-size: var(--ds-text-sm); line-height: 1.55; }
@container (max-width: 40rem) {
  .dv .ds-docs .ds-table--stack tr { grid-template-columns: minmax(0, 1fr) auto; gap: var(--ds-space-2) var(--ds-space-3); padding: 0.875rem 1rem; border-bottom: 1px solid var(--lp-edge); }
  .dv .ds-docs .ds-table--stack tbody tr:last-child { border-bottom: 0; }
  .dv .ds-docs .ds-table--stack tbody th[scope="row"] { grid-column: 1; width: auto; min-width: 0; padding: 0; border: 0; font-size: var(--ds-text-sm); }
  .dv .ds-docs .ds-table--stack :is(td[data-label="Notes"], tr:has(> th .dv-http) > td[data-label="What it means"])::before { display: none; }
  .dv .ds-docs .ds-table--stack tbody td { display: block; grid-column: 1 / -1; padding: 0; border: 0; font-size: var(--ds-text-sm); }
  .dv .ds-docs .ds-table--stack td[data-label]::before { display: block; margin-bottom: 0.125rem; font: 500 var(--ds-text-2xs)/1.4 var(--ds-font-text); color: var(--ds-ink-3); }
  .dv .ds-docs .ds-table--stack td[data-label="Type"] { grid-column: 2; grid-row: 1; align-self: center; }
  .dv .ds-docs .ds-table--stack tr:has(> th .dv-http) { grid-template-columns: auto minmax(0, 1fr); }
  .dv .ds-docs .ds-table--stack tr:has(> th .dv-http) > td[data-label="Code"] { grid-column: 2; grid-row: 1; align-self: center; }
  .dv .ds-docs .ds-table--stack :is(td[data-label="Type"], tr:has(> th .dv-http) > td[data-label="Code"])::before { display: none; }
}

/* Prev and next: two quiet cards. */
.dv .ds-docs__pager { gap: var(--ds-space-3); padding-top: var(--ds-space-10); }
.dv .ds-docs__pager a { flex: 1 1 14rem; max-width: 24rem; padding: 0.75rem 1rem; border: 1px solid var(--lp-edge); border-radius: var(--lp-radius); background: var(--lp-surface); transition: border-color var(--ds-dur-1), background-color var(--ds-dur-1); }
.dv .ds-docs__pager a:hover { border-color: var(--lp-edge-2); background: var(--lp-surface-2); }
.dv .ds-docs__pager a:hover span { text-decoration: none; }
/* 16b end */

/* 16c. Proof pages and status (engine.html, benchmarks.html, status.html) ---- */
/* Status words: an icon in its status colour and the word. A pass is a plain ink
   check (green means live); a gap or partial is amber, a miss red, no result muted. */
.pf-st { display: inline-flex; align-items: center; gap: 0.4375rem; font: 600 var(--ds-text-sm)/1.25 var(--ds-font-text); color: var(--ds-ink); white-space: nowrap; }
.pf-st .ds-icon { color: var(--ds-ink-2); }
.pf-st--gap, .pf-st--gap .ds-icon { color: var(--ds-amber-ink); }
.pf-st--fail, .pf-st--fail .ds-icon { color: var(--ds-red-ink); }
.pf-st--none { color: var(--ds-ink-3); font-weight: 500; }
.pf-st--none .ds-icon { color: var(--ds-ink-3); }

/* Dated badge: when a section was measured. */
.pf-date { display: inline-flex; align-items: center; gap: var(--ds-space-2); width: fit-content; min-height: 2rem; padding: 0.25rem 0.75rem; border: 1px solid var(--lp-edge); border-radius: var(--ds-radius-sm); background: var(--lp-surface-2); box-shadow: inset 0 1px 0 var(--lp-shine); font-size: var(--ds-text-sm); color: var(--ds-ink-2); white-space: nowrap; }
.pf-date .ds-icon { color: var(--ds-ink-3); }
.pf-date time { color: var(--ds-ink); font-weight: 600; }
.pf-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--ds-space-3) var(--ds-space-8); margin-bottom: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
.pf-head .dv-head { margin-bottom: 0; }
.pf-head .pf-date { margin-bottom: 0.25rem; }

/* Hero split: copy on the left, the diagram on the right. */
@media (min-width: 1000px) { .pf-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; } }
.pf-hero .dv-hero__copy { max-width: 44rem; }

/* How it works: four nodes joined by a line, built in HTML. */
.pf-flow { position: relative; padding: clamp(1.25rem, 0.9rem + 1.2vw, 1.75rem); border: 1px solid var(--lp-edge-2); border-radius: var(--lp-radius-lg); background: var(--lp-surface); box-shadow: var(--lp-shadow), 0 0 0 0.375rem color-mix(in oklab, var(--lp-surface) 35%, transparent); }
.pf-flow__cap { margin-bottom: var(--ds-space-4); font-size: var(--ds-text-sm); font-weight: 600; color: var(--ds-ink-3); }
.pf-flow__steps { display: grid; gap: var(--ds-space-4); }
.pf-flow__step { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon title" "icon text" ". chips"; align-items: center; gap: 0.125rem var(--ds-space-4); }
.pf-flow__step > .lp-icon { grid-area: icon; position: relative; z-index: 1; background: var(--lp-surface-2); }
.pf-flow__step > strong { grid-area: title; font-weight: 600; color: var(--ds-ink); line-height: 1.3; }
.pf-flow__step > span:not(.lp-icon) { grid-area: text; font-size: var(--ds-text-sm); line-height: 1.45; color: var(--ds-ink-3); }
.pf-flow__step > span code { font-size: 0.92em; color: var(--ds-ink-2); }
.pf-flow__step + .pf-flow__step::before { content: ""; position: absolute; left: 1.25rem; top: calc(-1 * var(--ds-space-4)); height: var(--ds-space-4); border-left: 1.5px dashed var(--lp-edge-2); }
.pf-flow__step--engine { margin-inline: calc(-1 * var(--ds-space-3)); padding: var(--ds-space-3); border: 1px solid color-mix(in oklab, var(--ds-ink) 18%, var(--lp-edge)); border-radius: var(--lp-radius); background: var(--lp-surface-2); }
.pf-flow__step + .pf-flow__step--engine::before { left: calc(1.25rem + var(--ds-space-3) - 1px); top: calc(-1 * var(--ds-space-4) - 1px); }
.pf-flow__step--engine > .lp-icon { background: var(--ds-ink); border-color: var(--ds-ink); color: var(--lp-bg); }
.pf-flow__chips { grid-area: chips; display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: var(--ds-space-2); }
.pf-flow__chips li { padding: 0.125rem 0.5rem; border: 1px solid var(--lp-edge); border-radius: var(--ds-radius-xs); background: var(--lp-surface); font-size: var(--ds-text-xs); line-height: 1.5; color: var(--ds-ink-2); }

/* Result rows: one row per area, check or site. Wide: columns; narrow: stacked. */
.pf-rows { container-type: inline-size; border: 1px solid var(--lp-edge); border-radius: var(--lp-radius-lg); background: var(--lp-surface); box-shadow: var(--lp-shadow); overflow: hidden; }
.pf-rows__cols { display: none; }
.pf-row { display: grid; align-items: start; gap: var(--ds-space-2); padding: var(--ds-space-4) clamp(1rem, 0.6rem + 1.5vw, 1.5rem); border-top: 1px solid var(--lp-edge); }
.pf-rows__list > .pf-row:first-child { border-top: 0; }
.pf-row__name { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-1) var(--ds-space-3); min-width: 0; }
.pf-row__name > strong { font-weight: 600; font-size: var(--ds-text-md); line-height: 1.35; color: var(--ds-ink); overflow-wrap: anywhere; }
.pf-row__name small { display: block; margin-top: 0.125rem; font-size: var(--ds-text-xs); font-weight: 400; color: var(--ds-ink-3); }
.pf-row :where(p) { font-size: var(--ds-text-sm); line-height: 1.6; color: var(--ds-ink-2); overflow-wrap: break-word; }
.pf-row__got > p:not(.pf-gap) { color: var(--ds-ink); }
.pf-row :where(code) { padding: 0.05em 0.3em; border-radius: var(--ds-radius-xs); background: var(--lp-surface-2); box-shadow: inset 0 0 0 1px var(--lp-edge); font-size: 0.9em; color: var(--ds-ink); overflow-wrap: anywhere; }
.pf-row__name > strong code { padding: 0; background: none; box-shadow: none; font-size: 0.95em; }
.pf-row__got { display: grid; gap: var(--ds-space-2); }
.pf-row [data-label]::before { content: attr(data-label); display: block; margin-bottom: 0.125rem; font-size: var(--ds-text-xs); font-weight: 600; line-height: 1.5; color: var(--ds-ink-3); }
.pf-gap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ds-space-2); padding: var(--ds-space-2) var(--ds-space-3); border-radius: var(--ds-radius-sm); background: color-mix(in oklab, var(--ds-amber-wash) 55%, transparent); box-shadow: inset 2px 0 0 color-mix(in oklab, var(--ds-amber) 70%, transparent); }
.pf-gap > .ds-icon { margin-top: 0.2em; color: var(--ds-amber-ink); }
.pf-gap strong { color: var(--ds-amber-ink); font-weight: 600; }
@container (min-width: 52rem) {
  .pf-rows__cols { display: grid; padding: var(--ds-space-3) clamp(1rem, 0.6rem + 1.5vw, 1.5rem); border-bottom: 1px solid var(--lp-edge); background: var(--lp-surface-2); font-size: var(--ds-text-xs); font-weight: 600; color: var(--ds-ink-3); }
  .pf-rows--engine :is(.pf-rows__cols, .pf-row) { grid-template-columns: 13rem minmax(0, 1fr) minmax(0, 1.55fr); column-gap: var(--ds-space-8); }
  .pf-rows--engine .pf-row__name { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--ds-space-2); }
  .pf-rows--checks :is(.pf-rows__cols, .pf-row) { grid-template-columns: 14rem 11rem minmax(0, 1fr); column-gap: var(--ds-space-6); }
  .pf-row { padding-block: var(--ds-space-5); }
  .pf-row [data-label]::before { content: none; }
  .pf-row__st { padding-top: 0.125rem; }
}
.pf-row__st { display: flex; align-items: flex-start; }
@container (max-width: 51.99rem) { .pf-rows--checks .pf-row { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--ds-space-3); } .pf-rows--checks .pf-row__detail { grid-column: 1 / -1; } }
.pf-rows--checks .pf-row__detail p { color: var(--ds-ink); }

/* Legend over a set of rows. */
.pf-legend { display: flex; flex-wrap: wrap; gap: var(--ds-space-2) var(--ds-space-5); margin-bottom: var(--ds-space-4); }
.pf-legend .pf-st { font-weight: 500; color: var(--ds-ink-2); }

/* Folds and notes under a block. */
.pf-fold { margin-top: var(--ds-space-4); }
.pf-fold > summary .ds-icon { color: var(--ds-ink-3); }
.pf-fold > :not(summary) { max-width: var(--ds-w-prose); font-size: var(--ds-text-sm); line-height: 1.6; color: var(--ds-ink-2); }
.pf-fold > p + p { margin-top: var(--ds-space-3); }
.pf-aside { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ds-space-3); max-width: 52rem; margin-top: var(--ds-space-5); font-size: var(--ds-text-sm); line-height: 1.6; color: var(--ds-ink-2); }
.pf-aside > .ds-icon { margin-top: 0.2em; color: var(--ds-ink-3); }
.pf-aside a, .pf-row a, .pf-fold a, .pf-why a { color: var(--ds-ink); text-decoration-color: var(--ds-line-control); text-underline-offset: 3px; }

/* Bot checks in brief (engine): the landing proof strip with status icons. */
.pf-proof .lp-proof__head { align-content: start; }
.pf-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: var(--ds-space-5) var(--ds-space-6); }
.pf-checks li { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon title" "icon text"; gap: 0.125rem var(--ds-space-3); align-items: center; }
.pf-checks .pf-st { grid-area: icon; display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--lp-edge); border-radius: var(--ds-radius-md); background: var(--lp-surface-2); }
.pf-checks .pf-st--gap { border-color: color-mix(in oklab, var(--ds-amber) 35%, var(--lp-edge)); background: color-mix(in oklab, var(--ds-amber-wash) 60%, var(--lp-surface-2)); }
.pf-checks .pf-st--fail { border-color: color-mix(in oklab, var(--ds-red) 35%, var(--lp-edge)); background: color-mix(in oklab, var(--ds-red-wash) 60%, var(--lp-surface-2)); }
.pf-checks strong { grid-area: title; font: 600 var(--ds-text-h4)/1.3 var(--ds-font-text); color: var(--ds-ink); }
.pf-checks li > span:last-child { grid-area: text; font-size: var(--ds-text-sm); line-height: 1.4; color: var(--ds-ink-3); }

/* Overrides (engine). */
.pf-points { max-width: 46rem; margin-bottom: var(--ds-space-6); }
.pf-table { container-type: inline-size; padding: var(--ds-space-2) clamp(1rem, 0.6rem + 1.5vw, 1.5rem); border: 1px solid var(--lp-edge); border-radius: var(--lp-radius-lg); background: var(--lp-surface); box-shadow: var(--lp-shadow); }
.pf-table .ds-table { font-size: var(--ds-text-sm); }
.pf-table .ds-table tbody tr:last-child > * { border-bottom: 0; }
.pf-table .ds-table--compare :where(td, th) :where(code) { background: var(--lp-surface-2); box-shadow: inset 0 0 0 1px var(--lp-edge); }
.pf-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); gap: var(--ds-space-6) var(--ds-space-8); margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.pf-pair__item { display: grid; gap: var(--ds-space-3); align-content: start; min-width: 0; }
.pf-pair__lead { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ds-space-3); align-items: start; font-size: var(--ds-text-base); line-height: 1.5; color: var(--ds-ink-2); }
.pf-pair__lead code { font-size: 0.88em; color: var(--ds-ink); }
.pf-num { display: inline-grid; place-items: center; width: 1.625rem; height: 1.625rem; border: 1px solid var(--lp-edge-2); border-radius: 50%; font-size: var(--ds-text-xs); font-weight: 600; color: var(--ds-ink); }

/* Verify it yourself (engine). */
.pf-verify { display: grid; gap: var(--ds-space-6) var(--ds-space-10); align-items: start; }
@media (min-width: 1000px) { .pf-verify { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.pf-ways { display: grid; gap: var(--ds-space-2); counter-reset: pf-way; }
.pf-ways li { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon title" "icon text"; gap: 0.25rem var(--ds-space-4); align-items: center; padding: var(--ds-space-4); border: 1px solid var(--lp-edge); border-radius: var(--lp-radius); background: var(--lp-surface); box-shadow: inset 0 1px 0 var(--lp-shine); }
.pf-ways .lp-icon { grid-area: icon; align-self: start; }
.pf-ways li > code { grid-area: title; font-size: var(--ds-text-sm); color: var(--ds-ink); overflow-wrap: anywhere; }
.pf-ways li > span:last-child { grid-area: text; font-size: var(--ds-text-sm); line-height: 1.5; color: var(--ds-ink-3); }
.pf-ways li > span code { font-size: 0.92em; color: var(--ds-ink-2); }

/* Why we publish: one line, an icon beside it. */
.pf-why { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ds-space-5); align-items: start; max-width: 52rem; }
.pf-why .dv-head { margin-bottom: 0; }
.pf-why .ds-h2 { font-size: var(--ds-text-h3); }
.pf-cta__actions { justify-content: center; margin-top: var(--ds-space-2); }
@media (max-width: 640px) { .pf-why { grid-template-columns: minmax(0, 1fr); } .pf-why > .lp-icon { display: none; } }
.pf-row__got[data-label]::before { margin-bottom: calc(-1 * var(--ds-space-1)); }
.pf-table .ds-table tbody tr:last-child { border-bottom: 0; }
.pf-hero .pf-fold { margin-top: var(--ds-space-3); }

/* Headline results (benchmarks): big figures where the number is the point. */
.dv-section.pf-tight { padding-block: 0 clamp(1rem, 0.5rem + 1.5vw, 2rem); }
.pf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--lp-edge); border-radius: var(--lp-radius-lg); background: var(--lp-edge); box-shadow: var(--lp-shadow); }
.pf-stats > div { position: relative; display: grid; gap: var(--ds-space-3); align-content: start; padding: clamp(1.25rem, 0.9rem + 1.2vw, 1.75rem); background: linear-gradient(160deg, var(--lp-surface), color-mix(in oklab, var(--lp-surface) 70%, var(--lp-bg))); }
.pf-stats dt { display: flex; align-items: center; gap: var(--ds-space-2); font-size: var(--ds-text-sm); font-weight: 500; color: var(--ds-ink-2); }
.pf-stats dd { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--ds-space-2); }
.pf-big { font: 650 clamp(2.75rem, 2rem + 2.4vw, 4rem)/1 var(--ds-font-display); font-stretch: 108%; letter-spacing: -0.045em; color: var(--ds-ink); font-variant-numeric: tabular-nums; }
.pf-of { font: 600 var(--ds-text-xl)/1 var(--ds-font-display); font-stretch: 108%; letter-spacing: -0.02em; color: var(--ds-ink-3); }
.pf-stats small { flex-basis: 100%; margin-top: var(--ds-space-2); font-size: var(--ds-text-sm); color: var(--ds-ink-3); }

/* Bot score meter (benchmarks): the fill is the score, amber because higher is worse. */
.pf-meter { height: 0.375rem; max-width: 20rem; margin-top: var(--ds-space-3); border-radius: var(--ds-radius-xs); background: var(--lp-surface-2); box-shadow: inset 0 0 0 1px var(--lp-edge); overflow: hidden; }
.pf-meter > span { display: block; height: 100%; width: calc(var(--v, 0) * 100%); border-radius: inherit; background: color-mix(in oklab, var(--ds-amber) 80%, transparent); }

/* Twelve sites at a glance (benchmarks): one cell per site, in row order. */
.pf-tally { display: grid; gap: var(--ds-space-4); margin-bottom: var(--ds-space-5); }
.pf-tally__bar { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.375rem; max-width: 40rem; }
.pf-tally__bar i { height: 1.375rem; border-radius: var(--ds-radius-sm); background: color-mix(in oklab, var(--ds-ink) 72%, var(--lp-surface)); box-shadow: inset 0 1px 0 var(--lp-shine); }
.pf-tally__bar .pf-gap-c { background: color-mix(in oklab, var(--ds-amber) 80%, var(--lp-surface)); }
.pf-tally__bar .pf-fail-c { background: color-mix(in oklab, var(--ds-red) 80%, var(--lp-surface)); }
.pf-tally__key { display: flex; flex-wrap: wrap; gap: var(--ds-space-2) var(--ds-space-6); }
.pf-tally__key .pf-st { white-space: normal; }
.pf-tally__note { max-width: 52rem; font-size: var(--ds-text-sm); line-height: 1.6; color: var(--ds-ink-2); }

/* Trust score ranges (benchmarks): three bands on one scale, 840 marked. */
.pf-scale { padding: clamp(1.25rem, 0.9rem + 1.5vw, 2rem); border: 1px solid var(--lp-edge); border-radius: var(--lp-radius-lg); background: var(--lp-surface); box-shadow: var(--lp-shadow); }
.pf-scale__bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.25rem; margin-top: var(--ds-space-8); }
.pf-scale__seg { position: relative; height: 0.625rem; border-radius: var(--ds-radius-xs); }
.pf-scale__seg--low { background: color-mix(in oklab, var(--ds-amber) 70%, var(--lp-surface)); }
.pf-scale__seg--std { background: color-mix(in oklab, var(--ds-ink-3) 55%, var(--lp-surface)); }
.pf-scale__seg--high { background: var(--ds-ink); }
.pf-scale__mark { position: absolute; left: calc(140 / 150 * 100%); top: -0.375rem; bottom: -0.375rem; width: 2px; border-radius: 1px; background: var(--ds-ink); box-shadow: 0 0 0 2px var(--lp-surface); }
.pf-scale__mark b { position: absolute; bottom: calc(100% + 0.375rem); left: 50%; transform: translateX(-50%); padding: 0.125rem 0.375rem; border: 1px solid var(--lp-edge-2); border-radius: var(--ds-radius-xs); background: var(--lp-surface-2); font-size: var(--ds-text-xs); font-weight: 600; color: var(--ds-ink); }
.pf-scale__bands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-space-4); margin-top: var(--ds-space-4); }
.pf-scale__bands li { display: grid; gap: var(--ds-space-2); align-content: start; }
.pf-scale__bands li > code { font: 650 var(--ds-text-h4)/1.2 var(--ds-font-display); font-stretch: 108%; color: var(--ds-ink); background: none; box-shadow: none; padding: 0; }
.pf-scale__bands p { font-size: var(--ds-text-sm); line-height: 1.55; color: var(--ds-ink-2); }
.pf-scale__bands p code { font-size: 0.9em; }
@media (max-width: 640px) { .pf-scale__bands { grid-template-columns: minmax(0, 1fr); } .pf-scale__bands li { padding-top: var(--ds-space-3); border-top: 1px solid var(--lp-edge); } }

/* What changes the estimate (benchmarks): factor rows on a card. */
.pf-factors { display: grid; border: 1px solid var(--lp-edge); border-radius: var(--lp-radius-lg); background: var(--lp-surface); box-shadow: var(--lp-shadow); }
.pf-factors > div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: var(--ds-space-1) var(--ds-space-5); align-items: center; padding: var(--ds-space-3) var(--ds-space-5); border-top: 1px solid var(--lp-edge); }
.pf-factors > div:first-child { border-top: 0; }
.pf-factors dt { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ds-space-1) var(--ds-space-3); font-weight: 600; color: var(--ds-ink); }
.pf-factors dt code { font-size: var(--ds-text-xs); font-weight: 400; color: var(--ds-ink-3); }
.pf-factors .lp-icon { width: 2rem; height: 2rem; }
.pf-factors dd { font-size: var(--ds-text-sm); line-height: 1.55; color: var(--ds-ink-2); }
.pf-factors dd code { font-size: 0.9em; color: var(--ds-ink); }
@media (max-width: 640px) { .pf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pf-stats > div { padding: var(--ds-space-4); } .pf-big { font-size: 2.5rem; } .pf-of { font-size: var(--ds-text-md); } }
@media (max-width: 640px) { .pf-factors > div { grid-template-columns: minmax(0, 1fr); } }

/* Status board (status.html, driven by proof.js). The board's data-state picks the
   big icon: checking (spinner), operational (green live dot), degraded (amber),
   down (red), unknown (dashed, nothing answered). Rows: a dot per service. */
.pf-hero--status { padding-bottom: clamp(3rem, 2rem + 4vw, 6rem); }
.pf-board { display: grid; margin-top: clamp(1.75rem, 1rem + 2.5vw, 3rem); max-width: 56rem; border: 1px solid var(--lp-edge-2); border-radius: var(--lp-radius-lg); background: var(--lp-surface); box-shadow: var(--lp-shadow), 0 0 0 0.375rem color-mix(in oklab, var(--lp-surface) 35%, transparent); overflow: hidden; }
.pf-board__state { position: relative; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon words" "icon when"; align-items: center; gap: var(--ds-space-2) var(--ds-space-5); padding: clamp(1.25rem, 0.8rem + 2vw, 2.25rem); border-bottom: 1px solid var(--lp-edge); }
.pf-board__state::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--ds-dur-3) var(--ds-ease-out); background: radial-gradient(26rem 12rem at 0% 0%, var(--_glow, transparent), transparent 70%); }
.pf-board[data-state="operational"] { --_glow: color-mix(in oklab, var(--ds-green) 18%, transparent); }
.pf-board[data-state="degraded"] { --_glow: color-mix(in oklab, var(--ds-amber) 16%, transparent); }
.pf-board[data-state="down"] { --_glow: color-mix(in oklab, var(--ds-red) 16%, transparent); }
.pf-board:is([data-state="operational"], [data-state="degraded"], [data-state="down"]) .pf-board__state::before { opacity: 1; }
.pf-board__icon { grid-area: icon; display: grid; place-items: center; width: clamp(3.5rem, 2.8rem + 2vw, 4.5rem); height: clamp(3.5rem, 2.8rem + 2vw, 4.5rem); border: 1px solid var(--lp-edge); border-radius: var(--lp-radius); background: var(--lp-surface-2); box-shadow: inset 0 1px 0 var(--lp-shine); }
.pf-board__icon > .pf-i { grid-area: 1 / 1; display: none; }
.pf-board__icon .ds-icon { width: 2rem; height: 2rem; stroke-width: 1.5; }
.pf-board[data-state="checking"] .pf-i--checking { display: block; color: var(--ds-ink-3); animation: ds-spin 1.2s linear infinite; }
.pf-board[data-state="operational"] .pf-i--ok { display: block; }
.pf-board[data-state="degraded"] .pf-i--degraded { display: block; color: var(--ds-amber-ink); }
.pf-board[data-state="down"] .pf-i--down { display: block; color: var(--ds-red-ink); }
.pf-board[data-state="unknown"] .pf-i--unknown { display: block; color: var(--ds-ink-3); }
.pf-board[data-state="operational"] .pf-board__icon { border-color: color-mix(in oklab, var(--ds-green) 35%, var(--lp-edge)); }
.pf-board[data-state="degraded"] .pf-board__icon { border-color: color-mix(in oklab, var(--ds-amber) 40%, var(--lp-edge)); background: color-mix(in oklab, var(--ds-amber-wash) 55%, var(--lp-surface-2)); }
.pf-board[data-state="down"] .pf-board__icon { border-color: color-mix(in oklab, var(--ds-red) 40%, var(--lp-edge)); background: color-mix(in oklab, var(--ds-red-wash) 55%, var(--lp-surface-2)); }
.pf-board__dot { width: 1rem; height: 1rem; border-radius: 50%; background: var(--ds-green); animation: ds-live 1.8s var(--ds-ease-quart) infinite; }
.pf-board__words { grid-area: words; display: grid; gap: var(--ds-space-1); min-width: 0; }
.pf-board__title { font: 650 clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem)/1.1 var(--ds-font-display); font-stretch: 108%; letter-spacing: -0.035em; color: var(--ds-ink); text-wrap: balance; }
.pf-board[data-state="checking"] .pf-board__title, .pf-board[data-state="unknown"] .pf-board__title { color: var(--ds-ink-2); }
.pf-board__detail { font-size: var(--ds-text-base); line-height: 1.5; color: var(--ds-ink-2); }
.pf-board__detail code { font-size: 0.9em; }
.pf-board__when { grid-area: when; display: inline-flex; align-items: center; gap: var(--ds-space-2); font-size: var(--ds-text-sm); color: var(--ds-ink-3); }
.pf-board__when time { color: var(--ds-ink); font-weight: 600; }
@media (max-width: 640px) { .pf-board__state { grid-template-areas: "icon words" "when when"; align-items: start; } .pf-board__when { margin-top: var(--ds-space-2); } }

.pf-dot { flex: none; width: 0.625rem; height: 0.625rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ds-ink-3); }
.pf-svc__row[data-state="ok"] .pf-dot { background: var(--ds-green); box-shadow: none; animation: ds-live 1.8s var(--ds-ease-quart) infinite; }
.pf-svc__row[data-state="err"] .pf-dot { background: var(--ds-red); box-shadow: none; border-radius: 1px; transform: rotate(45deg) scale(0.85); }
.pf-svc__row[data-state="unknown"] .pf-dot { box-shadow: inset 0 0 0 1.5px var(--ds-ink-3); background: none; border: 1.5px dashed var(--ds-ink-3); box-sizing: border-box; box-shadow: none; }
.pf-svc__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 7rem; align-items: center; gap: var(--ds-space-1) var(--ds-space-4); min-height: 4rem; padding: var(--ds-space-3) clamp(1.25rem, 0.8rem + 2vw, 2.25rem); border-top: 1px solid var(--lp-edge); }
.pf-svc__row:first-child { border-top: 0; }
.pf-svc__name { display: grid; font-weight: 600; color: var(--ds-ink); }
.pf-svc__name small { font: 400 var(--ds-text-xs)/1.4 var(--ds-font-code); color: var(--ds-ink-3); }
.pf-svc__word { font-size: var(--ds-text-sm); font-weight: 600; color: var(--ds-ink-3); }
.pf-svc__row[data-state="ok"] .pf-svc__word { color: var(--ds-green-ink); }
.pf-svc__row[data-state="err"] .pf-svc__word { color: var(--ds-red-ink); }
.pf-svc__detail { font-size: var(--ds-text-sm); color: var(--ds-ink-3); text-align: end; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .pf-svc__row { grid-template-columns: auto minmax(0, 1fr) auto; } .pf-svc__detail { grid-column: 2 / -1; text-align: start; } }

.pf-status-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--ds-space-5) var(--ds-space-8); max-width: 56rem; margin-top: var(--ds-space-6); }
.pf-build { display: flex; flex-wrap: wrap; gap: var(--ds-space-3) var(--ds-space-8); }
.pf-build > div { display: grid; gap: 0.125rem; min-width: 0; }
.pf-build dt { font-size: var(--ds-text-xs); color: var(--ds-ink-3); }
.pf-build dd { font-size: var(--ds-text-sm); color: var(--ds-ink-2); overflow-wrap: anywhere; }
.pf-status-links { display: flex; flex-wrap: wrap; gap: var(--ds-space-1) var(--ds-space-5); font-size: var(--ds-text-base); }
@media (prefers-reduced-motion: reduce) { .pf-board[data-state="checking"] .pf-i--checking { animation: ds-pulse 1.6s ease-in-out infinite; } }
/* 16c end */

/* 16d. Guides and cookbook -------------------------------------------------- */
/* Guide layout: the article, and a sticky "On this page" list on wide screens. */
.dv-guide { display: grid; gap: var(--ds-space-10); align-items: start; }
.dv-guide__body { display: grid; gap: clamp(2.75rem, 2rem + 2.5vw, 4rem); min-width: 0; }
.dv-guide__body > section { display: grid; gap: var(--ds-space-5); min-width: 0; scroll-margin-top: var(--ds-space-6); }
.dv-guide__body > section > h2, .dv-sechead { display: flex; align-items: center; gap: var(--ds-space-3); font: 650 var(--ds-text-h3)/1.15 var(--ds-font-display); font-stretch: 108%; letter-spacing: -0.03em; color: var(--ds-ink); text-wrap: balance; scroll-margin-top: var(--ds-space-6); }
.dv-guide__body > section > h2 .lp-icon, .dv-sechead .lp-icon { width: 2.25rem; height: 2.25rem; }
.dv-guide .ds-prose { max-width: none; }
.dv-guide .ds-prose > :where(p, ul, ol) { max-width: var(--ds-w-prose); }
.dv-toc { display: none; }
.dv-toc__title { margin-bottom: var(--ds-space-3); font-size: var(--ds-text-sm); font-weight: 600; color: var(--ds-ink); }
.dv-toc ol { display: grid; margin: 0; padding: 0; list-style: none; border-inline-start: 1px solid var(--lp-edge); }
.dv-toc a { display: block; margin-inline-start: -1px; padding: 0.375rem 0 0.375rem var(--ds-space-4); border-inline-start: 1px solid transparent; color: var(--ds-ink-3); font-size: var(--ds-text-md); line-height: 1.35; text-decoration: none; transition: color var(--ds-dur-1), border-color var(--ds-dur-1); }
.dv-toc a:hover { color: var(--ds-ink); }
.dv-toc a[aria-current] { color: var(--ds-ink); border-inline-start-color: var(--ds-ink); font-weight: 500; }
.dv-toc__foot { display: grid; gap: var(--ds-space-2); margin-top: var(--ds-space-6); padding-top: var(--ds-space-5); border-top: 1px solid var(--lp-edge); font-size: var(--ds-text-md); }
.dv-toc__foot a { display: inline-flex; align-items: center; gap: var(--ds-space-2); color: var(--ds-ink-2); text-decoration: none; }
.dv-toc__foot a:hover { color: var(--ds-ink); }
@media (min-width: 1100px) {
  .dv-guide { grid-template-columns: minmax(0, 1fr) 14rem; gap: clamp(3rem, 1rem + 4vw, 6rem); }
  .dv-toc { display: block; position: sticky; top: var(--ds-space-8); max-height: calc(100dvh - 4rem); overflow-y: auto; scrollbar-width: none; }
}

/* Step rail: numbered steps joined by a line. Each step is a li with a heading and its content. */
.dv-rail { display: grid; counter-reset: dv-step; list-style: none; margin: 0; padding: 0; }
.dv-rail > li { position: relative; display: grid; gap: var(--ds-space-4); min-width: 0; padding: 0 0 clamp(2.25rem, 1.75rem + 1.5vw, 3rem) 3.5rem; counter-increment: dv-step; }
.dv-rail > li::before { content: counter(dv-step); position: absolute; left: 0; top: -0.1rem; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--lp-edge-2); border-radius: 50%; background: var(--lp-surface-2); box-shadow: inset 0 1px 0 var(--lp-shine), 0 0 0 0.375rem var(--lp-bg); font: 600 var(--ds-text-md)/1 var(--ds-font-display); font-stretch: 108%; color: var(--ds-ink); }
.dv-rail > li::after { content: ""; position: absolute; z-index: -1; left: calc(1.125rem - 0.5px); top: 2.5rem; bottom: 0.25rem; width: 1px; background: linear-gradient(var(--lp-edge-2), var(--lp-edge)); }
.dv-rail > li:last-child { padding-bottom: 0; }
.dv-rail > li:last-child::after { display: none; }
.dv-rail { position: relative; isolation: isolate; }
.dv-rail > li > h2, .dv-rail > li > h3 { font: 650 var(--ds-text-h3)/1.2 var(--ds-font-display); font-stretch: 108%; letter-spacing: -0.03em; color: var(--ds-ink); margin: 0; scroll-margin-top: var(--ds-space-6); }
.dv-rail > li > h3 { font-size: var(--ds-text-xl); }
.dv-rail > li > p, .dv-rail > li > ul { max-width: var(--ds-w-prose); font-size: var(--ds-text-base); line-height: var(--ds-leading-prose); color: var(--ds-ink-2); }
.dv-rail > li > :where(p, ul, ol) :where(:not(pre) > code) { padding: 0.1em 0.35em; border-radius: var(--ds-radius-xs); background: var(--ds-sunken); box-shadow: inset 0 0 0 1px var(--ds-line); color: var(--ds-ink); overflow-wrap: anywhere; }
.dv-rail > li :where(p, li) :where(a) { color: var(--ds-ink); text-decoration-color: var(--ds-line-control); text-underline-offset: 3px; }
.dv-rail > li :where(p, li) strong { color: var(--ds-ink); font-weight: 600; }
.dv-rail .lp-points { max-width: var(--ds-w-prose); }
.dv-rail .lp-points :where(code) { padding: 0.1em 0.35em; border-radius: var(--ds-radius-xs); background: var(--ds-sunken); box-shadow: inset 0 0 0 1px var(--ds-line); color: var(--ds-ink); }
.dv-rail .lp-points :where(a) { color: var(--ds-ink); text-decoration-color: var(--ds-line-control); text-underline-offset: 3px; }
.dv-rail__label { font-size: var(--ds-text-md); color: var(--ds-ink-3); margin-bottom: calc(-1 * var(--ds-space-2)); }
@media (max-width: 640px) {
  .dv-rail > li { padding-left: 2.75rem; }
  .dv-rail > li::before { width: 1.875rem; height: 1.875rem; top: 0; font-size: var(--ds-text-sm); }
  .dv-rail > li::after { left: calc(0.9375rem - 0.5px); top: 2.125rem; }
  .dv-rail > li > :where(.ds-code, .ds-callout, .dv-switch) { margin-inline-start: -2.75rem; }
  .dv-switch__panel { padding: var(--ds-space-4); }
  .dv-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dv-facts > div { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "value"; padding: var(--ds-space-3) var(--ds-space-4); }
  .dv-facts .lp-icon { display: none; }
  .dv-facts > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* How it works: a small flow of three cards joined by arrows. */
.dv-flow { display: grid; gap: var(--ds-space-3); list-style: none; margin: 0; padding: 0; counter-reset: dv-flow; }
.dv-flow > li { position: relative; display: block; min-width: 0; padding: var(--ds-space-5); border: 1px solid var(--lp-edge); border-radius: var(--lp-radius); background: var(--lp-surface); box-shadow: inset 0 1px 0 var(--lp-shine); font-size: var(--ds-text-md); line-height: 1.55; color: var(--ds-ink-2); counter-increment: dv-flow; }
.dv-flow > li > strong:first-child { display: flex; align-items: center; gap: var(--ds-space-3); margin-bottom: var(--ds-space-2); font: 600 var(--ds-text-base)/1.3 var(--ds-font-text); color: var(--ds-ink); }
.dv-flow > li > strong:first-child::before { content: counter(dv-flow); display: grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--ds-ink); color: var(--lp-bg); font: 600 var(--ds-text-xs)/1 var(--ds-font-text); }
.dv-flow :where(code) { padding: 0.1em 0.35em; border-radius: var(--ds-radius-xs); background: var(--ds-sunken); box-shadow: inset 0 0 0 1px var(--ds-line); color: var(--ds-ink); overflow-wrap: anywhere; font-size: 0.92em; }
.dv-flow :where(a) { color: var(--ds-ink); text-decoration-color: var(--ds-line-control); text-underline-offset: 3px; }
@media (min-width: 760px) {
  .dv-flow { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--ds-space-6); }
  .dv-flow > li + li::before { content: ""; position: absolute; left: calc(-1 * var(--ds-space-6)); top: 1.9rem; width: var(--ds-space-6); height: 1px; background: var(--lp-edge-2); }
  .dv-flow > li + li::after { content: ""; position: absolute; left: -0.4rem; top: calc(1.9rem - 0.2rem); width: 0.4rem; height: 0.4rem; border-top: 1px solid var(--lp-edge-2); border-right: 1px solid var(--lp-edge-2); transform: rotate(45deg); }
}

/* Troubleshooting and questions: ruled folds with a heading in the summary. */
.dv-folds { display: grid; border-top: 1px solid var(--lp-edge); }
.dv-folds > details { border-bottom: 1px solid var(--lp-edge); }
.dv-folds summary { display: flex; align-items: center; gap: var(--ds-space-4); min-height: 3.5rem; padding-block: var(--ds-space-3); cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.dv-folds summary::-webkit-details-marker { display: none; }
.dv-folds summary > :where(h3, span) { flex: 1; min-width: 0; margin: 0; font: 600 var(--ds-text-h4)/1.35 var(--ds-font-text); color: var(--ds-ink); overflow-wrap: anywhere; }
.dv-folds summary :where(code) { font-size: 0.9em; padding: 0.05em 0.3em; border-radius: var(--ds-radius-xs); background: var(--ds-sunken); box-shadow: inset 0 0 0 1px var(--ds-line); }
.dv-folds summary::after { content: ""; flex: none; width: 0.5rem; height: 0.5rem; margin-inline-end: 0.25rem; border-right: 1.5px solid var(--ds-ink-2); border-bottom: 1.5px solid var(--ds-ink-2); transform: translateY(-25%) rotate(45deg); transition: transform var(--ds-dur-2) var(--ds-ease-out); }
.dv-folds details[open] > summary::after { transform: translateY(25%) rotate(225deg); }
.dv-folds summary:hover::after { border-color: var(--ds-ink); }
.dv-folds summary:focus-visible { outline-offset: -2px; border-radius: var(--ds-radius-xs); }
.dv-folds details > :not(summary) { max-width: var(--ds-w-prose); padding-bottom: var(--ds-space-5); font-size: var(--ds-text-base); line-height: var(--ds-leading-prose); color: var(--ds-ink-2); }
.dv-folds details > :not(summary) + :not(summary) { margin-top: calc(-1 * var(--ds-space-2)); }
.dv-folds details :where(:not(pre) > code) { padding: 0.1em 0.35em; border-radius: var(--ds-radius-xs); background: var(--ds-sunken); box-shadow: inset 0 0 0 1px var(--ds-line); color: var(--ds-ink); overflow-wrap: anywhere; }
.dv-folds details :where(a) { color: var(--ds-ink); text-decoration-color: var(--ds-line-control); text-underline-offset: 3px; }
.dv-folds summary .lp-icon { width: 2rem; height: 2rem; }
/* Switcher: tabs over whole blocks (an MCP client, a client library). The tabs are the card's top edge. */
.dv-switch { min-width: 0; border: 1px solid var(--lp-edge); border-radius: var(--lp-radius-lg); background: var(--lp-surface); box-shadow: var(--lp-shadow); }
.dv-switch__tabs { --_surface: var(--lp-surface); padding: var(--ds-space-2) var(--ds-space-3) 0; border-radius: var(--lp-radius-lg) var(--lp-radius-lg) 0 0; background: var(--lp-surface-2); box-shadow: inset 0 -1px 0 var(--lp-edge); }
.dv-switch__tabs .ds-tab[aria-selected="true"] { border-color: var(--lp-edge); }
.dv-switch__panel { display: grid; gap: var(--ds-space-4); min-width: 0; padding: clamp(1rem, 0.7rem + 1.2vw, 1.75rem); animation: ds-rise var(--ds-dur-2) var(--ds-ease-out); }
.dv-switch__panel > :where(h2, h3) { font: 600 var(--ds-text-h4)/1.3 var(--ds-font-text); color: var(--ds-ink); margin: 0; scroll-margin-top: 6rem; }
.dv-switch__panel > :where(p, ul) { max-width: var(--ds-w-prose); font-size: var(--ds-text-base); line-height: var(--ds-leading-prose); color: var(--ds-ink-2); }
.dv-switch__panel :where(p, li) :where(:not(pre) > code) { padding: 0.1em 0.35em; border-radius: var(--ds-radius-xs); background: var(--ds-sunken); box-shadow: inset 0 0 0 1px var(--ds-line); color: var(--ds-ink); overflow-wrap: anywhere; }
.dv-switch__panel :where(p, li) :where(a) { color: var(--ds-ink); text-decoration-color: var(--ds-line-control); text-underline-offset: 3px; }
.dv-switch__panel .ds-code { box-shadow: none; background: var(--lp-bg); }
@media (prefers-reduced-motion: reduce) { .dv-switch__panel { animation: none; } }

/* Precedence: an ordered list where the first match wins. */
.dv-order { display: grid; margin: 0; padding: 0; list-style: none; counter-reset: dv-order; border: 1px solid var(--lp-edge); border-radius: var(--lp-radius); background: var(--lp-surface); overflow: hidden; }
.dv-order > li { display: grid; grid-template-columns: 2rem minmax(10rem, 0.8fr) minmax(0, 2fr); gap: var(--ds-space-2) var(--ds-space-4); align-items: baseline; padding: var(--ds-space-4) var(--ds-space-5); counter-increment: dv-order; font-size: var(--ds-text-md); line-height: 1.55; color: var(--ds-ink-2); }
.dv-order > li + li { border-top: 1px solid var(--lp-edge); }
.dv-order > li::before { content: counter(dv-order); display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--lp-surface-2); box-shadow: inset 0 0 0 1px var(--lp-edge-2); font: 600 var(--ds-text-xs)/1 var(--ds-font-text); color: var(--ds-ink); align-self: start; }
.dv-order__key { font-weight: 600; color: var(--ds-ink); overflow-wrap: anywhere; }
.dv-order :where(code) { padding: 0.1em 0.35em; border-radius: var(--ds-radius-xs); background: var(--ds-sunken); box-shadow: inset 0 0 0 1px var(--ds-line); color: var(--ds-ink); overflow-wrap: anywhere; font-weight: 400; }
.dv-order :where(a) { color: var(--ds-ink); text-decoration-color: var(--ds-line-control); text-underline-offset: 3px; }
@media (max-width: 640px) { .dv-order > li { grid-template-columns: 2rem minmax(0, 1fr); } .dv-order__val { grid-column: 2; } }

/* Definitions: a grid of small cards, a code name over one line of text. */
.dv-defs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); gap: var(--ds-space-3); margin: 0; }
.dv-defs > div { display: grid; gap: var(--ds-space-2); align-content: start; min-width: 0; padding: var(--ds-space-4) var(--ds-space-5); border: 1px solid var(--lp-edge); border-radius: var(--lp-radius); background: var(--lp-surface); box-shadow: inset 0 1px 0 var(--lp-shine); }
.dv-defs dt { font-weight: 600; font-size: var(--ds-text-md); color: var(--ds-ink); overflow-wrap: anywhere; }
.dv-defs dt :where(code) { font-size: var(--ds-text-sm); }
.dv-defs dd { margin: 0; font-size: var(--ds-text-md); line-height: 1.5; color: var(--ds-ink-2); }
.dv-defs :where(dd code) { padding: 0.1em 0.35em; border-radius: var(--ds-radius-xs); background: var(--ds-sunken); box-shadow: inset 0 0 0 1px var(--ds-line); color: var(--ds-ink); overflow-wrap: anywhere; }
.dv-defs :where(a) { color: var(--ds-ink); text-decoration-color: var(--ds-line-control); text-underline-offset: 3px; }

/* Example prompts: quoted lines on small cards. */
.dv-quotes { display: grid; gap: var(--ds-space-2); }
.lp-points.dv-quotes li { padding: var(--ds-space-3) var(--ds-space-4); border: 1px solid var(--lp-edge); border-radius: var(--ds-radius-md); background: var(--lp-surface); color: var(--ds-ink); }
.lp-points.dv-quotes li::before, .lp-points.dv-quotes li::after { display: none; }

/* Differences: a card per topic, the fact and then what to do. */
.dv-diffs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr)); gap: var(--ds-space-3); }
.dv-diff { display: grid; grid-template-rows: auto 1fr auto; gap: var(--ds-space-2); min-width: 0; padding: var(--ds-space-5); border: 1px solid var(--lp-edge); border-radius: var(--lp-radius); background: var(--lp-surface); box-shadow: inset 0 1px 0 var(--lp-shine); font-size: var(--ds-text-md); line-height: 1.55; color: var(--ds-ink-2); }
.dv-diff h3 { font: 600 var(--ds-text-base)/1.3 var(--ds-font-text); color: var(--ds-ink); }
.dv-diff__do { margin-top: var(--ds-space-2); padding-top: var(--ds-space-3); border-top: 1px solid var(--lp-edge); color: var(--ds-ink); }
.dv-diff__do > span { display: block; margin-bottom: var(--ds-space-1); font-size: var(--ds-text-sm); font-weight: 600; color: var(--ds-ink-3); }
.dv-diff :where(code) { padding: 0.1em 0.35em; border-radius: var(--ds-radius-xs); background: var(--ds-sunken); box-shadow: inset 0 0 0 1px var(--ds-line); color: var(--ds-ink); overflow-wrap: anywhere; font-size: 0.92em; }
.dv-diff :where(a) { color: var(--ds-ink); text-decoration-color: var(--ds-line-control); text-underline-offset: 3px; }

/* A four-step flow wraps two by two. */
@media (min-width: 760px) {
  .dv-flow--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dv-flow--4 > li:nth-child(odd)::before, .dv-flow--4 > li:nth-child(odd)::after { display: none; }
}

/* Ways in: one tile per way, the tool as a badge. */
.dv-ways { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); gap: var(--ds-space-3); }
.dv-way { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: var(--ds-space-2) var(--ds-space-4); min-width: 0; padding: var(--ds-space-5); border: 1px solid var(--lp-edge); border-radius: var(--lp-radius); background: var(--lp-surface); box-shadow: inset 0 1px 0 var(--lp-shine); font-size: var(--ds-text-md); line-height: 1.55; color: var(--ds-ink-2); }
.dv-way .lp-icon { grid-row: span 2; }
.dv-way h3 { align-self: center; font: 600 var(--ds-text-base)/1.3 var(--ds-font-text); color: var(--ds-ink); }
.dv-way > p { grid-column: 2; }
.dv-way__use { justify-self: start; padding: 0.125rem 0.5rem; border-radius: var(--ds-radius-xs); background: var(--lp-surface-2); box-shadow: inset 0 0 0 1px var(--lp-edge-2); font-size: var(--ds-text-sm); font-weight: 500; color: var(--ds-ink); }
.dv-way :where(code) { padding: 0.1em 0.35em; border-radius: var(--ds-radius-xs); background: var(--ds-sunken); box-shadow: inset 0 0 0 1px var(--ds-line); color: var(--ds-ink); overflow-wrap: anywhere; font-size: 0.92em; }
.dv-way :where(a) { color: var(--ds-ink); text-decoration-color: var(--ds-line-control); text-underline-offset: 3px; }
@media (max-width: 640px) { .dv-way .lp-icon { grid-row: auto; } .dv-way > p { grid-column: 1 / -1; } }

/* A checklist in two columns. */
.lp-points.dv-checks { max-width: none; gap: var(--ds-space-4) var(--ds-space-8); }
@media (min-width: 760px) { .lp-points.dv-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dv-checks :where(strong) { color: var(--ds-ink); font-weight: 600; }

/* Key and value cards: the value is the point. */
.dv-defs--kv dt { font-weight: 500; font-size: var(--ds-text-sm); color: var(--ds-ink-3); }
.dv-defs--kv dd { font-weight: 600; color: var(--ds-ink); }

/* Tier cards: a hosted model tier, its price per task big. */
.dv-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: var(--ds-space-3); }
.dv-tier { display: grid; grid-template-rows: auto auto 1fr; gap: var(--ds-space-3); min-width: 0; padding: var(--ds-space-5); border: 1px solid var(--lp-edge); border-radius: var(--lp-radius); background: var(--lp-surface); box-shadow: var(--lp-shadow); }
.dv-tier__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--ds-space-2); }
.dv-tier__name { font: 600 var(--ds-text-base)/1.3 var(--ds-font-code); font-stretch: 85%; color: var(--ds-ink); }
.dv-tier__name code { padding: 0; background: none; box-shadow: none; font-size: inherit; }
.dv-tier__price { font-size: var(--ds-text-sm); color: var(--ds-ink-3); }
.dv-tier__price b { font: 650 var(--ds-text-h3)/1 var(--ds-font-display); font-stretch: 108%; letter-spacing: -0.03em; color: var(--ds-ink); }
.dv-tier__use { font-size: var(--ds-text-md); line-height: 1.5; color: var(--ds-ink-2); }
.dv-tier__kv { display: grid; align-content: end; margin: 0; border-top: 1px solid var(--lp-edge); }
.dv-tier__kv > div { display: grid; gap: 0.125rem; padding-block: var(--ds-space-2); border-bottom: 1px solid var(--lp-edge); }
.dv-tier__kv > div:last-child { border-bottom: 0; padding-bottom: 0; }
.dv-tier__kv dt { font-size: var(--ds-text-xs); color: var(--ds-ink-3); }
.dv-tier__kv dd { margin: 0; font-size: var(--ds-text-md); font-weight: 500; color: var(--ds-ink); }

/* Section overview: tiles that jump to each part of a long guide. */
.dv-overview { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); gap: var(--ds-space-3); }
.dv-overview .lp-tile { align-items: start; padding: var(--ds-space-4); }
.dv-overview .lp-tile__title { font-size: var(--ds-text-base); }
.dv-overview .lp-tile :where(code) { font-size: 0.9em; }
@media (min-width: 900px) { .dv-guide .dv-related:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Guide cards on the guides hub. */
.dv-gcards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-3); }
@media (min-width: 700px) { .dv-gcards--2, .dv-gcards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .dv-gcards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dv-gcard { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--ds-space-3); min-width: 0; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border: 1px solid var(--lp-edge); border-radius: var(--lp-radius-lg); background: var(--lp-surface); box-shadow: inset 0 1px 0 var(--lp-shine); color: var(--ds-ink); text-decoration: none; transition: border-color var(--ds-dur-1), background-color var(--ds-dur-1), transform var(--ds-dur-2) var(--ds-ease-out); }
.dv-gcard:hover { border-color: var(--lp-edge-2); background: var(--lp-surface-2); transform: translateY(-2px); }
.dv-gcard--big { box-shadow: var(--lp-shadow); }
.dv-gcard__top { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); }
.dv-gcard__chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ds-space-1); }
.dv-chip { display: inline-flex; align-items: center; height: 1.5rem; padding-inline: 0.5rem; border-radius: var(--ds-radius-xs); background: var(--lp-surface-2); box-shadow: inset 0 0 0 1px var(--lp-edge); font-size: var(--ds-text-xs); font-weight: 500; color: var(--ds-ink-2); white-space: nowrap; }
.dv-gcard__title { font: 650 var(--ds-text-h3)/1.2 var(--ds-font-display); font-stretch: 108%; letter-spacing: -0.03em; text-wrap: balance; }
.dv-gcard:not(.dv-gcard--big) .dv-gcard__title { font-size: var(--ds-text-xl); }
.dv-gcard__text { font-size: var(--ds-text-md); line-height: 1.55; color: var(--ds-ink-3); }
.dv-gcard__text :where(code) { padding: 0.1em 0.35em; border-radius: var(--ds-radius-xs); background: var(--ds-sunken); box-shadow: inset 0 0 0 1px var(--ds-line); color: var(--ds-ink-2); }
.dv-gcard__go { display: inline-flex; align-items: center; gap: var(--ds-space-2); font-size: var(--ds-text-md); font-weight: 500; color: var(--ds-ink); }
.dv-gcard__go .ds-icon { transition: transform var(--ds-dur-2) var(--ds-ease-out); }
.dv-gcard:hover .dv-gcard__go .ds-icon { transform: translateX(3px); }
.dv-split { display: grid; gap: var(--ds-space-4) var(--ds-space-12); align-items: start; }
@media (min-width: 900px) { .dv-split { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }
.dv-linktiles .lp-tile { grid-template-areas: "icon title"; }
@media (min-width: 1000px) { .lp-tiles.dv-linktiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .dv-gcard:hover { transform: none; } }

/* Cookbook: install card in the hero, filter chips, recipe cards, then each recipe as words beside code. */
.dv-install { display: grid; gap: var(--ds-space-3); margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); padding: var(--ds-space-5); border: 1px solid var(--lp-edge); border-radius: var(--lp-radius-lg); background: var(--lp-surface); box-shadow: var(--lp-shadow); }
.dv-install__title { display: flex; align-items: center; gap: var(--ds-space-3); font-weight: 600; color: var(--ds-ink); }
.dv-install__title .lp-icon { width: 2rem; height: 2rem; }
.dv-install .ds-code { box-shadow: none; background: var(--lp-bg); }
.dv-install__note { max-width: var(--ds-w-prose); font-size: var(--ds-text-md); line-height: 1.55; color: var(--ds-ink-3); }
.dv-install__note :where(a) { color: var(--ds-ink-2); text-decoration-color: var(--ds-line-control); text-underline-offset: 3px; }
@media (min-width: 1000px) { .dv-install { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: var(--ds-space-8); } .dv-install__title { grid-column: 1 / -1; } .dv-install .ds-code { grid-row: 2; } }
.dv-section--flush { padding-top: 0; }
.dv-filterbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-3); margin-bottom: var(--ds-space-4); }
.dv .dv-filters .ds-chip { border-color: var(--lp-edge-2); }
@media (pointer: coarse), (max-width: 640px) { .dv .dv-filters .ds-chip { height: 2.75rem; } }
.dv-recipes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: var(--ds-space-3); }
.dv-recipe { display: grid; grid-template-rows: auto 1fr auto; gap: var(--ds-space-3); justify-items: start; min-width: 0; padding: var(--ds-space-4) var(--ds-space-5) var(--ds-space-5); border: 1px solid var(--lp-edge); border-radius: var(--lp-radius); background: var(--lp-surface); box-shadow: inset 0 1px 0 var(--lp-shine); color: var(--ds-ink); text-decoration: none; transition: border-color var(--ds-dur-1), background-color var(--ds-dur-1), transform var(--ds-dur-2) var(--ds-ease-out); }
.dv-recipe:hover { border-color: var(--lp-edge-2); background: var(--lp-surface-2); transform: translateY(-2px); }
.dv-recipe[hidden] { display: none; }
.dv-recipe__top { display: flex; align-items: center; justify-content: space-between; align-self: stretch; justify-self: stretch; }
.dv-recipe__num { font-size: var(--ds-text-sm); color: var(--ds-ink-3); }
.dv-recipe__title { font: 600 var(--ds-text-base)/1.35 var(--ds-font-text); text-wrap: balance; }
.dv-rcps { display: grid; gap: var(--ds-space-4); }
.dv-rcp { display: grid; gap: var(--ds-space-5) var(--ds-space-10); min-width: 0; padding: clamp(1.25rem, 0.9rem + 1.5vw, 2rem); border: 1px solid var(--lp-edge); border-radius: var(--lp-radius-lg); background: var(--lp-surface); box-shadow: var(--lp-shadow); scroll-margin-top: var(--ds-space-6); }
.dv-rcp[hidden] { display: none; }
.dv-rcp__words { display: grid; gap: var(--ds-space-3); align-content: start; min-width: 0; font-size: var(--ds-text-base); line-height: 1.6; color: var(--ds-ink-2); }
.dv-rcp__words h2 { font: 650 var(--ds-text-h3)/1.2 var(--ds-font-display); font-stretch: 108%; letter-spacing: -0.03em; color: var(--ds-ink); text-wrap: balance; }
.dv-rcp__meta { display: flex; align-items: center; gap: var(--ds-space-3); font-size: var(--ds-text-sm); color: var(--ds-ink-3); }
.dv-rcp__meta .lp-icon { width: 2.25rem; height: 2.25rem; }
.dv-rcp :where(p, li) :where(:not(pre) > code) { padding: 0.1em 0.35em; border-radius: var(--ds-radius-xs); background: var(--ds-sunken); box-shadow: inset 0 0 0 1px var(--ds-line); color: var(--ds-ink); overflow-wrap: anywhere; }
.dv-rcp :where(p) :where(a) { color: var(--ds-ink); text-decoration-color: var(--ds-line-control); text-underline-offset: 3px; }
.dv-rcp__code { display: grid; gap: var(--ds-space-3); align-content: start; min-width: 0; }
.dv-rcp__code > h3 { margin-top: var(--ds-space-2); font: 600 var(--ds-text-md)/1.4 var(--ds-font-text); color: var(--ds-ink); }
.dv-rcp__code .ds-code { box-shadow: none; background: var(--lp-bg); }
.dv-recipe__note { font-size: var(--ds-text-sm); color: var(--ds-ink-3); }
@media (min-width: 1000px) { .dv-rcp { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } .dv-rcp__words { position: sticky; top: var(--ds-space-6); align-self: start; } }
@media (prefers-reduced-motion: reduce) { .dv-recipe:hover { transform: none; } }
@media (max-width: 640px) {
  .dv-recipes { gap: var(--ds-space-2); }
  .dv-recipe { display: flex; align-items: center; gap: var(--ds-space-3); padding: var(--ds-space-3) var(--ds-space-4); }
  .dv-recipe__top { flex: none; }
  .dv-recipe__num, .dv-recipe > .dv-chip { display: none; }
  .dv-overview .lp-tile__text { display: none; }
}

/* Tables and questions inside guides sit on cards. */
.dv-guide .ds-table-wrap { border: 1px solid var(--lp-edge); border-radius: var(--lp-radius); background: var(--lp-surface); box-shadow: inset 0 1px 0 var(--lp-shine); padding: var(--ds-space-1) var(--ds-space-5); container-type: inline-size; }
.dv-guide .ds-table { font-size: var(--ds-text-md); }
.dv-guide .ds-table thead th { background: none; color: var(--ds-ink-3); font-weight: 500; border-bottom-color: var(--lp-edge); }
.dv-guide .ds-table :where(td, th) { border-bottom-color: var(--lp-edge); }
.dv-guide .ds-table tbody tr:last-child > * { border-bottom: 0; }
.dv-guide .ds-table :where(td) { color: var(--ds-ink-2); }
.dv-guide .ds-note { font-size: var(--ds-text-sm); }
.dv-guide .ds-faq { max-width: none; border-top-color: var(--lp-edge); }
.dv-guide .ds-faq details { border-bottom-color: var(--lp-edge); }
.dv-guide .ds-faq summary { min-height: 3.5rem; }
.dv-guide .ds-faq :where(code) { padding: 0.1em 0.35em; border-radius: var(--ds-radius-xs); background: var(--ds-sunken); box-shadow: inset 0 0 0 1px var(--ds-line); color: var(--ds-ink); }
.dv-guide__body > section > :where(p, ul) { max-width: var(--ds-w-prose); font-size: var(--ds-text-base); line-height: var(--ds-leading-prose); color: var(--ds-ink-2); }
.dv-guide__body > section > :where(p, ul) :where(:not(pre) > code) { padding: 0.1em 0.35em; border-radius: var(--ds-radius-xs); background: var(--ds-sunken); box-shadow: inset 0 0 0 1px var(--ds-line); color: var(--ds-ink); overflow-wrap: anywhere; }
.dv-guide__body > section > :where(p, ul) :where(a) { color: var(--ds-ink); text-decoration-color: var(--ds-line-control); text-underline-offset: 3px; }
.dv-guide__body > section > :where(p, ul) strong { color: var(--ds-ink); font-weight: 600; }
.dv-guide__body > section > h3 { font: 600 var(--ds-text-h4)/1.3 var(--ds-font-text); color: var(--ds-ink); margin-top: var(--ds-space-3); scroll-margin-top: 6rem; }
.dv-guide__body > section > ul:not([class]) { padding-inline-start: 1.25em; list-style: disc; }
.dv-guide__body > section > ul:not([class]) li + li { margin-top: 0.35em; }

.dv-guide .dv-related { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .dv-guide .dv-related { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 16d end */

/* 12. CLOSING CALL: the last section of a page. Words on the left, the action on the right. */
.ds-closing { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--ds-space-6) var(--ds-space-12); }
.ds-closing > :first-child { display: grid; gap: var(--ds-space-3); flex: 1 1 24rem; max-width: 44rem; }
.ds-closing__action { display: grid; gap: var(--ds-space-2); flex: 0 1 30rem; }
.ds-signup { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }
.ds-signup .ds-input { flex: 1 1 14rem; }

/* 13. SMALL PIECES */
/* Reference marks in comparison tables */
.ds-ref { font-size: 0.7em; line-height: 0; margin-inline-start: 0.125rem; }
.ds-ref a { padding: 0 0.125rem; color: var(--ds-ink-3); text-decoration: none; }
.ds-ref a:hover { color: var(--ds-ink); text-decoration: underline; }
:target { scroll-margin-top: var(--ds-space-6); }
li:target { background: var(--ds-hover); box-shadow: 0 0 0 0.25rem var(--ds-hover); border-radius: var(--ds-radius-xs); }
/* A row of links under a hero or a section */
.ds-linkrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2) var(--ds-space-6); }
/* A note under a table or a figure: wider than a caption, quieter than body */
.ds-note { max-width: var(--ds-w-prose); font-size: var(--ds-text-md); line-height: 1.55; color: var(--ds-ink-3); }
.ds-note :where(a) { color: var(--ds-ink-2); text-decoration-color: var(--ds-line-control); text-underline-offset: 3px; }
.ds-note :where(code), .ds-lead :where(code), .ds-spec__facts :where(code), .ds-steps :where(code), .ds-kv :where(code) { padding: 0.1em 0.35em; border-radius: var(--ds-radius-xs); background: var(--ds-sunken); box-shadow: inset 0 0 0 1px var(--ds-line); color: var(--ds-ink); overflow-wrap: anywhere; }
.ds-lead :where(a), .ds-spec__facts :where(a), .ds-soft :where(a) { color: var(--ds-ink); text-decoration-color: var(--ds-line-control); text-underline-offset: 3px; }
/* Unit prices: the value column of a kv list set flush right */
.ds-kv--prices { grid-template-columns: minmax(0, 1fr) max-content; max-width: 34rem; }
.ds-kv--prices dt { color: var(--ds-ink-2); }
.ds-kv--prices dd { font-weight: 600; text-align: end; white-space: nowrap; }
.ds-marketing .ds-kv--prices { font-size: var(--ds-text-base); }
/* Theme button shows the theme you would switch to */
.ds-themeicon--dark { display: none; }
[data-theme="dark"] .ds-themeicon--dark { display: block; }
[data-theme="dark"] .ds-themeicon--light { display: none; }
/* 44px targets for footer and chrome links on touch */
@media (pointer: coarse), (max-width: 640px) {
  .ds-footer li a, .ds-footer .ds-brand, .ds-footer__legal a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .ds-footer__legal { align-items: center; }
  .ds-footer ul { gap: 0; }
  .ds-tabs--lg { --_h: 2.75rem; }
  .ds-code__bar .ds-tabs { --_h: 2.75rem; }
  .ds-crumbs a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .ds-link--arrow { min-height: 2.75rem; }
}
/* Narrow phones: the site tab strip fits without clipping. Benchmarks drops out (it is in the
   footer) unless it is the current page, tabs tighten, and any overflow fades at the edge. */
@media (max-width: 480px) {
  .ds-chrome__row .ds-tabs { -webkit-mask-image: linear-gradient(to right, black calc(100% - var(--ds-gutter)), transparent); mask-image: linear-gradient(to right, black calc(100% - var(--ds-gutter)), transparent); }
  .ds-chrome__row .ds-tab { padding-inline: 0.625rem; }
  .ds-chrome__row .ds-tab[href="/benchmarks"]:not([aria-current]) { display: none; }
}
/* The live view page (stream-view.html): a centred message on the desk */
.ds-notice { position: fixed; inset: 0; z-index: var(--ds-z-raised); display: grid; place-items: center; padding: var(--ds-space-6); background: var(--ds-sheet); }
.ds-notice__body { display: grid; gap: var(--ds-space-3); width: 100%; max-width: 30rem; }
.ds-notice__actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); margin-top: var(--ds-space-3); padding-top: var(--ds-space-5); border-top: var(--ds-border); }

/* ==========================================================================
   14. LANDING PAGE (index.html, body.lp)
       Dark first. The page sits on a deep desk colour with one soft green glow
       behind the hero and the closing call; content is grouped on layered
       surfaces with hairline edges. Green stays for live things and the one
       primary action; the glow is the only decorative use of it.
   ========================================================================== */
:root {
  --lp-bg:        light-dark(oklch(0.985 0.004 155), oklch(0.138 0.012 160));
  --lp-surface:   light-dark(oklch(0.997 0.002 155), oklch(0.172 0.013 160));
  --lp-surface-2: light-dark(oklch(0.965 0.008 155), oklch(0.205 0.014 160));
  --lp-edge:      light-dark(oklch(0.895 0.01 155), oklch(0.265 0.014 160));
  --lp-edge-2:    light-dark(oklch(0.82 0.012 155), oklch(0.35 0.016 160));
  --lp-shine:     light-dark(oklch(0.997 0.002 155 / 0), oklch(0.98 0.01 155 / 0.07));
  --lp-glow:      light-dark(oklch(0.88 0.1 152 / 0.6), oklch(0.62 0.17 152 / 0.34));
  --lp-glow-2:    light-dark(oklch(0.92 0.05 200 / 0.55), oklch(0.52 0.1 190 / 0.16));
  --lp-grid:      light-dark(oklch(0.21 0.02 160 / 0.05), oklch(0.95 0.01 155 / 0.045));
  --lp-drop:      light-dark(oklch(0.3 0.03 160 / 0.16), oklch(0.04 0.01 160 / 0.7));
  --lp-shadow:    inset 0 1px 0 var(--lp-shine), 0 1px 2px var(--lp-drop), 0 24px 48px -28px var(--lp-drop);
  --lp-radius:    14px;
  --lp-radius-lg: 20px;
  --lp-ease:      cubic-bezier(0.65, 0, 0.35, 1);
}
body.lp { background: var(--lp-bg); }
.lp .ds-chrome { background: transparent; }
.lp .ds-chrome .ds-tabs { --_surface: var(--lp-bg); }
.lp-main { position: relative; overflow-x: clip; }
.lp-lead { max-width: 32em; font-size: var(--ds-text-xl); line-height: 1.5; color: var(--ds-ink-2); text-wrap: pretty; }
.lp .ds-h2 { letter-spacing: -0.04em; }

/* Section rhythm: space, not rules. */
.lp-section { padding-block: clamp(3.5rem, 2rem + 4vw, 6rem); }
.lp-section--tight { padding-block: clamp(1rem, 0.5rem + 2vw, 2rem); }
.lp-head { display: grid; gap: var(--ds-space-4); max-width: 46rem; margin-bottom: clamp(1.75rem, 1.2rem + 2vw, 3rem); }
.lp-head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--ds-space-4) var(--ds-space-8); max-width: none; }
.lp-head--row .ds-h2 { max-width: 40rem; }

/* Icon tile: a neutral square that holds one icon in place of a label. */
.lp-icon { display: inline-grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border: 1px solid var(--lp-edge); border-radius: var(--ds-radius-md); background: var(--lp-surface-2); color: var(--ds-ink); box-shadow: inset 0 1px 0 var(--lp-shine); }

/* Hero ------------------------------------------------------------------- */
.lp-hero { position: relative; isolation: isolate; padding-block: clamp(2.5rem, 1rem + 5vw, 6rem) clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.lp-hero::before { content: ""; position: absolute; z-index: -2; inset: -6rem 0 -4rem; pointer-events: none;
  background: radial-gradient(42rem 30rem at 72% 42%, var(--lp-glow), transparent 70%), radial-gradient(30rem 22rem at 12% 8%, var(--lp-glow-2), transparent 70%); }
.lp-hero::after { content: ""; position: absolute; z-index: -1; inset: -6rem 0 0; pointer-events: none;
  background-image: linear-gradient(var(--lp-grid) 1px, transparent 1px), linear-gradient(90deg, var(--lp-grid) 1px, transparent 1px); background-size: 3.5rem 3.5rem; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 60% 35%, black, transparent 75%); mask-image: radial-gradient(ellipse 60% 70% at 60% 35%, black, transparent 75%); }
.lp-hero__grid { display: grid; gap: clamp(2.5rem, 1.5rem + 3vw, 4rem); align-items: center; }
.lp-hero__copy { display: grid; gap: var(--ds-space-6); justify-items: start; }
.lp-hero__title { font-size: clamp(2.5rem, 1.7rem + 3.4vw, 4.25rem); line-height: 1;
  background: linear-gradient(180deg, var(--ds-ink) 30%, color-mix(in oklab, var(--ds-ink) 70%, var(--lp-bg))); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 0.06em; }
.lp-hero__cta { display: flex; flex-wrap: wrap; gap: var(--ds-space-3); margin-top: var(--ds-space-2); }
.lp-ticks { display: flex; flex-wrap: wrap; gap: var(--ds-space-2) var(--ds-space-5); font-size: var(--ds-text-md); color: var(--ds-ink-3); }
.lp-ticks li { display: inline-flex; align-items: center; gap: var(--ds-space-2); }
.lp-ticks .ds-icon { color: var(--ds-ink-2); }
@media (min-width: 1080px) { .lp-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); } }

.lp-works { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--ds-space-3) clamp(1.5rem, 1rem + 2vw, 3rem); margin-top: clamp(3rem, 2rem + 4vw, 5.5rem); padding-top: var(--ds-space-6); border-top: 1px solid var(--lp-edge); }
.lp-works > p { font-size: var(--ds-text-md); color: var(--ds-ink-3); }
.lp-works ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2) clamp(1.25rem, 0.8rem + 2vw, 3rem); }
.lp-works li { font: 600 var(--ds-text-base)/1.2 var(--ds-font-display); font-stretch: 108%; letter-spacing: -0.02em; color: var(--ds-ink-3); }
@media (max-width: 640px) { .lp-works { justify-content: flex-start; } .lp-works ul { gap: var(--ds-space-2) var(--ds-space-5); } .lp-works li { font-size: var(--ds-text-md); } }

/* Hero demo: one agent task in one browser. The agent works through three store
   tabs in turn, the prices land in the result and sort, the cheapest lights up.
   site.js plays it in a loop by taking state off and putting it back on a timeline:
     .lp-demo    data-playing, data-state (start, run, done, reset), data-on (the
                 browser is up), data-tab (0, 1, 2: the active tab), data-rows,
                 data-sort="pre", data-best
     .lp-br      is-on; data-nav="a"|"b" replays the load bar
     .lp-tab     is-open, is-done
     .lp-page    is-loaded, is-typing, has-results, is-aiming, is-clicked,
                 is-product, has-price
     steps li    is-live, is-part (started, not finished), is-done
     .lp-j--row  is-in once its price has been read
   The markup carries the finished run, so without script, off screen, in a hidden
   tab or with reduced motion the demo shows the end state. Only transform and
   opacity move. Sizes inside the browser are in em off one container-relative
   font size, so the window scales as a unit from phone to desktop. */
.lp-demo { --_ease: cubic-bezier(0.22, 1, 0.36, 1); --_pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative; margin: 0; container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); }
.lp-demo__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.lp-demo[data-snap] *, .lp-demo[data-snap] *::before, .lp-demo[data-snap] *::after { transition: none !important; animation: none !important; }

.lp-demo__panel { position: relative; border: 1px solid var(--lp-edge-2); border-radius: var(--lp-radius-lg); background: var(--lp-surface); box-shadow: var(--lp-shadow), 0 0 0 0.375rem color-mix(in oklab, var(--lp-surface) 35%, transparent); }
.lp-demo__label { font: 500 var(--ds-text-xs)/1.3 var(--ds-font-text); color: var(--ds-ink-3); }

/* Head: the task, what is running, the steps. */
.lp-demo__head { display: grid; gap: var(--ds-space-3); padding: var(--ds-space-4) var(--ds-space-5) var(--ds-space-4); border-bottom: 1px solid var(--lp-edge); }
.lp-demo__headrow { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); }
.lp-demo__meta { display: flex; align-items: center; gap: var(--ds-space-4); font-size: var(--ds-text-sm); color: var(--ds-ink-2); white-space: nowrap; }
.lp-demo__count { transition: opacity var(--ds-dur-3); }
.lp-demo__count b { font-weight: 600; color: var(--ds-ink); }
.lp-demo[data-playing]:not([data-on]) .lp-demo__count { opacity: 0; }
.lp-demo__live { display: none; }
.lp-demo__done { display: inline-flex; align-items: center; gap: 0.375rem; font: 500 var(--ds-text-sm)/1.2 var(--ds-font-text); color: var(--ds-ink); }
.lp-demo__done .ds-icon { color: var(--ds-green-ink); }
.lp-demo[data-playing]:not([data-state="done"]) .lp-demo__live { display: inline-flex; }
.lp-demo[data-playing]:not([data-state="done"]) .lp-demo__done { display: none; }
.lp-demo[data-playing][data-state="done"] .lp-demo__done .ds-icon { animation: lp-tick 420ms var(--_pop); }
.lp-demo__task { min-height: 2.75rem; padding: 0.625rem 0.875rem; border: 1px solid var(--lp-edge); border-radius: var(--ds-radius-md); background: var(--lp-bg); font: 500 var(--ds-text-base)/1.45 var(--ds-font-text); color: var(--ds-ink); text-wrap: pretty; }
.lp-demo[data-typing] [data-demo-task]::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-inline-start: 2px; vertical-align: -0.17em; background: var(--ds-green); }

/* Steps: a dot, the label, and a rule to the next step that fills when the step is done.
   Searching and reading alternate store by store, so those two count to 3/3. */
.lp-demo__steps { display: flex; align-items: center; gap: 0.625rem; font-size: var(--ds-text-sm); color: var(--ds-ink); }
.lp-demo__steps li { display: flex; flex: 1 1 auto; align-items: center; gap: 0.5rem; white-space: nowrap; }
.lp-demo__steps li:last-child { flex: none; }
.lp-demo__steps li > span { transition: opacity var(--ds-dur-2); }
.lp-demo__steps li:not(.is-done):not(.is-live):not(.is-part) > span { opacity: 0.5; }
.lp-step__n { display: none; margin-inline-start: 0.125rem; font: 500 0.92em/1 var(--ds-font-code); color: var(--ds-ink-3); }
.lp-demo[data-playing] .lp-demo__steps li:is(.is-live, .is-part) .lp-step__n { display: inline; }
.lp-step__line { position: relative; flex: 1 1 auto; min-width: 0.75rem; height: 1.5px; margin-inline-start: 0.125rem; border-radius: 1px; background: var(--lp-edge-2); overflow: hidden; }
.lp-step__line::after { content: ""; position: absolute; inset: 0; background: var(--ds-green); transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--_ease); }
.lp-demo__steps li.is-done .lp-step__line::after { transform: none; }
.lp-step__dot { position: relative; flex: none; width: 1rem; height: 1rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ds-line-control); }
.lp-step__dot::before, .lp-step__dot::after { content: ""; position: absolute; opacity: 0; }
.lp-step__dot::before { inset: 0; border-radius: 50%; background: var(--ds-green-wash); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ds-green) 45%, transparent); }
.lp-step__dot::after { left: 0.375rem; top: 0.21rem; width: 0.25rem; height: 0.45rem; border: solid var(--ds-green-ink); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.lp-demo__steps li.is-done .lp-step__dot { box-shadow: none; }
.lp-demo__steps li.is-done .lp-step__dot::before, .lp-demo__steps li.is-done .lp-step__dot::after { opacity: 1; }
.lp-demo[data-playing] .lp-demo__steps li.is-done .lp-step__dot { animation: lp-tick 420ms var(--_pop); }
.lp-demo__steps li:is(.is-live, .is-part) .lp-step__dot { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--ds-green) 55%, transparent); }
.lp-demo__steps li.is-live .lp-step__dot::before { inset: 0.28rem; opacity: 1; background: var(--ds-green); box-shadow: none; animation: lp-beat 1.1s ease-in-out infinite; }
@keyframes lp-beat { 50% { transform: scale(0.8); } }
@keyframes lp-tick { from { transform: scale(0.4); opacity: 0; } }

/* Stage: one browser on a sunken desk. The dashed slot shows where it will open. */
.lp-demo__stage { --_pad: var(--ds-space-5); position: relative; padding: var(--_pad) var(--_pad) 3.5rem; border-radius: 0 0 var(--lp-radius-lg) var(--lp-radius-lg); background: var(--lp-bg); background-image: radial-gradient(var(--lp-grid) 1px, transparent 1.2px); background-size: 14px 14px; font-size: clamp(8.5px, 1.75cqi, 12px); }
.lp-demo__slot { position: absolute; inset: var(--_pad) var(--_pad) 3.5rem; border: 1px dashed var(--lp-edge-2); border-radius: 0.9em; opacity: 0; transition: opacity 300ms; }
.lp-demo[data-playing]:not([data-on]) .lp-demo__slot { opacity: 1; }

.lp-br { position: relative; border: 1px solid var(--lp-edge-2); border-radius: 0.9em; background: var(--lp-surface); box-shadow: var(--lp-shadow), 0 1.6em 3em -1.6em var(--lp-drop); transition: opacity 420ms var(--_ease), transform 560ms var(--_pop); }
.lp-demo[data-playing] .lp-br:not(.is-on) { opacity: 0; transform: translateY(1.2em) scale(0.96); }

/* Tabs. The active one joins the address bar; each tab shows a live dot while the
   agent works in it and a check with its price once the price is read. */
.lp-br__tabs { display: flex; align-items: flex-end; gap: 0.3em; padding: 0.6em 0.7em 0; border-bottom: 1px solid var(--lp-edge); border-radius: 0.9em 0.9em 0 0; background: var(--lp-surface-2); }
.lp-tab { position: relative; z-index: 0; display: flex; align-items: center; gap: 0.5em; flex: 0 1 16em; min-width: 0; height: 2.6em; margin-bottom: -1px; padding: 0 0.75em 0 0.8em; color: var(--ds-ink-3); transition: opacity 260ms var(--_ease), transform 420ms var(--_pop); }
.lp-tab::before { content: ""; position: absolute; z-index: -1; inset: 0; border: 1px solid var(--lp-edge); border-bottom: 0; border-radius: 0.7em 0.7em 0 0; background: var(--lp-surface); opacity: 0; transition: opacity 140ms; }
.lp-demo[data-tab="0"] .lp-tab:nth-child(1), .lp-demo[data-tab="1"] .lp-tab:nth-child(2), .lp-demo[data-tab="2"] .lp-tab:nth-child(3) { color: var(--ds-ink); }
.lp-demo[data-tab="0"] .lp-tab:nth-child(1)::before, .lp-demo[data-tab="1"] .lp-tab:nth-child(2)::before, .lp-demo[data-tab="2"] .lp-tab:nth-child(3)::before { opacity: 1; }
.lp-demo[data-playing] .lp-tab:not(.is-open) { opacity: 0; transform: translateY(0.7em) scale(0.9); }
.lp-tab__icon { position: relative; flex: none; width: 1.05em; height: 1.05em; border-radius: 50%; }
.lp-tab__icon::before { content: ""; position: absolute; inset: 0.27em; border-radius: 50%; background: var(--ds-green); }
.lp-tab__icon::after { content: ""; position: absolute; left: 0.39em; top: 0.2em; width: 0.26em; height: 0.48em; border: solid var(--ds-green-ink); border-width: 0 0.12em 0.12em 0; transform: rotate(45deg); opacity: 0; }
.lp-demo[data-playing]:not([data-state="done"]) .lp-tab:not(.is-done) .lp-tab__icon::before { animation: lp-beat 1.1s ease-in-out infinite; }
.lp-tab.is-done .lp-tab__icon { background: var(--ds-green-wash); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ds-green) 45%, transparent); }
.lp-tab.is-done .lp-tab__icon::before { opacity: 0; }
.lp-tab.is-done .lp-tab__icon::after { opacity: 1; }
.lp-demo[data-playing] .lp-tab.is-done .lp-tab__icon { animation: lp-tick 420ms var(--_pop); }
.lp-tab__host { min-width: 0; overflow: hidden; white-space: nowrap; font: 500 1em/1.5 var(--ds-font-code); letter-spacing: -0.01em; }
.lp-tab__price { flex: none; margin-inline-start: auto; padding: 0.25em 0.45em; border-radius: 0.4em; background: color-mix(in oklab, var(--ds-ink-3) 16%, transparent); font: 600 0.92em/1 var(--ds-font-code); letter-spacing: -0.02em; color: var(--ds-ink); transition: opacity 220ms, transform 460ms var(--_pop); }
.lp-demo[data-playing] .lp-tab:not(.is-done) .lp-tab__price { opacity: 0; transform: scale(0.5); }
.lp-tab::after { content: ""; position: absolute; inset: 0.15em 0.1em 0.35em; border-radius: 0.6em; box-shadow: 0 0 0 1.5px var(--ds-green), 0 0 1.4em -0.2em color-mix(in oklab, var(--ds-green) 55%, transparent); opacity: 0; pointer-events: none; transition: opacity 360ms; }
.lp-demo[data-best] .lp-tab.is-best::after { opacity: 1; }
.lp-demo[data-best] .lp-tab.is-best .lp-tab__price { background: var(--ds-green); color: var(--ds-on-accent); }
.lp-demo[data-playing][data-best] .lp-tab.is-best .lp-tab__price { animation: lp-tick 460ms var(--_pop); }
.lp-tab__best { position: absolute; z-index: 2; top: -1.45em; right: 0.3em; padding: 0.35em 0.7em; border-radius: 1em; background: var(--ds-green); color: var(--ds-on-accent); font: 600 0.9em/1 var(--ds-font-text); white-space: nowrap; box-shadow: 0 0.4em 1em -0.3em color-mix(in oklab, var(--ds-green) 70%, transparent); opacity: 0; transform: translateY(0.5em) scale(0.7); transition: opacity 260ms, transform 480ms var(--_pop); }
.lp-demo[data-best] .lp-tab__best { opacity: 1; transform: none; }

/* Address bar: back, forward, reload, the address of the active tab, the load bar. */
.lp-br__bar { position: relative; display: flex; align-items: center; gap: 0.9em; height: 3em; padding-inline: 0.9em; border-bottom: 1px solid var(--lp-edge); }
.lp-br__nav { display: flex; gap: 0.55em; }
.lp-br__nav i { width: 0.75em; height: 0.75em; border-radius: 50%; background: color-mix(in oklab, var(--ds-ink-3) 30%, transparent); }
.lp-br__url { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 0.5em; height: 2.1em; padding-inline: 0.85em; border: 1px solid var(--lp-edge); border-radius: 1.05em; background: var(--lp-bg); font: 500 1em/1.5 var(--ds-font-code); letter-spacing: -0.01em; color: var(--ds-ink-2); white-space: nowrap; overflow: hidden; }
.lp-br__url .ds-icon { width: 0.95em; height: 0.95em; color: var(--ds-ink-3); }
.lp-br__load { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ds-green); transform: scaleX(0); transform-origin: left; opacity: 0; }
.lp-br[data-nav="a"] .lp-br__load { animation: lp-nav-a 700ms var(--_ease); }
.lp-br[data-nav="b"] .lp-br__load { animation: lp-nav-b 700ms var(--_ease); }
@keyframes lp-nav-a { 0% { opacity: 1; transform: scaleX(0); } 75% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
@keyframes lp-nav-b { 0% { opacity: 1; transform: scaleX(0); } 75% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }

/* Pages: one per tab, stacked; the active tab's page shows. Switching is a quick cut. */
.lp-br__view { position: relative; height: 15.5em; overflow: hidden; border-radius: 0 0 0.9em 0.9em; }
.lp-page { position: absolute; inset: 0; opacity: 0; transition: opacity 140ms; }
.lp-demo[data-tab="0"] .lp-page:nth-child(1), .lp-demo[data-tab="1"] .lp-page:nth-child(2), .lp-demo[data-tab="2"] .lp-page:nth-child(3) { opacity: 1; }
.lp-page .lp-sk { height: 0.45em; border-radius: 0.2em; background: color-mix(in oklab, var(--ds-ink-3) 26%, transparent); }
.lp-page__top { display: flex; align-items: center; gap: 0.9em; padding: 0.9em 1em 0; transition: opacity 300ms; }
.lp-page .lp-sk--logo { flex: none; width: 3.4em; height: 1em; margin: 0; background: color-mix(in oklab, var(--ds-ink-3) 40%, transparent); }
.lp-page .lp-sk--nav { flex: none; width: 2.6em; }
.lp-page .lp-sk--nav:nth-of-type(2) { margin-inline-start: auto; }
.lp-demo[data-playing] .lp-page:not(.is-loaded) .lp-page__top { opacity: 0; }
.lp-page__search { position: relative; flex: 0 1 24em; min-width: 0; display: flex; align-items: center; gap: 0.45em; height: 2.3em; padding-inline: 0.7em; border: 1px solid var(--lp-edge-2); border-radius: 1.15em; background: var(--lp-bg); }
.lp-page__search::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 1.5px var(--ds-green), 0 0 0 0.35em color-mix(in oklab, var(--ds-green) 20%, transparent); opacity: 0; transition: opacity var(--ds-dur-2); }
.lp-page.is-typing .lp-page__search::after { opacity: 1; }
.lp-page__glass { flex: none; width: 1em; height: 1em; fill: none; stroke: var(--ds-ink-3); stroke-width: 1.6; stroke-linecap: round; }
.lp-page__q { min-width: 0; overflow: hidden; white-space: nowrap; font: 500 0.95em/1.5 var(--ds-font-code); letter-spacing: -0.02em; color: var(--ds-ink); }
.lp-page.is-typing .lp-page__q::after { content: ""; display: inline-block; width: 1px; height: 1.1em; margin-inline-start: 1px; vertical-align: -0.2em; background: var(--ds-ink); }

/* Home, results and product views share one box; one slides out as the next slides in. */
.lp-page__home, .lp-page__grid, .lp-page__item { position: absolute; inset: 4.1em 1em 1em; transition: opacity 340ms var(--_ease), transform 440ms var(--_ease); }
.lp-page__home { display: grid; gap: 0.8em; align-content: start; opacity: 0; }
.lp-page.is-loaded:not(.has-results) .lp-page__home { opacity: 1; }
.lp-page.has-results .lp-page__home { transform: translateX(-2.5em); }
.lp-page__banner { display: block; height: 6.4em; border-radius: 0.5em; background: linear-gradient(120deg, var(--lp-surface-2), color-mix(in oklab, var(--ds-ink-3) 16%, var(--lp-surface-2))); box-shadow: inset 0 0 0 1px var(--lp-edge); }
.lp-page__cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8em; }
.lp-page__cats i { display: block; height: 3.4em; border-radius: 0.45em; background: var(--lp-surface-2); box-shadow: inset 0 0 0 1px var(--lp-edge); }
.lp-page__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9em; align-content: start; }
.lp-demo[data-playing] .lp-page:not(.has-results) .lp-page__grid { opacity: 0; }
.lp-page.is-product .lp-page__grid { opacity: 0; transform: translateX(-2.5em); transition-duration: 180ms, 400ms; }
.lp-prod { position: relative; display: grid; gap: 0.4em; align-content: start; transition: opacity 320ms var(--_ease), transform 420ms var(--_ease); }
.lp-prod:nth-child(2) { transition-delay: 50ms; } .lp-prod:nth-child(3) { transition-delay: 100ms; } .lp-prod:nth-child(4) { transition-delay: 150ms; }
.lp-prod:nth-child(n+5) { transition-delay: 200ms; }
.lp-demo[data-playing] .lp-page:not(.has-results) .lp-prod { opacity: 0; transform: translateY(0.9em); }
.lp-prod__img { display: grid; place-items: center; height: 5.2em; border-radius: 0.5em; background: var(--lp-surface-2); box-shadow: inset 0 0 0 1px var(--lp-edge); color: color-mix(in oklab, var(--ds-ink-3) 70%, transparent); }
.lp-prod__img svg { width: 2.6em; height: 2.6em; fill: currentColor; }
.lp-prod .lp-sk--short { width: 60%; }
.lp-prod__price { display: block; width: 36%; height: 0.6em; border-radius: 0.2em; background: color-mix(in oklab, var(--ds-ink-2) 40%, transparent); }
.lp-prod--hit::before { content: ""; position: absolute; inset: -0.4em; border-radius: 0.7em; box-shadow: 0 0 0 1.5px var(--ds-green); background: color-mix(in oklab, var(--ds-green) 9%, transparent); opacity: 0; transform: scale(0.96); transition: opacity 240ms, transform 340ms var(--_pop); }
.lp-page.is-aiming .lp-prod--hit::before { opacity: 1; transform: none; }
.lp-page.is-clicked .lp-prod--hit::before { transform: scale(0.97); }
.lp-page__cursor { position: absolute; left: 58%; top: 34%; z-index: 2; width: 1.5em; height: 1.5em; fill: var(--ds-ink); stroke: var(--lp-surface); stroke-width: 1.3; stroke-linejoin: round; opacity: 0; transform: translate(9em, 6em); transition: opacity 220ms, transform 600ms var(--lp-ease); }
.lp-page.is-aiming .lp-page__cursor { opacity: 1; transform: none; }
.lp-page.is-clicked .lp-page__cursor { transform: scale(0.82); transition-duration: 120ms; }
/* The agent's pointer carries its name, like a collaborator's cursor. */
.lp-page__who { position: absolute; left: calc(58% + 1.3em); top: calc(34% + 1.25em); z-index: 2; padding: 0.25em 0.5em; border-radius: 0.35em 0.7em 0.7em 0.7em; background: var(--ds-green); color: var(--ds-on-accent); font: 600 0.82em/1 var(--ds-font-text); white-space: nowrap; opacity: 0; transform: translate(9em, 6em); transition: opacity 220ms, transform 600ms var(--lp-ease); }
.lp-page.is-aiming .lp-page__who { opacity: 1; transform: none; }
.lp-page__click { position: absolute; left: 58%; top: 34%; z-index: 1; width: 2.6em; height: 2.6em; margin: -1.3em 0 0 -1.3em; border-radius: 50%; border: 1.5px solid var(--ds-green); opacity: 0; transform: scale(0.3); pointer-events: none; }
.lp-demo[data-playing] .lp-page.is-clicked:not(.is-product) .lp-page__click { animation: lp-click 480ms var(--_ease); }
@keyframes lp-click { 0% { opacity: 1; transform: scale(0.3); } 100% { opacity: 0; transform: scale(1.4); } }

.lp-page__item { display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr); gap: 1.4em; align-content: start; }
.lp-demo[data-playing] .lp-page:not(.is-product) .lp-page__item { opacity: 0; transform: translateX(2.5em); }
.lp-page.is-product .lp-page__item { transition-delay: 120ms; }
.lp-page__item .lp-prod__img { height: 10em; }
.lp-page__item .lp-prod__img svg { width: 4.8em; height: 4.8em; }
.lp-page__info { display: grid; gap: 0.55em; align-content: start; justify-items: start; padding-top: 0.3em; }
.lp-page__info .lp-sk { width: min(100%, 22em); }
.lp-page__info .lp-sk--short { width: min(60%, 13em); }
.lp-page__price { margin-top: 0.5em; font: 650 2.3em/1 var(--ds-font-display); font-stretch: 108%; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ds-ink); transform-origin: left center; transition: opacity 220ms, transform 500ms var(--_pop); }
.lp-page__stock { display: inline-flex; align-items: center; gap: 0.4em; font: 500 0.95em/1 var(--ds-font-text); color: var(--ds-green-ink); transition: opacity 280ms 150ms; }
.lp-page__stock::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--ds-green); }
.lp-demo[data-playing] .lp-page:not(.has-price) .lp-page__price { opacity: 0; transform: scale(0.5); }
.lp-demo[data-playing] .lp-page:not(.has-price) .lp-page__stock { opacity: 0; }
.lp-demo[data-best] .lp-page.is-best .lp-page__price { color: var(--ds-green-ink); }
.lp-page__btn { display: block; width: 10em; height: 2.2em; margin-top: 0.4em; border-radius: 1.1em; background: color-mix(in oklab, var(--ds-ink-3) 22%, var(--lp-surface-2)); }

/* Result: rows land as each price is read, then sort by price. */
.lp-demo__result { position: relative; z-index: 2; display: grid; gap: var(--ds-space-2); width: calc(100% - 2.5rem); margin: -2.5rem -1.25rem 0 auto; padding: 0.75rem 1rem 0.7rem; border: 1px solid color-mix(in oklab, var(--ds-green) 40%, var(--lp-edge-2)); border-radius: var(--lp-radius); background: var(--lp-surface); box-shadow: var(--lp-shadow), 0 18px 40px -16px var(--lp-drop); transition: opacity 420ms var(--_ease), transform 560ms var(--_ease); }
.lp-demo[data-playing]:not([data-rows]) .lp-demo__result { opacity: 0; transform: translateY(1.25rem) scale(0.97); }
.lp-demo__rhead { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); }
.lp-demo__src { position: relative; font-size: var(--ds-text-xs); color: var(--ds-ink-3); }
.lp-demo__src > span { transition: opacity var(--ds-dur-2) 480ms; }
.lp-demo__src > span + span { position: absolute; right: 0; top: 0; white-space: nowrap; }
.lp-demo[data-sort="pre"] .lp-demo__src > span:first-child, .lp-demo:not([data-sort="pre"]) .lp-demo__src > span + span { opacity: 0; }
.lp-json { display: grid; isolation: isolate; font: 400 clamp(0.625rem, 1.75cqi, 0.75rem)/1.9 var(--ds-font-code); color: var(--ds-ink-2); letter-spacing: -0.01em; }
.lp-j { position: relative; display: block; white-space: pre; }
.lp-j__num { color: var(--ds-ink); }
/* Each row is opaque and its own layer, so rows passing each other while sorting never mix their text. */
.lp-j--row { z-index: 0; background: var(--lp-surface); transition: opacity 300ms, transform 640ms var(--lp-ease); }
.lp-j--best { z-index: 1; }
.lp-demo[data-playing] .lp-j--row:not(.is-in) { opacity: 0; }
.lp-demo[data-sort="pre"] .lp-j--row { transform: translateY(calc((var(--pre) - var(--i)) * 100%)); }
.lp-j--row::before { content: ""; position: absolute; z-index: -1; inset: 0 -0.5rem; border-radius: var(--ds-radius-sm); background: var(--ds-green-wash); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ds-green) 35%, transparent); opacity: 0; transition: opacity 360ms; }
.lp-j--row.is-in::before { animation: lp-flash 900ms ease-out; }
.lp-demo[data-best] .lp-j--best::before { opacity: 1; animation: none; }
@keyframes lp-flash { 0% { opacity: 0.9; } 100% { opacity: 0; } }
.lp-j__c { transition: opacity var(--ds-dur-2) 520ms; }
.lp-demo[data-sort="pre"] .lp-j--best .lp-j__c, .lp-demo:not([data-sort="pre"]) .lp-j--last .lp-j__c { opacity: 0; }
.lp-j__tag { position: absolute; right: 0; top: 50%; padding: 0.3rem 0.55rem; border-radius: 1rem; background: var(--ds-green); color: var(--ds-on-accent); font: 600 var(--ds-text-2xs)/1 var(--ds-font-text); letter-spacing: 0; opacity: 0; transform: translateY(-50%) scale(0.7); transition: opacity 240ms, transform 420ms var(--_pop); }
.lp-demo[data-best] .lp-j__tag { opacity: 1; transform: translateY(-50%); }
.lp-demo__wrap { display: none; }

@media (prefers-reduced-motion: reduce) {
  .lp-demo *, .lp-demo *::before, .lp-demo *::after { transition: none !important; animation: none !important; }
}
.lp-demo[data-state="reset"] :is(.lp-demo__stage, .lp-demo__result, .lp-demo__task, .lp-demo__steps) { opacity: 0; transition: opacity 420ms; }

@container (max-width: 34rem) {
  .lp-demo__head { padding: var(--ds-space-3); }
  .lp-demo__task { font-size: var(--ds-text-md); }
  .lp-demo__steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-2) var(--ds-space-3); font-size: var(--ds-text-xs); }
  .lp-demo__steps li:nth-child(2) .lp-step__line { visibility: hidden; }
  .lp-demo__stage { --_pad: var(--ds-space-3); padding-bottom: 3rem; font-size: 9.5px; }
  .lp-demo__slot { bottom: 3rem; }
  /* Narrow window: each tab puts its price under the address, and the page loses its extras. */
  .lp-br__tabs { padding-inline: 0.5em; gap: 0.2em; }
  .lp-tab { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 0.45em; row-gap: 0.3em; height: auto; padding: 0.55em 0.6em 0.5em; }
  .lp-tab__price { grid-column: 2; justify-self: start; margin: 0; }
  .lp-page .lp-sk--nav, .lp-page__who { display: none; }
  .lp-page__item { grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 1.1em; }
  .lp-page__item .lp-prod__img { height: 9em; }
  .lp-demo__result { width: auto; margin: -2rem var(--ds-space-2) 0; padding: 0.625rem 0.75rem; }
}
/* Too narrow for one object per line: each object takes two. */
@container (max-width: 36rem) {
  .lp-json { font-size: 0.65625rem; }
  .lp-demo__wrap { display: inline; }
  .lp-j__tag { top: 0.95em; }
}

/* Product: three ways in, as large tabs over one panel ---------------------- */
.lp-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-space-3); }
.lp-way { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon title" "icon sub"; align-items: center; gap: 0.125rem var(--ds-space-4); padding: var(--ds-space-4) var(--ds-space-5); border: 1px solid var(--lp-edge); border-radius: var(--lp-radius); background: transparent; color: var(--ds-ink-2); text-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--ds-dur-1), border-color var(--ds-dur-1); }
.lp-way .lp-icon { grid-area: icon; transition: background-color var(--ds-dur-2), color var(--ds-dur-2); }
.lp-way__title { grid-area: title; font: 600 var(--ds-text-h4)/1.3 var(--ds-font-text); color: var(--ds-ink); }
.lp-way__sub { grid-area: sub; font-size: var(--ds-text-md); line-height: 1.4; color: var(--ds-ink-3); }
.lp-way:hover { background: var(--lp-surface); border-color: var(--lp-edge-2); }
.lp-way[aria-selected="true"] { background: var(--lp-surface); border-color: var(--lp-edge-2); box-shadow: var(--lp-shadow); }
.lp-way[aria-selected="true"] .lp-icon { background: var(--ds-ink); border-color: var(--ds-ink); color: var(--lp-bg); }
.lp-way:focus-visible { outline-offset: 2px; }
.lp-panel { display: grid; gap: var(--ds-space-8); margin-top: var(--ds-space-3); padding: clamp(1.25rem, 0.8rem + 2vw, 2.5rem); border: 1px solid var(--lp-edge); border-radius: var(--lp-radius-lg); background: var(--lp-surface); box-shadow: var(--lp-shadow); animation: ds-rise var(--ds-dur-2) var(--ds-ease-out); }
.lp-panel__copy { display: grid; gap: var(--ds-space-5); align-content: start; justify-items: start; }
.lp-points { display: grid; gap: var(--ds-space-3); font-size: var(--ds-text-base); color: var(--ds-ink-2); }
.lp-points li { position: relative; padding-inline-start: 1.75rem; }
.lp-points li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--lp-surface-2); box-shadow: inset 0 0 0 1px var(--lp-edge-2); }
.lp-points li::after { content: ""; position: absolute; left: 0.4375rem; top: calc(0.3em + 0.25rem); width: 0.25rem; height: 0.5rem; border: solid var(--ds-ink); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.lp-code { background: var(--lp-bg); border-color: var(--lp-edge); }
.lp-code .ds-code__bar .ds-tabs { --_surface: var(--lp-bg); }
.lp-code pre { font-size: var(--ds-text-xs); }
@media (min-width: 900px) { .lp-panel { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--ds-space-10); align-items: center; } }
@media (max-width: 760px) {
  .lp-way { grid-template-columns: minmax(0, 1fr); grid-template-areas: "icon" "title"; justify-items: start; gap: var(--ds-space-2); padding: var(--ds-space-3); }
  .lp-way__sub { display: none; }
  .lp-way__title { font-size: var(--ds-text-md); }
}

/* Engine proof strip ---------------------------------------------------- */
.lp-proof { display: grid; gap: var(--ds-space-6) var(--ds-space-10); align-items: center; padding: clamp(1.25rem, 0.8rem + 2vw, 2rem); border: 1px solid var(--lp-edge); border-radius: var(--lp-radius-lg); background: linear-gradient(110deg, var(--lp-surface), color-mix(in oklab, var(--lp-surface) 40%, transparent)); box-shadow: var(--lp-shadow); }
.lp-proof__head { display: grid; gap: var(--ds-space-3); justify-items: start; }
.lp-proof__head .ds-h3 { max-width: 22ch; }
.lp-proof__links { display: flex; flex-wrap: wrap; gap: var(--ds-space-1) var(--ds-space-5); font-size: var(--ds-text-base); }
.lp-proof__items { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); gap: var(--ds-space-5); }
.lp-proof__items li { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon title" "icon text"; gap: 0.125rem var(--ds-space-3); align-items: center; }
.lp-proof__items .lp-icon { grid-area: icon; }
.lp-proof__items strong { grid-area: title; font: 600 var(--ds-text-h4)/1.3 var(--ds-font-text); color: var(--ds-ink); }
.lp-proof__items li > span:last-child { grid-area: text; font-size: var(--ds-text-md); line-height: 1.4; color: var(--ds-ink-3); }
.lp-proof__items a { color: var(--ds-ink-2); text-decoration-color: var(--ds-line-control); text-underline-offset: 3px; }
@media (min-width: 1000px) { .lp-proof { grid-template-columns: minmax(0, 5fr) minmax(0, 9fr); } }

/* Use case tiles -------------------------------------------------------- */
.lp-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-3); }
@media (min-width: 640px) { .lp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .lp-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lp-tile { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon title" "icon text"; align-items: center; gap: 0.125rem var(--ds-space-4); height: 100%; padding: var(--ds-space-5); border: 1px solid var(--lp-edge); border-radius: var(--lp-radius); background: var(--lp-surface); box-shadow: inset 0 1px 0 var(--lp-shine); color: var(--ds-ink); text-decoration: none; transition: border-color var(--ds-dur-1), background-color var(--ds-dur-1), transform var(--ds-dur-2) var(--ds-ease-out); }
.lp-tile .lp-icon { grid-area: icon; }
.lp-tile__title { grid-area: title; font: 600 var(--ds-text-h4)/1.3 var(--ds-font-text); }
.lp-tile__text { grid-area: text; font-size: var(--ds-text-md); line-height: 1.4; color: var(--ds-ink-3); }
.lp-tile:hover { border-color: var(--lp-edge-2); background: var(--lp-surface-2); transform: translateY(-2px); }

/* Pricing block --------------------------------------------------------- */
.lp-price { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: var(--ds-space-8) var(--ds-space-12); align-items: center; padding: clamp(1.5rem, 0.8rem + 3vw, 3.5rem); border: 1px solid var(--lp-edge); border-radius: var(--lp-radius-lg); background: var(--lp-surface); box-shadow: var(--lp-shadow); }
.lp-price::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(28rem 18rem at 0% 0%, var(--lp-glow-2), transparent 70%); pointer-events: none; }
.lp-price__copy { display: grid; gap: var(--ds-space-4); justify-items: start; }
.lp-price__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-3) var(--ds-space-6); margin-top: var(--ds-space-2); font-size: var(--ds-text-md); }
.lp-price__list { display: grid; border-top: 1px solid var(--lp-edge); }
.lp-price__list > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ds-space-4); padding-block: var(--ds-space-4); border-bottom: 1px solid var(--lp-edge); }
.lp-price__list dt { color: var(--ds-ink-2); font-size: var(--ds-text-base); }
.lp-price__list dd { flex: none; font: 600 var(--ds-text-h3)/1.1 var(--ds-font-display); font-stretch: 108%; letter-spacing: -0.03em; color: var(--ds-ink); }
@media (min-width: 900px) { .lp-price { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* FAQ ------------------------------------------------------------------- */
.lp-faq { display: grid; gap: var(--ds-space-8) var(--ds-space-12); align-items: start; }
.lp-faq .ds-faq { max-width: none; border-top-color: var(--lp-edge); }
.lp-faq .ds-faq details { border-bottom-color: var(--lp-edge); }
.lp-faq .ds-faq summary { min-height: 3.75rem; font-size: var(--ds-text-lg); }
@media (min-width: 900px) { .lp-faq { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } .lp-faq > .ds-h2 { position: sticky; top: var(--ds-space-8); } }

/* Closing call ------------------------------------------------------------ */
.lp-cta { padding-top: 0; }
.lp-cta__box { position: relative; isolation: isolate; overflow: hidden; display: grid; justify-items: center; gap: var(--ds-space-4); padding: clamp(3rem, 2rem + 4vw, 6rem) clamp(1.25rem, 1rem + 2vw, 3rem); border: 1px solid var(--lp-edge); border-radius: var(--lp-radius-lg); background: var(--lp-surface); box-shadow: var(--lp-shadow); text-align: center; }
.lp-cta__box::before { content: ""; position: absolute; z-index: -2; inset: 0; background: radial-gradient(36rem 20rem at 50% 115%, var(--lp-glow), transparent 70%); pointer-events: none; }
.lp-cta__box::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background-image: linear-gradient(var(--lp-grid) 1px, transparent 1px), linear-gradient(90deg, var(--lp-grid) 1px, transparent 1px); background-size: 3.5rem 3.5rem; background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 100%, black, transparent 75%); mask-image: radial-gradient(ellipse 60% 80% at 50% 100%, black, transparent 75%); }
.lp-cta__box .lp-lead { max-width: none; text-wrap: balance; }
@media (max-width: 640px) { .lp-signup .ds-btn { flex: 1 1 100%; } }
.lp-signup { width: min(30rem, 100%); margin-top: var(--ds-space-3); }
.lp-signup .ds-input { background: var(--lp-bg); }

@media (prefers-reduced-motion: reduce) {
  .lp-tile:hover { transform: none; }
}

/* ==========================================================================
   15. ROUND 4: PRICING, USE CASES, COMPARISONS
       pricing.html, use-cases.html, use-cases/*.html, compare.html, vs/*.html.
       These pages take body.lp (section 14) and add: an inner-page hero (mk-),
       pack cards and cost tiles (px-), the filterable use-case grid (uc-), and
       comparison verdicts, marks, sticky tables and cost bars (cmp-).
   ========================================================================== */

/* Inner-page hero: the landing glow, fainter and in one corner. ------------ */
.mk-hero { position: relative; isolation: isolate; padding-block: clamp(2.25rem, 1rem + 4vw, 5rem) clamp(1.5rem, 1rem + 2vw, 3rem); }
.mk-hero::before { content: ""; position: absolute; z-index: -2; inset: -6rem 0 -2rem; pointer-events: none;
  background: radial-gradient(36rem 24rem at 88% 18%, color-mix(in oklab, var(--lp-glow) 70%, transparent), transparent 70%), radial-gradient(26rem 18rem at 4% 0%, var(--lp-glow-2), transparent 70%); }
.mk-hero::after { content: ""; position: absolute; z-index: -1; inset: -6rem 0 0; pointer-events: none;
  background-image: linear-gradient(var(--lp-grid) 1px, transparent 1px), linear-gradient(90deg, var(--lp-grid) 1px, transparent 1px); background-size: 3.5rem 3.5rem; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 50% 70% at 85% 20%, black, transparent 75%); mask-image: radial-gradient(ellipse 50% 70% at 85% 20%, black, transparent 75%); }
.mk-hero__copy { display: grid; gap: var(--ds-space-5); justify-items: start; max-width: 52rem; }
.mk-hero__title { font-size: clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem); line-height: 1.02;
  background: linear-gradient(180deg, var(--ds-ink) 35%, color-mix(in oklab, var(--ds-ink) 72%, var(--lp-bg))); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 0.06em; }
.mk-hero .lp-lead { max-width: 38em; }
.mk-hero__cta { display: flex; flex-wrap: wrap; gap: var(--ds-space-3); }
.mk-hero__grid { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: center; }
@media (min-width: 1080px) { .mk-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.mk-dated { display: inline-flex; align-items: center; gap: var(--ds-space-2); font-size: var(--ds-text-sm); color: var(--ds-ink-3); }

/* A layered card, the same surface as the landing panels. */
.mk-card { position: relative; padding: clamp(1.25rem, 0.9rem + 1.5vw, 2rem); border: 1px solid var(--lp-edge); border-radius: var(--lp-radius-lg); background: var(--lp-surface); box-shadow: var(--lp-shadow); }
.mk-note { font-size: var(--ds-text-md); line-height: 1.5; color: var(--ds-ink-3); max-width: 60rem; }
.mk-note a { color: var(--ds-ink-2); }
.mk-links { display: flex; flex-wrap: wrap; gap: var(--ds-space-2) var(--ds-space-6); font-size: var(--ds-text-md); }
.mk-stack { display: grid; gap: var(--ds-space-6); }

/* Icon list: an icon tile, a short title, one line under it. */
.mk-ilist { display: grid; gap: var(--ds-space-5); }
.mk-ilist li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.125rem var(--ds-space-4); align-items: start; }
.mk-ilist .lp-icon { grid-row: span 2; }
.mk-ilist strong { font: 600 var(--ds-text-base)/1.35 var(--ds-font-text); color: var(--ds-ink); padding-top: 0.125rem; }
.mk-ilist li > span:last-child { font-size: var(--ds-text-md); line-height: 1.5; color: var(--ds-ink-3); }
.mk-ilist li > span:last-child code { font-size: 0.92em; }

/* Fold: detail behind a summary line. */
.mk-fold { border: 1px solid var(--lp-edge); border-radius: var(--lp-radius); background: color-mix(in oklab, var(--lp-surface) 60%, transparent); }
.mk-fold > summary { display: flex; align-items: center; gap: var(--ds-space-3); min-height: 3.25rem; padding: var(--ds-space-3) var(--ds-space-5); cursor: pointer; list-style: none; font: 600 var(--ds-text-base)/1.3 var(--ds-font-text); color: var(--ds-ink); -webkit-tap-highlight-color: transparent; }
.mk-fold > summary::-webkit-details-marker { display: none; }
.mk-fold > summary::after { content: ""; flex: none; margin-inline-start: auto; width: 0.5rem; height: 0.5rem; border-right: 1.5px solid var(--ds-ink-2); border-bottom: 1.5px solid var(--ds-ink-2); transform: translateY(-25%) rotate(45deg); transition: transform var(--ds-dur-2) var(--ds-ease-out); }
.mk-fold[open] > summary::after { transform: translateY(25%) rotate(225deg); }
.mk-fold > summary .ds-icon { color: var(--ds-ink-3); }
.mk-fold__body { display: grid; gap: var(--ds-space-5); padding: 0 var(--ds-space-5) var(--ds-space-5); }
.mk-fold__body dl { display: grid; gap: var(--ds-space-4); }
.mk-fold__body dt { font-weight: 600; color: var(--ds-ink); font-size: var(--ds-text-base); }
.mk-fold__body dd { margin: 0.25rem 0 0; font-size: var(--ds-text-md); line-height: 1.55; color: var(--ds-ink-2); max-width: 60rem; }

/* Pricing: pack cards ------------------------------------------------------ */
.px-packs { display: grid; gap: var(--ds-space-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .px-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1140px) { .px-packs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.px-pack { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: var(--ds-space-5); padding: var(--ds-space-6); border: 1px solid var(--lp-edge); border-radius: var(--lp-radius-lg); background: var(--lp-surface); box-shadow: var(--lp-shadow); }
.px-pack--lift { border-color: var(--lp-edge-2); }
.px-pack--lift::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(22rem 14rem at 100% 0%, color-mix(in oklab, var(--lp-glow) 55%, transparent), transparent 70%); }
.px-pack__head { display: grid; gap: var(--ds-space-1); }
.px-pack__name { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-2); font: 600 var(--ds-text-h4)/1.3 var(--ds-font-text); color: var(--ds-ink); }
.px-pack__for { font-size: var(--ds-text-md); line-height: 1.4; color: var(--ds-ink-3); }
@media (min-width: 640px) { .px-pack__for { min-height: 2.8em; } .px-pack__credits { min-height: 6.25rem; align-content: start; } }
.px-pack__badge { display: inline-flex; align-items: center; height: 1.5rem; padding-inline: 0.5rem; border: 1px solid var(--lp-edge-2); border-radius: var(--ds-radius-sm); background: var(--lp-surface-2); font: 600 var(--ds-text-xs)/1 var(--ds-font-text); color: var(--ds-ink); white-space: nowrap; }
.px-pack__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--ds-space-2); }
.px-pack__price b { font: 650 clamp(2.5rem, 2rem + 1.5vw, 3.25rem)/1 var(--ds-font-display); font-stretch: 108%; letter-spacing: -0.045em; color: var(--ds-ink); }
.px-pack__price span { font-size: var(--ds-text-md); color: var(--ds-ink-3); }
.px-pack__credits { display: grid; gap: 0.125rem; padding-block: var(--ds-space-4); border-block: 1px solid var(--lp-edge); }
.px-pack__credits strong { font: 600 var(--ds-text-lg)/1.3 var(--ds-font-text); color: var(--ds-ink); }
.px-pack__credits span { font-size: var(--ds-text-sm); color: var(--ds-ink-3); }
.px-pack .lp-points { gap: var(--ds-space-2); font-size: var(--ds-text-md); }
.px-pack .ds-btn { margin-top: auto; }

/* Pricing: what things cost, as tiles -------------------------------------- */
.px-costs { display: grid; gap: var(--ds-space-3); grid-template-columns: repeat(auto-fill, minmax(min(16.5rem, 100%), 1fr)); }
.px-cost { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon val" "icon label"; gap: 0 var(--ds-space-4); align-items: center; padding: var(--ds-space-5); border: 1px solid var(--lp-edge); border-radius: var(--lp-radius); background: var(--lp-surface); box-shadow: inset 0 1px 0 var(--lp-shine); }
.px-cost .lp-icon { grid-area: icon; }
.px-cost__val { grid-area: val; font: 650 var(--ds-text-h3)/1.15 var(--ds-font-display); font-stretch: 108%; letter-spacing: -0.03em; color: var(--ds-ink); }
.px-cost__val small { font: 500 var(--ds-text-md)/1 var(--ds-font-text); letter-spacing: 0; color: var(--ds-ink-3); margin-inline-start: 0.25rem; }
.px-cost__label { grid-area: label; font-size: var(--ds-text-md); line-height: 1.35; color: var(--ds-ink-2); }

/* The task formula as a row of chips */
.px-formula { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2) var(--ds-space-3); padding: var(--ds-space-4) var(--ds-space-5); border: 1px dashed var(--lp-edge-2); border-radius: var(--lp-radius); font-size: var(--ds-text-md); color: var(--ds-ink-2); }
.px-formula__lead { font-weight: 600; color: var(--ds-ink); margin-inline-end: var(--ds-space-1); }
.px-formula__chip { display: inline-flex; align-items: center; min-height: 2rem; padding: 0.25rem 0.625rem; border: 1px solid var(--lp-edge); border-radius: var(--ds-radius-sm); background: var(--lp-surface-2); color: var(--ds-ink); }
.px-formula__op { font: 600 var(--ds-text-lg)/1 var(--ds-font-text); color: var(--ds-ink-3); }
.px-formula__chip--opt { border-style: dashed; background: transparent; color: var(--ds-ink-2); }

/* Pricing: the free credits, five ways */
.px-free { display: grid; gap: var(--ds-space-3); grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); }
.px-free li { display: grid; gap: var(--ds-space-2); align-content: start; padding: var(--ds-space-5); border: 1px solid var(--lp-edge); border-radius: var(--lp-radius); background: var(--lp-surface); box-shadow: inset 0 1px 0 var(--lp-shine); }
.px-free b { font: 650 var(--ds-text-h3)/1.1 var(--ds-font-display); font-stretch: 108%; letter-spacing: -0.03em; color: var(--ds-ink); }
.px-free span { font-size: var(--ds-text-md); line-height: 1.4; color: var(--ds-ink-2); }
.px-free code { font: 400 var(--ds-text-xs)/1.4 var(--ds-font-code); color: var(--ds-ink-3); }

/* Two-up section body */
.px-two { display: grid; gap: var(--ds-space-3); }
@media (min-width: 960px) { .px-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.px-two .mk-card { display: grid; gap: var(--ds-space-6); align-content: start; }

/* The workload table inside a card */
.px-table { padding-block: var(--ds-space-2); }
.px-table .ds-table { font-size: var(--ds-text-md); }
.px-table .ds-table th[scope="row"] { color: var(--ds-ink); font-size: var(--ds-text-md); white-space: normal; }
.px-table .ds-table td.ds-num { font-variant-numeric: tabular-nums; color: var(--ds-ink); }
.px-table .ds-table :is(th, td) { border-color: var(--lp-edge); }
.px-table .ds-table tbody tr:last-child > * { border-bottom: 0; }

/* Use cases: filters and the grid ------------------------------------------ */
.uc-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); }
@media (max-width: 640px) {
  .uc-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--ds-gutter)); padding-inline: var(--ds-gutter); }
  .uc-filters::-webkit-scrollbar { display: none; }
  .uc-filters .ds-chip { flex: none; }
}
.uc-filters .ds-chip { height: 2.5rem; padding-inline: 0.875rem; border-color: var(--lp-edge-2); border-radius: var(--ds-radius-md); background: var(--lp-surface); font-size: var(--ds-text-md); }
.uc-filters .ds-chip .ds-icon { color: var(--ds-ink-3); }
.uc-filters .ds-chip[aria-pressed="true"] { background: var(--ds-ink); border-color: var(--ds-ink); color: var(--lp-bg); box-shadow: none; }
.uc-filters .ds-chip[aria-pressed="true"] .ds-icon { color: inherit; }
.uc-filters__count { margin-inline-start: auto; font-size: var(--ds-text-sm); color: var(--ds-ink-3); }
@media (max-width: 640px) { .uc-filters__count { flex: none; margin-inline-start: var(--ds-space-2); } }

.uc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-3); grid-auto-flow: row dense; }
@media (min-width: 680px) { .uc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .uc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.uc-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon cat" "icon title" "text text" "links links"; gap: 0 var(--ds-space-4); align-content: start; padding: var(--ds-space-5); border: 1px solid var(--lp-edge); border-radius: var(--lp-radius); background: var(--lp-surface); box-shadow: inset 0 1px 0 var(--lp-shine); transition: border-color var(--ds-dur-1), background-color var(--ds-dur-1); animation: ds-rise var(--ds-dur-2) var(--ds-ease-out); }
.uc-card[hidden] { display: none; }
.uc-card:hover { border-color: var(--lp-edge-2); background: var(--lp-surface-2); }
.uc-card .lp-icon { grid-area: icon; align-self: center; }
.uc-card__cat { grid-area: cat; font-size: var(--ds-text-sm); color: var(--ds-ink-3); }
.uc-card__title { grid-area: title; font: 600 var(--ds-text-h4)/1.3 var(--ds-font-text); color: var(--ds-ink); }
.uc-card__text { grid-area: text; margin-top: var(--ds-space-3); font-size: var(--ds-text-md); line-height: 1.45; color: var(--ds-ink-3); }
.uc-card__links { grid-area: links; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-1) var(--ds-space-4); margin-top: var(--ds-space-3); font-size: var(--ds-text-md); }
/* The first link is the card's target: its hit area covers the card. */
.uc-card__links a:first-child::after { content: ""; position: absolute; inset: 0; border-radius: var(--lp-radius); }
.uc-card__links a + a { position: relative; z-index: 1; }
.uc-card--feature { isolation: isolate; overflow: hidden; grid-template-areas: "icon cat" "icon title" "text text" "api api" "links links"; border-color: var(--lp-edge-2); box-shadow: var(--lp-shadow); }
.uc-card--feature::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(26rem 14rem at 100% 0%, var(--lp-glow-2), transparent 70%); }
.uc-card--feature .uc-card__title { font: 650 var(--ds-text-h3)/1.2 var(--ds-font-display); font-stretch: 108%; letter-spacing: -0.03em; }
.uc-card--feature .lp-icon { width: 3rem; height: 3rem; background: var(--ds-ink); border-color: var(--ds-ink); color: var(--lp-bg); }
.uc-card--feature .uc-card__text { color: var(--ds-ink-2); }
.uc-card__api { grid-area: api; justify-self: start; max-width: 100%; margin-top: var(--ds-space-4); }
.uc-chip { display: inline-flex; align-items: center; gap: 0.375rem; max-width: 100%; height: 1.75rem; padding-inline: 0.5rem; border: 1px solid var(--lp-edge); border-radius: var(--ds-radius-sm); background: var(--lp-bg); font: 400 var(--ds-text-xs)/1 var(--ds-font-code); color: var(--ds-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1060px) { .uc-card--feature { grid-column: span 2; padding: var(--ds-space-6); } }
.uc-empty { padding: var(--ds-space-8); text-align: center; color: var(--ds-ink-3); }

/* Use-case pages ----------------------------------------------------------- */
.uc-steps { display: grid; gap: var(--ds-space-5); counter-reset: uc-step; }
.uc-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.125rem var(--ds-space-4); counter-increment: uc-step; }
.uc-steps li::before { content: counter(uc-step); grid-row: span 2; display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--lp-edge-2); border-radius: 50%; background: var(--lp-surface-2); font: 600 var(--ds-text-sm)/1 var(--ds-font-text); color: var(--ds-ink); }
.uc-steps h3 { font: 600 var(--ds-text-base)/1.35 var(--ds-font-text); color: var(--ds-ink); padding-top: 0.25rem; }
.uc-steps p { font-size: var(--ds-text-md); line-height: 1.5; color: var(--ds-ink-3); }
.uc-panel { margin-top: 0; }
.uc-panel .ds-code { min-width: 0; }
.uc-feats { display: grid; gap: var(--ds-space-3); grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.uc-feat { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ds-space-3) var(--ds-space-4); align-content: start; align-items: center; padding: var(--ds-space-5); border: 1px solid var(--lp-edge); border-radius: var(--lp-radius); background: var(--lp-surface); box-shadow: inset 0 1px 0 var(--lp-shine); }
.uc-feat h3 { font: 600 var(--ds-text-h4)/1.3 var(--ds-font-text); color: var(--ds-ink); }
.uc-feat p { grid-column: 1 / -1; font-size: var(--ds-text-md); line-height: 1.5; color: var(--ds-ink-3); }
.uc-price { display: grid; gap: var(--ds-space-6) var(--ds-space-10); }
@media (min-width: 960px) { .uc-price { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.uc-costs { grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }
.uc-packs { display: grid; align-content: start; }
.uc-packs > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ds-space-4); padding-block: var(--ds-space-3); border-bottom: 1px solid var(--lp-edge); }
.uc-packs > div:last-child { border-bottom: 0; }
.uc-packs dt { color: var(--ds-ink-2); font-size: var(--ds-text-md); }
.uc-packs dt b { color: var(--ds-ink); font-weight: 600; margin-inline-end: var(--ds-space-2); }
.uc-packs dd { font: 600 var(--ds-text-lg)/1.2 var(--ds-font-display); font-stretch: 108%; letter-spacing: -0.02em; color: var(--ds-ink); text-align: end; }

/* Comparisons: verdict ----------------------------------------------------- */
.cmp-verdict { display: grid; gap: var(--ds-space-3); }
@media (min-width: 860px) { .cmp-verdict { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cmp-pick { display: grid; gap: var(--ds-space-4); align-content: start; padding: var(--ds-space-6); border: 1px solid var(--lp-edge); border-radius: var(--lp-radius-lg); background: var(--lp-surface); box-shadow: var(--lp-shadow); }
.cmp-pick--us { position: relative; isolation: isolate; overflow: hidden; border-color: var(--lp-edge-2); }
.cmp-pick--us::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(22rem 12rem at 0% 0%, color-mix(in oklab, var(--lp-glow) 50%, transparent), transparent 70%); }
.cmp-pick__title { display: flex; align-items: center; gap: var(--ds-space-3); font: 600 var(--ds-text-h4)/1.3 var(--ds-font-text); color: var(--ds-ink); }
.cmp-pick .lp-points { font-size: var(--ds-text-md); gap: var(--ds-space-2); }
.cmp-plain li::after { display: none; }
.cmp-plain li::before { left: 0.4375rem; top: 0.6em; width: 0.375rem; height: 0.375rem; background: var(--ds-ink-3); box-shadow: none; }
.cmp-pick__note { font-size: var(--ds-text-sm); line-height: 1.5; color: var(--ds-ink-3); }
.cmp-need { display: grid; gap: var(--ds-space-2); }
@media (min-width: 900px) { .cmp-need { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cmp-need li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--ds-space-1) var(--ds-space-4); align-items: center; padding: var(--ds-space-3) var(--ds-space-4); border: 1px solid var(--lp-edge); border-radius: var(--lp-radius); background: var(--lp-surface); font-size: var(--ds-text-md); color: var(--ds-ink-2); }
.cmp-need li > span:last-child { justify-self: end; text-align: end; font-weight: 600; color: var(--ds-ink); }
@media (max-width: 560px) { .cmp-need li { grid-template-columns: minmax(0, 1fr); } .cmp-need li > span:last-child { justify-self: start; text-align: start; } }

/* Comparisons: marks ------------------------------------------------------- */
.cmp-mark { display: inline-grid; place-items: center; flex: none; width: 1.375rem; height: 1.375rem; border-radius: 50%; vertical-align: -0.35em; }
.cmp-mark .ds-icon { width: 0.875rem; height: 0.875rem; stroke-width: 2.6; }
.cmp-mark--yes { background: var(--ds-ink); color: var(--lp-bg); }
.cmp-mark--no { box-shadow: inset 0 0 0 1.5px var(--lp-edge-2); color: var(--ds-ink-3); }
.cmp-mark--part { background: linear-gradient(90deg, var(--ds-ink-2) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--ds-ink-2); }
.cmp-mark--na { box-shadow: inset 0 0 0 1.5px var(--lp-edge-2); }
.cmp-mark--na::before { content: ""; width: 0.5rem; height: 1.5px; background: var(--ds-ink-3); }
.cmp-legend { display: flex; flex-wrap: wrap; gap: var(--ds-space-2) var(--ds-space-5); font-size: var(--ds-text-sm); color: var(--ds-ink-3); }
.cmp-legend li { display: inline-flex; align-items: center; gap: var(--ds-space-2); }
.cmp-tablehead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-3) var(--ds-space-6); margin-bottom: var(--ds-space-4); }

/* Comparisons: the table. A card that scrolls sideways on phones with the row
   names pinned, instead of stacking into records. */
.cmp-table { --w: 11rem; border: 1px solid var(--lp-edge); border-radius: var(--lp-radius-lg); background: var(--lp-surface); box-shadow: var(--lp-shadow); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--lp-edge-2) transparent; }
.cmp-table .ds-table { min-width: 44rem; font-size: var(--ds-text-md); }
.cmp-table--4 .ds-table { min-width: 64rem; }
.cmp-table .ds-table :is(th, td) { padding: var(--ds-space-4); border-color: var(--lp-edge); vertical-align: top; white-space: normal; line-height: 1.45; }
.cmp-table .ds-table :is(th, td):first-child { padding-inline-start: var(--ds-space-5); }
.cmp-table .ds-table :is(th, td):last-child { padding-inline-end: var(--ds-space-5); }
.cmp-table .ds-table tbody tr:last-child > * { border-bottom: 0; }
.cmp-table thead th { background: var(--lp-surface-2); font: 600 var(--ds-text-md)/1.3 var(--ds-font-text); color: var(--ds-ink); border-bottom-color: var(--lp-edge-2); }
.cmp-table .ds-table tbody th[scope="row"] { padding: var(--ds-space-4) var(--ds-space-4) var(--ds-space-4) var(--ds-space-5); border-color: var(--lp-edge); }
.cmp-table th[scope="row"] { position: sticky; left: 0; z-index: 1; width: 11rem; background: var(--lp-surface); font: 600 var(--ds-text-md)/1.35 var(--ds-font-text); color: var(--ds-ink); box-shadow: inset -1px 0 0 var(--lp-edge); }
.cmp-table thead th:first-child { position: sticky; left: 0; z-index: 2; box-shadow: inset -1px 0 0 var(--lp-edge); }
.cmp-table td { color: var(--ds-ink-2); }
.cmp-table .cmp-us { background-color: color-mix(in oklab, var(--lp-surface-2) 50%, var(--lp-surface)); }
.cmp-table thead .cmp-us { background-color: color-mix(in oklab, var(--lp-surface-2) 70%, var(--ds-ink) 4%); }
.cmp-table td .cmp-mark { margin-inline-end: var(--ds-space-2); }
.cmp-table .ds-table__sub { display: block; margin-top: 0.25rem; font-size: var(--ds-text-sm); color: var(--ds-ink-3); }
@media (max-width: 640px) {
  .cmp-table { border-radius: var(--lp-radius); }
  .cmp-table .ds-table :is(th, td) { padding: var(--ds-space-3); }
  .cmp-table { --w: 7.25rem; }
  .cmp-table .ds-table tbody th[scope="row"] { padding: var(--ds-space-3); }
  .cmp-table th[scope="row"], .cmp-table thead th:first-child { min-width: 7.25rem; font-size: var(--ds-text-sm); }
  .cmp-table .ds-table { min-width: 36rem; font-size: var(--ds-text-sm); }
  .cmp-table--4 .ds-table { min-width: 54rem; }
}
.cmp-scrollhint { display: none; font-size: var(--ds-text-sm); color: var(--ds-ink-3); }
@media (max-width: 640px) { .cmp-scrollhint { display: inline-flex; align-items: center; gap: var(--ds-space-2); } }

/* Comparisons: why each fits, as two cards */
.cmp-fit { display: grid; gap: var(--ds-space-3); }
@media (min-width: 960px) { .cmp-fit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cmp-fit .mk-card { display: grid; gap: var(--ds-space-4); align-content: start; }
.cmp-fit dl { display: grid; }
.cmp-fit dl > div { display: grid; align-content: start; gap: 0.25rem; padding-block: var(--ds-space-4); border-top: 1px solid var(--lp-edge); }
.cmp-fit dt { font-weight: 600; font-size: var(--ds-text-base); color: var(--ds-ink); }
.cmp-fit dd { margin: 0; font-size: var(--ds-text-md); line-height: 1.5; color: var(--ds-ink-3); }
.cmp-fit dd a { color: var(--ds-ink-2); }
.cmp-fit.cmp-fit--one { grid-template-columns: minmax(0, 1fr); }
.cmp-fit--one dl { grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); gap: 0 var(--ds-space-10); }

/* Comparisons: monthly cost as bars */
.cmp-months { display: grid; gap: var(--ds-space-3); }
@media (min-width: 960px) { .cmp-months { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cmp-months .mk-card { display: grid; gap: var(--ds-space-5); align-content: start; }
.cmp-months .ds-h3 { font-size: var(--ds-text-h4); line-height: 1.3; letter-spacing: -0.02em; }
.cmp-months .ds-callout { margin: 0; }
.cmp-month__lead { font-size: var(--ds-text-md); line-height: 1.5; color: var(--ds-ink-3); }
.cmp-bars { display: grid; gap: var(--ds-space-4); }
.cmp-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name val" "bar bar" "how how"; gap: 0.375rem var(--ds-space-4); }
.cmp-bars__name { grid-area: name; font-weight: 600; font-size: var(--ds-text-md); color: var(--ds-ink); }
.cmp-bars__val { grid-area: val; font: 650 var(--ds-text-lg)/1.2 var(--ds-font-display); font-stretch: 108%; letter-spacing: -0.02em; color: var(--ds-ink); font-variant-numeric: tabular-nums; }
.cmp-bars__bar { grid-area: bar; height: 0.5rem; border-radius: var(--ds-radius-full); background: var(--lp-surface-2); box-shadow: inset 0 0 0 1px var(--lp-edge); overflow: hidden; }
.cmp-bars__bar::before { content: ""; display: block; width: calc(var(--v, 0) * 100%); min-width: 0.5rem; height: 100%; border-radius: inherit; background: color-mix(in oklab, var(--ds-ink-3) 80%, transparent); }
.cmp-bars__us .cmp-bars__bar::before { background: var(--ds-ink); }
.cmp-bars__none .cmp-bars__bar::before { display: none; }
.cmp-bars__none .cmp-bars__val { font: 500 var(--ds-text-md)/1.2 var(--ds-font-text); color: var(--ds-ink-3); letter-spacing: 0; }
.cmp-bars__how { grid-area: how; font-size: var(--ds-text-sm); line-height: 1.45; color: var(--ds-ink-3); }

/* Sources: a compact list */
.cmp-sources { display: grid; gap: var(--ds-space-2); font-size: var(--ds-text-sm); color: var(--ds-ink-3); }
.cmp-sources li { overflow-wrap: anywhere; line-height: 1.5; }
.cmp-sources a { color: var(--ds-ink-2); }
.lp-main ol.cmp-sources { padding-inline-start: 1.25rem; list-style: decimal; }
ul.cmp-sources { padding: 0; list-style: none; }
.cmp-sources li:target { color: var(--ds-ink); }

@media (prefers-reduced-motion: reduce) {
  .uc-card { animation: none; }
}
.mk-stack > .lp-head { margin-bottom: 0; }

/* Comparisons: the reasons behind each pick, folded. */
.cmp-folds { max-width: none; border-top-color: var(--lp-edge); }
.cmp-folds details { border-bottom-color: var(--lp-edge); }
.cmp-folds summary { min-height: 3rem; font-size: var(--ds-text-base); }
.cmp-folds p { padding-bottom: var(--ds-space-4); font-size: var(--ds-text-md); line-height: 1.55; color: var(--ds-ink-3); }
.cmp-folds p a { color: var(--ds-ink-2); }
@media (min-width: 960px) { .cmp-fit--one .cmp-folds { columns: 2; column-gap: var(--ds-space-10); } .cmp-fit--one .cmp-folds details { break-inside: avoid; } }

/* Phones: cost and free-credit tiles two to a row, without the icon. */
@media (max-width: 640px) {
  .px-costs, .px-free { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-2); }
  .px-cost { grid-template-columns: minmax(0, 1fr); grid-template-areas: "val" "label"; gap: var(--ds-space-1); align-items: start; padding: var(--ds-space-4); }
  .px-cost .lp-icon { display: none; }
  .px-cost__val small { display: block; margin: 0.125rem 0 0; }
  .px-free li { padding: var(--ds-space-4); }
  .px-pack { padding: var(--ds-space-5); }
}

/* ==========================================================================
   17. REAL RUN (index.html, under the hero)
       An unedited screen recording of one real agent task, in a frame like the
       hero panel, beside the task, its four steps and the JSON it returned.
       site.js (Real run) drives it through attributes on [data-run]:
         .is-ready        script is on: custom controls replace the native ones
         data-state       idle (poster, never played), playing, paused, ended
         li.is-live       the step whose video time has been reached
         li.is-done       the steps before it
         .is-final        the last step is on screen: the result card lights up
       The video carries the real browser chrome, so the frame adds only a slim
       bar (what it is, the job, the speed) and the controls under it.
   ========================================================================== */
.lp-run-head { max-width: 52rem; }
.lp-run-head .lp-lead { max-width: 42em; }
.lp-run { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); align-items: start; }
@media (min-width: 1080px) { .lp-run { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); } }

.lp-run__media { position: relative; isolation: isolate; display: grid; gap: var(--ds-space-4); margin: 0; min-width: 0; }
.lp-run__media::before { content: ""; position: absolute; z-index: -1; inset: -3rem -2rem 2rem; pointer-events: none; background: radial-gradient(60% 55% at 50% 45%, color-mix(in oklab, var(--lp-glow) 70%, transparent), transparent 72%); }
.lp-run__frame { overflow: hidden; border: 1px solid var(--lp-edge-2); border-radius: var(--lp-radius-lg); background: var(--lp-surface); box-shadow: var(--lp-shadow), 0 0 0 0.375rem color-mix(in oklab, var(--lp-surface) 35%, transparent); }

/* Bar: what this is, the job, the speed. */
.lp-run__bar { display: flex; align-items: center; gap: var(--ds-space-3); min-height: 2.75rem; padding: 0.375rem 0.625rem 0.375rem 0.875rem; border-bottom: 1px solid var(--lp-edge); font-size: var(--ds-text-sm); color: var(--ds-ink-2); }
.lp-run__src { display: inline-flex; align-items: center; gap: var(--ds-space-2); font-weight: 500; color: var(--ds-ink); white-space: nowrap; }
.lp-run__src .ds-icon { color: var(--ds-ink-3); }
.lp-run__job { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 var(--ds-text-xs)/1.2 var(--ds-font-code); color: var(--ds-ink-3); }
.lp-run__speed { display: inline-flex; align-items: center; flex: none; margin-inline-start: auto; height: 1.5rem; padding-inline: 0.5rem; border-radius: var(--ds-radius-full); background: var(--ds-green-wash); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ds-green) 40%, transparent); color: var(--ds-green-ink); font: 600 var(--ds-text-xs)/1 var(--ds-font-text); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Screen: the video at its own aspect, poster first. */
.lp-run__screen { position: relative; background: var(--lp-bg); }
.lp-run__video { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 776; object-fit: cover; background: var(--lp-bg); }
.lp-run.is-ready .lp-run__screen { cursor: pointer; }
/* A play mark over the poster and whenever it is paused. Clicks land on the screen. */
.lp-run__play { position: absolute; left: 50%; top: 50%; display: none; align-items: center; gap: 0.625rem; height: 3.5rem; padding: 0 1.375rem 0 1.125rem; border-radius: var(--ds-radius-full); background: color-mix(in oklab, var(--lp-surface) 86%, transparent); box-shadow: inset 0 0 0 1px var(--lp-edge-2), 0 16px 40px -12px var(--lp-drop); color: var(--ds-ink); font: 600 var(--ds-text-base)/1 var(--ds-font-text); white-space: nowrap; transform: translate(-50%, -50%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); pointer-events: none; transition: transform var(--ds-dur-2) var(--ds-ease-out); }
.lp-run__play .ds-icon { width: 1.25rem; height: 1.25rem; fill: currentColor; color: var(--ds-green-ink); }
.lp-run.is-ready:is([data-state="idle"], [data-state="paused"]) .lp-run__play { display: inline-flex; }
.lp-run.is-ready .lp-run__screen:hover .lp-run__play { transform: translate(-50%, -50%) scale(1.06); }

/* Controls: play and pause, progress with the step marks, the run clock. */
.lp-run__ctrl { display: flex; align-items: center; gap: var(--ds-space-3); padding: 0.375rem 0.875rem 0.375rem 0.375rem; border-top: 1px solid var(--lp-edge); }
.lp-run__ctrl[hidden] { display: none; }
.lp-run__toggle .ds-icon { fill: currentColor; stroke-width: 1.5; }
.lp-run__i-pause, .lp-run[data-state="playing"] .lp-run__i-play { display: none; }
.lp-run[data-state="playing"] .lp-run__i-pause { display: block; }
.lp-run__track { position: relative; flex: 1 1 auto; height: 0.25rem; border-radius: var(--ds-radius-full); background: var(--lp-surface-2); box-shadow: inset 0 0 0 1px var(--lp-edge); }
.lp-run__fill { position: absolute; inset: 0; border-radius: inherit; background: var(--ds-ink-2); transform: scaleX(var(--p, 0)); transform-origin: left center; }
.lp-run__tick { position: absolute; top: 50%; left: calc(var(--at) * 100%); width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--lp-surface); box-shadow: inset 0 0 0 1.5px var(--ds-ink-3); transform: translate(-50%, -50%); transition: background-color var(--ds-dur-2), box-shadow var(--ds-dur-2); }
.lp-run__tick.is-on { background: var(--ds-green); box-shadow: 0 0 0 2px var(--lp-surface); }
.lp-run__clock { flex: none; font-size: var(--ds-text-xs); color: var(--ds-ink-3); white-space: nowrap; }
.lp-run__clock b { font: 500 var(--ds-text-sm)/1 var(--ds-font-code); color: var(--ds-ink); font-variant-numeric: tabular-nums; }

/* Under the video: the facts, the small print, the caption. */
.lp-run__cap { display: grid; gap: var(--ds-space-2); padding-inline: 0.25rem; }
.lp-run__facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0; margin: 0; padding: 0; list-style: none; font-size: var(--ds-text-md); color: var(--ds-ink-2); }
.lp-run__facts li + li::before { content: "·"; padding-inline: 0.625rem; color: var(--ds-ink-3); }
.lp-run__facts b { font: 650 var(--ds-text-base)/1.2 var(--ds-font-display); font-stretch: 108%; letter-spacing: -0.02em; color: var(--ds-ink); font-variant-numeric: tabular-nums; }
.lp-run__fine { font-size: var(--ds-text-xs); line-height: 1.5; color: var(--ds-ink-3); }
.lp-run__note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem var(--ds-space-4); font-size: var(--ds-text-sm); line-height: 1.5; color: var(--ds-ink-3); }
.lp-run__note .ds-link { font-size: var(--ds-text-md); }
.lp-run__note .ds-link:hover .ds-icon { transform: translateX(2px); }

/* Beside it: the task and steps on one panel, the result on a card like the hero's. */
.lp-run__side { display: grid; gap: var(--ds-space-4); min-width: 0; }
.lp-run__panel { display: grid; gap: var(--ds-space-3); padding: clamp(1rem, 0.8rem + 0.8vw, 1.375rem); border: 1px solid var(--lp-edge); border-radius: var(--lp-radius-lg); background: var(--lp-surface); box-shadow: var(--lp-shadow); }
.lp-run__label { font: 500 var(--ds-text-xs)/1.3 var(--ds-font-text); color: var(--ds-ink-3); }
.lp-run__label--row { display: flex; justify-content: space-between; gap: var(--ds-space-3); margin-top: var(--ds-space-2); }
.lp-run__task { padding: 0.625rem 0.875rem; border: 1px solid var(--lp-edge); border-radius: var(--ds-radius-md); background: var(--lp-bg); font: 500 var(--ds-text-sm)/1.55 var(--ds-font-text); color: var(--ds-ink); overflow-wrap: anywhere; text-wrap: pretty; }

.lp-run__steps { position: relative; display: grid; gap: 0.125rem; margin: 0; padding: 0; list-style: none; }
.lp-run__steps li { position: relative; }
/* The line between dots: dashed ahead, solid behind. */
.lp-run__steps li:not(:last-child)::after { content: ""; position: absolute; left: calc(0.875rem + 0.5625rem - 0.75px); top: 1.85rem; bottom: -0.4rem; border-left: 1.5px dashed var(--lp-edge-2); pointer-events: none; }
.lp-run__steps li.is-done::after { border-left-style: solid; border-color: color-mix(in oklab, var(--ds-green) 50%, var(--lp-edge-2)); }
.lp-run__steps button { display: grid; grid-template-columns: 1.125rem 2.75rem minmax(0, 1fr); align-items: start; gap: 0 var(--ds-space-3); width: 100%; min-height: 2.75rem; padding: 0.5rem 0.875rem; border: 0; border-radius: var(--ds-radius-md); background: transparent; color: var(--ds-ink-2); font: 400 var(--ds-text-md)/1.4 var(--ds-font-text); text-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--ds-dur-2), color var(--ds-dur-2), box-shadow var(--ds-dur-2); }
.lp-run__steps button:hover { background: color-mix(in oklab, var(--lp-surface-2) 70%, transparent); color: var(--ds-ink); }
.lp-run__steps button:focus-visible { outline-offset: 1px; }
.lp-run__t { padding-top: 0.0625rem; font: 500 var(--ds-text-sm)/1.4 var(--ds-font-code); color: var(--ds-ink-3); font-variant-numeric: tabular-nums; }
.lp-run__what { display: grid; gap: 0.125rem; }
.lp-run__what small { font: 400 var(--ds-text-xs)/1.4 var(--ds-font-code); color: var(--ds-ink-3); overflow-wrap: anywhere; }
.lp-run__dot { position: relative; z-index: 1; width: 1.125rem; height: 1.125rem; margin-top: 0.0625rem; border-radius: 50%; background: var(--lp-surface); box-shadow: inset 0 0 0 1.5px var(--ds-line-control); }
.lp-run__dot::before, .lp-run__dot::after { content: ""; position: absolute; opacity: 0; transition: opacity var(--ds-dur-2); }
.lp-run__dot::before { inset: 0; border-radius: 50%; background: var(--ds-green-wash); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ds-green) 45%, transparent); }
.lp-run__dot::after { left: 0.42rem; top: 0.24rem; width: 0.27rem; height: 0.5rem; border: solid var(--ds-green-ink); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.lp-run__steps li.is-done .lp-run__dot::before, .lp-run__steps li.is-done .lp-run__dot::after { opacity: 1; }
/* The step on screen now. */
.lp-run__steps li.is-live button { background: var(--lp-surface-2); box-shadow: inset 0 0 0 1px var(--lp-edge-2); color: var(--ds-ink); }
.lp-run__steps li.is-live .lp-run__t { color: var(--ds-green-ink); }
.lp-run__steps li.is-live .lp-run__dot { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--ds-green) 60%, transparent); }
.lp-run__steps li.is-live .lp-run__dot::before { inset: 0.3rem; opacity: 1; background: var(--ds-green); box-shadow: none; }
.lp-run[data-state="playing"] .lp-run__steps li.is-live .lp-run__dot::before { animation: lp-beat 1.1s ease-in-out infinite; }
.lp-run.is-final .lp-run__steps li.is-live .lp-run__dot::before { inset: 0; background: var(--ds-green-wash); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ds-green) 45%, transparent); animation: none; }
.lp-run.is-final .lp-run__steps li.is-live .lp-run__dot::after { opacity: 1; }

/* Result card: the hero's result card, laid flat. */
.lp-run__result { display: grid; gap: var(--ds-space-2); padding: 0.875rem 1rem; border: 1px solid color-mix(in oklab, var(--ds-green) 40%, var(--lp-edge-2)); border-radius: var(--lp-radius); background: var(--lp-surface); box-shadow: var(--lp-shadow), 0 18px 40px -16px var(--lp-drop); transition: box-shadow 420ms var(--ds-ease-out), border-color 420ms; }
.lp-run.is-final .lp-run__result { border-color: color-mix(in oklab, var(--ds-green) 70%, var(--lp-edge-2)); box-shadow: var(--lp-shadow), 0 0 0 0.25rem color-mix(in oklab, var(--ds-green) 18%, transparent), 0 18px 40px -16px var(--lp-drop); }
.lp-run__rhead { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); }
.lp-run__rhead .lp-run__label { font-family: var(--ds-font-code); }
.lp-run__ok { display: inline-flex; align-items: center; gap: 0.375rem; font-size: var(--ds-text-xs); font-weight: 500; color: var(--ds-green-ink); }
.lp-run__json { display: grid; font: 400 var(--ds-text-xs)/1.75 var(--ds-font-code); color: var(--ds-ink-2); letter-spacing: -0.01em; }
.lp-run__json > span { display: block; }
.lp-run__jl { padding-inline-start: 3.5ch; text-indent: -1.5ch; overflow-wrap: anywhere; }

/* Tablets: the side goes under the video, task and steps beside the result. */
@media (min-width: 720px) and (max-width: 1079.98px) {
  .lp-run__side { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
}
/* Phones: the frame drops its job id and the clock its words. */
@media (max-width: 640px) {
  .lp-run__job { display: none; }
  .lp-run__bar { font-size: var(--ds-text-xs); }
  .lp-run__clock { font-size: 0; }
  .lp-run__clock b { font-size: var(--ds-text-sm); }
  .lp-run__ctrl { gap: var(--ds-space-2); padding-inline-end: 0.625rem; }
  .lp-run__play { height: 2.75rem; padding: 0 1rem 0 0.875rem; gap: 0.5rem; font-size: var(--ds-text-md); }
  .lp-run__play .ds-icon { width: 1rem; height: 1rem; }
  .lp-run__facts { font-size: var(--ds-text-sm); }
  .lp-run__facts li + li::before { padding-inline: 0.5rem; }
  .lp-run__panel { padding: var(--ds-space-4); }
  .lp-run__steps button { grid-template-columns: 1.125rem 2.5rem minmax(0, 1fr); gap: 0 var(--ds-space-2); font-size: var(--ds-text-sm); }
  .lp-run__media::before { inset: -2rem -1rem 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-run *, .lp-run *::before, .lp-run *::after { transition: none !important; animation: none !important; }
}