/*
Theme Name: Japans Wandelen
Theme URI: https://japanswandelen.nl
Author: JR Online Media
Description: Officiële website van Japans Wandelen, de Nederlandse app voor japans wandelen. Zelfde kleuren, typografie en toon als de app.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: japanswandelen
*/

/* =============================================================================
   Ontwerptokens, één-op-één uit de app (packages/ui/src/tokens/colors.ts)
   ========================================================================== */

/* Fraunces (SIL Open Font License), zelf gehost: hetzelfde karaktervolle
   serif-lettertype dat de app voor koppen gebruikt. */
@font-face {
  font-family: 'Fraunces';
  src: url('assets/fonts/fraunces.woff2') format('woff2');
  font-weight: 600 700;
  font-display: swap;
}

/*
 * DE HUISSTIJL: INKT OP PAPIER, MET HET RITME VAN TWEE TEMPO'S
 *
 * De methode zelf is de vormgeving: stevig doorstappen en rustig wandelen
 * wisselen elkaar af. Die twee tempo's hebben allebei een eigen kleur, en het
 * lint bovenaan elke pagina laat ze om en om zien. Verder is het papier en
 * inkt: één warme papierkleur, donkere tekst en een enkel warm accent voor de
 * kleine signalen. Geen pastelregenboog; deze site hoort bij een methode voor
 * volwassenen, niet bij een kinderkamer.
 *
 * De blauwe tint komt uit de app (accent #3d6076), zodat site en app
 * herkenbaar bij elkaar horen.
 */
:root {
  /* De twee tempo's. */
  --jw-stevig: #2f5d78;
  --jw-rustig: #406f57;
  /*
   * Het warme signaal, spaarzaam: bovenregels, accenten, kleine markeringen.
   * Bewust een tint dieper dan het oog zou kiezen: zo haalt deze kleur op het
   * papier 5,4:1 en dus ook bij kleine hoofdletters genoeg contrast.
   */
  --jw-signaal: #a04a26;

  /* Vlakken: drie families in plaats van zeven pasteltinten. */
  --jw-tint-groen: #e3ece5;
  --jw-tint-perzik: #f0e6d9;
  --jw-tint-lila: #e6e9ee;
  --jw-tint-lucht: #e1eaf1;
  --jw-tint-zand: #efe7d6;
  --jw-tint-roze: #eee6dc;
  --jw-tint-boter: #f1ead7;

  --jw-background: #f5f2ea;
  --jw-surface: #ffffff;
  --jw-surface-muted: #ece7db;
  --jw-text: #18242b;
  --jw-text-secondary: #56646c;
  --jw-text-on-accent: #ffffff;
  --jw-border: #ddd6c7;
  --jw-accent: #2f5d78;
  --jw-accent-soft: #e1eaf1;
  --jw-accent-pressed: #234656;
  --jw-warning-soft: #f2e8da;
  --jw-warning: #7d5a1f;
  /* Strakker dan een babyapp: rechte hoeken met een lichte afronding. */
  --jw-radius: 12px;
  --jw-radius-small: 7px;
  --jw-maxwidth: 1120px;
}

/*
 * GEEN APARTE DONKERE WEERGAVE OP DE SITE
 *
 * Eén look overal is hier belangrijker; de app zelf heeft wel een volwaardige
 * donkere weergave, met een contrasttest erop. Zelfde afweging als bij de
 * zustersite baby-tracker.nl.
 */

/* =============================================================================
   Basis
   ========================================================================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Samen met dezelfde regel op body: Safari op iOS liet de pagina anders
     alsnog zijwaarts meebewegen. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--jw-background);
  color: var(--jw-text);
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* De kleurbanden lopen van rand tot rand; zonder dit levert dat een
     horizontale scrollbalk op. */
  overflow-x: clip;
}

a {
  color: var(--jw-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--jw-accent-pressed);
}

img {
  max-width: 100%;
  height: auto;
}

h1,
h2,
.jw-logo {
  font-family: 'Fraunces', Georgia, serif;
}

h1,
h2,
h3 {
  line-height: 1.12;
  letter-spacing: -0.015em;
  font-weight: 680;
}

h1 {
  font-size: clamp(2.3rem, 5.2vw, 3.6rem);
  margin: 0 0 0.5em;
}

h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  margin: 1.8em 0 0.5em;
}

h3 {
  font-size: 1.1rem;
  margin: 1.4em 0 0.4em;
}

p,
ul,
ol {
  margin: 0 0 1em;
}

.jw-wrap {
  max-width: var(--jw-maxwidth);
  margin: 0 auto;
  padding: 0 20px;
}

.jw-narrow {
  max-width: 720px;
}

/* =============================================================================
   Kop en navigatie
   ========================================================================== */

.jw-header {
  background: var(--jw-background);
  border-bottom: 1px solid var(--jw-border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.jw-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  max-width: var(--jw-maxwidth);
  margin: 0 auto;
}

.jw-logo {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--jw-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.jw-logo-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--jw-accent);
  display: inline-block;
}

.jw-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}

.jw-nav a {
  color: var(--jw-text-secondary);
  text-decoration: none;
  font-size: 0.95rem;
  padding: 6px 2px;
}

.jw-nav a:hover,
.jw-nav a[aria-current='page'] {
  color: var(--jw-accent);
}

/* Het uitklapmenu voor smalle schermen. Op een breed scherm staan de links
   gewoon naast elkaar en blijft de knop verborgen. */
.jw-menu-uit {
  display: none;
  position: relative;
}

.jw-menu-uit > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1.5px solid var(--jw-border);
  border-radius: 999px;
  font-weight: 650;
  font-size: 0.95rem;
  color: var(--jw-text);
  background: var(--jw-surface);
}

.jw-menu-uit > summary::-webkit-details-marker {
  display: none;
}

.jw-hamburger {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 18px;
  height: 12px;
}

.jw-hamburger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--jw-accent);
}

/* Open: de drie streepjes worden een kruisje, zodat de knop ook zegt dat je
   hem weer dicht kunt doen. */
.jw-menu-uit[open] > summary .jw-hamburger span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}

.jw-menu-uit[open] > summary .jw-hamburger span:nth-child(2) {
  opacity: 0;
}

.jw-menu-uit[open] > summary .jw-hamburger span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

.jw-menu-paneel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 230px;
  display: flex;
  flex-direction: column;
  background: var(--jw-surface);
  border: 1px solid var(--jw-border);
  border-radius: var(--jw-radius);
  box-shadow: 0 24px 48px -28px rgba(33, 31, 27, 0.45);
  padding: 8px;
  z-index: 20;
}

.jw-menu-paneel a {
  padding: 12px 14px;
  border-radius: var(--jw-radius-small);
  color: var(--jw-text);
  text-decoration: none;
  font-weight: 600;
}

.jw-menu-paneel a:hover,
.jw-menu-paneel a[aria-current='page'] {
  background: var(--jw-accent-soft);
  color: var(--jw-accent);
}

@media (max-width: 860px) {
  .jw-nav-breed {
    display: none;
  }

  .jw-menu-uit {
    display: block;
    /*
     * Niet `relative`. Het paneel hangt met `right: 0` aan zijn houder, en die
     * houder staat op een telefoon links op de regel. Daardoor klapte het menu
     * naar links het scherm uit: van de vijf links was alleen de rechterhelft
     * zichtbaar. Door de houder statisch te maken, hangt het paneel aan de
     * balk zelf (die is `sticky` en dus positioneerbaar) en kan het de volle
     * breedte pakken.
     */
    position: static;
  }

  .jw-menu-paneel {
    left: 16px;
    right: 16px;
    top: calc(100% + 8px);
    min-width: 0;
  }

  .jw-header-inner {
    padding: 12px 16px;
  }

  /* Eén regel, met het logo links en de knop rechts. Stond eerder onder de
     640 pixels onder elkaar; dat kostte een derde van een telefoonscherm aan
     alleen maar kop. */
  .jw-header-inner {
    flex-direction: row;
    align-items: center;
  }

  /* De naam mag krimpen, de menuknop nooit: die houdt zijn volle aanraakvlak. */
  .jw-logo {
    min-width: 0;
  }

  .jw-logo-tekst {
    overflow: hidden;
  }

  .jw-menu-uit > summary {
    flex: 0 0 auto;
    min-height: 44px;
  }
}

/* =============================================================================
   Held (homepagina)
   ========================================================================== */

.jw-hero {
  padding: 72px 0 56px;
  text-align: center;
}

.jw-hero p.jw-tagline {
  font-size: 1.2rem;
  color: var(--jw-text-secondary);
  max-width: 560px;
  margin: 0 auto 1.6em;
}

.jw-badge {
  display: inline-block;
  background: var(--jw-accent-soft);
  color: var(--jw-accent);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 20px;
}

.jw-button {
  display: inline-block;
  background: var(--jw-accent);
  color: var(--jw-text-on-accent);
  border-radius: 999px;
  padding: 16px 34px;
  font-weight: 650;
  text-decoration: none;
  border: none;
  font-size: 1.05rem;
  box-shadow: 0 10px 22px -12px rgba(53, 101, 90, 0.55);
  transition:
    transform 0.15s ease,
    background 0.15s ease;
}

.jw-button:hover {
  background: var(--jw-accent-pressed);
  color: var(--jw-text-on-accent);
  transform: translateY(-1px);
}

.jw-button-secondary {
  display: inline-block;
  border: 1.5px solid var(--jw-accent);
  color: var(--jw-accent);
  border-radius: 999px;
  padding: 12px 28px;
  font-weight: 600;
  text-decoration: none;
  font-size: 1rem;
}

