/* Zondag — aanvulling voor de live-versie (App Store). Bovenop style.css; wijzigt geen bestaande regels behalve waar hieronder genoemd. */

/* ---------- App Store-badge (zelfde als thinkingwalks) ---------- */
.store-badge{display:inline-flex;align-items:center;gap:10px;background:#000;color:#fff;text-decoration:none;
  border-radius:12px;padding:8px 18px 8px 14px;line-height:1.05;border:1px solid #a6a6a6;transition:transform .2s,background .2s}
.store-badge:hover{background:#1d1d1f}.store-badge:active{transform:scale(.97)}
.store-badge:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.store-badge svg{width:26px;height:26px;fill:#fff;flex:none}
.store-badge span{display:flex;flex-direction:column;text-align:left}
.store-badge small{font-size:11px;font-weight:500;letter-spacing:.01em;opacity:.9}
.store-badge b{font-size:21px;font-weight:600;letter-spacing:-.02em;color:#fff}
.store-badge.big{padding:11px 24px 11px 18px}
.store-badge.big svg{width:32px;height:32px}
.store-badge.big b{font-size:25px}

/* ---------- zo begin je ---------- */
.start{padding:16vh var(--gut);background:#fff}
.sgrid{list-style:none;margin:8vh 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:none}
.scard{background:var(--bg2);border-radius:28px;padding:clamp(24px,2.4vw,36px);display:flex;flex-direction:column}
.scard .n{display:block;font-size:clamp(48px,4.4vw,64px);font-weight:700;letter-spacing:-.05em;line-height:1;margin-bottom:22px;
  background:var(--pulse);-webkit-background-clip:text;background-clip:text;color:transparent;width:max-content}
.scard h3{font-size:clamp(21px,1.8vw,26px);letter-spacing:-.03em;line-height:1.15}
.scard p{margin:10px 0 0;color:var(--mute);font-size:16px;line-height:1.45}
.start-cta{margin-top:7vh;text-align:center}

/* ---------- faq ---------- */
.faq{padding:16vh var(--gut);background:var(--bg2)}
.qlist{max-width:780px;margin:7vh auto 0;background:#fff;border-radius:28px;padding:6px clamp(22px,3vw,40px)}
.qlist details{border-top:.5px solid rgba(0,0,0,.1)}
.qlist details:first-child{border-top:0}
.qlist summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:22px 0;font-size:clamp(18px,1.5vw,21px);font-weight:600;letter-spacing:-.02em}
.qlist summary::-webkit-details-marker{display:none}
.qlist summary::after{content:"";flex:none;width:10px;height:10px;border:solid var(--mute2);border-width:0 2px 2px 0;
  transform:translateY(-3px) rotate(45deg);transition:transform .25s}
.qlist details[open] summary::after{transform:translateY(2px) rotate(225deg)}
.qlist summary:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:6px}
.qlist details p{margin:-6px 0 22px;color:var(--mute);font-size:17px;line-height:1.5;max-width:40em}
.qlist a{color:var(--blue);text-decoration:none}
.qlist a:hover{text-decoration:underline}

/* ---------- slot-cta ---------- */
.cta{padding:18vh var(--gut);text-align:center;background:linear-gradient(#fff,var(--bg2))}
.cta .lead{margin:20px auto 0;max-width:28em;text-wrap:balance}
.cta .store-badge{margin-top:6vh}
.cta .fine{margin:18px auto 0;font-size:14px;color:var(--mute)}
.pnote a{color:var(--blue);text-decoration:none}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .sgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .nav .right{gap:12px}
  .start,.faq{padding:12vh 20px}
  .sgrid{grid-template-columns:1fr;gap:14px;margin-top:6vh}
  .scard{border-radius:22px;display:grid;grid-template-columns:auto 1fr;column-gap:18px;align-items:start}
  .scard .n{font-size:44px;margin:0;min-width:28px;grid-row:span 2}
  .qlist{border-radius:22px}
  .cta{padding:13vh 20px}
}
.pcard.dark li span a{color:#f5f5f7;text-decoration:underline;text-underline-offset:2px}

/* Header: echt app-icoon + domein als titel */
.brand .app-icon{width:28px;height:28px;border-radius:6.4px;flex:none;box-shadow:0 0 0 .5px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.12)}

/* ---------- zondagoverleg ---------- */
.step-more{margin:22px 0 0;font-size:17px}
.step-more a{color:var(--blue);text-decoration:none;font-weight:500}
.step-more a::after{content:" ↓"}
.step-more a:hover{text-decoration:underline}
.overleg{padding:16vh var(--gut);background:#fff;overflow:hidden}
.ov-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:center;margin-top:8vh}
.ov-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.ov-points li{display:grid;grid-template-columns:auto 1fr;column-gap:18px;align-items:start;background:var(--bg2);border-radius:24px;padding:clamp(20px,2vw,28px)}
.ov-points .n{font-size:clamp(40px,3.4vw,52px);font-weight:700;letter-spacing:-.05em;line-height:1;min-width:28px;
  background:var(--pulse);-webkit-background-clip:text;background-clip:text;color:transparent}
.ov-points h3{font-size:clamp(20px,1.7vw,24px);letter-spacing:-.03em;line-height:1.15}
.ov-points p{margin:8px 0 0;color:var(--mute);font-size:16px;line-height:1.45}
.ov-phones{display:flex;justify-content:center;align-items:flex-end;gap:clamp(12px,1.8vw,28px)}
.ov-phones .device{--w:min(230px,17vw)}
.ov-phones .device.mid{--w:min(270px,20vw);z-index:2}
.ov-phones .device.side{margin-bottom:26px}
.ov-privacy{max-width:46em;margin:8vh auto 0;text-align:center;font-size:16px;line-height:1.5;color:var(--mute);
  background:var(--bg2);border-radius:20px;padding:18px 24px}
.ov-privacy b{color:var(--ink);font-weight:600}
.ov-privacy a{color:var(--blue);text-decoration:none}
.ov-privacy a:hover{text-decoration:underline}
.ov-fine{margin:14px auto 0;text-align:center;font-size:13px;color:var(--mute2)}
.pcard li span a{color:var(--blue);text-decoration:none}
@media (max-width:1080px){
  .ov-grid{grid-template-columns:1fr}
  .ov-phones{order:-1}
  .ov-phones .device{--w:min(220px,27vw)}
  .ov-phones .device.mid{--w:min(260px,32vw)}
  .ov-points{max-width:640px;margin:0 auto;width:100%}
}
@media (max-width:760px){
  .overleg{padding:12vh 20px}
  .ov-grid{margin-top:6vh;gap:6vh}
  .ov-phones{gap:0}
  .ov-phones .device.side{display:none}
  .ov-phones .device.mid{--w:min(290px,72vw)}
  .ov-points li{border-radius:22px}
  .ov-privacy{text-align:left;font-size:15px;padding:16px 18px}
}