/* =============================================================
   Astrikos.ai inner pages (DESIGN.md 8.15). Loaded after site.css,
   which owns every token, the header, the footer and the homepage
   components the pages reuse. Everything here is prefixed pg-.
   Spacing is the 8px scale only; colours are the act variables
   (--fg, --fg-muted, --line ...) so one component reads on ink and
   on paper. Motion reuses site.css's entrance classes.
   ============================================================= */

/* ---------- Bands: one surface each, grouped into acts ---------- */
.pg-band { padding-block: var(--section-y); }
.pg-band--air { padding-block: var(--section-y-air); }
.pg-band--tight { padding-block: var(--section-y-air); }
.pg-band--lead { padding-top: var(--section-y-air); }
/* A band on the same surface as the one above continues it: the gap is the first band's own padding. */
.pg-band--follow { padding-top: 0; }
.pg-band--ink-950 { background: var(--ink-950); }
.pg-band--ink-900 { background: var(--ink-900); }
.pg-band--paper-50 { background: var(--paper-50); color: var(--fg); }
.pg-band--paper-100 { background: var(--paper-100); color: var(--fg); }

.pg-band :is(.section-head, .pg-head) { margin-bottom: var(--s-7); }
.pg-band :is(.section-head, .pg-head) + * { margin-top: 0; }
.pg-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--s-4) var(--s-6);
}
.pg-head h2 { max-width: 880px; }
@media (min-width: 1024px) {
  .pg-band :is(.section-head, .pg-head) { margin-bottom: var(--s-8); }
}
.pg-note { margin-top: var(--s-6); }

/* Shared type for statements inside a band */
.pg-big {
  max-width: 30ch;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.25;
  letter-spacing: -.015em;
  text-wrap: pretty;
}
.pg-body { max-width: 56ch; font-size: 18px; color: var(--fg-muted); text-wrap: pretty; }
.pg-body + .pg-body { margin-top: var(--s-4); }
.pg-sub { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; letter-spacing: -.015em; }

/* =============================================================
   Hero (review 16 Oct 2026): one design on every inner page.
   Breadcrumbs, the title and one action, nothing under the title.
   A slow loop sits at the right and fades out to the left, where
   the words are (from the foot on a phone); no scrim lies over the
   picture itself. The loop starts under the header, so the expanded
   site map from 1280 sits on plain ink. id="hero" so site.js runs
   the header modes exactly as on the homepage; pages.js plays it.
   ============================================================= */
.pg-hero {
  --fg: var(--on-ink);
  --fg-muted: var(--on-ink-muted);
  --fg-subtle: var(--on-ink-subtle);
  --line: var(--ink-700);
  --line-strong: var(--ink-600);
  --link: var(--accent-on-ink);
  --focus: var(--accent-on-ink);
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: end;
  min-height: clamp(560px, calc(100svh - var(--s-8)), 920px);
  overflow: hidden;
  padding-top: var(--header-h);
  background: var(--ink-950);
  color: var(--on-ink);
}
.pg-hero__media {
  position: absolute;
  top: var(--header-h);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  overflow: hidden;
  /* The fade: the picture is whole at the right and gives way to the ground toward the words. */
  -webkit-mask-image: linear-gradient(270deg, #000 0%, #000 34%, rgba(0, 0, 0, .55) 58%, transparent 86%);
  mask-image: linear-gradient(270deg, #000 0%, #000 34%, rgba(0, 0, 0, .55) 58%, transparent 86%);
}
.pg-hero__media :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pg-hero__media .hero__video { opacity: 0; transition: opacity 800ms var(--ease-out-expo); }
.pg-hero__media .hero__video.is-playing { opacity: 1; }
.pg-hero__in { position: relative; display: grid; gap: var(--s-7); padding-block: var(--s-8) var(--s-9); }
.pg-hero__words { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: var(--s-5); min-width: 0; max-width: 760px; }
.pg-hero__title { max-width: 18ch; }
.pg-hero__title.display-lg { max-width: 24ch; }
.pg-hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-3); }

.pg-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-2); font-size: 14px; color: var(--on-ink-muted); }
.pg-crumbs li { display: inline-flex; align-items: center; gap: var(--s-2); }
.pg-crumbs li + li::before { content: "/"; color: var(--on-ink-subtle); }
.pg-crumbs a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--on-ink-muted); text-decoration: none; }
.pg-crumbs a:hover { color: var(--on-ink); }
.pg-crumbs [aria-current] { color: var(--on-ink); }

.pg-hero__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4) var(--s-6);
  width: 100%;
  max-width: 760px;
  margin-top: var(--s-2);
  padding-top: var(--s-5);
  border-top: 1px solid var(--ink-700);
}
.pg-hero__meta div { display: grid; gap: var(--s-1); align-content: start; }
.pg-hero__meta dt { font-size: 13px; color: var(--on-ink-subtle); }
.pg-hero__meta dd { font-size: 15px; font-weight: 500; color: var(--on-ink); }
.pg-hero__meta dd a { display: inline-block; padding-block: var(--s-3); margin-block: calc(-1 * var(--s-3)); color: var(--accent-on-ink); }
@media (min-width: 768px) { .pg-hero__meta { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } }
@media (min-width: 1024px) {
  .pg-hero__in { padding-block: var(--s-9); }
  .pg-hero__media { left: 18%; }
}
/* Phones: the words first, then the picture under them, rising out of the ground from the foot. */
@media (max-width: 767px) {
  .pg-hero { display: flex; flex-direction: column; justify-content: flex-start; min-height: 0; }
  .pg-hero__in { order: 1; padding-block: var(--s-6) var(--s-5); }
  .pg-hero__media {
    position: relative;
    order: 2;
    top: auto;
    z-index: 0;
    aspect-ratio: 4 / 3;
    -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 45%, rgba(0, 0, 0, .5) 72%, transparent 100%);
    mask-image: linear-gradient(0deg, #000 0%, #000 45%, rgba(0, 0, 0, .5) 72%, transparent 100%);
  }
}

/* In-page jump list (media centre hero) */
.pg-jump ul { border-top: 1px solid var(--ink-700); }
.pg-jump a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  border-bottom: 1px solid var(--ink-700);
  color: var(--on-ink-muted);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--dur-hover) var(--ease-out-expo);
}
.pg-jump a:hover { color: var(--on-ink); }

/* =============================================================
   Registers: rows of type over hairlines (no boxes, no icons)
   ============================================================= */
.pg-rows { display: grid; border-top: 1px solid var(--line-strong); }
.pg-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--s-2) var(--s-4);
  align-content: start;
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--line-strong);
}
.pg-row:not(:has(> .pg-row__n)) { grid-template-columns: minmax(0, 1fr); }
.pg-row__n {
  grid-row: span 2;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 300;
  line-height: 1.3;
  color: var(--fg-subtle);
  font-variant-numeric: tabular-nums;
}
.pg-row__title { font-size: clamp(20px, 1.8vw, 24px); font-weight: 500; line-height: 1.25; letter-spacing: -.01em; }
.pg-row__text { grid-column: -2 / -1; max-width: 56ch; color: var(--fg-muted); text-wrap: pretty; }
@media (min-width: 1024px) {
  .pg-rows--c1 .pg-row { grid-template-columns: 64px minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-6); align-items: baseline; }
  .pg-rows--c1 .pg-row:not(:has(> .pg-row__n)) { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .pg-rows--c1 .pg-row__n { grid-row: auto; }
  .pg-rows--c1 .pg-row__text { grid-column: auto; }
  .pg-rows--c2, .pg-rows--c3 { column-gap: var(--s-7); border-top: 0; }
  .pg-rows--c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-rows--c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pg-rows--c2 .pg-row:nth-child(-n+2),
  .pg-rows--c3 .pg-row:nth-child(-n+3) { border-top: 1px solid var(--line-strong); }
}

/* Capability cells: a hairline, a title and one line */
.pg-grid { display: grid; gap: var(--s-6) var(--s-5); }
.pg-cell { position: relative; display: grid; align-content: start; gap: var(--s-3); padding-top: var(--s-5); }
.pg-cell__title { font-size: clamp(20px, 1.8vw, 24px); font-weight: 500; line-height: 1.25; letter-spacing: -.01em; }
.pg-cell__text { max-width: 40ch; color: var(--fg-muted); text-wrap: pretty; }
@media (min-width: 640px) { .pg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .pg-grid { gap: var(--s-7) var(--s-6); }
  .pg-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pg-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Line wipe (review 16 Oct 2026): in a [data-lines] set, each item's top hairline draws from the left in turn
   as the set arrives, and its title arrives in scattered letters like a section heading; the items themselves
   do not fade. Without motion the lines are simply there. */
:is(.pg-cell, .pg-trio__item, .pg-step)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--line-strong);
  transform-origin: left;
  transition: transform var(--dur-wipe) var(--ease-out-quint);
  transition-delay: calc(var(--rank, 0) * var(--cascade-step));
}
.js-motion [data-lines][data-cascade]:not(.is-in) > * { opacity: 1; transform: none; }
.js-motion [data-lines]:not(.is-in) > *::after { transform: scaleX(0); }

