/*
 * Klofy suite-site.
 *
 * Premium door typografie, diepte en een echt productbeeld; niet door kleurvlakken.
 * Merkblauw draagt het merkteken en de accenten, en kleur in de uitslagen is
 * uitsluitend semantisch: dood, kapot, keten, in orde. Geen gekleurde randstrepen
 * op kaarten en geen decoratieve grafiekjes.
 *
 * Het font is Geist, zelf gehost. Bewust niet van een CDN: deze site belooft in
 * het privacybeleid dat hij niets van derden laadt, en een font van Google geeft
 * het IP-adres van elke bezoeker aan Google door. 83 kB voor twee families.
 */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/geist-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB;
}

:root {
  --paper: #f5f5f2;
  --paper-2: #efefeb;
  --card: #ffffff;
  --ink: #12120f;
  --ink-2: #3a3a34;
  --muted: #6d6d64;
  --rule: rgba(18, 18, 15, 0.12);
  --rule-soft: rgba(18, 18, 15, 0.06);
  --accent: #2e6bf0;
  --accent-ink: #1d4fc4;
  --accent-wash: rgba(46, 107, 240, 0.1);

  /* Semantisch, en alleen semantisch. */
  --dead: #c0392b;
  --warn: #a8710f;
  --ok: #2c7a4f;

  --lift-1: 0 1px 2px rgba(18, 18, 15, 0.05), 0 8px 24px -16px rgba(18, 18, 15, 0.3);
  --lift-2: 0 1px 2px rgba(18, 18, 15, 0.04), 0 18px 40px -22px rgba(18, 18, 15, 0.4),
    0 42px 90px -50px rgba(18, 18, 15, 0.45);

  --sans: "Geist", ui-sans-serif, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --page: 72rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.6;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Korte pagina's (404) ankeren de footer onderaan het scherm. */
  display: flex; flex-direction: column; min-height: 100vh;
}
main { flex: 1; }

a { color: inherit; }

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

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

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 1rem; top: 1rem; background: var(--ink); color: var(--paper);
  padding: 0.5rem 0.8rem; border-radius: 5px; z-index: 20;
}

/* ── Chrome ─────────────────────────────────────────────────────────────── */

.bar {
  position: relative;
  z-index: 3;
  width: 100%; /* flex-kind met auto-marges krimpt anders tot contentbreedte */
  max-width: var(--page);
  margin: 0 auto;
  padding: 1.4rem 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.wordmark {
  display: inline-flex; align-items: center; gap: 0.55rem;
  text-decoration: none; font-weight: 600; letter-spacing: -0.03em; font-size: 1.08rem;
}

.bar nav { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.bar nav a {
  text-decoration: none; color: var(--muted); font-size: 0.875rem;
  transition: color 0.15s ease;
}
.bar nav a:hover { color: var(--ink); }

.foot {
  position: relative; z-index: 2;
  width: 100%;
  max-width: var(--page); margin: 7rem auto 0;
  padding: 2.6rem 1.5rem 3.2rem; border-top: 1px solid var(--rule);
}
.foot-grid { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 2rem; }
.foot-grid a {
  display: block; text-decoration: none; color: var(--muted);
  font-size: 0.875rem; transition: color 0.15s ease;
}
.foot-grid a:hover { color: var(--ink); }
.foot .fine { margin: 2.6rem 0 0; font-size: 0.78rem; }

/* Merkblok in de voettekst. Het teken staat hier alleen en mag daarom groter;
   de bedrijfsnaam staat bewust NIET hier maar in de balk eronder. */
.foot-brand img { display: block; margin-bottom: 0.85rem; }
.foot-brand p {
  margin: 0; color: var(--muted); font-size: 0.875rem;
  line-height: 1.55; max-width: 30ch;
}

/* De gecentreerde onderbalk draagt de officiele bedrijfsregel. */
.foot-bottom {
  margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--rule);
  text-align: center;
}
.foot-bottom p { margin: 0; font-size: 0.8125rem; color: var(--muted); }
.foot-bottom .fine { margin-top: 0.45rem; font-size: 0.75rem; }

/* ── Juridische en documentpagina's ─────────────────────────────────────── */

/* Deze pagina's gebruikten de volle breedte niet: één smalle tekstkolom links
   en een lege rechterhelft. De inhoudsopgave vult die ruimte met iets nuttigs,
   en een reviewer die naar de gegevenstabel van een specifieke app moet springt
   er meteen heen. */
.doc {
  display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 4.5rem;
  align-items: start;
}

.doc-nav { position: sticky; top: 2rem; }
.doc-nav ol { list-style: none; margin: 0; padding: 0; counter-reset: docstep; }
.doc-nav li { margin-bottom: 0.42rem; }
.doc-nav a {
  display: block; font-size: 0.8125rem; line-height: 1.45; color: var(--muted);
  text-decoration: none; padding: 0.12rem 0; transition: color 0.15s ease;
}
.doc-nav a:hover { color: var(--ink); }

.doc .prose { max-width: 52rem; }

/* Blok met de officiele gegevens. Geen kaart met schaduw: dit is een colofon,
   geen aanbieding. */
.colophon {
  border: 1px solid var(--rule); border-radius: 10px; background: var(--card);
  padding: 1.4rem 1.5rem; margin: 0 0 1.4rem;
}
.colophon dl { margin: 0; display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 0.5rem 1rem; }
.colophon dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); padding-top: 0.15rem; }
.colophon dd { margin: 0; font-size: 0.9rem; }

