/* Aanvulling op landing.css, alleen voor het voorstel op /voorstel-v2.
   De pagina zelf is een kopie van de landingspagina; hier staan alleen de regels die het
   nieuwe blok met de punten nodig heeft, zodat de bestaande opmaak ongemoeid blijft. */

.waarom-punten {
  padding: 24px 22px;
  border-radius: 28px;
  background: var(--groen-zacht);
  color: var(--accent-diep);
}
.waarom-punten h3 {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}

.punten {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.punten li {
  position: relative;
  padding-left: 28px;
  font-size: 15.5px;
  line-height: 1.45;
}
/* Het vinkje met twee randen: geen los bestand nodig en het schaalt mee met de tekst. */
/* Het vinkje is een svg in plaats van twee omgezette randen: die laatste gaven een schuin,
   hoekig streepje dat niet op één lijn stond met de tekst. */
.punten li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background-color: rgba(33, 77, 13, .10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E6716' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 13px;
}

@media (min-width: 900px) {
  .waarom-punten { padding: 34px 36px; border-radius: 30px; }
  .waarom-punten h3 { font-size: 19px; }
  .punten { margin-top: 18px; gap: 12px; }
  .punten li { font-size: 16.5px; }
}

/* De voet verwijst naar carecycle.nl; het linkje mag niet als blauwe standaardlink opvallen. */

/* De vraag-kop is langer dan de oude kop, dus de tekstkolom krijgt iets meer ruimte en de kop
   gaat een maatje kleiner. Zonder dit valt de kop over vijf regels uiteen. */
@media (min-width: 900px) {
  .hero-vlak { grid-template-columns: 1.22fr 1fr; }
  .hero h1 { font-size: clamp(36px, 3.7vw, 54px); }
}

/* Punt 6: de lead is nu alleen de vraagregel onder de H1. De praktische zin staat bij het
   formulier, waar eerst het label "Meld u aan voor de scan" stond; dat zei hetzelfde. */
.lead-v2 {
  font-size: 18px;
  line-height: 1.3;
  font-weight: 600;
  text-wrap: pretty;
}

/* De praktische zin hoort bij het formulier: kleinere afstand eronder dan erboven. */
.aanmelden-inleiding {
  margin-top: 2px;
  margin-bottom: -20px;
  max-width: 580px;
  font-size: 17px;
  line-height: 1.5;
  /* Balans verdeelt de regels gelijkmatig, zodat "een e-mail." niet alleen op de laatste
     regel achterblijft. Pretty alleen is te zwak voor deze twee zinnen. */
  text-wrap: balance;
}

@media (min-width: 900px) {
  .lead-v2 { font-size: 26px; }
  .aanmelden-inleiding { margin-top: 4px; margin-bottom: -22px; font-size: 18.5px; line-height: 1.55; text-wrap: balance; }
}
/**/
/* Punt 4: de oproep staat vrij onder de twee kaarten, gecentreerd en zonder kader. Zo is het geen
   derde vlak en geen rij, maar een rustpunt dat de sectie afsluit. */
.meldband {
  margin: 44px auto 0;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.meldband h2 {
  font-family: var(--kop);
  font-size: 26px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--accent);
}
.meldband p { max-width: 56ch; font-size: 16.5px; line-height: 1.5; }
/* De primaire knop zet zichzelf op grotere schermen links; hier hoort hij in het midden. */
.meldband .knop { flex: 0 0 auto; align-self: center; margin-top: 6px; }

/* De tweede alinea in de donkere kaart hoort bij de eerste, maar mag niet tegenaan plakken. */
.kaart-groen p + p { margin-top: 14px; }

/* De inleiding boven de punten is een gewone regel, geen kop. */
.punten-inleiding {
  margin-top: 10px;
  font-size: 15.5px;
  line-height: 1.45;
}

@media (min-width: 900px) {
  .meldband { margin-top: 52px; gap: 16px; }
  .meldband h2 { font-size: 30px; }
  .meldband p { font-size: 17px; }
}

/* Meer lucht tussen de staptitel en de tekst eronder; in de basisopmaak staan ze tegen elkaar. */
.stappen-lijst p { margin-top: 9px; }

@media (min-width: 900px) {
  .stappen-lijst p { margin-top: 13px; }
}

/* De voet: drie gelijke kolommen met een kleine regel boven elk logo, zodat de drie merken
   hetzelfde gewicht krijgen. Het CareCycle-logo en het Wooms-logo zijn zelf de link. */
.voet-kolom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.voet-label {
  margin: 0;
  font-size: 13.5px;
  letter-spacing: .01em;
  color: var(--groen-zacht);
}
.voet-merk { display: block; line-height: 0; }
.voet-merk:focus-visible { outline: 2px solid #CBE6B6; outline-offset: 5px; border-radius: 4px; }

/* De logo's staan in hun witte variant direct op het groen: geen witte vlakken meer. */
.afsluit-voet .carecycle-logo,
.afsluit-voet .vws-logo {
  width: auto;
  padding: 0;
  margin-left: 0;
  background: none;
  border-radius: 0;
}
.afsluit-voet .carecycle-logo { height: 52px; }
.afsluit-voet .vws-logo { height: 50px; }
.afsluit-voet .wooms-logo { display: block; height: 30px; width: auto; }

@media (min-width: 760px) {
  .afsluit-voet {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 0;
  }
  .voet-kolom { padding-right: 28px; }
  .voet-kolom + .voet-kolom {
    border-left: 1px solid rgba(224, 238, 217, .18);
    padding-left: 28px;
  }
}
@media (max-width: 759px) {
  .afsluit-voet { display: flex; flex-direction: column; gap: 26px; }
}

.voet-meta {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid rgba(224, 238, 217, .22);
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14.5px;
  color: var(--groen-zacht);
}
.voet-privacy { color: #fff; font-weight: 600; text-decoration: none; }
.voet-privacy:hover { color: var(--groen-zacht); text-decoration: underline; }

/* De lanceringsbadge staat niet meer in de tekstkolom maar boven de hele opening,
   in het midden van de pagina, boven zowel de tekst als de afbeelding. */
.hero-badge-rij {
  display: flex;
  justify-content: center;
  padding: 20px 24px 0;
}
.hero-badge-rij .badge-lancering { margin: 0; }

@media (min-width: 760px) {
  .hero-badge-rij { padding: 34px 24px 0; }
}
@media (min-width: 1100px) {
  .hero-badge-rij { padding: 44px 0 0; }
}

/* De regel onder het formulier is zelf de verwijzing naar de privacyverklaring: geen extra knop of
   extra zin, en met een stippellijn die je ziet als je goed kijkt. */
.noot-link {
  color: inherit;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.noot-link:hover { text-decoration: underline solid; }


/* De bevestiging na het aanmelden. Neemt de plaats van de velden in, zodat zichtbaar is dat er nog
   een mail met een knop onderweg is. Zonder die stap blijft een aanmelding onbevestigd liggen. */
.aanmelden-klaar[hidden] { display: none; }
.aanmelden[hidden] { display: none; }
.aanmelden-klaar {
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  background: #E9F2E1; border: 1px solid #CFE0C2; border-radius: 14px;
  padding: 20px 22px; max-width: 580px; margin-top: 30px;
}
.aanmelden-klaar-teken {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: #fff; border: 1px solid #CFE0C2; margin-bottom: 5px;
}
.aanmelden-klaar-titel { font-weight: 600; color: #10260A; font-size: 17px; margin: 0; }
.aanmelden-klaar-tekst { color: #2A3A2E; font-size: 15.5px; line-height: 1.55; margin: 0; }
.aanmelden-klaar-tekst b { overflow-wrap: anywhere; }
.aanmelden-klaar-klein { color: #5C6660; font-size: 13.5px; line-height: 1.5; margin: 3px 0 0; }
.aanmelden-opnieuw {
  background: none; border: 0; padding: 0; margin-top: 8px; color: #214D0D;
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.aanmelden-opnieuw:hover { text-decoration-thickness: 2px; }