/* Statistics: the proof band's component, three across */
.pg-stats { margin-top: 0; }
.pg-stats--3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .pg-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .pg-stats--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pg-stats { gap: var(--s-7) var(--s-6); }
}
/* A statement said once in the display face: the standards in full, the rest receding (DESIGN.md 8.15). */
.pg-say { display: grid; gap: var(--s-6); max-width: 1040px; }
.pg-say p { font-family: var(--font-display); font-size: clamp(24px, 2.8vw, 40px); line-height: 1.28; letter-spacing: -.02em; color: var(--fg-muted); text-wrap: pretty; }
.pg-say p b { font-weight: 500; color: var(--fg); }
.pg-say p + p { padding-top: var(--s-6); border-top: 1px solid var(--line); font-size: clamp(20px, 2vw, 28px); }
.pg-say .link-arrow { justify-self: start; }
.pg-stats + .pg-say { margin-top: var(--s-8); padding-top: var(--s-8); border-top: 1px solid var(--line); }

/* Three capabilities side by side */
.pg-trio { display: grid; gap: var(--s-7); }
.pg-trio__item { position: relative; display: grid; align-content: start; gap: var(--s-4); padding-top: var(--s-5); }
.pg-trio__name { font-size: clamp(24px, 2.4vw, 36px); line-height: 1.1; letter-spacing: -.02em; }
.pg-trio__text { max-width: 40ch; color: var(--fg-muted); text-wrap: pretty; }
.pg-trio .v-stat { margin-top: var(--s-2); }
@media (min-width: 1024px) { .pg-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); } }

/* =============================================================
   Platform: four layers beside the Hairline "exploded" figure (the
   platform page's one bold move), the five steps, the layer stack
   ============================================================= */
.pg-figure {
  --hairline-plate: var(--ink-950);
  --hairline-hi: var(--accent-on-ink);
  --hairline-edge: var(--on-ink-muted);
  --hairline-mid: var(--on-ink-subtle);
  --hairline-lo: var(--ink-600);
  --hairline-stroke: .9;
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;
  touch-action: pan-y;
}
.pg-band--ink-900 .pg-figure { --hairline-plate: var(--ink-900); }
.pg-figure--sm { max-width: 320px; }

/* The layers as a scroll story (review 16 Oct 2026): the isometric stack stays in view while each layer's row
   arrives, and that layer's plate drops onto the stack (pages.js marks the plates and the rows). */
.pg-layers { display: grid; gap: var(--s-7); }
.pg-layers__pin { display: grid; gap: var(--s-6); }
.pg-layers__fig { width: 100%; max-width: 560px; margin-inline: auto; }
.iso-stack { width: 100%; height: auto; overflow: visible; }
.iso-guide { stroke: var(--on-ink-subtle); stroke-opacity: .5; stroke-width: 1; stroke-dasharray: 2 5; }
.iso-plate__top { fill: var(--ink-850); stroke: var(--on-ink-muted); stroke-width: 1; stroke-linejoin: round; }
.iso-plate__side { fill: var(--ink-700); stroke: var(--on-ink-muted); stroke-width: 1; stroke-linejoin: round; }
.iso-plate__side--front { fill: var(--ink-800); }
.iso-mark__line { fill: none; stroke: var(--on-ink-muted); stroke-width: 1; }
.iso-mark__dot { fill: var(--on-ink); }
.iso-mark__trend { fill: none; stroke: var(--on-ink); stroke-width: 1.25; stroke-dasharray: 3 3; }
.iso-mark__ring { fill: none; stroke: var(--on-ink); stroke-width: 1; }
.iso-mark__ring--in { stroke-dasharray: 2 4; }
.iso-hub__top, .iso-bar__top, .iso-blk__top, .iso-core__top { fill: var(--ink-600); stroke: var(--on-ink); stroke-width: .9; stroke-linejoin: round; }
.iso-hub__side, .iso-bar__side, .iso-blk__side, .iso-core__side { fill: var(--ink-700); stroke: var(--on-ink-muted); stroke-width: .9; stroke-linejoin: round; }
.iso-hub__side--front, .iso-bar__side--front, .iso-blk__side--front, .iso-core__side--front { fill: var(--ink-800); }
/* The layer being read lights in the accent. */
.iso-plate :is(polygon, polyline, circle) { transition: stroke 500ms var(--ease-out-quart), fill 500ms var(--ease-out-quart); }
.iso-plate.is-current .iso-plate__top { stroke: var(--accent-on-ink); fill: color-mix(in srgb, var(--accent-on-ink) 10%, var(--ink-850)); }
.iso-plate.is-current :is(.iso-mark__line, .iso-mark__ring, .iso-mark__trend) { stroke: var(--accent-on-ink); }
.iso-plate.is-current .iso-mark__dot { fill: var(--accent-on-ink); }
.iso-plate.is-current :is(.iso-hub__top, .iso-bar__top, .iso-blk__top, .iso-core__top) { stroke: var(--accent-on-ink); }
/* Dropping in: a plate waits above the stack, then falls onto its place on a spring. */
/* Layers drawing, 17 Oct 2026: layer 2 a spreadsheet with a magnifying glass over one cell, layer 3 3D charts,
   layer 4 a chatbot with speech bubbles round it. Same tokens and the same current-layer accent as the rest. */
.iso-sheet__top { fill: var(--ink-800); stroke: var(--on-ink-muted); stroke-width: .9; stroke-linejoin: round; }
.iso-sheet__side { fill: var(--ink-700); stroke: var(--on-ink-muted); stroke-width: .9; stroke-linejoin: round; }
.iso-sheet__side--front { fill: var(--ink-800); }
.iso-sheet__head { fill: var(--ink-600); }
.iso-sheet__hi { fill: color-mix(in srgb, var(--on-ink) 22%, var(--ink-800)); stroke: var(--on-ink); stroke-width: 1; }
.iso-sheet__grid { fill: none; stroke: var(--on-ink-subtle); stroke-opacity: .6; stroke-width: .7; }
.iso-sheet__val { fill: none; stroke: var(--on-ink-muted); stroke-width: 1.4; stroke-linecap: round; }
.iso-sheet__lab { fill: none; stroke: var(--on-ink); stroke-width: 1.6; stroke-linecap: round; }
.iso-lens__glass { fill: var(--on-ink); fill-opacity: .08; }
.iso-lens__rim { fill: none; stroke: var(--on-ink); stroke-width: 2.4; stroke-linejoin: round; }
.iso-lens__handle { fill: none; stroke: var(--on-ink); stroke-width: 4; stroke-linecap: round; }
.iso-lens__beam { fill: none; stroke: var(--on-ink-muted); stroke-width: .8; stroke-dasharray: 2 3; }
.iso-lens__shadow { fill: var(--on-ink); fill-opacity: .12; }
.iso-chart__top { stroke: var(--on-ink); stroke-width: .9; stroke-linejoin: round; }
.iso-chart__side { stroke: var(--on-ink-muted); stroke-width: .9; stroke-linejoin: round; }
.iso-chart--a .iso-chart__top { fill: color-mix(in srgb, var(--on-ink) 30%, var(--ink-700)); }
.iso-chart--b .iso-chart__top { fill: var(--ink-600); }
.iso-chart--c .iso-chart__top { fill: var(--ink-700); }
.iso-chart--d .iso-chart__top, .iso-chart--tile .iso-chart__top { fill: var(--ink-800); }
.iso-chart--a .iso-chart__side { fill: var(--ink-600); }
.iso-chart--b .iso-chart__side { fill: var(--ink-700); }
.iso-chart--c .iso-chart__side, .iso-chart--d .iso-chart__side, .iso-chart--tile .iso-chart__side { fill: var(--ink-800); }
.iso-chart .iso-chart__side--front { fill: var(--ink-850); }
.iso-mark__trend--solid { stroke-dasharray: none; stroke-linejoin: round; }
.iso-bot__top, .iso-bub__top { fill: var(--ink-600); stroke: var(--on-ink); stroke-width: .9; stroke-linejoin: round; }
.iso-bot__side, .iso-bub__side { fill: var(--ink-700); stroke: var(--on-ink-muted); stroke-width: .9; stroke-linejoin: round; }
.iso-bot__side--front, .iso-bub__side--front { fill: var(--ink-800); }
.iso-bot__screen { fill: var(--ink-950); stroke: var(--on-ink-muted); stroke-width: .8; }
.iso-bot__eye { fill: var(--on-ink); }
.iso-bot__smile { fill: none; stroke: var(--on-ink); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.iso-bot__tip { fill: var(--on-ink); }
.iso-bub__line { fill: none; stroke: var(--on-ink-muted); stroke-width: 1.4; stroke-linecap: round; }
.iso-bub__tail { fill: var(--ink-800); stroke: var(--on-ink-muted); stroke-width: .8; stroke-linejoin: round; }
.iso-bub--bot .iso-bub__side--front, .iso-bub--bot .iso-bub__tail { fill: color-mix(in srgb, var(--on-ink) 16%, var(--ink-800)); }
.iso-bub__tie { stroke-dasharray: 2 4; }
.iso-bub__stand { stroke-opacity: .6; }
.iso-typing__dot { fill: var(--on-ink); }
.iso-plate.is-current :is(.iso-sheet__top, .iso-chart__top, .iso-bot__top, .iso-bub__top, .iso-lens__rim, .iso-lens__handle, .iso-bot__smile) { stroke: var(--accent-on-ink); }
.iso-plate.is-current .iso-sheet__hi { fill: color-mix(in srgb, var(--accent-on-ink) 35%, var(--ink-800)); stroke: var(--accent-on-ink); }
.iso-plate.is-current :is(.iso-bot__eye, .iso-bot__tip, .iso-typing__dot) { fill: var(--accent-on-ink); }
.iso-plate.is-current .iso-mark__trend--solid { stroke: var(--accent-on-ink); }
.js-motion .iso-lens__in { animation: iso-hover 3.6s ease-in-out infinite alternate; }
.js-motion .iso-typing__dot { animation: iso-type 1.4s ease-in-out infinite; animation-delay: calc(var(--d) * 180ms); }
.js-motion .iso-bot__tip { animation: iso-type 2.4s ease-in-out infinite; }
@keyframes iso-hover { from { transform: translateY(0); } to { transform: translateY(-6px); } }
@keyframes iso-type { 0%, 100% { opacity: .3; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .iso-lens__in, .iso-typing__dot, .iso-bot__tip { animation: none; } }

.iso-plate__in { transition: transform 1000ms var(--ease-spring), opacity 500ms var(--ease-out-quart); }
.js-motion .pg-layers.is-story .iso-plate:not(.is-on) .iso-plate__in { opacity: 0; transform: translateY(-72px); }
.pg-layers__list { border-top: 1px solid var(--line); }
.pg-layers__item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--s-4);
  padding-block: var(--s-6);
  border-bottom: 1px solid var(--line);
  transition: opacity 500ms var(--ease-out-quart);
}
.pg-layers__item > div { display: grid; justify-items: start; gap: var(--s-2); }
.pg-layers__n { font-family: var(--font-display); font-size: 20px; font-weight: 300; line-height: 1.4; color: var(--fg-subtle); font-variant-numeric: tabular-nums; }
.pg-layers__name { font-size: clamp(24px, 2.4vw, 36px); line-height: 1.15; letter-spacing: -.02em; }
.pg-layers__verbs { font-family: var(--font-display); font-size: 15px; color: var(--link); }
.pg-layers__text { max-width: 52ch; color: var(--fg-muted); text-wrap: pretty; }
@media (min-width: 1024px) {
  .pg-layers { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-9); align-items: start; }
  /* The pin starts at the section heading, with the header's height and 48 above it (review 16 Oct 2026): the
     heading and the drawing hold together while the rows pass. */
  .pg-layers__pin { position: sticky; top: calc(var(--bar-h) + var(--s-6)); display: grid; gap: var(--s-6); }
  /* Each row holds the drawing long enough to read, as the platform story does; the rest recede. */
  .pg-layers.is-story .pg-layers__list { border-top: 0; }
  .pg-layers.is-story .pg-layers__item { min-height: 56vh; align-content: center; border-bottom: 0; opacity: .32; }
  .pg-layers.is-story .pg-layers__item.is-active { opacity: 1; }
  .pg-layers.is-story .pg-layers__item:last-child { min-height: 40vh; }
}