@media (max-width: 62rem) {
  .doc { grid-template-columns: 1fr; gap: 2.4rem; }
  .doc-nav { position: static; }
  .doc-nav ol { columns: 2; column-gap: 2rem; }
  .colophon dl { grid-template-columns: 1fr; gap: 0.15rem; }
  .colophon dd { margin-bottom: 0.7rem; }
}

/* ── Bouwstenen ─────────────────────────────────────────────────────────── */

.wrap {
  position: relative; z-index: 2;
  max-width: var(--page); margin: 0 auto; padding-inline: 1.5rem;
}
/* padding-inline en niet de shorthand: `.wrap` staat vaak op hetzelfde element
   als `section`, en een shorthand zet de verticale sectie-afstand op nul. */

.narrow { max-width: 46rem; }

.lbl {
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--muted); margin: 0 0 1.1rem; font-weight: 500;
}

.muted { color: var(--muted); }

h1 {
  font-size: clamp(2.4rem, 5.4vw, 3.9rem);
  line-height: 1.03; letter-spacing: -0.042em; font-weight: 560;
  margin: 0 0 1.5rem; max-width: 17ch;
}

h2 {
  font-size: clamp(1.5rem, 2.8vw, 2.05rem);
  line-height: 1.14; letter-spacing: -0.032em; font-weight: 560; margin: 0 0 1rem;
}

h3 { font-size: 1.02rem; letter-spacing: -0.018em; font-weight: 580; margin: 0 0 0.4rem; }
p { margin: 0 0 1rem; }

.lead { font-size: 1.16rem; line-height: 1.52; color: var(--ink-2); max-width: 44ch; }

/* Secties krijgen een hairline over de volle contentbreedte. Dat geeft elke
   sectie gewicht en een beginpunt, zonder er een kaart van te maken. */
section.wrap {
  margin-block-start: 4.8rem;
  padding-block-start: 2.6rem;
  border-top: 1px solid var(--rule);
}
.hero { padding-block-start: 4.2rem; padding-block-end: 2.2rem; }

/* Leespagina's: dezelfde anatomie, een maat kleiner. */
.hero-page { padding-block-start: 3.4rem; padding-block-end: 0.4rem; }
.hero-page h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.hero-page .lead { font-size: 1.05rem; }

/* Lichtwas achter de hero. Geeft diepte zonder een kleurvlak te worden. */
.wash {
  position: absolute; inset: -12rem 0 auto 0; height: 46rem; z-index: 0; pointer-events: none;
  background:
    radial-gradient(52% 52% at 74% 34%, rgba(46, 107, 240, 0.11), transparent 76%),
    radial-gradient(40% 48% at 12% 8%, rgba(185, 206, 249, 0.32), transparent 74%),
    linear-gradient(180deg, #fbfbfa 0%, rgba(251, 251, 250, 0) 72%);
}

.tag {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.75rem; letter-spacing: 0.005em; color: var(--ink-2);
  border: 1px solid var(--rule); border-radius: 100px;
  padding: 0.3rem 0.8rem 0.3rem 0.6rem; margin-bottom: 1.7rem;
  background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(6px);
  box-shadow: var(--lift-1);
}

.dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  display: inline-block; box-shadow: 0 0 0 3px var(--accent-wash);
}

/* ── Hero met productbeeld ──────────────────────────────────────────────── */

.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  gap: 4.5rem; align-items: center;
}

/* In de grid is de kolom smal; de kop een maat kleiner dan de vrijstaande h1. */
.hero-grid h1 {
  max-width: none;
  font-size: clamp(2.05rem, 3.3vw, 2.85rem);
  line-height: 1.06;
  margin-bottom: 1.2rem;
}
.hero-grid .lead { font-size: 1.08rem; }

.hero-actions { margin-top: 2rem; }

/* ── Het productbeeld ───────────────────────────────────────────────────── */

.mock {
  position: relative;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: var(--lift-2);
  overflow: hidden;
  font-size: 0.8125rem;
  transform: perspective(1400px) rotateY(-1.4deg) rotateX(1.2deg);
}

