/* ==========================================================================
   richting C · salon.css · de salon-pagina
   Bovenop c.css, sheet.css en audit.css. Het idee van de pagina: de bezoeker bedient de app. De app-schermen
   zijn echte HTML in de warme stijl van het productontwerp (beige, olijf, Newsreader met Figtree), ingebed in
   de donkere site. Beweging die een gebaar volgt staat niet hier maar in salon.js (Motion.spring): een
   CSS-transition kun je niet vastpakken. Hier staat alleen directe feedback bij aanraken en het wisselen van
   toestanden zonder vinger erachter.
   Klassen op <html>, gezet voor de eerste verf (kop van salons.html):
   salon = JavaScript draait · salon-live = er mag beweging zijn · static = geen beweging.
   Let op: .wrap draagt de zijmarges. Zet op een element met .wrap nooit een padding-shorthand.
   ========================================================================== */

/* Het smalle koplettertype komt later binnen dan de brede terugval; zonder deze tussenstap breekt de kop
   bij het laden in meer regels en verspringt de held (zelfde aanpak als op de hub en de kiezer). */
@font-face{font-family:"Archivo terugval";src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Helvetica-Bold"),local("Arial");font-weight:600 900;size-adjust:76%}
:root{--display:'Archivo','Archivo terugval',sans-serif;
  --a-sans:'Figtree','Helvetica Neue',Arial,sans-serif;--a-serif:'Newsreader',Georgia,'Times New Roman',serif;
  --a-bg:#F6F1EA;--a-ink:#242B26;--a-ink2:#51554B;--a-ink3:#66675C;--a-line:#E6DFD3;--a-line2:#D6CDBE;--a-soft:#FAF7F2;--a-sand:#EFE8DE;
  --a-olive:#3D4A34;--a-olive-bg:#F1F5EA;--a-olive-tint:#DDE6D2;--a-ok:#3F7A2A;--a-ok-bg:#DFEBD5;--a-ok-ink:#2C5A1F;--a-amber-bg:#F7E6C8;--a-amber-ink:#75470A}
html.static .pulse{animation:none}
.nowrap{white-space:nowrap}
.sl-sprite{position:absolute;width:0;height:0;overflow:hidden}
html.salon .sl-no-js{display:none}
html:not(.salon) .sl-only-js{display:none}

/* ---------- wat de hub ook heeft: de knop met zijn geruststelling, de beloftes, de afsluiter per sectie ---------- */
.nav-note{display:none;font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-55);white-space:nowrap;margin-right:6px}
@media(min-width:1400px){.nav-note{display:inline}}
.nav-cta,.nav-cta-m{white-space:nowrap}
@media(max-width:700px){.nav-cta-m{display:none!important}} /* op een telefoon staat de knop al vast onderin */
@media(max-width:400px){.logo b{font-size:15px}}
.cta-note{font:500 11.5px/1.7 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-55)}
.cta-proof{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;font:500 13px/1.65 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg)}
.cta-proof .led{margin-right:12px;transform:translateY(-1px)}
.cta-proof-t > span{white-space:nowrap}
.cta-proof-t > span:not(:last-child):not([hidden])::after{content:"·";margin-left:.8em;margin-right:.3em;color:var(--fg-55)}
.cta-proof-t > span:nth-last-child(2):has(+ [hidden])::after{content:none}
.cta-proof [hidden]{display:none}
@media(max-width:400px){.cta-proof{font-size:12px;letter-spacing:.04em}.cta-proof-t > span{white-space:normal}}
.promises{list-style:none;margin:clamp(22px,2.6vw,32px) 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.promises li{display:grid;grid-template-columns:20px minmax(0,1fr);align-items:baseline;font-family:var(--display);font-weight:700;font-stretch:84%;font-variation-settings:'wdth' 84;
  text-transform:uppercase;letter-spacing:.015em;font-size:clamp(20px,1.9vw,27px);line-height:1.12}
.promises li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px rgba(198,242,78,.16);transform:translateY(-.18em)}
.cta-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px clamp(24px,4vw,64px);align-items:center;
  margin-top:clamp(40px,5vw,80px);padding-top:clamp(24px,3vw,40px);border-top:1px solid var(--line)}
.cta-line{font-family:var(--display);font-weight:800;font-stretch:76%;font-variation-settings:'wdth' 76;text-transform:uppercase;letter-spacing:.008em;
  font-size:clamp(26px,3vw,44px);line-height:1;max-width:24ch;text-wrap:balance}
