.grm-co {
  --p:        #103A63;
  --p2:       #1668C7;
  --p-soft:   #EDF2F8;
  --accent:   #1668C7;
  --accent-h: #125AAC;
  --success:  #103A63;
  --canvas:   #F5F7FA;
  --border:   #D7DEE7;
  --text:     #041E42;
  --muted:    #55636E;
}

.grm-co {
  max-width: 1100px; margin: 2rem auto; padding: 0 1.25rem 4rem;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--text);
}
.grm-co__head { text-align: center; margin-bottom: 2rem; }
.grm-co__head h1 {
  margin: 0 0 .35rem;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  font-size: clamp(1.65rem, 3.5vw, 2.25rem);
  color: var(--text);
  letter-spacing: -.01em;
}
.grm-co__head p { margin: 0; color: var(--muted); font-size: 1.05rem; }

.grm-co__periode {
  display: inline-flex;
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  margin: 1rem auto 2rem;
  position: relative;
}
.grm-co__periode-tab {
  background: transparent; border: 0;
  padding: .6rem 1.5rem;
  font-family: inherit; font-weight: 700; font-size: .9rem;
  color: var(--muted); cursor: pointer; border-radius: 999px;
  transition: color .2s;
  position: relative; z-index: 1;
}
.grm-co__periode-tab.is-active { color: #fff; }
.grm-co__periode-pill {
  position: absolute; top: 4px; bottom: 4px; left: 4px;
  background: var(--p);
  border-radius: 999px;
  transition: transform .25s cubic-bezier(.22,1,.36,1), width .25s;
  z-index: 0;
}
.grm-co__periode-saving {
  display: inline-block; margin-left: .35rem;
  background: var(--success); color: #fff;
  padding: .1rem .45rem; border-radius: 999px;
  font-size: .68rem; font-weight: 800;
}

.grm-co__plans {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
  margin-bottom: 3rem;
}
@media (max-width: 880px) { .grm-co__plans { grid-template-columns: 1fr; } }
.grm-co__plan {
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 2rem 1.5rem;
  cursor: pointer;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  position: relative; text-align: left;
  font-family: inherit; color: var(--text);
}
.grm-co__plan:hover { border-color: var(--p); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(4,30,66,.1); }
.grm-co__plan.is-active {
  border-color: var(--accent);
  background: rgba(22,104,199,.04);
  box-shadow: 0 12px 28px rgba(22,104,199,.15);
}
.grm-co__plan-rec {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff;
  padding: .25rem .75rem; border-radius: 999px;
  font-size: .68rem; font-weight: 800; letter-spacing: .02em;
}
.grm-co__plan h3 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700; font-size: 1.4rem;
  margin: 0 0 .25rem;
}
.grm-co__plan-sub { color: var(--muted); font-size: .85rem; margin: 0 0 1rem; }
.grm-co__plan-price {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800; font-size: 2.5rem;
  color: var(--p); margin: .5rem 0 .25rem;
  display: flex; align-items: baseline; gap: .25rem;
}
.grm-co__plan-price small { font-size: 1rem; color: var(--muted); font-weight: 500; }
.grm-co__plan-per { color: var(--muted); font-size: .85rem; margin: 0 0 1.25rem; }
.grm-co__plan ul {
  list-style: none; padding: 0; margin: 0;
  font-size: .9rem;
}
.grm-co__plan ul li {
  padding: .35rem 0; display: flex; gap: .45rem; align-items: flex-start;
}
.grm-co__plan ul li .material-symbols-rounded {
  color: var(--success); font-size: 1.1rem; flex-shrink: 0; margin-top: .1rem;
}

.grm-co__body {
  display: grid; grid-template-columns: 1fr 360px; gap: 2rem;
  align-items: start;
}
@media (max-width: 880px) {
  .grm-co__body { grid-template-columns: 1fr; }
  .grm-co__summary { position: static !important; }
  .grm-co__form { position: static !important; }
}

/* Het formulier is korter dan de samenvatting ernaast. Zonder meelopen sta je
   bij het afrekenen naar een leeg vlak te kijken terwijl de knop waar het om
   gaat boven je scherm hangt. Nu loopt hij mee tot de onderkanten gelijk
   liggen en stopt hij daar.
 *
 * align-self:start is hier geen opmaakvoorkeur maar een voorwaarde: een
 * rasterkolom rekt standaard over de hele rijhoogte, en een element dat al zo
 * hoog is als zijn ruimte heeft niets om in te schuiven. Zonder deze regel
 * doet position:sticky niets.
 *
 * En het thema zet overflow:hidden op de body, wat sticky voor alles daarin
 * uitschakelt. Op dit scherm staat de sitekop toch al uit (grm-kaal), dus daar
 * kan die instelling zonder gevolgen terug naar normaal. */
body.grm-afrekenpagina,
body.grm-afrekenpagina html { overflow: visible; }
@media (min-width: 881px) {
  .grm-co__form { position: sticky; top: 24px; align-self: start; }
}

