/* Generated by the scaffolding engine. Do not edit by hand. */
:root {
  --c-bg: #07080b;
  --c-surface: #101319;
  --c-text: #eef1f6;
  --c-muted: #b1a0ab;
  --c-border: #1e2430;
  --c-primary: #f349b5;
  --c-primary-fg: #05070a;
  --c-accent: #ae6ef7;
  --c-danger: #e73d23;
  --c-success: #14b85b;
  --c-warning: #c18215;
  --c-tint-1: color-mix(in oklab, var(--c-primary) 2.5%, var(--c-bg));
  --c-tint-2: color-mix(in oklab, var(--c-primary) 4.5%, var(--c-surface));
  --c-tint-3: color-mix(in oklab, var(--c-primary) 9%, var(--c-surface));
  --c-primary-hover: color-mix(in oklab, var(--c-primary) 88%, var(--c-text));
  --c-primary-tint: color-mix(in oklab, var(--c-primary) 10%, var(--c-bg));
  --c-primary-ring: color-mix(in oklab, var(--c-primary) 30%, transparent);
  --c-accent-tint: color-mix(in oklab, var(--c-accent) 11%, var(--c-bg));
  --c-hairline: color-mix(in oklab, var(--c-text) 9%, transparent);
  --c-hairline-soft: color-mix(in oklab, var(--c-text) 5.5%, transparent);
  --c-hairline-strong: color-mix(in oklab, var(--c-text) 16%, transparent);
  --c-border-strong: color-mix(in oklab, var(--c-border) 45%, var(--c-text));
  --c-rim: color-mix(in oklab, var(--c-bg) 70%, transparent);
  --c-overlay: color-mix(in oklab, var(--c-bg) 72%, transparent);
  --c-shadow-key: color-mix(in oklab, var(--c-primary) 22%, color-mix(in oklab, var(--c-text) 16%, transparent));
  --c-shadow-ambient: color-mix(in oklab, var(--c-primary) 18%, color-mix(in oklab, var(--c-text) 7%, transparent));
  --c-shadow: var(--c-shadow-ambient);
  --c-shadow-strong: var(--c-shadow-key);
  --c-veil: color-mix(in oklab, var(--c-bg) 62%, transparent);
  --c-scrim: color-mix(in oklab, var(--c-text) 55%, transparent);
  --c-grid: color-mix(in oklab, var(--c-text) 6%, transparent);
  --c-grid-strong: color-mix(in oklab, var(--c-text) 11%, transparent);
  --font-body: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --fw-display: 600;
  --fw-display-strong: 700;
  --fw-body: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;
  --tracking-display: -0.036em;
  --tracking-body: -0.011em;
  --fs-xs: clamp(0.75rem, 0.75rem + 0.05vw, 0.8rem);
  --fs-sm: clamp(0.875rem, 0.875rem + 0.06vw, 0.92rem);
  --fs-md: clamp(1rem, 1rem + 0.1vw, 1.1rem);
  --fs-lg: clamp(1.125rem, 1.125rem + 0.25vw, 1.3rem);
  --fs-xl: clamp(1.375rem, 1.375rem + 0.7vw, 1.75rem);
  --fs-2xl: clamp(1.75rem, 1.75rem + 1.4vw, 2.5rem);
  --fs-3xl: clamp(2.2rem, 2.2rem + 2.4vw, 3.4rem);
  --fs-4xl: clamp(2.6rem, 2.6rem + 3.6vw, 4.6rem);
  --sp-3xs: 3px;
  --sp-2xs: 6px;
  --sp-xs: clamp(9px, 9px + 0.05vw, 12px);
  --sp-sm: clamp(14px, 14px + 0.15vw, 20px);
  --sp-md: clamp(22px, 22px + 0.35vw, 32px);
  --sp-lg: clamp(36px, 36px + 0.9vw, 60px);
  --sp-xl: clamp(60px, 60px + 1.9vw, 108px);
  --sp-2xl: clamp(76px, 76px + 2.8vw, 148px);
  --radius: 13px;
  --radius-sm: calc(var(--radius) * 0.55);
  --radius-xs: calc(var(--radius) * 0.34);
  --radius-lg: calc(var(--radius) * 1.55);
  --radius-nested: max(2px, calc(var(--radius) - var(--sp-xs)));
  --radius-pill: 999px;
  --dur-fast: 140ms;
  --dur-medium: 280ms;
  --dur-slow: 460ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --wrap-narrow: 42rem;
  --wrap-normal: 68rem;
  --wrap-wide: 82rem;
  --shadow-sm: 0 1px 1px -0.5px var(--c-shadow-key), 0 2px 6px -2px var(--c-shadow-ambient);
  --shadow-md: 0 2px 3px -1px var(--c-shadow-key), 0 8px 20px -6px var(--c-shadow-ambient);
  --shadow-lg: 0 4px 6px -2px var(--c-shadow-key), 0 18px 44px -12px var(--c-shadow-ambient), 0 40px 80px -32px var(--c-shadow-ambient);
  --shadow-float: 0 0 0 1px var(--c-hairline-soft), 0 10px 20px -8px var(--c-shadow-key), 0 28px 60px -20px var(--c-shadow-ambient);
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --grid-pitch: 24px;
  --tap: 44px;
}

[data-theme="dark"] {
  --c-bg: #07080b;
  --c-surface: #101319;
  --c-text: #eef1f6;
  --c-muted: #b1a0ab;
  --c-border: #1e2430;
  --c-primary: #f349b5;
  --c-primary-fg: #05070a;
  --c-accent: #ae6ef7;
  --c-danger: #e73d23;
  --c-success: #14b85b;
  --c-warning: #c18215;
  --c-tint-1: color-mix(in oklab, var(--c-primary) 2.5%, var(--c-bg));
  --c-tint-2: color-mix(in oklab, var(--c-primary) 4.5%, var(--c-surface));
  --c-tint-3: color-mix(in oklab, var(--c-primary) 9%, var(--c-surface));
  --c-primary-hover: color-mix(in oklab, var(--c-primary) 88%, var(--c-text));
  --c-primary-tint: color-mix(in oklab, var(--c-primary) 10%, var(--c-bg));
  --c-primary-ring: color-mix(in oklab, var(--c-primary) 30%, transparent);
  --c-accent-tint: color-mix(in oklab, var(--c-accent) 11%, var(--c-bg));
  --c-hairline: color-mix(in oklab, var(--c-text) 9%, transparent);
  --c-hairline-soft: color-mix(in oklab, var(--c-text) 5.5%, transparent);
  --c-hairline-strong: color-mix(in oklab, var(--c-text) 16%, transparent);
  --c-border-strong: color-mix(in oklab, var(--c-border) 45%, var(--c-text));
  --c-rim: color-mix(in oklab, var(--c-bg) 70%, transparent);
  --c-overlay: color-mix(in oklab, var(--c-bg) 72%, transparent);
  --c-shadow-key: color-mix(in oklab, var(--c-primary) 22%, color-mix(in oklab, var(--c-text) 16%, transparent));
  --c-shadow-ambient: color-mix(in oklab, var(--c-primary) 18%, color-mix(in oklab, var(--c-text) 7%, transparent));
  --c-shadow: var(--c-shadow-ambient);
  --c-shadow-strong: var(--c-shadow-key);
  --c-veil: color-mix(in oklab, var(--c-bg) 62%, transparent);
  --c-scrim: color-mix(in oklab, var(--c-text) 55%, transparent);
  --c-grid: color-mix(in oklab, var(--c-text) 6%, transparent);
  --c-grid-strong: color-mix(in oklab, var(--c-text) 11%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--c-text);
  background: var(--c-bg);
  letter-spacing: var(--tracking-body);
  font-synthesis-weight: none;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Figures line up in columns wherever a number is doing work. Stripe's
   financial tables are the reference; proportional digits in a price column
   are the difference between a table and a spreadsheet screenshot. */
.s-stat__value, .s-plan__price, .s-matrix__cell, .s-table td, .s-table th,
.s-tile__value, .s-mock__issue-id, .s-proof-band__stat-value,
.s-stats-marquee__chip .s-stat__value, .s-changelog__date, .s-pagination__label {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "cv01" 1;
}

/* Codes, references and IDs are read character by character, so they get the
   mono face. This is also the first real use of --font-mono, which was
   previously referenced with a fallback and never defined. */
.s-mock__issue-id, .s-mock__diff-pane, .s-badge--mono, .s-table__ref {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
::selection { background: var(--c-primary); color: var(--c-primary-fg); }

/* ---------- layout ---------- */
.s-section { position: relative; width: 100%; }
.s-section--pad-none { padding-block: 0; }
.s-section--pad-sm { padding-block: var(--sp-md); }
.s-section--pad-md { padding-block: var(--sp-lg); }
.s-section--pad-lg { padding-block: var(--sp-xl); }
.s-section--pad-xl { padding-block: var(--sp-2xl); }

/* Rhythm. Consecutive bands sharing a background do not need two full pads of
   air between them -- that reads as a gap, not as a join. Collapsing the seam
   turns a uniform stack into a page with long and short beats. */
.s-section--base + .s-section--base { padding-block-start: 0; }
.s-section--subtle + .s-section--subtle { padding-block-start: 0; border-block-start: 0; }
/* The band immediately after the hero carries less air: it is a continuation
   of the opening statement, not a new chapter. */
.s-route-block:has(.s-hero) + .s-section { padding-block-start: var(--sp-lg); }

.s-section--base { background: var(--c-bg); }

/* A subtle band is a change of paper, not a change of colour. It gets a
   hairline at each edge so the transition is a stated seam rather than a
   vague tonal drift. */
.s-section--subtle {
  background: var(--c-tint-2);
  border-block: 1px solid var(--c-hairline-soft);
}
.s-section--inverted {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--c-text) 96%, var(--c-primary)) 0%,
      color-mix(in oklab, var(--c-text) 88%, var(--c-primary)) 100%);
  color: var(--c-bg);
}
/* Fine luminance noise. Perfectly smooth dark fields band on 8-bit panels and
   read as flat vinyl; a fraction of a percent of grain is what makes a dark
   surface look like a material. */
.s-section--inverted::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.s-section--inverted > .s-wrap { position: relative; z-index: 1; }
.s-section--inverted .s-heading,
.s-section--inverted .s-block__title,
.s-section--inverted .s-hero__title,
.s-section--inverted .s-stat__value { color: inherit; }
.s-section--inverted .s-text,
.s-section--inverted .s-block__subtitle,
.s-section--inverted .s-hero__subtitle,
.s-section--inverted .s-stat__label,
.s-section--inverted .s-tone-muted { color: color-mix(in oklab, var(--c-bg) 72%, transparent); }
.s-section--inverted .s-eyebrow { color: color-mix(in oklab, var(--c-accent) 55%, var(--c-bg)); }
.s-section--inverted .s-btn--primary {
  background: var(--c-bg); color: var(--c-text); border-color: transparent;
}
.s-section--inverted .s-btn--primary:hover {
  background: color-mix(in oklab, var(--c-bg) 88%, var(--c-text));
}
.s-section--inverted .s-btn--secondary {
  background: transparent; color: var(--c-bg); border-color: color-mix(in oklab, var(--c-bg) 40%, transparent);
}
.s-section--inverted .s-btn--secondary:hover {
  background: color-mix(in oklab, var(--c-bg) 12%, transparent); border-color: var(--c-bg);
}
/* One directional wash, not two coloured orbs. The light has a single
   source and it falls off in one direction, which is how light behaves. */
.s-section--gradient {
  background:
    linear-gradient(178deg,
      var(--c-tint-1) 0%,
      color-mix(in oklab, var(--c-primary) 6%, var(--c-bg)) 55%,
      var(--c-bg) 100%);
  border-block-start: 1px solid var(--c-hairline-soft);
}
/* The blueprint grid. Two 1px gradients on a 24px pitch at ~6% alpha, faded
   out at the edges so it reads as a drawing surface rather than graph paper
   taped to the page. If you notice the grid before the content, it is wrong;
   the whole effect is meant to be felt rather than seen. */
.s-section--mesh {
  position: relative;
  background: var(--c-tint-1);
  border-block: 1px solid var(--c-hairline-soft);
}
.s-section--mesh::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--c-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-grid) 1px, transparent 1px);
  background-size: var(--grid-pitch) var(--grid-pitch);
  background-position: center;
  mask-image: radial-gradient(120% 90% at 50% 42%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 42%, #000 25%, transparent 78%);
}
.s-section--mesh > .s-wrap { position: relative; z-index: 1; }
/* The one loud surface in the system. Saturated brand ground, dot matrix on
   top, and a fine inner rim so the panel has a lit edge. Because it is the
   only place the palette goes to full strength, it carries weight; a page
   where every band is vivid has no vivid band at all. */
.s-section--vivid {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(165deg,
      color-mix(in oklab, var(--c-primary) 92%, var(--c-text)) 0%,
      var(--c-primary) 48%,
      color-mix(in oklab, var(--c-primary) 82%, var(--c-accent)) 100%);
  color: var(--c-primary-fg);
}
.s-section--vivid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(
    color-mix(in oklab, var(--c-primary-fg) 16%, transparent) 1px, transparent 1px);
  background-size: 18px 18px;
  mask-image: linear-gradient(190deg, #000 5%, transparent 72%);
  -webkit-mask-image: linear-gradient(190deg, #000 5%, transparent 72%);
}
.s-section--vivid > .s-wrap { position: relative; z-index: 1; }
.s-section--vivid .s-heading,
.s-section--vivid .s-block__title,
.s-section--vivid .s-stat__value { color: inherit; }
.s-section--vivid .s-text,
.s-section--vivid .s-block__subtitle,
.s-section--vivid .s-stat__label,
.s-section--vivid .s-tone-muted {
  color: color-mix(in oklab, var(--c-primary-fg) 76%, transparent);
}
.s-section--vivid .s-eyebrow { color: color-mix(in oklab, var(--c-primary-fg) 82%, transparent); }
.s-section--vivid .s-btn--primary {
  background: var(--c-primary-fg); color: var(--c-primary); border-color: transparent;
}
.s-section--vivid .s-btn--outline,
.s-section--vivid .s-btn--secondary {
  background: transparent; color: var(--c-primary-fg);
  border-color: color-mix(in oklab, var(--c-primary-fg) 38%, transparent);
}
.s-section--vivid .s-btn--outline:hover,
.s-section--vivid .s-btn--secondary:hover {
  background: color-mix(in oklab, var(--c-primary-fg) 12%, transparent);
  border-color: var(--c-primary-fg);
}
/* Glass, restrained. Blur on a floating panel is legitimate; blur applied to
   a full-width band that has nothing behind it is decoration pretending to be
   depth, and it is on every AI-tell list published. What remains is a lifted
   inner panel with a real rim and a real shadow. */
.s-section--glass {
  background:
    linear-gradient(172deg, var(--c-tint-2), var(--c-bg) 62%);
}
.s-section--glass > .s-wrap {
  position: relative;
  z-index: 1;
  padding-block: var(--sp-md);
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--c-bg) 86%, transparent);
  box-shadow:
    inset 0 1px 0 0 var(--c-rim),
    0 0 0 1px var(--c-hairline-soft),
    var(--shadow-lg);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
}

.s-skip {
  position: fixed;
  top: 0;
  inset-inline-start: var(--sp-md);
  z-index: 100;
  padding: 0.55rem 0.9rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--c-text);
  color: var(--c-bg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  text-decoration: none;
  /* Hide flush to viewport top — translateY(-160%) + top offset always peeks a few px. */
  transform: translateY(-100%);
  transition: transform var(--dur-fast) var(--ease);
}
.s-skip:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

.s-em {
  font-style: italic;
  font-weight: var(--fw-medium);
  color: color-mix(in oklab, var(--c-text) 88%, var(--c-accent));
}

.s-wrap { margin-inline: auto; width: 100%; padding-inline: var(--sp-md); }
/* Vertical rhythm between sibling components. Components carry internal
   spacing but no external margin, by design, so the container supplies the
   join between two of them placed in one Section.

   Scoped to a wrap that is a DIRECT child of a Section or route block. The
   first cut of this targeted `.s-wrap > * + *` and broke the chrome: .s-wrap
   is not only the page column, it is also the internal layout container for
   the navbar, the footer and the utility bar (.s-nav__inner, .s-footer__inner,
   .s-utility__inner all carry it). Those are single-row flex layouts, so a
   block margin between their children pushed the links onto a second line. */
.s-section > .s-wrap > * + *,
.s-route-block > .s-wrap > * + * { margin-block-start: var(--sp-lg); }
/* Except where the pair is deliberately a unit: a section index and what it
   indexes, or a breadcrumb and the page it labels. */
.s-section > .s-wrap > .s-subnav + *,
.s-section > .s-wrap > .s-breadcrumb + *,
.s-section > .s-wrap > .s-segmented + * {
  margin-block-start: var(--sp-md);
}
.s-wrap--narrow { max-width: var(--wrap-narrow); }
.s-wrap--normal { max-width: var(--wrap-normal); }
.s-wrap--wide { max-width: var(--wrap-wide); }
.s-wrap--full { max-width: none; }

.s-stack { display: flex; min-width: 0; }
.s-stack--vertical { flex-direction: column; }
.s-stack--horizontal { flex-direction: row; }
.s-stack--wrap { flex-wrap: wrap; }
.s-align-start { align-items: flex-start; }
.s-align-center { align-items: center; }
.s-align-end { align-items: flex-end; }

.s-gap-none { gap: 0; }
.s-gap-xs { gap: var(--sp-xs); }
.s-gap-sm { gap: var(--sp-sm); }
.s-gap-md { gap: var(--sp-md); }
.s-gap-lg { gap: var(--sp-lg); }
.s-gap-xl { gap: var(--sp-xl); }

.s-grid { display: grid; min-width: 0; }
.s-grid--1 { grid-template-columns: minmax(0, 1fr); }
.s-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.s-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.s-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.s-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.s-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* ---------- surfaces ---------- */
/* Cards are borderless by default. "A gray 1px border on every card" is the
   most-cited P1 tell there is; a tinted surface separates from the page by
   value, which is how a physical card sitting on paper actually reads. The
   border is reintroduced only where a boundary is load-bearing. */
.s-card {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-2xs);
  padding: var(--sp-md);
  background: var(--c-tint-2);
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-medium) var(--ease-enter),
    transform var(--dur-medium) var(--ease-enter);
}
.s-card--flush { padding: 0; border: 0; background: none; }

/* Elevation levels. Each one is a different physical claim, so each one has a
   different hover: a raised card lifts, a hairline card only sharpens its
   edge, a flat card does nothing at all. Applying one lift to all three is
   what makes hover states feel decorative. */
.s-elev--raised {
  background: var(--c-bg);
  box-shadow:
    inset 0 1px 0 0 var(--c-rim),
    0 0 0 1px var(--c-hairline-soft),
    var(--shadow-sm);
}
.s-elev--raised:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 0 var(--c-rim),
    0 0 0 1px var(--c-hairline),
    var(--shadow-md);
}
.s-elev--hairline {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--c-hairline);
}
.s-elev--hairline:hover {
  background: var(--c-tint-2);
  box-shadow: inset 0 0 0 1px var(--c-hairline-strong);
  transform: none;
}
.s-elev--none { border-color: transparent; box-shadow: none; background: transparent; }
.s-elev--none:hover { border-color: transparent; box-shadow: none; transform: none; }
.s-elev--brutal {
  background: var(--c-bg);
  border: 2px solid var(--c-text);
  box-shadow: 3px 3px 0 var(--c-text);
  border-radius: var(--radius-xs);
}
.s-elev--brutal:hover {
  border-color: var(--c-text);
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--c-text);
}
.s-card--flush:hover { box-shadow: none; transform: none; }
.s-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-display);
  letter-spacing: var(--tracking-display);
  line-height: 1.2;
}
.s-card__body { margin: 0; color: var(--c-muted); }

.s-divider { border: 0; border-top: 1px solid var(--c-border); }
.s-divider--sm { margin-block: var(--sp-sm); }
.s-divider--md { margin-block: var(--sp-md); }
.s-divider--lg { margin-block: var(--sp-lg); }

/* ---------- type ---------- */
/* Tracking now comes from the face, not from a global guess. The previous
   values were tuned for a grotesque and were being applied to a serif, where
   -0.032em closes the counters and the line turns to mud at display size. */
.s-heading {
  margin: 0 0 var(--sp-xs);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  line-height: 1.18;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  margin-inline-start: -0.012em;
}
.s-heading:last-child { margin-bottom: 0; }
.s-heading--1 { font-size: var(--fs-3xl); line-height: 1.02; }
.s-heading--2 { font-size: var(--fs-2xl); line-height: 1.06; }
.s-heading--3 { font-size: var(--fs-xl); line-height: 1.14; }
.s-heading--4 {
  font-size: var(--fs-md); line-height: 1.3;
  font-family: var(--font-body); font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-body); margin-inline-start: 0;
}

.s-text { margin: 0 0 var(--sp-xs); text-wrap: pretty; }
.s-text:last-child { margin-bottom: 0; }
.s-text--sm { font-size: var(--fs-sm); }
.s-text--md { font-size: var(--fs-md); }
.s-text--lg { font-size: var(--fs-lg); line-height: 1.55; }
.s-text--xl { font-size: var(--fs-xl); line-height: 1.4; letter-spacing: -0.012em; }
.s-text-start { text-align: start; }
.s-text-center { text-align: center; }
.s-text-end { text-align: end; }

.s-tone-default { color: var(--c-text); }
.s-tone-muted { color: var(--c-muted); }
.s-tone-primary { color: var(--c-primary); }
.s-tone-accent { color: var(--c-accent); }
.s-tone-danger { color: var(--c-danger); }
.s-tone-success { color: var(--c-success); }

/* Eyebrows in the mono face at normal tracking. Wide-tracked uppercase in the
   body sans is the single most over-used label treatment on the web; the mono
   register reads as a system label, which is what an eyebrow actually is. */
.s-eyebrow {
  margin: 0 0 var(--sp-xs);
  font-family: var(--font-mono);
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  color: var(--c-accent);
  display: inline-flex; align-items: center; gap: 0.55em;
}
.s-eyebrow::before {
  content: "";
  width: 1.4em; height: 1px;
  background: currentColor;
  opacity: 0.55;
  flex: 0 0 auto;
}

.s-link {
  color: var(--c-primary);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklab, var(--c-primary) 35%, transparent);
  transition: text-decoration-color var(--dur-fast) var(--ease);
}
.s-link:hover { text-decoration-color: currentColor; }

.s-badge {
  display: inline-flex; align-items: center; gap: var(--sp-3xs);
  padding: 4px 12px; border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-semi); line-height: 1.5;
  border: 1px solid transparent;
}
.s-badge--default { background: var(--c-surface); color: var(--c-text); border-color: var(--c-border); }
.s-badge--muted { background: var(--c-surface); color: var(--c-muted); border-color: var(--c-border); }
.s-badge--primary { background: var(--c-primary-tint); color: var(--c-primary); border-color: color-mix(in oklab, var(--c-primary) 28%, transparent); }
.s-badge--accent { background: color-mix(in oklab, var(--c-accent) 13%, var(--c-bg)); color: var(--c-accent); }
.s-badge--danger { background: color-mix(in oklab, var(--c-danger) 11%, var(--c-bg)); color: var(--c-danger); }
.s-badge--success { background: color-mix(in oklab, var(--c-success) 11%, var(--c-bg)); color: var(--c-success); }

.s-icon { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; }
.s-icon--sm { width: 1rem; height: 1rem; }
.s-icon--md { width: 1.25rem; height: 1.25rem; }
.s-icon--lg { width: 1.75rem; height: 1.75rem; }
.s-svg { display: block; flex: 0 0 auto; line-height: 0; }
.s-svg svg { display: block; width: 100%; height: 100%; }
.s-nav-panel__glyph { width: 1.35rem; height: 1.35rem; }
.s-nav-panel__icon .s-svg { width: 1.35rem; height: 1.35rem; }
.s-nav-panel__icon .s-icon { width: 1.15rem; height: 1.15rem; }

/* ---------- buttons ---------- */
/* Six real states, per the premium-UI checklist: default, hover, focus,
   active, disabled, loading. The press is faster than the release, because
   that is how a physical key feels. */
.s-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: var(--tap);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font: inherit; font-weight: var(--fw-medium); letter-spacing: var(--tracking-body);
  cursor: pointer; white-space: nowrap;
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease-enter),
    transform 90ms var(--ease-exit);
}
.s-btn--xs { min-height: 30px; padding: 4px 10px; font-size: var(--fs-xs); }
.s-btn--sm { min-height: 36px; padding: 6px 14px; font-size: var(--fs-sm); }
.s-btn--md { padding: 10px 20px; font-size: var(--fs-md); }
.s-btn--lg { padding: 14px 28px; font-size: var(--fs-lg); border-radius: var(--radius); }
.s-btn--pill { border-radius: var(--radius-pill); }
/* The primary button is the only element on the page that gets an inner
   highlight. It is the one thing that should look physically raised. */
.s-btn--primary {
  background: var(--c-primary); color: var(--c-primary-fg);
  box-shadow:
    inset 0 1px 0 0 color-mix(in oklab, var(--c-primary-fg) 22%, transparent),
    var(--shadow-sm);
}
.s-btn--primary:hover {
  background: var(--c-primary-hover);
  box-shadow:
    inset 0 1px 0 0 color-mix(in oklab, var(--c-primary-fg) 26%, transparent),
    var(--shadow-md);
}
.s-btn--secondary {
  background: var(--c-bg); color: var(--c-text);
  box-shadow: inset 0 0 0 1px var(--c-hairline-strong);
  border-color: transparent;
}
.s-btn--secondary:hover {
  background: var(--c-tint-2);
  box-shadow: inset 0 0 0 1px var(--c-text);
}
.s-btn--ghost { background: transparent; color: var(--c-primary); }
.s-btn--ghost:hover { background: var(--c-primary-tint); }
.s-btn--subtle { background: var(--c-text); color: var(--c-bg); box-shadow: none; }
.s-btn--subtle:hover { background: color-mix(in oklab, var(--c-text) 88%, var(--c-bg)); }
.s-btn--outline {
  background: transparent; color: var(--c-text);
  border-color: var(--c-hairline-strong); box-shadow: none;
}
.s-btn--outline:hover { background: var(--c-tint-2); border-color: var(--c-text); }
.s-btn--link { background: none; color: var(--c-primary); padding-inline: 0; min-height: 0; text-decoration: underline; text-underline-offset: 4px; }
.s-btn__chevron { font-size: 0.92em; line-height: 1; opacity: 0.72; }
.s-btn:active { transform: translateY(1px) scale(0.994); }
.s-btn:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--c-primary-ring);
}
.s-btn:disabled, .s-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.s-btn.is-loading { position: relative; pointer-events: none; }
.s-btn__spinner {
  width: 1em; height: 1em; border-radius: var(--radius-pill);
  border: 2px solid color-mix(in oklab, currentColor 28%, transparent);
  border-top-color: currentColor;
  animation: s-spin 720ms linear infinite;
}

/* ---------- media ---------- */
.s-img { position: relative; display: block; width: 100%; overflow: hidden; background: var(--c-surface); }
.s-img--rounded { border-radius: var(--radius); }
.s-img--avatar { width: 2.75rem; height: 2.75rem; aspect-ratio: 1 !important; border-radius: var(--radius-pill); flex: 0 0 auto; }
.s-img__el { position: relative; z-index: 2; width: 100%; height: 100%; }
.s-img__el--cover { object-fit: cover; }
.s-img__el--contain { object-fit: contain; }
.s-img__ph { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; background: color-mix(in oklab, var(--c-surface) 88%, var(--c-border)); }
.s-img__label { position: relative; z-index: 3; font-size: var(--fs-sm); font-weight: var(--fw-medium); letter-spacing: 0.02em; color: var(--c-muted); }
.s-img__ph-icon { width: 1.75rem; height: 1.75rem; color: var(--c-muted); opacity: 0.55; }
.s-img__ph-label { max-width: 80%; text-align: center; font-size: var(--fs-xs); line-height: 1.35; color: var(--c-muted); }
.s-img__ph-initials {
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: var(--fw-display);
  letter-spacing: 0.04em; color: var(--c-muted);
}
.s-img.is-loaded .s-img__ph { display: none; }
.s-img.is-error .s-img__el { visibility: hidden; position: absolute; inset: 0; }
.s-img.is-error .s-img__ph { display: grid; }
.s-img.is-error.s-img--shimmer::before { display: none; }
@media (prefers-reduced-motion: reduce) {
  .s-img--shimmer::before { animation: none; opacity: 0.35; }
}
.s-img--blur .s-img__ph { filter: blur(14px); transform: scale(1.08); }
.s-img--shimmer::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, transparent, var(--c-veil), transparent);
  animation: s-shimmer 1.6s infinite;
}
@keyframes s-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ---------- navigation ---------- */
/* The nav is one of the two places blur is earned, because content really
   does pass underneath it. The border becomes a hairline that only appears
   once the page has scrolled away from the top. */