.mock-bar {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--rule-soft);
  background: linear-gradient(180deg, #fcfcfb, #f7f7f5);
}
.mock-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--rule); display: block; }
.mock-bar span {
  margin-left: 0.6rem; color: var(--muted); font-size: 0.72rem;
  letter-spacing: 0.02em;
}

.mock-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--rule-soft);
}
.mock-stats > div { padding: 0.95rem 1rem; border-right: 1px solid var(--rule-soft); }
.mock-stats > div:last-child { border-right: 0; }
.mock-stats b {
  display: block; font-size: 1.4rem; line-height: 1; font-weight: 560;
  letter-spacing: -0.035em; margin-bottom: 0.28rem;
  font-variant-numeric: tabular-nums;
}
.mock-stats b.is-dead { color: var(--dead); }
.mock-stats b.is-warn { color: var(--warn); }
.mock-stats b.is-ok { color: var(--ok); }
.mock-stats span { font-size: 0.7rem; color: var(--muted); letter-spacing: 0.01em; }

.mock-head {
  padding: 0.6rem 1rem 0.55rem; border-bottom: 1px solid var(--rule-soft);
  color: var(--muted); font-size: 0.64rem; letter-spacing: 0.13em; text-transform: uppercase;
  font-weight: 500; background: #fcfcfb;
}

.mock-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.8rem; align-items: center;
  padding: 0.72rem 1rem; border-bottom: 1px solid var(--rule-soft);
}
.mock-row:last-of-type { border-bottom: 0; }
.mock-row code {
  font-family: var(--mono); font-size: 0.75rem; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;
}
.mock-row em {
  display: block; font-style: normal; font-size: 0.7rem;
  color: var(--muted); margin-top: 0.15rem;
}

.state {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 500; white-space: nowrap; color: var(--muted);
}
.state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.state.is-dead { color: var(--dead); }
.state.is-warn { color: var(--warn); }
.state.is-ok { color: var(--ok); }

.mock-foot {
  padding: 0.7rem 1rem; border-top: 1px solid var(--rule-soft);
  background: #fbfbfa; color: var(--muted); font-size: 0.7rem;
  text-align: right; min-height: 2.45rem;
  /* Rechts en met vaste hoogte: het zwevende kaartje pakt de linkerhoek,
     ook als de balk leeg chrome is. */
}

/* Zwevend kaartje dat het herstelverhaal draagt en het beeld diepte geeft. */
.mock-float {
  position: absolute; left: -2rem; bottom: -2.6rem; z-index: 2;
  background: var(--card); border: 1px solid var(--rule); border-radius: 8px;
  padding: 0.68rem 0.85rem 0.72rem; box-shadow: var(--lift-2); max-width: 17rem;
}
.mock-float p { margin: 0.35rem 0 0; font-size: 0.72rem; color: var(--muted); line-height: 1.5; }
.mock-float code { font-family: var(--mono); font-size: 0.68rem; color: var(--ink-2); }
.mock-float .to { color: var(--muted); padding-inline: 0.1rem; }

.mock-wrap { position: relative; }
.mock { z-index: 1; }

/* Caption onder het beeld: een smalle rechterkolom, vrij van het zwevende
   kaartje linksonder. */
.mock-basis {
  text-align: right; margin: 1.1rem 0 0 auto; max-width: 19rem;
}

/* Zachte gloed achter het beeld, in plaats van een kleurvlak. */
.mock-wrap::before {
  content: ""; position: absolute; inset: -3rem -3.5rem -3.5rem; z-index: 0;
  background: radial-gradient(58% 55% at 55% 42%, rgba(46, 107, 240, 0.13), transparent 72%);
  pointer-events: none;
}

/* ── Cijfers ────────────────────────────────────────────────────────────── */

.figures {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
  border-radius: 10px; overflow: hidden; box-shadow: var(--lift-1);
}
.figures > div { background: var(--card); padding: 1.6rem 1.4rem; }
.figures b {
  display: block; font-size: 2.4rem; line-height: 1; letter-spacing: -0.045em;
  font-weight: 560; margin-bottom: 0.55rem; font-variant-numeric: tabular-nums;
}
.figures span { font-size: 0.8125rem; color: var(--muted); display: block; max-width: 27ch; }
.basis { font-size: 0.8125rem; color: var(--muted); margin-top: 1rem; }

/* ── Kaarten ────────────────────────────────────────────────────────────── */

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