/* =============================================================================
   Kaarten en secties
   ========================================================================== */

.jw-section {
  padding: 48px 0;
}

/* Kleurbanden van rand tot rand, met grote ronde hoeken. Ze geven de pagina
   het ritme van een tijdschrift in plaats van een lange lap tekst. */
.jw-band {
  /* De sierkringen steken bewust buiten de band; zonder deze regel steken ze
     ook buiten het scherm en kun je de pagina zijwaarts wegslepen. */
  overflow: hidden;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: max(24px, calc(50vw - var(--jw-maxwidth) / 2));
  padding-right: max(24px, calc(50vw - var(--jw-maxwidth) / 2));
  padding-top: 64px;
  padding-bottom: 72px;
  border-radius: 64px;
  margin-top: 40px;
  margin-bottom: 40px;
}

.jw-band-groen {
  background: var(--jw-tint-groen);
}

.jw-band-perzik {
  background: var(--jw-tint-perzik);
}

.jw-band-zand {
  background: var(--jw-tint-zand);
}

.jw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin: 24px 0;
}

.jw-card {
  background: var(--jw-surface);
  border: 1px solid var(--jw-border);
  border-radius: var(--jw-radius);
  padding: 28px;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.jw-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -24px rgba(33, 31, 27, 0.35);
}

.jw-card h3 {
  margin-top: 0;
}

.jw-card p {
  color: var(--jw-text-secondary);
  font-size: 0.97rem;
  margin-bottom: 0.6em;
}

.jw-card a.jw-more {
  font-size: 0.95rem;
  font-weight: 600;
}

.jw-note {
  background: var(--jw-warning-soft);
  color: var(--jw-warning);
  border-radius: var(--jw-radius-small);
  padding: 14px 18px;
  font-size: 0.95rem;
}

.jw-quiet {
  background: var(--jw-surface-muted);
  border-radius: var(--jw-radius);
  padding: 28px;
}

/* =============================================================================
   Inhoudspagina's
   ========================================================================== */

.jw-content {
  padding: 48px 0 64px;
}

.jw-content h1 {
  max-width: 720px;
}

.jw-content .jw-intro {
  font-size: 1.15rem;
  color: var(--jw-text-secondary);
  max-width: 720px;
}

.jw-content ul li {
  margin-bottom: 0.4em;
}

.jw-content table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.95rem;
}

.jw-content th,
.jw-content td {
  border: 1px solid var(--jw-border);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}

.jw-content th {
  background: var(--jw-surface-muted);
}

/* =============================================================================
   Voettekst
   ========================================================================== */

.jw-footer {
  border-top: 1px solid var(--jw-border);
  margin-top: 48px;
  padding: 40px 0 48px;
  font-size: 0.92rem;
  color: var(--jw-text-secondary);
}

.jw-footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
}

.jw-footer h4 {
  margin: 0 0 10px;
  color: var(--jw-text);
  font-size: 0.95rem;
}

.jw-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.jw-footer li {
  margin-bottom: 6px;
}

.jw-footer a {
  color: var(--jw-text-secondary);
}

.jw-footer a:hover {
  color: var(--jw-accent);
}

.jw-footer .jw-legal-line {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--jw-border);
  font-size: 0.85rem;
}

@media (max-width: 640px) {
  .jw-hero {
    padding: 48px 0 36px;
  }
}

/* =============================================================================
   Herontwerp: hero met telefoon, secties met ritme, kaarten met iconen
   ========================================================================== */

.jw-eyebrow {
  display: inline-block;
  color: var(--jw-accent);
  font-weight: 650;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.jw-hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: center;
  padding: 72px 0 88px;
  position: relative;
}

.jw-hero-split h1 {
  max-width: none;
  margin: 0 0 0.4em;
  font-size: clamp(2.7rem, 6vw, 4.4rem);
  letter-spacing: -0.022em;
  line-height: 1.04;
}

.jw-hero-split .jw-tagline {
  font-size: 1.22rem;
  color: var(--jw-text-secondary);
  margin: 0 0 1.2em;
  max-width: 32em;
}

/* De fasekeuze in de hero: waar sta jij nu? */
.jw-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 26px;
}

.jw-hero-chips a {
  background: var(--jw-surface);
  border: 1.5px solid var(--jw-border);
  border-radius: 999px;
  padding: 11px 22px;
  font-weight: 650;
  font-size: 0.98rem;
  text-decoration: none;
  color: var(--jw-text);
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease;
}

.jw-hero-chips a:hover {
  border-color: var(--jw-accent);
  color: var(--jw-accent);
  transform: translateY(-1px);
}

/* Zachte glow en accenten achter de telefoon. */
.jw-hero-split .jw-phone-wrap {
  position: relative;
}

.jw-hero-split .jw-phone-wrap::before {
  content: '';
  position: absolute;
  inset: -6% -18%;
  background: radial-gradient(closest-side, var(--jw-tint-groen) 0%, transparent 74%);
  z-index: 0;
}

.jw-hero-split .jw-phone-wrap::after {
  content: '';
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--jw-tint-perzik);
  right: -10px;
  top: 62%;
  z-index: 0;
}

.jw-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.jw-hero-note {
  font-size: 0.85rem;
  color: var(--jw-text-secondary);
  margin-top: 14px;
}

/* De telefoon: de echte app in een kader, geen plaatje. */
.jw-phone-wrap {
  display: flex;
  justify-content: center;
}

/* De schermafbeeldingen zijn op 414 punten breed gemaakt, precies de breedte
   van een echte telefoon. Ze kleiner tonen maakt de tekst in het scherm
   onleesbaar; op ware grootte lees je gewoon mee. */
.jw-phone {
  width: min(414px, 88vw);
  height: auto;
  border-radius: 54px;
  border: 12px solid #23211c;
  background: #23211c;
  box-shadow:
    0 34px 70px -22px rgba(33, 31, 27, 0.38),
    0 12px 24px -12px rgba(33, 31, 27, 0.25);
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.jw-phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 42px;
}

.jw-phone iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 37px;
  background: var(--jw-background);
  display: block;
}

.jw-phone-caption {
  text-align: center;
  font-size: 0.85rem;
  color: var(--jw-text-secondary);
  margin-top: 14px;
}

/* Kaarten met icoon */
.jw-card .jw-icon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: var(--jw-accent-soft);
  color: var(--jw-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.jw-card .jw-icon svg {
  width: 26px;
  height: 26px;
}

/* Elke kaart zijn eigen pasteltint, in een vaste rotatie. */
.jw-grid .jw-card:nth-child(6n + 2) .jw-icon {
  background: var(--jw-tint-perzik);
}

.jw-grid .jw-card:nth-child(6n + 3) .jw-icon {
  background: var(--jw-tint-lucht);
}

.jw-grid .jw-card:nth-child(6n + 4) .jw-icon {
  background: var(--jw-tint-zand);
}

.jw-grid .jw-card:nth-child(6n + 5) .jw-icon {
  background: var(--jw-tint-roze);
}

.jw-grid .jw-card:nth-child(6n) .jw-icon {
  background: var(--jw-tint-lila);
}

/* Afwisselende sectie met beeld en tekst */
.jw-feature-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding: 40px 0;
}

/* De omgekeerde rij: beeld links, tekst rechts. Dit stond op order 2, wat de
   media achteraan zet en dus precies liet staan waar hij al stond; de rijen
   op de homepagina hadden daardoor allemaal het beeld rechts (tiende
   testronde). Op een smal scherm leest de tekst eerst, dus daar wordt de
   volgorde in de mediaquery hieronder teruggezet. */
.jw-feature-row.jw-reverse > .jw-feature-media {
  order: -1;
}

.jw-feature-media .jw-phone {
  width: min(392px, 88vw);
  height: auto;
}

.jw-checklist {
  list-style: none;
  padding: 0;
  margin: 1em 0;
}

.jw-checklist li {
  padding-left: 30px;
  position: relative;
  margin-bottom: 0.7em;
}

.jw-checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--jw-accent-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2335655a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4 10-10'/%3E%3C/svg%3E");
  background-size: 11px;
  background-position: center;
  background-repeat: no-repeat;
}

/* Rustige afsluiter */
.jw-endcap {
  text-align: center;
  padding: 56px 32px;
  background: var(--jw-accent);
  color: var(--jw-text-on-accent);
  border-radius: var(--jw-radius);
  margin: 48px 0 8px;
}

.jw-endcap h2 {
  margin: 0 0 0.4em;
  color: inherit;
}

.jw-endcap p {
  color: inherit;
  opacity: 0.9;
  max-width: 36em;
  margin: 0 auto 1.4em;
}

.jw-endcap .jw-button {
  background: var(--jw-surface);
  color: var(--jw-accent);
}

.jw-endcap p a:not(.jw-store-badge):not(.jw-button) {
  color: inherit;
  text-decoration: underline;
}

.jw-endcap .jw-prijs-noot {
  opacity: 0.85;
}

/* Wint van ".jw-endcap p": in de donkere band houdt de gele pil donkere
   tekst, anders is de prijs onleesbaar. */
.jw-endcap .jw-prijs {
  color: #211f1b;
  opacity: 1;
}

.jw-endcap .jw-badges {
  justify-content: center;
  margin-top: 6px;
}

