/* Opmaak van de brochurepagina's (De perfecte audiotour / The perfect audio tour).
Stond als identieke 6,4 KB heredoc in beide pagina's en werd bij elk bezoek opnieuw
in de HTML meegestuurd; als los bestand wordt hij één keer gedownload en gecachet. */
  body{ background:var(--sand); }

  .doc{ max-width:840px; margin:0 auto; padding:2.5rem 1.25rem 5rem; }

  .toolbar{
    max-width:840px; margin:0 auto; padding:1rem 1.25rem 0;
    display:flex; justify-content:flex-end; gap:0.75rem;
  }
  .toolbar button, .toolbar a{
    background:var(--teal); color:#fff; border:none; border-radius:var(--radius);
    padding:0.65rem 1.4rem; font-size:0.875rem; font-weight:600; cursor:pointer;
    font-family:inherit; display:inline-flex; align-items:center; gap:0.5rem; text-decoration:none;
  }
  .toolbar a{ background:none; color:var(--teal); border:1px solid var(--teal); }
  .toolbar button:hover{ background:var(--teal-deep); }
  .toolbar a:hover{ background:var(--teal-tint); }

  .sheet{
    background:#fff; border:1px solid var(--sand-line); border-radius:calc(var(--radius) * 1.25);
    padding:3rem 2.5rem; margin-bottom:1.75rem;
  }
  .sheet + .sheet{ margin-top:0; }

  .sheet-cover{
    background:linear-gradient(160deg, var(--teal), var(--teal-deep));
    color:var(--sand); padding:4rem 2.5rem; text-align:left; position:relative; overflow:hidden;
  }
  .cover-logo{ height:34px; width:auto; margin-bottom:3.5rem; }
  .cover-title{
    font-size:clamp(2rem, 5vw, 2.85rem); font-weight:700; letter-spacing:-0.03em;
    line-height:1.15; margin-bottom:1rem; color:#fff;
  }
  .cover-tagline{ font-size:1.1rem; font-weight:500; color:var(--sand); opacity:0.85; max-width:32rem; }
  .cover-meta{ margin-top:3.5rem; font-size:0.8rem; color:var(--sand); opacity:0.6; letter-spacing:0.02em; }

  .eyebrow{
    font-size:0.75rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--teal); margin-bottom:0.5rem; display:block;
  }
  .doc-h1{ font-size:1.85rem; font-weight:700; letter-spacing:-0.03em; color:var(--ink); margin-bottom:1.25rem; }
  .doc-h2{ font-size:1.15rem; font-weight:700; letter-spacing:-0.02em; color:var(--ink); margin:1.75rem 0 0.65rem; }
  .doc-p{ font-size:0.95rem; color:var(--ink-soft); line-height:1.75; margin-bottom:1rem; }
  .doc-p:last-child{ margin-bottom:0; }
  .doc ul{ margin:0 0 1rem 0; padding-left:0; list-style:none; }
  .doc ul li{ position:relative; padding-left:1.4rem; font-size:0.9rem; color:var(--ink-soft); line-height:1.65; margin-bottom:0.45rem; }
  .doc ul li::before{
    content:''; position:absolute; left:0; top:0.5em; width:6px; height:6px; border-radius:50%; background:var(--teal);
  }
  .doc ul li strong{ color:var(--ink); }

  .callout{
    background:var(--teal-tint); border-left:3px solid var(--teal); border-radius:0 var(--radius) var(--radius) 0;
    padding:1.25rem 1.5rem; margin:1.5rem 0; font-size:0.9rem; color:var(--ink); line-height:1.7;
  }
  .callout p{ margin-bottom:0.75rem; }
  .callout p:last-child{ margin-bottom:0; }
  .callout-title{ font-weight:700; color:var(--teal-deep); margin-bottom:0.6rem; display:block; }

  .steps{ display:flex; flex-direction:column; gap:1.35rem; margin:1.25rem 0 1.5rem; }
  .step{ display:flex; gap:1.1rem; align-items:flex-start; padding-top:1.1rem; border-top:1px solid var(--sand-line); }
  .step:first-child{ padding-top:0; border-top:none; }
  .step-media{ flex-shrink:0; display:flex; gap:0.4rem; align-items:flex-start; }
  .step-media img{ display:block; border-radius:8px; border:1px solid var(--sand-line); background:#000; }
  .step-media img.device{ width:72px; height:auto; }
  .step-media img.device-wide{ width:130px; height:auto; }
  .step-body{ flex:1; padding-top:0.15rem; }
  .step-num{
    display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
    width:22px; height:22px; border-radius:50%; background:var(--teal); color:#fff;
    font-size:0.75rem; font-weight:700; margin-right:0.55rem;
  }
  .step-body p{ display:inline; font-size:0.9rem; color:var(--ink-soft); line-height:1.65; margin:0; }

  .toc-list{ list-style:none; }
  .toc-list li{
    display:flex; justify-content:space-between; gap:1rem; padding:0.7rem 0;
    border-top:1px solid var(--sand-line); font-size:0.925rem; color:var(--ink);
  }
  .toc-list li:first-child{ border-top:none; }
  .toc-list li::before{ display:none; }
  .toc-num{ color:var(--teal); font-weight:600; margin-right:0.6rem; }

  table.matrix{ width:100%; border-collapse:collapse; font-size:0.875rem; margin:1rem 0 1.5rem; }
  table.matrix th, table.matrix td{ border:1px solid var(--sand-line); padding:0.55rem 0.75rem; text-align:left; }
  table.matrix th{ background:var(--bg); color:var(--ink); font-weight:600; }
  table.matrix td{ color:var(--ink-soft); }

  .checklist{ width:100%; border-collapse:collapse; font-size:0.875rem; }
  .checklist th, .checklist td{ border:1px solid var(--sand-line); padding:0.75rem 0.85rem; vertical-align:top; text-align:left; }
  .checklist th{ background:var(--bg); color:var(--ink); font-weight:600; }
  .checklist td.chk{ width:44px; text-align:center; }
  .checklist td.num{ width:64px; text-align:center; color:var(--ink-soft); }
  .checklist td p{ color:var(--ink-soft); font-size:0.875rem; line-height:1.6; }

  .sheet-contact{
    background:var(--teal); color:var(--sand); padding:3.5rem 2.5rem;
  }
  .sheet-contact .doc-h1{ color:#fff; }
  .contact-grid{ display:grid; grid-template-columns:1fr; gap:2rem; margin-top:1.5rem; }
  @media (min-width:600px){ .contact-grid{ grid-template-columns:1fr 1fr; } }
  .contact-block dt{ font-size:0.75rem; text-transform:uppercase; letter-spacing:0.08em; opacity:0.65; margin-bottom:0.2rem; }
  .contact-block dd{ font-size:0.95rem; margin:0 0 1rem; }
  .contact-block a{ color:#fff; text-decoration:underline; }
  .contact-cta{
    display:inline-block; margin-top:0.5rem; background:var(--sand); color:var(--teal);
    border-radius:var(--radius); padding:0.7rem 1.5rem; font-weight:600; font-size:0.9rem; text-decoration:none;
  }
  .contact-logo{ height:30px; margin-top:3rem; opacity:0.9; }

  @media (max-width:640px){
    .sheet, .sheet-cover, .sheet-contact{ padding:2rem 1.35rem; }
  }

  @media print{
    .no-print, .nav-wrap, .site-footer, .modal-overlay{ display:none !important; }
    body{ background:#fff; }
    .doc{ max-width:none; margin:0; padding:0; }
    .sheet{
      border:none; border-radius:0; box-shadow:none; margin:0; padding:16mm 14mm;
      page-break-after:always;
    }
    .sheet:last-child{ page-break-after:auto; }
    .sheet-cover, .sheet-contact{
      -webkit-print-color-adjust:exact; print-color-adjust:exact;
    }
    @page{ size:A4; margin:0; }
  }