/* ===================================================================
   The Good Game — partner integration docs
   Shared stylesheet for every page in this folder.

   Design tokens are lifted from docs.thegoodgame.com so this reads as
   the same site. Light theme only (the public docs site is too).
   =================================================================== */
:root {
  --background: #ffffff;
  --foreground: #000000;
  --border: hsl(214 32% 91%);
  --muted: hsl(240 14% 97%);
  --muted-foreground: hsl(213 9% 45%);
  --primary: hsl(332 79% 57%);
  --brand-gradient: linear-gradient(
    90deg,
    #1e9cff 0%,
    #6a3bff 28%,
    #e83b8b 55%,
    #ff2e7e 75%,
    #ff7a2e 100%
  );
  --slate-950: #020617;
  --slate-900: #0f172a;
  --slate-800: #1e293b;
  --slate-400: #94a3b8;
  --slate-200: #e2e8f0;
  --green-50: #f0fdf4;
  --green-200: #bbf7d0;
  --green-700: #15803d;
  --amber-50: #fffbeb;
  --amber-200: #fde68a;
  --amber-700: #b45309;
  --radius: 0.5rem;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: Menlo, ui-monospace, SFMono-Regular, monospace;
  /* One shared page gutter + max width so nav, hero, body and footer all
     line up on the same rails across every page. */
  --shell: 1600px;
  --gutter: 40px;
  /* Comfortable reading measure for prose. Tables, code, mockups and card
     grids deliberately break out of this and use the full column. */
  --measure: 78ch;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  border: 0 solid var(--border);
}
html {
  scroll-behavior: smooth;
  /* Fixed nav + breathing room, so anchor jumps don't hide headings. */
  scroll-padding-top: 148px;
}
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
}

/* ── Nav ────────────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 40;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
/* The brand gradient hairline that runs across the very top. */
.nav::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--brand-gradient);
}
.nav-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 12px var(--gutter);
  display: flex;
  align-items: center;
  gap: 28px;
}
.logo {
  display: inline-flex;
  align-items: center;
  color: var(--foreground);
  text-decoration: none;
}
.logo svg {
  height: 24px;
  width: auto;
  display: block;
}
.logo svg path {
  fill: currentColor;
}
/* Page-level links — one per document in this folder. */
.nav-links {
  display: flex;
  gap: 2px;
  margin-left: auto;
  margin-right: 8px;
}
.nav-links a {
  padding: 7px 12px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  color: var(--muted-foreground);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}
.nav-links a:hover {
  background: var(--muted);
  color: var(--foreground);
}
.nav-links a[aria-current='page'] {
  background: var(--muted);
  color: var(--foreground);
  font-weight: 600;
}

/* ── Nav dropdown ───────────────────────────────────────────────────── */
.nav-item {
  position: relative;
}
/* The trigger has to look identical to a plain nav link. */
.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted-foreground);
  background: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}
.nav-trigger:hover,
.nav-item[data-open='true'] .nav-trigger {
  background: var(--muted);
  color: var(--foreground);
}
.nav-trigger[data-section='current'] {
  background: var(--muted);
  color: var(--foreground);
  font-weight: 600;
}
.nav-trigger svg {
  width: 13px;
  height: 13px;
  transition: transform 0.15s ease;
}
.nav-item[data-open='true'] .nav-trigger svg {
  transform: rotate(180deg);
}
.nav-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 288px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
  padding: 6px;
  display: none;
  z-index: 50;
}
.nav-item[data-open='true'] .nav-menu {
  display: block;
}
/* Icon in its own column, spanning both rows so the title and description
   align against it. */
.nav-menu a {
  display: grid;
  grid-template-columns: 17px 1fr;
  column-gap: 11px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--foreground);
  text-decoration: none;
  white-space: normal;
}
.nav-menu a > svg {
  grid-row: span 2;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  color: var(--primary);
}
.nav-menu a:hover,
.nav-menu a:focus-visible {
  background: var(--muted);
}
.nav-menu a[aria-current='page'] {
  background: var(--muted);
  font-weight: 600;
}
.nav-menu .nm-title {
  font-weight: 500;
}
.nav-menu .nm-desc {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--muted-foreground);
  margin-top: 2px;
}
.nav-menu hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 6px 8px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  min-height: 38px;
  padding: 0 18px;
  border-radius: 9999px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.btn-dark {
  background: var(--slate-900);
  color: #fff;
}
.btn-dark:hover {
  background: #1c2739;
}
.btn-light {
  background: #fff;
  color: var(--slate-900);
  font-size: 16px;
  min-height: 44px;
  padding: 0 32px;
}
.btn-light:hover {
  background: rgba(255, 255, 255, 0.9);
}
.btn-outline {
  background: #fff;
  color: var(--foreground);
  border: 1px solid var(--border);
}
.btn-outline:hover {
  background: var(--muted);
}

