:root {
      /* Groen in drie trappen. --green is een VLAKKLEUR (5,4:1 op wit);
         alles wat tekst of een tekstdrager is gebruikt --green-deep (8,3:1),
         omdat onze doelgroep 7:1 nodig heeft en niet 4,5:1. */
      --green: #1b7a3d;
      --green-deep: #0f5a2c;
      --green-dark: #0a4020;
      --green-light: #e8f5ee;
      --warm: #f5f0e8;
      --text: #1a1a1a;
      --muted: #4d4d4d;
      --border: #e5e5e5;
      --ochre: #c9a227;
      --ochre-ink: #6b4c00;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }

    /*
      HET KRUIMELPAD (Mario, 02-09).

      Klein maar leesbaar: 0,9rem op --muted is 8,45:1, ruim boven de norm.
      Het scheidingsteken komt uit ::before en staat op aria-hidden via
      content -- een voorlezer leest de lijst als een lijst en hoeft geen
      driehoekjes te horen.
    */
    .kruimels {
      padding: 0.9rem 2rem 0;
      font-size: 0.9rem;
    }
    .kruimels ol {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      gap: 0.35rem;
      padding: 0;
      margin: 0;
      color: var(--muted);
    }
    .kruimels li { display: flex; align-items: center; gap: 0.35rem; }
    /*
     * DE SCHEIDING WAS EEN VIERKANTJE (Mario, 05-09).
     *
     * Hier stond byte 0x83 gevolgd door een letter A, en dat is wat er van
     * een ">" (U+203A) overblijft als een editor het bestand een keer in de
     * verkeerde codering wegschrijft. Op het scherm werd dat een tofu-blokje
     * met een A erachter: "Kletzy [] A Voor wie [] A Alleen wonen".
     *
     * Zelfde ongeluk als de vinkjes die eerder "13" werden. Daarom staan alle
     * tekens in content: nu als CSS-escape: die overleven elke editor en elke
     * codering.
     */
    .kruimels li + li::before {
      content: "\203A";
      color: var(--border);
      font-size: 1.05rem;
      line-height: 1;
    }
    .kruimels a {
      color: var(--green-deep);
      text-decoration: none;
      /* Raakvlak: klein op het oog, maar aantikbaar. */
      display: inline-flex;
      align-items: center;
      min-height: 32px;
    }
    .kruimels a:hover { text-decoration: underline; }
    .kruimels [aria-current="page"] { color: var(--text); font-weight: 600; }

    @media (max-width: 768px) {
      .kruimels { padding: 0.75rem 1.25rem 0; font-size: 0.85rem; }
    }

    /*
      "GA NAAR DE INHOUD" (Mario, 02-09).

      Buiten beeld tot hij focus krijgt, en dan springt hij linksboven in
      beeld. Niet met display:none of visibility:hidden werken: dan halen
      schermlezers hem uit de tab-volgorde en heeft hij geen zin.
    */
    .overslaan {
      position: absolute;
      left: -9999px;
      top: 0;
      z-index: 100;
      background: var(--green-deep);
      color: white;
      padding: 0.85rem 1.25rem;
      border-radius: 0 0 8px 0;
      font-weight: 700;
      text-decoration: none;
    }
    .overslaan:focus {
      left: 0;
      outline: 3px solid var(--ochre);
      outline-offset: -3px;
    }

    /*
      FOCUS IS OVERAL ZICHTBAAR (Mario, 02-09).

      Tot vandaag hadden alleen .deur en .cyclus-knop een focusstijl. Elke
      link en elke knop op de rest van de site liet de browserstandaard zien
      of, na een reset, helemaal niets. Wie met een toetsenbord door het
      formulier gaat, moest raden waar hij zat.

      Dit is de bodem voor alles; losse regels verderop mogen hem overrulen
      maar mogen hem niet wegnemen. :focus-visible en niet :focus, zodat een
      muisklik geen rand achterlaat op een knop die net ingedrukt is.
    */
    a:focus-visible,
    button:focus-visible,
    [tabindex]:focus-visible,
    summary:focus-visible {
      outline: 3px solid var(--green-deep);
      outline-offset: 2px;
      border-radius: 2px;
    }

    /*
      ALINEA'S KREGEN NERGENS LUCHT (Mario, 01-09).

      De reset hierboven zet ook de ondermarge van elke <p> op nul, en die is
      nooit ergens teruggegeven. Op de korte pagina's viel dat niet op, want
      daar staat bijna elke alinea in een blok met een eigen marge. Op de
      lange leespagina's wel: gemeten op 01-09 stonden er zeventien van de
      twintig alinea's op /voor-ouderen-die-alleen-wonen zonder tussenruimte
      tegen elkaar, twintig van de drieentwintig op /ai-babbelvriend en
      achttien van de eenentwintig op /gezelschap-voor-ouderen. Dat leest als
      een muur, en dit is een site voor mensen die niet graag lang turen.

      1,1rem is dezelfde waarde als .founder p, het enige blok waar het wel
      goed stond.

      p:last-child HOUDT DE BLOKKEN OP MAAT. Zonder die regel groeit elke
      kaart, elke voetnoot en elke knoptekst met een marge onderaan, en dan
      verschuift de halve site een paar pixels. Nu verandert alleen de ruimte
      tussen alinea's onderling.

      Alles met een eigen klasse of een inline stijl wint hier gewoon van: een
      elementselector is het zwakste wat er is. Dat is met opzet.
    */
    p { margin-bottom: 1.1rem; }
    p:last-child { margin-bottom: 0; }

    /*
      HET HIDDEN-ATTRIBUUT MOET WINNEN (31-08).

      De browser geeft [hidden] display:none, maar dat staat in de
      standaardstijl van de browser en die verliest van elke regel die wij
      zelf schrijven. Dus zodra een element ook .btn had -- want daar staat
      display:inline-block -- deed element.hidden = true helemaal niets.

      Gevonden op /afrekenen: wie die pagina opent zonder aanmelding, hoorde
      alleen de weg terug te zien, maar zag de betaalknop gewoon staan. Een
      knop die verborgen heet en zichtbaar is, is erger dan een zichtbare
      knop, want de code eromheen rekent erop dat hij weg is.
    */
    [hidden] { display: none !important; }

    /* ── DE BELBOL ──────────────────────────────────────────────
       De bogen rinkelen op de cadans van een telefoon: ±1 seconde
       bellen, ±3 seconden stil. Bewust NIET in de navigatie of de
       footer - een logo dat de hele dag beweegt is voor deze
       doelgroep een last, geen sfeer. Alleen daar waar de pagina
       een gesprek uitbeeldt. */
    @keyframes kletzy-bellen {
      0%           { opacity: .18; transform: scale(.82); }
      6%           { opacity: 1;   transform: scale(1); }
      14%          { opacity: 1;   transform: scale(1.02); }
      25%          { opacity: .18; transform: scale(1.14); }
      26%, 100%    { opacity: .18; transform: scale(.82); }
    }
    .belt .logo-ring {
      transform-box: view-box;
      transform-origin: 50px 44px;
      animation: kletzy-bellen 4s cubic-bezier(.3,0,.2,1) infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      .belt .logo-ring { animation: none; opacity: 1; transform: none; }
    }
    html { scroll-behavior: smooth; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
      color: var(--text);
      /* 17px in plaats van 16. De koper is zelf vaak zestig, en de pagina
         moet ook voorgelezen kunnen worden op een tablet van iemand van
         tachtig. Alles wat in rem staat, schaalt mee. */
      font-size: 1.0625rem;
      line-height: 1.6;
      background: white;
    }

    /* NAV */
    /*
     * body > nav en niet zomaar nav (30-08).
     *
     * De voettekst kreeg er een tweede <nav> bij voor haar vier kolommen, en
     * die erfde meteen de witte, klevende balk van hierboven: een wit vlak
     * midden in de zwarte voettekst, met de kopjes onzichtbaar erin. De
     * kindcombinator bakent dit af tot de balk die echt bovenaan staat, en
     * verandert niets aan de specificiteit -- de rest van de cascade blijft
     * dus staan zoals ze stond.
     */
    body > nav {
      position: sticky;
      top: 0;
      background: white;
      border-bottom: 1px solid var(--border);
      z-index: 100;
      padding: 0 2rem;
    }
    .nav-inner {
      max-width: 1100px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
      min-height: 64px;
      padding: 0.5rem 0;
      flex-wrap: wrap;
    }
    .nav-logo {
      display: flex;
      align-items: center;
      color: var(--green-deep);
      text-decoration: none;
    }
    .nav-logo svg { height: 32px; width: auto; display: block; }
    .nav-links {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 0.75rem 1.6rem;
      list-style: none;
    }
    .nav-links a {
      color: var(--muted);
      text-decoration: none;
      font-size: 1rem;
      transition: color 0.2s;
    }
    .nav-links a:hover { color: var(--text); }
    .nav-acties {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      flex: 0 0 auto;
    }
    .nav-links { margin-left: auto; }

    /*
     * KRAPPER MENU TUSSEN 768 EN 1150 PX (30-08).
     *
     * Er kwam een item bij (Home), en op een scherm van 1024 px sprong de
     * balk daardoor naar twee rijen: 123 px in plaats van 67. Met iets
     * minder tussenruimte en een haar kleinere letter past alles weer op
     * een rij tot 960 px, en daaronder is het nog altijd korter dan het
     * vroeger was.
     *
     * Nagemeten op 1280, 1100, 1024, 960, 900, 830 en 769.
     */
    @media (max-width: 1150px) {
      .nav-links { gap: 0.6rem 1.05rem; }
      .nav-links a { font-size: 0.95rem; }
      .nav-links .btn { padding-left: 0.9rem; padding-right: 0.9rem; }
    }

    /*
     * TUSSEN 769 EN 880 PX (30-08). Daar geldt de gsm-indeling nog niet en
     * de gewone balk past net niet: 136 px in plaats van 66. Een tablet in
     * staande stand valt precies in dat gat. Nog een maatje krapper, en het
     * past weer op een rij.
     */
    @media (min-width: 769px) and (max-width: 880px) {
      body > nav { padding: 0 1.25rem; }
      .nav-inner { gap: 0.9rem; }
      .nav-links { gap: 0.5rem 0.8rem; }
      .nav-links a { font-size: 0.9rem; }
      .nav-links .btn, .nav-acties .btn { padding: 0.5rem 0.8rem; font-size: 0.9rem; }
    }

    /*
     * Knoppen in de navigatie houden hun eigen kleur.
     *
     * .nav-links a is specifieker dan .btn (klasse + element tegen alleen
     * klasse), dus de Aanmelden-knop kreeg color: var(--muted) -- donkergroene
     * tekst op een donkergroene achtergrond. Onleesbaar, en niemand ziet het
     * tot er iemand naar kijkt.
     *
     * Vandaar deze twee regels, met dezelfde specificiteit als de regel die
     * het probleem veroorzaakt.
     */
    .nav-links a.btn { color: white; }
    .nav-links a.btn-outline { color: var(--green-deep); }
    .nav-links a.btn-outline:hover { color: white; }

    .btn {
      display: inline-block;
      padding: 0.65rem 1.5rem;
      background: var(--green-deep);
      color: white;
      border-radius: 8px;
      text-decoration: none;
      font-weight: 600;
      font-size: 1rem;
      transition: background 0.2s, transform 0.1s;
    }
    .btn:hover { background: var(--green-dark); transform: translateY(-1px); }
    .btn-outline {
      background: transparent;
      color: var(--green-deep);
      border: 2px solid var(--green-deep);
    }
    .btn-outline:hover { background: var(--green-deep); color: white; }
    .btn-lg {
      padding: 1rem 2.25rem;
      font-size: 1.1rem;
      border-radius: 10px;
    }

    /* SECTIONS */
    section { padding: 5rem 2rem; }
    .container { max-width: 1100px; margin: 0 auto; }
    .container-sm { max-width: 720px; margin: 0 auto; }
    .text-center { text-align: center; }
    h2.section-title {
      font-size: clamp(1.8rem, 4vw, 2.5rem);
      font-weight: 800;
      letter-spacing: -0.5px;
      margin-bottom: 1rem;
    }
    .section-sub {
      font-size: 1.15rem;
      color: var(--muted);
      max-width: 600px;
      margin: 0 auto 3rem;
    }
    .badge {
      display: inline-block;
      background: var(--green-light);
      color: var(--green-deep);
      padding: 0.3rem 0.9rem;
      border-radius: 20px;
      font-size: 0.9rem;
      font-weight: 600;
      margin-bottom: 1rem;
    }

    /* HERO */
    .hero {
      background: linear-gradient(135deg, var(--warm) 0%, #fff 60%);
      padding: 6rem 2rem 5rem;
    }
    /*
     * De twee kolommen beginnen bovenaan, niet in het midden.
     *
     * Stond op align-items: center, waardoor het gespreksmodel rechts pas
     * halverwege de tekst begon -- ter hoogte van de derde alinea. Mario
     * merkte het op (27-08): het hoort mee te starten met de titel.
     *
     * Met flex-start staat de kaart naast de kop, waar hij hoort: dat is
     * het beeld dat uitlegt waar de kop over gaat.
     */
    .hero-inner {
      max-width: 1100px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: start;
    }
    .hero h1 {
      font-size: clamp(2.2rem, 5vw, 3.2rem);
      font-weight: 900;
      letter-spacing: -1px;
      line-height: 1.15;
      margin-bottom: 1.25rem;
    }
    .hero h1 span { color: var(--green-deep); }
    .hero p {
      font-size: 1.2rem;
      color: var(--muted);
      margin-bottom: 2rem;
      line-height: 1.7;
    }
    .hero-cta {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      align-items: center;
    }
    .hero-note {
      font-size: 0.9rem;
      color: var(--muted);
      margin-top: 1rem;
    }
    /*
     * De eerlijkheid over de computerstem: klein, maar aanwezig.
     *
     * Stond als groen kader vlak onder de knoppen, even zwaar als het
     * aanbod. Mario (27-08): het moet er wel staan, maar niet zo groot --
     * zeker niet op de hoofdpagina. Nu een fijne regel onder de knoppen.
     *
     * Niet weggehaald en niet naar de FAQ verplaatst: dat het gezegd wordt
     * op de eerste pagina is een van de weinige dingen die Kletzy
     * onderscheidt van elke concurrent.
     */
    .hero-fijndruk {
      margin-top: 1.25rem;
      font-size: 0.95rem;
      color: var(--muted);
      max-width: 30rem;
      line-height: 1.55;
    }

    .hero-visual {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      /*
       * GEEN duwtje omlaag meer (Mario, 28-08).
       *
       * Er stond 3,5 rem padding zodat de kaart naast de KOP begon in
       * plaats van naast het labeltje erboven. Met de nieuwe koppen, die
       * over drie regels lopen, zakte de kaart daardoor te ver weg: rechts
       * bleef bovenaan een gat staan terwijl de kaart onderaan uit beeld
       * liep. Nu begint hij gelijk met "Als enige in Belgie", en dat leest
       * als een geheel in plaats van als twee losse kolommen.
       */
      padding-top: 0;
    }
    .phone-card {
      background: white;
      border-radius: 24px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.12);
      padding: 2.5rem 2rem;
      max-width: 340px;
      width: 100%;
      text-align: center;
    }
    .phone-icon {
      font-size: 4rem;
      margin-bottom: 1rem;
    }
    .phone-card h3 {
      font-size: 1.3rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
    }
    .phone-card p { color: var(--muted); font-size: 1rem; margin-bottom: 1.5rem; }
    .chat-bubble {
      background: var(--green-light);
      border-radius: 16px 16px 16px 4px;
      padding: 0.85rem 1.1rem;
      font-size: 0.95rem;
      text-align: left;
      color: var(--green-deep);
      margin-bottom: 0.75rem;
      font-style: italic;
    }
    .chat-bubble.right {
      background: var(--green);
      color: white;
      border-radius: 16px 16px 4px 16px;
      text-align: right;
    }
    .ringing {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      background: var(--green-deep);
      color: white;
      padding: 0.6rem 1.2rem;
      border-radius: 20px;
      font-size: 0.95rem;
      font-weight: 600;
    }
    .ringing svg { width: 22px; height: 22px; display: block; flex: none; }

    /* STATS */
    .stats {
      background: var(--green-deep);
      color: white;
      padding: 3rem 2rem;
    }
    .stats-grid {
      max-width: 900px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 2rem;
      text-align: center;
    }
    .stat-number {
      font-size: 2.5rem;
      font-weight: 900;
      letter-spacing: -1px;
    }
    .stat-label { font-size: 1rem; opacity: 0.85; margin-top: 0.25rem; }

    /* PROBLEM */
    /* Het label "Het probleem" is weg (Mario, 28-08): de foto vertelt zelf
       waar dit over gaat, en zo begint ze hoger op het scherm. De ruimte
       bovenaan mag daarom ook krapper. */
    .problem { background: var(--warm); padding-top: 3rem; }
    .problem-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 2rem;
      margin-top: 3rem;
    }
    .problem-card {
      background: white;
      border-radius: 16px;
      padding: 2rem;
      box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    }
    .problem-icon { font-size: 2.5rem; margin-bottom: 1rem; }
    .problem-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.5rem; }
    .problem-card p { color: var(--muted); font-size: 1rem; }

    /* HOW IT WORKS */
    .steps {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 2.5rem;
      margin-top: 3rem;
    }
    .step {
      text-align: center;
      padding: 2rem 1.5rem;
      background: var(--green-light);
      border-radius: 16px;
    }
    .step-num {
      width: 48px; height: 48px;
      background: var(--green-deep);
      color: white;
      border-radius: 50%;
      font-size: 1.3rem;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1.25rem;
    }
    .step h3, .step h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.5rem; }
    .step p { color: var(--muted); font-size: 1rem; }

    /* De week in bolletjes - "is er gebeld" zonder één woord. */
    .week {
      display: flex;
      justify-content: center;
      gap: 0.85rem;
      margin-top: 1.25rem;
    }
    .week div { text-align: center; font-size: 0.9rem; color: var(--muted); width: 1.5rem; }
    .week i {
      display: block;
      width: 1rem; height: 1rem;
      border-radius: 50%;
      margin: 0 auto 0.35rem;
      background: var(--green);
    }
    .week .leeg i { background: transparent; border: 2px solid #cfc9bd; }
    .week .nu i { box-shadow: 0 0 0 4px rgba(27,122,61,0.18); }

    /* FEATURES */
    .features { background: white; }
    .features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 1.5rem;
      margin-top: 3rem;
    }
    .feature-card {
      border: 1.5px solid var(--border);
      border-radius: 16px;
      padding: 1.75rem;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .feature-card:hover {
      border-color: var(--green);
      box-shadow: 0 4px 20px rgba(27,122,61,0.1);
    }
    .feature-icon { font-size: 2rem; margin-bottom: 0.75rem; }
    .feature-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.4rem; }
    .feature-card p { color: var(--muted); font-size: 0.95rem; }

    /* VERTROUWEN */
    .trust { background: var(--green-light); }
    .trust-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1.25rem;
      margin-top: 3rem;
    }
    .trust-card {
      background: white;
      border-radius: 16px;
      padding: 1.75rem;
      box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    }
    .trust-card h3, .trust-card h2 {
      font-size: 1.05rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
      color: var(--green-deep);
    }
    .trust-card p { color: var(--muted); font-size: 1rem; }
    .trust-icon { font-size: 1.9rem; margin-bottom: 0.6rem; }
    .notlist {
      margin-top: 2.5rem;
      background: white;
      border-left: 5px solid var(--ochre);
      border-radius: 0 14px 14px 0;
      padding: 1.5rem 1.75rem;
    }
    .notlist strong { display: block; margin-bottom: 0.6rem; }
    .notlist ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem 1.75rem; }
    .notlist li { font-size: 1rem; color: var(--muted); }
    .notlist li::before { content: "\2715"; color: var(--ochre-ink); font-weight: 700; margin-right: 0.5rem; }

    /* VOOR ORGANISATIES */
    .org {
      background: var(--green-deep);
      color: white;
    }
    .org h2 { color: white; }
    .org-inner {
      max-width: 1100px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 3.5rem;
      align-items: start;
    }
    .org p { opacity: 0.92; font-size: 1.05rem; }
    .org-kicker {
      font-size: 1.25rem;
      font-weight: 700;
      line-height: 1.5;
      margin: 1.5rem 0;
      opacity: 1;
      border-left: 4px solid rgba(255,255,255,0.45);
      padding-left: 1.1rem;
    }
    /*
      GEEN FLEX MEER (31-08). Hier stond display:flex met de pijl als
      ::before. Dat werkte zolang een regel uit een stuk tekst bestond,
      maar op /voor-organisaties begint elke regel met een <strong>, en
      dan zijn er drie flexitems: de pijl, de vetgedrukte kop, en de rest
      van de zin. Flex zet die naast elkaar in kolommen, dus de kop brak
      smal af en de zin ernaast begon halverwege in de lucht.

      Het is een inspringing en geen kolommenlayout: de pijl staat
      absoluut in de marge en de regel blijft een gewone lopende zin.
    */
    .org-list { list-style: none; }
    .org-list li {
      position: relative;
      padding: 0.85rem 0 0.85rem 1.75rem;
      border-bottom: 1px solid rgba(255,255,255,0.16);
      font-size: 0.98rem;
      opacity: 0.94;
    }
    .org-list li:last-child { border-bottom: none; }
    .org-list li::before {
      content: "\2192";
      position: absolute;
      left: 0;
      top: 0.85rem;
      opacity: 0.7;
    }

    /* PRICING */
    .pricing { background: var(--warm); }
    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1.5rem;
      margin-top: 3rem;
      max-width: 980px;
      margin-left: auto;
      margin-right: auto;
      /*
       * DE TEGELS ZIJN NU EVEN HOOG (Mario, 02-09).
       *
       * Hier stond align-items:start, waardoor elke tegel precies zo hoog
       * werd als haar eigen tekst. Met drie verschillende inleidingen kwamen
       * de knoppen dus op drie hoogtes uit -- en samen met de scale(1.04) op
       * "Meest gekozen" leek het geheel scheef.
       *
       * stretch maakt ze even hoog; de knop wordt onderaan gedrukt met
       * margin-top:auto in .price-card. Dat is het enige wat een rij
       * prijstegels rustig doet ogen.
       */
      align-items: stretch;
    }
    @media (max-width: 1100px) {
      .pricing-grid { grid-template-columns: repeat(2, 1fr); }
      .trust-grid { grid-template-columns: repeat(2, 1fr); }
      .price-card.popular { transform: none; }
    }
    .price-card {
      background: white;
      border-radius: 20px;
      padding: 2.25rem 2rem;
      box-shadow: 0 2px 16px rgba(0,0,0,0.07);
      position: relative;
      display: flex;
      flex-direction: column;
    }
    /*
     * De knop onderaan, ongeacht hoeveel tekst erboven staat. Het laatste
     * kind is bij alle drie de tegels de knop; :last-child is hier
     * betrouwbaarder dan een klasse, want die verschilt per tegel.
     */
    .price-card > :last-child { margin-top: auto; }
    .price-card.popular {
      border: 2.5px solid var(--green);
      transform: scale(1.04);
    }
    .popular-badge {
      position: absolute;
      top: -14px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--green-deep);
      color: white;
      padding: 0.25rem 1rem;
      border-radius: 20px;
      font-size: 0.88rem;
      font-weight: 700;
      white-space: nowrap;
    }
    .price-name { font-size: 1rem; font-weight: 700; color: var(--muted); margin-bottom: 0.75rem; }
    .price-amount {
      font-size: 2.8rem;
      font-weight: 900;
      letter-spacing: -1px;
      line-height: 1;
    }
    .price-amount span { font-size: 1.2rem; font-weight: 600; vertical-align: super; }
    .price-period { color: var(--muted); font-size: 0.95rem; margin-bottom: 0.5rem; }
    .price-minutes {
      background: var(--green-light);
      color: var(--green-deep);
      padding: 0.4rem 0.8rem;
      border-radius: 8px;
      font-size: 0.95rem;
      font-weight: 600;
      display: inline-block;
      margin-bottom: 1.5rem;
    }
    /*
     * Het merkje +1, +2, +3 bij een jaarcontract.
     *
     * Oker en niet rood. Rood zegt op een pagina fout, duur of gevaar, en
     * geen van die drie is hier aan de hand: dit is wat er bijkomt. Oker
     * staat al in het palet (--ochre) en leest als iets extra.
     *
     * De inkt is --ochre-ink en niet wit: wit op oker haalt 2,0:1 en is op
     * een telefoon in de zon onleesbaar. Zo staat het op 5,6:1.
     */
    /*
      Het badge stond alleen op .price-minutes, en hangt sinds 01-09 ook aan
      de belminutenregel in de kenmerkenlijst. Zie de uitleg in kletzy.js.

      TEXT-INDENT MOET HIER TERUG OP NUL, en dat is geen voorzorg maar een
      gevonden fout. De regels van .price-features hebben een hangende
      inspringing voor het vinkje: padding-left 24px met text-indent -24px.
      text-indent erft door, en een inline-block past hem toe op zijn eigen
      eerste regel. Het gevolg was dat de "+30" vierentwintig pixels naar
      links werd geduwd, buiten zijn eigen bolletje, boven op de laatste
      letter van het woord ervoor -- terwijl de layout zei dat er zeven pixels
      tussen zat. Het bolletje kromp mee tot een cirkel in plaats van een pil.

      In .price-minutes deed het probleem zich niet voor: dat is een gewone
      div zonder hangende inspringing.
    */
    .price-minutes .erbij,
    .prijs-belminuten .erbij {
      text-indent: 0;
      display: inline-block;
      margin-left: 0.45rem;
      padding: 0.05rem 0.5rem;
      border-radius: 999px;
      background: var(--ochre);
      color: #3d2b00;
      font-size: 0.85rem;
      font-weight: 800;
      vertical-align: 1px;
    }
    .price-features { list-style: none; margin-bottom: 1.75rem; }
    .price-features li {
      padding: 0.4rem 0;
      font-size: 0.95rem;
      color: var(--muted);
      display: flex;
      align-items: flex-start;
      gap: 0.5rem;
    }
    .price-features li::before {
      content: "\2713";
      color: var(--green);
      font-weight: 700;
      flex-shrink: 0;
    }
    /*
     * Het vinkje staat met flex naast de tekst, en daardoor werd ELK kind
     * van de li een eigen flexitem. Een <strong> midden in een zin kreeg zo
     * zijn eigen kolom: "Zorgsignaal | tot 5 mensen | in plaats van 1" met
     * drie verschillende regelafbrekingen. Zichtbaar sinds 28-08 bij PLUS,
     * maar het stond er al bij "per sms" in COMFORT.
     *
     * De li krijgt daarom een tekstblok dat zelf niet flex is. Alles na het
     * vinkje hoort bij elkaar.
     */
    .price-features li > * { display: inline; }
    .price-features li {
      display: block;
      padding-left: 1.5rem;
      text-indent: -1.5rem;
    }
    .price-features li::before { margin-right: 0.5rem; }
    .btn-full { width: 100%; text-align: center; }

    /* TESTIMONIALS */
    .testimonials { background: white; }
    .testimonials-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1.5rem;
      margin-top: 3rem;
    }
    .testimonial {
      background: var(--warm);
      border-radius: 16px;
      padding: 1.75rem;
    }
    .testimonial-quote {
      font-size: 1rem;
      color: var(--text);
      font-style: italic;
      margin-bottom: 1.25rem;
      line-height: 1.6;
    }
    .testimonial-quote::before { content: "\201C"; font-size: 1.5rem; color: var(--green); }
    .testimonial-author { font-weight: 700; font-size: 0.95rem; }
    .testimonial-role { font-size: 0.9rem; color: var(--muted); }
    .stars { color: #f59e0b; font-size: 1rem; margin-bottom: 0.75rem; }

    /* Oprichtersverhaal - vervangt de reviews tot er echte klanten zijn */
    .founder {
      background: var(--warm);
      border-radius: 16px;
      padding: 2.5rem;
      margin-top: 2.5rem;
    }
    .founder p {
      font-size: 1.05rem;
      line-height: 1.75;
      margin-bottom: 1.1rem;
    }
    .founder p:last-of-type { margin-bottom: 1.75rem; }
    .founder .lead { font-size: 1.2rem; font-weight: 600; }
    .founder-sign {
      display: flex;
      align-items: center;
      gap: 0.9rem;
      border-top: 1px solid rgba(0,0,0,0.08);
      padding-top: 1.5rem;
    }
    .founder-initial {
      width: 3rem;
      height: 3rem;
      flex: 0 0 auto;
      border-radius: 50%;
      background: var(--green-deep);
      color: white;
      font-weight: 700;
      font-size: 1.3rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    /* Het gezicht bij de handtekening, in plaats van de initiaal in een
       bolletje. Even groot en even rond, dus de rij eronder blijft staan. */
    .founder-foto {
      width: 3rem;
      height: 3rem;
      flex: 0 0 auto;
      border-radius: 50%;
      object-fit: cover;
      display: block;
    }
    .founder-name { font-weight: 700; }
    .founder-role { font-size: 0.95rem; color: var(--muted); }

    /* FAQ */
    .faq { background: var(--warm); }
    /*
     * DE SAMENVATTING OP DE JURIDISCHE PAGINA'S (Mario, 02-09).
     *
     * Tien regels in gewone taal, elk met de weg naar het artikel. Artikel
     * 12 van de AVG vraagt "beknopt, transparant, begrijpelijk en in
     * duidelijke en eenvoudige taal", en dat haalt een tekst van 2.700
     * woorden niet, hoe juist hij ook is.
     */
    .samenvatting ul { list-style: none; margin: 1.25rem 0 0; padding: 0; }
    .samenvatting li {
      padding: 0.7rem 0;
      border-bottom: 1px solid var(--border);
      line-height: 1.55;
    }
    .samenvatting li:last-child { border-bottom: 0; padding-bottom: 0; }
    .samenvatting li a {
      display: inline-block;
      margin-left: 0.35rem;
      color: var(--green-deep);
      font-size: 0.95rem;
      white-space: nowrap;
    }
    .samenvatting-intro { color: var(--muted); margin-bottom: 0; }

    /*
     * WAAR EEN ANKERSPRONG LANDT (Mario, 05-09).
     *
     * Mario klikte op "de hele lijst van wat ze niet is" en kwam "helemaal
     * ergens anders" uit. Nagemeten: de sprong zet het doel netjes op top 0,
     * en daar staat de navbalk van 67 pixels overheen. Wat je dus mist is
     * precies de kop van het blok waar je naartoe klikte. Bij
     * #wat-ze-niet-is verdween daardoor de zin "En wat Kletzy uitdrukkelijk
     * niet is:" en landde je middenin de opsomming.
     *
     * Dit gold voor elk anker op de site behalve de artikelen van de
     * privacyverklaring, en die hadden 1,5rem, wat met een balk van 67
     * pixels ook te weinig is: die landden 43 pixels te hoog.
     *
     * Dus een regel voor alles. scroll-margin heeft geen enkel effect op de
     * opmaak -- het telt alleen mee wanneer de browser ergens naartoe
     * scrollt -- dus [id] is hier breed maar niet riskant. 5,5rem is 88
     * pixels: de balk plus een handbreedte lucht.
     */
    [id] { scroll-margin-top: 5.5rem; }

    /*
     * Onder 768 pixels klapt het menu uit en wordt de balk 107 pixels in
     * plaats van 67. Gemeten over twaalf breedtes: de sprong zit op 65 tot
     * 67 boven de 768 en op 107 eronder, zonder tussenstap. Dus een tweede
     * waarde en geen glijdende schaal.
     */
    @media (max-width: 768px) {
      [id] { scroll-margin-top: 8rem; }
    }

/*
 * DE EIGEN BLOKKEN VAN DE DRIE LANDINGSPAGINA'S (Mario, 02-09).
 *
 * Elk van die pagina's herhaalde grotendeels de startpagina. Nu heeft elke
 * pagina een blok dat nergens anders staat: de stiltemeter, de grenzen van
 * de AI, en een dagverloop. Ze delen deze opmaak.
 */
.stiltemeter, .kan-niet, .dagverloop {
  background: var(--warm);
  padding: 3rem 2rem;
}
.dagverloop { background: white; }

.stilte-lijst, .dag-lijst {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.stilte-lijst li, .dag-lijst li {
  display: flex;
  gap: 1.25rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
  line-height: 1.55;
}
.stilte-lijst li:last-child, .dag-lijst li:last-child { border-bottom: 0; }

.stilte-dag, .dag-uur {
  flex: 0 0 5.5rem;
  font-weight: 800;
  color: var(--green-deep);
  font-variant-numeric: tabular-nums;
}
.stilte-tekst, .dag-tekst { flex: 1 1 auto; }

.stilte-slot, .dag-slot, .kan-niet-slot {
  margin-top: 1.75rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Wat ze niet kan: een lijst met een streep, geen kruisjes. Kruisjes
   lezen als een tekortkoming; dit is gewoon de grens. */
.kan-niet-lijst {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.1rem;
}
.kan-niet-lijst li {
  background: white;
  border-left: 4px solid var(--ochre);
  border-radius: 0 10px 10px 0;
  padding: 1rem 1.15rem;
  line-height: 1.55;
}
.kan-niet-lijst strong { display: block; margin-bottom: 0.25rem; }

@media (max-width: 40rem) {
  .stilte-lijst li, .dag-lijst li { flex-direction: column; gap: 0.25rem; }
  .stilte-dag, .dag-uur { flex: 0 0 auto; }
}

/*
 * HET VERRIJKINGSFORMULIER OP /gelukt (Mario, 03-09).
 *
 * De velden komen letterlijk uit het aanmeldformulier en houden dus hun
 * eigen opmaak. Wat hier staat is alleen de groepering: daar waren het
 * kaarten met een schaduw, hier zijn het blokken in een uitklapbaar geheel.
 */
.verrijk-groep {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.verrijk-groep:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.verrijk-groep h2 {
  font-size: 1.05rem;
  margin: 0 0 .35rem;
}
.verrijk-groep .card-sub {
  color: var(--muted);
  font-size: .95rem;
  margin: 0 0 1rem;
}

    .faq-list { margin-top: 2.5rem; }
    /*
     * DE GROEPSKOPPEN (Mario, 02-09).
     *
     * Zeventien vragen in een ongeordende lijst is een lijst waarin niemand
     * zoekt. Vijf groepen met een kop erboven maakt er een inhoudsopgave
     * van waarin ge uw eigen vraag herkent.
     *
     * De eerste kop krijgt geen ruimte erboven: die staat al onder de
     * inleiding van de sectie.
     */
    .faq-groep {
      font-size: 1.05rem;
      font-weight: 800;
      color: var(--green-deep);
      letter-spacing: 0.02em;
      margin: 2.5rem 0 0.25rem;
      padding-bottom: 0.5rem;
      border-bottom: 2px solid var(--green-light);
    }
    .faq-groep:first-child { margin-top: 0; }
    .faq-item {
      background: white;
      border-radius: 12px;
      margin-bottom: 0.75rem;
      overflow: hidden;
    }
    .faq-question {
      width: 100%;
      text-align: left;
      padding: 1.25rem 1.5rem;
      background: none;
      border: none;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
    }
    .faq-question::after { content: "+"; font-size: 1.4rem; color: var(--green); flex-shrink: 0; }
    .faq-question.open::after { content: "\2212"; }
    .faq-answer {
      display: none;
      padding: 0 1.5rem 1.25rem;
      color: var(--muted);
      font-size: 1rem;
      line-height: 1.7;
    }
    .faq-answer.open { display: block; }

    /* CTA BOTTOM */
    .cta-bottom {
      background: var(--green-deep);
      color: white;
      text-align: center;
      padding: 5rem 2rem;
    }
    .cta-bottom h2 {
      font-size: clamp(1.8rem, 4vw, 2.5rem);
      font-weight: 800;
      margin-bottom: 1rem;
    }
    .cta-bottom p { font-size: 1.1rem; opacity: 0.85; margin-bottom: 2rem; }

    /*
     * DE ONDERTITEL OP DE GROENE BAND (Mario, 03-09).
     *
     * .section-sub staat op --muted (#4d4d4d), en dat is prima op een witte
     * pagina. In deze band staat het op --green-deep, en dan is het donker
     * op donker: nagemeten 1,3:1, in de praktijk niet te lezen. Mario zag
     * het op /hoe-het-werkt, maar het stond op alle twaalf de pagina's met
     * deze band.
     *
     * De sectie zet color:white, maar .section-sub zet er zijn eigen kleur
     * overheen. Overerving helpt dus niet; het moet met naam.
     */
    .cta-bottom .section-sub { color: rgba(255, 255, 255, 0.92); }

    /*
     * ALLES IN DEZE SECTIE STAAT OP DIEPGROEN (Mario, 30-08).
     *
     * En daar ging het mis op drie pagina's: /ai-babbelvriend,
     * /gezelschap-voor-ouderen en /voor-ouderen-die-alleen-wonen hadden
     * .btn zonder .btn-white -- een groene knop op een groene achtergrond,
     * dus een knop die niet als knop te zien is. En .klein-onder-knop staat
     * op --muted (#4d4d4d): donkergrijs op donkergroen haalt 1,6:1 en is
     * gewoon onleesbaar.
     *
     * Deze twee regels repareren dat niet per pagina maar structureel: wie
     * hier ooit een knop of een kleine regel zet, krijgt vanzelf de juiste
     * kleur. Een groene knop op groen was toch nooit de bedoeling.
     *
     * 0.9 en niet 0.85 voor de kleine regel: dat is 7,1:1 in plaats van
     * 6,2:1, en zeven is wat deze doelgroep nodig heeft.
     */
    .cta-bottom .btn { background: #fff; color: var(--green-deep); }
    .cta-bottom .btn:hover { background: var(--green-light); color: var(--green-dark); }
    /*
     * DEZE REGEL WAS KAPOT GEPLAKT (Mario, 03-09).
     *
     * Er stond ".cta-bottom" gevolgd door een heel blok afrekenopmaak en pas
     * daarna " .klein-onder-knop { ... }". De browser leest dat commentaar
     * weg en houdt twee dingen over: ".klein-onder-knop" ZONDER .cta-bottom
     * ervoor, en ".cta-bottom .nu-gebeurt" -- opmaak die alleen nog werkt op
     * een pagina waar .nu-gebeurt nooit staat.
     *
     * Gevolg: de witte kleur hierboven gold overal, en werd verderop weer
     * overschreven door de grijze .klein-onder-knop. Precies de 1,6:1 die
     * het commentaar hierboven zegt te hebben opgelost. En de drie regels
     * boven de betaalknop stonden op /afrekenen zonder enige opmaak.
     */
    .cta-bottom .klein-onder-knop { color: rgba(255, 255, 255, 0.9); }
    .cta-bottom .klein-onder-knop a {
      color: #fff;
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    .btn-white {
      background: white;
      color: var(--green-deep);
    }
    .btn-white:hover { background: var(--green-light); color: var(--green-dark); }

/*
 * "WAT ER NU GEBEURT" ALS DRIE REGELS (Mario, 02-09).
 *
 * Staat vlak boven de betaalknop. Geen kader eromheen: dit is geen
 * waarschuwing maar de geruststelling, en een kader maakt er een
 * mededeling van.
 */
.nu-gebeurt {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  text-align: left;
}
.nu-gebeurt li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
}
.nu-icoon {
  flex: 0 0 auto;
  color: var(--green-deep);
  display: flex;
  margin-top: 0.15rem;
}

/*
 * Het rekenvoorbeeld. Twee bedragen naast elkaar is de enige vraag die
 * telt voor wie zijn kaart moet geven, dus staat het er groter dan de
 * kleine lettertjes eromheen.
 */
.rekenvoorbeeld {
  margin: 1.5rem 0 0;
  padding: 0.85rem 1.1rem;
  background: var(--green-light);
  border-radius: 10px;
  font-size: 1.05rem;
  line-height: 1.5;
}

/* De betaalwijzen onder de knop. */
.betaalwijzen-kop {
  margin: 1.5rem 0 0.5rem;
  font-size: 0.95rem;
  color: var(--muted);
}
.betaalwijzen {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.betaalwijze {
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 0.4rem 0.8rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
  background: white;
}
/*
 * .voorop IS WEG (Mario, 07-09).
 *
 * Bancontact kreeg hier een groene rand van 2px en groene tekst, en dat is op
 * deze site precies de opmaak van "aangeklikt": zie .periode button bij
 * aria-pressed en .mk-knop bij aria-current. Vier witte kadertjes naast een
 * groen kadertje leest dus als een keuzelijst waarin de eerste al gekozen is.
 *
 * Mario probeerde op de andere te klikken. Terecht, want ze zien eruit als
 * knoppen. Het zijn li-elementen: de keuze valt pas bij Mollie zelf.
 *
 * Bancontact blijft wel vooraan staan -- dat was de goede reden achter dit
 * blok (02-09): het is de kaart die in de portefeuille zit en voor veel
 * mensen de reden om door te gaan in plaats van af te haken bij
 * "kaartgegevens". Die nadruk zit nu in de volgorde en in de zin eronder, en
 * niet meer in opmaak die iets anders belooft.
 */


    /* FOOTER */
    footer {
      background: #111;
      color: #aaa;
      padding: 2.5rem 2rem;
    }
    /*
     * TWEE RIJEN: vier kolommen boven, het juridische onder.
     *
     * Waarom niet meer een rij losse links: veertien op een rij is een lijst
     * zonder aanknopingspunt, en de laatste stond als wees op regel twee.
     * Vier kopjes maken er een menu van. De redenering staat voluit bij de
     * voettekst in de HTML.
     *
     * .footer-inner is bewust geen flex meer. Ze draagt nu twee rijen onder
     * elkaar, en die regelen hun eigen indeling.
     */
    .footer-inner {
      max-width: 1100px;
      margin: 0 auto;
    }
    .footer-top {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      gap: 2rem 3rem;
    }
    .footer-merk { flex: 0 0 auto; }
    .footer-logo { color: #fff; }
    .footer-logo svg { height: 28px; width: auto; display: block; }

    /*
     * minmax(0, 1fr) en niet 1fr: met een kale 1fr weigert een kolom smaller
     * te worden dan haar langste woord, en dan duwt "Gezelschap voor ouderen"
     * de hele rij breder dan het scherm.
     */
    .footer-kolommen {
      flex: 1 1 22rem;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1.75rem 2rem;
    }
    .footer-kop {
      margin: 0 0 0.7rem;
      color: #fff;
      font-size: 0.95rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .footer-kolom ul { list-style: none; display: grid; gap: 0.15rem; }
    /*
     * OOK IN DE VOET EEN RAAKVLAK VAN 44 PX (Mario, 02-09).
     *
     * Dezelfde fout als bovenaan: kale tekstlinks van een pixel of
     * zeventien hoog. In de voet staan ze bovendien onder elkaar, dus wie
     * "Vragen" wil en "Prijzen" raakt, komt ergens anders uit.
     *
     * De gap ging van 0,5rem naar 0,15rem omdat de opvulling in de link nu
     * zelf de ruimte maakt -- anders staat de voet twee keer zo hoog.
     */
    .footer-kolom a {
      color: #aaa;
      text-decoration: none;
      font-size: 0.95rem;
      transition: color 0.2s;
      display: flex;
      align-items: center;
      min-height: 44px;
    }
    .footer-kolom a:hover { color: #fff; }

    /*
     * De onderste balk is stiller dan de kolommen erboven. Dat is de
     * bedoeling: de voorwaarden moeten er staan en vindbaar zijn, maar ze
     * hoeven niet te concurreren met de links die iemand verder helpen.
     */
    .footer-onder {
      margin-top: 2.25rem;
      padding-top: 1.25rem;
      border-top: 1px solid #2a2a2a;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem 1.5rem;
      font-size: 0.88rem;
    }
    .footer-bedrijf { margin: 0; }
    .footer-juridisch {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem 1.25rem;
      margin: 0;
    }
    .footer-juridisch a { color: #aaa; text-decoration: none; }
    .footer-juridisch a:hover { color: #fff; }
    .footer-copy { margin: 0; font-size: 0.88rem; }

    /* RESPONSIVE */
    @media (max-width: 768px) {
      /*
       * MINDER LUCHT BOVEN DE KOP OP EEN GSM (30-08).
       *
       * De hero stond op 6rem padding boven, onder een balk van 65 px. Dat
       * is bijna een tiende van het scherm leeg voor er iets staat. Samen
       * met de uitlegzin duwde het de knop van het eerste scherm af.
       *
       * Nagemeten op 360x640, 390x760 en 430x860, over alle vijf de koppen.
       */
      /*
       * Op een telefoon twee kolommen en niet vier: vier van 80 px maakt van
       * elke link drie regels. Het logo gaat boven de kolommen staan, en de
       * onderste balk stapelt links uitgelijnd -- gecentreerd zou de
       * bedrijfsregel er als een slogan uitzien.
       */
      .footer-top { gap: 1.5rem; }
      .footer-merk { flex: 1 1 100%; }
      .footer-kolommen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .footer-onder { justify-content: flex-start; gap: 0.35rem 1.25rem; }
      .hero { padding: 2.5rem 2rem 3rem; }
      .hero h1 { margin-bottom: 0.9rem; }
      .hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
      /*
       * DE KAART STOND HIER BOVEN DE KOP, EN DAT IS TERUGGEDRAAID (29-08).
       *
       * Er stond order: -1. Op een telefoon van 390 bij 760 betekende dat:
       * de hele eerste schermvulling was de gespreksmockup, en de kop begon
       * pas op 1035 pixels. Wie op zijn gsm binnenkwam zag geen titel, geen
       * uitleg en geen knop -- alleen een kaartje met een babbel erin, en
       * moest anderhalf scherm scrollen voor hij wist waar hij was.
       *
       * Nagemeten met Playwright op 29-08, niet geschat.
       *
       * Op een breed scherm staat de kaart nog altijd naast de kop en doet
       * ze precies wat ze moet doen: tonen wat de woorden beweren. In een
       * kolom hoort ze eronder, als bewijs achteraf.
       */
      .hero-visual { padding-top: 0; }
      .phone-card { max-width: 280px; }
      .stats-grid { grid-template-columns: 1fr; gap: 1.5rem; }
      .problem-grid { grid-template-columns: 1fr; }
      .steps { grid-template-columns: 1fr; }
      .features-grid { grid-template-columns: 1fr; }
      .pricing-grid { grid-template-columns: 1fr; }
      .price-card.popular { transform: none; }
      .testimonials-grid { grid-template-columns: 1fr; }
      .trust-grid { grid-template-columns: 1fr; }
      .org-inner { grid-template-columns: 1fr; gap: 2rem; }
      .notlist ul { flex-direction: column; gap: 0.4rem; }
      .founder { padding: 1.5rem 1.35rem; }
      .founder p { font-size: 1rem; }
      .founder .lead { font-size: 1.08rem; }
      /*
       * OP EEN TELEFOON STOND HIER display: none (30-08).
       *
       * Dat betekende: geen menu. Alleen het logo, en verder niets. Wie op
       * een gsm vanuit Google op /prijzen landde, kon nergens heen behalve
       * met de terugknop van de browser. Mario merkte het op de desktop op,
       * maar op een telefoon was het erger dan lastig: het was er gewoon niet.
       *
       * Nu twee rijen. Boven het logo en de proefknop, want dat is de ene
       * actie die op een telefoon telt en die hoort altijd bereikbaar te
       * zijn. Daaronder de tekstlinks, met "Kletzy regelen" als link in
       * plaats van als knop, want twee knoppen naast een logo passen niet
       * op 360 px en de kaderknop is hier de tweede keuze.
       *
       * Nagemeten op 320, 360, 390 en 430 px.
       */
      .nav-inner { flex-wrap: wrap; gap: 0.4rem 1rem; padding: 0.45rem 0 0.3rem; min-height: 0; }
      .nav-logo { order: 1; }
      .nav-acties { order: 2; margin-left: auto; }
      .nav-links {
        display: flex;
        order: 3;
        width: 100%;
        margin-left: 0;
        justify-content: center;
        gap: 0.2rem 0.85rem;
        padding-top: 0.1rem;
      }
      /*
       * RAAKVLAKKEN VAN 44 PX (Mario, 02-09).
       *
       * Hier stonden kale tekstlinks van 0,92rem: een raakvlak van een pixel
       * of vijftien hoog. WCAG 2.5.8 vraagt 24, Apple raadt 44 aan, en onze
       * kopers zijn vijftig tot zeventig en lezen dit op een gsm. Wie
       * "Prijzen" wil en "Home" raakt, is weg.
       *
       * De link zelf wordt het raakvlak (display:flex + min-height), niet de
       * <li> eromheen -- anders is de rand van het vak wel groot maar reageert
       * alleen de tekst.
       *
       * De rij mag scrollen als hij niet past. Dat is beter dan een item
       * verbergen: zo blijft alles bereikbaar, ook op 320 px.
       */
      .nav-links {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        gap: 0;
        padding-top: 0;
        scrollbar-width: none;
      }
      .nav-links::-webkit-scrollbar { display: none; }
      .nav-links li { flex: 0 0 auto; }
      /*
       * Een vervagende rand rechts, zodat te zien is dat er meer staat.
       * Zonder dat lijkt de rij gewoon af te lopen bij "Prijzen" en zoekt
       * niemand naar wat erachter zit.
       *
       * mask en niet een overlay: een overlay boven een schuivende rij vangt
       * de tikken op die er juist doorheen moeten.
       */
      .nav-links {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
      }
      .nav-links a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 0 0.7rem;
        font-size: 0.95rem;
        white-space: nowrap;
      }
      /*
       * "Hoe het werkt" is sinds 02-09 een echte pagina en geen anker meer
       * naar het midden van de startpagina. Het verbergen had als reden dat
       * Home je op dezelfde plek bracht; die reden is er niet meer, en het
       * is juist de vraag die iemand op een gsm het vaakst heeft.
       */
      .nav-links li:nth-child(2) { display: list-item; }
      /* De kaderknop wordt hier een gewone link: hij staat in de rij mee. */
      .nav-links .btn-outline {
        border: 0;
        background: none;
        font-weight: 700;
        color: var(--green-deep);
      }
      .nav-acties .btn {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 0 0.95rem;
        font-size: 0.95rem;
      }
    }

    /*
     * ONDER 390 PX NOG EEN MAATJE KLEINER (30-08).
     *
     * Op 360 px sprong de linkrij naar twee regels: 120 px balk. Met een
     * iets kleiner logo, een krappere knop en minder tussenruimte past
     * alles weer op een rij en is de balk 87 px, dus zelfs korter dan op
     * een groter toestel.
     */
    @media (max-width: 389px) {
      body > nav { padding: 0 1rem; }
      .nav-logo svg { height: 26px; }
      /*
       * DE HOOGTE BLIJFT 44 PX, OOK HIER (Mario, 02-09).
       *
       * Dit blok kneep vroeger alles nog een maatje kleiner om de rij op
       * een regel te houden. Dat hoeft niet meer: de rij mag schuiven als
       * ze niet past. Alleen de zijkanten worden krapper -- de hoogte is
       * juist wat een raakvlak bruikbaar maakt, en die blijft.
       */
      .nav-acties .btn { padding: 0 0.75rem; font-size: 0.9rem; }
      .nav-links a { padding: 0 0.55rem; font-size: 0.9rem; }
    }

/* ── DE PRIJSTABEL ──────────────────────────────────────────
   Vier kolommen die op een telefoon niet passen. De keuze was omvouwen
   naar kaarten (dan verlies je het vergelijken, wat juist het doel is) of
   laten scrollen -- dat laatste, met een omhullende div die overflow-x
   afhandelt. Zie de opmerking bij de tabel in prijzen.html. */
.prijstabel {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  margin-top: 1rem;
}
.prijstabel th, .prijstabel td {
  padding: 0.85rem 1rem;
  text-align: center;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.prijstabel thead th {
  background: var(--green-light);
  color: var(--green-deep);
  font-weight: 700;
  font-size: 1rem;
  border-bottom: 2px solid var(--green);
}
.prijstabel tbody th {
  text-align: left;
  font-weight: 600;
  color: var(--text);
  background: #fafafa;
}
.prijstabel td.ja { color: var(--green-deep); font-weight: 700; }
.prijstabel td.nee { color: var(--muted); }

/*
 * De schuifbare tabel krijgt focus (tabindex="0"), dus hij moet ook tonen
 * dat hij hem heeft -- anders schuift er iets waarvan niemand ziet dat het
 * geselecteerd is.
 */
.tabel-scroll:focus-visible {
  outline: 3px solid var(--green-deep);
  outline-offset: 3px;
  border-radius: 4px;
}
.prijstabel tbody tr:hover td,
.prijstabel tbody tr:hover th { background: var(--warm); }

/*
 * DE TABEL OP EEN GSM (Mario, 02-09).
 *
 * Drie kolommen plus een kopkolom in 390 px werd een schuifbalk waarin de
 * derde kolom altijd buiten beeld valt. Wie PLUS overweegt, moet dan per
 * rij heen en weer vegen.
 *
 * WAAROM GEEN DRIE UITKLAPLIJSTEN. Dat was het alternatief, maar dan staat
 * dezelfde inhoud twee keer in de pagina: een keer als tabel voor breed en
 * een keer als lijst voor smal. Twee kopieen die uit elkaar gaan lopen zodra
 * er iets verandert -- en op deze pagina staan prijzen.
 *
 * Dus blijft het EEN tabel, die zichzelf onder de 40rem opstapelt. Elke rij
 * wordt een kaartje met het kenmerk als kop en daaronder drie regels
 * "BASIS ... COMFORT ... PLUS ...". Het label komt uit data-plan, dat op
 * elke cel staat.
 *
 * De tabelrollen worden bewust weggezet met display:block. Een voorlezer
 * leest dit dan als een lijst en niet als een tabel -- dat is hier juist,
 * want de kolomkoppen staan niet meer boven de cellen. De inhoud blijft
 * volledig; alleen de vorm verandert.
 */
@media (max-width: 40rem) {
  /*
   * Niets meer om te schuiven. tabindex is geen CSS-eigenschap, dus de
   * focusbaarheid blijft staan -- dat is onschadelijk (een extra tabstop op
   * een blok dat niet schuift) en het alternatief zou javascript zijn dat
   * bij elke schermdraai attributen zet.
   */
  .tabel-scroll { overflow-x: visible; }
  .prijstabel { min-width: 0; }
  .prijstabel,
  .prijstabel tbody,
  .prijstabel tr,
  .prijstabel td { display: block; width: 100%; }
  .prijstabel thead { display: none; }

  .prijstabel tbody tr {
    border: 2px solid var(--border);
    border-radius: 12px;
    margin-bottom: 1rem;
    overflow: hidden;
    background: white;
  }
  .prijstabel tbody th {
    display: block;
    width: 100%;
    background: var(--green-light);
    color: var(--green-deep);
    font-weight: 700;
    text-align: left;
    border-bottom: 0;
  }
  .prijstabel td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    text-align: right;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--border);
  }
  .prijstabel tbody tr td:last-child { border-bottom: 0; }
  .prijstabel td::before {
    content: attr(data-plan);
    font-weight: 700;
    color: var(--muted);
    text-align: left;
  }
  /* Op een kaartje is de hele rij al gemarkeerd; hover eroverheen stoort. */
  .prijstabel tbody tr:hover td,
  .prijstabel tbody tr:hover th { background: revert; }
}

/* a.nb en .voetnoten stonden hier tot 01-09, voor de voetnotenlijst onder de
   prijstabel ("Wat er nu al is, en wat eraan komt"). Die lijst is weg omdat
   ze niet meer klopte, en daarmee ook de enige plek waar deze twee gebruikt
   werden. Komt er ooit opnieuw een voetnoot: de :target-regel liet de
   aangeklikte regel oplichten, en dat was het beste stukje ervan. */

/* Alleen voor schermlezers. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── HET PROEFGESPREK ───────────────────────────────────────
   Formuliervelden ruim en groot. De doelgroep hier is de zoon of dochter,
   maar wie het zelf voor zijn ouder invult zit vaak naast haar -- en dan
   leest zij mee. */

.steps-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin-bottom: 2rem;
}
.step { text-align: center; }
.step-num {
  width: 2.5rem; height: 2.5rem;
  margin: 0 auto 0.75rem;
  border-radius: 50%;
  background: var(--green-deep);
  color: white;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.step h3, .step h2 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.step p { color: var(--muted); font-size: 1rem; }

.proef-kaart {
  background: white;
  border-radius: 20px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
  padding: 2.5rem 2rem;
}

.veld { margin-bottom: 1.5rem; border: 0; padding: 0; }
.veld label, .veld legend {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.veld input[type=text], .veld input[type=email] {
  width: 100%;
  padding: 0.85rem 1rem;
  font-size: 1.05rem;
  font-family: inherit;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: white;
  color: var(--text);
}
.veld input:focus {
  outline: none;
  border-color: var(--green-deep);
}
.veld input:focus-visible {
  outline: 3px solid var(--green-deep);
  outline-offset: 2px;
}
.veld small {
  display: block;
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: 0.88rem;
}

.stem-keuze { display: flex; gap: 1rem; flex-wrap: wrap; }
.stem-optie {
  flex: 1 1 10rem;
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1rem;
  border: 2px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-weight: 500;
}
/* Even groot als de vinkjes hierboven, om dezelfde reden. */
.stem-optie input { width: 1.35rem; height: 1.35rem; flex: 0 0 auto; margin: 0; }

/*
 * DE GEKOZEN KAART MOET TE ZIEN ZIJN ZONDER HET RONDJE (Mario, 02-09).
 *
 * Het radioknopje was 13 px. Een lichtgroene achtergrond alleen is te
 * weinig verschil voor wie kleuren minder goed onderscheidt, dus komt er
 * een dikkere rand en een vinkje bij. Drie signalen, niet een.
 *
 * HET VINKJE STOND ER ALS "¹3" (Mario, 03-09). Op vier plaatsen in dit
 * bestand was het teken ✓ onderweg verminkt, en op het proefgesprek stond
 * er dus "Een mannenstem ¹3" -- op de pagina die mensen moet overtuigen.
 * Daarom nu als CSS-ontsnapping \2713 en niet als los teken: die overleeft
 * elke bewerking, welke editor of codering er ook tussen zit.
 */
.stem-optie:has(input:checked) {
  border-color: var(--green-deep);
  border-width: 3px;
  background: var(--green-light);
  font-weight: 700;
}
.stem-optie:has(input:checked)::after {
  content: "\2713";
  margin-left: auto;
  color: var(--green-deep);
  font-size: 1.2rem;
  font-weight: 700;
}
/* De rand wordt 3px bij keuze; hou de kaart even groot zodat hij niet springt. */
.stem-optie { padding: 0.85rem 1rem; }
.stem-optie:not(:has(input:checked)) { padding: calc(0.85rem + 1px) calc(1rem + 1px); }

.stem-optie:has(input:focus-visible) {
  outline: 3px solid var(--green-deep);
  outline-offset: 2px;
}

.vinkjes { display: flex; flex-direction: column; gap: 0.9rem; }
.vinkje {
  display: flex; align-items: flex-start; gap: 0.7rem;
  font-weight: 400;
  cursor: pointer;
}
/* Groot genoeg om te raken, ook met een trillende hand. */
.vinkje input { width: 1.35rem; height: 1.35rem; margin-top: 0.15rem; flex: 0 0 auto; }

/*
 * De border:0 hier is voor <button>, dat er anders een grijze systeemrand
 * bij krijgt. Maar hij wiste ook de omlijning van .btn-outline, waardoor de
 * knop van PLUS als kale tekst op wit stond (gezien 28-08). Vandaar de
 * uitzondering erachter, met dezelfde specificiteit plus een klasse.
 */
.btn-full { display: block; width: 100%; text-align: center; border: 0; cursor: pointer; font-family: inherit; }
.btn-outline.btn-full { border: 2px solid var(--green-deep); }

.melding { margin-top: 1rem; padding: 0; font-size: 1rem; }
.melding.fout {
  padding: 0.85rem 1.1rem;
  background: #fff4f4;
  border: 1px solid #e8a0a0;
  border-radius: 10px;
  color: #8a1f1f;
}
.melding.bezig { color: var(--muted); }

.proef-belofte {
  margin-top: 2rem;
  padding: 1.75rem 2rem;
  background: var(--green-light);
  border-radius: 14px;
}
.proef-belofte h3 { color: var(--green-dark); margin-bottom: 0.75rem; }
.proef-belofte ul { margin-left: 1.25rem; }
.proef-belofte li { margin-bottom: 0.6rem; }

.faq-item { margin-bottom: 1.75rem; }
.faq-item h3 { font-size: 1.1rem; margin-bottom: 0.4rem; color: var(--green-dark); }
.faq-item p { color: var(--muted); }

/* ── JURIDISCHE PAGINAS ─────────────────────────────────────
   Lange lopende tekst. Ruimer regelafstand en een smallere kolom dan de
   rest van de site: wie dit leest, leest het echt, en 62 tekens per regel
   is waar het oog rust vindt. */

.juridisch h2 {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--green-dark);
  margin: 2.5rem 0 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}
.juridisch h2:first-of-type { border-top: 0; }
.juridisch h3 { font-size: 1.1rem; margin: 1.25rem 0 0.5rem; color: var(--green-dark); }
.juridisch p { margin-bottom: 1rem; line-height: 1.7; }
.juridisch ul { margin: 0 0 1rem 1.25rem; }
.juridisch li { margin-bottom: 0.5rem; }

/* Het samenvattingsblok bovenaan, en de eerlijkheidsblokken. */
.kort {
  background: var(--green-light);
  border-radius: 14px;
  padding: 1.5rem 1.75rem;
  margin: 1.5rem 0 2rem;
}
.kort h2, .kort h3 { border-top: 0; margin-top: 0; padding-top: 0; }
.kort p:last-child { margin-bottom: 0; }

.jur-tabel {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.5rem;
  font-size: 0.97rem;
}
.jur-tabel th, .jur-tabel td {
  padding: 0.7rem 0.9rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.jur-tabel thead th {
  background: var(--warm);
  font-weight: 700;
  color: var(--green-dark);
}

/*
  OP EEN TELEFOON SCHUIFT DE TABEL, NIET DE PAGINA (31-08).

  De datakaart in punt 8 van de privacyverklaring heeft drie kolommen met
  echte tekst erin. Op 390 pixels werd die tabel 509 breed, en omdat een
  tabel niet smaller wil dan haar inhoud duwde ze de hele pagina mee: elke
  alinea van de verklaring stond honderdvijftig pixels te ver naar links te
  wachten. Dat is precies de fout waarbij iemand denkt dat de tekst afgesneden
  is.

  display:block maakt van de tabel een gewoon blok dat mag overlopen, en dan
  schuift alleen die tabel. De inhoud blijft volledig; ze wordt niet geknepen
  en niet afgekapt.
*/
@media (max-width: 700px) {
  .jur-tabel {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .jur-tabel td, .jur-tabel th { min-width: 8rem; }
}

/*
  De introzin van een prijstegel.

  MET EEN MINIMUMHOOGTE, EN DAAR IS DE HELE REDEN VOOR (01-09). De drie zinnen
  zijn twee, drie en drie regels lang, en daardoor begon de vinkjeslijst op
  elke tegel op een andere hoogte. Precies dat maakt drie tegels naast elkaar
  rommelig: niet de inhoud, maar dat de rijen niet op dezelfde lijn beginnen.

  Drie regels is de langste van de drie; korter maken zou de zin van COMFORT
  kosten en dat is de tegel die het meest gekozen wordt. Op een smal scherm
  staan de tegels onder elkaar en heeft uitlijnen geen zin, dus daar vervalt
  het weer.
*/
.price-intro {
  color: var(--green-deep);
  font-weight: 600;
}
@media (min-width: 900px) {
  .price-intro { min-height: 4.9em; }
}

/*
  De stapteller boven /aanmelden en /afrekenen. Stil en klein: hij moet
  gerust stellen dat er precies twee stappen zijn, niet de aandacht van de
  titel wegnemen.
*/
.stap-teller {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--green-deep);
  margin: 0 0 0.5rem;
  text-transform: none;
}

/*
 * DE VOORTGANGSBALK, MET DE NAMEN EROP (Mario, 02-09).
 *
 * "Stap 1 van 2" zegt hoeveel er nog komt, maar niet wat. Mensen haken af
 * omdat ze denken dat de kaart op de volgende pagina gevraagd wordt -- ze
 * stoppen bij een formulier dat nog geen cent kost. Met "betalen" zichtbaar
 * als laatste stap is die twijfel weg voor ze ontstaat.
 *
 * Het is een <ol>: een lijst met een volgorde, en dat is precies wat het is.
 * aria-current="step" op de stap waar men staat, zodat een schermlezer
 * hetzelfde hoort als wat er te zien is.
 */
.stappen {
  display: flex;
  list-style: none;
  gap: 0.4rem;
  margin: 0 0 1.5rem;
  padding: 0;
}
.stappen li {
  flex: 1 1 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  padding-top: 0.55rem;
  border-top: 5px solid var(--border);
  line-height: 1.35;
}
.stappen li .nr {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
}
/* Waar men nu staat, en wat al gedaan is. */
.stappen li[aria-current="step"] {
  color: var(--green-deep);
  border-top-color: var(--green-deep);
}
.stappen li.af {
  color: var(--green-deep);
  border-top-color: var(--green);
}
.stappen li.af .nr::after {
  content: " \2713";
}

@media (max-width: 30rem) {
  .stappen li { font-size: 0.78rem; }
  .stappen li .nr { font-size: 0.7rem; }
}

/* Wel en niet naast elkaar: het belangrijkste van de hele verklaring. */
.wel-niet {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin: 1.25rem 0 1.5rem;
}
.wel, .niet {
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
}
.wel { background: var(--green-light); }
.niet { background: #fff4f4; }
.wel h3, .niet h3 { margin-top: 0; }
.niet h3 { color: #8a1f1f; }
.wel ul, .niet ul { margin-bottom: 0; }

/* ── HOE KLETZY PRAAT ───────────────────────────────────────
   Het eerlijkheidsblok over speech-to-speech. Krijgt een eigen kader zodat
   het niet wegvalt tussen de zes vertrouwenskaarten: dit is de alinea die
   een gemeente leest voor ze een vraag stelt. */
.techniek {
  background: white;
  border: 2px solid var(--green);
  border-radius: 16px;
  padding: 2rem;
  margin: 2.5rem auto 0;
  max-width: 46rem;
}
.techniek h3, .techniek h2 {
  font-size: 1.25rem;
  color: var(--green-dark);
  margin-bottom: 1rem;
}
.techniek p { margin-bottom: 1rem; }

/* Activatie en jaarkorting, naast elkaar onder de prijstabel. */
.raster-twee {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  margin-top: 2rem;
}
.prijs-extra {
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem 1.75rem;
}
.prijs-extra.uitgelicht {
  border: 2px solid var(--green);
  background: var(--green-light);
}
.prijs-extra h3 { margin-bottom: .6rem; color: var(--green-dark); }
.prijs-extra small { color: var(--muted); }

/* Hoe het begint: drie stappen onder de prijstegels. */
.start-blok {
  background: white;
  border: 2px solid var(--green);
  border-radius: 16px;
  padding: 1.75rem 2rem;
}
.start-stappen { list-style: none; counter-reset: s; margin: 0; padding: 0; }
.start-stappen li {
  counter-increment: s;
  position: relative;
  padding-left: 2.6rem;
  margin-bottom: 1rem;
}
.start-stappen li:last-child { margin-bottom: 0; }
.start-stappen li::before {
  content: counter(s);
  position: absolute; left: 0; top: 0;
  width: 1.8rem; height: 1.8rem;
  border-radius: 50%;
  background: var(--green-deep); color: white;
  font-weight: 700; font-size: .95rem;
  display: flex; align-items: center; justify-content: center;
}

/* De korte techniekverwijzing op de startpagina. Het volledige verhaal
   staat op /vertrouwen -- zie de opmerking daar. */
.techniek-kort {
  max-width: 46rem;
  margin: 2rem auto 0;
  padding: 1.25rem 1.5rem;
  background: white;
  border-left: 4px solid var(--green);
  border-radius: 0 12px 12px 0;
}
.techniek-kort h3 {
  font-size: 1.15rem;
  color: var(--green-dark);
  margin-bottom: .6rem;
}
.techniek-kort p { margin-bottom: .75rem; }

/* De link in de huisstijl in plaats van het blauw van de browser.
   Stond er niet, en dan valt hij terug op de standaardkleur -- wat op een
   verzorgde pagina meteen opvalt als iets dat vergeten is. */
.techniek-kort a,
a.knop-tekst {
  color: var(--green-deep);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--green-light);
}
.techniek-kort a:hover,
a.knop-tekst:hover {
  color: var(--green-dark);
  border-bottom-color: var(--green);
}


/* ── HET AANMELDFORMULIER ───────────────────────────────────
   Stond als 265 regels inline in aanmelden.html, uit de tijd dat die pagina
   losstond van de site. Mario (27-08): "aanmelden voelt niet geintegreerd
   met de rest van de website, er is ook geen backbutton meer."

   Nu hier, zodat het formulier dezelfde kop, voet en kleuren heeft als de
   rest. Twee klassen zijn hernoemd omdat ze botsten met het gedeelde blad:
   .container werd .aanmeld-wrap en .steps werd .aanmeld-stappen. */

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: #f8f9fa;
  color: #1a1a1a;
  line-height: 1.6;
}
.aanmeld-wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}
.logo {
  text-align: center;
  margin-bottom: 2rem;
}
.logo h1 {
  font-size: 2.5rem;
  color: #1b7a3d;
  letter-spacing: -1px;
}
.logo p {
  color: var(--muted);
  font-size: 1.1rem;
  margin-top: 0.25rem;
}
.card {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  margin-bottom: 1.5rem;
}
/* Hoe het bellen werkt: zij neemt het initiatief.
   Was oker met een waarschuwingsrand, want er stond "Kletzy belt nog
   niet zelf" -- een voorbehoud. Dat is het niet meer: zij belt, en dat
   is het ontwerp. Vandaar een rustige groene toon. */
.card.proefkader {
  background: #e8f5ee;
  border: 1px solid #b6ddc6;
  box-shadow: none;
}
.card.proefkader h2 { color: #0f5a2c; }
.card h2 {
  font-size: 1.2rem;
  margin-bottom: 0.35rem;
  color: #1b7a3d;
}
.card .card-sub {
  font-size: 0.95rem;
  color: var(--muted);
  margin-bottom: 1.25rem;
}
.field {
  margin-bottom: 1.25rem;
}
label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
}
/*
 * DE HINTS ZIJN HIER DE BELANGRIJKSTE TEKST, NIET DE ZWAKSTE (Mario, 02-09).
 *
 * Ze stonden op #888 en #777 bij 13 a 14 px -- axe telde 35 contrastfouten
 * op deze ene pagina. Juist hier staat wat iemand nodig heeft om het veld
 * te snappen ("Vult zichzelf in zodra u de postcode hebt ingetypt"), en
 * juist dat was het lichtst gezet.
 *
 * --muted is #4d4d4d, ruim boven de 4,5:1 die WCAG AA vraagt.
 */
label .hint {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.95rem;
}
.field > .hint {
  display: block;
  color: var(--muted);
  font-size: 0.95rem;
  margin-top: 0.35rem;
  line-height: 1.5;
}
input, select, textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.2s;
}
/*
 * ZICHTBARE FOCUS (Mario, 02-09).
 *
 * Hier stond outline:none met alleen een randkleur van grijs naar groen --
 * een verschil van een pixel. Wie met een toetsenbord werkt of met een
 * leesloep over het scherm gaat, zag niet waar de focus stond.
 *
 * :focus-visible en niet :focus, zodat een muisklik geen rand oplevert
 * maar tabben wel. De border-color blijft, want die werkt ook bij wie de
 * outline niet ziet door een eigen kleurinstelling.
 */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--green-deep);
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--green-deep);
  outline-offset: 2px;
  border-color: var(--green-deep);
}
/*
 * De bevestiging van de postcode: "3520, Zonhoven ✓". Groen en vet, want
 * dit is goed nieuws en mag als zodanig gelezen worden. Leeg is hij
 * onzichtbaar, zonder ruimte in te nemen.
 */
.postcode-ok {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--green-deep);
}
.postcode-ok:empty { display: none; }

input.invalid, select.invalid, textarea.invalid {
  border-color: #c62828;
  background: #fffafa;
}
textarea { resize: vertical; min-height: 100px; }
.interests-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.interests-group label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 400;
  font-size: 0.95rem;
  background: #f0f0f0;
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  cursor: pointer;
}
.interests-group input[type="checkbox"],
.interests-group input[type="radio"] { width: auto; }

/* Toestemming: bewust geen kleine lettertjes. */
/* Planselectie: grote raakvlakken, want dit wordt vaak op een telefoon
   ingevuld terwijl iemand naast zijn moeder zit. */
.plan-keuze {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.plan-optie {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 1.1rem;
  border: 2px solid #e5e5e5;
  border-radius: 12px;
  cursor: pointer;
}
/*
 * DE GEKOZEN TEGEL MOET TE ZIEN ZIJN (Mario, 02-09).
 *
 * COMFORT staat op checked, maar het verschil was een randkleur en een
 * lichte achtergrond -- te weinig om te lezen als "dit is gekozen". Wie
 * het niet ziet, denkt dat er niets gekozen is en zoekt naar wat hij mist.
 * Nu drie signalen, zoals bij de stemkeuze: dikke rand, vinkje, vet.
 */
.plan-optie:has(input:checked) {
  border-color: var(--green-deep);
  border-width: 3px;
  background: var(--green-light);
  padding: calc(1rem - 1px) calc(1.1rem - 1px);
}
.plan-optie:has(input:checked) strong { font-weight: 800; }
.plan-optie:has(input:checked)::after {
  content: "\2713";
  margin-left: auto;
  color: var(--green-deep);
  font-size: 1.3rem;
  font-weight: 700;
  flex: 0 0 auto;
}
.plan-optie:has(input:focus-visible) {
  outline: 3px solid var(--green-deep);
  outline-offset: 2px;
}
.plan-optie input { width: 1.3rem; height: 1.3rem; flex: 0 0 auto; }
.plan-optie strong { display: block; }
.plan-optie small { color: #4d4d4d; }

.klein-onder-knop {
  font-size: 0.95rem;
  color: #4d4d4d;
  margin: 1.25rem 0 0.5rem;
}

.consent {
  border: 1.5px solid #c9a227;
  background: #fdfaf1;
  border-radius: 10px;
  padding: 1.1rem 1.2rem;
}
.consent.invalid { border-color: #c62828; background: #fffafa; }
.consent label {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  margin: 0;
}
.consent input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  margin-top: 2px;
  accent-color: #1b7a3d;
}
.consent .why {
  font-weight: 400;
  font-size: 0.86rem;
  color: #6b6250;
  margin-top: 0.6rem;
  padding-left: 2.4rem;
}

button[type="submit"] {
  width: 100%;
  padding: 0.9rem;
  background: #1b7a3d;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
button[type="submit"]:hover { background: #15632f; }
button[type="submit"]:disabled {
  background: #ccc;
  cursor: not-allowed;
}
.success { display: none; }
.success .card h2 { font-size: 1.35rem; }
.success-head {
  background: #e8f5e9;
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  margin-bottom: 1.5rem;
}
.success-head .tick {
  font-size: 2rem;
  line-height: 1;
  color: #1b7a3d;
}
.success-head h2 {
  font-size: 1.4rem;
  color: #1b7a3d;
  margin: 0.5rem 0 0.25rem;
}
.aanmeld-stappen { list-style: none; counter-reset: stap; }
.aanmeld-stappen li {
  counter-increment: stap;
  position: relative;
  padding-left: 2.6rem;
  margin-bottom: 1.1rem;
}
.aanmeld-stappen li:last-child { margin-bottom: 0; }
.aanmeld-stappen li::before {
  content: counter(stap);
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: #1b7a3d;
  color: white;
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.aanmeld-stappen strong { display: block; }
.nummer {
  display: inline-block;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: #f2f4f2;
  border: 1px dashed #b9c3ba;
  border-radius: 8px;
  padding: 0.5rem 0.9rem;
  margin-top: 0.4rem;
}
.error-msg {
  color: #c62828;
  font-size: 0.9rem;
  margin-top: 0.3rem;
  display: none;
}
.error-msg.show { display: block; }
.form-error {
  display: none;
  background: #fdecea;
  border: 1px solid #f5c6c2;
  color: #a4211b;
  border-radius: 8px;
  padding: 0.9rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 1rem;
}
.form-error.show { display: block; }
/* De paginatitel van het aanmeldformulier. Los van de sectiekoppen, want
   deze pagina heeft geen hero -- iemand die hier komt wil invullen. */
.aanmeld-titel {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 900;
  letter-spacing: -.5px;
  color: var(--green-dark);
  text-align: center;
  margin: 2.5rem 0 2rem;
}


/* ── TOEVOEGINGEN 28-08 ─────────────────────────────────────────────
   Iconen, deuren, cijferbronnen, het wetsblok en de datakaart.

   De emoji zijn eruit. Drie redenen: ze zien er op elk toestel anders uit,
   een schermlezer leest ze voor als "bedroefd gezicht", en ze halen de ernst
   uit een pagina die ook door een schepen gelezen wordt. Nu lijntekeningen in
   currentColor, zelfde aanpak als de belbol. Icoon klein, tekst groot -- dat
   is de huisregel. */

.icoon-bol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: var(--green-light);
  color: var(--green-deep);
  margin-bottom: 1.1rem;
}
.icoon {
  width: 1.75rem;
  height: 1.75rem;
  display: block;
  color: inherit;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Op de deurenkaarten iets kleiner: daar staat de kop dichter bij. */
.deur .icoon-bol { width: 3rem; height: 3rem; margin-bottom: 0.9rem; }

/* Alleen zichtbaar voor schermlezers. */
.vh {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* CIJFERS: bron staat onder elk getal, nooit los ervan. */
.stat-bron {
  font-size: 0.9rem;
  opacity: 0.75;
  margin-top: 0.4rem;
  font-style: italic;
}
.stats-voet { text-align: center; margin-top: 1.75rem; }
.stats-voet a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.bron-link {
  font-size: 0.9rem;
  color: var(--green-deep);
  text-underline-offset: 3px;
}

/* VIER DEUREN */
.deuren { padding: 4rem 0; background: var(--warm); }
.deuren-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}
/*
  DE KAART IS EEN KOLOM, ZODAT DE LINK ONDERAAN STAAT (01-09).

  De vier kaarten zijn even hoog -- dat doet de grid al -- maar de teksten
  zijn dat niet, en dus stond de groene link bij elke kaart op een andere
  hoogte. Dan leest een rij kaarten als vier losse dingen in plaats van als
  een keuze uit vier.

  display:flex met flex-direction:column maakt van de kaart een kolom;
  margin-top:auto op de link duwt hem naar beneden. De overgebleven ruimte
  komt daardoor boven de link terecht en niet eronder, en alle vier de links
  liggen op dezelfde lijn -- die van de langste kaart.
*/
.deur {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  padding: 1.75rem;
  text-decoration: none;
  color: var(--text);
  transition: border-color .15s, transform .15s;
}
.deur:hover, .deur:focus-visible {
  border-color: var(--green-deep);
  transform: translateY(-2px);
}
.deur h3 { font-size: 1.15rem; margin-bottom: 0.5rem; color: var(--green-deep); }
.deur p { color: var(--muted); font-size: 1rem; margin-bottom: 1rem; }
.deur-link { color: var(--green-deep); font-weight: 700; margin-top: auto; }

/* Drie deuren naast elkaar, ook in een smalle kolom.
   .deuren-grid vult zichzelf op met auto-fit en minmax(240px): dat geeft vier
   kolommen in de brede .container van de homepage, maar in de 720px van
   .container-sm passen er maar twee, en dan valt de derde deur alleen op een
   tweede rij. Op proefgesprek.html zijn het er precies drie, en die horen naast
   elkaar. Onder 820px zou dat te smal worden, dus daar gaan ze onder elkaar -
   niet twee met een wees. */
.deuren-drie { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.deuren-drie .deur { padding: 1.35rem; }
@media (max-width: 820px) {
  .deuren-drie { grid-template-columns: 1fr; }
}

/* WAT DE WET VRAAGT */
.wet { padding: 4.5rem 0; background: #fff; }
.wet-tabel {
  width: 100%;
  border-collapse: collapse;
  margin-top: 2.5rem;
}
.wet-tabel th, .wet-tabel td {
  text-align: left;
  vertical-align: top;
  padding: 1.1rem 1rem;
  border-top: 1px solid var(--border);
}
.wet-tabel th {
  width: 42%;
  font-weight: 700;
  color: var(--green-deep);
}
.wet-tabel td { color: var(--muted); }
.wet-ref {
  display: block;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.35rem;
}
@media (max-width: 640px) {
  .wet-tabel th, .wet-tabel td { display: block; width: auto; }
  .wet-tabel td { border-top: 0; padding-top: 0; }
}

/* DATAKAART op /vertrouwen */
.datakaart { width: 100%; border-collapse: collapse; margin: 1.5rem 0 0.5rem; }
.datakaart th, .datakaart td {
  text-align: left; padding: 0.85rem 1rem;
  border-top: 1px solid var(--border); vertical-align: top;
}
.datakaart th { width: 40%; font-weight: 700; }
.datakaart .let-op { color: var(--ochre-ink); font-weight: 700; }

/*
  DE DATAKAART STAPELT OP EEN TELEFOON (05-09).

  Zelfde fout als bij de tabel in punt 8 van de privacyverklaring, en ze stond
  hier al langer: op 390 pixels werd deze tabel 394 breed en duwde ze de hele
  pagina mee. Vandaag werd het 504, doordat de regel over de telefonie een
  echte alinea werd in plaats van drie woorden. Zichtbaar als een pagina die
  zijwaarts schuift, en dan lijkt het alsof er tekst wegvalt.

  Hier schuift de tabel niet zoals daar, maar stapelt ze. Het verschil is het
  aantal kolommen: die tabel heeft er drie en is dus een echt raster, deze
  heeft er twee en is eigenlijk een lijst met een label boven een waarde. Dan
  is onder elkaar zetten beter te lezen dan zijwaarts schuiven, want dan hoeft
  niemand te zoeken bij welk onderdeel een antwoord hoorde.

  De rand komt op de rij te staan in plaats van op de cellen, anders krijgt
  elke waarde een streep boven zich en valt de groepering weg.
*/
@media (max-width: 700px) {
  .datakaart, .datakaart tbody, .datakaart tr, .datakaart th, .datakaart td {
    display: block;
    width: auto;
  }
  .datakaart tr {
    border-top: 1px solid var(--border);
    padding: 0.5rem 0;
  }
  .datakaart th, .datakaart td {
    border-top: 0;
    padding: 0.2rem 0;
  }
  .datakaart th { padding-top: 0.55rem; }
  .datakaart td { padding-bottom: 0.55rem; }
}

.knop-tekst-wit { color: #fff !important; margin-left: 1rem; display: inline-block; }

/* CADEAUKAART */
.kaart-voorbeeld {
  background: var(--green-light);
  border: 2px dashed var(--green);
  border-radius: 0.9rem;
  padding: 2rem;
  text-align: center;
  max-width: 26rem;
  margin: 2rem auto;
}
.kaart-voorbeeld p { font-size: 1.15rem; line-height: 1.7; }
.kaart-nummer {
  font-size: 1.6rem; font-weight: 800; color: var(--green-deep);
  display: block; margin: 1rem 0 0.5rem; letter-spacing: 0.02em;
}
.kaart-van { font-style: italic; color: var(--muted); }

/*
 * De regel bovenaan de kaart (28-08). Kleiner dan de boodschap zelf: ze
 * zegt van wie het komt, niet wat er moet gebeuren. Op een echte kaart
 * staat zoiets ook boven de tekst en niet ertussen.
 */
.kaart-van-wie {
  font-size: 0.95rem !important;
  font-style: italic;
  color: var(--green-deep);
  margin-bottom: 1rem;
}

/*
 * De slotzin onder de vier deuren. Groot genoeg om te lezen als een
 * gedachte en niet als een bijschrift, maar zonder kopgewicht: het is geen
 * nieuwe sectie, het is het einde van deze.
 */
.deuren-slot {
  text-align: center;
  margin-top: 2.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--green-deep);
  line-height: 1.5;
}
.deuren-slot small {
  display: block;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--muted);
  margin-top: 0.3rem;
}

/* Cijferpagina, cadeaupagina en organisatiepagina. */
.cijfer-blok {
  border-left: 3px solid var(--green);
  padding: 0.25rem 0 0.25rem 1.5rem;
  margin: 2rem 0;
}
.cijfer-blok h3 { font-size: 1.15rem; color: var(--green-deep); margin-bottom: 0.6rem; }
.cijfer-blok p { color: var(--muted); margin-bottom: 0.75rem; }
.cijfer-blok-let-op { border-left-color: var(--ochre); }
.cijfer-blok-let-op h3 { color: var(--ochre-ink); }
.bronnenlijst { list-style: none; margin-top: 1.5rem; }
.bronnenlijst li {
  padding: 0.65rem 0 0.65rem 1.5rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  position: relative;
}
.bronnenlijst li::before {
  content: "";
  position: absolute; left: 0; top: 1.35rem;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
}
.prijs-lijst { list-style: none; margin: 1.25rem 0; }
.prijs-lijst li { padding: 0.5rem 0; border-top: 1px solid var(--border); color: var(--muted); }
/*
  Deze lijst is getekend voor het donkergroene blok, en wordt op
  /voor-organisaties op een lichte achtergrond hergebruikt. Zonder deze
  regel is de scheidingslijn wit op wit, dus onzichtbaar: dan staan er zes
  alinea's onder elkaar zonder dat iets zegt waar de ene ophoudt.
*/
.org-list-licht { color: var(--muted); }
.org-list-licht strong { color: var(--text); }
.org-list-licht li { border-bottom-color: rgba(0,0,0,0.10); opacity: 1; }

/* "vanaf oktober" op de rij zelf. Het eerlijkheidskader stond onder de
   tabel, terwijl de tabel erboven de functies zonder voorbehoud opsomde. */
.komt-eraan {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--green-light);
  color: var(--green-deep);
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
  vertical-align: middle;
}

.let-op-blok {
  max-width: 40rem;
  margin: 1.25rem auto 0;
  padding: 1rem 1.25rem;
  background: #fff8e6;
  border: 1px solid var(--ochre);
  border-radius: 0.6rem;
  color: var(--text);
  font-size: 1rem;
}

/*
 * DE SUGGESTIEKAARTJES OP DE BELPAGINA (Mario, 02-09).
 *
 * Ze staan onder de knop, niet erboven. Wie meteen wil bellen scrolt er
 * langs; wie niet weet wat te zeggen vindt ze precies daar waar hij begint
 * te twijfelen.
 *
 * Het zijn knoppen en geen links: ze vullen het onderwerpveld en gaan
 * nergens heen. aria-pressed zegt dat ook tegen een voorlezer.
 */
.suggesties { margin-top: 2.5rem; }
.suggesties-kop {
  font-size: 0.95rem;
  color: var(--muted);
  margin-bottom: 0.9rem;
}
.suggesties-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.7rem;
  text-align: left;
}
.suggestie {
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.4;
  text-align: left;
  padding: 0.8rem 0.95rem;
  background: white;
  border: 2px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  color: var(--text);
  transition: border-color 0.15s, background 0.15s;
}
.suggestie:hover { border-color: var(--green); background: var(--green-light); }
.suggestie[aria-pressed="true"] {
  border-color: var(--green-deep);
  background: var(--green-light);
  font-weight: 700;
}
.suggestie[aria-pressed="true"]::after {
  content: " \2713";
  color: var(--green-deep);
  font-weight: 700;
}

/* Het vrije tekstveld eronder, dichtgeklapt tot iemand het nodig heeft. */
.suggestie-eigen { margin-top: 1.1rem; text-align: left; }
.suggestie-eigen summary {
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--green-deep);
  font-weight: 600;
}

/*
 * DE MICROFOONMETER OP DE BELPAGINA (Mario, 02-09).
 *
 * Een balk die meebeweegt met wat de microfoon binnenkrijgt. Hij staat
 * boven de klok, want de vraag "hoort ze mij?" komt voor de vraag "hoe
 * lang nog?".
 *
 * De overgang is kort (80ms): trager voelt als vertraging op de lijn, en
 * juist die indruk moet deze balk wegnemen.
 */
.mic-meter {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 18rem;
  margin: 1.25rem auto 0.5rem;
}
.mic-icoon { color: var(--muted); display: flex; flex: 0 0 auto; }
.mic-balk {
  flex: 1 1 auto;
  height: 10px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.mic-vul {
  display: block;
  width: 0%;
  height: 100%;
  background: var(--green);
  border-radius: 999px;
  transition: width 80ms linear;
}
.mic-tekst {
  min-height: 1.4rem;
  margin: 0 auto;
  max-width: 26rem;
  font-size: 0.95rem;
  color: var(--muted);
}
.mic-tekst.waarschuwing { color: var(--ochre-ink); font-weight: 600; }

/* Wie beweging liever niet ziet, krijgt de balk zonder overgang. */
@media (prefers-reduced-motion: reduce) {
  .mic-vul { transition: none; }
}

.verwachting {
  background: var(--green-light);
  border-radius: 0.6rem;
  padding: 1rem 1.15rem;
  margin: 1.5rem 0;
  font-size: 1rem;
  color: var(--text);
  line-height: 1.55;
}

.aanmeld-onder {
  color: var(--muted);
  margin: -0.5rem 0 2rem;
  font-size: 1rem;
}

/* De grote rinkelende belbol boven het gesprekje. Vervangt de telefoon-emoji
   die daar stond: zelfde plek, zelfde functie, maar in het merkteken zelf. */
.belbol-groot {
  color: var(--green-deep);
  margin-bottom: 1.25rem;
}
.belbol-groot svg {
  width: 4.5rem;
  height: 4.5rem;
  display: block;
  margin: 0 auto;
}

/* Het tafereel boven "Het probleem": de foto met de twee ballonnen. */
.tafereel {
  max-width: 48rem;
  margin: 2rem auto 2.5rem;
}
.tafereel img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.9rem;
  box-shadow: 0 16px 40px rgba(0,0,0,0.10);
}
.tafereel figcaption {
  margin-top: 0.85rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--muted);
}

@media (max-width: 640px) {
  .tafereel { margin: 1.5rem auto 2rem; }
}

/* Maandelijks / jaarlijks. Twee echte knoppen in plaats van een schuifje:
   een schuifje is voor deze doelgroep onduidelijk (welke kant is aan?) en
   het is met een schermlezer lastiger dan twee knoppen met aria-pressed. */
.cyclus {
  display: inline-flex;
  gap: 0.35rem;
  padding: 0.35rem;
  margin: 0 auto 2.5rem;
  background: var(--green-light);
  border-radius: 999px;
  justify-content: center;
}
.cyclus-wrapper { text-align: center; }
.cyclus-knop {
  border: 0;
  background: transparent;
  color: var(--green-deep);
  font: inherit;
  font-weight: 700;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  cursor: pointer;
  min-height: 44px;
}
.cyclus-knop.actief {
  background: var(--green-deep);
  color: #fff;
}
.cyclus-knop:focus-visible { outline: 3px solid var(--green-dark); outline-offset: 2px; }
.cyclus-winst {
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--ochre);
  /* Niet --ochre-ink (#6b4c00): dat haalt op deze okeren bol maar 3.26:1 en
     dit is vette tekst van 13 px, dus geen "grote tekst". Lighthouse gaf
     hier terecht een rode vlag. #3d2b00 haalt 5.62:1 en ziet er hetzelfde
     uit. De variabele zelf blijft staan, want op de drie andere plaatsen
     staat ze op een lichte achtergrond en klopt ze wel. */
  color: #3d2b00;
}
.cyclus-knop.actief .cyclus-winst { background: #fff; color: var(--green-deep); }
.prijs-jaartotaal {
  font-size: 0.9rem;
  color: var(--muted);
  margin-top: -0.35rem;
  margin-bottom: 0.5rem;
}

/* Opzeggen */
.opzeggen {
  max-width: 46rem;
  margin: 2.5rem auto 0;
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  background: #fff;
}
.opzeggen h3 { color: var(--green-deep); margin-bottom: 1rem; }
.opzeggen dt { font-weight: 700; margin-top: 0.9rem; }
.opzeggen dd { color: var(--muted); margin-left: 0; }
.opzeggen p { margin-top: 1.1rem; color: var(--muted); }

/* Basiskleur voor links.
   Die ontbrak: elke link die niet in een eigen klasse zat, kreeg het
   browserblauw en na een bezoek het browserpaars. Precies de kleur die
   we voor deze doelgroep geschrapt hebben, en ze stond in de prijstekst. */
a { color: var(--green-deep); text-underline-offset: 3px; }

/*
 * Alleen links ZONDER klasse krijgen een hoverkleur, en dat is dezelfde val
 * als hieronder (28-08, tweede keer).
 *
 * Er stond kaal "a:hover { color: var(--green-dark) }". Een pseudoklasse
 * telt mee voor de specificiteit, dus a:hover (0,1,1) wint van .btn (0,1,0).
 * Gevolg: zodra de muis over de groene knop kwam, werd de witte tekst
 * donkergroen op een donkergroene achtergrond. De knop leek leeg.
 *
 * De :not([class]) houdt het bij lopende tekst. Alles met een eigen klasse
 * -- knoppen, navigatie, deuren -- regelt zijn hover zelf, en dat is precies
 * de bedoeling.
 */
a:not([class]):hover { color: var(--green-dark); }

body > nav a, footer a, .btn, .deur, .nav-logo { text-decoration: none; }

/*
 * GEEN a:visited HIER. Dat kostte de knoppen hun tekst (28-08).
 * Zie ook de a:hover hierboven: dezelfde fout, dezelfde dag, andere
 * pseudoklasse.
 *
 * Er stond "a:visited { color: var(--green-deep) }". Een pseudoklasse telt
 * mee voor de specificiteit, dus a:visited (0,1,1) wint van .btn (0,1,0):
 * elke bezochte knop kreeg donkergroene tekst op een donkergroene
 * achtergrond. Onzichtbaar, en alleen te zien op de pagina's die ge al
 * eens bezocht hebt -- dus niet bij het testen van een nieuwe pagina.
 *
 * Dezelfde val staat hierboven al beschreven bij .nav-links a. Twee keer
 * dezelfde fout in een stijlblad betekent dat de regel opgeschreven moet
 * worden: WIJZIG NOOIT DE KLEUR VAN "a" MET EEN PSEUDOKLASSE. Het is ook
 * niet nodig: een regel van de auteur wint sowieso van het paars dat de
 * browser zelf aan bezochte links geeft, ook al is die minder specifiek.
 */

/*
 * De vergelijking met het personenalarm, in de COMFORT-tegel. Ingesprongen
 * met een groene streep: het is een terzijde, geen kenmerk van het
 * abonnement, en dat verschil moet te zien zijn zonder het te lezen.
 */
.prijs-vergelijk {
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--muted);
  border-left: 3px solid var(--green-light);
  padding-left: 0.7rem;
  margin: 0.25rem 0 0.75rem;
}

.prijs-activatie {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: -0.2rem;
  margin-bottom: 0.5rem;
}
.eerlijk {
  max-width: 46rem;
  margin: 2.5rem auto 0;
  padding: 1.5rem 1.75rem;
  border-radius: 0.9rem;
  background: var(--green-light);
}
.eerlijk h3 { color: var(--green-deep); margin-bottom: 1rem; }
.eerlijk p { margin-bottom: 0.9rem; }
.eerlijk-waarom { color: var(--muted); margin-bottom: 0; }

/* De knop krijgt zijn eigen regel, het tekstlinkje eronder (Mario, 28-08).
   Naast elkaar concurreerden ze: twee dingen op ooghoogte, allebei groen.
   Onder elkaar is er een duidelijke eerste en tweede keuze, en de knop mag
   dan ook groter. Links uitgelijnd met de kop en de tekst erboven: één
   element centreren in een linksuitgelijnde kolom leest als een fout. */
.hero-cta {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
}
.hero-cta .btn-lg {
  padding: 1.05rem 2.5rem;
  font-size: 1.15rem;
  min-width: 16rem;
  text-align: center;
}
.hero-cta .knop-tekst,
.hero-cta a.knop-tekst {
  font-style: italic;
  font-weight: 500;
  font-size: 1rem;
  border-bottom: 0;
  text-decoration: underline;
  text-decoration-color: var(--green-light);
  text-decoration-thickness: 2px;
}
@media (max-width: 900px) {
  .hero-cta .btn-lg { width: 100%; min-width: 0; }
}

/* Tellende cijfers: vaste cijferbreedte, anders schokt de tekst eronder
   mee terwijl het getal oploopt. */
.stat-number { font-variant-numeric: tabular-nums; }

/* Smalle verwijsband naar /voor-organisaties. Het volledige verhaal stond
   op de startpagina en hoort daar niet: dat is een aankoopdossier, geen
   argument voor de dochter die zich afvraagt of dit iets is voor haar mama. */
/*
 * LICHTGROEN, ZOALS DE PRIJSSTROOK (Mario, 30-08).
 *
 * Deze band stond eerst op --green-deep, net als .cta-bottom die er meteen
 * onder komt: twee secties, dezelfde kleur, geen rand ertussen, en op het
 * scherm werd dat één groen blok van bijna duizend pixels. Toen is het even
 * --green-dark geweest. Dat scheidde wel, maar drie groentinten onder elkaar
 * maakten de staart van de pagina zwaar en donker, en dat past niet bij wat
 * hier staat: dit is een terzijde, geen finale.
 *
 * Geen nieuwe kleur erbij dus, maar --green-light hergebruikt van
 * .prijsstrook. Dat is niet alleen zuiniger, het klopt ook: die twee zijn
 * hetzelfde soort blok. Allebei een smalle strook met praktische informatie
 * die de bezoeker doorstuurt, tussen twee verhalende secties in. Lichtgroen
 * betekent op deze pagina nu "even iets zakelijks, kort".
 *
 * En het loopt goed op: wit bij de oprichter, lichtgroen hier, diepgroen voor
 * de slotoproep. De pagina wordt donkerder naarmate ze naar het einde loopt,
 * in plaats van er halverwege al te zijn.
 *
 * DE KNOP MOEST MEE. Die stond op .btn-white, en wit op lichtgroen is bijna
 * onzichtbaar. Hij is nu de gewone groene knop -- zie index.html.
 */
.org-kort {
  background: var(--green-light);
  color: var(--text);
  padding: 2.5rem 2rem;
}
.org-kort strong { color: var(--green-dark); }
.org-kort p { color: var(--muted); }
.org-kort .container-sm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.org-kort p { margin: 0; max-width: 40rem; line-height: 1.6; }
.org-kort strong { display: block; font-size: 1.15rem; margin-bottom: 0.35rem; }

@media (max-width: 700px) {
  .org-kort .container-sm { flex-direction: column; align-items: flex-start; }
}


/* ── Cadeau en oprichter op de startpagina (28-08) ─────────────────── */

/*
 * Het cadeaublok staat tussen twee witte secties, dus het heeft een eigen
 * grond nodig om als deur te lezen en niet als nog een alinea.
 */
.cadeau-kort {
  padding: 4rem 2rem;
  background: var(--warm);
}
.cadeau-kort .section-sub { max-width: 40rem; margin-left: auto; margin-right: auto; }

/* ── Drie secties op dezelfde kleur (30-08) ─────────────────────────────
 *
 * .problem, .deuren en .cadeau-kort staan alle drie op --warm. Tussen twee
 * secties komt anders 5rem onder plus 4rem boven, en dat werkt zolang de
 * achtergrond verandert: de kleurwissel maakt van die lucht een grens.
 * Hier verandert er niets, en dan leest 144 px niet als rust maar als een
 * gat, zoals Mario terecht opmerkte.
 *
 * Alleen waar de twee elkaar echt opvolgen, vandaar :has(). Op
 * proefgesprek.html staat .deuren ook, maar zonder .cadeau-kort erachter,
 * en die pagina houdt dus haar eigen ruimte.
 */
.problem:has(+ .deuren) { padding-bottom: 2.5rem; }
.problem + .deuren { padding-top: 2.5rem; }
/* De prijsstrook staat sinds 30-08 tussen .deuren en .cadeau-kort, en die
   heeft een eigen kleur. Daar doet de kleurwissel het werk, dus daar hoeft
   niets ingekort te worden. */

/* ── De prijs in een strook ─────────────────────────────────────────────
 *
 * Bewust een andere kleur dan de warme secties eromheen: dit is het
 * antwoord op een vraag en geen hoofdstuk. Zo hoeft het geen kop en geen
 * eigen witruimte om op te vallen, en vecht het ook niet meer met /prijzen
 * om dezelfde zoekopdracht.
 */
.prijsstrook {
  padding: 2.75rem 2rem;
  background: var(--green-light);
}
.prijsstrook-bedrag {
  margin: 0 0 0.4rem;
  font-size: clamp(1.15rem, 2.6vw, 1.45rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--green-dark);
}
.prijsstrook-klein {
  margin: 0 0 1.1rem;
  font-size: 0.98rem;
  color: var(--muted);
}
.prijsstrook-link { margin: 0; }

/* Onderaan hetzelfde: er stond 120 px tussen de organisatieband en de
   slotoproep, en dat is veel voor twee blokken die tegen elkaar aan horen te
   liggen. De grens zelf wordt sinds 30-08 door de kleur getrokken en niet
   door lucht -- zie de opmerking bij .org-kort. */
.org-kort:has(+ .cta-bottom) { padding-bottom: 2.5rem; }
.org-kort + .cta-bottom { padding-top: 2.5rem; }

.oprichter { padding: 4rem 2rem; background: #fff; }

/*
 * Foto links, tekst rechts, en op een telefoon onder elkaar met de foto
 * gecentreerd. Geen grid met vaste kolommen: bij 200% lettergrootte moet
 * de tekst de foto kunnen wegduwen.
 */
.oprichter-inner {
  display: flex;
  gap: 2.25rem;
  align-items: flex-start;
  flex-wrap: wrap;
}
.oprichter-foto {
  width: 150px;
  height: 150px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  background: var(--green-light);
}
.oprichter-inner > div { flex: 1 1 20rem; }
.oprichter-inner h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: 1rem; }
.oprichter-inner p { color: var(--muted); margin-bottom: 1rem; }

@media (max-width: 640px) {
  .oprichter-inner { justify-content: center; text-align: center; }
  .oprichter-inner h2 { text-align: center !important; }
  .oprichter-inner .founder-sign { justify-content: center; }
}


/* ── Het geheugen als eigen sectie (28-08) ────────────────────────── */
.geheugen { padding: 4rem 2rem; background: var(--warm); }

/*
 * Twee dagen naast elkaar, onder elkaar op een telefoon. Geen vaste
 * kolommen: bij grote letters moet een dag de volle breedte kunnen nemen.
 */
.geheugen-dagen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.geheugen-dag {
  background: #fff;
  border-radius: 16px;
  padding: 1.5rem 1.35rem 1rem;
}

/*
 * De dag als etiket en niet als kop: hij ordent het voorbeeld, hij is geen
 * boodschap. Vandaar klein, in kapitalen, en met wat letterruimte.
 */
.geheugen-label {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}
.geheugen-dag .chat-bubble:last-child { margin-bottom: 0; }


/* ── Drie vertrouwenszinnen onder de hero (28-08) ─────────────────── */

/*
 * Een dunne strook, geen sectie. Ze staat tussen de hero en het
 * probleemblok, dus ze mag niet als eigen hoofdstuk lezen: weinig hoogte,
 * geen kop, en dezelfde witte grond als de hero eromheen.
 */
.gerust {
  padding: 1.75rem 2rem 2.25rem;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
/* ── EEN GEWONE OPSOMMING IN LOPENDE TEKST ──────────────────
   .gerust-lijst hieronder is iets anders: twee kolommen met een pictogram
   per regel. Zonder dat pictogram valt ze uit elkaar, en dat was op
   /voor-ouderen-die-alleen-wonen en /ai-babbelvriend gebeurd: vier zinnen
   vetgedrukt naast elkaar, zonder bolletje, met een gat in het midden
   (Mario, 01-09: "dit is vreemde opmaak").

   Dit is wat die twee pagina's nodig hadden: bolletjes, inspringing, en
   lucht tussen de regels. */
.tekst-lijst { margin: 0 0 0 1.25rem; padding: 0; }
.tekst-lijst li { margin-bottom: 0.6rem; line-height: 1.65; }
.tekst-lijst li:last-child { margin-bottom: 0; }

.gerust-lijst {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.25rem 2rem;
  margin: 0;
  padding: 0;
}
.gerust-lijst li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}

/* Het bolletje is hier kleiner dan in de kaarten: het begeleidt, het roept niet. */
.gerust-lijst .icoon-bol {
  width: 2.4rem;
  height: 2.4rem;
  flex: 0 0 auto;
}
.gerust-lijst small {
  display: block;
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--muted);
  margin-top: 0.15rem;
}


/* ── Prijs per dag op de tegels (28-08) ───────────────────────────── */

/*
 * Klein en grijs, vlak onder de periode. Ze mag het bedrag niet
 * beconcurreren: ze is er om het bedrag te vertalen naar iets waar iemand
 * gevoel bij heeft, niet om zelf gelezen te worden als prijs.
 */
/*
 * HET DAGBEDRAG IS HET ANKER (Mario, 02-09).
 *
 * "Ongeveer 49 cent per dag" en "+ 19 euro eenmalig" stonden allebei op
 * 0,9rem in dezelfde grijstint. Het eerste is het argument -- het maakt van
 * 14,95 iets wat je met een koffie vergelijkt -- en het tweede is een
 * voetnoot. Even zwaar gezet las het als twee voetnoten.
 */
.prijs-perdag {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--green-deep);
  margin-top: 0.1rem;
  margin-bottom: 0.5rem;
}


/* ── Het cadeauspoor op /aanmelden (28-08) ────────────────────────── */

/*
 * Zichtbaar alleen bij ?cadeau=1. Warm en niet waarschuwend: dit is geen
 * melding maar een bevestiging dat de bezoeker op de goede plek staat.
 */
.cadeau-spoor {
  background: var(--green-light);
  border-left: 4px solid var(--green-deep);
  border-radius: 10px;
  padding: 1.1rem 1.35rem;
  margin-bottom: 1.75rem;
  line-height: 1.55;
}
.cadeau-spoor strong { display: block; margin-bottom: 0.35rem; color: var(--green-deep); }
.cadeau-spoor a { display: inline-block; margin-top: 0.5rem; }


/* ── Wat Kletzy kan opzoeken, op /proef/<token> (29-08) ───────────── */

/*
 * Staat tussen het onderwerpveld en de belknop. Bewust rustig: dit is geen
 * verkooplijstje maar een geheugensteun voor iemand die zo dadelijk zeven
 * minuten heeft en niet weet wat hij mag vragen. Het moet gelezen worden en
 * daarna vergeten, niet blijven roepen.
 */
.proef-kan {
  max-width: 26rem;
  margin: 1.5rem auto 0;
  padding: 1.1rem 1.35rem;
  text-align: left;
  background: var(--green-light);
  border-radius: 10px;
  font-size: 0.95rem;
  line-height: 1.6;
}
.proef-kan p { margin: 0; }
.proef-kan-kop {
  font-weight: 800;
  color: var(--green-deep);
  margin-bottom: 0.4rem !important;
}
/* Eén regel apart, want het is een uitnodiging en geen opsomming. */
.proef-kan-slot {
  margin-top: 0.6rem !important;
  font-weight: 700;
}


/* ── De 404-pagina (29-08) ────────────────────────────────────────── */

/*
 * Een lijst zonder bolletjes, groot genoeg om met een duim te raken. Wie
 * hier belandt heeft al iets verkeerd geklikt; maak het tweede klikje dan
 * niet ook moeilijk.
 */
.notlist-404 {
  list-style: none;
  margin: 2rem auto 0;
  max-width: 22rem;
  text-align: left;
}
.notlist-404 li { border-bottom: 1px solid var(--green-light); }
.notlist-404 li:last-child { border-bottom: 0; }
.notlist-404 a {
  display: block;
  padding: 0.85rem 0.25rem;
  font-weight: 600;
  text-decoration: none;
}
.notlist-404 a:hover { text-decoration: underline; }


/*
 * De uitleggende zin onder de knoppen in de hero (29-08).
 *
 * Kleiner en grijzer dan de onderregel erboven: hij legt uit wat dit is voor
 * wie het nog niet weet, en mag niet concurreren met de belofte of de knop.
 */
/* De uitlegzin staat sinds 30-08 bóven de knop. Onderregel en uitleg horen
   dan als één blok te lezen, dus minder lucht ertussen; de gewone 2rem van
   .hero p blijft staan tussen de uitleg en de knop zelf. */
.hero #hero-sub { margin-bottom: 0.9rem; }
/* .hero p staat op 1.2rem en is specifieker dan een losse klasse, dus won
   die van de 0.98rem hieronder: de uitleg werd even groot als de onderregel
   en kostte op een gsm vier regels in plaats van twee. Vandaar .hero p. */
.hero p.hero-uitleg {
  margin-top: 0;
  max-width: 34rem;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--muted);
}