.s-nav {
  border-bottom: 1px solid var(--c-hairline-soft);
  background: var(--c-overlay);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
}
.s-nav--sticky { position: sticky; top: 0; z-index: 50; }
.s-nav__inner {
  position: relative; display: flex; align-items: center; gap: var(--sp-md);
  padding-block: var(--sp-xs); flex-wrap: nowrap;
}
.s-nav__brand {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 0.55rem;
  text-decoration: none; color: inherit;
}
.s-nav__mark {
  display: grid; place-items: center;
  width: 1.7rem; height: 1.7rem;
  border-radius: calc(var(--radius-sm) - 1px);
  background: var(--c-text); color: var(--c-bg);
  font-family: var(--font-display); font-size: 0.78rem; font-weight: var(--fw-display);
  letter-spacing: -0.02em;
}
.s-nav__mark-img { width: 1.7rem; height: 1.7rem; border-radius: calc(var(--radius-sm) - 1px); }
.s-nav__brand-text {
  font-family: var(--font-display); font-weight: var(--fw-display-strong);
  font-size: var(--fs-lg);
  letter-spacing: var(--tracking-display); line-height: 1.1;
}
.s-nav__check { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.s-nav__toggle {
  display: none; margin-inline-start: auto; min-height: var(--tap); min-width: var(--tap);
  align-items: center; justify-content: center; padding: 0 14px;
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  background: var(--c-bg); color: var(--c-text); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium);
  cursor: pointer;
}
.s-nav__links {
  display: flex; align-items: center; gap: var(--sp-sm); margin-inline-start: auto;
  flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; justify-content: flex-end;
}
.s-nav__link {
  color: var(--c-muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
.s-nav__link:hover { color: var(--c-text); }
.s-nav__chevron { font-size: 0.72em; line-height: 1; opacity: 0.65; margin-inline-start: 0.2rem; transition: transform var(--dur-fast) var(--ease); display: inline-block; }
.s-nav__group:hover .s-nav__chevron, .s-nav__group:focus-within .s-nav__chevron { transform: rotate(180deg); opacity: 0.85; }
.s-nav__utility {
  display: flex; align-items: center; gap: var(--sp-sm); margin-inline-start: var(--sp-sm);
  flex: 0 0 auto; flex-wrap: nowrap;
}
.s-nav__drawer { display: contents; }
.s-nav__group { position: relative; flex: 0 0 auto; }
.s-nav__trigger {
  display: inline-flex; align-items: center; gap: 0.15rem; white-space: nowrap;
  padding: 0.35rem 0.65rem; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: transparent;
  color: var(--c-muted); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium);
  cursor: pointer; text-decoration: none;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.s-nav__trigger:hover, .s-nav__group:focus-within > .s-nav__trigger, .s-nav__group:hover > .s-nav__trigger { color: var(--c-text); background: var(--c-surface); }
/* Anchored to the navbar's content column, not to the trigger. Positioning it
   against the group meant a trigger sitting mid-navbar pushed a 44rem panel
   off the right edge of the viewport, where it was simply clipped. Against
   .s-nav__inner the panel is bounded by the same column as the rest of the
   page and cannot overflow at any width. */
.s-nav-panel {
  /* Anchored to the trigger, not to the bar. Anchoring it to .s-nav__inner
     stopped it overflowing the viewport but broke the thing a dropdown is
     for: it no longer dropped under the control that opened it, and the
     pointer had to cross open space to reach it.

     It aligns to the trigger's inline-END by default, because this engine
     always renders the group cluster on the right of the bar. A wide panel
     therefore grows leftward, into the space that exists, and can never run
     off the right edge. `align: start` opts into a left-aligned drop and is
     only safe for a trigger sitting near the left of the bar. */
  display: none; position: absolute; top: calc(100% + 0.45rem);
  inset-inline-end: 0; inset-inline-start: auto; z-index: 60;
  width: min(58rem, calc(100vw - 2 * var(--sp-md)));
  max-width: calc(100vw - 2 * var(--sp-md));
  padding: var(--sp-md) var(--sp-lg);
  border: 0; border-radius: var(--radius-lg);
  background: var(--c-bg);
  box-shadow:
    inset 0 1px 0 0 var(--c-rim),
    0 0 0 1px var(--c-hairline),
    var(--shadow-lg);
  box-sizing: border-box;
}
.s-nav__group--start .s-nav-panel { inset-inline-start: 0; inset-inline-end: auto; }
.s-nav__group--end .s-nav-panel { inset-inline-end: 0; inset-inline-start: auto; }

/* The hover bridge. The panel sits 0.45rem below the trigger, and that gap is
   dead space: the pointer leaves the trigger, hover drops, and the panel
   closes before it can be reached. A transparent strip spanning the gap keeps
   the pointer inside the hover target the whole way down. Every mega-menu
   that feels reliable has one; it is invisible and it is the entire reason
   they feel reliable. */
.s-nav-panel::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: calc(var(--sp-md) * -1);
  height: var(--sp-md);
}
/* Widen the bridge to cover the trigger itself, so travelling diagonally
   from the middle of the label does not clip a corner and close the panel. */

/* Columns and promo sit side by side. */
.s-nav-panel__layout { display: grid; gap: var(--sp-md); align-items: start; }
/* The promo is a fixed sidebar; the columns take what is left. Sharing the
   remainder equally between three columns and a promo squeezed link labels to
   two words a line. */
.s-nav-panel__layout--promo { grid-template-columns: minmax(0, 1fr) 14rem; }
@media (max-width: 60rem) {
  .s-nav-panel__layout--promo { grid-template-columns: minmax(0, 1fr); }
}
.s-nav__group:hover .s-nav-panel, .s-nav__group:focus-within .s-nav-panel {
  display: block;
  animation: s-panel-in var(--dur-fast) var(--ease) both;
}
@keyframes s-panel-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .s-nav__group:hover .s-nav-panel, .s-nav__group:focus-within .s-nav-panel { animation: none; }
}
.s-nav-panel__cols { display: grid; gap: var(--sp-md); grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.s-nav-panel__cols--1 { grid-template-columns: minmax(0, 1fr); }
.s-nav-panel__cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.s-nav-panel__cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.s-nav-panel__cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.s-nav-panel__col { display: flex; flex-direction: column; gap: var(--sp-2xs); min-width: 0; }
.s-nav-panel__col-title {
  margin: 0 0 var(--sp-3xs); font-size: var(--fs-xs); font-weight: var(--fw-semi);
  letter-spacing: 0; font-family: var(--font-mono); color: var(--c-muted);
}
.s-nav-panel__item {
  display: flex; align-items: flex-start; gap: var(--sp-xs);
  padding: var(--sp-xs); border-radius: calc(var(--radius-sm) + 1px);
  text-decoration: none; color: inherit;
  transition: background var(--dur-fast) var(--ease);
}
.s-nav-panel__item:hover { background: var(--c-surface); }
.s-nav-panel__icon {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 2.25rem; height: 2.25rem; border-radius: calc(var(--radius-sm) + 1px);
  background: var(--c-surface); font-size: 1.05rem;
}
.s-nav-panel__copy { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }
.s-nav-panel__label { font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: 1.25; color: var(--c-text); }
.s-nav-panel__desc { font-size: var(--fs-xs); line-height: 1.35; color: var(--c-muted); }
.s-nav-panel__footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-sm); margin-top: var(--sp-sm); padding-top: var(--sp-sm);
  border-top: 1px solid var(--c-border);
}
.s-nav__announcement {
  display: inline-flex; align-items: center; padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: var(--fw-semi);
  letter-spacing: 0.02em; color: var(--c-text); text-decoration: none;
  border: 1px solid var(--c-hairline); background: var(--c-surface);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.s-nav__announcement:hover { border-color: color-mix(in oklab, var(--c-accent) 45%, var(--c-border)); background: var(--c-bg); }

.s-theme {
  display: inline-flex; align-items: center; gap: var(--sp-3xs);
  min-height: 36px; padding: 6px 12px;
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  background: var(--c-bg); color: var(--c-muted); font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-semi);
  letter-spacing: 0; font-family: var(--font-mono); cursor: pointer;
}
.s-theme:hover { color: var(--c-text); border-color: var(--c-border-strong); }
[data-theme="light"] .s-theme__dark, :root:not([data-theme]) .s-theme__dark { display: none; }
[data-theme="dark"] .s-theme__light { display: none; }

.s-footer { border-top: 1px solid var(--c-border); background: var(--c-surface); }
.s-footer__inner { display: flex; flex-wrap: wrap; gap: var(--sp-sm); align-items: flex-start; justify-content: space-between; padding-block: var(--sp-xl); }
.s-footer__grid { display: grid; gap: var(--sp-lg); width: 100%; }
.s-footer__grid.s-grid--2 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.s-footer__grid.s-grid--3 { grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); }
.s-footer__grid.s-grid--4 { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
.s-footer__grid.s-grid--5 { grid-template-columns: minmax(0, 1.35fr) repeat(4, minmax(0, 1fr)); }
.s-footer__grid.s-grid--6 { grid-template-columns: minmax(0, 1.3fr) repeat(5, minmax(0, 1fr)); }
.s-footer__brand { display: flex; flex-direction: column; gap: var(--sp-sm); max-width: 28rem; }
.s-footer__note { margin: 0; color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.55; }
.s-footer__links { display: flex; gap: var(--sp-md); flex-wrap: wrap; font-size: var(--fs-sm); }
.s-footer__col { min-width: 0; }
.s-footer__heading {
  margin: 0 0 var(--sp-xs); font-family: var(--font-display);
  font-size: var(--fs-sm); font-weight: var(--fw-display); letter-spacing: -0.01em;
}
.s-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.s-footer__list .s-link { font-size: var(--fs-sm); color: var(--c-muted); }
.s-footer__list .s-link:hover { color: var(--c-text); }
.s-footer__bar {
  display: flex; flex-wrap: wrap; gap: var(--sp-sm); align-items: center; justify-content: space-between;
  width: 100%; padding-top: var(--sp-md); margin-top: var(--sp-md);
  border-top: 1px solid var(--c-border);
}
.s-footer__locale {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: var(--fs-sm); color: var(--c-muted); text-decoration: none;
}
.s-footer__locale:hover { color: var(--c-text); }
.s-footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-md); font-size: var(--fs-sm); }
.s-footer__legal .s-link { color: var(--c-muted); }
.s-footer__legal .s-link:hover { color: var(--c-text); }

/* ---------- hero ---------- */
/* Route-level blocks. These carry the vertical rhythm that Section would
   otherwise have supplied, so a Hero or PageHeader placed straight on a route
   is spaced and gutter-aligned exactly like one placed inside a Section. */
.s-route-block { position: relative; width: 100%; padding-block: var(--sp-lg); }
.s-route-block:first-child { padding-block-start: var(--sp-md); }
.s-route-block + .s-route-block { padding-block-start: 0; }
/* A hero opens the page, so it gets the long beat. */
.s-route-block:has(> .s-wrap > .s-hero) { padding-block: var(--sp-xl) var(--sp-lg); }
.s-route-block:has(> .s-wrap > .s-pagehead) { padding-block: var(--sp-xl) var(--sp-md); }
.s-route-block:has(> .s-wrap > .s-breadcrumb) { padding-block: var(--sp-md) 0; }
.s-route-block:has(> .s-wrap > .s-breadcrumb) + .s-route-block { padding-block-start: var(--sp-sm); }

.s-hero { display: grid; gap: var(--sp-lg); align-items: center; }
.s-hero--centered, .s-hero--stacked { justify-items: center; text-align: center; }
.s-hero--centered .s-hero__body, .s-hero--stacked .s-hero__body { max-width: 52rem; }
/* 1.05:1 is not a ratio, it is two equal columns with a rounding error. A
   split hero needs a stated dominant side or the eye has no entry point. */
.s-hero--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr); }
.s-hero-media--inline_end { /* default: copy then media */ }
.s-hero-media--block_end { grid-template-columns: minmax(0, 1fr); }
.s-hero.s-hero-media--inline_start.s-hero--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.s-hero--full_bleed {
  position: relative; isolation: isolate;
  min-height: min(78vh, 46rem);
  align-items: end;
  padding-block: var(--sp-xl);
}
.s-hero--full_bleed .s-hero__media--bleed {
  position: absolute; inset: 0; z-index: 0;
}
.s-hero--full_bleed .s-hero__media--bleed .s-img { height: 100%; border-radius: 0; }
.s-hero--full_bleed .s-hero__media--bleed .s-img__el,
.s-hero--full_bleed .s-hero__media--bleed .s-img__ph { min-height: 100%; }
.s-hero--full_bleed .s-hero__body {
  position: relative; z-index: 1; max-width: 40rem;
  padding: var(--sp-md);
  border-radius: var(--radius);
  background: color-mix(in oklab, var(--c-bg) 88%, transparent);
  backdrop-filter: blur(10px);
}
/* -0.042em and line-height 0.98 were tuned against a grotesque and were being
   applied to whatever display face the spec chose. On a serif the counters
   close and the ascenders collide. Both values now come from the face. */
.s-hero__title {
  margin: 0 0 var(--sp-sm);
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-display);
  line-height: 1.02;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  /* Optical left alignment: the first glyph's side bearing would otherwise
     leave the headline visibly indented relative to the copy beneath it. */
  margin-inline-start: -0.014em;
}
.s-hero__rotate {
  display: inline-block; position: relative; vertical-align: bottom;
  color: var(--c-accent);
}
.s-hero__rotate-track { display: grid; align-items: end; }
.s-hero__rotate-word {
  grid-area: 1 / 1; opacity: 0;
  animation: s-rotate-word calc(var(--rotate-n) * 2.2s) infinite;
  animation-delay: calc(var(--rotate-i) * 2.2s);
}
@keyframes s-rotate-word {
  0%, 6% { opacity: 0; transform: translateY(0.35em); }
  10%, 22% { opacity: 1; transform: none; }
  26%, 100% { opacity: 0; transform: translateY(-0.2em); }
}
@media (prefers-reduced-motion: reduce) {
  .s-hero__rotate-word { animation: none; opacity: 0; }
  .s-hero__rotate-word:first-child { opacity: 1; }
}
.s-hero__subtitle {
  margin: 0 0 var(--sp-md); max-width: 38ch;
  font-size: var(--fs-lg); line-height: 1.45; font-weight: var(--fw-body);
  color: var(--c-muted); text-wrap: pretty;
}
.s-hero--centered .s-hero__subtitle, .s-hero--stacked .s-hero__subtitle { margin-inline: auto; }
.s-hero__tags {
  display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 var(--sp-md);
}
/* Forced lowercase mangles proper nouns and figures ("N50m" -> "n50m"). */
.s-hero__tag {
  padding: 0.3rem 0.7rem; border-radius: var(--radius-pill);
  border: 1px solid var(--c-hairline);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  font-weight: var(--fw-body); letter-spacing: 0;
  color: var(--c-muted); background: var(--c-tint-1);
}
.s-hero--centered .s-hero__tags, .s-hero--stacked .s-hero__tags { justify-content: center; }
.s-hero__actions { display: flex; gap: var(--sp-xs); flex-wrap: wrap; }
.s-hero--centered .s-hero__actions, .s-hero--stacked .s-hero__actions { justify-content: center; }
.s-hero__media { position: relative; }
.s-hero__media--browser { align-self: stretch; }
/* Hero media is one of the two places a real shadow is earned: it is the one
   object on the page that is genuinely meant to float above it. */
.s-browser {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radius); border: 0;
  background: var(--c-tint-2);
  box-shadow:
    inset 0 1px 0 0 var(--c-rim),
    0 0 0 1px var(--c-hairline),
    var(--shadow-lg);
}
.s-browser__bar {
  display: flex; align-items: center; gap: 0.35rem;
  padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--c-border);
  background: color-mix(in oklab, var(--c-bg) 60%, var(--c-surface));
}
.s-browser__dot {
  width: 0.5rem; height: 0.5rem; border-radius: 999px;
  background: color-mix(in oklab, var(--c-muted) 45%, transparent);
}
.s-browser__bar::after {
  content: "";
  flex: 1 1 auto; height: 1.35rem; margin-inline-start: 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--c-tint-2);
  box-shadow: inset 0 0 0 1px var(--c-hairline-soft);
}
.s-browser__viewport { line-height: 0; }
.s-browser__shot { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 0; }

.s-hero__note { margin: var(--sp-sm) 0 0; font-size: var(--fs-sm); color: var(--c-muted); }
.s-hero__logos { margin-top: var(--sp-md); }
.s-hero__logos-title {
  margin: 0 0 var(--sp-xs);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  font-weight: var(--fw-body); letter-spacing: 0; color: var(--c-muted);
}
.s-hero__logos-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-md);
}
.s-hero__logo {
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-body);
  color: var(--c-muted);
  transition: color var(--dur-fast) var(--ease);
}
.s-hero__logo:hover { opacity: 1; color: var(--c-text); }
.s-hero--centered .s-hero__logos-row,
.s-hero--stacked .s-hero__logos-row { justify-content: center; }
.s-hero--centered .s-hero__logos-title,
.s-hero--stacked .s-hero__logos-title { text-align: center; }
.s-hero__trust {
  margin: var(--sp-sm) 0 0; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-muted);
}
.s-hero--centered .s-hero__trust, .s-hero--stacked .s-hero__trust { text-align: center; }
.s-hero__media--mock { align-self: stretch; }
.s-hero__media--video { align-self: center; }
.s-hero__video { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--c-hairline); }
.s-hero__video-poster { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.s-hero__video-play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: color-mix(in oklab, var(--c-text) 22%, transparent);
  transition: background var(--dur-fast) var(--ease);
}
.s-hero__video-play::after {
  content: ""; width: 0; height: 0;
  border-top: 1rem solid transparent; border-bottom: 1rem solid transparent;
  border-left: 1.5rem solid var(--c-bg);
}
.s-hero__video-play--minimal {
  background: transparent;
}
.s-hero__video-play--minimal::after {
  filter: drop-shadow(0 2px 8px color-mix(in oklab, var(--c-text) 35%, transparent));
}
.s-hero__video-play--minimal:hover { background: color-mix(in oklab, var(--c-text) 12%, transparent); }
.s-hero__video-play:hover { background: color-mix(in oklab, var(--c-text) 32%, transparent); }

.s-pagehead {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-md); margin-bottom: var(--sp-lg);
}
.s-wrap > .s-pagehead:only-child { margin-bottom: 0; }
.s-pagehead + .s-catnav { margin-top: var(--sp-md); }
.s-pagehead + .s-img { margin-top: var(--sp-md); }
.s-pagehead__copy { display: flex; flex-direction: column; gap: var(--sp-3xs); max-width: 42rem; }
.s-pagehead__title {
  margin: 0; font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: var(--fw-display);
  line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance;
}
.s-pagehead__desc { margin: 0; color: var(--c-muted); font-size: var(--fs-lg); text-wrap: pretty; }
.s-pagehead__actions { display: flex; gap: var(--sp-xs); flex-wrap: wrap; }

/* "Empty states and errors: designed, not stubbed. These are high-trust
   moments." A dashed rectangle is the visual language of an unfinished
   wireframe; the three kinds now differ by more than a border style. */
.s-empty {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-xs);
  text-align: start; padding: var(--sp-lg) var(--sp-md);
  border: 0; border-radius: var(--radius);
  background: var(--c-tint-2);
  box-shadow: inset 0 0 0 1px var(--c-hairline-soft);
}
.s-empty--first_use {
  background:
    linear-gradient(var(--c-hairline-soft) 1px, transparent 1px) 0 0 / 100% var(--grid-pitch),
    var(--c-tint-1);
}
.s-empty--no_results { background: var(--c-tint-2); }
.s-empty--error {
  background: color-mix(in oklab, var(--c-danger) 5%, var(--c-bg));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c-danger) 24%, transparent);
}
.s-empty__title {
  margin: 0; font-family: var(--font-display); font-size: var(--fs-lg);
  font-weight: var(--fw-display); letter-spacing: var(--tracking-display);
}
.s-empty__body { margin: 0; max-width: 42ch; color: var(--c-muted); }
.s-empty__actions { margin-top: var(--sp-2xs); }

/* ---------- blocks ---------- */
.s-block { display: flex; flex-direction: column; gap: var(--sp-lg); }
/* Components that draw their own top rule already state the boundary. Keeping
   the head's underline as well gives two parallel rules with a band of dead
   space between them, which is what made these blocks read as disconnected. */
.s-block:has(> .s-stats) .s-block__head,
.s-block:has(> .s-ledger) .s-block__head,
.s-block:has(> .s-api) .s-block__head,
.s-block:has(> .s-jobs) .s-block__head,
.s-block:has(> .s-agenda) .s-block__head,
.s-block:has(> .s-fees) .s-block__head,
.s-block:has(> .s-accordion) .s-block__head,
.s-block:has(> .s-articles--list) .s-block__head,
.s-block:has(> .s-contacts) .s-block__head,
.s-block:has(> .s-highlights) .s-block__head,
.s-block:has(> .s-results) .s-block__head,
.s-block:has(> .s-timeline) .s-block__head {
  border-bottom: 0; padding-bottom: 0;
}
.s-block:has(> .s-stats), .s-block:has(> .s-ledger), .s-block:has(> .s-api),
.s-block:has(> .s-jobs), .s-block:has(> .s-agenda), .s-block:has(> .s-fees),
.s-block:has(> .s-accordion), .s-block:has(> .s-contacts),
.s-block:has(> .s-highlights), .s-block:has(> .s-results) { gap: var(--sp-sm); }

/* Asymmetric section head. Eyebrow and title hold the left column, the
   subtitle sits in a narrower right column on its own baseline. This is the
   composition Linear, Stripe and Vercel all use, and it is the fastest way to
   stop a page reading as a stack of centred template blocks. Below the split
   point, and inside narrow wraps, it collapses to a single left column --
   never to centred. */
.s-block__head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  column-gap: var(--sp-lg);
  row-gap: var(--sp-2xs);
  align-items: end;
  text-align: start;
  max-width: none;
  margin-inline: 0;
  padding-bottom: var(--sp-sm);
  border-bottom: 1px solid var(--c-hairline-soft);
}
.s-block__head > .s-eyebrow,
.s-block__head > .s-block__title { grid-column: 1; }
.s-block__head > .s-block__subtitle {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: end;
  padding-bottom: 0.35em;
  max-width: 42ch;
}
.s-block__head:not(:has(> .s-block__subtitle)) { grid-template-columns: minmax(0, 1fr); }
/* The split needs a title to anchor the left column. With no title there is
   nothing to sit opposite, so the head collapses rather than stranding its
   only line in the right-hand column. */
.s-block__head:not(:has(> .s-block__title)) { grid-template-columns: minmax(0, 1fr); }
.s-block__head:not(:has(> .s-block__title)) > .s-block__subtitle {
  grid-column: 1;
  grid-row: auto;
  padding-bottom: 0;
}
/* A subtitle that is the block's only line is not a subtitle -- it is the
   section's statement, and it should be set like one. */
.s-block__head:not(:has(> .s-block__title)):not(:has(> .s-eyebrow)) > .s-block__subtitle {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-display);
  line-height: 1.25;
  letter-spacing: var(--tracking-display);
  color: var(--c-text);
  max-width: 34ch;
  text-wrap: balance;
}
.s-wrap--narrow .s-block__head {
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--sp-xs);
}
.s-wrap--narrow .s-block__head > .s-block__subtitle {
  grid-column: 1;
  grid-row: auto;
  padding-bottom: 0;
}
@media (max-width: 62rem) {
  .s-block__head {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--sp-xs);
  }
  .s-block__head > .s-block__subtitle {
    grid-column: 1;
    grid-row: auto;
    padding-bottom: 0;
  }
}
.s-block__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-display);
  line-height: 1.06;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  /* Optical alignment: a cap-height glyph sits a hair inside its em box, so a
     heading set flush left is optically indented next to the text below it. */
  margin-inline-start: -0.012em;
}
.s-block__subtitle {
  margin: 0;
  color: var(--c-muted);
  font-size: var(--fs-md);
  line-height: 1.55;
  text-wrap: pretty;
}

.s-feature { display: flex; flex-direction: column; gap: var(--sp-2xs); }
.s-feature--plain { gap: var(--sp-2xs); }
/* Numbered features take a hairline rule instead of a box, which is the
   editorial convention for an ordered set. */
.s-feature--numbered { gap: var(--sp-2xs); padding-top: var(--sp-sm); border-top: 1px solid var(--c-hairline); }
.s-feature--card {
  padding: var(--sp-md);
  background: var(--c-tint-2);
  border: 1px solid transparent; border-radius: var(--radius);
  transition:
    background-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-medium) var(--ease-enter),
    transform var(--dur-medium) var(--ease-enter);
}
.s-feature--card.s-elev--raised:hover { border-color: var(--c-border-strong); box-shadow: var(--shadow-sm); }
.s-feature--card.s-elev--hairline:hover { border-color: var(--c-border-strong); box-shadow: none; transform: none; }
.s-feature--card.s-elev--none { border-color: transparent; background: transparent; }
.s-feature--card.s-elev--none:hover { transform: none; box-shadow: none; }
.s-feature--card.s-elev--brutal:hover { border-color: var(--c-text); }
/* Was neumorphism: opposed grey and hard-white shadows, which dates the whole
   page to 2020 and produces a plastic that no material behaves like. Replaced
   with a tinted surface, a lit top rim, and a real cast shadow -- soft depth
   without the moulded-putty look. */
.s-feature--soft {
  padding: var(--sp-md);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, var(--c-tint-1), var(--c-tint-2));
  border: 0;
  box-shadow:
    inset 0 1px 0 0 var(--c-rim),
    0 0 0 1px var(--c-hairline-soft),
    var(--shadow-sm);
  transition: box-shadow var(--dur-medium) var(--ease-enter),
              transform var(--dur-medium) var(--ease-enter);
}
.s-feature--soft:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 0 var(--c-rim),
    0 0 0 1px var(--c-hairline),
    var(--shadow-md);
}
.s-feature--soft.s-elev--brutal {
  box-shadow: 4px 4px 0 var(--c-text);
  border: 3px solid var(--c-text);
  background: var(--c-bg);
}
/* Was a 44px tinted rounded square with an icon centred in it -- the
   "icon-in-a-rounded-square" tell, present on essentially every generated
   SaaS page. An icon at text scale, in the accent, optically aligned to the
   heading that follows it, does the same job and does not announce itself. */
.s-feature__icon {
  display: block;
  width: 1.35rem; height: 1.35rem;
  color: var(--c-accent);
  margin-bottom: var(--sp-xs);
}
.s-feature__icon .s-icon { width: 100%; height: 100%; }
.s-feature__index {
  font-family: var(--font-mono);
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
  line-height: 1; letter-spacing: 0.04em;
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}
.s-feature__title {
  margin: 0; font-family: var(--font-display); font-size: var(--fs-lg);
  font-weight: var(--fw-display); letter-spacing: var(--tracking-display);
  line-height: 1.2;
}
.s-feature__body { margin: 0; color: var(--c-muted); }
/* An arrow that travels on hover. One of the few motions on the page that
   carries meaning: it points where the click goes. */
/* Arrows are drawn, not typed. A pseudo-element carrying a Unicode arrow
   depends on the chosen face shipping U+2192, which Geist does not reliably
   do -- and it is one Python octal escape away from emitting garbage, which
   is exactly what happened. A masked SVG has neither failure mode and still
   inherits colour. */
.s-feature__link::after, .s-bento__link::after, .s-accordion__link::after,
.s-pillar__link::after, .s-promo__cta::after, .s-nav-panel__arrow {
  display: inline-block; flex: 0 0 auto; vertical-align: -0.08em;
}
.s-feature__link {
  margin-top: auto; padding-top: var(--sp-xs); align-self: flex-start;
  color: var(--c-text); font-size: var(--fs-sm); font-weight: var(--fw-medium);
  text-decoration: none; letter-spacing: var(--tracking-body);
  display: inline-flex; align-items: center; gap: 0.4em;
}
.s-feature__link::after {
  content: ""; width: 0.85em; height: 0.85em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h10M8.5 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h10M8.5 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;;
  color: var(--c-accent);
  transition: transform var(--dur-fast) var(--ease-enter);
}
.s-feature__link:hover { color: var(--c-accent); }
.s-feature__link:hover::after { transform: translateX(0.22em); }
@media (prefers-reduced-motion: reduce) {
  .s-feature__link:hover::after { transform: none; }
}

/* Left-aligned columns divided by hairlines, rather than centred text
   floating in a row. Alignment is what makes a set of claims read as audited
   rather than as marketing. */
.s-trust {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-md);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.s-trust__item {
  display: flex; flex-direction: column; gap: 0.25rem;
  padding-inline-start: var(--sp-sm);
  border-inline-start: 1px solid var(--c-hairline);
  text-align: start;
}
.s-trust__label {
  font-family: var(--font-body); font-size: var(--fs-sm);
  font-weight: var(--fw-semi); letter-spacing: var(--tracking-body);
}
.s-trust__detail { color: var(--c-muted); font-size: var(--fs-xs); }

