/* ==========================================================================
   oxagen.sh: the site pages, in Oxide
   The product, role, industry, and utility pages that scripts/lib/
   site-pages.mjs renders from content/site-pages. They take the look of
   Home and the product page: an opening over the glyph field with an
   eyebrow and one accent word, sections that alternate between the canvas
   and a gridded surface band, each under its place number, figures on a lit
   stage, and a closing card. The shell, the buttons, the cards, the split,
   the steps, and the support table come from oxagen.css, and the figures
   from figures.css. This file lays out what only these pages carry and
   writes no colour of its own. On a phone every block keeps the one outer
   gutter `.wrap` sets.
   ========================================================================== */

.sp-page {
  /* The arrow a card, a chip, and a contents row draw at their end, as a
     mask filled with the text colour. */
  --sp-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E");
  /* The check an in-scope row draws, and the dash an out-of-scope row draws. */
  --sp-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
  --sp-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 8h8'/%3E%3C/svg%3E");
  /* The surface band's dot grid and the stage's, drawn in the hairline. */
  --sp-dots: radial-gradient(
    color-mix(in srgb, var(--ink) 11%, transparent) 1px,
    transparent 1.5px
  );
  --sp-dots-size: calc(var(--ox-space) * 6) calc(var(--ox-space) * 6);
  /* The gold glow under a figure and the closing card. */
  --sp-glow: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--gold) 16%, transparent),
    transparent
  );
}

/* ---- the opening: the eyebrow, the title, the lead, the actions ---- */
.sp-head {
  position: relative;
  padding: calc(var(--nav-h) + var(--ox-space) * 20) 0
    clamp(calc(var(--ox-space) * 16), 8vw, calc(var(--ox-space) * 24));
}
/* A warm light behind the opening's right side, under the glyph field. */
.sp-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -20%;
  right: -12%;
  width: min(900px, 80vw);
  aspect-ratio: 1;
  background: var(--sp-glow);
  pointer-events: none;
}
.sp-hero .glyph-field {
  -webkit-mask-image: radial-gradient(
    90% 90% at 85% 30%,
    var(--ink) 10%,
    transparent 70%
  );
  mask-image: radial-gradient(
    90% 90% at 85% 30%,
    var(--ink) 10%,
    transparent 70%
  );
}
.sp-hero-grid {
  display: grid;
  gap: calc(var(--ox-space) * 12);
}
.sp-hero-grid.has-aside {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
@media (max-width: 960px) {
  .sp-hero-grid.has-aside {
    grid-template-columns: 1fr;
  }
}
/* An opening with nothing beside it stands centred, as Home's does, with
   the glyph field around the words and the light above them. */
.sp-hero-grid:not(.has-aside) {
  justify-items: center;
  text-align: center;
}
.sp-hero-grid:not(.has-aside) > .sp-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 860px;
}
.sp-hero-grid:not(.has-aside) .sp-actions {
  justify-content: center;
}
.sp-hero:has(> .sp-hero-grid:not(.has-aside))::before {
  top: -45%;
  right: auto;
  left: 50%;
  translate: -50% 0;
}
.sp-hero:has(> .sp-hero-grid:not(.has-aside)) .glyph-field {
  -webkit-mask-image: radial-gradient(
    70% 80% at 50% 45%,
    transparent 25%,
    var(--ink) 85%
  );
  mask-image: radial-gradient(
    70% 80% at 50% 45%,
    transparent 25%,
    var(--ink) 85%
  );
}
.sp-head h1 {
  max-width: 16ch;
  font-size: var(--fs-hero);
}
.sp-head .eyebrow {
  margin-bottom: calc(var(--ox-space) * 6);
}
.sp-hero-copy > .sp-lead {
  max-width: 54ch;
  margin-top: calc(var(--ox-space) * 6);
  color: var(--ink-2);
  font-size: var(--fs-lead);
}
.sp-crumb a {
  color: var(--ink-3);
  transition: color var(--motion-control);
}
.sp-crumb a:hover {
  color: var(--ink);
}
.sp-crumb-sep {
  color: var(--quiet);
}
.sp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--ox-space) * 3);
  margin-top: calc(var(--ox-space) * 9);
}

