/* D&D Tech — diensten + bedrijfspagina's (diensten/*, werkwijze, over-ons, contact, privacy).
   Alleen pagina-specifieke componenten; tokens/base/layout blijven leidend. */

/* ---------- Kleine hulpjes ---------- */
.section--tight{padding-block:var(--space-8)}
.section-head{max-width:68ch;margin-bottom:var(--space-7)}
.section-head.center{margin-inline:auto;text-align:center}
.section-head.center .eyebrow{justify-content:center}
.section-head .lead{margin-inline:inherit}
.center .lead{margin-inline:auto}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-5)}
.muted{color:var(--text-mute)}
.small{font-size:var(--fs-sm)}
.icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(0,224,255,.14),rgba(123,92,255,.14));border:1px solid var(--line-strong);color:var(--cyan);margin-bottom:var(--space-4);flex:none}
.icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.card .icon{box-shadow:inset 0 0 20px rgba(0,224,255,.06)}
.checks{list-style:none;padding:0;margin:0 0 var(--space-4)}
.checks li{position:relative;padding-left:1.7em;margin:.45em 0;color:var(--text-dim)}
.checks li::before{content:"";position:absolute;left:0;top:.55em;width:.8em;height:.45em;border-left:2px solid var(--cyan);border-bottom:2px solid var(--cyan);transform:rotate(-45deg);filter:drop-shadow(0 0 4px rgba(0,224,255,.6))}
.card-link{display:inline-flex;align-items:center;gap:.4em;margin-top:auto;font-weight:600;font-size:var(--fs-sm);color:var(--cyan)}
.card-link::after{content:"\2192";transition:transform .2s var(--ease)}
.card:hover .card-link::after{transform:translateX(4px)}
.card.flex{display:flex;flex-direction:column}
.card .tag{margin-bottom:var(--space-4);align-self:flex-start}
.card--accent::before{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:2px;border-radius:var(--radius-lg) var(--radius-lg) 0 0;background:var(--grad);opacity:.8}

/* Pagina-kop met glow */
.page-hero{position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:auto auto -40% -10%;width:60%;height:120%;background:radial-gradient(closest-side,rgba(0,224,255,.14),transparent 70%);pointer-events:none}
.page-hero::after{content:"";position:absolute;inset:-60% -10% auto auto;width:50%;height:140%;background:radial-gradient(closest-side,rgba(123,92,255,.16),transparent 70%);pointer-events:none}
.page-hero .container{position:relative;z-index:1}
.page-hero--split .container{display:grid;gap:var(--space-7);align-items:center;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr))}
.page-hero--split .container>*{min-width:0}
.page-hero--split h1{font-size:var(--fs-2xl)}
.crumbs{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-mute);margin-bottom:var(--space-4);display:flex;gap:.6em;flex-wrap:wrap}
.crumbs a:hover{color:var(--cyan)}

/* ---------- Diensten-overzicht ---------- */
.dienst-nr{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-mute);letter-spacing:.15em;position:absolute;top:var(--space-5);right:var(--space-5)}
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:var(--space-3);counter-reset:flow}
.flow>div{min-width:0;position:relative;padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);font-size:var(--fs-sm);counter-increment:flow}
.flow>div::before{content:"0" counter(flow);display:block;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--cyan);margin-bottom:.4em}
.flow>div strong{display:block;color:var(--text);margin-bottom:.2em}
.flow>div::after{content:"";position:absolute;top:50%;right:-1px;width:var(--space-3);height:1px;background:var(--line-strong);transform:translateX(100%)}
.flow>div:last-child::after{display:none}
@media (max-width:640px){.flow>div::after{display:none}}