.pg-steps { display: grid; border-top: 1px solid var(--line-strong); }
/* Stacked under 1024 the steps are rows over a bottom rule; the drawn top line is for the row of five. */
.pg-step::after { display: none; }
.pg-step {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--s-2) var(--s-4);
  align-content: start;
  align-items: baseline;
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--line-strong);
}
.pg-step__n { font-family: var(--font-display); font-size: 20px; font-weight: 300; line-height: 1.3; color: var(--fg-subtle); font-variant-numeric: tabular-nums; }
.pg-step__name { font-size: 20px; font-weight: 500; line-height: 1.3; }
@media (min-width: 1024px) {
  .pg-steps { grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: var(--s-5); border-top: 0; }
  .pg-steps:has(> :nth-child(4):last-child) { --n: 4; }
  .pg-step { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); padding-top: var(--s-5); border-bottom: 0; }
  .pg-step::after { display: block; }
  /* A short gradient segment on each step's rule reads the steps as one flow, left to right. */
  .pg-step::before { content: ""; position: absolute; z-index: 1; left: 0; top: 0; width: var(--s-7); height: 1px; background: var(--grad); }
  .pg-step__n { font-size: clamp(40px, 4vw, 56px); line-height: 1; letter-spacing: -.04em; color: var(--fg); }
}

/* =============================================================
   From raw data to action: a pinned scroll story (DESIGN.md 8.21; picture rebuilt 22 Oct 2026). The heading and one
   canvas (assets/js/pipeline-flow.js: five framed stations along a line, the data as a cloud of points travelling
   between them, with label boxes) hold still while the page scrolls through a tall runway; the five steps below
   slide sideways so the current one is on the centre line. Without script: the plain row of five steps, no picture.
   ============================================================= */
.pg-pipe__fig { display: none; }
.pg-pipe__scrub { display: none; }
/* The band's own space above and below, set so the heading sits a section's height under the band before it while
   the pin is not yet holding (the pin itself keeps the header's height and 24 above the heading). */
.js .pg-band--pipe { padding-block: var(--s-6) var(--section-y-air); overflow-x: clip; }
.js .pg-pipe__runway { position: relative; height: 520svh; }
.js .pg-pipe__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--s-4);
  padding-top: calc(var(--bar-h) + var(--s-5));
  padding-bottom: var(--s-6);
}
/* The canvas fills the row between the heading and the steps; its frames take that row's shape. */
.js .pg-pipe__fig { display: block; position: relative; min-height: 0; width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); }
.pg-pipe__fig canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.js .pg-pipe__rail {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
  overflow: clip;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
}
.js .pg-pipe__track {
  --pipe-w: min(280px, 64vw);
  display: flex;
  gap: var(--s-7);
  width: max-content;
  padding-inline: 0;
  border-top: 0;
  will-change: transform;
}
.js .pg-pipe__step {
  flex: 0 0 var(--pipe-w);
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-2);
  padding-top: var(--s-4);
  padding-bottom: 0;
  border-bottom: 0;
  opacity: calc(.28 + .72 * var(--p, 0));
}
.pg-pipe.is-live:not([data-pipe-manual]) .pg-pipe__step { cursor: pointer; }
/* Each step's rule is the track's one signal: a hairline that fills with the brand line as the step comes to the middle. */
.js .pg-pipe__step::after { display: block; opacity: 1; transform: none !important; transition: none; }
.js .pg-pipe__step::before { width: 100%; transform: scaleX(var(--p, 0)); transform-origin: left; transition: none; z-index: 2; }
.js .pg-pipe__step .pg-step__n { font-size: clamp(40px, 4.4vw, 56px); line-height: 1; letter-spacing: -.04em; color: var(--fg); }
.js .pg-pipe__step .pg-step__name { font-size: clamp(18px, 1.6vw, 22px); }
.js .pg-pipe .section-head { padding-inline: 0; }
@media (max-width: 639px) { .js .pg-pipe__fig { -webkit-mask-image: none; mask-image: none; } }
@media (max-height: 640px) { .js .pg-pipe__pin { gap: var(--s-2); padding-top: calc(var(--bar-h) + var(--s-3)); padding-bottom: var(--s-4); } .js .pg-pipe__step .pg-step__n { font-size: 32px; } }
/* The canvas specimen: no runway, a range input drives the stage. */
.pg-pipe[data-pipe-manual] .pg-pipe__runway { height: auto; }
.pg-pipe[data-pipe-manual] .pg-pipe__pin { position: static; height: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); padding-block: var(--s-6); }
.pg-pipe[data-pipe-manual] .pg-pipe__fig { display: block; position: relative; width: 100%; height: auto; aspect-ratio: 16 / 7; }
.pg-pipe[data-pipe-manual] .pg-pipe__scrub { display: flex; align-items: center; gap: var(--s-3); justify-self: center; width: min(100%, 560px); font-size: 14px; color: var(--fg-muted); }
.pg-pipe[data-pipe-manual] .pg-pipe__scrub input { flex: 1; min-height: 44px; accent-color: var(--accent); }
.pg-pipe[data-pipe-manual] .pg-pipe__rail { width: 100%; margin-inline: 0; overflow: hidden; overflow: clip; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%); }
.pg-pipe[data-pipe-manual] .pg-pipe__track { --pipe-w: 240px; display: flex; gap: var(--s-7); width: max-content; padding-inline: 0; border-top: 0; }
.pg-pipe[data-pipe-manual] .pg-pipe__step { flex: 0 0 var(--pipe-w); grid-template-columns: minmax(0, 1fr); gap: var(--s-2); padding-top: var(--s-4); padding-bottom: 0; border-bottom: 0; opacity: calc(.28 + .72 * var(--p, 0)); }
.pg-pipe[data-pipe-manual] .pg-pipe__step::after { display: block; opacity: 1; transform: none !important; transition: none; }
.pg-pipe[data-pipe-manual] .pg-pipe__step::before { content: ""; position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 1px; background: var(--grad); transform: scaleX(var(--p, 0)); transform-origin: left; transition: none; }
.pg-pipe[data-pipe-manual] .pg-pipe__step .pg-step__n { font-size: 40px; line-height: 1; letter-spacing: -.04em; color: var(--fg); }