/* ---- the contents beside the opening: a glass card of numbered rows ---- */
.sp-toc {
  position: relative;
  isolation: isolate;
  padding: calc(var(--ox-space) * 6) calc(var(--ox-space) * 6)
    calc(var(--ox-space) * 3);
  border-radius: var(--r-lg);
}
.sp-toc::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: color-mix(in srgb, var(--panel) var(--pop-fill), transparent);
  -webkit-backdrop-filter: blur(var(--pop-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--pop-blur)) saturate(var(--glass-sat));
  box-shadow:
    var(--lit),
    0 0 0 1px var(--glass-ring),
    var(--shadow-pop);
}
.sp-toc-title {
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: calc(var(--ox-tracking-eyebrow) * 1.75);
  text-transform: uppercase;
}
.sp-toc ol {
  margin: calc(var(--ox-space) * 3) 0 0;
  padding: 0;
  list-style: none;
}
.sp-toc li + li {
  border-top: 1px solid var(--line);
}
.sp-toc a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: calc(var(--ox-space) * 4);
  align-items: center;
  padding: calc(var(--ox-space) * 3.25) 0;
  color: var(--ink-2);
  font-size: var(--fs-ui);
  transition: color var(--motion-control);
}
.sp-toc a::after {
  content: "";
  width: calc(var(--ox-space) * 4);
  height: calc(var(--ox-space) * 4);
  background: currentColor;
  -webkit-mask: var(--sp-arrow) center / contain no-repeat;
  mask: var(--sp-arrow) center / contain no-repeat;
  opacity: 0;
  translate: calc(var(--ox-space) * -1.5) 0;
  transition:
    opacity var(--motion-control),
    translate var(--motion-press) var(--ease);
}
.sp-toc a:hover {
  color: var(--ink);
}
.sp-toc a:hover::after {
  opacity: 1;
  translate: 0 0;
}
.sp-toc-n {
  color: var(--gold-mark);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-variant-numeric: tabular-nums;
}

/* ---- a section: the canvas or a gridded surface band ---- */
.sp-anchor {
  display: block;
  scroll-margin-top: calc(var(--nav-h) + var(--ox-space) * 4);
}
.sp-sec,
.sp-head {
  scroll-margin-top: var(--nav-h);
}
.sp-sec {
  position: relative;
  padding: clamp(calc(var(--ox-space) * 18), 9vw, calc(var(--ox-space) * 30))
    0;
}
.sp-sec > .wrap {
  position: relative;
}
.sp-sec.is-band {
  border-block: 1px solid var(--line);
  background: var(--band);
}
.sp-sec.is-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--sp-dots);
  background-size: var(--sp-dots-size);
  -webkit-mask-image: linear-gradient(
    to bottom,
    var(--ink),
    transparent 55%
  );
  mask-image: linear-gradient(to bottom, var(--ink), transparent 55%);
  pointer-events: none;
}

/* The head: the place number, the heading, and the intro. With an intro,
   a wide screen sets the heading on the left and the intro on the right,
   as Home's sections do. */
.sp-sec-head {
  max-width: 760px;
}
.sp-sec-head > .sp-place {
  margin-bottom: calc(var(--ox-space) * 5);
}
.sp-sec h2 {
  max-width: 22ch;
  font-size: var(--fs-h2);
}
.sp-sec-head > .sp-intro {
  max-width: 60ch;
  margin-top: calc(var(--ox-space) * 5);
  color: var(--ink-3);
  font-size: var(--fs-lead);
}
@media (min-width: 961px) {
  .sp-sec-head:has(> .sp-intro) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: calc(var(--ox-space) * 16);
    align-items: end;
    max-width: none;
  }
  .sp-sec-head:has(> .sp-intro) > :not(.sp-intro) {
    grid-column: 1;
  }
  .sp-sec-head:has(> .sp-intro) > .sp-intro {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0;
  }
}
/* What a head stands over starts well below it. */
.sp-sec > .wrap > .sp-sec-head + * {
  margin-top: calc(var(--ox-space) * 12);
}

/* Prose: the head on the left, held in view while its paragraphs scroll by
   on the right. The first paragraph reads as the section's lead. */
