/* Automatisering: navy hero met drie meldingen (de film: toasts) → wit ("Voorbeelden": vier kaarten)
   → licht (prijs, sluit vlak aan) → blauwe CTA. De glimlach is hier de koppeling tussen twee systemen. */

/* ---- hero: vaag glaspaneel met drie meldingen erin, rustig om en om ---- */
.pagina-automatisering .auto-scene{position:relative;display:grid;}
.pagina-automatisering .auto-scene > *{grid-area:1/1;}
.pagina-automatisering .auto-paneel{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2);}
.pagina-automatisering .auto-paneel .glas__kop{border-bottom-color:rgba(255,255,255,.14);}
.pagina-automatisering .auto-toasts{position:relative;z-index:1;align-content:start;padding:124px 26px 24px;gap:16px;}
.pagina-automatisering .auto-toasts .toast{min-width:0;}
.pagina-automatisering .auto-toasts .toast:nth-child(odd){justify-self:start;}
.pagina-automatisering .auto-toasts .toast:nth-child(2){justify-self:end;}
.pagina-automatisering .hero__beeld .toast{animation-delay:calc(480ms + var(--k,0) * 80ms);}
.pagina-automatisering .hero h1{font-size:clamp(38px,4.6vw,66px);padding-bottom:.62em;}
.pagina-automatisering .hero__tekst .hero__lead{margin-top:30px;}
@media (max-width:900px){
  .pagina-automatisering .hero h1{font-size:clamp(38px,7.4vw,66px);}
  .pagina-automatisering .hero__beeld{max-width:440px;}
  .pagina-automatisering .auto-toasts{padding-inline:16px;gap:12px;}
}
/* smalle telefoons (360/344/320): 'SAMENWERKEN.' is ~9,1em breed; bij 38px past het niet in 360 - 2x20px.
   Kop schaalt mee, en een lang woord mag de tekstkolom (en dus de lead) nooit breder maken dan het scherm. */
.pagina-automatisering .hero__tekst{min-width:0;}
@media (max-width:400px){.pagina-automatisering .hero h1{font-size:min(9.6vw,38px);}}

/* ---- voorbeelden ---- */
.pagina-automatisering .auto-nw{white-space:nowrap;}

/* ---- prijs ---- */
@media (min-width:901px){
  .pagina-automatisering .auto-prijssplit{grid-template-rows:auto 1fr;row-gap:0;}
  .pagina-automatisering .auto-prijskaart{grid-column:2;grid-row:1 / span 2;}
  .pagina-automatisering .auto-prijssplit .auto-provisie{grid-column:1;grid-row:2;}
}
.pagina-automatisering .auto-prijskaart{gap:0;padding:clamp(28px,4vw,40px);}
.pagina-automatisering .auto-koppel{display:flex;align-items:flex-start;justify-content:center;padding:6px 0 30px;margin-bottom:28px;border-bottom:1px solid var(--lijn);}
.pagina-automatisering .auto-systeem{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border-radius:var(--r-pil);background:var(--wolk);border:1px solid var(--grijs);font:600 15px/1.2 var(--f-tekst);color:var(--navy);white-space:nowrap;}
.pagina-automatisering .auto-systeem .chip{margin:0;box-shadow:none;}
.pagina-automatisering .auto-boog{flex:none;width:132px;height:auto;margin:17px -2px 0;color:var(--blauw);overflow:visible;}
.pagina-automatisering .auto-boog__lijn{fill:none;stroke:var(--blauw);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:2 6;stroke-dashoffset:0;opacity:.55;}
.pagina-automatisering .auto-prijs{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;font:900 56px/1 var(--f-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--navy);}
.pagina-automatisering .auto-prijs small{font:600 16px/1 var(--f-tekst);letter-spacing:0;color:var(--tekst-zacht);}
.pagina-automatisering .auto-duur{margin-top:12px;font-size:15px;color:var(--tekst-zacht);}
.pagina-automatisering .auto-acties{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;}
.pagina-automatisering .auto-provisie{display:flex;align-items:flex-start;gap:16px;margin-top:36px;padding-top:28px;border-top:1px solid var(--grijs);max-width:46ch;align-self:start;}
@media (max-width:900px){.pagina-automatisering .auto-provisie{margin-top:0;max-width:none;}}
.pagina-automatisering .auto-provisie .chip{background:var(--wit);border:1px solid var(--grijs);}
.pagina-automatisering .auto-provisie h3{font-size:18px;}
.pagina-automatisering .auto-provisie p{margin-top:6px;font-size:16px;color:var(--tekst-zacht);}
@media (max-width:640px){
  .pagina-automatisering .auto-prijs{font-size:46px;}
  .pagina-automatisering .auto-systeem{padding:0 14px;min-height:40px;font-size:14px;}
  .pagina-automatisering .auto-systeem .chip{display:none;}
  .pagina-automatisering .auto-boog{width:96px;margin-top:15px;}
  .pagina-automatisering .auto-acties{flex-direction:column;align-items:stretch;}
}
/* 320px / 400% zoom (WCAG 1.4.10): de rij 'Systeem A — glimlach — Systeem B' krimpt mee, zodat niets buiten beeld valt. */
@media (max-width:400px){
  .pagina-automatisering .auto-systeem{padding:0 10px;font-size:13px;}
  .pagina-automatisering .auto-boog{width:56px;margin-inline:-4px;}
}