.pg-stack { border-top: 1px solid var(--line); }
.pg-layer {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--s-2) var(--s-4);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--line);
}
.pg-layer__n { grid-row: span 2; font-family: var(--font-display); font-size: 20px; font-weight: 300; line-height: 1.4; color: var(--fg-subtle); font-variant-numeric: tabular-nums; }
.pg-layer__head { display: grid; gap: var(--s-1); }
.pg-layer__name { font-size: clamp(22px, 2vw, 28px); line-height: 1.2; letter-spacing: -.015em; }
.pg-layer__verbs { font-family: var(--font-display); font-size: 15px; color: var(--link); }
.pg-layer__text { grid-column: 2; max-width: 56ch; color: var(--fg-muted); }
/* The layer the page is about carries the gradient on its top rule (a background, so the row needs no position). */
.pg-layer.is-hi { background: var(--grad) no-repeat 0 0 / 100% 1px; }
/* A picture per layer (review 16 Oct 2026), after the hover-reveal lists of editorial sites: on touch and under
   1024 it is a plain media block above the row; with a mouse from 1024 it is hidden until the row is hovered,
   then it opens just above the pointer and follows it a little behind (pages.js writes --mx, --my), so it sits
   over the rows already read and never over the hovered row's words. Decorative: the words carry everything. */
.pg-layer__media { grid-column: 1 / -1; overflow: hidden; aspect-ratio: 16 / 9; margin-bottom: var(--s-2); background: var(--ink-800); }
.pg-layer__media img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .pg-stack { position: relative; }
  .pg-stack .pg-layer { position: static; }
  .pg-layer__media {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: clamp(240px, 24vw, 360px);
    margin: 0;
    pointer-events: none;
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    /* Above the pointer, centred on it: over the rows already read, never over the hovered row's words. */
    transform: translate3d(calc(var(--mx, 0px) - 50%), calc(var(--my, 0px) - 100% - var(--s-5)), 0);
    transition: opacity 300ms var(--ease-out-quart), clip-path 600ms var(--ease-out-quint);
    box-shadow: var(--shadow-panel);
  }
  .pg-layer.is-hover .pg-layer__media { opacity: 1; clip-path: inset(0); }
  .pg-layer { transition: color var(--dur-hover) var(--ease-out-expo); }
  .pg-stack.is-hovering .pg-layer:not(.is-hover) { color: var(--fg-muted); }
}
@media (prefers-reduced-motion: reduce) and (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .pg-layer__media { transition: none; }
}
.pg-layer.is-hi .pg-layer__n { color: var(--fg); }
@media (min-width: 1024px) {
  .pg-layer { grid-template-columns: 64px minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-6); align-items: baseline; }
  .pg-layer__n { grid-row: auto; }
  .pg-layer__text { grid-column: auto; }
}

/* Partner quotes (review 22 Oct 2026, S!aP page). Each quote sits in its own square ink container on the paper band:
   the brand's mark in the top-right corner, the quote, then who said it. A very faint diagonal highlight is laid over the
   surface and, every so often, one slow sweep crosses it (a different moment in each container). Under reduced motion the
   highlight stays where it is. */
.pg-voices { display: grid; gap: var(--s-5); }
.pg-voices__more { display: grid; gap: var(--s-5); }
.pg-voice {
  --fg: var(--on-ink);
  --fg-muted: var(--on-ink-muted);
  position: relative;
  isolation: isolate;
  display: grid;
  gap: var(--s-6);
  grid-template-rows: auto 1fr auto;
  padding: var(--s-6) var(--s-5) var(--s-5);
  overflow: hidden;
  background: linear-gradient(135deg, rgba(242, 244, 248, .05) 0%, rgba(242, 244, 248, 0) 46%), var(--ink-850);
  border: 1px solid var(--ink-700);
  color: var(--fg);
}
.pg-voice::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0%, transparent 43%, rgba(242, 244, 248, .06) 50%, transparent 57%, transparent 100%);
  background-size: 320% 100%;
  background-position: 100% 0;
}
@media (prefers-reduced-motion: no-preference) {
  .pg-voice::after { animation: pg-voice-sheen 12s ease-in-out infinite; }
  .pg-voices__more .pg-voice:nth-child(1)::after { animation-delay: -4s; }
  .pg-voices__more .pg-voice:nth-child(2)::after { animation-delay: -8s; }
}
@keyframes pg-voice-sheen {
  0% { background-position: 100% 0; }
  38%, 100% { background-position: 0% 0; }
}
.pg-voice__mark { justify-self: end; height: var(--logo-h, 28px); width: auto; opacity: .9; }
.pg-voice blockquote p { font-family: var(--font-display); font-weight: 400; letter-spacing: -.015em; line-height: 1.25; color: var(--fg); text-wrap: pretty; }
.pg-voice figcaption { display: grid; gap: var(--s-1); font-size: 15px; line-height: 1.4; color: var(--fg-muted); }
.pg-voice figcaption strong { font-size: 16px; font-weight: 600; color: var(--fg); }
.pg-voice--lead blockquote p { font-size: clamp(26px, 2.6vw, 38px); max-width: 30em; }
.pg-voices__more .pg-voice blockquote p { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.3; }
@media (min-width: 768px) {
  .pg-voice { padding: var(--s-7) var(--s-7) var(--s-6); }
}
@media (min-width: 1024px) {
  .pg-voices__more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =============================================================
   Industries and use cases
   ============================================================= */
/* The Industries page (review 16 Oct 2026): each industry described briefly, words at the left and a plain picture at
   the right; under 1024 the picture comes first. A hairline separates the rows. */
.pg-inds { display: grid; }
.pg-ind { display: grid; gap: var(--s-6); padding-block: var(--s-8); border-top: 1px solid var(--line-strong); }
.pg-ind:first-child { padding-top: 0; border-top: 0; }
.pg-ind__media { order: -1; display: block; overflow: hidden; background: var(--ink-900); }
.pg-ind__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--dur-zoom) var(--ease-out-expo); }
.pg-ind__body { display: grid; justify-items: start; align-content: center; gap: var(--s-4); }
.pg-ind__n { font-family: var(--font-display); font-size: 20px; font-weight: 300; line-height: 1; color: var(--fg-subtle); font-variant-numeric: tabular-nums; }
.pg-ind__name { max-width: 22ch; }
.pg-ind__lead { max-width: 34ch; font-family: var(--font-display); font-size: clamp(18px, 1.6vw, 22px); line-height: 1.3; }
.pg-ind__text { max-width: 54ch; color: var(--fg-muted); text-wrap: pretty; }
.pg-ind__caps { width: 100%; max-width: 54ch; margin-top: var(--s-2); border-top: 1px solid var(--line-strong); }
.pg-ind__caps li { padding-block: var(--s-3); border-bottom: 1px solid var(--line-strong); font-size: 15px; line-height: 1.4; }
.pg-ind__ref { font-size: 14px; color: var(--fg-muted); }
.pg-ind__ref span { margin-right: var(--s-1); font-weight: 600; color: var(--fg); }
@media (hover: hover) and (pointer: fine) { .pg-ind__media:hover img { transform: scale(1.03); } }
@media (min-width: 1024px) {
  .pg-ind { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-9); align-items: center; padding-block: var(--s-9); }
  .pg-ind:first-child { padding-top: 0; }
  .pg-ind__media { order: 0; }
}
.pg-tiles { display: grid; gap: var(--s-4); }
.pg-tile__link {
  position: relative;
  isolation: isolate;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  background: var(--ink-900);
  color: var(--on-ink);
  text-decoration: none;
}
.pg-tile__media { position: absolute; inset: 0; z-index: -1; }
.pg-tile__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform var(--dur-zoom) var(--ease-out-expo); }
.pg-tile__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(5, 7, 13, .9) 0%, rgba(5, 7, 13, .55) 45%, rgba(5, 7, 13, .08) 100%);
}
.pg-tile__body { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: var(--s-2); padding: var(--s-5); }
.pg-tile__name { font-family: var(--font-display); font-size: clamp(20px, 1.8vw, 26px); font-weight: 500; line-height: 1.15; letter-spacing: -.01em; }
.pg-tile__arrow { position: absolute; top: var(--s-5); right: var(--s-5); font-size: 22px; transition: transform var(--dur-hover) var(--ease-out-expo); }
.pg-tile__link:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.pg-tile__link[aria-current] { outline: 1px solid var(--accent-on-ink); outline-offset: -1px; }
@media (hover: hover) and (pointer: fine) {
  .pg-tile__link:hover .pg-tile__media img { transform: scale(1); }
  .pg-tile__link:hover .pg-tile__arrow { transform: translate(2px, -2px); }
}
@media (min-width: 640px) {
  .pg-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-tile:first-child { grid-column: 1 / -1; }
  .pg-tile:first-child .pg-tile__link { aspect-ratio: 16 / 7; }
}
@media (min-width: 1024px) {
  .pg-tiles { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5); }
  .pg-tile { grid-column: span 3; }
  .pg-tile:nth-child(-n+3) { grid-column: span 4; }
  .pg-tile:nth-child(-n+3) .pg-tile__link { aspect-ratio: 3 / 2; }
}