@media (max-width: 860px) {
  .jw-hero-split,
  .jw-feature-row {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .jw-feature-row.jw-reverse > .jw-feature-media {
    order: 0;
  }

  .jw-phone {
    width: min(370px, 90vw);
    height: auto;
  }
}

/* FAQ-accordeon, blog en kruimelpad */
.jw-logo-mark {
  border-radius: 50%;
  display: block;
}

.jw-faq-blok {
  margin-top: 40px;
}

.jw-faq-item {
  background: var(--jw-surface);
  border: 1px solid var(--jw-border);
  border-radius: var(--jw-radius-small);
  padding: 0;
  margin-bottom: 10px;
}

.jw-faq-item summary {
  cursor: pointer;
  padding: 16px 18px;
  font-weight: 600;
  list-style: none;
  position: relative;
  padding-right: 40px;
}

.jw-faq-item summary::-webkit-details-marker {
  display: none;
}

.jw-faq-item summary::after {
  content: '+';
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--jw-accent);
  font-size: 1.3rem;
  font-weight: 500;
}

.jw-faq-item[open] summary::after {
  content: '\2212';
}

.jw-faq-item p {
  padding: 0 18px 16px;
  margin: 0;
  color: var(--jw-text-secondary);
}

.jw-card h3 a {
  color: var(--jw-text);
  text-decoration: none;
}

.jw-card h3 a:hover {
  color: var(--jw-accent);
}

.jw-crumb {
  font-size: 0.85rem;
  color: var(--jw-text-secondary);
  margin-bottom: 4px;
}

.jw-content article p,
.jw-content .jw-wrap > p {
  max-width: 46em;
}

/* =============================================================================
   Premium details en de speelse functieblokken
   ========================================================================== */

.jw-card {
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.jw-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -18px rgba(33, 31, 27, 0.25);
}

.jw-button {
  box-shadow: 0 10px 22px -12px rgba(53, 101, 90, 0.55);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.jw-button:hover {
  transform: translateY(-1px);
}

.jw-hero-split {
  /* Eén rustige lichtval rechtsboven; de glow achter de telefoon doet de
     rest. Twee gradiënten tegelijk oogden als vlekken. */
  background: radial-gradient(52rem 34rem at 88% -10%, var(--jw-accent-soft) 0%, transparent 62%);
  border-radius: var(--jw-radius);
  padding: 64px 40px 80px;
  margin-top: 24px;
}

/* Op een telefoon kwam die binnenmarge van 40 bovenop de 20 van de pagina, en
   bleef er te weinig over voor de kop en de telefoonafbeelding: de tekst liep
   buiten beeld en de pagina schoof zijwaarts. */
@media (max-width: 640px) {
  .jw-hero-split {
    padding: 32px 0 48px;
    margin-top: 8px;
  }

  .jw-hero-split .jw-phone,
  .jw-phone {
    width: 100%;
    max-width: 340px;
  }

  .jw-badges {
    justify-content: flex-start;
  }

  .jw-store-badge {
    flex: 1 1 150px;
    min-width: 0;
  }
}

/* Functieblokken: elk een eigen zachte kleur, groot icoon, punten en link */
.jw-tegels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
  margin: 28px 0 8px;
}

.jw-tegel {
  border-radius: var(--jw-radius);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.15s ease;
}

.jw-tegel:hover {
  transform: translateY(-3px);
}

.jw-tegel .jw-icon {
  background: rgba(255, 255, 255, 0.65);
  width: 48px;
  height: 48px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--jw-accent);
}

.jw-tegel .jw-icon svg {
  width: 24px;
  height: 24px;
}

.jw-tegel h2 {
  margin: 4px 0 0;
  font-size: 1.25rem;
}

.jw-tegel p {
  margin: 0;
  color: var(--jw-text-secondary);
}

.jw-tegel ul {
  margin: 6px 0 4px;
  padding-left: 0;
  list-style: none;
}

.jw-tegel li {
  padding-left: 24px;
  position: relative;
  margin-bottom: 6px;
  font-size: 0.95rem;
  color: var(--jw-text-secondary);
}

.jw-tegel li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--jw-accent);
  opacity: 0.6;
}

.jw-tegel a.jw-more {
  margin-top: auto;
  padding-top: 8px;
  font-weight: 650;
}

.jw-tegel-groen {
  background: var(--jw-tint-groen);
}
.jw-tegel-perzik {
  background: var(--jw-tint-perzik);
}
.jw-tegel-lila {
  background: var(--jw-tint-lila);
}
.jw-tegel-lucht {
  background: var(--jw-tint-lucht);
}
.jw-tegel-zand {
  background: var(--jw-tint-zand);
}
.jw-tegel-roze {
  background: var(--jw-tint-roze);
}
.jw-tegel-boter {
  background: var(--jw-tint-boter);
}

.jw-duo-telefoons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  justify-items: center;
  padding: 40px 0 12px;
}

/* Schermafbeeldingen in het telefoonkader en de storebadges */
.jw-phone img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 37px;
}

/* Het kader volgt de beeldverhouding van de schermafbeelding, zodat er
   nooit een rand van het scherm wordt afgesneden. */
.jw-phone {
  height: auto;
}

.jw-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.jw-store-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #211f1b;
  color: #fbf8f4;
  border-radius: 14px;
  padding: 10px 20px 10px 16px;
  text-decoration: none;
  line-height: 1.15;
  transition:
    transform 0.15s ease,
    opacity 0.15s ease;
}

.jw-store-badge:hover {
  transform: translateY(-1px);
  color: #fbf8f4;
  opacity: 0.92;
}

.jw-store-badge svg {
  width: 26px;
  height: 26px;
}

.jw-store-badge small {
  display: block;
  font-size: 0.68rem;
  opacity: 0.8;
}

.jw-store-badge strong {
  font-size: 1.05rem;
}

.jw-endcap .jw-badges {
  justify-content: center;
}

/* Fase-entree en illustraties */
.jw-illu {
  width: 84px;
  height: 84px;
}

.jw-fase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  margin-top: 24px;
}

.jw-fase {
  background: var(--jw-surface);
  border: 1px solid var(--jw-border);
  border-radius: var(--jw-radius);
  padding: 28px;
  text-decoration: none;
  color: var(--jw-text);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.jw-fase:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -20px rgba(33, 31, 27, 0.3);
  color: var(--jw-text);
}

.jw-fase h3 {
  margin: 6px 0 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.3rem;
}

.jw-fase p {
  margin: 0;
  color: var(--jw-text-secondary);
  font-size: 0.95rem;
}

.jw-fase .jw-more {
  margin-top: auto;
  padding-top: 8px;
  color: var(--jw-accent);
  font-weight: 650;
  font-size: 0.95rem;
}

/* =============================================================================
   Speelse laag (negende ronde): pastelvlekken, prijskaartje, stappen,
   schermkaarten en bronnen. Warm en babyachtig, zonder de rust te verliezen.
   ========================================================================== */

/* Vlekken: elke telefoon buiten de hero krijgt dezelfde zachte cirkels als
   de hero, met wisselende kleuren per plek. */
.jw-vlekken {
  position: relative;
}

.jw-vlekken::before {
  content: '';
  position: absolute;
  inset: -4% -16%;
  background: radial-gradient(closest-side, var(--jw-tint-boter) 0%, transparent 74%);
  z-index: 0;
}

.jw-vlekken::after {
  content: '';
  position: absolute;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: var(--jw-tint-roze);
  left: -14px;
  top: 8%;
  z-index: 0;
}

.jw-vlekken > * {
  position: relative;
  z-index: 1;
}

/* De afsluitende band krijgt vlekken in de hoeken. */
.jw-endcap {
  position: relative;
  overflow: hidden;
}

.jw-endcap::before {
  content: '';
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: var(--jw-tint-boter);
  left: -80px;
  top: -80px;
}

.jw-endcap::after {
  content: '';
  position: absolute;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: var(--jw-tint-roze);
  right: -60px;
  bottom: -70px;
}

.jw-endcap > * {
  position: relative;
  z-index: 1;
}

/* Het prijskaartje: een vriendelijke pil, geen kassabon. */
.jw-prijs {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  background: #f7eecb;
  color: #211f1b;
  border-radius: 999px;
  padding: 12px 26px;
  margin: 6px 0 2px;
}

.jw-prijs strong {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.7rem;
  line-height: 1;
}

.jw-prijs span {
  font-size: 0.95rem;
  color: #635c51;
  font-weight: 600;
}

.jw-prijs-noot {
  font-size: 0.85rem;
  color: var(--jw-text-secondary);
  margin: 10px 0 0;
}

/* Stappen: genummerde rondjes, voor "zo werkt het". */
.jw-stappen {
  list-style: none;
  counter-reset: stap;
  margin: 20px 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.jw-stappen li {
  counter-increment: stap;
  position: relative;
  padding: 16px 20px 16px 66px;
  background: var(--jw-surface);
  border: 1px solid var(--jw-border);
  border-radius: var(--jw-radius);
}

.jw-stappen li::before {
  content: counter(stap);
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--jw-tint-groen);
  color: var(--jw-accent);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jw-stappen li:nth-child(2)::before {
  background: var(--jw-tint-boter);
  color: var(--jw-warning);
}

.jw-stappen li:nth-child(3)::before {
  background: var(--jw-tint-roze);
  color: #8a4a5c;
}

.jw-stappen li:nth-child(4)::before {
  background: var(--jw-tint-lucht);
  color: #3c5a72;
}

/* Losse schermkaarten uit de app: lichter dan een hele telefoon, handig om
   één grafiek of patroon te laten zien. */
.jw-kaart-galerij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 26px;
  align-items: start;
  margin: 26px 0;
}

.jw-app-kaart {
  margin: 0;
}

.jw-app-kaart img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
  border: 1px solid var(--jw-border);
  box-shadow: 0 22px 44px -30px rgba(33, 31, 27, 0.45);
}

.jw-app-kaart figcaption {
  text-align: center;
  font-size: 0.85rem;
  color: var(--jw-text-secondary);
  margin-top: 10px;
}

