/* ============================================================
   AIstap public site — design B ("donker en technisch, maar rustig").
   Source of truth for the look: docs/plan/mockups/b-dark.html
   (chosen by the founder on 2026-09-30); the homepage itself is v2
   (concept C + the live demo of concept B, see the HOMEPAGE v2 block). The rules below are the
   mockup's CSS, extracted as-is, plus the parts the mockup did not
   have yet: self-hosted font, language link, lead form, workshops
   page, privacy page and 404.
   No external requests: the font lives in /assets/fonts (GDPR).
   ============================================================ */

/* ---------- font (Geist, SIL OFL 1.1 — see /assets/fonts/OFL.txt) ---------- */
@font-face{font-family:"Geist";font-style:normal;font-weight:300 700;font-display:swap;
  src:url("/assets/fonts/geist-latin-ext-v5.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:"Geist";font-style:normal;font-weight:300 700;font-display:swap;
  src:url("/assets/fonts/geist-latin-v5.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}

:root{
  --bg:#07090b;
  --bg-2:#0b0e11;
  --surface:#0f1317;
  --surface-2:#131820;
  --line:rgba(226,236,244,.09);
  --line-2:rgba(226,236,244,.16);
  --line-3:rgba(226,236,244,.26);
  --text:#e9edf1;
  --muted:#9ba5af;
  --faint:#7d8791;           /* mockup: #6c7680 — lifted to reach WCAG AA (4.5:1) on every surface */
  --accent-rgb:63,224,160;--accent:#3fe0a0;          /* emerald, the only accent */
  --accent-ink:#04140d;
  --accent-soft:rgba(var(--accent-rgb),.10);
  --danger:#ff9b8f;
  /* colour with a meaning on the use-case pages: green (the accent) = what the automation does and what is
     in order, amber = doubt and the decision of a person, muted red = the manual way of today */
  --amber:#f5b54d;
  --amber-ink:#1d1303;
  --manual:#f19a8f;
  --paper:#eef3f1;           /* the light record card: it looks like a screen of the client's system */
  --paper-ink:#10171b;
  --paper-muted:#55616b;
  --radius:14px;             /* one radius for surfaces; buttons are pills */
  --mono:"Geist",ui-sans-serif,system-ui,sans-serif;
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --wrap:1240px;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px}
.mono{font-family:var(--mono);font-size:13.5px;letter-spacing:.01em;font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:var(--accent-ink);padding:8px 14px;border-radius:999px;z-index:30;text-decoration:none;font-weight:500}
.skip:focus{left:16px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 24px;border-radius:999px;font:500 16px/1 var(--sans);text-decoration:none;white-space:nowrap;cursor:pointer;border:0;transition:transform .25s var(--ease),background-color .25s var(--ease),border-color .25s var(--ease)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 10px 30px -12px rgba(var(--accent-rgb),.45),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-primary:hover{background:#5aeab1}
.btn-primary .arr{transition:transform .25s var(--ease)}
/* concept C: the arrow sits in its own round chip (SVG inside a span: CSP-safe) */
.btn:has(> .ic){padding-right:8px;gap:12px}
.btn .ic{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;transition:transform .45s var(--ease)}
.btn .ic svg{width:15px;height:15px}
.btn-primary .ic{background:rgba(4,20,13,.12)}
.btn-ghost{border:1px solid var(--line-2);color:var(--text);background:transparent}
.btn-ghost:hover{border-color:rgba(226,236,244,.34);background:rgba(226,236,244,.03)}
.btn-sm{height:40px;padding:0 18px;font-size:14.5px}
.btn[disabled]{opacity:.6;cursor:progress}

/* ---------- nav ---------- */
header.nav{position:sticky;top:0;z-index:20;background:rgba(7,9,11,.78);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--line)}
.nav .wrap{height:68px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;font-size:18px;letter-spacing:-.01em}
.mark{width:30px;height:30px;background:url("/assets/logo-v3-mark.png") center/contain no-repeat;flex:none}
.nav nav{display:flex;align-items:center;gap:34px}
.nav .links{display:flex;align-items:center;gap:34px}
.nav nav a{text-decoration:none;color:var(--muted);font-size:15px;transition:color .2s}
.nav .links a{white-space:nowrap} /* a menu item never breaks over two lines */
.nav nav a:hover,.nav nav a[aria-current]{color:var(--text)}
.nav nav a.btn-primary,.nav nav a.btn-primary:hover{color:var(--accent-ink)}
.nav nav a.lang{font-family:var(--mono);font-size:13px;letter-spacing:.06em;border:1px solid var(--line-2);border-radius:999px;padding:6px 11px;line-height:1}
.nav nav a.lang:hover{border-color:rgba(226,236,244,.34)}
.nav .short{display:none}

/* ---------- page headings (all pages) ---------- */
h1{font-weight:600;font-size:clamp(40px,3.95vw,57px);line-height:1.05;letter-spacing:-.035em;margin:0 0 28px}
h1 .dim{color:#7d8791;display:block}
h1 .nw{white-space:nowrap}
.lede{font-size:clamp(18px,1.5vw,20.5px);line-height:1.55;color:var(--muted);max-width:28em;margin:0 0 38px}
.lede strong{color:var(--text);font-weight:500}
.ctas{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- sections ---------- */
section{position:relative}
.sec{padding:96px 0}
.sec.tight-top{padding-top:40px}
.sec.tight-bottom{padding-bottom:0}
h2{font-weight:600;font-size:clamp(32px,3.6vw,50px);line-height:1.08;letter-spacing:-.03em;margin:0 0 20px;text-wrap:balance}
.intro{color:var(--muted);font-size:19px;max-width:36em;margin:0}
.eyebrow{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--accent);letter-spacing:.1em;margin:0 0 18px;text-transform:uppercase}

/* alternate band (workshops page topics) */
.how{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.how h2{max-width:14em}

/* price cards (.p): used by the workshops page formats */
.p{position:relative;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:30px 32px;display:flex;flex-direction:column;overflow:hidden}
.p h3{margin:0;font-size:21px;font-weight:500;letter-spacing:-.015em}
.p .sub{color:var(--faint);margin:6px 0 0;font-size:15px}
.p .price{font-size:44px;font-weight:600;letter-spacing:-.035em;line-height:1;margin:22px 0 4px;font-variant-numeric:tabular-nums}
.p .price small{font-size:16px;font-weight:400;color:var(--muted);letter-spacing:0;margin-left:4px}
.p .price small.from{margin:0 6px 0 0}
.p ul{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px}
.p li{position:relative;padding-left:22px;color:var(--muted);font-size:15.5px;line-height:1.5}
.p li::before{content:"";position:absolute;left:0;top:.7em;width:10px;height:2px;background:var(--accent)}
.vat{margin-top:22px;color:var(--faint);max-width:60em}

/* promises */
.promise{display:grid;grid-template-columns:1.15fr 1fr;gap:96px;align-items:start}
.promise h2{font-size:clamp(40px,4.6vw,64px);letter-spacing:-.035em;line-height:1.02;margin-bottom:28px}
.promise h2 em{font-style:normal;color:var(--accent)}
.promise .body{color:var(--muted);font-size:19px;max-width:30em;margin:0 0 16px}
.promise .body strong{color:var(--text);font-weight:500}
.owned{display:flex;flex-wrap:wrap;gap:8px;margin:30px 0 0;padding:0;list-style:none}
.owned li{border:1px solid var(--line-2);border-radius:999px;padding:7px 14px;font-size:14px;color:var(--text)}
.plist{margin:0;padding:0;list-style:none;border-top:1px solid var(--line-2)}
.plist li{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:22px 0;border-bottom:1px solid var(--line)}
.plist li:last-child{border-bottom:0}
.plist .ck{width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(var(--accent-rgb),.6);display:grid;place-items:center;margin-top:3px}
.plist .ck::after{content:"";width:8px;height:4px;border-left:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:translateY(-1px) rotate(-45deg)}
.plist h3{margin:0 0 4px;font-size:19px;font-weight:500;letter-spacing:-.01em}
.plist p{margin:0;color:var(--muted);font-size:15.5px}
.plist .x{border-color:var(--line-2)}
.plist .x::after{width:9px;height:1.5px;border:0;background:var(--faint);transform:none}

/* final cta + lead form */
.final{padding:88px 0 80px;text-align:left}
.final .box{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start;padding:64px;border-radius:calc(var(--radius) + 6px);border:1px solid var(--line-2);background:
    radial-gradient(700px 300px at 0% 100%, rgba(var(--accent-rgb),.10), transparent 70%), var(--surface)}
.final h2{font-size:clamp(32px,3.1vw,46px);margin:0 0 14px}
.final .copy > p{margin:0;color:var(--muted);font-size:19px;max-width:32em}
.final .points{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:12px}
.final .points li{position:relative;padding-left:22px;color:var(--muted);font-size:15.5px}
.final .points li::before{content:"";position:absolute;left:0;top:.7em;width:10px;height:2px;background:var(--accent)}
.final .copy > p.alt{margin:28px 0 0;font-size:15.5px;color:var(--muted)}
.final .alt a{color:var(--text);text-underline-offset:3px}

.lead-form{display:grid;gap:16px}
.lead-form .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:grid;gap:7px;min-width:0}
.field label{font-size:14.5px;color:var(--text);font-weight:500}
/* Input border: 3.46:1 on the form box, 3.59:1 on the input fill (WCAG 1.4.11 needs 3:1). */
.field input,.field textarea{width:100%;font:400 16px/1.4 var(--sans);color:var(--text);background:var(--bg-2);border:1px solid rgba(226,236,244,.42);border-radius:10px;padding:13px 14px;transition:border-color .2s,box-shadow .2s}
.field textarea{resize:vertical;min-height:84px}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)} /* 5.3:1 on the input fill */
.field input:hover,.field textarea:hover{border-color:rgba(226,236,244,.55)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18)}
.field [aria-invalid="true"]{border-color:var(--danger)}
.field .err,.consent .err{margin:0;color:var(--danger);font-size:14px}
.consent{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;font-size:14.5px;color:var(--muted);line-height:1.5}
.consent input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--accent);cursor:pointer}
.consent a{color:var(--text);text-underline-offset:3px}
.consent .err{grid-column:2}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:4px}
.lead-form > .note{margin:0;color:var(--faint);font-size:14px}
.form-msg:empty{display:none}
.form-msg:focus{outline:none}
.form-msg{margin:0;padding:14px 16px;border-radius:10px;font-size:15px;line-height:1.5}
.form-msg.bad{border:1px solid rgba(255,155,143,.45);background:rgba(255,155,143,.06);color:var(--text)}
.form-msg.good{border:1px solid rgba(var(--accent-rgb),.45);background:var(--accent-soft);color:var(--text)}
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- workshops page ---------- */
.page-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.page-hero::before{content:"";position:absolute;inset:0;background:
    radial-gradient(800px 460px at 85% 30%, rgba(var(--accent-rgb),.07), transparent 62%),
    linear-gradient(var(--line) 1px, transparent 1px) 0 0/100% 72px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 92%);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 92%);
  opacity:.55;pointer-events:none}
.page-hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:64px;align-items:center;padding-top:88px;padding-bottom:88px}
.facts{margin:0;padding:8px 28px;border:1px solid var(--line-2);border-radius:var(--radius);background:rgba(15,19,23,.82)}
.facts div{display:grid;grid-template-columns:128px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.facts div:last-child{border-bottom:0}
.facts dt{color:var(--faint)}
.facts dd{margin:0;color:var(--text);font-size:16px}
.formats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:48px}
.formats .p .meta{color:var(--faint);margin:8px 0 0}
.formats .p .price{margin-top:26px}
.formats .p .alt-price{margin:6px 0 0;color:var(--muted);font-size:15.5px}
.formats .p-feature{border-color:rgba(var(--accent-rgb),.35);background:
    radial-gradient(420px 300px at 100% 0%, rgba(var(--accent-rgb),.10), transparent 70%), var(--surface-2)}
.formats .p .btn{margin-top:auto;align-self:flex-start}
.formats .p ul{margin-bottom:30px}
.topics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:48px;border-top:1px solid var(--line-2)}
.topic{padding:28px 32px 30px 0;border-bottom:1px solid var(--line)}
.topic + .topic{padding-left:32px;border-left:1px solid var(--line)}
.topic:nth-child(3n+1){padding-left:0;border-left:0}
.topic .n{color:var(--accent)}
.topic h3{margin:12px 0 8px;font-size:21px;font-weight:500;letter-spacing:-.015em}
.topic p{margin:0;color:var(--muted);font-size:15.5px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.panel{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:34px 36px}
.panel h3{margin:0 0 12px;font-size:23px;font-weight:500;letter-spacing:-.015em}
.panel > p{margin:0 0 12px;color:var(--muted)}
.panel > p:last-child{margin-bottom:0}
.panel > p.eyebrow{color:var(--accent);margin:0 0 14px}
.panel .plist{margin-top:10px}
.panel .plist li{padding:14px 0}
.panel .plist .nt{margin:0;color:var(--text);font-size:16.5px;font-weight:500;align-self:center}

/* ---------- privacy / legal ---------- */
.legal{max-width:820px;margin:0 auto;padding:72px 40px 96px}
.legal h1{font-size:clamp(36px,4.4vw,54px);margin-bottom:14px}
.legal p.eyebrow{color:var(--accent);margin-bottom:14px}
.legal .updated{color:var(--faint);margin:0 0 26px}
.legal .lead{color:var(--muted);font-size:19px;margin:0 0 20px}
.legal h2{font-size:clamp(24px,2.4vw,30px);margin:56px 0 14px;padding-top:24px;border-top:1px solid var(--line)}
.legal h3{font-size:19px;font-weight:500;margin:28px 0 8px;letter-spacing:-.01em}
.legal p,.legal li{color:var(--muted)}
.legal p{margin:0 0 14px}
.legal strong{color:var(--text);font-weight:500}
.legal ul{padding-left:20px;margin:0 0 14px}
.legal li{margin:0 0 6px}
.legal a{color:var(--text);text-underline-offset:3px}
.legal .tablewrap{overflow-x:auto;margin:10px 0 18px;border:1px solid var(--line);border-radius:var(--radius)}
.legal table{border-collapse:collapse;width:100%;min-width:560px;font-size:15px}
.legal th,.legal td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--line)}
.legal th{color:var(--faint);font-weight:500;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;background:var(--bg-2)}
.legal td{color:var(--muted)}
.legal td:first-child{color:var(--text);white-space:nowrap}
.legal tr:last-child td{border-bottom:0}
.legal .toc{margin:28px 0 0;padding:20px 24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);columns:2;column-gap:32px;list-style:none}
.legal .toc li{margin:0 0 6px;break-inside:avoid}
.legal .toc a{color:var(--muted);text-decoration:none}
.legal .toc a:hover{color:var(--text)}
/* Facts the repo could not confirm. Visible on purpose: the founder must resolve every one before publishing. */
.todo{display:block;margin:10px 0 14px;padding:10px 14px;border:1px dashed #e0b25a;border-radius:10px;background:rgba(224,178,90,.08);color:#f0d49a!important;font-family:var(--mono);font-size:13.5px;line-height:1.5}
.legal td.todo-cell{color:#f0d49a;background:rgba(224,178,90,.08);font-family:var(--mono);font-size:13.5px}

/* ---------- 404 ---------- */
.nf{min-height:calc(100dvh - 68px - 220px);display:grid;align-items:center}
.nf .wrap{width:100%;padding-top:96px;padding-bottom:96px}
.nf .code{color:var(--accent)}
.nf h1{max-width:14em}
.nf .ctas{margin-top:8px}

/* footer */
footer{border-top:1px solid var(--line);padding:48px 0 36px;color:var(--muted);font-size:15px}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
footer h2{margin:0 0 14px;font-size:13px;font-weight:500;color:var(--faint);font-family:var(--mono);letter-spacing:.04em;line-height:1.4}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer a{text-decoration:none}
footer a:hover{color:var(--text)}
footer .tag{margin:16px 0 0;max-width:22em}
footer .legal-row{grid-column:1 / -1;margin-top:28px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;color:var(--faint);font-size:14px}
footer .legal-row nav{display:flex;gap:18px}

/* ============================================================
   HOMEPAGE v2 (chosen 2026-09-30)
   Layout, sections and calm motion: concept C (docs/plan/mockups/v2-calm.html).
   Hero animation: concept B's live pipeline (docs/plan/mockups/v2-live.html).
   Behaviour: /home.js. Motion is transform / opacity only. Everything the
   visitor must read is in the static markup (= the finished frame), so
   no-JS and prefers-reduced-motion visitors get a complete, still page.
   Everything here is scoped to classes that only the homepage uses.
   ============================================================ */

/* film grain (concept C): fixed, never scrolls, never catches the pointer */
body:is(.pg-home,.pg-uc)::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:40;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.pg-home .sec{padding:104px 0}
.pg-home .sec h2{font-size:clamp(32px,3.1vw,46px)} /* the headline scale of the use-case pages */
.sec.alt{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
h2 .dim{color:var(--faint)}
:is(.pg-home,.pg-uc) .intro{text-wrap:pretty}
:is(.pg-home,.pg-uc) .eyebrow{display:inline-flex;align-items:center;gap:9px;margin:0 0 26px;padding:6px 13px 6px 11px;border:1px solid var(--line-2);border-radius:999px;font:500 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
:is(.pg-home,.pg-uc) .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.14)}
.shell{padding:5px;border-radius:20px;background:rgba(226,236,244,.022);border:1px solid var(--line)}
.core{border-radius:15px;background:var(--surface);box-shadow:inset 0 1px 0 rgba(255,255,255,.045)}
.linkbtn{background:none;border:0;padding:4px 0;color:var(--muted);font:inherit;font-size:15px;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.linkbtn:hover{color:var(--text)}

/* ---------- 1. hero: copy (C) ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;inset:0;background:
    radial-gradient(760px 520px at 76% 44%, rgba(var(--accent-rgb),.075), transparent 64%),
    linear-gradient(var(--line) 1px, transparent 1px) 0 0/100% 72px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 94%);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 94%);
  opacity:.55;pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:44px;align-items:center;min-height:min(840px, calc(100dvh - 68px));padding-top:52px;padding-bottom:60px}
.hero h1{font-weight:600;font-size:clamp(40px,3.2vw,46px);line-height:1.02;letter-spacing:-.04em;margin:0 0 30px}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.hero h1 .ln > span{display:block}
.hero .lede{font-size:clamp(18px,1.4vw,20px);line-height:1.58;color:var(--muted);max-width:29em;margin:0 0 26px;text-wrap:pretty}
.hero .lede strong{color:var(--text);font-weight:500}
.gets{display:flex;gap:12px;align-items:flex-start;margin:0 0 36px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:rgba(226,236,244,.02);max-width:34em;color:var(--text);font-size:15px;line-height:1.5}
.gets .dot{flex:none;width:7px;height:7px;margin-top:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.13)}
.gets b{font-weight:500;color:var(--accent)}
:is(.hero,.uc-hero) .micro{margin:24px 0 0;color:var(--faint);display:grid;gap:6px}
:is(.hero,.uc-hero) .micro span{display:block}
:is(.hero,.uc-hero) .micro .price-hint{color:var(--muted)}
:is(.hero,.uc-hero) .micro .price-hint a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--line-3)}
:is(.hero,.uc-hero) .micro .price-hint a:hover{border-color:var(--accent)}

/* ---------- 1. hero: the diagram ----------
   The picture beside the hero copy is the diagram of the use-case hub (.hd: its rules live in the use-case part
   below, its player is /usecase.js). The old four-card demo left on 2026-10-13. What stays here is shared with
   that diagram: the pause / replay control (.ctl) and .no-tr (a frame set without transitions). */
.hero .hd{min-width:0}
.ctl{justify-self:start;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--line-2);background:transparent;cursor:pointer;font:500 13px/1 var(--sans);color:var(--muted);transition:border-color .2s,color .2s}
.ctl:hover{border-color:var(--line-3);color:var(--text)}
.ctl svg{width:10px;height:10px}
.ctl .i-play,.ctl .i-replay{display:none}
.ctl[data-s="paused"] .i-pause,.ctl[data-s="done"] .i-pause{display:none}
.ctl[data-s="paused"] .i-play,.ctl[data-s="idle"] .i-play{display:block}
.ctl[data-s="idle"] .i-pause{display:none}
.ctl[data-s="done"] .i-replay{display:block}
.no-tr *,.no-tr *::before,.no-tr *::after{transition:none!important;animation:none!important}

/* ---------- 2. zero frictie ---------- */
.zf-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px;margin-top:72px;align-items:start}
.col .core{overflow:hidden}
.col-h{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:24px 28px 20px;border-bottom:1px solid var(--line)}
.col-h h3{margin:0;font-size:22px;font-weight:500;letter-spacing:-.02em}
.col-h .mono{color:var(--faint)}
.col-h .cnt{color:var(--accent)}
.you ol,.we ol{list-style:none;margin:0;padding:0}
.you li{display:grid;grid-template-columns:30px 1fr;gap:4px 12px;padding:22px 28px;border-bottom:1px solid var(--line)}
.you li:last-child{border-bottom:0}
.you .n{font-size:12.5px;line-height:1.7;color:var(--faint)}
.you h4{margin:0;font-size:17px;font-weight:500;letter-spacing:-.01em;display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.you p{grid-column:2;margin:0;color:var(--muted);font-size:15px;line-height:1.5}
.you .chip{flex:none;padding:4px 9px;border-radius:999px;border:1px solid var(--line-2);font:500 11.5px/1.2 var(--mono);color:var(--muted);white-space:nowrap}
.we .core{background:radial-gradient(520px 320px at 100% 0%, rgba(var(--accent-rgb),.07), transparent 70%),var(--surface)}
.we li{display:grid;grid-template-columns:22px 1fr auto;gap:14px;align-items:center;padding:12px 28px;border-bottom:1px solid rgba(226,236,244,.055)}
.we li:last-child{border-bottom:0}
.we li .t{font-size:16px;color:var(--text)}
.we li .ph{font:500 10.5px/1 var(--mono);letter-spacing:.14em;color:var(--faint);text-transform:uppercase}
.we .ck{width:22px;height:22px}
.we .ck circle{fill:rgba(var(--accent-rgb),.10);stroke:rgba(var(--accent-rgb),.42)}
.we .ck path{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.we li:nth-child(2){--i:1}.we li:nth-child(3){--i:2}.we li:nth-child(4){--i:3}.we li:nth-child(5){--i:4}.we li:nth-child(6){--i:5}
.we li:nth-child(7){--i:6}.we li:nth-child(8){--i:7}.we li:nth-child(9){--i:8}.we li:nth-child(10){--i:9}.we li:nth-child(11){--i:10}
.tally{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px;margin-top:22px;align-items:center}
.tally .line{margin:0;font:500 18px/1.4 var(--mono);letter-spacing:-.01em;color:var(--text)}
.tally .line span{color:var(--accent)}
.bars{display:grid;grid-template-columns:4fr 11fr;gap:10px;align-items:center}
.bars i{display:block;height:8px;border-radius:4px;transform-origin:0 50%}
.bars .b-you{background:repeating-linear-gradient(90deg,var(--line-3) 0 calc(25% - 3px),transparent calc(25% - 3px) 25%)}
.bars .b-we{background:repeating-linear-gradient(90deg,var(--accent) 0 calc(9.0909% - 3px),transparent calc(9.0909% - 3px) 9.0909%)}
.bars-l{display:grid;grid-template-columns:4fr 11fr;gap:10px;margin-top:8px;font:500 11px/1 var(--mono);letter-spacing:.12em;color:var(--faint)}
.zf-foot{margin:56px 0 0;padding-top:28px;border-top:1px solid var(--line);color:var(--muted);font-size:19px;max-width:40em}
.zf-foot strong{color:var(--text);font-weight:500}

/* ---------- 3. voorbeelden: six of the use-case cards (.uc-card and .uc-split: rules in the use-case part) ---------- */
/* .rows was the frame of the three text rows that stood here. It stays, exactly as it was: the light mock records of
   the use-case pages (.pp.rows) take their top margin and top line from it. */
.rows{margin-top:14px;border-top:1px solid var(--line-2)}
.rows-foot{margin:32px 0 0;color:var(--muted);max-width:44em;font-size:17px}
.rows-foot strong{color:var(--text);font-weight:500}
.pg-home .rows-foot{margin-top:44px}
.pg-home .uc-cards + .gloss{margin:18px 0 0}

/* ---------- 4. zo werkt het (the section has no .how class on the homepage) ---------- */
.steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin:80px 0 0;padding:0;list-style:none}
.steps::before,.steps::after{content:"";position:absolute;left:0;right:0;top:10px;height:1px}
.steps::before{background:var(--line-2)}
.steps::after{background:linear-gradient(90deg,var(--accent),rgba(var(--accent-rgb),.55));transform-origin:0 50%}
.step{position:relative}
.step .node{position:relative;z-index:1;width:21px;height:21px;border-radius:50%;background:var(--bg);border:1.5px solid var(--accent);display:grid;place-items:center}
.step .node::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
.step .node.lp{border:0;background:var(--bg)}
.step .node.lp::after{display:none}
.step .node svg{width:21px;height:21px}
.step .k{display:block;margin:30px 0 8px;color:var(--faint)}
.step h3{font-size:26px;font-weight:500;letter-spacing:-.022em;margin:0 0 22px;line-height:1.15}
.step h3 .dim{color:var(--faint)}
.uw{margin:0;border-top:1px solid var(--line)}
.uw > div{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.uw dt{align-self:start;justify-self:start;margin-top:2px;padding:3px 6px;border-radius:5px;font:600 10px/1.2 var(--mono);letter-spacing:.12em;color:var(--muted);border:1px solid var(--line-2)}
.uw dd{margin:0;font-size:15px;line-height:1.5;color:var(--muted)}
.uw .u dd{color:var(--text)}
.uw .w dt{color:var(--accent);border-color:rgba(var(--accent-rgb),.42);background:rgba(var(--accent-rgb),.06)}
.uw .d dt{border-style:dashed}
.uw .d dd{font:400 13.5px/1.5 var(--mono);color:var(--faint)}
.snote{margin:16px 0 0;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:rgba(226,236,244,.02);font-size:14px;line-height:1.5;color:var(--muted)}
.snote strong{color:var(--text);font-weight:500}
.how-note{margin-top:72px;padding-top:30px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:32px;align-items:center}
.how-note p{margin:0;font-size:20px;max-width:32em;letter-spacing:-.01em}
.how-note p span{color:var(--muted)}

/* ---------- 5. prijzen: the ladder ---------- */
.ladder{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(7,auto) auto;column-gap:14px;margin-top:80px}
.ladder .path{position:absolute;left:0;right:0;top:10px;height:1px;pointer-events:none}
.ladder .path i{position:absolute;inset:0}
.ladder .path .pb{background:var(--line-2)}
.ladder .path .pd{background:linear-gradient(90deg,rgba(var(--accent-rgb),.35),var(--accent) 40%,var(--accent));transform-origin:0 50%}
.rung{grid-row:1 / span 7;display:grid;grid-template-rows:subgrid}
.rung .card,.rail{transition:opacity .5s var(--ease)}
.sta{display:flex;align-items:center;gap:12px;width:max-content;height:21px;margin-bottom:22px;padding-right:12px;position:relative;z-index:1;background:var(--bg-2)}
.r1b .sta{visibility:hidden}
.sta .dot{flex:none;width:21px;height:21px;border-radius:50%;background:var(--bg);border:1.5px solid var(--line-3);display:grid;place-items:center}
.sta .dot::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--line-3)}
.rung.hot .sta .dot,.r0 .sta .dot{border-color:var(--accent)}
.rung.hot .sta .dot::after,.r0 .sta .dot::after{background:var(--accent)}
.sta .mono{font-size:11.5px;letter-spacing:.14em;color:var(--muted)}
.sta .mono em{font-style:normal;color:var(--faint)}
.card{grid-row:2 / span 6;display:grid;grid-template-rows:subgrid;position:relative;padding:5px;border-radius:20px;background:rgba(226,236,244,.022);border:1px solid var(--line)}
.card > .ci{grid-row:1 / span 6;display:grid;grid-template-rows:subgrid;position:relative;border-radius:15px;background:var(--surface);box-shadow:inset 0 1px 0 rgba(255,255,255,.045);padding:26px 24px 24px;overflow:hidden}
.ci::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(260px 200px at 100% 0%,rgba(var(--accent-rgb),.08),transparent 70%);opacity:0;transition:opacity .5s var(--ease);pointer-events:none}
.card:hover .ci::before{opacity:1}
.ci > *{position:relative}
.ci h3{margin:0;font-size:20px;font-weight:500;letter-spacing:-.015em;display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.ci .price{margin:14px 0 20px;font-size:46px;font-weight:600;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.ci .price small{font-size:15px;font-weight:400;letter-spacing:0;color:var(--muted);margin-right:6px}
.ci .rw{padding:14px 0;border-top:1px solid var(--line)}
.ci .rw .lb{display:block;margin-bottom:6px;font:500 10.5px/1 var(--mono);letter-spacing:.14em;color:var(--faint)}
.ci .rw p{margin:0;font-size:15px;line-height:1.5;color:var(--muted)}
.ci .rw.get p{color:var(--text)}
.rtag{font:500 10.5px/1.2 var(--mono);letter-spacing:.08em;color:var(--accent);padding:4px 8px;border-radius:999px;border:1px solid rgba(var(--accent-rgb),.42);white-space:nowrap}
.r1a .card{border-color:rgba(var(--accent-rgb),.28);background:rgba(var(--accent-rgb),.035)}
.r1a .ci{background:
    radial-gradient(360px 260px at 100% 0%, rgba(var(--accent-rgb),.12), transparent 70%),
    linear-gradient(rgba(226,236,244,.03) 1px, transparent 1px) 0 0/26px 26px,
    linear-gradient(90deg, rgba(226,236,244,.03) 1px, transparent 1px) 0 0/26px 26px,
    var(--surface-2)}
.or{position:absolute;left:-7px;top:92px;transform:translateX(-50%);z-index:2;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--bg);border:1px solid var(--line-2);font-size:12px;color:var(--muted)}
.mtl{list-style:none;margin:10px 0 0;padding:0 0 0 14px;border-left:1px solid var(--line-2);display:grid;gap:9px}
.mtl li{position:relative;font-size:13.5px;line-height:1.35;color:var(--muted)}
.mtl li::before{content:"";position:absolute;left:-18px;top:5px;width:7px;height:7px;border-radius:50%;background:var(--surface-2);border:1.5px solid var(--line-3)}
.mtl li.pay::before{background:var(--accent);border-color:var(--accent)}
.mtl b{display:block;font:500 13px/1.3 var(--mono);color:var(--text)}
/* the always-on monthly rail under the ladder */
.rail{grid-column:1 / -1;grid-row:8;display:grid;grid-template-columns:subgrid;margin-top:26px;position:relative}
.rail .legend{padding:22px 10px 0 0}
.rail .legend .lab{display:inline-flex;align-items:center;gap:8px;font:500 11px/1 var(--mono);letter-spacing:.16em;color:var(--accent)}
.rail .legend .lab::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.16)}
.rail .legend h3{margin:12px 0 8px;font-size:22px;font-weight:500;letter-spacing:-.02em}
.rail .legend p{margin:0;font-size:15px;color:var(--muted);line-height:1.5}
.rail .track{grid-column:2 / -1;display:grid;grid-template-columns:subgrid;position:relative;padding-top:22px}
.rail .track::before{content:"";position:absolute;left:0;right:-40px;top:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--accent) 80%,rgba(var(--accent-rgb),0));transform-origin:0 50%}
.rail .track::after{content:"";position:absolute;left:0;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.14)}
.tier{padding:18px 22px;border-radius:16px;border:1px solid var(--line);background:repeating-linear-gradient(135deg, rgba(226,236,244,.022) 0 1px, transparent 1px 12px),var(--surface)}
.tier.t1{grid-column:1 / span 2}
.tier.t2{grid-column:3}
.tier .price{margin:0 0 8px;font-size:34px;font-weight:600;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.tier .price small{font-size:14px;font-weight:400;letter-spacing:0;color:var(--muted);margin-left:3px}
.tier .price small.from{margin:0 5px 0 0}
.tier .when{display:block;margin-bottom:8px;font:500 10.5px/1 var(--mono);letter-spacing:.14em;color:var(--faint)}
.tier p{margin:0;font-size:14.5px;line-height:1.5;color:var(--muted)}
.tier p.price{color:var(--text)}
.swap{grid-column:2 / -1;margin:14px 0 0;font-size:14.5px;color:var(--muted)}
.swap strong{color:var(--text);font-weight:500}
:is(.pg-home,.pg-uc) .vat{margin-top:40px;font-size:13.5px;max-width:62em}
/* "Welke past bij u?" highlights the matching rung */
.ladder[data-focus] .rung:not(.pick) .card{opacity:.4}
.ladder[data-focus] .rung:not(.pick) .sta{opacity:.4}
.ladder[data-focus] .rail.rv{opacity:.4}
.ladder[data-focus] .rung.pick .card{border-color:var(--accent);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.10)}
.fit{margin-top:64px;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px;align-items:start}
.fit .core{padding:30px 32px;min-height:196px}
.fit h3{margin:0 0 8px;font-size:26px;font-weight:500;letter-spacing:-.02em}
.fit .lead{margin:0;color:var(--muted);font-size:15.5px}
.qn{display:block;margin-bottom:10px;color:var(--faint)}
.q h4{margin:0 0 20px;font-size:21px;font-weight:500;letter-spacing:-.015em;line-height:1.3}
.q h4:focus,.res .rl:focus{outline:none}
.pills{display:flex;flex-wrap:wrap;gap:10px}
.pill{min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line-2);background:rgba(226,236,244,.02);color:var(--text);font:500 15px/1.2 var(--sans);cursor:pointer;transition:border-color .3s var(--ease),background-color .3s var(--ease),transform .3s var(--ease)}
.pill:hover{border-color:rgba(var(--accent-rgb),.42);background:rgba(var(--accent-rgb),.06)}
.pill:active{transform:scale(.98)}
.res .rl{margin:0 0 20px;font-size:20px;line-height:1.45;letter-spacing:-.01em}
.res .rl span{color:var(--accent)}
.res .row2{display:flex;flex-wrap:wrap;gap:16px 22px;align-items:center}

/* ---------- 6. waarom (promise; base rules above) ---------- */
.pg-home .owned li{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 10px}
.pg-home .owned li::before{content:"";width:14px;height:14px;border-radius:50%;background:rgba(var(--accent-rgb),.12) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 14 14%27%3E%3Cpath d=%27M4 7.2l2 2 4-4.4%27 fill=%27none%27 stroke=%27%233fe0a0%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center/14px no-repeat}
.pg-home .promise h2{font-size:clamp(42px,5vw,72px);letter-spacing:-.042em;line-height:1}

/* ---------- 7. workshops ---------- */
.ws-head{display:flex;justify-content:space-between;align-items:end;gap:40px;flex-wrap:wrap}
.ws-head .intro{font-size:17.5px}
.wtable{margin-top:56px;border-top:1px solid var(--line-2)}
.wrow{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,2fr) minmax(0,1.3fr) auto;gap:32px;align-items:baseline;padding:28px 0;border-bottom:1px solid var(--line)}
.wrow h3{margin:0;font-size:22px;font-weight:500;letter-spacing:-.018em}
.wrow p{margin:0;color:var(--muted);font-size:15.5px}
.wrow .meta{color:var(--faint)}
.wrow .amt{margin:0;font-size:32px;font-weight:600;letter-spacing:-.035em;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--text)}
.wrow .amt small{display:block;font-size:13px;font-weight:400;letter-spacing:.01em;color:var(--faint);font-family:var(--mono);margin-top:6px}
.wrow .amt small.from{display:inline;font-size:14px;letter-spacing:0;color:var(--muted);font-family:inherit;margin:0 6px 0 0}

/* ---------- 8. vragen ---------- */
.faq{display:grid;grid-template-columns:minmax(0,4.4fr) minmax(0,7.6fr);gap:64px;align-items:start}
.faq h2{font-size:clamp(32px,3.1vw,46px)}
.faq .intro{font-size:17.5px}
.faq .intro a{color:var(--text);text-underline-offset:3px}
/* the questions themselves are the accordion of the use-case pages (.qas .qa: rules in the use-case part) */

/* ---------- lift (2026-10-13): the home sections in the language of the use-case pages ----------
   Home-only rules. The raised surface is the recipe of the use-case part ("the raised surface": a deep soft
   shadow, an inner highlight, a one-pixel edge that is lighter at the top left), put on what the home page
   frames: the double frames (.shell), the price cards (.card, .tier) and the steps. Numbers, names and
   conditions are not touched: this is look only. */
.pg-home :is(.shell,.card,.tier){box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 44px 80px -52px #000,0 16px 30px -22px rgba(0,0,0,.8)}
.pg-home .shell{position:relative}
.pg-home :is(.shell,.card,.tier)::before{content:"";position:absolute;inset:-1px;z-index:1;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.05) 32%,rgba(255,255,255,0) 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.pg-home .tier{position:relative}
.pg-home :is(.zf-grid,.ladder){margin-top:56px}
@media (max-width:640px){
  body.pg-home .sec{padding:72px 0}
}
/* "Zo werkt het" from 861px up: each step is a raised card that hangs from a lit node on the rail (the picture of
   the price rail of the use-case pages, .crail). Narrower, the steps keep their list on a vertical rail. */
.pg-home .steps{counter-reset:hstep}
.pg-home .step{counter-increment:hstep}
@media (min-width:861px){
  .pg-home .steps{gap:16px;margin-top:56px}
  .pg-home .steps::before,.pg-home .steps::after{left:52px;right:calc((100% - 48px) / 4 - 52px);top:27px;height:2px;border-radius:2px}
  .pg-home .step{margin-top:76px;padding:26px 24px 24px;border-radius:24px;
    background:linear-gradient(180deg,rgba(255,255,255,.042),rgba(255,255,255,0) 44%),var(--surface);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 44px 80px -52px #000,0 16px 30px -22px rgba(0,0,0,.8)}
  .pg-home .step::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
    background:linear-gradient(135deg,rgba(255,255,255,.24),rgba(255,255,255,.06) 32%,rgba(255,255,255,0) 60%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
  .pg-home .step .node{position:absolute;left:24px;top:-76px;width:56px;height:56px;border:0;
    background:linear-gradient(rgba(var(--accent-rgb),.2),rgba(var(--accent-rgb),.2)),#0c1114;
    box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.5),0 0 0 6px var(--bg),0 0 30px -6px rgba(var(--accent-rgb),.5)}
  .pg-home .step .node::before{content:"";position:absolute;left:50%;top:100%;width:2px;height:20px;margin-left:-1px;background:linear-gradient(var(--accent),rgba(var(--accent-rgb),.35))}
  .pg-home .step .node::after{content:counter(hstep);width:auto;height:auto;border-radius:0;background:none;font:600 19px/1 var(--mono);color:#eafff6}
  .pg-home .step .node.lp::after{display:none}
  .pg-home .step .node.lp svg{width:27px;height:27px}
  .pg-home .step .node.lp svg circle{display:none}
  .pg-home .step .k{margin-top:0}
  .pg-home .step h3{font-size:23px;margin-bottom:18px}
}

/* ---------- 1b. the film (templates/partials/home-film.html; the frame is .uc-video of the use-case pages) ---------- */
.pg-home .sec.hm-film{padding:96px 0}
.hm-film-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:14px 48px;max-width:1040px;margin:0 auto 36px;padding:0 6px}
.hm-film-head h2{margin:0;font-size:clamp(32px,3.1vw,46px)}
.hm-film-head .intro{font-size:17.5px;max-width:23em}
@media (max-width:640px){
  .pg-home .sec.hm-film{padding:64px 0}
  .hm-film-head{margin-bottom:26px}
}

/* ---------- 9. form (base rules in "final cta + lead form") ---------- */
:is(.pg-home,.pg-uc) .final{padding:40px 0 120px}
:is(.pg-home,.pg-uc) .final .copy > p.eyebrow{font-size:11.5px;color:var(--muted);margin:0 0 24px}

/* ============================================================
   USE-CASE PAGES (version 3 the hero, version 4 everything below it,
   both 2026-10-13): the hub /voorbeelden/ and
   one detail page per use case, body class .pg-uc. They are siblings
   of the homepage: same grain, pill eyebrows, .tier, .faq and form
   block (the shared rules above name .pg-uc next to .pg-home).
   Version 3 SHOWS the work instead of telling it (the founder's
   reference picture of 2026-10-12): big shapes, an icon everywhere,
   few hairlines, and colour that carries meaning:
     green  (--accent)  what the automation does, what is in order
     amber  (--amber)   doubt, and the decision of a person
     red    (--manual)  the manual way of today (a muted tint)
   What lives here, with its own breakpoints, so this block can be
   read on its own:
     .ico       one inline icon (public/assets/icons/, put in the page
                by tools/gen-pages.js); .tb = an icon tile
     .uc-hero   the hero: headline, the diagram, the rest of the text
     .hd        the diagram: source cards, the AIstap node in a glow,
                a light record card, the amber card on a dotted route
     .scn       a mini-scene of "Herkent u dit?" (red: the manual way)
     .pnl       the two panels "Vandaag" (red tint) and "Met AIstap"
                (green tint) with their rows of icon tiles (.tiles)
     .bento .bt the live miniatures of "Wat AIstap kan bouwen"
     .ins       the instrument: two sliders, large numerals, a ring
     .sw        the swimlane: the automation's lane, the team's lane
     .vg        the three vignettes (the card to play, the boundary,
                the draft that waits)
     .cs        the constellation of system types round the node
     .crail .cr the three price steps on a rail
     .qa        the questions, an accordion of <details>
     .nxt       the three steps after the form
     .uc-card   the cards on the hub and under "more examples"
   The paper card (--paper) is the client's own system.
   Behaviour: /usecase.js. Motion is transform / opacity only, and
   everything a visitor must read is in the static markup.
   Templates: templates/usecase.template.html, usecases.template.html
   and the partials templates/partials/uc-*.html.
   Contrast, measured 2026-10-13 (WCAG AA wants 4.5:1 for text, 3:1 for
   an icon or an edge that carries meaning); the lowest of each group:
     dark parts   --manual on the red panel 7.9, --accent on the green
                  panel 9.4, --amber on its tag 6.3, --muted 6.4,
                  text on the amber card 10.2, icons on their tiles 7.6
     light card   --paper-ink on --paper 16.1, --paper-muted on a
                  shaded row 5.1, green status 6.7, amber status 6.7,
                  the open row: text 7.5, its edge on --paper 3.3
   ============================================================ */
.pg-uc .sec{padding:104px 0}
.pg-uc .sec.uc-follow{padding-top:0;margin-top:-32px} /* continues the section above it */
.pg-uc .sec.uc-film{padding:72px 0}
.uc-split{display:grid;grid-template-columns:minmax(0,4.4fr) minmax(0,7.6fr);gap:20px 64px;align-items:start}
.uc-split h2{font-size:clamp(32px,3.1vw,46px);margin:0}
.uc-split .intro{font-size:18px;max-width:34em;padding-top:8px}

/* ---------- icons ---------- */
.ico{display:block;flex:none;width:24px;height:24px}
/* an icon tile: a rounded square with one icon. Green by default; .human = amber; red inside "today" */
.tb{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:rgba(var(--accent-rgb),.2);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.3);color:#eafff6}
.tb .ico{width:28px;height:28px}

/* ---------- hero ---------- */
.uc-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.uc-hero::before{content:"";position:absolute;inset:0;background:
    radial-gradient(820px 560px at 72% 46%, rgba(var(--accent-rgb),.085), transparent 64%),
    linear-gradient(var(--line) 1px, transparent 1px) 0 0/100% 72px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 94%);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 94%);
  opacity:.55;pointer-events:none}
/* three parts: headline (top left), text (bottom left), diagram (right, over both rows) */
.uc-hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr);grid-template-areas:"head fig" "body fig";column-gap:44px;align-items:center;padding-top:56px;padding-bottom:64px}
.uc-hero-head{grid-area:head;align-self:end}
.uc-hero-body{grid-area:body;align-self:start}
.uc-hero .hd{grid-area:fig}
/* The headline never hyphenates by itself (2026-10-12: "auto-matisch" on phones); a long word wraps whole. */
.uc-hero h1{font-size:clamp(32px,2.85vw,40px);line-height:1.08;letter-spacing:-.035em;margin:0 0 22px;overflow-wrap:break-word;hyphens:manual;text-wrap:balance}
.uc-hero .lede{font-size:clamp(17px,1.3vw,18.5px);line-height:1.58;max-width:30em;margin:0 0 30px;text-wrap:pretty}
.uc-hero .lede:has(+ .gloss){margin-bottom:14px}
/* the quiet line that explains abbreviations in plain words (use-case pages and the home hero) */
.gloss{margin:0 0 30px;max-width:40em;font-size:13.5px;line-height:1.55;color:var(--faint);text-wrap:pretty}
.gloss b{font-weight:500;color:var(--muted)}
.hero .gloss{margin:-12px 0 24px}
.uc-rel + .gloss{margin:18px 0 0}      /* "more examples": under the cards */
.crumbs{margin:0 0 22px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 10px;font-size:13px;color:var(--faint)}
.crumbs li:not(:last-child)::after{content:"/";margin-left:10px;color:var(--line-3)} /* the separator stays with the item before it */
.crumbs a{display:inline-block;padding:5px 0;color:var(--muted);text-decoration:none}
.crumbs li[aria-current]{padding:5px 0}
.crumbs a:hover{color:var(--text)}

/* ---------- the diagram (.hd) ----------
   A grid of five columns: sources, arrows, node, arrow, result; under it the amber card.
   The arrows from the sources are an SVG drawn 1:1 in pixels by tools/gen-pages.js for exactly this
   geometry: a source card is 58px high, 14px apart, the gap is 56px wide (SRC_H, SRC_GAP, ARROW_W there).
   Change them here and there together. */
.hd{position:relative;margin:0;--nw:148px}
.hd-stage{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,164px) 56px var(--nw) 56px minmax(0,1fr);align-items:center}
.hd-src{grid-column:1;list-style:none;margin:0;padding:0;display:grid;gap:14px}
.hd-src li{display:flex;align-items:center;gap:11px;height:58px;padding:0 12px;border-radius:15px;background:#10161b;box-shadow:inset 0 0 0 1px var(--line-2);font-size:15.5px;font-weight:500;line-height:1.15;color:var(--text);transition:opacity .4s var(--ease),box-shadow .4s var(--ease)}
.hd-src .ico{width:30px;height:30px}
.hd-in{grid-column:2;display:block;overflow:visible}
.hd-out{grid-column:4;display:block;overflow:visible}
.hd svg .w{fill:none;stroke:rgba(var(--accent-rgb),.22);stroke-width:2;stroke-linecap:round}
.hd svg .lit{fill:none;stroke:var(--accent);stroke-width:2.25;stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(var(--accent-rgb),.75));transition:opacity .35s var(--ease)}
.hd svg .ah{fill:var(--accent);transition:opacity .35s var(--ease)}
.hd svg .dot{fill:#eafff6;opacity:0;filter:drop-shadow(0 0 6px #3fe0a0)}
.hd-v{display:none}
/* the node: the AIstap mark and three verbs, in a soft green glow (a glow, not a border) */
.hd-node{grid-column:3;position:relative;align-self:stretch;display:grid;align-content:center;justify-items:center;padding:24px 10px;border-radius:22px;text-align:center;
  background:linear-gradient(180deg,#10201b,#0b1513);
  box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.36),0 0 0 7px rgba(var(--accent-rgb),.045),0 0 64px -6px rgba(var(--accent-rgb),.42);transition:box-shadow .5s var(--ease)}
.hd-node .glow{position:absolute;inset:-34% -70%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--accent-rgb),.2),transparent);pointer-events:none}
.hd-node .ring{position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 2px var(--accent),0 0 36px 4px rgba(var(--accent-rgb),.6);opacity:0;pointer-events:none}
.hd-node .mark{width:42px;height:42px}
.hd-node .nm{margin:8px 0 0;font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.1;color:var(--text)}
.hd-node .sub{margin:6px 0 0;font:500 9.5px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.hd-node .verbs{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px;font-size:16px;line-height:1.2;color:#cfd8df}
.hd-node .verbs li{transition:opacity .3s var(--ease),color .3s var(--ease)}
/* the result: a dark card that holds a LIGHT record card */
.hd-res{grid-column:5;align-self:stretch;display:flex;flex-direction:column;min-width:0;padding:12px;border-radius:20px;background:#10161b;box-shadow:inset 0 0 0 1px var(--line-2),0 30px 60px -34px rgba(0,0,0,.9)}
.hd-res-h{display:flex;align-items:center;flex-wrap:wrap;gap:7px 9px;margin:3px 3px 12px;font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.2;color:var(--text)}
.hd-res-h .ri{display:block;color:var(--text)}
.hd-res-h .ex{margin-left:auto;font:500 9.5px/1 var(--mono);letter-spacing:.1em;color:var(--muted);border:1px solid var(--line-3);border-radius:5px;padding:4px 6px;white-space:nowrap}
.rec{flex:1;margin:0;padding:12px 10px 8px;border-radius:13px;background:var(--paper);color:var(--paper-ink);box-shadow:0 14px 34px -18px rgba(0,0,0,.85)}
.rec-h{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;gap:7px 10px;margin:0 4px 10px}
.rec-t{font-size:14.5px;font-weight:600;letter-spacing:-.01em;line-height:1.25;transition:opacity .35s var(--ease)}
/* status: green = in order (#0a5a3b on #c5f0dc), amber = waits for a person (#6a4300 on #fbdfa6); both 6.7:1 */
.stp{flex:none;display:inline-block;padding:5px 9px;border-radius:999px;background:#c5f0dc;color:#0a5a3b;font-size:11.5px;font-weight:600;line-height:1;white-space:nowrap;transition:opacity .35s var(--ease),transform .45s var(--ease)}
.rec-rows{margin:0;display:grid;gap:3px}
.rr{position:relative;display:grid;grid-template-columns:minmax(36%,max-content) minmax(0,1fr);align-items:center;gap:8px;min-height:33px;padding:5px 8px;border-radius:8px}
.rec-rows .rr:nth-child(odd){background:rgba(16,23,27,.05)}
.rr dt{display:flex;align-items:center;gap:7px;font-size:13px;line-height:1.2;color:var(--paper-muted)}
.rr dt::before{content:"";flex:none;width:4px;height:4px;border-radius:50%;background:#a3aeb6}
.rr dd{position:relative;margin:0;min-width:0;font-size:13.5px;font-weight:600;line-height:1.25;font-variant-numeric:tabular-nums}
.rr .v{transition:opacity .35s var(--ease)}
.rr .sk{position:absolute;left:0;top:50%;width:62%;height:8px;margin-top:-4px;border-radius:4px;background:rgba(16,23,27,.13);opacity:0;pointer-events:none;transition:opacity .25s var(--ease)}
/* the finished picture: the last row is the ONE thing that is unclear (amber), and the status waits for a person */
.rr .v-ok,.rr .p-ok{display:none}
.rec-rows .rr.rq,.rec-hub .rr.rq{background:#fdeccb;box-shadow:inset 0 0 0 1.5px #b8780c}
.rr.rq dt{color:#6a4300}
.rr.rq dt::before{background:#b8780c}
.rr.rq .v-ask{color:#5c3a00}
.rec-h .stp,.stp.p-ask{background:#fbdfa6;color:#6a4300}
/* the hub: the light card holds one prepared record per use case (system, status, title) */
.rec-hub{list-style:none;display:grid;gap:5px;padding:8px}
.rr.hr{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ic lbl pill" "ic ttl ttl";gap:2px 9px;padding:8px 9px;background:rgba(16,23,27,.05)}
.hr .hi{grid-area:ic;align-self:start;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#10171b;color:#eef3f1}
.hr .hi .ico{width:18px;height:18px}
.hr .hl{grid-area:lbl;font-size:14px;font-weight:600;line-height:1.3}
.hr .stp{grid-area:pill;font-size:10.5px;padding:4px 7px}
.hr .ht{grid-area:ttl;font-size:13px;line-height:1.3;color:var(--paper-muted)}
.hr .sk{left:48px;top:auto;bottom:11px;width:50%;margin:0}
.rr.hr.rq .ht{color:#6a4300}
/* the amber card, tied in with a dotted amber route: from the node down into the card, from the card up into the record */
.hd-doubt{grid-column:3 / 6;display:grid;grid-template-columns:calc(var(--nw) / 2 - 1px) 30px minmax(0,1fr) 30px 26px;grid-template-rows:18px 1fr 1fr}
.rt{position:relative;transition:opacity .4s var(--ease)}
.rt-a{grid-column:2;grid-row:1 / 3;border-left:2.5px dotted var(--amber);border-bottom:2.5px dotted var(--amber);border-bottom-left-radius:16px}
.rt-b{grid-column:4;grid-row:1 / 3;border-right:2.5px dotted var(--amber);border-bottom:2.5px dotted var(--amber);border-bottom-right-radius:16px}
.rt-a::after{content:"";position:absolute;right:-3px;bottom:-6.5px;border-left:8px solid var(--amber);border-top:5.5px solid transparent;border-bottom:5.5px solid transparent}
.rt-b::after{content:"";position:absolute;right:-6.5px;top:-3px;border-bottom:8px solid var(--amber);border-left:5.5px solid transparent;border-right:5.5px solid transparent}
.dc{grid-column:3;grid-row:2 / 4;display:flex;align-items:flex-start;gap:13px;padding:15px 16px;border-radius:17px;
  background:linear-gradient(180deg,rgba(245,181,77,.14),rgba(245,181,77,.07)),#12100b;
  box-shadow:inset 0 0 0 1px rgba(245,181,77,.5),0 0 46px -14px rgba(245,181,77,.42);transition:opacity .45s var(--ease),transform .55s var(--ease),box-shadow .5s var(--ease)}
.dci{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--amber);color:var(--amber-ink)}
.dci .ico{width:20px;height:20px}
.dc .dh{margin:0;font-size:16.5px;font-weight:600;letter-spacing:-.012em;line-height:1.3;color:var(--text)}
.dc .dp{margin:4px 0 0;font-size:14.5px;line-height:1.45;color:#e2d6c0;text-wrap:pretty}
/* foot: one line that says which pass this is, pause / replay */
.hd-foot{display:flex;align-items:center;justify-content:space-between;gap:10px 18px;min-height:34px;margin-top:22px}
.hd-cap{display:grid;margin:0;font-size:14px;line-height:1.4;color:var(--muted)}
.hd-cap span{grid-area:1 / 1;transition:opacity .4s var(--ease)}
.hd-cap .c-ok{opacity:0}
.hd-foot .ctl{flex:none;margin-left:auto}

/* PLAY states: only while /usecase.js plays the storyboard (it puts .play on the figure and .on on what is
   lit; .ask is the second pass, in which the last row stays open and the amber route lights up).
   Without .play the rules above show the finished picture. */
.hd.play .hd-src li{opacity:.42}
.hd.play .hd-src li.on{opacity:1;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.55),0 0 26px -8px rgba(var(--accent-rgb),.55)}
.hd.play svg .lit,.hd.play svg .ah,.hd.play .hd-v{opacity:0}
.hd.play svg .lit.on,.hd.play svg .ah.on,.hd.play .hd-v.on{opacity:1}
.hd.play .hd-node{box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.2),0 0 0 7px rgba(var(--accent-rgb),.02),0 0 40px -12px rgba(var(--accent-rgb),.2)}
.hd.play.s-v1 .hd-node{box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.36),0 0 0 7px rgba(var(--accent-rgb),.045),0 0 64px -6px rgba(var(--accent-rgb),.42)}
.hd.play .verbs li{opacity:.36}
.hd.play.s-v1 .verbs .vb1,.hd.play.s-v2 .verbs .vb2,.hd.play.s-v3 .verbs .vb3{opacity:1;color:#fff}
/* one pulse per verb: three names for the same keyframes, so each verb starts the animation again */
.hd.play.s-v1 .ring{animation:hdPulse1 .7s var(--ease) both}
.hd.play.s-v2 .ring{animation:hdPulse2 .7s var(--ease) both}
.hd.play.s-v3 .ring{animation:hdPulse3 .7s var(--ease) both}
@keyframes hdPulse1{0%{opacity:0;transform:scale(.97)}30%{opacity:.9}100%{opacity:0;transform:scale(1.07)}}
@keyframes hdPulse2{0%{opacity:0;transform:scale(.97)}30%{opacity:.9}100%{opacity:0;transform:scale(1.07)}}
@keyframes hdPulse3{0%{opacity:0;transform:scale(.97)}30%{opacity:.9}100%{opacity:0;transform:scale(1.07)}}
.hd.play .rr .v,.hd.play .rr.hr .stp{opacity:0}
.hd.play .rr .sk{opacity:1}
.hd.play .rr.on .v,.hd.play .rr.hr.on .stp{opacity:1}
.hd.play .rr.on .sk{opacity:0}
.hd.play .rr.on::after{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(47,181,122,.3);opacity:0;pointer-events:none;animation:hdFill .8s var(--ease) both}
@keyframes hdFill{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
/* the last row: plain like the others until it is filled; all clear = its value, .ask = the open one in amber */
.hd.play .rec-rows .rr.rq:not(.on),.hd.play:not(.ask) .rec-rows .rr.rq{background:transparent;box-shadow:none}
.hd.play .rec-rows .rr.rq:nth-child(odd):not(.on),.hd.play:not(.ask) .rec-rows .rr.rq:nth-child(odd){background:rgba(16,23,27,.05)}
.hd.play .rec-hub .rr.rq:not(.on),.hd.play:not(.ask) .rec-hub .rr.rq{background:rgba(16,23,27,.05);box-shadow:none}
.hd.play:not(.ask) .rr.rq dt,.hd.play .rr.rq:not(.on) dt{color:var(--paper-muted)}
.hd.play:not(.ask) .rr.rq dt::before,.hd.play .rr.rq:not(.on) dt::before{background:#a3aeb6}
.hd.play:not(.ask) .rr.hr.rq .ht{color:var(--paper-muted)}
.hd.play:not(.ask) .rr .v-ok{display:inline}
.hd.play:not(.ask) .rr .p-ok{display:inline-block}
.hd.play:not(.ask) .rr :is(.v-ask,.p-ask){display:none}
.hd.play.ask .rr.rq.on::after{background:rgba(217,154,34,.4)}
.hd.play .rec-t{opacity:.3}
.hd.play.s-rec .rec-t{opacity:1}
.hd.play .rec-h .stp{opacity:0;transform:translateY(-7px) scale(.92)}
.hd.play.s-pill .rec-h .stp{opacity:1;transform:none}
.hd.play:not(.ask) .rec-h .stp{background:#c5f0dc;color:#0a5a3b}
.hd.play .rt{opacity:.28}
.hd.play.s-route .rt{opacity:1}
.hd.play .dc{opacity:.34;transform:translateY(5px) scale(.985);box-shadow:inset 0 0 0 1px rgba(245,181,77,.3)}
.hd.play.s-doubt .dc{opacity:1;transform:none;box-shadow:inset 0 0 0 1px rgba(245,181,77,.6),0 0 54px -10px rgba(245,181,77,.55)}
.hd.play:not(.ask) .hd-cap .c-ok{opacity:1}
.hd.play:not(.ask) .hd-cap .c-ask{opacity:0}
.hd.play.s-reset :is(.hd-src li,.rr .v,.rec-t,.stp,.verbs li,.rt,.dc,svg .lit,svg .ah,.hd-v){opacity:.25!important;transition:opacity .25s!important}
.hd.paused *,.hd.paused *::after{animation-play-state:paused!important}

/* ---------- version 4 (2026-10-13): everything below the hero is a PICTURE ----------
   The founder on version 3: "I like the design of the header, not the rest of the page ... too much text. All
   that text, I would want it as visual, ultra-premium elements." So every module below the hero is a small
   designed scene built from the objects of the hero, with a title of a few words. What they share:
     the raised surface   layered, a one-pixel edge that is lighter at the top left and fades out, a faint
                          inner highlight, a deep soft shadow                       (.scn .bt .vg .ins .cr .qa .sw .cs)
     .art                 the stage of a scene or a miniature: dark, with a soft glow in the meaning colour
     the mock objects     .mm a dark message card, .pp the light paper card (the client's own system), .ln a
                          skeleton line for text nobody needs to read, .stp a status pill, .who a person
     [data-play]          plays ONCE when it is in view (/usecase.js adds .on) and rests on the picture the
                          markup already is. All of that motion sits in ONE block further down, inside
                          prefers-reduced-motion: no-preference and behind .uc-js: without JavaScript or with
                          reduced motion every module simply shows its finished picture.
     [data-glow]          a soft light that follows the pointer (--mx / --my, set by /usecase.js) */
:is(.scn,.bt,.vg,.ins,.cr,.qa,.sw,.cs){position:relative;border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.042),rgba(255,255,255,0) 44%),var(--surface);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 44px 80px -52px #000,0 16px 30px -22px rgba(0,0,0,.8)}
:is(.scn,.bt,.vg,.ins,.cr,.qa,.sw,.cs,.pnl,.uc-card)::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.24),rgba(255,255,255,.06) 32%,rgba(255,255,255,0) 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
[data-glow]::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s var(--ease);
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,0px),rgba(var(--gl,63,224,160),.14),transparent 70%)}
@media (hover:hover){[data-glow]:hover::after{opacity:1}}
.pg-uc .uc-split + :is(.bento,.sw,.cs,.crail),.pg-uc h2 + :is(.scns,.vgs,.ins,.pnls){margin-top:56px}

/* the stage and the mock objects */
.art{position:relative;display:grid;place-items:center;border-radius:17px;background:radial-gradient(300px 190px at 50% 56%,rgba(var(--gl,63,224,160),.15),transparent 72%),#090c0f;box-shadow:inset 0 0 0 1px rgba(226,236,244,.05)}
.art :is(.mm,.pp){display:grid;align-content:start;gap:8px;min-width:0;padding:12px;border-radius:12px}
.art .mm{background:#141b21;color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2),inset 0 1px 0 rgba(255,255,255,.06),0 20px 34px -18px #000}
.art .pp{background:var(--paper);color:var(--paper-ink);box-shadow:inset 0 1px 0 #fff,0 22px 38px -18px #000}
.art .mm > .ico{width:22px;height:22px}
.art em{font-style:normal}
.art .pp > em{font-size:11.5px;line-height:1.2;color:var(--paper-muted)}
/* (.ln only inside a stage: the home demo has a class of the same name) */
.art .ln{display:block;height:7px;border-radius:4px;background:rgba(226,236,244,.15)}
.art .pp .ln{background:rgba(16,23,27,.13)}
.art .ln.w4{width:40%}.art .ln.w5{width:50%}.art .ln.w6{width:60%}.art .ln.w7{width:70%}.art .ln.w8{width:80%}.art .ln.w9{width:90%}
.stp.am{background:#fbdfa6;color:#6a4300}
/* a person on the client's team: always amber */
.art .who{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 15px 0 9px;border-radius:999px;background:rgba(245,181,77,.17);color:#ffdd9f;box-shadow:inset 0 0 0 1.5px rgba(245,181,77,.62),0 0 28px -8px rgba(245,181,77,.65)}
.art .who .ico{width:20px;height:20px}
.art .who em{font:600 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
/* a row of the record on the paper card: label and value; .ask = the open row, amber, as in the hero */
.pp.rows{gap:4px;padding:10px}
.pp .rh{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;gap:6px 10px;margin:1px 3px 6px;font-size:13px;line-height:1.25}
.pp .rh b{font-weight:600;letter-spacing:-.01em}
.pp .gr{display:grid;grid-template-columns:minmax(34%,max-content) minmax(0,1fr) auto;align-items:center;gap:8px;min-height:31px;margin:0;padding:4px 8px;border-radius:8px;font-size:13px;line-height:1.25}
.pp .gr:nth-of-type(odd){background:rgba(16,23,27,.05)}
.pp .gr em{color:var(--paper-muted)}
.pp .gr b{font-weight:600;font-variant-numeric:tabular-nums}
.pp .gr.ask{background:#fdeccb;box-shadow:inset 0 0 0 1.5px #b8780c;color:#5c3a00}
.pp .gr.ask em{color:#6a4300}
/* a small badge on the corner of an object (a clock, an hourglass, a lock, a calculator) */
.art .badge,.art .lock,.art .lens{position:absolute;display:grid;place-items:center;width:42px;height:42px;border-radius:13px}
.art :is(.badge,.lock,.lens) .ico{width:22px;height:22px}
/* a short connector with a travelling dot (.pd) */
.art .wire{flex:none;position:relative;display:block;width:54px;height:2.5px;border-radius:2px;background:var(--accent);box-shadow:0 0 9px rgba(var(--accent-rgb),.7)}
.art .wire::after{content:"";position:absolute;right:-2px;top:-4.75px;border-left:9px solid var(--accent);border-top:6px solid transparent;border-bottom:6px solid transparent}
.art .pd{position:absolute;left:0;right:0;top:-3.25px;height:9px;background:radial-gradient(circle 4.5px at calc(100% - 4.5px) 50%,#eafff6 96%,transparent);filter:drop-shadow(0 0 5px #3fe0a0);opacity:0} /* a carrier as long as the connector, the dot at its end: it moves with translate, never with left */
.art .nd,.bnd .nd{flex:none;display:grid;place-items:center;border-radius:50%;background:#0d1a16;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.5),0 0 0 6px rgba(var(--accent-rgb),.05),0 0 34px -4px rgba(var(--accent-rgb),.6)}
/* the dotted amber way down to a person */
.art .down{display:block;position:relative;width:0;height:28px;margin:7px 0 11px;border-left:2.5px dotted var(--amber)}
.art .down::after{content:"";position:absolute;left:-6.75px;bottom:-7px;border-top:8px solid var(--amber);border-left:5.5px solid transparent;border-right:5.5px solid transparent}
/* a dot that travels along a drawn path (the swimlane, the constellation): it stands on the corner of its box and
   the engine of /usecase.js moves it with translate (helper "dot"); at rest it is not there */
.tdot{position:absolute;left:0;top:0;z-index:3;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:#eafff6;box-shadow:0 0 12px 3px rgba(var(--accent-rgb),.9);opacity:0;pointer-events:none}

/* ---------- 2. "Herkent u dit?": three mini-scenes in the muted red of manual work ---------- */
.scns{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.scn{--gl:240,110,96;padding:13px 13px 26px}
.scn-art{min-height:232px;padding:20px 0;overflow:hidden}
.scn h3{margin:24px 13px 0;font-size:21px;font-weight:500;letter-spacing:-.018em;line-height:1.25;text-wrap:balance}
/* two objects with a dashed red hop between them: what is read on the left, what is typed on the right */
.scn .duo{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;max-width:330px;padding:0 16px}
.scn .duo > :is(.mm,.pp){flex:1 1 0}
.scn .hop{flex:none;position:relative;width:26px;height:0;border-top:2px dashed rgba(241,154,143,.8)}
.scn .hop::after{content:"";position:absolute;right:-3px;top:-6px;border-left:8px solid var(--manual);border-top:5px solid transparent;border-bottom:5px solid transparent}
.scn .hl{justify-self:start;max-width:100%;padding:3px 7px;border-radius:6px;background:rgba(240,110,96,.3);font-size:13.5px;font-weight:600;line-height:1.25;color:#ffe9e5;overflow-wrap:anywhere}
.scn .inp{display:flex;align-items:center;min-height:30px;padding:3px 8px;border-radius:7px;background:#fff;box-shadow:inset 0 0 0 1.5px #c9534a;font-size:13.5px;font-weight:600;line-height:1.25;overflow-wrap:anywhere}
.scn .ty{position:relative;display:inline-block}
.scn .ty > span{display:inline-block}
.scn .ty .car{position:absolute;left:0;top:50%;width:1.5px;height:16px;margin-top:-8px;background:var(--paper-ink);opacity:0} /* the caret: only there while the story types (helper "type") */
/* the copy of the value that travels from the mail to the form (made by the engine, only while the story plays) */
.scn .hl.uc-ghost{background:#4d2520;color:#fff1ee;box-shadow:inset 0 0 0 1px rgba(240,110,96,.8),0 12px 22px -8px #000,0 0 24px -4px rgba(240,110,96,.75)}
.scn .inp.miss{justify-content:center;background:transparent;box-shadow:none;border:1.5px dashed #c9534a;color:#b3261e}
.scn .badge{right:-13px;top:-13px;background:#3b1f1c;color:#ffe0db;box-shadow:inset 0 0 0 1px rgba(240,110,96,.55),0 0 26px -6px rgba(240,110,96,.7)}
/* formats: the incoming things fanned like cards */
.fan{position:relative;width:250px;height:156px}
.fan .fc{position:absolute;left:50%;top:50%;display:grid;align-content:start;gap:7px;width:104px;height:134px;margin:-67px 0 0 -52px;padding:12px;border-radius:13px;background:#151c22;box-shadow:inset 0 0 0 1px var(--line-2),inset 0 1px 0 rgba(255,255,255,.07),0 20px 34px -14px #000}
.fan .fc .ico{width:26px;height:26px}
.fan .fc b{margin-bottom:3px;font-size:13px;font-weight:600;line-height:1.2;color:var(--text)}
.fan .f1{transform:translateX(-72px) rotate(-9deg)}
.fan .f2{z-index:1;transform:translateY(-5px)}
.fan .f3{justify-items:end;transform:translateX(72px) rotate(9deg)} /* its icon and word on the side that shows */
.fan .f3 .ln{justify-self:end}
.fan:not(:has(.f3)) .f1{transform:translateX(-44px) rotate(-7deg)}
.fan:not(:has(.f3)) .f2{transform:translateX(44px) rotate(7deg)}
/* pileup: an inbox that fills */
.pile{position:relative;display:grid;gap:6px;width:min(236px,84%);padding:12px 12px 14px;border-radius:14px;background:#11171c;box-shadow:inset 0 0 0 1px var(--line-2),0 20px 34px -18px #000}
.pile-h,.inb-h{font:500 10.5px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pile .pr{display:flex;align-items:center;gap:8px;height:23px;padding:0 8px;border-radius:7px;background:rgba(226,236,244,.055)}
.pile .pr .ico{width:16px;height:16px}
.pile .pr .ln{flex:none}
.pile .un{flex:none;width:7px;height:7px;margin-left:auto;border-radius:50%;background:var(--manual);box-shadow:0 0 8px rgba(240,110,96,.8)}
/* typo: one digit wrong, circled */
.scn .bad{position:relative;color:#b3261e}
.scn .circ{position:absolute;inset:-6px -8px;border:2px solid #d8483e;border-radius:50%;transform:rotate(-8deg)}
/* search (and the miniature "lookup"): a lens on one row of a list */
.look{position:relative}
.look .pp.list{gap:6px;width:176px}
.look .lr{display:block;height:19px;border-radius:6px;background:rgba(16,23,27,.075)}
.look .lr.hit{display:flex;align-items:center;justify-content:space-between;gap:6px;height:auto;min-height:26px;padding:3px 8px;background:#f8d6d1;box-shadow:inset 0 0 0 1.5px #c9534a;font-size:12.5px;font-weight:600;line-height:1.25;color:#5a1a14}
.look .lens{right:-17px;top:83px;border-radius:50%;background:#3b1f1c;color:#ffe0db;box-shadow:inset 0 0 0 1px rgba(240,110,96,.55),0 0 26px -6px rgba(240,110,96,.7)}
.look.g .lr.hit{padding-right:30px;background:#c5f0dc;box-shadow:inset 0 0 0 1.5px #2fb57a;color:#0a5a3b}
.look.g .lr.hit .ico{width:16px;height:16px;stroke-width:2.6}
.look.g .lens{top:58px;background:#0d1a16;color:#eafff6;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.55),0 0 26px -4px rgba(var(--accent-rgb),.6)}
/* chase: a phone that rings */
.scn-chase .ring{flex:none;position:relative;display:grid;place-items:center;width:62px;height:62px;border-radius:19px;background:rgba(240,110,96,.26);color:#ffe4df;box-shadow:inset 0 0 0 1px rgba(240,110,96,.45)}
.scn-chase .ring .ico{width:30px;height:30px}
.scn-chase .wv{position:absolute;inset:-8px;border-radius:26px;border:1.5px solid rgba(241,154,143,.42)}
.scn-chase .wv.w2{inset:-17px;border-radius:34px;border-color:rgba(241,154,143,.2)}
/* late: a document that waits, the customer already gone */
.scn .pp.wait{position:relative}
.scn .gone{flex:none;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;border:1.5px dashed rgba(226,236,244,.3);color:rgba(226,236,244,.32)}
.scn .gone .ico{width:28px;height:28px}
.scn-late .duo{max-width:280px;gap:14px}
.scn-chase .duo{max-width:290px;gap:16px}

/* ---------- 3. the two panels: "Vandaag" (muted red) against "Met AIstap" (green) ---------- */
.pnls{display:grid;gap:18px}
.pnl{position:relative;padding:36px 40px 42px;border-radius:26px}
.pnl-today{background:linear-gradient(180deg,rgba(240,110,96,.15),rgba(240,110,96,.07)),var(--bg);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 40px 80px -52px #000}
.pnl-with{background:linear-gradient(180deg,rgba(var(--accent-rgb),.135),rgba(var(--accent-rgb),.055)),var(--bg);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 90px -34px rgba(var(--accent-rgb),.4),0 40px 80px -52px #000}
.pnl-h{display:flex;align-items:center;gap:16px;margin-bottom:38px}
.pnl-h .pi{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:13px}
.pnl-h .pi .ico{width:24px;height:24px}
.pnl-h .pi .mark{width:26px;height:26px}
.pnl-today .pi{background:rgba(240,110,96,.16);color:var(--manual)}
.pnl-with .pi{background:rgba(var(--accent-rgb),.16)}
.pnl-h h3{margin:0;font-size:26px;font-weight:600;letter-spacing:-.025em;line-height:1.1}
.pnl-today .pnl-h h3{color:var(--manual)}
.pnl-with .pnl-h h3{color:var(--accent)}
/* the count of the panel, taken from its own tiles: red tiles = by hand, amber tiles = your team */
.pnl-n{display:flex;align-items:baseline;gap:11px;margin:0 0 0 auto;font-size:16px;line-height:1.2;color:var(--text)}
.pnl-n b{font-size:50px;font-weight:600;letter-spacing:-.045em;line-height:.9;font-variant-numeric:tabular-nums}
.pnl-today .pnl-n b{color:var(--manual)}
.pnl-with .pnl-n b{color:var(--amber)}
/* a row of icon tiles; each step draws the arrow to the next one */
.tiles{--ts:72px;--n:5;position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.tiles-4{--n:4;grid-template-columns:repeat(4,minmax(0,1fr))}
.tiles-6{--n:6;grid-template-columns:repeat(6,minmax(0,1fr))}
.tl{position:relative;display:grid;justify-items:center;align-content:start;gap:0;padding:0 10px;text-align:center}
.tl:nth-child(2){--i:1}.tl:nth-child(3){--i:2}.tl:nth-child(4){--i:3}.tl:nth-child(5){--i:4}.tl:nth-child(6){--i:5}
.tl .tb{position:relative;width:var(--ts);height:var(--ts);border-radius:20px}
.tl .tb .ico{width:34px;height:34px}
.tl .t{margin-top:16px;font-size:16.5px;font-weight:500;line-height:1.3;letter-spacing:-.01em;color:var(--text);text-wrap:balance}
.tl .who{margin-top:10px;padding:5px 9px;border-radius:999px;background:rgba(245,181,77,.16);font:600 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}
/* the arrow to the next tile: a line and a head, in the gap between two tiles */
.tl:not(:last-child)::before{content:"";position:absolute;left:calc(50% + var(--ts) / 2 + 12px);top:calc(var(--ts) / 2 - 1px);width:calc(100% - var(--ts) - 30px);height:2.5px;border-radius:2px;background:currentColor}
.tl:not(:last-child)::after{content:"";position:absolute;left:calc(150% - var(--ts) / 2 - 20px);top:calc(var(--ts) / 2 - 5.75px);border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.tl{color:var(--accent)}
.pnl-today .tl{color:rgba(241,154,143,.6)}
.pnl-today .tb{background:rgba(240,110,96,.24);box-shadow:inset 0 0 0 1px rgba(240,110,96,.3);color:#ffe4df}
/* what comes in is not handwork: the first tile of "Vandaag" is grey, so the red tiles are the ones counted */
.pnl-today .tl.in .tb{background:rgba(226,236,244,.07);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--text)}
.pnl-with .tb{background:rgba(var(--accent-rgb),.24);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.4),0 0 30px -10px rgba(var(--accent-rgb),.55)}
/* the step a person does: amber */
.tl.human .tb{background:rgba(245,181,77,.22);color:#ffdd9f;box-shadow:inset 0 0 0 1.5px rgba(245,181,77,.7),0 0 30px -10px rgba(245,181,77,.55)}
/* the dot that travels the green row once (it only exists while it plays: see the motion block) */
.tiles-run::after{content:"";position:absolute;left:calc(50% / var(--n) - 5.5px);right:calc(50% / var(--n) - 5.5px);top:calc(var(--ts) / 2 - 5.5px);z-index:2;height:11px;background:radial-gradient(circle 5.5px at calc(100% - 5.5px) 50%,#eafff6 96%,transparent);filter:drop-shadow(0 0 5px rgba(var(--accent-rgb),.95));opacity:0;pointer-events:none} /* a carrier from the first tile to the last, the dot at its end: it moves with translate */
/* under the green panel: the possible impact of this use case, as chips with a check */
.pnl-impact{margin-top:42px;padding-top:30px;border-top:1px solid rgba(var(--accent-rgb),.2)}
.pnl-impact h3{margin:0 0 16px;font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.ichips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.ichips li{display:flex;align-items:center;gap:10px;padding:10px 18px 10px 11px;border-radius:999px;background:rgba(var(--accent-rgb),.11);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.16);font-size:16.5px;line-height:1.3;color:var(--text)}
.ichips .ico{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--accent);color:var(--accent-ink);stroke-width:2.6}
.pnl-impact .note{margin:18px 0 0;max-width:46em;font-size:14.5px;line-height:1.55;color:var(--muted)}

/* ---------- 4. what AIstap can build: a bento of live miniatures ---------- */
.bento{list-style:none;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.bt{padding:13px 13px 28px}
.bt-w4{grid-column:span 4}.bt-w5{grid-column:span 5}.bt-w7{grid-column:span 7}
.bt-art{min-height:248px;padding:24px 0;overflow:hidden}
@media (min-width:1101px){.bt-art > *,.scn-art > *{scale:1.12}.scn-art > .duo{width:88%;max-width:300px}} /* the pictures stand a little larger on a wide screen */
.bt h3{margin:24px 14px 6px;font-size:21.5px;font-weight:500;letter-spacing:-.018em;line-height:1.25}
.bt .cap{margin:0 14px;font-size:15.5px;line-height:1.5;color:var(--muted)}
/* mailbox: an inbox list, one row lit, a green line into the node */
.mbx{display:flex;align-items:center;width:min(390px,84%)}
.mbx .inb{flex:1 1 0;min-width:0;display:grid;gap:6px;padding:12px;border-radius:14px;background:#11171c;box-shadow:inset 0 0 0 1px var(--line-2),inset 0 1px 0 rgba(255,255,255,.06),0 22px 36px -20px #000}
.mbx .ir{display:flex;align-items:center;gap:9px;min-width:0;height:31px;padding:0 10px;border-radius:9px;background:rgba(226,236,244,.055);font-size:13.5px;line-height:1.2}
.mbx .ir .ico{width:18px;height:18px}
.mbx .ir .ln{flex:none}
.mbx .ir b{min-width:0;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mbx .ir.lit{background:rgba(var(--accent-rgb),.17);color:#eafff6;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.6),0 0 24px -6px rgba(var(--accent-rgb),.65)}
.mbx .wire,.mbx .nd{margin-top:19px} /* the height of the label "Inbox": the line leaves from the lit row */
.mbx .wire{margin-left:5px;margin-right:9px}
.mbx .nd{width:62px;height:62px}
.mbx .nd .mark{width:30px;height:30px}
/* read: a document, four spans highlighted, the field names leaving it */
.rd{display:flex;align-items:center;gap:24px}
.rd .pp.doc{position:relative;overflow:hidden;gap:11px;width:158px;padding:16px 14px}
.rd .doc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 58%,rgba(47,181,122,.3) 97%,#2fb57a 97%);opacity:0;pointer-events:none} /* the light that reads down the page (only while the story plays) */
.rd .doc .ln{position:relative}
.rd .hl{position:absolute;top:-3.5px;bottom:-3.5px;border-radius:4px;background:#5fd6a4;box-shadow:0 0 0 1px rgba(10,90,59,.3)}
.rd .h1{left:6%;width:40%}.rd .h2{left:46%;width:36%}.rd .h3{left:14%;width:28%}.rd .h4{left:52%;width:32%}
.rd .chips{display:grid;gap:7px;justify-items:start}
.rd .chips b::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 1.5px var(--accent),0 0 16px rgba(var(--accent-rgb),.8);opacity:0;pointer-events:none} /* the ring of a chip that has just landed */
.rd .chips b{position:relative;padding:6px 12px;border-radius:999px;background:#12312a;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.5);font-size:13px;font-weight:500;line-height:1.2;color:#eafff6;white-space:nowrap}
/* check and gap: something is off, the amber way down to a person */
.chk{display:grid;justify-items:center}
.chk .pair{display:flex;align-items:center;gap:10px}
.chk .cv{display:flex;align-items:center;gap:8px;height:44px;padding:0 14px 0 10px;border-radius:12px;background:#141b21;box-shadow:inset 0 0 0 1px var(--line-2),inset 0 1px 0 rgba(255,255,255,.06),0 16px 28px -16px #000;font-size:14px;line-height:1.2}
.chk .cv .ico{width:22px;height:22px}
.chk .cv b{font-weight:600;white-space:nowrap}
.chk .neq{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--amber);color:var(--amber-ink);box-shadow:0 0 24px -4px rgba(245,181,77,.85)}
.chk .neq .ico{width:19px;height:19px;stroke-width:2.4}
.chk .pp.rows{width:232px}
/* prepare: the record of the client's system, and the lock of the person who approves */
.prp{position:relative}
.prp .pp.rows{width:258px}
.prp .lock{right:-15px;bottom:-15px;background:#2b2110;color:#ffdd9f;box-shadow:inset 0 0 0 1.5px rgba(245,181,77,.7),0 0 26px -6px rgba(245,181,77,.7)}
/* calc: rows adding up to a total (bars, no figures) */
.clc{position:relative}
.clc .pp.sum{gap:10px;width:200px;padding:15px 14px}
.clc .sr{display:flex;align-items:center;justify-content:space-between;gap:12px}
.clc .sr .ln{flex:none}
.clc .am{flex:none;height:9px;border-radius:4px;background:rgba(16,23,27,.3)}
.clc .a1{width:34px}.clc .a2{width:22px}.clc .a3{width:28px}
.clc .tot{margin-top:2px;padding-top:11px;border-top:1.5px solid rgba(16,23,27,.2)}
.clc .tot em{font-size:13px;font-weight:600}
.clc .a4{width:50px;height:12px;background:#0f7a52}
.clc .badge{right:-15px;top:-15px;background:#0d1a16;color:#eafff6;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.55),0 0 26px -4px rgba(var(--accent-rgb),.6)}
/* draft: a reply that is written, not sent */
.drf{display:grid;justify-items:center;width:100%}
.art .mm.msg{gap:10px;width:min(226px,86%);padding:14px}
.art .mm .mh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:3px;font-size:12.5px;line-height:1.2;color:var(--muted)}
.art .mm .mh .ico{width:22px;height:22px}
/* notify: a bell, a line, a person */
.ntf{display:flex;align-items:center}
.ntf .bell{display:grid;place-items:center;width:62px;height:62px;border-radius:19px;background:rgba(var(--accent-rgb),.22);color:#eafff6;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.45),0 0 30px -8px rgba(var(--accent-rgb),.6)}
.ntf .bell .ico{width:30px;height:30px;transform-origin:50% 12%}
.ntf .wire{margin:0 11px 0 8px}

/* ---------- the instrument: two sliders, large numerals, a ring ---------- */
.ins{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:center;gap:26px 72px;padding:48px 52px 34px}
.ins{background:radial-gradient(440px 320px at 80% 44%,rgba(var(--accent-rgb),.1),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.042),rgba(255,255,255,0) 44%),var(--surface)} /* a soft glow behind the ring */
.sl{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;column-gap:18px;margin-bottom:34px}
.sl .num{min-width:1.9ch;font-size:68px;font-weight:600;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums;color:var(--faint);transition:color .3s var(--ease)}
.sl label{font-size:17px;line-height:1.35;color:var(--muted)}
.sl label::first-letter{text-transform:uppercase}
.ins.own .sl .num{color:var(--text)}
/* a native range input, drawn: the filled part follows --f (set by /usecase.js); grey while it is the example */
.sl input{-webkit-appearance:none;appearance:none;grid-column:1 / -1;width:100%;height:44px;margin:4px 0 0;padding:0;background:transparent;cursor:pointer;--f:0%;--c:#6c7680}
.ins.own .sl input{--c:var(--accent)}
.sl input::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--c) var(--f),rgba(226,236,244,.12) var(--f))}
.sl input::-moz-range-track{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--c) var(--f),rgba(226,236,244,.12) var(--f))}
.sl input::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-10px;border:0;border-radius:50%;background:#f3fbf7;box-shadow:0 0 0 6px rgba(var(--accent-rgb),.2),0 6px 16px rgba(0,0,0,.65)}
.sl input::-moz-range-thumb{width:28px;height:28px;border:0;border-radius:50%;background:#f3fbf7;box-shadow:0 0 0 6px rgba(var(--accent-rgb),.2),0 6px 16px rgba(0,0,0,.65)}
.sl input:focus-visible{outline:none}
.sl input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--accent)}
.sl input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--accent)}
.ins-hint{margin:0;font-size:14.5px;line-height:1.5;color:var(--faint)}
.ins.own .ins-hint{visibility:hidden}
.ins-out{display:grid;justify-items:center;gap:16px}
.dial{position:relative;width:min(100%,264px);aspect-ratio:1}
.dial svg{display:block;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.dial .tr{fill:none;stroke:rgba(226,236,244,.09);stroke-width:13}
.dial .arc{fill:none;stroke:var(--accent);stroke-width:13;stroke-linecap:round;stroke-dasharray:var(--p,0) 100;opacity:0;filter:drop-shadow(0 0 9px rgba(var(--accent-rgb),.6));transition:stroke-dasharray .45s var(--ease),opacity .3s var(--ease)}
.ins.own .dial .arc{opacity:1}
.dial-c{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:8px;margin:0;text-align:center}
.dial-c b{font-size:72px;font-weight:600;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums;color:var(--faint)}
.ins.own .dial-c b{color:var(--text)}
.dial-c span{max-width:9.5em;font-size:15px;line-height:1.3;color:var(--muted)}
.ins-ring{margin:0;max-width:22em;font-size:13.5px;line-height:1.5;text-align:center;color:var(--faint)}
.ins-note{grid-column:1 / -1;margin:6px 0 0;padding-top:20px;border-top:1px solid var(--line);font-size:14.5px;line-height:1.55;color:var(--muted)}

/* ---------- 5. control by your team: the swimlane ---------- */
/* Two lanes, one path. Wide: the lanes are two rows of 150px and the path runs left to right (.sw-wide).
   Narrower than 761px the lanes are two columns and the path runs down (.sw-tall). Both drawings are in the
   markup with the same five stops; the steps are placed on those stops here. */
.sw{display:grid;grid-template-columns:224px minmax(0,1fr);grid-template-rows:150px 150px;overflow:hidden;
  background:linear-gradient(rgba(var(--accent-rgb),.085),rgba(var(--accent-rgb),.085)) 0 0 / 100% 50% no-repeat,linear-gradient(rgba(245,181,77,.085),rgba(245,181,77,.085)) 0 100% / 100% 50% no-repeat,var(--surface)}
.sw-l{display:flex;align-items:center;gap:11px;margin:0;padding:0 12px 0 30px;font-size:17px;font-weight:600;letter-spacing:-.012em;line-height:1.2}
.sw-l .mark{width:24px;height:24px}
.sw-l .ico{width:24px;height:24px}
.sw-l.l-auto{grid-area:1 / 1;color:var(--accent)}
.sw-l.l-team{grid-area:2 / 1;color:var(--amber)}
.sw-map{grid-area:1 / 2 / 3 / 3;position:relative}
.sw-map > svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sw-map .sw-tall{display:none}
.sw-map > svg path{fill:none;stroke-width:2.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.sw-map > svg .tr{stroke:rgba(226,236,244,.12)}
.sw-map > svg .lit .g{stroke:var(--accent);filter:drop-shadow(0 0 5px rgba(var(--accent-rgb),.75))}
.sw-map > svg .lit .a{stroke:var(--amber);stroke-dasharray:.1 7;filter:drop-shadow(0 0 5px rgba(245,181,77,.7))}
.sw-steps{position:relative;height:100%;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:1fr 1fr}
.sw-steps li{position:relative;grid-row:1;display:grid;place-items:center}
.sw-steps .s2{grid-column:2}.sw-steps .s4{grid-column:4}.sw-steps .s5{grid-column:5}
.sw-steps .s3{grid-row:2;grid-column:3}
.sw-steps .tb{width:60px;height:60px;border-radius:18px;background:linear-gradient(rgba(var(--accent-rgb),.24),rgba(var(--accent-rgb),.24)),#0c1114;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.45),0 0 30px -10px rgba(var(--accent-rgb),.6)}
.sw-steps .human .tb{background:linear-gradient(rgba(245,181,77,.24),rgba(245,181,77,.24)),#0c1114;color:#ffdd9f;box-shadow:inset 0 0 0 1.5px rgba(245,181,77,.75),0 0 30px -8px rgba(245,181,77,.65)}
.sw-steps b{position:absolute;left:50%;top:calc(50% + 39px);transform:translateX(-50%);font-size:16px;font-weight:500;letter-spacing:-.01em;line-height:1.2;white-space:nowrap}

/* ---------- 6. your team stays in control: three vignettes ---------- */
.vgs{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.vg{--gl:245,181,77;display:flex;flex-direction:column;padding:13px 13px 28px}
.vg-art{flex:1;min-height:292px;padding:22px 18px}
.vg h3{margin:24px 14px 0;font-size:21px;font-weight:500;letter-spacing:-.018em;line-height:1.25;text-wrap:balance}
/* a: the card a visitor can play */
.dcd{display:grid;gap:14px;width:100%;max-width:306px}
.dcd-tag{justify-self:start;display:inline-flex;align-items:center;gap:8px;margin:0;padding:6px 11px;border-radius:999px;background:rgba(245,181,77,.15);font:600 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}
.dcd-tag .ico{display:none}
.dcd-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 3px rgba(245,181,77,.2)}
.dcd .pp.rows{width:auto;transition:box-shadow .4s var(--ease)}
.dcd .pp p{margin:0}
.dcd .pp .rh{margin:1px 3px 6px}
.dcd .gr{transition:background-color .35s var(--ease),box-shadow .35s var(--ease),color .35s var(--ease)}
.dcd .gr .ico{display:none;width:18px;height:18px;stroke-width:2.6}
.dcd .stp{transition:background-color .35s var(--ease),color .35s var(--ease)}
.dcd.ok .pp.rows{box-shadow:inset 0 1px 0 #fff,0 22px 38px -18px #000,0 0 44px -10px rgba(var(--accent-rgb),.7)}
.dcd.ok .gr.ask{background:#c5f0dc;box-shadow:inset 0 0 0 1.5px #2fb57a;color:#0a5a3b}
.dcd.ok .gr.ask em{color:#0a5a3b}
.dcd.ok .gr .ico{display:block}
.dcd.ok .stp{background:#c5f0dc;color:#0a5a3b}
.dcd-q{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-width:0;min-height:88px;margin:0;padding:0;border:0}
.dcd-q legend{float:left;width:100%;grid-column:1 / -1;margin:0 0 2px;padding:0;font-size:17.5px;font-weight:600;letter-spacing:-.012em;line-height:1.3;color:var(--text)}
.dcd .opt{min-width:0;height:50px;padding:0 10px;border:0;border-radius:14px;background:rgba(245,181,77,.15);box-shadow:inset 0 0 0 1.5px rgba(245,181,77,.62),inset 0 1px 0 rgba(255,255,255,.08);font:600 15px/1.15 var(--sans);color:#ffe9c2;cursor:pointer;transition:background-color .25s var(--ease),transform .25s var(--ease)}
.dcd .opt:disabled{cursor:default}
.dcd .opt:not(:disabled):hover{background:rgba(245,181,77,.28)}
.dcd .opt:not(:disabled):active{transform:scale(.98)}
.dcd .opt:focus-visible,.dcd .again:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:14px}
.dcd-done{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:88px;margin:0}
.dcd .by{display:flex;align-items:center;gap:10px;font-size:15.5px;font-weight:500;line-height:1.3;color:var(--text)}
.dcd .by .ico{flex:none;width:36px;height:36px;padding:8px;border-radius:50%;background:rgba(245,181,77,.2);color:#ffdd9f;box-shadow:inset 0 0 0 1.5px rgba(245,181,77,.7)}
.dcd .again{flex:none;height:40px;padding:0 15px;border:1px solid var(--line-3);border-radius:999px;background:transparent;font:500 14px/1 var(--sans);color:var(--text);cursor:pointer}
.dcd .again:hover{border-color:var(--amber)}
/* b: the boundary: what the automation does | what stays with a person */
.bnd{display:grid;grid-template-columns:minmax(0,auto) auto minmax(0,auto);justify-content:center;align-items:stretch;width:100%}
.bnd .side{display:grid;align-content:start;justify-items:center;gap:16px;padding:4px 6px}
.bnd .sd-h{margin:0}
.bnd .nd,.bnd .av{width:54px;height:54px}
.bnd .nd .mark{width:27px;height:27px}
.bnd .av,.snd .av{display:grid;place-items:center;border-radius:50%;background:linear-gradient(rgba(245,181,77,.24),rgba(245,181,77,.24)),#0c1114;color:#ffdd9f;box-shadow:inset 0 0 0 1.5px rgba(245,181,77,.75),0 0 28px -6px rgba(245,181,77,.65)}
.bnd .av .ico{width:26px;height:26px}
.bnd ul{list-style:none;margin:0;padding:0;display:grid;justify-items:center;gap:8px}
.bnd li{padding:7px 12px;border-radius:999px;font-size:13.5px;font-weight:500;line-height:1.2;text-align:center}
.bnd .s-auto li{background:rgba(var(--accent-rgb),.14);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.42);color:#dff7ec}
.bnd .s-team li{background:rgba(245,181,77,.17);box-shadow:inset 0 0 0 1px rgba(245,181,77,.58);color:#ffe6b5}
.bnd .wall{position:relative;width:0;margin:0 14px;border-left:2px dashed rgba(226,236,244,.34)}
.bnd .wall::before{content:"";position:absolute;left:-7px;top:21px;width:12px;height:12px;border-radius:50%;background:#090c0f;box-shadow:inset 0 0 0 2px rgba(226,236,244,.5)}
/* c: a drafted message, and the send button that belongs to the person */
.snd{display:grid;justify-items:center;gap:20px;width:100%}
.snd .go{display:flex;align-items:center}
.snd .av{position:relative;z-index:1;width:46px;height:46px}
.snd .av .ico{width:22px;height:22px}
.snd .btn-s{display:inline-flex;align-items:center;gap:9px;height:42px;margin-left:-12px;padding:0 17px 0 24px;border-radius:0 999px 999px 0;background:var(--amber);font-size:15px;font-weight:600;line-height:1;color:var(--amber-ink);box-shadow:0 0 30px -6px rgba(245,181,77,.75)}
.snd .btn-s .ico{width:18px;height:18px}

/* ---------- 7. the systems you already have: the constellation ---------- */
/* Six tiles round the node. Their places p1 ... p6 match the lines that tools/gen-pages.js draws (CS_WIDE:
   viewBox 1000 x 400, CS_TALL: viewBox 300 x 420). Change them here and there together. */
.cs{height:400px;overflow:hidden;background:radial-gradient(460px 280px at 50% 50%,rgba(var(--accent-rgb),.13),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.042),rgba(255,255,255,0) 44%),var(--surface)}
.cs > svg{position:absolute;inset:0;width:100%;height:100%}
.cs .cs-tall{display:none}
.cs .wr{fill:none;stroke:rgba(226,236,244,.16);stroke-width:1.5;stroke-dasharray:3 7;vector-effect:non-scaling-stroke}
.cs .wr.lit{stroke:var(--accent);stroke-width:2.25;stroke-dasharray:none;filter:drop-shadow(0 0 5px rgba(var(--accent-rgb),.8))}
.cs-node{position:absolute;left:50%;top:50%;z-index:2;display:grid;place-items:center;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:29px;background:#0d1a16;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.5),inset 0 1px 0 rgba(255,255,255,.1),0 0 0 9px rgba(var(--accent-rgb),.05),0 0 70px -6px rgba(var(--accent-rgb),.6)}
.cs-node .mark{width:46px;height:46px}
.cs-node .glow{position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 2px var(--accent),0 0 40px 6px rgba(var(--accent-rgb),.6);opacity:0;pointer-events:none}
.cs-tiles{list-style:none;margin:0;padding:0}
.cs-tiles li{position:absolute;z-index:1;transform:translate(-50%,-50%);display:flex;align-items:center;gap:11px;height:54px;padding:0 18px 0 14px;border-radius:16px;background:#10161b;box-shadow:inset 0 0 0 1px var(--line),inset 0 1px 0 rgba(255,255,255,.04);font-size:15.5px;font-weight:500;line-height:1.2;white-space:nowrap;color:var(--faint)}
.cs-tiles .ico{width:23px;height:23px}
.cs-tiles li.lit{background:#0f211b;color:var(--text);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.62),inset 0 1px 0 rgba(255,255,255,.08),0 0 34px -8px rgba(var(--accent-rgb),.65)}
.cs-tiles li.lit .ico{color:var(--accent)}
.cs-tiles .p1{left:13%;top:50%}.cs-tiles .p2{left:87%;top:50%}
.cs-tiles .p3{left:21.5%;top:15.5%}.cs-tiles .p4{left:78.5%;top:15.5%}
.cs-tiles .p5{left:21.5%;top:84.5%}.cs-tiles .p6{left:78.5%;top:84.5%}
.cs-key{display:flex;margin:18px 4px 0;font-size:14.5px;line-height:1.3;color:var(--muted)}
.cs-key span{display:inline-flex;align-items:center;gap:10px}
.cs-key span::before{content:"";flex:none;width:16px;height:16px;border-radius:5px;background:#0f211b;box-shadow:inset 0 0 0 1.5px var(--accent),0 0 12px -2px rgba(var(--accent-rgb),.7)}

/* ---------- video: self-hosted, in the double frame of the home cards ---------- */
.uc-video{margin:0 auto;max-width:1040px}
.uc-video .core{overflow:hidden}
.uc-video video{display:block;width:100%;height:auto;aspect-ratio:16 / 9;background:#0d1115;border-radius:15px}
.uc-video figcaption{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:baseline;margin-top:16px;padding:0 6px;color:var(--muted);font-size:15.5px}
.uc-video .tag{font-size:11px;letter-spacing:.16em;color:var(--faint);border:1px solid var(--line-2);border-radius:6px;padding:4px 8px}

/* ---------- 8. cost: three steps on a rail ---------- */
/* The rail runs through the three nodes; a card hangs from each node. The numerals are the price keys of the
   home page (by reference, in the template); the pilot is the step that is lit. */
.crail{position:relative;list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.crail::before{content:"";position:absolute;left:58px;right:calc((100% - 32px) / 3 - 58px);top:27px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(var(--accent-rgb),.4),var(--accent) 50%,rgba(var(--accent-rgb),.4));box-shadow:0 0 10px rgba(var(--accent-rgb),.5);transform-origin:0 50%}
.cr{margin-top:76px;padding:30px 30px 30px}
.cr-n{position:absolute;left:30px;top:-76px;z-index:1;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:linear-gradient(rgba(var(--accent-rgb),.2),rgba(var(--accent-rgb),.2)),#0c1114;color:#eafff6;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.5),0 0 0 6px var(--bg),0 0 30px -6px rgba(var(--accent-rgb),.5)}
.sec.alt .cr-n{box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.5),0 0 0 6px var(--bg-2),0 0 30px -6px rgba(var(--accent-rgb),.5)}
.cr-n .ico{width:26px;height:26px}
/* the stem from a node down to its card (and, stacked on a phone, up to the card before it) */
.cr-n::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:20px;margin-left:-1px;background:linear-gradient(var(--accent),rgba(var(--accent-rgb),.35))}
.cr .when{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;min-height:24px;font:500 11px/1.3 var(--mono);letter-spacing:.14em;color:var(--faint)}
.cr .when .rtag{letter-spacing:.06em}
.cr h3{margin:10px 0 0;font-size:23px;font-weight:500;letter-spacing:-.02em;line-height:1.2}
.cr .price{margin:18px 0 16px;font-size:60px;font-weight:600;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums;color:var(--text)}
.cr .price small{margin-left:4px;font-size:16px;font-weight:400;letter-spacing:0;color:var(--muted)}
.cr .price small.from{margin:0 7px 0 0}
.cr .one{margin:0 0 20px;font-size:17px;line-height:1.45;color:var(--text)}
.cr ul{list-style:none;margin:0;padding:18px 0 0;border-top:1px solid var(--line);display:grid;gap:11px}
.cr ul li{display:flex;align-items:center;gap:11px;font-size:15.5px;line-height:1.3;color:var(--muted)}
.cr ul .ico{width:20px;height:20px;color:var(--accent)}
.cr.hot{background:radial-gradient(380px 260px at 50% 0%,rgba(var(--accent-rgb),.15),transparent 72%),linear-gradient(180deg,rgba(255,255,255,.042),rgba(255,255,255,0) 44%),var(--surface-2);
  box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.34),inset 0 1px 0 rgba(255,255,255,.08),0 0 90px -34px rgba(var(--accent-rgb),.55),0 44px 80px -52px #000}
.cr.hot .cr-n{background:var(--accent);color:var(--accent-ink);box-shadow:0 0 0 6px var(--bg),0 0 34px -2px rgba(var(--accent-rgb),.75)}
.sec.alt .cr.hot .cr-n{box-shadow:0 0 0 6px var(--bg-2),0 0 34px -2px rgba(var(--accent-rgb),.75)}
.uc-cost-foot{display:flex;justify-content:space-between;align-items:center;gap:24px 40px;margin-top:36px}
.pg-uc .uc-cost-foot .vat{margin:0}
.uc-cost-foot .btn{flex:none}

/* ---------- questions: an accordion of <details>, closed by default; only the questions show ---------- */
.qas{display:grid;gap:12px}
.qa{border-radius:20px}
.qa summary{display:flex;align-items:center;gap:16px;padding:16px 22px 16px 16px;border-radius:inherit;list-style:none;font-size:18.5px;font-weight:500;letter-spacing:-.012em;line-height:1.35;cursor:pointer}
.qa summary::-webkit-details-marker{display:none}
.qa summary .tb{width:46px;height:46px;border-radius:14px}
.qa summary .tb .ico{width:23px;height:23px}
.qa summary .q{flex:1;min-width:0;text-wrap:pretty}
.qa summary > .ico{width:24px;height:24px;color:var(--muted);transition:transform .35s var(--ease)}
.qa[open] summary > .ico{transform:rotate(180deg)}
.qa summary:hover > .ico{color:var(--text)}
.qa summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.qa p{margin:0;padding:2px 28px 24px 78px;max-width:46em;font-size:16px;line-height:1.6;color:var(--muted);text-wrap:pretty}

/* ---------- the form block: what happens next, as three steps on a short rail ---------- */
.nxt{list-style:none;margin:34px 0 0;padding:0;display:grid}
.nxt li{position:relative;display:grid;grid-template-columns:54px minmax(0,1fr);grid-template-rows:auto auto;column-gap:18px;align-content:center;padding-bottom:22px}
.nxt li .tb{grid-row:1 / 3;width:54px;height:54px;border-radius:17px;background:linear-gradient(rgba(var(--accent-rgb),.2),rgba(var(--accent-rgb),.2)),var(--surface)}
.nxt li .tb .ico{width:26px;height:26px}
.nxt li b{align-self:end;font-size:18.5px;font-weight:500;letter-spacing:-.012em;line-height:1.3;color:var(--text)}
.nxt li > span:last-child{align-self:start;font-size:15.5px;line-height:1.4;color:var(--muted)}
.nxt li:not(:last-child)::before{content:"";position:absolute;left:26px;top:58px;bottom:4px;width:2px;border-radius:2px;background:linear-gradient(var(--accent),rgba(var(--accent-rgb),.25))}
.final .copy > p.nxt-free{display:inline-flex;align-items:center;gap:10px;margin:8px 0 0;padding:9px 16px 9px 10px;border-radius:999px;background:rgba(var(--accent-rgb),.11);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.16);font-size:15.5px;line-height:1.3;color:var(--text)}
.nxt-free .ico{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--accent);color:var(--accent-ink);stroke-width:2.6}

/* ---------- placeholders for the nine new kinds (to be replaced by designed pictures) ----------
   Scenes forgotten, gap, interrupt, mismatch, scattered; miniatures assign, collect, compare, listen
   (templates/partials/uc-scene-<kind>.html, uc-part-<kind>.html). STATIC and honest compositions from the mock
   objects above (.mm, .pp, .ln, .who, .gr), every class of their own starting with ph-, so the motion of the designed
   kinds never reaches them. When a kind gets its designed picture, its rules here go. */
.ph{position:relative;display:flex;align-items:center;justify-content:center;gap:12px}
.ph .ico{flex:none}
/* forgotten: newer messages with a name above, the sunk one without */
.ph-fgt{display:grid;justify-content:stretch;gap:6px;width:min(236px,84%);padding:12px;border-radius:14px;background:#11171c;box-shadow:inset 0 0 0 1px var(--line-2),0 20px 34px -18px #000}
.ph-row{display:flex;align-items:center;gap:8px;height:25px;padding:0 8px;border-radius:7px;background:rgba(226,236,244,.055)}
.ph-row > .ico{width:16px;height:16px}
.ph-row .ln{flex:none}
.ph-av{display:grid;place-items:center;width:17px;height:17px;margin-left:auto;border-radius:50%;background:rgba(226,236,244,.2);color:var(--text)}
.ph-av .ico{width:11px;height:11px;stroke-width:2.2}
.ph-lost{margin-top:16px;background:rgba(240,110,96,.15);box-shadow:inset 0 0 0 1px rgba(240,110,96,.5)}
.ph-none{flex:none;width:17px;height:17px;margin-left:auto;border-radius:50%;border:1.5px dashed #f19a8f}
.ph-mark{position:absolute;right:-14px;bottom:-14px;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#3b1f1c;color:#ffe0db;box-shadow:inset 0 0 0 1px rgba(240,110,96,.55),0 0 26px -6px rgba(240,110,96,.7)}
.ph-mark .ico{width:20px;height:20px}
/* gap: filled slots, one empty */
.art .ph-slots{grid-template-columns:repeat(4,38px);gap:8px;padding:13px}
.ph-slot{display:block;height:32px;border-radius:8px;background:rgba(16,23,27,.17)}
.ph-slot.ph-open{background:#fbe9e6;border:1.5px dashed #c9534a;box-shadow:0 0 0 4px rgba(240,110,96,.2)}
/* interrupt: the work stands still, the same question three times */
.ph-int{gap:11px}
.art .ph-work{width:100px;opacity:.6}
.ph-me{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:rgba(240,110,96,.26);color:#ffe4df;box-shadow:inset 0 0 0 1px rgba(240,110,96,.45)}
.ph-me .ico{width:25px;height:25px}
.ph-asks{display:grid;gap:6px}
.art .ph-ask{display:flex;align-items:center;gap:7px;width:78px;padding:6px 9px;border-radius:10px}
.art .ph-ask > .ico{width:18px;height:18px}
.ph-ask .ln{flex:1}
.ph-ask:nth-child(2){margin-left:9px}
.ph-ask:nth-child(3){margin-left:18px}
/* mismatch (muted red) and compare (ticks, amber): two documents, one line differs */
.ph-cmp{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:8px;width:min(304px,92%)}
.art .ph-doc{gap:8px;padding:11px 10px}
.art .ph-doc > em{font-weight:600;overflow-wrap:anywhere}
.ph-val{padding:4px 7px;border-radius:6px;font-size:12.5px;font-weight:600;line-height:1.25;overflow-wrap:anywhere}
.ph-red .ph-val{background:#f8d6d1;box-shadow:inset 0 0 0 1.5px #c9534a;color:#5a1a14}
.ph-amb .ph-val{background:#fdeccb;box-shadow:inset 0 0 0 1.5px #b8780c;color:#5c3a00}
.ph-mid{align-self:center;display:grid;place-items:center;width:26px;height:26px;border-radius:50%}
.ph-mid .ico{width:15px;height:15px;stroke-width:2.4}
.ph-red .ph-mid{background:#3b1f1c;color:#ffe0db;box-shadow:inset 0 0 0 1px rgba(240,110,96,.55)}
.ph-amb .ph-mid{align-self:end;margin-bottom:11px;background:var(--amber);color:var(--amber-ink);box-shadow:0 0 24px -4px rgba(245,181,77,.85)}
.ph-eq{display:flex;align-items:center;justify-content:space-between;gap:6px;height:15px}
.ph-eq .ln{flex:none}
.ph-eq .ico{width:13px;height:13px;stroke-width:2.6;color:#0f7a52}
/* scattered: four small windows, one piece in each */
.ph-sct{display:grid;grid-template-columns:repeat(2,104px);gap:12px 18px}
.art .ph-win{gap:8px;padding:10px;border-radius:11px}
.art .ph-win > .ico{width:18px;height:18px;color:var(--muted)}
.ph-bit{display:block;height:9px;border-radius:4px;background:rgba(240,110,96,.6);box-shadow:0 0 12px -2px rgba(240,110,96,.7)}
.ph-win:nth-child(1){rotate:-3deg}.ph-win:nth-child(1) .ph-bit{width:38%}
.ph-win:nth-child(2){translate:0 7px;rotate:2deg}.ph-win:nth-child(2) .ph-bit{width:58%;margin-left:auto}
.ph-win:nth-child(3){translate:5px 0;rotate:2deg}.ph-win:nth-child(3) .ph-bit{width:48%;margin-left:22%}
.ph-win:nth-child(4){translate:0 6px;rotate:-2deg}.ph-win:nth-child(4) .ph-bit{width:30%}
/* assign: a task card, its owner and its date, open to done */
.ph-asg{display:grid;justify-items:center;gap:13px}
.art .ph-task{gap:9px;width:214px;padding:14px}
.ph-track{display:flex;align-items:center;gap:6px;margin-top:5px}
.ph-st{flex:none;display:grid;place-items:center;width:15px;height:15px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(16,23,27,.34)}
.ph-bar{flex:1;height:2px;border-radius:2px;background:rgba(16,23,27,.2)}
.ph-st.ph-done{width:22px;height:22px;background:#0f7a52;color:#fff;box-shadow:none}
.ph-done .ico{width:13px;height:13px;stroke-width:3}
.ph-meta{display:flex;align-items:center;gap:9px}
.ph-date{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 11px;border-radius:999px;background:#141b21;color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2)}
.ph-date .ico{width:19px;height:19px}
.ph-date .ln{width:32px}
/* collect: small sources into one list */
.ph-col{gap:0}
.ph-feeds{display:grid;gap:8px}
.ph-feed{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#141b21;color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2),0 12px 22px -14px #000}
.ph-feed .ico{width:21px;height:21px}
.ph-flow{flex:none;position:relative;display:block;width:44px;height:2.5px;margin:0 13px 0 8px;border-radius:2px;background:var(--accent);box-shadow:0 0 9px rgba(var(--accent-rgb),.7)}
.ph-flow::after{content:"";position:absolute;right:-2px;top:-4.75px;border-left:9px solid var(--accent);border-top:6px solid transparent;border-bottom:6px solid transparent}
.art .ph-list{gap:7px;width:170px;padding:12px}
.ph-li{display:flex;align-items:center;justify-content:space-between;gap:8px;height:23px;padding:0 7px;border-radius:6px;background:rgba(16,23,27,.065)}
.ph-li .ln{flex:none}
.ph-li .ico{width:14px;height:14px;stroke-width:2.6;color:#0f7a52}
.ph-li.ph-next{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(16,23,27,.15)}
/* listen: a voice, then the rows of the record */
.ph-lis{display:grid;justify-items:center;gap:13px}
.ph-voice{display:flex;align-items:center;gap:11px}
.ph-mic{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:rgba(var(--accent-rgb),.22);color:#eafff6;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.45),0 0 30px -8px rgba(var(--accent-rgb),.6)}
.ph-mic .ico{width:23px;height:23px}
.ph-wave{display:flex;align-items:center;gap:4px;height:34px}
.ph-wave i{width:4px;height:40%;border-radius:2px;background:var(--accent)}
.ph-wave i:nth-child(2){height:75%}.ph-wave i:nth-child(3){height:100%}.ph-wave i:nth-child(4){height:55%}.ph-wave i:nth-child(5){height:85%}.ph-wave i:nth-child(6){height:35%}
.ph-wave i:nth-child(7){height:65%}.ph-wave i:nth-child(8){height:95%}.ph-wave i:nth-child(9){height:45%}.ph-wave i:nth-child(10){height:70%}.ph-wave i:nth-child(11){height:30%}
.ph-lis .pp.rows{width:238px}
@media (min-width:861px) and (max-width:1100px){.scn-art > .ph{scale:.8}} /* three scenes side by side on a tablet */

/* ---------- fixes for the longer texts of the 21 new pages (base styles, outside the motion block) ---------- */
/* the card a visitor can play: the grid column took the width of its widest row and pushed the card 5px out */
.dcd{grid-template-columns:minmax(0,1fr)}
/* ...and a long answer line ("Beslist door uw vestigingsmanager") wraps, the button goes under it when it must */
.dcd-done{flex-wrap:wrap}
.dcd .by{flex:1 1 170px;min-width:0}
.dcd .by-t{min-width:0;overflow-wrap:anywhere;hyphens:auto}
/* the swimlane on a phone: a long role in the team lane ("Uw kwaliteitsmedewerker") wraps and hyphenates, it is not cut */
@media (max-width:760px){
  div.sw{grid-template-rows:minmax(56px,auto) 480px}
  .sw .sw-l.l-team{flex-direction:column;gap:3px;padding:8px 4px;text-align:center;font-size:13.5px;overflow-wrap:anywhere;hyphens:auto}
  .sw .sw-l.l-team .ico{width:20px;height:20px}
}

/* ---------- cards: the hub and "more examples": a picture, the headline, ONE line ---------- */
.uc-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:56px}
.uc-cards-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.uc-cards-1{grid-template-columns:minmax(0,600px)}
.uc-card{position:relative;min-width:0;display:flex;flex-direction:column;align-items:stretch;padding:13px 13px 22px;border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.042),rgba(255,255,255,0) 44%),var(--surface);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 44px 80px -52px #000,0 16px 30px -22px rgba(0,0,0,.8);transition:box-shadow .35s var(--ease),background-color .35s var(--ease)}
.uc-card:hover{background-color:var(--surface-2);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.4),inset 0 1px 0 rgba(255,255,255,.07),0 0 60px -24px rgba(var(--accent-rgb),.55),0 44px 80px -52px #000}
.uc-card:has(a:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
/* the small picture: the page's hero in small. What comes in (coloured icons, stacked), AIstap, and the page's
   own prepared record on a light card: title with the icon of where it lands, status, the one open question */
.uc-pic{display:flex;align-items:center;min-height:168px;padding:16px;border-radius:17px;background:radial-gradient(260px 130px at 50% 50%,rgba(var(--accent-rgb),.14),transparent 72%),#090c0f;box-shadow:inset 0 0 0 1px rgba(226,236,244,.05)}
.pc-src{flex:none;display:grid;gap:7px}
.pc-src .ico{width:28px;height:28px;filter:drop-shadow(0 8px 10px rgba(0,0,0,.5))}
.uc-pic .ar{flex:0 1 22px;min-width:12px;margin:0 9px 0 6px;box-shadow:0 0 8px rgba(var(--accent-rgb),.6)}
.pc-node{width:42px;height:42px}
.pc-node .mark{width:21px;height:21px}
.pc-rec{flex:1 1 0;min-width:0;display:grid;justify-items:start;gap:7px;padding:11px 11px 10px;border-radius:13px;background:var(--paper);color:var(--paper-ink);box-shadow:inset 0 1px 0 #fff,0 16px 26px -14px #000}
.pr-h{display:flex;align-items:flex-start;gap:7px;font-size:12.5px;font-weight:600;letter-spacing:-.01em;line-height:1.28;text-wrap:balance}
.pr-h .ico{width:16px;height:16px}
.pr-h b{font-weight:inherit;min-width:0;overflow-wrap:anywhere}
.pc-rec .stp{font-size:10.5px;padding:4px 7px}
.pr-q{justify-self:stretch;display:flex;flex-wrap:wrap;align-items:baseline;gap:1px 7px;padding:5px 8px;border-radius:8px;background:#fdeccb;box-shadow:inset 0 0 0 1.5px #b8780c;font-size:11.5px;line-height:1.3;color:#5c3a00}
.pr-q em{font-style:normal;color:#6a4300}
.pr-q b{font-weight:600;font-variant-numeric:tabular-nums}
.uc-card h3{margin:24px 9px 8px;font-size:21.5px;font-weight:500;letter-spacing:-.018em;line-height:1.25;overflow-wrap:break-word;text-wrap:balance}
.uc-card h3 a{color:inherit;text-decoration:none}
.uc-card h3 a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit} /* the whole card is the link */
.uc-card h3 a:focus-visible{outline:none}
.uc-card .hook{margin:0 9px 22px;color:var(--muted);font-size:15.5px;line-height:1.5;text-wrap:pretty}
.uc-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:auto 9px 0}
/* the small round AIstap node and a short green arrow (the picture on a card) */
.pc-node{flex:none;display:grid;place-items:center;border-radius:50%;background:#0d1a16;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.45),0 0 26px -4px rgba(var(--accent-rgb),.5)}
.ar{flex:none;position:relative;display:block;width:34px;height:2px;margin:0 9px 0 6px;border-radius:2px;background:var(--accent)}
.ar::after{content:"";position:absolute;right:-6px;top:-4px;border-left:7px solid var(--accent);border-top:5px solid transparent;border-bottom:5px solid transparent}
.uc-chip{padding:5px 10px;border-radius:999px;background:rgba(226,236,244,.07);font:500 12px/1.2 var(--mono);color:var(--muted);white-space:nowrap}
.uc-chips .more{margin-left:auto;color:var(--accent);transition:transform .3s var(--ease)}
.uc-chips .more .ico{width:22px;height:22px}
/* the hub, grouped by theme (only once a theme has three or more use cases) */
.uc-jump ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:44px 0 0;padding:0}
.uc-jump a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 15px;border:1px solid var(--line-2);border-radius:999px;font-size:14.5px;color:var(--text);text-decoration:none;transition:border-color .3s var(--ease),background-color .3s var(--ease)}
.uc-jump a:hover{border-color:rgba(var(--accent-rgb),.42);background:rgba(var(--accent-rgb),.06)}
.uc-jump .n,.uc-group h3 .n{font:500 11.5px/1 var(--mono);color:var(--faint)}
.uc-group{padding-top:52px;scroll-margin-top:20px}
.uc-group > h3{display:flex;align-items:baseline;gap:10px;margin:0;padding-bottom:16px;border-bottom:1px solid var(--line-2);font-size:24px;font-weight:500;letter-spacing:-.02em;line-height:1.2}
.uc-group .uc-cards{margin-top:16px}
.pg-uc .rows-foot{margin-top:44px}
/* the hub hero: a longer headline, the same diagram */
.uc-hub .wrap{padding-top:68px;padding-bottom:76px}
.uc-hub .lede{max-width:31em}

/* home, section "Herkent u dit?": one link per row to its use case, and one to the hub */
.row-link{display:block;margin-top:16px;font-size:15px;line-height:1.5}
.row-link a{color:var(--text);text-decoration:underline;text-decoration-color:var(--line-3);text-decoration-thickness:1px;text-underline-offset:5px;transition:text-decoration-color .3s var(--ease)}
.row-link a:hover{text-decoration-color:var(--accent)}
.row-link .arr{color:var(--accent)} /* stays inline: with the nbsp before it, it wraps together with the last word */
.rows-more{margin:28px 0 0}

/* ==================================================================================================
   USE-CASE MOTION. The language, the contract and how to write a story: templates/usecases/MOTION.md.
   Six regions, each between its own ">>> [X]" line and "<<< [X]" line, one owner per region:
     [E] engine   [H1] hero + thread   [H2] page-wide   [M1] mini-scenes + panels
     [M2] bento + instrument   [M3] swimlane + vignettes + constellation
   Work inside your own region only (it may hold plain rules and its own narrow-screen blocks too), and
   leave the three lines between two regions as they are: they let git merge the work of two neighbours.
   Every rule that moves something stands inside prefers-reduced-motion: no-preference and behind .uc-js
   (set by /usecase.js only when stories can play), so without JavaScript, with reduced motion or in an
   old browser every module simply shows its finished picture: the static markup.
   ================================================================================================== */

/* >>> [E] ENGINE: tokens, beats, what the engine adds to a module, shared keyframes ---------------- */
@property --uc-n{syntax:"<integer>";inherits:true;initial-value:0} /* the figure of the helper "count" */
.pg-uc{
  --e-out:cubic-bezier(.2,.8,.2,1);   /* the long ease-out: everything that arrives or settles */
  --e-fly:cubic-bezier(.5,0,.2,1);    /* a flight: a slow lift-off, a long landing */
  --e-io:cubic-bezier(.6,0,.3,1);     /* there and back: a lens, a turn, a scan */
  --e-press:cubic-bezier(.3,0,.2,1);  /* a press: down at once, up slowly (keyframes ucPress) */
  --t-rise:.55s;   /* something comes in */
  --t-pop:.45s;    /* a small thing appears on the spot */
  --t-fly:.95s;    /* a flight from A to B */
  --t-run:1.1s;    /* a dot along a connector */
  --t-step:.21s;   /* the stagger between two things of one story */
}
/* The three beats of a story, in seconds from its start: 1 something arrives, 2 something is done to it,
   3 the result. A story sets its own three numbers on its module (in its owner's region, after this line) and
   writes every delay as calc(var(--bN) + ...). The engine reads them too: the next module in the queue starts
   when this one enters beat 3. Plain values in seconds, no calc(). */
[data-play]{--b1:0s;--b2:.7s;--b3:1.5s}
/* a copy the engine lets travel (helper "fly" with ghost or trail, "dot" with trail): only there while it flies */
.uc-ghost{opacity:0;pointer-events:none;z-index:6;animation:none!important;transition:none!important}
.uc-ghost *,.uc-ghost::before,.uc-ghost::after{animation:none!important}
.uc-echo{filter:blur(.7px)}
/* helper "count", only while a figure counts: its own text steps aside (a screen reader still reads it) and the
   counting figure stands in its place, in the same size and the same width (the engine hands those over) */
.uc-cnt{font-size:0!important}
.uc-cnt::after{content:counter(ucn);content:counter(ucn) / "";counter-reset:ucn var(--uc-n);display:inline-block;min-width:var(--uc-w);font-size:var(--uc-fs);letter-spacing:var(--uc-ls)}
/* the quiet sign that a story can be played again: only under a mouse, only once the story has ended */
.uc-re{position:absolute;right:10px;top:10px;z-index:7;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(226,236,244,.09);color:var(--muted);opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
.art > .uc-re{scale:1}
.uc-re svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.uc-js [data-play].done:hover .uc-re{opacity:.85}}
@media (prefers-reduced-motion: no-preference){
  /* A module waits on its first frame until the engine starts it (.on): every animation inside is paused.
     Keyframes only have a START pose, so a story ends on the element's own style: the finished picture. They move
     with translate / scale / rotate (not transform), so they never fight an element's own transform or the page
     reveal (.rv). */
  .uc-js [data-play]:not(.on) *,.uc-js [data-play]:not(.on) *::before,.uc-js [data-play]:not(.on) *::after,
  .uc-js [data-play]:not(.on)::before,.uc-js [data-play]:not(.on)::after{animation-play-state:paused!important}
  /* what the script brings in (a flight to its own place) carries data-fly: not there until the story starts */
  .uc-js [data-play]:not(.on) [data-fly]{opacity:0}
  /* .uc-rst: for one instant, inside one task, the module stands in its finished picture: the engine measures the
     flights there and every CSS animation starts again from its first frame (first play and replay) */
  .uc-rst *,.uc-rst *::before,.uc-rst *::after,.uc-rst::before,.uc-rst::after{animation:none!important}
  @keyframes ucRise{from{opacity:0;translate:0 12px}}
  @keyframes ucDrop{from{opacity:0;translate:0 -12px}}
  @keyframes ucFade{from{opacity:0}}
  @keyframes ucPop{from{opacity:0;scale:.3}}
  @keyframes ucGrowX{from{scale:0 1}}
  @keyframes ucGrowY{from{scale:1 0}}
  @keyframes ucHit{50%{scale:1.1;box-shadow:inset 0 0 0 1.5px var(--accent),0 0 46px -4px rgba(var(--accent-rgb),.95)}}
  @keyframes ucAns{50%{scale:1.14;box-shadow:inset 0 0 0 2px var(--amber),0 0 0 8px rgba(245,181,77,.16),0 0 52px 0 rgba(245,181,77,.95)}}
  @keyframes ucRing{0%{opacity:0;scale:.92}40%{opacity:1}100%{opacity:0;scale:1.22}}
  @keyframes ucFlash{0%{opacity:0}30%{opacity:1}100%{opacity:0}}            /* an overlay that lights once */
  @keyframes ucBeat{45%{scale:1.08}}                                         /* one soft pulse: "this one" */
  @keyframes ucPress{0%{scale:1}28%{scale:.93}100%{scale:1}}                 /* a press, with --e-press */
  @keyframes ucPd{0%{translate:calc(-100% + 9px) 0;opacity:0}15%{opacity:1}85%{opacity:1}100%{translate:0 0;opacity:0}} /* the dot of .wire > .pd */
  @keyframes ucShake{0%,100%{rotate:0deg}20%{rotate:-15deg}40%{rotate:13deg}60%{rotate:-9deg}80%{rotate:6deg}}
}
/* <<< [E] ENGINE ---------------------------------------------------------------------------------- */
/* .                                                                                                 */
/* .   (three lines that nobody edits: the seam between two regions)                                  */
/* .                                                                                                 */
/* >>> [H1] HERO + THREAD --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  /* the diagram fades in like the home demo, so the first frame of the storyboard never flashes */
  .uc-hero .hd{animation:hin 1.2s var(--ease) .18s both}
}
/* <<< [H1] HERO + THREAD --------------------------------------------------------------------------- */
/* .                                                                                                 */
/* .   (three lines that nobody edits: the seam between two regions)                                  */
/* .                                                                                                 */
/* >>> [H2] PAGE-WIDE: headlines, section ambience, pointer response, price rail, questions, form steps, cards */
.crail{--b1:0s;--b2:.35s;--b3:1.25s} /* version-4 timing: its delays are not written from the beats yet */
@media (prefers-reduced-motion: no-preference){
  .uc-card:hover .more{transform:translateX(3px)}
  /* a soft lift under the pointer for the tiles a visitor can touch */
  .js .rv:is(.scn,.bt,.vg,.uc-card){transition:opacity .9s var(--ease),transform .9s var(--ease),translate .4s var(--ease),box-shadow .35s var(--ease),background-color .35s var(--ease)}
  @media (hover:hover){:is(.bt,.vg,.uc-card):hover{translate:0 -3px}}
  .qa[open] p{animation:ucRise .45s var(--ease) both}
  /* the price rail draws itself, the three nodes land on it */
  .uc-js .crail[data-play]::before{animation:ucGrowX 1.3s var(--ease) .3s both}
  .uc-js .crail[data-play] .cr-n{animation:ucPop .5s var(--ease) .35s both}
  .uc-js .crail[data-play] .cr:nth-child(2) .cr-n{animation-delay:.8s}
  .uc-js .crail[data-play] .cr:nth-child(3) .cr-n{animation-delay:1.25s}
}
/* <<< [H2] PAGE-WIDE ------------------------------------------------------------------------------- */
/* .                                                                                                 */
/* .   (three lines that nobody edits: the seam between two regions)                                  */
/* .                                                                                                 */
/* >>> [M1] MINI-SCENES ("Herkent u dit?") + THE TWO PANELS ------------------------------------------ */
.scn{--b1:0s;--b2:.7s;--b3:1.5s}     /* version-4 timing: the delays of the other scenes are not written from the beats yet */
.tiles{--b1:0s;--b2:1.2s;--b3:2.2s}  /* version-4 timing */
@media (prefers-reduced-motion: no-preference){
  /* the mini-scenes (version 4, except "retype" below) */
  @keyframes scFan{0%{opacity:0;transform:translateY(10px)}38%{opacity:1;transform:none}}
  @keyframes scMark{from{background-color:transparent;color:var(--text)}}
  @keyframes scCirc{from{opacity:0;scale:1.9}}
  @keyframes scLens{0%{opacity:0;translate:0 -78px}16%{opacity:1}}
  @keyframes scFound{from{background-color:rgba(16,23,27,.075);box-shadow:inset 0 0 0 1.5px transparent;color:transparent}}
  @keyframes scWave{0%{opacity:0;scale:.82}60%{opacity:1}}
  @keyframes scTurn{from{rotate:-360deg}}
  @keyframes scGone{from{color:var(--text);border-color:rgba(226,236,244,.75);background-color:rgba(226,236,244,.12)}}
  .uc-js .scn .fan .fc{animation:scFan 1s var(--ease) .15s both}
  .uc-js .scn .fan .f1{animation-delay:.3s}.uc-js .scn .fan .f3{animation-delay:.42s}
  .uc-js .scn .duo > :first-child{animation:ucRise .55s var(--ease) .1s both}
  .uc-js .scn .duo > :last-child{animation:ucRise .55s var(--ease) .3s both}
  .uc-js .scn .hop{transform-origin:0 50%;animation:ucGrowX .5s var(--ease) .8s both}
  .uc-js .scn .mm .hl{animation:scMark .5s var(--ease) .65s both}
  .uc-js .scn .circ{animation:scCirc .5s var(--ease) 1.5s both}
  .uc-js .scn .pile .pr{animation:ucDrop .45s var(--ease) .15s both}
  .uc-js .scn .pile .p2{animation-delay:.4s}.uc-js .scn .pile .p3{animation-delay:.65s}.uc-js .scn .pile .p4{animation-delay:.9s}.uc-js .scn .pile .p5{animation-delay:1.15s}
  .uc-js .scn .badge{animation:ucPop .5s var(--ease) 1.5s both}
  .uc-js .scn .look .pp{animation:ucRise .55s var(--ease) .1s both}
  .uc-js .scn .look .lens{animation:scLens 1.5s cubic-bezier(.5,0,.3,1) .4s both}
  .uc-js .scn .look .lr.hit{animation:scFound .45s var(--ease) 1.75s both}
  .uc-js .scn-chase .ring .ico{animation:ucShake .55s ease-in-out .4s 3 both}
  .uc-js .scn-chase .wv{animation:scWave .7s var(--ease) .5s both}
  .uc-js .scn-chase .wv.w2{animation-delay:.75s}
  .uc-js .scn-chase .hop{animation-delay:1.9s}
  .uc-js .scn-chase .duo > :last-child{animation-delay:.2s}
  .uc-js .scn-late .badge{animation:ucPop .5s var(--ease) .6s both}
  .uc-js .scn-late .badge .ico{animation:scTurn 1.6s cubic-bezier(.6,0,.3,1) 1s both}
  .uc-js .scn-late .gone{animation:scGone 1.1s var(--ease) 1.5s both}
  .uc-js .scn-late .hop{animation-delay:2.4s}

  /* EXEMPLAR, scene "retype" (the pattern for every story; walked through in MOTION.md).
       beat 1  the mail arrives from the left, the form of the system is there; one value in the mail is marked
       beat 2  a copy of that value lifts off the mail, travels over an arc and lands on the edge of the form (the
               helper fly with a ghost, in /usecase.js); under it the value is typed, letter by letter (helper type)
       beat 3  the note is gone, the form holds the value; the two same values answer each other once
     Every delay is a beat plus a little; the flight and the typing are measured and made in /usecase.js [M1]. */
  .scn-retype{--b1:0s;--b2:1.15s;--b3:3.4s}
  @keyframes scIn{from{opacity:0;translate:-44px 0;scale:.94}}
  .scn-retype .duo > .mm{z-index:1} /* the travelling copy lives in the mail and must pass OVER the form */
  .uc-js .scn-retype .duo > .mm{animation:scIn .7s var(--e-out) calc(var(--b1) + .05s) both}
  .uc-js .scn-retype .duo > .pp{animation:ucFade .5s var(--e-out) var(--b1) both}
  .uc-js .scn-retype .mm .hl{animation:scMark .4s var(--e-out) calc(var(--b1) + .6s) both,ucBeat .6s var(--e-out) calc(var(--b3) + .1s) both}
  .uc-js .scn-retype .hop{animation:ucGrowX .7s var(--e-out) calc(var(--b2) + .2s) both}
  .uc-js .scn-retype .inp{animation:ucBeat .6s var(--e-out) calc(var(--b3) + .1s) both}

  /* the panels: the tiles come in one by one; in the green row ONE dot then travels from the first tile to
     the last, each tile answers as it passes and the amber one answers the loudest */
  @keyframes ucRunX{0%{translate:calc(-100% + 11px) 0;opacity:0}6%{opacity:1}94%{opacity:1}100%{translate:0 0;opacity:0}}
  @keyframes ucRunY{0%{translate:0 calc(-100% + 11px);opacity:0}6%{opacity:1}94%{opacity:1}100%{translate:0 0;opacity:0}}
  .uc-js .tiles[data-play] .tl > *{animation:ucRise .5s var(--ease) calc(var(--i,0)*.16s) both}
  .uc-js .tiles[data-play] .tl::before,.uc-js .tiles[data-play] .tl::after{animation:ucFade .4s var(--ease) calc(var(--i,0)*.16s + .12s) both}
  .uc-js .tiles-run[data-play]::after{animation:ucRunX calc((var(--n) - 1)*.55s) linear 1.5s both}
  .uc-js .tiles-run[data-play] .tl .tb{animation:ucRise .5s var(--ease) calc(var(--i,0)*.16s) both,ucHit .7s var(--ease) calc(1.2s + var(--i,0)*.55s) both}
  .uc-js .tiles-run[data-play] .tl.human .tb{animation-name:ucRise,ucAns;animation-duration:.5s,1s}
  .uc-js .tiles-run[data-play] .tl .who{animation:ucPop .5s var(--ease) calc(1.75s + var(--i,0)*.55s) both}
  @media (max-width:860px){.uc-js .tiles-run[data-play]::after{animation-name:ucRunY}}
}
/* <<< [M1] MINI-SCENES + PANELS -------------------------------------------------------------------- */
/* .                                                                                                 */
/* .   (three lines that nobody edits: the seam between two regions)                                  */
/* .                                                                                                 */
/* >>> [M2] BENTO MINIATURES ("Wat AIstap kan bouwen") + THE INSTRUMENT ------------------------------ */
.bt{--b1:0s;--b2:.8s;--b3:1.7s} /* version-4 timing: the delays of the other miniatures are not written from the beats yet */
@media (prefers-reduced-motion: no-preference){
  /* the miniatures (version 4, except "read" below) */
  @keyframes btLit{from{background-color:rgba(226,236,244,.055);box-shadow:inset 0 0 0 1px transparent;color:var(--text)}}
  @keyframes btAsk{from{background-color:rgba(16,23,27,.05);box-shadow:inset 0 0 0 1.5px transparent}}
  @keyframes btLens{0%{opacity:0;translate:0 -78px}16%{opacity:1}}
  @keyframes btFound{from{background-color:rgba(16,23,27,.075);box-shadow:inset 0 0 0 1.5px transparent;color:transparent}}
  .uc-js .bt .mbx .ir{animation:ucRise .45s var(--ease) .1s both}
  .uc-js .bt .mbx .ir:nth-of-type(3){animation-delay:.2s}.uc-js .bt .mbx .ir:nth-of-type(4){animation-delay:.3s}
  .uc-js .bt .mbx .ir.lit{animation:ucRise .45s var(--ease) .2s both,btLit .5s var(--ease) .8s both}
  .uc-js .bt .wire{transform-origin:0 50%;animation:ucGrowX .5s var(--ease) 1.2s both}
  .uc-js .bt .pd{animation:ucPd .7s linear 1.65s both}
  .uc-js .bt .mbx .nd{animation:ucHit .8s var(--ease) 2.1s both}
  .uc-js .bt .chk .cv{animation:ucRise .5s var(--ease) .1s both}
  .uc-js .bt .chk .cv:last-child{animation-delay:.35s}
  .uc-js .bt .chk .neq{animation:ucPop .5s var(--ease) .9s both}
  .uc-js .bt .chk .pp{animation:ucRise .5s var(--ease) .1s both}
  .uc-js .bt .chk .gr.ask{animation:btAsk .5s var(--ease) .8s both}
  .uc-js .bt .down{transform-origin:50% 0;animation:ucGrowY .45s var(--ease) 1.35s both}
  .uc-js .bt .chk .who{animation:ucRise .5s var(--ease) 1.7s both}
  .uc-js .bt .prp .pp{animation:ucRise .5s var(--ease) .1s both}
  .uc-js .bt .prp .gr{animation:ucFade .4s var(--ease) .5s both}
  .uc-js .bt .prp .gr:nth-of-type(3){animation-delay:.7s}.uc-js .bt .prp .gr:nth-of-type(4){animation-delay:.9s}
  .uc-js .bt .prp .stp{animation:ucPop .5s var(--ease) 1.25s both}
  .uc-js .bt .prp .lock{animation:ucPop .55s var(--ease) 1.7s both}
  .uc-js .bt .clc .pp{animation:ucRise .5s var(--ease) .1s both}
  .uc-js .bt .clc .am{transform-origin:100% 50%;animation:ucGrowX .4s var(--ease) .5s both}
  .uc-js .bt .clc .a2{animation-delay:.75s}.uc-js .bt .clc .a3{animation-delay:1s}.uc-js .bt .clc .a4{animation-delay:1.45s}
  .uc-js .bt .clc .badge{animation:ucPop .5s var(--ease) 1.8s both}
  .uc-js .bt .look .pp{animation:ucRise .55s var(--ease) .1s both}
  .uc-js .bt .look .lens{animation:btLens 1.5s cubic-bezier(.5,0,.3,1) .4s both}
  .uc-js .bt .look .lr.hit{animation:btFound .45s var(--ease) 1.75s both}
  .uc-js .bt .msg{animation:ucRise .5s var(--ease) .1s both}
  .uc-js .bt .msg .ln{transform-origin:0 50%;animation:ucGrowX .45s var(--ease) .45s both}
  .uc-js .bt .msg .ln:nth-of-type(2){animation-delay:.65s}.uc-js .bt .msg .ln:nth-of-type(3){animation-delay:.85s}.uc-js .bt .msg .ln:nth-of-type(4){animation-delay:1.05s}
  .uc-js .bt .msg .stp{animation:ucPop .5s var(--ease) 1.4s both}
  .uc-js .bt .ntf .bell .ico{animation:ucShake .6s ease-in-out .3s 2 both}
  .uc-js .bt .ntf .wire{animation-delay:1.3s}.uc-js .bt .ntf .pd{animation-delay:1.75s}
  .uc-js .bt .ntf .who{animation:ucRise .5s var(--ease) 2.2s both}

  /* EXEMPLAR, miniature "read" (the pattern for a story with several flights).
       beat 1  the document arrives from the left
       beat 2  a light reads down the page; where it passes, four spans light up one after another, and each one
               leaves the page as a chip over its own curved path, staggered and overlapping (helper fly in
               /usecase.js [M2]; the chips carry data-fly, so they are not there before the story starts)
       beat 3  the four chips stand in a tidy column with their field names, and answer from top to bottom */
  .bt-read{--b1:0s;--b2:.85s;--b3:3.05s}
  @keyframes btDoc{from{opacity:0;translate:-26px 0;rotate:-3deg}}
  @keyframes btScan{0%{translate:0 -100%;opacity:0}10%{opacity:1}86%{opacity:1}100%{translate:0 0;opacity:0}}
  .uc-js .bt-read .doc{animation:btDoc .6s var(--e-out) calc(var(--b1) + .05s) both}
  .uc-js .bt-read .doc::after{animation:btScan 1.25s linear var(--b2) both}
  .uc-js .bt-read .hl{transform-origin:0 50%;animation:ucGrowX .3s var(--e-out) calc(var(--b2) + .2s) both}
  .uc-js .bt-read .h2{animation-delay:calc(var(--b2) + .2s + var(--t-step))}
  .uc-js .bt-read .h3{animation-delay:calc(var(--b2) + .2s + var(--t-step)*2)}
  .uc-js .bt-read .h4{animation-delay:calc(var(--b2) + .2s + var(--t-step)*3)}
  .uc-js .bt-read .chips b::after{animation:ucFlash .7s var(--e-out) var(--b3) both}
  .uc-js .bt-read .chips .c2::after{animation-delay:calc(var(--b3) + .09s)}
  .uc-js .bt-read .chips .c3::after{animation-delay:calc(var(--b3) + .18s)}
  .uc-js .bt-read .chips .c4::after{animation-delay:calc(var(--b3) + .27s)}
}
/* <<< [M2] BENTO + INSTRUMENT ---------------------------------------------------------------------- */
/* .                                                                                                 */
/* .   (three lines that nobody edits: the seam between two regions)                                  */
/* .                                                                                                 */
/* >>> [M3] SWIMLANE + VIGNETTES + CONSTELLATION ----------------------------------------------------- */
.sw{--b1:0s;--b2:.9s;--b3:2.4s}  /* version-4 timing; the dot starts on beat 2 (/usecase.js [M3]) */
.vg{--b1:0s;--b2:.8s;--b3:1.6s}  /* version-4 timing */
.cs{--b1:0s;--b2:1s;--b3:2.1s}   /* version-4 timing; the first dot starts on beat 2, the node answers on beat 3 */
@media (prefers-reduced-motion: no-preference){
  /* the swimlane: the steps come in; then ONE dot runs along the path and the lit path opens behind it (the
     helper dot with "reveal", /usecase.js [M3]). The person's tile answers when the dot is with it: the script
     measures that moment and hands it over as --hit. */
  .uc-js .sw[data-play] .sw-steps li{animation:ucRise .5s var(--ease) .1s both}
  .uc-js .sw[data-play] .sw-steps .s2{animation-delay:.22s}.uc-js .sw[data-play] .sw-steps .s3{animation-delay:.34s}
  .uc-js .sw[data-play] .sw-steps .s4{animation-delay:.46s}.uc-js .sw[data-play] .sw-steps .s5{animation-delay:.58s}
  .uc-js .sw[data-play] .sw-steps .s3 .tb{animation:ucAns 1s var(--ease) var(--hit,2.4s) both}

  /* the vignettes */
  .uc-js .vg-keep .s-auto li{animation:ucRise .45s var(--ease) .3s both}
  .uc-js .vg-keep .s-auto li:nth-child(2){animation-delay:.45s}.uc-js .vg-keep .s-auto li:nth-child(3){animation-delay:.6s}
  .uc-js .vg-keep .wall{transform-origin:50% 0;animation:ucGrowY .7s var(--ease) .8s both}
  .uc-js .vg-keep .av{animation:ucPop .5s var(--ease) 1.3s both}
  .uc-js .vg-keep .s-team li{animation:ucRise .45s var(--ease) 1.6s both}
  .uc-js .vg-keep .s-team li:nth-child(2){animation-delay:1.78s}.uc-js .vg-keep .s-team li:nth-child(3){animation-delay:1.96s}
  .uc-js .vg .msg{animation:ucRise .5s var(--ease) .1s both}
  .uc-js .vg .msg .ln{transform-origin:0 50%;animation:ucGrowX .45s var(--ease) .45s both}
  .uc-js .vg .msg .ln:nth-of-type(2){animation-delay:.65s}.uc-js .vg .msg .ln:nth-of-type(3){animation-delay:.85s}.uc-js .vg .msg .ln:nth-of-type(4){animation-delay:1.05s}
  .uc-js .vg .msg .stp{animation:ucPop .5s var(--ease) 1.4s both}
  .uc-js .vg-send .go{animation:ucRise .5s var(--ease) 1.8s both}
  .uc-js .vg-send .av{animation:ucAns 1s var(--ease) 2.3s both}

  /* the constellation: the tiles come in round the node; then one dot per lit system (the helper dot, /usecase.js
     [M3]): the first comes IN to the node, the node answers, the others leave it */
  .uc-js .cs[data-play] .cs-tiles li{animation:ucFade .6s var(--ease) .15s both}
  .uc-js .cs[data-play] .cs-tiles li:nth-child(n+3){animation-delay:.35s}
  .uc-js .cs[data-play] .cs-tiles li:nth-child(n+5){animation-delay:.5s}
  .uc-js .cs[data-play] .wr{animation:ucFade .7s var(--ease) .5s both}
  .uc-js .cs[data-play] .cs-node .glow{animation:ucRing .8s var(--ease) var(--b3) both}
}
/* <<< [M3] SWIMLANE + VIGNETTES + CONSTELLATION ---------------------------------------------------- */

/* the hero stacks below 1240px: the diagram needs its full width (about 700px) more than it needs a neighbour */
@media (max-width:1239px){
  .uc-hero .wrap,.uc-hub .wrap{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "fig" "body";row-gap:36px;padding-top:48px;padding-bottom:60px}
  .uc-hero-head,.uc-hero-body{align-self:auto}
  .uc-hero h1,.uc-hub h1{font-size:clamp(34px,4.6vw,46px);margin-bottom:0;max-width:16em}
  .uc-hero .hd{width:100%;max-width:760px}
  .uc-hero .lede{max-width:36em}
}
@media (max-width:1100px){
  .uc-split{grid-template-columns:1fr}
  .uc-split .intro{padding-top:0}
  .uc-cards,.uc-cards-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* narrower than 760px the diagram stacks top to bottom (side by side it needs about 650px):
   sources as a row of small icon chips, the node, the record, the amber card */
@media (max-width:760px){
  .uc-hero .hd{max-width:560px}
  .hd-stage{display:flex;flex-direction:column;align-items:stretch}
  .hd-in,.hd-out{display:none}
  .hd-src{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
  .hd-src li{height:42px;padding:0 13px 0 9px;gap:8px;border-radius:13px;font-size:14.5px}
  .hd-src .ico{width:24px;height:24px}
  .hd-v{display:block;align-self:center;position:relative;width:2.5px;height:15px;margin:4px 0 9px;border-radius:2px;background:var(--accent);box-shadow:0 0 8px rgba(var(--accent-rgb),.7);transition:opacity .35s var(--ease)}
  .hd-v::after{content:"";position:absolute;left:-4.25px;bottom:-6px;border-top:8px solid var(--accent);border-left:5.5px solid transparent;border-right:5.5px solid transparent}
  .hd-node{grid-template-columns:auto auto;justify-content:center;align-items:center;column-gap:10px;padding:12px 14px 13px;border-radius:18px}
  .hd-node .glow{inset:-60% -10%}
  .hd-node .mark{width:30px;height:30px;justify-self:end}
  .hd-node .nm{margin:0;justify-self:start;font-size:20px}
  .hd-node .sub{display:none}
  .hd-node .verbs{grid-column:1 / -1;display:flex;justify-content:center;gap:6px;margin-top:11px;font-size:14.5px}
  .hd-node .verbs li{padding:5px 10px;border-radius:999px;background:rgba(var(--accent-rgb),.12);color:#e3f3ec}
  .hd-res{padding:10px;border-radius:18px}
  .hd-res-h{margin:2px 3px 9px}
  .rr{min-height:31px;padding:4px 8px}
  .rec{padding:10px 9px 7px}
  .rec-h{margin-bottom:8px}
  .hd-doubt{display:block}
  .rt-a{display:block;width:0;height:14px;margin:4px auto;border-bottom:0;border-radius:0}
  .rt-a::after{right:auto;left:-6.75px;bottom:-7px;border-top:8px solid var(--amber);border-left:5.5px solid transparent;border-right:5.5px solid transparent;border-bottom:0}
  .rt-b{display:none}
  .dc{margin-top:8px;padding:13px 14px}
  .dc .dh{font-size:16px}
  .dc .dp{font-size:14px}
  .hd-foot{margin-top:16px}
  .hd-cap{font-size:13.5px}
  .hd-foot .ctl{height:44px;padding:0 16px}
}
@media (max-width:640px){
  .pg-uc .sec{padding:72px 0}
  .pg-uc .sec.uc-follow{padding-top:0;margin-top:-24px}
  .pg-uc .sec.uc-film{padding:48px 0}
  /* The first screen of a phone shows the workflow: headline, then the diagram, then the text. The parts of the
     text become items of the same grid (display:contents), so the line that explains an abbreviation can stand
     ABOVE the diagram that uses it; the reading and tab order stay those of the markup. No breadcrumb (the
     header marks "Voorbeelden") and no price hint here (the prices are a section below). */
  .uc-hero .wrap,.uc-hub .wrap{display:flex;flex-direction:column;align-items:stretch;row-gap:0;padding-top:20px;padding-bottom:48px}
  .uc-hero-body{display:contents}
  .uc-hero-head{order:1}
  .uc-hero .gloss{order:2;margin:12px 0 0}
  .uc-hero .hd{order:3;margin-top:16px}
  .uc-hero .lede{order:4;font-size:17px;margin:28px 0 24px}
  .uc-hero .lede:has(+ .gloss){margin-bottom:24px}
  .uc-hero .ctas{order:5}
  .uc-hero .micro{order:6}
  .uc-hero .crumbs{display:none}
  .uc-hero .micro .price-hint{display:none}
  .pg-uc .uc-hero .eyebrow{margin-bottom:13px}
  /* 320px wide: "transportopdrachten." still fits on one line at 27px */
  .uc-hero h1,.uc-hub h1{font-size:clamp(27px,8.2vw,32px);letter-spacing:-.03em}
  .uc-hero .ctas .btn-ghost{display:none}
  .uc-hub .ctas .btn-ghost{display:inline-flex}
  .pg-uc h2 .dim{display:block} /* a two-tone heading breaks at the colour change */
  .ar{width:22px}
  .uc-cards,.uc-cards-2,.uc-cards-3{grid-template-columns:minmax(0,1fr)}
  .uc-group{padding-top:40px}
  .uc-group .uc-card .hook{display:none} /* grouped (many cards): on a phone the picture and the headline are enough to scan */
  .uc-cost-foot .btn,.rows-more .btn{width:100%;justify-content:center}
}
@media (max-width:360px){
  .hd-src li{padding:0 10px 0 7px;font-size:13.5px}
  .hd-node .verbs{font-size:13.5px;gap:4px}
  .hd-node .verbs li{padding:5px 8px}
  .hd-res-h .ex{margin-left:0}
  .rr{grid-template-columns:minmax(40%,max-content) minmax(0,1fr)}
  .uc-pic{padding:16px 12px}
  .pc-src{gap:5px}
  .pc-src .ico{width:28px;height:28px}
  .pc-node{width:38px;height:38px}
  .uc-pic .ar{min-width:10px;margin:0 8px 0 5px}
}

/* ---- version 4, narrower screens (the modules below the hero) ---- */
@media (max-width:1100px){
  .bento .bt{grid-column:span 6}
  .bento .bt-w4:last-child:nth-child(odd){grid-column:span 12}
  .vgs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vgs .vg-send{grid-column:1 / -1}
  .vg-send .vg-art{min-height:210px}
  .vg-send .snd{grid-template-columns:minmax(0,240px) auto;align-items:center;justify-content:center;gap:30px}
  .vg-send .snd .msg{width:100%}
  .ins{gap:26px 44px;padding:40px 36px 30px}
  .pnl{padding:32px 28px 38px}
  .tiles{--ts:64px}
  .tl{padding:0 6px}
  .tl .t{font-size:15.5px}
  .tl .tb .ico{width:28px;height:28px}
  .cr{padding:26px 24px 28px}
  .cr-n{left:24px}
  .crail::before{left:52px;right:calc((100% - 32px) / 3 - 52px)}
  .cr .price{font-size:48px}
  .sw{grid-template-columns:168px minmax(0,1fr)}
  .sw-l{padding-left:20px;font-size:15.5px}
  .cs-tiles .p1{left:15%}.cs-tiles .p2{left:85%}
  .fan{scale:.82}
  .uc-pic{padding:20px 18px}
  .pc-src{gap:6px}
  .pc-src .ico{width:30px;height:30px}
  .uc-pic .ar{min-width:12px;margin:0 6px}
  .pc-node{width:44px;height:44px}
}
@media (max-width:960px){.fan{scale:.72}} /* three scenes side by side on a narrow tablet */
/* narrower than 861px a row of tiles runs top to bottom (the tile left, its label beside it, the arrow down),
   and everything that stood side by side stacks */
@media (max-width:860px){
  .scns{grid-template-columns:minmax(0,1fr)}
  /* a scene on a tablet: the picture left, its title beside it */
  .scn{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;padding:13px}
  .scn h3{margin:0 20px 0 28px;font-size:22px}
  .scn-art{min-height:206px}
  .fan{scale:1}
  .sw-steps b{font-size:14.5px}
  .bento .bt,.bento .bt-w4:last-child:nth-child(odd){grid-column:span 12}
  .tiles,.tiles-4,.tiles-6{--ts:56px;grid-template-columns:1fr;gap:26px}
  .tl{grid-template-columns:var(--ts) minmax(0,1fr);justify-items:start;align-items:center;column-gap:16px;padding:0;text-align:left}
  .tl .tb{grid-row:1 / span 3;align-self:start;border-radius:16px}
  .tl .tb .ico{width:26px;height:26px}
  .tl .t{margin-top:0;font-size:17px;align-self:center}
  .tl .t:last-child{grid-row:1 / span 3}
  .tl .who{margin-top:6px;grid-column:2;justify-self:start}
  .tl:not(:last-child)::before{left:calc(var(--ts) / 2 - 1px);top:calc(var(--ts) + 5px);width:2px;height:calc(100% - var(--ts) + 26px - 16px)}
  .tl:not(:last-child)::after{left:calc(var(--ts) / 2 - 5px);top:calc(100% + 26px - 12px);border-top:8px solid currentColor;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:0}
  .tiles-run::after{left:calc(var(--ts) / 2 - 5.5px);right:auto;width:11px;bottom:calc(var(--ts) / 2 - 5.5px);height:auto;background:radial-gradient(circle 5.5px at 50% calc(100% - 5.5px),#eafff6 96%,transparent)}
  .ichips li{border-radius:18px}
  .ins{grid-template-columns:minmax(0,1fr)}
  .dial{width:min(100%,230px)}
  /* the rail: the cards stack; each node stands above its card and a stem ties it to the card before */
  .crail{grid-template-columns:minmax(0,1fr);gap:0}
  .crail::before{display:none}
  .cr + .cr{margin-top:96px}
  .cr + .cr .cr-n::before{content:"";position:absolute;left:50%;bottom:100%;width:2px;height:20px;margin-left:-1px;background:linear-gradient(rgba(var(--accent-rgb),.35),var(--accent))}
  .uc-cost-foot{flex-direction:column;align-items:flex-start}
}
/* narrower than 761px the swimlane and the constellation turn upright */
@media (max-width:760px){
  .vgs{grid-template-columns:minmax(0,1fr)}
  .vgs .vg-send{grid-column:auto}
  .sw-steps b{font-size:15.5px}
  .sw{grid-template-columns:62% 38%;grid-template-rows:56px 480px;
    background:linear-gradient(rgba(var(--accent-rgb),.085),rgba(var(--accent-rgb),.085)) 0 0 / 62% 100% no-repeat,linear-gradient(rgba(245,181,77,.085),rgba(245,181,77,.085)) 100% 0 / 38% 100% no-repeat,var(--surface)}
  .sw-l{padding:0 8px 0 18px;font-size:15px}
  .sw-l.l-team{grid-area:1 / 2;justify-content:center;padding:0 6px}
  .sw-map{grid-area:2 / 1 / 3 / 3}
  .sw-map .sw-wide{display:none}
  .sw-map .sw-tall{display:block}
  .sw-steps{display:block}
  .sw-steps li{position:absolute;display:block;left:16%;width:0;height:0}
  .sw-steps .s1{top:10%}.sw-steps .s2{top:30%}.sw-steps .s3{top:50%;left:78%}.sw-steps .s4{top:70%}.sw-steps .s5{top:90%}
  .sw-steps .tb{position:absolute;left:-26px;top:-26px;width:52px;height:52px;border-radius:16px}
  .sw-steps .tb .ico{width:25px;height:25px}
  .sw-steps b{left:38px;top:-10px;transform:none;font-size:15.5px}
  .sw-steps .s3 b{left:0;top:35px;transform:translateX(-50%)}
  .uc-cards,.uc-cards-2,.uc-cards-3{grid-template-columns:minmax(0,1fr)}
  .cs{height:440px}
  .cs .cs-wide{display:none}
  .cs .cs-tall{display:block}
  .cs-node{width:66px;height:66px;margin:-33px 0 0 -33px;border-radius:21px}
  .cs-node .mark{width:32px;height:32px}
  .cs-tiles li{flex-direction:column;justify-content:center;gap:7px;width:34%;max-width:132px;height:auto;min-height:72px;padding:10px 4px;font-size:13px;white-space:normal;text-align:center;hyphens:auto}
  .cs-tiles .p1,.cs-tiles .p3,.cs-tiles .p5{left:19.33%}
  .cs-tiles .p2,.cs-tiles .p4,.cs-tiles .p6{left:80.67%}
  .cs-tiles .p1,.cs-tiles .p2{top:10.95%}
  .cs-tiles .p3,.cs-tiles .p4{top:50%}
  .cs-tiles .p5,.cs-tiles .p6{top:89.05%}
}
@media (max-width:640px){
  .pg-uc .uc-split + :is(.bento,.sw,.cs,.crail),.pg-uc h2 + :is(.scns,.vgs,.ins,.pnls){margin-top:36px}
  .scns,.bento,.vgs{gap:12px}
  .scn{display:block}
  .scn,.bt,.vg{padding:11px 11px 24px}
  .scn h3,.vg h3{margin:20px 11px 0;font-size:19.5px}
  .bt h3{margin:20px 11px 5px;font-size:20px}
  .bt .cap{margin:0 11px;font-size:15px}
  .bt-art{min-height:226px;padding:22px 0}
  .vg-art{min-height:270px;padding:20px 12px}
  .vg-send .vg-art{min-height:250px}
  .vg-send .snd{grid-template-columns:minmax(0,1fr);gap:18px}
  .vg-send .snd .msg{width:min(226px,86%)}
  .pnls{gap:14px}
  .pnl{padding:24px 20px 30px;border-radius:22px}
  .pnl-h{flex-wrap:wrap;gap:12px 14px;margin-bottom:28px}
  .pnl-h h3{font-size:23px}
  .pnl-n{flex-basis:100%;margin:0;font-size:15.5px}
  .pnl-n b{font-size:42px}
  .tiles,.tiles-4,.tiles-6{--ts:52px;gap:22px}
  .tl{column-gap:14px}
  .tl:not(:last-child)::before{height:calc(100% - var(--ts) + 22px - 16px)}
  .tl:not(:last-child)::after{top:calc(100% + 22px - 12px)}
  .pnl-impact{margin-top:30px;padding-top:24px}
  .ichips li{font-size:15.5px;padding:10px 14px 10px 10px}
  .mbx{width:94%}
  .mbx .wire{width:28px;margin-left:3px;margin-right:8px}
  .mbx .nd{width:48px;height:48px}
  .mbx .nd .mark{width:24px;height:24px}
  .mbx .ir{gap:7px;padding:0 8px;font-size:12.5px}
  .rd{gap:14px}
  .rd .pp.doc{width:118px;padding:14px 12px}
  .rd .chips b{padding:6px 10px;font-size:12.5px}
  .chk .pair{gap:6px}
  .chk .cv{gap:6px;height:42px;padding:0 9px 0 7px;font-size:13px}
  .chk .cv .ico{width:18px;height:18px}
  .chk .neq{width:30px;height:30px}
  .chk .pp.rows,.prp .pp.rows{width:224px}
  .prp .lock{right:-9px;bottom:-13px}
  .fan{scale:.92}
  .ins{gap:22px;padding:28px 20px 24px;border-radius:22px}
  .sl{column-gap:14px;margin-bottom:26px}
  .sl .num{font-size:54px}
  .sl label{font-size:15.5px}
  .dial-c b{font-size:60px}
  .cr{padding:24px 20px 26px}
  .cr-n{left:20px}
  .cr .price{font-size:46px}
  .qa summary{gap:13px;padding:14px 16px 14px 14px;font-size:17px}
  .qa summary .tb{width:42px;height:42px;border-radius:13px}
  .qa p{padding:2px 18px 22px 18px;font-size:15.5px}
  .nxt{margin-top:28px}
  .nxt li b{font-size:17.5px}
  .uc-cards{margin-top:36px}
  .uc-card h3{font-size:20.5px}
}
@media (max-width:360px){
  .scn .duo{gap:8px;padding:0 10px}
  .scn .hop{width:18px}
  .art :is(.mm,.pp){padding:10px}
  .chk .pp.rows,.prp .pp.rows{width:206px}
  .pp .gr{font-size:12.5px;padding:4px 6px}
  .bnd .wall{margin:0 8px}
  .bnd li{padding:7px 9px;font-size:13px}
  .sw-steps b{font-size:14.5px}
  .cs-tiles li{font-size:12.5px;padding:10px 4px}
  .sl .num{font-size:48px}
}

/* ---------- motion (transform / opacity only) ---------- */
@media (prefers-reduced-motion: no-preference){
  .js .rv{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
  .js .rv.in{opacity:1;transform:none}
  .js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}
  /* Keyboard focus must never sit inside a still-invisible section. */
  .js .rv:focus-within{opacity:1;transform:none;transition:none}
  .btn-primary:hover .arr{transform:translateX(3px)}
  .btn:hover .ic{transform:translateX(3px) scale(1.04)}

  /* home hero entrance: pure CSS (no JS gate, so nothing flashes before site.js runs).
     The headline lines rise out of a mask, the rest fades up, the diagram follows. */
  .hero h1 .ln > span{animation:lineUp 1.15s var(--ease) both}
  .hero h1 .ln:nth-child(2) > span{animation-delay:.1s}
  .hero h1 .ln:nth-child(3) > span{animation-delay:.2s}
  @keyframes lineUp{from{transform:translateY(106%)}to{transform:none}}
  .hero .hin{animation:hin 1s var(--ease) both}
  .hero .hd1{animation-delay:.34s}.hero .hd2{animation-delay:.44s}.hero .hd3{animation-delay:.54s}.hero .hd4{animation-delay:.64s}
  .hero .hd{animation:hin 1.2s var(--ease) .18s both}
  @keyframes hin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

  /* zero frictie: our list checks itself in (home.js adds .go when it scrolls into view) */
  .js .we li{opacity:.28;transition:opacity .6s var(--ease) calc(var(--i,0)*60ms + .15s)}
  .js .we li .ck{opacity:0;transform:scale(.6);transition:opacity .5s var(--ease) calc(var(--i,0)*60ms + .2s),transform .5s var(--ease) calc(var(--i,0)*60ms + .2s)}
  .js .we.go li{opacity:1}
  .js .we.go li .ck{opacity:1;transform:none}
  .js .bars i{transform:scaleX(0);transition:transform 1.2s var(--ease)}
  .js .bars .b-we{transition-delay:.35s;transition-duration:1.6s}
  .js .tally.in .bars i{transform:none}
  /* tracks draw themselves (site.js adds .drawn) */
  .js .steps::after{transform:scaleX(0);transition:transform 2s cubic-bezier(.32,.72,0,1) .2s}
  .js .steps.drawn::after{transform:scaleX(1)}
  .js .steps .node{opacity:.35;transition:opacity .6s var(--ease)}
  .js .steps.drawn .step:nth-child(1) .node{opacity:1;transition-delay:.2s}
  .js .steps.drawn .step:nth-child(2) .node{opacity:1;transition-delay:.7s}
  .js .steps.drawn .step:nth-child(3) .node{opacity:1;transition-delay:1.2s}
  .js .steps.drawn .step:nth-child(4) .node{opacity:1;transition-delay:1.7s}
  .js .ladder .path .pd{transform:scaleX(0);transition:transform 1.8s cubic-bezier(.32,.72,0,1) .15s}
  .js .ladder.drawn .path .pd{transform:scaleX(1)}
  .js .ladder .rail .track::before{transform:scaleX(0);transition:transform 1.6s var(--ease) .5s}
  .js .ladder.drawn .rail .track::before{transform:scaleX(1)}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}

/* ---------- responsive ---------- */
/* the hero stacks below 1240px, like the hero of the use-case pages: the diagram needs its width (about 700px) */
@media (max-width:1239px){
  .hero .wrap{grid-template-columns:minmax(0,1fr);gap:44px;min-height:0;padding-top:56px}
  .hero h1{font-size:clamp(38px,5.2vw,48px)}
  .hero .hd{width:100%;max-width:760px}
}
@media (max-width:1100px){
  .hero .lede{font-size:17.5px}
  .steps{grid-template-columns:1fr 1fr;row-gap:56px}
  .steps::before,.steps::after{display:none}
  .ladder{grid-template-columns:1fr 1fr;grid-template-rows:none;row-gap:40px}
  .rung,.card,.card > .ci{grid-row:auto;grid-template-rows:none;display:block}
  .ladder .path{display:none}
  .r0,.r2{grid-column:1 / -1}
  .rail{grid-column:1 / -1;grid-row:auto;grid-template-columns:1fr 1fr;gap:14px}
  .rail .legend{grid-column:1 / -1}
  .rail .track{grid-column:1 / -1;grid-template-columns:1fr 1fr;gap:14px}
  .tier.t1{grid-column:1}.tier.t2{grid-column:2}
  .swap{grid-column:1 / -1}
  .fit{grid-template-columns:1fr;gap:24px}
  .promise,.faq{grid-template-columns:1fr;gap:48px}
  .wrow{grid-template-columns:1fr auto;gap:8px 32px}
  .wrow p{grid-column:1}
  .wrow .amt{grid-column:2;grid-row:1 / span 3}
  .final .box{grid-template-columns:1fr;gap:40px}
  footer .wrap{grid-template-columns:1fr 1fr}
  .page-hero .wrap{grid-template-columns:1fr;gap:48px;padding-top:64px;padding-bottom:64px}
  .facts{max-width:640px}
  .formats{grid-template-columns:1fr}
  .topics{grid-template-columns:1fr 1fr}
  .topic,.topic + .topic{padding:26px 28px 28px 0;border-left:0}
  .topic:nth-child(2n){padding-left:28px;border-left:1px solid var(--line)}
}
/* 861-1040px: five menu links, the language link and the button on one row need a tighter gap
   (measured: with the 34px gap the header was up to 50px wider than the page at 861-911px) */
@media (min-width:861px) and (max-width:1040px){
  .nav nav,.nav .links{gap:22px}
}
/* 861-940px: with five links the long button label no longer fits on the row ("Zo werkt het" wrapped
   onto three lines, 2026-10-12). The short label, as on phones. */
@media (min-width:861px) and (max-width:940px){
  .nav .btn-sm .long{display:none}
  .nav .btn-sm .short{display:inline}
}
@media (max-width:1000px){
  .hero .wrap{gap:48px}
}
@media (max-width:860px){
  .nav nav{gap:14px}
  /* Second header row: the section links stay reachable on phones. */
  header.nav{padding-bottom:44px}
  html{scroll-padding-top:124px}
  .nav .links{position:absolute;left:0;right:0;top:68px;height:44px;padding:0 40px;gap:26px;border-top:1px solid var(--line);overflow-x:auto;white-space:nowrap;scrollbar-width:none}
  .nav .links::-webkit-scrollbar{display:none}
  .nav .links a{display:inline-flex;align-items:center;min-height:44px;font-size:14.5px}
  .nav .links a[aria-current]{box-shadow:inset 0 -2px 0 var(--accent)}
  .zf-grid,.tally{grid-template-columns:1fr}
  .tally{gap:14px}
  .steps{grid-template-columns:1fr;row-gap:48px;padding-left:40px}
  .steps::before,.steps::after{display:block;left:10px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .steps::after{transform-origin:50% 0;background:linear-gradient(180deg,var(--accent),rgba(var(--accent-rgb),.4))}
  .step .node{position:absolute;left:-40px;top:0}
  .step .k{margin-top:0}
  .how-note{flex-direction:column;align-items:flex-start}
  .ladder{grid-template-columns:1fr;row-gap:28px}
  .r0,.r2{grid-column:auto}
  .or{left:50%;top:-31px;transform:translateX(-50%)}
  .rail,.rail .track{grid-template-columns:1fr}
  .tier.t1,.tier.t2{grid-column:1}
  .split{grid-template-columns:1fr}
}
@media (max-width:760px){
  .hero .hd{max-width:560px} /* the diagram stacks top to bottom here (see the use-case part) */
}
@media (max-width:860px) and (prefers-reduced-motion: no-preference){
  .js .steps::after{transform:scaleY(0)}
  .js .steps.drawn::after{transform:scaleY(1)}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .nav .wrap{height:60px;gap:12px}
  .nav .links{top:60px;padding:0 20px;gap:22px}
  html{scroll-padding-top:116px}
  .nav .long{display:none}.nav .short{display:inline}
  .nav nav{gap:10px}
  h1{font-size:40px;letter-spacing:-.03em;margin-bottom:20px}
  .lede{margin-bottom:30px}
  .ctas{flex-direction:column}
  .ctas .btn{justify-content:center;width:100%}
  .sec,.pg-home .sec{padding:88px 0}
  .p{padding:26px}
  /* home */
  .hero .wrap{padding-top:40px;padding-bottom:52px;gap:44px}
  .hero h1{font-size:38px;letter-spacing:-.035em;margin-bottom:22px}
  .hero .lede{font-size:17.5px;margin-bottom:22px}
  .gets{margin-bottom:28px}
  .ctl{justify-self:end;padding:0 12px}
  .col-h,.you li{padding-left:20px;padding-right:20px}
  .we li{padding:11px 20px;grid-template-columns:22px 1fr}
  .we li .ph{display:none}
  .you h4{flex-direction:column;gap:6px}
  .tally .line{font-size:16px}
  .ci .price{font-size:42px}
  .fit .core{padding:24px 20px}
  .rail .track::before{right:-20px}
  .wrow{grid-template-columns:1fr;gap:8px}
  .wrow .amt{grid-column:1;grid-row:auto;text-align:left}
  :is(.pg-home,.pg-uc) .final{padding:24px 0 88px}
  .final{padding:88px 0 80px}
  .final .box{padding:32px 22px}
  .lead-form .grid2{grid-template-columns:1fr}
  .form-foot .btn,.formats .p .btn,.res .row2 .btn{width:100%;justify-content:center;padding:0 16px}
  .form-foot .btn .arr,.res .row2 .btn .arr,.form-foot .btn .ic,.res .row2 .btn .ic{display:none}
  .form-foot .btn:has(> .ic),.res .row2 .btn:has(> .ic){padding:0 16px}
  footer .wrap{grid-template-columns:1fr}
  footer .legal-row{flex-direction:column}
  .page-hero .wrap{padding-top:44px;padding-bottom:52px}
  .facts{padding:4px 20px}
  .facts div{grid-template-columns:1fr;gap:2px}
  .topics{grid-template-columns:1fr}
  .topic,.topic + .topic,.topic:nth-child(2n){padding:24px 0;border-left:0}
  .panel{padding:26px 22px}
  .legal{padding:48px 20px 72px}
  .legal .toc{columns:1}
  .legal table{min-width:0;font-size:14px}
  .legal th,.legal td{padding:10px 10px}
  .legal td:first-child{white-space:normal}
}
/* Phones (≤480px): the five section links of the second header row. Compact, spread over the row;
   they fit from 375px up (NL and EN, measured). Narrower than that the row scrolls sideways and
   the soft fade on the right says there is more. */
@media (max-width:480px){
  .nav .links{gap:10px;padding:0 12px;justify-content:space-between;
    mask-image:linear-gradient(90deg,#000 calc(100% - 10px),transparent);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 10px),transparent)}
  .nav .links a{font-size:13px}
}
/* Very small phones (≤400px, e.g. 320): keep the full-width CTAs and the header inside the viewport. */
@media (max-width:400px){
  .ctas .btn{padding:0 14px}
  .ctas .btn .arr,.ctas .btn .ic{display:none}
  .ctas .btn:has(> .ic){padding:0 14px}
  .nav nav{gap:8px}
  .nav .btn-sm{padding:0 14px}
  .ctl{justify-self:start}
}
/* ≤360px: a little tighter still, so the five links fit at 360px in Dutch */
@media (max-width:360px){
  .nav .links{gap:8px;padding:0 10px}
}
/* 320-359px: the five links fit without a hidden scroll (2026-10-12: "Vragen" / "FAQ" was cut off at 320px).
   The text shrinks with the screen, from 13px at 360px to 11.5px at 320px; the touch height stays 44px. */
@media (max-width:359px){
  .nav .links{gap:6px;padding:0 8px}
  .nav .links a{font-size:calc(11.5px + (100vw - 320px) * .0375)}
}

/* ============================================================================================
   Landing v4 (15 Oct 2026). Alex on v3.1: "mult prea mult verde ... animatiile nu sunt ultra-premium ... imaginile
   tot pe verde ... prea multi oameni la birou ... ultra-premium, modern, 3D, animat, ASMR, futurist, dar nu prea mult,
   cu gust". So: graphite, white and glass; the green (one variable, --accent / --accent-rgb) only on the main button,
   one word and small lights. Depth: the hero moves in layers with the pointer (/home3.js), dust drifts in the light,
   cards lean towards the pointer and carry a light, the steps are glass orbs that light up one by one while a pulse
   runs along their rail, a fine film grain lies over the page. Everything calm: long, soft easing. Reduced motion:
   all of it stands still. Also the offer page (.pg-pr).
   ============================================================================================ */
body.pg-home{background:#050607}
body.pg-home::after{content:"";position:fixed;inset:-60px;z-index:60;pointer-events:none;background:url(/assets/img/home/grain.png);opacity:.05;mix-blend-mode:overlay}
body.pg-home .sec{padding:96px 0}
body.pg-home .sec.alt{background:linear-gradient(180deg,#08090b,#060708);border-color:rgba(255,255,255,.06)}
.pg-home .sec h2,.pg-home .final h2{font-size:clamp(32px,3.4vw,50px);font-weight:600;line-height:1.04;letter-spacing:-.04em;margin:0 0 16px;text-wrap:balance;color:#f3f5f7}
.pg-home .sec .intro{font-size:17.5px;line-height:1.6;color:#a3abb3;max-width:34em;margin:0}
.pg-home .eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;padding:7px 14px 7px 12px;border-radius:999px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);font:500 11.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#cdd3d9}
.pg-home .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px rgba(var(--accent-rgb),.9)}
.head3{margin-bottom:48px}
.head3.center{text-align:center}
.head3.center .intro{margin-inline:auto}
.head3.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:24px 64px;align-items:end}
.pg-home .btn-primary{translate:var(--bx,0px) var(--by,0px);transition:translate .6s var(--ease),background-color .3s var(--ease),box-shadow .4s var(--ease),transform .3s var(--ease);box-shadow:0 14px 40px -14px rgba(var(--accent-rgb),.6),inset 0 1px 0 rgba(255,255,255,.35)}
.pg-home .btn-primary:hover{box-shadow:0 18px 50px -12px rgba(var(--accent-rgb),.75),inset 0 1px 0 rgba(255,255,255,.4)}
.pg-home .btn-ghost{background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* hero: layers in depth, light in the arch, dust in the light */
.hero3{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-rows:1fr auto;min-height:clamp(640px,90vh,860px);background:#050607;border-bottom:1px solid rgba(255,255,255,.06)}
.hero3-bg{position:absolute;inset:-24px;z-index:-3;overflow:hidden;transform:translate3d(calc(var(--mx,0) * -14px),calc(var(--my,0) * -9px),0);transition:transform 1.4s var(--ease)}
.hero3-bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:68% 50%;transform-origin:72% 45%;filter:saturate(.9) contrast(1.04)}
.hero3::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(90deg,rgba(5,6,7,.97) 0%,rgba(5,6,7,.88) 27%,rgba(5,6,7,.38) 55%,rgba(5,6,7,.02) 100%),
  linear-gradient(0deg,#050607 0%,rgba(5,6,7,0) 30%),
  linear-gradient(180deg,rgba(5,6,7,.55) 0%,rgba(5,6,7,0) 18%)}
.hero3::after{content:"";position:absolute;right:12%;top:8%;z-index:-2;width:34%;height:70%;pointer-events:none;background:radial-gradient(closest-side,rgba(255,226,186,.16),transparent);mix-blend-mode:screen}
.motes{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;transform:translate3d(calc(var(--mx,0) * -26px),calc(var(--my,0) * -16px),0);transition:transform 1.4s var(--ease)}
.motes i{position:absolute;left:var(--x);top:var(--y);width:var(--s,2px);height:var(--s,2px);border-radius:50%;background:#ffe9cc;box-shadow:0 0 6px rgba(255,230,190,.9);opacity:0}
.motes i:nth-child(1){--x:62%;--y:70%;--d:13s;--t:0s}.motes i:nth-child(2){--x:66%;--y:58%;--d:16s;--t:2s;--s:3px}.motes i:nth-child(3){--x:71%;--y:76%;--d:12s;--t:4s}
.motes i:nth-child(4){--x:74%;--y:46%;--d:18s;--t:1s}.motes i:nth-child(5){--x:69%;--y:36%;--d:14s;--t:6s;--s:1.5px}.motes i:nth-child(6){--x:77%;--y:64%;--d:15s;--t:3s}
.motes i:nth-child(7){--x:80%;--y:52%;--d:17s;--t:7s;--s:3px}.motes i:nth-child(8){--x:64%;--y:84%;--d:13s;--t:5s}.motes i:nth-child(9){--x:72%;--y:26%;--d:19s;--t:8s;--s:1.5px}
.motes i:nth-child(10){--x:83%;--y:72%;--d:14s;--t:9s}.motes i:nth-child(11){--x:67%;--y:48%;--d:16s;--t:10s}.motes i:nth-child(12){--x:76%;--y:84%;--d:12s;--t:11s;--s:2.5px}
.motes i:nth-child(13){--x:70%;--y:62%;--d:18s;--t:12s}.motes i:nth-child(14){--x:79%;--y:38%;--d:15s;--t:2.5s;--s:1.5px}.motes i:nth-child(15){--x:63%;--y:52%;--d:17s;--t:6.5s}
.motes i:nth-child(16){--x:85%;--y:58%;--d:13s;--t:4.5s}.motes i:nth-child(17){--x:73%;--y:68%;--d:16s;--t:8.5s;--s:3px}.motes i:nth-child(18){--x:68%;--y:80%;--d:14s;--t:10.5s}
.hero3 > .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:48px;width:100%;padding-top:96px;padding-bottom:64px}
.hero3-copy{max-width:660px;transform:translate3d(calc(var(--mx,0) * 5px),calc(var(--my,0) * 3px),0);transition:transform 1.4s var(--ease)}
.hero3 h1{margin:0 0 26px;font-size:clamp(46px,6vw,86px);font-weight:600;line-height:.98;letter-spacing:-.05em;color:#f5f7f8}
.hero3 h1 .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero3 h1 .ln > span{display:inline-block}
.hero3 h1 .hl > span{background:linear-gradient(95deg,#f5f7f8 0%,#dfe8e4 35%,var(--accent) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero3 .lede{max-width:30em;margin:0 0 34px;font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:rgba(235,239,242,.78)}
.checks3{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 26px;font-size:14.5px;color:#a3abb3}
.checks3 li{display:inline-flex;align-items:center;gap:8px}
.checks3 .ico{width:16px;height:16px;color:var(--accent)}
.hero3-gains{list-style:none;margin:0;padding:0;display:grid;gap:12px;transform:translate3d(calc(var(--mx,0) * 18px),calc(var(--my,0) * 12px),0);transition:transform 1.4s var(--ease)}
.hero3-gains li{display:flex;align-items:center;gap:13px;min-width:250px;padding:11px 22px 11px 11px;border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.03));-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.18),0 24px 50px -28px rgba(0,0,0,.95);font-size:15px;font-weight:500;color:#f1f4f6}
.hero3-gains .gi{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.22),rgba(255,255,255,.04));box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);color:#fff}
.hero3-gains .ico{width:18px;height:18px}
.hero3-gains li:first-child .gi{color:var(--accent)}
.hero3-sectors{position:relative;border-top:1px solid rgba(255,255,255,.07);background:rgba(5,6,7,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.hero3-sectors .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px 34px;padding-top:18px;padding-bottom:18px}
.hero3-sectors .lab{font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#6f7880}
.hero3-sectors .sct{display:inline-flex;align-items:center;gap:10px;font-size:14.5px;color:#c9d0d6}
.hero3-sectors .ico{width:18px;height:18px;color:#e9edf1;opacity:.75}
.hero3-sub{min-height:clamp(520px,70vh,640px);grid-template-rows:1fr}
.jump3{display:flex;flex-wrap:wrap;gap:10px}
.jump3 a{display:inline-flex;align-items:center;gap:10px;padding:10px 18px 10px 10px;border-radius:999px;background:rgba(255,255,255,.05);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:#f1f4f6;font-weight:500;text-decoration:none;transition:box-shadow .4s var(--ease),background .4s var(--ease)}
.jump3 a span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.08);font:500 11.5px/1 var(--mono);color:#fff}
.jump3 a:hover{background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}

/* cards with a picture: they lean towards the pointer and carry a light; the picture moves against the lean */
.svc3-grid,.pop3-grid{perspective:1400px}
:is(.svc3-card,.pop3-card){position:relative;display:flex;flex-direction:column;width:100%;overflow:hidden;color:inherit;text-decoration:none;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.01) 40%),#0a0c0e;transform:translateY(var(--lift,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;transition:transform .9s var(--ease),box-shadow .6s var(--ease)}
:is(.svc3-card,.pop3-card).tilting{--lift:-6px;transition:transform .18s linear,box-shadow .6s var(--ease)}
:is(.svc3-card,.pop3-card)::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.08);pointer-events:none;transition:box-shadow .6s var(--ease)}
:is(.svc3-card,.pop3-card)::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;background:radial-gradient(520px circle at var(--px,50%) var(--py,0%),rgba(255,255,255,.1),transparent 42%);opacity:0;transition:opacity .5s var(--ease)}
:is(.svc3-card,.pop3-card):hover{box-shadow:0 40px 80px -46px rgba(0,0,0,1),0 0 0 1px rgba(255,255,255,.04)}
:is(.svc3-card,.pop3-card):hover::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 1px 0 rgba(255,255,255,.14)}
:is(.svc3-card,.pop3-card).tilting::before{opacity:1}
:is(.svc3-card,.pop3-card):focus-visible{outline:2px solid var(--accent);outline-offset:4px}
:is(.svc3-card,.pop3-card,.pl3-head) .ph{position:relative;display:block;overflow:hidden;background:#0b0d0f}
:is(.svc3-card,.pop3-card,.pl3-head) .ph img{display:block;width:100%;height:100%;object-fit:cover;transform:translate3d(var(--ix,0px),var(--iy,0px),0) scale(1.08);transition:transform 1.2s var(--ease)}
:is(.svc3-card,.pop3-card).tilting .ph img{transition:transform .25s linear}
:is(.svc3-card,.pop3-card) .go .ic{display:inline-grid;place-items:center}
:is(.svc3-card,.pop3-card) .go .ic svg{width:15px;height:15px;transition:transform .5s var(--ease)}
:is(.svc3-card,.pop3-card):hover .go .ic svg{transform:translateX(4px)}

/* three directions */
.svc3-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.svc3-grid > li{display:flex}
.svc3-card{border-radius:28px}
.svc3-card .ph{aspect-ratio:4 / 3}
.svc3-card .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,6,7,.2) 0%,rgba(5,6,7,0) 28%,rgba(5,6,7,0) 52%,#0a0c0e 100%)}
.svc3-card .n{position:absolute;left:20px;top:18px;z-index:1;padding:7px 11px;border-radius:999px;background:rgba(5,6,7,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);font:500 11.5px/1 var(--mono);letter-spacing:.1em;color:#f1f4f6}
.svc3-card .tx{flex:1;display:flex;flex-direction:column;gap:14px;padding:0 30px 30px;margin-top:-10px;position:relative;z-index:1}
.svc3-card h3{margin:0;font-size:15px;font-weight:600;line-height:1;letter-spacing:.22em;text-transform:uppercase;color:#8e979f}
.svc3-card h3 span{display:block;margin-top:12px;font-size:27px;font-weight:600;letter-spacing:-.03em;line-height:1.1;text-transform:none;color:#f3f5f7}
.svc3-card .sp{font-size:15.5px;line-height:1.6;color:#a3abb3}
.prods{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.prods li{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);font-size:13px;font-weight:500;color:#dfe4e8}
.prods li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px rgba(var(--accent-rgb),.8)}
.svc3-card .go{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:500;color:#f1f4f6}

/* six steps: glass orbs on a rail; a pulse runs along it; the orbs light up one by one */
.how3 > .wrap{display:block}
.how3-side{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:0 48px;margin-bottom:64px}
.how3-side > :not(.btn){grid-column:1}
.how3-side .btn{grid-column:2;grid-row:1 / span 3;align-self:end;margin:0}
.how3-steps{--o:76px;position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.how3-steps::before{content:"";position:absolute;left:calc(100% / 12);right:calc(100% / 12);top:calc(var(--o) / 2);height:1px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.16) 8%,rgba(255,255,255,.16) 92%,rgba(255,255,255,0))}
.how3-steps::after{content:"";position:absolute;left:calc(100% / 12);top:calc(var(--o) / 2 - 1px);width:140px;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.9),transparent);filter:blur(.5px);opacity:0}
.how3-steps li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:0}
.how3-steps .orb{position:relative;z-index:1;display:grid;place-items:center;width:var(--o);height:var(--o);border-radius:50%;color:#f5f7f8;background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.5) 0,rgba(255,255,255,.1) 18%,rgba(255,255,255,.02) 44%),radial-gradient(circle at 50% 115%,rgba(255,255,255,.12),transparent 58%),#0c0e10;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 -14px 24px rgba(0,0,0,.65),0 26px 34px -18px rgba(0,0,0,1);transition:box-shadow 1s var(--ease),color 1s var(--ease)}
.how3-steps .orb::after{content:"";position:absolute;left:18%;right:18%;bottom:-20px;height:10px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.8),transparent)}
.how3-steps .orb .ico{width:26px;height:26px}
.how3-steps .num{margin:26px 0 8px;font:500 11.5px/1 var(--mono);letter-spacing:.16em;color:#6f7880;order:2}
.how3-steps .orb{order:1}
.how3-steps .tx{order:3}
.how3-steps h3{margin:0 0 8px;font-size:18px;font-weight:600;letter-spacing:-.015em;color:#f3f5f7}
.how3-steps p{margin:0;font-size:14.5px;line-height:1.55;color:#97a0a8}
.how3-steps.in .orb{color:#fff;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.55),inset 0 -14px 24px rgba(0,0,0,.6),0 0 0 6px rgba(var(--accent-rgb),.05),0 0 34px -6px rgba(var(--accent-rgb),.55),0 26px 34px -18px rgba(0,0,0,1)}
.how3-steps.in li:nth-child(2) .orb{transition-delay:.18s}.how3-steps.in li:nth-child(3) .orb{transition-delay:.36s}.how3-steps.in li:nth-child(4) .orb{transition-delay:.54s}
.how3-steps.in li:nth-child(5) .orb{transition-delay:.72s}.how3-steps.in li:nth-child(6) .orb{transition-delay:.9s}

/* four use cases */
.pop3-head{margin-bottom:34px;text-align:center}
.pop3-head h2{margin:0}
.pop3-all{display:flex;justify-content:center;margin:30px 0 0}
.pop3-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.pop3-grid > li{display:flex}
.pop3-card{border-radius:24px}
.pop3-card .ph{aspect-ratio:4 / 5}
.pop3-card .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,6,7,0) 40%,rgba(5,6,7,.92) 100%)}
.pop3-card .tag{position:absolute;left:14px;top:14px;z-index:1;padding:6px 11px;border-radius:999px;background:rgba(5,6,7,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#f1f4f6}
.pop3-card .tx{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;gap:5px;padding:20px 64px 22px 20px}
.pop3-card b{font-size:19px;font-weight:600;letter-spacing:-.02em;color:#f5f7f8}
.pop3-card .tx span{font-size:14.5px;line-height:1.4;color:#b5bdc4}
.pop3-card .go{position:absolute;right:18px;bottom:22px;z-index:2;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);color:#fff;transition:background .5s var(--ease),color .5s var(--ease)}
.pop3-card:hover .go{background:var(--accent);color:var(--accent-ink)}

/* prices at a glance */
.qp3-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.qp3-col{position:relative;padding:28px 28px 20px;border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012) 45%),#0a0c0e;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.07)}
.qp3-col h3{display:flex;align-items:center;gap:12px;margin:0 0 16px;font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#8e979f}
.qp3-col h3 .k{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);font:500 11px/1 var(--mono);letter-spacing:0;color:#f1f4f6}
.qp3-col ul{list-style:none;margin:0;padding:0}
.qp3-col li{position:relative;overflow:hidden;display:grid;grid-template-columns:auto minmax(12px,1fr) auto;align-items:baseline;gap:12px;padding:15px 0;border-top:1px solid rgba(255,255,255,.07)}
.qp3-col li::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.06) 50%,transparent 70%);transform:translateX(-110%);transition:transform 1.1s var(--ease)}
.qp3-col li:hover::after{transform:translateX(110%)}
.qp3-col li .nm{font-size:15.5px;font-weight:500;color:#eef1f4}
.qp3-col li .nm em{display:block;margin-top:6px;font-style:normal;font:500 10.5px/1.2 var(--mono);letter-spacing:.08em;color:var(--accent)}
.qp3-col li i{align-self:center;height:1px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 2px,transparent 2px 7px)}
.qp3-col li .pr{font-size:20px;font-weight:600;letter-spacing:-.025em;white-space:nowrap;font-variant-numeric:tabular-nums;color:#f5f7f8}
.qp3-col li .pr small{font-size:12.5px;font-weight:400;letter-spacing:0;color:#8e979f}
.qp3-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;margin-top:30px}
.qp3-foot p{margin:0;font-size:14.5px;color:#7a838b}

/* questions: neutral */
.pg-home .qa summary .tb{background:rgba(255,255,255,.05);color:#e6eaee;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}

/* closing band */
body.pg-home .final3{padding:16px 0 96px}
.final3 .box{position:relative;isolation:isolate;overflow:hidden;align-items:center;padding:64px;border-radius:32px;background:#08090b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.final3 .box-bg{position:absolute;inset:0;z-index:0}
.final3 .box-bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:75% 50%}
.final3 .box::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(5,6,7,.96) 0%,rgba(5,6,7,.8) 42%,rgba(5,6,7,.35) 100%)}
.final3 .box > :not(.box-bg){position:relative;z-index:2}
.final3 h2{max-width:12em}
.final3 .lede{margin:0;max-width:30em;font-size:18px;line-height:1.55;color:rgba(235,239,242,.8)}
.final3 .checks3{margin-top:24px}
.final3 .ctas{margin-top:30px}
.final3 .alt{margin-top:28px;color:#8e979f}
.final3 .box > div:last-child:not(.copy){padding:30px;border-radius:24px;background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.02));-webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.12),0 40px 80px -50px rgba(0,0,0,1)}
.final3-link .box{grid-template-columns:minmax(0,1fr);min-height:420px}

/* the offer page */
.pl3-head{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:center;gap:48px;margin-bottom:32px;padding:14px;border-radius:30px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.01) 55%),#0a0c0e;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.pl3-head .ph{aspect-ratio:16 / 10;border-radius:20px}
.pl3-head .ph img{border-radius:inherit;transform:scale(1.02)}
.pl3-head .tx{padding:10px 30px 10px 0}
.pl3-head .k{display:inline-grid;place-items:center;width:36px;height:36px;margin-bottom:18px;border-radius:50%;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);font:500 12px/1 var(--mono);color:#f1f4f6}
.pg-pr .pl3-head h2{margin:0 0 14px;font-size:15px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#8e979f}
.pg-pr .pl3-head h2 span{display:block;margin-top:12px;font-size:clamp(30px,3vw,44px);font-weight:600;letter-spacing:-.035em;line-height:1.05;text-transform:none;color:#f3f5f7}
.pl3-head p{margin:0;font-size:17px;line-height:1.6;color:#a3abb3;max-width:30em}
.pc3-grid{display:grid;gap:20px}
.pc3-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.pc3-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.pc3{position:relative;display:flex;flex-direction:column;gap:20px;padding:30px;border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01) 45%),#0a0c0e;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.07)}
.pc3.hot{box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.38),inset 0 1px 0 rgba(255,255,255,.08),0 40px 80px -55px rgba(var(--accent-rgb),.55)}
.pc3 header .st{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 12px;font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#6f7880}
.pc3 h3{margin:0;font-size:25px;font-weight:600;letter-spacing:-.025em;color:#f3f5f7}
.pc3 .price{margin:12px 0 0;font-size:46px;font-weight:600;line-height:1;letter-spacing:-.045em;font-variant-numeric:tabular-nums;color:#f5f7f8}
.pc3 .price small{font-size:15px;font-weight:400;letter-spacing:0;color:#8e979f}
.pc3 .price small.online{display:block;margin-top:8px;font-size:13.5px}
.pc3-rows{margin:0;display:grid;border-top:1px solid rgba(255,255,255,.07)}
.pc3-rows > div{display:grid;grid-template-columns:136px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.pc3-rows dt{padding-top:3px;font:500 10.5px/1.3 var(--mono);letter-spacing:.14em;color:#6f7880}
.pc3-rows dd{margin:0;font-size:15px;line-height:1.55;color:#a3abb3}
.pc3-rows .get dd{color:#eef1f4}
.pc3 .mtl{margin-top:2px}
.pc3 > .btn{align-self:flex-start;margin-top:auto}
.pc3.ws .desc{margin:0;font-size:15.5px;line-height:1.55;color:#e6eaee}
.pc3.ws .meta{margin:auto 0 0;font-size:13px;color:#6f7880}
.care3{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:20px;padding:28px;border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01)),#0a0c0e;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.care3 .lab{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;font:500 11px/1 var(--mono);letter-spacing:.16em;color:#cdd3d9}
.care3 .lab::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px rgba(var(--accent-rgb),.9)}
.care3 h3{margin:0 0 10px;font-size:25px;font-weight:600;letter-spacing:-.025em;color:#f3f5f7}
.care3 h3 span{color:#6f7880;font-weight:500}
.care3-head p{margin:0;font-size:15px;line-height:1.55;color:#a3abb3}
.care3-opt{padding:20px 22px;border-radius:18px;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.care3-opt .w{margin:0 0 10px;font:500 10.5px/1.2 var(--mono);letter-spacing:.14em;color:#6f7880}
.care3-opt .price{margin:0 0 12px;font-size:34px;font-weight:600;letter-spacing:-.04em;color:#f5f7f8}
.care3-opt .price small{font-size:14px;font-weight:400;letter-spacing:0;color:#8e979f}
.care3-opt p:last-child{margin:0;font-size:14.5px;line-height:1.55;color:#a3abb3}
.care3-swap{grid-column:1 / -1;margin:0;font-size:14px;color:#8e979f}
.pl3-foot{margin:24px 0 0;font-size:14.5px;color:#a3abb3}
.pl3-foot a{color:#f1f4f6;text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:3px}
.pl3-foot.vat{color:#6f7880;font-size:13.5px;max-width:60em}

@media (prefers-reduced-motion:no-preference){
  body.pg-home::after{animation:grain3 1.4s steps(6) infinite}
  .hero3-bg img{animation:kb4 32s ease-in-out infinite alternate}
  .hero3::after{animation:bloom3 9s ease-in-out infinite alternate}
  .motes i{animation:mote3 var(--d,14s) linear var(--t,0s) infinite}
  .hero3 h1 .ln > span{animation:ln3 1.3s var(--ease) both}
  .hero3 h1 .ln:nth-child(2) > span{animation-delay:.14s}
  .hero3 .hin{animation:hin4 1.2s var(--ease) both}
  .hero3 .hd2{animation-delay:.32s}.hero3 .hd3{animation-delay:.44s}.hero3 .hd4{animation-delay:.56s}
  .hero3 .eyebrow.hin{animation-delay:0s}
  .hero3-gains li{animation:gain4 1.1s var(--ease) both,float4 7s ease-in-out infinite}
  .hero3-gains li:nth-child(1){animation-delay:.6s,1.8s}.hero3-gains li:nth-child(2){animation-delay:.72s,2.6s}
  .hero3-gains li:nth-child(3){animation-delay:.84s,3.4s}.hero3-gains li:nth-child(4){animation-delay:.96s,4.2s}
  .how3-steps.in::after{animation:pulse4 5.5s cubic-bezier(.45,0,.2,1) 1.2s infinite}
  .how3-steps .orb{animation:bob4 6s ease-in-out infinite}
  .how3-steps li:nth-child(2) .orb{animation-delay:-1s}.how3-steps li:nth-child(3) .orb{animation-delay:-2s}
  .how3-steps li:nth-child(4) .orb{animation-delay:-3s}.how3-steps li:nth-child(5) .orb{animation-delay:-4s}.how3-steps li:nth-child(6) .orb{animation-delay:-5s}
  .pg-home .rv{opacity:0;transform:translateY(28px);filter:blur(10px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease),filter 1.2s var(--ease)}
  .pg-home .rv.in{opacity:1;transform:none;filter:none}
  .pg-home .rv:is(.svc3-grid > li,.pop3-grid > li){transform:translateY(40px) scale(.98)}
  .pg-home .rv.in:is(.svc3-grid > li,.pop3-grid > li){transform:none}
}
@keyframes grain3{0%{transform:translate(0,0)}20%{transform:translate(-18px,12px)}40%{transform:translate(14px,-20px)}60%{transform:translate(-10px,-8px)}80%{transform:translate(20px,16px)}100%{transform:translate(0,0)}}
@keyframes kb4{from{transform:scale(1.02)}to{transform:scale(1.1) translate3d(-1%,-.6%,0)}}
@keyframes bloom3{from{opacity:.65;transform:scale(.96)}to{opacity:1;transform:scale(1.04)}}
@keyframes mote3{0%{opacity:0;transform:translate3d(0,0,0)}12%{opacity:.75}70%{opacity:.5}100%{opacity:0;transform:translate3d(14px,-130px,0)}}
@keyframes ln3{from{transform:translateY(108%);filter:blur(8px)}to{transform:none;filter:none}}
@keyframes hin4{from{opacity:0;transform:translateY(16px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes gain4{from{opacity:0;transform:translate3d(24px,0,0) scale(.97);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes float4{0%,100%{translate:0 0}50%{translate:0 -5px}}
@keyframes bob4{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes pulse4{0%{opacity:0;left:calc(100% / 12)}12%{opacity:1}85%{opacity:1}100%{opacity:0;left:calc(100% - 100% / 12 - 140px)}}

@media (max-width:1100px){
  .pop3-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .how3-steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:48px}
  .how3-steps::before,.how3-steps::after{display:none}
  .care3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .care3-head{grid-column:1 / -1}
  .pc3-grid.three{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  body.pg-home .sec{padding:64px 0}
  .head3{margin-bottom:32px}
  .head3.split{grid-template-columns:minmax(0,1fr)}
  .hero3{min-height:0}
  .hero3::before{background:linear-gradient(180deg,rgba(5,6,7,.15) 0%,rgba(5,6,7,.7) 40%,#050607 72%)}
  .hero3::after{right:0;top:0;width:80%;height:45%}
  .hero3-bg img{object-position:60% 0%}
  .hero3 > .wrap{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:240px;padding-bottom:40px}
  .hero3-sub > .wrap{padding-top:210px}
  .hero3-gains{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .hero3-gains li{min-width:0;padding:9px 12px 9px 9px;font-size:13.5px;border-radius:15px}
  .hero3-gains .gi{width:30px;height:30px;border-radius:10px}
  .hero3-sectors .wrap{gap:8px 20px}
  .how3-side{grid-template-columns:minmax(0,1fr);margin-bottom:40px}
  .how3-side .btn{grid-column:1;grid-row:auto;justify-self:start;margin-top:24px}
  .svc3-grid{grid-template-columns:minmax(0,1fr)}
  .qp3-grid{grid-template-columns:minmax(0,1fr)}
  .final3 .box{grid-template-columns:minmax(0,1fr);padding:32px 20px;gap:28px;border-radius:26px}
  .final3 .box::after{background:linear-gradient(180deg,rgba(5,6,7,.65) 0%,rgba(5,6,7,.94) 45%)}
  .final3 .box > div:last-child:not(.copy){padding:22px 16px}
  .pl3-head{grid-template-columns:minmax(0,1fr);gap:18px;padding:10px}
  .pl3-head .tx{padding:4px 12px 14px}
  .pc3-grid.two{grid-template-columns:minmax(0,1fr)}
  .care3{grid-template-columns:minmax(0,1fr);padding:22px}
  .pc3{padding:24px 20px}
  .pc3-rows > div{grid-template-columns:minmax(0,1fr);gap:4px}
}
@media (max-width:640px){
  :is(.svc3-grid,.pop3-grid){grid-template-columns:none;grid-auto-flow:column;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:-20px;padding-inline:20px;scroll-padding-inline:20px;padding-bottom:6px}
  .svc3-grid{grid-auto-columns:86%}
  .pop3-grid{grid-auto-columns:74%}
  :is(.svc3-grid,.pop3-grid)::-webkit-scrollbar{display:none}
  :is(.svc3-grid,.pop3-grid) > li{scroll-snap-align:start}
  .pop3-all .btn{padding:9px 14px;font-size:14px}
  .how3-steps{--o:58px;grid-template-columns:minmax(0,1fr);row-gap:22px}
  .how3-steps li{display:grid;grid-template-columns:var(--o) minmax(0,1fr);grid-template-areas:"orb num" "orb tx";column-gap:18px;align-items:start;text-align:left}
  .how3-steps .orb{grid-area:orb}
  .how3-steps .num{grid-area:num;margin:4px 0 6px}
  .how3-steps .tx{grid-area:tx}
  .how3-steps .orb .ico{width:22px;height:22px}
}
.hero3-copy{max-width:780px}
.hero3 h1{font-size:clamp(44px,5.3vw,78px)}
.how3-side .eyebrow,.head3.split .eyebrow{justify-self:start}
@media (max-width:640px){.hero3 h1{font-size:clamp(34px,9.4vw,42px)}}
/* ============================================================================================
   Landing v5 (15 Oct 2026). Alex on v4: "imaginile ... nu transmit deloc ce reprezinta aistap.nl ... NU ARE IDENTITATE
   ... NOI AJUTAM COMPANIILE SA ADOPTE AI SI SA AUTOMATIZEZE". Identity = the product at work: the hero shows the approved
   diagram in a glass window that leans in depth over a quiet floor of light; every picture is a screen with AI work in
   a real business; "Zo werkt het" is Alex's picture: numbered circles on a line, a card with a picture per step.
   ============================================================================================ */
.hero5{min-height:clamp(680px,92vh,900px);background:radial-gradient(1000px 620px at 76% 42%,rgba(var(--accent-rgb),.09),transparent 62%),radial-gradient(800px 500px at 8% 0%,rgba(255,255,255,.035),transparent 60%),#050607}
.hero5::before,.hero5::after{display:none}
.hero5-sky{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hero5-sky .glow{position:absolute;right:6%;top:12%;width:50%;height:72%;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--accent-rgb),.16),transparent);filter:blur(30px)}
.hero5-sky .floor{position:absolute;left:-20%;right:-20%;bottom:-8%;height:52%;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:72px 72px;transform:perspective(620px) rotateX(64deg);transform-origin:50% 100%;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 45%,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 45%,#000 70%,transparent 100%);opacity:.55}
.hero5 > .wrap{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:56px;padding-top:84px;padding-bottom:84px}
.hero5 .hero3-copy{max-width:600px;transform:none}
.hero5 h1{font-size:clamp(40px,4.3vw,62px)}
.console5{position:relative;perspective:1700px;transform:translate3d(calc(var(--mx,0) * 10px),calc(var(--my,0) * 7px),0);transition:transform 1.4s var(--ease)}
.console5-frame{position:relative;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.02) 40%),rgba(10,13,15,.72);-webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.22),0 70px 120px -60px rgba(0,0,0,1),0 30px 60px -40px rgba(var(--accent-rgb),.35);transform:rotateY(calc(-9deg + var(--ry,0deg))) rotateX(calc(4deg + var(--rx,0deg)));transform-style:preserve-3d;transition:transform 1.1s var(--ease)}
.console5-frame.tilting{transition:transform .2s linear}
.console5-frame::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,0) 28%,rgba(255,255,255,0) 72%,rgba(255,255,255,.04) 100%)}
.console5-bar{display:flex;align-items:center;gap:7px;padding:13px 18px;border-bottom:1px solid rgba(255,255,255,.08);font:500 11.5px/1 var(--mono);letter-spacing:.06em;color:#8e979f}
.console5-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.14)}
.console5-bar span{margin-left:10px}
.console5-bar .live{margin-left:auto;display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:999px;background:rgba(var(--accent-rgb),.1);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.32);color:var(--accent);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:10.5px}
.console5-bar .live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px rgba(var(--accent-rgb),.9)}
.console5-body{padding:20px 20px 16px}
.console5-body .hd{margin:0}
.console5-floor{position:absolute;left:8%;right:8%;bottom:-54px;height:70px;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--accent-rgb),.25),transparent);filter:blur(20px);pointer-events:none}
.gains5{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:12px 40px}
.gains5 li{display:inline-flex;align-items:center;gap:11px;font-size:15px;font-weight:500;color:#e4e9ed}
.gains5 .gi{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);color:var(--accent)}
.gains5 .ico{width:17px;height:17px}
@media (prefers-reduced-motion:no-preference){
  .hero5-sky .glow{animation:bloom3 10s ease-in-out infinite alternate}
  .hero5-sky .floor{animation:floor5 14s linear infinite}
  .console5{animation:hin4 1.4s var(--ease) .25s both}
  .console5-frame{animation:float5 9s ease-in-out 1.6s infinite}
  .console5-bar .live::before{animation:live5 1.8s ease-in-out infinite}
}
@keyframes floor5{from{background-position:0 0}to{background-position:0 72px}}
@keyframes float5{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes live5{0%,100%{opacity:1}50%{opacity:.35}}

/* zo werkt het: Alex's picture */
.how5 > .wrap{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:40px 72px;align-items:start}
.how5 .how3-side{display:block;position:sticky;top:110px;margin:0}
.how5 .how3-side .btn{margin-top:30px}
.how5-list{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:14px}
.how5-list::before{content:"";position:absolute;left:21px;top:40px;bottom:40px;width:1px;background:linear-gradient(180deg,rgba(var(--accent-rgb),.6),rgba(255,255,255,.12) 22%,rgba(255,255,255,.12) 78%,rgba(var(--accent-rgb),.6))}
.how5-list li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:18px;align-items:center}
.how5-list .num{position:relative;z-index:1;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#0a0c0e;box-shadow:inset 0 0 0 1.5px rgba(var(--accent-rgb),.6),0 0 0 6px #070809,0 0 22px -4px rgba(var(--accent-rgb),.5);font:600 13px/1 var(--mono);color:var(--accent)}
.how5-list .card5{display:grid;grid-template-columns:176px minmax(0,1fr);gap:22px;align-items:center;padding:10px 24px 10px 10px;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012)),#0a0c0e;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.06);transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.how5-list li:hover .card5{transform:translateX(6px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 1px 0 rgba(255,255,255,.08),0 30px 60px -40px rgba(0,0,0,1)}
.how5-list .ph{display:block;aspect-ratio:3 / 2;border-radius:13px;overflow:hidden;background:#0b0d0f;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.how5-list .ph img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.how5-list li:hover .ph img{transform:scale(1.06)}
.how5-list h3{margin:0 0 6px;font-size:19px;font-weight:600;letter-spacing:-.015em;color:#f3f5f7}
.how5-list p{margin:0;font-size:15px;line-height:1.5;color:#9aa3ab}
@media (max-width:1100px){
  .hero5 > .wrap{grid-template-columns:minmax(0,1fr);padding-top:64px}
  .console5{max-width:680px}
  .how5 > .wrap{grid-template-columns:minmax(0,1fr)}
  .how5 .how3-side{position:static}
}
@media (max-width:860px){
  .hero5 > .wrap{padding-top:40px;padding-bottom:56px;gap:36px}
  .console5-frame{transform:none}
  .gains5{gap:10px 20px}
  .gains5 li{font-size:13.5px}
}
@media (max-width:640px){
  .how5-list li{grid-template-columns:36px minmax(0,1fr);gap:12px}
  .how5-list::before{left:17px}
  .how5-list .num{width:36px;height:36px;font-size:12px}
  .how5-list .card5{grid-template-columns:minmax(0,1fr);gap:12px;padding:10px 10px 16px}
  .how5-list .tx{padding:0 8px}
  .console5-body{padding:14px 12px 12px}
}
/* the diagram was drawn for about 700px; in the window it keeps that layout and is shown smaller (nothing in it is
   measured by script, so zoom is safe) */
@media (min-width:1101px){
  .hero5 > .wrap{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px}
  .console5-body .hd{zoom:.8}
}
@media (min-width:861px) and (max-width:1100px){
  .console5-body .hd{zoom:.92}
}
@media (min-width:1101px){.hero5 h1{font-size:clamp(40px,3.9vw,56px)}}
/* the three directions carry silent loops (16:9) */
.svc3-card .ph{aspect-ratio:16 / 10}
.svc3-card .ph video{display:block;width:100%;height:100%;object-fit:cover;transform:translate3d(var(--ix,0px),var(--iy,0px),0) scale(1.05);transition:transform 1.2s var(--ease)}
.svc3-card.tilting .ph video{transition:transform .25s linear}
/* ============================================================================================
   Use-case pages with photographs (15 Oct 2026): the hero carries the photograph of the use case (a screen doing that
   work in a real business); the played diagram sits right under it in the glass window of the home page; the cards
   of the hub and of "more examples" carry the photograph dimmed behind their small picture.
   ============================================================================================ */
.uc-photo{grid-area:fig;position:relative;margin:0;aspect-ratio:3 / 2;border-radius:26px;overflow:hidden;background:#0b0d0f;box-shadow:0 60px 110px -60px rgba(0,0,0,1),0 0 0 1px rgba(255,255,255,.06);transform:perspective(1700px) rotateY(-7deg) rotateX(2deg);transform-origin:40% 50%}
.uc-photo img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.03)}
.uc-photo::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.2);background:linear-gradient(115deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,0) 30%),linear-gradient(180deg,rgba(5,6,7,0) 62%,rgba(5,6,7,.35) 100%)}
.uc-hero .uc-photo{order:2}
@media (prefers-reduced-motion:no-preference){
  .uc-photo{animation:hin 1.2s var(--ease) .18s both}
  .uc-photo img{animation:kb4 30s ease-in-out infinite alternate}
}
.pg-uc .sec.uc-console{padding:36px 0 64px;text-align:center}
.uc-console .eyebrow{margin-bottom:22px}
.uc-console .console5{max-width:900px;margin:0 auto;text-align:left;transform:none}
.uc-console .console5-frame{transform:rotateX(calc(6deg + var(--rx,0deg))) rotateY(var(--ry,0deg))}
.uc-pic{position:relative;isolation:isolate;overflow:hidden}
.uc-pic .pc-photo{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;opacity:.62;transition:transform 1s var(--ease),opacity .6s var(--ease)}
.uc-pic:has(.pc-photo)::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(6,8,9,.9) 0%,rgba(6,8,9,.55) 48%,rgba(6,8,9,.25) 100%)}
.uc-card:hover .uc-pic .pc-photo{transform:scale(1.05);opacity:.75}
@media (max-width:860px){
  .uc-photo{transform:none;border-radius:20px}
  .uc-console .console5-frame{transform:none}
}
.uc-pic .pc-photo{opacity:.85}
.uc-pic:has(.pc-photo)::before{background:linear-gradient(90deg,rgba(6,8,9,.86) 0%,rgba(6,8,9,.45) 45%,rgba(6,8,9,.12) 100%)}
.uc-card:hover .uc-pic .pc-photo{opacity:1}
/* ============================================================================================
   "Zo werkt het": six small animated screens instead of photographs (15 Oct 2026). Each draws its step in the
   product's own language (glass tiles, the AIstap mark, mint for what runs by itself, amber for what a person
   decides). Sizes in container units (cqw), so the same screen works at 220px and at full phone width.
   ============================================================================================ */
.how5-list .card5{grid-template-columns:220px minmax(0,1fr)}
.ph.anim{position:relative;container-type:inline-size;background:radial-gradient(70cqw 46cqw at 50% 40%,rgba(var(--accent-rgb),.09),transparent 70%),linear-gradient(180deg,#0e1215,#080a0c)}
.ph.anim > *{position:absolute}
.ph.anim i,.ph.anim b{font-style:normal}
.ph.anim .ico{width:100%;height:100%}
.how5-list li:not(.in) .ph.anim *,.how5-list li:not(.in) .ph.anim *::before,.how5-list li:not(.in) .ph.anim *::after{animation-play-state:paused}
.anim .glass{background:#11161a}
/* 1 kennismaking: a call, you and AIstap, the voice moving between the two; thirty minutes run round */
.a1 .tile{top:7cqw;width:41cqw;height:39cqw;border-radius:3.4cqw;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.a1 .t1{left:6cqw;animation:speakA 6s ease-in-out infinite}
.a1 .t2{right:6cqw;animation:speakB 6s ease-in-out infinite}
.a1 .av{position:absolute;left:50%;top:7cqw;display:grid;place-items:center;width:14cqw;height:14cqw;margin-left:-7cqw;border-radius:50%;background:rgba(255,255,255,.08);color:#e6ebef;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.a1 .av .ico{width:7cqw;height:7cqw}
.a1 .t2 .av{background:rgba(var(--accent-rgb),.14);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.42)}
.a1 .av .mark{width:8cqw;height:8cqw}
.a1 .eq{position:absolute;left:50%;bottom:6cqw;display:flex;align-items:flex-end;justify-content:space-between;width:16cqw;height:9cqw;margin-left:-8cqw}
.a1 .eq i{display:block;width:2cqw;height:100%;border-radius:1cqw;background:#e6ebef;transform-origin:50% 100%;transform:scaleY(.25);animation:eq1 .72s ease-in-out infinite alternate}
.a1 .eq i:nth-child(2){animation-delay:-.24s}.a1 .eq i:nth-child(3){animation-delay:-.5s}.a1 .eq i:nth-child(4){animation-delay:-.1s}.a1 .eq i:nth-child(5){animation-delay:-.38s}
.a1 .t2 .eq i{background:var(--accent)}
.a1 .t1 .eq{animation:onA 6s steps(1,end) infinite}
.a1 .t2 .eq{animation:onB 6s steps(1,end) infinite}
.a1 .timer{left:50%;bottom:4cqw;display:flex;align-items:center;gap:1.8cqw;padding:1.3cqw 3.4cqw 1.3cqw 1.3cqw;border-radius:99cqw;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transform:translateX(-50%)}
.a1 .timer svg{width:6.4cqw;height:6.4cqw;transform:rotate(-90deg)}
.a1 .timer .tr{fill:none;stroke:rgba(255,255,255,.15);stroke-width:4}
.a1 .timer .tp{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-dasharray:94.3;stroke-dashoffset:94.3;animation:ring1 6s linear infinite}
.a1 .timer b{font:600 4.2cqw/1 var(--mono);color:#e6ebef}
@keyframes speakA{0%,44%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.34),0 0 7cqw -2cqw rgba(255,255,255,.22)}52%,100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}}
@keyframes speakB{0%,48%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}56%,94%{box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.65),0 0 8cqw -2cqw rgba(var(--accent-rgb),.6)}100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}}
@keyframes onA{0%{opacity:1}50%{opacity:.16}}
@keyframes onB{0%{opacity:.16}50%{opacity:1}}
@keyframes eq1{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
@keyframes ring1{to{stroke-dashoffset:0}}
/* 2 analyse: your process, a scan passes, time shows per step, the bottleneck turns amber, an opportunity rises */
.a2 .ln{left:14cqw;right:14cqw;top:21.8cqw;height:.45cqw;background:rgba(255,255,255,.16)}
.a2 .n{top:14cqw;display:grid;place-items:center;width:16cqw;height:16cqw;margin-left:-8cqw;border-radius:3.6cqw;background:#11161a;color:#cfd6dc;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.a2 .n .ico{width:7.4cqw;height:7.4cqw}
.a2 .n1,.a2 .b1{left:14cqw}.a2 .n2,.a2 .b2{left:38cqw}.a2 .n3,.a2 .b3{left:62cqw}.a2 .n4,.a2 .b4{left:86cqw}
.a2 .n3{animation:hot2 7s ease-in-out infinite}
.a2 .tb{top:36cqw;width:16cqw;height:2.2cqw;margin-left:-8cqw;border-radius:2cqw;overflow:hidden;background:rgba(255,255,255,.08)}
.a2 .tb::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#cfd6dc;opacity:.75;transform-origin:0 50%;transform:scaleX(0);animation:tbar2 7s var(--ease) infinite}
.a2 .b1::after{--w:.32;animation-delay:.35s}.a2 .b2::after{--w:.5;animation-delay:.8s}.a2 .b3::after{--w:1;animation-delay:1.25s;background:var(--amber);opacity:1}.a2 .b4::after{--w:.26;animation-delay:1.7s}
.a2 .scan{top:5cqw;bottom:22cqw;left:-14cqw;width:12cqw;background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.38),transparent);animation:scan2 7s ease-in-out infinite}
.a2 .spark{left:62cqw;top:43.5cqw;display:grid;place-items:center;width:11cqw;height:11cqw;margin-left:-5.5cqw;border-radius:50%;background:var(--accent);color:var(--accent-ink);box-shadow:0 0 6cqw -1cqw rgba(var(--accent-rgb),.9);opacity:0;transform:translateY(3cqw) scale(.6);animation:spark2 7s var(--ease) infinite}
.a2 .spark .ico{width:5.6cqw;height:5.6cqw}
@keyframes scan2{0%{left:-14cqw;opacity:0}6%{opacity:1}42%{left:100cqw;opacity:1}43%,100%{left:100cqw;opacity:0}}
@keyframes tbar2{0%,6%{transform:scaleX(0)}26%,90%{transform:scaleX(var(--w))}100%{transform:scaleX(0)}}
@keyframes hot2{0%,30%,100%{color:#cfd6dc;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}38%,90%{color:var(--amber);box-shadow:inset 0 0 0 1px rgba(245,181,77,.85),0 0 0 1.4cqw rgba(245,181,77,.12),0 0 9cqw -1cqw rgba(245,181,77,.6)}}
@keyframes spark2{0%,50%{opacity:0;transform:translateY(3cqw) scale(.6)}58%,90%{opacity:1;transform:none}100%{opacity:0;transform:scale(.8)}}
/* 3 voorstel: the plan writes itself, a fixed price locks in, it is signed, done */
.a3 .doc{left:8cqw;top:7cqw;width:46cqw;height:53cqw;border-radius:3cqw;background:linear-gradient(180deg,#f2f5f7,#dde3e8);box-shadow:0 3cqw 9cqw -3cqw rgba(0,0,0,.95)}
.a3 .l{position:absolute;left:5cqw;height:2.4cqw;border-radius:2cqw;background:#9ea9b2;transform-origin:0 50%;transform:scaleX(0);animation:line3 7s var(--ease) infinite}
.a3 .l1{top:6cqw;width:24cqw;background:#33404a}.a3 .l2{top:13.5cqw;width:35cqw;animation-delay:.25s}.a3 .l3{top:19.5cqw;width:31cqw;animation-delay:.5s}.a3 .l4{top:25.5cqw;width:21cqw;animation-delay:.75s}
.a3 .sig{position:absolute;left:5cqw;bottom:6cqw;width:30cqw;height:8cqw}
.a3 .sig path{fill:none;stroke:#1d2730;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:130;stroke-dashoffset:130;animation:sign3 7s ease-in-out infinite}
.a3 .tag{left:60cqw;top:12cqw;display:flex;align-items:center;justify-content:center;gap:2.4cqw;width:32cqw;height:18cqw;border-radius:3.4cqw;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);color:#f3f5f7;opacity:0;transform:translateX(7cqw);animation:tag3 7s var(--ease) infinite}
.a3 .tag b{font:700 9cqw/1 var(--sans)}
.a3 .tag .ico{width:6.4cqw;height:6.4cqw;color:var(--accent)}
.a3 .ok{left:69cqw;top:36cqw;display:grid;place-items:center;width:16cqw;height:16cqw;border-radius:50%;background:var(--accent);color:var(--accent-ink);box-shadow:0 0 8cqw -2cqw rgba(var(--accent-rgb),.9);opacity:0;transform:scale(.4);animation:ok3 7s cubic-bezier(.2,1.45,.4,1) infinite}
.a3 .ok .ico{width:8cqw;height:8cqw}
@keyframes line3{0%,5%{transform:scaleX(0)}20%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes tag3{0%,30%{opacity:0;transform:translateX(7cqw)}40%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes sign3{0%,46%{stroke-dashoffset:130}66%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:130}}
@keyframes ok3{0%,68%{opacity:0;transform:scale(.4)}74%,92%{opacity:1;transform:none}100%{opacity:0;transform:scale(.85)}}
/* 4 pilot: one mail goes in, AIstap reads it, the first row lands in your system, version one */
.a4 .src{left:5cqw;top:24cqw;display:grid;place-items:center;width:16cqw;height:16cqw;border-radius:3.6cqw;background:#11161a;color:#e6ebef;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.a4 .src .ico{width:7.4cqw;height:7.4cqw}
.a4 .wire{top:31.8cqw;height:.45cqw;background:rgba(255,255,255,.18)}
.a4 .w1{left:21cqw;width:16cqw}.a4 .w2{left:61cqw;width:9cqw}
.a4 .dot{top:30.9cqw;width:2.3cqw;height:2.3cqw;margin-left:-1.15cqw;border-radius:50%;background:#eafff6;box-shadow:0 0 2.4cqw rgba(var(--accent-rgb),.95);opacity:0}
.a4 .d1{animation:dot4a 6s linear infinite}.a4 .d2{animation:dot4b 6s linear infinite}
.a4 .node{left:37cqw;top:20cqw;display:grid;place-items:center;width:24cqw;height:24cqw;border-radius:5cqw;background:radial-gradient(circle at 50% 40%,#173229,#0c1311);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.38);animation:node4 6s ease-in-out infinite}
.a4 .node .mark{width:10.5cqw;height:10.5cqw}
.a4 .sys{left:70cqw;top:12cqw;display:flex;flex-direction:column;gap:2.2cqw;width:25cqw;height:42cqw;padding:3cqw 2.6cqw;border-radius:3cqw;background:linear-gradient(180deg,#f2f5f7,#dde3e8);box-sizing:border-box}
.a4 .sh{display:block;width:6.4cqw;height:6.4cqw;color:#33404a}
.a4 .row{display:flex;align-items:center;justify-content:flex-end;height:5.4cqw;border-radius:1.5cqw;background:#c7d0d7;color:transparent}
.a4 .row .ico{width:4.2cqw;height:4.2cqw;margin-right:1cqw}
.a4 .r1{animation:row4 6s var(--ease) infinite}
.a4 .v1{right:4cqw;top:3.6cqw;padding:1.3cqw 2.6cqw;border-radius:99cqw;background:rgba(var(--accent-rgb),.12);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.42);font:600 3.8cqw/1 var(--mono);color:var(--accent)}
@keyframes dot4a{0%,4%{left:21cqw;opacity:0}7%{opacity:1}27%{left:36.5cqw;opacity:1}29%,100%{left:36.5cqw;opacity:0}}
@keyframes dot4b{0%,52%{left:61cqw;opacity:0}54%{opacity:1}63%{left:69.5cqw;opacity:1}65%,100%{left:69.5cqw;opacity:0}}
@keyframes node4{0%,27%,62%,100%{box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.38)}34%,50%{box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.85),0 0 0 1.6cqw rgba(var(--accent-rgb),.1),0 0 11cqw -2cqw rgba(var(--accent-rgb),.75)}}
@keyframes row4{0%,62%,100%{background:#c7d0d7;color:transparent}70%,94%{background:var(--accent);color:var(--accent-ink)}}
/* 5 implementatie: from one node to more processes, then the team gets it */
.a5 .spokes{left:0;top:0;width:100%;height:100%}
.a5 .spokes path{fill:none;stroke:rgba(var(--accent-rgb),.6);stroke-width:.55;stroke-dasharray:42;stroke-dashoffset:42;animation:spoke5 7s ease-out infinite}
.a5 .spokes .s2{animation-delay:.4s}.a5 .spokes .s3{animation-delay:.8s}.a5 .spokes .s4{animation-delay:1.2s}
.a5 .node{left:50cqw;top:27cqw;display:grid;place-items:center;width:20cqw;height:20cqw;margin:-10cqw 0 0 -10cqw;border-radius:5cqw;background:radial-gradient(circle at 50% 40%,#173229,#0c1311);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.55),0 0 9cqw -2cqw rgba(var(--accent-rgb),.6)}
.a5 .node .mark{width:9cqw;height:9cqw}
.a5 .sat{display:grid;place-items:center;width:14cqw;height:14cqw;margin:-7cqw 0 0 -7cqw;border-radius:3.6cqw;background:#11161a;color:#cfd6dc;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);opacity:.32;animation:sat5 7s var(--ease) infinite}
.a5 .sat .ico{width:6.6cqw;height:6.6cqw}
.a5 .sat.s1{left:15cqw;top:13cqw;animation-delay:.3s}.a5 .sat.s2{left:85cqw;top:13cqw;animation-delay:.7s}.a5 .sat.s3{left:15cqw;top:44cqw;animation-delay:1.1s}.a5 .sat.s4{left:85cqw;top:44cqw;animation-delay:1.5s}
.a5 .team{left:50cqw;bottom:4cqw;display:flex;gap:2.2cqw;transform:translateX(-50%)}
.a5 .team i{display:grid;place-items:center;width:8.4cqw;height:8.4cqw;border-radius:50%;background:rgba(255,255,255,.06);color:#cfd6dc;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);animation:mate5 7s var(--ease) infinite}
.a5 .team .ico{width:4.6cqw;height:4.6cqw}
.a5 .team i:nth-child(2){animation-delay:.35s}.a5 .team i:nth-child(3){animation-delay:.7s}
@keyframes spoke5{0%,8%{stroke-dashoffset:42}28%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:42}}
@keyframes sat5{0%,14%,100%{opacity:.32;color:#cfd6dc;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}30%,90%{opacity:1;color:var(--accent);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.6),0 0 7cqw -2cqw rgba(var(--accent-rgb),.6)}}
@keyframes mate5{0%,56%,100%{background:rgba(255,255,255,.06);color:#cfd6dc}66%,92%{background:var(--accent);color:var(--accent-ink);box-shadow:0 0 6cqw -1cqw rgba(var(--accent-rgb),.85)}}
/* 6 ondersteuning: it keeps running, an alert is handled, month by month it gets better */
.a6 .chart{left:6cqw;top:7cqw;width:60cqw;height:35cqw;border-radius:3cqw;overflow:hidden;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.a6 .chart svg{position:absolute;inset:0;width:100%;height:100%}
.a6 .line{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:165;stroke-dashoffset:165;animation:draw6 6s ease-in-out infinite}
.a6 .area{fill:rgba(var(--accent-rgb),.13);opacity:0;animation:area6 6s ease-in-out infinite}
.a6 .st{left:71cqw;top:8cqw;display:flex;flex-direction:column;gap:3.4cqw}
.a6 .sd{position:relative;display:block;width:22cqw;height:6.4cqw;border-radius:1.8cqw;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.a6 .sd::before{content:"";position:absolute;left:1.9cqw;top:50%;width:2.6cqw;height:2.6cqw;margin-top:-1.3cqw;border-radius:50%;background:var(--accent);box-shadow:0 0 2.2cqw rgba(var(--accent-rgb),.9)}
.a6 .sd::after{content:"";position:absolute;left:6.4cqw;right:2.2cqw;top:50%;height:1.3cqw;margin-top:-.65cqw;border-radius:1cqw;background:rgba(255,255,255,.17)}
.a6 .k2::before{animation:alert6 6s ease-in-out infinite}
.a6 .fix{left:89cqw;top:16.6cqw;display:grid;place-items:center;width:7.6cqw;height:7.6cqw;border-radius:50%;background:var(--accent);color:var(--accent-ink);opacity:0;transform:scale(.4);animation:fix6 6s cubic-bezier(.2,1.45,.4,1) infinite}
.a6 .fix .ico{width:4.4cqw;height:4.4cqw}
.a6 .bars{left:8cqw;bottom:5cqw;display:flex;align-items:flex-end;gap:2.2cqw;height:14cqw}
.a6 .bars i{display:block;width:5.4cqw;border-radius:1.2cqw 1.2cqw 0 0;background:rgba(255,255,255,.2);transform-origin:50% 100%;transform:scaleY(.15);animation:grow6 6s var(--ease) infinite}
.a6 .bars i:nth-child(1){height:40%}.a6 .bars i:nth-child(2){height:56%;animation-delay:.15s}.a6 .bars i:nth-child(3){height:76%;animation-delay:.3s}.a6 .bars i:nth-child(4){height:100%;animation-delay:.45s;background:var(--accent)}
@keyframes draw6{0%{stroke-dashoffset:165}45%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:165}}
@keyframes area6{0%,30%,100%{opacity:0}50%,92%{opacity:1}}
@keyframes alert6{0%,30%,64%,100%{background:var(--accent);box-shadow:0 0 2.2cqw rgba(var(--accent-rgb),.9)}36%,58%{background:var(--amber);box-shadow:0 0 2.8cqw rgba(245,181,77,.95)}}
@keyframes fix6{0%,58%{opacity:0;transform:scale(.4)}64%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:scale(.85)}}
@keyframes grow6{0%,55%,100%{transform:scaleY(.15)}75%,94%{transform:scaleY(1)}}
/* reduce motion: every screen stands still on its finished picture */
@media (prefers-reduced-motion:reduce){
  .ph.anim *,.ph.anim *::before,.ph.anim *::after{animation:none!important}
  .a1 .tp{stroke-dashoffset:30}.a1 .t2{box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.65)}.a1 .t1 .eq{opacity:.16}.a1 .eq i{transform:scaleY(.7)}
  .a2 .tb::after{transform:scaleX(var(--w))}.a2 .n3{color:var(--amber);box-shadow:inset 0 0 0 1px rgba(245,181,77,.85)}.a2 .spark{opacity:1;transform:none}.a2 .scan{display:none}
  .a3 .l{transform:none}.a3 .sig path{stroke-dashoffset:0}.a3 .tag,.a3 .ok{opacity:1;transform:none}
  .a4 .r1{background:var(--accent);color:var(--accent-ink)}.a4 .dot{display:none}
  .a5 .spokes path{stroke-dashoffset:0}.a5 .sat{opacity:1;color:var(--accent)}.a5 .team i{background:var(--accent);color:var(--accent-ink)}
  .a6 .line{stroke-dashoffset:0}.a6 .area{opacity:1}.a6 .bars i{transform:none}
}
@media (max-width:640px){.how5-list .card5{grid-template-columns:minmax(0,1fr)}}
/* ============================================================================================
   "Zo werkt het" v6 (15 Oct 2026): a product tour. Six step buttons; one glass window where the active step plays as a
   scene with real words. Timings come from data-t (seconds), copied to --t by /home3.js; .play starts a scene. Without
   script or with "reduce motion": the finished picture of each scene.
   ============================================================================================ */
.how6 i,.how6 em{font-style:normal}
.how6-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:28px;align-items:start}
.how6-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.how6-step{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;align-items:center;width:100%;padding:14px 18px 14px 14px;border:0;border-radius:18px;background:rgba(255,255,255,.02);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);color:inherit;font:inherit;text-align:left;cursor:pointer;overflow:hidden;transition:background .4s var(--ease),box-shadow .4s var(--ease)}
.how6-step:hover{background:rgba(255,255,255,.045)}
.how6-step:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.how6-step.on{background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(255,255,255,.17),0 24px 50px -36px rgba(0,0,0,1)}
.how6-step .num{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#0a0c0e;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18);font:600 12.5px/1 var(--mono);color:#8e979f;transition:all .4s var(--ease)}
.how6-step.on .num{color:var(--accent);box-shadow:inset 0 0 0 1.5px rgba(var(--accent-rgb),.75),0 0 18px -4px rgba(var(--accent-rgb),.65)}
.how6-step .tx b{display:block;font-size:16.5px;font-weight:600;letter-spacing:-.01em;color:#f1f4f6}
.how6-step .tx span{display:none;margin-top:4px;font-size:14px;line-height:1.45;color:#97a0a8}
.how6-step.on .tx span{display:block}
.how6-step .bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}
.how6.js .how6-step.on .bar{animation:bar6 var(--dur,7.6s) linear both}
.how6.paused .how6-step.on .bar,.how6.paused .scw.play *,.how6.paused .scw.play *::before,.how6.paused .scw.play *::after{animation-play-state:paused}
@keyframes bar6{to{transform:scaleX(1)}}
.how6-stage .console5-frame{transform:none;animation:none}
.how6-body{position:relative;min-height:470px}
.scw{position:relative;display:none;flex-direction:column;min-height:470px;padding:20px 24px 22px;box-sizing:border-box}
.scw.on{display:flex}
.sct{margin:0 0 16px;font:600 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#7d878f}
.sc{position:relative;flex:1;display:flex;flex-direction:column}
.how6.js .scw.play .r{animation:r6 .7s var(--ease) both;animation-delay:var(--t,0s)}
@keyframes r6{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.lt{background:linear-gradient(180deg,#f2f5f7,#dde3e8);color:#1d2730}
/* 1 the call */
.s1 .call{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.s1 .tile{display:flex;align-items:center;gap:12px;padding:14px;border-radius:16px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.s1 .av{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.08);color:#e6ebef}
.s1 .av .ico{width:20px;height:20px}
.s1 .ai .av{background:rgba(var(--accent-rgb),.14);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.4)}
.s1 .av .mark{width:22px;height:22px}
.s1 .tile b{font-size:15px;color:#f1f4f6}
.s1 .eq{margin-left:auto;display:flex;align-items:flex-end;gap:3px;height:18px;opacity:.25}
.s1 .eq i{display:block;width:3px;height:100%;border-radius:2px;background:#e6ebef;transform-origin:50% 100%;transform:scaleY(.35)}
.s1 .ai .eq i{background:var(--accent)}
.how6.js .scw.play .s1 .eq i{animation:eq1 .55s ease-in-out infinite alternate}
.how6.js .scw.play .s1 .eq i:nth-child(2){animation-delay:-.2s}.how6.js .scw.play .s1 .eq i:nth-child(3){animation-delay:-.4s}.how6.js .scw.play .s1 .eq i:nth-child(4){animation-delay:-.1s}
.how6.js .scw.play .s1 .ai .eq{animation:talkAi6 7.6s steps(1,end) both}
.how6.js .scw.play .s1 .you .eq{animation:talkYou6 7.6s steps(1,end) both}
.how6.js .scw.play .s1 .ai{animation:glowAi6 7.6s ease both}
@keyframes talkAi6{0%{opacity:.25}8%{opacity:1}27%{opacity:.25}51%{opacity:1}68%{opacity:.25}}
@keyframes talkYou6{0%{opacity:.25}29%{opacity:1}48%{opacity:.25}}
@keyframes glowAi6{0%,6%,28%,50%,70%,100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}10%,24%,54%,66%{box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.6),0 0 26px -8px rgba(var(--accent-rgb),.6)}}
.s1 .chat{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.s1 .bub{max-width:80%;padding:11px 15px;border-radius:15px;font-size:15px;line-height:1.4}
.s1 .bub.ai{align-self:flex-start;border-bottom-left-radius:5px;background:rgba(var(--accent-rgb),.1);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.3);color:#e7f6ef}
.s1 .bub.you{align-self:flex-end;border-bottom-right-radius:5px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:#eef1f4}
.s1 .foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:16px}
.s1 .note{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border-radius:12px;background:var(--accent);color:var(--accent-ink);font-size:14.5px;font-weight:600;box-shadow:0 14px 30px -14px rgba(var(--accent-rgb),.7)}
.s1 .note .ico,.s1 .pill .ico{width:16px;height:16px}
.s1 .pill{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:99px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);font-size:13px;color:#cfd6dc}
/* 2 the process, its bottleneck, and what AI can take over */
.s2 .proc{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:10px 0 4px}
.s2 .proc::before{content:"";position:absolute;left:9%;right:9%;top:33px;height:1px;background:rgba(255,255,255,.14)}
.s2 .pstep{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:12px}
.s2 .pbox{display:grid;place-items:center;width:100%;min-height:48px;padding:8px 6px;border-radius:12px;background:#11161a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);font-size:13.5px;font-weight:500;line-height:1.25;text-align:center;color:#e6ebef;box-sizing:border-box}
.s2 :is(.p2,.p3) .pbox{color:#dcf7ea;box-shadow:inset 0 0 0 1.5px rgba(var(--accent-rgb),.75),0 0 24px -8px rgba(var(--accent-rgb),.7)}
.how6.js .scw.play .s2 .p3 .pbox{animation:r6 .7s var(--ease) both,p3seq6 7.6s linear both;animation-delay:var(--t),0s}
.how6.js .scw.play .s2 .p2 .pbox{animation:r6 .7s var(--ease) both,p2seq6 7.6s linear both;animation-delay:var(--t),0s}
@keyframes p3seq6{0%,36%{color:#e6ebef;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}39%,48%{color:#ffd99a;box-shadow:inset 0 0 0 1.5px rgba(245,181,77,.9),0 0 26px -6px rgba(245,181,77,.7)}51%,100%{color:#dcf7ea;box-shadow:inset 0 0 0 1.5px rgba(var(--accent-rgb),.75),0 0 24px -8px rgba(var(--accent-rgb),.7)}}
@keyframes p2seq6{0%,49%{color:#e6ebef;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}52%,100%{color:#dcf7ea;box-shadow:inset 0 0 0 1.5px rgba(var(--accent-rgb),.75),0 0 24px -8px rgba(var(--accent-rgb),.7)}}
.s2 .tbar{position:relative;display:block;width:82%;height:7px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.s2 .tbar > i{position:absolute;inset:0;border-radius:inherit;background:#8e979f;transform-origin:0 50%;transform:scaleX(var(--w,.4))}
.s2 .p1 .tbar > i{--w:.3}.s2 .p2 .tbar > i{--w:.55}.s2 .p3 .tbar > i{--w:1;background:var(--amber)}.s2 .p4 .tbar > i{--w:.45}.s2 .p5 .tbar > i{--w:.2}
.how6.js .scw.play .s2 .tbar > i{animation:tb6 1s var(--ease) both;animation-delay:var(--t,0s)}
@keyframes tb6{from{transform:scaleX(0)}}
.s2 .scan{position:absolute;top:0;bottom:0;left:-10%;width:10%;background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.32),transparent);opacity:0;pointer-events:none}
.how6.js .scw.play .s2 .scan{animation:scan6 2.4s ease-in-out .5s both}
@keyframes scan6{0%{left:-10%;opacity:1}100%{left:100%;opacity:0}}
.s2 .hotlab{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:12px}
.s2 .hot{grid-column:2 / span 3;justify-self:center;display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:99px;background:rgba(245,181,77,.13);box-shadow:inset 0 0 0 1px rgba(245,181,77,.4);color:#ffcf7d;font-size:12.5px;font-weight:600}
.s2 .hot .ico{width:14px;height:14px}
.s2 .call{display:flex;align-items:center;gap:15px;margin-top:auto;padding:16px 18px;border-radius:16px;background:linear-gradient(180deg,rgba(var(--accent-rgb),.15),rgba(var(--accent-rgb),.05));box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.42),0 24px 50px -30px rgba(var(--accent-rgb),.7)}
.s2 .ci{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:12px;background:var(--accent);color:var(--accent-ink)}
.s2 .ci .ico{width:20px;height:20px}
.s2 .call b{display:block;font-size:18px;font-weight:600;color:#f3f5f7}
.s2 .call span span{display:block;margin-top:2px;font-size:14px;color:#a8dcc6}
/* 3 the proposal that gets approved */
.s3 .doc{position:relative;width:68%;padding:18px 20px 16px;border-radius:16px;background:linear-gradient(180deg,#f2f5f7,#dde3e8);color:#1d2730;box-shadow:0 30px 60px -30px rgba(0,0,0,1)}
.s3 .dh{display:flex;align-items:center;gap:9px;margin-bottom:10px;font-size:15.5px}
.s3 .dh .ico{width:18px;height:18px;color:#33404a}
.s3 .row{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid rgba(29,39,48,.1);font-size:14.5px;color:#33404a}
.s3 .row .ico{flex:none;width:17px;height:17px;color:#1f9d6b}
.s3 .row.am .ico{color:#c98a1c}
.s3 .sigline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding-top:12px;border-top:1px dashed rgba(29,39,48,.28)}
.s3 .sig{width:150px;height:36px}
.s3 .sig path{fill:none;stroke:#1d2730;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:260;stroke-dashoffset:0}
.how6.js .scw.play .s3 .sig path{animation:sig6 1.1s ease-in-out 4.1s both}
@keyframes sig6{from{stroke-dashoffset:260}}
.s3 .btn6{display:inline-flex;align-items:center;padding:10px 18px;border-radius:99px;background:#1d2730;color:#fff;font-size:14px;font-weight:600}
.how6.js .scw.play .s3 .btn6{animation:press6 .6s ease 3.6s both}
@keyframes press6{0%{transform:none}40%{transform:scale(.9);box-shadow:0 0 0 7px rgba(var(--accent-rgb),.35)}100%{transform:none;background:#1f9d6b}}
.s3 .cursor{display:none}
.s3 .stamp{position:absolute;right:3%;top:30%;display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:16px;border:2px solid var(--accent);background:rgba(var(--accent-rgb),.08);color:var(--accent);font:700 22px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;transform:rotate(-8deg);box-shadow:0 0 40px -10px rgba(var(--accent-rgb),.6)}
.s3 .stamp .ico{width:24px;height:24px}
.how6.js .scw.play .s3 .stamp{animation:stamp6 .55s cubic-bezier(.2,1.5,.4,1) 5.3s both}
@keyframes stamp6{from{opacity:0;transform:rotate(-8deg) scale(1.7)}to{opacity:1;transform:rotate(-8deg)}}
/* 4 the pilot: one order from the mail lands in your system */
.s4 .flow{display:grid;grid-template-columns:minmax(0,1fr) 30px auto 30px minmax(0,1.2fr);align-items:center;margin:auto 0}
.s4 .mail{display:flex;flex-direction:column;gap:7px;padding:15px;border-radius:15px;background:#11161a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.s4 .mh{display:flex;align-items:center;gap:8px;font-size:15px;color:#f1f4f6}
.s4 .mh .ico{width:18px;height:18px;color:#cfd6dc}
.s4 .mf{font-size:12.5px;color:#8e979f}
.s4 .att{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;padding:5px 9px;border-radius:8px;background:rgba(255,255,255,.06);font:500 12px/1 var(--mono);color:#dfe4e8}
.s4 .att .ico{width:14px;height:14px;color:#ff8b7a}
.s4 .wire{position:relative;display:block;height:2px;background:rgba(255,255,255,.18)}
.s4 .dot{position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:#eafff6;box-shadow:0 0 10px rgba(var(--accent-rgb),.95);opacity:0}
.how6.js .scw.play .s4 .w1 .dot{animation:dot6 .6s linear 1s both}
.how6.js .scw.play .s4 .w2 .dot{animation:dot6 .6s linear 2.85s both}
@keyframes dot6{0%{left:0;opacity:1}100%{left:calc(100% - 8px);opacity:0}}
.s4 .node{display:flex;flex-direction:column;align-items:center;gap:5px;padding:15px 14px;border-radius:18px;background:radial-gradient(circle at 50% 30%,#173229,#0c1311);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.5),0 0 34px -8px rgba(var(--accent-rgb),.6)}
.s4 .node .mark{width:28px;height:28px;margin-bottom:4px}
.s4 .vb{font-size:12.5px;font-weight:500;color:#eafff6}
.how6.js .scw.play .s4 .vb{animation:vb6 .5s ease both}
.how6.js .scw.play .s4 .v1{animation-delay:1.6s}.how6.js .scw.play .s4 .v2{animation-delay:2.05s}.how6.js .scw.play .s4 .v3{animation-delay:2.5s}
@keyframes vb6{from{color:#55606a}}
.s4 .rec{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:15px;background:linear-gradient(180deg,#f2f5f7,#dde3e8);color:#1d2730;box-shadow:0 26px 50px -28px rgba(0,0,0,1)}
.s4 .rh{display:flex;align-items:center;gap:7px;margin-bottom:2px;font-size:13.5px}
.s4 .rh .ico{width:16px;height:16px;color:#33404a}
.s4 .rh em{margin-left:auto;font:500 9.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#7a8690}
.s4 .fld{display:grid;grid-template-columns:auto minmax(0,1fr) 16px;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;background:rgba(29,39,48,.06);font-size:12.5px}
.s4 .fld span{color:#5d6a74}
.s4 .fld b{justify-self:end;font-weight:600;color:#1d2730}
.s4 .fld i{display:grid;place-items:center;color:#1f9d6b}
.s4 .fld .ico{width:14px;height:14px}
.how6.js .scw.play .s4 .fld :is(b,i){animation:r6 .5s var(--ease) both;animation-delay:var(--t,0s)}
.s4 .st{display:grid;margin-top:4px}
.s4 .st i{grid-area:1 / 1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 10px;border-radius:99px;font-size:12.5px;font-weight:600}
.s4 .st .ico{width:14px;height:14px}
.s4 .s-wait{background:rgba(245,181,77,.22);color:#8a5a00;opacity:0}
.s4 .s-ok{background:#1f9d6b;color:#fff}
.how6.js .scw.play .s4 .s-wait{animation:wait6 7.6s linear both}
.how6.js .scw.play .s4 .s-ok{animation:ok6 .5s var(--ease) 6s both}
@keyframes wait6{0%,61%{opacity:0}63%,77%{opacity:1}79%,100%{opacity:0}}
@keyframes ok6{from{opacity:0;transform:scale(.9)}}
/* 5 implementation: more processes into your systems, and the team trained */
.s5 .hub{display:grid;grid-template-columns:minmax(0,1fr) 34px auto 34px minmax(0,.8fr);align-items:center}
.s5 .s5in,.s5 .s5out{display:flex;flex-direction:column;gap:8px}
.s5 .in{position:relative;padding:10px 13px;border-radius:12px;background:#11161a;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.45);font-size:13.5px;color:#eef1f4}
.s5 .in::after{content:"";position:absolute;left:100%;top:50%;width:34px;height:1px;background:rgba(var(--accent-rgb),.6)}
.s5 .bus{display:block;width:2px;height:78%;justify-self:end;border-radius:2px;background:rgba(var(--accent-rgb),.55)}
.s5 .b-out{justify-self:start}
.s5 .node{position:relative;display:grid;place-items:center;width:88px;height:88px;border-radius:22px;background:radial-gradient(circle at 50% 35%,#173229,#0c1311);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.55),0 0 40px -8px rgba(var(--accent-rgb),.7)}
.s5 .node::before,.s5 .node::after{content:"";position:absolute;top:50%;width:34px;height:1px;background:rgba(var(--accent-rgb),.6)}
.s5 .node::before{right:100%}.s5 .node::after{left:100%}
.s5 .node .mark{width:38px;height:38px}
.s5 .out{position:relative;display:flex;align-items:center;gap:8px;padding:10px 13px;border-radius:12px;background:linear-gradient(180deg,#f2f5f7,#dde3e8);color:#1d2730;font-size:13.5px;font-weight:600}
.s5 .out::before{content:"";position:absolute;right:100%;top:50%;width:34px;height:1px;background:rgba(var(--accent-rgb),.6)}
.s5 .out .ico{width:16px;height:16px;color:#33404a}
.s5 .team{display:flex;align-items:center;gap:0;margin-top:auto;padding:12px 16px;border-radius:15px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.s5 .mate{display:grid;place-items:center;width:32px;height:32px;margin-right:-10px;border-radius:50%;background:#1b2126;color:#dfe4e8;box-shadow:0 0 0 2px #0e1215}
.s5 .mate .ico{width:15px;height:15px}
.s5 .prog{flex:1;height:7px;margin:0 16px 0 26px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.s5 .prog > i{display:block;height:100%;border-radius:inherit;background:var(--accent);transform-origin:0 50%}
.how6.js .scw.play .s5 .prog > i{animation:tb6 1.3s var(--ease) both;animation-delay:var(--t,0s)}
.s5 .tdone{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--accent);white-space:nowrap}
.s5 .tdone .ico{width:15px;height:15px}
/* 6 support: everything runs, an alert is handled, the monthly review */
.s6{display:grid!important;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:14px;align-items:start}
.s6 .dash{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:16px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.s6 .dh{display:flex;align-items:center;gap:9px;padding:2px 2px 10px;border-bottom:1px solid rgba(255,255,255,.08);font-size:15.5px;color:#f1f4f6}
.s6 .sd{flex:none;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px rgba(var(--accent-rgb),.9)}
.s6 .srow{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:10px;background:rgba(255,255,255,.03);font-size:14px;color:#dfe4e8}
.s6 .spark{margin-left:auto;width:46px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(var(--accent-rgb),.15),var(--accent))}
.s6 .f-txt{margin-left:auto;display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;background:rgba(var(--accent-rgb),.15);color:var(--accent);font-size:12.5px;font-weight:600}
.s6 .f-txt .ico{width:13px;height:13px}
.how6.js .scw.play .s6 .alert{animation:r6 .6s var(--ease) both,alertBg6 7.6s linear both;animation-delay:var(--t),0s}
.how6.js .scw.play .s6 .alert .sd{animation:alertDot6 7.6s linear both}
.how6.js .scw.play .s6 .f-txt{animation:r6 .5s var(--ease) 3.3s both}
.how6.js .scw.play .s6 .live{animation:live5 1.8s ease-in-out infinite}
@keyframes alertBg6{0%,42%{background:rgba(245,181,77,.13);box-shadow:inset 0 0 0 1px rgba(245,181,77,.4)}44%,100%{background:rgba(255,255,255,.03);box-shadow:none}}
@keyframes alertDot6{0%,42%{background:var(--amber);box-shadow:0 0 10px rgba(245,181,77,.9)}44%,100%{background:var(--accent);box-shadow:0 0 10px rgba(var(--accent-rgb),.9)}}
.s6 .month{display:flex;flex-direction:column;gap:10px;padding:15px;border-radius:16px;background:linear-gradient(180deg,#f2f5f7,#dde3e8);color:#1d2730;box-shadow:0 26px 50px -28px rgba(0,0,0,1)}
.s6 .month b{display:flex;align-items:center;gap:8px;font-size:15px}
.s6 .month b .ico{width:17px;height:17px;color:#33404a}
.s6 .mi{display:flex;align-items:center;gap:8px;font-size:13.5px;color:#33404a}
.s6 .mi .ico{flex:none;width:15px;height:15px;color:#1f9d6b}
.how6.js .scw.play .s6 .mi{animation:r6 .5s var(--ease) both;animation-delay:var(--t,0s)}
@media (prefers-reduced-motion:reduce){.how6 *,.how6 *::before,.how6 *::after{animation:none!important}}
@media (max-width:1100px){
  .how6-grid{grid-template-columns:minmax(0,1fr)}
  .how6-stage{order:-1}
}
.how6-body{container-type:inline-size}
@container (max-width:560px){
  .scw{min-height:540px;padding:16px 14px 16px}
  .s1 .bub{max-width:92%;font-size:14px}
  .s2 .proc{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
  .s2 .pbox{min-height:54px;font-size:11px;padding:6px 3px}
  .s2 .proc::before{top:27px}
  .s3 .doc{width:100%;box-sizing:border-box}
  .s3 .stamp{top:auto;bottom:-6px;right:6%;font-size:18px;padding:10px 16px}
  .s4 .flow{grid-template-columns:minmax(0,1fr);gap:12px}
  .s4 .wire{display:none}
  .s4 .node{flex-direction:row;justify-content:center;gap:12px}
  .s5 .hub{grid-template-columns:minmax(0,1fr) auto;gap:12px}
  .s5 .bus,.s5 .in::after,.s5 .out::before,.s5 .node::before,.s5 .node::after{display:none}
  .s5 .node{grid-row:1 / span 2;grid-column:2;width:64px;height:64px}
  .s5 .s5out{flex-direction:row;flex-wrap:wrap}
  .s6{grid-template-columns:minmax(0,1fr)!important}
}
/* ============================================================================================
   "Zo werkt het" v7 (15 Oct 2026, Alex's choice "ce primeste la fiecare pas"): six rows, each with its moment and the
   thing you get, drawn as a clear object that appears (with a small check or stamp) when the row comes into view.
   ============================================================================================ */
.how7 i,.how7 b{font-style:normal}
.how7-list{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:12px}
.how7-list::before{content:"";position:absolute;left:24px;top:36px;bottom:36px;width:1px;background:linear-gradient(180deg,rgba(var(--accent-rgb),.7),rgba(255,255,255,.12) 20%,rgba(255,255,255,.12) 80%,rgba(var(--accent-rgb),.7))}
.how7-list li{position:relative;display:grid;grid-template-columns:48px minmax(0,1.15fr) 190px minmax(0,1fr);align-items:center;gap:22px;padding:14px 16px 14px 0;border-radius:22px;transition:background .5s var(--ease)}
.how7-list li:hover{background:rgba(255,255,255,.025)}
.how7-list .num{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#0a0c0e;box-shadow:inset 0 0 0 1.5px rgba(var(--accent-rgb),.65),0 0 0 6px #070809,0 0 22px -4px rgba(var(--accent-rgb),.55);font:600 14px/1 var(--mono);color:var(--accent)}
.how7-list .stp7 h3{margin:0 0 5px;font-size:20px;font-weight:600;letter-spacing:-.02em;color:#f3f5f7}
.how7-list .stp7 p{margin:0;font-size:15px;line-height:1.5;color:#97a0a8}
.how7-list .when{display:inline-flex;align-items:center;gap:8px;justify-self:start;padding:8px 14px;border-radius:99px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.13);font-size:14px;font-weight:600;color:#eef1f4;white-space:nowrap}
.how7-list .when .ico{width:15px;height:15px;color:var(--accent)}
.how7-list .get{display:flex;align-items:center;gap:16px;padding:12px 16px 12px 12px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.08)}
.how7-list .gt small{display:block;margin-bottom:3px;font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.how7-list .gt b{display:block;font-size:15.5px;font-weight:600;line-height:1.3;color:#f3f5f7}
.how7-cta{margin-top:34px;text-align:center}
/* the objects */
.dv{position:relative;flex:none;display:flex;align-items:center;justify-content:center;width:92px;height:68px;border-radius:14px;background:radial-gradient(60px 40px at 50% 40%,rgba(var(--accent-rgb),.14),transparent 70%),#0b0f12;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.dv .ico{width:100%;height:100%}
.dv1 .cal{display:flex;flex-direction:column;align-items:center;justify-content:center;width:40px;height:44px;border-radius:9px;background:linear-gradient(180deg,#f2f5f7,#dde3e8);color:#1d2730;box-shadow:inset 0 6px 0 var(--accent)}
.dv1 .cal b{margin-top:4px;font-size:17px;line-height:1}
.dv1 .cal small{font:600 8.5px/1 var(--mono);color:#5d6a74}
.dv1 .who{display:flex;flex-direction:column;gap:4px;margin-left:8px}
.dv1 .who i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.1);color:#e6ebef}
.dv1 .who i .ico{width:11px;height:11px}
.dv1 .who .ai{background:rgba(var(--accent-rgb),.18)}
.dv1 .who .mark{width:12px;height:12px}
.dv2 .paper,.dv3 .paper{display:flex;flex-direction:column;gap:4px;width:38px;height:48px;padding:8px 6px;border-radius:6px;background:linear-gradient(180deg,#f2f5f7,#dde3e8);box-sizing:border-box;box-shadow:0 8px 16px -8px rgba(0,0,0,.9)}
.dv2 .paper i,.dv3 .paper i{display:block;height:3px;border-radius:2px;background:#9ea9b2}
.dv2 .paper i:first-child,.dv3 .paper i:first-child{width:70%;background:#33404a}
.dv2 .paper i:nth-child(3){width:85%}.dv2 .paper i:nth-child(4){width:55%}
.dv2 .tag{position:absolute;right:6px;bottom:7px;padding:3px 6px;border-radius:6px;background:var(--accent);color:var(--accent-ink);font:700 9px/1 var(--mono);white-space:nowrap}
.dv3 .paper{transform:translateX(-14px)}
.dv3 .price{position:absolute;right:6px;top:50%;display:inline-flex;align-items:center;gap:3px;padding:5px 7px;border-radius:8px;background:#11161a;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.55);color:#f3f5f7;font:600 10px/1 var(--sans);transform:translateY(-50%)}
.dv3 .price b{font-size:14px}
.dv3 .price .ico{width:11px;height:11px;color:var(--accent)}
.dv4{gap:6px}
.dv4 .ic{position:relative;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#151b20;color:#e6ebef;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.dv4 .ic .ico{width:15px;height:15px}
.dv4 .arw{width:14px;height:2px;border-radius:2px;background:var(--accent);box-shadow:0 0 8px rgba(var(--accent-rgb),.8)}
.dv4 .sys{background:linear-gradient(180deg,#f2f5f7,#dde3e8);color:#33404a}
.dv4 .sys b{position:absolute;right:-6px;top:-6px;display:grid;place-items:center;width:15px;height:15px;border-radius:50%;background:var(--accent);color:var(--accent-ink)}
.dv4 .sys b .ico{width:9px;height:9px}
.dv5{flex-direction:column;gap:5px}
.dv5 .ck{display:none}
.dv5::before{content:"";position:absolute;inset:0}
.dv5 > .ck{display:grid;place-items:center;position:absolute;top:10px;width:18px;height:18px;border-radius:5px;background:var(--accent);color:var(--accent-ink)}
.dv5 > .ck:nth-of-type(1){left:14px}.dv5 > .ck:nth-of-type(2){left:37px}.dv5 > .ck:nth-of-type(3){left:60px}
.dv5 > .ck .ico{width:11px;height:11px}
.dv5 .team{position:absolute;bottom:10px;left:50%;display:flex;transform:translateX(-50%)}
.dv5 .team i{display:grid;place-items:center;width:20px;height:20px;margin:0 -3px;border-radius:50%;background:#1b2126;color:#dfe4e8;box-shadow:0 0 0 2px #0b0f12}
.dv5 .team .ico{width:11px;height:11px}
.dv6{flex-direction:column;gap:6px}
.dv6 .sts{display:flex;gap:6px}
.dv6 .sts i{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px rgba(var(--accent-rgb),.9)}
.dv6 svg{width:60px;height:20px}
.dv6 path{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){
  .how7-list li.rv .get{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease) .25s,transform .9s var(--ease) .25s}
  .how7-list li.rv.in .get{opacity:1;transform:none}
  .how7-list li.rv :is(.dv2 .tag,.dv4 .sys b,.dv5 > .ck,.dv3 .price){transform-origin:50% 50%}
  .how7-list li.rv.in .dv2 .tag{animation:pop7 .5s cubic-bezier(.2,1.5,.4,1) 1s both}
  .how7-list li.rv.in .dv3 .price{animation:slide7 .6s var(--ease) .9s both}
  .how7-list li.rv.in .dv4 .arw{animation:grow7 .5s var(--ease) .8s both}
  .how7-list li.rv.in .dv4 .sys b{animation:pop7 .5s cubic-bezier(.2,1.5,.4,1) 1.2s both}
  .how7-list li.rv.in .dv5 > .ck{animation:pop7 .45s cubic-bezier(.2,1.5,.4,1) both}
  .how7-list li.rv.in .dv5 > .ck:nth-of-type(1){animation-delay:.9s}.how7-list li.rv.in .dv5 > .ck:nth-of-type(2){animation-delay:1.1s}.how7-list li.rv.in .dv5 > .ck:nth-of-type(3){animation-delay:1.3s}
  .how7-list li.rv.in .dv6 path{animation:draw7 1.4s ease-in-out .8s both}
  .how7-list li.rv.in .dv6 .sts i{animation:live5 1.8s ease-in-out infinite}
  .how7-list li.rv.in .dv1 .who i.ai{animation:live5 2.2s ease-in-out infinite}
}
@keyframes pop7{from{opacity:0;transform:scale(.3)}}
@keyframes slide7{from{opacity:0;transform:translate(10px,-50%)}}
@keyframes grow7{from{transform:scaleX(0)}}
@keyframes draw7{from{stroke-dashoffset:80}}
@media (max-width:1100px){
  .how7-list li{grid-template-columns:48px minmax(0,1fr) auto;grid-template-areas:"num step when" "num get get";row-gap:12px}
  .how7-list .num{grid-area:num;align-self:start}
  .how7-list .stp7{grid-area:step}
  .how7-list .when{grid-area:when;align-self:start}
  .how7-list .get{grid-area:get}
}
@media (max-width:640px){
  .how7-list::before{left:19px}
  .how7-list li{grid-template-columns:38px minmax(0,1fr);grid-template-areas:"num step" "num when" "num get";gap:10px 14px;padding-right:0}
  .how7-list .num{width:38px;height:38px;font-size:12.5px}
  .how7-list .stp7 h3{font-size:18px}
}
/* ============================================================================================
   "Zo werkt het" v8 (15 Oct 2026, Alex's pick of twenty sketches): one sentence carries the whole way; four notes under
   it hold the details. The underlines draw themselves when the sentence comes into view.
   ============================================================================================ */
.how8 .manifest{max-width:20em;margin:6px 0 46px;font-size:clamp(34px,4.6vw,66px);font-weight:600;line-height:1.18;letter-spacing:-.04em;color:#f3f5f7;text-wrap:balance}
.how8 .hl{position:relative;padding:0 .08em;color:#fff;background:linear-gradient(rgba(var(--accent-rgb),.42),rgba(var(--accent-rgb),.42)) 0 88%/100% .34em no-repeat;transition:background-color .4s var(--ease),box-shadow .4s var(--ease);border-radius:.08em}
.how8 .hl sup{position:relative;top:-1.75em;margin-left:.1em;font:600 .3em/1 var(--mono);letter-spacing:0;color:var(--accent);vertical-align:baseline}
.how8 .fns{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.how8 .fn{position:relative;display:flex;flex-direction:column;gap:8px;padding:22px 22px 24px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012));box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:box-shadow .45s var(--ease),transform .45s var(--ease),background .45s var(--ease)}
.how8 .fn-n{position:absolute;right:18px;top:16px;font:600 13px/1 var(--mono);color:#6f7880}
.how8 .fn-i{display:grid;place-items:center;width:40px;height:40px;margin-bottom:6px;border-radius:12px;background:rgba(var(--accent-rgb),.12);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.35);color:var(--accent)}
.how8 .fn-i .ico{width:20px;height:20px}
.how8 .fn b{font-size:19px;font-weight:600;letter-spacing:-.015em;color:#f3f5f7}
.how8 .fn-p{font-size:15px;line-height:1.55;color:#a3abb3}
.how8-cta{margin-top:34px}
/* a note and its words light up together */
.how8:has(.fn1:hover) .hl1,.how8:has(.fn2:hover) .hl2,.how8:has(.fn3:hover) .hl3,.how8:has(.fn4:hover) .hl4,.how8 .hl:hover{background-color:rgba(var(--accent-rgb),.16);box-shadow:0 0 0 .12em rgba(var(--accent-rgb),.16)}
.how8:has(.hl1:hover) .fn1,.how8:has(.hl2:hover) .fn2,.how8:has(.hl3:hover) .fn3,.how8:has(.hl4:hover) .fn4,.how8 .fn:hover{transform:translateY(-4px);background:linear-gradient(180deg,rgba(var(--accent-rgb),.12),rgba(var(--accent-rgb),.03));box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.5),0 30px 60px -40px rgba(var(--accent-rgb),.6)}
.how8:has(.hl1:hover) .fn1 .fn-n,.how8:has(.hl2:hover) .fn2 .fn-n,.how8:has(.hl3:hover) .fn3 .fn-n,.how8:has(.hl4:hover) .fn4 .fn-n,.how8 .fn:hover .fn-n{color:var(--accent)}
@media (prefers-reduced-motion:no-preference){
  .how8 .manifest.rv .hl{background-size:0% .34em}
  .how8 .manifest.rv.in .hl{animation:hl8 .9s var(--ease) both}
  .how8 .manifest.rv.in .hl1{animation-delay:.5s}.how8 .manifest.rv.in .hl2{animation-delay:.95s}.how8 .manifest.rv.in .hl3{animation-delay:1.4s}.how8 .manifest.rv.in .hl4{animation-delay:1.85s}
  .how8 .manifest.rv .hl sup{opacity:0}
  .how8 .manifest.rv.in .hl sup{animation:sup8 .5s cubic-bezier(.2,1.5,.4,1) both}
  .how8 .manifest.rv.in .hl1 sup{animation-delay:1.1s}.how8 .manifest.rv.in .hl2 sup{animation-delay:1.55s}.how8 .manifest.rv.in .hl3 sup{animation-delay:2s}.how8 .manifest.rv.in .hl4 sup{animation-delay:2.45s}
}
@keyframes hl8{from{background-size:0% .34em}to{background-size:100% .34em}}
@keyframes sup8{from{opacity:0;transform:translateY(.3em) scale(.5)}to{opacity:1;transform:none}}
@media (max-width:1100px){.how8 .fns{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.how8 .fns{grid-template-columns:minmax(0,1fr)}.how8 .manifest{margin-bottom:30px}}
/* ============================================================================================
   "Zo werkt het" v9 (15 Oct 2026): three sentences, three steps, three large pictures of that moment. Prefix h9-.
   ============================================================================================ */
.how9 i,.how9 b{font-style:normal}
.h9-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:none}
.h9-card{position:relative;display:flex;flex-direction:column;padding:14px 14px 26px;border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012));box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.h9-n{position:absolute;left:28px;top:28px;z-index:2;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:18px;font-weight:700;box-shadow:0 10px 30px -8px rgba(var(--accent-rgb),.8)}
.h9-card h3{margin:22px 14px 8px;font-size:24px;font-weight:600;line-height:1.2;letter-spacing:-.025em;color:#f3f5f7}
.h9-card p{margin:0 14px;font-size:16px;line-height:1.5;color:#a3abb3}
.h9-cta{margin-top:36px;text-align:center}
.h9-pic{position:relative;display:grid;place-items:center;height:290px;border-radius:20px;overflow:hidden;background:radial-gradient(260px 170px at 50% 45%,rgba(var(--accent-rgb),.12),transparent 72%),linear-gradient(180deg,#0e1215,#090b0d);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.h9-pic .ico{width:100%;height:100%}
/* 1: your inbox on a laptop, a call of 30 minutes */
.h9-lap{display:flex;flex-direction:column;align-items:center;margin-top:10px}
.h9-scr{width:250px;padding:12px;border-radius:12px 12px 4px 4px;background:#11161a;box-shadow:inset 0 0 0 3px #22292f,0 20px 40px -20px #000}
.h9-ib{display:flex;align-items:center;gap:7px;margin:0 0 8px 2px;font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#8e979f}
.h9-ib .ico{width:13px;height:13px}
.h9-scr > div:not(.h9-ib){display:flex;align-items:center;gap:8px;margin-top:5px;padding:8px 9px;border-radius:8px;background:rgba(255,255,255,.05);font-size:12.5px;color:#dfe4e8}
.h9-scr > div .ico{flex:none;width:14px;height:14px;color:#cfd6dc}
.h9-scr > div.on{background:rgba(var(--accent-rgb),.14);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.55);color:#fff}
.h9-scr > div.on .ico{color:var(--accent)}
.h9-base{display:block;width:300px;height:10px;border-radius:0 0 10px 10px;background:linear-gradient(180deg,#2a3238,#171c20)}
.h9-call{position:absolute;right:18px;top:16px;display:flex;align-items:center;gap:6px;padding:6px 10px 6px 6px;border-radius:99px;background:rgba(10,14,16,.85);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.h9-call > i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.1);color:#e6ebef}
.h9-call > i .ico{width:13px;height:13px}
.h9-call > i.ai{background:rgba(var(--accent-rgb),.18)}
.h9-call .mark{width:14px;height:14px}
.h9-call b{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:#eef1f4}
.h9-call b .ico{width:12px;height:12px;color:var(--accent)}
/* 2: the mail through AIstap, the form fills itself, 2-3 weeks */
.h9-flow{display:flex;align-items:center;gap:0;margin-top:-26px}
.h9-mailc{display:flex;flex-direction:column;align-items:center;gap:6px;width:76px;padding:12px 8px;border-radius:12px;background:#151b20;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);font-size:11px;line-height:1.2;text-align:center;color:#dfe4e8}
.h9-mailc .ico{width:20px;height:20px;color:#cfd6dc}
.h9-w{position:relative;display:block;width:26px;height:2px;background:rgba(var(--accent-rgb),.55)}
.h9-dot{position:absolute;left:0;top:-3px;width:8px;height:8px;border-radius:50%;background:#eafff6;box-shadow:0 0 10px rgba(var(--accent-rgb),.95);opacity:0}
.h9-node{display:grid;place-items:center;width:58px;height:58px;border-radius:16px;background:radial-gradient(circle at 50% 35%,#173229,#0c1311);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.6),0 0 30px -6px rgba(var(--accent-rgb),.7)}
.h9-node .mark{width:26px;height:26px}
.h9-sys{width:150px;padding:10px;border-radius:12px;background:linear-gradient(180deg,#f2f5f7,#dde3e8);color:#1d2730}
.h9-sys > b{display:flex;align-items:center;gap:6px;margin-bottom:4px;font-size:12px}
.h9-sys > b .ico{width:13px;height:13px;color:#33404a}
.h9-f{display:grid;grid-template-columns:auto 1fr 14px;align-items:center;gap:6px;margin-top:4px;padding:5px 7px;border-radius:6px;background:rgba(29,39,48,.07);font-size:11.5px}
.h9-f span{color:#5d6a74}.h9-f b{justify-self:end;color:#1d2730}.h9-f i{display:grid;color:#1f9d6b}.h9-f .ico{width:12px;height:12px}
.h9-bar{position:absolute;left:24px;right:24px;bottom:24px;display:flex;align-items:center;gap:12px}
.h9-bar > i{position:relative;flex:1;height:8px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden}
.h9-bar > i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,rgba(var(--accent-rgb),.5),var(--accent))}
.h9-bar span{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:#eef1f4;white-space:nowrap}
.h9-bar span .ico{width:14px;height:14px;color:var(--accent)}
/* 3: you press Akkoord */
.h9-ord{width:230px;padding:16px;border-radius:16px;background:linear-gradient(180deg,#f2f5f7,#dde3e8);color:#1d2730;box-shadow:0 26px 50px -26px #000}
.h9-ord > b{display:block;margin-bottom:6px;font-size:14px}
.h9-ord .h9-f{font-size:12.5px;padding:7px 9px}
.h9-ok{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:12px;padding:12px;border-radius:99px;background:#1f9d6b;color:#fff;font-size:16px;font-weight:700;box-shadow:0 0 0 6px rgba(31,157,107,.16)}
.h9-ok .ico{width:16px;height:16px}
.h9-cur{position:absolute;left:58%;top:70%;width:30px;height:30px;fill:#fff;stroke:#0b0e10;stroke-width:1.4;filter:drop-shadow(0 4px 8px rgba(0,0,0,.7))}
.h9-done{position:absolute;right:18px;top:16px;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;background:var(--accent);color:var(--accent-ink);font-size:13px;font-weight:700}
.h9-done .ico{width:13px;height:13px}
@media (prefers-reduced-motion:no-preference){
  .h9-card.rv .h9-scr > div:not(.h9-ib){opacity:0;transform:translateY(6px)}
  .h9-card.rv.in .h9-scr > div:not(.h9-ib){animation:r6 .5s var(--ease) both}
  .h9-card.rv.in .h9-scr > div:nth-child(2){animation-delay:.5s}.h9-card.rv.in .h9-scr > div:nth-child(3){animation-delay:.7s}.h9-card.rv.in .h9-scr > div:nth-child(4){animation-delay:.9s}.h9-card.rv.in .h9-scr > div:nth-child(5){animation-delay:1.1s}
  .h9-card.rv.in .h9-call{animation:r6 .6s var(--ease) 1.4s both}
  .h9-card.rv.in .h9-dot{animation:dot9 .7s linear .9s both}
  .h9-card.rv.in .w2 .h9-dot{animation-delay:1.8s}
  .h9-card.rv .h9-sys .h9-f :is(b,i){opacity:0}
  .h9-card.rv.in .h9-sys .h9-f :is(b,i){animation:r6 .45s var(--ease) both}
  .h9-card.rv.in .h9-sys .f1 :is(b,i){animation-delay:2.3s}.h9-card.rv.in .h9-sys .f2 :is(b,i){animation-delay:2.6s}.h9-card.rv.in .h9-sys .f3 :is(b,i){animation-delay:2.9s}
  .h9-card.rv .h9-bar > i::after{transform-origin:0 50%;transform:scaleX(0)}
  .h9-card.rv.in .h9-bar > i::after{animation:bar9 2.4s var(--ease) .6s both}
  .h9-card.rv.in .h9-cur{animation:cur9 1.6s var(--ease) .8s both}
  .h9-card.rv.in .h9-ok{animation:press9 .5s ease 2.2s both}
  .h9-card.rv .h9-done{opacity:0}
  .h9-card.rv.in .h9-done{animation:pop7 .5s cubic-bezier(.2,1.5,.4,1) 2.6s both}
}
@keyframes dot9{0%{left:0;opacity:1}100%{left:calc(100% - 8px);opacity:0}}
@keyframes bar9{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes cur9{0%{transform:translate(70px,60px);opacity:0}30%{opacity:1}80%{transform:none}90%{transform:scale(.88)}100%{transform:none}}
@keyframes press9{0%{transform:none}40%{transform:scale(.94);box-shadow:0 0 0 12px rgba(31,157,107,.25)}100%{transform:none}}
@media (max-width:1100px){.h9-grid{grid-template-columns:minmax(0,1fr);max-width:560px;margin:0 auto}}
@media (max-width:640px){
  .h9-mailc{width:62px;padding:10px 6px}.h9-w{width:14px}.h9-node{width:50px;height:50px}.h9-node .mark{width:22px;height:22px}.h9-sys{width:138px;padding:8px}
  .h9-scr{width:230px}.h9-base{width:270px}
  .h9-card h3{font-size:22px}
}
/* v9 with photographs and details */
.h9-photo{display:block;padding:0;background:#0b0d0f}
.h9-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.h9-card:hover .h9-photo img{transform:scale(1.04)}
.h9-dl{list-style:none;margin:6px 14px 0;padding:0;display:grid;gap:9px}
.h9-dl li{display:flex;align-items:flex-start;gap:10px;font-size:15.5px;line-height:1.45;color:#cfd6dc}
.h9-dl .ico{flex:none;width:18px;height:18px;margin-top:2px;padding:3px;border-radius:50%;background:rgba(var(--accent-rgb),.14);color:var(--accent)}
.h9-dl li:first-child{color:#eef1f4;font-weight:500}
/* the hero carries the "Ontdekken" loop as a soft moving background (15 Oct 2026) */
.hero5-vid{position:absolute;inset:-24px;z-index:-3;width:calc(100% + 48px);height:calc(100% + 48px);object-fit:cover;object-position:62% 45%;filter:blur(5px) brightness(.52) saturate(.85);transform:translate3d(calc(var(--mx,0) * -12px),calc(var(--my,0) * -8px),0);transition:transform 1.4s var(--ease)}
.hero5::before{display:block;content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(5,6,7,.95) 0%,rgba(5,6,7,.8) 36%,rgba(5,6,7,.4) 68%,rgba(5,6,7,.52) 100%),linear-gradient(0deg,#050607 0%,rgba(5,6,7,0) 30%),linear-gradient(180deg,rgba(5,6,7,.55) 0%,rgba(5,6,7,0) 16%)}
.hero5-sky .floor{opacity:.2}
.hero5-sky .glow{opacity:.55}
@media (max-width:860px){
  .hero5-vid{object-position:58% 30%}
  .hero5::before{background:linear-gradient(180deg,rgba(5,6,7,.55) 0%,rgba(5,6,7,.82) 42%,#050607 100%)}
}
.hero5-vid{filter:blur(2.5px) brightness(.62) saturate(.9)}
.hero5::before{background:linear-gradient(90deg,rgba(5,6,7,.94) 0%,rgba(5,6,7,.74) 36%,rgba(5,6,7,.3) 66%,rgba(5,6,7,.42) 100%),linear-gradient(0deg,#050607 0%,rgba(5,6,7,0) 28%),linear-gradient(180deg,rgba(5,6,7,.5) 0%,rgba(5,6,7,0) 16%)}
@media (max-width:860px){.hero5::before{background:linear-gradient(180deg,rgba(5,6,7,.45) 0%,rgba(5,6,7,.8) 40%,#050607 100%)}}
/* "Zo simpel werkt het" sits on the office at night above the city (Alex's pick, gallery #31, 15 Oct 2026): fixed while
   the page scrolls, under a dark veil that melts into the page at the top and the bottom */
body.pg-home .sec.how9{background:url(/assets/img/home/bg-city-night.webp) center/cover fixed #050607}
.how9::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#050607 0%,rgba(5,6,7,.86) 14%,rgba(5,6,7,.7) 40%,rgba(5,6,7,.7) 84%,#050607 100%)}
@media (max-width:860px){body.pg-home .sec.how9{background-attachment:scroll}}
.how9::before{background:linear-gradient(180deg,#050607 0%,rgba(5,6,7,.88) 14%,rgba(5,6,7,.76) 40%,rgba(5,6,7,.76) 84%,#050607 100%)}
.how9 .h9-card{background:linear-gradient(180deg,rgba(16,20,23,.86),rgba(9,11,13,.9));-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1)}
body.pg-home .sec.how9{isolation:isolate}
body.pg-home .sec.how9{border-top:0;border-bottom:0;background-clip:padding-box}
/* "Helder geprijsd" sits on the office at dusk (Alex's pick, gallery #9, 15 Oct 2026); same treatment as "Zo werkt het" */
body.pg-home .sec.qp3{isolation:isolate;border-top:0;border-bottom:0;background:url(/assets/img/home/bg-office-dusk.webp) 70% 50%/cover fixed #050607;background-clip:padding-box}
.qp3::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#050607 0%,rgba(5,6,7,.88) 14%,rgba(5,6,7,.74) 42%,rgba(5,6,7,.74) 84%,#050607 100%)}
.qp3 .qp3-col{background:linear-gradient(180deg,rgba(16,20,23,.86),rgba(9,11,13,.9));-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1)}
@media (max-width:860px){body.pg-home .sec.qp3{background-attachment:scroll}}
.nw{white-space:nowrap}
@media (min-width:1101px){
  .hero5 > .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hero5 h1{font-size:clamp(40px,3.7vw,52px)}
}
@media (min-width:1101px){.console5-body .hd{zoom:.73}}
/* the cards that lean (15 Oct 2026, Alex: a thin line under DISCOVER/TRAIN/AUTOMATE, sometimes, while a card moves):
   one flat layer instead of separate 3D layers (no seam between picture and text), the picture's fade ends in exactly the
   colour of the card, and the fade reaches one pixel past the picture's edge */
:is(.svc3-card,.pop3-card){transform-style:flat;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.svc3-card{background:#0a0c0e}
.svc3-card .ph{margin-bottom:-1px}
.svc3-card .ph::after{inset:0 0 -1px 0;background:linear-gradient(180deg,rgba(5,6,7,.2) 0%,rgba(5,6,7,0) 28%,rgba(5,6,7,0) 52%,#0a0c0e 100%)}
.svc3-card .tx{background:#0a0c0e;margin-top:0;padding-top:4px}
/* ============================================================================================
   Tools band (15 Oct 2026): two rows of pills drifting in opposite directions under the hero. Each row holds its list
   twice; the track moves by half its width, so the loop has no seam (the gap sits inside each list as padding).
   ============================================================================================ */
.logos5{position:relative;padding:30px 0 34px;overflow:hidden}
.logos5-lbl{margin:0 auto 20px;padding:0 20px;max-width:46em;text-align:center;font-size:14px;line-height:1.5;color:#7d878f}
.mq{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%)}
.mq + .mq{margin-top:12px}
.mq-track{display:flex;width:max-content;animation:mq5 var(--d,90s) linear infinite;will-change:transform}
.mq.r1 .mq-track{--d:64s}
.mq.r2 .mq-track{--d:104s;animation-direction:reverse}
.mq:hover .mq-track{animation-play-state:paused}
.mq ul{display:flex;gap:12px;margin:0;padding:0 12px 0 0;list-style:none}
.mq li{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 18px 0 15px;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));box-shadow:inset 0 0 0 1px rgba(255,255,255,.085),inset 0 1px 0 rgba(255,255,255,.05);font-size:15px;font-weight:500;letter-spacing:-.005em;color:#9aa3ab;white-space:nowrap;transition:color .45s var(--ease),box-shadow .45s var(--ease),background .45s var(--ease)}
.mq li:hover{color:#f3f5f7;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.025));box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 1px 0 rgba(255,255,255,.08),0 10px 30px -18px rgba(var(--accent-rgb),.6)}
.mq li :is(.bl,.ico){flex:none;width:18px;height:18px;color:#c3cad0;opacity:.85;transition:opacity .45s var(--ease),color .45s var(--ease)}
.mq li:hover :is(.bl,.ico){opacity:1;color:#fff}
.bl{fill:currentColor}
@keyframes mq5{to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none}}
@media (max-width:640px){
  .logos5{padding:24px 0 26px}
  .logos5-lbl{font-size:13px;margin-bottom:16px}
  .mq{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
  .mq + .mq{margin-top:10px}
  .mq ul{gap:10px;padding-right:10px}
  .mq li{height:40px;padding:0 14px 0 12px;gap:8px;font-size:13.5px;border-radius:12px}
  .mq li :is(.bl,.ico){width:16px;height:16px}
}
body.pg-home .logos5 + .svc3{padding-top:64px}
/* the four gains moved under the three cards of "Wat kan AIstap voor u doen?" (Alex, 15 Oct 2026) */
.svc3 .gains-svc{justify-content:center;gap:12px 46px;margin-top:26px;padding:18px 26px;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.05)}
@media (max-width:860px){.svc3 .gains-svc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch;gap:12px 16px;padding:16px}}
.svc3 .gains-svc li{line-height:1.3}
/* ============================================================================================
   Smoother first screen (15 Oct 2026, Alex: "nu e foarte smooth ... pare sacadat"). Measured: a live blur filter on the
   playing video, the page-wide grain blended over everything, a glass blur over the video and the moving floor cost
   most of each frame. The video now carries its blur and darkening in the file; the grain, the floor and the glow stand
   still or go; the window over the video is solid glass. The tools band is the last row of the hero, so a desktop shows
   it on the first screen.
   ============================================================================================ */
body.pg-home::after{display:none}
.hero5-vid{filter:none}
.hero5-sky .floor,.hero5-sky .glow{animation:none!important}
.console5-frame{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.02) 40%),rgba(10,13,15,.86)}
.mq{contain:paint}
.mq-track{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.mq.r1 .mq-track{--d:54s}
.mq.r2 .mq-track{--d:88s}
.hero5{grid-template-rows:1fr auto}
.hero5 .logos5{padding:6px 0 28px}
.hero5 .logos5-lbl{margin-bottom:14px}
@media (min-width:861px){
  .hero5{min-height:calc(100vh - 69px);min-height:calc(100svh - 69px)}
  .hero5 > .wrap{padding-top:clamp(24px,5vh,72px);padding-bottom:clamp(16px,3vh,40px)}
}
/* short laptop screens: the hero tightens so the tools band still shows on the first screen */
@media (min-width:861px) and (max-height:820px){
  .hero5 h1{font-size:clamp(36px,3.3vw,46px);margin-bottom:16px}
  .hero5 .lede{font-size:16.5px;margin-bottom:22px}
  .hero5 .eyebrow{margin-bottom:12px}
  .hero5 .checks3{margin-top:16px}
  .hero5 > .wrap{padding-top:18px;padding-bottom:10px}
  .console5-body .hd{zoom:.62}
  .console5-body{padding:14px 16px 12px}
  .hero5 .logos5{padding:4px 0 18px}
  .hero5 .logos5-lbl{margin-bottom:10px;font-size:13px}
  .mq li{height:40px;font-size:14px}
  .mq + .mq{margin-top:9px}
}
/* the twelve gains under the cards (15 Oct 2026): large type drifting left, no icons */
.gt5{position:relative;margin-top:52px;padding:20px 0;overflow:hidden;contain:paint;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
.gt5::before,.gt5::after{content:"";position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12) 20%,rgba(255,255,255,.12) 80%,transparent)}
.gt5::before{top:0}.gt5::after{bottom:0}
.gt-track{display:flex;width:max-content;animation:mq5 96s linear infinite;backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform}
.gt5:hover .gt-track{animation-play-state:paused}
.gt5 ul{display:flex;align-items:center;margin:0;padding:0;list-style:none}
.gt5 li{display:inline-flex;align-items:center;font-size:clamp(22px,2.1vw,30px);font-weight:600;letter-spacing:-.025em;line-height:1.2;white-space:nowrap;color:#eef1f4}
.gt5 li:nth-child(even){color:#6f7880}
.gt5 li::after{content:"";flex:none;width:7px;height:7px;margin:0 30px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px rgba(var(--accent-rgb),.85)}
@media (prefers-reduced-motion:reduce){
  .gt-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;padding:0 20px}
  .gt5 ul{flex-wrap:wrap;justify-content:center;row-gap:10px}
  .gt5 ul[aria-hidden]{display:none}
  .gt5{-webkit-mask-image:none;mask-image:none}
}
@media (max-width:640px){
  .gt5{margin-top:36px;padding:16px 0}
  .gt5 li{font-size:20px}
  .gt5 li::after{margin:0 18px;width:6px;height:6px}
}
/* ============================================================================================
   The hero diagram (15 Oct 2026, Alex: "mai clar cand e autonom si cand e in doubt ... cum vine echipa ... mai animat ...
   putin mai mare"): .hd-hero only. Pass 0 ends green (badge, glow, a shine over the record); pass 1 brings the team
   under the amber card, with the line that stood in the foot, and the team decides (the open row turns green). The
   pause button sits in the empty corner under the sources.
   ============================================================================================ */
.hd-okb,.hd-team,.hd-cap2{display:none}
.hd-hero .hd-res{position:relative}
.hd-hero .hd-okb{position:absolute;right:12px;top:-14px;z-index:3;display:inline-flex;align-items:center;gap:6px;margin:0;padding:6px 12px 6px 8px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:12.5px;font-weight:700;line-height:1;white-space:nowrap;box-shadow:0 10px 26px -8px rgba(var(--accent-rgb),.95),0 0 0 4px rgba(var(--accent-rgb),.16)}
.hd-hero .hd-okb .ico{width:14px;height:14px}
.hd-hero .rec{position:relative;overflow:hidden}
.hd-hero .rec::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(var(--accent-rgb),.38) 50%,transparent 70%);transform:translateX(-120%);opacity:0}
.hd-hero .hd-doubt{grid-template-rows:18px 1fr 1fr auto auto}
.hd-hero .hd-team{grid-column:3;grid-row:4;justify-self:start;display:flex;align-items:center;margin-top:10px;padding:5px 12px 5px 5px;border-radius:999px;background:rgba(245,181,77,.1);box-shadow:inset 0 0 0 1px rgba(245,181,77,.38)}
.hd-team .tm-av{display:grid;place-items:center;width:30px;height:30px;margin-right:-8px;border-radius:50%;background:#2c2312;color:#ffd99a;box-shadow:0 0 0 2px #12100b}
.hd-team .tm-av .ico{width:16px;height:16px}
.hd-team .tm-lbl{margin-left:18px;font-size:13.5px;font-weight:600;color:#ffd99a;white-space:nowrap}
.hd-team .tm-ok{display:none;align-items:center;gap:5px;margin-left:16px;padding:5px 10px 5px 7px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:700;line-height:1;white-space:nowrap}
.hd-team .tm-ok .ico{width:13px;height:13px}
.hd-hero .hd-cap2{grid-column:3;grid-row:5;display:block;margin:8px 6px 0;font-size:13.5px;line-height:1.4;color:#dcc9a4}
.hd-hero .hd-foot{position:absolute;left:0;bottom:0;min-height:0;margin:0}
.hd-hero .hd-foot .hd-cap{display:none}
.hd-hero .hd-foot .ctl{margin-left:0}
/* pass 0: when the record lands, it is visibly done by itself */
.hd-hero.play .hd-okb{opacity:0;transform:translateY(8px) scale(.8);transition:opacity .35s var(--ease),transform .55s cubic-bezier(.2,1.5,.4,1)}
.hd-hero.play.s-ok .hd-okb{opacity:1;transform:none}
.hd-hero.play .hd-res{transition:box-shadow .6s var(--ease)}
.hd-hero.play.s-ok .hd-res{box-shadow:inset 0 0 0 1.5px rgba(var(--accent-rgb),.8),0 0 0 6px rgba(var(--accent-rgb),.08),0 0 70px -8px rgba(var(--accent-rgb),.7),0 30px 60px -34px rgba(0,0,0,.9)}
.hd-hero.play.s-ok .rec-hub .rr{background:rgba(47,181,122,.16)}
.hd-hero.play.s-ok .hd-node{box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.6),0 0 0 8px rgba(var(--accent-rgb),.07),0 0 80px -4px rgba(var(--accent-rgb),.6)}
.hd-hero.play.s-ok .rec::after{animation:okShine 1.2s var(--ease) both}
@keyframes okShine{0%{opacity:1;transform:translateX(-120%)}100%{opacity:1;transform:translateX(120%)}}
/* pass 1: the team comes to the amber card, the line appears under it, the team decides */
.hd-hero.play .hd-team,.hd-hero.play .hd-cap2{opacity:0;transition:opacity .35s var(--ease)}
.hd-hero.play .hd-team .tm-av{opacity:0;transform:translateX(-56px) scale(.8);transition:opacity .5s var(--ease),transform .75s cubic-bezier(.2,1.25,.4,1)}
.hd-hero.play .hd-team .tm-lbl{opacity:0;transform:translateX(-8px);transition:opacity .4s var(--ease) .45s,transform .5s var(--ease) .45s}
.hd-hero.play.s-team .hd-team{opacity:1;box-shadow:inset 0 0 0 1px rgba(245,181,77,.6),0 0 30px -8px rgba(245,181,77,.6)}
.hd-hero.play.s-team .hd-team .tm-av{opacity:1;transform:none}
.hd-hero.play.s-team .hd-team .tm-2{transition-delay:.12s}
.hd-hero.play.s-team .hd-team .tm-3{transition-delay:.24s}
.hd-hero.play.s-team .hd-team .tm-lbl{opacity:1;transform:none}
.hd-hero.play.s-cap .hd-cap2{opacity:1}
.hd-hero.play.s-decided .hd-team .tm-lbl{display:none}
.hd-hero.play.s-decided .hd-team .tm-ok{display:inline-flex;animation:pop7 .5s cubic-bezier(.2,1.5,.4,1) both}
.hd-hero.play.s-decided .hd-team{background:rgba(var(--accent-rgb),.08);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.5),0 0 30px -8px rgba(var(--accent-rgb),.6)}
.hd-hero.play.s-decided .hd-team .tm-av{background:#123026;color:#bff5dc;transition:background .5s var(--ease),color .5s var(--ease)}
.hd-hero.play.ask.s-decided .rec-hub .rr.rq.on{background:#d3f4e4;box-shadow:inset 0 0 0 1.5px #1f9d6b;transition:background .5s var(--ease),box-shadow .5s var(--ease)}
.hd-hero.play.ask.s-decided .rr.rq .p-ask{display:none}
.hd-hero.play.ask.s-decided .rr.rq .p-ok{display:inline-block;animation:pop7 .5s cubic-bezier(.2,1.5,.4,1) both}
.hd-hero.play.ask.s-decided .rr.hr.rq .ht{color:var(--paper-muted)}
.hd-hero.play.ask.s-reset :is(.hd-okb,.hd-team,.hd-cap2){opacity:.2!important;transition:opacity .25s!important}
@media (prefers-reduced-motion:reduce){.hd-hero .hd-team .tm-av,.hd-hero .hd-okb{transition:none}}
/* a little bigger (Alex): more room for the window, the diagram less shrunk */
@media (min-width:1101px){
  .hero5 > .wrap{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
  .hero5 .console5-body .hd{zoom:.8}
}
@media (min-width:861px) and (max-height:820px){.hero5 .console5-body .hd{zoom:.66}}
/* the step numbers look like the 01 02 03 of the cards above (Alex, 15 Oct 2026) */
.how9 .h9-n{left:30px;top:30px;display:block;width:auto;height:auto;padding:7px 11px;border-radius:999px;background:rgba(5,6,7,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);font:500 11.5px/1 var(--mono);letter-spacing:.1em;color:#f1f4f6}
/* the window keeps one size whatever the diagram shows (Alex, 15 Oct 2026: "sa nu se schimbe dimensiunea ... lasa-l mai
   mare"): wider, the rows of the record never wrap differently between the passes (a longer status pill or a translated
   label used to make a row, and so the whole window, taller), and the stage keeps its largest height */
@media (min-width:1101px){
  .hero5 > .wrap{grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:40px}
  .hero5 .console5-body .hd{zoom:.82}
  .hero5 .hd-stage{min-height:520px;align-content:start}
}
@media (min-width:861px) and (max-height:820px){.hero5 .console5-body .hd{zoom:.68}.hero5 .hd-stage{min-height:0}}
.hd-hero .rr.hr{min-height:58px;align-content:center}
.hd-hero .hr .hl,.hd-hero .hr .ht{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-hero .hd-team{flex-wrap:nowrap;white-space:nowrap}
/* (15 Oct 2026, Alex) the warning is an exclamation mark in a triangle everywhere */
.dci{width:34px;height:34px;background:none;color:var(--amber)}
.dci .ico{width:34px;height:34px}
.hi .hw{display:none}
/* hero: the doubt only exists in the pass that needs approval; the automatic pass shows "all clear" in its place */
.hd-cap0{display:none}
.hd-hero .hd-cap0{grid-column:3;grid-row:2 / 4;align-self:center;justify-self:start;display:flex;align-items:center;gap:10px;margin:0;padding:12px 16px 12px 12px;border-radius:15px;background:linear-gradient(180deg,rgba(var(--accent-rgb),.12),rgba(var(--accent-rgb),.05));box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.45);font-size:15px;font-weight:600;line-height:1.35;color:#dcf7ea;opacity:0}
.hd-hero .hd-cap0 .ico{flex:none;width:24px;height:24px;color:var(--accent)}
.hd-hero.play:not(.ask).s-ok .hd-cap0{opacity:1;transition:opacity .5s var(--ease)}
.hd-hero.play .rt{opacity:0}
.hd-hero.play .dc{opacity:0;transform:translateY(10px) scale(.97)}
.hd-hero.play:not(.ask).s-reset :is(.rt,.dc,.hd-team,.hd-cap2){opacity:0!important}
/* hero: the record row that needs a person is an intense red, with the warning sign, until the team decides */
.hd-hero .rec-hub .rr.rq{background:#ffe2df;box-shadow:inset 0 0 0 1.5px #e5484d,0 0 0 4px rgba(229,72,77,.16),0 12px 28px -12px rgba(229,72,77,.75)}
.hd-hero .rr.hr.rq .ht{color:#9b1c1c}
.hd-hero .rr.rq .p-ask{background:#e5484d;color:#fff}
.hd-hero .rr.rq .hi{background:#e5484d;color:#fff}
.hd-hero .rr.rq .hi > .ico{display:none}
.hd-hero .rr.rq .hi .hw{display:grid;place-items:center}
.hd-hero .rr.rq .hi .hw .ico{width:20px;height:20px}
.hd-hero.play:not(.ask) .rr.rq .hi,.hd-hero.play .rr.rq:not(.on) .hi{background:#10171b}
.hd-hero.play:not(.ask) .rr.rq .hi > .ico,.hd-hero.play .rr.rq:not(.on) .hi > .ico{display:block}
.hd-hero.play:not(.ask) .rr.rq .hi .hw,.hd-hero.play .rr.rq:not(.on) .hi .hw{display:none}
.hd-hero.play.ask:not(.s-decided) .rec-hub .rr.rq.on{animation:rqPulse 1.4s ease-in-out infinite}
@keyframes rqPulse{0%,100%{box-shadow:inset 0 0 0 1.5px #e5484d,0 0 0 3px rgba(229,72,77,.14),0 12px 28px -12px rgba(229,72,77,.7)}50%{box-shadow:inset 0 0 0 1.5px #e5484d,0 0 0 7px rgba(229,72,77,.24),0 12px 34px -8px rgba(229,72,77,.9)}}
.hd-hero.play.ask.s-decided .rr.rq .hi{background:#1f9d6b;color:#fff}
.hd-hero.play.ask.s-decided .rr.rq .hi > .ico{display:block}
.hd-hero.play.ask.s-decided .rr.rq .hi .hw{display:none}
/* ============================================================================================
   Phones (15 Oct 2026, Alex: "pe mobile scoate animatia ... ramane doar pe web" and "se incarca greu ... efectul de
   blur cand apar sectiuni noi e sacadat"). On a phone: no diagram window in the hero, no hero video (its poster
   stands still; the sources carry media), sections appear with a fade and a short slide but without blur, and glass
   that blurred what lies behind it becomes solid (a blur behind a moving page costs a phone every frame).
   ============================================================================================ */
@media (max-width:860px){
  .hero5 .console5{display:none}
  .hero5 > .wrap{padding-bottom:28px}
  .pg-home .rv{filter:none!important;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)!important}
  .pg-home .rv.in{transform:none}
  .pg-home .rv:is(.svc3-grid > li,.pop3-grid > li){transform:translateY(18px)}
  .pg-home .rv.in:is(.svc3-grid > li,.pop3-grid > li){transform:none}
  .hero3 h1 .ln > span{animation-name:ln3m}
  .hero3 .hin{animation-name:hin4m}
  header.nav,.how9 .h9-card,.qp3 .qp3-col,.final3 .box > div:last-child:not(.copy),.svc3-card .n,.pop3-card .tag,.pop3-card .go,.jump3 a,.pg-home .btn-ghost,.how9 .h9-n,.console5-frame{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  header.nav{background:rgba(6,8,9,.96)}
  .final3 .box > div:last-child:not(.copy){background:rgba(10,13,15,.94)}
  .svc3-card .n,.pop3-card .tag,.how9 .h9-n{background:rgba(5,6,7,.72)}
}
@keyframes ln3m{from{transform:translateY(108%)}to{transform:none}}
@keyframes hin4m{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* ============================================================================================
   "Zo werkt het", the cards Alex chose (15 Oct 2026, "B3 + T3"): tall photo cards, the time on a frosted glass badge
   (step 2 in mint), one large word and one plain line on a dark gradient. The head of the section stays as it was.
   ============================================================================================ */
.h10-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.h10-card{position:relative;aspect-ratio:3 / 4;overflow:hidden;border-radius:28px;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 50px 90px -50px #000}
.h10-card img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.h10-card:hover img{transform:scale(1.04)}
.h10-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,6,7,.35) 0%,rgba(5,6,7,0) 24%,rgba(5,6,7,.5) 52%,rgba(5,6,7,.96) 80%)}
.h10-badge{position:absolute;left:16px;top:16px;z-index:2;padding:14px 18px 16px;border-radius:20px;background:rgba(8,11,13,.5);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 20px 40px -20px rgba(0,0,0,.8)}
.h10-badge small{display:block;margin-bottom:6px;font:600 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.h10-badge b{display:block;font-size:44px;font-weight:700;letter-spacing:-.045em;line-height:1;color:#fff;white-space:nowrap}
.h10-card:nth-child(2) .h10-badge b{color:var(--accent)}
.h10-ov{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:24px 26px 28px}
.h10-ov h3{margin:0;font-size:54px;font-weight:700;letter-spacing:-.045em;line-height:1;color:#fff}
.h10-ov p{margin:10px 0 0;font-size:16.5px;line-height:1.5;color:#dfe4e8}
@media (max-width:1100px){.h10-badge b{font-size:36px}.h10-ov h3{font-size:44px}}
@media (max-width:860px){.h10-badge{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(8,11,13,.78)}}
@media (max-width:860px){
  .h10-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:-20px;padding-inline:20px;scroll-padding-inline:20px;padding-bottom:6px}
  .h10-grid::-webkit-scrollbar{display:none}
  .h10-card{scroll-snap-align:start}
}
/* the large word and the time follow the width of their card, so "Goedkeuren." never runs past it */
.h10-card{container-type:inline-size}
.h10-ov h3{font-size:min(54px,calc((100cqw - 52px) / 6.1))}
.h10-badge b{font-size:min(44px,calc((100cqw - 74px) / 5.6))}

/* Titles of the three service cards (Alex, 16 Oct 2026, version 1): the verb white over the rest in grey, two large
   tight lines. The size follows the width of the text column, so the longest Dutch word (Automatiseren) always fits. */
.svc3-card .tx{container-type:inline-size}
.svc3-card h3{font-size:36px;font-size:min(46px,15cqi);line-height:.96;letter-spacing:-.05em;text-transform:none;color:#f3f5f7}
.svc3-card h3 span{margin-top:0;font-size:inherit;letter-spacing:inherit;line-height:inherit;color:#5f686f}

/* Automate, the third card, is the one we lead with (Alex, 16 Oct 2026): a mint edge with a soft glow and the verb in
   mint, as in version E; the three cards keep their place and size. */
.svc3-card.feat,.svc3-card.feat:hover{box-shadow:0 0 70px -16px rgba(var(--accent-rgb),.42),0 50px 90px -50px #000}
.svc3-card.feat::after{box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.5),inset 0 1px 0 rgba(var(--accent-rgb),.3)}
.svc3-card.feat:hover::after{box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.75),inset 0 1px 0 rgba(var(--accent-rgb),.4)}
.svc3-card.feat h3{color:var(--accent)}

/* The twelve gains at the foot of the prices (Alex, 16 Oct 2026, version E with the hover "wake up"): 20px, white and
   grey in turn, no lines. Under a mouse pointer the band keeps moving at half speed (/home3.js) and wakes up: every gain
   white, a wave of light through the dots (--i is set by /home3.js), two thin mint lines. */
.gt5{padding:8px 0}
.gt5 li{font-size:20px;transition:color .4s var(--ease)}
.gt5 li::after{width:5px;height:5px;margin:0 22px;box-shadow:0 0 8px rgba(var(--accent-rgb),.7)}
.gt5::before,.gt5::after{background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.55) 20%,rgba(var(--accent-rgb),.55) 80%,transparent);opacity:0;transition:opacity .6s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .gt5:hover .gt-track{animation-play-state:running}
  .gt5:hover::before,.gt5:hover::after{opacity:1}
  .gt5:hover li{color:#f3f5f7}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .gt5:hover li::after{animation:gtwake 1.5s ease-in-out infinite;animation-delay:calc(var(--i,0) * .1s)}
}
@keyframes gtwake{0%,100%{transform:scale(1);opacity:.55}45%{transform:scale(2.3);opacity:1}}

/* Every button on the pages (Alex, 16 Oct 2026, version 3; first on the two large "Book a free analysis" buttons): a
   dark pill whose edge carries a mint light that keeps circling, faster under the pointer; white words, a mint arrow.
   The small button in the top bar keeps its mint look; a disabled button (the form before it is filled in) keeps a
   still, dimmer edge. */
@property --run{syntax:'<angle>';inherits:false;initial-value:0deg}
.btn:not(.nav .btn){position:relative;isolation:isolate;border:0;background:none;color:#fff;box-shadow:0 0 40px -12px rgba(var(--accent-rgb),.6);-webkit-backdrop-filter:none;backdrop-filter:none}
.btn:not(.nav .btn)::before{content:"";position:absolute;inset:-1.5px;z-index:-2;border-radius:inherit;background:conic-gradient(from var(--run),transparent 0 45%,var(--accent) 65%,#9ff5d6 72%,transparent 88%);animation:btnrun 3s linear infinite}
.btn:not(.nav .btn)::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(180deg,#12171a,#0a0c0e)}
.btn:not(.nav .btn):hover{background:none;box-shadow:0 0 54px -10px rgba(var(--accent-rgb),.8)}
.btn:not(.nav .btn):hover::before{animation-duration:1.1s}
.btn:not(.nav .btn) .ic{background:none;color:var(--accent)}
.btn:not(.nav .btn):disabled{box-shadow:none}
.btn:not(.nav .btn):disabled::before{animation:none;opacity:.45}
@keyframes btnrun{to{--run:360deg}}
@media (prefers-reduced-motion:reduce){.btn:not(.nav .btn)::before{animation:none}}

/* Who does each step (Alex, 16 Oct 2026, version 2): the doer in mint capitals before the verb (YOU show. / WE build. /
   YOU approve.; NL U laat zien. / WIJ bouwen. / U keurt goed.). */
.h10-ov h3 em{font-style:normal;color:var(--accent);text-shadow:0 0 28px rgba(var(--accent-rgb),.45)}

/* What can AIstap do for you, on phones (Alex, 16 Oct 2026): the three cards one under the other instead of side by side
   with a sideways scroll, which got in the way of scrolling down the page. */
@media (max-width:640px){
  .svc3-grid{grid-template-columns:minmax(0,1fr);grid-auto-flow:row;grid-auto-columns:auto;gap:14px;overflow:visible;scroll-snap-type:none;margin-inline:0;padding-inline:0;padding-bottom:0}
}

/* It is this simple, on phones and small tablets (Alex, 16 Oct 2026): the three step cards one under the other instead
   of side by side with a sideways scroll; at most 440px wide, so a tablet does not get giant portrait cards. */
@media (max-width:860px){
  .h10-grid{grid-template-columns:minmax(0,440px);grid-auto-flow:row;grid-auto-columns:auto;justify-content:center;gap:14px;overflow:visible;scroll-snap-type:none;margin-inline:0;padding-inline:0;padding-bottom:0}
}

/* The gains band never stops, not even when a phone taps it (Alex, 16 Oct 2026): on a touch screen a tap counts as
   :hover, and the older rule paused the band there. With a mouse it still slows down and wakes up (above). */
.gt5:hover .gt-track{animation-play-state:running}

/* The line "Staat uw vraag er niet bij?" (Alex, 16 Oct 2026): on a wide screen under the heading on the left, as it
   was; where the questions stack (up to 1100px) under the last question and smaller, so a phone shows it after them. */
@media (min-width:1101px){
  .faq{grid-template-rows:auto 1fr;row-gap:0}
  .faq > div:first-child{grid-column:1;grid-row:1}
  .faq > .qas{grid-column:2;grid-row:1 / span 2}
  .wrap.faq > .intro.faq-more{grid-column:1;grid-row:2;align-self:start;margin:22px 0 0}
}
@media (max-width:1100px){
  .wrap.faq > .intro.faq-more{max-width:none;margin:-30px 0 0;padding:0 8px;font-size:14.5px;line-height:1.55;color:#7d868e}
  .wrap.faq > .intro.faq-more a{color:#c3cad0;text-decoration:underline;text-decoration-color:rgba(var(--accent-rgb),.55);text-underline-offset:3px}
  .wrap.faq > .intro.faq-more a:hover{color:var(--accent)}
}

/* Prices at a glance, version C1 (Alex, 16 Oct 2026): each column opens with a paper voucher (a stub with the step
   number and name, a perforated line with a notch top and bottom, the starting price), over the list as it was; the
   cards keep their own background. The Automate voucher carries a mint corner ribbon (the words of the Pilot row,
   hidden from screen readers there) and its column a mint edge. */
.qp3-col{container-type:inline-size}
/* The ticket at the top of each price column (Alex, 18 Oct 2026, letterpress, version 1 of _tickets2.html): fine paper
   with a grain and a printed frame, two notches and a row of punched dots; the icon pressed into a slightly darker
   stub; the step name is the big word, its starting price under it. The shadow follows the shape; it lifts under the
   mouse. The Automate ticket has a ribbon in its lower corner (on a narrow column only the mint band, no words). */
.qvw{position:relative;margin:0 0 18px;filter:drop-shadow(0 16px 20px rgba(0,0,0,.4));transition:transform .6s var(--ease),filter .6s var(--ease)}
.qvw:hover{transform:translateY(-3px);filter:drop-shadow(0 24px 28px rgba(0,0,0,.55))}
.qv{--cut:80px;position:relative;display:flex;min-height:98px;overflow:hidden;border-radius:15px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"),#f4f2eb;color:#121619;-webkit-mask:radial-gradient(circle 9px at var(--cut) 0,transparent 97%,#000) top / 100% 51% no-repeat,radial-gradient(circle 9px at var(--cut) 100%,transparent 97%,#000) bottom / 100% 51% no-repeat;mask:radial-gradient(circle 9px at var(--cut) 0,transparent 97%,#000) top / 100% 51% no-repeat,radial-gradient(circle 9px at var(--cut) 100%,transparent 97%,#000) bottom / 100% 51% no-repeat}
.qv::after{content:"";position:absolute;inset:6px;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(16,20,22,.13);pointer-events:none}
.qv-s{flex:none;display:grid;place-items:center;width:var(--cut);background:rgba(16,20,22,.045)}
.qv-ic{width:40px;height:40px;fill:none;stroke:#283035;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round;overflow:visible;filter:drop-shadow(0 1px 0 rgba(255,255,255,.95)) drop-shadow(0 -.6px 0 rgba(0,0,0,.2))}
.qv-perf{flex:none;width:2px;margin:12px -1px;background:radial-gradient(circle,rgba(16,20,22,.34) 1px,transparent 1.5px) center top / 2px 7px repeat-y}
.qv-m{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:16px 20px}
.qp3-col .qv-m h3{display:block;margin:0;font-size:36px;font-size:min(36px,calc((100cqw - 130px) / 4.6));font-weight:760;letter-spacing:-.045em;line-height:.95;text-transform:none;color:#121619;text-shadow:0 1px 0 rgba(255,255,255,.8)}
:lang(nl) .qp3-col .qv-m h3{font-size:30px;font-size:min(30px,calc((100cqw - 124px) / 7.2))}
.qv-p{display:flex;align-items:baseline;gap:7px;margin:0}
.qv-p small{font:700 9.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#6a737a}
.qv-p b{font-size:20px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.qv-rib{position:absolute;right:-58px;bottom:6px;z-index:2;width:180px;padding:5px 0;transform:rotate(-38deg);background:var(--accent);box-shadow:0 6px 14px -6px rgba(0,0,0,.6);text-align:center;font:800 7.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#04120b}
.qv-rib span{display:inline-block;max-width:14ch}
@container (max-width:270px){
  .qv-rib{right:-68px;bottom:0}
  .qv-rib span{visibility:hidden}
}
.qp3-col.feat{box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.5),0 0 70px -16px rgba(var(--accent-rgb),.45),0 40px 80px -50px #000}

/* Prices at a glance: a hint bubble with what each product is (Alex, 16 Oct 2026), in the words of the prices page.
   With a mouse it opens on hover; on a phone a tap focuses the row and opens it. The shine over a row now moves its
   background instead of sliding a layer, so the row no longer has to clip and the bubble can stand above it. */
.qp3-col li{overflow:visible;cursor:help;outline:none}
.qp3-col li::after{transform:none;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.06) 50%,transparent 70%) no-repeat;background-size:220% 100%;background-position:160% 0;transition:background-position 1.1s var(--ease)}
.qp3-col li:hover::after{transform:none;background-position:-60% 0}
.qp3-col li:hover,.qp3-col li:focus{z-index:4}
.qp3-col li:focus-visible .nm{color:var(--accent)}
.qtip{position:absolute;left:-8px;bottom:calc(100% + 4px);z-index:5;width:max-content;max-width:min(300px,calc(100% + 16px));padding:12px 14px;border-radius:12px;background:#151a1d;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.38),0 18px 40px -14px #000;font-size:13.5px;font-weight:400;line-height:1.5;letter-spacing:0;color:#dfe4e8;opacity:0;visibility:hidden;transform:translateY(6px);pointer-events:none;transition:opacity .25s var(--ease),transform .3s var(--ease),visibility 0s .3s}
.qtip::after{content:"";position:absolute;left:24px;top:100%;border:7px solid transparent;border-top-color:#151a1d}
.qp3-col li:hover .qtip,.qp3-col li:focus .qtip{opacity:1;visibility:visible;transform:none;transition:opacity .25s var(--ease),transform .3s var(--ease),visibility 0s}

/* Questions on the home page as a chat (Alex, 16 Oct 2026, version 5): each question is a message from the visitor on
   the right, each answer a reply from AIstap on the left; the cards and icons of the accordion are gone here only (the
   use-case pages keep theirs). Still <details>: it opens with a click or the keyboard and works without JavaScript. */
.pg-home .wrap.faq .qas{gap:16px}
.pg-home .wrap.faq .qa,.pg-home .wrap.faq .qa[open]{background:none;box-shadow:none;border:0}
.pg-home .wrap.faq .qa::before,.pg-home .wrap.faq .qa::after{display:none}
.pg-home .wrap.faq .qa summary .tb,.pg-home .wrap.faq .qa summary > .ico{display:none}
.pg-home .wrap.faq .qa summary{width:fit-content;max-width:86%;margin-left:auto;padding:13px 18px;border-radius:20px 20px 6px 20px;background:#f2f1ec;color:#101416;font-size:16px;font-weight:500;cursor:pointer;transition:background .25s var(--ease)}
.pg-home .wrap.faq .qa summary:hover{background:#fff}
.pg-home .wrap.faq .qa[open] summary{background:#e6e5df}
.pg-home .wrap.faq .qa p{width:fit-content;max-width:86%;margin-top:10px;padding:13px 18px 14px;border-radius:20px 20px 20px 6px;background:#12171a;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.35);color:#dfe4e8;font-size:15px}
.pg-home .wrap.faq .qa p::before{content:"AIstap";display:block;margin-bottom:6px;font:700 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}

/* The catalogue of solutions (Alex, 16 Oct 2026): category pills and compact cards, on the home page (next to
   "Popular") and on the hub (next to "All"). A card with its own page carries that page's photo and a link over the
   whole card; the others stay blank for now ("example coming"). On a phone the pills wrap: no sideways scrolling. */
.ucx-pills{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.ucx-pill{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:0;border-radius:999px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);font:500 14px/1.1 var(--sans);text-align:left;color:#c3cad0;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease)}
.ucx-pill b{font:700 11px/1 var(--mono);letter-spacing:.06em;color:#7d868e}
.ucx-pill span{padding:3px 7px;border-radius:999px;background:rgba(255,255,255,.07);font:600 11px/1 var(--mono);color:#8e979f}
.ucx-pill:hover{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.26)}
.ucx-pill.on{background:var(--accent);color:#04120b;box-shadow:0 0 24px -6px rgba(var(--accent-rgb),.7)}
.ucx-pill.on b,.ucx-pill.on span{color:#04120b}
.ucx-pill.on span{background:rgba(4,18,11,.12)}
.ucx-pill:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ucx-panel[hidden]{display:none}
.ucx-panels > .ucx-panel + .ucx-panel{margin-top:48px}
.ucx-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:0 0 16px}
.ucx-head h3{display:flex;align-items:baseline;gap:10px;margin:0;font-size:22px;font-weight:600;letter-spacing:-.02em;color:#f3f5f7}
.ucx-head h3 b{font:700 12px/1 var(--mono);letter-spacing:.08em;color:var(--accent)}
.ucx-head p{flex:1 1 320px;margin:0;font-size:15px;line-height:1.5;color:#8e979f}
.ucx-cnt{font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#7d868e}
.ucx-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ucx-card{position:relative;display:flex;gap:14px;padding:14px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01)),#0b0e10;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.ucx-card.is-live:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.45),0 18px 40px -24px rgba(var(--accent-rgb),.5)}
.ucx-th{flex:none;width:76px;height:76px;overflow:hidden;border-radius:12px;background:#12171a}
.ucx-th img{display:block;width:100%;height:100%;object-fit:cover}
.ucx-blank{display:grid;place-items:center;background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 6px,transparent 6px 12px),#0f1316;outline:1px dashed rgba(255,255,255,.16);outline-offset:-1px}
.ucx-blank b{font:700 17px/1 var(--mono);color:#4b535a}
.ucx-tx{min-width:0;display:flex;flex-direction:column}
.ucx-n{margin:0 0 5px;font:700 10.5px/1 var(--mono);letter-spacing:.1em;color:#7d868e}
.ucx-card h4{margin:0;font-size:15.5px;font-weight:600;line-height:1.3;color:#f3f5f7}
.ucx-p{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:#9aa3ab}
.ucx-go,.ucx-also{align-self:flex-start;margin-top:10px;font-size:13px;font-weight:600;text-decoration:none;color:var(--accent)}
.ucx-go::after{content:"";position:absolute;inset:0;border-radius:inherit}
.ucx-go:focus-visible,.ucx-also:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ucx-also{position:relative;z-index:1;margin-top:5px;color:#c3cad0}
.ucx-also:hover{color:var(--accent)}
.ucx-soon{margin-top:10px;font:600 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#5f686f}
@media (max-width:1100px){.ucx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .ucx-grid{grid-template-columns:minmax(0,1fr)}
  .ucx-pills{gap:6px}
  .ucx-pill{padding:8px 11px;font-size:13px}
  .ucx-pill span{display:none}
  .ucx-head h3{font-size:19px}
}
.ucx-card:not(.is-live) .ucx-n{display:none}

/* The 80 solutions on the home page as a tilted ring (Alex, 16 Oct 2026, version 3 of _ucr.html). /usecase.js X2
   puts .on on .uo and places the cards; without it the search, chips and arrows stay hidden and the first twelve
   cards stand in a plain grid. The ring sits lower as it grows (the tilt of 16deg lifts its back by R x sin 16deg), so
   the front card always ends at the same height above the arrows. */
.pop3{overflow:hidden}
.uo svg,.ucw :is(.uo-field,.uo-chip) svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.uo-field,.uo-chips,.uo-ctl{display:none}
.uo-field{position:relative;z-index:5;align-items:center;gap:16px;max-width:820px;margin:0 auto 16px;padding:18px 26px;border-radius:999px;background:#0d1114;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.4),0 0 70px -18px rgba(var(--accent-rgb),.5);color:var(--accent);transition:box-shadow .3s var(--ease)}
.uo-field:focus-within{box-shadow:inset 0 0 0 1.5px var(--accent),0 0 80px -12px rgba(var(--accent-rgb),.7)}
.uo-field svg{flex:none;width:24px;height:24px}
.uo-field input{flex:1;min-width:0;border:0;outline:0;background:none;font:500 21px/1.2 var(--sans);color:#fff}
.uo-field input::placeholder{color:#7d868e;opacity:1}
.uo-field input::-webkit-search-cancel-button{filter:invert(1);opacity:.5}
/* the count is not shown (Alex, 18 Oct 2026); screen readers still hear it */
.uo-field output{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.uo-chips{position:relative;z-index:5;flex-wrap:wrap;justify-content:center;gap:8px;max-width:1000px;margin:0 auto}
.uo-chip{display:inline-flex;align-items:center;gap:9px;padding:9px 15px 9px 11px;border:0;border-radius:999px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);font:500 14px/1 var(--sans);color:#dfe4e8;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease)}
.uo-chip .uo-ic{flex:none;width:18px;height:18px;stroke-width:1.7;stroke-linejoin:round;color:var(--accent)}
.uo-chip:hover{box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.6);color:#fff}
.uo-chip.on{background:var(--accent);color:#04120b;box-shadow:0 0 26px -4px rgba(var(--accent-rgb),.8)}
.uo-chip.on .uo-ic{color:#04120b}
.uo :is(.uo-chip,.uo-ctl button,.uo-go):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.uo-ring{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;margin:0;padding:0;list-style:none}
.uo-card{position:relative;overflow:hidden;border-radius:22px;background:#0b0e10;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 30px 60px -30px #000}
.uo-card a,.uo-card img{-webkit-user-drag:none}
.uo-img{display:block;width:100%;height:150px;object-fit:cover}
.uo-blank{display:grid;place-items:center;background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 6px,transparent 6px 12px),#0f1316}
.uo-blank b{font:700 32px/1 var(--mono);color:#3d444a}
.uo-b{padding:15px 17px}
.uo-k{margin:0 0 7px;font:700 10px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#8e979f}
.uo-t{margin:0;font:600 16px/1.25 var(--sans);letter-spacing:0;color:#fff}
.uo-t mark{padding:0 2px;border-radius:4px;background:rgba(var(--accent-rgb),.25);color:#fff}
.uo-p{display:-webkit-box;margin:7px 0 0;overflow:hidden;font-size:13px;line-height:1.5;color:#8e979f;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.uo-go{display:inline-block;margin-top:10px;font:600 13px/1 var(--sans);text-decoration:none;color:var(--accent)}
.uo-go::after{content:"";position:absolute;inset:0;border-radius:inherit}
.uo-soon{display:inline-block;margin-top:10px;font:600 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#5f686f}
.uo-none{margin:0}
.uo.on .uo-field,.uo.on .uo-chips,.uo.on .uo-ctl{display:flex}
.uo.on .uo-stage{position:relative;height:600px;margin-top:8px;perspective:1500px;perspective-origin:50% 42%;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.uo.on .uo-stage.drag{cursor:grabbing}
.uo.on .uo-ring{position:absolute;top:calc(100% - 205px - var(--R, 400) * .2756px);left:50%;display:block;width:0;height:0;transform-style:preserve-3d;transform:translateZ(calc(var(--R, 400) * -1px)) rotateX(-16deg)}
.uo.on .uo-card{position:absolute;top:-180px;left:-125px;width:250px;height:360px;backface-visibility:visible;will-change:transform,filter;transition:box-shadow .4s var(--ease)}
.uo.on .uo-card:not(.front){cursor:pointer}
.uo.on .uo-card.front{box-shadow:inset 0 0 0 1.5px var(--accent),0 0 60px -10px rgba(var(--accent-rgb),.85),0 30px 60px -30px #000}
.uo.on .uo-none{position:absolute;inset:0;display:grid;place-items:center;padding:0 24px;font-size:17px;line-height:1.5;text-align:center;color:#9aa3ab}
.uo-ctl{position:relative;z-index:5;align-items:center;justify-content:center;gap:16px}
.uo-ctl button{width:46px;height:46px;border:0;border-radius:50%;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);font-size:18px;color:#fff;cursor:pointer;transition:box-shadow .25s var(--ease),color .25s var(--ease)}
.uo-ctl button:hover{box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent)}
.uo-pos{min-width:70px;font:700 12px/1 var(--mono);letter-spacing:.1em;text-align:center;color:#7d868e}
@media (max-width:860px){.uo.on .uo-stage{height:540px;perspective:1100px}}
@media (max-width:640px){
  .uo-field{gap:12px;margin-bottom:14px;padding:14px 18px}
  .uo-field svg{width:20px;height:20px}
  .uo-field input{font-size:17px}
  .uo-chips{gap:6px}
  .uo-chip{gap:7px;padding:8px 12px 8px 9px;font-size:12.5px}
  .uo-chip .uo-ic{width:15px;height:15px}
  .uo.on .uo-stage{height:470px;perspective:900px}
  .uo.on .uo-ring{top:calc(100% - 168px - var(--R, 400) * .2756px)}
  .uo.on .uo-card{top:-150px;left:-100px;width:200px;height:300px}
  .uo-img{height:116px}
  .uo-b{padding:12px 14px}
  .uo-t{font-size:15px}
  .uo-p{font-size:12.5px}
}

/* The use-case hub: the drifting wall (Alex, 18 Oct 2026, version C of _ucw.html). Four rows of solutions drift past
   in opposite directions, from edge to edge of the screen; a row stands still under the mouse and the button pauses all
   four. The search and the chips are the ring's (.uo-field, .uo-chips); here they light the matching cards (.hit, the
   rest .dim) and filter the list under the wall (/usecase.js, X3). With "reduce motion" the rows stand still and can be
   scrolled sideways by hand; without the script they drift and the search stays hidden. */
.ucw-sec{overflow-x:hidden;overflow-x:clip}
.ucw{margin:6px 0 64px}
.ucw.on .uo-field,.ucw.on .uo-chips{display:flex}
.ucw .uo-chips{margin-bottom:30px}
.ucw-stage{display:flex;flex-direction:column;gap:14px;margin:0 calc(50% - 50vw);-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.ucw-row{overflow:hidden}
.ucw-track{display:flex;gap:14px;width:max-content;margin:0;padding:0 14px 0 0;list-style:none;animation:ucwL 160s linear infinite}
.ucw-row:nth-child(even) .ucw-track{animation-name:ucwR;animation-duration:185s}
.ucw-row:hover .ucw-track,.ucw.paused .ucw-track{animation-play-state:paused}
@keyframes ucwL{to{transform:translateX(-50%)}}
@keyframes ucwR{from{transform:translateX(-50%)}to{transform:none}}
.ucw-track > li{display:flex;flex:none}
.ucw-card{display:flex;align-items:center;gap:12px;width:330px;padding:12px;border-radius:16px;background:#0b0e10;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:inherit;text-decoration:none;transition:opacity .5s,filter .5s,box-shadow .5s}
a.ucw-card:hover{box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.55),0 0 30px -10px rgba(var(--accent-rgb),.7)}
.ucw-img{flex:none;width:66px;height:66px;border-radius:12px;object-fit:cover}
.ucw-blank{display:grid;place-items:center;background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 6px,transparent 6px 12px),#0f1316}
.ucw-blank b{font:700 15px/1 var(--mono);color:#3d444a}
.ucw-b{display:flex;flex:1;flex-direction:column;min-width:0}
.ucw-k{overflow:hidden;margin-bottom:6px;font:700 9.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis;color:#8e979f}
.ucw-t{font-size:14px;font-weight:600;line-height:1.25;color:#fff}
.ucw-t mark{background:none;color:var(--accent)}
.ucw-p{display:-webkit-box;overflow:hidden;margin-top:5px;font-size:12.5px;line-height:1.45;color:#8e979f;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ucw-go{flex:none;align-self:flex-start;font-size:15px;line-height:1;color:var(--accent)}
.ucw-card.hit{box-shadow:inset 0 0 0 1.5px var(--accent),0 0 34px -8px rgba(var(--accent-rgb),.85)}
.ucw-card.dim{opacity:.14;filter:grayscale(1)}
.ucw-foot{display:none;justify-content:center;margin-top:20px}
.ucw.on .ucw-foot{display:flex}
.ucw .uo-none{max-width:560px;margin:18px auto 0;font-size:16px;line-height:1.5;text-align:center;color:#9aa3ab}
.ucw-all{margin:0 0 6px;font:700 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#7d868e}
@media (prefers-reduced-motion:reduce){
  .ucw-track{animation:none}
  .ucw-row{overflow-x:auto;scrollbar-width:none}
  .ucw-row::-webkit-scrollbar{display:none}
  .ucw.on .ucw-foot{display:none}
}
@media (max-width:640px){
  .ucw-stage{gap:10px}
  .ucw-card{width:272px;padding:10px}
  .ucw-img{width:56px;height:56px}
  .ucw-t{font-size:13px}
}

/* Prices on the home page as a switch (Alex, 18 Oct 2026; _paths.html 3, _switch.html 3, _advice.html 1): two routes
   and training, three plain steps each, "our advice" written by hand next to One task, the scan credit as a coupon.
   /home3.js puts .on on .ps-tg and switches the routes; without it the three routes stand under one another.
   Between the steps "then" is written by hand over each gap (_links.html 4); on a phone the three tabs stay on one
   row, the icon above the words (_links.html A); "our advice" is written to the right and its arrow hooks down
   into One task (the tip on the middle of the tab, whatever the width). */
.ps-head{max-width:780px;margin:0 auto 34px;text-align:center}
.ps-head .eyebrow{margin:0 auto 20px}
.ps-head h2{margin:0}
.ps-intro{max-width:580px;margin:16px auto 0;font-size:17px;line-height:1.55;color:#9aa3ab}
.ps-ic{flex:none;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
:is(.ps-sw,.ps-card){background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012) 45%),#0b0e10;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.06),0 30px 60px -40px #000}
.ps-sw{display:none;position:relative;flex-wrap:wrap;justify-content:center;width:max-content;max-width:100%;margin:22px auto 22px;padding:6px;border-radius:30px}
.ps-tg.on .ps-sw{display:flex}
.ps-sw button{position:relative;z-index:1;-webkit-tap-highlight-color:transparent;display:inline-flex;align-items:center;gap:9px;padding:14px 22px;border:0;border-radius:999px;background:none;font:550 15.5px/1 var(--sans);color:#aab3ba;cursor:pointer;transition:color .35s}
.ps-sw button:hover{color:#fff}
.ps-sw button[aria-selected="true"]{color:#04120b}
.ps-sw button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ps-sw .ps-ic{width:18px;height:18px;stroke-width:1.8}
.ps-ind{position:absolute;left:0;top:0;width:var(--w,0px);height:var(--h,0px);border-radius:999px;background:var(--accent);box-shadow:0 0 30px -6px rgba(var(--accent-rgb),.8);transform:translate(var(--x,0px),var(--y,0px));transition:transform .55s cubic-bezier(.3,.9,.3,1),width .55s cubic-bezier(.3,.9,.3,1),height .55s cubic-bezier(.3,.9,.3,1)}
.ps-ann{position:absolute;right:calc(100% + 26px);top:-34px;display:flex;align-items:flex-start;gap:2px;pointer-events:none}
.ps-hand{font:italic 500 18px/1.15 Georgia,"Times New Roman",serif;text-align:right;white-space:nowrap;color:var(--accent);transform:rotate(-4deg)}
.ps-arrow{width:86px;height:52px;margin-top:6px;fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.ps-route{margin:0 0 6px;font-size:22px;text-align:center}
.ps-tg.on .ps-route{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.ps-p + .ps-p{margin-top:44px}
.ps-tg.on .ps-p + .ps-p{margin-top:0}
.ps-tg.on .ps-p{animation:psin .55s cubic-bezier(.3,.9,.3,1)}
@keyframes psin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.ps-for{margin:0 0 24px;font-size:15.5px;text-align:center;color:#9aa3ab}
.ps-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0;padding:0;list-style:none}
.ps-card{position:relative;display:flex;flex-direction:column;gap:9px;padding:26px 24px;border-radius:26px;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.ps-card:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.32),inset 0 1px 0 rgba(255,255,255,.06),0 34px 60px -38px #000}
/* the joins between the steps (Alex, 18 Oct 2026, version 4 of _links.html): "then" written by hand with a drawn
   arrow over each gap, in the same hand as "our advice". They are list items of their own (aria-hidden) between the
   cards, so a card that lifts under the mouse cannot cover them (the old round arrow was a part of the card and got
   cut). The pen draws them when the tab opens and again every 15 seconds; with "reduce motion" they just stand. */
.ps-steps:not(.ps-3){grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr) 24px minmax(0,1fr);gap:0;padding-top:58px}
.ps-link{position:relative;z-index:2;pointer-events:none}
.ps-then{position:absolute;left:50%;top:-62px;width:132px;height:56px;margin-left:-66px}
.ps-then svg{position:absolute;left:0;top:0;width:132px;height:56px;overflow:visible;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ps-then .ps-then-m{display:none}
.ps-then em{position:absolute;left:50%;top:2px;font:italic 500 18px/1 Georgia,"Times New Roman",serif;color:var(--accent);white-space:nowrap;transform:translateX(-50%) rotate(-4deg)}
.ps-then-d .ps-then-a{--l:124px}
.ps-then-d .ps-then-w{--l:23px}
.ps-then-m .ps-then-a{--l:65px}
.ps-then-m .ps-then-w{--l:21px}
@media (prefers-reduced-motion:no-preference){
  .ps-then path{stroke-dasharray:var(--l);stroke-dashoffset:var(--l);animation:psdraw 15s .35s infinite}
  .ps-then .ps-then-w{animation-name:psdraww}
  .ps-link:nth-child(4) .ps-then path{animation-delay:.95s}
  .ps-then em{opacity:0;animation:psthen .5s .45s forwards}
  .ps-link:nth-child(4) .ps-then em{animation-delay:1.05s}
}
@keyframes psdraw{0%{stroke-dashoffset:var(--l);opacity:1;animation-timing-function:cubic-bezier(.6,.1,.3,1)}5%{stroke-dashoffset:0}96.5%{stroke-dashoffset:0;opacity:1}99.5%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes psdraww{0%,5%{stroke-dashoffset:var(--l);opacity:1}6.6%{stroke-dashoffset:0}96.5%{stroke-dashoffset:0;opacity:1}99.5%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes psthen{to{opacity:1}}
.ps-top{display:flex;align-items:center;gap:12px}
.ps-top .ps-ic{width:30px;height:30px;color:var(--accent)}
.ps-ph{margin:0;font:700 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#8e979f}
.ps-np{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.ps-np strong{font-size:23px;font-weight:650;letter-spacing:-.02em;color:#fff}
.ps-pr{display:inline-flex;align-items:baseline;gap:5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.ps-pr small{font:600 11px/1 var(--mono);letter-spacing:.06em;color:#8e979f}
.ps-pr b{font-size:27px;font-weight:700;letter-spacing:-.025em;color:#f5f7f8}
.ps-line{margin:0;font-size:14.5px;line-height:1.55;color:#aab3ba}
.ps-cr{box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.45),0 0 60px -26px rgba(var(--accent-rgb),.6),0 30px 60px -40px #000}
/* the scan credit: a glass coupon with ticket notches top and bottom, a big 100% and a slow shine (Alex, 18 Oct 2026,
   version 6 of _coupon.html); "credited" links it to the implementation card */
.ps-credit{--cut:96px;position:relative;overflow:hidden;display:flex;align-items:center;gap:18px;margin-top:10px;padding:16px 18px 16px 0;border-radius:14px;background:radial-gradient(120% 140% at 0 0,rgba(var(--accent-rgb),.24),rgba(var(--accent-rgb),.06) 60%),#0d1513;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.6);-webkit-mask:radial-gradient(circle 8px at var(--cut) 0,transparent 97%,#000) top / 100% 51% no-repeat,radial-gradient(circle 8px at var(--cut) 100%,transparent 97%,#000) bottom / 100% 51% no-repeat;mask:radial-gradient(circle 8px at var(--cut) 0,transparent 97%,#000) top / 100% 51% no-repeat,radial-gradient(circle 8px at var(--cut) 100%,transparent 97%,#000) bottom / 100% 51% no-repeat}
.ps-pct{flex:none;width:var(--cut);padding:4px 0;border-right:1.5px dashed rgba(var(--accent-rgb),.5);font-size:31px;font-weight:800;letter-spacing:-.045em;line-height:1;text-align:center;color:var(--accent);text-shadow:0 0 18px rgba(var(--accent-rgb),.6)}
.ps-credit p{display:flex;flex-direction:column;gap:4px;margin:0}
.ps-credit strong{font-size:13.5px;font-weight:600;line-height:1.35;color:#fff}
.ps-credit span{font:700 9.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.ps-shine{position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.16) 50%,transparent 70%);transform:translateX(-130%);pointer-events:none}
@media (prefers-reduced-motion:no-preference){.ps-shine{animation:psshine 5s ease-in-out infinite}}
@keyframes psshine{0%,62%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
.ps-credited{position:absolute;left:calc(50% + 6px);bottom:62px;z-index:3;padding:6px 9px 5px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 4px rgba(5,8,9,.9),0 0 22px -4px rgba(var(--accent-rgb),.9);font:700 8.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:#04120b;transform:translateX(-50%)}
.ps-cta{display:flex;justify-content:center;margin-top:28px}
.ps-note{max-width:800px;margin:30px auto 0;font-size:14px;line-height:1.6;text-align:center;color:#7d868e}
.ps-note a{color:var(--accent);text-decoration:none;white-space:nowrap}
.ps-note a:hover{text-decoration:underline}
/* the pricing page (Alex, 18 Oct 2026, version 1 of _pricing.html): the same switch, every step with its details,
   the pilot's payment as a small timeline, four things to know under it */
.ps-anchor{display:block;height:0}
.pr-ps .ps-card{gap:10px}
.ps-rows{display:flex;flex-direction:column;margin:8px 0 0;border-top:1px solid rgba(255,255,255,.08)}
.ps-rows div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.ps-rows div:last-child{border-bottom:0}
.ps-rows dt{padding-top:2px;font:700 9px/1.45 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#7d868e}
.ps-rows dd{margin:0;font-size:13.5px;line-height:1.5;color:#c4cbd1}
.ps-tl{position:relative;display:flex;flex-direction:column;gap:9px;margin:0;padding:0 0 0 16px;list-style:none}
.ps-tl::before{content:"";position:absolute;left:4px;top:6px;bottom:8px;width:1px;background:rgba(255,255,255,.16)}
.ps-tl li{position:relative;font-size:12.5px;line-height:1.4;color:#9aa3ab}
.ps-tl li::before{content:"";position:absolute;left:-15px;top:4px;width:7px;height:7px;border-radius:50%;background:#0b0e10;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
.ps-tl li.pay::before{background:var(--accent);box-shadow:0 0 8px rgba(var(--accent-rgb),.7)}
.ps-tl b{display:block;font-weight:600;color:#e8ecef}
.pr-ps .ps-credit{margin-top:4px}
.ps-wsnote{max-width:640px;margin:26px auto 0;font-size:14px;line-height:1.6;text-align:center;color:#7d868e}
.ps-wsnote a{color:var(--accent);text-decoration:none;white-space:nowrap}
.ps-wsnote a:hover{text-decoration:underline}
.ps-know{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:48px 0 0;padding:0;list-style:none}
.ps-know li{display:flex;gap:12px;padding:18px 18px 20px;border-radius:18px;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.ps-know .ico{flex:none;width:18px;height:18px;margin-top:1px;color:var(--accent)}
.ps-know p{margin:0;font-size:13px;line-height:1.5;color:#9aa3ab}
.ps-know b{display:block;margin-bottom:4px;font-size:14.5px;font-weight:650;color:#fff}
.ps-know strong{font-weight:600;color:#c4cbd1}
@media (max-width:1000px){.ps-know{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ps-know{grid-template-columns:1fr}}
@media (max-width:900px){
  .ps-steps{grid-template-columns:minmax(0,1fr);gap:22px}
  .ps-steps:not(.ps-3){grid-template-columns:minmax(0,1fr);gap:0;padding-top:0}
  .ps-link{height:58px}
  .ps-then{top:50%;width:44px;height:64px;margin:-32px 0 0 -14px}
  .ps-then .ps-then-d{display:none}
  .ps-then .ps-then-m{display:block;width:44px;height:64px}
  .ps-then em{left:auto;right:calc(100% + 2px);top:24px;transform:rotate(-4deg)}
  .ps-credited{top:50%;bottom:auto;left:calc(50% + 86px);transform:translate(-50%,-50%)}
}
@media (max-width:760px){
  .ps-sw{margin-top:66px}
  .ps-ann{inset:0;display:block}
  .ps-hand{position:absolute;left:calc(50% + 40px);bottom:calc(100% + 14px);font-size:16px;text-align:left}
  .ps-arrow{position:absolute;left:calc(50% - 7px);top:-29px;width:46px;height:30px;margin:0;transform:scaleX(-1)}
}
@media (max-width:640px){
  .ps-tg.on .ps-sw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;padding:5px;border-radius:24px}
  .ps-sw button{flex-direction:column;justify-content:center;gap:6px;padding:11px 4px 10px;border-radius:19px;font-size:12.5px;line-height:1.2;text-align:center}
  .ps-sw .ps-ic{width:19px;height:19px}
  .ps-ind{border-radius:19px}
  .ps-card{padding:22px 20px}
}