/* Row links to every page of a kind (industry switcher, use cases covered, legal) */
.pg-links { display: grid; column-gap: var(--s-7); }
.pg-links .mrow { min-height: 56px; padding-block: var(--s-3); font-family: var(--font-display); font-size: clamp(18px, 1.6vw, 22px); font-weight: 400; }
.pg-links .mrow[aria-current]::after { transform: scaleX(1); background: var(--grad); }
.pg-links .mrow[aria-current] { color: var(--fg-muted); }
@media (min-width: 768px) { .pg-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Use case index, option A "Split index" (review 17 Oct 2026; extras/explorations/uc-options.html): a hairline list
   at the left, one large plain screen at the right. The open row shows its line and draws the brand line under
   itself. Phones: the screen above the list. Square, plain media. pages.js moves the open row. */
.ux-num { font-family: var(--font-display); font-weight: 300; font-variant-numeric: tabular-nums; }
.ux-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ux-a { display: grid; gap: var(--s-6); }
.ux-a__stage { position: relative; aspect-ratio: 16 / 10; order: -1; overflow: hidden; background: var(--paper-200); }
.ux-a__stage img { opacity: 0; transition: opacity 600ms var(--ease-out-quart); object-position: left top; }
.ux-a__stage img.is-on { opacity: 1; }
.ux-a__list { display: grid; align-content: start; border-top: 1px solid var(--paper-300); }
.ux-a__row { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) 24px; align-items: start; gap: var(--s-2); padding-block: var(--s-5); border-bottom: 1px solid var(--paper-300); color: var(--on-paper-muted); text-decoration: none; transition: color 400ms var(--ease-out-quart); }
.ux-a__row .ux-num { padding-top: 6px; font-size: 16px; }
.ux-a__name { display: block; font-family: var(--font-display); font-size: clamp(22px, 2vw, 30px); line-height: 1.15; letter-spacing: -.015em; }
.ux-a__line { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 500ms var(--ease-out-quart); }
.ux-a__line > span { display: block; overflow: hidden; font-size: 16px; color: var(--on-paper-muted); }
.ux-a__line > span::before { content: ""; display: block; height: var(--s-2); }
.ux-a__row i { padding-top: 6px; font-size: 20px; opacity: 0; transform: translateX(-8px); transition: opacity 400ms var(--ease-out-quart), transform 500ms var(--ease-out-quart); }
.ux-a__row::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform 700ms var(--ease-out-quart); }
.ux-a__row.is-active { color: var(--on-paper); }
.ux-a__row.is-active .ux-a__line { grid-template-rows: 1fr; }
.ux-a__row.is-active i { opacity: 1; transform: none; color: var(--link); }
.ux-a__row.is-active::after { transform: none; }
.ux-a__row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
@media (min-width: 1024px) {
  .ux-a { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: stretch; }
  .ux-a__stage { order: 1; aspect-ratio: auto; min-height: 560px; }
}

.pg-served-list { display: grid; column-gap: var(--s-7); border-top: 1px solid var(--line); }
.pg-served { display: grid; gap: var(--s-1); padding-block: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); }
.pg-served__name { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.25; }
.pg-served__name a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg); text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat 0 calc(100% - var(--s-2)) / 0 1px; transition: background-size var(--dur-line) var(--ease-out-quart); }
.pg-served__name a:hover, .pg-served__name a:focus-visible { background-size: 100% 1px; }
.pg-served__where { color: var(--fg-muted); max-width: 48ch; }
@media (min-width: 768px) {
  .pg-served-list { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 0; }
  .pg-served:nth-child(-n+2) { border-top: 1px solid var(--line); }
}

/* =============================================================
   Proof: the flagship story, the case register, screens, systems
   ============================================================= */
.pg-feature { display: grid; gap: var(--s-6); align-items: center; }
.pg-feature__media { overflow: hidden; background: var(--ink-800); }
.pg-feature__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: left top; }
.pg-feature__body { display: grid; justify-items: start; gap: var(--s-4); }
.pg-feature__client { font-size: 14px; font-weight: 600; color: var(--fg-muted); }
.pg-feature__title { max-width: 22ch; }
.pg-metrics { display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-7); margin-top: var(--s-2); }
.pg-metrics > div { display: flex; flex-direction: column-reverse; gap: var(--s-1); }
.pg-metrics dd { font-family: var(--font-display); font-size: clamp(40px, 4vw, 56px); font-weight: 300; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.pg-metrics dt { font-size: 14px; color: var(--fg-muted); }
@media (min-width: 1024px) {
  .pg-feature { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); }
  .pg-feature--rev .pg-feature__media { order: 2; }
}
.pg-features--pair { display: grid; gap: var(--s-7); }
.pg-features--pair .pg-feature { align-items: start; padding-top: var(--s-5); border-top: 1px solid var(--line); }
@media (min-width: 1024px) {
  .pg-features--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
  .pg-features--pair .pg-feature { grid-template-columns: minmax(0, 1fr); }
}

.pg-also { display: grid; justify-items: start; gap: var(--s-3); margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.pg-also__label { font-size: 14px; font-weight: 600; color: var(--fg-muted); }
.pg-also__list { max-width: 48ch; font-family: var(--font-display); font-size: clamp(20px, 2vw, 28px); line-height: 1.35; letter-spacing: -.01em; }
.pg-proof-links { margin-top: var(--s-8); }
.pg-proof-links .validations, .pg-reports .validations { max-width: 880px; }

/* Case studies are cards in the blog's design (review 16 Oct 2026): .insight from site.css. */
.insight[hidden] { display: none; }
.pg-cases .insight__title { font-size: 20px; }

/* Filters: the industry tabs' look, pressed instead of selected */
.pg-filter.tabs-wrap { margin: 0 0 var(--s-6); }
.tab[aria-pressed="true"] { color: var(--on-paper); }
.tab[aria-pressed="true"]::after { transform: scaleX(1); }
.pg-filter__n { margin-left: var(--s-1); font-size: 13px; color: var(--on-paper-subtle); font-variant-numeric: tabular-nums; }
.pg-posts .insight[hidden] { display: none; }
.pg-posts { margin-top: 0; }
/* Filtering changes which card comes first, so the blog grid keeps every card the same shape. */
@media (max-width: 1023px) {
  .pg-posts .insight:first-child { grid-column: auto; flex-direction: column; }
  .pg-posts .insight:first-child .insight__media { flex: none; aspect-ratio: 16 / 9; min-height: 0; }
  .pg-posts .insight:first-child .insight__body { padding: var(--s-5) var(--s-5) var(--s-4); }
}
.pg-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-1); margin-top: var(--s-7); }
.pg-pager[hidden] { display: none; }
.pg-pager button {
  min-width: 44px;
  min-height: 44px;
  padding-inline: var(--s-3);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--on-paper-muted);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.pg-pager button[aria-current="page"] { border-color: var(--on-paper-subtle); color: var(--on-paper); }
.pg-pager button:hover { color: var(--on-paper); }

.pg-gallery { display: grid; gap: var(--s-6) var(--s-5); }
/* Screens are plain media: square, no frame, no caption (review 16 Oct 2026). */
.pg-shot { overflow: hidden; background: var(--ink-800); }
.pg-shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: left top; }
@media (min-width: 768px) { .pg-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Systems integrated: one line, a label and a marquee (review 16 Oct 2026; site.css .rail). */
.rail { padding-block: var(--s-5); border-block: 1px solid var(--line); }
/* The Trusted by rail that closes the S!aP page (review 22 Oct 2026): no hairlines above or below, marks half as large
   again, and it runs on from the standards band above it (that band gives up 32 of its bottom padding, this one carries 64
   under it to the footer). */
.pg-band--trail { padding-bottom: var(--s-8); }
.pg-band--logos { padding-bottom: var(--s-8); }
.pg-band--logos .rail { padding-block: 0; border-block: 0; }
.pg-band--logos .rail .logo { height: calc(var(--logo-h, 32px) * 1.5); }
.pg-band--logos .rail .marquee__track { gap: var(--s-9); padding-right: var(--s-9); }
@media (max-width: 767px) { .pg-band--logos .rail .marquee__track { gap: var(--s-8); padding-right: var(--s-8); } }
.rail__item { display: inline-flex; align-items: center; gap: var(--s-3); font-family: var(--font-display); font-size: 20px; line-height: 1.2; color: var(--fg); }
.rail__item i { font-size: 22px; color: var(--link); }

/* Downloads waiting for their files: each row asks for access instead */
.pg-files { border-top: 1px solid var(--line-strong); }
.pg-file {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  grid-template-areas: "icon name get" "icon meta get";
  align-items: center;
  column-gap: var(--s-4);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--line-strong);
}
.pg-file__icon { grid-area: icon; font-size: 24px; color: var(--link); }
.pg-file__name { grid-area: name; font-size: 18px; font-weight: 500; }
.pg-file__meta { grid-area: meta; font-size: 14px; color: var(--fg-muted); }
.pg-file__get { grid-area: get; }