.sp-prose {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: calc(var(--ox-space) * 16);
  align-items: start;
}
.sp-prose > .sp-sec-head {
  position: sticky;
  top: calc(var(--nav-h) + var(--ox-space) * 8);
}
.sp-prose > .sp-sec-head + * {
  margin-top: 0;
}
.sp-prose h2 {
  font-size: clamp(var(--ox-m-h3), 3.6vw, var(--ox-m-h2));
}
.sp-prose .sp-copy p:first-child {
  color: var(--ink);
  font-size: var(--fs-lead);
}
@media (max-width: 960px) {
  .sp-prose {
    grid-template-columns: 1fr;
    gap: calc(var(--ox-space) * 6);
  }
  .sp-prose > .sp-sec-head {
    position: static;
  }
}
.sp-copy > * + * {
  margin-top: calc(var(--ox-space) * 5);
}
.sp-copy p,
.sp-intro {
  max-width: 64ch;
  color: var(--body);
  font-size: var(--fs-small);
}
.sp-split .sp-copy .sp-sec-head + * {
  margin-top: calc(var(--ox-space) * 6);
}

/* ---- the stage: a figure over a lit dot grid, as Home shows its product
   views ---- */
.sp-stage {
  position: relative;
  isolation: isolate;
  padding: clamp(calc(var(--ox-space) * 5), 4vw, calc(var(--ox-space) * 12));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--void);
}
.sp-stage::before,
.sp-stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.sp-stage::before {
  inset: 0;
  border-radius: inherit;
  background-image: var(--sp-dots);
  background-size: var(--sp-dots-size);
  -webkit-mask-image: radial-gradient(
    80% 80% at 50% 50%,
    var(--ink),
    transparent
  );
  mask-image: radial-gradient(80% 80% at 50% 50%, var(--ink), transparent);
}
.sp-stage::after {
  inset: 10% 15%;
  background: var(--sp-glow);
  filter: blur(calc(var(--ox-space) * 8));
}
.sp-stage .fig {
  margin: 0;
  box-shadow:
    var(--lit),
    0 0 0 1px var(--glass-ring),
    var(--shadow-pop);
}
.sp-sec-figure .sp-stage,
.sp-prose + .sp-stage {
  margin-top: calc(var(--ox-space) * 12);
}
.sp-sec-figure .sp-stage .sp-figure,
.sp-prose + .sp-stage .sp-figure {
  max-width: 760px;
  margin-inline: auto;
}
.sp-hero .sp-stage {
  padding: clamp(calc(var(--ox-space) * 4), 2.5vw, calc(var(--ox-space) * 8));
  background: color-mix(in srgb, var(--void) 72%, transparent);
}
.sp-split {
  align-items: center;
}
.sp-split .sp-figure > .fig {
  margin: 0;
}

/* ---- the figures as product views: a record's fields and a run of states,
   each under a title bar ---- */
.sp-stage .fig-title {
  display: flex;
  align-items: center;
  gap: calc(var(--ox-space) * 2.5);
  margin: calc(var(--ox-space) * -4.5) calc(var(--ox-space) * -5)
    calc(var(--ox-space) * 4);
  padding: calc(var(--ox-space) * 3.5) calc(var(--ox-space) * 5);
  border-bottom: 1px solid var(--line);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--raised);
}
.sp-stage .fig-title::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold-mark);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold-mark) 16%, transparent);
}
.sp-stage .fig-state-list {
  gap: calc(var(--ox-space) * 4);
}

/* A rule's answer: the words, after a mark whose shape names the kind. A
   solid disc is allowed, a ring is routed to a person, and a diamond is
   denied, so no answer rides on its tone alone. */
.fig-answer {
  display: inline-flex;
  align-items: baseline;
  gap: calc(var(--ox-space) * 2);
  color: var(--ink-2);
}
.fig-answer-mark {
  flex: none;
  box-sizing: border-box;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  translate: 0 calc(var(--ox-space) * 0.25);
}
.fig-answer.is-allowed .fig-answer-mark {
  background: var(--pass);
}
.fig-answer.is-approval .fig-answer-mark {
  border: 1.5px solid var(--approval);
}
.fig-answer.is-denied .fig-answer-mark {
  border-radius: 0;
  background: var(--fail);
  rotate: 45deg;
  scale: 0.85;
}
.fig-answer.is-allowed {
  color: var(--pass-ink);
}
.fig-answer.is-approval {
  color: var(--approval-ink);
}
.fig-answer.is-denied {
  color: var(--fail-ink);
}