/* Vier tegels als rustig 2x2-blok (Over ons en Contact); op smalle
   schermen gewoon onder elkaar. */
.jw-tegels-twee {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 760px) {
  .jw-tegels-twee {
    grid-template-columns: 1fr;
  }
}

/* Bronnen onderaan een pagina: rustig, controleerbaar, met datum. */
.jw-bronnen {
  background: var(--jw-surface-muted);
  border-radius: var(--jw-radius);
  padding: 26px 30px;
  margin: 34px 0 8px;
  font-size: 0.9rem;
}

.jw-bronnen h2 {
  margin: 0 0 10px;
  font-size: 1.15rem;
}

.jw-bronnen ul {
  margin: 0;
  padding: 0 0 0 18px;
  color: var(--jw-text-secondary);
}

.jw-bronnen li {
  margin: 7px 0;
}

.jw-bronnen a {
  overflow-wrap: anywhere;
}

/* De USP-balk onder het hoofdmenu: vier redenen om te blijven, op elke
   pagina hetzelfde. Rustige toon, wel direct zichtbaar vertrouwen. */
.jw-usp-balk {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 30px;
  padding: 11px 20px;
  background: var(--jw-tint-groen);
  border-bottom: 1px solid var(--jw-border);
}

.jw-usp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--jw-text);
  white-space: nowrap;
}

.jw-usp svg {
  width: 15px;
  height: 15px;
  color: var(--jw-accent);
  flex: none;
}

@media (max-width: 700px) {
  .jw-usp-balk {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px 14px;
    padding: 10px 16px;
    justify-items: start;
  }

  .jw-usp {
    font-size: 0.78rem;
    white-space: normal;
    line-height: 1.3;
    align-items: flex-start;
  }

  .jw-usp svg {
    margin-top: 2px;
  }
}

/* =============================================================================
   Frivole verbouwing (tiende ronde): paginabrede kleurbanden, grotere en
   vettere koppen, megacirkels en een gekleurde footer. Zelfde kleuren,
   veel meer lef.
   ========================================================================== */

/* Grotere, vettere koppen over de hele site. */
.jw-content h1,
.jw-hero-split h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 5.5vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.jw-content h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1.15;
}

.jw-content .jw-intro {
  font-size: 1.12rem;
}

/* Kleurbanden van rand tot rand: de band breekt uit zijn container en pakt
   de volle breedte van het scherm; de inhoud blijft binnen de leesbreedte. */
.jw-band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  border-radius: 0;
  padding: 72px max(24px, calc(50vw - var(--jw-maxwidth) / 2)) 76px;
  position: relative;
  overflow: hidden;
}

.jw-band > * {
  position: relative;
  z-index: 1;
}

/* Megacirkels op de banden, zoals de vlekken maar dan groot en brutaal. */
.jw-band::before {
  content: '';
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  right: -140px;
  top: -160px;
  background: rgba(255, 255, 255, 0.45);
  z-index: 0;
}

.jw-band::after {
  content: '';
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  left: -90px;
  bottom: -110px;
  background: rgba(255, 255, 255, 0.35);
  z-index: 0;
}

.jw-band-boter {
  background: var(--jw-tint-boter);
}

.jw-band-roze {
  background: var(--jw-tint-roze);
}

.jw-band-lucht {
  background: var(--jw-tint-lucht);
}

.jw-band-lila {
  background: var(--jw-tint-lila);
}

/* De grote quote-band: een uitspraak in koeienletters, geen kaartje. */
.jw-quote-band {
  text-align: center;
}

.jw-quote-band p.jw-quote {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.2;
  max-width: 20em;
  margin: 0 auto 14px;
}

.jw-quote-band p.jw-quote-sub {
  color: var(--jw-text-secondary);
  margin: 0 auto;
  max-width: 34em;
}

/* De footer als warm kleurvlak, geen grijze afsluiting. */
.jw-footer {
  background: var(--jw-tint-boter);
  border-top: 0;
  padding: 56px 0 36px;
}

@media (prefers-color-scheme: dark) {
  .jw-band::before {
    background: rgba(255, 255, 255, 0.06);
  }

  .jw-band::after {
    background: rgba(255, 255, 255, 0.05);
  }
}

@media (max-width: 700px) {
  .jw-band {
    padding-top: 48px;
    padding-bottom: 52px;
  }

  .jw-band::before {
    width: 260px;
    height: 260px;
    right: -110px;
    top: -120px;
  }
}

/* Eén schermkaart onder een stappenplan: gecentreerd en niet te breed, zodat
   hij als illustratie bij de stappen leest en niet als losse tegel. */
.jw-kaart-een {
  grid-template-columns: minmax(0, 420px);
  justify-content: center;
}

/* Twee beelden naast elkaar: een schermkaart en een hele telefoon horen bij
   elkaar te staan, niet onder elkaar. Ze worden verticaal gecentreerd zodat
   het hoogteverschil niet opvalt; op een smal scherm komen ze onder elkaar. */
.jw-beeld-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: center;
  justify-items: center;
  margin: 30px 0 10px;
}

.jw-beeld-duo .jw-kaart-galerij,
.jw-beeld-duo .jw-phone-wrap {
  margin: 0;
  width: 100%;
}

.jw-beeld-duo .jw-kaart-een {
  grid-template-columns: minmax(0, 1fr);
}

/* De telefoon mag in een duo smaller: naast een kaart oogt hij anders als een
   reus, en de tekst blijft ook op deze breedte leesbaar. */
.jw-beeld-duo .jw-phone {
  width: min(300px, 100%);
}

.jw-beeld-duo .jw-phone img {
  border-radius: 30px;
}

@media (max-width: 820px) {
  .jw-beeld-duo {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .jw-beeld-duo .jw-phone {
    width: min(340px, 88vw);
  }
}

/* =============================================================================
   Tekst en beeld naast elkaar, om en om links en rechts

   Stonden alle schermafbeeldingen midden onder elkaar, dan leest een pagina
   als een folder: lap tekst, plaatje, lap tekst, plaatje. Naast elkaar zetten
   doet twee dingen tegelijk. Het beeld staat naast de stap die het uitlegt, en
   door per blok van kant te wisselen krijgt de pagina ritme. Onder 860 pixels
   vervalt de kolomindeling en komt de tekst altijd eerst.
   ========================================================================== */

.jw-zij-blok {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: 40px;
  align-items: center;
  margin: 26px 0 36px;
}

/* Het beeld is het tweede kind; links zetten is dus alleen de volgorde
   omdraaien, niet de opmaak. */
.jw-zij-blok.jw-zij-links > .jw-zij-beeld {
  order: -1;
}

.jw-zij-blok .jw-zij-tekst > :first-child {
  margin-top: 0;
}

.jw-zij-blok .jw-zij-tekst > :last-child {
  margin-bottom: 0;
}

.jw-zij-blok .jw-stappen,
.jw-zij-blok .jw-checklist,
.jw-zij-blok .jw-kaart-galerij,
.jw-zij-blok .jw-beeld-duo {
  margin: 0;
}

.jw-zij-blok .jw-kaart-een {
  grid-template-columns: minmax(0, 1fr);
}

/* Naast een tekstkolom oogt een telefoon op ware grootte als een reus, maar
   te klein maken kost leesbaarheid: de schermafbeeldingen zijn op 390 punten
   gemaakt, en daar veel onder gaan maakt de tekst in het scherm onleesbaar.
   360 is het compromis dat allebei haalt. */
.jw-zij-blok .jw-phone {
  width: min(360px, 100%);
}

.jw-zij-blok .jw-phone img {
  border-radius: 30px;
}

@media (max-width: 860px) {
  .jw-zij-blok {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .jw-zij-blok.jw-zij-links > .jw-zij-beeld {
    order: 0;
  }

  .jw-zij-blok .jw-phone {
    width: min(340px, 88vw);
  }
}

/* =============================================================================
   Niets steekt buiten het scherm op een telefoon

   De pagina liet zich zijwaarts wegslepen: de zachte gloedvlekken achter de
   telefoons lopen 16 tot 18 procent buiten hun kader, en op een breed scherm
   valt dat binnen de marge. Op 390 pixels niet. Ze vervagen naar de randen
   toe, dus ze binnen het kader houden kost visueel niets.
   ========================================================================== */

@media (max-width: 640px) {
  .jw-vlekken::before {
    inset: -4% 0;
  }

  .jw-vlekken::after {
    left: 0;
  }

  .jw-hero-split .jw-phone-wrap::before {
    inset: -6% 0;
  }

  .jw-hero-split .jw-phone-wrap::after {
    right: 0;
  }
}

/* =============================================================================
   Tegels binnen een gekleurde band

   Het blok met redenen stond op dezelfde crèmekleur als de hero erboven,
   waardoor de bovenkant van de pagina als één groot vlak oogde. Het staat nu in
   een eigen band, en de tegels erin houden hun eigen kleur zodat het blok ook
   van binnen leeft.
   ========================================================================== */

.jw-band .jw-tegel {
  border: 1px solid rgba(33, 31, 27, 0.06);
  box-shadow: 0 18px 34px -28px rgba(33, 31, 27, 0.4);
}

.jw-band .jw-tegel .jw-icon {
  background: rgba(255, 255, 255, 0.72);
}

/* De koppen in de tegels van dit blok mogen wat groter: het zijn de zes
   redenen waarom je de app zou nemen, geen bijzaak. */
.jw-band .jw-tegel h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.22rem;
  margin: 6px 0 4px;
}

/* =============================================================================
   Dezelfde speelsheid buiten de homepagina

   De home had banden, kleurvlakken en tinten; de blog, de kennisbank, de
   veelgestelde vragen en de artikelpagina's waren wit met zwarte tekst. Dat
   voelde als twee verschillende sites. Deze regels geven die pagina's dezelfde
   familie mee, zonder dat de tekst er onrustig van wordt.
   ========================================================================== */

/* De kaartenlijsten van de blog en de kennisbank krijgen om beurten een tint,
   zodat een overzicht niet leest als een tabel. */
.jw-content .jw-grid .jw-card:nth-child(6n + 1) {
  background: var(--jw-tint-groen);
}

.jw-content .jw-grid .jw-card:nth-child(6n + 2) {
  background: var(--jw-tint-perzik);
}

.jw-content .jw-grid .jw-card:nth-child(6n + 3) {
  background: var(--jw-tint-lucht);
}

.jw-content .jw-grid .jw-card:nth-child(6n + 4) {
  background: var(--jw-tint-boter);
}

.jw-content .jw-grid .jw-card:nth-child(6n + 5) {
  background: var(--jw-tint-roze);
}

.jw-content .jw-grid .jw-card:nth-child(6n) {
  background: var(--jw-tint-lila);
}

.jw-content .jw-grid .jw-card {
  border-color: rgba(33, 31, 27, 0.06);
}

/* Het vragenblok onderaan een pagina staat nu in een eigen zacht vlak, in
   plaats van los onder de tekst te hangen. */
.jw-faq-blok {
  margin-top: 56px;
  background: var(--jw-tint-zand);
  border-radius: 40px;
  padding: 36px 28px 30px;
  position: relative;
  overflow: hidden;
}

.jw-faq-blok::before {
  content: '';
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  right: -70px;
  top: -90px;
}

.jw-faq-blok > * {
  position: relative;
  z-index: 1;
}

.jw-faq-blok h2 {
  margin-top: 0;
}

/* Een stappenplan is de plek waar iemand meeleest terwijl hij de app bij de
   hand heeft; die mag opvallen. */
.jw-stappen li {
  box-shadow: 0 14px 28px -26px rgba(33, 31, 27, 0.5);
}

/* De bronvermelding en de losse cursieve regels onder een artikel kregen
   dezelfde aandacht als de tekst zelf. Rustiger is beter. */
.jw-content > p > em {
  color: var(--jw-text-secondary);
}

/* Kennisbank- en blogartikelen: de tussenkoppen krijgen een zacht streepje
   mee, zodat een lange pagina ritme houdt. */
.jw-content h2 {
  position: relative;
  padding-top: 6px;
}

.jw-content h2::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  width: 46px;
  height: 5px;
  border-radius: 3px;
  background: var(--jw-tint-perzik);
}