/* ── Page header ────────────────────────────────────────────────────── */
.page-head {
  padding: 116px var(--gutter) 0;
}
.page-head-inner {
  max-width: var(--shell);
  margin: 0 auto;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 9999px;
  background: var(--muted);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 18px;
}
.eyebrow svg {
  width: 15px;
  height: 15px;
}
h1 {
  font-size: clamp(34px, 4.4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 18px;
}
.text-gradient {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.page-lead {
  font-size: 19px;
  line-height: 1.6;
  color: var(--muted-foreground);
  max-width: 860px;
  margin: 0 0 8px;
}

/* ── Page-level status banner ────────────────────────────────────────
   For a whole product that isn't production-ready. Sits directly under
   the lead so nobody can scroll past it into the endpoint tables and
   assume the per-endpoint "Live" badges describe the product. */
.page-status {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  max-width: 860px;
  margin: 26px 0 0;
  padding: 18px 20px;
  border-radius: 12px;
  background: var(--amber-50);
  border: 1px solid var(--amber-200);
}
.page-status > svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--amber-700);
}
/* Only the dedicated label is a block — a bare <strong> inside the body text
   must stay inline, or every emphasised phrase becomes its own shouty line. */
.page-status .ps-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--amber-700);
  margin-bottom: 5px;
}
.page-status p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--foreground);
  max-width: var(--measure);
}
.page-status p + p {
  margin-top: 8px;
}

/* Landing hero (index only) — centred and larger. */
.hero {
  padding: 128px var(--gutter) 56px;
  text-align: center;
}
.hero .page-head-inner {
  max-width: 960px;
}
.hero h1 {
  font-size: clamp(40px, 6vw, 70px);
}
.hero .page-lead {
  margin: 0 auto;
  font-size: 20px;
  max-width: 760px;
}
.hero .btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 32px;
}

/* ── Body layout: sticky TOC + wide article column ──────────────────── */
.layout {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 40px var(--gutter) 0;
  display: flex;
  gap: 56px;
  align-items: flex-start;
}
.toc {
  width: 280px;
  flex: 0 0 280px;
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 128px);
  overflow-y: auto;
  padding-bottom: 24px;
}
.toc-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin: 0 0 12px;
  padding-left: 14px;
}
.toc-group {
  margin-bottom: 18px;
}
.toc-group > .toc-group-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--foreground);
  text-decoration: none;
}
.toc-group > .toc-group-label svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--primary);
}
.toc-children {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-left: 22px;
  padding-left: 12px;
  border-left: 1px solid var(--border);
}
.toc-children a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 12px;
  border-radius: var(--radius);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted-foreground);
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}
.toc-children a:hover {
  background: var(--muted);
  color: var(--foreground);
}
.toc-children a.active {
  background: var(--muted);
  color: var(--foreground);
  font-weight: 600;
}
/* Tiny status dot in the TOC so availability is visible without opening
   each section. */
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 7px;
  background: var(--border);
}
.dot.live {
  background: var(--green-700);
}
.dot.dev {
  background: var(--amber-700);
}
.dot.preview {
  background: var(--muted-foreground);
}
.dot.planned {
  background: transparent;
  border: 1px solid hsl(214 25% 78%);
}

main {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 1120px;
}

/* ── Sections ───────────────────────────────────────────────────────── */
section {
  padding-bottom: 64px;
}
.band {
  border-top: 3px solid transparent;
  border-image: var(--brand-gradient) 1;
  padding-top: 26px;
  margin-bottom: 34px;
}
.band-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 10px;
}
.band-eyebrow svg {
  width: 15px;
  height: 15px;
  color: var(--primary);
}
.band h2 {
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin: 0 0 14px;
}
.band-lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted-foreground);
  max-width: var(--measure);
  margin: 0 0 22px;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chips a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: #fff;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}
