/* ============================================================================
   site.css — landing-repo-specific layer (loads last). Keeps the design-system
   files (tokens / kit-base / blocks / answer / landing) verbatim; everything that
   is specific to this static build lives here:
     1. CSP: replacements for inline style= attributes
     2. responsive CTA label
     3. real product captures
   Brandbook V4: rechte hoeken · oranje stuurt, blauw draagt (tabs = structuur = blauw).
   ============================================================================ */

/* ---- 1. icon sprite (was inline style="position:absolute") -------------- */
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---- 2. responsive CTA label -------------------------------------------- */
.demo-btn .lbl-short {
  display: none;
}
@media (max-width: 560px) {
  .header-actions .demo-btn .lbl-long {
    display: none;
  }
  .header-actions .demo-btn .lbl-short {
    display: inline;
  }
}
@media (max-width: 480px) {
  .header-row {
    gap: 12px;
  }
  .header-actions {
    gap: 8px;
  }
  .header-actions .demo-btn {
    display: none;
  }
  .header-actions .login-btn {
    padding-inline: 14px;
  }
}
@media (max-width: 360px) {
  .brand-name {
    font-size: 16px;
  }
  .header-actions .theme-toggle {
    display: none;
  }
}

/* ---- 3. real product captures ------------------------------------------- */
.hero-product-shot,
.product-capture {
  display: block;
  width: 100%;
}
.hero-product-shot {
  margin-left: auto;
  max-width: 640px;
}
.product-capture {
  height: auto;
  background: transparent;
}
@media (min-width: 921px) {
  .hero {
    min-height: auto;
    align-items: flex-start;
  }
  .hero-grid {
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(36px, 4vw, 56px);
    align-items: start;
    padding: clamp(52px, 6vh, 70px) 0 clamp(42px, 5vh, 64px);
  }
  .hero-copy {
    max-width: 560px;
  }
  .hero-copy .lp-h1 {
    margin-top: 0;
  }
  .hero-copy .lede {
    max-width: 51ch;
  }
  .hero-product-shot {
    max-width: 660px;
  }
}
.product-proof-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.45fr);
  gap: clamp(24px, 4vw, 44px);
  align-items: center;
}
.product-flow {
  min-width: 0;
}
.product-video-wrap {
  background: transparent;
}
.product-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 960 / 874;
  background: transparent;
  object-fit: cover;
}
.product-proof-points {
  grid-template-columns: 1fr;
  gap: 22px;
  margin-top: 0;
}
.product-proof-points a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--link);
  text-underline-offset: 2px;
}
.product-proof-points .aside-point h3 {
  font-size: 17px;
}
.product-proof-points .aside-point p {
  font-size: 15px;
}
.product-proof-cta {
  width: fit-content;
  margin-top: 4px;
}
@media (max-width: 940px) {
  .product-proof-grid {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .hero-product-shot {
    margin-left: 0;
    max-width: 620px;
  }
}
@media (max-width: 640px) {
  .hero {
    min-height: auto;
  }
  .hero-grid {
    gap: 16px;
    padding: 20px 18px 22px;
  }
  .hero-copy .lp-h1 {
    margin-top: 0;
    font-size: clamp(32px, 9.4vw, 38px);
    line-height: 1.04;
    letter-spacing: -0.025em;
  }
  .hero-copy .lede {
    margin-top: 12px;
    max-width: 34ch;
    font-size: 16px;
    line-height: 1.45;
  }
  .hero-cta {
    margin-top: 18px;
    gap: 10px;
  }
  .hero-cta .cta-lg {
    height: 50px;
    padding-inline: 18px;
  }
  .trust-strip {
    display: none;
  }
  .hero-visual {
    width: 100%;
  }
  .hero-product-shot {
    max-width: 100%;
  }
  .product-video {
    aspect-ratio: 960 / 874;
  }
  .product-proof-cta {
    width: 100%;
  }
}
@media (max-width: 420px) {
  .hero-grid {
    gap: 14px;
    padding: 18px 18px 22px;
  }
  .hero-copy .lede {
    margin-top: 12px;
    font-size: 15.8px;
    line-height: 1.42;
  }
  .hero-cta {
    margin-top: 16px;
  }
  .hero-product-shot {
    max-width: 100%;
  }
}

/* ---- 4. sub-pages (privacy / colofon / toegankelijkheid) --------------- */
.doc-main { padding: clamp(40px, 7vh, 72px) 0 72px; }
.doc { max-width: 760px; margin: 0 auto; }
.doc .eyebrow { margin-bottom: 12px; }
.doc h1 {
  font-family: var(--f-display); font-weight: 600; font-size: clamp(28px, 4vw, 40px);
  line-height: 1.1; letter-spacing: -0.02em; color: var(--ink-900); margin: 0 0 8px; text-wrap: balance;
}
.doc .doc-sub { font: 400 16px/1.6 var(--f-body); color: var(--ink-500); margin: 0 0 32px; }
.doc h2 {
  font-family: var(--f-display); font-weight: 600; font-size: 21px; letter-spacing: -0.01em;
  color: var(--ink-900); margin: 36px 0 10px;
}
.doc p, .doc li { font: 400 15.5px/1.65 var(--f-body); color: var(--ink-700); text-wrap: pretty; }
.doc p { margin: 0 0 14px; max-width: 68ch; }
.doc ul { margin: 0 0 16px; padding-left: 22px; display: flex; flex-direction: column; gap: 7px; }
.doc a { color: var(--link); text-underline-offset: 2px; }
.doc dl { margin: 0 0 8px; }
.doc dt { font: 600 12px var(--f-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-500); margin-top: 14px; }
.doc dd { margin: 3px 0 0; font: 400 15.5px/1.6 var(--f-body); color: var(--ink-900); }
.doc .doc-meta {
  margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line);
  font: 400 13px var(--f-body); color: var(--ink-500);
}

/* ---- 5. WCAG 2.2 AA corrections (design-review B1/B2/B3/H2/H3/H4/L3) ---- */
/* H2: keep real status dots round in light mode too (the .lp scope zeroed --r-pill). */
.lp { --r-pill: 999px; }
/* B1: 'let op' / gewijzigd-recht text reaches >=4.5:1 on warn-wash in light mode. */
html:not(.dark) .lp { --warn: #8B4A00; }
/* B2: footer CivAI credit reaches >=4.5:1 in dark mode. */
.dark .lp .civai-credit { color: var(--ink-500); }
/* B3: the 'generieke AI-chatbot' warning icon reaches >=3:1 non-text contrast. */
.lp .problem-card--ai .problem-head .ic { color: var(--orange-700); }
html:not(.dark) .lp .btn-outline {
  color: #1F2A37;
  background: #FFFFFF;
  border-color: #D2D0C9;
}
.dark .lp .btn-outline {
  color: #EAF0F5;
  background: #1B232D;
  border-color: #3A4753;
}
/* H4: desktop nav hit target 44px (honours the accessibility statement). */
.site-nav a { height: 44px; }
.lp .btn,
.btn-link,
.brand-lockup {
  min-height: 44px;
}
.theme-toggle {
  width: 44px;
  height: 44px;
}
/* H3: footer column headings are <h3> now (no h2->h4 skip); keep the h4 look. */
.footer-col h3 {
  font: 600 11px var(--f-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0 0 14px;
}
/* L3: give the source links a slightly larger target. */
.verdict .bron-open { padding: 7px 4px; }
.lede a,
.champion a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.footer-col a {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: 0;
}
.civai-credit a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}