/* Binnen een gekleurde band zou dat streepje wegvallen. */
.jw-band h2::before,
.jw-faq-blok h2::before {
  display: none;
}

/* =============================================================================
   Reparatie: geen tint op tint

   De kaartenrotatie hierboven kleurde ook de kaarten binnen een gekleurde
   band. In het blok "Rustig, eerlijk en privé" viel de perzikkleurige kaart
   daardoor weg tegen de perzikkleurige band. Binnen een band blijven kaarten
   wit; de band levert de kleur al.
   ========================================================================== */

.jw-band .jw-grid .jw-card,
.jw-band .jw-grid .jw-card:nth-child(6n + 1),
.jw-band .jw-grid .jw-card:nth-child(6n + 2),
.jw-band .jw-grid .jw-card:nth-child(6n + 3),
.jw-band .jw-grid .jw-card:nth-child(6n + 4),
.jw-band .jw-grid .jw-card:nth-child(6n + 5),
.jw-band .jw-grid .jw-card:nth-child(6n) {
  background: var(--jw-surface);
}

/* =============================================================================
   De downloadknoppen blijven in beeld

   Wie halverwege een artikel besluit dat hij de app wil, moet niet eerst naar
   beneden hoeven scrollen. Twee kleine knoppen blijven rechtsonder staan. Ze
   houden afstand van de onderkant, zodat ze niet over een chatknop vallen, en
   op een telefoon worden het twee halve knoppen op een balk.
   ========================================================================== */

.jw-zweef {
  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 10px;
  background: var(--jw-surface);
  border: 1px solid var(--jw-border);
  border-radius: 999px;
  box-shadow:
    0 2px 6px rgba(33, 31, 27, 0.06),
    0 18px 40px -18px rgba(33, 31, 27, 0.35);
  text-decoration: none;
  color: var(--jw-text);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.15s ease;
}

.jw-zweef.jw-zweef-zichtbaar {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.jw-zweef:hover {
  box-shadow:
    0 2px 6px rgba(33, 31, 27, 0.08),
    0 22px 44px -18px rgba(33, 31, 27, 0.45);
  transform: translateY(-2px);
}

.jw-zweef-logo {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--jw-accent-soft);
  flex: none;
}

.jw-zweef-tekst {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.jw-zweef-tekst strong {
  font-size: 0.92rem;
}

.jw-zweef-tekst small {
  font-size: 0.76rem;
  color: var(--jw-text-secondary);
}

.jw-zweef-pijl {
  width: 18px;
  height: 18px;
  color: var(--jw-accent);
  flex: none;
  transition: transform 0.15s ease;
}

.jw-zweef:hover .jw-zweef-pijl {
  transform: translateX(3px);
}

@media (max-width: 720px) {
  .jw-zweef {
    right: 50%;
    transform: translate(50%, 12px);
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    white-space: nowrap;
  }

  .jw-zweef.jw-zweef-zichtbaar {
    transform: translate(50%, 0);
  }

  .jw-zweef:hover {
    transform: translate(50%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .jw-zweef,
  .jw-zweef-pijl {
    transition: none;
  }
}

/* Zonder javascript blijft de knop weg; het downloadblok onderaan elke pagina
   is dan de route. En zodra dat blok in beeld komt, verdwijnt de knop ook mét
   javascript (zie de voettekst): twee keer hetzelfde over elkaar is rommelig. */
.jw-zweef[hidden] {
  display: none;
}

/* =============================================================================
   Kopbanden en vragenkaarten

   De blog en de veelgestelde vragen begonnen met zwarte tekst op wit, terwijl
   de home met een kleurvlak opent. Deze pagina's krijgen dezelfde opening, en
   de vragen worden losse gekleurde kaarten in plaats van een lange lap koppen.
   ========================================================================== */

.jw-kop-band {
  padding-top: 52px;
  padding-bottom: 52px;
  margin-top: 8px;
  margin-bottom: 36px;
}

.jw-kop-band h1 {
  max-width: 18ch;
}

.jw-vragen .jw-tegel h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.3rem;
  margin: 0 0 8px;
  padding-top: 0;
}

.jw-vragen .jw-tegel h2::before {
  display: none;
}

.jw-vragen .jw-tegel p {
  margin: 0;
  color: var(--jw-text);
}

/* Drie kolommen zou de antwoorden te smal maken; twee leest prettiger. */
.jw-vragen {
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

/* =============================================================================
   Koppen in tegels blijven binnen de tegel

   De grote serifkop uit de artikelen gold ook voor de koppen in de tegels. In
   een smalle tegel werd "Weeksamenvatting" daardoor breder dan de tegel zelf en
   liep de tekst eroverheen. Binnen een tegel is de kop kleiner, breekt hij af
   waar dat nodig is, en staat het streepje niet in de weg.
   ========================================================================== */

.jw-tegel h2,
.jw-tegel h3,
.jw-card h3 {
  font-size: 1.2rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
  hyphens: auto;
  padding-top: 0;
}

.jw-tegel h2::before,
.jw-tegel h3::before,
.jw-card h3::before {
  display: none;
}

/* Ook de langste losse woorden mogen de tegel niet oprekken. */
.jw-tegel,
.jw-card {
  min-width: 0;
}

.jw-tegel p,
.jw-card p {
  overflow-wrap: break-word;
}

/* =============================================================================
   De functietabel

   Eén tabel waarin iemand in één blik ziet wat de app allemaal kan. Op een
   laptop is het een echte tabel met een meelopende kop; onder de 780 pixels
   valt hij uit elkaar in kaartjes, want een tabel van drie kolommen op een
   telefoon leest niemand. De kolomnamen komen daar terug als labeltje boven
   de waarde, via data-label.
   ========================================================================== */

.jw-tabel-blok {
  scroll-margin-top: 84px;
  margin: 34px 0 8px;
}

.jw-tabel-wrap {
  background: var(--jw-surface);
  border: 1px solid var(--jw-border);
  border-radius: var(--jw-radius);
  box-shadow: 0 10px 30px rgba(33, 31, 27, 0.06);
  overflow: hidden;
}

table.jw-functietabel {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.98rem;
  margin: 0;
}

table.jw-functietabel th,
table.jw-functietabel td {
  border: 0;
  text-align: left;
  vertical-align: top;
}

/*
 * De kop is bewust niet sticky. Dat was hij wel, maar html en body hebben op
 * deze site overflow-x: clip staan (tegen zijwaarts meebewegen op iOS), en
 * daardoor gedraagt een sticky tabelkop zich in Chrome als relative: hij
 * schoof 61 pixels omlaag en dekte de eerste categorieregel af.
 */
.jw-functietabel thead th {
  background: var(--jw-accent);
  color: var(--jw-text-on-accent);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 14px 20px;
}

/* Een categorie is een eigen bandje dwars over de tabel. */
.jw-functietabel tr.jw-tabel-groep th {
  padding: 16px 20px 14px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--jw-text);
  border-top: 1px solid var(--jw-border);
}

.jw-functietabel tr.jw-tabel-groep th .jw-tabel-groep-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.jw-functietabel tr.jw-tabel-groep th .jw-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  background: var(--jw-surface);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.jw-functietabel tr.jw-tabel-groep th .jw-icon svg {
  width: 19px;
  height: 19px;
}

.jw-functietabel tr.jw-tabel-groep th .jw-tabel-telling {
  margin-left: auto;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--jw-text-secondary);
  white-space: nowrap;
}

.jw-groep-groen th {
  background: var(--jw-tint-groen);
}
.jw-groep-perzik th {
  background: var(--jw-tint-perzik);
}
.jw-groep-lila th {
  background: var(--jw-tint-lila);
}
.jw-groep-lucht th {
  background: var(--jw-tint-lucht);
}
.jw-groep-zand th {
  background: var(--jw-tint-zand);
}
.jw-groep-roze th {
  background: var(--jw-tint-roze);
}
.jw-groep-boter th {
  background: var(--jw-tint-boter);
}

/* De regels zelf. */
.jw-functietabel tbody tr.jw-tabel-regel + tr.jw-tabel-regel td,
.jw-functietabel tbody tr.jw-tabel-regel + tr.jw-tabel-regel th {
  border-top: 1px solid var(--jw-border);
}

/* De naamkolom staat op de zachte tint, zodat het oog de kolommen uit elkaar
   houdt zonder dat er lijnen tussen hoeven. Bij aanwijzen licht de hele regel
   op, allebei de kolommen tegelijk. */
.jw-functietabel tbody tr.jw-tabel-regel th {
  padding: 13px 12px 13px 20px;
  width: 30%;
  font-weight: 650;
  color: var(--jw-text);
  background: var(--jw-surface-muted);
}

.jw-functietabel tbody tr.jw-tabel-regel:hover td,
.jw-functietabel tbody tr.jw-tabel-regel:hover th {
  background: var(--jw-accent-soft);
}

.jw-functietabel tbody tr.jw-tabel-regel td {
  padding: 13px 12px;
  color: var(--jw-text-secondary);
}

.jw-functietabel tbody tr.jw-tabel-regel td:last-child {
  padding-right: 20px;
  width: 15%;
  white-space: nowrap;
}

/* Het vinkje voor de naam: dit zit erbij. Niet alleen kleur; er staat een
   vorm in en de tekst ernaast draagt de betekenis. */
.jw-vink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  margin-right: 10px;
  border-radius: 999px;
  background: var(--jw-accent-soft);
  color: var(--jw-accent);
  transform: translateY(2px);
}