.chips a:hover {
  background: var(--muted);
  border-color: hsl(214 25% 82%);
}

section > h3 {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
  padding-top: 4px;
}
/* Small label above a section title, e.g. the mode or product it belongs to. */
.kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 6px;
}
.kicker svg {
  width: 14px;
  height: 14px;
  color: var(--primary);
}
h4 {
  font-size: 17px;
  font-weight: 600;
  margin: 32px 0 8px;
}
h5 {
  font-size: 15px;
  font-weight: 600;
  margin: 24px 0 6px;
}
p {
  margin: 0 0 16px;
}
/* Prose gets a readable measure; tables/code/mockups use the full width. */
section > p,
section > ul,
section > ol {
  max-width: var(--measure);
}
.section-lead {
  font-size: 17.5px;
  color: var(--muted-foreground);
  margin: 12px 0 16px;
}
.muted {
  color: var(--muted-foreground);
}
.small {
  font-size: 14px;
}
ul,
ol {
  margin: 0 0 16px;
  padding-left: 22px;
}
li {
  margin-bottom: 6px;
}
strong {
  font-weight: 600;
}
hr.rule {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 40px 0;
}

/* ── Inline code + code blocks ──────────────────────────────────────── */
:not(pre) > code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  /* Long paths/URLs break rather than push the page sideways. break-word
     (not anywhere) so short tokens like `_fbp` aren't split. */
  overflow-wrap: break-word;
}
.code {
  border: 1px solid var(--slate-800);
  border-radius: 12px;
  overflow: hidden;
  background: var(--slate-950);
  margin: 16px 0;
}
.code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px;
  background: var(--slate-900);
  border-bottom: 1px solid var(--slate-800);
}
.code-lang {
  font-size: 12px;
  font-weight: 500;
  color: var(--slate-400);
}
.copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  color: var(--slate-400);
  transition: color 0.15s ease;
}
.copy:hover {
  color: #fff;
}
.copy svg {
  width: 13px;
  height: 13px;
}
.code pre {
  margin: 0;
  padding: 16px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--slate-200);
}
.code-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 16px;
  margin: 16px 0;
}
.code-pair .code {
  margin: 0;
}

/* ── Endpoint pill ──────────────────────────────────────────────────── */
.endpoint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  background: hsl(240 14% 97% / 0.6);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: 14px;
  margin: 16px 0;
  min-width: 0;
}
.endpoint .path {
  word-break: break-all;
}
.verb {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 6px;
  padding: 3px 8px;
  background: var(--green-50);
  color: var(--green-700);
  border: 1px solid var(--green-200);
}
.verb.post,
.verb.patch,
.verb.put,
.verb.delete {
  background: var(--amber-50);
  color: var(--amber-700);
  border-color: var(--amber-200);
}

/* ── Tables ─────────────────────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  margin: 16px 0;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
th,
td {
  text-align: left;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
thead th {
  font-weight: 600;
  background: var(--muted);
  white-space: nowrap;
}
tbody tr:last-child td {
  border-bottom: 0;
}
td code,
th code {
  white-space: nowrap;
}

/* ── Cards / callouts ───────────────────────────────────────────────── */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 16px;
  margin: 24px 0;
}
.cards-2 {
  grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
}
.card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px;
}
.card > svg {
  width: 20px;
  height: 20px;
  margin-bottom: 12px;
  display: block;
}
.card h4,
.note h4,
.callout h4 {
  font-size: 16px;
  margin: 0 0 6px;
}
.card p {
  margin: 0;
  font-size: 14px;
  color: var(--muted-foreground);
}
.notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 16px;
  margin: 24px 0;
}
.note {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}
.note p {
  margin: 0;
  font-size: 14px;
  color: var(--muted-foreground);
}
.callout {
  background: hsl(332 79% 57% / 0.05);
  border: 1px solid hsl(332 79% 57% / 0.15);
  border-radius: 12px;
  padding: 24px;
  margin: 24px 0;
  /* Constrain the BOX, not the text inside it — otherwise the tinted panel
     runs full width with prose hugging its left half. */
  max-width: calc(var(--measure) + 48px);
}
.callout h4 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.callout h4 svg {
  width: 16px;
  height: 16px;
}
.callout p {
  font-size: 14px;
  color: var(--muted-foreground);
}
.callout p:last-child {
  margin-bottom: 0;
}
.callout-neutral {
  background: var(--muted);
  border-color: var(--border);
}

