/* Menstruatie App landingpage — kleuren en maten overgenomen van
   researchsurvey.nl/menstruatie-app/ (Beaver Builder, pagina 3350). */

:root {
  --bordeaux: #4F0F21;
  --knop: #910303;
  --knop-rand: #850000;
  --achtergrond: #FDF7FE;
  --blok: #FFFFFF;
  --tekst: #000000;
  --buiten: #F2F2F2;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--buiten);
  color: var(--tekst);
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.45;
}

.pagina {
  max-width: 1100px;
  margin: 0 auto;
  background: var(--achtergrond);
  padding: 40px 40px 20px;
}

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

.taal {
  display: flex;
  justify-content: flex-end;
  margin: -24px 0 12px;
  font-size: 15px;
}
.taal a { color: var(--bordeaux); }

.header { width: 100%; }

h1, h2 {
  color: var(--bordeaux);
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.3;
  text-align: center;
  margin: 40px 0 32px;
  overflow-wrap: break-word;
}

p { margin: 0 0 14px; }

.intro { text-align: center; }

.contact {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 24px;
  align-items: start;
  margin: 40px 0;
}
.contact .foto { width: 150px; justify-self: center; }
.contact .logo { width: 300px; max-width: 100%; margin-top: 4px; }

.knop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: var(--knop);
  border: 1px solid var(--knop-rand);
  border-radius: 4px;
  color: #fff;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 16px;
  text-decoration: none;
  margin: 20px 0 40px;
}
.knop:hover, .knop:focus { background: var(--knop); color: #fff; text-decoration: underline; }
.knop svg { width: 18px; height: 22px; fill: currentColor; flex: none; }

.foto-app { width: 100%; max-width: 728px; margin: 0 auto 20px; }

.blok {
  background: var(--blok);
  margin: 0 -20px;
  padding: 1px 20px 12px;
}

.blok h2 { margin-top: 24px; }

ul, ol { margin: 0 0 14px; padding-left: 40px; }
li::marker { color: #808080; }

h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 50px 0 14px;
}

.cadeau {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 20px;
  align-items: center;
  margin: 30px 0 60px;
}

.voet-logo { width: 300px; max-width: 100%; margin: 10px auto 20px; }

@media (max-width: 768px) {
  .pagina { padding: 24px 16px 12px; }
  .taal { margin: 0 0 12px; }
  h1, h2 { font-size: 26px; }
  .contact { grid-template-columns: 1fr; }
  .cadeau { grid-template-columns: 1fr; justify-items: start; }
  .cadeau img { width: 110px; }
  .blok { margin: 0 -8px; padding: 1px 8px 12px; }
  ul, ol { padding-left: 24px; }
}

a.stil { color: inherit; text-decoration: none; }
.cadeau-tekst { margin-top: 50px; }