.grm-co__form {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 16px rgba(4,30,66,.05);
}
.grm-co__form h2 {
  margin: 0 0 1rem;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700; font-size: 1.25rem;
  color: var(--text);
}
.grm-co__form h2:not(:first-child) {
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.grm-co__form .grm-co__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 560px) { .grm-co__form .grm-co__row { grid-template-columns: 1fr; } }
.grm-co__form label {
  display: block; font-weight: 600; font-size: .9rem;
  color: var(--text); margin-bottom: .35rem;
}
.grm-co__form label .req { color: var(--gm-danger,var(--grm-danger,#dc2626)); }
.grm-co__form input, .grm-co__form select {
  width: 100%; padding: .75rem 1rem;
  border: 1.5px solid var(--border); border-radius: 10px;
  font-family: inherit; font-size: 1rem;
  background: #fff; color: var(--text); box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.grm-co__form input:focus, .grm-co__form select:focus {
  outline: 0; border-color: var(--p);
  box-shadow: 0 0 0 4px rgba(22,104,199,.12);
}
.grm-co__field { margin-bottom: 1rem; }
.grm-co__form .grm-co__hint {
  font-size: .75rem; color: var(--muted); margin-top: .25rem;
}

.grm-co__terms {
  display: flex; align-items: flex-start; gap: .55rem;
  padding: 1rem; background: var(--canvas);
  border-radius: 10px; margin: 1.5rem 0;
  font-size: .85rem; color: var(--text);
}
.grm-co__terms input { width: auto; margin-top: .15rem; flex-shrink: 0; }
.grm-co__terms a { color: var(--p); text-decoration: underline; }

.grm-co__summary {
  position: sticky; top: 100px;
  background: linear-gradient(135deg, var(--p) 0%, var(--p2) 100%);
  color: #fff; border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 12px 32px rgba(16,58,99,.25);
}
.grm-co__summary h3 {
  margin: 0 0 1rem;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700; font-size: 1.15rem;
  color: #fff; opacity: .92;
}

.grm-co__features {
  list-style: none; padding: 0;
  margin: 0 0 1.25rem;
  display: grid; gap: .4rem;
  font-size: .85rem; color: rgba(255,255,255,.92);
}
.grm-co__features li {
  display: flex; align-items: flex-start; gap: .4rem;
}
.grm-co__features li .material-symbols-rounded {
  color: #103A63; font-size: 1rem; flex-shrink: 0; margin-top: .1rem;
  background: rgba(255,255,255,.95); border-radius: 50%;
}

.grm-co--single .grm-co__head { margin-bottom: 2.5rem; }
.grm-co--single .grm-co__head p {
  font-size: 1.15rem;
  color: var(--text);
  font-weight: 600;
}

.grm-co__login-banner {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: 1rem 1.25rem;
  background: var(--p-soft);
  border: 1px solid rgba(22,104,199,.25);
  border-radius: 10px;
  margin: 0 0 1.5rem;
  font-size: .92rem;
  color: var(--text);
}
.grm-co__login-banner .material-symbols-rounded {
  color: var(--p);
  font-size: 1.35rem;
  flex-shrink: 0;
  margin-top: .1rem;
}
.grm-co__login-banner a {
  color: var(--p);
  font-weight: 700;
  text-decoration: underline;
}
.grm-co__login-banner--ok {
  background: rgba(16,58,99,.08);
  border-color: rgba(16,58,99,.3);
}
.grm-co__login-banner--ok .material-symbols-rounded { color: var(--success); }
.grm-co__sum-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .65rem 0;
  border-bottom: 1px solid rgba(255,255,255,.15);
  font-size: .92rem;
}
.grm-co__sum-row:last-of-type { border-bottom: 0; }
.grm-co__sum-row.is-total {
  font-size: 1.05rem; font-weight: 700;
  margin-top: .5rem; padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.25);
  border-bottom: 0;
}
.grm-co__sum-row .price {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
}
.grm-co__sum-row.is-total .price { font-size: 1.5rem; }
.grm-co__sum-vat { font-size: .75rem; color: rgba(255,255,255,.7); }

.grm-co__submit {
  width: 100%;
  background: var(--accent); color: #fff;
  border: 0; padding: 1rem 1.25rem; border-radius: 12px;
  cursor: pointer; font-family: inherit; font-weight: 700; font-size: 1rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  box-shadow: 0 6px 16px rgba(22,104,199,.4);
  transition: background .15s, transform .15s;
  margin-top: 1.5rem;
}
.grm-co__submit:hover { background: var(--accent-h); transform: translateY(-2px); }
.grm-co__submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.grm-co__pay-methods {
  display: flex; flex-wrap: nowrap; gap: .34rem;
  justify-content: center; align-items: stretch;
  margin-top: 1.5rem;
}
.grm-co__pay-methods .pay-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: .22rem;
  flex: 0 1 auto; min-width: 0;
  background: rgba(255,255,255,.12);
  padding: .35rem .58rem; border-radius: 999px;
  font-size: .7rem; font-weight: 700;
  color: #fff; white-space: nowrap;
}
.grm-co__pay-methods .material-symbols-rounded { font-size: .9rem; flex: 0 0 auto; }