/* A run's record: the run and its cost, then each step on a rail. */
.fig-run-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--ox-space) * 3) calc(var(--ox-space) * 5);
  padding-bottom: calc(var(--ox-space) * 4);
  border-bottom: 1px solid var(--line);
}
.fig-run-name,
.fig-run-total {
  display: grid;
  gap: calc(var(--ox-space) * 0.5);
}
.fig-run-name {
  flex: 1 1 auto;
  min-width: 0;
}
.fig-run-name b {
  color: var(--ink);
  font-size: var(--fs-ui);
}
.fig-run-name small,
.fig-run-total small {
  color: var(--ink-3);
}
.fig-run-total {
  text-align: right;
}
.fig-run-total b {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-lead);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.fig-run-live {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--ox-space) * 2);
  padding: calc(var(--ox-space) * 0.5) calc(var(--ox-space) * 2.5);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  color: var(--ink);
}
.fig-run-live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-mark);
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--gold-mark) 22%, transparent);
  animation: sp-ping var(--motion-orbit) ease-in-out infinite;
}
@keyframes sp-ping {
  50% {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold-mark) 8%, transparent);
  }
}
.fig-run-events {
  position: relative;
  display: grid;
  margin-top: calc(var(--ox-space) * 2);
}
.fig.fig-run li + li {
  margin-top: 0;
}
.fig-run-event {
  position: relative;
  display: grid;
  grid-template-columns: calc(var(--ox-space) * 11) auto minmax(0, 1fr) auto;
  gap: calc(var(--ox-space) * 3);
  align-items: start;
  padding: calc(var(--ox-space) * 2.75) 0;
}
/* The rail: a hairline through every node, ending at the last one. */
.fig-run-event:not(:last-child)::before {
  content: "";
  position: absolute;
  top: calc(var(--ox-space) * 5.5);
  bottom: calc(var(--ox-space) * -3.75);
  left: calc(var(--ox-space) * 15.25 - 0.5px);
  border-left: 1px solid var(--line);
}
.fig-run-event time {
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.fig-run-node {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: calc(var(--ox-space) * 2.5);
  height: calc(var(--ox-space) * 2.5);
  margin-top: calc(var(--ox-space) * 1);
  border: 1.5px solid var(--ink-3);
  border-radius: 50%;
  background: var(--panel);
}
.fig-run-event.is-routed .fig-run-node {
  border-color: var(--approval);
}
.fig-run-event.is-approved .fig-run-node {
  border-color: var(--pass);
  background: var(--pass);
}
.fig-run-event.is-denied .fig-run-node {
  border-color: var(--fail);
  background: var(--fail);
}
.fig-run-event.is-current .fig-run-node {
  border-color: var(--gold-mark);
  background: var(--gold-mark);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold-mark) 20%, transparent);
  animation: sp-ping var(--motion-orbit) ease-in-out infinite;
}
.fig-run-body {
  display: grid;
  gap: calc(var(--ox-space) * 0.5);
  min-width: 0;
}
.fig-run-body b {
  color: var(--ink);
  font-weight: 500;
  overflow-wrap: anywhere;
}
.fig-run-body small {
  color: var(--ink-3);
}
.fig-run-event.is-routed .fig-run-body small {
  color: var(--approval-ink);
}
.fig-run-event.is-approved .fig-run-body small {
  color: var(--pass-ink);
}
.fig-run-cost {
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.fig-run-lock {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--ox-space) * 2) calc(var(--ox-space) * 3);
  margin-top: calc(var(--ox-space) * 2);
  padding: calc(var(--ox-space) * 3) calc(var(--ox-space) * 3.5);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--void);
}
.fig-run-lock > span {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
}
.fig-run-lock b {
  color: var(--ink);
  font-weight: 500;
}
.fig-run-lock small {
  color: var(--ink-3);
}
.fig-run-lock code {
  color: var(--ink-3);
}
.fig-run-lock-glyph {
  flex: none;
  width: calc(var(--ox-space) * 5);
  height: calc(var(--ox-space) * 5);
  fill: none;
  stroke: var(--gold-mark);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@container (max-width: 380px) {
  .fig-run-event {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .fig-run-event time {
    grid-column: 2 / -1;
  }
  .fig-run-event:not(:last-child)::before {
    display: none;
  }
}

/* One agent's mandate: its clauses, each with the team that owns it. */
.fig-mandate-head {
  display: grid;
  gap: calc(var(--ox-space) * 0.5);
  padding-bottom: calc(var(--ox-space) * 4);
  border-bottom: 1px solid var(--line);
}
.fig-mandate-head b {
  color: var(--ink);
  font-size: var(--fs-ui);
}
.fig-mandate-head small {
  color: var(--ink-3);
}
.fig-clauses {
  display: grid;
}
.fig.fig-mandate li + li {
  margin-top: 0;
  border-top: 1px solid var(--line);
}
.fig-clause {
  display: grid;
  gap: calc(var(--ox-space) * 2);
  padding: calc(var(--ox-space) * 3.5) 0;
}
.fig-clause-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--ox-space) * 3);
}
.fig-clause-top b {
  color: var(--ink);
  font-weight: 500;
}
.fig-clause-owner {
  padding: 0 calc(var(--ox-space) * 2);
  border: 1px solid var(--line);
  border-radius: var(--r-badge);
  color: var(--ink-3);
  font-family: var(--font-mono);
  letter-spacing: var(--ox-tracking-eyebrow);
  text-transform: uppercase;
}
.fig-clause-text {
  color: var(--ink-2);
}
.fig-meter {
  display: grid;
  gap: calc(var(--ox-space) * 1.5);
}
.fig-meter-track {
  display: block;
  height: calc(var(--ox-space) * 1.5);
  border-radius: var(--r-pill);
  background: var(--raised);
  overflow: hidden;
}
.fig-meter-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ink-2);
}
.fig-meter-label {
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.fig-chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--ox-space) * 1.5);
}
.fig-chips code {
  padding: calc(var(--ox-space) * 0.5) calc(var(--ox-space) * 2);
  border: 1px solid var(--line);
  border-radius: var(--r-badge);
  background: var(--raised);
  color: var(--ink-2);
}
.fig-mandate-req {
  display: grid;
  gap: calc(var(--ox-space) * 1);
  margin-top: calc(var(--ox-space) * 1);
  padding: calc(var(--ox-space) * 3.5);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--void);
}
.fig-mandate-req-label {
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: calc(var(--ox-tracking-eyebrow) * 1.75);
  text-transform: uppercase;
}
.fig-mandate-req b {
  color: var(--ink);
  font-weight: 500;
}

