body{margin:0}img{max-width:100%}[hidden]{display:none!important}
@font-face{font-family:'Poppins fallback';src:local('Arial'),local('Helvetica Neue'),local('Liberation Sans');size-adjust:111.8%;ascent-override:92%;descent-override:31%;line-gap-override:0%}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/poppins-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/poppins-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/poppins-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/poppins-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/poppins-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/poppins-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/atkinson-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/atkinson-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Atkinson Hyperlegible';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/atkinson-400i-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Atkinson Hyperlegible';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/atkinson-400i-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/atkinson-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/atkinson-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plexmono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plexmono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/plexmono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/plexmono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
:root{
  /* One restrained palette: navy, white, one mint tint, one teal accent, orange for the call to action,
     and green/orange/red only where a result is shown */
  --ground:#eaf2f5;
  --surface:#ffffff;
  --sunk:#eaf2f5;
  --ink:#1f234a;
  --ink-2:#48516f;
  --ink-3:#737b95;
  --line:#d8e0ea;
  --teal:#1aa6b7;
  --teal-text:#106a75;
  --teal-tint:#d6f3f6;
  --teal-strong:var(--teal);
  --on-teal:#1f234a;
  --mint:var(--teal-tint);
  --inverse:#1f234a;
  --inverse-soft:#1f234a;
  --on-inverse:#ffffff;
  --on-inverse-2:#c3cae8;
  --inverse-line:rgba(255,255,255,.14);
  --signal:#e84118;
  --on-signal:#ffffff;
  --ok:#27ae60;
  --warn:#f0a020;
  --risk:#d63c2f;
  --hatch:#c9d3df;
  --shadow:rgba(31,35,74,.28);
  --chip-bg:#ffffff;
  --chip-line:transparent;
  --ill-hi:#1f234a;
  --ill-on-hi:#ffffff;
  --ill-mid:#e8edf5;
  --ill-mid-ink:#48516f;
  --ill-dash:#b8c3d6;
  --dot:#9aa3bd;
  --dot-track:#d8e0ea;
  --teal-deep:var(--teal);
  --on-teal-deep:#1f234a;

  --f-display:"Poppins","Poppins fallback",ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
  --f-body:"Atkinson Hyperlegible",ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --s-xs:.8125rem; --s-sm:.9375rem; --s-md:1.0625rem; --s-lg:1.3125rem;
  --s-xl:clamp(1.6rem,1.2rem + 1.6vw,2.25rem);
  --s-hero:clamp(2.3rem,1.5rem + 3.4vw,4rem);
  --wrap:72rem;
}
/* A section can switch to the dark palette; the tokens cascade to everything inside it */
.theme-dark{
  --ground:#1f234a; --surface:#1f234a; --sunk:#1f234a; --ink:#ffffff; --ink-2:#c3cae8; --ink-3:#8f99bf; --line:rgba(255,255,255,.14);
  --teal-text:#1aa6b7; --teal-tint:rgba(26,166,183,.18); --mint:rgba(26,166,183,.18);
  --inverse:#1f234a; --inverse-soft:#1f234a; --hatch:rgba(255,255,255,.12); --shadow:rgba(0,0,0,.45);
  --ill-hi:rgba(214,224,245,.42); --ill-on-hi:#1f234a; --ill-mid:rgba(255,255,255,.09); --ill-mid-ink:rgba(255,255,255,.75); --ill-dash:rgba(255,255,255,.3);
  --dot:rgba(255,255,255,.55); --dot-track:rgba(255,255,255,.28);
  color:var(--ink);
}

/* The light palette again, for light islands inside a dark section */
.theme-light{

  --ground:#eaf2f5;
  --surface:#ffffff;
  --sunk:#eaf2f5;
  --ink:#1f234a;
  --ink-2:#48516f;
  --ink-3:#737b95;
  --line:#d8e0ea;
  --teal:#1aa6b7;
  --teal-text:#106a75;
  --teal-tint:#d6f3f6;
  --teal-strong:var(--teal);
  --on-teal:#1f234a;
  --mint:var(--teal-tint);
  --inverse:#1f234a;
  --inverse-soft:#1f234a;
  --on-inverse:#ffffff;
  --on-inverse-2:#c3cae8;
  --inverse-line:rgba(255,255,255,.14);
  --signal:#e84118;
  --on-signal:#ffffff;
  --ok:#27ae60;
  --warn:#f0a020;
  --risk:#d63c2f;
  --hatch:#c9d3df;
  --shadow:rgba(31,35,74,.28);
  --chip-bg:#ffffff;
  --chip-line:transparent;
  --ill-hi:#1f234a;
  --ill-on-hi:#ffffff;
  --ill-mid:#e8edf5;
  --ill-mid-ink:#48516f;
  --ill-dash:#b8c3d6;
  --dot:#9aa3bd;
  --dot-track:#d8e0ea;
  --teal-deep:var(--teal);
  --on-teal-deep:#1f234a;
  color:var(--ink);
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;overflow-x:clip}
/* Brand mark: a quarter donut ring, band one third of the radius, always cropped by an edge */
.ring{--size:300px;--cx:100%;--cy:0%;position:absolute;width:var(--size);height:var(--size);background:currentColor;pointer-events:none;z-index:0;
  --ring-mask:radial-gradient(circle farthest-side at var(--cx) var(--cy),transparent 0 calc(var(--inner,66%) - .6px),#000 var(--inner,66%) calc(100% - .6px),transparent 100%);
  -webkit-mask-image:var(--ring-mask);mask-image:var(--ring-mask);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.ring--tl{--cx:0%;--cy:0%}.ring--tr{--cx:100%;--cy:0%}.ring--bl{--cx:0%;--cy:100%}.ring--br{--cx:100%;--cy:100%}
.ring--mint{color:var(--mint)}.ring--teal{color:var(--teal)}.ring--navy{color:var(--inverse-soft)}
body{position:relative;background:#eaf2f5;color:var(--ink);font-family:var(--f-body);font-size:var(--s-md);line-height:1.6;padding-inline:clamp(16px,4vw,40px);-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--wrap);margin-inline:auto;position:relative;z-index:1}
h1,h2,h3{font-family:var(--f-display);line-height:1.12;margin:0;text-wrap:balance;letter-spacing:-.02em}
h2{font-size:var(--s-xl);font-weight:700;letter-spacing:-.025em}
h3{font-size:var(--s-lg);font-weight:600;letter-spacing:-.01em}
p{margin:0}
a{color:var(--teal-text)}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:4px}
.eyebrow{font-family:var(--f-mono);font-size:var(--s-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--teal-text);font-weight:500}
.lede{color:var(--ink-2);max-width:40rem;font-size:var(--s-lg);line-height:1.5}
.note{font-size:var(--s-xs);color:var(--ink-3)}

/* nav */
.nav{position:relative;z-index:2;display:flex;align-items:center;gap:1.5rem;padding-block:clamp(1.75rem,2.6vw,2.5rem) 1.25rem;flex-wrap:wrap}
.logo{color:var(--teal);display:block;width:108px;height:auto}
.nav ul{display:flex;gap:1.75rem;list-style:none;margin:0 0 0 auto;padding:0;font-size:var(--s-sm)}
.nav ul a{color:var(--ink-2);text-decoration:none}
.nav ul a:hover{color:var(--ink)}
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--f-display);font-weight:600;font-size:var(--s-sm);text-decoration:none;border-radius:999px;padding:.7rem 1.25rem;transition:transform .2s ease,background-color .2s ease,box-shadow .25s ease,border-color .2s ease,color .2s ease}
.btn:active{transform:translateY(0) scale(.97)}
.btn:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
/* primary: deeper orange and a light sweep across the pill */
.btn-signal{background:var(--signal);color:var(--on-signal)}
.btn-signal::before{content:"";position:absolute;z-index:-1;inset:0 auto 0 -60%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);transform:skewX(-20deg);transition:left .55s ease}
.btn-signal:hover{background:#de3c14;transform:translateY(-2px)}
.btn-signal:hover::before{left:120%}
/* secondary: teal outline with a soft teal fill */
.btn-ghost{color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--teal);background:rgba(26,166,183,.12);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.btn,.btn-signal::before{transition:none}.btn-signal:hover,.btn-ghost:hover{transform:none}}
/* the menu needs ~975px (measured); below that the login button wrapped to a second line, so it goes at 1023 */
@media (max-width:1023px){.nav ul{display:none}.nav .btn{margin-left:auto}}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;padding-block:clamp(2rem,5vw,5rem) clamp(3rem,6vw,5rem)}
.hero h1{font-size:var(--s-hero);font-weight:700;letter-spacing:-.035em}
.hero h1 em{font-style:normal;color:var(--teal-text)}
.hero h1 .h1-dot{color:#1aa6b7}
.hero h1 .h1-line{display:block;text-wrap:balance}
@media (min-width:1300px){.hero h1 .h1-line{white-space:nowrap}}
.hero h1{font-size:clamp(2.1rem,1.3rem + 2.9vw,3.5rem);text-wrap:balance;line-height:1.17}
.hero .copy{display:grid;gap:1.5rem}
.hero .actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:.5rem}
.hero-visual{position:relative}
/* Brand mark: two concentric quarter rings as in the Q of the logo, centred on the hero's bottom-right,
   cropped by the viewport edge and the bottom of the hero */
.hero{position:relative}
.hero > :not(.ring){position:relative;z-index:1}
.hero > .copy,.hero > .hero-visual{position:relative;z-index:1}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.proj-foot{display:flex;justify-content:flex-end}
.playing @keyframes tick{to{transform:scaleX(1)}}
/* Floating check chips: what you see on the current slide, as on the qiek-web hero */
.hchips-wrap{position:absolute;inset:0;pointer-events:none;z-index:2}
.hchip{position:absolute;display:flex;align-items:center;gap:.55rem;background:var(--chip-bg);border:1px solid var(--chip-line);border-radius:999px;padding:.5rem 1.4rem .5rem .5rem;box-shadow:0 18px 36px -18px var(--shadow),0 2px 6px -2px var(--shadow);
  opacity:0;transform:translateX(14px) scale(.92);transform-origin:left center;transition:opacity .22s ease,transform .3s ease-in;white-space:nowrap}