/* =============================================================
   Articles and legal text
   ============================================================= */
.pg-post-feature__link { display: grid; gap: var(--s-6); align-items: center; color: var(--fg); text-decoration: none; }
/* The picture is square and still (review 16 Oct 2026); the arrow and the title carry the hover. */
.pg-post-feature__media { overflow: hidden; aspect-ratio: 16 / 9; background: var(--paper-200); }
.pg-post-feature__media img { width: 100%; height: 100%; object-fit: cover; }
.pg-post-feature__body { display: grid; justify-items: start; gap: var(--s-4); }
.pg-post-feature__title { max-width: 24ch; font-family: var(--font-display); font-size: clamp(28px, 3vw, 44px); line-height: 1.12; letter-spacing: -.02em; }
.pg-post-feature__link:focus-visible { outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .pg-post-feature__title { background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; transition: background-size var(--dur-line) var(--ease-out-quart); }
  .pg-post-feature__link:hover .pg-post-feature__title { background-size: 100% 1px; }
  .pg-post-feature__link:hover .link-arrow i { transform: translateX(4px); }
}
@media (min-width: 1024px) { .pg-post-feature__link { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); } }

.pg-post-cover { overflow: hidden; margin-bottom: var(--s-8); border-radius: var(--r-lg); }
.pg-post-cover img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.pg-article { display: grid; gap: var(--s-8); }
@media (min-width: 1024px) {
  .pg-article { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--s-9); align-items: start; }
  .pg-aside { position: sticky; top: calc(var(--bar-h) + var(--s-6)); }
}
.pg-prose { max-width: 720px; font-size: 18px; line-height: 1.7; color: var(--fg); }
.pg-prose > * + * { margin-top: var(--s-5); }
.pg-prose h2 { margin-top: var(--s-8); font-size: clamp(26px, 2.4vw, 34px); line-height: 1.2; letter-spacing: -.015em; }
.pg-prose h2 + * { margin-top: var(--s-4); }
.pg-prose ul { padding-left: var(--s-5); list-style: disc; }
.pg-prose li + li { margin-top: var(--s-3); }
.pg-prose li::marker { color: var(--link); }
.pg-prose b { font-weight: 600; }
.pg-prose a { color: var(--link); }
.pg-prose__lead { font-family: var(--font-display); font-size: clamp(22px, 2vw, 28px); line-height: 1.4; letter-spacing: -.01em; }
.pg-prose__fig { margin-block: var(--s-7); overflow-x: clip; }
.pg-prose__fig img { width: 100%; border-radius: var(--r-lg); }
.pg-prose__fig figcaption { margin-top: var(--s-3); font-size: 14px; line-height: 1.5; color: var(--fg-muted); }

.pg-aside { display: grid; align-content: start; gap: var(--s-6); }
.pg-aside__box, .pg-aside__share { display: grid; gap: var(--s-2); padding-top: var(--s-5); border-top: 1px solid var(--line-strong); }
.pg-aside__label { font-size: 13px; font-weight: 600; color: var(--fg-muted); }
.pg-related { display: grid; }
.pg-related__item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-4); align-items: start; padding-block: var(--s-4); border-bottom: 1px solid var(--line); color: var(--fg); text-decoration: none; }
.pg-related li:first-child .pg-related__item { padding-top: var(--s-2); }
.pg-related__media { overflow: hidden; aspect-ratio: 4 / 3; background: var(--paper-200); }
.pg-related__media img { width: 100%; height: 100%; object-fit: cover; }
.pg-related__words { display: grid; gap: var(--s-1); }
.pg-related__title { font-family: var(--font-display); font-size: 16px; line-height: 1.3; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; transition: background-size var(--dur-line) var(--ease-out-quart); }
.pg-related__meta { font-size: 13px; color: var(--fg-muted); }
.pg-related__item:hover .pg-related__title, .pg-related__item:focus-visible .pg-related__title { background-size: 100% 1px; }
.pg-aside__link { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 44px; color: var(--fg); font-family: var(--font-display); font-size: 20px; line-height: 1.25; text-decoration: none; }
.pg-aside__link i { color: var(--link); transition: transform var(--dur-roll) var(--ease-out-quart); }
.pg-aside__link:hover i { transform: translateX(4px); }
.pg-aside__line { font-size: 15px; color: var(--fg-muted); }
.pg-share { display: flex; gap: var(--s-1); margin-left: calc(-1 * var(--s-3)); }
.pg-share :is(a, button) {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--fg);
  font-size: 20px;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur-hover) var(--ease-out-expo);
}
.pg-share :is(a, button):hover { color: var(--link); }
.pg-aside__copied { font-size: 14px; color: var(--success); }

.pg-legal { display: grid; gap: var(--s-7); }
.pg-toc { align-self: start; }
.pg-toc__label { margin-bottom: var(--s-3); font-size: 13px; font-weight: 600; color: var(--fg-muted); }
.pg-toc ol { border-top: 1px solid var(--line-strong); counter-reset: toc; }
.pg-toc li { counter-increment: toc; }
.pg-toc a {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  padding-block: var(--s-2);
  border-bottom: 1px solid var(--line);
  color: var(--fg-muted);
  font-size: 15px;
  line-height: 1.35;
  text-decoration: none;
}
.pg-toc a::before { content: counter(toc, decimal-leading-zero); flex: none; font-family: var(--font-display); font-weight: 300; color: var(--fg-subtle); font-variant-numeric: tabular-nums; }
.pg-toc a:hover, .pg-toc a[aria-current] { color: var(--fg); }
.pg-toc a[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--grad); }
.pg-legal .pg-prose > .pg-legal__sec + .pg-legal__sec { margin-top: var(--s-8); }
.pg-legal__sec h2 { margin-top: 0; }
.pg-legal__sec p + p { margin-top: var(--s-4); }
@media (min-width: 1024px) {
  .pg-legal { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-9); }
  .pg-toc { position: sticky; top: calc(var(--bar-h) + var(--s-6)); }
}

/* =============================================================
   Company: team, offices, journey, life
   ============================================================= */