/* ── Status badges ──────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 9999px;
  padding: 3px 10px;
  border: 1px solid var(--border);
  background: var(--muted);
  color: var(--muted-foreground);
  white-space: nowrap;
  vertical-align: middle;
}
.badge.live {
  background: var(--green-50);
  border-color: var(--green-200);
  color: var(--green-700);
}
.badge.dev {
  background: var(--amber-50);
  border-color: var(--amber-200);
  color: var(--amber-700);
}
.badge.planned {
  background: #fff;
  border-color: hsl(214 25% 85%);
  color: var(--muted-foreground);
}
.badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.badge.planned::before {
  background: transparent;
  border: 1px solid currentColor;
}
h3 .badge,
h4 .badge {
  margin-left: 10px;
  position: relative;
  top: -2px;
}

/* ── Product routers — the three cards on the overview page ─────────── */
/* 260px min (not 320px) so the three product cards sit on ONE row in the ~864px
   main column instead of wrapping 2+1 and orphaning the third. */
.router {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 20px;
  margin: 28px 0 8px;
}
.router a {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}
.router a:hover {
  border-color: hsl(332 79% 57% / 0.4);
  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.04);
  transform: translateY(-1px);
}
.router .r-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.router .r-top svg {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  color: var(--primary);
}
.router .r-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.router h4 {
  font-size: 19px;
  margin: 0 0 8px;
}
.router p {
  font-size: 14px;
  color: var(--muted-foreground);
  margin: 0 0 16px;
}
/* Availability summary pinned to the bottom of each card. */
.router .r-modes {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.router .r-modes div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 6px;
  color: var(--muted-foreground);
}

/* ── Coverage matrix ────────────────────────────────────────────────── */
.coverage {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin: 24px 0 8px;
}
.cov-row {
  display: grid;
  grid-template-columns: 250px repeat(3, 1fr);
  border-bottom: 1px solid var(--border);
}
.cov-row:last-child {
  border-bottom: 0;
}
.cov-row > div:not(:first-child),
.cov-row > a:not(:first-child) {
  border-left: 1px solid var(--border);
}
.cov-family > div {
  background: var(--muted);
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  border-bottom: 1px solid var(--border);
}
/* The two-family spanning header: out-of-the-box covers two columns. */
.cov-family {
  grid-template-columns: 250px 2fr 1fr;
}
.cov-head > div {
  background: var(--muted);
  padding: 10px 16px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--foreground);
}
.cov-area {
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
}
.cov-area svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  color: var(--primary);
}
.coverage a.cov-cell {
  display: flex;
  flex-direction: column;
  /* Badges must hug their text, not stretch to the column width. */
  align-items: flex-start;
  gap: 6px;
  padding: 16px;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.coverage a.cov-cell:hover {
  background: var(--muted);
}
.cov-cell .cov-what {
  font-size: 13px;
  color: var(--muted-foreground);
}

/* ── Numbered steps ─────────────────────────────────────────────────── */
.flow {
  counter-reset: flow;
  list-style: none;
  padding: 0;
  margin: 24px 0;
  max-width: none;
}
.flow > li {
  counter-increment: flow;
  position: relative;
  padding-left: 46px;
  padding-bottom: 22px;
  margin: 0;
}
.flow > li::before {
  content: counter(flow);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--slate-900);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flow > li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 13.5px;
  top: 32px;
  bottom: 4px;
  width: 1px;
  background: var(--border);
}
.flow > li > strong {
  display: block;
  margin-bottom: 4px;
}
.flow > li > p {
  color: var(--muted-foreground);
  font-size: 14px;
  margin-bottom: 8px;
  max-width: var(--measure);
}

/* ── Feature list ───────────────────────────────────────────────────── */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 2px 40px;
  margin: 16px 0 24px;
}
/* Normal block flow (not flex) so inline <code> chips inside a feature line
   lay out naturally instead of becoming stretched flex items. */
.features div {
  position: relative;
  padding: 8px 0 8px 26px;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
}
.features div svg {
  position: absolute;
  left: 0;
  top: 12px;
  width: 15px;
  height: 15px;
  color: var(--primary);
}
/* Full-sentence items (e.g. a go-live checklist) need a wider column than the
   short capability one-liners, or every line wraps three times. */