/* The pill leaves quickly, then pops back in once the new cards have risen: a springy slide-in, the icon grows and the tick draws itself */
.hchips[data-actief] .hchip{opacity:1;transform:none;transition:opacity .35s ease .5s,transform .7s cubic-bezier(.34,1.5,.64,1) .5s}
.hchip-ico{transform:scale(.4);transition:transform .2s ease-in}
.hchips[data-actief] .hchip-ico{transform:none;transition:transform .5s cubic-bezier(.34,1.7,.64,1) .62s}
.hchip-ico path{stroke-dasharray:14;stroke-dashoffset:14;transition:stroke-dashoffset .15s ease}
.hchips[data-actief] .hchip-ico path{stroke-dashoffset:0;transition:stroke-dashoffset .4s ease-out .85s}
.hchip strong{display:block;white-space:nowrap;font-family:var(--f-display);font-weight:600;font-size:1rem;line-height:1.25;color:#1f234a}
.hchip strong + span{display:block;white-space:nowrap;font-size:.875rem;color:#48516f;line-height:1.3}
.hchip-ico{flex:none;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center}
.hchip-ico svg{width:1.15rem;height:1.15rem}
.hchip--1{right:-4.5rem;top:62%}
.hchip--2{right:-2.5rem;top:calc(56% + 4.6rem)}
@media (max-width:1280px){.hchip--1{right:-2rem}.hchip--2{right:-.5rem}}
@media (max-width:900px){.hchip--1{right:-.25rem}.hchip--2{right:1.5rem}.hchip,.hchip strong,.hchip strong + span{white-space:normal}.hchip{max-width:calc(100% - 1rem)}}
@media (prefers-reduced-motion:reduce){.hs-card,.hchip,.hchip-ico,.hchip-ico path,.dots span,.hs-card.leaving .pile li{transition:none!important}}
.deck{display:grid;grid-template-columns:minmax(0,1fr);position:relative;z-index:1;width:min(30rem,100%);aspect-ratio:1;margin-inline:auto 1rem}
.hs-card{margin:0;grid-area:1/1;display:flex;flex-direction:column;transition:visibility 0s linear 0s}
/* Whole circle moves: the next one rises from below, the previous one lifts away */
/* The circle stays put; the cards rise out of it. Incoming cards come up from inside the circle, outgoing cards carry on upwards and fade */
.hs-card[aria-hidden="true"]{visibility:hidden;transition:visibility 0s linear .7s}
/* cards of a hidden slide stay invisible, whatever state their animation is in */
.hs-card[aria-hidden="true"] .pile li{opacity:0}
.hs-card.leaving .pile li{translate:0 -18cqw;opacity:0;transition:translate .6s cubic-bezier(.5,0,.75,.4),opacity .5s ease-in}
.hs-card.leaving .pile li:nth-child(n+4){transition-delay:.05s}
.hs-card.leaving .pile li:nth-child(n+7){transition-delay:.1s}
/* The slide is a circle; its stack of cards is clipped by the circle below its centre,
   but the top of the stack spills out over the upper edge, as on qiek.nl */
.hs-card.card,.hs-card.card.lifted{position:relative;border-radius:0;background:none;border:0;box-shadow:none;overflow:visible;container-type:inline-size}

.hs-body{position:absolute;left:0;right:0;bottom:0;top:-24cqw;transform:translateZ(0);
  --m-top:linear-gradient(#000,#000) 50% 0 / 86cqw 74cqw no-repeat;
  --m-circle:radial-gradient(circle 50cqw at 50% 74cqw,#000 calc(50cqw - 1px),transparent 50cqw) 0 0 / 100% 100% no-repeat;
  -webkit-mask:var(--m-top),var(--m-circle);mask:var(--m-top),var(--m-circle)}
.pile{list-style:none;margin:0;padding:0;position:absolute;left:50%;top:21cqw;width:70cqw;margin-left:-35cqw;display:grid;gap:3cqw}
.pile li{will-change:translate,opacity;backface-visibility:hidden;height:13cqw;background:#1f234a;border:.3cqw solid rgba(255,255,255,.14);border-radius:3cqw;box-shadow:0 2cqw 5cqw -2cqw rgba(0,0,0,.55);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:3cqw;padding:0 3.6cqw;color:#fff}
.pile li:nth-child(2){transform:translateX(4cqw)}
.pile li.free{background:transparent;box-shadow:none;border:.35cqw dashed rgba(255,255,255,.28)}
.pile li.hl{border-color:#1aa6b7;box-shadow:0 0 0 .3cqw #1aa6b7,0 2cqw 5cqw -2cqw rgba(0,0,0,.55)}
.pile--grid{grid-template-columns:1fr 1fr;width:76cqw;margin-left:-38cqw;gap:2.6cqw}
.pile--grid li{height:19cqw;grid-template-columns:1fr;align-content:center;gap:1.4cqw;padding:0 3.2cqw}
.pile--grid li:nth-child(2){transform:none}
.pile--grid li.wide{grid-column:1/-1;height:13cqw;grid-template-columns:auto minmax(0,1fr)}
.pile--grid li .st-ico{position:absolute;right:3cqw;top:3cqw;width:5.4cqw;height:5.4cqw}
.pile--grid li{position:relative}
.tile small{font-size:2.5cqw;color:#c3cae8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv{font-size:2.4cqw;color:#c3cae8}
.tv b{font-family:var(--f-display);font-weight:600;font-size:4.4cqw;color:#fff}
.tv.warn b{color:var(--warn)}.tv.ok b{color:#fff}
.tv.warn,.tv.ok{background:none}
.tn{font-size:2.2cqw;color:#8f99bf}
.st-main{display:grid;gap:1cqw;min-width:0}
.st-main b{font-family:var(--f-display);font-weight:600;font-size:3.3cqw;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-main small{font-size:2.6cqw;color:#c3cae8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pile .sk{height:1.6cqw;border-radius:99px;background:rgba(255,255,255,.18)}
.st-ico{width:7cqw;height:7cqw;border-radius:2cqw;background:rgba(255,255,255,.08);color:#c3cae8;display:grid;place-items:center}
.st-ico.hl{background:rgba(26,166,183,.2);color:#1aa6b7}
.st-ico svg{width:3.6cqw;height:3.6cqw}
.st-pill{font-size:2.4cqw;padding:.8cqw 2cqw;border-radius:99px;border:.3cqw solid rgba(255,255,255,.2);color:#c3cae8;white-space:nowrap}
.st-pill.done{background:rgba(26,166,183,.2);border-color:transparent;color:#1aa6b7}
.st-time{font-family:var(--f-mono);font-size:2.6cqw;color:#8f99bf}
.st-num{width:6cqw;height:6cqw;border-radius:50%;background:#1aa6b7;color:#1f234a;font-family:var(--f-mono);font-size:2.6cqw;display:grid;place-items:center}
.st-bar{position:relative;display:block;margin-top:.6cqw}
.st-bands{display:flex;gap:.3cqw;height:1.2cqw;border-radius:99px;overflow:hidden}
.st-bands b{opacity:.3}.st-bands b.cur{opacity:1}.st-bands b.none{background:rgba(255,255,255,.2);opacity:1}
.pile .st-bar i{position:absolute;top:50%;bottom:auto;width:.6cqw;height:2.8cqw;margin:-1.4cqw 0 0 -.3cqw;border-radius:1cqw;background:#fff;box-shadow:0 0 0 .35cqw #1f234a}
.st-badge{font-size:2.4cqw;color:#c3cae8;border:.45cqw solid rgba(255,255,255,.2);border-radius:99px;padding:.7cqw 2cqw;white-space:nowrap}
.st-badge b{font-family:var(--f-display);font-weight:600;font-size:3cqw;color:#fff}
.st-badge.ok{background:none;border-color:var(--ok)}.st-badge.warn{background:none;border-color:var(--warn)}
.st-stack{display:flex;gap:.3cqw;width:100%;height:1.5cqw;border-radius:99px;overflow:hidden}
/* calmer traffic colours in the results tiles: green recedes, orange and red stay readable */
.st-stack b.ok{background:rgba(39,174,96,.35)}
.st-stack b.warn{background:rgba(240,160,32,.55)}
.st-stack b.risk{background:rgba(214,60,47,.75)}
.st-lock{width:100%;height:1.5cqw;border-radius:99px;border:.3cqw dashed rgba(255,255,255,.28);display:grid;place-items:center;color:#8f99bf}
.st-lock svg{width:2.2cqw;height:2.2cqw}
.st-dot{width:4cqw;height:4cqw;border-radius:50%}
.st-count{justify-self:start;font-family:var(--f-mono);font-size:2.6cqw;background:rgba(26,166,183,.2);color:#1aa6b7;border-radius:99px;padding:.5cqw 1.8cqw}

/* Minimal slides on a white circle: soft grey cards made of bars; one card per slide carries real text */
.pile.m li{background:#eef3f7;border:0;box-shadow:none;color:#1f234a;gap:2.6cqw}
.pile.m li.tint{background:#e3f4f6}
.pile.m li.ghost{background:transparent;border:.35cqw dashed #d8e0ea}
.pile.m li.hl{background:#fff;box-shadow:0 0 0 .45cqw #1aa6b7,0 2.5cqw 6cqw -2.5cqw rgba(31,35,74,.35)}
.pile.m li:not(.tile){grid-template-columns:auto minmax(0,1fr) auto}
.pile.m li:not(.tile):has(.m-text){grid-template-columns:auto minmax(0,1fr)}
.pile.m li.wide{grid-template-columns:auto minmax(0,1fr)}
.pile.m .b{display:block;height:1.7cqw;border-radius:99px;background:#cfd9e4}
.pile.m .b.thin{height:1.3cqw;background:#dde5ee}
.pile.m .b.val{height:3cqw;background:#c2cedb;border-radius:1cqw}
.m-lines{display:grid;gap:1.4cqw;min-width:0}
.m-ico{width:6.6cqw;height:6.6cqw;border-radius:2cqw;background:#dde5ee;display:grid;place-items:center;color:#106a75}
.m-ico.on{background:#d6f3f6}
.m-ico svg{width:3.4cqw;height:3.4cqw}
.m-pill{width:9cqw;height:3.6cqw;border-radius:99px;background:#dde5ee}
.m-pill.on{background:#d6f3f6}
.m-time{width:7cqw;height:1.6cqw;border-radius:99px;background:#dde5ee}
.m-num{width:6cqw;height:6cqw;border-radius:50%;background:#1aa6b7;color:#fff;font-family:var(--f-mono);font-size:2.6cqw;display:grid;place-items:center}
.m-text{display:grid;gap:.8cqw;min-width:0}
.m-text b{font-family:var(--f-display);font-weight:600;font-size:3.3cqw;line-height:1.2;color:#1f234a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-text small{font-size:2.6cqw;color:#48516f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pile.m .tile{align-content:center;gap:1.6cqw}
.pile.m .tile small{font-size:2.5cqw;color:#48516f}
.m-val{font-size:2.4cqw;color:#48516f}.m-val b{font-family:var(--f-display);font-weight:600;font-size:4.4cqw;color:#1f234a}
.normband{position:relative;display:flex;gap:.3cqw;height:1.2cqw;border-radius:99px}
.pile.m .normband{font-size:0;line-height:0;align-items:stretch}
.pile.m .normband .seg{display:block;height:100%;min-height:0;padding:0;border-radius:99px;opacity:.3}.pile.m .normband .seg.cur{opacity:1}
.pile.m .m-stack .seg{display:block;height:100%}
.normband em{position:absolute;top:50%;width:.6cqw;height:2.8cqw;margin:-1.4cqw 0 0 -.3cqw;border-radius:1cqw;background:#1f234a;box-shadow:0 0 0 .35cqw #eef3f7}
.pile.m li.hl .normband em{box-shadow:0 0 0 .35cqw #fff}
.m-stack{display:flex;gap:.3cqw;height:1.5cqw;border-radius:99px;overflow:hidden}
.m-stack .seg.ok{background:rgba(39,174,96,.4)}.m-stack .seg.warn{background:rgba(240,160,32,.6)}.m-stack .seg.risk{background:rgba(214,60,47,.7)}
.m-dot{width:4cqw;height:4cqw;border-radius:50%;background:#d63c2f}
.pile.m li.wide{grid-template-columns:auto minmax(0,1fr)}
.pile--grid.m li.tile:has(.m-ico):not(.hl){grid-template-columns:1fr;align-content:center}
.pile--grid.m li.tile .m-ico{position:static}
.pile--grid.m li.hl{grid-template-columns:1fr;align-content:center;gap:1.2cqw}
.pile--grid.m li.hl .m-text b{font-size:3cqw}.pile--grid.m li.hl .m-text small{font-size:2.3cqw}
.pile--grid.m li.hl .m-ico{width:5.4cqw;height:5.4cqw}
.pile--grid.m li.hl .m-ico{position:static}
.pile.m li:nth-child(2){transform:none}

/* Dark navy cards on the white circle */
.pile.m li{background:#1f234a;color:#fff;border:.3cqw solid rgba(255,255,255,.16);box-shadow:0 2cqw 5cqw -2.5cqw rgba(31,35,74,.55)}
.pile.m li.tint{background:#1f234a;box-shadow:inset .7cqw 0 0 #1aa6b7,0 2cqw 5cqw -2.5cqw rgba(31,35,74,.55)}
.pile.m li.ghost{background:transparent;border:.35cqw dashed #c9d3df;box-shadow:none}
.pile.m li.ghost .m-time,.pile.m li.ghost .b{background:#dde5ee}
.pile.m li.hl{background:#1f234a;box-shadow:0 0 0 .45cqw #1aa6b7,0 2.5cqw 6cqw -2.5cqw rgba(31,35,74,.55)}
.pile.m .b{background:rgba(255,255,255,.26)}
.pile.m .b.thin{background:rgba(255,255,255,.14)}
.pile.m .b.val{background:rgba(255,255,255,.34)}
.pile.m .m-ico{background:rgba(255,255,255,.1);color:#1aa6b7}
.pile.m .m-ico.on{background:rgba(26,166,183,.22)}
.pile.m .m-pill{background:rgba(255,255,255,.12)}
.pile.m .m-pill.on{background:rgba(26,166,183,.35)}
.pile.m .m-time{background:rgba(255,255,255,.16)}
.pile.m .m-text b,.pile.m .m-val b{color:#fff}
.pile.m .m-text small,.pile.m .tile small,.pile.m .m-val{color:#c3cae8}
.pile.m .normband em{background:#fff;box-shadow:0 0 0 .35cqw #1f234a}
.pile.m li.hl .normband em{box-shadow:0 0 0 .35cqw #1f234a}
.pile.m .normband .seg{opacity:.35}

/* No circle: the card stack simply sits in the square next to the heading */
.hs-body{-webkit-mask:none!important;mask:none!important}
/* every stack is centred in the square, so all slides share the same optical middle */
.pile.m{top:calc(50% + 12cqw);transform:translateY(-50%)}
.pile.m:not(.pile--grid) li:nth-child(n+6){display:none}
.pile--grid.m li:nth-child(n+7){display:none}
.pile--grid.m:has(li.wide) li:nth-child(n+6){display:none}
.pile.m li.ghost .m-time,.pile.m li.ghost .b{background:rgba(255,255,255,.14)}
.pile.m li.ghost{border-color:rgba(255,255,255,.2)}
/* autoplay progress back in the active dot */
.dots button[aria-pressed="true"] span{width:2.25rem;background:rgba(255,255,255,.25)}
.dots button[aria-pressed="true"] span::after{content:"";position:absolute;inset:0;background:#fff;border-radius:999px;transform-origin:left;transform:scaleX(var(--p,0))}

/* Reviews: short quotes from providers, under the logos in the same dark panel */
.reviews{display:grid;gap:0}
#reviews .sec-head{margin-bottom:clamp(1.75rem,3vw,2.5rem)}
#demo-cta{padding-top:0}
.quotes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.quote{margin:0;background:#fff;border:1px solid var(--line);border-radius:20px;padding:1.5rem 1.5rem 1.35rem;display:flex;flex-direction:column;gap:1.25rem}
.quote blockquote{margin:0;position:relative;padding-top:1.9rem;font-family:var(--f-display);font-weight:500;font-size:var(--s-md);line-height:1.4;color:#1f234a;text-wrap:pretty;overflow-wrap:break-word}
.quote blockquote::before{content:"\201C";position:absolute;left:-.1rem;top:-.55rem;font-size:3.2rem;line-height:1;color:#1aa6b7;font-weight:700}
.quote figcaption{margin-top:auto;display:grid;gap:.1rem;font-size:var(--s-xs)}
.quote figcaption b{color:#1f234a;font-weight:700}
.quote figcaption span{color:#48516f}
.quote--big{grid-column:span 2;background:#1aa6b7;border-color:transparent}
.quote--big blockquote,.quote--big figcaption b{color:#fff}
.quote--big blockquote{font-size:clamp(1.3rem,1rem + 1vw,1.75rem);font-weight:600;letter-spacing:-.01em}
.quote--big blockquote::before{color:#fff;opacity:.9}
.quote--big figcaption span{color:#fff;opacity:.85}

/* the illustration never catches clicks, and the header always sits above the hero */
.hs-body,.hchips-wrap{pointer-events:none}
.hero-band > .nav{z-index:5}
/* logo and menu run to the edges of the dark panel (max 1920px), with their own side padding */
.hero-band > .nav{margin-inline:calc(50% - min(50vw - var(--gut), 960px));padding-inline:clamp(1.25rem,3.2vw,3.5rem)}
/* on narrower screens the page gutter is smaller than the nav padding: give the hero content at least the same inset, so it lines up with the logo */
.hero-band{--nav-pad:clamp(1.25rem,3.2vw,3.5rem);padding-inline:max(0px, calc(var(--nav-pad) - (min(50vw - var(--gut), 960px) - 50%)))}
/* menu sits next to the logo; the two buttons get the right side */
.nav ul{margin:0 auto 0 clamp(1.5rem,3.5vw,3.5rem)}
/* menu in the display face, a little larger, with a teal underline on hover */
.hero-band > .nav ul{gap:clamp(1.25rem,2.2vw,2.25rem)}
.hero-band > .nav ul a{position:relative;font-family:var(--f-display);font-weight:500;font-size:1rem;letter-spacing:-.005em;color:rgba(255,255,255,.8);padding-block:.35rem;transition:color .15s ease}
.hero-band > .nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:#1aa6b7;transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.hero-band > .nav ul a:hover,.hero-band > .nav ul a:focus-visible{color:#fff}
.hero-band > .nav ul a:hover::after,.hero-band > .nav ul a:focus-visible::after{transform:scaleX(1)}
/* on wide screens, start the menu at the content edge (the title's left edge); where that does not fit, it simply follows the logo */
.hero-band > .nav ul{--panel-half:min(50vw - var(--gut), 960px);--content-half:min(calc(var(--wrap) / 2), 50vw - clamp(16px,4vw,40px));margin-left:max(clamp(1.5rem,3.5vw,3.5rem), calc(var(--panel-half) - var(--content-half) - clamp(1.25rem,3.2vw,3.5rem) - 108px - 1.5rem))}
/* optical alignment: the Q tail makes the logo look low, so lift it a little; menu and buttons stay centred together */
.nav > a:first-child .logo{position:relative;top:-4px}
/* same outline style as the secondary button in the hero */
.nav-login{font-family:var(--f-display);font-weight:600;font-size:var(--s-sm);color:var(--ink);background:none;text-decoration:none;padding:.7rem 1.25rem;border-radius:999px;border:1.5px solid rgba(255,255,255,.3);margin-left:-.75rem;transition:border-color .15s ease}
.nav-login{transition:border-color .2s ease,background-color .2s ease,transform .2s ease}
.nav-login:hover,.nav-login:focus-visible{border-color:var(--teal);background:rgba(26,166,183,.12);transform:translateY(-2px)}
@media (max-width:760px){.nav{gap:.75rem;flex-wrap:nowrap}.nav .btn{margin-left:auto}}
/* on phones the hero already shows the demo button right below */
@media (max-width:560px){.nav .btn{display:none}.nav-login{margin-left:auto}}

/* VARIANT: the use cases in the hero strip drive the slider */
.uses--nav li{padding:0!important;border:0!important;background:none!important}
.uses--nav button{position:relative;isolation:isolate;overflow:hidden;font:inherit;font-size:.8125rem;color:var(--ink);background:var(--ground);border:1px solid var(--line);border-radius:999px;padding:.35rem .75rem;white-space:nowrap;cursor:pointer;width:100%;transition:border-color .2s ease}
.uses--nav button:hover{border-color:rgba(255,255,255,.4)}
.uses--nav .u-fill{position:absolute;inset:0;z-index:-1;background:rgba(26,166,183,.3);transform-origin:left;transform:scaleX(0)}
.uses--nav button[aria-pressed="true"]{border-color:#1aa6b7}
.uses--nav button[aria-pressed="true"] .u-fill{transform:scaleX(var(--p,0))}
.usestrip .uses--nav{gap:.35rem}
.m-score{display:block;height:1.4cqw;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.m-score span{display:block;height:100%;border-radius:99px;background:#1aa6b7}
.m-score.wide{height:2.2cqw}
.pile.m li.poll{grid-template-columns:minmax(0,1fr)}

/* stamp: white, so it reads against the teal arc as well */
.pile.m.art>li.a-stamp{background:#fff;color:#1f234a;box-shadow:0 0 0 1.2cqw rgba(255,255,255,.18),0 3cqw 7cqw -3cqw rgba(0,0,0,.6)}
.a-stamp small{color:#106a75;opacity:1}

/* Keuringen verdict: a status badge in the same language as the other text cards */
.pile.m.art>li.a-verdict{position:absolute;right:-6cqw;top:-5cqw;display:grid!important;grid-template-columns:auto auto!important;width:auto;height:auto;align-items:center;gap:2.4cqw;padding:2cqw 4.4cqw 2cqw 2cqw;border-radius:99px;background:#1f234a;color:#fff;border:0;box-shadow:0 0 0 .45cqw #1aa6b7,0 3cqw 7cqw -3cqw rgba(0,0,0,.6)}
.a-seal{width:8cqw;height:8cqw;border-radius:50%;background:#27ae60;color:#fff;display:grid;place-items:center;box-shadow:0 0 0 1cqw rgba(39,174,96,.2)}
.a-seal svg{width:4.6cqw;height:4.6cqw}
.a-stamp-text{display:grid;gap:.3cqw}
.a-stamp-text b{font-family:var(--f-display);font-weight:600;font-size:4cqw;line-height:1.1;color:#fff}
.a-stamp-text small{font-size:2.5cqw;color:#c3cae8;opacity:1}

/* Keuringen verdict as a rubber stamp: outline only, double rule, set at an angle over the form */
.pile.m.art>li.a-rubber{position:absolute;right:3cqw;top:17cqw;display:grid!important;justify-items:center;gap:.6cqw;padding:2cqw 4.6cqw 1.8cqw;background:rgba(31,35,74,.94);border:.7cqw solid #43c07a;border-radius:2.4cqw;box-shadow:inset 0 0 0 .7cqw #1f234a,inset 0 0 0 1.05cqw #43c07a;rotate:-9deg;color:#43c07a;mix-blend-mode:normal}
.a-rubber b{font-family:var(--f-display);font-weight:700;font-size:5.6cqw;line-height:1;letter-spacing:.14em;text-transform:uppercase}
.a-rubber small{font-family:var(--f-mono);font-size:2.1cqw;letter-spacing:.12em;text-transform:uppercase;opacity:.9}
.pile.m.art>li.a-rubber{scale:.8;transform-origin:center}

/* 5 PSA: participants as dots */
.pile.m.a-psa{display:grid;grid-template-rows:auto 1fr;gap:3cqw}
.pile.m.art>li.a-people{display:grid!important;align-content:space-between;gap:2.4cqw;padding:3.4cqw 4cqw}
.a-people-head{display:grid;grid-template-columns:1fr auto;align-items:center}
.a-legend{display:flex;gap:1.2cqw}.a-legend i{width:2.2cqw;height:2.2cqw;border-radius:50%}
.a-legend .ok,.a-dot.ok{background:rgba(39,174,96,.45)}
.a-legend .warn,.a-dot.warn{background:rgba(240,160,32,.75)}
.a-legend .risk,.a-dot.risk{background:rgba(214,60,47,.85)}
.a-dots{display:grid;grid-template-columns:repeat(10,1fr);gap:2cqw 2.6cqw;padding-inline:1.5cqw}
.a-dot{aspect-ratio:1;border-radius:50%}
.a-split{display:flex;gap:.4cqw;height:1.4cqw;border-radius:99px;overflow:hidden}
.a-split .seg{display:block}
.a-split .ok{background:rgba(39,174,96,.45)}.a-split .warn{background:rgba(240,160,32,.75)}.a-split .risk{background:rgba(214,60,47,.85)}
/* 7 Workshops: product page */
.pile.m.a-product{display:grid}
.pile.m.art>li.a-shop{display:grid;grid-template-rows:auto 1fr;overflow:hidden;padding:0}
.a-hero-img{height:25cqw;display:grid;place-items:center;color:rgba(255,255,255,.9);background:radial-gradient(circle at 80% 120%,rgba(255,255,255,.18) 0 30%,transparent 31%),linear-gradient(135deg,#1aa6b7,#157f8c)}
.a-hero-img svg{width:11cqw;height:11cqw}
.a-shop-body{display:grid;align-content:space-between;gap:2.6cqw;padding:3.4cqw 4cqw 4cqw}
.a-shop-body .m-text b{font-size:4cqw}
.a-dates{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqw}
.a-date{display:grid;place-items:center;height:6cqw;border-radius:1.6cqw;border:.3cqw solid rgba(255,255,255,.16)}
.a-date .b{width:60%!important}
.a-date.on{border-color:#1aa6b7;background:rgba(26,166,183,.2)}
.a-cta{justify-self:start;width:46%;height:6.4cqw;display:grid;place-items:center;background:#1aa6b7;border-radius:99px}
.a-cta-bar{display:block;width:45%;height:1.4cqw;border-radius:99px;background:rgba(255,255,255,.85)}

/* 8 Coaching: video call */
.pile.m.a-call{display:grid;grid-template-rows:auto 1fr;gap:3cqw}
.pile.m.art>li.a-video{position:relative;display:block!important;overflow:hidden;padding:0;background:radial-gradient(circle at 50% 38%,rgba(26,166,183,.35),transparent 55%),linear-gradient(160deg,#2b3068,#1f234a);border-color:rgba(255,255,255,.16)}
.a-remote{position:absolute;left:50%;top:44%;width:17cqw;height:17cqw;margin:-8.5cqw 0 0 -8.5cqw;border-radius:50%;background:#d6f3f6;color:#1aa6b7;overflow:hidden;box-shadow:0 0 0 1.4cqw rgba(214,243,246,.15)}
.a-remote svg,.a-self svg{width:100%;height:100%;display:block;transform:translateY(12%)}
.a-self{position:absolute;right:3cqw;top:3cqw;width:14cqw;height:10cqw;border-radius:2cqw;background:#3a4079;color:rgba(255,255,255,.55);overflow:hidden;border:.3cqw solid rgba(255,255,255,.2)}
.a-self svg{width:60%;margin:0 auto}
.a-live{position:absolute;left:3cqw;top:3cqw;display:flex;align-items:center;gap:1.4cqw;width:20cqw}
.a-live i{width:2cqw;height:2cqw;border-radius:50%;background:#d63c2f;box-shadow:0 0 0 .8cqw rgba(214,60,47,.25)}
.a-controls{position:absolute;left:0;right:0;bottom:3cqw;display:flex;justify-content:center;gap:2.4cqw}
.a-controls i{width:7cqw;height:7cqw;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);color:#fff}
.a-controls i svg{width:3.6cqw;height:3.6cqw}
.a-controls i.end{background:#d63c2f}

/* 5 PSA: departments on one pressure scale */
.pile.m.a-psa{display:grid;grid-template-rows:auto 1fr;gap:3cqw}
.pile.m.art>li.a-scale{position:relative;display:grid!important;align-content:space-evenly;gap:0;padding:3cqw 4cqw;overflow:hidden}
.a-zones{position:absolute;top:0;bottom:0;right:4cqw;left:calc(4cqw + 18cqw);display:flex;gap:.5cqw;pointer-events:none}
.a-zones span{flex:1}
.a-zones span{background:rgba(255,255,255,.035);border-top:.8cqw solid}
.a-zones .ok{border-color:rgba(39,174,96,.6)}
.a-zones .warn{border-color:rgba(240,160,32,.7)}
.a-zones .risk{border-color:rgba(214,60,47,.75);background:rgba(214,60,47,.07)}
.a-track{position:relative;display:grid;grid-template-columns:16cqw minmax(0,1fr);gap:2cqw;align-items:center}
.a-rail{position:relative;height:.5cqw;border-radius:99px;background:rgba(255,255,255,.14)}
.a-rail i{position:absolute;top:50%;width:3.6cqw;height:3.6cqw;margin:-1.8cqw 0 0 -1.8cqw;border-radius:50%;background:#c3cae8;box-shadow:0 0 0 .8cqw #1f234a}
.a-track.on .a-rail{background:linear-gradient(90deg,rgba(26,166,183,.7),rgba(26,166,183,.2))}
.a-track.on .a-rail i{width:5cqw;height:5cqw;margin:-2.5cqw 0 0 -2.5cqw;background:#1aa6b7;box-shadow:0 0 0 .8cqw #1f234a,0 0 0 1.8cqw rgba(26,166,183,.35)}
.a-track.on .b{background:rgba(255,255,255,.5)}
/* 6 Enquêtes: mood scale */
.pile.m.a-poll{display:grid;grid-template-rows:auto 1fr;gap:3cqw}
.pile.m.art>li.a-mood{display:grid!important;align-content:space-evenly;gap:3cqw;padding:3.4cqw 4cqw}
.a-faces{display:grid;grid-template-columns:repeat(5,1fr);gap:2cqw;align-items:center;justify-items:center}
.a-face{width:9cqw;height:9cqw;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);color:#8f99bf;transition:none}
.a-face svg{width:65%;height:65%}
.a-face.on{width:12cqw;height:12cqw;background:#1aa6b7;color:#fff;box-shadow:0 0 0 1.2cqw rgba(26,166,183,.25)}
.a-dist{display:flex;gap:.6cqw;height:2cqw;border-radius:99px;overflow:hidden}
.a-dist span{background:rgba(255,255,255,.16)}
.a-dist span.on{background:#1aa6b7}
.a-resp{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2.4cqw;align-items:center}
.a-avatars{display:flex}
.a-avatars i{width:5cqw;height:5cqw;border-radius:50%;background:#3a4079;box-shadow:0 0 0 .6cqw #1f234a;margin-left:-1.4cqw}
.a-avatars i:first-child{margin-left:0;background:#d6f3f6}
.a-avatars i:nth-child(2){background:#1aa6b7}
.pile.m.a-poll>li.a-card .m-text b{white-space:normal;line-height:1.25}

/* 4 MTO: trend against benchmark */
.pile.m.a-mto{display:grid;grid-template-rows:auto 1fr;gap:3cqw}
.pile.m.art>li.a-trend{display:grid!important;grid-template-rows:1fr;align-items:stretch;gap:2cqw;padding:4cqw 4cqw 3.4cqw}
.a-plotarea{position:relative;display:block;align-self:stretch;min-height:20cqw;margin:2cqw 1cqw;background:repeating-linear-gradient(to top,rgba(255,255,255,.07) 0 .3cqw,transparent .3cqw 25%)}
.a-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.a-marks{position:absolute;inset:0}
.a-marks i{position:absolute;width:2.2cqw;height:2.2cqw;margin:-1.1cqw 0 0 -1.1cqw;border-radius:50%;background:#1f234a;box-shadow:inset 0 0 0 .6cqw #1aa6b7}
.a-marks i.end{width:4.2cqw;height:4.2cqw;margin:-2.1cqw 0 0 -2.1cqw;background:#1aa6b7;box-shadow:0 0 0 .8cqw #1f234a,0 0 0 1.8cqw rgba(26,166,183,.35)}
.a-xaxis{display:grid;grid-template-columns:repeat(5,1fr);gap:2cqw;justify-items:center}
.a-xaxis .b{width:50%!important}
.a-key{display:flex;gap:4cqw}
.a-key>span{display:flex;align-items:center;gap:1.4cqw}
.a-key i{width:4cqw;height:.6cqw;border-radius:99px}
.a-key i.org{background:#1aa6b7}
.a-key i.bench{background:repeating-linear-gradient(90deg,rgba(255,255,255,.4) 0 .8cqw,transparent .8cqw 1.4cqw)}

/* 3 Keuringen: certificate */
.pile.m.art>li.a-doc{display:grid!important;align-content:space-between;gap:2.6cqw;padding:3.6cqw 4cqw;background:linear-gradient(160deg,#252a57,#1f234a)}
.a-person{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2.6cqw;align-items:center;padding:2.2cqw;border-radius:2.4cqw;background:rgba(255,255,255,.05)}
.a-avatar{width:7cqw;height:7cqw;border-radius:50%;background:radial-gradient(circle at 50% 38%,#d6f3f6 0 26%,transparent 27%),radial-gradient(ellipse at 50% 105%,#d6f3f6 0 42%,transparent 43%),#3a4079}
.a-checks{display:grid;grid-template-columns:1fr 1fr;gap:1.8cqw 3cqw}
.a-chk{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.8cqw;align-items:center}
.a-signrow{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3cqw;align-items:end;padding-top:2cqw;border-top:.3cqw dashed rgba(255,255,255,.14)}
.a-signbox{display:block;width:26cqw;color:rgba(214,243,246,.75)}
.a-sign{display:block;width:100%;height:auto}
.pile.m.art>li.a-rubber{right:3cqw;top:2.4cqw;bottom:auto}
/* Mobile and tablet */
@media (max-width:1100px){
  .usestrip .uses--nav{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .usestrip .uses--nav::-webkit-scrollbar{display:none}
  .uses--nav li{flex:0 0 auto!important}
}
@media (max-width:900px){
  .hero{gap:0}
  .hero-visual{padding-bottom:3.5rem;margin-top:-10%}
  .hero-band .usestrip .usestrip-h{color:#c3cae8}
  .hchip--1{top:auto!important;bottom:0;left:0!important;right:0!important;margin-inline:auto;width:max-content;max-width:calc(100% - 1rem)}
}
@media (max-width:760px){
  .usestrip{grid-template-columns:minmax(0,1fr);gap:.75rem}
  .usestrip-h{white-space:normal}
  .usestrip .uses--nav{margin-inline:calc(-1 * clamp(16px,4vw,40px));padding-inline:clamp(16px,4vw,40px)}
  .hero .actions .btn{flex:1 1 auto;justify-content:center}
  .hchip strong{font-size:.9375rem}
  .hchip strong + span{font-size:.8125rem}
}

/* Varied compositions per use case */
.pile.m.art{width:72cqw;margin-left:-36cqw}
.pile.m.art li{height:auto;padding:0;grid-template-columns:none;transform:none;display:block}
.pile.m.art li:nth-child(n){display:block}
.pile.m.art>li.a-card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:2.6cqw;padding:2.6cqw 3.4cqw;box-shadow:0 0 0 .45cqw #1aa6b7,0 3cqw 7cqw -3cqw rgba(0,0,0,.6)}
/* 1 flow */
.pile.m.a-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:6cqw 0;justify-items:center}
.pile.m.a-flow::before{content:"";position:absolute;top:9cqw;left:16%;right:16%;height:.5cqw;background:linear-gradient(90deg,#1aa6b7 0 50%,rgba(255,255,255,.18) 50%)}
.pile.m.art>li.a-node{position:relative;width:18cqw;height:18cqw;border-radius:50%;display:grid;place-items:center;color:#c3cae8;background:#1f234a}
.pile.m.art>li.a-node svg{width:7cqw;height:7cqw}
.pile.m.art>li.a-node.done{background:#1aa6b7;border-color:#1aa6b7;color:#fff;box-shadow:0 0 0 1.2cqw #1f234a,0 3cqw 7cqw -3cqw rgba(0,0,0,.6)}
.pile.m.a-flow>li.a-card{grid-column:1/-1;justify-self:stretch}

/* 1 PMO: questionnaire and exam merge into one file */
.pile.m.a-pmo2{height:64cqw;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto 7cqw 1fr;column-gap:4cqw;row-gap:0}
.pile.m.a-pmo2>li.a-card{grid-column:1/-1;margin-bottom:3cqw}
.pile.m.art>li.a-src{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:2.2cqw;padding:2.4cqw 2.6cqw}
.pile.m.art>li.a-merge{grid-column:1/-1;position:relative;background:none;border:0;box-shadow:none;padding:0}
.a-fork{position:absolute;top:0;left:23.6%;right:23.6%;height:55%;border:.6cqw solid #d6f3f6;border-top:0;border-radius:0 0 2.4cqw 2.4cqw}
.a-stem{position:absolute;left:50%;top:55%;bottom:0;width:.6cqw;margin-left:-.3cqw;background:#d6f3f6}
.pile.m.art>li.a-file{grid-column:1/-1;display:grid!important;align-content:space-between;gap:1.8cqw;padding:3cqw 3.6cqw;border-color:rgba(26,166,183,.6)}
.a-file-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2.4cqw;align-items:center;padding-bottom:2cqw;border-bottom:.3cqw solid rgba(255,255,255,.12)}
.a-file .a-avatar{width:6.4cqw;height:6.4cqw}
.a-res{display:grid;grid-template-columns:auto minmax(0,1fr) 26cqw;gap:2.4cqw;align-items:center}
.a-ri{width:5.4cqw;height:5.4cqw;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);color:#8f99bf}
.a-ri svg{width:3.2cqw;height:3.2cqw}

/* 1 PMO: two halves linked */
.pile.m.a-pmo{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;gap:4cqw}
.pile.m.art>li.a-half{display:grid;align-content:start;gap:2.6cqw;padding:3.6cqw}
.a-half-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2.2cqw;align-items:center;padding-bottom:2.4cqw;border-bottom:.3cqw solid rgba(255,255,255,.12)}
.a-half .a-progress{margin-top:1cqw}
.pile.m.art>li.a-link{position:absolute;left:50%;top:calc(18cqw + (64cqw - 18cqw) / 2);width:11cqw;height:11cqw;margin:-5.5cqw 0 0 -5.5cqw;border-radius:50%;display:grid;place-items:center;background:#1aa6b7;color:#fff;border:0;box-shadow:0 0 0 1.2cqw #1f234a}
.pile.m.art>li.a-link svg{width:5.4cqw;height:5.4cqw}
.pile.m.a-pmo>li.a-card{grid-column:1/-1}

/* 2 vitality programme */
.pile.m.a-vital{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr 1fr;gap:3cqw}
.pile.m.art>li.a-prog{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr);gap:3cqw;padding:3.4cqw 4cqw;box-shadow:0 0 0 .45cqw #1aa6b7,0 3cqw 7cqw -3cqw rgba(0,0,0,.6)}
.a-prog-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2.6cqw;align-items:center}
.a-weeks{display:grid;grid-template-columns:repeat(6,1fr);gap:1.2cqw}
.a-week{display:block;height:1.6cqw;border-radius:99px;background:rgba(255,255,255,.14)}
.a-week.done{background:#1aa6b7}
.a-week.now{background:linear-gradient(90deg,#1aa6b7 55%,rgba(255,255,255,.14) 55%)}
.pile.m.art>li.a-theme{display:grid;grid-template-columns:minmax(0,1fr);justify-items:start;align-content:center;gap:1.6cqw;padding:3cqw}
.pile.m.art>li.a-theme.on{background:#1f234a;border-color:rgba(26,166,183,.6)}
/* 2 bento */
.pile.m.a-bento{display:grid;grid-template-columns:1fr 1fr;gap:3cqw}
.pile.m.art>li.a-big{grid-column:1/-1;display:grid;gap:2.2cqw;padding:4cqw;box-shadow:0 0 0 .45cqw #1aa6b7,0 3cqw 7cqw -3cqw rgba(0,0,0,.6)}
.pile.m.art>li.a-big .m-val b{font-size:9cqw;line-height:1}
.pile.m.art>li.a-big .m-val{font-size:3cqw}
.pile.m.art>li.a-big small{font-size:3cqw;color:#c3cae8}
.pile.m.art>li.a-big .normband{height:2cqw}
.pile.m.art>li.a-big .normband em{height:4.4cqw;margin-top:-2.2cqw;width:.9cqw}
.pile.m.art>li.a-small{display:grid;gap:1.8cqw;padding:3cqw}
/* 3 certificate */
.pile.m.a-cert{height:66cqw}
.pile.m.art>li.a-doc{position:absolute;inset:0 12cqw 0 0;display:grid;align-content:start;gap:3.4cqw;padding:4cqw}
.a-doc-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2.6cqw;align-items:center;padding-bottom:3cqw;border-bottom:.3cqw solid rgba(255,255,255,.12)}
.a-doc-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2.6cqw;align-items:center}
.a-tick{width:5cqw;height:5cqw;border-radius:50%;background:rgba(26,166,183,.25);color:#1aa6b7;display:grid;place-items:center}
.a-tick svg{width:3.4cqw;height:3.4cqw}
.pile.m.art>li.a-stamp{position:absolute;right:0;bottom:-3cqw;width:30cqw;height:30cqw;border-radius:50%;background:#1aa6b7;border:0;box-shadow:0 0 0 1.2cqw rgba(26,166,183,.25),0 3cqw 7cqw -3cqw rgba(0,0,0,.6);display:grid;place-content:center;text-align:center;rotate:-10deg;color:#fff}
.a-stamp b{font-family:var(--f-display);font-weight:700;font-size:5cqw;line-height:1.1}
.a-stamp small{font-size:2.5cqw;opacity:.9}
/* 4 chart */
.pile.m.a-chart{height:62cqw}
.pile.m.art>li.a-plot{position:absolute;inset:6cqw 0 0 0;display:grid;grid-template-rows:1fr auto;gap:2cqw;padding:5cqw 5cqw 4cqw}
.a-cols{display:flex;align-items:flex-end;gap:3cqw;height:100%;background:repeating-linear-gradient(to top,transparent 0 calc(25% - .3cqw),rgba(255,255,255,.08) calc(25% - .3cqw) 25%)}
.a-col{flex:1;border-radius:1.4cqw 1.4cqw .4cqw .4cqw;background:rgba(26,166,183,.35)}
.a-col.on{background:#1aa6b7}
.pile.m.art>li.a-tag{position:absolute;top:0;left:30cqw;padding:2.4cqw 3.4cqw;border-radius:3cqw;display:grid;gap:.5cqw;box-shadow:0 0 0 .45cqw #1aa6b7,0 3cqw 7cqw -3cqw rgba(0,0,0,.6)}
.pile.m.art>li.a-tag small{font-size:2.5cqw;color:#c3cae8}
/* 5 heatmap */
.pile.m.a-heat{display:grid;gap:0}
.pile.m.art>li.a-map{display:grid;gap:1.6cqw;padding:4cqw 4cqw 9cqw}
.a-hrow{display:grid;grid-template-columns:12cqw repeat(6,1fr);gap:1.6cqw;align-items:center;border-radius:1.4cqw}
.a-hrow.on{box-shadow:0 0 0 1cqw rgba(26,166,183,.18);background:rgba(26,166,183,.18)}
.a-cell{height:6cqw;border-radius:1.2cqw}
.a-cell.ok{background:rgba(39,174,96,.35)}.a-cell.warn{background:rgba(240,160,32,.6)}.a-cell.risk{background:rgba(214,60,47,.75)}
.pile.m.a-heat>li.a-card{margin:-7cqw 6cqw 0}
/* 6 phone */
.pile.m.a-phone{width:48cqw;margin-left:-24cqw}
.pile.m.art>li.a-device{display:grid;gap:2.6cqw;padding:5cqw 4cqw 4cqw;border-radius:6cqw;border:.8cqw solid rgba(255,255,255,.22);box-shadow:0 4cqw 10cqw -4cqw rgba(0,0,0,.6)}
.a-notch{justify-self:center;width:12cqw;height:1.6cqw;border-radius:99px;background:rgba(255,255,255,.2);margin-bottom:1cqw}
.a-progress{height:1cqw;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}.a-progress span{display:block;width:60%;height:100%;background:#1aa6b7}
.a-q b{display:block;font-family:var(--f-display);font-weight:600;font-size:3.6cqw;line-height:1.25;color:#fff;margin:1cqw 0}
.a-opt{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:2cqw;padding:2.2cqw;border-radius:2.4cqw;border:.3cqw solid rgba(255,255,255,.14)}
.a-opt i{width:3.4cqw;height:3.4cqw;border-radius:50%;border:.5cqw solid rgba(255,255,255,.35)}
.a-opt.on{border-color:#1aa6b7;background:rgba(26,166,183,.18)}.a-opt.on i{border-color:#1aa6b7;background:radial-gradient(circle,#1aa6b7 45%,transparent 50%)}
.a-next{justify-self:end;width:14cqw;height:5cqw;border-radius:99px;background:#1aa6b7;margin-top:1cqw}
/* 7 calendar */
.pile.m.a-cal{display:grid}
.pile.m.art>li.a-month{display:grid;gap:3cqw;padding:4cqw 4cqw 9cqw}
.a-month-head{display:grid;grid-template-columns:1fr auto;align-items:center}
.a-arrows{display:flex;gap:1.6cqw}.a-arrows i{width:4cqw;height:4cqw;border-radius:50%;background:rgba(255,255,255,.12)}
.a-days{display:grid;grid-template-columns:repeat(7,1fr);gap:1.6cqw}
.a-day{aspect-ratio:1;border-radius:1.4cqw;background:rgba(255,255,255,.08)}
.a-day.off{background:transparent}
.a-day.on{background:#1aa6b7;box-shadow:0 0 0 .8cqw rgba(26,166,183,.25)}
.pile.m.a-cal>li.a-card{margin:-7cqw 6cqw 0}
/* 8 chat */
.pile.m.a-chat{display:grid;gap:2.6cqw}
.pile.m.art>li.a-bubble{display:grid;gap:1.4cqw;width:62%;padding:3cqw 3.4cqw;border-radius:3.4cqw 3.4cqw 3.4cqw .8cqw}
.pile.m.art>li.a-bubble.right{justify-self:end;background:rgba(26,166,183,.28);border-color:transparent;border-radius:3.4cqw 3.4cqw .8cqw 3.4cqw;width:48%}
.pile.m.a-chat>li.a-card{margin-top:2cqw}

/* One footprint for every composition: 72 x 64 cqw */
.pile.m.art{width:72cqw;margin-left:-36cqw;height:64cqw}
.pile.m.a-flow{grid-template-rows:auto 1fr;align-content:stretch;gap:5cqw 0}
.pile.m.a-flow::before{top:11cqw}
.pile.m.art>li.a-node{width:22cqw;height:22cqw}
.pile.m.art>li.a-node svg{width:8.5cqw;height:8.5cqw}
.pile.m.a-flow>li.a-card{align-self:stretch;padding:4cqw;align-content:center}
.pile.m.a-bento{grid-template-rows:1fr auto}
.pile.m.art>li.a-big{align-content:center}
.pile.m.art>li.a-small{padding:4cqw 3cqw}
.pile.m.a-cert{height:64cqw}
.pile.m.art>li.a-doc{inset:0 0 0 0}
.pile.m.art>li.a-stamp{right:-5cqw;top:-6cqw;bottom:auto;width:26cqw;height:26cqw;rotate:12deg}
.pile.m.a-chart{height:64cqw}
.pile.m.art>li.a-plot{inset:6cqw 0 0 0}
.pile.m.a-heat,.pile.m.a-cal{grid-template-rows:1fr auto;align-content:stretch}
.pile.m.art>li.a-map,.pile.m.art>li.a-month{align-content:space-between}
.pile.m.a-phone{width:52cqw;margin-left:-26cqw}
.pile.m.art>li.a-device{height:100%;align-content:space-between}
.pile.m.a-chat{align-content:space-between}

/* keep the tall compositions inside the common footprint */
.pile.m.art{overflow:visible}
.a-cell{height:4.2cqw}
.pile.m.art>li.a-map{gap:1.3cqw;padding:3.4cqw 4cqw 8.5cqw}
.a-hrow{gap:1.3cqw}
.a-days{gap:1.3cqw}
.a-day{aspect-ratio:auto;height:4.4cqw}
.pile.m.art>li.a-month{gap:2.4cqw;padding:3.4cqw 4cqw 8.5cqw}
.pile.m.art>li.a-device{gap:2cqw;padding:4cqw 3.6cqw 3.4cqw}
.a-opt{padding:1.6cqw 2cqw}
.a-q b{font-size:3.3cqw;margin:.4cqw 0}
.a-next{height:4.4cqw;margin-top:0}
.pile.m.a-flow>li.a-card{align-self:end;padding:3.4cqw 4cqw}
.pile.m.a-flow{grid-template-rows:1fr auto;align-content:stretch}
.pile.m.a-flow>li.a-node{align-self:center}
.pile.m.a-flow::before{top:calc((64cqw - 13cqw - 5cqw) / 2)}
/* entrance: the cards rise out of the circle, the bottom one first */
@media (prefers-reduced-motion:no-preference){
  .hs-card[aria-hidden="false"] .pile li{animation:rise .75s cubic-bezier(.2,.75,.2,1) .2s both}
  .hs-card[aria-hidden="false"] .pile li:nth-last-child(2){animation-delay:0.26s}
  .hs-card[aria-hidden="false"] .pile li:nth-last-child(3){animation-delay:0.32s}
  .hs-card[aria-hidden="false"] .pile li:nth-last-child(4){animation-delay:0.38s}
  .hs-card[aria-hidden="false"] .pile li:nth-last-child(5){animation-delay:0.44s}
  .hs-card[aria-hidden="false"] .pile li:nth-last-child(6){animation-delay:0.50s}
  .hs-card[aria-hidden="false"] .pile li:nth-last-child(7){animation-delay:0.56s}
  .hs-card[aria-hidden="false"] .pile li:nth-last-child(8){animation-delay:0.62s}
  .hs-card[aria-hidden="false"] .pile li:nth-last-child(9){animation-delay:0.68s}
  .hs-card[aria-hidden="false"] .pile li:nth-last-child(10){animation-delay:0.74s}
  .hs-card[aria-hidden="false"] .pile li:nth-last-child(11){animation-delay:0.80s}
  @keyframes rise{from{opacity:0;translate:0 26cqw}to{opacity:1;translate:0 0}}
}
.card-head.win{justify-content:flex-start;gap:.9rem;padding-block:.8rem}
.win-dots{display:flex;gap:.35rem}.win-dots i{width:.55rem;height:.55rem;border-radius:50%;background:var(--line)}
.win strong{font-size:var(--s-sm)}
.sk{display:block;height:.5rem;border-radius:999px;background:var(--line)}
.x{height:100%;display:grid;align-content:stretch;gap:1.4rem}
.x-mail,.x-day,.x-hbars{grid-template-rows:minmax(0,1fr) auto}
.x-meas,.x-branch{grid-template-rows:minmax(0,1fr)}
.x-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1rem;font-size:var(--s-xs);color:var(--ink-3)}
.x-legend i{display:inline-block;width:.65rem;height:.65rem;border-radius:3px;margin-right:.35rem;vertical-align:-1px}
.x-legend i.dot{border-radius:50%}
.lg-on{background:var(--ill-hi)}.lg-b{background:var(--ill-mid)}.lg-f{border:1.5px dashed var(--ill-dash)}.lg-r{background:repeating-linear-gradient(-45deg,var(--line) 0 2px,transparent 2px 4px)}
.tile{position:relative;display:grid;padding:.6rem .9rem .6rem 1.15rem;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.tile i{position:absolute;left:0;top:.55rem;bottom:.55rem;width:4px;border-radius:0 3px 3px 0}
.tile b{font-family:var(--f-display);font-weight:600;font-size:1.3rem;line-height:1.15;font-variant-numeric:tabular-nums}
.tile span{font-size:var(--s-xs);color:var(--ink-3)}
.count{font-family:var(--f-mono);font-size:var(--s-xs);background:var(--ill-mid);color:var(--ink);border-radius:999px;padding:.1rem .5rem}
/* 0 · mail stack */
.mail-stack{position:relative;justify-self:stretch;margin:1.3rem 1.6rem 0 0}
.mcard{position:absolute;inset:0;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.m3{transform:translate(1.6rem,-1.3rem) scale(.9);opacity:.55}
.m2{transform:translate(.8rem,-.65rem) scale(.95);opacity:.85}
.m1{padding:1rem;display:flex;flex-direction:column;gap:.55rem;box-shadow:0 18px 34px -20px var(--shadow)}
.m-top{display:flex;gap:.6rem;align-items:center;margin-bottom:.15rem}
.m-av{flex:none;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--ill-hi)}
.m-lines{flex:1;display:grid;gap:.35rem}
.m-band{flex:1;max-height:5.5rem;min-height:2.5rem;border-radius:8px;background:var(--ill-mid)}
.m-cta{margin-top:auto;width:7.5rem;height:1.6rem;border-radius:999px;background:var(--ill-hi)}
.x-time{list-style:none;margin:0;padding:0;justify-self:stretch;display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.x-time::before,.x-time::after{content:"";position:absolute;top:.45rem;height:2px;left:12.5%}
.x-time::before{right:12.5%;background:var(--line)}
.x-time::after{width:50%;background:var(--teal)}
.x-time li{position:relative;z-index:1;display:grid;justify-items:center;gap:.45rem}
.x-time i{width:.95rem;height:.95rem;border-radius:50%;background:var(--surface);border:2px solid var(--line)}
.x-time .done i{background:var(--teal);border-color:var(--teal)}
.x-time .now i{border-color:var(--teal);box-shadow:0 0 0 4px var(--ill-mid)}
.x-time span{font-family:var(--f-mono);font-size:.6875rem;color:var(--ink-3)}
/* 1 · day view */
.day{display:grid;grid-template-columns:2.6rem repeat(3,minmax(0,1fr));grid-template-rows:auto repeat(8,minmax(0,1fr));gap:5px 7px}
.dv-h{grid-row:1;font-size:var(--s-xs);color:var(--ink-3);padding-bottom:.25rem;white-space:nowrap}
.dv-t{grid-column:1;font-family:var(--f-mono);font-size:.625rem;color:var(--ink-3);transform:translateY(-.1rem)}
.dv{border-radius:6px;background:var(--ill-mid);display:grid;place-items:center}
.dv.on{background:var(--ill-hi)}
.dv.on b{font-family:var(--f-mono);font-weight:500;font-size:.6875rem;width:1.2rem;height:1.2rem;border-radius:50%;display:grid;place-items:center;background:var(--teal);color:#1f234a}
.dv.f{background:transparent;border:1.5px dashed var(--ill-dash)}
.dv.r{background:repeating-linear-gradient(-45deg,var(--sunk) 0 4px,transparent 4px 8px);border:1px solid var(--line)}
/* 2 · measurement results, as Qiek shows them: banded norm bar, pointer, bordered badge */
.mrows{list-style:none;margin:0;padding:0;display:grid;grid-auto-rows:1fr;gap:.65rem}
.mr{display:grid;grid-template-columns:2.2rem minmax(0,1fr) 6.6rem;gap:.8rem;align-items:center;padding:.5rem .85rem;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.mr .x-ico{width:2.2rem;height:2.2rem}
.mr-main{display:grid;gap:.5rem;min-width:0}
.mr-name{font-family:var(--f-display);font-weight:600;font-size:var(--s-sm)}
.mr-bar{position:relative;display:block}
.mr-bands{display:flex;gap:2px;height:.5rem;border-radius:999px;overflow:hidden}
.mr-bands b{opacity:.35}
.mr-bands b.cur{opacity:1}
.mr-ptr{position:absolute;top:-.3rem;width:3px;height:1.1rem;margin-left:-1.5px;border-radius:2px;background:var(--ink);box-shadow:0 0 0 2px var(--surface)}
.mr-badge{justify-self:end;font-size:var(--s-xs);color:var(--ink-2);border:2px solid;border-radius:999px;padding:.2rem .6rem;white-space:nowrap}
.mr-badge b{font-family:var(--f-display);font-weight:600;font-size:var(--s-sm);color:var(--ink)}
.mr-badge.ok{background:none;border-color:var(--ok)}.mr-badge.warn{background:none;border-color:var(--warn)}
/* 3 · horizontal bars */
.hbars{display:grid;grid-auto-rows:1fr;align-items:center;gap:.4rem}
.hb{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:1rem;align-items:center}
.hb .stack{display:flex;height:1.4rem;border-radius:999px;overflow:hidden;gap:2px}
.hb-lock{height:1.4rem;border:1.5px dashed var(--line);border-radius:999px;display:grid;place-items:center;color:var(--ink-3)}
.hb-lock svg{width:.85rem;height:.85rem}
/* 4 · branch */
.br{display:grid;grid-template-columns:7.5rem 2.75rem minmax(0,1fr);align-items:stretch;height:100%}
.br-src{align-self:center}
.br-src{border:1px solid var(--line);border-radius:12px;padding:.8rem;display:grid;gap:.5rem;background:var(--surface)}
.dot-lg{width:1.4rem;height:1.4rem;border-radius:50%;margin-bottom:.15rem}
.br-lines{width:100%;height:100%}
.br-lines path{fill:none;stroke:var(--teal);stroke-width:2;vector-effect:non-scaling-stroke}
.br-offers{list-style:none;margin:0;padding:0;display:grid;grid-auto-rows:1fr;gap:1rem}
.br-offers li{display:grid;grid-template-columns:2rem minmax(0,1fr) auto;gap:.6rem;align-items:center;padding:.55rem .6rem;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.x-ico{width:2rem;height:2rem;border-radius:9px;background:var(--ill-mid);color:var(--ill-mid-ink);display:grid;place-items:center}
.x-ico svg{width:1.05rem;height:1.05rem}
.x-lines{display:grid;gap:.4rem}
@media (max-width:900px){.deck,.dots{margin-inline:auto}}
@media (max-width:520px){.br{grid-template-columns:5.5rem 1.75rem minmax(0,1fr)}}
.hs-card .card-foot{margin-top:auto}
.dots{display:flex;justify-content:center;gap:.5rem;margin-top:1.5rem;width:min(30rem,100%);margin-inline:auto 1rem;position:relative;z-index:1}
.dots button{appearance:none;border:0;background:transparent;padding:.4rem .15rem;cursor:pointer;display:grid;place-items:center}
.dots span{display:block;width:.6rem;height:.6rem;border-radius:999px;background:var(--dot);position:relative;overflow:hidden;transition:width .3s ease,background-color .3s ease}
.dots button:hover span{background:var(--ink)}
.hs-stat{padding:1.1rem 1.25rem .5rem;display:grid;gap:.6rem}
.hs-stat .big{font-family:var(--f-display);font-weight:600;font-size:var(--s-xl);line-height:1.1}
.hs-stat .big small{font-family:var(--f-body);font-weight:400;font-size:var(--s-sm);color:var(--ink-2);margin-left:.3rem}
.hs-bar{display:block;height:.6rem;background:var(--sunk);border-radius:999px;overflow:hidden}
.hs-bar b{display:block;height:100%;background:var(--teal);border-radius:999px}
.hs-route{padding:1.1rem 1.25rem .9rem;display:grid;gap:.7rem;border-bottom:1px solid var(--line)}
.hs-who{font-size:var(--s-sm);color:var(--ink-2)}
.hs-who b{color:var(--ink)}
.hs-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}
.hs-steps span{background:var(--teal-strong);color:var(--on-teal);border-radius:8px;padding:.5rem .6rem;font-size:.8125rem;line-height:1.3}
.hs-steps b{display:block;font-family:var(--f-mono);font-weight:500}
.hs-locs{padding:.9rem 1.25rem 1rem;display:grid;gap:.65rem}
.hs-loc{display:grid;grid-template-columns:6.5rem minmax(0,1fr) 3rem;gap:.75rem;align-items:center;font-size:var(--s-sm)}
.hs-loc .pc{font-family:var(--f-mono);font-size:var(--s-xs);text-align:right;color:var(--ink-3)}
.hs-note{padding:.25rem 1.25rem 1.1rem;font-size:var(--s-xs);color:var(--ink-3)}
/* Anchored to the content container and cropped by the bottom of the dark band. The band's foot on the rule is centred under the slide card:
   card centre sits 14.5rem from the container's right edge (27rem card + 1rem margin),
   the band's foot centre sits (R + r) / 2 left of the ring centre. Radius R is tall enough
   that the top end runs off the top of the page. */
/* same arc as behind the feature cards: 58rem, inner radius 63% */
.hero-ring--inner{--size:58rem;--inner:63%;color:var(--teal)}
.hero-ring{bottom:0;right:calc(16rem - (58rem + 30rem) / 2)}
@media (max-width:900px){.hero-ring--inner{--size:30rem}.hero-ring{right:calc(50% - (30rem + 18rem) / 2)}}
@media (max-width:760px){.hero{padding-top:3.25rem}}
@media (max-width:900px){.hero{grid-template-columns:1fr}}
@media (max-width:720px){.hero .lede{color:var(--on-inverse)}}

.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.card.lifted{box-shadow:0 1px 0 var(--line),0 24px 48px -28px var(--shadow)}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:.75rem;flex-wrap:wrap;padding:1rem 1.25rem .9rem;border-bottom:1px solid var(--line)}
.card-head strong{font-family:var(--f-display);font-weight:600;font-size:var(--s-sm)}
.card-head .sub{display:block;font-size:var(--s-xs);color:var(--ink-3)}
.chip{font-size:var(--s-xs);padding:.15rem .6rem;border-radius:999px;background:var(--teal-tint);color:var(--teal-text);white-space:nowrap}
.card-foot{padding:.8rem 1.25rem;border-top:1px solid var(--line);background:var(--sunk);font-size:var(--s-xs);color:var(--ink-3)}

/* hero project overview */
.funnel{display:grid;gap:.7rem;padding:1.2rem 1.25rem 1.3rem}
.f-row{display:grid;grid-template-columns:9.5rem minmax(0,1fr) 2.6rem 2.6rem;gap:.75rem;align-items:center;font-size:var(--s-sm)}
.f-row .bar{height:.75rem;background:var(--sunk);border-radius:999px;overflow:hidden}
.f-row .bar b{display:block;height:100%;background:var(--teal);border-radius:999px;transform-origin:left}
.f-row.soft .bar b{background:var(--teal-strong);opacity:.55}
.f-row .n,.f-row .pc{font-family:var(--f-mono);font-size:var(--s-xs);text-align:right;font-variant-numeric:tabular-nums}
.f-row .pc{color:var(--ink-3)}
@media (prefers-reduced-motion:no-preference){
  .f-row .bar b{animation:grow .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * 110ms + 200ms)}
  @keyframes grow{from{transform:scaleX(.08)}to{transform:scaleX(1)}}
}
.feed{list-style:none;margin:0;padding:.35rem 1.25rem .6rem;border-top:1px solid var(--line)}
.feed li{display:grid;grid-template-columns:3.2rem 1fr;gap:.75rem;padding-block:.55rem;font-size:var(--s-sm);border-top:1px dashed var(--line)}
.feed li:first-child{border-top:0}
.feed time{font-family:var(--f-mono);font-size:var(--s-xs);color:var(--ink-3);padding-top:.12rem}
.feed .who{display:block;font-size:var(--s-xs);color:var(--ink-3)}
@media (max-width:460px){.f-row{grid-template-columns:7.5rem minmax(0,1fr) 2.4rem}.f-row .pc{display:none}}

/* sections */
section{padding-block:clamp(3.5rem,8vw,6.5rem)}
/* two light sections in a row share one gap instead of stacking both paddings */
section.band--mint + section.band--mint{padding-top:0}
/* Full-bleed section backgrounds inside the centred wrapper */
/* Sections are inset panels: a small gutter to the viewport edge, rounded corners, a gap between them.
   The clip keeps anything wider (the hero arc, the logo marquee) inside the panel. */
.wrap{--gut:2vw;--rad:clamp(18px,2.2vw,32px)}/* phones: the dark panels run to the screen edge, no white frame around them */@media (max-width:760px){.wrap{--gut:0px;--rad:0px}}
.band{position:relative;isolation:isolate}
.band::before{content:"";position:absolute;z-index:-1;inset:0 calc(50% - 50vw);background:var(--band-bg)}
/* dark sections, the footer included, are inset panels on the mint page */
/* dark backgrounds never grow wider than 1920px */
.band.theme-dark{clip-path:inset(0 max(calc(50% - 50vw + var(--gut)),calc(50% - 960px)) round var(--rad))}
.band.theme-dark::before{inset:0 max(calc(50% - 50vw + var(--gut)),calc(50% - 960px));border-radius:var(--rad)}
.wrap > .hero-band{margin-top:1.25vw}
/* the footer closes the page with the same gap the hero opens it with */
.wrap > .footer-band{margin-bottom:1.25vw}
.band--white{--band-bg:#ffffff}
.band--mint{--band-bg:var(--sunk)}
.theme-dark.band{--band-bg:var(--ground)}
.hero-band{--S:clamp(440px,52vw,840px);padding-bottom:clamp(2.5rem,5vw,4rem)}
.hero-band > :not(.ring){position:relative;z-index:1}
.sec-head{display:grid;gap:1rem;margin-bottom:clamp(2rem,4vw,3rem);max-width:52rem}
.sec-head p{color:var(--ink-2);max-width:46rem}
/* fill the first line of a section heading instead of splitting it in two halves */
.sec-head h2{text-wrap:pretty}
.sec-head--center{margin-inline:auto;text-align:center;justify-items:center}
/* Logo slider: two rows drifting in opposite directions inside a navy panel, fading out at the edges */
.logo-panel{display:grid;gap:2rem;justify-items:center}
.logo-head{display:grid;gap:1.25rem;justify-items:center;text-align:center;padding-inline:clamp(1.25rem,4vw,3rem);margin-bottom:1.5rem}
.logo-head h2{color:#fff;font-size:var(--s-xl);letter-spacing:-.02em;text-wrap:balance}
.logo-num{font-weight:700}
.logo-sub{font-weight:500;color:var(--ink-2)}
.logo-dot{color:var(--teal)}
.logo-head p{max-width:46rem;color:var(--ink-2);font-size:var(--s-md)}
.marquees{display:grid;gap:1.5rem;width:100vw;margin-inline:calc(50% - 50vw);-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.marquee{overflow:hidden}
.marquee-track{list-style:none;margin:0;padding:0;display:flex;gap:1.5rem;width:max-content;animation:marquee 110s linear infinite}
.marquee--right .marquee-track{animation-direction:reverse;margin-left:-8.75rem}
.marquee-track li{flex:none;width:16rem;height:9rem;border-radius:28px;background:#fff;display:grid;place-items:center;padding:1.5rem 2rem}
.marquee-track img{max-width:100%;max-height:3.2rem;width:auto;object-fit:contain}
@keyframes marquee{to{transform:translateX(calc(-50% - .75rem))}}
@media (max-width:600px){.marquee-track li{width:11rem;height:6.5rem;border-radius:20px;padding:1rem 1.25rem}.marquee-track img{max-height:2.2rem}.marquees,.marquee-track{gap:1rem}.marquee--right .marquee-track{margin-left:-6rem}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}.marquee{overflow-x:auto}}

/* voor wie */
.usestrip{position:relative;z-index:1;padding-top:.5rem;display:grid;grid-template-columns:auto minmax(0,1fr);gap:2rem;align-items:center}
.usestrip-h{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-text);white-space:nowrap}
.usestrip .uses{flex-wrap:nowrap;gap:.45rem}
.usestrip .uses li{background:var(--ground);border-color:var(--line);color:var(--ink);font-size:.875rem;padding:.35rem .9rem;white-space:nowrap;flex:1 1 auto;text-align:center}
@media (max-width:1100px){.usestrip .uses{flex-wrap:wrap}.usestrip .uses li{flex:0 0 auto}}
@media (max-width:760px){.usestrip{grid-template-columns:1fr;gap:1rem}}
.aud-list.aud-list--section{margin-top:clamp(2rem,4vw,3rem);gap:1rem}
.aud-list.aud-list--section li,.aud-list.aud-list--section li:nth-child(n){background:#fff;border:0;border-radius:16px;padding:1.25rem}
.aud-list--section b{font-size:var(--s-md)}
.aud-list--section b + span{font-size:var(--s-sm)}
.aud-list--section .aud-ico{width:2.9rem;height:2.9rem}
.aud-list--section li{grid-template-columns:2.9rem minmax(0,1fr)}
.roles-panel{margin-top:clamp(2.5rem,5vw,3.5rem)}
.roles-panel .panel-title{font-size:var(--s-lg);font-weight:600;letter-spacing:-.01em}
.roles-panel .sec-head{margin-bottom:1.25rem;gap:.4rem}
.roles-panel .sec-head p{font-size:var(--s-sm)}
.aud-label{font-family:var(--f-mono);font-size:var(--s-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--teal-text);margin-bottom:1rem}
.aud-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.aud-list li{display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:.9rem;align-items:start;padding:1rem 1.25rem 1rem 0}
.aud-list li:nth-child(n+4){border-top:1px solid var(--line)}
.aud-list li:not(:nth-child(3n+1)){padding-left:1.25rem;border-left:1px solid var(--line)}
.aud-ico{width:2.6rem;height:2.6rem;border-radius:12px;background:var(--teal-tint);color:var(--teal-text);display:grid;place-items:center}
.aud-ico svg{width:1.3rem;height:1.3rem}
.aud-list b{display:block;font-family:var(--f-display);font-weight:600;font-size:var(--s-sm);line-height:1.3;color:var(--ink);margin-bottom:.2rem}
.aud-list b + span{display:block;font-size:var(--s-xs);color:var(--ink-2);line-height:1.45}
.vw-grid{display:block}
.vw-grid .sec-head{margin-bottom:0}
.vw-uses{display:grid;gap:1rem}
.vw-uses-h{font-family:var(--f-display);font-weight:600;font-size:var(--s-md)}
.uses{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}
.uses li{font-size:var(--s-sm);padding:.4rem .9rem;border:1px solid var(--line);border-radius:999px;color:var(--ink);background:#fff}
@media (max-width:900px){.aud-list{grid-template-columns:repeat(2,minmax(0,1fr))}.aud-list li:nth-child(n){padding-left:0;border-left:0}.aud-list li:nth-child(even){padding-left:1.25rem;border-left:1px solid var(--line)}.aud-list li:nth-child(n+3){border-top:1px solid var(--line)}.vw-grid{grid-template-columns:1fr;align-items:start}}
@media (max-width:560px){.aud-list{grid-template-columns:1fr}.aud-list li:nth-child(n){padding-left:0;border-left:0}.aud-list li:nth-child(n+2){border-top:1px solid var(--line)}}

/* functionaliteiten */
.features{display:grid;grid-template-columns:16.5rem minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.tabs{display:grid;gap:.15rem;position:sticky;top:1rem}
.tab{text-align:left;font:inherit;background:transparent;border:0;border-left:2px solid var(--line);padding:.65rem 1rem;cursor:pointer;color:var(--ink-2);display:grid;gap:.05rem;border-radius:0 8px 8px 0}
.tab b{font-family:var(--f-display);font-weight:600;color:var(--ink);font-size:var(--s-sm)}
.tab span{font-size:var(--s-xs);line-height:1.4}
.tab:hover b{color:var(--teal-text)}
.tab[aria-selected="true"]{border-left-color:var(--teal);background:var(--surface)}
@media (max-width:900px){
  .features{grid-template-columns:1fr}
  .tabs{position:static;display:flex;overflow-x:auto;gap:.4rem;padding-bottom:.4rem}
  .tab{border:1px solid var(--line);border-radius:999px;white-space:nowrap;padding:.45rem .9rem;background:var(--surface)}
  .tab span{display:none}
  .tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink)}
  .tab[aria-selected="true"] b{color:var(--ground)}
}
.fpanel{display:grid;gap:1.5rem}
.fpanel-text{display:grid;gap:.6rem;max-width:42rem;align-content:start;min-height:7.5rem}
/* one calm stage per feature: same size on every tab, one card inside */
.stage{height:27.5rem;display:grid;place-items:center;padding:1.5rem;border-radius:18px;background:#dbe8ee;overflow:hidden}
.stage > .card{width:min(100%,36rem);margin:0;box-shadow:0 1.25rem 2.5rem -1.75rem rgba(31,35,74,.35)}
.stage--wide > .card{width:min(100%,40rem)}
@media (max-width:700px){.stage{height:auto;padding:1rem}.fpanel-text{min-height:0}}
.fpanel-text p{color:var(--ink-2)}
.ticks{list-style:none;padding:0;margin:.25rem 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem 1.75rem;font-size:var(--s-sm);color:var(--ink-2)}
.ticks li{position:relative;padding-left:1.1rem}
.ticks li::before{content:"";position:absolute;left:0;top:.6em;width:.55rem;height:2px;background:var(--teal)}
@media (max-width:600px){.ticks{grid-template-columns:1fr}}
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem;align-items:start}
@media (max-width:700px){.duo{grid-template-columns:1fr}}

/* vragenlijst visual */
.modules{list-style:none;margin:0;padding:.5rem 1.25rem .9rem;display:grid}
.modules li{display:flex;align-items:center;gap:.7rem;padding-block:.45rem;font-size:var(--s-sm);border-top:1px dashed var(--line)}
.modules li:first-child{border-top:0}
.box{width:1.05rem;height:1.05rem;border-radius:4px;border:1.5px solid var(--ink-3);display:grid;place-items:center;flex:none}
.box.on{background:var(--teal-strong);border-color:var(--teal-strong)}
.box.on::after{content:"";width:.5rem;height:.28rem;border-left:2px solid var(--on-teal);border-bottom:2px solid var(--on-teal);transform:rotate(-45deg) translate(1px,-1px)}
.modules small{margin-left:auto;font-family:var(--f-mono);font-size:.6875rem;color:var(--ink-3)}
.question{padding:1.25rem;display:grid;gap:1rem}
.question .q{font-family:var(--f-display);font-weight:600;font-size:var(--s-md);line-height:1.35}
.scale{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.35rem}
.scale span{border:1.5px solid var(--line);border-radius:8px;padding:.5rem .2rem;text-align:center;font-size:.75rem;color:var(--ink-2)}
.scale span.sel{border-color:var(--teal);background:var(--teal-tint);color:var(--ink);font-weight:700}
.progress{height:.35rem;background:var(--sunk);border-radius:999px;overflow:hidden}
.progress b{display:block;height:100%;width:58%;background:var(--teal)}

/* metingen visual */
.measure{list-style:none;margin:0;padding:.25rem 1.25rem .5rem}
.measure li{display:grid;grid-template-columns:minmax(0,1fr) 7.5rem .3rem;gap:.9rem;align-items:center;padding-block:.6rem;border-top:1px solid var(--line);font-size:var(--s-sm)}
.measure li:first-child{border-top:0}
.measure .k small{display:block;font-size:var(--s-xs);color:var(--ink-3)}
.field{font-family:var(--f-mono);font-size:var(--s-sm);border:1.5px solid var(--line);border-radius:6px;padding:.3rem .55rem;display:flex;justify-content:space-between;gap:.4rem;font-variant-numeric:tabular-nums}
.field.calc{background:var(--sunk);border-style:dashed}
.field i{font-style:normal;color:var(--ink-3);font-size:.6875rem;align-self:center}
.measure .st{align-self:stretch;border-radius:2px}
.cond{margin:0 1.25rem 1.1rem;padding:.75rem .9rem;border:1.5px dashed var(--teal);border-radius:10px;font-size:var(--s-sm);display:grid;gap:.1rem}
.cond b{font-family:var(--f-display);font-weight:600}
.cond span{color:var(--ink-2);font-size:var(--s-xs)}
.ok{background:var(--ok)} .warn{background:var(--warn)} .risk{background:var(--risk)} .none{background:var(--line)}

/* day board */
.board-scroll{overflow-x:auto}
.grid{--row:15px;display:grid;grid-template-columns:3.2rem repeat(3,minmax(7.5rem,1fr));grid-template-rows:auto repeat(18,var(--row));column-gap:6px;padding:.75rem 1rem 1rem .5rem;min-width:28rem}
.col-h{grid-row:1;padding:0 .25rem .6rem;font-size:var(--s-xs);line-height:1.3}
.col-h b{display:block;font-family:var(--f-display);font-weight:600;color:var(--ink)}
.col-h span{color:var(--ink-3)}
.t{grid-column:1;font-family:var(--f-mono);font-size:.6875rem;color:var(--ink-3);transform:translateY(-.45em);text-align:right;padding-right:.5rem}
.gl{grid-column:2/5;border-top:1px dashed var(--line);pointer-events:none}
.slot{margin:1.5px 0;border-radius:6px;padding:.2rem .45rem;font-size:.75rem;line-height:1.2;overflow:hidden;display:flex;flex-direction:column;justify-content:center;min-width:0;position:relative;z-index:1}
.slot small{font-family:var(--f-mono);font-size:.625rem;opacity:.75;white-space:nowrap}
.slot .n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.p{background:var(--teal-tint);color:var(--ink);cursor:pointer;transition:background-color .2s ease,color .2s ease}
.p.on{background:var(--teal-strong);color:var(--on-teal)}
.p .step{position:absolute;right:.35rem;top:50%;transform:translateY(-50%);font-family:var(--f-mono);font-size:.625rem;width:1.1rem;height:1.1rem;border-radius:50%;display:none;place-items:center;background:var(--on-teal);color:var(--teal-strong);font-weight:500}
.p.on .step{display:grid}
.reserve{background:repeating-linear-gradient(-45deg,var(--sunk) 0 5px,var(--surface) 5px 10px);border:1px solid var(--line);color:var(--ink-2)}
.pause{background:repeating-linear-gradient(90deg,var(--hatch) 0 1px,transparent 1px 6px);background-color:var(--sunk);color:var(--ink-2)}
.free{border:1.5px dashed var(--teal);color:var(--teal-text);background:transparent}
.board-foot{padding:.9rem 1.25rem 1.1rem;border-top:1px solid var(--line);background:var(--sunk);font-size:var(--s-sm);color:var(--ink-2)}
.board-foot b{color:var(--ink)}
.board-foot .hint{display:block;margin-top:.35rem;font-size:var(--s-xs);color:var(--ink-3)}
.key{display:flex;gap:1rem;flex-wrap:wrap;padding:.1rem 1.25rem .9rem;font-size:var(--s-xs);color:var(--ink-3);background:var(--sunk)}
.key i{display:inline-block;width:.9rem;height:.6rem;border-radius:2px;margin-right:.35rem}

/* mail visual */
.mail-band{height:.4rem;background:var(--teal)}
.mail-top{padding:.8rem 1.1rem;border-bottom:1px solid var(--line);display:grid;gap:.1rem;font-size:var(--s-xs);color:var(--ink-3)}
.mail-top b{color:var(--ink)}
.mail-body{padding:1.1rem;display:grid;gap:.8rem;color:var(--ink-2);font-size:var(--s-sm)}
.fake-btn{justify-self:start;background:var(--ink);color:#fff;border-radius:6px;padding:.5rem .9rem;font-family:var(--f-display);font-weight:600;font-size:var(--s-xs)}
.url{font-family:var(--f-mono);font-size:var(--s-xs);color:var(--ink-3)}
.langs{display:flex;gap:.4rem}
.langs span{font-family:var(--f-mono);font-size:var(--s-xs);border:1px solid var(--line);border-radius:4px;padding:.1rem .4rem;color:var(--ink-2)}
.langs span.on{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.sends{list-style:none;margin:0;padding:.25rem 1.25rem .5rem}
.sends li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.75rem;align-items:center;padding-block:.6rem;border-top:1px solid var(--line);font-size:var(--s-sm)}
.sends li:first-child{border-top:0}
.sends small{display:block;font-size:var(--s-xs);color:var(--ink-3)}
.state{font-size:.75rem;padding:.12rem .55rem;border-radius:999px;white-space:nowrap;border:1px solid var(--line);color:var(--ink-2)}
.state.done{background:var(--teal-tint);border-color:transparent;color:var(--teal-text)}

/* results visual */
.out{list-style:none;margin:0;padding:.25rem 1.25rem .5rem}
.out li{display:grid;grid-template-columns:.3rem 1fr auto;gap:.9rem;align-items:center;padding-block:.6rem;border-top:1px solid var(--line)}
.out li:first-child{border-top:0}
.out i{align-self:stretch;border-radius:2px}
.out .k{font-size:var(--s-sm)}
.out .k small{display:block;color:var(--ink-3);font-size:var(--s-xs)}
.out .v{font-family:var(--f-mono);font-size:var(--s-xs);text-align:right;font-variant-numeric:tabular-nums}
.dist{display:grid;gap:.85rem;padding:1rem 1.25rem 1.2rem}
.dist-row{display:grid;gap:.35rem}
.dist-row .top{display:flex;justify-content:space-between;gap:1rem;font-size:var(--s-sm)}
.dist-row .top span{font-family:var(--f-mono);font-size:var(--s-xs);color:var(--ink-3)}
.stack{display:flex;height:.8rem;border-radius:999px;overflow:hidden;gap:2px}
.hidden-group{border:1.5px dashed var(--line);border-radius:10px;padding:.7rem .9rem;font-size:var(--s-xs);color:var(--ink-2);display:grid;gap:.15rem}
.hidden-group b{color:var(--ink);font-size:var(--s-sm)}
.legend{display:flex;gap:1rem;flex-wrap:wrap;font-size:var(--s-xs);color:var(--ink-3)}
.legend i{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;margin-right:.35rem}

/* vervolgaanbod visual */
.rules{list-style:none;margin:0;padding:.25rem 1.25rem .5rem}
.rules li{display:grid;grid-template-columns:minmax(0,1fr) 1.5rem minmax(0,1fr) 3.5rem;gap:.75rem;align-items:center;padding-block:.75rem;border-top:1px solid var(--line);font-size:var(--s-sm)}
.rules li:first-child{border-top:0}
.rules .if{display:flex;align-items:center;gap:.5rem}
.rules .if i{width:.55rem;height:.55rem;border-radius:50%;flex:none}
.rules .arrow{color:var(--ink-3);text-align:center;font-family:var(--f-mono)}
.rules .then small{display:block;color:var(--ink-3);font-size:var(--s-xs)}
.rules .cnt{font-family:var(--f-mono);font-size:var(--s-xs);text-align:right;color:var(--ink-2)}
@media (max-width:600px){.rules li{grid-template-columns:minmax(0,1fr) 3rem}.rules .arrow{display:none}.rules .then{grid-column:1}.rules .cnt{grid-row:1/3;grid-column:2}}

/* access visual */
.matrix-scroll{overflow-x:auto}
table.matrix{border-collapse:collapse;width:100%;min-width:34rem;font-size:var(--s-sm)}
.matrix th,.matrix td{padding:.65rem 1rem;text-align:left;border-top:1px solid var(--line)}
.matrix thead th{border-top:0;font-size:var(--s-xs);color:var(--ink-3);font-weight:400;font-family:var(--f-mono);letter-spacing:.02em}
.matrix tbody th{font-family:var(--f-display);font-weight:600;font-size:var(--s-sm)}
.matrix td{color:var(--ink-2)}
.matrix td.yes{color:var(--teal-text);font-weight:700}
.matrix td.no{color:var(--ink-3)}


/* Voor wie as a bento */
.bento--audience{margin-top:clamp(2rem,4vw,3rem)}
.bento--audience .aud-ico{margin-bottom:.4rem;position:relative;z-index:1}
.bento--audience .bcard h3{font-size:var(--s-md)}
/* topics as small badges at the bottom of each card */
.bento--audience .aud-ico{flex:none}
.bento--audience .bcard--teal{padding-bottom:1.75rem}
.aud-badges{list-style:none;margin:auto 0 0;padding:.6rem 0 0;display:flex;flex-wrap:wrap;gap:.35rem;position:relative;z-index:1}
.aud-badges li{font-size:var(--s-xs);line-height:1.2;padding:.3rem .65rem;border-radius:999px;background:var(--ground);color:var(--ink-2)}
.bento--audience .bcard--navy .aud-badges li{background:rgba(255,255,255,.1);color:#c3cae8}
.bento--audience .bcard--teal .aud-badges li{background:rgba(255,255,255,.2);color:#fff}
.bento--audience .bcard--rand .aud-badges li{background:var(--surface);color:var(--ink-2)}
.bento--audience .bcard--rand .aud-ico{background:var(--surface)}
.bento--audience .bcard--teal h3{font-size:1.375rem;overflow-wrap:break-word}
.bento--audience .bcard--teal p{font-size:var(--s-sm)}
.bento--audience .bcard--teal{color:#fff}
.bento--audience .bcard--teal h3,.bento--audience .bcard--teal p{color:#fff}
.bento--audience .bcard--teal .aud-ico{background:rgba(255,255,255,.2);color:#fff}
.bento--audience .bcard--navy .aud-ico{background:rgba(255,255,255,.1);color:#fff}
.bento--audience .bcard--navy{justify-content:flex-start}
/* flex items with overflow:hidden may shrink below their content; keep the badges inside the card */
.bento--audience .col .bcard{flex:1 0 auto}
/* project flow timeline */
.routes{display:flex;gap:.25rem;background:var(--sunk);border:1px solid var(--line);padding:.25rem;border-radius:999px;width:max-content;max-width:100%;margin-bottom:1.25rem}
.routes button{font:inherit;font-family:var(--f-display);font-weight:600;font-size:var(--s-sm);border:0;background:transparent;color:var(--ink-2);padding:.5rem 1rem;border-radius:999px;cursor:pointer}
.routes button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px var(--shadow)}
/* omgevingen */

.routes button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px var(--shadow)}
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;align-items:stretch;margin-top:2rem}
.bento .col{display:flex;flex-direction:column;gap:1.25rem}
.bcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.5rem;display:flex;flex-direction:column;gap:.6rem;position:relative;overflow:hidden}
.bcard h3{font-size:var(--s-lg);position:relative;z-index:1}
.bcard p{color:var(--ink-2);font-size:var(--s-sm);position:relative;z-index:1}
.bcard--navy{flex:1;min-height:9.5rem;justify-content:flex-end;background:var(--inverse);border-color:transparent;color:var(--on-inverse)}
.bcard--navy p{color:var(--on-inverse-2)}
.bcard--teal{height:100%;background:var(--teal-deep);border-color:transparent;color:var(--on-teal-deep);gap:1rem;padding:2rem 1.75rem 7rem}
.bcard--teal h3{font-size:var(--s-xl)}
.bcard--teal p{color:var(--on-teal-deep);opacity:.92;font-size:var(--s-md)}
.bcard--teal .eyebrow{color:var(--on-teal-deep);opacity:.8}
.bcard--teal .ring{--size:190px;right:0;bottom:0;color:rgba(255,255,255,.14)}
/* Voor wie: the teal card is the anchor of the bento, so it earns its height instead of
   running empty — larger type, a ring that fills the lower half, and badges that float
   like the terms in the hero. */
.bento--audience .bcard--teal h3{font-size:1.625rem;line-height:1.15}
.bento--audience .bcard--teal p{font-size:var(--s-md);line-height:1.55}
.bento--audience .bcard--teal .aud-ico{width:3rem;height:3rem;border-radius:14px;margin-bottom:.75rem}
.bento--audience .bcard--teal .aud-ico svg{width:1.5rem;height:1.5rem}
.bcard--teal .ring{--size:200px;--inner:66%;right:0;bottom:0;color:rgba(255,255,255,.22)}
@media (min-width:1250px){.bcard--teal .ring{--size:260px}}
@media (max-width:900px){.bcard--teal .ring{--size:240px}}
.bento--audience .bcard--teal .aud-badges{gap:.55rem;padding-top:1.5rem}
.bento--audience .bcard--teal .aud-badges li{font-size:var(--s-sm);line-height:1.3;padding:.5rem 1.05rem;background:rgba(255,255,255,.2);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.bcard--rand{flex:1;background:transparent;border:1px solid var(--line)}
@media (max-width:900px){.bento{grid-template-columns:1fr}.bento--audience .bcard--teal{order:-1}.bcard--teal{padding-bottom:5rem}.bcard--navy{min-height:0}}

/* project flow phases */
.phases{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 1.75rem}
.phase{display:grid;gap:.9rem;align-content:start;position:relative;padding-top:1.6rem}
.phase::before{content:"";position:absolute;left:0;right:-1.75rem;top:.4rem;height:2px;background:var(--line)}
.phase:last-child::before{right:0}
.phase::after{content:"";position:absolute;left:0;top:0;width:14px;height:14px;border-radius:50%;background:var(--ground);border:2.5px solid var(--teal)}
.phase--active::before{background:var(--teal)}
.phase--dag0::after{background:var(--teal);border-color:var(--teal)}
.phase .when{font-family:var(--f-mono);font-size:var(--s-xs);color:var(--teal-text);letter-spacing:.02em;line-height:1.45;min-height:calc(2 * 1.45em);text-wrap:balance}

.phase h3{font-size:var(--s-lg)}
.moments{list-style:none;margin:0;padding:0;display:grid}
.moments li{display:grid;grid-template-columns:3.4rem minmax(0,1fr);gap:.6rem;padding-block:.5rem;border-top:1px dashed var(--line);font-size:var(--s-sm);color:var(--ink-2)}
.moments li:first-child{border-top:0}
.moments .d{font-family:var(--f-mono);font-size:var(--s-xs);color:var(--ink-3);padding-top:.1rem;font-variant-numeric:tabular-nums}
.moments li.opt{color:var(--ink-3)}
.moments--plain li{grid-template-columns:.9rem minmax(0,1fr)}
.moments--plain li::before{content:"";width:.5rem;height:2px;background:var(--teal);margin-top:.7em}
@media (max-width:1000px){.phases{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem 1.75rem}.phase:nth-child(2n)::before{right:0}}
@media (max-width:600px){.phases{grid-template-columns:1fr}.phase::before{right:0}.phase .when{min-height:0}}

/* cta: the navy demo card closing the mint part of the page */
.cta{display:grid;grid-template-columns:minmax(0,1.4fr) auto;gap:2rem;align-items:end;background:var(--inverse);color:var(--on-inverse);border-radius:18px;padding:clamp(2.25rem,4vw,3.25rem) clamp(1.75rem,4.5vw,4rem);position:relative;overflow:hidden}
.cta > :not(.ring){position:relative;z-index:1}
.cta .cta-ring-r{--size:clamp(9rem,14.5vw,13.5rem);--inner:56%;right:0;bottom:0}
.cta > .btn{align-self:center;margin-right:clamp(0rem,2vw,1.5rem)}
.cta h2{font-size:var(--s-xl);font-weight:700;letter-spacing:-.025em}
.cta p{color:var(--on-inverse-2);margin-top:1rem}
@media (max-width:760px){.cta{grid-template-columns:1fr;align-items:start}.cta > .btn{align-self:start;margin-right:0}.cta .cta-ring-r{--size:9rem}}
/* Contact: the closing dark panel. Copy and a contact button on the left, address card on the right,
   the legal line underneath as the last row of the same panel. */
.footer-band{padding-bottom:0}
.footer-band > :not(.ring){position:relative;z-index:1}
.contact{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:clamp(2rem,6vw,5rem);align-items:center}
.contact-copy{display:grid;gap:1.1rem;justify-items:start}
.contact-copy p:not(.eyebrow){color:var(--ink-2);max-width:40rem}
.contact-copy .btn{margin-top:.75rem;font-size:var(--s-md);padding:.9rem 1.6rem}
.contact-side{display:grid;gap:clamp(1.75rem,3vw,2.5rem);padding-left:clamp(2rem,4vw,3.5rem);border-left:1px solid var(--line)}
.contact-logo{width:clamp(120px,11vw,150px);height:auto}
.contact-card{font-style:normal;display:grid;gap:1.5rem}
.contact-val{white-space:nowrap}
.contact-card > div{display:grid;gap:.4rem;align-content:start;justify-items:start}
.contact-val{font-family:var(--f-display);font-size:1.125rem;font-weight:600;line-height:1.4;color:var(--ink)}
.contact-val a{color:inherit;text-decoration:none;text-underline-offset:.2em}
.contact-val a:hover,.contact-val a:focus-visible{text-decoration:underline}
.site-footer{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 2rem;color:var(--ink-3);margin-top:clamp(3rem,6vw,5rem);padding-block:2rem clamp(2.75rem,5vw,4rem);border-top:1px solid var(--line);font-size:var(--s-xs)}
.ft-legal{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.5rem}
.ft-legal a{color:var(--ink-2);text-decoration:none;text-underline-offset:.2em}
.ft-legal a:hover,.ft-legal a:focus-visible{color:var(--ink);text-decoration:underline}
@media (max-width:760px){.contact{grid-template-columns:1fr}.contact-side{padding-left:0;border-left:0;padding-top:2rem;border-top:1px solid var(--line)}.contact-copy .btn{justify-self:stretch}.site-footer{display:grid;justify-items:start;gap:.9rem;padding-block:1.75rem 2.5rem}.ft-legal{margin-left:0}}
/* info bar: a white strip with a small label and a row of items (included, certifications) */
.infobar{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem 2.5rem;align-items:center;padding:1.25rem 1.75rem;border-radius:18px;background:var(--surface)}
.infobar-h{font-family:var(--f-mono);font-size:var(--s-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--teal-text)}
/* equal space around every item, so the space after the last one matches the space between them */
.infobar ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:space-evenly;gap:.75rem 1.5rem}
.infobar li{display:flex;align-items:center;gap:.6rem;font-size:var(--s-sm);color:var(--ink);white-space:nowrap}
.infobar-ico{flex:none;width:2.25rem;height:2.25rem;border-radius:10px;display:grid;place-items:center;background:var(--ground);color:var(--teal-text)}
.infobar-ico svg{width:1.15rem;height:1.15rem}
.infobar--marks{margin-top:clamp(2rem,4vw,3rem)}
.infobar-h--text{font-family:var(--f-display);font-weight:600;font-size:var(--s-md);letter-spacing:-.01em;text-transform:none;color:var(--ink)}
@media (max-width:760px){.infobar{grid-template-columns:minmax(0,1fr)}.infobar ul{flex-direction:column;align-items:flex-start}.infobar li{white-space:normal}}

/* Demo request dialog */
.demo{width:min(44rem,calc(100% - 2rem));max-height:calc(100dvh - 2rem);padding:0;border:0;border-radius:18px;background:var(--surface);color:var(--ink);box-shadow:0 2rem 4rem -1.5rem rgba(31,35,74,.5);overflow:hidden}
dialog.demo[open]{display:flex;flex-direction:column}
.demo-head{flex:none}
.demo-form,.demo-done{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain}
/* the button stays in view, however short the screen is */
.demo-form .f-actions{position:sticky;bottom:-1.75rem;z-index:1;margin:0 -1.75rem -1.75rem;padding:1rem 1.75rem 1.75rem;background:var(--surface);box-shadow:0 -1px 0 var(--line)}
@media (max-width:600px){.demo-form .f-actions{bottom:-1.75rem;margin-inline:-1.1rem;padding-inline:1.1rem}}
.demo::backdrop{background:rgba(31,35,74,.6)}
.demo-head{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:start;padding:1.75rem 1.75rem 1.25rem;background:var(--surface);color:var(--ink);border-radius:18px 18px 0 0;border-bottom:1px solid var(--line)}
.demo-head > :not(.ring){position:relative;z-index:1}
.demo-head .eyebrow{color:var(--teal-text)}
.demo-head h2{font-size:clamp(1.4rem,1.1rem + 1.2vw,1.9rem);font-weight:700;letter-spacing:-.02em;max-width:22ch}
.demo-intro{grid-column:1 / -1;color:var(--ink-2);margin-top:-.35rem;font-size:var(--s-sm);text-wrap:pretty}
.demo-close{width:2.25rem;height:2.25rem;border-radius:50%;border:0;display:grid;place-items:center;background:var(--ground);color:var(--ink);cursor:pointer}
.demo-close svg{width:1rem;height:1rem}
.demo-close:hover{background:var(--line)}
.demo-form,.demo-done{display:grid;gap:1.1rem;padding:1.5rem 1.75rem 1.75rem}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}
.f-row--when{grid-template-columns:auto minmax(0,1fr);gap:2rem}
.field-l{display:grid;gap:.35rem;font-family:var(--f-display);font-weight:600;font-size:var(--s-sm)}
.field-l small,.demo legend small{font-family:var(--f-body);font-weight:400;color:var(--ink-3);font-size:var(--s-xs)}
.field-l input,.field-l textarea,.field-l select{font:inherit;font-family:var(--f-body);font-weight:400;font-size:var(--s-md);color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:10px;padding:.6rem .75rem;width:100%;resize:vertical}
.field-l select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.25rem;background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27%3E%3Cpath d=%27M5.5 8l4.5 4.5L14.5 8%27 fill=%27none%27 stroke=%27%23737b95%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .7rem center;background-size:1rem}
.field-l select:invalid{color:var(--ink-3)}
.field-l select[aria-invalid="true"]{border-color:var(--risk)}
.field-l input:focus,.field-l textarea:focus,.field-l select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(26,166,183,.2)}
.field-l input[aria-invalid="true"],.field-l textarea[aria-invalid="true"]{border-color:var(--risk)}
.demo fieldset{border:0;padding:0;margin:0;display:grid;gap:.5rem;min-width:0}
.demo legend{font-family:var(--f-display);font-weight:600;font-size:var(--s-sm);padding:0;margin-bottom:.5rem}
.picks{display:flex;flex-wrap:wrap;gap:.4rem}
.pick{position:relative;cursor:pointer}
.pick input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.pick span{display:block;padding:.45rem .8rem;border:1.5px solid var(--line);border-radius:999px;font-size:var(--s-sm);color:var(--ink-2);background:var(--surface);transition:border-color .15s ease,background .15s ease}
.pick abbr{text-decoration:none}
.pick--day span{min-width:2.75rem;text-align:center}
.pick:hover span{border-color:var(--teal)}
.pick input:checked + span{background:var(--teal-tint);border-color:var(--teal);color:var(--ink)}
.pick input:focus-visible + span{outline:2px solid var(--teal);outline-offset:2px}
fieldset[aria-invalid="true"] .pick span{border-color:var(--risk)}
.f-error{color:var(--risk);font-size:var(--s-sm);font-weight:600}
.f-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;padding-top:.25rem}
.f-actions .btn{border:0;cursor:pointer;font-size:var(--s-md);padding:.8rem 1.5rem}
.f-note{font-size:var(--s-xs);color:var(--ink-3)}
.f-note a{color:var(--teal-text)}
.demo-done{justify-items:start}
.f-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.demo-form .btn[aria-busy="true"]{opacity:.7;pointer-events:none}
.demo-done h3{font-size:var(--s-lg)}
.demo-done p{color:var(--ink-2)}
.done-ico{width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;background:var(--teal);color:#fff}
.done-ico svg{width:1.5rem;height:1.5rem}
.demo-done .btn{background:none;cursor:pointer;font:inherit;font-family:var(--f-display);font-weight:600}
@media (max-width:600px){.f-row,.f-row--when{grid-template-columns:1fr}.demo-head,.demo-form,.demo-done{padding-inline:1.1rem}}

/* MERGED: how it works and features in one scroll-driven section */
.wf-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.wf-steps{list-style:none;margin:0;padding:0;position:relative}
.wf-steps::before{content:"";position:absolute;left:1.2rem;top:1.5rem;bottom:1.5rem;width:2px;margin-left:-1px;background:repeating-linear-gradient(to bottom,var(--line) 0 6px,transparent 6px 12px)}
.wf-phase{position:relative;display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:1.25rem;min-height:min(68vh,36rem);align-content:center;padding-block:2rem}
.wf-phase:first-child{min-height:0;padding-top:1rem;align-content:start}
.wf-node{position:relative;z-index:1;width:2.4rem;height:2.4rem;border-radius:50%;display:grid;place-items:center;font-family:var(--f-display);font-weight:600;font-size:var(--s-sm);background:var(--ground);color:var(--ink-3);box-shadow:inset 0 0 0 2px var(--line);transition:background .3s ease,color .3s ease,box-shadow .3s ease}
.wf-node svg{width:1.15rem;height:1.15rem}
.wf-phase[data-on] .wf-node{background:var(--teal);color:#fff;box-shadow:0 0 0 6px rgba(26,166,183,.18)}
.wf-body{display:grid;gap:.6rem;align-content:start}
.wf-when{font-family:var(--f-mono);font-size:var(--s-xs);letter-spacing:.02em;color:var(--teal-text)}
.wf-body h3{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);font-weight:700;letter-spacing:-.02em;line-height:1.15}
.wf-text{color:var(--ink-2);max-width:32rem}
.wf-feats{list-style:none;margin:.9rem 0 0;padding:0;display:grid;gap:.85rem}
.wf-feats li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.8rem;align-items:start}
.wf-feats b{display:block;font-family:var(--f-display);font-weight:600;font-size:var(--s-sm)}
.wf-feats small{display:block;font-size:var(--s-sm);color:var(--ink-2);line-height:1.45}
.wf-fi{width:2.25rem;height:2.25rem;border-radius:10px;display:grid;place-items:center;background:var(--surface);color:var(--teal-text)}
.wf-fi svg{width:1.15rem;height:1.15rem}
.wf-phase:not([data-on]) .wf-body{opacity:.55;transition:opacity .3s ease}
.wf-phase[data-on] .wf-body{opacity:1;transition:opacity .3s ease}

.wf-stage{position:sticky;top:max(1.5rem,calc(50vh - 17rem));height:34rem;border-radius:var(--rad,24px);background:#1f234a;overflow:hidden;isolation:isolate}
.wf-ring{--size:30rem;--inner:62%;right:0;bottom:0;color:#1aa6b7}
.wf-dots{list-style:none;margin:0;padding:0;position:absolute;left:1.5rem;top:1.4rem;display:flex;gap:.4rem;z-index:3}
.wf-dots li{font-size:var(--s-xs);color:#c3cae8;padding:.25rem .7rem;border-radius:999px;border:1px solid rgba(255,255,255,.16);transition:background .3s ease,color .3s ease,border-color .3s ease}
.wf-dots li[data-on]{background:#fff;color:#1f234a;border-color:#fff}

/* scenes: one card and one chip, in the hero's language */
.sc{position:absolute;inset:2.5rem 3rem 3.5rem;display:grid;place-items:center;opacity:0;transform:translateY(1.25rem);transition:opacity .45s ease,transform .45s ease;z-index:2}
.sc[data-on]{opacity:1;transform:none}
.sx{position:relative;width:min(100%,22rem)}
.wf-stage .sx{scale:1.18}
.sx-card{display:grid;gap:1.1rem;padding:1.35rem;border-radius:18px;background:#1f234a;color:#fff;border:1px solid rgba(255,255,255,.16);box-shadow:0 1.5rem 3rem -1.5rem rgba(0,0,0,.6)}
.sx-chip{position:absolute;right:-2.75rem;bottom:-1.9rem;display:grid;grid-template-columns:auto minmax(0,1fr);gap:.7rem;align-items:center;padding:.55rem 1.2rem .55rem .55rem;border-radius:999px;background:#fff;color:#1f234a;box-shadow:0 1.25rem 2.5rem -1rem rgba(0,0,0,.55);max-width:20rem}
.sx-chip-ico{width:2.25rem;height:2.25rem;border-radius:50%;display:grid;place-items:center;background:#1aa6b7;color:#fff}
.sx-chip-ico svg{width:1rem;height:1rem}
.sx-chip .sx-t small{color:#48516f}
.sx-t{display:grid;gap:.1rem;min-width:0}
.sx-t b{font-family:var(--f-display);font-weight:600;font-size:.9375rem;line-height:1.25}
.sx-t small{font-size:.8125rem;color:#c3cae8;line-height:1.35}
.sx-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.75rem;align-items:center;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,.12)}
.sx-head--plain{grid-template-columns:minmax(0,1fr)}
.sx-ico{width:2.25rem;height:2.25rem;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.08);color:#c3cae8}
.sx-ico.on{background:#1aa6b7;color:#fff}
.sx-ico svg{width:1.15rem;height:1.15rem}
.sx-bar{display:block;height:.5rem;border-radius:99px;background:rgba(255,255,255,.22)}
.sx-bar.thin{height:.4rem;background:rgba(255,255,255,.12)}
.sx-bar.val{height:.7rem;background:rgba(255,255,255,.45)}
.sx-tiles{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.sx-tile{position:relative;display:grid;gap:.55rem;padding:.85rem;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.sx-tile .sx-ico{width:2rem;height:2rem;margin-bottom:.2rem}
.sx-ok{position:absolute;right:.7rem;top:.7rem;width:1.3rem;height:1.3rem;border-radius:50%;display:grid;place-items:center;background:#1aa6b7;color:#fff}
.sx-ok svg{width:.85rem;height:.85rem}
.sx-stat{display:grid;gap:.35rem}
.sx-stat small{font-size:.8125rem;color:#c3cae8}
.sx-stat b{font-family:var(--f-display);font-weight:700;font-size:2.6rem;line-height:1;letter-spacing:-.02em}
.sx-stat b span{font-size:.9375rem;font-weight:500;color:#c3cae8;letter-spacing:0}
.sx-stat .sx-norm{margin-top:.6rem}
.sx-people{display:grid;grid-template-columns:repeat(10,1fr);gap:.55rem}
.sx-people i,.sx-key i{display:block;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.14)}
.sx-people i.on,.sx-key i.on{background:#1aa6b7}
.sx-key{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;font-size:.8125rem;color:#c3cae8}
.sx-key span{display:flex;align-items:center;gap:.4rem}
.sx-key i{width:.6rem}
.sx-norm{position:relative;display:flex;gap:3px;height:.5rem}
.sx-norm .seg{border-radius:99px;opacity:.3}.sx-norm .seg.cur{opacity:1}
.sx-norm .ok{background:#27ae60}.sx-norm .warn{background:#f0a020}.sx-norm .risk{background:#d63c2f}
.sx-norm em{position:absolute;top:50%;width:3px;height:1rem;margin:-.5rem 0 0 -1.5px;border-radius:2px;background:#fff;box-shadow:0 0 0 2px #1f234a}
.sx-minis{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.sx-mini{display:grid;gap:.55rem;padding:.85rem;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.sx-drow{display:grid;gap:.45rem}
.sx-stack{display:flex;gap:3px;height:.6rem}
.sx-stack i{border-radius:99px}
.sx-stack .ok{background:#27ae60}.sx-stack .warn{background:#f0a020}.sx-stack .risk{background:#d63c2f}
.sx-lock{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.7rem;align-items:center;padding:.65rem;border-radius:12px;border:1px dashed rgba(255,255,255,.2)}
.wf-inline{display:none}
.vr-rules{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.vr-rule{display:grid;gap:.35rem;padding:.62rem .7rem;border-radius:10px;background:rgba(255,255,255,.05)}
.vr-if{display:flex;align-items:center;gap:.45rem;font-size:.75rem;color:#c3cae8}
.vr-if i{width:.5rem;height:.5rem;border-radius:50%;flex:none}
.vr-if i.risk{background:#d63c2f}.vr-if i.warn{background:#f0a020}.vr-if i.ok{background:#27ae60}
.vr-then{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.45rem;padding-left:.1rem}
.vr-arrow{width:.95rem;height:.95rem;color:#1aa6b7;display:grid}.vr-arrow svg{width:100%;height:100%}
.vr-then b{font-size:.78125rem;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vr-then small{font-size:.625rem;color:#8fd9e2;padding:.1rem .4rem;border-radius:999px;background:rgba(26,166,183,.2);font-variant-numeric:tabular-nums}
.vr-then small::after{content:" deelnemers"}
.pl-h{margin:0 0 -.45rem;font-size:.6875rem;color:#8f99bf;text-transform:uppercase;letter-spacing:.08em}
.pl-parts{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.pl-part{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:.6rem;padding:.4rem .65rem .4rem .45rem;border-radius:10px;background:rgba(255,255,255,.06)}
.pl-part .sx-t b{font-size:.8125rem;font-weight:500}.pl-part .sx-t small{font-size:.6875rem}
.pl-grip{width:1rem;height:1.2rem;color:#5d6690;display:grid}.pl-grip svg{width:100%;height:100%}
.pl-min{font-size:.75rem;padding:.15rem .5rem;border-radius:999px;background:rgba(26,166,183,.22);color:#8fd9e2;font-variant-numeric:tabular-nums}
.pl-loc{margin-top:.1rem;display:grid;grid-template-columns:auto minmax(0,1fr);gap:.6rem;align-items:center;padding:.45rem .65rem;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.pl-loc .sx-t b{font-size:.8125rem;font-weight:500}.pl-loc .sx-t small{font-size:.6875rem}
.pl-pin{width:1.6rem;height:1.6rem;border-radius:8px;display:grid;place-items:center;background:rgba(26,166,183,.2);color:#1aa6b7}.pl-pin svg{width:.95rem;height:.95rem}
.pl-av{width:1.7rem;height:1.7rem;border-radius:50%;display:grid;place-items:center;font-size:.625rem;font-weight:700;letter-spacing:.02em;color:#1f234a;background:#d6f3f6}
.pl-av.b{background:#1aa6b7;color:#fff}
.pl-person{display:flex;align-items:center;gap:.5rem;padding:.4rem .55rem;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.pl-person i{flex:none;width:1.6rem;height:1.6rem;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:.75rem;font-weight:600;color:#1f234a;background:#d6f3f6}
.pl-person i.b{background:#1aa6b7;color:#fff}
.pl-person .sx-t b{font-size:.75rem;font-weight:500}.pl-person .sx-t small{font-size:.6875rem}
.ms-card{gap:.5rem!important}
.ms-card .sx-head{margin-bottom:.6rem}
.ms-sec{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.45rem;padding:.45rem .6rem;border-radius:10px;background:rgba(255,255,255,.06)}
.ms-sec b{font-size:.8125rem;font-weight:600;color:#fff}
.ms-done{width:1.05rem;height:1.05rem;border-radius:50%;display:grid;place-items:center;background:#1aa6b7;color:#fff}
.ms-done svg{width:.7rem;height:.7rem}
.ms-chev{width:.9rem;height:.9rem;color:#8f99bf;display:grid;transition:none}
.ms-chev svg{width:100%;height:100%}
.ms-sec.open{background:none;padding-bottom:.1rem}
.ms-sec.open .ms-chev{transform:rotate(90deg);color:#1aa6b7}
/* rows start under the section title, past the chevron */
.ms-list{list-style:none;margin:0;padding:0 0 0 1.95rem;display:grid;gap:.35rem}
.ms-row{display:grid;grid-template-columns:minmax(0,1fr) 6.6rem auto;align-items:center;gap:.5rem}
.ms-k{display:grid;font-size:.8125rem;color:#e6e9f5;line-height:1.15}
.ms-k small{font-size:.625rem;color:#8f99bf}
.ms-field{display:flex;align-items:baseline;gap:.35rem;padding:.32rem .55rem;border-radius:8px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);color:#fff;font-size:.8125rem;font-weight:600;font-variant-numeric:tabular-nums}
.ms-field em{margin-left:auto;font-style:normal;font-size:.625rem;font-weight:500;color:#8f99bf}
.ms-field.calc{background:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);color:#c3cae8}
.ms-dot{align-self:center;width:.45rem;height:.45rem;border-radius:50%;flex:none}
.ms-dot.ok{background:#27ae60}.ms-dot.warn{background:#f0a020}
.ms-acts{display:flex;gap:.2rem}
.ms-act{width:1.35rem;height:1.35rem;border-radius:6px;display:grid;place-items:center;color:#5d6690}
.ms-act svg{width:.85rem;height:.85rem}
.ms-act.on{color:#1aa6b7;background:rgba(26,166,183,.2)}
.me-advice{display:grid;gap:.35rem;padding:1rem 1.05rem;border-radius:12px;background:rgba(255,255,255,.06)}
.me-advice small{font-size:.6875rem;color:#8fd9e2;text-transform:uppercase;letter-spacing:.08em}
.me-advice p{margin:0;font-size:.8125rem;line-height:1.45;color:#e6e9f5}
.me-hist{display:flex;align-items:center;gap:1rem;padding-top:.85rem;border-top:1px solid rgba(255,255,255,.12)}
.me-h{display:grid;gap:.05rem}
.me-h small{font-size:.6875rem;color:#8f99bf}
.me-h b{font-family:var(--f-display);font-size:.9375rem;font-weight:600;color:#c3cae8;font-variant-numeric:tabular-nums}
.me-h.on b{color:#fff}
.me-meta{margin-left:auto;display:flex;gap:.7rem;font-size:.75rem;color:#c3cae8}
.me-meta span{display:flex;align-items:center;gap:.25rem}
.me-meta svg{width:.95rem;height:.95rem;color:#8f99bf}
.qb-list{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.qb-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.65rem;padding:.38rem .6rem;border-radius:9px;background:rgba(255,255,255,.04)}
.qb-box{width:1.1rem;height:1.1rem;border-radius:4px;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
.qb-box.on{background:#1aa6b7;box-shadow:none;color:#fff}
.qb-box svg{width:.8rem;height:.8rem}
.qb-name{font-size:.8125rem;color:#fff}
.qb-item:has(.qb-box:not(.on)) .qb-name{color:#8f99bf}
.qb-count{font-size:.75rem;color:#8f99bf;font-variant-numeric:tabular-nums}
.qb-count::after{content:" vragen"}
.qb-tag{margin-left:.3rem;padding:.05rem .4rem;border-radius:999px;background:rgba(255,255,255,.12);font-size:.625rem;color:#c3cae8;vertical-align:1px}
.qb-cond{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.55rem;margin:-.1rem 0 .1rem 1.35rem;padding:.4rem .6rem;border-radius:9px;box-shadow:inset 0 0 0 1px rgba(26,166,183,.55);background:rgba(26,166,183,.1)}
.qb-branch{width:1.1rem;height:1.1rem;color:#1aa6b7;display:grid}
.qb-branch svg{width:100%;height:100%}
.qb-cond-t{font-size:.75rem;color:#8fd9e2}
.qb-cond .sx-t small{font-size:.6875rem;color:#8fd9e2}
.rs-sum{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.9rem;align-items:center;padding:.7rem .8rem;border-radius:12px;background:rgba(255,255,255,.06)}
.rs-ring{width:3.1rem;height:3.1rem;border-radius:50%;background:conic-gradient(#27ae60 0 47%,#1f234a 47% 47.8%,#f0a020 47.8% 76%,#1f234a 76% 76.8%,#d63c2f 76.8% 99.2%,#1f234a 99.2%);-webkit-mask:radial-gradient(circle,transparent 57%,#000 58%);mask:radial-gradient(circle,transparent 57%,#000 58%)}
.rs-sum-t{display:grid;gap:.4rem}
.rs-sum-t b{font-family:var(--f-display);font-weight:600;font-size:.9375rem;color:#fff}
.rs-chips{display:flex;flex-wrap:wrap;gap:.35rem}
.rs-chips span{font-size:.6875rem;padding:.2rem .55rem;border-radius:999px;color:#e6e9f5;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.rs-rows{display:grid;gap:.8rem}
.rs-row{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:.75rem;align-items:center}
.rs-l{font-size:.8125rem;color:#e6e9f5}
.rs-bar{display:grid;gap:.25rem}
.rs-bar .sx-stack{height:.7rem}
.rs-bench{height:.3rem!important;opacity:.4}
.rs-foot{white-space:nowrap;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:.85rem;border-top:1px solid rgba(255,255,255,.12);font-size:.75rem;color:#c3cae8}
.rs-key{display:flex;align-items:center;gap:.45rem}
.rs-key i{width:1.1rem;height:.3rem;border-radius:99px;background:rgba(255,255,255,.45)}
.rs-hidden{display:flex;align-items:center;gap:.4rem;font-size:.75rem;white-space:nowrap;color:#8f99bf}
.rs-row:has(.rs-hidden) .rs-l{color:#8f99bf}
.rs-hidden svg{width:.85rem;height:.85rem}
/* project overview scene */
.pj-card{gap:.45rem}
.pj-card .sx-head{padding-bottom:1rem;margin-bottom:.65rem}
.pj-card .sx-t b{white-space:nowrap}
/* a phone is too narrow for the title on one line, so there it wraps as before */
@media (max-width:440px){.pj-card .sx-t b{white-space:normal}}
.pj-status{flex:none;align-self:center;font-size:.625rem;line-height:1.35;padding:.05rem .45rem;border-radius:999px;background:rgba(39,174,96,.2);color:#6fdc9b;white-space:nowrap}
.pj-progress{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.8rem;align-items:center;padding:.6rem .7rem;border-radius:12px;background:rgba(255,255,255,.06)}
.pj-ring{position:relative;width:2.8rem;height:2.8rem;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#1aa6b7 0 76%,rgba(255,255,255,.16) 76%)}
.pj-ring::before{content:"";position:absolute;inset:.26rem;border-radius:50%;background:#1f234a}
.pj-ring b{position:relative;font-family:var(--f-display);font-weight:700;font-size:.75rem;letter-spacing:-.02em}
.pj-progress-t{display:grid;gap:.18rem;min-width:0}
.pj-progress-t b{font-family:var(--f-display);font-weight:600;font-size:.9375rem;line-height:1.25}
.pj-progress-t small{font-size:.75rem;line-height:1.35;color:#8f99bf}
.pj-steps{list-style:none;margin:0;padding:0;display:grid;gap:.22rem}
.pj-steps li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.55rem;padding:.22rem .6rem;border-radius:9px;background:rgba(255,255,255,.04);font-size:.8125rem;color:#fff}
.pj-tick{width:1rem;height:1rem;border-radius:50%;display:grid;place-items:center;color:#8f99bf;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2)}
.pj-tick svg{width:.7rem;height:.7rem}
.pj-tick.on{background:#1aa6b7;color:#fff;box-shadow:none}
.pj-steps li:has(.pj-tick:not(.on)){color:#c3cae8}
.pj-next{display:flex;align-items:center;gap:.5rem;margin:0;padding-top:.5rem;border-top:1px solid rgba(255,255,255,.12);font-size:.75rem;color:#c3cae8}
.pj-next-ico{width:1rem;height:1rem;color:#1aa6b7;display:grid;flex:none}
.pj-next-ico svg{width:100%;height:100%}

/* whitelabel scene */
.wl-card{gap:.6rem}
.wl-card .sx-head{margin-bottom:.5rem}
.wl-browser{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.6rem;align-items:center;padding:.4rem .55rem;border-radius:10px 10px 0 0;background:rgba(255,255,255,.1)}
.wl-dots{display:flex;gap:.25rem}
.wl-dots i{width:.4rem;height:.4rem;border-radius:50%;background:rgba(255,255,255,.3)}
.wl-url{display:flex;align-items:center;gap:.45rem;padding:.25rem .6rem;border-radius:999px;background:rgba(0,0,0,.25);font-size:.75rem;color:#e6e9f5}
.wl-screen{display:grid;gap:0}
.wl-screen .wl-login{border-radius:0 0 10px 10px}
/* the mock brand is deliberately not Qiek's: this is the customer's own house style */
.wl-login{--wl-brand:#6b4df6;display:grid;justify-items:center;gap:.45rem;padding:.95rem .9rem 1.05rem;background:#d9d4ec;color:#2e1065}
.wl-login b{font-family:var(--f-display);font-weight:600;font-size:.8125rem}
.wl-login .sx-logo{background:none;padding:0}
.wl-login .sx-logo i{background:var(--wl-brand)}
.wl-login .sx-logo i:nth-child(2){background:#a78bfa}
.wl-login .sx-logo i:nth-child(3){background:#2e1065}
.wl-lines{display:grid;gap:.28rem;width:min(100%,11rem);margin:.1rem 0 .15rem}
.wl-lines i{height:.3rem;border-radius:99px;background:rgba(46,16,101,.2)}
.wl-lines i:last-child{width:68%;justify-self:center}
.wl-btn{width:min(100%,7.25rem);margin-top:.1rem;padding:.3rem 0;border-radius:999px;background:var(--wl-brand);color:#fff;text-align:center;font-family:var(--f-display);font-weight:600;font-size:.75rem}
.wl-mail{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.6rem;align-items:center;padding:.45rem .65rem;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.wl-mail .sx-t b{font-size:.8125rem;font-weight:500}
.wl-mail .sx-t small{font-size:.6875rem}
.wl-mail-ico{width:1.7rem;height:1.7rem;border-radius:8px;display:grid;place-items:center;background:rgba(26,166,183,.2);color:#1aa6b7;flex:none}
.wl-mail-ico svg{width:1rem;height:1rem}
.bk-parts{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}
.bk-parts span{display:flex;align-items:center;gap:.45rem;padding:.45rem .6rem;border-radius:10px;background:rgba(255,255,255,.06);font-size:.8125rem;color:#fff}
.bk-parts svg{width:1rem;height:1rem;color:#1aa6b7;flex:none}
.bk-parts small{margin-left:auto;font-size:.6875rem;color:#8f99bf}
.bk-days{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem}
.bk-day{display:grid;justify-items:center;gap:0;padding:.35rem 0;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.bk-day small{font-size:.6875rem;color:#c3cae8;text-transform:uppercase;letter-spacing:.06em}
.bk-day b{font-family:var(--f-display);font-size:1rem}
.bk-day.on{background:#1aa6b7;box-shadow:none}.bk-day.on small{color:#fff}
.bk-day.off{opacity:.35}
.bk-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem}
.bk-slot{display:grid;place-items:center;height:2.2rem;border-radius:999px;font-size:.8125rem;font-variant-numeric:tabular-nums;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.bk-slot.on{background:rgba(26,166,183,.22);box-shadow:inset 0 0 0 1.5px #1aa6b7;font-weight:600}
.bk-slot.off{color:rgba(255,255,255,.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);text-decoration:line-through}
.bk-confirm{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding-top:.9rem;border-top:1px solid rgba(255,255,255,.12)}
.bk-btn{flex:none;padding:.5rem .95rem;border-radius:999px;background:#1aa6b7;color:#fff;font-family:var(--f-display);font-weight:600;font-size:.8125rem}
.bk-btn--wide{justify-self:start}
.sx-follow{display:grid;gap:0}
.fu-outcome{grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:.75rem;row-gap:.55rem;padding:.9rem 1.2rem}
.fu-outcome .sx-norm{grid-column:1/-1}
.fu-dot{width:.8rem;height:.8rem;border-radius:50%;background:#d63c2f;box-shadow:0 0 0 4px rgba(214,60,47,.25)}
.fu-link{position:relative;height:2.1rem}
.fu-link::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:#d6f3f6}
.fu-link::before{bottom:.35rem!important}
.fu-link i{position:absolute;left:50%;bottom:.1rem;width:.6rem;height:.6rem;margin-left:-.3rem;border-right:2px solid #d6f3f6;border-bottom:2px solid #d6f3f6;transform:rotate(45deg)}
.fu-offer{padding:1.1rem 1.2rem;gap:.9rem;box-shadow:0 0 0 2px #1aa6b7,0 1.5rem 3rem -1.5rem rgba(0,0,0,.6);border-color:transparent}
.fu-coach{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.75rem;align-items:center}
.fu-avatar{width:2.8rem;height:2.8rem;border-radius:50%;background:radial-gradient(circle at 50% 38%,#d6f3f6 0 24%,transparent 25%),radial-gradient(ellipse at 50% 108%,#d6f3f6 0 44%,transparent 45%),#1aa6b7}
.fu-times{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}
.fu-times small{grid-column:1/-1;font-size:.6875rem;color:#8f99bf;text-transform:uppercase;letter-spacing:.06em}
.fu-slot{display:grid;place-items:center;height:2rem;border-radius:999px;font-size:.75rem;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.fu-slot.on{background:rgba(26,166,183,.22);box-shadow:inset 0 0 0 1.5px #1aa6b7;font-weight:600}
.fu-offer .bk-btn{justify-self:stretch;text-align:center}
.sx-follow .sx-shop-img svg{width:2.2rem;height:2.2rem}
.sx-board{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;height:11rem}
.sx-col{display:flex;flex-direction:column;gap:.35rem}
.sx-slot{position:relative;border-radius:6px;background:rgba(255,255,255,.1)}
.sx-slot.free{background:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.sx-slot.on{background:#1aa6b7}
.sx-slot em{position:absolute;right:.3rem;top:.3rem;width:1.1rem;height:1.1rem;border-radius:50%;display:grid;place-items:center;background:#1f234a;color:#fff;font-style:normal;font-size:.6875rem;font-weight:600}
.sx-url{display:flex;align-items:center;gap:.55rem;padding:.55rem .75rem;border-radius:999px;background:rgba(255,255,255,.08);font-size:.875rem}
.sx-url b{font-weight:500}
.sx-lockico{width:1rem;height:1rem;color:#1aa6b7;display:grid}
.sx-lockico svg{width:100%;height:100%}
.sx-brand{display:flex;align-items:center;gap:.75rem}
.sx-logo{display:flex;gap:3px;padding:.5rem;border-radius:9px;background:#fff}
.sx-logo i{width:.5rem;height:1rem;border-radius:3px;background:#e84118}
.sx-logo i:nth-child(2){background:#f0a020}.sx-logo i:nth-child(3){background:#1f234a}
.sx-url b{flex:1}
.sx-logo--sm{padding:.3rem;border-radius:6px;gap:2px}
.sx-logo--sm i{width:.35rem;height:.7rem;border-radius:2px}
.sx-roles{list-style:none;margin:0;padding:0;display:grid;gap:.42rem;padding-top:.75rem;border-top:1px solid rgba(255,255,255,.12)}
.sx-roles li{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.sx-roles .sx-t b{font-family:var(--f-body);font-weight:500;font-size:.8125rem;color:#e6e9f5}
.sx-pill{font-size:.75rem;padding:.2rem .6rem;border-radius:999px;color:#c3cae8;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.sx-pill.on{background:rgba(26,166,183,.22);color:#fff;box-shadow:inset 0 0 0 1px #1aa6b7}
.sx-q{display:grid;gap:.55rem}
.sx-q small{font-size:.8125rem;color:#c3cae8}
.sx-prog{display:block;height:.4rem;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.sx-prog span{display:block;height:100%;background:#1aa6b7;border-radius:99px}
.sx-qtext{display:grid;gap:.55rem;padding-block:.35rem}
.sx-qtext .sx-bar{height:.7rem;background:rgba(255,255,255,.4)}
.sx-scale{display:flex;justify-content:space-between;padding-inline:.35rem}
.sx-scale i{display:block;width:1.85rem;height:1.85rem;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.22)}
.sx-scale i.on{background:#1aa6b7;box-shadow:0 0 0 4px rgba(26,166,183,.25)}
.sx-scale-l{display:flex;justify-content:space-between;margin-top:-.4rem;font-size:.75rem;color:#8f99bf}
.sx-shop{padding:0;gap:0;overflow:hidden}
.sx-shop-img{height:7.5rem;display:grid;place-items:center;color:#fff;background:radial-gradient(circle at 85% 130%,rgba(255,255,255,.2) 0 35%,transparent 36%),linear-gradient(135deg,#1aa6b7,#157f8c)}
.sx-shop-img svg{width:2.75rem;height:2.75rem}
.sx-shop-body{display:grid;gap:1rem;padding:1.2rem 1.35rem 1.35rem}
.sx-dates{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.sx-dates i{display:grid;place-items:center;height:2.6rem;border-radius:9px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.sx-dates i.on{background:rgba(26,166,183,.2);box-shadow:inset 0 0 0 1.5px #1aa6b7}
.wf-base{margin-top:clamp(2.5rem,5vw,4rem)}

@media (prefers-reduced-motion:reduce){.sc,.wf-node,.wf-body{transition:none}}

/* the stage: no panel, one fixed card frame floating on a big arc that runs past the page edge; only its content changes */
html,body{overflow-x:clip}
/* the arc may run past the sides, but ends exactly at the bottom of the section, against the dark block below */
.wf{clip-path:inset(-100vh -100vw -2rem -100vw)}
.wf-base{position:relative;z-index:3}
.wf-frame .sx-card:has(.me-advice){gap:1.45rem}
.wf-stage{background:none;border-radius:0;overflow:visible;isolation:auto}
/* a half ring (same radius and position as the quarter before) so the arc never ends in view; the section clips it at the bottom */
.wf-stage .wf-ring{--size:58rem;--inner:63%;right:-24rem;bottom:-73rem;height:calc(var(--size) * 2);color:#1aa6b7;z-index:0;--ring-mask:radial-gradient(circle var(--size) at 100% 50%,transparent 0 calc(var(--inner) - .6px),#000 var(--inner) calc(100% - .6px),transparent 100%)}
.wf-frame{position:absolute;left:50%;top:50%;width:22rem;height:22rem;margin:-11rem 0 0 -11rem;scale:1.18;border-radius:18px;background:#1f234a;border:1px solid rgba(255,255,255,.1);box-shadow:0 2rem 4rem -1.75rem rgba(31,35,74,.55);overflow:hidden;z-index:2}
.wf-frame .sc{inset:0;display:block;opacity:0;transform:translateY(.6rem);transition:opacity .3s ease,transform .45s ease}
.wf-frame .sc[data-on]{opacity:1;transform:none;transition-delay:.1s}
.wf-stage .sx,.wf-frame .sx{width:100%;height:100%;scale:1}
.wf-frame .sx > .sx-card{height:100%;align-content:start;background:none;border:0;border-radius:0;box-shadow:none}
.wf-frame .sx-follow{padding:1.35rem;align-content:center}
.wf-frame .sx-follow > .sx-card{height:auto;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:14px}
.wf-frame .sx-follow > .fu-offer{border-color:transparent;box-shadow:inset 0 0 0 1.5px #1aa6b7}
@media (prefers-reduced-motion:reduce){.wf-frame .sc{transition:none;transform:none}}
/* progress dots under the card */
.wf-pager{position:absolute;left:50%;top:calc(50% + 14.6rem);transform:translateX(-50%);display:flex;gap:.45rem;z-index:3}
.wf-pager button{width:.6rem;height:.6rem;padding:0;border:0;border-radius:50%;background:none;box-shadow:inset 0 0 0 1.5px rgba(31,35,74,.55);cursor:pointer;transition:background-color .25s ease,box-shadow .25s ease}
.wf-pager button:hover{box-shadow:inset 0 0 0 1.5px #1f234a}
.wf-pager button[data-on]{background:#1f234a;box-shadow:inset 0 0 0 1.5px #1f234a}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:980px){
  .wf-grid{grid-template-columns:minmax(0,1fr)}
  .wf-stage{display:none}
  .wf-phase,.wf-phase:first-child{min-height:0;padding-block:1rem 1.5rem;align-content:start}
  .wf-phase .wf-body,.wf-phase:not([data-on]) .wf-body{opacity:1}
  .wf-inline{display:block;position:relative;height:28rem;margin-top:1.25rem;border-radius:20px;background:#1f234a;overflow:hidden;isolation:isolate}
  .wf-inline .wf-ring{--size:15rem}
  .sc--inline{inset:1.5rem 1.5rem 3rem;opacity:1;transform:none}
  .wf-inline{height:auto;background:none;overflow:visible;isolation:auto;padding-block:1.5rem 2.5rem}
  .wf-inline .wf-ring{--size:30rem;--inner:63%;right:-9rem;bottom:-6rem;color:#1aa6b7}
  .wf-inline .wf-frame{position:relative;left:auto;top:auto;margin:0 auto;scale:1;width:min(100%,22rem)}
  .wf-inline .sc--inline{position:absolute;inset:0;opacity:1;transform:none}
  /* phones: no arc between the blocks, and the card takes the height of its own content */
  .wf-inline{padding-block:1.25rem .25rem;height:auto!important}
  .wf-base{margin-top:.75rem}
  .wf-inline .wf-ring{display:none}
  .wf-inline .wf-frame{height:auto;width:100%;max-width:26rem}
  .wf-inline .sc--inline{position:relative;inset:auto}
  .wf-inline .wf-frame .sx,.wf-inline .wf-frame .sx > .sx-card{height:auto}
}
@media (max-width:520px){
  .wf-phase{grid-template-columns:minmax(0,1fr)}
  .wf-steps::before,.wf-node{display:none}
  .wf-inline{height:29rem}
  .sx-chip{right:-.75rem;max-width:17rem}
  .wf-inline .wf-ring{--size:13rem}
}

/* static hero picture */
.deck--static{aspect-ratio:auto;width:min(31rem,100%)}
.hx{position:relative;margin:0}
.hx-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:auto auto auto;gap:.75rem}
.hx-tile{display:grid;align-content:space-between;gap:.8rem;padding:1.1rem;border-radius:16px;background:#1f234a;color:#fff;border:1px solid rgba(255,255,255,.16);box-shadow:0 1.5rem 3rem -1.5rem rgba(0,0,0,.6)}
.hx-label{font-size:.8125rem;color:#c3cae8;line-height:1.3}
.hx-pmo{grid-row:1/3;box-shadow:0 0 0 2px #1aa6b7,0 1.5rem 3rem -1.5rem rgba(0,0,0,.6);border-color:transparent}
.hx-pmo .sx-stat b{font-size:2.1rem}
.hx-rows{display:grid;gap:.9rem;padding-top:.9rem;border-top:1px solid rgba(255,255,255,.12)}
.hx-row{display:grid;gap:.5rem}
.hx-num{font-family:var(--f-display);font-weight:700;font-size:1.75rem;line-height:1;letter-spacing:-.02em}
.hx-num span{font-size:.8125rem;font-weight:500;color:#1aa6b7;letter-spacing:0}
.hx-trend{display:block;width:100%;height:3.25rem;overflow:visible}
.hx-keur{place-items:start}
.hx-stamp{display:grid;justify-items:center;gap:.2rem;justify-self:center;padding:.5rem 1rem .45rem;border:3px solid #43c07a;border-radius:10px;box-shadow:inset 0 0 0 2px #1f234a,inset 0 0 0 4px #43c07a;color:#43c07a;rotate:-8deg;margin-block:.2rem .4rem}
.hx-stamp b{font-family:var(--f-display);font-weight:700;font-size:1.05rem;line-height:1;letter-spacing:.14em;text-transform:uppercase}
.hx-stamp small{font-family:var(--f-mono);font-size:.5625rem;letter-spacing:.1em;text-transform:uppercase}
.hx-ws{grid-column:1/-1;grid-template-columns:minmax(0,1fr) auto;align-items:center}
.hx-ws .sx-t{gap:.2rem}
.hx-dates{display:grid;grid-template-columns:repeat(3,3.25rem);gap:.45rem;margin-right:7.5rem}
.hx-dates i{display:grid;place-items:center;height:2.5rem;border-radius:9px;border:1px solid rgba(255,255,255,.16)}
.hx-dates i.on{border-color:#1aa6b7;background:rgba(26,166,183,.2)}
.hx .sx-chip{right:-2.25rem;bottom:-1.6rem}
.uses--static li{font-size:.8125rem;padding:.35rem .75rem;border:1px solid var(--line);border-radius:999px;color:var(--ink);background:var(--ground);white-space:nowrap}
@media (max-width:900px){.deck--static{margin-inline:auto}.hx .sx-chip{right:-.5rem}}
@media (max-width:520px){.hx-dates{display:none}.hx-pmo .sx-stat b{font-size:1.7rem}}

/* floating use cases in the hero */
.terms{position:relative;width:min(34rem,100%);height:27rem;margin-inline:auto 0}
/* nudge the cloud towards the right edge of the dark panel, away from the long title */
@media (min-width:901px){.terms{translate:clamp(1rem,5vw,5.5rem) 0}}
.term{position:absolute;display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap;border-radius:999px;font-family:var(--f-display);font-weight:600;animation:term-float var(--d,8s) ease-in-out var(--o,0s) infinite}
.term-ico{flex:none;display:grid;place-items:center;border-radius:50%}
.term-ico svg{width:55%;height:55%}
.term--lg{font-size:1.0625rem;padding:.5rem 1.35rem .5rem .5rem}
.term--lg .term-ico{width:2.4rem;height:2.4rem}
.term--md{font-size:.9375rem;padding:.4rem 1.1rem .4rem .4rem}
.term--md .term-ico{width:2rem;height:2rem}
.term--solid{background:#fff;color:#1f234a;box-shadow:0 1.25rem 2.5rem -1rem rgba(0,0,0,.5)}
.term--solid .term-ico{background:#1aa6b7;color:#fff}
.term--glass{background:#1f234a;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 1rem 2rem -1rem rgba(0,0,0,.5)}
.term--glass .term-ico{background:rgba(26,166,183,.22);color:#1aa6b7}
/* the four use cases that must always be in view carry a bit more weight */
.term--key{font-size:1.125rem;box-shadow:0 1.25rem 2.5rem -1rem rgba(0,0,0,.5),0 0 0 3px rgba(26,166,183,.3)}
@keyframes term-float{0%,100%{translate:0 0}50%{translate:0 -12px}}
/* phones: two rows that slide slowly in opposite directions instead of the cloud */
.terms-strip{display:none}
@media (max-width:700px){
  .terms{display:none!important}
  /* run the rows out to the edges of the dark panel, so they fade out there and not at the content padding */
  .terms-strip{display:grid;gap:.6rem;margin-top:3.25rem;margin-inline:calc(50% - (50vw - var(--gut, 2vw)));-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
  .ts-row{overflow:hidden}
  .ts-track{display:flex;width:max-content;animation:ts-slide 70s linear infinite}
  .ts-row--rev .ts-track{animation-direction:reverse;animation-duration:85s}
  .ts-group{display:flex;gap:.4rem;padding-right:.4rem}
  .ts-group .term{position:relative;animation:none;font-size:.8125rem;padding:.3rem .8rem .3rem .3rem;gap:.45rem}
  .ts-group .term-ico{width:1.6rem;height:1.6rem}
  /* one look for every badge in the strip: navy, like the dark panel behind it */
  .ts-group .term{background:#1f234a;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 1rem 2rem -1rem rgba(0,0,0,.5)}
  .ts-group .term-ico{background:rgba(26,166,183,.22);color:#1aa6b7}
  .terms-strip{gap:.45rem}

  .ts-row--rev .ts-track{margin-left:-6rem}
  /* the rows sit near the bottom edge of the dark panel */
  .hero{padding-bottom:.75rem}
}
@keyframes ts-slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ts-track{animation:none}}
.term{transition:opacity .5s ease,scale .5s ease}
.term.is-out{opacity:0;scale:.85}
@media (prefers-reduced-motion:reduce){.term{animation:none}}
@media (max-width:900px){.terms{height:24rem;margin-inline:auto;margin-top:1rem}.term--lg{font-size:.9375rem}.term--lg .term-ico{width:2.1rem;height:2.1rem}}
@media (max-width:900px){.hero-visual:has(.terms){margin-top:1.5rem!important;padding-bottom:0!important}}
@media (max-width:700px){.terms{height:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem .5rem;margin-top:2rem;padding-bottom:1rem}.term{position:relative;left:auto!important;top:auto!important}.term--md{font-size:.875rem}}
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,17rem);gap:clamp(2rem,5vw,4rem);align-items:start}.about-story{display:grid;gap:1rem;max-width:44rem}.about-story .eyebrow{margin-bottom:.25rem}.about-story p{color:var(--ink-2)}.stats{list-style:none;margin:clamp(1.75rem,3.5vw,3rem) 0 0;padding:0;display:grid;gap:1.25rem}.stats li{display:grid;gap:.2rem;padding-top:1.1rem;border-top:1px solid var(--line)}.stats li:first-child{padding-top:0;border-top:0}.stats b{font-family:var(--f-display);font-weight:700;letter-spacing:-.03em;line-height:1;font-size:clamp(1.75rem,1.3rem + 1.2vw,2.25rem);color:var(--ink);font-variant-numeric:tabular-nums}.stats span{color:var(--ink-2);font-size:var(--s-sm);text-wrap:pretty}@media (max-width:820px){.about{grid-template-columns:1fr}.stats{margin-top:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem 1.5rem}.stats li:first-child{padding-top:1.1rem;border-top:1px solid var(--line)}}.reviews{display:grid;gap:clamp(1rem,2vw,1.35rem);margin-top:clamp(3.5rem,7vw,6rem)}.quotes-head{position:relative;overflow:clip;isolation:isolate;color:#fff;background:#1aa6b7;border-radius:16px;padding:1.5rem 1.4rem 1.35rem;display:flex;align-items:flex-start;font-size:clamp(1.5rem,1.2rem + .9vw,2rem);line-height:1.2;letter-spacing:-.02em;text-wrap:balance}.quotes-head > span{position:relative;z-index:1;max-width:9em}.quotes-head .h-dot{color:#fff;opacity:.65}.quotes-head::after{content:"";position:absolute;right:-9rem;bottom:-9rem;width:18rem;height:18rem;background:rgba(255,255,255,.2);border-radius:50%;z-index:0;-webkit-mask-image:radial-gradient(circle farthest-side at 50% 50%,transparent 0 58%,#000 58% 100%);mask-image:radial-gradient(circle farthest-side at 50% 50%,transparent 0 58%,#000 58% 100%)}@media (max-width:1000px){.quotes-head{min-height:8rem}}.quotes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}.quote{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.25rem 1.3rem 1.15rem;display:flex;flex-direction:column;gap:.9rem}.quote blockquote{margin:0;font-family:var(--f-display);font-weight:500;font-size:var(--s-sm);line-height:1.45;color:var(--ink);text-wrap:pretty;overflow-wrap:break-word}.quote figcaption{margin-top:auto;display:grid;gap:.1rem;font-size:var(--s-xs)}.quote figcaption b{color:var(--ink);font-weight:700}.quote figcaption span{color:var(--ink-2)}@media (max-width:1000px){.quotes{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:560px){.quotes{grid-template-columns:1fr}}.h-dot{color:#1aa6b7}@media (max-width:760px){.wrap > .hero-band{margin-top:0}/* phones: let the title wrap where it fits instead of on the fixed break */.hero h1 .h1-line{display:inline}}.hero > .scroll-cue{position:absolute;left:0;bottom:clamp(.5rem,2vw,1.5rem);z-index:3;width:2.75rem;height:2.75rem;border-radius:999px;border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;color:#fff;background:transparent;transition:background .2s ease,border-color .2s ease,transform .2s ease}.scroll-cue svg{width:1.15rem;height:1.15rem}.scroll-cue:hover{border-color:var(--teal);background:rgba(26,166,183,.12);transform:translateY(2px)}@media (prefers-reduced-motion:reduce){.scroll-cue{transition:none}.scroll-cue:hover{transform:none}}@media (max-width:1200px){.hero > .scroll-cue{display:none}}