/* Voorrangslijst + nieuwsbrief (assets/js/groei.js), petrol-huisstijl.
   Alles onder .amg, met eigen variabelen, zodat het op elke pagina hetzelfde oogt. */
.amg{
  --amg-ink:#13292b; --amg-soft:#4d5f60; --amg-faint:#7d8d8e;
  --amg-line:#e0ecea; --amg-line2:#c3dcd8; --amg-tint:#f0f7f6;
  --amg-main:#0f6b6b; --amg-main-h:#0b5656; --amg-main-soft:#6fb8b2; --amg-deep:#0d2b2c; --amg-on-deep:#c6ebe6;
  --amg-display:'Space Grotesk',Inter,system-ui,sans-serif;
  --amg-body:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-family:var(--amg-body); color:var(--amg-ink); box-sizing:border-box; text-align:left;
}
.amg *,.amg *::before,.amg *::after{box-sizing:border-box}
.amg p{margin:0}
.amg a{color:var(--amg-main)}
.amg-eyebrow{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font:600 12px/1.4 'JetBrains Mono',ui-monospace,monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--amg-main); margin-bottom:14px !important}
.amg-eyebrow b{font-weight:700}
.amg-dots{display:inline-flex; gap:4px}
.amg-dots i{width:7px; height:7px; border-radius:2px; transform:skewX(-18deg)}
.amg-dots i:nth-child(1){background:#e09024}
.amg-dots i:nth-child(2){background:#22a468}
.amg-dots i:nth-child(3){background:#2287ce}
.amg-h2{font:700 clamp(28px,3.4vw,44px)/1.08 var(--amg-display); letter-spacing:-.035em; color:var(--amg-ink); margin:0 0 14px; text-wrap:balance}
.amg-h3{font:700 clamp(21px,2.2vw,27px)/1.15 var(--amg-display); letter-spacing:-.03em; color:var(--amg-ink); margin:0 0 10px; text-wrap:balance}
.amg-lead{font-size:16.5px; line-height:1.6; color:var(--amg-soft); max-width:52ch}
.amg-mini{font-size:12.5px; line-height:1.5; color:var(--amg-faint); margin-top:10px !important}
.amg-hp{position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0}
.amg-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.amg-fout{margin-top:10px !important; padding:9px 12px; border-radius:10px; background:rgba(185,28,28,.08); color:#b91c1c; font-size:14px}

/* Knoppen */
.amg-knop{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 22px; border-radius:999px; border:1px solid var(--amg-main); background:var(--amg-main); color:#fff !important; font:600 15px/1 var(--amg-body); cursor:pointer; text-decoration:none; white-space:nowrap; transition:background .2s, transform .3s cubic-bezier(.22,1,.36,1)}
.amg-knop:hover{background:var(--amg-main-h); transform:translateY(-1px)}
.amg-knop:disabled{opacity:.6; cursor:wait; transform:none}
.amg-knop:focus-visible,.amg input:focus-visible{outline:3px solid var(--amg-main-soft); outline-offset:2px}
.amg-knop-vol{width:100%; margin-top:14px}
.amg-knop-klein{min-height:42px; padding:0 16px; font-size:14px}
.amg-knop-licht{background:#fff; color:var(--amg-ink) !important; border-color:var(--amg-line2)}
.amg-knop-licht:hover{background:var(--amg-tint); border-color:var(--amg-main)}

/* ── Voorrangslijst ── */
.amg-voorrang{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,56px); align-items:start;
  padding:clamp(24px,4vw,48px); border-radius:28px; background:linear-gradient(180deg,var(--amg-tint) 0%,#fff 100%); border:1px solid var(--amg-line)}
.amg-plekken{margin:22px 0 4px; padding:18px 20px; border-radius:18px; background:#fff; border:1px solid var(--amg-line)}
.amg-plek-groot{font-size:15px; color:var(--amg-soft)}
.amg-plek-groot b{display:block; font:700 46px/1 var(--amg-display); letter-spacing:-.04em; color:var(--amg-main); margin-bottom:4px; font-variant-numeric:tabular-nums}
.amg-maanden{display:grid; gap:8px; margin-top:14px}
.amg-maand{display:grid; grid-template-columns:84px 1fr 62px; align-items:center; gap:10px; font-size:13.5px}
.amg-maand-naam{color:var(--amg-ink); font-weight:600; text-transform:capitalize}
.amg-maand-vrij{text-align:right; color:var(--amg-soft); font-variant-numeric:tabular-nums}
.amg-balk{display:block; height:8px; border-radius:99px; background:var(--amg-tint); overflow:hidden}
.amg-balk i{display:block; height:100%; border-radius:99px; background:var(--amg-main)}
.amg-oplijst{margin-top:14px !important; font-size:15px; color:var(--amg-soft)}
.amg-oplijst b{color:var(--amg-ink)}
.amg-voordelen{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:8px}
.amg-voordelen li{position:relative; padding-left:26px; font-size:15px; color:var(--amg-ink)}
.amg-voordelen li::before{content:""; position:absolute; left:0; top:3px; width:16px; height:16px; border-radius:50%; background:var(--amg-main) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.amg-kaart{padding:clamp(20px,3vw,30px); border-radius:22px; background:#fff; border:1px solid var(--amg-line); box-shadow:0 24px 50px -32px rgba(13,43,44,.35)}
.amg-chips{border:0; margin:0 0 14px; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.amg-chips legend{width:100%; font-size:14px; font-weight:600; color:var(--amg-ink); margin-bottom:8px; padding:0}
.amg-chip{position:relative; cursor:pointer}
.amg-chip input{position:absolute; opacity:0; pointer-events:none}
.amg-chip span{display:inline-flex; align-items:center; min-height:40px; padding:0 15px; border-radius:999px; border:1px solid var(--amg-line2); font-size:14px; color:var(--amg-ink); background:#fff; transition:all .2s}
.amg-chip input:checked + span{background:var(--amg-main); border-color:var(--amg-main); color:#fff}
.amg-chip input:focus-visible + span{outline:3px solid var(--amg-main-soft); outline-offset:2px}
.amg-velden{display:grid; grid-template-columns:1fr 1fr; gap:10px 12px}
.amg-velden label,.amg-nb-veld{display:flex; flex-direction:column; gap:5px; font-size:13px; font-weight:600; color:var(--amg-ink)}
.amg input[type=text],.amg input:not([type]),.amg input[type=email],.amg input[type=tel]{width:100%; min-height:48px; padding:0 14px; border-radius:12px; border:1px solid var(--amg-line2); background:#fff; color:var(--amg-ink); font:400 16px var(--amg-body)}
.amg-check{display:flex; gap:10px; align-items:flex-start; margin-top:14px; font-size:14px; line-height:1.45; color:var(--amg-soft); cursor:pointer}
.amg-check input{width:18px; height:18px; margin:2px 0 0; accent-color:var(--amg-main); flex:none}
.amg-klaar:focus{outline:none}
.amg-deel{margin-top:18px; padding:18px; border-radius:16px; background:var(--amg-tint); border:1px solid var(--amg-line2)}
.amg-deel-kop{font-size:16px; color:var(--amg-ink)}
.amg-deel-rij{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap}
.amg-deel-rij .amg-deel-link{flex:1 1 200px; min-height:42px !important; font:500 13.5px 'JetBrains Mono',ui-monospace,monospace !important; color:var(--amg-main) !important}

/* ── Nieuwsbrief (donker petrol, of licht) ── */
.amg-nb{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(18px,3vw,40px); align-items:center; padding:clamp(22px,3.5vw,40px); border-radius:24px; background:var(--amg-deep); color:var(--amg-on-deep)}
.amg-nb .amg-eyebrow{color:var(--amg-main-soft)}
.amg-nb .amg-h3{color:#fff}
.amg-nb .amg-lead{color:var(--amg-on-deep)}
.amg-nb .amg-lead strong{color:#fff}
.amg-nb .amg-mini,.amg-nb .amg-mini a{color:var(--amg-main-soft)}
.amg-nb-form{display:flex; flex-wrap:wrap; gap:10px}
.amg-nb-veld{flex:1 1 220px}
.amg-nb .amg-knop{background:#fff; border-color:#fff; color:var(--amg-deep) !important}
.amg-nb .amg-knop:hover{background:var(--amg-on-deep)}
.amg-nb-form .amg-fout,.amg-nb-form .amg-mini{flex-basis:100%}
.amg-nb-klaar{font-size:15.5px; line-height:1.55; color:#fff}
.amg-nb-klaar:focus{outline:none}
.amg-nb-licht{background:var(--amg-tint); color:var(--amg-ink); border:1px solid var(--amg-line)}
.amg-nb-licht .amg-eyebrow{color:var(--amg-main)}
.amg-nb-licht .amg-h3{color:var(--amg-ink)}
.amg-nb-licht .amg-lead{color:var(--amg-soft)}
.amg-nb-licht .amg-lead strong{color:var(--amg-ink)}
.amg-nb-licht .amg-mini,.amg-nb-licht .amg-mini a{color:var(--amg-faint)}
.amg-nb-licht .amg-knop{background:var(--amg-main); border-color:var(--amg-main); color:#fff !important}
.amg-nb-licht .amg-knop:hover{background:var(--amg-main-h)}
.amg-nb-licht .amg-nb-klaar{color:var(--amg-ink)}

@media (max-width:860px){
  .amg-voorrang,.amg-nb{grid-template-columns:1fr}
  .amg-voorrang{border-radius:22px}
}
@media (max-width:480px){
  .amg-sep{display:none}
  .amg-dagen{flex-basis:100%}
  .amg-velden{grid-template-columns:1fr}
  .amg-maand{grid-template-columns:74px 1fr 54px; font-size:13px}
  .amg-nb-form .amg-knop{width:100%}
}