.s-team { align-items: start; }
.s-person { display: flex; flex-direction: column; gap: var(--sp-2xs); }
.s-person__initials {
  display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem; margin-bottom: var(--sp-3xs);
  border-radius: 999px; background: var(--c-primary-tint); color: var(--c-primary);
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-display);
}
.s-person__photo { width: 3.5rem; height: 3.5rem; margin-bottom: var(--sp-3xs); }
.s-person__name { margin: 0; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-display); letter-spacing: -0.02em; }
.s-person__role { margin: 0; color: var(--c-muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.s-person__bio { margin: 0; color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.5; max-width: 36ch; }

.s-block__cta { display: flex; justify-content: center; margin-top: var(--sp-md); }

.s-case {
  display: flex; flex-direction: column; gap: var(--sp-xs);
  text-decoration: none; color: inherit;
}
.s-case--link { transition: transform var(--dur-fast) var(--ease); }
.s-case--link:hover { transform: translateY(-2px); }
.s-case__img { width: 100%; margin-bottom: var(--sp-2xs); }
.s-case__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.s-case__tag {
  font-size: var(--fs-xs); font-weight: var(--fw-semi); letter-spacing: 0; font-family: var(--font-mono);
  color: var(--c-muted);
}
.s-case__title {
  margin: 0; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-display);
  letter-spacing: -0.02em; line-height: 1.15;
}
.s-case__summary { margin: 0; color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.5; }
.s-portfolio .s-case { height: 100%; }

.s-pillars { gap: var(--sp-xl); }
.s-pillar { display: flex; flex-direction: column; gap: var(--sp-md); }
.s-pillar__label {
  margin: 0; font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0;
  font-family: var(--font-mono); color: var(--c-accent);
}
.s-pillar__items {
  display: grid; gap: var(--sp-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.s-pillar__item { display: flex; flex-direction: column; gap: var(--sp-2xs); }
.s-pillar__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-display); letter-spacing: -0.02em; }
.s-pillar__body { margin: 0; color: var(--c-muted); line-height: 1.55; }
.s-pillar__benefits {
  margin: var(--sp-2xs) 0 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 0.35rem; font-size: var(--fs-sm);
}
.s-pillar__benefits li::before { content: ""; width: 0.85em; height: 0.85em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h10M8.5 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h10M8.5 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; color: var(--c-accent); font-weight: var(--fw-bold); }

.s-catnav {
  border-block: 1px solid var(--c-border); background: var(--c-bg);
}
.s-catnav--sticky { position: sticky; top: 3.2rem; z-index: 40; }
.s-catnav__inner {
  display: flex; gap: var(--sp-md); overflow-x: auto; padding-block: var(--sp-sm);
  scrollbar-width: none;
}
.s-catnav__inner::-webkit-scrollbar { display: none; }
.s-catnav__link {
  flex: 0 0 auto; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-muted);
  white-space: nowrap; transition: color var(--dur-fast) var(--ease);
}
.s-catnav__link:hover { color: var(--c-text); }

.s-photostrip {
  display: flex; gap: var(--sp-sm); overflow-x: auto; padding-bottom: var(--sp-xs);
  scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.s-photostrip__frame {
  flex: 0 0 min(72vw, 22rem); scroll-snap-align: start;
  border-radius: var(--radius); overflow: hidden;
}
.s-photostrip__img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.s-photostrip--filmstrip {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(11rem, 1fr);
  gap: var(--sp-xs); overflow-x: auto; padding: var(--sp-sm);
  background: var(--c-text); border-radius: var(--radius); scroll-snap-type: x mandatory;
}
.s-photostrip--filmstrip .s-photostrip__frame {
  flex: unset; scroll-snap-align: center;
  border: 2px solid color-mix(in oklab, var(--c-bg) 22%, transparent);
  border-radius: var(--radius-sm);
}
.s-photostrip--filmstrip .s-photostrip__img { aspect-ratio: 3/2; }
.s-photostrip--collage {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(7.5rem, auto); gap: var(--sp-sm);
  overflow: visible; scroll-snap-type: none; padding-bottom: 0;
}
.s-photostrip--collage .s-photostrip__frame { flex: unset; scroll-snap-align: unset; }
.s-photostrip--collage .s-photostrip__frame:nth-child(1) { grid-column: span 3; grid-row: span 2; }
.s-photostrip--collage .s-photostrip__frame:nth-child(2) { grid-column: span 2; }
.s-photostrip--collage .s-photostrip__frame:nth-child(3) { grid-column: span 1; }
.s-photostrip--collage .s-photostrip__frame:nth-child(4) { grid-column: span 2; grid-row: span 2; }
.s-photostrip--collage .s-photostrip__frame:nth-child(5) { grid-column: span 2; }
.s-photostrip--collage .s-photostrip__frame:nth-child(n+6) { grid-column: span 2; }
.s-photostrip--collage .s-photostrip__img { aspect-ratio: auto; min-height: 100%; }

.s-segtabs {
  display: grid; gap: var(--sp-sm);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
.s-segtabs__item {
  display: flex; flex-direction: column; gap: var(--sp-3xs);
  padding: var(--sp-md);
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: var(--c-tint-2);
  box-shadow: inset 0 0 0 1px var(--c-hairline-soft);
  text-decoration: none; color: inherit;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.s-segtabs__item:hover {
  border-color: color-mix(in oklab, var(--c-accent) 45%, var(--c-border));
  transform: translateY(-2px);
  box-shadow: 0 0.75rem 2rem color-mix(in oklab, var(--c-text) 6%, transparent);
}
.s-segtabs__label {
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-display);
  letter-spacing: -0.02em; line-height: 1.15;
}
.s-segtabs__desc { margin: 0; font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.45; }

.s-media-embed {
  display: grid; gap: var(--sp-md);
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
  padding: var(--sp-md);
  border-radius: var(--radius);
  border: 0;
  background: var(--c-tint-2);
  box-shadow: inset 0 0 0 1px var(--c-hairline-soft);
  text-decoration: none; color: inherit;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.s-media-embed:hover {
  border-color: color-mix(in oklab, var(--c-accent) 40%, var(--c-border));
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.s-media-embed__poster { position: relative; border-radius: var(--radius-sm); overflow: hidden; }
.s-media-embed__img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.s-media-embed__badge {
  position: absolute; top: var(--sp-xs); left: var(--sp-xs);
  padding: 0.3rem 0.65rem; border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0; font-family: var(--font-mono);
  background: color-mix(in oklab, var(--c-bg) 88%, transparent);
  color: var(--c-text); border: 1px solid var(--c-hairline);
  backdrop-filter: blur(8px);
}
.s-media-embed__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: color-mix(in oklab, var(--c-text) 18%, transparent);
  transition: background var(--dur-fast) var(--ease);
}
.s-media-embed__play::after {
  content: "";
  width: 0; height: 0;
  border-top: 0.85rem solid transparent;
  border-bottom: 0.85rem solid transparent;
  border-left: 1.35rem solid var(--c-bg);
  margin-left: 0.25rem;
  filter: drop-shadow(0 2px 6px color-mix(in oklab, var(--c-text) 25%, transparent));
}
.s-media-embed:hover .s-media-embed__play {
  background: color-mix(in oklab, var(--c-text) 28%, transparent);
}
.s-media-embed__meta { display: flex; flex-direction: column; gap: var(--sp-2xs); }
.s-media-embed__title {
  margin: 0; font-family: var(--font-display); font-size: var(--fs-xl);
  font-weight: var(--fw-display); letter-spacing: -0.02em; line-height: 1.15;
}
.s-media-embed__subtitle { margin: 0; font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.5; }
.s-media-embed__link {
  margin-top: var(--sp-2xs); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-accent);
}
@media (max-width: 52rem) {
  .s-media-embed { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- product mock (Linear-class) ---------- */
.s-mock {
  border-radius: var(--radius); border: 0;
  background: var(--c-tint-2); overflow: hidden;
  box-shadow:
    inset 0 1px 0 0 var(--c-rim),
    0 0 0 1px var(--c-hairline),
    var(--shadow-lg);
}
.s-mock__shot { width: 100%; display: block; aspect-ratio: 16/10; object-fit: cover; }
.s-mock__shell { display: grid; grid-template-columns: 11rem minmax(0, 1fr); min-height: 18rem; }
.s-mock__sidebar {
  padding: var(--sp-sm); border-right: 1px solid var(--c-border);
  background: color-mix(in oklab, var(--c-bg) 88%, var(--c-surface));
  display: flex; flex-direction: column; gap: var(--sp-2xs);
}
.s-mock__sidebar-brand {
  font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0; font-family: var(--font-mono);
  color: var(--c-muted); margin-bottom: var(--sp-xs);
}
.s-mock__sidebar-item {
  font-size: var(--fs-xs); color: var(--c-muted); padding: 0.35rem 0.5rem; border-radius: var(--radius-sm);
}
.s-mock__sidebar-item:first-of-type { color: var(--c-text); background: var(--c-primary-tint); }
.s-mock__main { padding: var(--sp-md); display: flex; flex-direction: column; gap: var(--sp-sm); }
.s-mock__issue-id { font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--c-muted); letter-spacing: 0.04em; }
.s-mock__issue-title {
  margin: 0.25rem 0 0; font-family: var(--font-display); font-size: var(--fs-lg);
  font-weight: var(--fw-display); letter-spacing: -0.02em; line-height: 1.2;
}
.s-mock__issue-sub { margin: 0.35rem 0 0; font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.45; }
.s-mock__badges { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.s-mock__badge {
  padding: 0.2rem 0.55rem; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: var(--fw-semi);
  border: 1px solid var(--c-hairline); background: var(--c-bg); color: var(--c-muted);
}
.s-mock__badge--status { color: var(--c-accent); border-color: color-mix(in oklab, var(--c-accent) 35%, var(--c-border)); }
.s-mock__thread {
  display: flex; flex-direction: column; gap: var(--sp-2xs);
  padding: var(--sp-xs); border-radius: var(--radius-sm);
  border: 1px solid var(--c-hairline); background: color-mix(in oklab, var(--c-surface) 80%, var(--c-bg));
}
.s-mock__thread-line {
  display: flex; flex-wrap: wrap; gap: 0.35rem; font-size: var(--fs-xs); line-height: 1.4;
}
.s-mock__thread-line--agent .s-mock__thread-source { color: var(--c-primary); }
.s-mock__thread-line--pr .s-mock__thread-source { color: var(--c-success); }
.s-mock__thread-source { font-weight: var(--fw-semi); color: var(--c-text); }
.s-mock__thread-body { color: var(--c-muted); }
.s-mock__agent-state {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.35rem 0.55rem; border-radius: var(--radius-sm);
  border: 1px solid var(--c-hairline); background: var(--c-bg);
  font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--c-muted);
}
.s-mock__agent-state::before {
  content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%;
  background: var(--c-primary);
  animation: s-agent-pulse 1.4s ease-in-out infinite;
}
@keyframes s-agent-pulse {
  0%, 100% { opacity: 0.45; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .s-mock__agent-state::before { animation: none; opacity: 0.85; }
}
.s-mock__activity { display: flex; flex-direction: column; gap: var(--sp-2xs); margin-top: auto; }
.s-mock__activity-line { font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.4; }
.s-mock__activity-actor { font-weight: var(--fw-semi); color: var(--c-text); margin-right: 0.35rem; }
.s-mock__activity-time { opacity: 0.7; margin-left: 0.35rem; }
.s-mock__kanban { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-xs); padding: var(--sp-sm); }
.s-mock__kanban-col { background: color-mix(in oklab, var(--c-bg) 70%, var(--c-surface)); border-radius: var(--radius-sm); padding: var(--sp-2xs); min-height: 10rem; }
.s-mock__kanban-head { display: block; font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--c-muted); padding: 0.35rem; font-family: var(--font-mono); letter-spacing: 0; }
.s-mock__kanban-card { margin-top: var(--sp-2xs); padding: var(--sp-2xs); border-radius: var(--radius-sm); background: var(--c-bg); border: 1px solid var(--c-hairline); }
.s-mock__kanban-card-title { font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: 1.35; }
.s-mock__timeline { padding: var(--sp-md); display: flex; flex-direction: column; gap: var(--sp-sm); }
.s-mock__timeline-row { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--sp-sm); align-items: center; }
.s-mock__timeline-label { font-size: var(--fs-xs); color: var(--c-muted); }
.s-mock__timeline-bar { display: block; height: 0.55rem; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--c-primary), var(--c-accent)); }
.s-mock__diff { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.s-mock__diff-file { margin: 0; padding: var(--sp-2xs) var(--sp-sm); font-size: var(--fs-xs); grid-column: 1 / -1; background: var(--c-bg); border-bottom: 1px solid var(--c-border); color: var(--c-muted); }
.s-mock__diff-pane {
  margin: 0; padding: var(--sp-sm); font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--fs-xs); line-height: 1.5; overflow: auto; min-height: 9rem;
}
.s-mock__diff-pane--before { background: color-mix(in oklab, var(--c-danger) 6%, var(--c-bg)); border-right: 1px solid var(--c-border); }
.s-mock__diff-pane--after { background: color-mix(in oklab, var(--c-success) 6%, var(--c-bg)); }
.s-mock__chart {
  display: flex; align-items: flex-end; gap: var(--sp-sm); padding: var(--sp-md); min-height: 12rem;
  border-top: 1px solid var(--c-border);
}
.s-mock__chart-bar {
  flex: 1; min-height: 2rem; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: linear-gradient(180deg, var(--c-accent), color-mix(in oklab, var(--c-accent) 55%, var(--c-primary)));
  display: flex; align-items: flex-start; justify-content: center; padding-top: var(--sp-2xs);
}
.s-mock__chart-val { font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--c-bg); }
.s-mock__inbox { padding: var(--sp-sm); display: flex; flex-direction: column; gap: var(--sp-2xs); }
.s-mock__inbox-item { padding: var(--sp-2xs) var(--sp-xs); border-radius: var(--radius-sm); border: 1px solid var(--c-hairline); background: var(--c-bg); font-size: var(--fs-sm); }
.s-mock__inbox-actor { font-weight: var(--fw-semi); margin-right: 0.35rem; }
.s-mock--app_shell .s-mock__shell { min-height: 18rem; }
.s-mock--kanban { background: var(--c-surface); }
.s-mock--timeline { background: var(--c-surface); }
.s-mock--diff { background: var(--c-surface); }
.s-mock--chart { background: var(--c-surface); }
.s-mock--inbox { background: var(--c-surface); }
.s-mock__issue-head { display: flex; flex-direction: column; gap: 0.15rem; }
.s-mock__activity-body { color: var(--c-muted); }
.s-mock__inbox-body { color: var(--c-muted); }

/* ---------- chapter sections ---------- */
.s-chapter { display: block; }
.s-chapter__head { max-width: 42rem; margin-bottom: var(--sp-md); }
.s-chapter__number {
  display: inline-block; margin-bottom: var(--sp-xs); font-size: var(--fs-sm); font-weight: var(--fw-bold);
  letter-spacing: 0.08em; color: var(--c-accent);
}
.s-chapter__title { margin: 0 0 var(--sp-xs); font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-display); letter-spacing: -0.026em; line-height: 1.1; }
.s-chapter__thesis { margin: 0; font-size: var(--fs-md); color: var(--c-muted); line-height: 1.55; max-width: 40rem; }
.s-chapter__visual { margin-block: var(--sp-md); }
.s-chapter__img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.s-chapter__pills { display: flex; flex-wrap: wrap; gap: var(--sp-xs); margin-top: var(--sp-md); }
.s-chapter__pill {
  display: inline-flex; align-items: center; gap: var(--sp-2xs); padding: 0.45rem 0.85rem;
  border-radius: var(--radius-pill); border: 1px solid var(--c-hairline); background: var(--c-bg);
  text-decoration: none; color: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.s-chapter__pill:hover { border-color: color-mix(in oklab, var(--c-accent) 40%, var(--c-border)); transform: translateY(-1px); }
.s-chapter__pill-num { opacity: 0.65; font-weight: var(--fw-bold); font-size: var(--fs-xs); }
.s-chapter__pill-label { line-height: 1.2; }

.s-pipeline {
  display: flex; flex-wrap: wrap; gap: var(--sp-sm); justify-content: center;
  padding: var(--sp-md); border-radius: var(--radius); border: 0;
  background: var(--c-tint-2); box-shadow: inset 0 0 0 1px var(--c-hairline-soft);
}
.s-pipeline__item {
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: var(--sp-xs) var(--sp-sm);
  border-radius: var(--radius-sm); text-decoration: none; color: var(--c-muted); min-width: 6.5rem;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.s-pipeline__item:hover { color: var(--c-text); background: var(--c-bg); }
.s-pipeline__item--current { color: var(--c-text); background: var(--c-bg); border: 1px solid var(--c-hairline); }
.s-pipeline__num { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.06em; }
.s-pipeline__label { font-size: var(--fs-sm); font-weight: var(--fw-medium); text-align: center; line-height: 1.2; }

.s-tabshowcase { position: relative; }
.s-tabshowcase__radio { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.s-tabshowcase__labels { display: flex; flex-wrap: wrap; gap: var(--sp-2xs); margin-bottom: var(--sp-md); }
.s-tabshowcase__label {
  padding: 0.5rem 1rem; border-radius: var(--radius-pill); border: 1px solid var(--c-hairline);
  background: var(--c-bg); font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.s-tabshowcase__panel {
  display: none; padding: var(--sp-md); border-radius: var(--radius); border: 0;
  background: var(--c-tint-2); box-shadow: inset 0 0 0 1px var(--c-hairline-soft);
}
.s-tabshowcase__panel-title { margin: 0 0 var(--sp-2xs); font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-display); }
.s-tabshowcase__panel-body { margin: 0; color: var(--c-muted); line-height: 1.55; }
.s-tabshowcase__radio:nth-of-type(1):checked ~ .s-tabshowcase__labels .s-tabshowcase__label:nth-child(1),
.s-tabshowcase__radio:nth-of-type(2):checked ~ .s-tabshowcase__labels .s-tabshowcase__label:nth-child(2),
.s-tabshowcase__radio:nth-of-type(3):checked ~ .s-tabshowcase__labels .s-tabshowcase__label:nth-child(3),
.s-tabshowcase__radio:nth-of-type(4):checked ~ .s-tabshowcase__labels .s-tabshowcase__label:nth-child(4),
.s-tabshowcase__radio:nth-of-type(5):checked ~ .s-tabshowcase__labels .s-tabshowcase__label:nth-child(5) {
  border-color: color-mix(in oklab, var(--c-accent) 45%, var(--c-border)); background: var(--c-primary-tint); color: var(--c-text);
}
.s-tabshowcase__radio:nth-of-type(1):checked ~ .s-tabshowcase__panels .s-tabshowcase__panel:nth-child(1),
.s-tabshowcase__radio:nth-of-type(2):checked ~ .s-tabshowcase__panels .s-tabshowcase__panel:nth-child(2),
.s-tabshowcase__radio:nth-of-type(3):checked ~ .s-tabshowcase__panels .s-tabshowcase__panel:nth-child(3),
.s-tabshowcase__radio:nth-of-type(4):checked ~ .s-tabshowcase__panels .s-tabshowcase__panel:nth-child(4),
.s-tabshowcase__radio:nth-of-type(5):checked ~ .s-tabshowcase__panels .s-tabshowcase__panel:nth-child(5) { display: block; }
.s-tabshowcase__cards-title { margin: var(--sp-lg) 0 var(--sp-sm); font-size: var(--fs-md); font-weight: var(--fw-semi); }
.s-tabshowcase__cards { display: grid; gap: var(--sp-sm); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.s-tabshowcase__card {
  display: flex; align-items: center; padding: var(--sp-sm); border-radius: var(--radius);
  border: 1px solid var(--c-hairline); background: var(--c-bg); text-decoration: none; color: inherit;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.s-tabshowcase__card:hover { border-color: color-mix(in oklab, var(--c-accent) 40%, var(--c-border)); transform: translateY(-2px); }
.s-tabshowcase__card-label { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.s-tabshowcase__card-label::after { content: ""; width: 0.85em; height: 0.85em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h10M8.5 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h10M8.5 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; opacity: 0.55; }

.s-feature-story { display: flex; flex-direction: column; gap: var(--sp-xl); }
.s-feature-story__row {
  display: grid; gap: var(--sp-lg); align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.s-feature-story__copy { display: flex; flex-direction: column; gap: var(--sp-xs); }
.s-feature-story__row.s-feature-story-media--inline_start .s-feature-story__media { order: -1; }
.s-feature-story__row.s-feature-story-media--inline_end .s-feature-story__media { order: 1; }
.s-feature-story__title { margin: 0 0 var(--sp-xs); font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-display); letter-spacing: -0.02em; }
.s-feature-story__body { margin: 0; color: var(--c-muted); line-height: 1.55; }
.s-feature-story__link { display: inline-block; margin-top: var(--sp-sm); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-accent); text-decoration: none; }
.s-feature-story__link:hover { color: var(--c-text); }
.s-feature-story__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
@media (max-width: 52rem) {
  .s-feature-story__row, .s-feature-story__row.s-feature-story-media--inline_start { grid-template-columns: minmax(0, 1fr); }
  .s-feature-story__row.s-feature-story-media--inline_start .s-feature-story__media { order: 0; }
  .s-mock__shell { grid-template-columns: minmax(0, 1fr); }
  .s-mock__kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-mock__diff { grid-template-columns: minmax(0, 1fr); }
}

.s-proof-band { display: block; }
.s-proof-band__featured { margin: 0 0 var(--sp-lg); padding: 0; border: 0; }
.s-proof-band__quote {
  margin: 0; font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-display);
  line-height: 1.15; letter-spacing: -0.024em; text-wrap: balance;
}
.s-proof-band__cite { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: var(--sp-sm); font-size: var(--fs-sm); color: var(--c-muted); }
.s-proof-band__author { font-weight: var(--fw-semi); color: var(--c-text); }
.s-proof-band__role { color: var(--c-muted); }
.s-proof-band__story-link { display: inline-block; margin-top: var(--sp-sm); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-accent); text-decoration: none; }
.s-proof-band__quotes { display: grid; gap: var(--sp-md); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin-bottom: var(--sp-lg); }
.s-proof-band__quotes--carousel {
  display: flex; gap: var(--sp-md); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--sp-xs); margin-bottom: var(--sp-lg); -webkit-overflow-scrolling: touch;
}
.s-proof-band__quotes--carousel .s-proof-band__quote-item {
  flex: 0 0 min(24rem, 88vw); scroll-snap-align: start;
}
.s-proof-band__quotes--rotate {
  position: relative; min-height: 9rem; margin-bottom: var(--sp-lg);
}
.s-proof-band__quotes--rotate .s-proof-band__quote-item {
  position: absolute; inset: 0; opacity: 0;
  animation: s-quote-rotate 20s infinite;
}
.s-proof-band__quotes--rotate .s-proof-band__quote-item:nth-child(1) { animation-delay: 0s; }
.s-proof-band__quotes--rotate .s-proof-band__quote-item:nth-child(2) { animation-delay: 4s; }
.s-proof-band__quotes--rotate .s-proof-band__quote-item:nth-child(3) { animation-delay: 8s; }
.s-proof-band__quotes--rotate .s-proof-band__quote-item:nth-child(4) { animation-delay: 12s; }
.s-proof-band__quotes--rotate .s-proof-band__quote-item:nth-child(5) { animation-delay: 16s; }
@keyframes s-quote-rotate {
  0%, 16% { opacity: 1; }
  20%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .s-proof-band__quotes--rotate { min-height: 0; }
  .s-proof-band__quotes--rotate .s-proof-band__quote-item {
    position: static; opacity: 1; animation: none;
  }
  .s-proof-band__quotes--rotate .s-proof-band__quote-item:not(:first-child) { display: none; }
}
.s-proof-band__quote-item {
  margin: 0; padding: 0 0 0 var(--sp-sm); border-radius: 0; border: 0;
  border-inline-start: 1px solid var(--c-hairline); background: none;
}
.s-proof-band__quote-text { margin: 0 0 var(--sp-xs); font-size: var(--fs-sm); line-height: 1.5; }
.s-proof-band__quote-meta { font-size: var(--fs-xs); color: var(--c-muted); }
.s-proof-band__stats { display: grid; gap: var(--sp-sm); grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.s-proof-band__stat {
  padding: var(--sp-sm) 0 0; border-radius: 0; border: 0;
  border-top: 1px solid var(--c-hairline); background: none; text-align: start;
}
.s-proof-band__stat-value { display: block; font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-display); letter-spacing: -0.02em; }
.s-proof-band__stat-label { display: block; margin-top: 0.25rem; font-size: var(--fs-xs); color: var(--c-muted); }
.s-proof-band__stats--marquee {
  overflow: hidden; margin-top: var(--sp-md);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.s-proof-band__stats-track {
  display: flex; gap: var(--sp-md); width: max-content;
  animation: s-marquee 42s linear infinite;
}
.s-proof-band__stat-chip {
  display: inline-flex; flex-direction: column; align-items: center; flex: 0 0 auto;
  padding: var(--sp-sm) var(--sp-md); border-radius: var(--radius-sm);
  border: 1px solid var(--c-hairline); background: var(--c-bg); min-width: 9rem;
}
@media (prefers-reduced-motion: reduce) {
  .s-proof-band__stats-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}
.s-hero__announcement {
  display: inline-flex; align-items: center; gap: 0.25rem; margin-bottom: var(--sp-sm);
  padding: 0.35rem 0.75rem; border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-semi); letter-spacing: 0.02em;
  color: var(--c-text); text-decoration: none;
  border: 1px solid var(--c-hairline); background: var(--c-surface);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.s-hero__announcement:hover { border-color: color-mix(in oklab, var(--c-accent) 45%, var(--c-border)); background: var(--c-bg); }
.s-hero__announcement-chevron { opacity: 0.7; font-size: 0.92em; }
.s-stats-marquee {
  overflow: hidden; mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.s-stats-marquee__track {
  display: flex; gap: var(--sp-lg); width: max-content;
  animation: s-marquee 36s linear infinite;
}
.s-stats-marquee__chip {
  display: inline-flex; flex-direction: column; align-items: center; flex: 0 0 auto;
  padding: var(--sp-sm) var(--sp-md); min-width: 10rem;
}
@media (prefers-reduced-motion: reduce) {
  .s-stats-marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}

.s-matrix-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--c-hairline); }
.s-matrix { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.s-matrix__group { background: var(--c-surface); }
.s-matrix__row { background: var(--c-bg); }
.s-matrix__corner, .s-matrix__plan, .s-matrix__label { padding: var(--sp-sm); text-align: start; border-bottom: 1px solid var(--c-border); }
.s-matrix__plan { font-weight: var(--fw-semi); text-align: center; background: var(--c-surface); }
.s-matrix__group-title {
  padding: var(--sp-xs) var(--sp-sm); font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: 0; font-family: var(--font-mono); text-align: start;
  background: var(--c-surface); color: var(--c-muted);
}
.s-matrix__cell { padding: var(--sp-sm); text-align: center; border-bottom: 1px solid var(--c-border); color: var(--c-muted); }
.s-matrix__check { color: var(--c-success); font-weight: var(--fw-bold); }
.s-matrix__cross { opacity: 0.45; }

.s-changelog { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--c-border); }
.s-changelog__item {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-md);
  padding: var(--sp-sm) 0; border-bottom: 1px solid var(--c-border);
}
.s-changelog__title { font-weight: var(--fw-medium); color: var(--c-text); text-decoration: none; }
.s-changelog__title:hover { color: var(--c-accent); }
.s-changelog__date { flex: 0 0 auto; font-size: var(--fs-sm); color: var(--c-muted); white-space: nowrap; }

/* ---------- customer grid (Notion-class /customers) ---------- */
.s-customer { position: relative; }
.s-customer__radio { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.s-customer__filters { display: flex; flex-wrap: wrap; gap: var(--sp-2xs); margin-bottom: var(--sp-md); }
.s-customer__filter {
  padding: 0.45rem 0.95rem; border-radius: var(--radius-pill); border: 1px solid var(--c-hairline);
  background: var(--c-bg); font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.s-customer__radio:nth-of-type(1):checked ~ .s-customer__filters .s-customer__filter:nth-child(1),
.s-customer__radio:nth-of-type(2):checked ~ .s-customer__filters .s-customer__filter:nth-child(2),
.s-customer__radio:nth-of-type(3):checked ~ .s-customer__filters .s-customer__filter:nth-child(3),
.s-customer__radio:nth-of-type(4):checked ~ .s-customer__filters .s-customer__filter:nth-child(4),
.s-customer__radio:nth-of-type(5):checked ~ .s-customer__filters .s-customer__filter:nth-child(5),
.s-customer__radio:nth-of-type(6):checked ~ .s-customer__filters .s-customer__filter:nth-child(6),
.s-customer__radio:nth-of-type(7):checked ~ .s-customer__filters .s-customer__filter:nth-child(7) {
  border-color: color-mix(in oklab, var(--c-accent) 45%, var(--c-border)); background: var(--c-primary-tint); color: var(--c-text);
}
.s-customer__grid { display: grid; gap: var(--sp-md); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.s-customer__card {
  display: none; flex-direction: column; border-radius: var(--radius); border: 0;
  background: var(--c-tint-2); overflow: hidden; text-decoration: none; color: inherit;
  box-shadow: inset 0 0 0 1px var(--c-hairline-soft);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.s-customer__card--link:hover { border-color: color-mix(in oklab, var(--c-accent) 40%, var(--c-border)); transform: translateY(-2px); }
.s-customer__img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.s-customer__body { padding: var(--sp-md); display: flex; flex-direction: column; gap: var(--sp-2xs); flex: 1; }
.s-customer__company { margin: 0; font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0; font-family: var(--font-mono); color: var(--c-muted); }
.s-customer__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-display); line-height: 1.2; letter-spacing: -0.02em; }
.s-customer__metric { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--c-accent); }
.s-customer__quote { margin: var(--sp-xs) 0 0; font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.5; border-left: 2px solid var(--c-border); padding-left: var(--sp-sm); }
.s-customer__meta { margin-top: auto; padding-top: var(--sp-xs); font-size: var(--fs-xs); color: var(--c-muted); display: flex; flex-wrap: wrap; gap: 0.35rem; }
.s-customer__author { font-weight: var(--fw-semi); color: var(--c-text); }
.s-customer__role { color: var(--c-muted); }

/* ---------- case study bento (Linear-class /customers) ---------- */
.s-casestudy-bento {
  display: grid; gap: var(--sp-sm); grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(10rem, auto);
}
.s-casestudy-bento__tile {
  display: flex; flex-direction: column; border-radius: var(--radius); border: 0;
  background: var(--c-tint-2); overflow: hidden; text-decoration: none; color: inherit;
  box-shadow: inset 0 0 0 1px var(--c-hairline-soft);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.s-casestudy-bento__tile:hover { border-color: color-mix(in oklab, var(--c-accent) 40%, var(--c-border)); transform: translateY(-2px); }
.s-casestudy-bento__tile--featured { grid-column: span 2; grid-row: span 2; }
.s-casestudy-bento__visual { position: relative; flex: 1; min-height: 9rem; }
.s-casestudy-bento__tile--featured .s-casestudy-bento__visual { min-height: 14rem; }
.s-casestudy-bento__img { width: 100%; height: 100%; min-height: 9rem; object-fit: cover; display: block; }
.s-casestudy-bento__play {
  position: absolute; inset: auto auto 1rem 1rem; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: color-mix(in oklab, var(--c-text) 72%, transparent); border: 1px solid color-mix(in oklab, var(--c-bg) 35%, transparent);
}
.s-casestudy-bento__play::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0;
  border-top: 0.45rem solid transparent; border-bottom: 0.45rem solid transparent; border-left: 0.7rem solid var(--c-bg);
  transform: translateX(0.12rem);
}
.s-casestudy-bento__tags { position: absolute; top: var(--sp-xs); left: var(--sp-xs); display: flex; flex-wrap: wrap; gap: 0.25rem; }
.s-casestudy-bento__tag {
  padding: 0.15rem 0.5rem; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: var(--fw-semi);
  background: color-mix(in oklab, var(--c-bg) 82%, transparent); border: 1px solid var(--c-hairline); color: var(--c-text);
}
.s-casestudy-bento__copy { padding: var(--sp-sm) var(--sp-md) var(--sp-md); display: flex; flex-direction: column; gap: 0.25rem; }
.s-casestudy-bento__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-md); font-weight: var(--fw-display); line-height: 1.2; }
.s-casestudy-bento__tile--featured .s-casestudy-bento__title { font-size: var(--fs-xl); }
.s-casestudy-bento__summary { margin: 0; font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.45; }
.s-casestudy-bento__link { margin-top: auto; font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--c-accent); }
.s-casestudy-media--video .s-casestudy-bento__visual::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, color-mix(in oklab, var(--c-text) 35%, transparent));
}
.s-casestudy-media--story { /* default story tile — no overlay */ }
@media (max-width: 52rem) {
  .s-casestudy-bento { grid-template-columns: minmax(0, 1fr); }
  .s-casestudy-bento__tile--featured { grid-column: span 1; grid-row: span 1; }
}