.pg-team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-4); }
.pg-person { display: grid; align-content: start; gap: var(--s-1); }
.pg-person__media { overflow: hidden; aspect-ratio: 1 / 1; margin-bottom: var(--s-3); border-radius: var(--r-lg); background: var(--ink-800); }
.pg-person__media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.pg-person__name { font-size: 18px; font-weight: 500; line-height: 1.3; }
.pg-person__role { font-size: 14px; line-height: 1.45; color: var(--on-ink); }
.pg-person__exp { font-size: 13px; line-height: 1.5; color: var(--on-ink-muted); }
@media (hover: hover) and (pointer: fine) {
  /* Mouse only, as on the insight cards: portraits rest in grayscale and take their colour on hover. */
  .pg-person__media img { filter: grayscale(1); transition: filter 400ms var(--ease-in-out-quart); }
  .pg-person:hover .pg-person__media img { filter: none; }
}
@media (min-width: 768px) { .pg-team { gap: var(--s-7) var(--s-5); } }
@media (min-width: 1024px) { .pg-team { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.pg-offices { display: grid; gap: var(--s-7); }
/* Offices on an OpenStreetMap map (review 16 Oct 2026): Leaflet over OpenStreetMap's tiles, darkened, square,
   one pin per office; pages.js mounts it near view. The pin is a dot in the accent with a ring; its label is the city. */
.pg-map { position: relative; width: 100%; aspect-ratio: 16 / 7; overflow: hidden; background: var(--ink-850); }
.pg-map__canvas { position: absolute; inset: 0; background: var(--ink-850); }
.pg-map .leaflet-container { background: var(--ink-850); font-family: var(--font-body); }
/* OpenStreetMap's light tiles, turned to the page's ink: inverted, the hue turned back, the colour taken down. */
.pg-map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) saturate(.25) brightness(.78) contrast(.92); }
.pg-map .leaflet-control-attribution { background: rgb(5 7 13 / .72); color: var(--on-ink-muted); font-size: 11px; }
.pg-map .leaflet-control-attribution a { color: var(--on-ink); }
.pg-map .leaflet-control-zoom a { width: 36px; height: 36px; line-height: 36px; background: var(--ink-900); color: var(--on-ink); border-color: var(--ink-700); }
.pg-map .leaflet-bar { border: 1px solid var(--ink-700); border-radius: 0; }
.pg-map .leaflet-bar a { border-radius: 0; }
.pg-pin { width: 16px; height: 16px; }
.pg-pin__dot { display: block; width: 12px; height: 12px; margin: 2px; border-radius: var(--r-pill); background: var(--accent-on-ink); box-shadow: 0 0 0 4px rgba(142, 148, 255, .24); }
.pg-pin__label { position: absolute; left: 50%; bottom: calc(100% + var(--s-1)); font: 500 13px/1.2 var(--font-body); color: var(--on-ink); white-space: nowrap; transform: translateX(-50%); text-shadow: 0 1px 2px rgba(5, 7, 13, .9); }
@media (max-width: 767px) { .pg-map { aspect-ratio: 4 / 3; } }
.pg-office-list { display: grid; gap: var(--s-6) var(--s-5); }
.pg-office { display: grid; align-content: start; gap: var(--s-2); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.pg-office__city { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); font-size: 22px; font-weight: 500; line-height: 1.2; }
.pg-office__city span { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--fg-muted); }
.pg-office__role { font-size: 14px; color: var(--link); }
.pg-office address { font-size: 15px; line-height: 1.6; color: var(--fg-muted); }
.pg-office address b { color: var(--fg); font-weight: 600; }
.pg-office__tel { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg); font-weight: 500; text-underline-offset: 4px; }
@media (min-width: 640px) { .pg-office-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pg-office-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.pg-years .co-year { grid-template-columns: 136px minmax(0, 1fr); }
.pg-years .co-year__y { white-space: nowrap; }
.pg-years .co-year__t { font-size: 16px; }
.pg-year-list { display: grid; gap: var(--s-2); }
.pg-year-list li { position: relative; padding-left: var(--s-4); }
.pg-year-list li::before { content: ""; position: absolute; left: 0; top: .8em; width: 6px; height: 1px; background: currentColor; }
@media (min-width: 1024px) {
  .pg-years { column-gap: var(--s-7); }
  .pg-years .co-year { grid-template-columns: 192px minmax(0, 1fr); }
}

/* Points beside pictures, alternating sides (zigzag() in page_kit, review 22 Oct 2026): picture first when stacked;
   from 1024 the words take five columns and the picture six, one column apart, and every second row swaps sides. */
.pg-zig { display: grid; gap: var(--s-8); margin: 0; padding: 0; list-style: none; }
.pg-zig__row { display: grid; gap: var(--s-5); align-items: center; }
.pg-zig__media { order: -1; }
.pg-zig__media img { aspect-ratio: 16 / 10; }
.pg-zig__words { display: grid; justify-items: start; align-content: start; gap: var(--s-3); }
.pg-zig__n { font-family: var(--font-display); font-size: clamp(32px, 3vw, 40px); font-weight: 300; line-height: 1; letter-spacing: -.04em; color: var(--fg-subtle); font-variant-numeric: tabular-nums; margin-bottom: var(--s-2); }
.pg-zig__title { font-size: clamp(24px, 2.4vw, 32px); font-weight: 500; line-height: 1.15; letter-spacing: -.015em; }
.pg-zig__text { max-width: 40ch; font-size: 17px; line-height: 1.6; color: var(--fg-muted); text-wrap: pretty; }
@media (min-width: 1024px) {
  .pg-zig { gap: var(--s-9); }
  .pg-zig__row { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-6); }
  .pg-zig__words { grid-column: 1 / span 5; grid-row: 1; }
  .pg-zig__media { grid-column: 7 / -1; grid-row: 1; order: 0; }
  .pg-zig__row--rev .pg-zig__words { grid-column: 8 / -1; }
  .pg-zig__row--rev .pg-zig__media { grid-column: 1 / span 6; }
}

.pg-split { display: grid; gap: var(--s-7); align-items: center; }
.pg-split--text { align-items: start; }
.pg-split__words { display: grid; justify-items: start; align-content: start; gap: var(--s-5); }
.pg-photo { overflow: hidden; border-radius: var(--r-lg); background: var(--paper-200); }
.pg-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.pg-split .co-facts { margin-bottom: var(--s-2); }
@media (min-width: 1024px) {
  .pg-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-9); }
  .pg-split--rev > :first-child { order: 2; }
}

.pg-life { display: grid; gap: var(--s-5); }
@media (min-width: 1024px) { .pg-life { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-9); align-items: start; } }
.pg-mosaic { display: grid; gap: var(--s-4); margin-top: var(--s-8); }
.pg-mosaic figure { overflow: hidden; border-radius: var(--r-lg); background: var(--paper-200); }
.pg-mosaic img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 768px) {
  .pg-mosaic { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s-5); }
  .pg-mosaic__a { grid-row: span 2; }
  .pg-mosaic__a img { aspect-ratio: auto; }
}

.pg-empty { display: grid; gap: var(--s-6); align-items: center; padding-block: var(--s-7); border-block: 1px solid var(--line); }
.pg-empty__words { display: grid; justify-items: start; gap: var(--s-4); }
.pg-empty__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); margin-top: var(--s-2); }
.pg-empty .pg-figure { margin-inline: auto; }
@media (min-width: 768px) { .pg-empty { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-8); } }

/* =============================================================
   Media: podcast, events, films, certificates, routes
   ============================================================= */
.pg-pod { display: grid; gap: var(--s-7); }
.pg-pod__media { overflow: hidden; border-radius: var(--r-lg); background: var(--ink-800); }
.pg-pod__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pg-pod__body { display: grid; align-content: start; gap: var(--s-4); }
.pg-pod__name { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.05; letter-spacing: -.025em; }
.pg-pod__line { max-width: 44ch; font-size: 18px; color: var(--fg-muted); }
.pg-pod__latest { display: grid; gap: var(--s-1); margin-top: var(--s-4); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.pg-pod__label { font-size: 13px; font-weight: 600; color: var(--fg-muted); }
.pg-pod__ep { font-family: var(--font-display); font-size: clamp(22px, 2vw, 28px); line-height: 1.25; }
.pg-pod__guest, .pg-pod__where { font-size: 15px; color: var(--fg-muted); }
.pg-eps { border-top: 1px solid var(--line); }
.pg-ep { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--s-4); align-items: baseline; padding-block: var(--s-3); border-bottom: 1px solid var(--line); font-size: 15px; }
.pg-ep__n { color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.pg-ep__len { font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); }
@media (min-width: 1024px) { .pg-pod { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; } }

.pg-events { border-top: 1px solid var(--line-strong); }
.pg-events li { display: grid; gap: var(--s-1); padding-block: var(--s-4); border-bottom: 1px solid var(--line-strong); }
.pg-events__date { font-size: 13px; font-weight: 600; color: var(--fg-muted); }
.pg-events__name { font-family: var(--font-display); font-size: 22px; line-height: 1.25; }
.pg-events__place { font-size: 15px; color: var(--fg-muted); }
#events .pg-split + .pg-rows { margin-top: var(--s-8); }

.pg-videos { display: grid; gap: var(--s-6) var(--s-5); }
.pg-video__link { display: grid; gap: var(--s-3); color: var(--fg); text-decoration: none; }
.pg-video__media { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--r-lg); background: var(--ink-800); }
.pg-video__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform var(--dur-zoom) var(--ease-out-expo); }
.pg-video__play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(242, 244, 248, .32);
  border-radius: var(--r-pill);
  background: rgba(5, 7, 13, .45);
  color: var(--on-ink);
  font-size: 24px;
  transform: translate(-50%, -50%);
}
.pg-video__title { font-family: var(--font-display); font-size: 20px; line-height: 1.3; }
.pg-video__meta { font-size: 14px; color: var(--fg-muted); }
@media (hover: hover) and (pointer: fine) { .pg-video__link:hover .pg-video__media img { transform: scale(1); } }
@media (min-width: 768px) { .pg-videos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Certificates: each group a row of seals (review 16 Oct 2026: marks, not lines of text). */
.pg-certs { display: grid; gap: var(--s-7); }
.pg-certgroup { position: relative; display: grid; gap: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line-strong); }
.pg-certgroup__name { font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--fg-muted); }
@media (min-width: 1024px) { .pg-certgroup { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--s-6); } }
.pg-proof-trust { margin-top: var(--s-8); padding-top: var(--s-8); border-top: 1px solid var(--line); }
.pg-stats + .pg-proof-trust { margin-top: var(--s-8); }

