/* ══════════════════════════════════════════════════════════
     Geist — self-hosted (variable fonts, latin subset).
     No external font CDN: saves a third-party request, keeps visitor
     IPs with us, and fits the "no dependencies" principle.
     Geist & Geist Mono © Vercel, SIL Open Font License 1.1.
     ══════════════════════════════════════════════════════════ */
  @font-face {
    font-family: "Geist";
    src: url("/fonts/geist-latin.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Geist Mono";
    src: url("/fonts/geist-mono-latin.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }

  /* ══════════════════════════════════════════════════════════
     Drystone design tokens — taken verbatim from
     Brand Guidelines v1.0. Change colours here only.
     ══════════════════════════════════════════════════════════ */
  :root {
    --color-dark:    #0B0D12;
    --color-primary: #111111;
    --color-surface: #F5F6F8;
    --color-border:  #E5E7EB;
    /*
      BLAUW, ZOALS §03 VOORSCHRIJFT. Deze pagina stond tijdelijk op teal (#0A6E78): het product
      droeg toen een eigen designsysteem met teal als merkkleur, en deze pagina was de laatste
      plek waar twee merken naast elkaar bestonden. Dat is omgedraaid — Brand Guidelines v1.0 is
      nu de bron voor de site én het CMS, en die kent één accent.

      Wat dat kost, want het is de reden dat teal er ooit kwam. Gemeten (axe, WCAG AA vraagt 4,5:1
      voor tekst):

        wit op #4F7CFF      3.71    .btn-primary, de contactknop en de enige actie op de pagina
        #4F7CFF op wit      3.71    .kicker
        #4F7CFF op #F5F6F8  3.43    .kicker in een sectie met de merkput als grond

      Alle drie staan in §03's eigen toegankelijkheidstabel, die #4F7CFF op ≈3,8:1 zet en
      licentieert voor "knoppen en grote/vette tekst (AA large & UI). Niet voor lange bodytekst."
      Precies zo is het hier gebruikt: het accent vult de knop en tekent labels, en draagt nergens
      een lopende zin. De axe-gate in packages/e2e laat exact deze paren door, op kleur en met de
      verwachte verhouding erbij; elke andere contrastbevinding blokkeert nog steeds.
    */
    --color-accent:  #4F7CFF;
    --color-accent-hover: #3D66E8;
    --color-white:   #FFFFFF;
    /*
      #6B7280 is de merkwaarde (§03) en meet 4.83 op wit — ruim AA. Op --color-surface (#F5F6F8)
      is het 4.47, net onder de grens, en dat raakt .lede en de vier .spec-labels. Het stond
      daarom een tijd op #666D78. Dat was een goede reparatie van een probleem dat het merk nu
      zelf adresseert: dezelfde uitzondering staat in de gate en in de admin-tokens, met dezelfde
      meting. Eén merkwaarde op drie plekken is meer waard dan drie plekken die elk hun eigen
      grijs kiezen.
    */
    --color-muted:   #6B7280;

    --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --tracking-cms: 0.35em;

    /* 8pt spacing scale */
    --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
    --sp-5: 40px; --sp-6: 48px; --sp-7: 56px; --sp-8: 64px;
    --sp-9: 72px; --sp-12: 96px; --sp-16: 128px;

    /* radius */
    --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 10px;
    --r-xl: 12px; --r-2xl: 16px; --r-3xl: 20px;
  }

  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }

  body {
    font-family: var(--font-sans);
    color: var(--color-primary);
    background: var(--color-white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  ::selection { background: var(--color-accent); color: #fff; }

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

  :focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 2px;
  }

  .wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--sp-3); }

  .skip {
    position: absolute; left: var(--sp-2); top: -60px; z-index: 100;
    background: var(--color-accent); color: #fff;
    padding: 10px var(--sp-2); border-radius: var(--r-md);
    font-size: 14px; text-decoration: none; transition: top .15s ease;
  }
  .skip:focus { top: var(--sp-2); }

  /* ── Wordmark ─────────────────────────────────────────── */
  .lockup { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
  .lockup .word {
    font-size: 22px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap;
  }
  .lockup .word small {
    font-size: 11px; font-weight: 500; letter-spacing: var(--tracking-cms);
    text-transform: uppercase; opacity: .5; margin-left: 8px;
  }

  /* ── Topbar ───────────────────────────────────────────── */
  .topbar {
    position: absolute; top: 0; left: 0; right: 0; z-index: 10;
    padding: var(--sp-3) 0;
  }
  .topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
  /* De twee sectielinks. Ze staan tussen het woordmerk en de GitHub-knop, en verdwijnen op smal:
     het merkteken en de enige actie wegen daar zwaarder dan navigatie naar twee subpagina's die
     ook onderaan staan. */
  .topnav { display: flex; gap: 4px; margin-left: auto; margin-right: var(--sp-1); }
  .topnav a {
    padding: 8px 12px; border-radius: var(--r-md);
    font-size: 14px; font-weight: 500; text-decoration: none;
    color: rgba(255,255,255,.72);
    transition: color .15s ease, background .15s ease;
  }
  .topnav a:hover { color: #fff; background: rgba(255,255,255,.08); }
  @media (max-width: 640px) { .topnav { display: none; } }

  /* ── Hero ─────────────────────────────────────────────── */
  .hero {
    position: relative;
    background: var(--color-dark);
    color: #fff;
    padding: calc(var(--sp-16) + var(--sp-4)) 0 var(--sp-12);
    overflow: hidden;
  }
  /* Subtle 24px grid, radially masked. Monochrome — no gradient colour. */
  .hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
      linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 70%);
    mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 70%);
  }
  .hero .wrap { position: relative; }

  .hero-mark { width: 72px; height: 72px; margin-bottom: var(--sp-4); }

  .status {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 14px 6px 12px; border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.04);
    font-size: 13px; font-weight: 500; color: rgba(255,255,255,.75);
    margin-bottom: var(--sp-3);
  }
  .status .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--color-accent); flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(79,124,255,.22);
  }

  .hero h1 {
    font-size: clamp(38px, 6.2vw, 68px);
    font-weight: 700; letter-spacing: -0.03em; line-height: 1.04;
    max-width: 16ch;
  }
  .hero .tagline {
    margin-top: var(--sp-3);
    font-size: clamp(17px, 2vw, 19px);
    color: rgba(255,255,255,.62);
    max-width: 56ch;
  }

  .actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }

  .btn {
    font-family: var(--font-sans); font-size: 14px; font-weight: 500;
    padding: 11px 20px; border-radius: var(--r-md); cursor: pointer;
    border: 1px solid transparent; text-decoration: none;
    display: inline-flex; align-items: center; gap: 8px;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
  }
  .btn-primary { background: var(--color-accent); color: #fff; }
  .btn-primary:hover { background: var(--color-accent-hover); }
  .btn-onDark {
    background: transparent; color: rgba(255,255,255,.85);
    border-color: rgba(255,255,255,.18);
  }
  .btn-onDark:hover { border-color: rgba(255,255,255,.42); color: #fff; }

  .hero-foot {
    display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3);
    margin-top: var(--sp-8);
    padding-top: var(--sp-3);
    border-top: 1px solid rgba(255,255,255,.09);
    font-size: 13px; color: rgba(255,255,255,.45);
    font-family: var(--font-mono);
  }
  .hero-foot span { display: inline-flex; align-items: center; gap: 8px; }

  /* ── Sections ─────────────────────────────────────────── */
  section { padding: var(--sp-12) 0; }
  section.surface { background: var(--color-surface); }
  section.dark { background: var(--color-dark); color: #fff; }

  .kicker {
    font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--sp-2);
  }
  /*
    Op de donkere grond neemt de kicker de lichtere accentstap van het merk: #7EA0FF, het
    code-keywordblauw uit §07. #4F7CFF haalt op #0B0D12 nog 5.24 en zou dus kunnen, maar §04 zet
    de donkere secties bewust op lagere dekkingen dan de lichte, en 7.74 is wat een 12px-label op
    die grond hoort te hebben. Dezelfde keuze staat in de admintokens (--brand in donkere modus)
    en in global.css van de site: één regel, drie implementaties.

    Eén klasse, geen tweede tokenlaag: er is precies één donkere sectie op deze pagina.
  */
  .dark .kicker { color: #7EA0FF; }
  section h2 {
    font-size: clamp(26px, 3.6vw, 38px); font-weight: 700;
    letter-spacing: -0.02em; line-height: 1.15; max-width: 20ch;
  }
  .lede {
    font-size: 17px; color: var(--color-muted);
    max-width: 62ch; margin-top: var(--sp-2);
  }
  section.dark .lede { color: rgba(255,255,255,.6); }

  /* ── Feature grid ─────────────────────────────────────── */
  .grid { display: grid; gap: var(--sp-2); }
  .g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
  @media (max-width: 900px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
  @media (max-width: 600px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

  .feature-grid { margin-top: var(--sp-6); }
  .feature {
    background: #fff; border: 1px solid var(--color-border);
    border-radius: var(--r-xl); padding: var(--sp-3);
    transition: border-color .15s ease;
  }
  .feature:hover { border-color: #C9CDD4; }
  .feature .icon { color: var(--color-primary); margin-bottom: var(--sp-2); }
  .feature h3 { font-size: 15px; font-weight: 600; margin-bottom: 6px; letter-spacing: -0.01em; }
  .feature p { font-size: 14px; color: var(--color-muted); }

  /* ── Specs ────────────────────────────────────────────── */
  .specs { margin-top: var(--sp-6); }
  .spec {
    border-left: 2px solid var(--color-border);
    padding: 4px 0 4px var(--sp-2);
  }
  .spec b {
    display: block; font-size: clamp(26px, 3.4vw, 34px); font-weight: 700;
    letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums;
  }
  .spec span { display: block; font-size: 13px; color: var(--color-muted); margin-top: 6px; }

  /* ── Code ─────────────────────────────────────────────── */
  .code-grid { margin-top: var(--sp-6); }
  .code-block { display: flex; flex-direction: column; min-width: 0; }
  .code-label {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
    /*
      Was rgba(255,255,255,.4), wat op de donkere codekaart neerkomt op #6D6E71 en 3.81 meet.
      #868E9C is dezelfde grijstint die hieronder het commentaar draagt — één waarde voor twee
      rollen die naast elkaar staan — en haalt hier 5.89.
    */
    text-transform: uppercase; color: #868E9C; margin-bottom: 10px;
  }
  pre {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.09);
    color: #E5E7EB; flex: 1;
    font-family: var(--font-mono); font-size: 13px; line-height: 1.75;
    border-radius: var(--r-xl); padding: var(--sp-3); overflow-x: auto;
    tab-size: 2;
  }
  /* Was #6B7280: 3.71 op de codeachtergrond (#15171B). #868E9C haalt 5.44. */
  pre .c { color: #868E9C; }
  pre .k { color: #7EA0FF; }
  pre .s { color: #A7F3D0; }

  /* ── Get started ──────────────────────────────────────── */
  /* Het installatieblok is breder dan de code-grid hierboven: dit is één commando dat iemand
     letterlijk kopieert, dus regels mogen niet afbreken op een plek die het commando verandert. */
  .install { margin-top: var(--sp-4); max-width: 62ch; }
  #get-started .actions { margin-top: var(--sp-4); }

  /* ── Footer ───────────────────────────────────────────── */
  footer {
    background: var(--color-dark); color: rgba(255,255,255,.45);
    padding: var(--sp-6) 0; font-size: 13px;
  }
  footer .wrap {
    display: flex; justify-content: space-between; align-items: center;
    gap: var(--sp-2); flex-wrap: wrap;
  }
  footer a { color: rgba(255,255,255,.7); text-decoration: none; }
  footer a:hover { color: #fff; text-decoration: underline; }

  /* Het linkblok boven de merkregel. Dit is de enige weg naar /compare en /integrations vanaf
     de homepage op smalle schermen, want daar valt .topnav weg.

     De kopjes staan op .6 wit en niet op de .45 van de footertekst eromheen: .45 meet exact 4.5
     op --color-dark — precies op de AA-grens — en dat is te krap voor een 11px-label. */
  .footer-top {
    display: block !important;
    padding-bottom: var(--sp-4); margin-bottom: var(--sp-4);
    border-bottom: 1px solid rgba(255,255,255,.09);
  }
  .footer-nav { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
  @media (min-width: 700px) { .footer-nav { grid-template-columns: 2fr 1fr; gap: var(--sp-6); } }
  /* Negen links onder elkaar maakt de footer twee schermen hoog; in twee kolommen is het één
     blok dat je in één oogopslag leest. `columns` en geen grid: de lijst mag ongelijk verdeeld
     aflopen zonder dat er een lege cel ontstaat.

     `display: block` moet erbij, want `.footer-col ul` hierboven staat op flex — en op een
     flexcontainer doet `columns` niets. Dat kostte één stille ronde: de regel stond er en de
     lijst bleef één kolom. */
  .footer-col .two-col {
    display: block; columns: 2; column-gap: var(--sp-3);
  }
  .footer-col .two-col li { margin-bottom: 8px; }
  @media (max-width: 420px) { .footer-col .two-col { columns: 1; } }
  .footer-col h2 {
    font-family: var(--font-mono); font-size: 11px; font-weight: 500;
    letter-spacing: .08em; text-transform: uppercase;
    color: rgba(255,255,255,.6); margin-bottom: 12px;
  }
  .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
  .footer-col a { font-size: 13px; }

  /* De socialrij in de footer én de losse GitHub-knop in de topbar. Eén regel voor allebei: het
     zijn dezelfde knop op een andere plek, en ze stonden op de pagina naast elkaar uit elkaar te
     lopen toen ze twee regels hadden.

     38px doel — ruim boven de 24x24 CSS-px die WCAG 2.2 AA 2.5.8 als ondergrens voor een
     aanwijsdoel stelt — en 8px radius, want §05 zet knoppen daarop. Beide plekken staan op
     --color-dark, vandaar de witte schaal. */
  .socials { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
  .socials a, .topbar-gh {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: var(--r-md);
    color: rgba(255,255,255,.6);
    transition: color .15s ease, background .15s ease;
  }
  /* Geen onderstreping bij hover: dit zijn knoppen met een logo, geen links in lopende tekst. */
  .socials a:hover, .topbar-gh:hover { color: #fff; background: rgba(255,255,255,.08); text-decoration: none; }


/* ══════════════════════════════════════════════════════════
   Generated pages (/compare, /integrations).
   Everything above this line is lifted verbatim from index.html
   by generate.ts — edit it there, then regenerate.
   ══════════════════════════════════════════════════════════ */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Sub-page bar ─────────────────────────────────────────
   The home page has a topbar floating over a dark hero. These pages open light,
   so the bar is a normal bordered header instead. */
.subbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--color-border);
}
.subbar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); min-height: 64px;
}
.subbar .lockup { color: var(--color-primary); }
.subbar .lockup .word { font-size: 19px; }
.subnav { display: flex; align-items: center; gap: 4px; }
.subnav a {
  padding: 8px 12px; border-radius: var(--r-md); font-size: 14px; font-weight: 500;
  color: var(--color-muted); text-decoration: none;
}
.subnav a:hover { color: var(--color-primary); background: var(--color-surface); }
.subnav a.btn-primary { color: #fff; }
.subnav a.btn-primary:hover { color: #fff; background: var(--color-accent-hover); }
@media (max-width: 560px) {
  .subnav a:not(.btn) { display: none; }
}

/* ── Light page hero ──────────────────────────────────── */
.page-hero { padding: var(--sp-8) 0 var(--sp-6); text-align: center; }
.page-hero h1 {
  font-size: clamp(32px, 5vw, 52px); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.06; max-width: 22ch; margin: 0 auto;
}
/* §03 licenses the accent for buttons and large/bold text. This is a 32px+ 700 heading,
   which is exactly that; it never carries running body text. */
.page-hero .accent { color: var(--color-accent); }
.page-hero .lede { margin: var(--sp-3) auto 0; }
.page-hero .actions, .page-hero .chips { justify-content: center; }
.crumbs {
  display: flex; justify-content: center; gap: 8px;
  font-size: 13px; color: var(--color-muted); margin-bottom: var(--sp-2);
}
.crumbs a { color: var(--color-muted); text-decoration: none; }
.crumbs a:hover { color: var(--color-primary); text-decoration: underline; }

section.tight { padding: var(--sp-8) 0; }
section h2 + .lede { margin-bottom: var(--sp-5); }

/* ── Verdict / callout ────────────────────────────────── */
.verdict {
  max-width: 820px; margin: 0 auto;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--r-2xl); padding: var(--sp-4);
}
.verdict p:not(.kicker) { font-size: 16px; }
.verdict-title { font-size: clamp(20px, 2.6vw, 26px); margin-bottom: var(--sp-1); }
.verdict .actions { margin-top: var(--sp-3); }

/* ── Comparison table ─────────────────────────────────── */
.cmp {
  margin-top: var(--sp-5); background: #fff;
  border: 1px solid var(--color-border); border-radius: var(--r-2xl); overflow: hidden;
}
.cmp-row {
  display: grid; grid-template-columns: 1fr; gap: 6px;
  padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--color-border);
}
.cmp-row:last-child { border-bottom: none; }
.cmp-head { display: none; }
.cmp-crit { font-weight: 600; font-size: 15px; }
.cmp-ours, .cmp-theirs { font-size: 14px; line-height: 1.55; }
.cmp-theirs { color: var(--color-muted); }
.cmp-label {
  display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-muted); margin-bottom: 2px;
}
@media (min-width: 820px) {
  .cmp-row { grid-template-columns: 0.8fr 1.2fr 1.2fr; gap: var(--sp-3); align-items: start; }
  .cmp-head {
    display: grid; background: var(--color-surface);
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--color-muted);
  }
  .cmp-label { display: none; }
}

/* ── Cards ────────────────────────────────────────────── */
.cards-top { margin-top: var(--sp-5); }
.card {
  background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--r-xl); padding: var(--sp-3);
  transition: border-color .15s ease;
}
.card:hover { border-color: #C9CDD4; }
.card h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 8px; }
.card p { font-size: 14px; color: var(--color-muted); }
.card-ours { border-color: #B9C9FF; }
.card-link { display: flex; flex-direction: column; gap: 8px; text-decoration: none; }
.card-link:hover { text-decoration: none; }
.card-link p { flex: 1; }
.card-link .vs { color: var(--color-muted); font-weight: 400; }
.card-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--color-accent);
}
.card-link:hover .card-cta { text-decoration: underline; }

/* ── Plus/minus lists ─────────────────────────────────── */
.mark-list { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mark-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.55; color: var(--color-muted); }
.mark { display: inline-flex; align-items: center; flex-shrink: 0; }
.mark-list .mark { margin-top: 2px; }
/* #16A34A and #DC2626 only ever colour an icon, never text — see MARK in generate.ts. */
.mark-yes { color: #16A34A; }
.mark-partial { color: var(--color-muted); }
.mark-no { color: #DC2626; }

/* ── Matrix ───────────────────────────────────────────── */
/*
  position: relative is not decoration — it keeps the page from scrolling sideways.
  The table is wider than a phone, which is what overflow-x: auto is here for, and the
  cells hold .sr-only labels plus an .sr-only caption. Those are position: absolute, so
  without a positioned ancestor their containing block is the initial one: they escape
  this box's clipping and get laid out at their static position, up to ~900px out. Each is
  clipped to 1x1 and invisible, so the whole page gained a horizontal scroll into nothing
  but white space. Making this box their containing block puts them back inside the
  scroller, where the overflow rule reaches them.
*/
.matrix-scroll {
  position: relative;
  margin-top: var(--sp-5); background: #fff;
  border: 1px solid var(--color-border); border-radius: var(--r-2xl); overflow-x: auto;
}
.matrix { width: 100%; border-collapse: collapse; font-size: 14px; }
.matrix th, .matrix td {
  padding: 12px var(--sp-2); text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--color-border);
}
.matrix thead th {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-muted); background: var(--color-surface);
}
.matrix thead th:not(:first-child), .matrix td { text-align: center; }
.matrix tbody th { font-weight: 600; }
.matrix tbody th a { color: var(--color-accent); font-weight: 600; text-decoration: none; }
.matrix tbody th a:hover { text-decoration: underline; }
.matrix tbody tr:last-child th, .matrix tbody tr:last-child td { border-bottom: none; }
.matrix-self th, .matrix-self td { background: var(--color-surface); }
.legend {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-2); font-size: 13px; color: var(--color-muted);
}
.legend > span { display: inline-flex; align-items: center; gap: 6px; }

/* ── Steps ────────────────────────────────────────────── */
.steps {
  margin: var(--sp-4) 0 0; padding-left: 20px; max-width: 70ch;
  display: flex; flex-direction: column; gap: 10px;
  font-size: 15px; color: var(--color-muted);
}
.steps li::marker { color: var(--color-primary); font-weight: 600; }

/* ── FAQ ──────────────────────────────────────────────── */
.faq-list { margin-top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); max-width: 820px; }
.faq { background: #fff; border: 1px solid var(--color-border); border-radius: var(--r-xl); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); cursor: pointer; font-weight: 600; font-size: 15px;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex-shrink: 0; color: var(--color-muted); transform: rotate(90deg); transition: transform .2s ease; }
.faq[open] summary svg { transform: rotate(-90deg); }
.faq p { padding: 0 var(--sp-3) var(--sp-3); font-size: 14px; color: var(--color-muted); }

/* ── Chips ────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-3); }
.chip {
  display: inline-flex; align-items: center; padding: 8px 14px;
  border: 1px solid var(--color-border); border-radius: 999px;
  background: #fff; font-size: 14px; font-weight: 500; text-decoration: none;
}
.chip:hover { border-color: #C9CDD4; text-decoration: none; }
.others-title { font-size: 16px; font-weight: 600; color: var(--color-muted); }

/* ── Outline button (light surfaces) ──────────────────── */
.btn-outline { background: #fff; color: var(--color-primary); border-color: var(--color-border); }
.btn-outline:hover { border-color: #C9CDD4; }

/* ── Integrations ─────────────────────────────────────── */
.integration {
  display: grid; gap: var(--sp-3); align-items: start;
  padding-top: var(--sp-5); margin-top: var(--sp-5);
  border-top: 1px solid var(--color-border);
  scroll-margin-top: 88px;
}
.integration:first-of-type { border-top: none; }
@media (min-width: 900px) {
  .integration { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--sp-5); }
}
.integration-copy { min-width: 0; }
.integration-eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--color-muted); margin-bottom: 4px;
}
.integration h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 8px; }
.integration > .integration-copy > p { font-size: 15px; color: var(--color-muted); }
/* pre inherits its dark styling from index.html; on a light page it keeps its own ground. */
.integration pre { background: var(--color-dark); border-color: rgba(255,255,255,.09); }
/*
  The label above it does NOT inherit cleanly. index.html sets .code-label to #868E9C, which is
  correct there — it sits on the dark section and measures 5.89. Here it sits on white, where the
  same grey is 3.3 and fails AA. So it falls back to the brand's own muted value (#6B7280, 4.83
  on white). Measured by the axe gate, which caught exactly this on both colour schemes.
*/
.integration .code-label { color: var(--color-muted); }