.card {
  position: relative;
  background: linear-gradient(180deg, #ffffff, #fcfcfb);
  border: 1px solid var(--rule); border-radius: 10px; padding: 1.5rem;
  box-shadow: var(--lift-1);
}
.card p { margin: 0; color: var(--muted); font-size: 0.9rem; }

/* Het suite-merkteken op de vooruitblik-kaart. */
.card-mark { position: absolute; top: 1.35rem; right: 1.35rem; }
.card-next p { max-width: 46ch; }

a.card {
  text-decoration: none; display: block;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
a.card:hover {
  transform: translateY(-2px);
  border-color: rgba(46, 107, 240, 0.4);
  box-shadow: var(--lift-2);
}

.chip {
  display: inline-block; font-size: 0.65rem; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--accent-ink); background: var(--accent-wash);
  border-radius: 4px; padding: 0.2rem 0.5rem; margin-bottom: 0.85rem; font-weight: 560;
}
.chip.soon { color: var(--muted); background: var(--rule-soft); }

/* ── Genummerd verhaal ──────────────────────────────────────────────────── */

.story { counter-reset: step; display: grid; gap: 2.6rem; }
.story > article { display: grid; grid-template-columns: 3.4rem 1fr; gap: 1.2rem; align-items: start; }
.story > article::before {
  counter-increment: step; content: "0" counter(step);
  font-family: var(--mono); font-size: 0.72rem; color: var(--accent);
  padding-top: 0.34rem; letter-spacing: 0.04em;
}
.story p { margin: 0; color: var(--muted); max-width: 60ch; }

/* ── Tekstpagina's ──────────────────────────────────────────────────────── */

.prose { max-width: 44rem; }
.prose h2 { margin-top: 3rem; font-size: 1.28rem; }
.prose h3 { margin-top: 1.9rem; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul { padding-left: 1.15rem; margin: 0 0 1rem; }
.prose li { margin-bottom: 0.45rem; }
.prose a { color: var(--accent-ink); text-underline-offset: 2px; }
.prose code {
  font-family: var(--mono); font-size: 0.85em; background: var(--rule-soft);
  padding: 0.12rem 0.32rem; border-radius: 4px;
}

table { width: 100%; border-collapse: collapse; font-size: 0.875rem; margin: 0 0 1.5rem; }
th, td { text-align: left; vertical-align: top; padding: 0.75rem 0.9rem 0.75rem 0; border-bottom: 1px solid var(--rule); }
th {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.11em;
  color: var(--muted); font-weight: 500;
}
td:first-child { padding-right: 1.4rem; font-weight: 520; width: 34%; }
td code { white-space: nowrap; }
.tbl-scopes td:first-child { width: 46%; padding-right: 1rem; }

/* De user-agent-tabel op /bot: de UA-string mag wrappen, anders perst hij de
   eerste kolom plat. */
.tbl-agents td:first-child { width: 11rem; }
.tbl-agents code { white-space: normal; overflow-wrap: anywhere; }

.scroll-x { overflow-x: auto; }

/* ── Knoppen ────────────────────────────────────────────────────────────── */

.actions { display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: center; }

.cta {
  display: inline-block; background: var(--ink); color: #fafaf8; text-decoration: none;
  padding: 0.62rem 1.15rem; border-radius: 7px; font-size: 0.9rem; font-weight: 500;
  box-shadow: var(--lift-1); transition: transform 0.15s ease, background 0.15s ease;
}
.cta:hover { background: #000; transform: translateY(-1px); }

.cta.ghost {
  background: rgba(255, 255, 255, 0.7); color: var(--ink);
  border: 1px solid var(--rule); box-shadow: none;
}
.cta.ghost:hover { background: #fff; }

/* ── Smal ───────────────────────────────────────────────────────────────── */

@media (max-width: 62rem) {
  .hero-grid { grid-template-columns: 1fr; gap: 3rem; }
  .hero-grid h1 { max-width: 17ch; }
  .mock { transform: none; }
  .mock-float { position: static; margin-top: 1rem; max-width: none; }
  /* De gloed steekt buiten de pagina en rekt de scrollbreedte op; gestapeld
     voegt hij toch niets toe. */
  .mock-wrap::before { display: none; }
}

@media (max-width: 46rem) {
  body { font-size: 15px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 1.6rem; }
  .story > article { grid-template-columns: 2.4rem 1fr; gap: 0.85rem; }
  td:first-child { width: 40%; }
  /* Smal scherm: permission-codes mogen breken, anders wurgen ze de uitlegkolom. */
  .tbl-scopes td code { white-space: normal; overflow-wrap: anywhere; }
  .tbl-scopes td:first-child { width: 42%; }
  section.wrap { margin-block-start: 3.2rem; padding-block-start: 2rem; }
  .hero { padding-block-start: 2.6rem; }
  .mock-float { margin-top: 0.9rem; }
  /* Drie statcellen blijven naast elkaar; het label mag wrappen. */
  .mock-stats > div { padding: 0.8rem 0.7rem; }
  .mock-stats b { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto; }
  .mock { transform: none; }
}