/* Requests and the rule that answered each. */
.fig-request-list {
  display: grid;
}
.fig.fig-requests li + li {
  margin-top: 0;
  border-top: 1px solid var(--line);
}
.fig-request {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--ox-space) * 1) calc(var(--ox-space) * 4);
  padding: calc(var(--ox-space) * 3.25) 0;
}
.fig-request-body {
  display: grid;
  gap: calc(var(--ox-space) * 1);
  min-width: 0;
}
.fig-request-body b {
  color: var(--ink);
  font-weight: 500;
}
.fig-request-agent {
  color: var(--ink-3);
  font-family: var(--font-mono);
  letter-spacing: var(--ox-tracking-eyebrow);
  text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
  .fig-run-live::before,
  .fig-run-event.is-current .fig-run-node {
    animation: none;
  }
}
html[data-motion="off"] .fig-run-live::before,
html[data-motion="off"] .fig-run-event.is-current .fig-run-node {
  animation: none;
}

/* ---- cards: an icon tile, the words, and an arrow that leans in ---- */
.sp-cards {
  display: grid;
  gap: calc(var(--ox-space) * 5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sp-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sp-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sp-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 960px) {
  .sp-cols-3,
  .sp-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 660px) {
  .sp-cards {
    grid-template-columns: 1fr;
  }
}
.sp-card {
  isolation: isolate;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: calc(var(--ox-space) * 7);
  transition:
    border-color var(--motion-control),
    translate var(--motion-press) var(--ease),
    box-shadow var(--motion-press);
}
/* A light from the card's top corner that warms under the pointer. */
.sp-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -40%;
  right: -30%;
  width: 70%;
  aspect-ratio: 1;
  background: var(--sp-glow);
  opacity: 0.35;
  pointer-events: none;
  transition: opacity var(--motion-control);
}
.sp-card > p {
  margin-bottom: calc(var(--ox-space) * 6);
}
.sp-card:not(.ext)::after {
  content: "";
  flex: none;
  width: calc(var(--ox-space) * 4.5);
  height: calc(var(--ox-space) * 4.5);
  margin-top: auto;
  background: var(--ink-3);
  -webkit-mask: var(--sp-arrow) center / contain no-repeat;
  mask: var(--sp-arrow) center / contain no-repeat;
  transition:
    background-color var(--motion-control),
    translate var(--motion-press) var(--ease);
}
a.sp-card:hover {
  border-color: var(--rule);
  translate: 0 calc(var(--ox-space) * -1);
  box-shadow:
    var(--lit),
    0 0 0 4px color-mix(in srgb, var(--gold-mark) 10%, transparent),
    var(--panel-shadow);
}
a.sp-card:hover::before {
  opacity: 1;
}
a.sp-card:hover::after {
  background: var(--gold-mark);
  translate: calc(var(--ox-space) * 1) 0;
}
.sp-card h3,
.sp-card h3:first-child {
  margin: 0 0 calc(var(--ox-space) * 2);
}
.sp-card .card-icon {
  margin-bottom: calc(var(--ox-space) * 6);
  border-color: color-mix(in srgb, var(--gold-mark) 30%, var(--line));
  background: color-mix(in srgb, var(--gold-mark) 8%, var(--void));
}
.sp-card .card-icon svg {
  stroke: var(--gold-mark);
}

/* ---- chips: a pill link with its arrow ---- */
.sp-links {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--ox-space) * 3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sp-chip {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--ox-space) * 2.5);
  min-height: calc(var(--ox-space) * 11);
  padding: 0 calc(var(--ox-space) * 4) 0 calc(var(--ox-space) * 5);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--panel);
  box-shadow: var(--lit);
  color: var(--ink);
  font-size: var(--fs-ui);
  transition:
    border-color var(--motion-control),
    box-shadow var(--motion-press);
}
.sp-chip:not(.ext)::after {
  content: "";
  width: calc(var(--ox-space) * 3.5);
  height: calc(var(--ox-space) * 3.5);
  background: var(--ink-3);
  -webkit-mask: var(--sp-arrow) center / contain no-repeat;
  mask: var(--sp-arrow) center / contain no-repeat;
  transition:
    background-color var(--motion-control),
    translate var(--motion-press) var(--ease);
}
.sp-chip:hover {
  border-color: var(--gold-mark);
  box-shadow:
    var(--lit),
    0 0 0 4px color-mix(in srgb, var(--gold-mark) 12%, transparent);
}
.sp-chip:hover::after {
  background: var(--gold-mark);
  translate: calc(var(--ox-space) * 0.75) 0;
}

/* ---- steps: numbered stops on one line, each a lit card ---- */
.sp-steps {
  position: relative;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: calc(var(--ox-space) * 5);
}
.sp-steps > li {
  position: relative;
  padding: calc(var(--ox-space) * 6);
}
.sp-steps > li::before {
  width: calc(var(--ox-space) * 9);
  height: calc(var(--ox-space) * 9);
  margin-bottom: calc(var(--ox-space) * 5);
  border-color: color-mix(in srgb, var(--gold-mark) 45%, var(--rule));
  background: var(--void);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold-mark) 10%, transparent);
  color: var(--gold-mark);
}
/* The line that joins one step's number to the next. */
.sp-steps > li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--ox-space) * 10.5);
  left: calc(var(--ox-space) * 16);
  right: calc(var(--ox-space) * -5);
  border-top: 1px dashed color-mix(in srgb, var(--gold-mark) 40%, var(--line));
}
@media (max-width: 1000px) {
  .sp-steps > li:not(:last-child)::after {
    display: none;
  }
}
.sp-step-state {
  display: inline-block;
  margin-bottom: calc(var(--ox-space) * 2);
  padding: 0 calc(var(--ox-space) * 2.25);
  border: 1px solid var(--rule);
  border-radius: var(--r-badge);
  color: var(--ink-2);
  font-size: var(--fs-micro);
}
.sp-step-state.is-pending {
  border-style: dashed;
  color: var(--ink-3);
}
.sp-steps > li.is-current {
  border-color: var(--rule);
}

/* ---- the table: the support table as a product view, scrolling in its
   own box ---- */
/* The region scrolls by keyboard, so it takes focus. Its panel shadow
   replaces the global focus ring, so the ring is drawn again on top. */
.sp-table:focus-visible {
  outline: none;
  box-shadow:
    var(--focus-ring),
    var(--lit),
    var(--panel-shadow);
}
.sp-table caption {
  padding: calc(var(--ox-space) * 3.5) calc(var(--ox-space) * 5);
  border-bottom: 1px solid var(--line);
  color: var(--ink-3);
  font-size: var(--fs-micro);
  text-align: left;
}
.sp-table caption::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: calc(var(--ox-space) * 3);
  border-radius: 50%;
  background: var(--gold-mark);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold-mark) 16%, transparent);
  vertical-align: middle;
}
.sp-table .matrix th,
.sp-table .matrix td {
  padding: calc(var(--ox-space) * 4) calc(var(--ox-space) * 5);
}
.sp-table .matrix thead th {
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: var(--ox-tracking-eyebrow);
  text-transform: uppercase;
}
.sp-table .matrix tbody tr {
  transition: background-color var(--motion-control);
}
.sp-table .matrix tbody tr:hover {
  background: var(--raised);
}
.sp-table .sup.na {
  color: var(--ink-3);
}
.sp-table .sup.na::before {
  border-style: dashed;
  border-color: var(--ink-3);
}

/* ---- scope: what a control covers, and what it leaves out ---- */
.sp-scope {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--ox-space) * 5);
}
@media (max-width: 660px) {
  .sp-scope {
    grid-template-columns: 1fr;
  }
}
.sp-scope-col {
  position: relative;
  overflow: hidden;
  padding: calc(var(--ox-space) * 7);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow:
    var(--lit),
    var(--panel-shadow);
}
/* The covered side carries a gold edge along its top. */
.sp-scope-col.is-in::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-mark), transparent);
}
.sp-scope-col.is-out {
  border-style: dashed;
  background: transparent;
  box-shadow: none;
}
.sp-scope-col h3 {
  font-size: var(--fs-card);
}
.sp-scope-col ul {
  margin: calc(var(--ox-space) * 5) 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-2);
  font-size: var(--fs-small);
}
.sp-scope-col li {
  position: relative;
  padding-left: calc(var(--ox-space) * 8);
}
.sp-scope-col li::before {
  content: "";
  position: absolute;
  top: calc(var(--ox-space) * 0.75);
  left: 0;
  width: calc(var(--ox-space) * 4.5);
  height: calc(var(--ox-space) * 4.5);
  -webkit-mask: var(--sp-check) center / contain no-repeat;
  mask: var(--sp-check) center / contain no-repeat;
  background: var(--pass);
}
.sp-scope-col.is-out li::before {
  -webkit-mask-image: var(--sp-dash);
  mask-image: var(--sp-dash);
  background: var(--ink-3);
}
.sp-scope-col li + li {
  margin-top: calc(var(--ox-space) * 3.5);
}

/* ---- related pages: a short row of cards before the closing ---- */
.sp-related h2 {
  font-size: clamp(var(--ox-m-h3), 3.6vw, var(--ox-m-h2));
}

/* ---- the demo request: the walkthrough beside the form ---- */
.sp-walk {
  margin: calc(var(--ox-space) * 6) 0 0;
  padding-left: calc(var(--ox-space) * 5);
  color: var(--ink-2);
  font-size: var(--fs-small);
}
.sp-walk li + li {
  margin-top: calc(var(--ox-space) * 3);
}
.sp-walk b {
  color: var(--ink);
  font-weight: 600;
}
.sp-demo [data-island="demo-form"] {
  min-width: 0;
}
/* The demo form's own classes, drawn here on the house roles. Home draws
   the same component with its own stylesheet. */