/* ---------- Tijdlijn (werkwijze + installatie) ---------- */
.tl{position:relative;--tl-x:28px;padding-left:calc(var(--tl-x) + var(--space-6));list-style:none;margin:0}
.tl::before{content:"";position:absolute;left:var(--tl-x);top:0;bottom:0;width:2px;background:var(--line);transform:translateX(-50%)}
.tl::after{content:"";position:absolute;left:var(--tl-x);top:0;width:2px;height:var(--tl-progress,0%);background:var(--grad);box-shadow:var(--glow-cyan);transform:translateX(-50%);transition:height .4s linear}
.tl__item{position:relative;padding-bottom:var(--space-7);min-width:0}
.tl__item:last-child{padding-bottom:0}
.tl__dot{position:absolute;left:calc(-1 * (var(--tl-x) + var(--space-6)));top:.2em;width:calc(var(--tl-x) * 2);height:calc(var(--tl-x) * 2);transform:translateX(0);display:grid;place-items:center;border-radius:50%;background:var(--bg);border:1px solid var(--line-strong);font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-dim);transition:border-color .4s,box-shadow .4s,color .4s}
.tl__item.is-visible .tl__dot,.tl__item.is-on .tl__dot{border-color:var(--cyan);color:var(--cyan);box-shadow:var(--glow-cyan)}
.tl__item h3{margin-bottom:var(--space-2)}
.tl__meta{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-mute);letter-spacing:.1em;text-transform:uppercase;margin-bottom:var(--space-2);display:block}
.tl__body{max-width:62ch}
.tl__body a{color:var(--cyan);text-decoration:underline;text-underline-offset:.15em}
@media (min-width:900px){
  .tl--alt{padding-left:0}
  .tl--alt::before,.tl--alt::after{left:50%}
  .tl--alt .tl__item{width:50%;padding-right:calc(var(--tl-x) + var(--space-6))}
  .tl--alt .tl__item:nth-child(even){margin-left:50%;padding-right:0;padding-left:calc(var(--tl-x) + var(--space-6))}
  .tl--alt .tl__item:nth-child(odd){text-align:right}
  .tl--alt .tl__item:nth-child(odd) .tl__body{margin-left:auto}
  .tl--alt .tl__item:nth-child(odd) .tl__dot{left:auto;right:calc(-1 * var(--tl-x))}
  .tl--alt .tl__item:nth-child(even) .tl__dot{left:calc(-1 * var(--tl-x))}
}

/* Interactieve checklist (installatie) */
.chk{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.chk__item{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);min-width:0;transition:border-color .3s,box-shadow .3s}
.chk__item.is-open{border-color:var(--line-strong)}
.chk__item.is-done{border-color:rgba(182,255,59,.35)}
.chk__btn{width:100%;display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);background:none;border:0;color:var(--text);font:inherit;text-align:left;cursor:pointer;min-width:0}
.chk__box{flex:none;width:26px;height:26px;border-radius:8px;border:1px solid var(--line-strong);display:grid;place-items:center;transition:.3s;position:relative}
.chk__box::after{content:"";width:.7em;height:.38em;border-left:2px solid var(--bg);border-bottom:2px solid var(--bg);transform:rotate(-45deg) scale(0);transition:transform .25s var(--ease);margin-top:-.15em}
.is-done .chk__box{background:var(--lime);border-color:var(--lime);box-shadow:0 0 12px rgba(182,255,59,.5)}
.is-done .chk__box::after{transform:rotate(-45deg) scale(1)}
.chk__title{flex:1;min-width:0;font-family:var(--font-display);font-weight:700;font-size:var(--fs-lg);letter-spacing:-.01em}
.chk__title small{display:block;font-family:var(--font-mono);font-weight:400;font-size:var(--fs-xs);color:var(--text-mute);letter-spacing:.1em;text-transform:uppercase;margin-top:.2em}
.chk__chev{flex:none;width:12px;height:12px;border-right:2px solid var(--text-mute);border-bottom:2px solid var(--text-mute);transform:rotate(45deg);transition:transform .3s var(--ease);margin-right:.3em}
.is-open .chk__chev{transform:rotate(-135deg);border-color:var(--cyan)}
.chk__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.is-open .chk__panel{grid-template-rows:1fr}
.chk__panel>div{overflow:hidden;min-height:0}
.chk__inner{padding:0 var(--space-5) var(--space-5) calc(var(--space-5) + 26px + var(--space-4))}
.chk__inner p:last-child{margin-bottom:0}
.chk__bar{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-5);font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-dim);flex-wrap:wrap}
.chk__track{flex:1 1 160px;height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden;min-width:0}
.chk__fill{height:100%;width:0;background:var(--grad);box-shadow:var(--glow-cyan);transition:width .4s var(--ease)}
.chk__bar .btn{padding:.5em 1em}
@media (max-width:640px){.chk__inner{padding-left:var(--space-5)}.chk__btn{padding:var(--space-4)}}

