/* Zondag landing v3 — bovenop style.css + live.css + eten.css (die blijven ongewijzigd voor /live).
   1. Zo werkt het: één telefoon in 3D die meebeweegt terwijl je scrolt (naar de Thinking Walks-flow).
   2. Zondagoverleg: het echte overlegscherm, nagebouwd en geanimeerd.
   3. Inbox: een mail vliegt binnen en wordt afspraken.
   Telefoonschermen rekenen in app-punten: 1em = 10 pt van een 390 pt brede iPhone. */

.en-pending [data-en]{visibility:hidden}
.nav .lang{font:600 13px var(--font);color:var(--mute);background:rgba(118,118,128,.12);border:0;border-radius:980px;padding:6px 11px;cursor:pointer;line-height:1.2;transition:background .2s,color .2s}
.nav .lang:hover{color:var(--ink);background:rgba(118,118,128,.2)}
.nav .lang:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
:root{--cream:#FBF8F3;--warm:#F2ECE2;--rec:#FF3B30;--orange:#FF9500;--E:#AF52DE;--D:#007AFF;--appline:rgba(60,60,67,.18)}

/* ---------- hero: zachte zweef op de drie telefoons ---------- */
@media (prefers-reduced-motion:no-preference){
  .fan .device.in{animation:fanFloat 7s ease-in-out infinite}
  .fan .device.side.l.in{animation-delay:-2.2s}
  .fan .device.side.r.in{animation-delay:-4.4s}
}
@keyframes fanFloat{0%,100%{translate:0 0}50%{translate:0 -10px}}
.fan .device img{aspect-ratio:1206/2622}

/* ---------- gedeelde statusbalk in de telefoons ---------- */
.sbar{position:absolute;inset:0 0 auto 0;height:4.9em;display:flex;align-items:center;justify-content:space-between;
  padding:0 2.6em 0 3.2em;font-weight:600;font-size:1.55em;line-height:1;color:#000;z-index:6;pointer-events:none;letter-spacing:-.01em}
.sbar{font-size:1em}.sbar>span:first-child{font-size:1.55em}
.sbar .isl{position:absolute;left:50%;top:1.15em;width:11.4em;height:3.3em;margin-left:-5.7em;border-radius:2em;background:#000}
.sbar .sig{display:flex;gap:.5em;align-items:center}
.sbar .sig svg{height:1.25em;width:auto}

/* =====================================================================
   1 · ZO WERKT HET
   ===================================================================== */
.how{position:relative;background:var(--bg2);padding:0 var(--gut)}
.how-head{padding:16vh 0 2vh;text-align:center}
.how-head .lead{margin-left:auto;margin-right:auto}
.how-fine{margin:0;padding:2vh 0 10vh;text-align:center;font-size:13px;color:var(--mute2)}

/* statische versie (geen JS of minder beweging): stappen onder elkaar, met een stilstaand scherm */
.how-track{position:relative}
.how-sticky{position:relative}
.ph3{display:none}
.how-copy{display:flex;flex-direction:column;gap:10vh;padding:8vh 0 6vh;max-width:1080px;margin:0 auto}
.hstep{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,6vw,90px);align-items:center}
.hstep .hstill{grid-column:2;grid-row:1}
.hstep .hstill .device{--w:min(300px,30vw)}
.hstep .hstill img{aspect-ratio:1206/2622}
.hstep h2{font-size:clamp(34px,4.4vw,60px)}
.hstep .lead{max-width:26em}
.num{font-size:13px;font-weight:600;color:var(--mute2);letter-spacing:.06em;text-transform:uppercase;margin:0 0 12px}
.legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;font-size:15px;font-weight:500;color:var(--mute)}
.legend span{display:inline-flex;align-items:center;gap:8px}
.legend i{width:12px;height:12px;border-radius:50%}
.legend .lg-or{background:var(--orange);box-shadow:0 0 0 0 rgba(255,149,0,.5);animation:pulseOr 1.8s ease-out infinite}
.legend .lg-gr{background:var(--green)}
@keyframes pulseOr{0%{box-shadow:0 0 0 0 rgba(255,149,0,.55)}100%{box-shadow:0 0 0 10px rgba(255,149,0,0)}}
.suits{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.suits span{font-size:14px;font-weight:600;padding:6px 13px;border-radius:980px;background:#fff;box-shadow:inset 0 0 0 .5px var(--line)}
.suits .home{color:#A16207}.suits .out{color:#1E7B34}.suits .care{color:#0058B8}.suits .magic{color:#7E36B0}.suits .wild{color:#5F5F66}
.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:" \2193"}
.step-more a:hover{text-decoration:underline}

/* ---- 3D-versie (html.h3d): per stap een eigen schuine telefoon, draait in zijn stand zodra hij in beeld komt ---- */
.h3d .how-sticky>.ph3{display:none}
.h3d .hstep .hstill{perspective:1800px;perspective-origin:50% 45%}
.h3d .hstep .hstill .device{display:none}
.h3d .hstill .ph3{display:block;position:relative;left:auto;top:auto;margin:0;--w:min(300px,30vw)}
.h3d .hstill .ph3-body{transform:translateY(60px) rotateX(11deg) rotateY(-29deg) scale(.96);opacity:0;
  transition:transform 1.2s cubic-bezier(.2,.8,.2,1),opacity .6s ease}
.h3d .hstill .ph3.in .ph3-body{transform:rotateX(5deg) rotateY(-15deg);opacity:1}
.h3d .hstill .ph3-shadow{opacity:0;transition:opacity 1s ease .2s}
.h3d .hstill .ph3.in .ph3-shadow{opacity:.9}
.h3d .hstill .ph3-screen{--glare:32%}
.h3d .hstill .scr{opacity:1;z-index:2;transition:none}

/* de telefoon: --w = buitenbreedte. Scherm = een iPhone 17 Pro (1206 × 2622 px, statusbalk zit in de opname zelf). */
.ph3{--w:min(calc(min(78vh,760px) / 2.099),340px);--w:min(calc(min(78svh,760px) / 2.099),340px);--d:calc(var(--w) * .1);--r:calc(var(--w) * .165);
  position:absolute;left:50%;top:50%;width:var(--w);height:calc(var(--w) * 2.099);margin:calc(var(--w) * -1.0495) 0 0 calc(var(--w) * -.5);
  transform-style:preserve-3d;pointer-events:none}
.ph3-body{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.ph3-slab{position:absolute;inset:0;border-radius:var(--r);
  background:linear-gradient(100deg,#55555a 0%,#2c2c2f 12%,#3f3f43 40%,#26262a 70%,#4d4d52 100%)}
.ph3-slab:nth-child(1){transform:translateZ(calc(var(--d) * -.5))}
.ph3-slab:nth-child(2){transform:translateZ(calc(var(--d) * -.333))}
.ph3-slab:nth-child(3){transform:translateZ(calc(var(--d) * -.167))}
.ph3-slab:nth-child(4){transform:translateZ(0)}
.ph3-slab:nth-child(5){transform:translateZ(calc(var(--d) * .167))}
.ph3-slab:nth-child(6){transform:translateZ(calc(var(--d) * .333))}
.ph3-slab:nth-child(7){transform:translateZ(calc(var(--d) * .5))}
.ph3-edge{position:absolute;background:linear-gradient(90deg,#26262a,#5c5c61 45%,#3a3a3e 60%,#26262a)}
.ph3-edge.l,.ph3-edge.r{top:var(--r);bottom:var(--r);left:50%;width:var(--d);margin-left:calc(var(--d) * -.5)}
.ph3-edge.l{transform:rotateY(-90deg) translateZ(calc(var(--w) * .5 - .5px))}
.ph3-edge.r{transform:rotateY(90deg) translateZ(calc(var(--w) * .5 - .5px))}
.ph3-edge.t,.ph3-edge.b{left:var(--r);right:var(--r);top:50%;height:var(--d);margin-top:calc(var(--d) * -.5);background:linear-gradient(180deg,#26262a,#55555a 50%,#26262a)}
.ph3-edge.t{transform:rotateX(90deg) translateZ(calc(var(--w) * 1.0495 - .5px))}
.ph3-edge.b{transform:rotateX(-90deg) translateZ(calc(var(--w) * 1.0495 - .5px))}
.ph3-front,.ph3-back{position:absolute;inset:0;border-radius:var(--r);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.ph3-front{transform:translateZ(calc(var(--d) * .5 + 1px));background:#0b0b0c;padding:calc(var(--w) * .032);
  box-shadow:inset 0 0 0 calc(var(--w) * .008) #4a4a4e,inset 0 0 0 calc(var(--w) * .014) #1b1b1d}
.ph3-back{transform:rotateY(180deg) translateZ(calc(var(--d) * .5 + 1px));
  background:radial-gradient(120% 80% at 30% 20%,#3a3a3e 0%,#242427 60%,#1c1c1f 100%);box-shadow:inset 0 0 0 calc(var(--w) * .01) #4a4a4e}
.ph3-back .cam{position:absolute;left:7%;top:3.6%;width:44%;aspect-ratio:1;border-radius:24%;background:linear-gradient(145deg,#38383c,#222225);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 6px 14px rgba(0,0,0,.35)}
.ph3-back .cam b{position:absolute;width:40%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 35%,#2b3a55 0%,#05070d 45%,#000 70%);
  box-shadow:0 0 0 calc(var(--w) * .012) #3b3b40,0 0 0 calc(var(--w) * .02) #1a1a1c}
.ph3-back .cam b:nth-child(1){left:8%;top:8%}.ph3-back .cam b:nth-child(2){left:8%;bottom:8%}.ph3-back .cam b:nth-child(3){right:8%;top:30%}
.ph3-back .cam s{position:absolute;right:16%;top:10%;width:12%;aspect-ratio:1;border-radius:50%;background:#efe6d2}
.ph3-screen{position:relative;width:100%;height:100%;border-radius:calc(var(--w) * .135);overflow:hidden;background:#f2f2f7;
  font-size:calc(var(--w) * .936 / 39);isolation:isolate}
.ph3-screen .scr{position:absolute;inset:0;background:var(--sb);opacity:0;z-index:0;transition:opacity 0s linear .7s}
.ph3-screen .scr.was{opacity:1;z-index:1;transition:none}
.ph3-screen .scr.on{opacity:1;z-index:2;transition:opacity .65s ease}
.ph3-screen .scr video{position:absolute;left:0;right:0;top:0;width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:opacity .45s ease}
.ph3-screen .scr video.dim{opacity:0}
.ph3-screen .sbar{display:none}
.ph3-glare{position:absolute;inset:0;pointer-events:none;z-index:7;
  background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.14) 45%,rgba(255,255,255,0) 60%);background-size:260% 100%;background-position:var(--glare,50%) 0}
.ph3-shadow{position:absolute;left:8%;right:8%;bottom:-7%;height:9%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.28),rgba(0,0,0,0));transform:translateZ(-200px);filter:blur(4px);will-change:transform,opacity}

/* =====================================================================
   2 · ZONDAGOVERLEG (nagebouwd scherm)
   ===================================================================== */
.ov-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,80px);align-items:center;margin-top:8vh}
.ov-points li{transition:background .45s ease,box-shadow .45s ease}
.ov-points li.on{background:#fff;box-shadow:0 14px 34px -22px rgba(20,30,80,.28),0 0 0 .5px var(--line)}
.ov-stage{display:flex;justify-content:center;perspective:1600px}
.ov-device{--w:min(350px,30vw);transform:rotateY(-9deg) rotateX(3deg);transform-style:preserve-3d;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.ov-device:hover{transform:none}

.ovs,.ibs{position:relative;width:100%;aspect-ratio:1206/2622;border-radius:calc(var(--w) * .135);overflow:hidden;background:var(--cream);
  font-size:calc(var(--w) * .936 / 39);line-height:1.3;letter-spacing:-.01em;color:var(--ink);isolation:isolate;-webkit-user-select:none;user-select:none;contain:layout paint}
.ovs *{box-sizing:border-box}
.ovs svg,.ibs svg{display:block}
.ovs .sbar{background:var(--cream)}
.ovs-hd{position:absolute;left:0;right:0;top:4.9em;height:5.4em;display:flex;align-items:center;padding:0 1.6em}
.ovs-x{width:3.6em;height:3.6em;border-radius:50%;background:var(--warm);display:grid;place-items:center;flex:none}
.ovs-x svg{width:1.3em;height:1.3em;color:var(--ink)}
.ovs-ttl{flex:1;text-align:center;padding-right:3.6em}
.ovs-ttl b{display:block;font-size:1.7em;font-weight:700;line-height:1.15}
.ovs-ttl small{display:block;font-size:1.3em;color:#6e6e73;line-height:1.25;margin-top:.1em}
.ovs-body{position:absolute;left:0;right:0;top:10.6em;bottom:0}
.ovs-card{background:#fff;border-radius:1.8em;margin:1.4em 1.6em 0;padding:1.4em}
.ovs-lbl{font-size:1.3em;color:#6e6e73;margin-bottom:.62em}
.ovs-spk{display:flex;gap:1em}
.ovs-spk span{flex:1;border-radius:1.2em;border:.15em solid var(--appline);padding:1em .8em;text-align:center;font-size:1.6em;font-weight:600;transition:background .3s,color .3s,border-color .3s}
.ovs-spk span{padding:.62em .5em;border-radius:.75em}
.ovs-spk span.on{background:var(--ink);border-color:var(--ink);color:#fff}
.ovs-wave{height:4.4em;margin-top:1.4em;display:flex;align-items:center;justify-content:space-between}
.ovs-wave i{width:.4em;height:4.4em;border-radius:.2em;background:var(--rec);opacity:calc(.55 + .45 * var(--h));transform:scaleY(.08);
  animation:ovsBar var(--t,1.04s) ease-in-out infinite alternate;animation-delay:var(--dl,0s)}
@keyframes ovsBar{0%{transform:scaleY(calc(var(--h) * var(--a1,.2)))}100%{transform:scaleY(calc(var(--h) * var(--a2,.9)))}}
.ovs.paused .ovs-wave i{animation:none;transform:scaleY(.06);background:#86868b;opacity:.5}
.ovs-meta{display:flex;align-items:center;gap:.8em;margin-top:.8em}
.ovs-dot{width:.8em;height:.8em;border-radius:50%;background:var(--rec);animation:recBlink 1.6s ease-in-out infinite}
@keyframes recBlink{50%{opacity:.35}}
.ovs-time{font-size:1.5em;font-weight:600;font-variant-numeric:tabular-nums}
.ovs-hint{font-size:1.3em;color:#6e6e73;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ovs-min{margin-top:1.2em}
.ovs-min p{margin:0;font-size:1.7em;line-height:1.47;min-height:2.94em}
.ovs-min .w{color:var(--ink)}
.ovs-min .p{color:#6e6e73}
.ovs-tray{position:absolute;left:0;right:0;bottom:0;background:var(--cream);border-top:.5px solid var(--appline);padding:.6em 0 2.4em;z-index:3}
.ovs-stack{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;max-height:40em;transition:height .55s cubic-bezier(.2,.8,.2,1)}
.ovs-pc{background:#fff;border-radius:1.6em;margin:.8em 1.6em 0;padding:1.1em 1.4em;box-shadow:0 .3em .8em rgba(0,0,0,.05);
  transform-origin:50% 100%;animation:pcIn .62s cubic-bezier(.3,1.35,.5,1) both}
@keyframes pcIn{from{opacity:0;transform:translateY(2.8em) scale(.96)}to{opacity:1;transform:none}}
.ovs-pc.q{border:.15em solid rgba(255,149,0,.4)}
.ovs-pcb{display:flex;align-items:center;gap:1em}
.ovs-ki{width:3.2em;height:3.2em;border-radius:1em;background:var(--warm);display:grid;place-items:center;flex:none}
.ovs-ki svg{width:1.8em;height:1.8em}
.ovs-pcb b{display:block;font-size:1.6em;font-weight:600;line-height:1.25}
.ovs-pcb small{display:block;font-size:1.3em;color:#6e6e73;margin-top:.15em}
.ovs-ask{font-size:1.3em;color:var(--orange);font-weight:600;margin-top:.45em}
.ovs-who{display:flex;gap:.8em;margin-top:.6em}
.ovs-who span{flex:1;border-radius:1em;border:.15em solid var(--appline);padding:.5em;text-align:center;font-size:1.5em;font-weight:600;transition:background .25s,color .25s,border-color .25s}
.ovs-who span.on{background:var(--ink);border-color:var(--ink);color:#fff}
.ovs-act{display:flex;gap:.8em;margin-top:.9em}
.ovs-act span{flex:1;padding:.53em 0;border-radius:.67em;background:#f2f2f7;text-align:center;font-size:1.5em;font-weight:600;color:#6e6e73;transition:transform .15s}
.ovs-act span.ok{flex:1.4;background:var(--green);color:#fff;font-weight:700}
.ovs-act span.press{transform:scale(.95)}
.ovs-done{display:flex;align-items:center;gap:1em;margin:.8em 1.6em 0;padding:1em 1.4em;border-radius:1.4em;background:rgba(255,255,255,.67);animation:pcIn .5s ease both}
.ovs-done i{width:2.2em;height:2.2em;border-radius:50%;background:var(--green);display:grid;place-items:center;color:#fff;flex:none}
.ovs-done i svg{width:1.3em;height:1.3em}
.ovs-done b{flex:1;font-size:1.5em;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ovs-done em{font-style:normal;font-size:1.4em;color:var(--blue)}
.ovs-wait{display:flex;align-items:center;justify-content:center;gap:.8em;margin:.8em 1.6em 0;border-radius:1.8em;border:.15em dashed #d8d3c9;padding:1.2em 1.8em;font-size:1.5em;color:#6e6e73}
.ovs-wait i{width:1em;height:1em;border-radius:50%;border:.15em solid #c7c7cc;border-top-color:#6e6e73;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ovs-big{margin:1.2em 1.6em 0;border-radius:1.6em;padding:1.7em 0;background:var(--ink);color:#fff;text-align:center;font-size:1.7em;font-weight:700;line-height:1}
.ovs-big{font-size:1em;padding:1.55em 0}.ovs-big span{font-size:1.7em}
.ovs.fade .ovs-body,.ovs.fade .ovs-tray{opacity:0;transition:opacity .45s ease}
.ovs-body,.ovs-tray{transition:opacity .45s ease}
.ovs-touch{position:absolute;width:4.4em;height:4.4em;margin:-2.2em 0 0 -2.2em;border-radius:50%;background:rgba(0,0,0,.16);opacity:0;pointer-events:none;z-index:9}
.ovs-touch.go{animation:touch .55s ease-out}
@keyframes touch{0%{opacity:0;transform:scale(.4)}25%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.25)}}

/* =====================================================================
   3 · INBOX
   ===================================================================== */
.inbox{padding:16vh var(--gut);background:#fff;overflow:hidden}
.ib-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);align-items:center;max-width:1180px;margin:0 auto}
.ib-copy h2{font-size:clamp(36px,4.6vw,64px)}
.ib-addr{display:inline-flex;align-items:center;gap:14px;margin-top:30px;padding:14px 16px 14px 20px;border-radius:18px;background:var(--bg2);
  box-shadow:inset 0 0 0 .5px var(--line);max-width:100%}
.ib-at{font-size:clamp(19px,2vw,26px);font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;font-family:ui-monospace,"SF Mono",Menlo,monospace}
.ib-at{font-family:var(--font)}
.ib-at em{font-style:normal;color:var(--mute2)}
.ib-copyic{width:38px;height:38px;border-radius:11px;background:#fff;display:grid;place-items:center;color:var(--blue);flex:none;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.ib-copyic svg{width:20px;height:20px}
.ib-note{margin:10px 0 0;font-size:13px;color:var(--mute2)}
.ib-steps{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;max-width:32em}
.ib-steps li{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:start;padding:14px 16px;border-radius:20px;transition:background .45s,box-shadow .45s}
.ib-steps .ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--bg2);color:var(--mute2);transition:background .45s,color .45s}
.ib-steps .ic svg{width:19px;height:19px}
.ib-steps b{display:block;font-size:clamp(17px,1.4vw,19px);font-weight:600;letter-spacing:-.02em;line-height:1.25}
.ib-steps span{display:block;margin-top:3px;font-size:15px;line-height:1.45;color:var(--mute)}
.ib-steps li.on{background:var(--bg2)}
.ib-steps li.on .ic{background:var(--blue);color:#fff}
.ib-stage{position:relative;display:flex;justify-content:center;perspective:1600px}
.ib-device{--w:min(340px,29vw);transform:rotateY(8deg) rotateX(3deg);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.ib-device:hover{transform:none}
.ibs{background:#f2f2f7}
.ibs .sbar{display:none}
.ovs video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:opacity .45s ease}
.ovs video.dim{opacity:0}
.ibs video{position:absolute;left:0;right:0;top:0;width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:opacity .45s ease}
.ibs video.dim{opacity:0}

/* de mail die binnenvliegt */
.ib-mail{position:absolute;z-index:4;left:-6%;top:16%;width:min(300px,62%);background:#fff;border-radius:16px;padding:14px 16px;
  box-shadow:0 30px 60px -20px rgba(20,30,80,.35),0 0 0 .5px var(--line);font-size:13px;line-height:1.4;color:var(--ink);
  opacity:0;transform:translate(-40px,10px) rotate(-4deg);pointer-events:none}
.ib-mail .mh{display:flex;align-items:center;gap:10px}
.ib-mail .av{width:30px;height:30px;border-radius:50%;background:#FFE8CC;color:#A15C00;display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.ib-mail b{display:block;font-size:14px}
.ib-mail .to{font-size:12px;color:var(--mute)}
.ib-mail .to em{font-style:normal;color:var(--blue)}
.ib-mail .sj{font-weight:600;margin:10px 0 4px;font-size:14px}
.ib-mail p{margin:0;color:var(--mute)}
.ib-mail .att{display:flex;align-items:center;gap:8px;margin-top:10px;padding:8px;border-radius:10px;background:var(--bg2);font-size:12px;color:var(--mute)}
.ib-mail .att i{width:30px;height:40px;border-radius:5px;background:linear-gradient(#e9f1ff,#fff);box-shadow:inset 0 0 0 .5px var(--line);flex:none;position:relative}
.ib-mail .att i::before,.ib-mail .att i::after{content:"";position:absolute;left:5px;right:5px;height:3px;border-radius:2px;background:#cfdcf5;top:9px}
.ib-mail .att i::after{top:16px;right:10px}
.ib-mail.fly{animation:mailFly 1.9s cubic-bezier(.45,.05,.3,1) forwards}
@keyframes mailFly{
  0%{opacity:0;transform:translate(-60px,20px) rotate(-6deg) scale(1)}
  18%{opacity:1;transform:translate(0,0) rotate(-3deg) scale(1)}
  55%{opacity:1;transform:translate(0,0) rotate(-3deg) scale(1)}
  100%{opacity:0;transform:translate(var(--fx,150px),var(--fy,170px)) rotate(0) scale(.22)}}

/* =====================================================================
   responsive
   ===================================================================== */
@media (max-width:1080px){
}
@media (max-width:860px){
  .ov-grid,.ib-grid{grid-template-columns:1fr}
  .ov-stage{order:-1}
  .ov-device{--w:min(330px,74vw)}
  .ib-device{--w:min(320px,72vw)}
  .ib-mail{left:0}
}
@media (max-width:760px){
  .how{padding:0 20px}
  .how-head{padding:12vh 0 0}
  .hstep{grid-template-columns:1fr}
  .hstep .hstill{grid-column:1;grid-row:2;display:flex;justify-content:center;margin-top:30px}
  .hstep .hstill .device{--w:min(290px,72vw)}
  .h3d .hstill .ph3{--w:min(260px,64vw)}
  .h3d .hstill .ph3.in .ph3-body{transform:rotateX(5deg) rotateY(-10deg)}
  .h3d .hstep h2{font-size:clamp(28px,7.6vw,36px)}
  .h3d .hstep .lead{font-size:16px;margin-top:10px;line-height:1.38}
  .h3d .hstep .num{margin-bottom:8px;font-size:12px}
  .h3d .hstep .suits,.h3d .hstep .legend{margin-top:12px}
  .h3d .hstep .suits span{font-size:12px;padding:4px 10px}
  .h3d .hstep .legend{font-size:13px}
  .h3d .hstep .step-more{margin-top:10px;font-size:15px}
          .inbox,.overleg{padding:12vh 20px}
  .ov-points li{padding:18px}
  .ib-addr{gap:10px;padding:12px 12px 12px 16px}
  .ib-at{font-size:18px}
  .ib-mail{width:min(270px,74%);top:6%}
}
@media (prefers-reduced-motion:reduce){
  .legend .lg-or{animation:none}
  .ov-device,.ib-device{transform:none}
  .ovs-wave i{animation:none;transform:scaleY(calc(var(--h) * .5))}
  .ovs-dot{animation:none}
  .ovs-pc,.ovs-done{animation:none}
}

/* WIDGET — twee iPhones: beginscherm en vergrendelscherm. Scherm = 39em breed (402pt), maten in pt/10.31. */
.widget{padding:16vh var(--gut);background:var(--bg2);overflow:hidden}
.wg-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center;max-width:1180px;margin:0 auto}
.wg-copy h2{font-size:clamp(36px,4.6vw,64px)}
.wg-steps li{background:#fff}
.wg-steps .ic{background:var(--bg2);color:#B85200}
.wg-note{max-width:32em}
.wg-stage{display:flex;justify-content:center;align-items:flex-start;gap:clamp(14px,2.4vw,32px)}
.wg-phone{margin:0;display:flex;flex-direction:column;align-items:center}
.wg-phone-lock{margin-top:clamp(28px,6vw,72px)}
.wg-phone figcaption{margin-top:16px;font-size:13px;font-weight:600;color:var(--mute2)}
.wg-device{--w:min(270px,22vw)}
.wgs{position:relative;width:100%;aspect-ratio:1206/2622;border-radius:calc(var(--w) * .135);overflow:hidden;isolation:isolate;
  font-size:calc(var(--w) * .936 / 39);line-height:1.2;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  background:radial-gradient(120% 60% at 20% 8%,#4A5C8C 0%,rgba(74,92,140,0) 60%),radial-gradient(110% 70% at 90% 100%,#E09A6E 0%,rgba(224,154,110,0) 62%),linear-gradient(170deg,#2B3550 0%,#5B4A6E 52%,#B9806A 100%)}
.wgs *{box-sizing:border-box}
.wgs svg{display:block}
.wgs .sbar{color:#fff}
.wg-device img{display:block;height:auto;width:auto;aspect-ratio:auto;border-radius:0;object-fit:fill;background:none}
.wg-device .wgw{position:absolute;width:16.5em;filter:drop-shadow(0 .5em 1.2em rgba(0,0,0,.18))}
.wg-device .wgw-m{left:1.84em;top:6.2em;width:35.32em}
.wg-device .wgw-s1{left:1.84em;top:24.8em}
.wg-device .wgw-s2{right:1.84em;top:24.8em}
.wg-apps,.wg-dock{position:absolute;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);justify-items:center}
.wg-apps{left:.9em;right:.9em;top:43.6em;row-gap:2.4em}
.wg-apps li{display:flex;flex-direction:column;align-items:center;gap:.55em}
.wg-apps span{font-size:1.16em;font-weight:500;letter-spacing:0;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.ai{width:6.1em;height:6.1em;border-radius:1.42em;display:grid;place-items:center;overflow:hidden;font-style:normal;box-shadow:0 .2em .6em rgba(0,0,0,.12)}
.ai svg{width:62%;height:62%}
.wg-device .ai img{width:100%;height:100%}
.ai-cal{background:#fff;color:#111;display:flex;flex-direction:column;justify-content:center;gap:0;line-height:1}
.ai-cal b{font-size:1.05em;color:#E5483B;font-weight:600}
.ai-cal em{font-style:normal;font-size:3.2em;font-weight:400;letter-spacing:-.03em}
.ai-wx{background:linear-gradient(180deg,#3E8EF0,#79B6F7)}
.ai-note{background:linear-gradient(180deg,#FFD84D 0 24%,#fffdf6 24%)}
.ai-note svg{width:100%;height:100%}
.ai-clk{background:#111}.ai-clk svg{width:84%;height:84%}
.ai-map{background:linear-gradient(135deg,#7FD08A,#4CB06A 55%,#E6E0CF 55%)}
.ai-cam{background:linear-gradient(180deg,#e6e6ea,#b9b9c0)}
.ai-set{background:linear-gradient(180deg,#9a9aa2,#6c6c74)}
.ai-tel{background:linear-gradient(180deg,#5BE07A,#2DBE52)}
.ai-msg{background:linear-gradient(180deg,#5BE07A,#2DBE52)}
.ai-mail{background:linear-gradient(180deg,#5BB6FF,#1E7CF2)}
.ai-mus{background:linear-gradient(180deg,#FF6A7E,#F2304B)}
.wg-search{position:absolute;left:50%;top:60.6em;transform:translateX(-50%);display:flex;align-items:center;gap:.45em;padding:.62em 1.3em;border-radius:2em;
  background:rgba(255,255,255,.22);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:1.15em;font-weight:600}
.wg-search svg{width:1em;height:1em}
.wg-dock{left:1.1em;right:1.1em;bottom:1.1em;height:9.3em;align-items:center;border-radius:3.5em;padding:0 .8em;
  background:rgba(255,255,255,.24);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.wl-date{position:absolute;left:0;right:0;top:6.4em;margin:0;display:flex;justify-content:center;align-items:center;gap:.7em;font-size:1em;color:rgba(255,255,255,.92)}
.wl-date span{font-size:1.75em;font-weight:600}
.wg-device .wl-date img{height:1.87em;width:auto;opacity:.92}
.wl-time{position:absolute;left:0;right:0;top:.9em;margin:0;text-align:center;font-size:9.6em;font-weight:600;line-height:1;letter-spacing:-.02em;color:rgba(255,255,255,.95)}
.wl-row{position:absolute;left:0;right:0;top:21.4em;display:flex;justify-content:center;align-items:center;gap:1.2em}
.wg-device .wl-rect{width:15.5em}
.wg-device .wl-circ{width:7em}
.wl-btn{position:absolute;bottom:5.2em;width:4.9em;height:4.9em;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.28);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.wl-btn svg{width:2.3em;height:2.3em}
.wl-btn.l{left:4.4em}.wl-btn.r{right:4.4em}
.wl-bar{position:absolute;left:50%;bottom:.85em;width:13em;height:.5em;margin-left:-6.5em;border-radius:1em;background:#fff}
@media (max-width:860px){.wg-grid{grid-template-columns:1fr}.wg-device{--w:min(260px,40vw)}}
@media (max-width:760px){.widget{padding:12vh 20px}.wg-device{--w:min(230px,calc((100vw - 54px) / 2))}.wg-phone-lock{margin-top:36px}}