/* saas.iamvera.app — dezelfde tokens als website/assets/vera.css */
/* Het hidden-attribuut werkt via [hidden] { display: none } uit de
   browser-stylesheet, en die verliest van elke auteursregel die een display
   zet. Daardoor bleef <a class="btn" hidden> gewoon staan: op de statuspagina
   toonde dat een lege, blauwe knop naast het domein zolang de omgeving nog
   gebouwd werd. Deze regel maakt het attribuut betrouwbaar voor elk element,
   ook voor knoppen die later worden toegevoegd. */
[hidden] { display: none !important; }

:root {
  --color-bg: #0a0a0f;
  --color-surface: #111118;
  --color-surface-2: #18181f;
  --color-border: rgba(255, 255, 255, 0.07);
  --color-text: #e8e8f0;
  --color-muted: #8f8fa8;
  --color-accent: #6366f1;
  --color-accent-text: #8b8dff;
  --color-accent-glow: rgba(99, 102, 241, 0.15);
  --color-btn: #5154e4;
  --color-btn-hover: #6164f0;
  --color-verified: #22c55e;
  --color-challenged: #f59e0b;
  --color-error: #f87171;
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --radius: 12px;
  --radius-lg: 20px;
  --max-w: 1080px;
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: var(--color-accent-text); }
.container { width: min(var(--max-w), calc(100% - 2.5rem)); margin: 0 auto; }

.nav { border-bottom: 1px solid var(--color-border); background: rgba(10, 10, 15, 0.85); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 10; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.nav-logo { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--color-text); text-decoration: none; font-weight: 600; letter-spacing: -0.01em; }
.nav-logo-mark { width: 28px; height: 28px; border-radius: 8px; background: var(--color-accent); display: inline-grid; place-items: center; }
.nav-logo-mark svg { width: 16px; height: 16px; fill: #fff; }
.lang-switch { display: inline-flex; border: 1px solid var(--color-border); border-radius: 999px; overflow: hidden; }
.lang-switch button { border: 0; background: transparent; color: var(--color-muted); font: inherit; font-size: 0.8rem; font-weight: 600; padding: 0.35rem 0.8rem; cursor: pointer; }
.lang-switch button[aria-pressed="true"] { background: var(--color-surface-2); color: var(--color-text); }

.main { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; padding: 4rem 0 5rem; align-items: start; }
@media (max-width: 860px) { .main { grid-template-columns: 1fr; padding-top: 2.5rem; } }

.eyebrow { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-text); margin: 0 0 1rem; }
h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.1rem, 4.5vw, 3.2rem); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 1.2rem; text-wrap: balance; }
.lead { font-size: 1.1rem; color: var(--color-muted); margin: 0 0 1.5rem; max-width: 34em; }
.points { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 0.6rem; }
.points li { padding-left: 1.6rem; position: relative; }
.points li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--color-accent-glow); border: 2px solid var(--color-accent); }
.price { border-top: 1px solid var(--color-border); padding-top: 1.2rem; color: var(--color-muted); }
.price strong { color: var(--color-text); font-weight: 600; }

.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 2rem; box-shadow: 0 30px 80px -40px var(--color-accent-glow); }
.field { display: grid; gap: 0.4rem; margin-bottom: 1.1rem; }
label { font-size: 0.85rem; font-weight: 600; color: var(--color-text); }
input[type="text"], input[type="email"] { width: 100%; font: inherit; color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.75rem 0.9rem; transition: border-color var(--transition), box-shadow var(--transition); }
input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-glow); }
input[aria-invalid="true"] { border-color: var(--color-error); }
.handle-wrap { display: flex; align-items: stretch; }
.handle-wrap input { border-radius: var(--radius) 0 0 var(--radius); font-family: var(--font-mono); }
.handle-suffix { display: inline-flex; align-items: center; padding: 0 0.9rem; border: 1px solid var(--color-border); border-left: 0; border-radius: 0 var(--radius) var(--radius) 0; background: var(--color-surface-2); color: var(--color-muted); font-family: var(--font-mono); font-size: 0.9rem; white-space: nowrap; }
.hint { margin: 0; font-size: 0.8rem; color: var(--color-muted); min-height: 1.2em; }
.hint.small { margin-top: 0.8rem; font-size: 0.75rem; }
.hint.ok { color: var(--color-verified); }
.hint.bad { color: var(--color-error); }
.check { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.85rem; color: var(--color-muted); font-weight: 400; margin: 0.4rem 0 1.4rem; }
.check input { margin-top: 0.25rem; accent-color: var(--color-accent); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font: inherit; font-weight: 600; padding: 0.85rem 1.4rem; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background var(--transition), transform var(--transition); }
.btn-primary { width: 100%; background: var(--color-btn); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--color-btn-hover); transform: translateY(-1px); }
.btn-primary:disabled { opacity: 0.6; cursor: wait; }
.btn:focus-visible { outline: 2px solid var(--color-accent-text); outline-offset: 2px; }