.pg-routes { border-top: 1px solid var(--line-strong); }
.pg-route {
  position: relative;
  display: grid;
  gap: var(--s-4);
  padding-block: var(--s-6);
  border-bottom: 1px solid var(--line-strong);
  color: var(--fg);
  text-decoration: none;
}
.pg-route__media { overflow: hidden; aspect-ratio: 16 / 9; background: var(--paper-200); }
.pg-route__media img { width: 100%; height: 100%; object-fit: cover; object-position: left top; transform: scale(1.04); transition: transform var(--dur-zoom) var(--ease-out-expo); }
.pg-route__body { display: grid; gap: var(--s-2); }
.pg-route__name { font-family: var(--font-display); font-size: clamp(32px, 3.6vw, 56px); line-height: 1.05; letter-spacing: -.025em; }
.pg-route__line { max-width: 48ch; color: var(--fg-muted); }
.pg-route__arrow { display: none; font-size: 28px; color: var(--link); transition: transform var(--dur-roll) var(--ease-out-quart); }
@media (hover: hover) and (pointer: fine) {
  .pg-route:hover .pg-route__media img { transform: scale(1); }
  .pg-route:hover .pg-route__arrow { transform: translateX(4px); }
}
@media (min-width: 768px) {
  .pg-route { grid-template-columns: 240px minmax(0, 1fr) auto; align-items: center; gap: var(--s-7); }
  .pg-route__media { aspect-ratio: 3 / 2; }
  .pg-route__arrow { display: block; }
}

.pg-logo-grid { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-7) var(--s-8); }

/* =============================================================
   Forms (pages.js validates; the post is a marked placeholder)
   ============================================================= */
.pg-form { display: grid; gap: var(--s-6); max-width: 880px; }
.pg-form__grid { display: grid; gap: var(--s-5); }
.pg-field { display: grid; align-content: start; gap: var(--s-2); }
.pg-field__label { font-size: 14px; font-weight: 600; color: var(--fg); }
.pg-field__opt { font-weight: 400; color: var(--fg-muted); }
.pg-field__hint { font-size: 13px; color: var(--fg-muted); }
.pg-input {
  width: 100%;
  min-height: 56px;
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--fg-subtle);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--fg);
  font: inherit;
  font-size: 16px;
  transition: border-color var(--dur-hover) var(--ease-out-expo);
}
.pg-input::placeholder { color: var(--fg-subtle); }
.pg-input:hover { border-color: var(--fg-muted); }
.pg-input:focus-visible { border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: 2px; }
/* A field of several lines cannot be a pill: it takes the field radius, 24 (DESIGN.md 6). */
.pg-input--area { min-height: 144px; padding-block: var(--s-4); border-radius: var(--r-field); resize: vertical; }
.pg-input--file { padding: var(--s-2) var(--s-2) var(--s-2) var(--s-2); font-size: 15px; }
.pg-input--file::file-selector-button {
  margin-right: var(--s-4);
  min-height: 40px;
  padding: var(--s-2) var(--s-5);
  border: 1px solid var(--fg-subtle);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.pg-select { position: relative; display: block; }
.pg-select select { padding-right: var(--s-8); appearance: none; -webkit-appearance: none; cursor: pointer; }
.pg-select i { position: absolute; right: var(--s-5); top: 50%; font-size: 20px; color: var(--fg-muted); pointer-events: none; transform: translateY(-50%); }
.pg-input[aria-invalid="true"] { border-color: var(--danger); }
.act-ink .pg-input[aria-invalid="true"] { border-color: var(--danger-on-ink); }
.pg-field__err { display: flex; align-items: center; gap: var(--s-2); font-size: 14px; font-weight: 500; color: var(--danger); }
.act-ink .pg-field__err { color: var(--danger-on-ink); }
.pg-field__err[hidden] { display: none; }
.pg-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); }
.pg-form__note { max-width: 52ch; font-size: 14px; color: var(--fg-muted); }
.pg-form__note a { color: var(--link); }
.pg-form__done { display: flex; align-items: flex-start; gap: var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--line); font-family: var(--font-display); font-size: 22px; line-height: 1.35; }
.pg-form__done[hidden] { display: none; }
.pg-form__done i { flex: none; font-size: 28px; line-height: 1.1; color: var(--success); }
.act-ink .pg-form__done i { color: var(--success-on-ink); }
.pg-form__done:focus { outline: none; }
.pg-form.is-done :is(.pg-form__grid, .pg-form__foot) { display: none; }
@media (min-width: 640px) {
  .pg-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-field--full { grid-column: 1 / -1; }
  .pg-form--single .pg-form__grid { grid-template-columns: minmax(0, 1fr); }
}

/* FAQ: native disclosures over hairlines; the plus turns to a cross when open */
.pg-faq { max-width: 960px; border-top: 1px solid var(--line-strong); }
.pg-faq__item { border-bottom: 1px solid var(--line-strong); }
.pg-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 64px;
  padding-block: var(--s-4);
  font-family: var(--font-display);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}
.pg-faq__item summary::-webkit-details-marker { display: none; }
.pg-faq__item summary i { flex: none; font-size: 22px; color: var(--link); transition: transform var(--dur-hover) var(--ease-out-expo); }
.pg-faq__item[open] summary i { transform: rotate(45deg); }
.pg-faq__item summary:focus-visible { outline-offset: 4px; }
.pg-faq__a { max-width: 64ch; padding-bottom: var(--s-5); color: var(--fg-muted); }

.pg-contact { display: grid; gap: var(--s-8); }
.pg-support { display: grid; align-content: start; gap: var(--s-4); padding-top: var(--s-5); border-top: 1px solid var(--line-strong); }
.pg-support__list { display: grid; gap: var(--s-1); }
.pg-support__list li { display: flex; align-items: center; gap: var(--s-3); }
.pg-support__list i { font-size: 20px; color: var(--link); }
.pg-support__list a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg); font-size: 18px; font-weight: 500; text-underline-offset: 4px; }
.pg-support__note { font-size: 15px; }
@media (min-width: 1024px) { .pg-contact { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--s-9); align-items: start; } }

.pg-news { display: grid; gap: var(--s-7); }
.pg-news__side { display: grid; justify-items: start; align-content: start; gap: var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.pg-news__line { max-width: 40ch; color: var(--fg-muted); }
@media (min-width: 1024px) { .pg-news { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-9); align-items: start; } }

/* Placeholder media and copy waiting for the client's own: marked in markup, styled the same. */

/* =============================================================
   Routes: index.html holds every page; one shows at a time
   (assets/js/pages.js, DESIGN.md 8.15). While an inner page shows,
   the homepage's sections are out of the flow.
   ============================================================= */
.route[hidden] { display: none; }
html[data-view]:not([data-view="home"]) #main > :not(.route) { display: none; }
/* The router moves focus to the new page's heading for screen readers and keyboards; it is not a control, so no ring. */
#main h1[tabindex="-1"]:focus { outline: none; }

/* ---------- Get started box (S!aP page, review handoff 22 Oct 2026) ----------
   A boxed call to action dressed as the Try S!aP card: the 1px brand ring, the 4% tint, and the picture's two
   corner glows, blue low left and magenta low right, drawn from the accent pair. */
.pg-getstarted {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: start;
  gap: var(--s-7);
  min-height: 280px;
  align-content: center;
  padding: var(--s-8) var(--s-7);
  border-radius: var(--r-card);
}
.pg-getstarted::before,
.pg-getstarted::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }
.pg-getstarted::before {
  z-index: 1;
  padding: 1px;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.pg-getstarted::after {
  z-index: -1;
  background:
    radial-gradient(60% 120% at 0% 100%, color-mix(in srgb, var(--accent) 62%, transparent), transparent 70%),
    radial-gradient(55% 120% at 100% 100%, color-mix(in srgb, var(--accent-end) 48%, transparent), transparent 70%),
    rgb(242 244 248 / .04);
}
.pg-getstarted__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
/* The person is a cut-out standing on the box's floor at the right; the head rises above the ring and the figure sits above it (z-index 2, over the ring at 1), so the ring never crosses the face (decorative). */
.pg-getstarted__person { position: absolute; right: var(--s-8); bottom: 1px; z-index: 2; height: calc(100% + var(--s-7)); width: auto; max-width: 42%; object-fit: contain; object-position: bottom right; pointer-events: none; }
.pg-getstarted > :is(h2, .pg-getstarted__actions) { position: relative; z-index: 2; }
@media (max-width: 767px) { .pg-getstarted__person { display: none; } }
@media (max-width: 639px) { .pg-getstarted { padding: var(--s-7) var(--s-5); } }

/* See it in action (S!a page, review 22 Oct 2026): the demo clip in a plain square container with a hairline edge. The
   clip's own black is lifted to the page's ink so the frame has no visible seam. */
.pg-demo__frame { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--ink-950); border: 1px solid var(--ink-700); }
.pg-demo__poster,
.pg-demo__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pg-demo__video { opacity: 0; transition: opacity 600ms var(--ease-out-quart); }
.pg-demo__video.is-playing { opacity: 1; }
.pg-demo__pause {
  position: absolute;
  right: var(--s-4);
  bottom: var(--s-4);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(242, 244, 248, .32);
  border-radius: var(--r-pill);
  background: rgba(5, 7, 13, .45);
  color: var(--on-ink);
  font-size: 18px;
  cursor: pointer;
}
.pg-demo__pause:focus-visible { outline: 2px solid var(--accent-on-ink); outline-offset: 2px; }
.pg-demo__pause .ri-play-line { translate: .04em 0; }

/* Two cards fill the row (S!a page, review 22 Oct 2026): the blog's three columns would leave a hole. */
@media (min-width: 768px) { .pg-posts.pg-cases--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }