/* Payzone — brand typography and colour. Manrope is self-hosted so the public
   site has no runtime dependency on a third-party font service. */

@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --sans: "Manrope", sans-serif;
  --mono: "Manrope", sans-serif;
  --measure: 48rem;
  --radius: 12px;

  /* Light is the default so the page is legible before any script runs and if
     script never runs at all. The palette is the platform's own light tokens,
     so site and product stay one system. */
  --bg: #f5f7f4;
  --bg-raise: #ffffff;
  --bg-soft: #f8faf8;
  --ink: #17221f;
  --ink-soft: #59635f;
  --ink-dim: #77827d;
  --line: #e3e8e3;
  --line-strong: #cdd7d1;
  --accent: #0b6b46;
  --accent-hover: #085537;
  --accent-ink: #ffffff;
  --accent-soft: rgba(11, 107, 70, 0.08);
  --header-bg: rgba(245, 247, 244, 0.86);
  --media-filter: saturate(0.94) contrast(1.02);
  --selection-bg: #a9f4cb;
  --selection-ink: #0d2b20;
}

/* Dark tokens, applied by system preference and by explicit choice. The two
   selectors carry the same declarations because a chosen theme must beat the
   system, in both directions. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0c12;
    --bg-raise: #10141c;
    --bg-soft: #141a23;
    --ink: #eef2f0;
    --ink-soft: #9aa8a4;
    --ink-dim: #6b7873;
    --line: #1e2630;
    --line-strong: #2a343f;
    --accent: #5ee5a0;
    --accent-hover: #7cf0b6;
    --accent-ink: #06231a;
    --accent-soft: rgba(94, 229, 160, 0.14);
    --header-bg: rgba(10, 12, 18, 0.86);
    --media-filter: var(--media-filter);
    --selection-bg: #5ee5a0;
    --selection-ink: #08221a;
  }
}

:root[data-theme="dark"] {
  --bg: #0a0c12;
  --bg-raise: #10141c;
  --bg-soft: #141a23;
  --ink: #eef2f0;
  --ink-soft: #9aa8a4;
  --ink-dim: #6b7873;
  --line: #1e2630;
  --line-strong: #2a343f;
  --accent: #5ee5a0;
  --accent-hover: #7cf0b6;
  --accent-ink: #06231a;
  --accent-soft: rgba(94, 229, 160, 0.14);
  --header-bg: rgba(10, 12, 18, 0.86);
  --media-filter: var(--media-filter);
  --selection-bg: #5ee5a0;
  --selection-ink: #08221a;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- header */

header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  align-items: center;
  padding: 1.1rem 1.75rem;
  background: var(--header-bg);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* The wordmark is outlined paths, so it tints with currentColor. */
.brand svg {
  height: 27px;
  width: auto;
  display: block;
}

.brand svg .brand-fill { fill: var(--ink); }

header nav {
  display: flex;
  gap: 1.6rem;
  margin-left: auto;
}

header nav a {
  position: relative;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.93rem;
  font-weight: 500;
  letter-spacing: -0.008em;
  padding-block: 0.35rem;
}

header nav a:hover { color: var(--ink); }

header nav a.active { color: var(--accent); }

header nav a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1.1rem;
  height: 2px;
  background: var(--accent);
}

/* ------------------------------------------------------------------ main */

main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 3.25rem 1.75rem 5rem;
}

h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.035em;
  margin: 2.5rem 0 0.85rem;
}

h1 {
  font-size: clamp(2rem, 1.4rem + 2.2vw, 2.9rem);
  margin-top: 0;
}

h2 {
  font-size: 1.42rem;
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}

h3 { font-size: 1.1rem; letter-spacing: -0.022em; }

p, li { color: var(--ink-soft); }

main > p:first-of-type {
  font-size: 1.12rem;
  color: var(--ink);
  letter-spacing: -0.012em;
}

a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--ink); }

strong { color: var(--ink); font-weight: 700; }

/* ------------------------------------------------------------------ code */

code {
  font-family: var(--mono);
  font-size: 0.86em;
  color: var(--accent);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.12em 0.38em;
}

pre {
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem;
  overflow-x: auto;
  line-height: 1.55;
}

pre code {
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink-soft);
  font-size: 0.845rem;
}

/* ---------------------------------------------------------------- tables */

table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.92rem;
}

th, td {
  border: 1px solid var(--line);
  padding: 0.6rem 0.8rem;
  text-align: left;
  vertical-align: top;
}

th {
  background: var(--bg-soft);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

td { color: var(--ink-soft); }

blockquote {
  margin: 1.5rem 0;
  padding: 0.9rem 1.15rem;
  border-left: 2px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
}

blockquote p { margin: 0.3rem 0; color: var(--ink); }

hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }

ul, ol { padding-left: 1.15rem; }
li { margin: 0.3rem 0; }
li::marker { color: var(--ink-dim); }

/* ---------------------------------------------------------------- footer */

footer {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 1.75rem 1.75rem 3rem;
  border-top: 1px solid var(--line);
  color: var(--ink-dim);
  font-size: 0.84rem;
}

::selection { background: var(--selection-bg); color: var(--selection-ink); }

@media (max-width: 34rem) {
  header { gap: 0.75rem 1rem; }
  header nav { gap: 1.1rem; width: 100%; margin-left: 0; }
  header nav a.active::after { bottom: -0.75rem; }
  main { padding-top: 2.25rem; }
}

/* =====================================================================
   Home
   ===================================================================== */

main.wide { max-width: 78rem; padding: 0 2rem 0; }

.eyebrow {
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}

/* ------------------------------------------------------------------ hero */

.hero {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 3.5rem;
  align-items: center;
  padding: 4.5rem 0 4rem;
}

.hero h1 {
  /* Two words carrying the whole proposition; set as large as the column
     allows. */
  font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4.1rem);
  line-height: 1.02;
  letter-spacing: -0.044em;
  margin: 0 0 1.6rem;
  text-wrap: balance;
}

.lede {
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.24rem);
  color: var(--ink-soft);
  letter-spacing: -0.008em;
  margin: 0 0 2.25rem;
  max-width: 34rem;
}

.hero-media, .feature-media { margin: 0; }

.hero-media img, .feature-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  border: 1px solid var(--line);
  /* Cool the stock warmth toward the brand so photography and interface do not
     read as two different products. */
  filter: var(--media-filter);
}

.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.cta {
  display: inline-flex;
  align-items: center;
  padding: 0.78rem 1.5rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.008em;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.cta:hover { border-color: var(--accent); transform: translateY(-1px); }
.cta-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.cta-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.hero-note {
  margin: 2rem 0 0;
  padding-left: 0.9rem;
  border-left: 2px solid var(--line-strong);
  color: var(--ink-dim);
  font-size: 0.86rem;
  max-width: 34rem;
}

/* ----------------------------------------------------------------- strip */

.strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

.strip-item {
  background: var(--bg-raise);
  padding: 1.6rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.figure {
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--ink);
  line-height: 1;
}

.figure-label { font-size: 0.85rem; color: var(--ink-dim); }

/* ----------------------------------------------------------------- bands */

.band { padding: 4.5rem 0; }
.band-quiet {
  background: radial-gradient(70% 120% at 12% 0%, var(--accent-soft), transparent 62%);
  border-radius: 24px;
  padding: 4.5rem 2.5rem;
  margin: 1rem 0;
}

.band-head { max-width: 40rem; margin-bottom: 2.25rem; }

.band-title {
  font-size: clamp(1.7rem, 1.2rem + 1.7vw, 2.5rem);
  letter-spacing: -0.038em;
  margin: 0 0 0.9rem;
  padding: 0;
  border: 0;
}

.band-lede { margin: 0; font-size: 1.03rem; }

/* ------------------------------------------------------------------ flow */

.flow {
  display: grid;
  /* Exactly three across so six steps form two full rows. auto-fit produced
     four-plus-two and left a visible empty cell. */
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

.flow-step { background: var(--bg-raise); padding: 1.5rem 1.4rem 1.65rem; }

.flow-n {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 0.7rem;
}

.flow-step h3 { margin: 0 0 0.4rem; font-size: 1.02rem; letter-spacing: -0.022em; }
.flow-step p { margin: 0; font-size: 0.92rem; }

/* --------------------------------------------------------------- feature */

.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.5rem;
  align-items: center;
  padding: 4rem 0;
}

.feature-reverse .feature-media { order: 2; }

.feature-copy h2 {
  font-size: clamp(1.8rem, 1.25rem + 1.9vw, 2.6rem);
  letter-spacing: -0.04em;
  margin: 0 0 1.1rem;
  padding: 0;
  border: 0;
  text-wrap: balance;
}

.feature-copy p { margin: 0 0 1rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
  font-weight: 500;
  text-decoration: none;
}

.link-arrow::after { content: "\2192"; transition: transform .15s ease; }
.link-arrow:hover::after { transform: translateX(3px); }

/* ------------------------------------------------------------- pillars */

.grid-4 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }

.pillar {
  padding: 1.5rem 1.45rem;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  border-radius: 12px;
}

.pillar h3 { margin: 0 0 0.5rem; font-size: 1.02rem; letter-spacing: -0.022em; }
.pillar p { margin: 0; font-size: 0.93rem; }

/* ------------------------------------------------------------ corridors */

.corridors { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

.corridor-col h4 {
  margin: 0 0 0.8rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.corridor-col ul { list-style: none; margin: 0; padding: 0; }
.corridor-col li { color: var(--ink-soft); font-size: 0.97rem; padding: 0.22rem 0; }

/* ---------------------------------------------------------------- closer */

.closer { padding: 5rem 0 3rem; border-top: 1px solid var(--line); }

.closer h2 {
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem);
  letter-spacing: -0.042em;
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
  max-width: 32rem;
  text-wrap: balance;
}

.closer p { max-width: 38rem; margin: 0 0 1.9rem; }

@media (max-width: 62rem) {
  .flow { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 60rem) {
  .hero, .feature { grid-template-columns: 1fr; gap: 2.5rem; }
  .feature-reverse .feature-media { order: 0; }
  .hero { padding: 3rem 0; }
  .band, .feature { padding: 3.5rem 0; }
  .band-quiet { padding: 3rem 1.5rem; }
  .flow { grid-template-columns: 1fr; }
  main.wide { padding-inline: 1.25rem; }
}

/* ------------------------------------------------------------ theme toggle */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: 1.5rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.theme-toggle:hover { color: var(--ink); border-color: var(--line-strong); background: var(--bg-soft); }

.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.theme-toggle svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Show the destination, not the current state: in light you see the moon you
   are about to switch to. */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }

:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

@media (max-width: 34rem) {
  .theme-toggle { margin-left: auto; }
}

/* =====================================================================
   Solutions — editorial. Rules and indices instead of the card grids used
   on the home page, so the two pages do not read as the same template.
   ===================================================================== */

.rule-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.6rem;
}

.sol-hero { padding: 6rem 0 3.5rem; max-width: 52rem; }

.sol-hero h1 {
  font-size: clamp(2.4rem, 1.2rem + 4.4vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.046em;
  margin: 0 0 1.6rem;
}

.sol-hero .lede { max-width: 40rem; margin: 0; }

/* ------------------------------------------------------------- index list */

.sol-index { padding: 3.5rem 0; }

.index-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }

.index-list li {
  display: grid;
  grid-template-columns: 4.5rem 1fr 10rem;
  gap: 2rem;
  align-items: start;
  padding: 2rem 0;
  margin: 0;
  border-bottom: 1px solid var(--line);
  transition: background .18s ease;
}

.index-list li:hover { background: var(--accent-soft); }

.idx {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
  padding-top: 0.28rem;
}

.idx-body h3 { margin: 0 0 0.45rem; font-size: 1.28rem; letter-spacing: -0.028em; }
.idx-body p { margin: 0; max-width: 40rem; }

.idx-tag {
  justify-self: end;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.28rem 0.75rem;
  white-space: nowrap;
}

/* ----------------------------------------------------------------- split */

.sol-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  padding: 4rem 0;
  align-items: start;
}

.sol-split h2, .sol-code h2, .sol-index-head h2 {
  font-size: clamp(1.7rem, 1.2rem + 1.7vw, 2.4rem);
  letter-spacing: -0.038em;
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
  text-wrap: balance;
}

.sol-split-pair { display: grid; gap: 1.5rem; padding-top: 2.9rem; }
.sol-split-pair:has(article:nth-child(3)) { grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; }

.sol-split-pair article {
  padding-left: 1.25rem;
  border-left: 2px solid var(--accent);
}

.sol-split-pair h3 { margin: 0 0 0.4rem; font-size: 1.05rem; letter-spacing: -0.022em; }
.sol-split-pair p { margin: 0; }

/* --------------------------------------------------------------- pillars */

.sol-pillars { padding: 4rem 0; }
.sol-index-head { max-width: 44rem; margin-bottom: 2.5rem; }

.pillar-rows { border-top: 1px solid var(--line); }

.pillar-row {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 2rem;
  padding: 2.25rem 0;
  border-bottom: 1px solid var(--line);
}