.s-cta__actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-xs);
  grid-column: 2; grid-row: 1 / -1;
  justify-content: flex-end; align-self: center;
}
@media (max-width: 60rem) {
  .s-cta__actions { grid-column: 1; grid-row: auto; justify-content: flex-start; }
}

.s-marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  padding-block: var(--sp-sm);
}
.s-marquee__track {
  display: flex; align-items: center; gap: var(--sp-md); width: max-content;
  animation: s-marquee 38s linear infinite;
}
.s-marquee__item {
  flex: 0 0 auto; font-size: var(--fs-sm); font-weight: var(--fw-medium); letter-spacing: 0;
  font-family: var(--font-mono); color: var(--c-muted); white-space: nowrap;
}
.s-marquee__sep { flex: 0 0 auto; opacity: 0.45; color: var(--c-muted); font-size: var(--fs-sm); }
@keyframes s-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .s-marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}

.s-product {
  display: flex; flex-direction: column; gap: var(--sp-xs); text-decoration: none; color: inherit;
}
.s-product--link { transition: transform var(--dur-fast) var(--ease); }
.s-product--link:hover { transform: translateY(-2px); }
.s-product__media { position: relative; }
.s-product__img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.s-product__badge {
  position: absolute; top: var(--sp-2xs); left: var(--sp-2xs);
  padding: 0.25rem 0.55rem; border-radius: var(--radius-sm);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0; font-family: var(--font-mono);
  background: var(--c-bg); color: var(--c-text); border: 1px solid var(--c-hairline);
}
.s-product__meta { display: flex; flex-direction: column; gap: 0.35rem; }
.s-product__rating { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--c-accent); }
.s-product__title {
  margin: 0; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-display);
  letter-spacing: -0.02em; line-height: 1.15;
}
.s-product__subtitle { margin: 0; font-size: var(--fs-sm); color: var(--c-muted); }
.s-product__tags {
  margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem;
  font-size: var(--fs-xs); color: var(--c-muted);
}
.s-product__tags li::before { content: "· "; opacity: 0.5; }
.s-product__tags li:first-child::before { content: ""; }
.s-product__price { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semi); letter-spacing: -0.02em; }
.s-product__link { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-accent); }
.s-products .s-product { height: 100%; }

/* Tiles are a data display, so the value leads and the label follows -- the
   inverted order that every well-made metric strip uses. */
.s-tile {
  display: flex; flex-direction: column; gap: var(--sp-3xs); padding: var(--sp-md) 0 0;
  border-radius: 0; border: 0; border-top: 1px solid var(--c-hairline);
  background: none;
  transition: border-color var(--dur-fast) var(--ease);
}
.s-tile:hover { border-top-color: var(--c-accent); }
.s-tile__title {
  order: 2; margin: 0; font-family: var(--font-body); font-size: var(--fs-sm);
  font-weight: var(--fw-medium); letter-spacing: var(--tracking-body);
}
.s-tile__subtitle {
  order: 3; margin: 0; font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.45;
}
.s-tile__value {
  order: 1; margin: 0 0 var(--sp-2xs);
  font-family: var(--font-display); font-size: var(--fs-2xl);
  font-weight: var(--fw-display); letter-spacing: var(--tracking-display);
  line-height: 1; color: var(--c-text);
  font-variant-numeric: tabular-nums lining-nums;
}
.s-tiles .s-tile { height: 100%; }

.s-compare {
  display: grid; gap: var(--sp-md);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.s-compare__pane {
  display: flex; flex-direction: column; gap: var(--sp-sm);
  padding: var(--sp-md); border-radius: var(--radius);
  border: 0; background: var(--c-tint-2);
  box-shadow: inset 0 0 0 1px var(--c-hairline-soft);
}
.s-compare__pane--before {
  background: var(--c-tint-3);
  color: color-mix(in oklab, var(--c-text) 74%, transparent);
}
.s-compare__pane--after {
  background: var(--c-bg);
  box-shadow:
    inset 0 1px 0 0 var(--c-rim),
    0 0 0 1px color-mix(in oklab, var(--c-primary) 22%, transparent),
    var(--shadow-md);
}
.s-compare__label {
  margin: 0; font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0;
  font-family: var(--font-mono); color: var(--c-muted);
}
.s-compare__pane--after .s-compare__label { color: var(--c-accent); }
.s-compare__title {
  margin: 0; font-family: var(--font-display); font-size: var(--fs-xl);
  font-weight: var(--fw-display); letter-spacing: -0.025em; line-height: 1.12;
}
.s-compare__body { margin: 0; color: var(--c-muted); line-height: 1.55; font-size: var(--fs-sm); }
.s-compare__img { width: 100%; margin-top: var(--sp-2xs); border-radius: var(--radius-sm); }
@media (max-width: 52rem) {
  .s-compare { grid-template-columns: minmax(0, 1fr); }
}

.s-footer__contact { display: flex; flex-direction: column; gap: 0.25rem; margin-top: var(--sp-xs); }
.s-footer__contact-line { margin: 0; font-size: var(--fs-sm); color: var(--c-muted); }
.s-footer__social { display: flex; gap: var(--sp-sm); flex-wrap: wrap; margin-top: var(--sp-xs); font-size: var(--fs-sm); }

.s-lead { max-width: 36rem; margin-inline: auto; width: 100%; }

/* Numbers read as evidence when they are aligned to a rule and set in
   lining figures; centred in a row they read as a brochure. */
.s-stats { text-align: start; }
.s-stat {
  display: flex; flex-direction: column; gap: var(--sp-3xs);
  padding-top: var(--sp-sm);
  border-top: 1px solid var(--c-hairline);
}
.s-stat__value {
  font-family: var(--font-display);
  font-size: var(--fs-2xl); font-weight: var(--fw-display);
  line-height: 1; letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums lining-nums;
}
.s-stat__label {
  color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.4;
  max-width: 22ch;
}

/* A grid matrix, not a centred wrap. auto-fill rather than auto-fit so the
   cells keep their width instead of stretching to absorb a short final row --
   stretched cells are what make a ragged row look like a mistake. */
.s-logos {
  display: grid;
  /* auto-fit, not auto-fill: with four marks in a wide container auto-fill
     left eight tracks, four of them empty, and the marks clustered in the
     left half. auto-fit collapses the empty tracks so the set spans the band
     it was given. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 0;
  /* Both rules belong to the container. As a per-item border-block-end the
     lower rule stopped under the last filled cell, so it ran half the width
     of the rule above it and read as a rendering error. */
  border-block: 1px solid var(--c-hairline);
}

.s-logos__line { display: inline-flex; align-items: baseline; gap: 0.15rem; }
/* Customer names are proper nouns. Setting them in wide-tracked uppercase
   makes every logo wall on the internet look like the same logo wall. */
.s-logos__item {
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: var(--sp-sm) var(--sp-md) var(--sp-sm) 0;
  font-family: var(--font-body); font-size: var(--fs-md); font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-body);
  color: var(--c-text);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}
/* Only the linked entries respond to the pointer. A name with no href that
   lights up on hover is a lie about what is clickable. */
a.s-logos__item:hover { color: var(--c-accent); }
.s-logos__tag {
  display: block; margin-top: 0.1rem;
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-body);
  letter-spacing: 0; color: color-mix(in oklab, var(--c-muted) 70%, transparent);
}
.s-quotes-scroll {
  display: flex; gap: var(--sp-md); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--sp-xs); -webkit-overflow-scrolling: touch;
}
.s-quotes-scroll .s-quote { flex: 0 0 min(22rem, 84vw); scroll-snap-align: start; }

/* Plans sit in one shared frame divided by hairlines, with the featured plan
   lifted out of it. Three identical bordered boxes side by side is the
   canonical "three cards in a row" composition; making the recommended plan
   the only object with elevation is what tells the eye where to go. */
.s-plan {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-sm);
  padding: var(--sp-md); background: transparent;
  border: 0; border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--c-hairline);
  transition: box-shadow var(--dur-medium) var(--ease-enter),
              background-color var(--dur-fast) var(--ease),
              transform var(--dur-medium) var(--ease-enter);
}
.s-plan:hover { box-shadow: inset 0 0 0 1px var(--c-hairline-strong); }
.s-plan--featured {
  background: var(--c-bg);
  transform: translateY(-6px);
  box-shadow:
    inset 0 1px 0 0 var(--c-rim),
    0 0 0 1px color-mix(in oklab, var(--c-primary) 26%, transparent),
    var(--shadow-lg);
}
.s-plan--featured:hover {
  box-shadow:
    inset 0 1px 0 0 var(--c-rim),
    0 0 0 1px color-mix(in oklab, var(--c-primary) 40%, transparent),
    var(--shadow-lg);
}
.s-plan__flag {
  position: absolute; top: 0; inset-inline-start: var(--sp-md); transform: translateY(-50%);
  padding: 4px 12px; border-radius: var(--radius-pill);
  background: var(--c-primary); color: var(--c-primary-fg);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  font-weight: var(--fw-medium); letter-spacing: 0;
  box-shadow: 0 0 0 4px var(--c-bg);
}
.s-plan__name {
  margin: 0; font-family: var(--font-mono); font-size: var(--fs-xs);
  font-weight: var(--fw-medium); color: var(--c-accent); letter-spacing: 0;
}
.s-plan__price {
  display: flex; align-items: baseline; gap: 0.25em;
  font-family: var(--font-display); font-size: var(--fs-2xl);
  font-weight: var(--fw-display); line-height: 1;
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums lining-nums;
}
.s-plan__period { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: var(--fw-body); color: var(--c-muted); letter-spacing: 0; }
.s-plan__features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-xs); flex: 1; font-size: var(--fs-sm); }
.s-plan__feature { display: flex; align-items: flex-start; gap: var(--sp-3xs); color: var(--c-muted); }
.s-plan__feature .s-icon { margin-top: 0.22em; color: var(--c-success); }
.s-plan__feature--excluded { text-decoration: line-through; opacity: 0.72; }
.s-plan__feature--excluded .s-icon { color: var(--c-muted); }
.s-plan__footnote, .s-block__footnote { margin: var(--sp-sm) 0 0; font-size: var(--fs-xs); color: var(--c-muted); }
.s-faq__heading { margin: 0 0 var(--sp-xs); font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-display); letter-spacing: -0.016em; }
.s-features--uniform { /* default equal columns */ }
.s-features--bento .s-feature:first-child { grid-column: span 2; grid-row: span 2; }

/* A stack of individually bordered rounded boxes is a list pretending to be
   cards. Hairline rows are the reference-documentation convention and they
   are what Stripe, Linear and Vercel all actually ship. */
.s-faq { display: flex; flex-direction: column; width: 100%; }
.s-faq__item {
  border-top: 1px solid var(--c-hairline);
  background: transparent;
  transition: background-color var(--dur-fast) var(--ease);
}
.s-faq__item:last-child { border-bottom: 1px solid var(--c-hairline); }
.s-faq__item[open] { background: var(--c-tint-1); }
.s-faq__q {
  padding: var(--sp-sm) var(--sp-2xs); cursor: pointer;
  font-weight: var(--fw-medium); font-size: var(--fs-md);
  list-style: none; display: flex; align-items: baseline;
  justify-content: space-between; gap: var(--sp-md);
}
.s-faq__q::-webkit-details-marker { display: none; }
/* A chevron that rotates to point at the answer it just revealed, rather than
   a plus turning into a cross. The rotation direction is the disclosure
   direction, which is the physical-metaphor rule applied to a detail. */
.s-faq__q::after {
  content: "";
  flex: 0 0 auto; align-self: center;
  width: 0.5em; height: 0.5em;
  border-right: 1.5px solid var(--c-muted);
  border-bottom: 1.5px solid var(--c-muted);
  transform: rotate(45deg) translate(-0.1em, -0.1em);
  transition: transform var(--dur-fast) var(--ease-enter), border-color var(--dur-fast) var(--ease);
}
.s-faq__item[open] .s-faq__q::after {
  transform: rotate(-135deg) translate(-0.1em, -0.1em);
  border-color: var(--c-accent);
}
.s-faq__q:hover::after { border-color: var(--c-text); }
.s-faq__a {
  margin: 0; padding: 0 var(--sp-md) var(--sp-md) var(--sp-2xs);
  color: var(--c-muted); max-width: 68ch; line-height: 1.6;
}

/* A pull quote is typography, not a card. The rule on the inline start is
   the oldest convention in editorial design and it costs one line of CSS. */
.s-quote {
  margin: 0; display: flex; flex-direction: column; gap: var(--sp-sm);
  padding: 0 0 0 var(--sp-md);
  border-inline-start: 2px solid var(--c-accent);
  background: none; border-radius: 0; height: 100%;
}
.s-quote__text {
  margin: 0; font-family: var(--font-display); font-size: var(--fs-lg);
  font-weight: var(--fw-display); line-height: 1.35;
  letter-spacing: var(--tracking-display); text-wrap: pretty;
  /* Hanging punctuation pulls the opening quote mark into the margin so the
     first character of actual text aligns with the rule. */
  hanging-punctuation: first last;
}
.s-quote__by { display: flex; align-items: center; gap: var(--sp-xs); margin-top: auto; width: 100%; }
.s-quote__author { font-weight: var(--fw-medium); font-size: var(--fs-sm); }
.s-quote__role { font-size: var(--fs-sm); color: var(--c-muted); }
.s-quote__company { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.s-quote__stars { margin-bottom: var(--sp-2xs); }
.s-quote__logo { width: auto; height: 1.35rem; max-width: 6rem; margin-inline-start: auto; background: none; }

/* The closing block is the one place a page should stop being symmetrical
   about its own axis: copy on the left holding the argument, actions on the
   right holding the decision. The radial wash behind it is gone. */
.s-cta {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-md) var(--sp-lg);
  text-align: start;
  padding: var(--sp-lg) var(--sp-md);
  border: 0; border-radius: var(--radius-lg);
  background: var(--c-tint-2);
  box-shadow: inset 0 0 0 1px var(--c-hairline-soft);
}
.s-cta > .s-eyebrow, .s-cta > .s-cta__title, .s-cta > .s-cta__body { grid-column: 1; }
.s-cta__title {
  margin: 0; font-family: var(--font-display); font-size: var(--fs-2xl);
  font-weight: var(--fw-display); line-height: 1.06;
  letter-spacing: var(--tracking-display); text-wrap: balance;
}
.s-cta__body { margin: 0; max-width: 46ch; color: var(--c-muted); font-size: var(--fs-md); }
@media (max-width: 60rem) {
  .s-cta { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- forms ---------- */
.s-form { display: flex; flex-direction: column; gap: var(--sp-sm); width: 100%; max-width: 34rem; }
.s-form--auth { margin-inline: auto; padding: var(--sp-md); border: 1px solid var(--c-hairline); border-radius: var(--radius); background: var(--c-bg); box-shadow: var(--shadow-sm); }
.s-form__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-display); letter-spacing: -0.022em; }
.s-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.s-field--inline { flex-direction: row; align-items: center; gap: var(--sp-xs); }
.s-field__label { font-size: var(--fs-sm); font-weight: var(--fw-medium); letter-spacing: var(--tracking-body); }
.s-field__hint { margin: 0; font-size: var(--fs-xs); color: var(--c-muted); }
.s-field__error { margin: 0; font-size: var(--fs-xs); color: var(--c-danger); font-weight: var(--fw-semi); }
.s-field--invalid .s-field__label { color: var(--c-danger); }
.s-input--invalid, .s-input.s-input--invalid:focus {
  border-color: var(--c-danger);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--c-danger) 22%, transparent);
}
.s-input--search { padding-inline-start: 2.4rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235b6672' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l3.5 3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 0.85rem 50%; }

/* Inputs keep a stated border -- a field is one of the few places a boundary
   is genuinely load-bearing -- but they get an inset top shadow so the well
   reads as recessed, which is the inverse of the raised primary button. */
.s-input {
  font: inherit; color: inherit; width: 100%; min-height: var(--tap);
  padding: 10px 14px; border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  background: var(--c-bg);
  box-shadow: inset 0 1px 2px color-mix(in oklab, var(--c-text) 5%, transparent);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.s-input::placeholder { color: color-mix(in oklab, var(--c-muted) 62%, transparent); }
.s-input:hover { border-color: var(--c-border-strong); }
.s-input:focus {
  outline: none; border-color: var(--c-primary);
  box-shadow:
    inset 0 1px 2px color-mix(in oklab, var(--c-text) 4%, transparent),
    0 0 0 3px var(--c-primary-ring);
}
.s-input--area { resize: vertical; min-height: 6rem; line-height: 1.55; }
.s-checkbox { width: 1.15rem; height: 1.15rem; accent-color: var(--c-primary); flex: 0 0 auto; }

/* ---------- data ---------- */
.s-table-wrap {
  width: 100%; overflow-x: auto; border: 0; border-radius: var(--radius);
  background: var(--c-bg);
  box-shadow: inset 0 0 0 1px var(--c-hairline);
}
.s-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.s-table__caption { text-align: start; padding: var(--sp-sm) var(--sp-md) 0; color: var(--c-muted); caption-side: top; }
.s-table th, .s-table td { padding: 12px 16px; text-align: start; }
.s-table th {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  font-weight: var(--fw-medium); letter-spacing: 0;
  color: var(--c-muted); background: var(--c-tint-2);
  border-bottom: 1px solid var(--c-hairline);
  position: sticky; top: 0; z-index: 1;
}
.s-table-panel { display: flex; flex-direction: column; gap: var(--sp-sm); width: 100%; }
.s-pager { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-xs); flex-wrap: wrap; }
.s-pager__status { font-size: var(--fs-sm); color: var(--c-muted); min-width: 4.5rem; text-align: center; }
.s-table tbody tr {
  border-bottom: 1px solid var(--c-hairline-soft);
  transition: background-color 80ms var(--ease);
}
.s-table tbody tr:last-child { border-bottom: 0; }
.s-table tbody tr:hover { background: var(--c-tint-2); }
.s-table th.s-text-end, .s-table td.s-text-end { text-align: end; }
.s-table__empty {
  padding: var(--sp-lg) var(--sp-md) !important;
  text-align: center; color: var(--c-muted); background: var(--c-surface);
}
.s-table__empty.s-empty--error { color: var(--c-danger); }

.s-repeat { display: flex; flex-direction: column; gap: var(--sp-sm); }
.s-repeat__item { min-width: 0; }
.s-repeat__empty {
  padding: var(--sp-lg); text-align: center; color: var(--c-muted);
  border: 1px dashed var(--c-border); border-radius: var(--radius); background: var(--c-surface);
}
.s-repeat__empty.s-empty--error { border-style: solid; border-color: color-mix(in oklab, var(--c-danger) 35%, transparent); color: var(--c-danger); }

.s-alert { display: flex; align-items: flex-start; gap: var(--sp-xs); padding: var(--sp-sm) var(--sp-md); border-radius: var(--radius-sm); border: 1px solid var(--c-border); font-size: var(--fs-sm); }
.s-alert--info { background: var(--c-surface); }
.s-alert--success { background: color-mix(in oklab, var(--c-success) 8%, var(--c-bg)); border-color: color-mix(in oklab, var(--c-success) 32%, transparent); color: var(--c-success); }
.s-alert--warning { background: color-mix(in oklab, var(--c-warning) 8%, var(--c-bg)); border-color: color-mix(in oklab, var(--c-warning) 32%, transparent); color: var(--c-warning); }
.s-alert--danger { background: color-mix(in oklab, var(--c-danger) 8%, var(--c-bg)); border-color: color-mix(in oklab, var(--c-danger) 32%, transparent); color: var(--c-danger); }

/* ---------- app chrome ---------- */
.s-appshell {
  min-height: 100dvh; display: flex; flex-direction: column;
}
.s-appshell > .s-nav, .s-appshell > .s-footer { flex: 0 0 auto; }
.s-appshell > .s-section, .s-appshell > .s-appshell__body { flex: 1 1 auto; }

.s-breadcrumb { font-size: var(--fs-sm); }
.s-breadcrumb__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 0.55rem; align-items: center; }
.s-breadcrumb__item { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--c-muted); }
.s-breadcrumb__item:not(:last-child)::after { content: "/"; color: color-mix(in oklab, var(--c-muted) 70%, transparent); }
.s-breadcrumb__link { color: var(--c-muted); }
.s-breadcrumb__link:hover { color: var(--c-text); }
.s-breadcrumb__current { color: var(--c-text); font-weight: var(--fw-medium); }

/* A callout is an aside, so it takes an inline rule in the relevant tone
   rather than a full box. Four tones then differ by colour on one edge
   instead of by four near-identical rounded rectangles. */
.s-callout {
  display: flex; flex-direction: column; gap: 0.35rem;
  padding: var(--sp-sm) var(--sp-md); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  border: 0; border-inline-start: 2px solid var(--c-hairline-strong);
  background: var(--c-tint-2);
}
.s-callout__title { margin: 0; font-weight: var(--fw-semi); font-size: var(--fs-sm); }
.s-callout__body { margin: 0; font-size: var(--fs-sm); color: var(--c-muted); }
.s-callout--info { border-inline-start-color: var(--c-primary); }
.s-callout--success { border-inline-start-color: var(--c-success); }
.s-callout--warning { border-inline-start-color: var(--c-warning); }
.s-callout--danger { border-inline-start-color: var(--c-danger); }

.s-prose { max-width: 42rem; display: flex; flex-direction: column; gap: var(--sp-sm); }
.s-prose--narrow { max-width: 34rem; }
.s-prose--normal { max-width: 42rem; }
.s-prose--wide { max-width: 52rem; }
.s-prose .s-text, .s-prose p { line-height: 1.65; text-wrap: pretty; }

.s-toast {
  animation: s-toast-in var(--dur-medium) var(--ease-enter) both;
  position: fixed; z-index: 80; max-width: min(24rem, calc(100vw - 2rem));
  padding: var(--sp-sm) var(--sp-md); border-radius: var(--radius-sm);
  border: 1px solid var(--c-border); background: var(--c-bg); box-shadow: var(--shadow-lg);
  font-size: var(--fs-sm);
}
.s-toast--bottom_end { inset-inline-end: var(--sp-md); bottom: var(--sp-md); }
.s-toast--bottom_start { inset-inline-start: var(--sp-md); bottom: var(--sp-md); }
.s-toast--top_end { inset-inline-end: var(--sp-md); top: calc(var(--sp-md) + 3rem); }
.s-toast--success { border-color: color-mix(in oklab, var(--c-success) 32%, transparent); color: var(--c-success); }
.s-toast--warning { border-color: color-mix(in oklab, var(--c-warning) 32%, transparent); color: var(--c-warning); }
.s-toast--danger { border-color: color-mix(in oklab, var(--c-danger) 32%, transparent); color: var(--c-danger); }
.s-toast--info { color: var(--c-text); }

.s-modal {
  border: 0; padding: 0; max-width: min(28rem, calc(100vw - 2rem));
  border-radius: var(--radius); background: var(--c-bg); color: var(--c-text);
  box-shadow: var(--shadow-lg);
}
.s-modal--dialog, .s-modal--confirm { /* kind hooks for authors / tests */ }
.s-modal::backdrop {
  background: color-mix(in oklab, var(--c-text) 38%, transparent);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.s-modal[open] { animation: s-modal-in var(--dur-medium) var(--ease-enter) both; }
@keyframes s-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
/* A toast anchored to the bottom edge enters from the bottom edge. */
@keyframes s-toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .s-modal[open], .s-toast { animation: none; }
}
.s-modal__panel { display: flex; flex-direction: column; gap: var(--sp-sm); padding: var(--sp-md); }
.s-modal__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-xl); letter-spacing: -0.02em; }
.s-modal__actions { display: flex; justify-content: flex-end; gap: var(--sp-xs); flex-wrap: wrap; }

/* ---------- loading ---------- */
.s-skel { display: flex; flex-direction: column; gap: var(--sp-xs); width: 100%; }
.s-skel--grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-md); }
.s-skel__bar { height: 0.9rem; border-radius: var(--radius-sm); background: var(--c-surface); position: relative; overflow: hidden; }
.s-skel__bar:nth-child(3n) { width: 72%; }
.s-skel--line .s-skel__bar { height: 1.6rem; width: 45%; }
.s-skel--block .s-skel__bar { height: 14rem; width: 100%; }
.s-skel--hero .s-skel__bar:first-child { height: 3.5rem; width: 80%; }
.s-skel--card .s-skel__bar:first-child { height: 1.8rem; width: 55%; }
.s-skel--list .s-skel__bar { height: 2.2rem; width: 100%; }
.s-skel--table .s-skel__bar { height: 2.6rem; width: 100%; }
.s-skel--grid .s-skel__bar { height: 9rem; width: 100%; }
.s-skel--shimmer .s-skel__bar { background: color-mix(in oklab, var(--c-surface) 70%, var(--c-border)); }
.s-skel__bar::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--c-veil), transparent);
  animation: s-shimmer 1.6s infinite;
}
.s-spinner { width: 1.75rem; height: 1.75rem; border-radius: var(--radius-pill); border: 3px solid var(--c-border); border-top-color: var(--c-primary); animation: s-spin 720ms linear infinite; }
@keyframes s-spin { to { transform: rotate(360deg); } }