.jw-vink svg {
  width: 12px;
  height: 12px;
}

.jw-tabel-naam {
  display: flex;
  align-items: flex-start;
}

/* Waar je het vindt: een klein pilletje met de naam van het tabblad. */
.jw-tabel-plek {
  display: inline-block;
  border: 1px solid var(--jw-border);
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--jw-text-secondary);
  background: var(--jw-surface-muted);
}

.jw-tabel-voet {
  margin: 14px 0 0;
  font-size: 0.94rem;
  color: var(--jw-text-secondary);
}

@media (max-width: 780px) {
  .jw-tabel-wrap {
    border-radius: var(--jw-radius);
  }

  .jw-functietabel thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .jw-functietabel,
  .jw-functietabel tbody,
  .jw-functietabel tr,
  .jw-functietabel td,
  .jw-functietabel th {
    display: block;
    width: auto;
  }

  .jw-functietabel tbody tr.jw-tabel-regel {
    padding: 14px 16px;
    border-top: 1px solid var(--jw-border);
  }

  .jw-functietabel tbody tr.jw-tabel-regel th,
  .jw-functietabel tbody tr.jw-tabel-regel td {
    padding: 0;
    width: auto;
    white-space: normal;
    background: transparent;
  }

  /* De naam is hier de kop van een kaartje, dus zonder vlak eronder. */
  .jw-functietabel tbody tr.jw-tabel-regel th {
    font-size: 1.04rem;
  }

  /* Waar je het vindt past naast het labeltje op één regel. */
  .jw-functietabel tbody tr.jw-tabel-regel td:last-child {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .jw-functietabel tbody tr.jw-tabel-regel td:last-child::before {
    margin-bottom: 0;
  }

  .jw-functietabel tbody tr.jw-tabel-regel + tr.jw-tabel-regel td,
  .jw-functietabel tbody tr.jw-tabel-regel + tr.jw-tabel-regel th {
    border-top: 0;
  }

  .jw-functietabel tbody tr.jw-tabel-regel:hover td,
  .jw-functietabel tbody tr.jw-tabel-regel:hover th {
    background: transparent;
  }

  .jw-functietabel tbody tr.jw-tabel-regel td[data-label] {
    margin-top: 6px;
  }

  .jw-functietabel tbody tr.jw-tabel-regel td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--jw-text-secondary);
    margin-bottom: 2px;
  }

  .jw-functietabel tr.jw-tabel-groep th {
    padding: 14px 16px;
  }
}

/* =============================================================================
   De knop naar de functietabel

   Eén duidelijke doorverwijzing in de hero, in plaats van drie chips die naar
   pagina's gaan die verderop op de home toch al staan.
   ========================================================================== */

.jw-tabelknop {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--jw-accent);
  color: var(--jw-text-on-accent);
  border-radius: 999px;
  padding: 15px 26px;
  font-weight: 700;
  font-size: 1.02rem;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(53, 101, 90, 0.25);
  transition:
    background 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.jw-tabelknop:hover {
  background: var(--jw-accent-pressed);
  color: var(--jw-text-on-accent);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(53, 101, 90, 0.3);
}

.jw-tabelknop svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.jw-knoprij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin: 0 0 26px;
}

.jw-knoprij .jw-knop-noot {
  margin: 0;
  font-size: 0.95rem;
  color: var(--jw-text-secondary);
  max-width: 20em;
}

@media (prefers-reduced-motion: reduce) {
  .jw-tabelknop,
  .jw-tabelknop:hover {
    transform: none;
    transition: none;
  }
}

/* =============================================================================
   De kop van de site

   Was een witte balk met vijf grijze woordjes: correct, maar het viel niet op
   en het zei niets. Nu staat er een kleurenlint van de app bovenaan, het logo
   in een vlakje met de doelgroep eronder, een actieve pagina met een streep
   eronder, en rechts één knop die naar de functietabel gaat.
   ========================================================================== */

/*
 * Het tempolint: het handelsmerk van de site. Blauwe en groene stukken
 * wisselen elkaar af, precies zoals stevig en rustig in een wandeling. Het
 * blauwe stuk is de helft langer, want stevig doorstappen is waar het om
 * draait. Hetzelfde ritme keert terug boven elke sectiekop.
 */
.jw-header-lint {
  height: 5px;
  background: repeating-linear-gradient(
    to right,
    var(--jw-stevig) 0,
    var(--jw-stevig) 96px,
    transparent 96px,
    transparent 104px,
    var(--jw-rustig) 104px,
    var(--jw-rustig) 168px,
    transparent 168px,
    transparent 176px
  );
}

.jw-header {
  /* Iets meer body dan de achtergrond, zodat de balk zich losmaakt van de
     pagina zodra je scrolt. */
  background: color-mix(in srgb, var(--jw-background) 88%, #ffffff);
  backdrop-filter: saturate(140%) blur(6px);
  box-shadow: 0 1px 0 var(--jw-border);
}

.jw-logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}

.jw-logo-vlak {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--jw-accent-soft);
  flex: 0 0 42px;
}

.jw-logo-tekst {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

/* De doelgroep onder de naam: wie hier binnenkomt via een blog weet in één
   oogopslag waar de site over gaat. */
.jw-logo-onder {
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--jw-text-secondary);
  margin-top: 3px;
}

.jw-nav a {
  position: relative;
  font-weight: 600;
  color: var(--jw-text);
  padding: 8px 2px;
}

/* Het streepje groeit vanuit het midden; bij de huidige pagina staat het vast. */
.jw-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--jw-accent);
  transform: scaleX(0);
  transition: transform 0.16s ease;
}

.jw-nav a:hover::after,
.jw-nav a[aria-current='page']::after {
  transform: scaleX(1);
}

.jw-nav a[aria-current='page'] {
  color: var(--jw-accent);
}

.jw-header-knop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--jw-accent);
  color: var(--jw-text-on-accent);
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 0.93rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 0.15s ease,
    transform 0.15s ease;
}

.jw-header-knop:hover {
  background: var(--jw-accent-pressed);
  color: var(--jw-text-on-accent);
  transform: translateY(-1px);
}

@media (max-width: 1080px) {
  .jw-header-knop {
    display: none;
  }
}

