/*
  De pagina staat in de inhoudsbak van het thema, en die heeft een maximale
  breedte met padding eromheen. De gekleurde banden liepen daardoor niet door
  tot de rand: links en rechts bleef de achtergrond van de site zichtbaar.

  Uitbreken doe je door de eigen breedte los te laten en de marges naar de
  schermranden te trekken. Elke band regelt zijn binnenruimte daarna zelf, dus
  de tekst blijft binnen dezelfde leesbreedte staan als eerst.

  De verborgen horizontale overloop hoort erbij: de schermbreedte in vw telt de
  schuifbalk mee, en zonder deze regel levert dat op een laptop een balk van
  een paar pixels op.
*/
.grm-biz{font-family:var(--grm-font-body,"Inter",Inter,sans-serif);color:var(--grm-ink,#041E42);background:var(--grm-canvas,#F5F7FA);
  width:auto;max-width:none;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-left:0;padding-right:0}
body:has(.grm-biz){overflow-x:hidden}
.grm-biz h1,.grm-biz h2,.grm-biz h3,.grm-biz h4{font-family:var(--grm-font-display,"Inter Tight",sans-serif);font-weight:800;letter-spacing:-.01em;color:var(--grm-ink,#041E42);margin:0 0 .5rem}

.grm-biz__sec-head{text-align:center;max-width:720px;margin:0 auto 40px;padding:0 20px}
.grm-biz__sec-head h2{font-size:clamp(28px,3.6vw,42px);line-height:1.05;margin:0 0 12px}
.grm-biz__sec-head p{margin:0;color:var(--grm-ink-500,#55636E);font-size:16px;line-height:1.6}
.grm-biz__eyebrow{display:inline-block;color:var(--grm-accent,#1668C7);font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px}
.grm-biz__h-acc{color:var(--grm-accent,#1668C7)}

.grm-biz__hero{position:relative;padding:64px 24px 80px;overflow:hidden;background:var(--grm-rij-licht)}
.grm-biz__hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(60rem 30rem at 100% 0%, rgba(22,104,199,.10), transparent 60%),
  radial-gradient(40rem 25rem at 0% 100%, rgba(22,104,199,.10), transparent 65%);
}
.grm-biz__hero-in{position:relative;max-width:var(--grm-w,1424px);margin:0 auto;display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}

.grm-biz__h1{font-size:clamp(36px,5vw,56px);line-height:1.05;margin:0 0 18px;letter-spacing:-.02em}
.grm-biz__h1-acc{color:var(--grm-accent,#1668C7)}
.grm-biz__sub{font-size:17px;line-height:1.6;color:var(--grm-ink-500,#55636E);margin:0 0 28px;max-width:580px}
.grm-biz__sub strong{color:var(--grm-ink,#041E42);font-weight:800}

.grm-biz__hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px}
.grm-biz__hero-ctas .gm-btn{font-size:15px !important;padding:14px 22px !important;height:auto !important;line-height:1 !important}


.grm-biz__mock{background:#fff;border:1px solid var(--grm-line,#D7DEE7);border-radius:18px;box-shadow:0 24px 60px rgba(4,30,66,.16);overflow:hidden;max-width:420px;margin-left:auto;transform:rotate(-1.5deg);transition:transform .4s cubic-bezier(.22,1,.36,1)}
.grm-biz__mock:hover{transform:rotate(0deg)}
.grm-biz__mock-bar{background:#fff;border-bottom:1px solid var(--grm-line,#D7DEE7);padding:9px 14px;display:flex;gap:6px}
.grm-biz__mock-bar span{width:11px;height:11px;border-radius:50%;background:var(--grm-line,#D7DEE7)}
.grm-biz__mock-content{padding:26px}
.grm-biz__mock-letter{width:66px;height:66px;border-radius:14px;background:linear-gradient(135deg,var(--grm-warn,#f59e0b),#041E42);color:#fff;font-family:"Inter Tight",sans-serif;font-weight:800;font-size:32px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.grm-biz__mock-content h3{font-size:20px;margin:0 0 4px;color:var(--grm-ink,#041E42)}
.grm-biz__mock-meta{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--grm-ink-500,#55636E);margin:0 0 14px}
.grm-biz__mock-meta .material-symbols-rounded{font-size:14px;color:var(--grm-brand,#103A63)}
.grm-biz__mock-chips{display:flex;gap:6px;margin-bottom:18px}
.grm-biz__mock-chip{background:var(--grm-brand-50,#EDF2F8);color:var(--grm-brand,#103A63);padding:3px 10px;border-radius:99px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.grm-biz__mock-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:14px 0;border-top:1px solid var(--grm-line,#D7DEE7);border-bottom:1px solid var(--grm-line,#D7DEE7);margin-bottom:14px}
.grm-biz__mock-stats > div{text-align:center}
.grm-biz__mock-stats strong{display:block;font-family:"Inter Tight",sans-serif;font-size:22px;font-weight:800;color:var(--grm-ink,#041E42)}
.grm-biz__mock-stats span{font-size:11px;color:var(--grm-ink-500,#55636E);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.grm-biz__mock-cta{background:rgba(16,58,99,.12);color:var(--grm-success,#103A63);padding:10px 14px;border-radius:10px;font-size:13px;font-weight:700;display:flex;align-items:center;gap:6px}
.grm-biz__mock-cta .material-symbols-rounded{font-size:16px}

@media(max-width:920px){
  .grm-biz__hero-in{grid-template-columns:1fr;gap:40px}
  .grm-biz__mock{margin:0 auto;transform:none}
}

/* Geen randen boven en onder. De golf hierboven wordt in dezelfde witte
   kleur getekend als deze band, juist zodat de twee vlakken in elkaar
   overlopen; een streep er dwars doorheen haalt dat weg en leest als het
   einde van de pagina. Het witte vlak blijft wel staan: dat is de kleur
   waar die golf op uitkomt. */
.grm-biz__stats{padding:32px 24px;background:#fff}
.grm-biz__stats-in{max-width:var(--grm-w,1424px);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.grm-biz__stat{text-align:center}
.grm-biz__stat strong{display:block;font-family:"Inter Tight",sans-serif;font-size:clamp(28px,3.6vw,40px);font-weight:800;color:var(--grm-brand,#103A63);letter-spacing:-.02em;line-height:1}
.grm-biz__stat span{font-size:13px;color:var(--grm-ink-500,#55636E);font-weight:600;margin-top:6px;display:block}
@media(max-width:680px){.grm-biz__stats-in{grid-template-columns:repeat(2,1fr);gap:24px}}

.grm-biz__usps{padding:80px 24px;max-width:var(--grm-w,1424px);margin:0 auto}
.grm-biz__usp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grm-biz__usp{background:#fff;border:1px solid var(--grm-line,#D7DEE7);border-radius:16px;padding:28px;box-shadow:0 2px 6px rgba(4,30,66,.04);transition:transform .15s,box-shadow .15s,border-color .15s}
.grm-biz__usp:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(4,30,66,.12);border-color:transparent}
.grm-biz__usp-ic{width:52px;height:52px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:16px}
.grm-biz__usp-ic--brand{background:var(--grm-brand-50,#EDF2F8);color:var(--grm-brand,#103A63)}
.grm-biz__usp-ic--accent{background:rgba(22,104,199,.12);color:var(--grm-accent,#1668C7)}
.grm-biz__usp-ic--success{background:rgba(16,58,99,.12);color:var(--grm-success,#103A63)}
.grm-biz__usp-ic .material-symbols-rounded{font-size:24px}
/*
  Het figuur staat op de plek van het oude pictogram, maar hij mag groter zijn:
  een lijntekening van tweeenvijftig pixels leest als een pictogram en dan had
  je er net zo goed een kunnen laten staan. Het zachte vlak eronder geeft hem
  lucht zonder een kader te worden.
*/
.grm-biz__usp-fig{display:flex;align-items:center;justify-content:flex-start;margin:0 0 14px}
.grm-biz__usp-fig .grm-fig{max-width:104px}
.grm-biz__usp:hover .grm-fig__accent{fill:var(--grm-brand,#103A63)}
.grm-biz__usp:hover .grm-fig__accent-lijn{stroke:var(--grm-brand,#103A63)}
.grm-biz__usp h3{font-size:18px;margin:0 0 8px}
.grm-biz__usp p{margin:0;color:var(--grm-ink-500,#55636E);font-size:14.5px;line-height:1.55}
@media(max-width:960px){.grm-biz__usp-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grm-biz__usp-grid{grid-template-columns:1fr}}

.grm-biz__pricing{padding:80px 24px;max-width:var(--grm-w,1424px);margin:0 auto}
.grm-biz__tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
@media(max-width:920px){.grm-biz__tier-grid{grid-template-columns:1fr;max-width:480px;margin:0 auto}}

.grm-biz__tier{position:relative;background:#fff;border:1px solid var(--grm-line,#D7DEE7);border-radius:18px;padding:32px 26px 28px;box-shadow:0 4px 14px rgba(4,30,66,.06);transition:transform .18s,box-shadow .18s,border-color .18s;display:flex;flex-direction:column}
.grm-biz__tier:hover{transform:translateY(-4px);box-shadow:0 20px 50px rgba(4,30,66,.14)}

.grm-biz__tier--featured{background:linear-gradient(180deg,#fff 0%,var(--grm-brand-50,#EDF2F8) 100%);border:2px solid var(--grm-brand,#103A63);transform:scale(1.02);box-shadow:0 16px 40px rgba(16,58,99,.18)}
.grm-biz__tier--featured:hover{transform:scale(1.02) translateY(-3px)}

.grm-biz__tier--gold{background:linear-gradient(180deg,#fff 0%,var(--grm-warn-50,#FEF7E0) 100%)}

.grm-biz__tier-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--grm-brand,#103A63);color:#fff;padding:6px 14px;border-radius:99px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;display:inline-flex;align-items:center;gap:5px;box-shadow:0 4px 12px rgba(22,104,199,.35);white-space:nowrap}
.grm-biz__tier-badge .material-symbols-rounded{font-size:13px}

.grm-biz__tier-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px}
.grm-biz__tier-name{font-family:"Inter Tight",sans-serif;font-size:22px;font-weight:800;color:var(--grm-ink,#041E42)}
.grm-biz__tier-tag{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--grm-ink-500,#55636E);background:#fff;padding:4px 10px;border-radius:99px}
.grm-biz__tier--featured .grm-biz__tier-tag{color:var(--grm-brand,#103A63);background:#fff}
.grm-biz__tier--gold .grm-biz__tier-tag{color:var(--grm-warn-text,#B06000);background:var(--grm-warn-50,#FEF7E0)}

.grm-biz__tier-price{margin-bottom:8px}
.grm-biz__tier-price strong{font-family:"Inter Tight",sans-serif;font-size:42px;font-weight:800;color:var(--grm-ink,#041E42);letter-spacing:-.02em;line-height:1}
.grm-biz__tier-price span{font-size:13px;color:var(--grm-ink-500,#55636E);margin-left:6px}
.grm-biz__tier-sub{margin:0 0 22px;color:var(--grm-ink-500,#55636E);font-size:14px;line-height:1.5}

.grm-biz__tier-list{list-style:none;padding:0;margin:0 0 26px;display:flex;flex-direction:column;gap:9px;flex:1}
.grm-biz__tier-list li{display:flex;align-items:flex-start;gap:8px;font-size:14px;color:var(--grm-ink,#041E42);line-height:1.45}
.grm-biz__tier-list li .material-symbols-rounded{flex-shrink:0;font-size:18px;color:var(--grm-success,#103A63);margin-top:1px}
.grm-biz__tier-list li strong{font-weight:800}
.grm-biz__tier-off{color:var(--grm-ink-300,#A8B4BC) !important}
.grm-biz__tier-off .material-symbols-rounded{color:var(--grm-ink-300,#A8B4BC) !important}

.grm-biz__tier-btn{width:100%;justify-content:center}

.grm-biz__pricing-foot{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:36px;text-align:center;font-size:13px;color:var(--grm-ink-500,#55636E)}
.grm-biz__pricing-foot .material-symbols-rounded{font-size:16px;color:var(--grm-brand,#103A63)}


.grm-biz__faq{padding:80px 24px;max-width:880px;margin:0 auto}
.grm-biz__faq-list{display:flex;flex-direction:column;gap:10px}
.grm-biz__faq-item{background:#fff;border:1px solid var(--grm-line,#D7DEE7);border-radius:12px;padding:0 20px;overflow:hidden;transition:border-color .14s,box-shadow .14s}
.grm-biz__faq-item:hover{border-color:var(--grm-brand,#103A63)}
.grm-biz__faq-item[open]{box-shadow:0 6px 18px rgba(4,30,66,.06);border-color:var(--grm-brand,#103A63)}
.grm-biz__faq-item summary{padding:18px 0;cursor:pointer;font-family:"Inter Tight",sans-serif;font-weight:800;font-size:16px;color:var(--grm-ink,#041E42);list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px}
.grm-biz__faq-item summary::-webkit-details-marker{display:none}
.grm-biz__faq-item summary::after{content:"+";font-size:24px;color:var(--grm-brand,#103A63);font-weight:400;transition:transform .25s}
.grm-biz__faq-item[open] summary::after{content:"−"}
.grm-biz__faq-item p{margin:0 0 18px;color:var(--grm-ink-500,#55636E);font-size:14.5px;line-height:1.6}

.grm-biz__final{padding:80px 24px}
.grm-biz__final-in{max-width:920px;margin:0 auto;background:var(--grm-rij-merk);color:#fff;border-radius:24px;padding:56px 36px;text-align:center;box-shadow:0 24px 60px rgba(4,30,66,.22);position:relative;overflow:hidden}
.grm-biz__final-in::after{content:"";position:absolute;right:-80px;top:-80px;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.06);pointer-events:none}
.grm-biz__final-in::before{content:"";position:absolute;left:-60px;bottom:-100px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.04);pointer-events:none}
.grm-biz__final-in h2{color:#fff;font-size:clamp(26px,3.2vw,36px);margin:0 0 12px;position:relative}
.grm-biz__final-in p{color:rgba(255,255,255,.92);margin:0 0 26px;font-size:17px;line-height:1.55;position:relative}
.grm-biz__final-in .gm-btn{position:relative;font-size:16px !important;padding:14px 26px !important}
.grm-biz__final-foot{margin-top:20px !important;font-size:13.5px !important;color:rgba(255,255,255,.85) !important}
.grm-biz__final-foot a{color:#fff;text-decoration:underline;font-weight:700}
.grm-biz__final-foot a:hover{color:var(--grm-accent,#1668C7)}

@media(max-width:680px){
  .grm-biz__hero{padding:40px 18px 50px}
  .grm-biz__usps,.grm-biz__pricing,.grm-biz__faq,.grm-biz__final{padding:50px 18px}
  .grm-biz__tier{padding:26px 22px 24px}
}

/*
  De lijnfiguren uit GRMF_Figuren.

  Twee lagen per tekening: een zacht vlak dat het silhouet aangeeft en daar
  overheen de lijnen. Dat zachte vlak is wat een lijntekening van een
  technische schets in een plaatje verandert.

  Alle kleuren komen uit de omgeving: de lijn erft currentColor, het vlak is
  dezelfde kleur op tien procent. Zet je een figuur op een donker blok, dan
  kleurt hij mee zonder een tweede set regels.
*/
.grm-fig{display:block;width:100%;max-width:120px;height:auto;color:var(--grm-brand,#103A63)}
.grm-fig__vlak{fill:currentColor;opacity:.10}
.grm-fig__lijn{stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;fill:none}
.grm-fig__accent{fill:var(--grm-accent,#1668C7)}
.grm-fig__accent-lijn{stroke:var(--grm-accent,#1668C7);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;fill:none}
/* Het glas van het vergrootglas. Het moet dekkend zijn: zonder eigen vlak
   lopen de lijnen van de kaartjes er dwars doorheen en is het geen glas maar
   een cirkel over een tekening. De steel is dikker dan een gewone lijn, want
   een steel van tweeenhalve pixel leest als een streepje. */
.grm-fig__glas{fill:#fff;opacity:.92}
.grm-fig__ring{stroke-width:3.4}
.grm-fig__steel{stroke:var(--grm-accent,#1668C7);stroke-width:7;stroke-linecap:round;fill:none}
.grm-fig--op-donker .grm-fig__glas{fill:var(--grm-brand,#103A63);opacity:.85}
.grm-fig--op-donker .grm-fig__steel{stroke:#fff}
.grm-fig__stippel{stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1 7;opacity:.55;fill:none}
.grm-fig__vink{stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;fill:none}
.grm-fig__vink-groot{stroke:var(--grm-accent,#1668C7);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;fill:none}

/* Op een donker vlak draait alles om: de lijn wordt wit en het accent moet
   licht genoeg blijven om er nog uit te springen. */
.grm-fig--op-donker{color:#fff}
.grm-fig--op-donker .grm-fig__accent{fill:#fff}
.grm-fig--op-donker .grm-fig__accent-lijn{stroke:#fff}
.grm-fig--op-donker .grm-fig__vink{stroke:var(--grm-brand,#103A63)}
.grm-fig--op-donker .grm-fig__vink-groot{stroke:#fff}
.grm-fig--op-donker .grm-fig__vlak{opacity:.22}

/*
  De golf tussen twee banden, en het donkere tussenblok.

  Een lange pagina valt uiteen in gekleurde banden. Een rechte streep tussen
  twee vlakken leest als het einde van de pagina; een golf leest als doorlopen.
  Hij staat los van de band eronder en rekt mee in de breedte, dus hij past op
  elk scherm zonder een tweede tekening.
*/
.grm-golf{display:block;width:100%;line-height:0;margin:0;overflow:hidden}
.grm-golf svg{display:block;width:100%;height:clamp(40px,5vw,90px)}
.grm-golf--om{transform:rotate(180deg)}


/*
  Zigzag: beeld en tekst wisselen om en om van kant. Dat is wat een rij
  gelijkvormige blokken in een verhaal verandert; drie keer dezelfde volgorde
  leest als een tabel.
*/
.grm-zigzag{max-width:var(--grm-w,1424px);margin:0 auto;padding:56px 24px 8px;display:flex;flex-direction:column;gap:34px}
.grm-zigzag__rij{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:34px;align-items:center}
.grm-zigzag__rij:nth-child(even){direction:rtl}
.grm-zigzag__rij:nth-child(even) > *{direction:ltr}
.grm-zigzag__beeld{display:flex;align-items:center;justify-content:center;padding:26px;border-radius:20px;background:var(--grm-brand-50,#EDF2F8)}
.grm-zigzag__beeld .grm-fig{max-width:190px}
.grm-zigzag__tekst h3{margin:0 0 10px;font-family:var(--grm-font-display,"Inter Tight",sans-serif);font-size:clamp(19px,2.4vw,25px);font-weight:800;letter-spacing:-.015em;color:var(--grm-ink,#041E42)}
.grm-zigzag__tekst p{margin:0 0 10px;font-size:15.5px;line-height:1.75;color:var(--grm-ink-700,#33424F)}
.grm-zigzag__tekst p:last-child{margin-bottom:0}
.grm-zigzag__merk{display:inline-block;margin-bottom:8px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--grm-accent,#1668C7)}
@media(max-width:820px){
  .grm-zigzag{padding:38px 18px 4px;gap:26px}
  .grm-zigzag__rij,.grm-zigzag__rij:nth-child(even){grid-template-columns:minmax(0,1fr);direction:ltr}
  .grm-zigzag__beeld{padding:18px}
  .grm-zigzag__beeld .grm-fig{max-width:150px}
}