/* ---------- motion ---------- */
.s-anim {
  animation-duration: var(--anim-dur, var(--dur-medium));
  animation-delay: var(--anim-delay, 0ms);
  animation-fill-mode: both;
  /* Entrances decelerate. Nothing on a page should arrive at constant speed
     or accelerate towards its resting position. */
  animation-timing-function: var(--ease-enter);
  will-change: opacity, transform;
}
.s-anim[data-anim^="fade:"] { animation-name: s-fade; }
.s-anim[data-anim^="fade-up:"] { animation-name: s-fade-up; }
.s-anim[data-anim^="fade-down:"] { animation-name: s-fade-down; }
.s-anim[data-anim^="scale:"] { animation-name: s-scale; }
.s-anim[data-anim^="slide-left:"] { animation-name: s-slide-left; }
.s-anim[data-anim^="slide-right:"] { animation-name: s-slide-right; }
.s-anim[data-anim^="blur-in:"] { animation-name: s-blur-in; }
.s-anim[data-anim$=":scroll"] { animation-play-state: paused; opacity: 0; }
.s-anim[data-anim$=":scroll"].is-in { animation-play-state: running; opacity: 1; }

/* Entrance distances cut by roughly two thirds. A 28px translate reads as an
   element being thrown onto the page; 10px reads as it settling, which is
   what the eye accepts as "already there, just arriving". The opacity curve
   also finishes ahead of the transform so text is readable before it stops
   moving. */
@keyframes s-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes s-fade-up {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  60% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
@keyframes s-fade-down {
  from { opacity: 0; transform: translate3d(0, -10px, 0); }
  60% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
@keyframes s-scale { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes s-slide-left {
  from { opacity: 0; transform: translate3d(14px, 0, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes s-slide-right {
  from { opacity: 0; transform: translate3d(-14px, 0, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes s-blur-in {
  from { opacity: 0; filter: blur(6px); transform: scale(1.006); }
  to { opacity: 1; filter: none; transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 60rem) {
  .s-grid--3, .s-grid--4, .s-grid--5, .s-grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-hero--split { grid-template-columns: minmax(0, 1fr); }
  .s-skel--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .s-grid--2, .s-grid--3, .s-grid--4, .s-grid--5, .s-grid--6 { grid-template-columns: minmax(0, 1fr); }
  .s-skel--grid { grid-template-columns: minmax(0, 1fr); }
  html:has(.s-nav__check:checked) { overflow: hidden; }
  .s-nav--menu:has(.s-nav__check:checked) {
    position: fixed; inset: 0; z-index: 100;
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--c-bg);
  }
  .s-nav--menu:has(.s-nav__check:checked) .s-nav__inner {
    flex: 1; min-height: 0; flex-direction: column; flex-wrap: nowrap; overflow: hidden;
  }
  .s-nav--menu .s-nav__inner { flex-wrap: wrap; }
  .s-nav--menu .s-nav__toggle { display: inline-flex; }
  .s-nav--menu .s-nav__drawer { display: none; }
  .s-nav--menu .s-nav__check:checked ~ .s-nav__drawer {
    display: flex; flex-direction: column; width: 100%; flex: 1 1 auto; min-height: 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    padding-block: var(--sp-xs); gap: var(--sp-xs);
  }
  .s-nav--menu .s-nav__drawer .s-nav__links {
    display: flex; width: 100%; flex: 0 0 auto; flex-direction: column; align-items: stretch;
    margin-inline-start: 0; padding-block: 0; justify-content: flex-start;
  }
  .s-nav--menu .s-nav__drawer .s-nav__utility {
    display: flex; width: 100%; flex: 0 0 auto; flex-direction: column; align-items: stretch;
    margin-inline-start: 0; gap: var(--sp-xs); padding-block: 0;
  }
  .s-nav--menu .s-nav__check:checked ~ .s-nav__toggle {
    border-color: var(--c-primary); color: var(--c-primary); background: var(--c-primary-tint);
  }
  .s-nav--menu .s-nav__drawer .s-nav-panel {
    display: block; position: static; min-width: 0; box-shadow: none; margin-top: var(--sp-2xs);
  }
  .s-nav-panel__cols--2, .s-nav-panel__cols--3, .s-nav-panel__cols--4 { grid-template-columns: minmax(0, 1fr); }
  .s-nav--none .s-nav__links { gap: var(--sp-sm); }
  .s-footer__inner { justify-content: flex-start; }
  .s-hero--full_bleed { min-height: min(70vh, 34rem); }
  .s-features--bento .s-feature:first-child { grid-column: auto; grid-row: auto; }
}

/* ==========================================================================
   Added components. Everything below is reachable only when a spec asks for
   it: no existing default routes here.
   ========================================================================== */

/* ---------- stars + rating ---------- */
.s-stars { display: inline-flex; align-items: center; gap: 0.12em; }
.s-star {
  width: 0.92em; height: 0.92em; flex: 0 0 auto;
  background: currentColor;
  /* One clip-path, three fill states. Drawing the star rather than typing a
     glyph keeps its weight independent of whichever face the spec chose, and
     makes a half star possible at all. */
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.s-star--full { color: var(--c-accent); }
.s-star--half {
  color: var(--c-accent);
  background: linear-gradient(90deg, currentColor 50%, color-mix(in oklab, currentColor 22%, transparent) 50%);
}
.s-star--empty { color: color-mix(in oklab, var(--c-muted) 32%, transparent); }

.s-rating {
  display: inline-flex; align-items: center; gap: 0.6rem;
  color: inherit; text-decoration: none;
  font-size: var(--fs-sm);
}
.s-rating--badge {
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-pill);
  background: var(--c-tint-2);
  box-shadow: inset 0 0 0 1px var(--c-hairline);
}
a.s-rating--badge:hover { box-shadow: inset 0 0 0 1px var(--c-hairline-strong); }
.s-rating__logo { width: auto; height: 1.5rem; flex: 0 0 auto; background: none; }
.s-rating__source { font-weight: var(--fw-medium); }
.s-rating__score {
  font-family: var(--font-display); font-weight: var(--fw-display);
  font-size: var(--fs-md); line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
}
.s-rating__count,
.s-rating__note { color: var(--c-muted); font-size: var(--fs-xs); }
.s-rating__count::before {
  content: ""; display: inline-block;
  width: 1px; height: 0.9em; margin-inline-end: 0.6rem;
  background: var(--c-hairline-strong); vertical-align: -0.1em;
}

/* ---------- article index ---------- */
.s-articles--list { display: flex; flex-direction: column; border-top: 1px solid var(--c-hairline); }
.s-articles--list .s-article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline; gap: var(--sp-xs) var(--sp-md);
  padding: var(--sp-sm) 0;
  border-bottom: 1px solid var(--c-hairline);
  text-decoration: none; color: inherit;
  transition: background-color var(--dur-fast) var(--ease);
}
.s-articles--list .s-article__meta { grid-column: 2; grid-row: 1; justify-content: flex-end; }
.s-articles--list .s-article__title { grid-column: 1; grid-row: 1; }
.s-articles--list .s-article__excerpt { grid-column: 1 / -1; }
.s-articles--grid, .s-articles--feature {
  display: grid; gap: var(--sp-md);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.s-articles--grid .s-article, .s-articles--feature .s-article {
  display: flex; flex-direction: column; gap: var(--sp-2xs);
  text-decoration: none; color: inherit;
}
/* The lead story takes the full width and sets its headline larger. A feature
   layout where every card is the same size is not a feature layout. */
.s-articles--feature .s-article--lead { grid-column: 1 / -1; }
.s-articles--feature .s-article--lead .s-article__title { font-size: var(--fs-xl); }
.s-articles--feature .s-article--lead .s-article__img { aspect-ratio: 21/9; }
.s-article__img { width: 100%; aspect-ratio: 16/10; object-fit: cover; margin-bottom: var(--sp-2xs); }
.s-article__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-muted);
}
.s-article__category { color: var(--c-accent); }
.s-article__date::before, .s-article__read::before {
  content: "\00b7"; margin-inline-end: 0.5rem; opacity: 0.6;
}
.s-article__title {
  margin: 0; font-family: var(--font-display); font-size: var(--fs-lg);
  font-weight: var(--fw-display); line-height: 1.2;
  letter-spacing: var(--tracking-display); text-wrap: balance;
  transition: color var(--dur-fast) var(--ease);
}
.s-article:hover .s-article__title { color: var(--c-accent); }
.s-article__excerpt { margin: 0; color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.55; max-width: 62ch; }

/* ---------- bento ---------- */
.s-bento {
  display: grid; gap: var(--sp-sm);
  grid-auto-rows: minmax(11rem, auto);
}
.s-bento--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.s-bento--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.s-bento--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Named footprints rather than raw spans. Every combination still tiles,
   which is what stops a bento grid developing holes. */
.s-bento--sm { grid-column: span 1; grid-row: span 1; }
.s-bento--wide { grid-column: span 2; grid-row: span 1; }
.s-bento--tall { grid-column: span 1; grid-row: span 2; }
.s-bento--lg { grid-column: span 2; grid-row: span 2; }
.s-bento__tile {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--sp-sm); padding: var(--sp-md); min-width: 0;
  border-radius: var(--radius);
  background: var(--c-tint-2);
  box-shadow: inset 0 0 0 1px var(--c-hairline-soft);
  text-decoration: none; color: inherit; overflow: hidden;
  transition: box-shadow var(--dur-medium) var(--ease-enter),
              transform var(--dur-medium) var(--ease-enter);
}
a.s-bento__tile:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px var(--c-hairline), var(--shadow-md);
}
.s-bento-tone--tinted { background: var(--c-tint-3); }
.s-bento-tone--accent {
  background: color-mix(in oklab, var(--c-accent) 10%, var(--c-bg));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c-accent) 26%, transparent);
}
.s-bento-tone--inverted {
  background: color-mix(in oklab, var(--c-text) 92%, var(--c-primary));
  color: var(--c-bg);
  box-shadow: none;
}
.s-bento-tone--inverted .s-bento__body,
.s-bento-tone--inverted .s-bento__label { color: color-mix(in oklab, var(--c-bg) 74%, transparent); }
.s-bento-tone--inverted .s-bento__eyebrow,
.s-bento-tone--inverted .s-bento__link { color: color-mix(in oklab, var(--c-bg) 88%, transparent); }
.s-bento__head { display: flex; flex-direction: column; gap: var(--sp-2xs); min-width: 0; }
.s-bento__icon { display: block; width: 1.35rem; height: 1.35rem; color: var(--c-accent); }
.s-bento__eyebrow {
  margin: 0; font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--c-accent); letter-spacing: 0;
}
.s-bento__value {
  margin: 0; font-family: var(--font-display); font-size: var(--fs-2xl);
  font-weight: var(--fw-display); line-height: 1;
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums lining-nums;
}
.s-bento__label { margin: 0; font-size: var(--fs-sm); color: var(--c-muted); }
.s-bento__title {
  margin: 0; font-family: var(--font-display); font-size: var(--fs-lg);
  font-weight: var(--fw-display); line-height: 1.2;
  letter-spacing: var(--tracking-display);
}
.s-bento--lg .s-bento__title, .s-bento--wide .s-bento__title { font-size: var(--fs-xl); }
.s-bento__body { margin: 0; color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.55; }
.s-bento__link {
  margin-top: auto; font-size: var(--fs-sm); font-weight: var(--fw-medium);
  display: inline-flex; align-items: center; gap: 0.4em;
}
.s-bento__link::after {
  content: ""; width: 0.85em; height: 0.85em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h10M8.5 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h10M8.5 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;; color: var(--c-accent);
  transition: transform var(--dur-fast) var(--ease-enter);
}
a.s-bento__tile:hover .s-bento__link::after { transform: translateX(0.22em); }
.s-bento__media { margin: 0 calc(var(--sp-md) * -1) calc(var(--sp-md) * -1); }
.s-bento__img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }

/* ---------- shared checklist ---------- */
/* One rule for every checklist in the engine. Enumerating caller classes meant
   each new caller had to remember to add itself, and one did not. */
.s-checklist {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.5rem;
  font-size: var(--fs-sm);
}
.s-checklist__item {
  display: flex; align-items: flex-start; gap: 0.55rem;
  color: var(--c-muted); line-height: 1.45;
}
.s-checklist__item::marker { content: ""; }
.s-checklist__check { flex: 0 0 auto; margin-top: 0.2em; color: var(--c-primary); }
.s-bento-tone--inverted .s-bento__bullets-check { color: var(--c-bg); }

/* ---------- logo wall variants ---------- */
.s-logos__name { display: block; }
.s-logos__img {
  width: auto; height: 1.75rem; max-width: 8rem;
  background: none;
  /* Third-party marks arrive in a dozen colours. Desaturating at rest and
     restoring on hover is what keeps a wall from looking like a sticker book,
     without editing anyone's brand asset. */
  filter: grayscale(1); opacity: 0.7;
  transition: filter var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.s-logos__item:hover .s-logos__img { filter: none; opacity: 1; }
.s-logos--row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
  gap: var(--sp-md) var(--sp-lg);
  border-block-start: 0;
}
.s-logos--row .s-logos__item { padding: 0; border-block-end: 0; }
.s-logos--marquee {
  display: block; overflow: hidden; border-block-start: 0;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.s-logos--marquee .s-logos__track {
  display: flex; align-items: center; gap: var(--sp-lg);
  width: max-content; animation: s-marquee 44s linear infinite;
}
.s-logos--marquee .s-logos__item { padding: 0; border-block-end: 0; flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) {
  .s-logos--marquee .s-logos__track { animation: none; flex-wrap: wrap; width: auto; }
}

/* ---------- stat ledger + stat panel ---------- */
.s-ledger {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.s-ledger__row {
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: var(--sp-sm) var(--sp-md) var(--sp-md) 0;
  border-top: 1px solid var(--c-hairline);
}
.s-ledger__label {
  margin: 0; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-muted);
}
.s-ledger__value {
  margin: 0; font-family: var(--font-display); font-size: var(--fs-2xl);
  font-weight: var(--fw-display); line-height: 1;
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums lining-nums;
}
.s-ledger__note {
  margin: 0.35rem 0 0; font-size: var(--fs-sm); color: var(--c-muted);
  line-height: 1.5; max-width: 32ch;
}
.s-stat__note { margin: 0.35rem 0 0; font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.5; }
.s-stats-panel {
  display: grid; gap: var(--sp-lg);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
}
.s-stats-panel__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
@media (max-width: 60rem) {
  .s-stats-panel { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- team variants ---------- */
.s-person__company {
  margin: 0; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-muted);
}
.s-team--carousel {
  display: flex; gap: var(--sp-md); overflow-x: auto;
  scroll-snap-type: x mandatory; padding-bottom: var(--sp-xs);
  -webkit-overflow-scrolling: touch;
}
.s-team--carousel .s-person {
  flex: 0 0 min(20rem, 82vw); scroll-snap-align: start;
  padding: var(--sp-md); border-radius: var(--radius);
  background: var(--c-tint-2);
  box-shadow: inset 0 0 0 1px var(--c-hairline-soft);
  text-decoration: none; color: inherit;
}
.s-team--carousel .s-person__bio {
  order: -1; font-size: var(--fs-md); color: var(--c-text);
  font-family: var(--font-display); font-weight: var(--fw-display);
  line-height: 1.25; letter-spacing: var(--tracking-display); max-width: none;
}
.s-team--roster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 0; }
.s-team--roster .s-person {
  padding: var(--sp-sm) var(--sp-md) var(--sp-sm) 0;
  border-top: 1px solid var(--c-hairline);
  text-decoration: none; color: inherit;
}

/* ---------- case study metric ---------- */
.s-casestudy-bento__logo { width: auto; height: 1.5rem; max-width: 7rem; background: none; margin-bottom: var(--sp-2xs); }
.s-casestudy-bento__metric {
  margin: 0; font-family: var(--font-display); font-size: var(--fs-2xl);
  font-weight: var(--fw-display); line-height: 1;
  letter-spacing: var(--tracking-display); color: var(--c-accent);
  font-variant-numeric: tabular-nums lining-nums;
}
.s-casestudy-bento__metric-label {
  margin: 0 0 var(--sp-2xs); font-size: var(--fs-sm); color: var(--c-muted);
}
/* With a metric present the title steps down: the number is the headline. */
.s-casestudy-bento__copy:has(.s-casestudy-bento__metric) .s-casestudy-bento__title {
  font-size: var(--fs-md);
}

/* ---------- inline lead form ---------- */
.s-lead--inline { max-width: 34rem; }
.s-lead--inline .s-field { flex-direction: row; align-items: center; gap: var(--sp-2xs); }
.s-lead--inline .s-field__label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap;
}
.s-lead--inline .s-form__actions, .s-lead--inline .s-btn { flex: 0 0 auto; }
.s-lead__note { margin: var(--sp-2xs) 0 0; font-size: var(--fs-xs); color: var(--c-muted); }
@media (max-width: 40rem) {
  .s-lead--inline .s-field { flex-direction: column; align-items: stretch; }
}

/* ---------- hero statements + rating ---------- */
.s-hero__statements {
  list-style: none; margin: 0 0 var(--sp-md); padding: 0;
  display: flex; flex-direction: column; gap: 0;
}
.s-hero__statement {
  padding: var(--sp-xs) 0;
  border-top: 1px solid var(--c-hairline);
  font-family: var(--font-display); font-size: var(--fs-lg);
  font-weight: var(--fw-display); line-height: 1.25;
  letter-spacing: var(--tracking-display);
}
.s-hero__statement:last-child { border-bottom: 1px solid var(--c-hairline); }
.s-hero--centered .s-hero__statements, .s-hero--stacked .s-hero__statements { text-align: start; }
.s-hero__rating { margin-top: var(--sp-sm); }

/* ---------- mega-menu promo ---------- */
.s-nav-panel__promo {
  display: flex; flex-direction: column; gap: var(--sp-2xs);
  padding: var(--sp-sm); border-radius: var(--radius-nested);
  background: var(--c-tint-2);
  min-width: 0;
}
.s-nav-panel__promo-img { width: 100%; aspect-ratio: 16/10; object-fit: cover; margin-bottom: var(--sp-2xs); }
.s-nav-panel__promo-heading {
  margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-semi); line-height: 1.3;
}
.s-nav-panel__promo-body { margin: 0; font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.4; }

/* ---------- article filters (pure CSS) ---------- */
.s-articles-shell { position: relative; }
.s-articles__radio { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.s-articles__filters { display: flex; flex-wrap: wrap; gap: var(--sp-2xs); margin-bottom: var(--sp-md); }
.s-articles__filter {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.4rem 0.85rem; border-radius: var(--radius-pill);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--c-hairline);
  transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.s-articles__filter:hover { box-shadow: inset 0 0 0 1px var(--c-hairline-strong); }
.s-articles__count, .s-articles__badge {
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}
.s-articles__badge { color: var(--c-accent); }
/* Selected chip, then the filtering itself. Seven filters is the schema cap,
   so the selector list is bounded and can be written out in full. */
.s-articles__radio:nth-of-type(1):checked ~ .s-articles__filters .s-articles__filter:nth-child(1),
.s-articles__radio:nth-of-type(2):checked ~ .s-articles__filters .s-articles__filter:nth-child(2),
.s-articles__radio:nth-of-type(3):checked ~ .s-articles__filters .s-articles__filter:nth-child(3),
.s-articles__radio:nth-of-type(4):checked ~ .s-articles__filters .s-articles__filter:nth-child(4),
.s-articles__radio:nth-of-type(5):checked ~ .s-articles__filters .s-articles__filter:nth-child(5),
.s-articles__radio:nth-of-type(6):checked ~ .s-articles__filters .s-articles__filter:nth-child(6),
.s-articles__radio:nth-of-type(7):checked ~ .s-articles__filters .s-articles__filter:nth-child(7),
.s-articles__radio:nth-of-type(8):checked ~ .s-articles__filters .s-articles__filter:nth-child(8) {
  background: var(--c-primary-tint);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c-primary) 30%, transparent);
}
/* Filtering. The reveal restores the layout's own display value rather
   than a single one, because list rows are grid and cards are flex. */
.s-articles-shell:has(.s-articles__radio:not(:nth-of-type(1)):checked) .s-article { display: none; }
.s-articles__radio:nth-of-type(2):checked ~ .s-articles--list .s-article--g1,
.s-articles__radio:nth-of-type(3):checked ~ .s-articles--list .s-article--g2,
.s-articles__radio:nth-of-type(4):checked ~ .s-articles--list .s-article--g3,
.s-articles__radio:nth-of-type(5):checked ~ .s-articles--list .s-article--g4,
.s-articles__radio:nth-of-type(6):checked ~ .s-articles--list .s-article--g5,
.s-articles__radio:nth-of-type(7):checked ~ .s-articles--list .s-article--g6,
.s-articles__radio:nth-of-type(8):checked ~ .s-articles--list .s-article--g7 { display: grid; }
.s-articles__radio:nth-of-type(2):checked ~ .s-articles--grid .s-article--g1,
.s-articles__radio:nth-of-type(2):checked ~ .s-articles--feature .s-article--g1,
.s-articles__radio:nth-of-type(3):checked ~ .s-articles--grid .s-article--g2,
.s-articles__radio:nth-of-type(3):checked ~ .s-articles--feature .s-article--g2,
.s-articles__radio:nth-of-type(4):checked ~ .s-articles--grid .s-article--g3,
.s-articles__radio:nth-of-type(4):checked ~ .s-articles--feature .s-article--g3,
.s-articles__radio:nth-of-type(5):checked ~ .s-articles--grid .s-article--g4,
.s-articles__radio:nth-of-type(5):checked ~ .s-articles--feature .s-article--g4,
.s-articles__radio:nth-of-type(6):checked ~ .s-articles--grid .s-article--g5,
.s-articles__radio:nth-of-type(6):checked ~ .s-articles--feature .s-article--g5,
.s-articles__radio:nth-of-type(7):checked ~ .s-articles--grid .s-article--g6,
.s-articles__radio:nth-of-type(7):checked ~ .s-articles--feature .s-article--g6,
.s-articles__radio:nth-of-type(8):checked ~ .s-articles--grid .s-article--g7,
.s-articles__radio:nth-of-type(8):checked ~ .s-articles--feature .s-article--g7 { display: flex; }

/* ---------- pillar tabs + media panel ---------- */
.s-pillars__radio { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.s-pillars--tabbed { position: relative; }
.s-pillars__labels { display: flex; flex-wrap: wrap; gap: var(--sp-2xs); margin-bottom: var(--sp-md); }
.s-pillars__tab {
  padding: 0.5rem 1rem; border-radius: var(--radius-pill);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--c-hairline);
  transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.s-pillars--tabbed .s-pillars__panels > .s-pillar { display: none; }
.s-pillars__radio:nth-of-type(1):checked ~ .s-pillars__labels .s-pillars__tab:nth-child(1),
.s-pillars__radio:nth-of-type(2):checked ~ .s-pillars__labels .s-pillars__tab:nth-child(2),
.s-pillars__radio:nth-of-type(3):checked ~ .s-pillars__labels .s-pillars__tab:nth-child(3),
.s-pillars__radio:nth-of-type(4):checked ~ .s-pillars__labels .s-pillars__tab:nth-child(4) {
  background: var(--c-primary-tint);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c-primary) 30%, transparent);
}
.s-pillars__radio:nth-of-type(1):checked ~ .s-pillars__panels > .s-pillar:nth-child(1),
.s-pillars__radio:nth-of-type(2):checked ~ .s-pillars__panels > .s-pillar:nth-child(2),
.s-pillars__radio:nth-of-type(3):checked ~ .s-pillars__panels > .s-pillar:nth-child(3),
.s-pillars__radio:nth-of-type(4):checked ~ .s-pillars__panels > .s-pillar:nth-child(4) { display: flex; }
.s-pillar__link {
  margin-top: var(--sp-xs); align-self: flex-start;
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-accent);
  display: inline-flex; align-items: center; gap: 0.4em; text-decoration: none;
}
.s-pillar__link::after {
  content: ""; width: 0.85em; height: 0.85em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h10M8.5 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h10M8.5 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;; transition: transform var(--dur-fast) var(--ease-enter);
}
.s-pillar__link:hover::after { transform: translateX(0.22em); }
.s-pillars-panel {
  display: grid; gap: var(--sp-lg);
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: start;
}
.s-pillars-panel__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; position: sticky; top: var(--sp-lg); }
@media (max-width: 62rem) { .s-pillars-panel { grid-template-columns: minmax(0, 1fr); } }

/* ---------- richer tab panels + feature cover art ---------- */
.s-tabshowcase__bullets { margin-top: var(--sp-sm); }
.s-tabshowcase__panel-link { display: inline-flex; margin-top: var(--sp-sm); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-accent); }
.s-tabshowcase__panel-img { width: 100%; margin-top: var(--sp-md); aspect-ratio: 16/9; object-fit: cover; }
.s-feature__img { width: 100%; aspect-ratio: 16/10; object-fit: cover; margin-bottom: var(--sp-sm); }

/* ---------- flow link + note ---------- */
.s-flow__link { margin-top: var(--sp-2xs); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-accent); text-decoration: none; }
.s-flow__note {
  margin: var(--sp-md) 0 0; padding-top: var(--sp-sm);
  border-top: 1px solid var(--c-hairline);
  font-size: var(--fs-sm); color: var(--c-muted); font-style: italic;
}

/* ==========================================================================
   Fourth-pass elements: pricing, documentation, careers, event and press.
   ========================================================================== */

/* ---------- fee table ---------- */
.s-fees { display: flex; flex-direction: column; border-top: 1px solid var(--c-hairline); }
.s-fees__row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-md); padding: var(--sp-md) 0;
  border-bottom: 1px solid var(--c-hairline);
}
.s-fees__copy { display: flex; flex-direction: column; gap: var(--sp-3xs); min-width: 0; }
.s-fees__title { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semi); }
.s-fees__body { margin: 0; color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.55; max-width: 52ch; }
.s-fees__link { align-self: flex-start; font-size: var(--fs-sm); color: var(--c-accent); text-decoration: none; }
.s-fees__lines { display: flex; flex-direction: column; gap: var(--sp-xs); min-width: 0; }
.s-fees__line { display: flex; flex-direction: column; gap: 0.1rem; }
/* The figure is the point of this component, so it gets display weight and
   lining tabular figures; the unit stays quiet underneath it. */
.s-fees__amount {
  font-family: var(--font-display); font-size: var(--fs-xl);
  font-weight: var(--fw-display); line-height: 1;
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums lining-nums;
}
.s-fees__unit { font-size: var(--fs-sm); color: var(--c-muted); }
.s-fees__note { font-size: var(--fs-xs); color: var(--c-muted); }
/* An addition is not a price, it is an adjustment to one, so it is set
   smaller and prefixed with the operator that makes the relationship plain. */
.s-fees__line--addition { padding-inline-start: var(--sp-sm); position: relative; }
.s-fees__line--addition::before {
  content: "+"; position: absolute; inset-inline-start: 0; top: 0.1em;
  color: var(--c-accent); font-family: var(--font-mono);
}
.s-fees__line--addition .s-fees__amount { font-size: var(--fs-md); }
.s-fees__line--note .s-fees__amount { font-size: var(--fs-md); font-family: var(--font-body); font-weight: var(--fw-medium); }
@media (max-width: 60rem) { .s-fees__row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- plan picker ---------- */
.s-planpick { display: grid; gap: var(--sp-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.s-planpick__option {
  display: flex; flex-direction: column; gap: var(--sp-2xs); padding: var(--sp-md);
  border-radius: var(--radius); background: var(--c-tint-2);
  box-shadow: inset 0 0 0 1px var(--c-hairline-soft);
}
.s-planpick__trial {
  margin: 0; align-self: flex-start; padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill); background: var(--c-accent-tint);
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-accent);
}
.s-planpick__name { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semi); }
.s-planpick__body { margin: 0; color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.5; }
.s-planpick__price { margin: var(--sp-2xs) 0 0; display: flex; align-items: baseline; gap: 0.35em; flex-wrap: wrap; }
.s-planpick__amount {
  font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-display);
  letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums lining-nums;
}
.s-planpick__period { font-size: var(--fs-sm); color: var(--c-muted); }
.s-planpick__note { margin: 0; font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.5; }
.s-planpick__option .s-btn { margin-top: auto; align-self: flex-start; }

/* ---------- toc ---------- */
.s-toc { font-size: var(--fs-sm); }
.s-toc--sticky { position: sticky; top: 4.5rem; align-self: start; }
.s-toc__title { margin: 0 0 var(--sp-xs); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-muted); }
.s-toc__list, .s-toc__sub { list-style: none; margin: 0; padding: 0; }
.s-toc__item { padding-block: 0.15rem; }
.s-toc__link { display: block; padding: 0.25rem 0; font-weight: var(--fw-medium); color: var(--c-text); text-decoration: none; }
.s-toc__sub { margin: 0 0 var(--sp-2xs); padding-inline-start: var(--sp-sm); border-inline-start: 1px solid var(--c-hairline); }
.s-toc__sublink { display: block; padding: 0.2rem 0; color: var(--c-muted); text-decoration: none; }
.s-toc__link:hover, .s-toc__sublink:hover { color: var(--c-accent); }

/* ---------- segmented control ---------- */
.s-segmented {
  display: inline-flex; gap: 0.15rem; padding: 0.25rem;
  border-radius: var(--radius-pill); background: var(--c-tint-3);
}
.s-segmented__item {
  padding: 0.4rem 0.95rem; border-radius: var(--radius-pill);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--c-muted); text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.s-segmented__item:hover { color: var(--c-text); }
.s-segmented__item--current { background: var(--c-bg); color: var(--c-text); box-shadow: var(--shadow-sm); }