@media (max-width: 420px) {
  .grm-co__pay-methods { gap: .26rem; }
  .grm-co__pay-methods .pay-pill { padding: .32rem .46rem; font-size: .655rem; }
  .grm-co__pay-methods .material-symbols-rounded { display: none; }
}

.grm-co__trust {
  margin-top: 1.5rem; text-align: center;
  font-size: .78rem; color: rgba(255,255,255,.85);
  display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center;
}
.grm-co__trust span { display: inline-flex; align-items: center; gap: .25rem; }
.grm-co__trust .material-symbols-rounded { font-size: .9rem; }

.grm-co-success {
  max-width: 640px; margin: 4rem auto; padding: 3rem 2rem; text-align: center;
  background: #fff; border-radius: 16px;
  box-shadow: 0 12px 32px rgba(4,30,66,.08);
  font-family: 'Inter', sans-serif;
}
.grm-co-success__ic {
  width: 96px; height: 96px; margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: var(--grm-rij-merk);
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 10px 28px rgba(16,58,99,.35);
}
.grm-co-success__ic .material-symbols-rounded { font-size: 2.75rem; color: #fff; }
.grm-co-success h1 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800; font-size: 1.85rem; margin: 0 0 .5rem;
  color: #041E42;
}
.grm-co-success p { color: #55636E; font-size: 1rem; margin: .5rem 0; }
.grm-co-success .cta-row { display: flex; gap: .75rem; justify-content: center; margin-top: 1.5rem; flex-wrap: wrap; }
.grm-co-success .cta-row a {
  background: #103A63; color: #fff;
  padding: .75rem 1.5rem; border-radius: 10px;
  text-decoration: none; font-weight: 700; font-size: .95rem;
  display: inline-flex; align-items: center; gap: .35rem;
}
.grm-co-success .cta-row a.ghost {
  background: transparent; color: #103A63;
  border: 1.5px solid #103A63;
}

.grm-co__warn {
  background: rgba(242,179,60,.12);
  border: 1px solid rgba(242,179,60,.4);
  color: var(--grm-warn-text,#B06000);
  padding: 1rem 1.25rem; border-radius: 10px;
  margin: 1rem 0; font-size: .9rem;
  display: flex; align-items: flex-start; gap: .55rem;
}
.grm-co__warn .material-symbols-rounded { color: var(--grm-warn,#f59e0b); font-size: 1.2rem; flex-shrink: 0; margin-top: .1rem; }

.grm-co :focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
  border-radius: 4px;
}
.grm-co__form :focus-visible {
  outline: 3px solid var(--p);
}
@media (prefers-reduced-motion: reduce) {
  .grm-co__plan, .grm-co__submit, .grm-co__periode-pill {
    transition: none !important;
  }
}

.grm-co__sectie { border-top: 1px solid var(--border); padding-top: 1.15rem; margin-top: 1.15rem; }
.grm-co__sectie:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }

.grm-co__sum {
  display: flex; align-items: center; gap: .7rem;
  list-style: none; cursor: pointer;
  padding: .55rem .7rem; margin: -.55rem -.7rem .35rem;
  border-radius: 10px;
  transition: background .14s;
}
.grm-co__sum::-webkit-details-marker { display: none; }
.grm-co__sum:hover { background: rgba(16,58,99,.05); }
.grm-co__sum-vink { font-size: 1.35rem; color: var(--grm-line,#d7dee7); flex: 0 0 auto; }
.grm-co__sectie.is-klaar .grm-co__sum-vink { color: var(--grm-success,#103A63); }
.grm-co__sum-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.grm-co__sum-txt strong {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700; font-size: 1.12rem; color: var(--text); line-height: 1.25;
}
.grm-co__sum-txt small {
  font-size: .78rem; color: var(--muted, #55636E); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.grm-co__sectie.is-klaar .grm-co__sum-txt small { color: var(--grm-success,#103A63); font-weight: 600; }
.grm-co__sum-pijl { font-size: 1.3rem; color: var(--grm-ink-400,#7A8794); flex: 0 0 auto; transition: transform .18s; }
.grm-co__sectie[open] .grm-co__sum-pijl { transform: rotate(180deg); }
.grm-co__sectie[open] .grm-co__sum { margin-bottom: 1rem; }

@media (max-width: 480px) {
  .grm-co__sum-txt strong { font-size: 1.02rem; }
  .grm-co__sum { gap: .55rem; }
}

.grm-co__later{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;padding:12px 16px;border:1.5px solid var(--grm-line,#D7DEE7);border-radius:var(--grm-r-md,12px);background:#fff;font-size:14.5px;font-weight:700;color:var(--grm-brand,#103A63);text-decoration:none;transition:border-color .15s ease,background .15s ease}
.grm-co__later:hover{border-color:var(--grm-accent,#1668C7);background:var(--grm-canvas,var(--grm-canvas,#f5f7fa));color:var(--grm-accent,#1668C7)}
.grm-co__later .material-symbols-rounded{font-size:18px}
.grm-co__later-uitleg{margin:8px 0 0;font-size:13px;line-height:1.55;color:var(--grm-ink-500,#55636E);text-align:center}