@media (max-width: 720px) {
  .jw-logo-onder {
    display: none;
  }

  .jw-logo-vlak {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    border-radius: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jw-nav a::after {
    transition: none;
  }

  .jw-header-knop:hover {
    transform: none;
  }
}

/* =============================================================================
   Het app-blok onder een blog

   Stond er eerst als gewone alinea's tussen, waardoor het las als nog een
   hoofdstuk van het artikel. Nu is het een eigen vlak met een labeltje, zodat
   duidelijk is: hier vertellen we wat onze app met dit onderwerp doet.
   ========================================================================== */

.jw-app-blok {
  position: relative;
  background: var(--jw-tint-groen);
  border: 1px solid color-mix(in srgb, var(--jw-accent) 22%, var(--jw-border));
  border-radius: var(--jw-radius);
  padding: 30px 26px 26px;
  margin: 40px 0 30px;
}

.jw-app-blok::before {
  content: 'In de app';
  position: absolute;
  top: -13px;
  left: 24px;
  background: var(--jw-accent);
  color: var(--jw-text-on-accent);
  border-radius: 999px;
  padding: 5px 15px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.jw-app-blok h2 {
  margin-top: 0.2em;
}

.jw-app-blok h2::before {
  display: none;
}

.jw-app-blok p:last-of-type {
  margin-bottom: 0;
}

.jw-app-blok .jw-more {
  font-weight: 700;
}

@media (max-width: 640px) {
  .jw-app-blok {
    padding: 28px 18px 22px;
  }

  .jw-app-blok::before {
    left: 16px;
  }
}

/* Een schermkaart naast tekst mag niet zo hoog worden dat de tekst ernaast in
   het midden komt te zweven; dan lijkt de rij aan het blok erboven vast te
   zitten. Boven een bepaalde hoogte schaalt de kaart mee terug. */
.jw-feature-media .jw-app-kaart img {
  max-height: 520px;
  width: auto;
  margin: 0 auto;
}

.jw-feature-media .jw-kaart-galerij {
  margin: 0;
  justify-items: center;
}

/* Twee opeenvolgende blokken moeten als twee blokken lezen. Een band die
   direct op een sectie volgt, krijgt daarom lucht en een lijntje. */
.jw-band + .jw-band,
.jw-section + .jw-band {
  margin-top: 12px;
}

/* =============================================================================
   De brug tussen de inlogmail en de app

   Eén scherm dat een halve seconde in beeld is. Rustig, met de knop groot,
   want als het automatisch openen niet lukt is dat het enige wat telt.
   ========================================================================== */

.jw-app-brug {
  max-width: 32em;
  margin: 40px auto 0;
  text-align: center;
}

.jw-app-brug .jw-tabelknop {
  margin: 10px 0 22px;
}

.jw-brug-hulp {
  font-size: 0.95rem;
  color: var(--jw-text-secondary);
}

/* =============================================================================
   Telefoon: aanraakvlakken

   Een link van achttien pixels hoog is met een muis prima en met een duim niet.
   De app houdt 44 punten aan (zie .claude/rules/accessibility.md); de site hoort
   daar niet onder te zitten. Vergroot met padding en een minimumhoogte, niet met
   een groter lettertype: de tekst moet in het ritme van de alinea blijven staan.

   Alleen op een telefoon, want op een muisscherm zou dezelfde ruimte de lijstjes
   onnodig uit elkaar trekken.
   ========================================================================== */

@media (max-width: 720px) {
  .jw-more {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .jw-footer li {
    margin-bottom: 0;
  }

  .jw-footer li a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* =============================================================================
   Kennisbank-artikelen: het antwoordkader, tabellen en het Lees ook-blok

   Het kader "In het kort" staat direct onder de eerste alinea en vat het
   artikel samen voor wie 's nachts snel een antwoord zoekt. Tabellen krijgen
   een eigen scrollcontainer zodat een brede tabel op een telefoon binnen het
   scherm blijft in plaats van de pagina op te rekken.
   ========================================================================== */

.jw-kort,
.jw-leesook {
  background: var(--jw-accent-soft);
  border-radius: var(--jw-radius-small);
  padding: 18px 22px;
  margin: 24px 0;
  max-width: 46em;
}

.jw-kort-kop {
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--jw-accent-pressed);
}

.jw-kort ul,
.jw-leesook ul {
  margin: 0;
  padding-left: 20px;
}

.jw-kort li,
.jw-leesook li {
  margin-bottom: 6px;
}

.jw-kort li:last-child,
.jw-leesook li:last-child {
  margin-bottom: 0;
}

.jw-leesook {
  background: var(--jw-surface-muted);
}

.jw-tabel-scroll {
  overflow-x: auto;
  margin: 24px 0;
  max-width: 46em;
}

.jw-tabel {
  border-collapse: collapse;
  width: 100%;
  background: var(--jw-surface);
  border: 1px solid var(--jw-border);
  border-radius: var(--jw-radius-small);
  font-size: 0.95rem;
}

.jw-tabel th,
.jw-tabel td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--jw-border);
  vertical-align: top;
}

.jw-tabel thead th {
  background: var(--jw-surface-muted);
  font-weight: 700;
}

.jw-tabel tbody tr:last-child td {
  border-bottom: 0;
}

/* Het kruimelpad boven artikelen en hubpagina's. */
.jw-kruimels {
  font-size: 0.85rem;
  color: var(--jw-text-secondary);
  margin: 0 0 12px;
}

.jw-kruimels a {
  color: var(--jw-text-secondary);
}

.jw-kruimels a:hover {
  color: var(--jw-accent);
}

/* De regel met datum en bron onder een artikel. */
.jw-artikel-voet {
  border-top: 1px solid var(--jw-border);
  margin-top: 32px;
  padding-top: 16px;
}

/* =============================================================================
   Het app-blok in kennisbankartikelen

   Het bruggetje van onderwerp naar app: één rustige kaart met de uitleg links
   en de schermafbeelding rechts, in de zachte huistint. Op een smal scherm
   komt het beeld onder de tekst.
   ========================================================================== */

.jw-app-blok {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 8px 28px;
  align-items: center;
  padding: 30px 30px 26px;
  margin: 40px 0 30px;
}

.jw-app-blok-tekst h2 {
  margin-top: 0;
}

.jw-app-blok-tekst p {
  max-width: none;
}

.jw-app-blok-beeld {
  margin: 0;
}

.jw-app-blok-beeld .jw-app-kaart {
  margin: 0;
}

.jw-app-blok-beeld .jw-app-kaart img {
  max-width: 240px;
  margin: 0 auto;
  display: block;
}

@media (max-width: 720px) {
  .jw-app-blok {
    grid-template-columns: 1fr;
    padding: 22px 20px;
  }

  .jw-app-blok-beeld .jw-app-kaart img {
    max-width: 200px;
  }
}

/* De afzenderregel onder de titel van een artikel. */
.jw-artikel-meta {
  margin: -6px 0 22px;
  font-size: 0.88rem;
  color: var(--jw-text-secondary);
}

.jw-artikel-meta a {
  color: var(--jw-text-secondary);
  text-decoration: underline;
}

.jw-artikel-meta a:hover {
  color: var(--jw-accent);
}

/* Het zoekveld van de kennisbank. */
.jw-zoek {
  display: flex;
  gap: 10px;
  max-width: 34em;
  margin: 20px 0 28px;
}

.jw-zoek input[type='search'] {
  flex: 1 1 auto;
  min-height: 48px;
  padding: 0 18px;
  font: inherit;
  color: var(--jw-text);
  background: var(--jw-surface);
  border: 1px solid var(--jw-border);
  border-radius: 999px;
}

.jw-zoek input[type='search']:focus {
  outline: 2px solid var(--jw-accent);
  outline-offset: 1px;
  border-color: var(--jw-accent);
}

.jw-zoek button {
  min-height: 48px;
  padding: 0 22px;
  font: inherit;
  font-weight: 700;
  color: var(--jw-text-on-accent);
  background: var(--jw-accent);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.jw-zoek button:hover {
  background: var(--jw-accent-pressed);
}

/* De categoriekaarten op het kennisbankoverzicht. */
.jw-hub-kaart h2 {
  margin: 0 0 2px;
  font-size: 1.25rem;
}

.jw-hub-kaart h2 a {
  color: var(--jw-text);
  text-decoration: none;
}

.jw-hub-kaart h2 a:hover {
  color: var(--jw-accent);
}

.jw-hub-aantal {
  margin: 0 0 10px;
  font-size: 0.8rem;
  color: var(--jw-text-secondary);
}

.jw-hub-lijst {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}

.jw-hub-lijst li {
  padding: 7px 0;
  border-bottom: 1px solid var(--jw-border);
}

.jw-hub-lijst li:last-child {
  border-bottom: 0;
}

.jw-hub-lijst a {
  text-decoration: none;
  color: var(--jw-text);
}

.jw-hub-lijst a:hover {
  color: var(--jw-accent);
}

/* =============================================================================
   Artikel-illustratie, leeftijdskiezer en het Op deze pagina-blok
   ========================================================================== */

/* De categorie-illustratie boven de artikelkop: klein en links, als visueel
   anker in dezelfde lijnstijl als de homepagina. */
.jw-artikel-illu {
  margin: 4px 0 14px;
}

.jw-artikel-illu .jw-illu {
  width: 76px;
  height: 76px;
}

/* De leeftijdskiezer: dertien pillen die direct naar de maandpagina's wijzen.
   Aanraakvlakken van minstens 44 punten, ook op een telefoon. */
.jw-leeftijd-kiezer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 22px;
}

.jw-leeftijd-kiezer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  background: var(--jw-surface);
  border: 1px solid var(--jw-border);
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--jw-text);
  text-decoration: none;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease;
}

.jw-leeftijd-kiezer a:hover {
  background: var(--jw-accent);
  color: var(--jw-text-on-accent);
  transform: translateY(-1px);
}

/* Het Op deze pagina-blok: compacte springlinks bij lange artikelen. */
.jw-inhoudsopgave {
  background: var(--jw-surface-muted);
  border-radius: var(--jw-radius-small);
  padding: 18px 22px;
  margin: 24px 0;
  max-width: 46em;
}

.jw-inhoudsopgave ul {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 28px;
}

.jw-inhoudsopgave li {
  margin-bottom: 7px;
  break-inside: avoid;
}

.jw-inhoudsopgave a {
  color: var(--jw-text);
  text-decoration: none;
  font-size: 0.92rem;
}

.jw-inhoudsopgave a:hover {
  color: var(--jw-accent);
  text-decoration: underline;
}