.pr-n {
  /* Numerals, not roman: I/II/III in a grotesque read as vertical bars. */
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -0.05em;
  color: var(--accent);
  line-height: 0.9;
  opacity: 0.55;
}

.pr-body h3 { margin: 0 0 0.5rem; font-size: 1.3rem; letter-spacing: -0.03em; }
.pr-body p { margin: 0; max-width: 44rem; }

/* -------------------------------------------------------------- benefits */

.sol-benefits { padding: 4rem 0; }

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.benefit { background: var(--bg); padding: 1.6rem 1.5rem; }
.benefit h4 { margin: 0 0 0.4rem; font-size: 0.98rem; letter-spacing: -0.02em; color: var(--ink); }
.benefit p { margin: 0; font-size: 0.92rem; }

/* ------------------------------------------------------------------ code */

.sol-code {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 3.5rem;
  padding: 4rem 0 2rem;
  align-items: center;
}

.sol-code-block {
  margin: 0;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem;
  font-size: 0.83rem;
  line-height: 1.75;
  overflow-x: auto;
}

.sol-code-block code { color: var(--ink-soft); }

@media (max-width: 62rem) {
  .benefit-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 60rem) {
  .sol-split, .sol-code { grid-template-columns: 1fr; gap: 2rem; }
  .sol-split-pair { padding-top: 0; }
  .index-list li { grid-template-columns: 3rem 1fr; }
  .idx-tag { display: none; }
  .pillar-row { grid-template-columns: 3rem 1fr; gap: 1.25rem; }
  .benefit-grid { grid-template-columns: 1fr; }
  .sol-hero { padding: 3rem 0 2rem; }
}

/* =====================================================================
   API reference — three columns: sticky nested nav, prose, code rail.
   ===================================================================== */

main.docs { max-width: none; padding: 0; }

.reference {
  display: grid;
  grid-template-columns: 16.5rem minmax(0, 1fr);
  align-items: start;
}

/* ---------------------------------------------------------------- sidebar */

.ref-nav {
  position: sticky;
  top: 69px;
  height: calc(100vh - 69px);
  overflow-y: auto;
  padding: 2rem 1rem 3rem 1.75rem;
  border-right: 1px solid var(--line);
  overscroll-behavior: contain;
}

.ref-nav nav { display: flex; flex-direction: column; }

.ref-nav-top {
  padding: 0.42rem 0.6rem;
  border-radius: 6px;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.885rem;
  font-weight: 500;
  letter-spacing: -0.008em;
  line-height: 1.35;
}

.ref-nav-top:hover { color: var(--ink); background: var(--bg-soft); }

.ref-nav-top.active {
  color: var(--accent);
  background: var(--accent-soft);
  font-weight: 700;
}

.ref-nav-subs { display: flex; flex-direction: column; margin: 0.1rem 0 0.35rem 0.65rem; }

.ref-nav-subs a {
  padding: 0.3rem 0.6rem;
  border-left: 1px solid var(--line);
  color: var(--ink-dim);
  text-decoration: none;
  font-size: 0.83rem;
  line-height: 1.3;
}

.ref-nav-subs a:hover { color: var(--ink); border-left-color: var(--line-strong); }

/* ------------------------------------------------------------------ body */

.ref-body { min-width: 0; }

.ref-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: 2.75rem;
  align-items: start;
  padding: 2.5rem 2.25rem;
  border-bottom: 1px solid var(--line);
}

.ref-prose { min-width: 0; }
.ref-prose > :first-child { margin-top: 0; }

.ref-prose h2 {
  font-size: 1.6rem;
  letter-spacing: -0.034em;
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
  scroll-margin-top: 5.5rem;
}

.ref-prose h3 {
  font-size: 1.02rem;
  margin: 1.9rem 0 0.6rem;
  scroll-margin-top: 5.5rem;
}

.ref-prose table { font-size: 0.87rem; }
.ref-prose p, .ref-prose li { font-size: 0.955rem; }

/* -------------------------------------------------------------- code rail */