/* ---------- Visual: WiFi-dekkingsplan (heatmap) ---------- */
.heat{position:relative;border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--bg-2);padding:var(--space-4);overflow:hidden}
.heat svg{width:100%;height:auto}
.heat__legend{display:flex;gap:var(--space-4);flex-wrap:wrap;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-mute);margin-top:var(--space-3)}
.heat__legend span{display:inline-flex;align-items:center;gap:.5em}
.heat__legend i{width:10px;height:10px;border-radius:50%;display:inline-block}
.heat .ap{animation:heat-pulse 3s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
.heat .ap:nth-of-type(2){animation-delay:1s}.heat .ap:nth-of-type(3){animation-delay:2s}
@keyframes heat-pulse{50%{opacity:.75}}

/* VLAN-schema */
.vlan{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.vlan>div{min-width:0;border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-4);background:var(--surface);position:relative;overflow:hidden}
.vlan>div::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c,var(--cyan));box-shadow:0 0 10px var(--c,var(--cyan))}
.vlan b{display:block;font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--c,var(--cyan));margin-bottom:.3em}
.vlan p{margin:0;font-size:var(--fs-sm)}

/* ---------- Visual: monitoring-dashboard ---------- */
.dash{border-radius:var(--radius-lg);border:1px solid var(--line-strong);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));box-shadow:0 30px 80px rgba(0,0,0,.5),var(--glow-cyan);overflow:hidden;font-family:var(--font-mono);font-size:var(--fs-xs);position:relative}
.dash__bar{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--line);color:var(--text-dim)}
.dash__bar i{width:9px;height:9px;border-radius:50%;background:var(--line-strong);display:inline-block}
.dash__bar .dot{margin-left:auto}
.dash__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.dash__stat{background:var(--bg-2);padding:var(--space-4);min-width:0}
.dash__stat span{display:block;color:var(--text-mute);letter-spacing:.1em;text-transform:uppercase;font-size:.68rem;margin-bottom:.3em}
.dash__stat b{display:block;font-family:var(--font-display);font-size:1.5rem;color:var(--text);line-height:1}
.dash__stat b.ok{color:var(--lime)}
.dash__chart{padding:var(--space-4);border-top:1px solid var(--line)}
.dash__chart svg{width:100%;height:auto;overflow:visible}
.dash__chart path.line{fill:none;stroke:var(--cyan);stroke-width:2;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(0,224,255,.6));stroke-dasharray:600;stroke-dashoffset:600;animation:draw 3s var(--ease) forwards}
.dash__chart path.area{fill:url(#dashArea);opacity:0;animation:fade 1s 2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}
.dash__list{border-top:1px solid var(--line)}
.dash__row{display:flex;align-items:center;gap:var(--space-3);padding:.6em var(--space-4);border-bottom:1px solid var(--line);color:var(--text-dim)}
.dash__row:last-child{border-bottom:0}
.dash__row .nm{flex:1;min-width:0;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash__row .st{color:var(--lime)}
.dash__row .st.warn{color:#ffb84d}
.dash__row .dot{width:6px;height:6px}
.dash__row .dot.warn{background:#ffb84d;box-shadow:0 0 10px #ffb84d}
.dash__scan{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(0,224,255,.05) 50%,transparent);height:40%;animation:scan 6s linear infinite}
@keyframes scan{from{transform:translateY(-100%)}to{transform:translateY(260%)}}
.dash__note{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-mute);margin-top:var(--space-3);text-align:center}
@media (max-width:420px){.dash__grid{grid-template-columns:1fr 1fr}.dash__stat:last-child{grid-column:span 2}}

/* Beheerpakketten */
.pkg{display:grid;gap:var(--space-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));align-items:stretch}
.pkg .card{display:flex;flex-direction:column;min-width:0}
.pkg__name{font-family:var(--font-display);font-size:var(--fs-xl);margin:0 0 .2em}
.pkg__for{color:var(--text-mute);font-size:var(--fs-sm);margin-bottom:var(--space-5)}
.pkg__price{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-dim);padding:var(--space-3) 0;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);margin-bottom:var(--space-5)}
.pkg .checks{flex:1}
.pkg .checks li.no{color:var(--text-mute)}
/* Niet inbegrepen: streepje i.p.v. vinkje (controle 16-10, DD-20) */
.pkg .checks li.no::before{border-left:0;border-bottom:2px solid var(--text-mute);height:0;width:.7em;top:.8em;transform:none;filter:none;opacity:.8}
.pkg .card--featured{border-color:rgba(0,224,255,.45);box-shadow:var(--glow-cyan)}
.pkg .card--featured .pkg__ribbon{position:absolute;top:-1px;right:var(--space-5);padding:.3em .8em;border-radius:0 0 8px 8px;background:var(--grad);color:#03050a;font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase}

/* Respons-tabel */
.resp{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.resp th,.resp td{text-align:left;padding:.7em .5em;border-bottom:1px solid var(--line);vertical-align:top}
.resp th{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--text-mute);font-weight:500}
.resp td:first-child{color:var(--text);font-weight:600}
.table-wrap{overflow-x:auto;min-width:0;-webkit-overflow-scrolling:touch}

/* ---------- Over ons ---------- */
.founders{display:grid;gap:var(--space-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.founder{display:flex;gap:var(--space-5);align-items:flex-start;min-width:0}
.founder__avatar{flex:none;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-size:2rem;font-weight:700;background:linear-gradient(135deg,rgba(0,224,255,.2),rgba(123,92,255,.2));border:1px solid var(--line-strong);color:var(--text);box-shadow:var(--glow-violet)}
.founder h3{margin-bottom:.2em}
.founder .role{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--cyan);letter-spacing:.12em;text-transform:uppercase;margin-bottom:var(--space-3)}
.founder>div{min-width:0}
@media (max-width:480px){.founder{flex-direction:column}}
.values .card{height:100%}
.why{display:grid;gap:var(--space-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.why>div{min-width:0;padding-left:var(--space-5);border-left:2px solid var(--line-strong);position:relative}
.why>div::before{content:"";position:absolute;left:-2px;top:0;width:2px;height:2.2em;background:var(--grad);box-shadow:var(--glow-cyan)}
.why h3{font-size:var(--fs-lg)}
.quote{font-family:var(--font-display);font-size:var(--fs-xl);line-height:1.3;max-width:28ch;margin:0}
.quote em{font-style:normal}

/* ---------- Contact ---------- */
.contact-grid{display:grid;gap:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr))}
.contact-grid>*{min-width:0}
@media (min-width:1000px){.contact-grid{grid-template-columns:1.4fr 1fr}}
.form{display:grid;gap:var(--space-4);min-width:0}
.form fieldset{border:0;padding:0;margin:0;min-width:0;display:grid;gap:var(--space-4)}
.form legend{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.15em;text-transform:uppercase;color:var(--text-mute);padding:0;margin-bottom:var(--space-2)}
.form .row{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.form .row>*{min-width:0}
.form .row--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))}
.field{display:grid;gap:.4em;min-width:0}
.field label{font-size:var(--fs-sm);font-weight:500;color:var(--text)}
.field label .req{color:var(--cyan)}
.field input,.field select,.field textarea{width:100%;min-width:0;font:inherit;font-size:var(--fs-md);color:var(--text);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:.75em .9em;transition:border-color .2s,box-shadow .2s;appearance:none;-webkit-appearance:none}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--text-dim) 50%),linear-gradient(135deg,var(--text-dim) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:2.4em}
.field select option{background:var(--bg-2);color:var(--text)}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,224,255,.18)}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea,.is-invalid .choice{border-color:var(--danger);box-shadow:0 0 0 3px rgba(255,77,109,.15)}
.field .err{display:none;font-size:var(--fs-xs);color:var(--danger);font-family:var(--font-mono)}
.is-invalid .err{display:block}
.choices{display:grid;gap:var(--space-2);grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr))}
.choice{display:flex;align-items:center;gap:.7em;padding:.7em .9em;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);cursor:pointer;font-size:var(--fs-sm);transition:border-color .2s,background .2s;min-width:0}
.choice:hover{border-color:var(--cyan)}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice i{flex:none;width:18px;height:18px;border-radius:5px;border:1px solid var(--line-strong);display:grid;place-items:center;transition:.2s}
.choice i::after{content:"";width:.55em;height:.3em;border-left:2px solid var(--bg);border-bottom:2px solid var(--bg);transform:rotate(-45deg) scale(0);margin-top:-.12em;transition:transform .2s}
.choice input:checked~i{background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 10px rgba(0,224,255,.5)}
.choice input:checked~i::after{transform:rotate(-45deg) scale(1)}
.choice input:focus-visible~i{outline:2px solid var(--cyan);outline-offset:2px}
.choice:has(input:checked){border-color:var(--cyan);background:rgba(0,224,255,.06)}
.consent{align-items:flex-start;line-height:1.45}
.consent i{margin-top:.2em}
.consent a{color:var(--cyan);text-decoration:underline}
.form__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4)}
.form__note{font-size:var(--fs-xs);color:var(--text-mute);margin:0}
.form__alert{display:none;padding:var(--space-3) var(--space-4);border:1px solid var(--danger);border-radius:var(--radius-sm);background:rgba(255,77,109,.08);color:var(--text);font-size:var(--fs-sm)}
.form__alert.is-shown{display:block}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.done{display:none;text-align:center;padding:var(--space-7) var(--space-5)}
.done.is-shown{display:block}
.done__icon{width:72px;height:72px;margin:0 auto var(--space-5);border-radius:50%;display:grid;place-items:center;background:rgba(182,255,59,.1);border:1px solid rgba(182,255,59,.5);box-shadow:0 0 30px rgba(182,255,59,.3)}
.done__icon::after{content:"";width:1.4em;height:.7em;border-left:3px solid var(--lime);border-bottom:3px solid var(--lime);transform:rotate(-45deg);margin-top:-.4em}
.done pre{text-align:left;white-space:pre-wrap;word-break:break-word;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-dim);background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--space-4);max-height:300px;overflow:auto;margin:var(--space-5) 0}
.contact-cards{display:grid;gap:var(--space-4);align-content:start}
.contact-card{display:flex;gap:var(--space-4);align-items:flex-start;padding:var(--space-5)}
.contact-card .icon{margin:0}
.contact-card>div{min-width:0}
.contact-card h3{font-size:var(--fs-md);margin-bottom:.2em}
.contact-card p{margin:0;font-size:var(--fs-sm)}
.contact-card a{color:var(--cyan);word-break:break-word}
.contact-card .mono{font-size:var(--fs-sm)}

