*{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0;background:#eef2f5;}
  a{color:#1c4e73;text-decoration:none;}
  a:hover{color:#2f7d8c;}
  ::selection{background:#cfe0ea;}
  details>summary{list-style:none;cursor:pointer;}
  details>summary::-webkit-details-marker{display:none;}

  /* Mobile nav: checkbox-driven, no JS. Toggle is a11y-labelled sibling of the checkbox. */
  .nav-toggle{position:absolute;opacity:0;pointer-events:none;}
  .nav-toggle-label{display:none;}

  /*
    Everything above is unchanged from the desktop build and every desktop-facing rule in
    index.html stays inline exactly as before. The rules below only ever apply inside their
    breakpoints, so desktop rendering above them can't be affected. Inline styles win
    specificity over an external class by default, hence !important here — scoping it inside
    @media keeps the blast radius limited to that width range.

    Breakpoints are content-driven, not device-category guesses: measured (via
    tools/visual-diff.mjs's underlying Playwright setup) exactly where each component's own
    content stops fitting. The nav row (logo+links+CTA, no wrap) overflows starting ~930px;
    the "wat is het" nested phone/arrow/dashboard composition overflows starting ~885px — both
    well before the general 768px content stack is needed, so they get their own earlier tier.
    The hero image is a different failure mode: it never overflows (width:100% shrinks with
    its column), but height:400px + object-fit:cover means a narrowing column crops progressively
    more of the screenshot — legible down to ~960px, meaningfully cropped above that, so it
    stacks here too rather than at 768px like the other, purely-fluid 2-column sections.
  */
  @media (max-width: 960px){
    .nav-bar{position:relative;padding:12px 20px !important;}
    .nav-toggle-label{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;cursor:pointer;border-radius:8px;}
    .nav-toggle-label:hover{background:rgba(28,78,115,.08);}
    .nav-links{display:none !important;position:absolute;top:100%;left:0;right:0;flex-direction:column !important;align-items:stretch !important;gap:2px !important;background:#f4f7f9;border-bottom:1px solid #dbe3e9;padding:10px 20px 16px;box-shadow:0 16px 30px -20px rgba(18,50,76,.35);}
    .nav-links a{padding:12px 4px;border-radius:8px;}
    .nav-links a:last-child{margin-top:8px;text-align:center;}
    .nav-toggle:checked ~ .nav-links{display:flex !important;}

    .demo-flex{flex-direction:column !important;}
    .demo-arrow{transform:rotate(90deg);}

    .hero-grid{grid-template-columns:1fr !important;}
    .hero-title{font-size:32px !important;}
    /* Match dashboard-preview.png's real 2910x1844 ratio so cover never has anything to crop —
       a fixed height here would keep clipping the image once it's full-width instead of half. */
    .hero-img{height:auto !important;aspect-ratio:2910/1844 !important;}
  }

  @media (max-width: 768px){
    .container{padding-left:20px !important;padding-right:20px !important;padding-top:48px !important;padding-bottom:48px !important;}
    .stack-mobile{grid-template-columns:1fr !important;}

    .brand-text{font-size:24px !important;}

    .h2-lg{font-size:26px !important;}
    .h2-md{font-size:24px !important;}

    .modules-grid{grid-template-columns:1fr !important;}
    .modules-plus{width:auto !important;flex-direction:row !important;justify-content:center !important;gap:12px !important;padding:16px 26px !important;}

    .waarom-col{padding:0 !important;border-left:none !important;}
    .waarom-col + .waarom-col{border-top:1px solid rgba(255,255,255,.14) !important;padding-top:24px !important;margin-top:24px !important;}

    .footer-grid{grid-template-columns:1fr !important;gap:28px !important;}
  }

  @media (max-width: 480px){
    .container{padding-left:16px !important;padding-right:16px !important;padding-top:36px !important;}
    .banner-text{font-size:12.5px !important;}
    .form-row{grid-template-columns:1fr !important;}
  }