.ref-code {
  position: sticky;
  top: 5.5rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.ref-code:empty { display: none; }

/* The rail is dark in both themes — code reads better on a dark ground, and it
   keeps the reference visually anchored the way an API console does. */
.ref-code pre {
  margin: 0;
  background: #0d1117;
  border: 1px solid #1e2630;
  border-radius: 10px;
  padding: 1rem 1.15rem;
  font-size: 0.795rem;
  line-height: 1.62;
  max-height: 60vh;
  overflow: auto;
}

.ref-code pre code { color: #c7d3d0; }

@media (max-width: 78rem) {
  .ref-section { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .ref-code { position: static; }
}

@media (max-width: 60rem) {
  .reference { grid-template-columns: minmax(0, 1fr); }
  .ref-nav {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 1.25rem 1.25rem 1rem;
  }
  .ref-nav nav { flex-flow: row wrap; gap: 0.25rem; }
  .ref-nav-subs { display: none; }
  .ref-section { padding: 2rem 1.25rem; }
}

/* ------------------------------------------------------------- hero video */

.hero-video {
  position: relative;
  /* Pull toward the viewport edge on wide screens so the film reads as the
     primary element rather than an illustration beside the text. */
  margin-right: calc(-1 * min(4vw, 3.5rem));
}

.hero-video video {
  width: 100%;
  height: auto;
  display: block;
  /* Reserve the frame before the poster arrives. preload="none" means nothing is
     fetched until the visitor asks for it, so without a declared ratio the hero
     collapsed to nothing and everything below it jumped when the image landed.
     The width/height attributes on the element give modern browsers the same
     hint; this states it in the stylesheet too so the reservation survives any
     future change to those attributes. */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid var(--line);
  /* A near-black rather than pure #000: against the off-white page, true black
     is a harder edge than anything else on the site and reads as a hole. */
  background: #0d1512;
  /* Lift it off the page. The film is the primary element of the hero and sat
     flat against the background with only a hairline to separate it. */
  box-shadow:
    0 1px 2px rgba(13, 21, 18, .04),
    0 18px 44px -12px rgba(13, 21, 18, .22);
  transition: box-shadow 260ms cubic-bezier(.22, 1, .36, 1),
              transform 260ms cubic-bezier(.22, 1, .36, 1);
}

/* Deepen on approach. Restrained on purpose — this is a play affordance, not a
   card that opens, so it should acknowledge the pointer without inviting a
   click it does not handle itself. */
.hero-video:hover video {
  transform: translateY(-2px);
  box-shadow:
    0 1px 2px rgba(13, 21, 18, .05),
    0 26px 56px -14px rgba(13, 21, 18, .28);
}

@media (prefers-reduced-motion: reduce) {
  .hero-video video { transition: none; }
  .hero-video:hover video { transform: none; }
}

@media (max-width: 720px) {
  /* The bleed earns its keep on a wide screen and fights the gutter on a narrow
     one, where the frame should simply sit in the column like everything else. */
  .hero-video { margin-right: 0; }
  .hero-video video { border-radius: 14px; }
}

.hero-video figcaption {
  margin-top: 0.7rem;
  font-size: 0.83rem;
  color: var(--ink-dim);
  letter-spacing: 0.01em;
}

/* ------------------------------------------------------------ enquiry form */

.enquiry { max-width: 46rem; padding-bottom: 4rem; display: grid; gap: 1.9rem; }

.field-group { border: 0; margin: 0; padding: 0; }

.field-group legend {
  padding: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--ink);
}

.field-note { margin: 0.35rem 0 0; font-size: 0.87rem; color: var(--ink-dim); }

.checkgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1px;
  margin-top: 1rem;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.check {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  background: var(--bg-raise);
  cursor: pointer;
  font-size: 0.94rem;
  color: var(--ink-soft);
  transition: background .12s ease, color .12s ease;
}

.check:hover { background: var(--bg-soft); color: var(--ink); }

.check input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--accent);
  flex: none;
}

.check:has(input:checked) { background: var(--accent-soft); color: var(--ink); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }

.field { display: grid; gap: 0.45rem; }

.field-label {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.field-label em { font-style: normal; font-weight: 400; color: var(--ink-dim); }

.field input,
.field textarea {
  width: 100%;
  padding: 0.72rem 0.85rem;
  background: var(--bg-raise);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--ink);
  font: inherit;
  font-size: 0.96rem;
}

.field textarea { resize: vertical; min-height: 8rem; line-height: 1.55; }

.field input:focus,
.field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.form-actions button { border: 0; cursor: pointer; font: inherit; font-weight: 500; }
.form-actions .field-note { margin: 0; max-width: 24rem; }

@media (max-width: 40rem) {
  .field-row { grid-template-columns: 1fr; }
}

/* ------------------------------------------- capability register and states */
/* The state badge is the honesty mechanism on this site: it is generated from
   the product's delivery records, so it must be legible rather than decorative.
   Colour alone never carries the meaning — the word is always present. */