/* FAQ */
.faq{display:grid;gap:var(--space-3);max-width:860px;margin-inline:auto}
.faq details{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);min-width:0;transition:border-color .3s}
.faq details[open]{border-color:var(--line-strong)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);font-weight:600;color:var(--text)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;margin-left:auto;width:10px;height:10px;border-right:2px solid var(--cyan);border-bottom:2px solid var(--cyan);transform:rotate(45deg);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .a{padding:0 var(--space-5) var(--space-5);color:var(--text-dim);font-size:var(--fs-sm)}
.faq .a p:last-child{margin-bottom:0}

/* ---------- Privacy / tekstpagina ---------- */
.prose{max-width:72ch}
.prose h2{font-size:var(--fs-xl);margin-top:var(--space-7)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:var(--fs-lg);margin-top:var(--space-5)}
.prose ul{color:var(--text-dim);padding-left:1.2em}
.prose li{margin:.35em 0}
.prose a{color:var(--cyan);text-decoration:underline;text-underline-offset:.15em}
.prose .box{border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-5);background:var(--surface);font-family:var(--font-mono);font-size:var(--fs-sm)}
.prose .box p{margin:.2em 0}
.toc{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-6)}
.toc a{font-family:var(--font-mono);font-size:var(--fs-xs);padding:.4em .8em;border:1px solid var(--line);border-radius:999px;color:var(--text-dim)}
.toc a:hover{border-color:var(--cyan);color:var(--text)}

/* ---------- Mobiel ---------- */
@media (max-width:640px){
  .section{padding-block:var(--space-8)}
  .section-head{margin-bottom:var(--space-6)}
  .tl{--tl-x:20px}
}