@media (max-width: 640px) {
  .jw-inhoudsopgave ul {
    columns: 1;
  }
}

/* De koppen krijgen wat lucht boven zich wanneer er via een anker naartoe
   wordt gesprongen, zodat de kop niet onder de rand plakt. */
.jw-content h2[id] {
  scroll-margin-top: 24px;
}

/* =============================================================================
   Voettekst: het merk terug in beeld, en een zachtere afsluiting

   De voettekst sloot af met een kaarsrechte rand over de volle breedte. Voor een
   app over baby's mag dat vriendelijker, maar zonder er een feestje van te maken:
   een rij bolletjes bovenaan stond er eerst en werd te druk. Nu komt het vlak
   omhoog uit de pagina met ronde bovenhoeken — dezelfde ronding als de kaarten
   in de rest van de site, alleen groter.
   ========================================================================== */

.jw-footer {
  position: relative;
  margin-top: 64px;
  border-radius: 40px 40px 0 0;
}

/* Het merk met het icoon, zoals in de kop. */
.jw-footer-merk {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.jw-footer-merk h4 {
  margin: 0;
  font-size: 1.05rem;
}

.jw-footer-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 15px;
  background: color-mix(in srgb, var(--jw-accent) 12%, transparent);
}

/* Hetzelfde kleurenlint als bovenaan, nu als afsluiting van de pagina. Twee
   dezelfde randen boven en onder maken van de pagina een geheel in plaats van
   iets dat onderaan ophoudt. */
.jw-footer-lint {
  height: 5px;
  margin-top: 36px;
  background: linear-gradient(
    to right,
    var(--jw-accent) 0%,
    var(--jw-accent) 22%,
    var(--jw-tint-perzik) 22%,
    var(--jw-tint-perzik) 44%,
    var(--jw-tint-boter) 44%,
    var(--jw-tint-boter) 66%,
    var(--jw-tint-lila) 66%,
    var(--jw-tint-lila) 84%,
    var(--jw-tint-roze) 84%,
    var(--jw-tint-roze) 100%
  );
}

@media (max-width: 640px) {
  /* Op een telefoon een kleinere ronding: dezelfde boog op een smal scherm
     vreet te veel van de bovenste regel weg. */
  .jw-footer {
    margin-top: 48px;
    border-radius: 26px 26px 0 0;
  }

  .jw-footer-lint {
    margin-top: 28px;
  }
}

/* =============================================================================
   DE HUISSTIJL VAN JAPANS WANDELEN

   Dit blok staat bewust achteraan: hier krijgt de site zijn eigen gezicht,
   los van de opbouw hierboven. De gedachte is steeds dezelfde: papier en
   inkt, met het ritme van twee tempo's als terugkerend teken.
   ========================================================================== */

/* De bovenregel boven een kop is het warme signaal, met een streepje ervoor
   dat het tempolint in het klein herhaalt. */
.jw-eyebrow {
  color: var(--jw-signaal);
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.jw-eyebrow::before {
  content: '';
  width: 26px;
  height: 3px;
  background: linear-gradient(
    to right,
    var(--jw-stevig) 0,
    var(--jw-stevig) 16px,
    var(--jw-rustig) 16px
  );
  flex: none;
}

/* Kaarten: geen zwevende pastelblokjes, maar vlakken op papier met een
   haarlijn en een tempostreep aan de bovenkant. */
.jw-card {
  border-radius: var(--jw-radius);
  border: 1px solid var(--jw-border);
  position: relative;
  overflow: hidden;
}

.jw-card::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--jw-stevig);
}

.jw-grid .jw-card:nth-child(2n)::before {
  background: var(--jw-rustig);
}

.jw-card:hover {
  transform: none;
  border-color: var(--jw-stevig);
  box-shadow: 0 12px 28px -22px rgba(24, 36, 43, 0.5);
}

/* De iconen in de kaarten: één rustige achtergrond in plaats van een
   kleurenrotatie, met de inktkleur als lijn. */
.jw-card .jw-icon,
.jw-grid .jw-card:nth-child(6n + 2) .jw-icon,
.jw-grid .jw-card:nth-child(6n + 3) .jw-icon,
.jw-grid .jw-card:nth-child(6n + 4) .jw-icon,
.jw-grid .jw-card:nth-child(6n + 5) .jw-icon,
.jw-grid .jw-card:nth-child(6n) .jw-icon {
  background: var(--jw-tint-lucht);
  border-radius: var(--jw-radius-small);
  color: var(--jw-stevig);
}

.jw-grid .jw-card:nth-child(2n) .jw-icon {
  background: var(--jw-tint-groen);
  color: var(--jw-rustig);
}

/* De balk onder de kop: donkere inkt met papierkleurige tekst. Dat leest als
   een colofonregel in een boek en niet als een babyroze mededeling. */
.jw-usp-balk {
  background: var(--jw-text);
  border-bottom: none;
}

.jw-usp {
  color: #f2efe6;
  font-weight: 550;
}

.jw-usp svg {
  color: #9fc0a8;
}

/* Kleurbanden: rustiger rond en alleen in zand of mos. */
.jw-band {
  border-radius: 20px;
}

.jw-band-perzik {
  background: var(--jw-tint-zand);
}

.jw-band-groen {
  background: var(--jw-tint-groen);
}

/* De vlekken achter de telefoon: subtiel, in de twee tempokleuren. */
.jw-hero-split .jw-phone-wrap::before {
  background: radial-gradient(closest-side, var(--jw-tint-lucht) 0%, transparent 72%);
}

.jw-hero-split .jw-phone-wrap::after {
  background: var(--jw-tint-groen);
  width: 96px;
  height: 96px;
}

/* Tegels: uit de pastelrotatie gehaald, in de drie vlakfamilies. */
.jw-tegel-perzik,
.jw-tegel-roze {
  background: var(--jw-tint-zand);
}

.jw-tegel-lila,
.jw-tegel-boter {
  background: var(--jw-tint-lucht);
}

.jw-tegel-groen {
  background: var(--jw-tint-groen);
}

/* Knoppen: strakker en met minder schaduw, zodat het geheel zakelijker oogt. */
.jw-button {
  border-radius: var(--jw-radius-small);
  box-shadow: none;
}

.jw-badge {
  border-radius: var(--jw-radius-small);
  background: var(--jw-tint-lucht);
  color: var(--jw-stevig);
  letter-spacing: 0.02em;
}

/* De koppen in de artikelen krijgen hetzelfde tempostreepje, zodat een lang
   artikel visueel ritme houdt. */
.jw-content h2 {
  padding-top: 14px;
  border-top: 1px solid var(--jw-border);
}

.jw-content .jw-card h2,
.jw-content .jw-app-blok h2,
.jw-content .jw-kort h2,
.jw-content .jw-faq-blok h2,
.jw-content .jw-hub-kaart h2 {
  padding-top: 0;
  border-top: none;
}

/* Het kader "In het kort" boven aan een artikel: een notitie in de kantlijn,
   met de streep in de kleur van het stevige tempo. */
.jw-kort {
  border-left: 4px solid var(--jw-stevig);
  border-radius: 0 var(--jw-radius) var(--jw-radius) 0;
}

/* Tabellen: een strakke kop in inkt. */
.jw-tabel thead th {
  background: var(--jw-text);
  color: #f2efe6;
}

/* Een schermafbeelding wordt nooit groter getoond dan de helft van zijn eigen
   pixels: op een scherm met dubbele puntdichtheid blijft hij dan scherp, en
   hij kan niet uitgroeien tot een reus in een brede kolom. */
.jw-app-kaart img {
  max-width: 390px;
  margin-inline: auto;
  border-radius: var(--jw-radius);
}

.jw-app-kaart {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* De kaarten staan op wit papier, zonder kleurenrotatie: het onderscheid komt
   van de tempostreep bovenaan en niet van zeven verschillende vlakken. */
.jw-content .jw-grid .jw-card,
.jw-content .jw-grid .jw-card:nth-child(6n + 1),
.jw-content .jw-grid .jw-card:nth-child(6n + 2),
.jw-content .jw-grid .jw-card:nth-child(6n + 3),
.jw-content .jw-grid .jw-card:nth-child(6n + 4),
.jw-content .jw-grid .jw-card:nth-child(6n + 5),
.jw-content .jw-grid .jw-card:nth-child(6n) {
  background: var(--jw-surface);
  border-color: var(--jw-border);
}

/* In een gekleurde band zou wit te hard zijn; daar staat het papier zelf. */
.jw-band .jw-grid .jw-card,
.jw-band .jw-grid .jw-card:nth-child(6n + 1),
.jw-band .jw-grid .jw-card:nth-child(6n + 2),
.jw-band .jw-grid .jw-card:nth-child(6n + 3),
.jw-band .jw-grid .jw-card:nth-child(6n + 4),
.jw-band .jw-grid .jw-card:nth-child(6n + 5),
.jw-band .jw-grid .jw-card:nth-child(6n) {
  background: var(--jw-background);
  border-color: rgba(24, 36, 43, 0.12);
}

/* De genummerde stappen volgen hetzelfde ritme als de rest: de oneven stappen
   in de kleur van stevig, de even in die van rustig. */
.jw-stappen li::before,
.jw-stappen li:nth-child(2)::before,
.jw-stappen li:nth-child(3)::before,
.jw-stappen li:nth-child(4)::before {
  background: var(--jw-tint-lucht);
  color: var(--jw-stevig);
  border-radius: var(--jw-radius-small);
}

.jw-stappen li:nth-child(2n)::before {
  background: var(--jw-tint-groen);
  color: var(--jw-rustig);
}