/* ---------- spec grid ---------- */
.s-specs { display: grid; gap: var(--sp-lg); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.s-specs__group { display: flex; flex-direction: column; gap: var(--sp-xs); }
.s-specs__group-title { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semi); }
.s-specs__list { margin: 0; display: flex; flex-direction: column; gap: var(--sp-xs); }
/* Term above definition, with the term carrying the weight. A spec list read
   as one run-on paragraph is the most common way this pattern is botched. */
.s-specs__term { font-weight: var(--fw-medium); font-size: var(--fs-sm); }
.s-specs__def { margin: 0.15rem 0 0; color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.5; }

/* ---------- locale picker ---------- */
.s-locale { font-size: var(--fs-sm); }
.s-locale__toggle {
  display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; list-style: none;
  padding: 0.35rem 0.75rem; border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--c-hairline); color: var(--c-muted);
}
.s-locale__toggle::-webkit-details-marker { display: none; }
.s-locale[open] .s-locale__toggle { color: var(--c-text); }
.s-locale__panel { margin-top: var(--sp-sm); padding-top: var(--sp-sm); border-top: 1px solid var(--c-hairline); }
.s-locale__title { margin: 0 0 var(--sp-xs); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-muted); }
.s-locale__regions {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-xs) var(--sp-md);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
}
.s-locale__region { display: flex; flex-direction: column; gap: 0.1rem; }
.s-locale__region-name { font-weight: var(--fw-medium); }
.s-locale__langs { display: flex; flex-wrap: wrap; gap: 0.15rem 0.5rem; }
.s-locale__lang { color: var(--c-muted); text-decoration: none; font-size: var(--fs-xs); }
.s-locale__lang:hover { color: var(--c-accent); }

/* ---------- customer spotlight ---------- */
.s-spotlight { position: relative; }
.s-spotlight__radio { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.s-spotlight__tabs {
  display: flex; flex-wrap: wrap; gap: var(--sp-sm);
  padding-bottom: var(--sp-sm); margin-bottom: var(--sp-md);
  border-bottom: 1px solid var(--c-hairline);
}
.s-spotlight__tab { cursor: pointer; opacity: 0.5; transition: opacity var(--dur-fast) var(--ease); }
.s-spotlight__tab:hover { opacity: 0.8; }
.s-spotlight__tab-logo { width: auto; height: 1.5rem; max-width: 7rem; background: none; }
.s-spotlight__panels > .s-spotlight__panel { display: none; }
.s-spotlight__radio:nth-of-type(1):checked ~ .s-spotlight__tabs .s-spotlight__tab:nth-child(1),
.s-spotlight__radio:nth-of-type(2):checked ~ .s-spotlight__tabs .s-spotlight__tab:nth-child(2),
.s-spotlight__radio:nth-of-type(3):checked ~ .s-spotlight__tabs .s-spotlight__tab:nth-child(3),
.s-spotlight__radio:nth-of-type(4):checked ~ .s-spotlight__tabs .s-spotlight__tab:nth-child(4),
.s-spotlight__radio:nth-of-type(5):checked ~ .s-spotlight__tabs .s-spotlight__tab:nth-child(5),
.s-spotlight__radio:nth-of-type(6):checked ~ .s-spotlight__tabs .s-spotlight__tab:nth-child(6) { opacity: 1; }
.s-spotlight__radio:nth-of-type(1):checked ~ .s-spotlight__panels > .s-spotlight__panel:nth-child(1),
.s-spotlight__radio:nth-of-type(2):checked ~ .s-spotlight__panels > .s-spotlight__panel:nth-child(2),
.s-spotlight__radio:nth-of-type(3):checked ~ .s-spotlight__panels > .s-spotlight__panel:nth-child(3),
.s-spotlight__radio:nth-of-type(4):checked ~ .s-spotlight__panels > .s-spotlight__panel:nth-child(4),
.s-spotlight__radio:nth-of-type(5):checked ~ .s-spotlight__panels > .s-spotlight__panel:nth-child(5),
.s-spotlight__radio:nth-of-type(6):checked ~ .s-spotlight__panels > .s-spotlight__panel:nth-child(6) {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-lg); align-items: center;
}
.s-spotlight__body { display: flex; flex-direction: column; gap: var(--sp-sm); }
.s-spotlight__summary { margin: 0; font-size: var(--fs-lg); line-height: 1.4; text-wrap: pretty; }
/* dt and dd are siblings, so in a plain grid they flow side by side and the
   figure ends up next to its own caption instead of above it. Two explicit
   rows with column flow pairs them correctly. */
.s-spotlight__metrics {
  margin: 0; display: grid; gap: var(--sp-xs) var(--sp-lg);
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, max-content);
  justify-content: start;
}
@media (max-width: 40rem) {
  .s-spotlight__metrics { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: auto 1fr; align-items: baseline; }
}
.s-spotlight__metric-value {
  font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-display);
  line-height: 1; letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums lining-nums;
}
.s-spotlight__metric-label { margin: 0.2rem 0 0; font-size: var(--fs-sm); color: var(--c-muted); }
.s-spotlight__products-label { margin: 0 0 0.35rem; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-muted); }
.s-spotlight__products { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.s-spotlight__link { align-self: flex-start; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-accent); text-decoration: none; }
.s-spotlight__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
@media (max-width: 60rem) {
  .s-spotlight__radio:checked ~ .s-spotlight__panels > .s-spotlight__panel { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- promo banner ---------- */
.s-promo {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-sm) var(--sp-md);
  padding: var(--sp-sm) var(--sp-md); border-radius: var(--radius);
  background: var(--c-tint-2); box-shadow: inset 0 0 0 1px var(--c-hairline-soft);
}
.s-promo__bg { position: absolute; inset: 0; z-index: -1; }
.s-promo__bg-img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.s-promo--accent { background: var(--c-accent-tint); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c-accent) 24%, transparent); }
.s-promo--inverted { background: color-mix(in oklab, var(--c-text) 92%, var(--c-primary)); color: var(--c-bg); box-shadow: none; }
.s-promo--inverted .s-promo__body { color: color-mix(in oklab, var(--c-bg) 74%, transparent); }
.s-promo__copy { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1 1 18rem; }
.s-promo__title { margin: 0; font-weight: var(--fw-semi); font-size: var(--fs-sm); }
.s-promo__body { margin: 0; font-size: var(--fs-sm); color: var(--c-muted); }
.s-promo__cta {
  flex: 0 0 auto; font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: inherit; text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.4em;
}
.s-promo__cta::after { content: ""; width: 0.85em; height: 0.85em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h10M8.5 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h10M8.5 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;; transition: transform var(--dur-fast) var(--ease-enter); }
.s-promo__cta:hover::after { transform: translateX(0.22em); }

/* ---------- code ---------- */
.s-code {
  margin: 0; border-radius: var(--radius); overflow: hidden;
  background: color-mix(in oklab, var(--c-text) 94%, var(--c-primary));
  color: color-mix(in oklab, var(--c-bg) 92%, transparent);
  box-shadow: inset 0 0 0 1px var(--c-hairline);
}
.s-code__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sm);
  padding: 0.5rem var(--sp-sm);
  border-bottom: 1px solid color-mix(in oklab, var(--c-bg) 14%, transparent);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: color-mix(in oklab, var(--c-bg) 64%, transparent);
}
.s-code__lang { text-transform: none; opacity: 0.75; }
.s-code__pre {
  margin: 0; padding: var(--sp-sm); overflow-x: auto;
  font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.6;
  tab-size: 2;
}
.s-code__pre code { font: inherit; color: inherit; background: none; }
/* Counters rather than baked-in numbers, so the code stays copy-pasteable. */
.s-code__pre--numbered code { counter-reset: line; display: block; }
.s-code__caption { padding: var(--sp-2xs) var(--sp-sm) var(--sp-sm); font-size: var(--fs-xs); color: color-mix(in oklab, var(--c-bg) 60%, transparent); }
.s-codetabs { position: relative; }
.s-codetabs__radio { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.s-codetabs__labels { display: flex; flex-wrap: wrap; gap: var(--sp-3xs); margin-bottom: var(--sp-xs); }
.s-codetabs__label {
  padding: 0.35rem 0.8rem; border-radius: var(--radius-sm); cursor: pointer;
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-muted);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.s-codetabs__panels > .s-codetabs__panel { display: none; }
.s-codetabs__radio:nth-of-type(1):checked ~ .s-codetabs__labels .s-codetabs__label:nth-child(1),
.s-codetabs__radio:nth-of-type(2):checked ~ .s-codetabs__labels .s-codetabs__label:nth-child(2),
.s-codetabs__radio:nth-of-type(3):checked ~ .s-codetabs__labels .s-codetabs__label:nth-child(3),
.s-codetabs__radio:nth-of-type(4):checked ~ .s-codetabs__labels .s-codetabs__label:nth-child(4),
.s-codetabs__radio:nth-of-type(5):checked ~ .s-codetabs__labels .s-codetabs__label:nth-child(5),
.s-codetabs__radio:nth-of-type(6):checked ~ .s-codetabs__labels .s-codetabs__label:nth-child(6) {
  background: var(--c-tint-3); color: var(--c-text);
}
.s-codetabs__radio:nth-of-type(1):checked ~ .s-codetabs__panels > .s-codetabs__panel:nth-child(1),
.s-codetabs__radio:nth-of-type(2):checked ~ .s-codetabs__panels > .s-codetabs__panel:nth-child(2),
.s-codetabs__radio:nth-of-type(3):checked ~ .s-codetabs__panels > .s-codetabs__panel:nth-child(3),
.s-codetabs__radio:nth-of-type(4):checked ~ .s-codetabs__panels > .s-codetabs__panel:nth-child(4),
.s-codetabs__radio:nth-of-type(5):checked ~ .s-codetabs__panels > .s-codetabs__panel:nth-child(5),
.s-codetabs__radio:nth-of-type(6):checked ~ .s-codetabs__panels > .s-codetabs__panel:nth-child(6) { display: block; }

/* ---------- api list ---------- */
.s-api { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-hairline); }
.s-api__row {
  display: grid; grid-template-columns: 4.5rem minmax(0, 14rem) minmax(0, 1fr) auto;
  gap: var(--sp-sm); align-items: baseline;
  padding: var(--sp-xs) 0; border-bottom: 1px solid var(--c-hairline);
}
.s-api__method {
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-medium);
  padding: 0.15rem 0.4rem; border-radius: var(--radius-xs); text-align: center;
}
/* GET is the safe, ordinary verb, so it stays neutral. Tinting it with the
   brand made it identical to POST in any palette whose primary is green. */
.s-api__method--get { background: var(--c-tint-3); color: var(--c-muted); }
.s-api__method--post { background: color-mix(in oklab, var(--c-success) 14%, var(--c-bg)); color: var(--c-success); }
.s-api__method--put, .s-api__method--patch { background: color-mix(in oklab, var(--c-warning) 16%, var(--c-bg)); color: var(--c-warning); }
.s-api__method--delete { background: color-mix(in oklab, var(--c-danger) 12%, var(--c-bg)); color: var(--c-danger); }
.s-api__path { font-family: var(--font-mono); font-size: var(--fs-sm); }
.s-api__summary { color: var(--c-muted); font-size: var(--fs-sm); }
.s-api__link { font-size: var(--fs-sm); color: var(--c-accent); text-decoration: none; white-space: nowrap; }
@media (max-width: 60rem) { .s-api__row { grid-template-columns: 4.5rem minmax(0, 1fr); } }

/* ---------- footnotes ---------- */
.s-footnotes { list-style: none; margin: var(--sp-md) 0 0; padding: var(--sp-sm) 0 0; border-top: 1px solid var(--c-hairline); }
.s-footnotes__item { display: flex; gap: 0.5rem; font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.6; margin-bottom: 0.35rem; }
.s-footnotes__marker { flex: 0 0 auto; font-family: var(--font-mono); color: var(--c-accent); }

/* ---------- utility bar ---------- */
.s-utility { border-bottom: 1px solid var(--c-hairline-soft); background: var(--c-tint-2); font-size: var(--fs-xs); }
.s-utility__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-xs) var(--sp-md); padding-block: 0.4rem; justify-content: flex-end; }
.s-utility__note { margin-inline-end: auto; color: var(--c-muted); }
.s-utility__group { display: inline-flex; align-items: center; gap: 0.6rem; }
.s-utility__label { font-family: var(--font-mono); color: var(--c-muted); }
.s-utility__link { color: var(--c-muted); text-decoration: none; }
.s-utility__link:hover { color: var(--c-text); }

/* ---------- metric callout ---------- */
.s-metricout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: var(--sp-lg); align-items: center;
  padding: var(--sp-lg) var(--sp-md); border-radius: var(--radius-lg);
  background: var(--c-tint-2); box-shadow: inset 0 0 0 1px var(--c-hairline-soft);
}
.s-metricout--accent { background: var(--c-accent-tint); }
.s-metricout--inverted { background: color-mix(in oklab, var(--c-text) 92%, var(--c-primary)); color: var(--c-bg); box-shadow: none; }
.s-metricout--inverted .s-metricout__body { color: color-mix(in oklab, var(--c-bg) 74%, transparent); }
.s-metricout__copy { display: flex; flex-direction: column; gap: var(--sp-2xs); }
.s-metricout__value {
  margin: 0; font-family: var(--font-display); font-size: var(--fs-3xl);
  font-weight: var(--fw-display); line-height: 0.95;
  letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums lining-nums;
}
.s-metricout__title { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-semi); line-height: 1.25; text-wrap: balance; }
.s-metricout__body { margin: 0; color: var(--c-muted); line-height: 1.6; max-width: 52ch; }
.s-metricout__cta { align-self: flex-start; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-accent); text-decoration: none; }
.s-metricout__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
@media (max-width: 60rem) { .s-metricout { grid-template-columns: minmax(0, 1fr); } }

/* ---------- chips ---------- */
.s-chips { display: flex; flex-direction: column; gap: 0.35rem; }
.s-chips__label { margin: 0; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-muted); }
.s-chips__row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.s-chip {
  display: inline-flex; align-items: center; gap: 0.35em;
  padding: 0.2rem 0.6rem; border-radius: var(--radius-pill);
  font-size: var(--fs-xs); color: var(--c-muted); text-decoration: none;
  background: var(--c-tint-3);
}
a.s-chip:hover { color: var(--c-text); }
.s-chips--accent .s-chip { background: var(--c-accent-tint); color: var(--c-accent); }
.s-chips--outline .s-chip { background: none; box-shadow: inset 0 0 0 1px var(--c-hairline); }

/* ---------- link columns ---------- */
.s-linkcols { display: grid; gap: var(--sp-lg); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.s-linkcols__col { min-width: 0; }
.s-linkcols__title { margin: 0 0 var(--sp-xs); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-muted); }
.s-linkcols__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.s-linkcols__link { font-size: var(--fs-sm); color: var(--c-text); text-decoration: none; }
.s-linkcols__link:hover { color: var(--c-accent); }

/* ---------- downloads ---------- */
.s-downloads { display: grid; gap: var(--sp-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.s-downloads__item {
  display: flex; flex-direction: column; gap: var(--sp-2xs);
  padding: var(--sp-md); border-radius: var(--radius);
  background: var(--c-tint-2); box-shadow: inset 0 0 0 1px var(--c-hairline-soft);
  text-decoration: none; color: inherit;
  transition: box-shadow var(--dur-medium) var(--ease-enter), transform var(--dur-medium) var(--ease-enter);
}
.s-downloads__item:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--c-hairline), var(--shadow-md); }
.s-downloads__img { width: 100%; aspect-ratio: 16/10; object-fit: cover; margin-bottom: var(--sp-2xs); }
.s-downloads__title { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semi); }
.s-downloads__body { margin: 0; color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.5; }
.s-downloads__meta { margin-top: auto; padding-top: var(--sp-xs); display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-sm); }
.s-downloads__cta { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-accent); }
.s-downloads__size { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-muted); }

/* ---------- jobs ---------- */
.s-jobs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-hairline); }
.s-jobs__row { border-bottom: 1px solid var(--c-hairline); }
.s-jobs__link {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-xs) var(--sp-md);
  align-items: baseline; padding: var(--sp-sm) var(--sp-2xs);
  text-decoration: none; color: inherit;
  transition: background-color var(--dur-fast) var(--ease);
}
.s-jobs__link:hover { background: var(--c-tint-2); }
.s-jobs__title { font-size: var(--fs-md); font-weight: var(--fw-medium); }
.s-jobs__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; font-size: var(--fs-sm); color: var(--c-muted); justify-content: flex-end; }
.s-jobs__team { font-family: var(--font-mono); font-size: var(--fs-xs); }
@media (max-width: 52rem) {
  .s-jobs__link { grid-template-columns: minmax(0, 1fr); }
  .s-jobs__meta { justify-content: flex-start; }
}

/* ---------- agenda ---------- */
.s-agenda { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-hairline); }
.s-agenda__slot {
  display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--sp-md);
  padding: var(--sp-md) 0; border-bottom: 1px solid var(--c-hairline);
}
/* The time column is fixed width and tabular, so the schedule reads as a
   column of times rather than a ragged left edge. */
.s-agenda__time {
  margin: 0; font-family: var(--font-mono); font-size: var(--fs-sm);
  color: var(--c-accent); font-variant-numeric: tabular-nums;
}
.s-agenda__body { display: flex; flex-direction: column; gap: var(--sp-3xs); min-width: 0; }
.s-agenda__track { margin: 0; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-muted); }
.s-agenda__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-display); letter-spacing: var(--tracking-display); line-height: 1.25; }
.s-agenda__text { margin: 0; color: var(--c-muted); line-height: 1.55; max-width: 60ch; }
.s-agenda__speaker { margin: var(--sp-3xs) 0 0; display: flex; flex-wrap: wrap; gap: 0.45rem; font-size: var(--fs-sm); }
.s-agenda__speaker-name { font-weight: var(--fw-medium); }
.s-agenda__speaker-role { color: var(--c-muted); }
.s-agenda__link { align-self: flex-start; margin-top: var(--sp-3xs); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-accent); text-decoration: none; }
@media (max-width: 52rem) { .s-agenda__slot { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2xs); } }

/* ---------- contact panel ---------- */
.s-contacts { display: grid; gap: var(--sp-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.s-contacts__item { display: flex; flex-direction: column; gap: 0.25rem; padding-top: var(--sp-sm); border-top: 1px solid var(--c-hairline); }
.s-contacts__icon { display: block; width: 1.35rem; height: 1.35rem; color: var(--c-accent); margin-bottom: var(--sp-3xs); }
.s-contacts__label { margin: 0; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-muted); }
.s-contacts__value { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--c-text); text-decoration: none; }
a.s-contacts__value:hover { color: var(--c-accent); }
.s-contacts__note { margin: 0; font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.5; }

/* ---------- byline ---------- */
.s-byline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-xs) var(--sp-md); }
.s-byline__author { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: inherit; }
.s-byline__avatar { width: 2rem; height: 2rem; flex: 0 0 auto; }
.s-byline__copy { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.s-byline__name { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.s-byline__role { font-size: var(--fs-xs); color: var(--c-muted); }
a.s-byline__author:hover .s-byline__name { color: var(--c-accent); }
.s-byline__meta > * + *::before {
  content: ""; display: inline-block;
  width: 1px; height: 0.85em; margin-inline-end: 0.6rem;
  background: var(--c-hairline-strong); vertical-align: -0.1em;
}
.s-byline__meta {
  display: inline-flex; gap: 0.6rem; font-family: var(--font-mono);
  font-size: var(--fs-xs); color: var(--c-muted); font-variant-numeric: tabular-nums;
}
.s-article__byline { margin-top: var(--sp-2xs); }
.s-block__title-link { color: inherit; text-decoration: none; }
.s-block__title-link:hover { color: var(--c-accent); }

/* ---------- highlights ---------- */
.s-highlights { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-hairline); }
/* Date in a fixed column so the list reads chronologically down one edge,
   which is the difference between a dated list and a pile of cards. */
.s-highlights__item {
  display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--sp-md);
  padding: var(--sp-md) 0; border-bottom: 1px solid var(--c-hairline);
}
.s-highlights__date {
  margin: 0; font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--c-muted); font-variant-numeric: tabular-nums;
}
.s-highlights__body { display: flex; flex-direction: column; gap: var(--sp-3xs); min-width: 0; }
.s-highlights__title {
  margin: 0; font-family: var(--font-display); font-size: var(--fs-lg);
  font-weight: var(--fw-display); letter-spacing: var(--tracking-display); line-height: 1.25;
}
.s-highlights__text { margin: 0; color: var(--c-muted); line-height: 1.6; max-width: 62ch; }
.s-highlights__link {
  align-self: flex-start; margin-top: var(--sp-3xs);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-accent); text-decoration: none;
}
@media (max-width: 52rem) { .s-highlights__item { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2xs); } }

/* ---------- sub nav ---------- */
.s-subnav { display: flex; flex-wrap: wrap; gap: var(--sp-md); border-bottom: 1px solid var(--c-hairline); }
.s-subnav__item {
  padding: var(--sp-xs) 0; margin-bottom: -1px;
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--c-muted); text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.s-subnav__item:hover { color: var(--c-text); }
/* The current page is marked on the rule it shares with its siblings, not by
   colour alone -- colour alone is not a state anyone can rely on. */
.s-subnav__item--current { color: var(--c-text); border-bottom-color: var(--c-accent); }

/* ---------- results ---------- */
.s-results { display: grid; gap: var(--sp-lg) var(--sp-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.s-results__item { display: flex; flex-direction: column; gap: var(--sp-2xs); padding-top: var(--sp-sm); border-top: 1px solid var(--c-hairline); }
.s-results__value {
  margin: 0; font-family: var(--font-display); font-size: var(--fs-2xl);
  font-weight: var(--fw-display); line-height: 1;
  letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums lining-nums;
}
/* The sentence under the figure names the customer, so it is body copy rather
   than a caption and gets a readable measure. */
.s-results__body { margin: 0; color: var(--c-muted); line-height: 1.5; max-width: 26ch; }
.s-results__link { align-self: flex-start; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-accent); text-decoration: none; }

/* ---------- case study panel ---------- */
.s-casepanel {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: var(--sp-lg); align-items: start;
  padding: var(--sp-lg) 0; border-top: 1px solid var(--c-hairline);
}
.s-casepanel__copy { display: flex; flex-direction: column; gap: var(--sp-sm); min-width: 0; }
.s-casepanel__logo { width: auto; height: 1.5rem; max-width: 7rem; background: none; }
.s-casepanel__title {
  margin: 0; font-family: var(--font-display); font-size: var(--fs-xl);
  font-weight: var(--fw-display); letter-spacing: var(--tracking-display);
  line-height: 1.2; text-wrap: balance;
}
.s-casepanel__part { display: flex; flex-direction: column; gap: 0.2rem; }
.s-casepanel__label { margin: 0; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-accent); }
.s-casepanel__text { margin: 0; color: var(--c-muted); line-height: 1.6; max-width: 62ch; }
.s-casepanel__products { display: flex; flex-direction: column; gap: 0.35rem; }
.s-casepanel__quote { margin-top: var(--sp-2xs); }
.s-casepanel__quote .s-quote__text { font-size: var(--fs-md); }
.s-casepanel__link { align-self: flex-start; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-accent); text-decoration: none; }
.s-casepanel__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
@media (max-width: 62rem) { .s-casepanel { grid-template-columns: minmax(0, 1fr); } }

/* ---------- logo action + chip overflow + lead states ---------- */
.s-logos__action {
  display: inline-block; width: 0.85em; height: 0.85em; margin-inline-start: 0.4em;
  background: currentColor; vertical-align: -0.08em; opacity: 0.55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h10M8.5 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h10M8.5 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* A play triangle for video, a right arrow for reading. The mark tells you
   what kind of thing is on the other side before you click it. */
.s-logos__action--watch {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 3.5v9l8-4.5z' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 3.5v9l8-4.5z' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
}
.s-logos__item:hover .s-logos__action { opacity: 1; }
.s-chip--more { box-shadow: inset 0 0 0 1px var(--c-hairline); background: none; color: var(--c-accent); }
.s-lead__success {
  margin: var(--sp-2xs) 0 0; padding: var(--sp-2xs) var(--sp-sm);
  border-radius: var(--radius-sm); font-size: var(--fs-sm);
  background: color-mix(in oklab, var(--c-success) 8%, var(--c-bg));
  color: var(--c-success);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c-success) 22%, transparent);
}

/* ---------- spotlight grid variant ---------- */
.s-spotlight--grid {
  display: grid; gap: var(--sp-md);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.s-spotlight--grid .s-spotlight__panels { display: contents; }
.s-spotlight--grid .s-spotlight__panel {
  display: flex; flex-direction: column; gap: var(--sp-sm);
  padding: var(--sp-md); border-radius: var(--radius);
  background: var(--c-tint-2); box-shadow: inset 0 0 0 1px var(--c-hairline-soft);
}
.s-spotlight--grid .s-spotlight__summary { font-size: var(--fs-md); }
.s-spotlight--grid .s-spotlight__img { aspect-ratio: 16/10; }

/* ==========================================================================
   Genre-characteristic elements. Base styling only: the trait layer restyles
   these per design language exactly as it does every other element.
   ========================================================================== */

/* ---------- gauge ---------- */
.s-gauge { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2xs); }
.s-gauge--arc, .s-gauge--dial { align-items: center; }
.s-gauge__svg { width: 100%; max-width: 11rem; height: auto; }
.s-gauge__rail, .s-gauge__value { fill: none; stroke-width: 8; stroke-linecap: round; }
.s-gauge__rail { stroke: var(--c-hairline-strong); }
.s-gauge__value { stroke: var(--c-primary); }
.s-gauge__track {
  position: relative; width: 100%; height: 0.6rem; border-radius: var(--radius-pill);
  background: var(--c-tint-3); overflow: hidden;
}
.s-gauge__bar {
  position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--fill);
  background: var(--c-primary); border-radius: inherit;
}
/* The band marks the healthy region of the range, so it sits under the value
   rather than over it -- a target you cannot see past is not a target. */
.s-gauge__band {
  position: absolute; inset-block: 0;
  inset-inline-start: var(--from); width: calc(var(--to) - var(--from));
  background: color-mix(in oklab, var(--c-success) 26%, transparent);
}
.s-gauge__read { display: flex; flex-direction: column; gap: 0.1rem; }
.s-gauge--arc .s-gauge__read, .s-gauge--dial .s-gauge__read { align-items: center; text-align: center; }
.s-gauge__display {
  font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-display);
  line-height: 1; letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums lining-nums;
}
.s-gauge__label { font-size: var(--fs-sm); color: var(--c-muted); }
.s-gauge__note { font-size: var(--fs-xs); color: var(--c-muted); }

/* ---------- chart panel ---------- */
.s-chart { margin: 0; display: flex; flex-direction: column; gap: var(--sp-sm); }
.s-chart__plot { border-radius: var(--radius); overflow: hidden; box-shadow: inset 0 0 0 1px var(--c-hairline); }
.s-chart__img { width: 100%; height: auto; display: block; }
.s-chart__legend {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.4rem var(--sp-md); font-size: var(--fs-sm);
}
.s-chart__series { display: inline-flex; align-items: center; gap: 0.45rem; }
.s-chart__swatch {
  width: 0.7rem; height: 0.7rem; flex: 0 0 auto; border-radius: 2px;
  background: var(--tint, var(--c-primary));
}
.s-chart__series-value { color: var(--c-muted); font-variant-numeric: tabular-nums; }
.s-chart__caption { display: flex; flex-direction: column; gap: 0.3rem; }
.s-chart__summary { margin: 0; font-size: var(--fs-sm); line-height: 1.6; max-width: 68ch; }
.s-chart__text { margin: 0; font-size: var(--fs-sm); color: var(--c-muted); }
.s-chart__source { margin: 0; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-muted); }

/* ---------- metric table ---------- */
.s-metrics { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }
.s-metrics__caption { text-align: start; font-size: var(--fs-xs); color: var(--c-muted); padding-bottom: var(--sp-2xs); font-family: var(--font-mono); }
.s-metrics__row { border-bottom: 1px solid var(--c-hairline); }
.s-metrics th, .s-metrics td { padding: var(--sp-xs) var(--sp-sm) var(--sp-xs) 0; text-align: start; vertical-align: baseline; }
.s-metrics__label { font-weight: var(--fw-medium); }
.s-metrics__value { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-display); letter-spacing: var(--tracking-display); }
.s-metrics__delta { font-size: var(--fs-sm); color: var(--c-muted); white-space: nowrap; }
/* Direction is carried by a glyph as well as a colour: a red number and a
   green number are the same number to a large minority of readers. */
/* Drawn, not typed. A CSS escape written in a non-raw Python literal is read
   as octal at import and emits a control byte -- which is how this shipped
   once already. A clip-path triangle has no escape and no font dependency. */