.features.wide {
  grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
  gap: 2px 36px;
}
.features.wide div {
  line-height: 1.55;
  padding: 10px 0 10px 26px;
}
.features.wide div svg {
  top: 14px;
}

/* ── Two-column split ───────────────────────────────────────────────── */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 20px;
  margin: 24px 0;
}
.split > div {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
}
.split h4 {
  margin-top: 0;
}
.split p {
  font-size: 14px;
  color: var(--muted-foreground);
}
.split ul {
  font-size: 14px;
  color: var(--muted-foreground);
  margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   Browser mockups
   Abstract, CSS-drawn wireframes of a partner site with our pieces in it.
   Deliberately not fake screenshots: grey blocks are the partner's own
   markup, and anything we render is tinted + outlined + tagged "TGG", so
   each figure teaches where the integration boundary actually falls.
   ═══════════════════════════════════════════════════════════════════════ */
.shot {
  margin: 24px 0;
}
/* Cap a standalone mockup so the wireframe reads at a believable screen
   scale instead of stretching across the full article column. */
.shot > .browser {
  max-width: 780px;
}
.flow .shot {
  margin: 14px 0 0;
}
.shot figcaption {
  font-size: 13.5px;
  color: var(--muted-foreground);
  margin-top: 10px;
  max-width: var(--measure);
}
.shot-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 20px;
  margin: 24px 0;
}
.shot-pair .shot {
  margin: 0;
}