.cta-act{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.cta-act .cta-note{max-width:44ch}
@media(max-width:860px){.cta-row{grid-template-columns:minmax(0,1fr)}.cta-act .btn{width:100%}}
.zone-ivory .btn-lime{background:var(--ink);color:var(--ivory)} /* op ivoor draagt inkt de knop; lime houdt daar geen rand */
@media(hover:hover) and (pointer:fine){.zone-ivory .btn-lime:hover{box-shadow:0 14px 30px -14px rgba(10,14,22,.75)}}
.zone-ivory .led{background:var(--cobalt-deep);box-shadow:0 0 0 3px rgba(20,54,245,.14)}
.zone-ivory .stamp-vb{border-color:rgba(20,54,245,.55)}
.sec-head .aside{min-width:0}
.sticky-cta .btn{flex-direction:column;gap:3px;min-height:54px;line-height:1.1}
.sticky-cta .btn small{font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.72}
.sticky-cta.is-hot{will-change:transform}
.btn-xl{min-height:66px;padding:0 34px;font-size:19px;border-radius:11px}
@media(max-width:560px){.btn-xl{width:100%;padding:0 18px;font-size:18px}}

/* ==========================================================================
   De telefoon en de app erin
   De telefoon is een maatvat: alles in de app is uitgedrukt in --u (één ontwerp-pixel van het scherm van
   390 breed). De app ziet er dus op elke breedte precies hetzelfde uit, scherp, zonder transform-schaal, en
   een vinger legt in de app dezelfde afstand af als op het scherm (1:1 volgen blijft kloppen).
   ========================================================================== */
.sl-phone{position:relative;width:min(100%,var(--pw,372px));container-type:inline-size;isolation:isolate;flex:none}
.sl-phone::before{content:"";position:absolute;inset:-12% -16%;z-index:-1;pointer-events:none;filter:blur(26px);
  background:radial-gradient(closest-side,rgba(20,54,245,.34),transparent 72%)}
.sl-phone::after{content:"";position:absolute;inset:4% -4%;z-index:-1;pointer-events:none;filter:blur(30px);border-radius:40%;
  background:radial-gradient(closest-side,rgba(246,241,234,.13),transparent 78%)} /* het lichte scherm straalt een beetje af op het donker */
.sl-bezel{position:relative;padding:2.5cqw;border-radius:13.4cqw;background:linear-gradient(155deg,#202A40,#0B101B 58%);border:1px solid rgba(140,162,255,.32);
  box-shadow:inset 0 1px 0 rgba(244,243,239,.16),0 50px 100px -40px rgba(20,54,245,.5),0 30px 60px -30px rgba(0,0,0,.9)}
.sl-bezel::before{content:"";position:absolute;right:-3px;top:23%;width:3px;height:10%;border-radius:0 2px 2px 0;background:#1C2539}
.sl-bezel::after{content:"";position:absolute;left:-3px;top:18%;width:3px;height:6%;border-radius:2px 0 0 2px;background:#1C2539;box-shadow:0 8cqw 0 #1C2539}
.sl-screen{position:relative;aspect-ratio:390/844;border-radius:11cqw;overflow:hidden;background:var(--a-bg);container-type:inline-size;
  -webkit-mask-image:-webkit-radial-gradient(white,black)} /* Safari knipt ronde hoeken anders niet bij kinderen met een transform */

.app,.mnd{font-family:var(--a-sans);color:var(--a-ink);-webkit-font-smoothing:antialiased;letter-spacing:0;text-align:left;color-scheme:light}
.app{--u:calc(100cqw / 390);position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;background:var(--a-bg);
  font-size:calc(15 * var(--u));line-height:1.4;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.mnd{--u:1px}
.app [hidden],.mnd [hidden]{display:none!important}
.app p,.mnd p{text-wrap:wrap;margin:0}
.app button,.mnd button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.app button:disabled,.mnd button:disabled{cursor:default;color:inherit;opacity:1}
.app :focus-visible,.mnd :focus-visible{outline:2px solid var(--a-olive);outline-offset:2px;border-radius:calc(14 * var(--u))}
.app b,.mnd b{font-weight:600}
.app small,.mnd small{font-size:calc(13 * var(--u));color:var(--a-ink3);font-weight:400}
.ic{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block}

.app-top{flex:none;display:flex;flex-direction:column;gap:calc(4 * var(--u));padding:calc(14 * var(--u)) calc(20 * var(--u)) 0}
.app-bar{display:flex;align-items:center;justify-content:space-between;height:calc(44 * var(--u));margin-bottom:calc(6 * var(--u))}
.app-merk{font:700 calc(13 * var(--u))/1 var(--a-sans);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;color:var(--a-ink)}
.app-bar-r{display:flex;align-items:center;gap:calc(10 * var(--u))}
.app-pill{display:inline-flex;align-items:center;height:calc(24 * var(--u));padding:0 calc(10 * var(--u));border-radius:999px;border:1px dashed var(--a-line2);color:var(--a-ink3);font-size:calc(12 * var(--u));font-weight:500;white-space:nowrap;flex:none}
.app-ava{display:inline-flex;align-items:center;justify-content:center;width:calc(36 * var(--u));height:calc(36 * var(--u));border-radius:50%;font-size:calc(13 * var(--u));font-weight:700;letter-spacing:.02em;flex:none}
.a-rose{background:#F3DDD3;color:#7A3E2B}.a-blue{background:#D9E6EA;color:#274B57}.a-sand{background:#EBDFC8;color:#5F4A1E}.a-olive{background:#DDE6D2;color:#2F4A26}
.app-meta{font-size:calc(14 * var(--u));color:var(--a-ink2)}
.app-h{font:400 calc(34 * var(--u))/1.1 var(--a-serif);letter-spacing:-.01em;color:var(--a-ink);font-optical-sizing:auto}
.app-h em{font-style:italic;color:var(--a-olive)}
.app-sub{font-size:calc(15 * var(--u));line-height:1.45;color:var(--a-ink2);margin-top:calc(2 * var(--u))}
.app-kick{font-size:calc(12 * var(--u));font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--a-ink3)}
.app-btn{display:inline-flex;align-items:center;justify-content:center;height:calc(48 * var(--u));padding:0 calc(22 * var(--u))!important;border-radius:999px;background:var(--a-olive)!important;color:#fff!important;font-size:calc(15 * var(--u));font-weight:600;transition:scale .1s ease-out}
.app-btn:active{scale:.97}
.app-tabs{position:relative;z-index:3;flex:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:calc(8 * var(--u)) calc(8 * var(--u)) calc(20 * var(--u));background:#fff;border-top:1px solid var(--a-line)}
.app-tabs span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(4 * var(--u));height:calc(56 * var(--u));color:var(--a-ink3);font-size:calc(12 * var(--u));font-weight:500}
.app-tabs .ic{width:calc(22 * var(--u));height:calc(22 * var(--u));stroke-width:1.6}
.app-tabs .on{color:var(--a-ink);font-weight:700}
.app-tabs .on .ic{color:var(--a-olive);stroke-width:1.9}
.tag{display:inline-flex;align-items:center;gap:calc(5 * var(--u));height:calc(24 * var(--u));padding:0 calc(11 * var(--u));border-radius:999px;font-size:calc(12 * var(--u));font-weight:600;white-space:nowrap;flex:none}
.tag .ic{width:calc(13 * var(--u));height:calc(13 * var(--u));stroke-width:2.2}
.tag-ok{background:var(--a-ok-bg);color:var(--a-ok-ink)}
.tag-amber{background:var(--a-amber-bg);color:var(--a-amber-ink)}
.tag-concept{background:#ECE7DD;color:#4A4A40}

/* ---------- 2 · vandaag: de opvolglijst ---------- */
.v-prog{flex:none;display:flex;flex-direction:column;gap:calc(8 * var(--u));padding:calc(14 * var(--u)) calc(20 * var(--u)) 0}
.v-prog-t{display:flex;align-items:center;justify-content:space-between;gap:calc(10 * var(--u));font-size:calc(13 * var(--u));font-weight:500;color:var(--a-ink2);white-space:nowrap}
.v-src{display:inline-flex;align-items:center;gap:calc(7 * var(--u))}
.v-src i{width:calc(8 * var(--u));height:calc(8 * var(--u));border-radius:50%;background:var(--a-ok);flex:none}
.v-count{font-weight:600;color:var(--a-ink);font-variant-numeric:tabular-nums}
.v-bar{height:calc(6 * var(--u));border-radius:999px;background:#E4DCCF;overflow:hidden}
.v-bar i{display:block;height:100%;border-radius:999px;background:var(--a-olive);transform:translate3d(-57.143%,0,0)} /* 3 van 7; de balk schuift in plaats van te schalen, dan blijft de kop rond */
.v-list{position:relative;list-style:none;margin:0;padding:calc(14 * var(--u)) calc(20 * var(--u)) 0;display:flex;flex-direction:column;gap:calc(10 * var(--u));flex:1;min-height:0}
.v-item{position:relative;flex:none}
.v-lane{position:absolute;inset:0;border-radius:calc(20 * var(--u));background:var(--a-olive);color:#fff;display:flex;align-items:center;justify-content:flex-end;padding-right:calc(24 * var(--u));opacity:0}
.v-lane span{display:inline-flex;flex-direction:column;align-items:center;gap:calc(5 * var(--u));font-size:calc(12 * var(--u));font-weight:600;letter-spacing:.02em;transform-origin:50% 50%}
.v-lane .ic{width:calc(24 * var(--u));height:calc(24 * var(--u));stroke-width:2.3}
.v-card{position:relative;display:flex!important;flex-direction:column;gap:calc(10 * var(--u));width:100%;padding:calc(13 * var(--u)) calc(14 * var(--u))!important;border-radius:calc(20 * var(--u));
  background:#fff!important;border:1px solid var(--a-line)!important;box-shadow:0 1px 2px rgba(36,43,38,.04);touch-action:pan-y!important;transition:scale .12s ease-out,background-color .12s}
html.salon .v-card:not(:disabled){cursor:pointer}
html.salon .v-card:not(:disabled):active{scale:.985;background:var(--a-soft)!important} /* direct bij aanraken, niet pas bij loslaten */
.v-row{display:flex;align-items:center;gap:calc(12 * var(--u));min-height:calc(44 * var(--u))}
.v-row .app-ava{width:calc(44 * var(--u));height:calc(44 * var(--u));font-size:calc(16 * var(--u))}
.v-who{display:flex;flex-direction:column;gap:calc(2 * var(--u));flex:1;min-width:0}
.v-who b{font-size:calc(17 * var(--u));line-height:1.25}
.v-who small{font-size:calc(14 * var(--u));line-height:calc(20 * var(--u));height:calc(20 * var(--u));color:var(--a-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-chev{width:calc(18 * var(--u));height:calc(18 * var(--u));color:#A9A294}
.v-chips{display:flex;flex-wrap:nowrap;gap:calc(6 * var(--u));overflow:hidden}
.chip{display:inline-flex;align-items:center;gap:calc(5 * var(--u));height:calc(28 * var(--u));padding:0 calc(10 * var(--u));border-radius:999px;background:var(--a-soft);color:var(--a-ink2);border:1px solid var(--a-line);font-size:calc(13 * var(--u));font-weight:600;white-space:nowrap;flex:none}
.chip .ic{width:calc(13 * var(--u));height:calc(13 * var(--u));stroke-width:1.9}
.chip-amber{background:var(--a-amber-bg);color:var(--a-amber-ink);border-color:var(--a-amber-bg)}
.chip-lilac{background:#E6E1F2;color:#4C4273;border-color:#E6E1F2}
.chip-blue{background:#DCE8EE;color:#2B4558;border-color:#DCE8EE}
@media(hover:hover) and (pointer:fine){
  html.salon .v-card:not(:disabled):hover{border-color:var(--a-line2)!important;box-shadow:0 6px 16px -10px rgba(36,43,38,.35)}
  html.salon .v-card:not(:disabled):hover .v-chev{color:var(--a-ink2)}
  .v-opt:hover{border-color:#C9BFAE!important}
  html.salon .bon-h:not(:disabled):hover{background:var(--a-soft)!important}
  .m-seg button:hover{color:var(--a-ink)}
}
/* afgerond: de kaart laat zien wat er is vastgelegd voordat hij wegschuift */
.v-item.is-done .v-card{pointer-events:none}
.v-item.is-done .v-row .app-ava{background:var(--a-olive);color:#fff}
.v-item.is-done .v-who b{color:var(--a-ink3)}
.v-done-t{display:inline-flex;align-items:center;gap:calc(6 * var(--u));height:calc(20 * var(--u));color:var(--a-ok-ink);font-weight:600;font-size:calc(14 * var(--u))}
.v-done-t .ic{width:calc(15 * var(--u));height:calc(15 * var(--u));stroke-width:2.4}
.v-empty{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:calc(12 * var(--u));padding:0 calc(34 * var(--u)) calc(30 * var(--u))}
.v-empty p{text-align:center;color:var(--a-ink2);font-size:calc(15 * var(--u));line-height:1.5}
.v-empty .app-h{color:var(--a-ink);font-size:calc(32 * var(--u))}
.v-empty-i{display:grid;place-items:center;width:calc(60 * var(--u));height:calc(60 * var(--u));border-radius:50%;background:var(--a-olive-tint);color:#2F4A26;margin-bottom:calc(4 * var(--u))}
.v-empty-i .ic{width:calc(26 * var(--u));height:calc(26 * var(--u));stroke-width:2.2}
.v-empty .app-btn{margin-top:calc(8 * var(--u))!important}
html.salon-live .v-empty{animation:sl-fade .4s ease both}
@keyframes sl-fade{from{opacity:0}to{opacity:1}}
/* de melding na afronden: alles is terug te draaien */
.v-toast{position:absolute;z-index:3;left:calc(14 * var(--u));right:calc(14 * var(--u));bottom:calc(98 * var(--u));display:flex;align-items:center;justify-content:space-between;gap:calc(10 * var(--u));
  min-height:calc(50 * var(--u));padding:calc(6 * var(--u)) calc(8 * var(--u)) calc(6 * var(--u)) calc(16 * var(--u));border-radius:calc(16 * var(--u));background:var(--a-ink);color:#fff;font-size:calc(14 * var(--u));font-weight:500;box-shadow:0 14px 30px -8px rgba(36,43,38,.45)}
.v-toast span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-toast button{flex:none;height:calc(38 * var(--u));padding:0 calc(12 * var(--u))!important;border-radius:calc(11 * var(--u));color:#DDE6D2!important;font-weight:600;font-size:calc(14 * var(--u))}
.v-toast button:active{background:rgba(255,255,255,.12)!important}
.app .v-toast :focus-visible{outline-color:#fff}
/* het blad in de telefoon: zelfde natuurkunde als sheet.js, in het klein */
.v-scrim{position:absolute;inset:0;z-index:4;background:rgba(36,43,38,.46);opacity:0;touch-action:pan-y}
.v-sheet{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;flex-direction:column;gap:calc(14 * var(--u));padding:0 calc(20 * var(--u)) calc(26 * var(--u));border-radius:calc(28 * var(--u)) calc(28 * var(--u)) 0 0;
  background:var(--a-bg);box-shadow:0 -12px 40px rgba(36,43,38,.18);touch-action:none;outline:none;cursor:grab}
.v-sheet::after{content:"";position:absolute;left:0;right:0;top:100%;height:calc(240 * var(--u));background:var(--a-bg)} /* bij doorschot van de veer geen gat onder het blad */
.v-sheet.is-hot{will-change:transform}
.v-grab{display:flex;align-items:center;justify-content:center;height:calc(26 * var(--u));margin-bottom:calc(-6 * var(--u))}
.v-grab i{width:calc(40 * var(--u));height:calc(4 * var(--u));border-radius:999px;background:var(--a-line2)}
.v-sheet-h{font:400 calc(30 * var(--u))/1.12 var(--a-serif);letter-spacing:-.01em}
.v-sheet-h em{font-style:italic;color:var(--a-olive)}
.v-sheet-sub{font-size:calc(14 * var(--u));line-height:1.45;color:var(--a-ink2);margin-top:calc(-8 * var(--u))!important}
.v-opts{display:flex;flex-direction:column;gap:calc(8 * var(--u))}
.v-opt{display:flex!important;align-items:center;gap:calc(12 * var(--u));min-height:calc(64 * var(--u));width:100%;padding:0 calc(14 * var(--u))!important;border-radius:calc(18 * var(--u));background:#fff!important;border:1.5px solid var(--a-line)!important;transition:scale .1s ease-out,background-color .1s,border-color .1s}
.v-opt:active,.v-opt.is-on{background:var(--a-olive-bg)!important;border-color:var(--a-olive)!important}
.v-opt:active{scale:.985}
.v-opt-i{display:grid;place-items:center;width:calc(40 * var(--u));height:calc(40 * var(--u));border-radius:50%;flex:none}
.v-opt-i .ic{width:calc(18 * var(--u));height:calc(18 * var(--u));stroke-width:1.9}
.o-olive{background:#DDE6D2;color:#2F4A26}.o-blue{background:#D9E6EA;color:#274B57}.o-sand{background:#EBDFC8;color:#5F4A1E}.o-lilac{background:#E3DEEE;color:#4A3F73}
.v-opt-t{display:flex;flex-direction:column;gap:calc(1 * var(--u));flex:1;min-width:0}
.v-opt-t b{font-size:calc(16 * var(--u));line-height:1.3}
.v-opt-t small{line-height:1.35}
.v-radio{width:calc(24 * var(--u));height:calc(24 * var(--u));border-radius:50%;border:1.5px solid var(--a-line2);flex:none;display:grid;place-items:center}
.v-opt.is-on .v-radio{background:var(--a-olive);border-color:var(--a-olive)}
.v-opt.is-on .v-radio::after{content:"";width:calc(9 * var(--u));height:calc(5 * var(--u));border-left:calc(2.2 * var(--u)) solid #fff;border-bottom:calc(2.2 * var(--u)) solid #fff;transform:translateY(-15%) rotate(-45deg)}
.m-toast{justify-content:center;text-align:center;transition:opacity .2s ease;min-height:calc(46 * var(--u));padding:calc(8 * var(--u)) calc(14 * var(--u))}
.m-toast span{white-space:normal;line-height:1.35}
/* minder beweging en ?static=1: geen veer en geen overgangen, wel een korte vervaging van het blad */
html.static .sl-phone *,html.static .mnd *{transition-duration:.01ms!important;animation:none!important}
.app.rm .v-sheet,.app.rm .v-scrim,.app.rm .v-toast{transition:opacity .2s ease!important}

/* ---------- 3 · mijn maand ---------- */
.m-title{overflow:hidden;height:calc(40 * var(--u))}
.m-title-track{display:flex;transform:translate3d(-200%,0,0)}
.m-title-track .app-h{flex:0 0 100%;white-space:nowrap}
.m-seg{position:relative;flex:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(4 * var(--u));margin:calc(14 * var(--u)) calc(20 * var(--u)) 0;padding:calc(4 * var(--u));border-radius:999px;background:var(--a-sand)}
.m-seg button{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:calc(5 * var(--u));height:calc(40 * var(--u));border-radius:999px;font-size:calc(14 * var(--u));font-weight:500;color:var(--a-ink2);transition:scale .1s ease-out}
.m-seg button:active{scale:.96}
.m-seg button[aria-pressed="true"]{color:var(--a-ink);font-weight:600}
.m-seg button .ic{width:calc(12 * var(--u));height:calc(12 * var(--u));stroke-width:2}
.m-seg button.is-locked{color:var(--a-ink3)}
.m-seg-pill{position:absolute;left:calc(4 * var(--u));top:calc(4 * var(--u));bottom:calc(4 * var(--u));width:calc((100% - 20 * var(--u)) / 4);border-radius:999px;background:#fff;box-shadow:0 1px 2px rgba(36,43,38,.1);
  transform:translate3d(calc(200% + 8 * var(--u)),0,0)}
.m-drag{flex:1;min-height:0;display:flex;flex-direction:column;padding-top:calc(14 * var(--u));touch-action:pan-y;outline:none}
html.salon .m-drag{cursor:grab}
.m-total{position:relative;z-index:2;flex:none;display:flex;flex-direction:column;gap:calc(6 * var(--u));margin:0 calc(20 * var(--u));padding:calc(18 * var(--u)) calc(20 * var(--u));border-radius:calc(22 * var(--u));background:var(--a-olive);color:#fff}
.m-total-l{font-size:calc(12 * var(--u));font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#E3E8DC}
.m-total-n{font:400 calc(46 * var(--u))/1.05 var(--a-serif);letter-spacing:-.01em;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.m-total-s{display:flex;align-items:center;gap:calc(7 * var(--u));padding-top:calc(4 * var(--u));font-size:calc(14 * var(--u));color:#F1F4EC}
.m-total-s .ic{width:calc(16 * var(--u));height:calc(16 * var(--u));stroke-width:1.9}
.m-view{position:relative;flex:1;min-height:0;overflow:hidden;margin-top:calc(12 * var(--u))}
.m-view::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(30 * var(--u));z-index:2;pointer-events:none;opacity:0;transition:opacity .2s;background:linear-gradient(var(--a-bg) 22%,rgba(246,241,234,0))}
.m-view.is-up::before{opacity:1}
.m-track{display:flex;height:100%;transform:translate3d(-200%,0,0)}
.m-track.is-hot{will-change:transform}
.m-page{flex:0 0 100%;min-width:0;padding:0 calc(20 * var(--u))}
.m-page-in{display:flex;flex-direction:column;gap:calc(12 * var(--u))}
.m-card{position:relative;display:flex;flex-direction:column;padding:calc(4 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u));border-radius:calc(20 * var(--u));background:#fff;border:1px solid var(--a-line)}
.m-line{display:flex;align-items:center;justify-content:space-between;gap:calc(12 * var(--u));min-height:calc(50 * var(--u));border-bottom:1px solid var(--a-line)}
.m-line > span:first-child{display:flex;flex-direction:column;gap:calc(1 * var(--u))}
.m-line b{font-size:calc(15 * var(--u))}
.m-calc{display:flex;align-items:baseline;gap:calc(6 * var(--u));font-variant-numeric:tabular-nums;white-space:nowrap}
.m-calc b{font-size:calc(16 * var(--u))}
.m-calc i{font-style:normal;font-size:calc(14 * var(--u));color:var(--a-ink2)}
.m-goal{display:flex;flex-direction:column;gap:calc(8 * var(--u));padding-top:calc(12 * var(--u))}
.m-goal-t{display:flex;align-items:center;justify-content:space-between;gap:calc(10 * var(--u))}
.m-goal-t > span{display:flex;align-items:center;gap:calc(8 * var(--u))}
.m-goal-t small{font-variant-numeric:tabular-nums;white-space:nowrap}
.m-goal-bar{height:calc(6 * var(--u));border-radius:999px;background:#E4DCCF;overflow:hidden}
.m-goal-bar i{display:block;height:100%;border-radius:999px;background:var(--a-olive);transform:translate3d(calc((var(--p,1) - 1) * 100%),0,0)}
.m-bons{padding:calc(2 * var(--u)) 0 calc(14 * var(--u))}
.m-bons-h{display:flex;align-items:center;justify-content:space-between;min-height:calc(44 * var(--u));padding:0 calc(16 * var(--u))}
.m-bons-h > span:first-child{display:flex;align-items:baseline;gap:calc(8 * var(--u))}
.m-all{font-size:calc(13 * var(--u));font-weight:600;color:var(--a-olive)}
.m-bons ul{list-style:none;margin:0;padding:0}
.bon{position:relative;background:#fff}
.bon-h{display:flex!important;align-items:center;gap:calc(12 * var(--u));width:100%;min-height:calc(57 * var(--u));padding:0 calc(14 * var(--u)) 0 calc(16 * var(--u))!important;border-top:1px solid var(--a-line)!important;background:#fff!important;transition:background-color .1s}
html.salon .bon-h:not(:disabled):active{background:var(--a-soft)!important}
.bon-i{display:grid;place-items:center;width:calc(36 * var(--u));height:calc(36 * var(--u));border-radius:calc(12 * var(--u));background:var(--a-soft);color:var(--a-ink2);flex:none}
.bon-i .ic{width:calc(17 * var(--u));height:calc(17 * var(--u));stroke-width:1.7}
.bon-t{display:flex;flex-direction:column;gap:calc(1 * var(--u));flex:1;min-width:0}
.bon-t b{font-size:calc(15 * var(--u));font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bon-a{font-size:calc(15 * var(--u));font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.bon-c{width:calc(16 * var(--u));height:calc(16 * var(--u));color:#A9A294;transition:rotate .25s var(--ease)}
.bon-h[aria-expanded="true"] .bon-c{rotate:90deg}
.bon-lines{padding:0 calc(16 * var(--u)) calc(12 * var(--u)) calc(64 * var(--u));display:flex;flex-direction:column;background:#fff}
.bon-line{display:flex;justify-content:space-between;gap:calc(10 * var(--u));padding:calc(7 * var(--u)) 0;border-top:1px dashed var(--a-line);font-size:calc(14 * var(--u))}
.bon-line > span{display:flex;flex-direction:column;gap:calc(1 * var(--u));min-width:0}
.bon-line > span:last-child{align-items:flex-end;font-variant-numeric:tabular-nums;white-space:nowrap}
.bon-line small{font-size:calc(12 * var(--u))}
.bon-line .plus{color:var(--a-ok-ink);font-weight:600}
.bon-sum{margin-top:calc(8 * var(--u))!important;padding:calc(8 * var(--u)) calc(10 * var(--u));border-radius:calc(10 * var(--u));background:var(--a-olive-bg);font-size:calc(13 * var(--u));color:var(--a-ink2)}
.bon-sum b{color:var(--a-ink)}

/* ---------- 4 · de maand van de eigenaar (breed scherm) en de telefoon van de behandelaar ---------- */
.g-comp{display:grid;grid-template-columns:minmax(0,1fr) min(25%,300px);align-items:end;margin-top:clamp(20px,2.6vw,36px)}
.sl-desk{position:relative;min-width:0;border-radius:18px;background:#121A2A;border:1px solid var(--line);padding:10px;isolation:isolate;
  box-shadow:inset 0 1px 0 rgba(244,243,239,.1),0 50px 100px -40px rgba(20,54,245,.45),0 30px 60px -30px rgba(0,0,0,.85)}
.sl-desk-bar{display:flex;align-items:center;gap:6px;padding:2px 4px 10px}
.sl-desk-bar i{width:8px;height:8px;border-radius:50%;background:rgba(244,243,239,.16)}
.sl-desk-bar .url{margin:0 auto;font:500 10px var(--mono);letter-spacing:.06em;color:var(--fg-55);background:rgba(10,14,22,.6);border:1px solid var(--line-soft);padding:4px 12px;border-radius:5px;transform:translateX(-21px)}
/* .mnd is het maatvat; een vat kan zichzelf niet bevragen, dus het raster staat een laag dieper */
.mnd{position:relative;container:mnd / inline-size;border-radius:10px;overflow:hidden;background:var(--a-bg);font-size:14px;line-height:1.4}
.mnd-in{display:grid;grid-template-columns:minmax(0,1fr)}
.mnd-side{display:none}
.mnd-main{display:flex;flex-direction:column;gap:18px;padding:22px 18px 20px;min-width:0}
.mnd-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.mnd-head .app-pill{display:none;margin-top:2px}
.mnd-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font:400 40px/1.08 var(--a-serif);letter-spacing:-.01em;margin-top:4px!important}
.mnd-h .tag{height:28px;font-size:13px;font-family:var(--a-sans);letter-spacing:0;transition:background-color .3s,color .3s}
.mnd-sub{font-size:15.5px;color:var(--a-ink2);margin-top:8px!important;max-width:52ch}
.mnd-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);border-radius:16px;background:#fff;border:1px solid var(--a-line);overflow:hidden}
.mnd-steps li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 10px;align-items:center;min-height:48px;padding:6px 14px;border-top:1px solid var(--a-line);transition:background-color .3s,border-color .3s}
.mnd-steps li:first-child{border-top:0}
.mnd-steps .n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font-size:13px;font-weight:600;background:var(--a-olive);color:#fff;transition:background-color .3s,color .3s}
.mnd-steps b{font-size:15px}
.mnd-steps .v{font:400 17px/1.2 var(--a-serif);color:var(--a-ink);text-align:right}
.mnd-steps .is-open .n{background:var(--a-amber-bg);color:var(--a-amber-ink)}
.mnd-steps .is-lock{background:var(--a-soft)}
.mnd-steps .is-lock .n{background:transparent;color:var(--a-ink3);box-shadow:inset 0 0 0 1.5px var(--a-line2)}
.mnd-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
.mnd-panel{position:relative;border-radius:18px;background:#fff;border:1px solid var(--a-line);overflow:hidden}
.mnd-panel-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px 12px}
.mnd-panel-h b{font:400 23px/1.15 var(--a-serif)}
.mnd-panel-h .tag{height:26px;font-size:13px;transition:background-color .3s,color .3s}
.mnd-panel-h > span{display:flex;flex-direction:column;gap:3px}
.mnd-panel-h small{font-size:12.5px}
.afw{display:grid;grid-template-columns:38px minmax(0,1fr);gap:4px 14px;padding:14px 18px 16px;border-top:1px solid var(--a-line);transition:background-color .3s}
.afw-i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--a-amber-bg);color:var(--a-amber-ink);transition:background-color .3s,color .3s}
.afw-i .ic{width:18px;height:18px}
.afw-t b{font-size:15px}
.afw-t p{font-size:13.5px;line-height:1.45;color:var(--a-ink2);margin-top:2px!important}
.afw-act,.afw-done{grid-column:1/3;display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:40px;margin-top:8px}
.afw-done{flex-wrap:nowrap;justify-content:space-between;gap:12px}
.afw-done > span{min-width:0}
.abtn{display:inline-flex!important;align-items:center;justify-content:center;height:40px;padding:0 14px!important;border-radius:999px;background:#fff!important;border:1px solid var(--a-line2)!important;font-size:14px;font-weight:600;white-space:nowrap;transition:scale .1s ease-out,background-color .1s,border-color .1s}
.abtn:not(:disabled):active{scale:.96;background:var(--a-olive-bg)!important;border-color:var(--a-olive)!important}
@media(hover:hover) and (pointer:fine){.abtn:not(:disabled):hover{border-color:var(--a-ink3)!important}}
.afw-done{font-size:13.5px;line-height:1.4;color:var(--a-ok-ink);font-weight:600}
.alink{flex:none;font-size:13.5px;font-weight:600;color:var(--a-ink2)!important;text-decoration:underline;text-underline-offset:3px;min-height:40px;padding:0 6px!important}
.afw.is-done{background:#FBFDF8}
.afw.is-ping{animation:afw-ping .8s ease}
@keyframes afw-ping{0%,100%{background-color:rgba(247,230,200,0)}30%{background-color:rgba(247,230,200,.75)}}
.afw.is-done .afw-i{background:var(--a-olive-tint);color:#2F4A26}
.mnd-note{padding:13px 18px;background:var(--a-soft);border-top:1px solid var(--a-line);font-size:13px;color:var(--a-ink2)}
.mnd-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;min-height:64px;padding:0 18px;border-top:1px solid var(--a-line);font-size:15px;font-variant-numeric:tabular-nums}
.mnd-row-h{min-height:36px;background:var(--a-soft);font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--a-ink3)}
.mnd-row-h > span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mnd-wide{display:none}
.mnd-row .who{display:flex;align-items:center;gap:12px;min-width:0}
.mnd-row .who > span:last-child{display:flex;flex-direction:column;gap:1px;min-width:0}
.mnd-row .who small{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mnd-row .who .app-ava{width:36px;height:36px;font-size:14px}
.mnd-row .com{display:flex;flex-direction:column;align-items:flex-end;gap:0;text-align:right}
.mnd-row .com b{font-size:16px;white-space:nowrap}
.mnd-row .com small{font-size:12px;color:var(--a-amber-ink);font-weight:600;min-height:16px}
.mnd-row.is-prov{background:#FFFBF3;transition:background-color .3s}
.mnd-row-t{background:var(--a-soft);min-height:70px}
.mnd-row-t .com b{font:400 24px/1.1 var(--a-serif)}
.mnd-ok{display:flex;flex-direction:column;gap:12px;padding:16px 18px 18px;border-top:1px solid var(--a-line)}
.mnd-ok-t{font-size:13.5px;line-height:1.45;color:var(--a-ink2);min-height:39px}
.mnd-ok-b{position:relative;display:flex;align-items:center;min-height:54px}
.gbtn{display:inline-flex!important;align-items:center;justify-content:center;gap:9px;height:50px;padding:0 24px!important;border-radius:999px;background:#E9E2D6!important;border:1px solid #E9E2D6!important;color:#5F5E53!important;font-size:15.5px;font-weight:600;white-space:nowrap;
  transition:scale .1s ease-out,background-color .3s,color .3s,border-color .3s}
.gbtn .ic{width:16px;height:16px;stroke-width:2}
.gbtn.is-ready{background:var(--a-olive)!important;border-color:var(--a-olive)!important;color:#fff!important;box-shadow:0 10px 24px -12px rgba(61,74,52,.8)}
.gbtn.is-ready:active{scale:.97}
@media(max-width:520px){.mnd-ok .gbtn{width:100%}}
/* het stempel landt waar je drukte, zoals op papier */
.g-stamp{position:absolute;left:4px;top:50%;margin-top:-27px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 14px 6px;border:3px solid #2F6B1F;border-radius:9px;color:#2F6B1F;
  background:rgba(223,235,213,.72);box-shadow:inset 0 0 0 1.5px rgba(223,235,213,.9),inset 0 0 0 3px rgba(47,107,31,.5);transform:rotate(-5deg) scale(1.5);transform-origin:50% 50%;opacity:0;pointer-events:none}
.g-stamp b{font:800 25px/1 var(--display);font-stretch:74%;font-variation-settings:'wdth' 74;letter-spacing:.05em;text-transform:uppercase}
.g-stamp small{font:600 9.5px/1.3 var(--mono)!important;letter-spacing:.12em;text-transform:uppercase;color:#2F6B1F!important}
.g-phone{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-end;gap:12px;margin-left:-30px;margin-bottom:clamp(-44px,-3vw,-20px);min-width:0}
.g-phone .sl-phone{--pw:100%}
.g-phone-cap{display:flex;flex-direction:column;align-items:center;gap:2px;font:500 10.5px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-55);align-self:center;text-align:center;max-width:100%}
.g-phone-st{display:inline-flex;align-items:center;gap:9px;color:var(--fg-70)}
.gp-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:calc(12 * var(--u));padding:calc(16 * var(--u)) calc(20 * var(--u)) 0}
.gp-card{position:relative;flex:none}
.gp-card .m-total{margin:0}
.m-total-lock{background:var(--a-sand);color:var(--a-ink3);border:1px dashed var(--a-line2)}
.m-total-lock .m-total-l,.m-total-lock .m-total-s{color:var(--a-ink3)}
.m-total-lock .m-total-n{color:#B4AB9B;letter-spacing:.06em}
.gp-open{position:absolute!important;inset:0;opacity:0}
.gp-build{flex:none;overflow:hidden}
.gp-build .m-line:last-of-type{border-bottom:0}
.gp-veil{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:calc(8 * var(--u));background:rgba(250,247,242,.96);color:var(--a-ink3);font-size:calc(14 * var(--u));font-weight:500;border-radius:inherit}
.gp-veil .ic{width:calc(15 * var(--u));height:calc(15 * var(--u))}
.gp-prev{flex:none;padding-bottom:calc(6 * var(--u))}
.gp-prev .m-bons-h{padding:0}
.gp-prev{padding-left:calc(16 * var(--u));padding-right:calc(16 * var(--u))}
.gp-prev-r{display:flex;justify-content:space-between;align-items:center;min-height:calc(46 * var(--u));border-top:1px solid var(--a-line);font-size:calc(15 * var(--u));font-variant-numeric:tabular-nums}
.gp-push{position:absolute;z-index:6;left:calc(10 * var(--u));right:calc(10 * var(--u));top:calc(10 * var(--u));display:flex;align-items:center;gap:calc(12 * var(--u));padding:calc(12 * var(--u)) calc(14 * var(--u));border-radius:calc(20 * var(--u));
  background:rgba(36,43,38,.94);color:#fff;box-shadow:0 18px 40px -12px rgba(36,43,38,.6);transform:translate3d(0,-130%,0)}
.gp-push-i{display:grid;place-items:center;width:calc(36 * var(--u));height:calc(36 * var(--u));border-radius:calc(11 * var(--u));background:var(--a-olive);flex:none}
.gp-push-i .ic{width:calc(20 * var(--u));height:calc(20 * var(--u))}
.gp-push span:last-child{display:flex;flex-direction:column;gap:calc(1 * var(--u));min-width:0}
.gp-push b{font-size:calc(14.5 * var(--u))}
.gp-push small{color:#D5DACF!important;font-size:calc(13 * var(--u))}
@container mnd (min-width:760px){
  .mnd-in{grid-template-columns:184px minmax(0,1fr)}
  .mnd-side{display:flex;flex-direction:column;gap:26px;padding:26px 12px 16px;background:var(--a-sand)}
  .mnd-side .app-merk{padding:0 12px;font-size:13.5px}
  .mnd-side ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;flex:1}
  .mnd-side li{display:flex;align-items:center;gap:11px;height:42px;padding:0 12px;border-radius:12px;font-size:15px;font-weight:500;color:var(--a-ink2)}
  .mnd-side li .ic{width:18px;height:18px;stroke-width:1.7}
  .mnd-side li.on{background:#fff;color:var(--a-ink);font-weight:600;box-shadow:0 1px 2px rgba(36,43,38,.07)}
  .mnd-side li.on .ic{color:var(--a-olive)}
  .mnd-side li b{margin-left:auto;display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--a-amber-bg);color:var(--a-amber-ink);font-size:12px;font-weight:700}
  .mnd-me{display:flex;align-items:center;gap:10px;padding:0 10px}
  .mnd-me .app-ava{width:34px;height:34px;font-size:12px}
  .mnd-me > span:last-child{display:flex;flex-direction:column;font-size:14px;font-weight:600;line-height:1.25}
  .mnd-me small{font-size:12px}
  .mnd-main{padding:26px 26px 26px;gap:20px}
  .mnd-head .app-pill{display:inline-flex}
  .mnd-wide{display:inline}
  .mnd-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;border:0;border-radius:0;background:none;overflow:visible}
  .mnd-steps li{grid-template-columns:auto minmax(0,1fr);min-height:0;padding:13px 14px 14px;border-radius:16px;background:#fff;border:1px solid var(--a-line)}
  .mnd-steps li:first-child{border-top:1px solid var(--a-line)}
  .mnd-steps .v{grid-column:1/3;font-size:19px;text-align:left}
  .mnd-steps .is-lock{border-style:dashed;border-color:var(--a-line2);background:var(--a-soft)}
  .mnd-cols{grid-template-columns:minmax(0,1fr) minmax(0,1.18fr)}
  .mnd-row{padding:0 20px}
}
@container mnd (max-width:300px){
  .mnd-steps b{font-size:14px}
  .mnd-steps .v{font-size:15.5px}
  .mnd-steps li{gap:4px 8px;padding:6px 12px}
  .mnd-row .who small{display:none}
  .mnd-h{font-size:34px}
}
@container mnd (min-width:760px) and (max-width:900px){
  .mnd-cols{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:1080px){
  .g-comp{grid-template-columns:minmax(0,1fr);justify-items:center;gap:26px}
  .sl-desk{width:100%}
  .g-phone{margin:0;align-items:center;width:100%}
  .g-phone .sl-phone{--pw:340px;max-height:clamp(380px,112vw,470px);overflow:hidden;
    -webkit-mask-image:linear-gradient(#000 76%,transparent);mask-image:linear-gradient(#000 76%,transparent)}
  .g-phone .sl-phone::before,.g-phone .sl-phone::after{display:none}
}

/* ==========================================================================
   De pagina om de app heen
   ========================================================================== */
/* 1 · held */
.sl-hero{position:relative;isolation:isolate;padding-bottom:clamp(40px,4.4vw,72px)}
.sl-hero-plane{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(244,243,239,.06),rgba(244,243,239,.014));
  border-bottom:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(244,243,239,.06)}
/* de kolom van de telefoon is zo breed als de telefoon plus het stuk logboek dat ernaast zichtbaar is; de rest is voor de kop.
   Zo past "Een maandafsluiting" op elke breedte op één regel en staat de kop in drie regels. */
.sl-hero{--hp:clamp(300px,calc((100svh - 252px) * .4621),372px)}
.sl-hero .hero-grid{grid-template-columns:minmax(0,1fr) calc(var(--hp) + 230px);gap:clamp(28px,4vw,72px);align-items:center}
/* de kop meet zich aan zijn eigen kolom: "Een maandafsluiting" (9,4 em breed) vult de eerste regel, op elke schermbreedte */
.sl-hero-copy{container-type:inline-size;min-width:0}
.sl-hero h1{font-size:clamp(28px,10.35cqw,88px);margin-top:18px;hyphens:none;line-height:.94}
.sl-hero .lede{margin-top:clamp(18px,2.2vw,28px)}
.sl-hero .cta-proof{margin-top:20px}
.sl-hero .cta-note{margin-top:8px}
.sl-comp{position:relative;margin:0;min-width:0;display:grid;justify-items:end;align-content:start}
.sl-phone-hero{--pw:var(--hp);z-index:1}
.sl-log{position:absolute;left:0;top:13%;z-index:0;width:calc(100% - var(--hp) + 58px);padding:16px 76px 14px 18px;display:flex;flex-direction:column;gap:12px;
  background:linear-gradient(180deg,rgba(19,27,43,.94),rgba(14,20,32,.94))}
.sl-log-bar{display:flex;align-items:center;gap:10px;white-space:nowrap;font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-70);padding-bottom:12px;border-bottom:1px solid var(--line-soft)}
.sl-log-bar .r{margin-left:auto;color:var(--fg-55);letter-spacing:.08em}
.sl-log ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.sl-log li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;font-size:13.5px;line-height:1.4;color:var(--fg-70)}
.sl-log time{font:500 11.5px/1.65 var(--mono);color:var(--fg-55);letter-spacing:.04em}
.sl-log li.on{color:var(--fg)}
.sl-log li.on time{color:var(--lime)}
.sl-fig{justify-self:end;margin-top:18px;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:flex-end}
.sl-fig .stamp{flex:none}
.sl-fig-t{display:block;min-width:0}
.sl-fine{color:var(--fg-55)}
.sl-peek-go{display:none}
/* tekstronde 2 (S12): op brede schermen stond het scherm "Goedemorgen, Jade" twee keer in beeld (hero en Vandaag).
   Daar toont de hero alleen de nachtdienststrook; smaller blijft de telefoon, want dan is de strook er niet. */
@media(min-width:1260px){.sl-phone-hero,.sl-fig-t{display:none}.sl-log{position:relative;top:auto;left:auto;width:100%;padding:16px 18px 14px}}
@media(max-width:1259px){.sl-log{display:none}.sl-hero .hero-grid{grid-template-columns:minmax(0,1fr) var(--hp)}.sl-fig{justify-content:center;justify-self:center}}
@media(max-width:940px){
  .sl-hero .hero-grid{grid-template-columns:minmax(0,1fr)}
  .sl-hero{padding-bottom:0}
  /* op een telefoon is de held een voorproefje: de bovenkant van de app, afgesneden, met een knop naar de echte eronder.
     Het masker zit op de behuizing, niet op de hele telefoon: de knop blijft scherp. */
  .sl-phone-hero{--pw:340px;--peek:clamp(300px,96vw,430px);max-height:var(--peek);overflow:hidden}
  .sl-phone-hero .sl-bezel{-webkit-mask-image:linear-gradient(#000 calc(var(--peek) * .52),transparent calc(var(--peek) * .98));mask-image:linear-gradient(#000 calc(var(--peek) * .52),transparent calc(var(--peek) * .98))}
  .sl-phone-hero::before,.sl-phone-hero::after{display:none}
  .sl-phone-hero .app{pointer-events:none}
  .sl-peek-go{display:flex;position:absolute;inset:0;z-index:9;align-items:flex-end;justify-content:center;padding-bottom:22px;text-decoration:none;-webkit-tap-highlight-color:transparent}
  .sl-peek-go span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font:600 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:var(--lime);
    padding:11px 14px 10px;border-radius:999px;box-shadow:0 10px 24px -10px rgba(0,0,0,.8);transition:transform .1s ease-out}
  .sl-peek-go span i{font-style:normal}
  .sl-peek-go:active span{transform:scale(.96)}
  .sl-fig{display:none}
}
@media(max-width:560px){.sl-hero .hero-ctas .btn{width:100%}}

/* 2 en 3 · een telefoon met tekst ernaast */
.sl-demo .sec-in{padding-top:clamp(64px,8vw,128px)}
.sl-band{background:linear-gradient(180deg,rgba(244,243,239,.04),rgba(244,243,239,.012))}
.sl-duo{display:grid;gap:clamp(32px,6vw,112px);align-items:center}
.sl-duo-l{grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}
.sl-duo-r{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}
.sl-stage{display:flex;flex-direction:column;align-items:center;gap:20px;min-width:0}
.sl-stage .sl-phone{--pw:clamp(300px,calc((100svh - 170px) * .4621),384px)}
.sl-under{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px;min-height:36px}
.sl-keys{font:500 10.5px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-55)}
@media(hover:none) and (pointer:coarse){.sl-keys{display:none}}
@media(max-width:700px){.sl-keys{display:none}}
.sl-again{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:rgba(244,243,239,.04);color:var(--fg);
  font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:transform .1s ease-out,background .15s,border-color .15s}
.sl-again[hidden]{display:none}
.sl-again-link{text-decoration:none;color:var(--lime);border-color:rgba(198,242,78,.4)}
.sl-again .ic{width:13px;height:13px;stroke-width:2}
.sl-again:active{transform:scale(.95)}
@media(hover:hover) and (pointer:fine){.sl-again:hover{background:rgba(244,243,239,.09);border-color:rgba(140,162,255,.5)}}
.sl-text{min-width:0}
.sl-text h2{font-size:clamp(38px,4.5vw,74px);margin-top:14px;max-width:16ch}
.sl-text .sub{margin-top:clamp(16px,1.8vw,24px);max-width:52ch;color:var(--fg-70);font-size:clamp(16.5px,1.2vw,19px);line-height:1.55}
.sl-try{margin-top:clamp(20px,2.2vw,30px);padding:14px 18px 15px;border:1px solid var(--line);border-left:3px solid var(--lime);border-radius:4px 12px 12px 4px;background:rgba(244,243,239,.03);
  font-size:15.5px;line-height:1.55;color:var(--fg-70);max-width:54ch}
.sl-try b{color:var(--fg);font-weight:600}
.sl-try-k{display:block;font:500 10.5px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--lime);margin-bottom:4px}
.sl-try-wide{max-width:72ch;margin-top:0}
.sl-facts{list-style:none;margin:clamp(22px,2.4vw,32px) 0 0;padding:0;display:flex;flex-direction:column;max-width:54ch}
.sl-facts li{position:relative;padding:13px 0 13px 26px;border-top:1px solid var(--line-soft);font-size:15.5px;line-height:1.5;color:var(--fg-70)}
.sl-facts li:last-child{border-bottom:1px solid var(--line-soft)}
.sl-facts li::before{content:"";position:absolute;left:2px;top:21px;width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px rgba(198,242,78,.14)}
.sl-kern{margin:clamp(24px,2.8vw,38px) 0 0;padding:2px 0 2px 20px;border-left:3px solid var(--lime)}
.sl-kern p + p{color:var(--lime);margin-top:6px}
.sl-kern p{font-family:var(--display);font-weight:700;font-stretch:84%;font-variation-settings:'wdth' 84;text-transform:uppercase;letter-spacing:.012em;font-size:clamp(23px,2.2vw,32px);line-height:1.1;color:var(--fg)}
@media(max-width:900px){
  .sl-duo{grid-template-columns:minmax(0,1fr);row-gap:0}
  /* op een telefoon: kop en uitleg, dan de app, dan de feiten. Eén DOM-volgorde, de tekstkolom lost op in het raster. */
  .sl-text{display:contents}
  .sl-text > *{order:1}
  .sl-stage{order:2;margin-top:28px}
  .sl-text > .sl-facts{order:3}
  .sl-text h2{max-width:none}
  .sl-stage .sl-phone{--pw:384px}
}

/* 4 */
.ln{display:block}
.g-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px clamp(32px,5vw,96px);align-items:end}
.g-head h2{font-size:clamp(36px,5.2vw,86px);margin-top:14px;max-width:15ch}
.g-head .sub{color:var(--fg-70);font-size:clamp(16.5px,1.2vw,19px);line-height:1.55;max-width:56ch}
.g-head .sl-try{margin-top:20px}
.g-under{margin-top:clamp(56px,5vw,76px);justify-content:flex-start}
@media(max-width:1080px){.g-under{margin-top:18px;justify-content:center}}
@media(max-width:900px){.g-head{grid-template-columns:minmax(0,1fr)}}
.sl-eerlijk{margin:clamp(40px,5vw,72px) auto 0;max-width:58ch;text-align:center;font-size:15.5px;line-height:1.6;color:var(--fg-55)}
.sl-eerlijk::before{content:"";display:block;width:44px;height:1px;margin:0 auto 18px;background:var(--line)}

/* 5 · wat je ervoor terugkrijgt: drie grote uitspraken, elk met zijn uitleg ernaast. Bewust anders van opzet dan de vragen
   eronder (kop links, lijst rechts), zodat twee leeszones achter elkaar niet op elkaar lijken. */
.gain-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:18px clamp(24px,5vw,96px);align-items:end;margin-bottom:clamp(28px,4vw,56px)}
.gain-head .kicker{grid-column:1/-1}
.gain-head h2{font-size:clamp(40px,5vw,80px);max-width:15ch}
.gain-head .sub{color:var(--fg-70);font-size:clamp(16.5px,1.2vw,19px);line-height:1.55;max-width:40ch;padding-bottom:6px}
.gain-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.gain-list li{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:12px clamp(24px,5vw,96px);align-items:center;padding:clamp(24px,3vw,44px) 0;border-top:1px solid var(--line)}
.gain-list li:last-child{border-bottom:1px solid var(--line)}
.gain-list b{font-family:var(--display);font-weight:800;font-stretch:74%;font-variation-settings:'wdth' 74;text-transform:uppercase;letter-spacing:.006em;font-size:clamp(32px,4.3vw,66px);line-height:.96;text-wrap:balance;color:var(--fg)}
.gain-list li:nth-child(2) b{color:var(--cobalt-deep)}
.gain-list p{font-size:16.5px;line-height:1.6;color:var(--fg-70);max-width:44ch}
@media(max-width:900px){.gain-head,.gain-list li{grid-template-columns:minmax(0,1fr)}.gain-list li{align-items:start}}

/* 6 · de vragen (zelfde opzet als op de hub) */
.sl-vragen{border-top-color:transparent}
.sl-vragen .sec-in{padding-top:clamp(12px,2vw,32px)}
.faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:clamp(28px,5vw,96px);align-items:start}
.faq-head h2{font-size:clamp(40px,4.6vw,72px);margin-top:14px;max-width:11ch}
.faq-list{margin:0;display:flex;flex-direction:column}
.faq-list > div{padding:clamp(18px,2vw,26px) 0;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:8px clamp(16px,2.4vw,40px)}
.faq-list > div:last-child{border-bottom:1px solid var(--line)}
.faq-list dt{font-family:var(--display);font-weight:700;font-stretch:84%;font-variation-settings:'wdth' 84;text-transform:uppercase;letter-spacing:.015em;font-size:clamp(19px,1.6vw,23px);line-height:1.12}
.faq-list dd{margin:0;font-size:16px;line-height:1.6;color:var(--fg-70);max-width:56ch}
/* de kop loopt mee terwijl je de lijst leest */
@media(min-width:901px){.faq-head{position:sticky;top:112px}}
@media(max-width:900px){.faq{grid-template-columns:minmax(0,1fr)}.faq-head h2{max-width:none}}
@media(max-width:600px){.faq-list > div{grid-template-columns:minmax(0,1fr)}}

/* 7 · het aanbod, groot */
.offer-head h2{font-size:clamp(40px,6vw,96px);margin-top:14px;max-width:19ch}
.offer-head .sub{margin-top:clamp(18px,2vw,26px);max-width:64ch;color:var(--fg-70);font-size:clamp(17px,1.3vw,20px);line-height:1.5}
.offer-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(28px,5vw,88px);align-items:start;margin-top:clamp(36px,5vw,80px)}
.offer-steps{list-style:none;margin:0;padding:0;counter-reset:s;display:flex;flex-direction:column}
.offer-steps li{counter-increment:s;display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 12px;padding:clamp(18px,2vw,26px) 0;border-top:1px solid var(--line-soft)}
.offer-steps li:last-child{border-bottom:1px solid var(--line-soft)}
.offer-steps li::before{content:counter(s,decimal-leading-zero);grid-row:1/3;font:500 12px/1.9 var(--mono);letter-spacing:.1em;color:var(--lime)}
.offer-steps b{font-family:var(--display);font-weight:700;font-stretch:84%;font-variation-settings:'wdth' 84;text-transform:uppercase;letter-spacing:.015em;font-size:clamp(21px,1.9vw,27px);line-height:1.1}
.offer-steps p{grid-column:2;font-size:16px;line-height:1.55;color:var(--fg-70);max-width:42ch}
/* ons antwoord zoals het in je inbox komt: papier op het donker, met een tweede vel eronder */
.doc{margin:0;min-width:0}
.doc-title{margin-bottom:14px}
.doc-paper{--fg:#0A0E16;--fg-70:rgba(10,14,22,.74);--fg-55:rgba(10,14,22,.62);--line:rgba(10,14,22,.16);--line-soft:rgba(10,14,22,.1);--peri:#1436F5;
  position:relative;isolation:isolate;color:var(--fg);background:#F7F6F2;border-radius:14px;padding:clamp(20px,2.6vw,36px);
  box-shadow:0 50px 100px -40px rgba(0,0,0,.9),0 30px 60px -36px rgba(20,54,245,.45)}
.doc-paper::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#DDDBD3;transform:rotate(1.4deg) translate(6px,8px)}
.doc-paper::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#F7F6F2}
.doc-head{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:12px 16px;padding-bottom:clamp(14px,1.6vw,20px);border-bottom:2px solid var(--fg)}
.doc-head b{display:block;font-family:var(--display);font-weight:800;font-stretch:76%;font-variation-settings:'wdth' 76;text-transform:uppercase;letter-spacing:.01em;font-size:clamp(26px,2.6vw,36px);line-height:1}
.doc-head div span{display:block;margin-top:8px;font-size:14px;line-height:1.4;color:var(--fg-70)}
.doc-head .stamp{transform:rotate(-3deg);border-color:rgba(20,54,245,.6);flex:none}
.doc-rows{list-style:none;margin:0;padding:0}
.doc-rows li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:0 14px;align-items:center;padding:clamp(12px,1.3vw,16px) 0;border-bottom:1px solid var(--line)}
.doc-m{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(20,54,245,.1);color:var(--cobalt-deep)}
.doc-m .ic{width:14px;height:14px;stroke-width:2.4}
.doc-rows .kijk .doc-m{background:rgba(255,178,36,.26);color:#7A4E00}
.doc-what{font-weight:600;font-size:clamp(15px,1.15vw,17px);line-height:1.3}
.doc-v{font:500 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-55);white-space:nowrap}
.doc-rows .kijk .doc-v{color:#7A4E00}
.doc-note{margin-top:22px;font:500 10.5px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-55)}
@media(max-width:420px){.doc-rows li{grid-template-columns:30px minmax(0,1fr);row-gap:2px}.doc-v{grid-column:2}}
.offer-act{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(28px,4vw,64px);align-items:start;margin-top:clamp(40px,6vw,96px);padding-top:clamp(32px,4vw,64px);border-top:1px solid var(--line)}
.offer-go{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.offer-first{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:clamp(24px,3vw,40px)}
.offer-go .cta-note{margin-top:14px}
.offer-go .btn-xl{margin-top:clamp(24px,3vw,36px)}
.offer-mail{margin-top:14px;font-size:15px;color:var(--fg-70);max-width:52ch}
.offer-mail a{color:var(--fg)}
.offer-go .promises{margin-top:16px}
/* wie je spreekt: de naamkaarten staan in c/wie.css, hier alleen de indeling naast de tekst */
.team{display:flex;flex-direction:column;gap:clamp(18px,2vw,26px);min-width:0}
.team-text h3{font-size:clamp(28px,2.7vw,40px);max-width:16ch}
.team-text p{margin-top:14px;font-size:16.5px;line-height:1.55;color:var(--fg-70);max-width:42ch}
@media(max-width:960px){
  .offer-grid,.offer-act{grid-template-columns:minmax(0,1fr)}
  .team{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);align-items:center;gap:clamp(20px,4vw,40px)}
}
@media(max-width:620px){.team{grid-template-columns:minmax(0,1fr)}}

/* 8 · andere branches en de merkregel */
.others-in{padding-top:clamp(36px,4vw,56px)}
.others-in > .kicker{margin-bottom:16px}
.others a:active{transform:scale(.985);transition-duration:.08s}
.merkregel .sec-in{padding-top:clamp(44px,6vw,96px);padding-bottom:clamp(44px,6vw,96px)}
.merkregel .h-cond{font-size:clamp(40px,6.4vw,108px);max-width:14ch}
.merkregel .h-cond em{font-style:normal;color:var(--lime)}

/* het blad "maandexport": keuzes onder elkaar, zodat elke stap rustig leest */
.au-chips-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.au-chips-col .au-chip span{width:100%;border-radius:14px}
.au-set + .au-set{margin-top:6px}
.au-set.is-err legend{color:var(--au-red)}
@media(max-width:340px){.au-chips-col{grid-template-columns:1fr}}