.boekje-promo {
  display: grid;
  grid-template-columns: minmax(130px, 200px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(125deg, #eaf2ed 0%, var(--paper) 65%);
}
.boekje-promo img, .boekje-cover {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 8px 12px 24px rgba(35, 31, 32, .12);
}
.boekje-promo h2 { margin: 8px 0 12px; }
.boekje-promo p:not(.eyebrow) { max-width: 58ch; color: var(--muted); line-height: 1.7; }
.boekje-promo .boekje-meta { font-size: .85rem; }
.boekje-page { max-width: 1280px; margin: 0 auto; }
.boekje-page .article-body h2 { font-size: clamp(1.65rem, 2.6vw, 2.2rem); line-height: 1.2; }
.boekje-page .article-body h3 { font-size: 1.3rem; }
.boekje-hero { max-width: none; align-items: center; grid-template-columns: minmax(0, 1fr) minmax(190px, 270px); gap: clamp(32px, 5vw, 80px); }
.boekje-hero h1 { font-size: clamp(2.6rem, 4.8vw, 4.4rem); line-height: 1.05; }
.boekje-hero .article-lead { font-size: clamp(1.05rem, 1.8vw, 1.25rem); }
.boekje-hero figure { margin: 0; padding: 0 12px; }
.boekje-hero .boekje-cover { max-width: 270px; margin: auto; }
.boekje-download {
  padding: clamp(24px, 4vw, 40px);
  background: #eaf2ed;
  border: 1px solid #c9dbd2;
  border-radius: 20px;
  scroll-margin-top: 130px;
  margin: 36px 0;
}
.boekje-download h2 { margin-top: 8px; }
.boekje-form { margin-top: 24px; }
.boekje-form label { display: block; margin-bottom: 8px; font-weight: 600; }
.boekje-fields { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; }
.boekje-fields input {
  flex: 1 1 210px;
  min-width: 0;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #8a9d94;
  border-radius: 12px;
  color: var(--ink);
  background: white;
  font-size: 1rem;
}
.boekje-fields button { cursor: pointer; white-space: normal; }
.boekje-fields button:disabled { opacity: .65; cursor: wait; }
.boekje-form :focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }
.boekje-form .boekje-note { font-size: .87rem; line-height: 1.6; color: #514b46; }
.boekje-status { min-height: 1.5em; font-size: .95rem; }
.boekje-status[data-state="success"] { color: #1e5b45; font-weight: 600; }
.boekje-status[data-state="error"] { color: #8e2836; }
.boekje-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.boekje-sample { display: flex; align-items: flex-start; gap: 24px; margin: 24px 0; }
.boekje-sample img { width: 90px; height: auto; flex: 0 0 90px; }
.boekje-sample p { margin-top: 0; }
.boekje-sidebar { align-self: start; }
.boekje-sidebar h2 { font-size: 1.7rem; }
.boekje-sidebar .guide-link-list a { overflow-wrap: anywhere; }
@media (max-width: 660px) {
  .boekje-promo { grid-template-columns: 88px minmax(0, 1fr); gap: 12px 20px; padding: 22px; align-items: start; }
  .boekje-promo > a { grid-column: 1; grid-row: 1 / 3; }
  .boekje-promo > div { display: contents; }
  .boekje-promo .eyebrow, .boekje-promo h2 { grid-column: 2; margin: 0; }
  .boekje-promo p:not(.eyebrow), .boekje-promo .primary-action { grid-column: 1 / -1; margin-bottom: 0; }
  .boekje-promo h2 { font-size: 1.6rem; }
  .boekje-promo .primary-action { grid-column: 1 / -1; }
  .boekje-promo .boekje-meta { font-size: .78rem; }
  .boekje-hero { grid-template-columns: 1fr; }
  .boekje-hero figure { max-width: 200px; margin: 0 auto; }
  .boekje-fields { flex-direction: column; }
  .boekje-fields input { flex-basis: auto; }
  .boekje-fields button { width: 100%; }
  .boekje-sample { gap: 16px; }
  .boekje-sample img { width: 64px; flex-basis: 64px; }
}