.browser {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.browser-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--muted);
  border-bottom: 1px solid var(--border);
}
.browser-bar .dots {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}
.browser-bar .dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #dfe4ea;
  display: block;
}
.browser-bar .url {
  flex: 1 1 auto;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Distinguish "this page is on our domain" at a glance. */
.browser.ours .url {
  color: hsl(332 60% 42%);
}
.viewport {
  position: relative;
  padding: 16px;
  background: #fff;
  overflow: hidden;
  min-height: 250px;
}

/* Partner page furniture — neutral grey blocks. */
.m-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.m-logo {
  width: 74px;
  height: 14px;
  border-radius: 3px;
  background: #cfd6de;
  flex: 0 0 auto;
}
.m-navlinks {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.m-navlinks i {
  width: 38px;
  height: 8px;
  border-radius: 3px;
  background: #e4e8ed;
  display: block;
}
.m-title {
  height: 15px;
  width: 46%;
  border-radius: 4px;
  background: #c6cdd6;
  margin-bottom: 8px;
}
.m-line {
  height: 8px;
  border-radius: 3px;
  background: #e8ebef;
  margin-bottom: 6px;
}
.m-line.w80 {
  width: 80%;
}
.m-line.w60 {
  width: 60%;
}
.m-line.w40 {
  width: 40%;
}
.m-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.m-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  background: #fff;
}
.m-thumb {
  height: 40px;
  border-radius: 5px;
  background: linear-gradient(135deg, #e9edf2, #dde3ea);
  margin-bottom: 8px;
}
.m-card .m-line {
  margin-bottom: 5px;
}
.m-btn {
  height: 16px;
  border-radius: 4px;
  background: #d5dbe2;
  margin-top: 8px;
}
/* NB: named m-cta, not cta — a bare `.cta` collides with the dark
   call-to-action section rule and inherits its 88px padding. */
.m-btn.m-cta {
  background: var(--primary);
}
.m-filters {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}
.m-filters i {
  height: 18px;
  width: 60px;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: #fff;
  display: block;
}
.m-table {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 12px;
}
.m-tr {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 70px;
  gap: 10px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.m-tr:last-child {
  border-bottom: 0;
}
.m-tr.head {
  background: var(--muted);
}
.m-tr .m-line {
  margin: 0;
}

/* Portal shell: left nav + content, for the post-purchase mockups. */
.m-shell {
  display: flex;
  gap: 12px;
}
.m-side {
  flex: 0 0 86px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-right: 10px;
  border-right: 1px solid var(--border);
}
.m-side .m-logo {
  width: 56px;
  margin-bottom: 6px;
}
.m-side i {
  height: 8px;
  border-radius: 3px;
  background: #e4e8ed;
  display: block;
}
.m-side i.on {
  background: #cfd6de;
}
.m-main {
  flex: 1;
  min-width: 0;
}
/* The dark "action needed" hero at the top of the portal home. */
.m-alert {
  background: var(--slate-900);
  border-radius: 7px;
  padding: 10px;
  margin-bottom: 12px;
}
.m-alert .m-line {
  background: #33405a;
}
.m-alert .m-line.hi {
  background: #64748b;
}
.m-bar {
  height: 6px;
  border-radius: 3px;
  background: #33405a;
  margin-top: 8px;
  overflow: hidden;
}
.m-bar span {
  display: block;
  height: 100%;
  width: 62%;
  background: #ff7a2e;
  border-radius: 3px;
}

/* Stat tiles for the operator-console mockup. */
.m-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.m-tile {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
}
.m-tile .m-line {
  margin-bottom: 5px;
}
.m-tile .m-big {
  height: 12px;
  width: 58%;
  border-radius: 3px;
  background: #c6cdd6;
}

/* Anything WE render gets tinted, dashed-outlined and tagged. */
.tgg-part {
  position: relative;
  outline: 1.5px dashed hsl(332 79% 57% / 0.55);
  outline-offset: 3px;
  border-radius: 6px;
  background: hsl(332 79% 57% / 0.04);
}
.tgg-part::after {
  content: 'TGG';
  position: absolute;
  top: -9px;
  right: -3px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 4px;
  background: var(--primary);
  color: #fff;
}
.tgg-part[data-tag]::after {
  content: attr(data-tag);
}
/* Flip the tag inboard when the outlined element sits against the right edge
   of the clipped viewport (otherwise the tag is cut off). */
.tgg-part.tag-left::after {
  left: 6px;
  right: auto;
}
/* Elements flush to a viewport edge draw their dashes inside themselves, and
   pull their tag inboard so the clipped viewport doesn't cut it off. */
.tgg-part.inset {
  outline-offset: -3px;
}
.tgg-part.inset::after {
  top: 5px;
}

/* Checkout drawer overlay. */
.m-scrim {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
  border-radius: 0;
}
.m-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 46%;
  min-width: 190px;
  background: #fff;
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 24px rgba(15, 23, 42, 0.18);
  padding: 12px;
  display: flex;
  flex-direction: column;
}
.m-drawer-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.m-drawer-head .m-logo {
  width: 52px;
  height: 11px;
}
.m-drawer-head .x {
  margin-left: auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #eef1f4;
}
.m-steps {
  display: flex;
  gap: 5px;
  margin-bottom: 10px;
}
.m-steps i {
  height: 4px;
  flex: 1;
  border-radius: 2px;
  background: #e6eaee;
  display: block;
}
.m-steps i.on {
  background: var(--primary);
}
.m-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 8px;
  margin-bottom: 7px;
}
.m-row .m-line {
  margin: 0;
  flex: 1;
}
.m-row .m-price {
  width: 34px;
  height: 8px;
  border-radius: 3px;
  background: #cfd6de;
  flex: 0 0 auto;
}
.m-row.sel {
  border-color: hsl(332 79% 57% / 0.5);
  background: hsl(332 79% 57% / 0.05);
}
/* Leave room at the top for the inset "TGG" tag so it doesn't sit on top of
   the drawer's own logo. */
.m-drawer.tgg-part {
  padding-top: 26px;
}
.m-drawer .m-btn.m-cta {
  margin-top: auto;
  height: 20px;
}

/* A small legend under mockups. */
.shot-key {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 12.5px;
  color: var(--muted-foreground);
  margin-top: 12px;
}
.shot-key span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.key-swatch {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  display: inline-block;
  background: #e4e8ed;
  border: 1px solid var(--border);
}
.key-swatch.tgg {
  background: hsl(332 79% 57% / 0.12);
  border: 1.5px dashed hsl(332 79% 57% / 0.6);
}

/* ── Recipe blocks ──────────────────────────────────────────────────── */
.recipe {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  margin-bottom: 28px;
}
.recipe-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.recipe-head h3 {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
  padding: 0;
}
.recipe-num {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  width: 100%;
}
.recipe > p {
  max-width: var(--measure);
}
.recipe-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 14px;
  margin: 18px 0 4px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--muted);
}
.recipe-meta div {
  font-size: 13.5px;
}
.recipe-meta dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 4px;
}
.recipe-meta dd {
  margin: 0;
  font-size: 13.5px;
}