.s-metrics__delta::before {
  content: ""; display: inline-block; width: 0.58em; height: 0.58em;
  margin-inline-end: 0.4em; background: currentColor;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.s-metrics__delta.s-trend--up::before { color: var(--c-success); }
.s-metrics__delta.s-trend--down::before { color: var(--c-danger); transform: rotate(180deg); }
.s-metrics__delta.s-trend--flat::before { color: var(--c-muted); clip-path: inset(45% 0 45% 0); }
.s-metrics__delta.s-trend--up { color: var(--c-success); }
.s-metrics__delta.s-trend--down { color: var(--c-danger); }
.s-metrics__note { font-size: var(--fs-sm); color: var(--c-muted); }

/* ---------- progress tracker ---------- */
.s-progress { display: flex; flex-direction: column; gap: var(--sp-2xs); }
.s-progress__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-sm); }
.s-progress__label { margin: 0; font-weight: var(--fw-medium); }
.s-progress__figures { margin: 0; display: inline-flex; align-items: baseline; gap: 0.4rem; font-variant-numeric: tabular-nums lining-nums; }
.s-progress__value { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-display); letter-spacing: var(--tracking-display); }
.s-progress__target { font-size: var(--fs-sm); color: var(--c-muted); }
.s-progress__target::before { content: "/ "; }
.s-progress__track { position: relative; height: 0.75rem; border-radius: var(--radius-pill); background: var(--c-tint-3); overflow: hidden; }
.s-progress__bar { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--fill); background: var(--c-primary); border-radius: inherit; }
.s-progress__milestone {
  position: absolute; inset-block: 0; inset-inline-start: var(--at);
  width: 2px; background: color-mix(in oklab, var(--c-bg) 70%, transparent);
}
.s-progress__milestone--reached { background: color-mix(in oklab, var(--c-primary-fg) 70%, transparent); }
.s-progress__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem var(--sp-md); font-size: var(--fs-xs); color: var(--c-muted); }
.s-progress__legend-item--reached { color: var(--c-primary); font-weight: var(--fw-medium); }
.s-progress__note { margin: 0; font-size: var(--fs-sm); color: var(--c-muted); }

/* ---------- command block ---------- */
.s-cmd {
  margin: 0; border-radius: var(--radius); overflow: hidden;
  background: color-mix(in oklab, var(--c-text) 94%, var(--c-primary));
  color: color-mix(in oklab, var(--c-bg) 92%, transparent);
  box-shadow: inset 0 0 0 1px var(--c-hairline);
}
.s-cmd__title { margin: 0; padding: 0.5rem var(--sp-sm); font-family: var(--font-mono); font-size: var(--fs-xs); color: color-mix(in oklab, var(--c-bg) 62%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--c-bg) 14%, transparent); }
.s-cmd__pre { margin: 0; padding: var(--sp-sm); overflow-x: auto; font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.65; }
.s-cmd__line { display: block; }
/* The prompt is drawn by CSS, so selecting the block copies the command
   without a shell sigil that would break on paste. */
.s-cmd__prompt { user-select: none; -webkit-user-select: none; color: var(--c-success); margin-inline-end: 0.6em; }
.s-cmd__output { display: block; color: color-mix(in oklab, var(--c-bg) 66%, transparent); }
.s-cmd__comment { display: block; color: color-mix(in oklab, var(--c-bg) 48%, transparent); }
.s-cmd__caption { padding: var(--sp-2xs) var(--sp-sm) var(--sp-sm); font-size: var(--fs-xs); color: color-mix(in oklab, var(--c-bg) 60%, transparent); }

/* ---------- keybinds ---------- */
.s-keys { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-xs) var(--sp-md); align-items: baseline; }
.s-keys__combo { display: inline-flex; align-items: center; gap: 0.25rem; }
.s-keys__key {
  font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1;
  padding: 0.3rem 0.45rem; border-radius: var(--radius-xs);
  background: var(--c-tint-2); box-shadow: inset 0 0 0 1px var(--c-hairline), 0 1px 0 var(--c-hairline-strong);
}
.s-keys__plus { color: var(--c-muted); font-size: var(--fs-xs); }
.s-keys__action { margin: 0; font-size: var(--fs-sm); }
.s-keys__note { display: block; color: var(--c-muted); font-size: var(--fs-xs); }

/* ---------- ascii ---------- */
.s-ascii { margin: 0; display: flex; flex-direction: column; gap: var(--sp-2xs); }
.s-ascii__art { margin: 0; overflow-x: auto; font-family: var(--font-mono); font-size: clamp(0.4rem, 1.4vw, 0.8rem); line-height: 1.1; color: var(--c-primary); white-space: pre; }
.s-ascii__label { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-muted); }
.s-ascii__caption { margin: 0; font-size: var(--fs-sm); color: var(--c-muted); }

/* ---------- leaderboard ---------- */
.s-leader { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }
.s-leader th { text-align: start; padding: var(--sp-2xs) var(--sp-sm) var(--sp-2xs) 0; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-muted); border-bottom: 1px solid var(--c-hairline); }
.s-leader__row { border-bottom: 1px solid var(--c-hairline-soft); }
.s-leader td { padding: var(--sp-xs) var(--sp-sm) var(--sp-xs) 0; vertical-align: middle; }
.s-leader__rank { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-display); width: 3rem; }
.s-leader__subject { display: flex; align-items: center; gap: var(--sp-2xs); }
.s-leader__avatar { width: 1.8rem; height: 1.8rem; flex: 0 0 auto; }
.s-leader__link { color: inherit; text-decoration: none; }
.s-leader__link:hover { color: var(--c-accent); }
.s-leader__score { text-align: end; font-weight: var(--fw-medium); white-space: nowrap; }
.s-leader__move { display: inline-block; width: 0.6em; height: 0.6em; margin-inline-start: 0.4em; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.s-leader__move.s-trend--up { background: var(--c-success); }
.s-leader__move.s-trend--down { background: var(--c-danger); transform: rotate(180deg); }
.s-leader__move.s-trend--flat { background: var(--c-muted); clip-path: inset(45% 0 45% 0); }

/* ---------- spec table ---------- */
.s-spec { display: grid; gap: var(--sp-lg); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.s-spec__group-title { margin: 0 0 var(--sp-xs); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-accent); }
.s-spec__list { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
.s-spec__key, .s-spec__value { padding: var(--sp-2xs) 0; border-top: 1px solid var(--c-hairline); font-size: var(--fs-sm); }
.s-spec__key { color: var(--c-muted); }
.s-spec__value { margin: 0; font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; text-align: end; }
.s-spec__note { display: block; font-weight: var(--fw-body); color: var(--c-muted); font-size: var(--fs-xs); }
.s-spec__footnote { margin: var(--sp-sm) 0 0; font-size: var(--fs-xs); color: var(--c-muted); }

/* ---------- variant picker ---------- */
.s-variants { display: flex; flex-direction: column; gap: var(--sp-md); }
.s-variants__group { border: 0; margin: 0; padding: 0; }
.s-variants__legend { padding: 0; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-muted); margin-bottom: var(--sp-2xs); }
.s-variants__options { display: flex; flex-wrap: wrap; gap: var(--sp-2xs); }
.s-variants__radio { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.s-variants__option {
  display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer;
  padding: 0.45rem 0.8rem; border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--c-hairline); font-size: var(--fs-sm);
  transition: box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.s-variants__option:hover { box-shadow: inset 0 0 0 1px var(--c-hairline-strong); }
.s-variants__swatch { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--tint, var(--c-primary)); box-shadow: inset 0 0 0 1px var(--c-hairline-strong); }
.s-variants__img { width: 1.6rem; height: 1.6rem; object-fit: cover; border-radius: var(--radius-xs); }
.s-variants__value { color: var(--c-muted); font-size: var(--fs-xs); }
/* Selection is marked by ring AND weight, never by colour alone. */
.s-variants__radio:checked + .s-variants__option {
  box-shadow: inset 0 0 0 2px var(--c-primary); background: var(--c-primary-tint); font-weight: var(--fw-medium);
}
.s-variants__radio:focus-visible + .s-variants__option { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.s-variants__option--out { opacity: 0.45; cursor: not-allowed; text-decoration: line-through; }
.s-variants__note { margin: var(--sp-2xs) 0 0; font-size: var(--fs-xs); color: var(--c-muted); }

/* ---------- hotspots + annotated figure ---------- */
.s-hotspots, .s-figure { position: relative; margin: 0; }
.s-hotspots__img, .s-figure__img { width: 100%; height: auto; display: block; }
.s-hotspots__point, .s-figure__callout {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  display: grid; place-items: center; min-width: 1.7rem; height: 1.7rem; padding: 0 0.4rem;
  border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: var(--fs-xs);
  background: var(--c-primary); color: var(--c-primary-fg);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--c-bg) 70%, transparent);
}
.s-hotspots__key, .s-figure__key {
  list-style: none; margin: var(--sp-sm) 0 0; padding: 0;
  display: grid; gap: var(--sp-2xs); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.s-hotspots__key-item, .s-figure__key-item { display: grid; grid-template-columns: 1.7rem minmax(0, 1fr); gap: 0.5rem; align-items: baseline; font-size: var(--fs-sm); }
.s-hotspots__marker, .s-figure__marker { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-accent); }
.s-hotspots__label { font-weight: var(--fw-medium); }
.s-hotspots__body { display: block; color: var(--c-muted); }
.s-figure__caption { margin-top: var(--sp-2xs); font-size: var(--fs-sm); color: var(--c-muted); }

/* ---------- swatches ---------- */
.s-swatches { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-md); grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); }
.s-swatches__item { display: flex; flex-direction: column; gap: 0.2rem; }
.s-swatches__face { aspect-ratio: 4/3; border-radius: var(--radius); background: var(--tint, var(--c-surface)); box-shadow: inset 0 0 0 1px var(--c-hairline); overflow: hidden; }
.s-swatches--material .s-swatches__face { aspect-ratio: 1; border-radius: 50%; }
.s-swatches__img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.s-swatches__name { margin: var(--sp-3xs) 0 0; font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.s-swatches__value { margin: 0; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-muted); }
.s-swatches__note { margin: 0; font-size: var(--fs-xs); color: var(--c-muted); }

/* ---------- age gate ---------- */
.s-agegate { display: grid; place-items: center; padding: var(--sp-xl) var(--sp-md); }
.s-agegate__panel { max-width: 32rem; text-align: center; display: flex; flex-direction: column; gap: var(--sp-sm); align-items: center; }
.s-agegate__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-display); letter-spacing: var(--tracking-display); }
.s-agegate__body { margin: 0; color: var(--c-muted); }
.s-agegate__actions { display: flex; flex-wrap: wrap; gap: var(--sp-xs); justify-content: center; }
.s-agegate__note { margin: 0; font-size: var(--fs-xs); color: var(--c-muted); }

/* ---------- editorial ---------- */
.s-lede { max-width: 60ch; }
.s-lede__text { margin: 0; font-size: var(--fs-lg); line-height: 1.55; text-wrap: pretty; }
/* initial-letter where supported; a float fallback everywhere else, because a
   drop cap that fails to a giant inline letter wrecks the first line. */
.s-lede__text--cap::first-letter {
  float: left; line-height: 0.8; padding-inline-end: 0.08em; padding-block-start: 0.06em;
  font-family: var(--font-display); font-size: 3.2em; font-weight: var(--fw-display); color: var(--c-accent);
}
@supports (initial-letter: 3) {
  .s-lede__text--cap::first-letter { float: none; initial-letter: 3; padding-inline-end: 0.12em; font-size: inherit; }
}
.s-marginnote { display: flex; flex-direction: column; gap: 0.2rem; padding-inline-start: var(--sp-sm); border-inline-start: 2px solid var(--c-hairline-strong); font-size: var(--fs-sm); color: var(--c-muted); max-width: 22rem; }
.s-marginnote__marker { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-accent); }
.s-marginnote__label { margin: 0; font-weight: var(--fw-medium); color: var(--c-text); }
.s-marginnote__text { margin: 0; line-height: 1.55; }
/* Floating this into the page margin is a magazine device, not a default.
   In the base it collided with a floated pull quote and with the citation
   list below it, because neither the wrap nor the sibling margin rule clears
   floats. The trait layer opts in, and establishes a containing block. */
[data-genre~="magazine"] .s-wrap > *,
[data-genre~="annotated"] .s-wrap > * { display: flow-root; }
@media (min-width: 76rem) {
  [data-genre~="magazine"] .s-wrap--narrow .s-marginnote,
  [data-genre~="annotated"] .s-wrap--narrow .s-marginnote {
    float: inline-end; margin-inline-end: -14rem; width: 12rem;
  }
}
.s-pullquote { margin: var(--sp-md) 0; max-width: 34ch; }
.s-pullquote__text { margin: 0; font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-display); line-height: 1.28; letter-spacing: var(--tracking-display); hanging-punctuation: first last; }
.s-pullquote__by { margin-top: var(--sp-2xs); font-size: var(--fs-sm); color: var(--c-muted); }
/* Alignment without floating. A floated pull quote overlaps whatever follows
   unless every sibling clears it, and nothing in a generated page can be
   relied on to do that. */
.s-pullquote--inline_start { margin-inline-end: auto; }
.s-pullquote--inline_end { margin-inline-start: auto; text-align: end; }
[data-genre~="magazine"] .s-pullquote--inline_end,
[data-genre~="annotated"] .s-pullquote--inline_end {
  float: inline-end; margin-inline-start: var(--sp-md); text-align: start;
}
@media (max-width: 52rem) {
  .s-pullquote { float: none; margin-inline: 0; max-width: none; text-align: start; }
}
.s-masthead { display: flex; flex-direction: column; gap: var(--sp-2xs); }
.s-masthead--rule { padding-bottom: var(--sp-sm); border-bottom: 3px double var(--c-text); }
.s-masthead__meta { display: flex; flex-wrap: wrap; gap: var(--sp-md); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-muted); }
.s-masthead__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: var(--fw-display-strong); line-height: 1; letter-spacing: var(--tracking-display); }
.s-masthead__standfirst { margin: 0; font-size: var(--fs-lg); color: var(--c-muted); max-width: 58ch; text-wrap: pretty; }
.s-citations__title { margin: 0 0 var(--sp-xs); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-muted); }
.s-citations__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; border-top: 1px solid var(--c-hairline); padding-top: var(--sp-xs); }
.s-citations__item { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 0.5rem; font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.6; }
.s-citations__marker { font-family: var(--font-mono); color: var(--c-accent); }
.s-citations__author::after { content: ", "; }
.s-citations__work { font-style: italic; }
.s-citations__locator::before { content: ", "; }
.s-citations__link { color: inherit; }

/* ---------- exhibit ---------- */
.s-objects { display: grid; gap: var(--sp-lg); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.s-objects__item { display: flex; flex-direction: column; gap: var(--sp-2xs); text-decoration: none; color: inherit; }
.s-objects__face { position: relative; aspect-ratio: 3/4; border-radius: 2px var(--radius-sm) var(--radius-sm) 2px; overflow: hidden; background: var(--tint, var(--c-surface)); box-shadow: var(--shadow-lg); }
.s-objects__img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
/* The drawn spine is what makes a rectangle read as a book. */
.s-objects__spine { position: absolute; inset-block: 0; inset-inline-start: 0; width: 0.45rem; background: linear-gradient(90deg, color-mix(in oklab, #000 34%, transparent), transparent); }
.s-objects--plinth .s-objects__face { border-radius: var(--radius-sm); aspect-ratio: 1; }
.s-objects--plinth .s-objects__spine { display: none; }
.s-objects--plinth .s-objects__item::after { content: ""; height: 0.5rem; margin-top: -0.2rem; border-radius: 50%; background: radial-gradient(ellipse at 50% 0, color-mix(in oklab, var(--c-text) 22%, transparent), transparent 70%); }
.s-objects--float .s-objects__face { box-shadow: 0 2rem 3rem -1.5rem color-mix(in oklab, var(--c-text) 40%, transparent); }
.s-objects--float .s-objects__spine { display: none; }
.s-objects__title { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semi); line-height: 1.25; }
.s-objects__subtitle, .s-objects__meta { margin: 0; font-size: var(--fs-sm); color: var(--c-muted); }
.s-objects__meta { font-family: var(--font-mono); font-size: var(--fs-xs); }
.s-catalogue { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-hairline); }
.s-catalogue__item { border-bottom: 1px solid var(--c-hairline); }
.s-catalogue__link { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto auto; gap: var(--sp-sm); align-items: baseline; padding: var(--sp-2xs) 0; text-decoration: none; color: inherit; }
.s-catalogue__number { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-muted); font-variant-numeric: tabular-nums; }
.s-catalogue__title { font-size: var(--fs-md); }
.s-catalogue__meta, .s-catalogue__year { font-size: var(--fs-sm); color: var(--c-muted); white-space: nowrap; }
a.s-catalogue__link:hover .s-catalogue__title { color: var(--c-accent); }
@media (max-width: 52rem) { .s-catalogue__link { grid-template-columns: 3rem minmax(0, 1fr); } .s-catalogue__meta, .s-catalogue__year { grid-column: 2; } }
.s-photostack { display: flex; flex-wrap: wrap; gap: var(--sp-md); }
.s-photostack__print { margin: 0; flex: 0 1 14rem; padding: 0.6rem 0.6rem 1.8rem; background: var(--c-bg); box-shadow: var(--shadow-md); transform: rotate(var(--tilt)); transition: transform var(--dur-medium) var(--ease-enter); }
.s-photostack__print:hover { transform: rotate(0deg) translateY(-4px); }
.s-photostack__img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 0; }
.s-photostack__caption { margin-top: 0.5rem; font-size: var(--fs-xs); color: var(--c-muted); text-align: center; }
.s-exhibit { display: flex; flex-direction: column; gap: 0.2rem; max-width: 26rem; font-size: var(--fs-sm); }
.s-exhibit__work { margin: 0; font-weight: var(--fw-semi); }
.s-exhibit__line { margin: 0; color: var(--c-muted); display: flex; flex-wrap: wrap; gap: 0.4rem; }
.s-exhibit__line > span + span::before { content: "·"; margin-inline-end: 0.4rem; }
.s-exhibit__credit { margin: 0.2rem 0 0; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-muted); }
.s-exhibit__body { margin: var(--sp-2xs) 0 0; color: var(--c-muted); line-height: 1.6; }

/* ---------- type + design ---------- */
.s-specimen { display: flex; flex-direction: column; gap: var(--sp-sm); }
.s-specimen__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-sm); border-bottom: 1px solid var(--c-hairline); padding-bottom: var(--sp-2xs); }
.s-specimen__family { margin: 0; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-muted); }
.s-specimen__weights { margin: 0; display: flex; gap: var(--sp-sm); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-muted); }
.s-specimen__waterfall { display: flex; flex-direction: column; gap: 0.2rem; }
.s-specimen__line { margin: 0; font-family: var(--font-display); font-weight: var(--fw-display); line-height: 1.05; letter-spacing: var(--tracking-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-specimen__glyphs { margin: 0; font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.7; word-spacing: 0.35em; color: var(--c-muted); }
.s-specimen__note { margin: 0; font-size: var(--fs-sm); color: var(--c-muted); }
.s-gridoverlay { position: relative; display: grid; grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); gap: var(--sp-2xs); min-height: 6rem; pointer-events: none; }
.s-gridoverlay__column { background: color-mix(in oklab, var(--c-accent) 12%, transparent); border-radius: 2px; }
.s-gridoverlay--baseline { background-image: repeating-linear-gradient(to bottom, var(--c-hairline) 0 1px, transparent 1px 1.5rem); }
.s-gridoverlay__label { position: absolute; inset-block-start: -1.4rem; inset-inline-start: 0; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-muted); }
.s-dodont { display: grid; gap: var(--sp-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.s-dodont__item { display: flex; flex-direction: column; gap: var(--sp-2xs); padding: var(--sp-sm); border-radius: var(--radius); background: var(--c-tint-2); border-top: 3px solid var(--c-hairline-strong); }
.s-dodont--do { border-top-color: var(--c-success); }
.s-dodont--dont { border-top-color: var(--c-danger); }
.s-dodont__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.s-dodont__verdict { margin: 0; font-family: var(--font-mono); font-size: var(--fs-xs); }
.s-dodont--do .s-dodont__verdict { color: var(--c-success); }
.s-dodont--dont .s-dodont__verdict { color: var(--c-danger); }
.s-dodont__title { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semi); }
.s-dodont__body { margin: 0; font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.55; }

/* ---------- launcher + flip ---------- */
.s-launcher { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); gap: var(--sp-md); }
.s-launcher__tile { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; text-decoration: none; color: inherit; }
.s-launcher__face { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: calc(var(--radius) * 1.4); background: var(--tint, var(--c-tint-3)); box-shadow: inset 0 1px 0 0 var(--c-rim), 0 0 0 1px var(--c-hairline-soft); color: var(--c-primary); transition: transform var(--dur-medium) var(--ease-enter); }
.s-launcher__img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
a.s-launcher__tile:hover .s-launcher__face { transform: translateY(-3px); }
.s-launcher__name { font-size: var(--fs-xs); text-align: center; }
.s-flip { display: grid; grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); gap: var(--sp-md); }
.s-flip__item { position: relative; perspective: 1200px; }
.s-flip__toggle { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.s-flip__inner { position: relative; transform-style: preserve-3d; transition: transform var(--dur-slow) var(--ease-enter); min-height: 12rem; }
.s-flip__toggle:checked ~ .s-flip__inner { transform: rotateY(180deg); }
.s-flip__face { display: flex; flex-direction: column; gap: var(--sp-2xs); padding: var(--sp-md); border-radius: var(--radius); background: var(--c-tint-2); box-shadow: inset 0 0 0 1px var(--c-hairline-soft); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.s-flip__face--back { position: absolute; inset: 0; transform: rotateY(180deg); }
.s-flip__img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.s-flip__title { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semi); }
.s-flip__body { margin: 0; font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.55; }
.s-flip__label { display: inline-block; margin-top: var(--sp-2xs); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-accent); cursor: pointer; }
.s-flip__toggle:focus-visible ~ .s-flip__label { outline: 2px solid var(--c-primary); outline-offset: 2px; }
/* Without the transform the two faces would stack; reduced motion removes the
   rotation but must not remove the reveal. */
@media (prefers-reduced-motion: reduce) {
  .s-flip__inner { transition: none; }
  .s-flip__face--back { position: static; transform: none; margin-top: var(--sp-2xs); display: none; }
  .s-flip__toggle:checked ~ .s-flip__inner { transform: none; }
  .s-flip__toggle:checked ~ .s-flip__inner .s-flip__face--front { display: none; }
  .s-flip__toggle:checked ~ .s-flip__inner .s-flip__face--back { display: flex; }
}

/* ---------- narrative ---------- */
/* The measure belongs on the line, not the container: `ch` resolves against
   the element's own font-size, so 22ch on the wrapper was 22 characters of
   BODY text and forced the display lines to one word each. */
.s-manifesto { display: flex; flex-direction: column; gap: var(--sp-xs); }
.s-manifesto__line {
  margin: 0; max-width: 16ch;
  font-family: var(--font-display); font-size: var(--fs-3xl);
  font-weight: var(--fw-display); line-height: 1.02;
  letter-spacing: var(--tracking-display); text-wrap: balance;
}
.s-manifesto__line--emphasis { color: var(--c-accent); }
.s-manifesto__by { margin: var(--sp-sm) 0 0; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-muted); }
.s-slides { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.s-slides__slide { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 0.85fr); gap: var(--sp-md); align-items: start; padding: var(--sp-lg) 0; border-top: 1px solid var(--c-hairline); }
.s-slides__number { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--c-accent); font-variant-numeric: tabular-nums; }
.s-slides__body { display: flex; flex-direction: column; gap: var(--sp-2xs); min-width: 0; }
.s-slides__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-display); line-height: 1.15; letter-spacing: var(--tracking-display); }
.s-slides__text { margin: 0; color: var(--c-muted); line-height: 1.6; max-width: 58ch; }
.s-slides__img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
@media (max-width: 62rem) { .s-slides__slide { grid-template-columns: 2.5rem minmax(0, 1fr); } .s-slides__media { grid-column: 2; } }

/* ---------- accordion ---------- */
.s-accordion { display: flex; flex-direction: column; border-top: 1px solid var(--c-hairline); }
.s-accordion__item { border-bottom: 1px solid var(--c-hairline); }
.s-accordion__item[open] { background: var(--c-tint-1); }
.s-accordion__summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md);
  padding: var(--sp-sm) var(--sp-2xs); cursor: pointer; list-style: none;
}
.s-accordion__summary::-webkit-details-marker { display: none; }
.s-accordion__summary-copy { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.s-accordion__eyebrow { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-accent); }
.s-accordion__title {
  font-family: var(--font-display); font-size: var(--fs-lg);
  font-weight: var(--fw-display); line-height: 1.25;
  letter-spacing: var(--tracking-display); text-wrap: balance;
}
/* Chevron rotates to point at what it revealed. */
.s-accordion__summary::after {
  content: ""; flex: 0 0 auto;
  width: 0.5em; height: 0.5em;
  border-right: 1.5px solid var(--c-muted); border-bottom: 1.5px solid var(--c-muted);
  transform: rotate(45deg) translate(-0.1em, -0.1em);
  transition: transform var(--dur-fast) var(--ease-enter), border-color var(--dur-fast) var(--ease);
}
.s-accordion__item[open] .s-accordion__summary::after {
  transform: rotate(-135deg) translate(-0.1em, -0.1em); border-color: var(--c-accent);
}
.s-accordion__panel {
  display: grid; gap: var(--sp-md);
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.75fr);
  align-items: start;
  padding: 0 var(--sp-2xs) var(--sp-md);
}
.s-accordion__body { display: flex; flex-direction: column; gap: var(--sp-sm); min-width: 0; }
.s-accordion__text { margin: 0; color: var(--c-muted); line-height: 1.6; max-width: 60ch; }
/* Metrics as a definition list: value is the term, label defines it. That is
   the correct semantic pairing and it also gives the right reading order. */
/* dt and dd are siblings, so in a plain grid they flow side by side and the
   figure ends up next to its own caption instead of above it. Two explicit
   rows with column flow pairs them correctly. */
.s-accordion__metrics {
  margin: 0; display: grid; gap: var(--sp-xs) var(--sp-lg);
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, max-content);
  justify-content: start;
}
@media (max-width: 40rem) {
  .s-accordion__metrics { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: auto 1fr; align-items: baseline; }
}
.s-accordion__metric-value {
  font-family: var(--font-display); font-size: var(--fs-xl);
  font-weight: var(--fw-display); line-height: 1;
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums lining-nums;
}
.s-accordion__metric-label { margin: 0.25rem 0 0; font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.4; }
.s-accordion__meta { margin: 0; font-size: var(--fs-sm); color: var(--c-muted); }
.s-accordion__meta-label { display: block; font-family: var(--font-mono); font-size: var(--fs-xs); margin-bottom: 0.15rem; }
.s-accordion__link {
  align-self: flex-start; font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--c-accent); text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.4em;
}
.s-accordion__link::after { content: ""; width: 0.85em; height: 0.85em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h10M8.5 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h10M8.5 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;; transition: transform var(--dur-fast) var(--ease-enter); }
.s-accordion__link:hover::after { transform: translateX(0.22em); }
.s-accordion__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
@media (max-width: 60rem) { .s-accordion__panel { grid-template-columns: minmax(0, 1fr); } }

/* ---------- nav panel: secondary column + travelling arrows ---------- */
.s-nav-panel__col--secondary {
  align-self: start;
  padding: var(--sp-sm); border-radius: var(--radius-nested);
  background: var(--c-tint-2);
}
.s-nav-panel__arrow {
  display: inline-block; margin-inline-start: 0.35em;
  opacity: 0; transform: translateX(-0.25em);
  color: var(--c-accent);
  transition: opacity var(--dur-fast) var(--ease-enter), transform var(--dur-fast) var(--ease-enter);
}
.s-nav-panel__item:hover .s-nav-panel__arrow,
.s-nav-panel__item:focus-visible .s-nav-panel__arrow { opacity: 1; transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .s-nav-panel__arrow { transition: none; }
}

/* ---------- bento background media ---------- */
.s-bento__tile--bg { position: relative; isolation: isolate; overflow: hidden; }
.s-bento__bg { position: absolute; inset: 0; z-index: -1; }
.s-bento__bg-img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
/* A scrim, so copy over art stays legible whatever the image turns out to be.
   Without it a background tile is a contrast failure waiting for a photo. */
.s-bento__tile--bg::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--c-bg) 88%, transparent) 0%,
    color-mix(in oklab, var(--c-bg) 64%, transparent) 55%,
    color-mix(in oklab, var(--c-bg) 82%, transparent) 100%);
}
.s-bento-tone--inverted.s-bento__tile--bg::after {
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--c-text) 78%, transparent) 0%,
    color-mix(in oklab, var(--c-text) 62%, transparent) 100%);
}

/* ---------- article carousel ---------- */
.s-articles--carousel {
  display: flex; gap: var(--sp-md); overflow-x: auto;
  scroll-snap-type: x mandatory; padding-bottom: var(--sp-xs);
  -webkit-overflow-scrolling: touch;
}
.s-articles--carousel .s-article {
  flex: 0 0 min(21rem, 84vw); scroll-snap-align: start;
  display: flex; flex-direction: column; gap: var(--sp-2xs);
  text-decoration: none; color: inherit;
}

/* ---------- linked stat, quote link ---------- */
.s-stat__label--link {
  color: var(--c-muted); text-decoration: underline;
  text-decoration-color: var(--c-hairline-strong); text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.s-stat__label--link:hover { color: var(--c-text); text-decoration-color: currentColor; }
.s-quote__link {
  margin-top: var(--sp-2xs); font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--c-accent); text-decoration: none;
}