.sp-demo .h-form {
  display: flex;
  flex-direction: column;
  gap: calc(var(--ox-space) * 4);
  padding: calc(var(--ox-space) * 7);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow:
    var(--lit),
    var(--panel-shadow);
}
.sp-demo .h-field {
  display: flex;
  flex-direction: column;
  gap: calc(var(--ox-space) * 1.5);
}
.sp-demo .h-field label {
  color: var(--ink);
  font-size: var(--fs-ui);
  font-weight: 600;
}
.sp-demo .h-field label small {
  color: var(--ink-3);
  font-weight: 400;
}
.sp-demo .h-field input,
.sp-demo .h-field textarea {
  width: 100%;
  min-height: calc(var(--ox-space) * 11);
  padding: calc(var(--ox-space) * 2.5) calc(var(--ox-space) * 3.5);
  border: 1px solid var(--line);
  border-radius: var(--r-field);
  background: var(--void);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-small);
  transition:
    border-color var(--motion-control),
    box-shadow var(--motion-control);
}
.sp-demo .h-field textarea {
  min-height: calc(var(--ox-space) * 24);
  resize: vertical;
}
.sp-demo .h-field input:focus-visible,
.sp-demo .h-field textarea:focus-visible {
  border-color: var(--focus-line);
  box-shadow: var(--focus-ring);
}
.sp-demo .h-form .btn {
  align-self: flex-start;
}
.sp-demo .h-form-note,
.sp-demo .h-form-status {
  margin: 0;
  color: var(--ink-3);
  font-size: var(--fs-micro);
}
.sp-demo .h-form-status {
  color: var(--ink);
  font-size: var(--fs-ui);
}
.sp-demo .h-form-note a,
.sp-demo .h-form-status a {
  color: var(--link);
  text-decoration: underline 1px var(--rust);
  text-underline-offset: 0.22em;
}
.sp-demo .h-form-status[hidden] {
  display: none;
}
@media (max-width: 560px) {
  .sp-demo .h-form {
    padding: calc(var(--ox-space) * 5);
  }
}

/* ---- the closing action: the mark, the heading, and the actions on a lit
   card inside the glyph field ---- */
.sp-cta {
  position: relative;
  padding: clamp(calc(var(--ox-space) * 20), 10vw, calc(var(--ox-space) * 32))
    0;
  border-top: 1px solid var(--line);
}
.sp-sec.is-band + .sp-cta {
  border-top: 0;
}
.sp-cta-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 820px;
  margin-inline: auto;
  padding: clamp(calc(var(--ox-space) * 10), 6vw, calc(var(--ox-space) * 18))
    clamp(calc(var(--ox-space) * 6), 5vw, calc(var(--ox-space) * 16));
  border-radius: var(--r-lg);
  text-align: center;
}
.sp-cta-card::before,
.sp-cta-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.sp-cta-card::before {
  inset: 0;
  border-radius: inherit;
  background: color-mix(in srgb, var(--panel) var(--pop-fill), transparent);
  -webkit-backdrop-filter: blur(var(--pop-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--pop-blur)) saturate(var(--glass-sat));
  box-shadow:
    var(--lit),
    0 0 0 1px var(--glass-ring),
    var(--shadow-pop);
}
.sp-cta-card::after {
  top: -30%;
  left: 20%;
  right: 20%;
  height: 80%;
  background: var(--sp-glow);
  filter: blur(calc(var(--ox-space) * 6));
}
.sp-mark {
  width: calc(var(--ox-space) * 14);
  height: calc(var(--ox-space) * 14);
  margin-bottom: calc(var(--ox-space) * 7);
  color: var(--ink);
}
.sp-cta h2 {
  max-width: 20ch;
  font-size: var(--fs-h2);
}
.sp-cta .sp-intro {
  max-width: 52ch;
  margin-top: calc(var(--ox-space) * 5);
  color: var(--ink-3);
  font-size: var(--fs-lead);
}
.sp-cta .sp-actions {
  justify-content: center;
}