/* ── Next-page footer links ─────────────────────────────────────────── */
.next-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 16px;
  margin: 8px 0 0;
}
.next-links a {
  display: block;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}
.next-links a:hover {
  border-color: hsl(332 79% 57% / 0.4);
  background: hsl(332 79% 57% / 0.03);
}
.next-links .nl-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 6px;
}
.next-links strong {
  display: block;
  font-size: 16px;
  margin-bottom: 4px;
}
.next-links p {
  margin: 0;
  font-size: 13.5px;
  color: var(--muted-foreground);
}

/* ── CTA + footer ───────────────────────────────────────────────────── */
.cta {
  background: var(--slate-900);
  color: #fff;
  padding: 88px var(--gutter);
  text-align: center;
  margin-top: 48px;
}
.cta h2 {
  font-size: clamp(26px, 3.6vw, 34px);
  font-weight: 700;
  margin: 0 0 20px;
}
.cta p {
  color: var(--slate-400);
  font-size: 17px;
  max-width: 660px;
  margin: 0 auto 34px;
}
/* The pink brand link is unreadable on the dark CTA panel — go white + underline. */
.cta-link {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cta-link:hover {
  text-decoration-thickness: 2px;
}
footer {
  background: #fff;
  border-top: 1px solid var(--border);
  padding: 56px var(--gutter) 28px;
}
.footer-inner {
  max-width: var(--shell);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted-foreground);
}
.footer-links a {
  text-decoration: none;
}
.footer-links a:hover {
  color: var(--foreground);
}
.copyright {
  max-width: var(--shell);
  margin: 28px auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--muted-foreground);
}

/* ── Mobile nav ─────────────────────────────────────────────────────── */
/* Both the burger and the panel are injected by docs.js — see the comment
   there for why they aren't in the markup. Hidden entirely on desktop. */
.nav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: 4px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: none;
  color: var(--foreground);
  cursor: pointer;
}
.nav-burger svg {
  width: 18px;
  height: 18px;
}
.nav[data-menu-open='true'] .nav-burger {
  background: var(--muted);
}
.nav-mobile {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  /* The bar is translucent with a backdrop blur; the panel can't be, or the
     page text scrolls through the links behind it. */
  background: var(--background);
  border-bottom: 1px solid var(--border);
  padding: 8px var(--gutter) 16px;
  max-height: 70vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav-mobile a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 500;
  color: var(--muted-foreground);
  text-decoration: none;
}
.nav-mobile a[aria-current='page'] {
  background: var(--muted);
  color: var(--foreground);
  font-weight: 600;
}
.nav-mobile-label {
  margin: 14px 0 2px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

/* ── Responsive ─────────────────────────────────────────────────────── */
/* The bar is only ~440px wide now (Overview / Products / Reference), so it can
   stay visible far further down than the old six-item version allowed. */
@media (max-width: 780px) {
  .nav-links {
    display: none;
  }
  /* .nav-links carried the margin-left:auto that pushed the CTA right;
     hand it to the button once the links are gone. */
  .nav-inner > .btn {
    margin-left: auto;
  }
  .nav-burger {
    display: inline-flex;
  }
  /* `hidden` on the panel still wins — this only opts it into being shown. */
  .nav-mobile:not([hidden]) {
    display: block;
  }
}
@media (max-width: 1023px) {
  :root {
    --gutter: 24px;
  }
  .layout {
    flex-direction: column;
    gap: 24px;
  }
  .toc {
    position: static;
    width: 100%;
    flex: none;
    max-height: none;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px 16px;
  }
  .toc-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 8px 24px;
  }
  main {
    max-width: 100%;
  }
  .coverage {
    overflow-x: auto;
  }
  .cov-row {
    grid-template-columns: 190px repeat(3, minmax(165px, 1fr));
    min-width: 690px;
  }
  .cov-family {
    grid-template-columns: 190px 2fr 1fr;
    min-width: 690px;
  }
}
@media (max-width: 700px) {
  .m-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .m-drawer {
    width: 62%;
  }
  .recipe {
    padding: 20px;
  }
}
@media (max-width: 640px) {
  .hero {
    padding-top: 104px;
  }
  .page-head {
    padding-top: 100px;
  }
  section {
    padding-bottom: 48px;
  }
}