.state {
  display: inline-block;
  padding: 0.14em 0.62em;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.005em;
  white-space: nowrap;
  color: var(--ink-soft);
  background: var(--bg-soft);
}

.state-operational {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.state-staged { color: var(--ink); border-color: var(--line-strong); }

.state-planned { color: var(--ink-dim); border-style: dashed; }

.cap-set { margin: 4.5rem 0; }
.cap-set > .sol-index-head { margin-bottom: 1.75rem; }

.cap {
  margin: 0 0 1.5rem;
  padding: 1.5rem 1.45rem;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.cap-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
}

.cap-head h3 { margin: 0; font-size: 1.05rem; letter-spacing: -0.022em; }

.cap-lede {
  margin: 0.5rem 0 1.25rem;
  color: var(--ink-soft);
  max-width: var(--measure);
}

/* Tables carry the detail rows. They scroll inside their own box rather than
   pushing the page sideways on a narrow screen. */
.cap-table {
  width: 100%;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
  font-size: 0.92rem;
}

.cap-table thead th {
  text-align: left;
  padding: 0 0.9rem 0.55rem 0;
  border-bottom: 1px solid var(--line-strong);
  color: var(--ink-dim);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.cap-table tbody th,
.cap-table tbody td {
  padding: 0.85rem 0.9rem 0.85rem 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  text-align: left;
}

.cap-table tbody th {
  font-weight: 500;
  color: var(--ink);
  min-width: 11rem;
}

.cap-table tbody td { color: var(--ink-soft); min-width: 16rem; }
.cap-table tbody td:last-child { min-width: 0; white-space: nowrap; }
.cap-table tbody tr:last-child th,
.cap-table tbody tr:last-child td { border-bottom: 0; }

.cap-note {
  margin: 1.25rem 0 0;
  max-width: var(--measure);
  color: var(--ink-dim);
  font-size: 0.9rem;
}

/* ------------------------------------------------------------ footer links */

.footer-links {
  display: grid;
  gap: 1.75rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  margin-bottom: 2.25rem;
}

.footer-group h2 {
  margin: 0 0 0.7rem;
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
}

.footer-group a {
  display: block;
  padding-block: 0.22rem;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.9rem;
}

.footer-group a:hover { color: var(--accent); }

/* The header carries more destinations than it used to. Tighten the row and
   let it wrap rather than introducing a script-driven menu — the content
   security policy on this distribution stays script-free by design. */
@media (max-width: 82rem) {
  header nav { gap: 1.05rem; flex-wrap: wrap; }
  header nav a { font-size: 0.88rem; }
}

@media (max-width: 62rem) {
  header { gap: 0.75rem 1.25rem; }
  header nav { gap: 0.6rem 0.95rem; width: 100%; margin-left: 0; }
  header nav a { font-size: 0.85rem; padding-block: 0.25rem; }
  header nav a.active::after { bottom: -0.5rem; }
}

/* The route to the operator portal. Set apart from the page links because it
   leaves the site, and because after the apex moves to this site it is the
   only way a customer reaches the thing they log in to. */
.nav-portal {
  padding: 0.28rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink);
}

.nav-portal:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ------------------------------------------------------------------ plans */
/* Three solution levels, side by side on desktop and stacked in the same
   order on mobile. Deliberately not a dense comparison grid: a matrix of ticks
   is unreadable on a phone and invites a feature-by-feature argument, which is
   the wrong conversation for a tailored proposal. */

.plans {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin: 3.5rem 0;
  align-items: stretch;
}

.plan {
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.6rem;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: 12px;
}

/* The emphasis is on the level most operators recognise themselves in. It
   carries no pricing meaning, because there is no public price to imply. */
.plan-featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.plan-flag {
  display: inline-block;
  margin-bottom: 0.6rem;
  padding: 0.14em 0.62em;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.plan-head h2 {
  margin: 0 0 0.5rem;
  padding: 0;
  border: 0;
  font-size: 1.3rem;
  letter-spacing: -0.028em;
}

.plan-outcome {
  margin: 0 0 0.75rem;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.012em;
}

.plan-audience {
  margin: 0 0 1.35rem;
  color: var(--ink-soft);
  font-size: 0.93rem;
}

.plan-list {
  flex: 1;
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.plan-list li {
  margin: 0;
  padding: 0.5rem 0 0.5rem 1.4rem;
  position: relative;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.plan-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.55;
}

.plan-cta { align-self: flex-start; }

@media (max-width: 40rem) {
  .plans { grid-template-columns: 1fr; }
}