.status { margin: 0.9rem 0 0; font-size: 0.9rem; min-height: 1.3em; }
.status.bad { color: var(--color-error); }
.done h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; margin: 0 0 0.8rem; }
.done p { color: var(--color-muted); }
.mono { font-family: var(--font-mono); color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.6rem 0.9rem; display: inline-block; }
.done .btn { width: auto; margin-top: 1rem; }
.progress-spinner { display: inline-block; width: 0.9em; height: 0.9em; border: 2px solid var(--color-accent-glow); border-top-color: var(--color-accent); border-radius: 50%; animation: spin 0.9s linear infinite; vertical-align: -0.15em; margin-right: 0.4rem; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .progress-spinner { animation: none; } .btn { transition: none; } }

.footer { border-top: 1px solid var(--color-border); padding: 1.5rem 0; color: var(--color-muted); font-size: 0.8rem; }
.footer-inner { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; justify-content: space-between; }
.footer a { color: var(--color-muted); }
.grecaptcha-badge { visibility: hidden; }

/* --- Tarievenpagina ------------------------------------------------------ */

/* .main is op de bestelpagina een tweekolomsindeling (tekst naast formulier).
   De tarievenpagina loopt van boven naar beneden, dus één kolom. */
.main-single { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
.main-single .intro { margin-bottom: 0.5rem; }

.unit-card h2,
.card h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; margin: 0 0 0.6rem; }
.card h2 + p { color: var(--color-muted); margin: 0 0 1rem; }

/* Drie plannen naast elkaar, gestapeld op smalle schermen. minmax(0,1fr)
   zodat een lange planregel de kolommen niet uit elkaar duwt. */
.plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin: 1.5rem 0; }
@media (min-width: 48em) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.plan { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.5rem; }
.plan-name { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; margin: 0 0 0.4rem; }
.plan-price { margin: 0; font-size: 1.9rem; font-weight: 600; letter-spacing: -0.02em; }
.plan-per { font-size: 0.9rem; font-weight: 400; color: var(--color-muted); }
.plan-year { margin: 0.3rem 0 0; font-size: 0.85rem; color: var(--color-muted); }

.plan-points { list-style: none; margin: 1.2rem 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; flex: 1 1 auto; }
.plan-points li { position: relative; padding-left: 1.4rem; font-size: 0.92rem; color: var(--color-text); line-height: 1.5; }
.plan-points li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); }

.btn-plan { width: 100%; background: var(--color-surface-2); color: var(--color-text); border-color: var(--color-border); }
.btn-plan:hover { background: var(--color-bg); border-color: var(--color-accent); }

.packs { display: flex; flex-direction: column; gap: 0.5rem; }
.pack { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 0.75rem; padding: 0.7rem 0.9rem; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius); }
.pack-runs { font-weight: 600; }
.pack-price { font-variant-numeric: tabular-nums; font-weight: 600; }
.pack-per { font-size: 0.85rem; color: var(--color-muted); font-variant-numeric: tabular-nums; }

.cta { text-align: center; margin: 2.5rem 0 3rem; }
.cta .btn { width: auto; min-width: 14rem; }
.cta .hint { margin-top: 0.7rem; }

.nav-inner { gap: 1rem; }
.nav-link { margin-left: auto; color: var(--color-muted); text-decoration: none; font-size: 0.9rem; font-weight: 600; }
.nav-link:hover { color: var(--color-text); }

.packs-note { margin-top: 0.9rem; }

/* --- API-documentatie ----------------------------------------------------- */

/* Codeblokken. Breed, en dus met een eigen schuifbalk: de pagina zelf mag
   nooit zijwaarts schuiven. */
.code {
  margin: 1rem 0 0; padding: 0.9rem 1rem;
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow-x: auto;
}
.code code {
  font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.6;
  color: var(--color-text); white-space: pre;
}

.table-scroll { overflow-x: auto; margin-top: 1rem; border: 1px solid var(--color-border); border-radius: var(--radius); }
.t { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.t th {
  text-align: left; padding: 0.6rem 0.8rem; white-space: nowrap;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-text);
}
.t td { padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--color-border); vertical-align: top; color: var(--color-muted); }
.t tr:last-child td { border-bottom: 0; }
.t code { font-family: var(--font-mono); font-size: 0.8rem; color: var(--color-text); }
.t-method, .t-status { white-space: nowrap; font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; }
.t-route, .t-code { white-space: nowrap; }