@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(/fonts/poppins-regular.woff2) format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/fonts/poppins-bold.woff2) format('woff2');
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", Sans-serif;
}

html,
body {
    width: 100%;
    height: 100%;
    color: #333244;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.8em;
}

/* Eigen naam, niet `.container`: die klasse hoort bij de site-brede stylesheet en
   is daar een gecentreerde kolom van 1200px met een bovenmarge. Deze pagina wil
   juist volle breedte met een eigen achtergrond. Toen deze app als enige zijn eigen
   sheet laadde viel dat niet op. */
.qacd-page {
    min-height: 100%;
    padding: 48px 16px;
    background-color: #f0f0f0;
}

h1 {
    margin-bottom: 32px;
}

h2 {
    margin-bottom: 16px;
    color: #000;
    font-family: Poppins;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
}

/* Gescoped op `.qacd-page > header`. Kaal `header` raakte óók de gedeelde
   site-header, en omdat .site-header zelf geen max-width of margin zet, kregen die
   700px en `margin: 0 auto` — dus een platgedrukte balk. */
.qacd-page > header {
    /* Was `width: 700px`. Dit bestand had geen enkele media query, dus op een
       telefoon stond er een vaste kolom van 700px en scrollde de hele pagina
       horizontaal. Dat is een probleem omdat dit de pagina is die als link naar
       klanten gaat, en instructie 2 luidt "gebruik incognito" — wat mensen ook op
       hun telefoon doen. WCAG 1.4.10. */
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    margin-bottom: 32px;
}

.block {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    margin-bottom: 32px;
    padding: 32px;
    border-radius: 8px;
    background-color: white;
    position: relative;
}

.block img {
    margin-top: 15px;
}

.block hr {
    border: none;
    border-top: 1px dashed #f0f0f0;
    margin-bottom: 32px;
}

.description {
    display: block;
    margin: 16px 0;
}

.button {
    display: inline-flex;
    color: white;
    background: #0B5504;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6em;
    letter-spacing: 0px;
    padding: 12px 27px;
    border-radius: 112px;
    text-decoration: none;
    position: relative;
    border: none;
    cursor: pointer;
}

.button:disabled {
    opacity: 0.2;
    cursor: default;
}

.button > svg {
    margin-left: 16px;
}

.arrow {
    display: block;
    width: auto;
    height: 400px;
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translate(-100%, -50%);
}

.browser-image {
    display: block;
    width: 100%;
}

.url {
    display: block;
    white-space: nowrap;
    width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.form-field:not(:last-of-type) {
    margin-bottom: 32px;
}

.form-field label {
    display: block;
    margin-bottom: 16px;
    font-weight: bold;
}

.form-field select {
    padding: 16px;
    border-radius: 5px;
    border: 1px solid #e5e5e5;
}

.form-field input {
    width: 100%;
    padding: 16px;
    border-radius: 5px;
    border: 1px solid #e5e5e5;
}

.form-field textarea {
    width: 100%;
}

footer img {
    display: block;
    margin: 0 auto;
}
@media (max-width: 900px) {
    /* De pijl hangt met transform: translate(-100%) volledig links buiten het
       blok — 259px breed, dus die veroorzaakte zelf overflow. Het is decoratie. */
    .arrow {
        display: none;
    }
}

/* Terug-link boven de inhoud, zelfde vorm als de breadcrumb op de
   changelog-pagina van de widget. */
.qacd-back {
    width: 100%;
    max-width: 700px;
    margin: 0 auto 20px;
    font-size: 0.85rem;
}

.qacd-back a {
    /* #5b6874 haalt 5,16:1 op de #f0f0f0 van deze container; #6a7682 zou 4,3
       halen en dat is te weinig voor deze tekstgrootte. */
    color: #5b6874;
    text-decoration: none;
}

.qacd-back a:hover,
.qacd-back a:focus-visible {
    color: #0b5504;
    text-decoration: underline;
}