/* ---------- timeline ---------- */
.s-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.s-timeline__entry {
  position: relative;
  padding: 0 0 var(--sp-lg) var(--sp-lg);
  border-inline-start: 1px solid var(--c-hairline);
}
.s-timeline__entry:last-child { padding-bottom: 0; }
/* The node on the rule. Drawn from the entry rather than the container so it
   always lines up with the date, whatever the entry's height. */
.s-timeline__entry::before {
  content: "";
  position: absolute; inset-inline-start: -4.5px; top: 0.55em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--c-bg);
  box-shadow: 0 0 0 2px var(--c-accent);
}
.s-timeline__date {
  margin: 0 0 var(--sp-3xs);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--c-accent); letter-spacing: 0;
}
.s-timeline__title {
  margin: 0 0 var(--sp-3xs); font-family: var(--font-display);
  font-size: var(--fs-lg); font-weight: var(--fw-display);
  letter-spacing: var(--tracking-display); line-height: 1.2;
}
.s-timeline__body { margin: 0; color: var(--c-muted); line-height: 1.6; max-width: 60ch; }
.s-timeline__link {
  display: inline-block; margin-top: var(--sp-2xs);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-accent);
}
.s-timeline__img { width: 100%; max-width: 26rem; max-height: 15rem; margin-top: var(--sp-sm); aspect-ratio: 16/10; object-fit: cover; }
/* Alternating: two columns sharing one centre rule. Collapses to the stacked
   form below the split point, because alternation at narrow widths is just a
   zigzag nobody can follow. */
@media (min-width: 62rem) {
  /* The spine is a background gradient, not a grid item: as a ::before with
     grid-row: 1 / -1 it only spanned the explicit rows, and every row here is
     implicit. */
  .s-timeline--alternating {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: calc(var(--sp-lg) * 2);
    background-image: linear-gradient(var(--c-hairline), var(--c-hairline));
    background-size: 1px 100%;
    background-position: center top;
    background-repeat: no-repeat;
  }
  /* Each entry gets its OWN row. Left to auto-placement, entry 1 and entry 2
     shared row 1, which stacked their two nodes at the same point on the
     spine and left a tall void beside whichever entry was shorter. The
     schema caps entries at 20, so the row assignment can be enumerated. */
  .s-timeline--alternating .s-timeline__entry:nth-child(1) { grid-row: 1; }
  .s-timeline--alternating .s-timeline__entry:nth-child(2) { grid-row: 2; }
  .s-timeline--alternating .s-timeline__entry:nth-child(3) { grid-row: 3; }
  .s-timeline--alternating .s-timeline__entry:nth-child(4) { grid-row: 4; }
  .s-timeline--alternating .s-timeline__entry:nth-child(5) { grid-row: 5; }
  .s-timeline--alternating .s-timeline__entry:nth-child(6) { grid-row: 6; }
  .s-timeline--alternating .s-timeline__entry:nth-child(7) { grid-row: 7; }
  .s-timeline--alternating .s-timeline__entry:nth-child(8) { grid-row: 8; }
  .s-timeline--alternating .s-timeline__entry:nth-child(9) { grid-row: 9; }
  .s-timeline--alternating .s-timeline__entry:nth-child(10) { grid-row: 10; }
  .s-timeline--alternating .s-timeline__entry:nth-child(11) { grid-row: 11; }
  .s-timeline--alternating .s-timeline__entry:nth-child(12) { grid-row: 12; }
  .s-timeline--alternating .s-timeline__entry:nth-child(13) { grid-row: 13; }
  .s-timeline--alternating .s-timeline__entry:nth-child(14) { grid-row: 14; }
  .s-timeline--alternating .s-timeline__entry:nth-child(15) { grid-row: 15; }
  .s-timeline--alternating .s-timeline__entry:nth-child(16) { grid-row: 16; }
  .s-timeline--alternating .s-timeline__entry:nth-child(17) { grid-row: 17; }
  .s-timeline--alternating .s-timeline__entry:nth-child(18) { grid-row: 18; }
  .s-timeline--alternating .s-timeline__entry:nth-child(19) { grid-row: 19; }
  .s-timeline--alternating .s-timeline__entry:nth-child(20) { grid-row: 20; }
  .s-timeline--alternating .s-timeline__entry {
    border-inline-start: 0;
    padding: 0 0 var(--sp-lg);
  }
  .s-timeline--alternating .s-timeline__entry:nth-child(odd) {
    grid-column: 1; text-align: end; padding-inline-end: var(--sp-lg);
  }
  .s-timeline--alternating .s-timeline__entry:nth-child(even) {
    grid-column: 2; padding-inline-start: var(--sp-lg);
  }
  .s-timeline--alternating .s-timeline__entry::before { top: 0.5em; }
  .s-timeline--alternating .s-timeline__entry:nth-child(odd)::before {
    inset-inline-start: auto; inset-inline-end: calc(var(--sp-lg) * -1 - 4px);
  }
  .s-timeline--alternating .s-timeline__entry:nth-child(even)::before {
    inset-inline-start: calc(var(--sp-lg) * -1 - 5px);
  }
  .s-timeline--alternating .s-timeline__entry:nth-child(odd) .s-timeline__body,
  .s-timeline--alternating .s-timeline__entry:nth-child(odd) .s-timeline__img {
    margin-inline-start: auto;
  }
  /* Right-aligned prose needs short lines or the ragged left edge becomes
     hard to track back to. */
  .s-timeline--alternating .s-timeline__entry:nth-child(odd) .s-timeline__body { max-width: 42ch; }
}
/* Media is capped so one illustrated entry cannot make its row many times the
   height of a text-only one, which is what made the alternation unreadable. */

/* ---------- process flow ---------- */
.s-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-sm); }
.s-flow--row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.s-flow--column { grid-template-columns: minmax(0, 1fr); max-width: 46rem; }
.s-flow--loop { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.s-flow__step {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-3xs);
  padding: var(--sp-sm) var(--sp-sm) var(--sp-sm) 0;
  border-top: 2px solid var(--c-hairline);
}
/* The connector. A sequence needs to read as connected or it is a list of
   cards; the arrow sits on the rule between steps, not inside them. */
.s-flow--row .s-flow__step:not(:last-child)::after,
.s-flow--loop .s-flow__step::after {
  content: "";
  position: absolute; top: -5px; inset-inline-end: 0;
  width: 8px; height: 8px;
  border-top: 2px solid var(--c-accent);
  border-right: 2px solid var(--c-accent);
  transform: rotate(45deg);
}
.s-flow--loop .s-flow__step:last-child::after {
  transform: rotate(135deg);
}
.s-flow__step--phase-start { border-top-color: var(--c-accent); }
.s-flow__phase {
  margin: 0 0 var(--sp-2xs);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--c-accent); letter-spacing: 0;
}
.s-flow__marker {
  display: inline-flex; align-items: center; justify-content: flex-start;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--c-muted); font-variant-numeric: tabular-nums;
}
.s-flow__label {
  margin: 0; font-size: var(--fs-md); font-weight: var(--fw-medium);
  line-height: 1.3; letter-spacing: var(--tracking-body);
}
.s-flow__body { margin: 0; font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.5; }
.s-flow--column .s-flow__step { flex-direction: row; align-items: baseline; gap: var(--sp-sm); }
.s-flow--column .s-flow__label { flex: 0 0 12rem; }

/* ---------- person tags, disclosure, team cta ---------- */
.s-person__tags { list-style: none; margin: var(--sp-2xs) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.s-person__tag {
  padding: 0.2rem 0.55rem; border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-muted);
  background: var(--c-tint-2); box-shadow: inset 0 0 0 1px var(--c-hairline-soft);
}
.s-person__more { margin-top: var(--sp-2xs); }
.s-person__more-toggle {
  cursor: pointer; list-style: none;
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-accent);
  display: inline-flex; align-items: center; gap: 0.4em;
}
.s-person__more-toggle::-webkit-details-marker { display: none; }
.s-person__more-toggle::after {
  content: ""; width: 0.45em; height: 0.45em;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-0.1em, -0.1em);
  transition: transform var(--dur-fast) var(--ease-enter);
}
.s-person__more[open] .s-person__more-toggle::after { transform: rotate(-135deg) translate(-0.1em, -0.1em); }
.s-person__detail { margin: var(--sp-2xs) 0 0; font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.6; }
.s-team--profiles {
  display: grid; gap: var(--sp-md);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.s-team--profiles .s-person {
  padding: var(--sp-md); border-radius: var(--radius);
  background: var(--c-tint-2); box-shadow: inset 0 0 0 1px var(--c-hairline-soft);
  text-decoration: none; color: inherit;
}
.s-team--profiles .s-person__photo { width: 4.5rem; height: 4.5rem; }
.s-team__cta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-xs) var(--sp-md);
  margin-top: var(--sp-md); padding-top: var(--sp-md);
  border-top: 1px solid var(--c-hairline);
}
.s-team__cta-title { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-medium); }
.s-team__cta-body { margin: 0; color: var(--c-muted); font-size: var(--fs-sm); flex: 1 1 16rem; }

@media (max-width: 60rem) {
  .s-bento--cols-3, .s-bento--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-bento--lg, .s-bento--wide { grid-column: span 2; }
}
@media (max-width: 40rem) {
  .s-bento--cols-2, .s-bento--cols-3, .s-bento--cols-4 { grid-template-columns: minmax(0, 1fr); }
  .s-bento--sm, .s-bento--wide, .s-bento--tall, .s-bento--lg { grid-column: span 1; grid-row: span 1; }
  .s-articles--list .s-article { grid-template-columns: minmax(0, 1fr); }
  .s-articles--list .s-article__meta { grid-column: 1; grid-row: auto; justify-content: flex-start; }
  .s-articles--list .s-article__title { grid-row: auto; }
}

/* ===== genre trait layer ===== */
/* --- ground ------------------------------------------------------------- */
[data-genre~="flat"] body { background: var(--c-bg); }

[data-genre~="void"] body { background: var(--c-bg); }
[data-genre~="void"] .s-section--base { background: transparent; }

/* A drawing surface. The grid must sit below the threshold of notice: if you
   read the grid before the content, the ground has become the subject. */
[data-genre~="blueprint"] body {
  background-color: var(--c-bg);
  background-image:
    linear-gradient(var(--c-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-grid) 1px, transparent 1px);
  background-size: var(--grid-pitch) var(--grid-pitch);
}

/* Luminance noise. Smooth dark fields band on eight-bit panels and read as
   flat vinyl; a fraction of a percent of grain makes them read as material. */
[data-genre~="grain"] body::before,
[data-genre~="halftone"] body::before,
[data-genre~="paper"] body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-genre~="paper"] body::before { opacity: 0.035; }
[data-genre~="halftone"] body::before {
  opacity: 0.10; mix-blend-mode: multiply;
  background-image: radial-gradient(var(--c-text) 0.8px, transparent 0.8px);
  background-size: 5px 5px;
}

/* One light source, falling off in one direction. Two coloured orbs is the
   thing every generated page does; a single directional wash is not. */
[data-genre~="glow"] body {
  background:
    radial-gradient(120rem 60rem at 50% -20%,
      color-mix(in oklab, var(--c-primary) 20%, transparent), transparent 62%),
    var(--c-bg);
  background-attachment: fixed;
}

/* Slow drifting fog. Motion is paused under reduced-motion at the foot. */
[data-genre~="fog"] body {
  background:
    radial-gradient(70rem 40rem at 18% 8%,
      color-mix(in oklab, var(--c-text) 6%, transparent), transparent 60%),
    radial-gradient(60rem 36rem at 82% 24%,
      color-mix(in oklab, var(--c-primary) 7%, transparent), transparent 58%),
    var(--c-bg);
  background-attachment: fixed;
}

/* Phosphor rows plus a vignette. Both are kept faint enough that body copy
   still clears AA against the ground beneath them. */
[data-genre~="scanline"] body::after {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    repeating-linear-gradient(
      to bottom,
      color-mix(in oklab, var(--c-text) 5%, transparent) 0 1px,
      transparent 1px 3px),
    radial-gradient(130% 100% at 50% 50%, transparent 52%,
      color-mix(in oklab, #000 46%, transparent) 100%);
}
[data-genre~="scanline"] .s-wrap { position: relative; z-index: 1; }
/* --- ink ---------------------------------------------------------------- */
/* Luminous text belongs to exactly one element per screen. Applying a glow to
   every heading is how a neon page becomes an unreadable one. */
[data-genre~="neon-dark"] .s-hero__title {
  text-shadow: 0 0 2.4rem color-mix(in oklab, var(--c-primary) 42%, transparent);
}
[data-genre~="neon-dark"] .s-btn--primary {
  box-shadow:
    inset 0 1px 0 0 color-mix(in oklab, var(--c-primary-fg) 30%, transparent),
    0 0 1.6rem color-mix(in oklab, var(--c-primary) 46%, transparent);
}

/* A duotone page has no true greys, so a "muted" surface is a tint of the
   primary hue rather than a step toward grey. */
[data-genre~="duotone"] .s-card,
[data-genre~="duotone"] .s-bento__tile {
  background: color-mix(in oklab, var(--c-primary) 7%, var(--c-bg));
}

/* Mono-ink spends its single accent on action, never on decoration. */
[data-genre~="mono-ink"] .s-eyebrow,
[data-genre~="mono-ink"] .s-article__category { color: var(--c-accent); }
[data-genre~="mono-ink"] .s-section--subtle { background: var(--c-surface); }

[data-genre~="cream-ink"] .s-section--subtle,
[data-genre~="cream-ink"] .s-card {
  background: color-mix(in oklab, var(--c-text) 4%, var(--c-bg));
}
/* --- type volume -------------------------------------------------------- */
/* Volume is scoped to display roles only. Applying an aggressive scale to body
   copy or list content is how a poster genre destroys a forty-item FAQ. */
[data-genre~="intimate"] {
  --fs-3xl: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
  --fs-4xl: clamp(2.2rem, 1.6rem + 2.2vw, 3.2rem);
}
[data-genre~="intimate"] .s-block__title { font-size: var(--fs-xl); }

[data-genre~="expressive"] {
  --fs-3xl: clamp(2.6rem, 1.7rem + 3.4vw, 4.4rem);
  --fs-4xl: clamp(3.1rem, 1.8rem + 5.0vw, 6.0rem);
}

[data-genre~="poster"] {
  --fs-3xl: clamp(3.0rem, 1.4rem + 6.4vw, 7.5rem);
  --fs-4xl: clamp(3.6rem, 1.2rem + 9.6vw, 11rem);
}
[data-genre~="poster"] .s-hero__title,
[data-genre~="poster"] .s-block__title {
  line-height: 0.94;
  text-wrap: balance;
}
[data-genre~="poster"] .s-hero__title { hyphens: none; overflow-wrap: break-word; }
/* Body, list and table content never inherit poster scale. */
[data-genre~="poster"] .s-text,
[data-genre~="poster"] .s-prose,
[data-genre~="poster"] .s-table,
[data-genre~="poster"] .s-faq__a { font-size: var(--fs-md); }
/* --- shape -------------------------------------------------------------- */
[data-genre~="sharp"] { --radius: 0px; --radius-sm: 0px; --radius-xs: 0px;
  --radius-lg: 0px; --radius-nested: 0px; }
[data-genre~="sharp"] .s-btn { border-radius: 0; }

[data-genre~="pill"] .s-card,
[data-genre~="pill"] .s-bento__tile,
[data-genre~="pill"] .s-feature--card { border-radius: calc(var(--radius) * 2); }
[data-genre~="pill"] .s-btn,
[data-genre~="pill"] .s-input { border-radius: var(--radius-pill); }

/* Asymmetric radii, varied per position so a grid of them does not read as one
   shape repeated. Percentages keep the curve proportional at any tile size. */
[data-genre~="organic"] .s-card,
[data-genre~="organic"] .s-bento__tile,
[data-genre~="organic"] .s-feature--card,
[data-genre~="organic"] .s-downloads__item { border-radius: 42% 58% 54% 46% / 12% 14% 12% 14%; }
[data-genre~="organic"] .s-card:nth-child(even),
[data-genre~="organic"] .s-bento__tile:nth-child(even) {
  border-radius: 56% 44% 48% 52% / 14% 12% 14% 12%;
}
[data-genre~="organic"] .s-img--rounded { border-radius: 46% 54% 52% 48% / 10% 12% 10% 12%; }
[data-genre~="organic"] .s-btn { border-radius: var(--radius-pill); }

/* A wave cut into the image edge. Done with a mask so the frame follows the
   art rather than sitting on top of it as a decorative border. */
[data-genre~="wavy"] .s-img--rounded,
[data-genre~="wavy"] .s-article__img,
[data-genre~="wavy"] .s-casepanel__img {
  border-radius: 0;
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 6c8-6 17-6 25 0s17 6 25 0 17-6 25 0 17 6 25 0v88c-8 6-17 6-25 0s-17-6-25 0-17 6-25 0-17-6-25 0z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask: var(--wave) center/100% 100% no-repeat;
  mask: var(--wave) center/100% 100% no-repeat;
}
/* --- edge --------------------------------------------------------------- */
[data-genre~="borderless"] .s-card,
[data-genre~="borderless"] .s-feature--card,
[data-genre~="borderless"] .s-bento__tile,
[data-genre~="borderless"] .s-downloads__item {
  box-shadow: none; background: transparent;
}
[data-genre~="borderless"] .s-elev--raised { box-shadow: none; background: var(--c-surface); }

/* Brutal: the shadow is a solid offset of the ink, not a blur. It is the only
   edge style where the shadow is a drawn shape rather than a light effect. */
[data-genre~="brutal"] .s-card,
[data-genre~="brutal"] .s-feature--card,
[data-genre~="brutal"] .s-bento__tile,
[data-genre~="brutal"] .s-planpick__option,
[data-genre~="brutal"] .s-downloads__item {
  background: var(--c-bg);
  border: 2px solid var(--c-text);
  box-shadow: 5px 5px 0 var(--c-text);
}
[data-genre~="brutal"] .s-btn {
  border: 2px solid var(--c-text);
  box-shadow: 3px 3px 0 var(--c-text);
}
[data-genre~="brutal"] .s-btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--c-text); }
[data-genre~="brutal"] .s-card:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--c-text); }

/* Sticker: a thick outline and a hard drop in the accent, so the object reads
   as cut out and laid on the page. */
[data-genre~="sticker"] .s-card,
[data-genre~="sticker"] .s-feature--card,
[data-genre~="sticker"] .s-bento__tile,
[data-genre~="sticker"] .s-chip {
  background: var(--c-bg);
  border: 2.5px solid var(--c-text);
  box-shadow: 4px 4px 0 var(--c-accent);
}
[data-genre~="sticker"] .s-btn {
  border: 2.5px solid var(--c-text);
  box-shadow: 3px 3px 0 var(--c-accent);
}

[data-genre~="glow"] .s-card,
[data-genre~="glow"] .s-bento__tile,
[data-genre~="glow"] .s-feature--card {
  background: color-mix(in oklab, var(--c-surface) 82%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--c-primary) 22%, transparent),
    0 0 2.2rem -0.6rem color-mix(in oklab, var(--c-primary) 40%, transparent);
}
[data-genre~="glow"] .s-card:hover {
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--c-primary) 42%, transparent),
    0 0 3rem -0.4rem color-mix(in oklab, var(--c-primary) 56%, transparent);
}

[data-genre~="soft-shadow"] .s-card,
[data-genre~="soft-shadow"] .s-bento__tile,
[data-genre~="soft-shadow"] .s-feature--card {
  background: var(--c-bg); box-shadow: var(--shadow-md);
}
[data-genre~="soft-shadow"] .s-card:hover { box-shadow: var(--shadow-lg); }

/* Inset: panels read as recessed wells rather than raised cards. The inverse
   of the primary button, which is the one raised thing on the page. */
[data-genre~="inset"] .s-card,
[data-genre~="inset"] .s-bento__tile,
[data-genre~="inset"] .s-feature--card {
  background: color-mix(in oklab, var(--c-text) 6%, var(--c-bg));
  box-shadow:
    inset 0 1px 3px color-mix(in oklab, #000 30%, transparent),
    inset 0 0 0 1px var(--c-hairline-soft);
}
/* --- composition -------------------------------------------------------- */
/* Centred is a deliberate choice here, not the template default it is
   elsewhere: a poster genre has one axis and everything sits on it. */
[data-genre~="centered-poster"] .s-block__head {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center; text-align: center;
  margin-inline: auto; max-width: 46rem; border-bottom: 0;
}
[data-genre~="centered-poster"] .s-block__head > .s-block__subtitle {
  grid-column: 1; grid-row: auto; padding-bottom: 0; text-align: center;
}
[data-genre~="centered-poster"] .s-hero { justify-items: center; text-align: center; }
[data-genre~="centered-poster"] .s-hero__actions { justify-content: center; }

[data-genre~="modular"] .s-block__head { border-bottom: 0; padding-bottom: 0; }
[data-genre~="modular"] .s-section > .s-wrap > * + * { margin-block-start: var(--sp-md); }
[data-genre~="modular"] .s-features,
[data-genre~="modular"] .s-grid { gap: 1px; background: var(--c-hairline); }
[data-genre~="modular"] .s-features > *,
[data-genre~="modular"] .s-grid > * { background: var(--c-bg); }

/* Collage: overlap and rotation, flattened at the breakpoint as part of the
   trait rather than as an afterthought -- rotation plus negative margin is
   the fastest way to produce horizontal overflow on a phone. */
[data-genre~="collage"] .s-features > *:nth-child(3n+1) { transform: rotate(-1.4deg); }
[data-genre~="collage"] .s-features > *:nth-child(3n+2) { transform: rotate(0.9deg); }
[data-genre~="collage"] .s-features > *:nth-child(3n) { transform: rotate(-0.5deg); }
[data-genre~="collage"] .s-photostrip__item:nth-child(even) { transform: rotate(2deg); }
[data-genre~="collage"] .s-photostack__print:nth-child(even) { transform: rotate(4deg); }
[data-genre~="collage"] .s-hero__media { transform: rotate(-1.6deg); }
[data-genre~="collage"] .s-block__head { border-bottom: 0; }
@media (max-width: 60rem) {
  [data-genre~="collage"] .s-features > *,
  [data-genre~="collage"] .s-photostrip__item,
  [data-genre~="collage"] .s-hero__media { transform: none; }
}

[data-genre~="magazine"] .s-prose,
[data-genre~="magazine"] .s-text { max-width: 68ch; }
[data-genre~="magazine"] .s-section > .s-wrap { border-top: 1px solid var(--c-hairline); }
[data-genre~="magazine"] .s-section:first-of-type > .s-wrap { border-top: 0; }
[data-genre~="magazine"] .s-block__title { letter-spacing: var(--tracking-display); }
@media (min-width: 68rem) {
  [data-genre~="magazine"] .s-prose { columns: 2; column-gap: var(--sp-lg); }
  [data-genre~="magazine"] .s-prose > h2,
  [data-genre~="magazine"] .s-prose > h3 { column-span: all; }
}

[data-genre~="split"] .s-block__head {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start; border-bottom: 0;
}
[data-genre~="split"] .s-hero--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* Gallery: the object is the content, so chrome recedes to nothing. */
[data-genre~="gallery"] .s-block__head { border-bottom: 0; padding-bottom: 0; }
[data-genre~="gallery"] .s-section { padding-block: var(--sp-2xl); }
[data-genre~="gallery"] .s-img--rounded { box-shadow: var(--shadow-lg); }
/* --- motion ------------------------------------------------------------- */
[data-genre~="kinetic"] .s-anim { animation-duration: var(--dur-fast); }
[data-genre~="kinetic"] .s-btn:hover { transform: translateY(-2px); }

[data-genre~="cinematic"] .s-anim { animation-duration: var(--dur-slow); }
[data-genre~="cinematic"] .s-hero__media,
[data-genre~="cinematic"] .s-img--rounded {
  transition: transform var(--dur-slow) var(--ease-enter);
}
[data-genre~="cinematic"] .s-casestudy-bento__tile:hover .s-casestudy-bento__img,
[data-genre~="cinematic"] .s-article:hover .s-article__img { transform: scale(1.03); }

[data-genre~="springy"] .s-anim { animation-timing-function: var(--ease-spring, cubic-bezier(0.34, 1.42, 0.5, 1)); }
[data-genre~="springy"] .s-btn:hover { transform: translateY(-3px) scale(1.02); }
[data-genre~="springy"] .s-card:hover { transform: translateY(-4px); }

/* Static still honours entrance fades -- removing them entirely would make
   scroll-triggered content appear to pop rather than arrive. */
[data-genre~="static"] .s-anim { animation-duration: var(--dur-fast); }
[data-genre~="static"] .s-card:hover,
[data-genre~="static"] .s-btn:hover { transform: none; }
/* --- ornament ----------------------------------------------------------- */
/* An editor's mark under the emphasised run of a headline. */
[data-genre~="hand-marks"] .s-hero__title em,
[data-genre~="hand-marks"] .s-hero__em {
  font-style: normal; position: relative; white-space: nowrap;
}
[data-genre~="hand-marks"] .s-hero__title em::after,
[data-genre~="hand-marks"] .s-hero__em::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: -0.12em; height: 0.42em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14c40-9 92-11 194-6' stroke='%23000' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  opacity: 0.85; color: var(--c-accent);
}
[data-genre~="hand-marks"] .s-eyebrow::before { width: 2.2em; }

[data-genre~="brackets"] .s-hero { position: relative; }
[data-genre~="brackets"] .s-hero::before,
[data-genre~="brackets"] .s-hero::after {
  content: ""; position: absolute; width: 1.6rem; height: 1.6rem;
  border: 2px solid var(--c-accent);
}
[data-genre~="brackets"] .s-hero::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
[data-genre~="brackets"] .s-hero::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }

[data-genre~="dotted-rules"] .s-block__head,
[data-genre~="dotted-rules"] .s-faq__item,
[data-genre~="dotted-rules"] .s-articles--list .s-article { border-bottom-style: dotted; }

[data-genre~="tape"] .s-photostrip__item,
[data-genre~="tape"] .s-casestudy-bento__tile { position: relative; }
[data-genre~="tape"] .s-photostrip__item::before,
[data-genre~="tape"] .s-casestudy-bento__tile::before {
  content: ""; position: absolute; top: -0.5rem; left: 50%; width: 4.5rem; height: 1.3rem;
  transform: translateX(-50%) rotate(-2deg); z-index: 2;
  background: color-mix(in oklab, var(--c-warning) 34%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c-text) 8%, transparent);
}

/* Chromatic split, on the one heading per page that can carry it. */
[data-genre~="glitch"] .s-hero__title {
  text-shadow:
    0.04em 0 0 color-mix(in oklab, var(--c-danger) 70%, transparent),
    -0.04em 0 0 color-mix(in oklab, var(--c-primary) 70%, transparent);
}

[data-genre~="sparkle"] .s-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle, color-mix(in oklab, var(--c-primary-fg) 70%, transparent) 1px, transparent 1.5px),
    radial-gradient(circle, color-mix(in oklab, var(--c-accent) 60%, transparent) 1px, transparent 1.5px);
  background-size: 90px 90px, 130px 130px;
  background-position: 0 0, 45px 65px;
  opacity: 0.5;
}
[data-genre~="sparkle"] .s-hero { position: relative; }

[data-genre~="wireframe"] .s-hero::before {
  content: ""; position: absolute; inset: -10% -5% auto auto;
  width: 32rem; height: 32rem; max-width: 60%; pointer-events: none;
  background-image:
    linear-gradient(color-mix(in oklab, var(--c-accent) 26%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--c-accent) 26%, transparent) 1px, transparent 1px);
  background-size: 2.2rem 2.2rem;
  transform: perspective(60rem) rotateX(58deg) rotateZ(42deg);
  mask-image: radial-gradient(circle at 50% 50%, #000 10%, transparent 68%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 10%, transparent 68%);
}
[data-genre~="wireframe"] .s-hero { position: relative; overflow: hidden; }

/* Type filled with imagery. Falls back to solid ink where background-clip is
   unsupported, so the headline is never invisible. */
[data-genre~="cutout"] .s-hero__title {
  background-image: linear-gradient(120deg,
    var(--c-primary), var(--c-accent) 55%, var(--c-text));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@supports not (background-clip: text) {
  [data-genre~="cutout"] .s-hero__title { color: var(--c-text); }
}
/* Every genre's motion, including ground animation, yields to the setting. */
@media (prefers-reduced-motion: reduce) {
  [data-genre] body { background-attachment: scroll; }
  [data-genre~="collage"] .s-features > *,
  [data-genre~="collage"] .s-hero__media { transform: none; }
  [data-genre~="springy"] .s-btn:hover,
  [data-genre~="springy"] .s-card:hover,
  [data-genre~="kinetic"] .s-btn:hover,
  [data-genre~="cinematic"] .s-article:hover .s-article__img { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .s-anim[data-anim$=":scroll"] { opacity: 1; }
  .s-btn:hover, .s-elev--raised:hover, .s-feature--card.s-elev--raised:hover, .s-plan:hover { transform: none; }
}