@font-face {
font-family: "Playfair Display";
src: url("../fonts/playfair-display-latin-wght-normal.woff2") format("woff2");
font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Playfair Display";
src: url("../fonts/playfair-display-latin-wght-italic.woff2") format("woff2");
font-weight: 400 900; font-style: italic; font-display: swap;
}
@font-face {
font-family: "Outfit";
src: url("../fonts/outfit-latin-wght-normal.woff2") format("woff2");
font-weight: 100 900; font-style: normal; font-display: swap;
}
:root {
color-scheme: light;
--paper: #F7F5F3;
--panel: #FFFFFF;
--sand: #EFEBE5;
--sand-deep: #ECEEF4;
--line: #D3D6E0;
--line-soft: #E6E8EF;
--hair: #DEE0E8;
--ink: #141F3F;
--ink-2: #545E84;
--ink-3: #8A93B2;
--navy: #1B2A55;
--navy-hover: #24356A;
--band: #141F42;
--band-2: #1A2850;
--band-ink: #F6F4F1;
--band-ink-2: #A9B3D3;
--band-line: #2B3868;
--amber: #B4711F;
--amber-deep: #8F5714;
--amber-soft: #F0DCBE;
--amber-mist: #FAF3E8;
--amber-glow: #E3A04B;
--good: #2E8B57;
--make-a: #F024F6;
--make-b: #6D00CC;
--at-blue: #18BFFF;
--display: "Playfair Display", "Iowan Old Style", Georgia, serif;
--sans: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
--fs-display: clamp(2.6rem, 1.6rem + 3.4vw, 4.4rem);
--fs-h1-page: clamp(2.5rem, 1.5rem + 3.8vw, 4.1rem);
--fs-h2: clamp(2rem, 1.38rem + 2.5vw, 3.15rem);
--fs-h3: clamp(1.16rem, 1.08rem + 0.36vw, 1.42rem);
--fs-lead: clamp(1.08rem, 1.01rem + 0.4vw, 1.3rem);
--fs-body: 1rem;
--fs-small: 0.9rem;
--fs-micro: 0.72rem;
--wrap: 1200px;
--gutter: clamp(20px, 5.5vw, 64px);
--measure: 60ch;
--radius: 16px;
--radius-s: 10px;
--header-h: 78px;
--shadow-soft: 0 1px 2px rgba(20,31,63,.04), 0 10px 30px -22px rgba(20,31,63,.32);
--shadow-lift: 0 2px 4px rgba(20,31,63,.05), 0 30px 60px -34px rgba(20,31,63,.45);
--ease-out: cubic-bezier(.2,.7,.3,1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--sans);
font-size: var(--fs-body);
font-weight: 350;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: clip;
}
img, svg { max-width: 100%; }
img { height: auto; display: block; }
h1, h2, h3, h4 {
font-family: var(--display);
font-weight: 700;
color: var(--ink);
letter-spacing: -0.022em;
text-wrap: balance;
margin: 0;
}
p { margin: 0; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); text-underline-offset: 4px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; border-radius: 3px; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
[hidden=""] { display: none !important; }
.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; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.wp-site-blocks, .wp-block-post-content { padding: 0 !important; margin: 0 !important; }
.wp-site-blocks > * + * { margin-block-start: 0 !important; }
.wp-block-post-content > * { margin-block: 0 !important; max-width: none !important; }
main { display: block; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 860px; }
.section { padding-block: clamp(72px, 9vw, 150px); position: relative; }
.section--tight { padding-block: clamp(48px, 6vw, 92px); }
.panel { background: var(--panel); border-block: 1px solid var(--line-soft); }
.band { background: var(--band); color: var(--band-ink); }
.band h1, .band h2, .band h3, .band h4 { color: var(--band-ink); }
.band .lead, .band p { color: var(--band-ink-2); }
.band .eyebrow { color: var(--amber-glow); }
.stack { display: flex; flex-direction: column; }
.stack-3 { gap: 14px; } .stack-4 { gap: 18px; } .stack-6 { gap: 26px; } .stack-8 { gap: 38px; }
.stack-12 { gap: clamp(40px, 5.4vw, 78px); }
.grid { display: grid; gap: clamp(26px, 3vw, 48px); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }
.split { display: grid; gap: clamp(34px, 5vw, 86px); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.split--wide-left { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.split--center { align-items: center; }
@media (max-width: 900px) { .split, .split--wide-left { grid-template-columns: minmax(0, 1fr); } }
.eyebrow {
font-size: var(--fs-micro); font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
color: var(--amber-deep); margin: 0; display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow::before { content: ""; width: 22px; height: 1.5px; background: currentColor; flex: none; }
.display { font-size: var(--fs-display); line-height: 1; letter-spacing: -0.034em; }
.display em, .h2 em, .h1-page em { font-style: italic; font-weight: 600; color: var(--amber-deep); }
.band .h2 em { color: var(--amber-glow); }
.h1-page { font-size: var(--fs-h1-page); line-height: 1.02; letter-spacing: -0.032em; }
.h2 { font-size: var(--fs-h2); line-height: 1.07; letter-spacing: -0.026em; }
.h3 { font-size: var(--fs-h3); line-height: 1.28; letter-spacing: -0.014em; }
.lead { font-size: var(--fs-lead); line-height: 1.56; font-weight: 300; color: var(--ink-2); max-width: 54ch; }
.prose { max-width: var(--measure); color: var(--ink-2); display: flex; flex-direction: column; gap: 1.1em; }
.small { font-size: var(--fs-small); color: var(--ink-2); font-weight: 300; }
.section-head { max-width: 680px; display: flex; flex-direction: column; gap: 18px; }
.section-head--center { margin-inline: auto; text-align: center; align-items: center; }
.closer { font-family: var(--display); font-size: clamp(1.2rem, 1.05rem + .6vw, 1.55rem); line-height: 1.35; color: var(--ink); max-width: 40ch; letter-spacing: -0.01em; }
.btn {
display: inline-flex; align-items: center; gap: 11px;
padding: 15px 27px; border-radius: 999px; border: 1px solid transparent;
font-family: var(--sans); font-size: .97rem; font-weight: 450; line-height: 1.2;
text-decoration: none; cursor: pointer; white-space: nowrap;
transition: transform .2s var(--ease-out), background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--navy); color: #fff; box-shadow: 0 10px 24px -14px rgba(27,42,85,.7); }
.btn--primary:hover { background: var(--navy-hover); }
.btn--ghost { border-color: var(--line); background: transparent; color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--light { background: var(--amber-soft); color: var(--band); }
.btn--light:hover { background: #fff; }
.btn--onband { border-color: var(--band-line); color: var(--band-ink); background: transparent; }
.btn--onband:hover { border-color: var(--amber-glow); color: var(--amber-glow); }
.btn .arrow { transition: transform .2s var(--ease-out); flex: none; }
.btn:hover .arrow { transform: translateX(4px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.textlink {
display: inline-flex; align-items: center; gap: 9px; width: fit-content;
font-weight: 450; font-size: .97rem; color: var(--ink); text-decoration: none;
border-bottom: 1px solid var(--amber); padding-bottom: 3px;
transition: gap .2s ease, color .2s ease;
}
.textlink:hover { gap: 14px; color: var(--amber-deep); }
.band .textlink { color: var(--band-ink); }
.band .textlink:hover { color: var(--amber-glow); }
.site-header {
position: sticky; top: 0; z-index: 50;
background: color-mix(in srgb, var(--paper) 88%, transparent);
backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
border-bottom: 1px solid transparent;
transition: border-color .3s ease, box-shadow .3s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 10px 30px -28px rgba(20,31,63,.5); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); flex: none; }
.brand-mark { flex: none; display: block; }
.brand-name { font-family: var(--display); font-weight: 700; font-size: 1.32rem; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; }
.brand-name em { font-style: normal; color: var(--amber-deep); }
.nav { display: flex; align-items: center; gap: clamp(16px, 1.8vw, 28px); }
.nav a {
font-size: .95rem; font-weight: 400; color: var(--ink-2); text-decoration: none;
padding-block: 8px; border-bottom: 1.5px solid transparent; white-space: nowrap; transition: color .18s ease, border-color .18s ease;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--amber); }
.header-side { display: flex; align-items: center; gap: 14px; flex: none; }
.site-header .btn { padding: 12px 22px; }
.menu-toggle { display: none; position: relative; }
.menu-toggle > summary {
list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 9px;
padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; font-size: .92rem; font-weight: 450;
}
.menu-toggle > summary::-webkit-details-marker { display: none; }
.menu-toggle[open] > summary { background: var(--panel); }
.menu-panel {
position: fixed; left: 0; right: 0; top: var(--header-h);
background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lift);
padding: 8px var(--gutter) 28px; max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
}
.menu-panel .nav { flex-direction: column; align-items: stretch; gap: 0; }
.menu-panel .nav a { padding: 15px 0; border-bottom: 1px solid var(--line-soft); font-size: 1.08rem; color: var(--ink); }
.menu-panel .btn { margin-top: 22px; width: 100%; justify-content: center; }
@media (max-width: 1080px) {
.nav--desktop { display: none; }
.menu-toggle { display: block; }
}
@media (max-width: 640px) {
.header-side .btn { display: none; }
.brand-name { font-size: 1.18rem; }
}
.site-footer { background: var(--band); color: var(--band-ink-2); padding-block: clamp(64px, 7vw, 104px) 34px; }
.site-footer .brand { color: var(--band-ink); }
.site-footer .brand-name em { color: var(--amber-glow); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: clamp(30px, 4vw, 64px); }
.footer-grid h2 { font-family: var(--sans); font-size: var(--fs-micro); letter-spacing: .2em; text-transform: uppercase; color: var(--amber-glow); font-weight: 600; margin-bottom: 18px; }
.footer-grid ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-grid a { color: var(--band-ink); text-decoration: none; font-size: .96rem; }
.footer-grid a:hover { color: var(--amber-glow); }
.footer-about { display: flex; flex-direction: column; gap: 20px; max-width: 34ch; font-size: .95rem; }
.footer-base { margin-top: clamp(48px, 6vw, 80px); padding-top: 26px; border-top: 1px solid var(--band-line); display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; font-size: .86rem; }
.footer-base a { color: var(--band-ink-2); }
.footer-stack { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-stack span { font-size: .74rem; border: 1px solid var(--band-line); border-radius: 999px; padding: 4px 11px; color: var(--band-ink-2); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-about { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }
.story { position: relative; height: 470vh; }
.story-stage {
position: sticky; top: var(--header-h);
height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h));
overflow: hidden;
}
.story-grid {
height: 100%; display: grid; align-items: center;
grid-template-columns: minmax(0, 5fr) minmax(0, 6.2fr); gap: clamp(28px, 4vw, 64px);
padding-block: clamp(18px, 3vh, 40px);
}
.story-copy { display: flex; flex-direction: column; gap: clamp(16px, 2.6vh, 26px); position: relative; z-index: 5; }
.story-copy .display { max-width: 12ch; }
.story-lines { display: grid; min-height: 7.2em; }
.story-line { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 6px; }
.story-line strong { font-family: var(--display); font-weight: 700; font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); line-height: 1.25; color: var(--ink); letter-spacing: -0.012em; }
.story-line span { color: var(--ink-2); font-size: clamp(.98rem, .94rem + .2vw, 1.08rem); font-weight: 300; max-width: 46ch; }
.story-line { transition: opacity .45s ease, transform .45s var(--ease-out), visibility .45s; }
.js .story-line { opacity: 0; visibility: hidden; transform: translateY(12px); }
.js .story-line.is-active { opacity: 1; visibility: visible; transform: none; }
.js .story:not(.is-ready) .scene { opacity: 0; }
.story .scene { transition: opacity .4s ease; }
.story-steps { list-style: none; display: flex; gap: 6px; }
.story-steps li {
flex: 1; max-width: 132px; font-size: .74rem; font-weight: 500; letter-spacing: .02em; color: var(--ink-3);
padding-top: 10px; border-top: 2px solid var(--line); transition: color .3s, border-color .3s;
}
.story-steps li.on { color: var(--ink); border-color: var(--amber); }
.story-hint { display: inline-flex; align-items: center; gap: 10px; font-size: .78rem; color: var(--ink-3); letter-spacing: .04em; }
.story-hint i { width: 18px; height: 28px; border: 1.5px solid var(--ink-3); border-radius: 10px; position: relative; }
.story-hint i::after { content: ""; position: absolute; left: 50%; top: 6px; width: 2px; height: 6px; margin-left: -1px; background: var(--ink-3); border-radius: 2px; animation: hint 1.8s ease-in-out infinite; }
@keyframes hint { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(8px); } }
.scene-wrap { height: 100%; display: grid; place-items: center; min-height: 0; }
.scene { position: relative; width: min(100%, calc(100svh - var(--header-h) - 70px)); aspect-ratio: 1; container-type: inline-size; }
.scene > * { position: absolute; }
.scene-tools { inset: 0; }
.scene-tools .tool { position: absolute; }
.doodle {
width: 23cqw; height: 16cqw; border: 1px solid var(--line); border-radius: 1.2cqw;
background:
linear-gradient(var(--sand-deep), var(--sand-deep)) 0 0 / 100% 2.8cqw no-repeat,
repeating-linear-gradient(90deg, transparent 0 calc(5.6cqw - 1px), var(--line-soft) calc(5.6cqw - 1px) 5.6cqw),
repeating-linear-gradient(0deg, transparent 0 calc(2.6cqw - 1px), var(--line-soft) calc(2.6cqw - 1px) 2.6cqw),
var(--panel);
opacity: .7; translate: -50% -50%;
}
.doodle--doc {
width: 13cqw; height: 17cqw;
background: repeating-linear-gradient(180deg, transparent 0 2.1cqw, var(--line-soft) 2.1cqw calc(2.1cqw + 1px)) 1.8cqw 2.8cqw / calc(100% - 3.6cqw) calc(100% - 4.6cqw) no-repeat, var(--panel);
}
.wires { inset: 0; width: 100%; height: 100%; overflow: visible; }
.wires .wire { stroke: color-mix(in srgb, var(--ink) 22%, transparent); }
.spin { transform-box: view-box; transform-origin: 50% 50%; animation: spin 46s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.hub {
left: 50%; top: 50%; width: 24cqw; aspect-ratio: 1; border-radius: 50%;
background: var(--panel); display: grid; place-items: center; translate: -50% -50%; z-index: 3;
box-shadow: var(--shadow-lift), 0 0 0 1.4cqw color-mix(in srgb, var(--panel) 60%, transparent);
}
.hub svg { width: 52%; height: auto; }
.hub-label { position: absolute; top: 100%; left: 50%; translate: -50% 0; margin-top: 2.4cqw; font-size: 2cqw; font-weight: 500; color: var(--ink-2); white-space: nowrap; letter-spacing: .02em; }
.make-badge {
left: 50%; top: 26%; translate: -50% -50%; z-index: 4;
display: flex; align-items: center; gap: 1cqw; padding: 1.1cqw 2.1cqw 1.1cqw 1.5cqw; border-radius: 99px;
background: var(--panel); border: 1px solid color-mix(in srgb, var(--make-b) 28%, var(--line));
box-shadow: var(--shadow-soft); font: 600 2.4cqw/1 var(--sans); color: var(--ink); white-space: nowrap;
}
.make-badge svg { width: 3.4cqw; height: 3.4cqw; }
.tool { width: 11.5cqw; aspect-ratio: 1; translate: -50% -50%; rotate: var(--r, 0deg); z-index: 2; --k: 0; }
.tool-inner { width: 100%; height: 100%; border-radius: 2.8cqw; background: #fff; box-shadow: var(--shadow-soft), 0 0 0 1px var(--line-soft); display: grid; place-items: center; }
.tool svg { width: 50%; height: 50%; }
.tool svg path { fill: color-mix(in oklab, var(--c) calc(var(--k) * 100%), #A7AEC0); }
.tool-label { position: absolute; left: 50%; top: 100%; translate: -50% 0; margin-top: 1cqw; white-space: nowrap; font-size: 1.75cqw; font-weight: 500; color: var(--ink-3); opacity: 0; }
.bubble { z-index: 6; translate: -50% -50%; }
.bubble-inner {
background: var(--band); color: var(--band-ink); font: 600 2.35cqw/1.25 var(--display); letter-spacing: -0.01em;
padding: 1.6cqw 2.4cqw; border-radius: 1.6cqw; white-space: nowrap; box-shadow: var(--shadow-lift);
}
.portal {
left: 4%; right: 4%; bottom: 3%; z-index: 7;
background: #fff; border-radius: 1.8cqw; box-shadow: 0 2cqw 6cqw -3cqw rgba(20,31,63,.5), 0 0 0 1px var(--line);
overflow: hidden; opacity: 0;
}
.portal-bar { display: flex; align-items: center; gap: .9cqw; padding: 1.3cqw 1.8cqw; border-bottom: 1px solid var(--line-soft); background: var(--paper); }
.portal-bar i { width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: var(--line); }
.portal-bar span { margin-left: 1.2cqw; flex: 1; font-size: 1.6cqw; color: var(--ink-3); background: #fff; border: 1px solid var(--line-soft); border-radius: 99px; padding: .4cqw 1.6cqw; }
.portal-body { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2cqw; padding: 2.2cqw 2.4cqw 2.6cqw; }
.portal-hello { font: 700 2.7cqw/1.15 var(--display); color: var(--ink); }
.portal-sub { font-size: 1.65cqw; color: var(--ink-2); margin-top: .6cqw; }
.portal-progress { margin-top: 1.8cqw; height: 1cqw; border-radius: 99px; background: var(--sand-deep); overflow: hidden; }
.portal-progress b { display: block; height: 100%; width: 68%; background: linear-gradient(90deg, var(--amber), var(--amber-glow)); border-radius: inherit; }
.portal-meta { display: flex; justify-content: space-between; font-size: 1.45cqw; color: var(--ink-3); margin-top: .7cqw; }
.portal-list { display: flex; flex-direction: column; gap: 1cqw; }
.portal-row { display: flex; align-items: center; justify-content: space-between; gap: 1cqw; font-size: 1.65cqw; color: var(--ink); padding: 1.1cqw 1.4cqw; border: 1px solid var(--line-soft); border-radius: 1.1cqw; }
.portal-row em { font-style: normal; font-size: 1.4cqw; padding: .3cqw 1cqw; border-radius: 99px; background: var(--amber-mist); color: var(--amber-deep); white-space: nowrap; }
.portal-row em.ok { background: #E7F4EC; color: var(--good); }
@media (max-width: 900px) {
.story { height: 430vh; }
.story-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-items: start; gap: 6px; padding-block: 14px 8px; }
.story-copy { gap: 10px; }
.story-copy .display { font-size: clamp(2rem, 8.4vw, 2.6rem); max-width: none; }
.story-lines { min-height: 5.6em; }
.story-line span { display: none; }
.story-steps, .story-hint, .story-copy .btn-row .btn--ghost { display: none; }
.story-copy .btn-row .btn { padding: 12px 20px; font-size: .92rem; }
.scene { width: min(100%, 52svh); }
}
@media (max-width: 900px) and (min-height: 760px) { .story-line span { display: block; } }
.story.is-static { height: auto; }
.story.is-static .story-stage { position: relative; top: 0; height: auto; min-height: calc(100svh - var(--header-h)); }
.story.is-static .spin { animation: none; }
.marquee { border-block: 1px solid var(--line); background: var(--panel); overflow: hidden; padding-block: 18px; position: relative; }
.marquee-head { position: absolute; left: 0; top: 0; bottom: 0; z-index: 2; display: flex; align-items: center; padding-inline: var(--gutter) 34px; background: linear-gradient(90deg, var(--panel) 70%, transparent); font-size: .78rem; font-weight: 500; color: var(--ink-3); letter-spacing: .04em; }
.marquee-track { display: flex; gap: 12px; width: max-content; animation: marquee 48s linear infinite; padding-left: 280px; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span { flex: none; font-size: .9rem; font-weight: 450; color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; padding: 7px 16px; background: var(--paper); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (max-width: 640px) { .marquee-head { display: none; } .marquee-track { padding-left: 0; } }
.pain { display: flex; flex-direction: column; gap: 11px; padding-top: 24px; border-top: 1px solid var(--ink); }
.pain-num { font-family: var(--display); font-weight: 700; font-size: .95rem; color: var(--amber-deep); }
.pain h3 { font-size: var(--fs-h3); }
.pain p { color: var(--ink-2); font-size: .97rem; }
.overheard-wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(34px, 5vw, 86px); align-items: center; }
@media (max-width: 900px) { .overheard-wrap { grid-template-columns: minmax(0, 1fr); } }
.chat { display: flex; flex-direction: column; gap: 12px; padding: clamp(20px, 3vw, 34px); background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--radius); }
.chat-head { display: flex; align-items: center; gap: 10px; font-size: .8rem; color: var(--ink-3); padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); margin-bottom: 4px; }
.chat-head i { width: 8px; height: 8px; border-radius: 50%; background: var(--good); }
.msg { align-self: flex-start; max-width: 88%; display: flex; flex-direction: column; gap: 3px; }
.msg:nth-child(odd) { align-self: flex-end; text-align: right; }
.msg p { font-family: var(--display); font-weight: 600; font-size: clamp(1rem, .95rem + .3vw, 1.16rem); color: var(--ink); background: #fff; border: 1px solid var(--line-soft); border-radius: 14px 14px 14px 4px; padding: 10px 16px; line-height: 1.35; box-shadow: var(--shadow-soft); }
.msg:nth-child(odd) p { border-radius: 14px 14px 4px 14px; }
.msg small { font-size: .72rem; color: var(--ink-3); }
.answer { font-family: var(--display); font-weight: 700; font-size: clamp(2.6rem, 1.8rem + 3vw, 4.2rem); letter-spacing: -0.035em; line-height: 1; color: var(--ink); }
.answer em { font-style: italic; color: var(--amber-deep); font-weight: 600; }
.pillar { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 1px solid var(--ink); text-decoration: none; position: relative; }
.pillar-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--amber-mist); color: var(--amber-deep); margin-bottom: 6px; transition: background .25s ease, color .25s ease, transform .25s var(--ease-out); }
.pillar-icon svg { width: 22px; height: 22px; }
.pillar h3 { font-size: var(--fs-h3); transition: color .22s ease; }
.pillar p { color: var(--ink-2); font-size: .97rem; }
.pillar .textlink { margin-top: auto; }
a.pillar::after { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 0; background: var(--amber); transition: width .4s var(--ease-out); }
a.pillar:hover::after { width: 100%; }
a.pillar:hover .pillar-icon { background: var(--navy); color: #fff; transform: translateY(-3px); }
a.pillar:hover h3 { color: var(--amber-deep); }
.usp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
@media (max-width: 980px) { .usp-grid { grid-template-columns: minmax(0, 1fr); } }
.ticks { list-style: none; display: flex; flex-direction: column; gap: 15px; }
.ticks li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 14px; align-items: start; font-weight: 300; color: var(--ink-2); }
.ticks li::before { content: ""; width: 15px; height: 15px; margin-top: 6px; border-radius: 50%; border: 1.5px solid var(--amber); background: radial-gradient(circle, var(--amber) 0 3.2px, transparent 3.3px); }
.ticks strong { color: var(--ink); font-weight: 500; }
.band .ticks li { color: var(--band-ink-2); }
.band .ticks strong { color: var(--band-ink); }
.band .ticks li::before { border-color: var(--amber-glow); background: radial-gradient(circle, var(--amber-glow) 0 3.2px, transparent 3.3px); }
.compare-slider { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: 0 40px 80px -40px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); aspect-ratio: 16 / 11; background: #fff; user-select: none; touch-action: pan-y; --pos: 50%; }
.cs-pane { position: absolute; inset: 0; display: flex; flex-direction: column; }
.cs-ours { clip-path: inset(0 0 0 var(--pos)); }
.cs-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--line-soft); background: #F3F4F7; flex: none; }
.cs-bar i { width: 8px; height: 8px; border-radius: 50%; background: #D5D8E2; }
.cs-bar span { margin-left: 8px; font-size: .72rem; color: var(--ink-3); background: #fff; border-radius: 99px; padding: 2px 12px; border: 1px solid var(--line-soft); }
.cs-label { position: absolute; top: 46px; z-index: 3; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 5px 10px; border-radius: 99px; }
.cs-theirs .cs-label { left: 12px; background: #EEF0F5; color: var(--ink-2); }
.cs-ours .cs-label { right: 12px; background: var(--amber-soft); color: var(--band); }
.grid-ui { flex: 1; overflow: hidden; font-size: .68rem; color: #3C4566; }
.grid-ui table { border-collapse: collapse; width: 100%; table-layout: fixed; }
.grid-ui th, .grid-ui td { border: 1px solid #E4E6EE; padding: 6px 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.grid-ui th { background: #F6F7FA; font-weight: 500; color: #69728F; }
.grid-ui td:first-child, .grid-ui th:first-child { width: 26px; color: #A3A9BD; text-align: center; }
.grid-ui .chip { display: inline-block; padding: 1px 6px; border-radius: 4px; background: #E6F0FF; color: #2A5DB0; }
.grid-ui .chip.y { background: #FFF3D6; color: #8A6100; }
.grid-ui .chip.g { background: #E2F5E9; color: #23764A; }
.port-ui { flex: 1; display: grid; grid-template-columns: 30% 1fr; min-height: 0; background: var(--paper); }
.port-side { background: var(--band); color: var(--band-ink-2); padding: 18px 14px; display: flex; flex-direction: column; gap: 6px; font-size: .74rem; }
.port-side b { color: #fff; font-family: var(--display); font-size: .95rem; margin-bottom: 12px; letter-spacing: -0.01em; }
.port-side span { padding: 7px 10px; border-radius: 8px; }
.port-side span.on { background: rgba(255,255,255,.1); color: #fff; }
.port-main { padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.port-main h4 { font-size: 1.15rem; }
.port-main .muted { font-size: .74rem; color: var(--ink-3); margin-top: -8px; }
.port-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.port-card { background: #fff; border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 11px; display: flex; flex-direction: column; gap: 2px; }
.port-card small { font-size: .62rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; }
.port-card strong { font-family: var(--display); font-size: 1.05rem; color: var(--ink); font-weight: 700; }
.port-task { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; border: 1px solid var(--line-soft); border-radius: 10px; padding: 9px 12px; font-size: .76rem; color: var(--ink); }
.port-task em { font-style: normal; font-size: .66rem; padding: 2px 8px; border-radius: 99px; background: var(--amber-mist); color: var(--amber-deep); white-space: nowrap; }
.port-task em.ok { background: #E7F4EC; color: var(--good); }
.port-btn { align-self: flex-start; background: var(--navy); color: #fff; font-size: .74rem; border-radius: 99px; padding: 7px 14px; }
.cs-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--amber-glow); z-index: 5; cursor: ew-resize; }
.cs-handle button {
position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 46px; height: 46px; border-radius: 50%;
border: 2px solid var(--amber-glow); background: var(--band); color: #fff; display: grid; place-items: center; cursor: ew-resize; box-shadow: 0 8px 20px -6px rgba(0,0,0,.5);
}
.cs-handle button svg { width: 20px; height: 20px; }
.cs-caption { margin-top: 14px; font-size: .82rem; color: var(--band-ink-2); text-align: center; }
@media (max-width: 640px) {
.compare-slider { aspect-ratio: 4 / 5; }
.port-ui { grid-template-columns: 1fr; }
.port-side { display: none; }
.port-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.port-cards .port-card:nth-child(3) { display: none; }
}
.hidden-auto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
@media (max-width: 960px) { .hidden-auto { grid-template-columns: minmax(0, 1fr); } }
.ha-list { list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
.ha-item button {
width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--hair); cursor: pointer;
display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding: 20px 0; align-items: baseline;
color: var(--ink-2); font-size: 1.02rem; font-weight: 350; line-height: 1.5; transition: color .25s ease;
}
.ha-item button b { font-family: var(--display); font-weight: 700; color: var(--ink-3); font-size: .95rem; transition: color .25s ease; }
.ha-item button:hover { color: var(--ink); }
.ha-item.is-on button { color: var(--ink); }
.ha-item.is-on button b { color: var(--amber-deep); }
.ha-item { position: relative; }
.ha-item::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--amber); }
.ha-item.is-on::after { animation: haProgress 6s linear forwards; }
.ha-paused .ha-item.is-on::after { animation: none; width: 100%; }
@keyframes haProgress { to { width: 100%; } }
.flow-card { position: sticky; top: calc(var(--header-h) + 30px); background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: var(--shadow-lift); padding: clamp(22px, 3vw, 36px); display: flex; flex-direction: column; gap: 20px; }
.flow-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: .78rem; color: var(--ink-3); }
.flow-card-head .live { display: inline-flex; align-items: center; gap: 7px; color: var(--good); font-weight: 500; }
.flow-card-head .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.flow-title { font-family: var(--display); font-size: clamp(1.25rem, 1.1rem + .5vw, 1.55rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; }
.flow-steps { list-style: none; display: flex; flex-direction: column; gap: 0; position: relative; }
.flow-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 0; opacity: .35; transform: translateX(-6px); transition: opacity .45s ease, transform .45s var(--ease-out); }
.flow-step.is-on { opacity: 1; transform: none; }
.flow-step i { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-style: normal; font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--sand-deep); color: var(--ink-2); }
.flow-step:nth-child(1) i { background: var(--amber-mist); color: var(--amber-deep); }
.flow-step:nth-child(2) i { background: #F4E6FD; color: var(--make-b); }
.flow-step:nth-child(3) i { background: #E2F6FF; color: #0A7FB0; }
.flow-step:nth-child(4) i { background: #E7F4EC; color: var(--good); }
.flow-step span { font-size: .95rem; color: var(--ink); line-height: 1.4; }
.flow-step span small { display: block; font-size: .76rem; color: var(--ink-3); }
.flow-step + .flow-step { position: relative; }
.flow-step + .flow-step::before { content: ""; position: absolute; left: 21px; top: -10px; height: 20px; width: 2px; background: var(--line); }
.flow-saving { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line-soft); font-size: .86rem; color: var(--ink-2); }
.flow-saving strong { font-family: var(--display); color: var(--ink); font-size: 1.05rem; }
.timeline-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: clamp(34px, 6vw, 100px); align-items: start; }
.timeline-grid .section-head { position: sticky; top: calc(var(--header-h) + 40px); }
@media (max-width: 900px) { .timeline-grid { grid-template-columns: minmax(0, 1fr); } .timeline-grid .section-head { position: static; } }
.timeline { list-style: none; position: relative; display: flex; flex-direction: column; --fill: 0; }
.timeline::before, .timeline::after { content: ""; position: absolute; left: 19px; top: 8px; bottom: 8px; width: 2px; }
.timeline::before { background: var(--line); }
.timeline::after { background: linear-gradient(var(--amber), var(--amber-glow)); transform-origin: top; transform: scaleY(var(--fill)); }
.tl-item { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: clamp(18px, 2.4vw, 32px); padding-bottom: clamp(30px, 4vw, 52px); }
.tl-item:last-child { padding-bottom: 0; }
.tl-num { position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 700; background: var(--paper); color: var(--ink-3); box-shadow: inset 0 0 0 1.5px var(--line); transition: background .35s ease, color .35s ease, box-shadow .35s ease; }
.panel .tl-num { background: var(--panel); }
.tl-item.is-on .tl-num { background: var(--amber-soft); color: var(--band); box-shadow: inset 0 0 0 1.5px var(--amber); }
.tl-item h3 { font-size: var(--fs-h3); margin-bottom: 8px; padding-top: 6px; }
.tl-item h3 small { display: block; font-family: var(--sans); font-size: .76rem; font-weight: 500; letter-spacing: .04em; color: var(--amber-deep); margin-top: 4px; }
.tl-item p { color: var(--ink-2); max-width: 56ch; font-size: .98rem; }
.outcome { display: flex; flex-direction: column; gap: 9px; padding-top: 22px; border-top: 2px solid var(--ink); }
.outcome h3 { font-size: var(--fs-h3); }
.outcome p { color: var(--ink-2); font-size: .97rem; }
.quote { border-left: 2px solid var(--amber); padding: 6px 0 6px clamp(18px, 3vw, 34px); max-width: 860px; display: flex; flex-direction: column; gap: 14px; }
.quote p { font-family: var(--display); font-size: clamp(1.3rem, 1.1rem + .9vw, 1.9rem); line-height: 1.35; color: var(--ink); letter-spacing: -0.015em; }
.quote cite { font-style: normal; font-size: .86rem; color: var(--ink-3); }
.tiles-wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 60px); align-items: start; }
@media (max-width: 960px) { .tiles-wrap { grid-template-columns: minmax(0, 1fr); } }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tile {
text-align: left; cursor: pointer; background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 4px; transition: border-color .2s ease, transform .2s var(--ease-out), box-shadow .2s ease, background .2s ease;
}
.tile:hover { border-color: var(--ink-3); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.tile strong { font-family: var(--display); font-size: 1.12rem; color: var(--ink); letter-spacing: -0.01em; }
.tile span { font-size: .85rem; color: var(--ink-2); line-height: 1.45; }
.tile[aria-pressed="true"] { border-color: var(--navy); background: var(--navy); }
.tile[aria-pressed="true"] strong { color: #fff; }
.tile[aria-pressed="true"] span { color: var(--band-ink-2); }
.tile-detail { position: sticky; top: calc(var(--header-h) + 30px); background: var(--band); color: var(--band-ink); border-radius: var(--radius); padding: clamp(24px, 3vw, 38px); display: flex; flex-direction: column; gap: 18px; min-height: 360px; }
.tile-detail h3 { color: var(--band-ink); font-size: clamp(1.4rem, 1.2rem + .7vw, 1.8rem); }
.tile-detail .eyebrow { color: var(--amber-glow); }
.tile-detail ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.tile-detail li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; color: var(--band-ink-2); font-size: .97rem; line-height: 1.5; }
.tile-detail li::before { content: "→"; color: var(--amber-glow); }
.tile-detail .btn { margin-top: auto; align-self: flex-start; }
.tile-detail.is-swapping > * { animation: swapIn .45s var(--ease-out) both; }
@keyframes swapIn { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 520px) { .tiles { grid-template-columns: minmax(0, 1fr); } }
.case-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 3vw, 40px); }
@media (max-width: 760px) { .case-grid { grid-template-columns: minmax(0, 1fr); } }
.case-card {
position: relative; display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: inherit;
background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: clamp(24px, 3vw, 38px); overflow: hidden;
transition: transform .3s var(--ease-out), box-shadow .3s ease, border-color .3s ease;
}
.case-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--line); }
.case-card .tag { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--amber-deep); }
.case-card h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); line-height: 1.22; }
.case-card p { color: var(--ink-2); font-size: .97rem; }
.case-card .results { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.case-card .results span { font-size: .8rem; border-radius: 999px; padding: 5px 12px; background: var(--amber-mist); color: var(--amber-deep); }
.case-card .textlink { margin-top: auto; }
.case-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
@media (max-width: 900px) { .case-body { grid-template-columns: minmax(0, 1fr); } }
.case-facts { position: sticky; top: calc(var(--header-h) + 30px); background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.case-facts dl { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.case-facts dt { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.case-facts dd { margin: 2px 0 0; color: var(--ink); }
.rich { color: var(--ink-2); display: flex; flex-direction: column; gap: 1.1em; max-width: 64ch; }
.rich h2 { font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem); color: var(--ink); margin-top: .8em; }
.rich h3 { font-size: var(--fs-h3); color: var(--ink); margin-top: .6em; }
.rich ul, .rich ol { padding-left: 1.2em; display: flex; flex-direction: column; gap: .4em; }
.rich blockquote { margin: 0; border-left: 2px solid var(--amber); padding-left: 22px; font-family: var(--display); font-size: 1.3rem; color: var(--ink); }
.rich a { color: var(--ink); }
.tech { display: flex; flex-direction: column; gap: 12px; padding-top: 22px; border-top: 1px solid var(--ink); }
.tech-logo { height: 30px; display: flex; align-items: center; gap: 10px; }
.tech-logo svg { height: 26px; width: auto; }
.tech h3 { font-size: var(--fs-h3); }
.tech p { color: var(--ink-2); font-size: .95rem; }
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(30px, 5vw, 90px); align-items: start; }
@media (max-width: 900px) { .faq-grid { grid-template-columns: minmax(0, 1fr); } }
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary {
list-style: none; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 24px 0;
font-family: var(--display); font-size: clamp(1.1rem, 1.02rem + .4vw, 1.3rem); font-weight: 700; letter-spacing: -0.016em; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--sans); font-weight: 300; font-size: 1.6rem; line-height: 1; color: var(--amber-deep); transition: transform .3s var(--ease-out); flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq-body { padding: 0 0 26px; color: var(--ink-2); display: flex; flex-direction: column; gap: .9em; max-width: 62ch; }
.cta-band { background: var(--band); color: var(--band-ink); position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; right: -10%; top: -40%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(227,160,75,.16), transparent 62%); pointer-events: none; }
.cta-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: end; position: relative; }
@media (max-width: 900px) { .cta-grid { grid-template-columns: minmax(0, 1fr); } }
.manifest { font-family: var(--display); font-style: italic; font-weight: 600; font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); color: var(--amber-glow); }
.cta-band h2 { color: var(--band-ink); }
.cta-band .lead { color: var(--band-ink-2); }
.cta-side { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.cta-side .small { color: var(--band-ink-2); }
.cta-side .small a { color: var(--band-ink); }
.page-hero { padding-block: clamp(56px, 8vw, 120px) clamp(40px, 5vw, 80px); position: relative; overflow: hidden; }
.page-hero .wrap { display: flex; flex-direction: column; gap: 24px; }
.page-hero .lead { max-width: 60ch; }
.page-hero-rule { height: 1px; background: var(--line); max-width: 420px; }
.crumbs { font-size: .82rem; color: var(--ink-3); display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.build-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(30px, 5vw, 80px); }
@media (max-width: 760px) { .build-list { grid-template-columns: minmax(0, 1fr); } }
.build-item { padding: 22px 0; border-top: 1px solid var(--hair); display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; }
.build-item b { font-family: var(--display); color: var(--amber-deep); font-size: .95rem; }
.build-item h3 { font-size: 1.12rem; margin-bottom: 6px; }
.build-item p { color: var(--ink-2); font-size: .95rem; }
.compare-wrap { overflow-x: auto; }
table.compare { width: 100%; min-width: 660px; border-collapse: collapse; font-size: .98rem; }
table.compare th, table.compare td { text-align: left; padding: 20px 24px 20px 0; border-bottom: 1px solid var(--hair); vertical-align: top; font-weight: 300; }
table.compare thead th { font-size: var(--fs-micro); letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); border-bottom-color: var(--ink); padding-bottom: 14px; }
table.compare thead th:last-child { color: var(--amber-deep); }
table.compare tbody th { font-weight: 600; color: var(--ink); width: 24%; font-family: var(--display); }
table.compare td { color: var(--ink-2); width: 38%; }
table.compare td.ours { color: var(--ink); padding-left: 24px; box-shadow: inset 2px 0 0 var(--amber); }
.two-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(30px, 5vw, 80px); }
@media (max-width: 760px) { .two-lists { grid-template-columns: minmax(0, 1fr); } }
.two-lists h3 { font-size: var(--fs-h3); padding-bottom: 16px; border-bottom: 1px solid var(--ink); margin-bottom: 20px; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.form-card { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: clamp(22px, 3.4vw, 44px); box-shadow: var(--shadow-soft); display: flex; flex-direction: column; gap: 20px; }
.form-card h2 { font-size: clamp(1.4rem, 1.25rem + .6vw, 1.8rem); }
.direct { display: flex; flex-direction: column; gap: 10px; }
.direct a { color: var(--ink); text-decoration: none; font-size: 1.05rem; }
.direct a:hover { color: var(--amber-deep); }
.after-steps { list-style: none; display: flex; flex-direction: column; gap: 18px; counter-reset: s; }
.after-steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; counter-increment: s; }
.after-steps li::before { content: counter(s); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--amber-soft); color: var(--band); font-family: var(--display); font-weight: 700; font-size: .9rem; }
.after-steps strong { display: block; color: var(--ink); font-weight: 500; }
.after-steps span { color: var(--ink-2); font-size: .95rem; }
.gform_wrapper { --gf-color-primary: var(--navy); --gf-ctrl-border-color: var(--line); --gf-radius: 10px; font-family: var(--sans); }
.gform_wrapper .gfield_label, .gform_wrapper legend { font-weight: 500 !important; color: var(--ink) !important; font-size: .92rem !important; }
.gform_wrapper input[type=text], .gform_wrapper input[type=email], .gform_wrapper input[type=tel], .gform_wrapper textarea, .gform_wrapper select {
border: 1px solid var(--line) !important; border-radius: 10px !important; padding: 12px 14px !important; font: inherit !important; background: var(--paper) !important; color: var(--ink) !important;
}
.gform_wrapper input:focus, .gform_wrapper textarea:focus { outline: 2px solid var(--amber) !important; outline-offset: 1px; background: #fff !important; }
.gform_wrapper .gform_button, .gform_wrapper input[type=submit] { background: var(--navy) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; padding: 15px 28px !important; font: 450 .97rem var(--sans) !important; cursor: pointer; }
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 40px); }
@media (max-width: 960px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .post-grid { grid-template-columns: minmax(0, 1fr); } }
.post-card { display: flex; flex-direction: column; gap: 12px; padding-top: 22px; border-top: 1px solid var(--ink); text-decoration: none; color: inherit; }
.post-card small { font-size: .8rem; color: var(--ink-3); }
.post-card h3 { font-size: 1.25rem; line-height: 1.28; transition: color .2s ease; }
.post-card:hover h3 { color: var(--amber-deep); }
.post-card p { color: var(--ink-2); font-size: .95rem; }
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: var(--d, 0s); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
.js .reveal { opacity: 1; transform: none; }
.marquee-track { animation: none; flex-wrap: wrap; width: auto; padding-left: 0; justify-content: center; }
}
.case-results { white-space: pre-line; }
.case-facts .btn { align-self: flex-start; }

/* ===== BLOKKEN ===== interactieve blokken (gesynchroniseerde patronen "Blok: …") */
.example-note { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
@keyframes bxIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* 1. tijdwinst-calculator */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.calc-form { display: flex; flex-direction: column; gap: 26px; }
.calc-field { display: flex; flex-direction: column; gap: 8px; }
.calc-field label { display: flex; justify-content: space-between; gap: 12px; font-weight: 450; }
.calc-field output { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--navy); white-space: nowrap; }
.calc-field .hint { font-size: .82rem; color: var(--ink-3); font-weight: 300; margin-top: -4px; }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; --p: 50%; margin: 0; }
.range::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--navy) var(--p), var(--line) var(--p)); }
.range::-moz-range-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--navy) var(--p), var(--line) var(--p)); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: #fff; border: 2px solid var(--navy); box-shadow: 0 4px 10px -4px rgba(20,31,63,.5); transition: transform .15s; }
.range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--navy); }
.range:active::-webkit-slider-thumb { transform: scale(1.15); }
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--amber); outline-offset: 3px; }
.calc-result { background: var(--band); color: var(--band-ink); border-radius: 22px; padding: clamp(24px, 3.4vw, 40px); display: flex; flex-direction: column; gap: 24px; box-shadow: var(--shadow-lift); position: relative; overflow: hidden; }
.calc-result::after { content: ""; position: absolute; right: -30%; bottom: -60%; width: 70%; aspect-ratio: 1; background: radial-gradient(circle, rgba(227,160,75,.18), transparent 65%); pointer-events: none; }
.calc-big { display: flex; flex-direction: column; gap: 4px; }
.calc-big .lbl { color: var(--band-ink-2); font-weight: 300; }
.calc-big .num { font-family: var(--display); font-size: clamp(3rem, 2rem + 4vw, 4.8rem); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.calc-big .num small { font-size: .38em; font-family: var(--sans); letter-spacing: 0; color: var(--band-ink-2); margin-left: 6px; }
.calc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--band-line); border-radius: 14px; overflow: hidden; }
.calc-pair > div { background: var(--band-2); padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; }
.calc-pair .v { font-family: var(--display); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-variant-numeric: tabular-nums; color: var(--amber-glow); line-height: 1.15; }
.calc-pair .k { font-size: .82rem; color: var(--band-ink-2); }
.calc-bar { display: flex; flex-direction: column; gap: 10px; }
.calc-bar .track { height: 14px; border-radius: 8px; background: var(--band-line); overflow: hidden; display: flex; }
.calc-bar .gone { background: linear-gradient(90deg, var(--amber), var(--amber-glow)); width: 60%; transition: width .5s var(--ease-out); }
.calc-bar .legend { display: flex; justify-content: space-between; gap: 12px; font-size: .8rem; color: var(--band-ink-2); flex-wrap: wrap; }
.calc-bar .legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; background: var(--amber-glow); }
.calc-bar .legend span:last-child i { background: var(--band-line); }
.calc-foot { font-size: .8rem; color: var(--band-ink-2); font-weight: 300; position: relative; z-index: 1; }
.calc-result .btn { align-self: flex-start; position: relative; z-index: 1; }
/* 2. portaal per rol */
.roles { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(26px, 4vw, 60px); align-items: center; }
.role-tabs { display: flex; flex-direction: column; gap: 10px; }
.role-tab { text-align: left; display: grid; grid-template-columns: 42px 1fr; gap: 2px 14px; align-items: center; padding: 14px 16px; border-radius: 14px; border: 1px solid transparent; background: transparent; cursor: pointer; transition: background-color .25s, border-color .25s, box-shadow .25s; }
.role-tab .ic { grid-row: span 2; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--sand); color: var(--ink-2); transition: background-color .25s, color .25s; }
.role-tab .t { font-weight: 550; }
.role-tab .d { font-size: .84rem; color: var(--ink-2); font-weight: 300; line-height: 1.4; }
.role-tab:hover { background: var(--paper); }
.role-tab[aria-selected="true"] { background: var(--paper); border-color: var(--line-soft); box-shadow: var(--shadow-soft); }
.role-tab[aria-selected="true"] .ic { background: var(--navy); color: #fff; }
.app { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 18px; box-shadow: var(--shadow-lift); overflow: hidden; min-width: 0; }
.app-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); background: var(--paper); }
.app-bar .dots { display: flex; gap: 6px; }
.app-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.app-bar .url { flex: 1; min-width: 0; font-size: .78rem; color: var(--ink-3); background: var(--panel); border: 1px solid var(--line-soft); border-radius: 999px; padding: 4px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.5; }
.app-body { padding: clamp(16px, 2.4vw, 26px); min-height: 380px; }
.app-view { display: flex; flex-direction: column; gap: 18px; }
.app-view.is-swap { animation: bxIn .45s var(--ease-out); }
.app-view[hidden=""] { display: none; }
.app-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.app-h h4 { font-family: var(--sans); font-weight: 600; font-size: 1.02rem; letter-spacing: 0; }
.app-h > span { font-size: .8rem; color: var(--ink-3); }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kpi { border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; line-height: 1.4; }
.kpi .k { font-size: .76rem; color: var(--ink-2); }
.kpi .v { font-family: var(--display); font-size: 1.55rem; font-variant-numeric: tabular-nums; line-height: 1.2; }
.kpi .s { font-size: .74rem; color: var(--good); font-weight: 500; }
.chart { border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px 14px 8px; display: flex; flex-direction: column; gap: 6px; }
.chart .app-h h4 { font-size: .88rem; }
.chart svg { display: block; width: 100%; height: auto; }
.chart .bar { fill: var(--sand-deep); transition: fill .2s; }
.chart .bar.now { fill: var(--navy); }
.chart .bar:hover { fill: var(--amber); }
.chart text { fill: var(--ink-3); font-size: 10px; font-family: var(--sans); }
.chart .gl { stroke: var(--line-soft); stroke-width: 1; }
.chart .val { fill: var(--ink); font-weight: 600; }
.board { display: grid; grid-template-columns: 76px repeat(5, minmax(0, 1fr)); border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; font-size: .8rem; line-height: 1.3; }
.board > div { padding: 8px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); min-height: 56px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.board .bh { min-height: 0; background: var(--paper); font-weight: 600; color: var(--ink-2); text-align: center; }
.board .who { font-weight: 550; justify-content: center; background: var(--paper); }
.job { display: block; width: 100%; text-align: left; border: 0; border-radius: 7px; padding: 5px 7px; font-size: .74rem; line-height: 1.25; cursor: pointer; background: var(--amber-mist); border-left: 3px solid var(--amber); transition: transform .15s, box-shadow .15s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job.b { background: #E8F7FE; border-left-color: var(--at-blue); }
.job.g { background: #E7F3EC; border-left-color: var(--good); }
.job:hover, .job[aria-pressed="true"] { transform: translateY(-1px); box-shadow: 0 6px 14px -8px rgba(20,31,63,.5); }
.job-detail { border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px 18px; font-size: .84rem; background: var(--paper); line-height: 1.4; }
.job-detail b { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); font-weight: 500; }
.phone-wrap { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 22px; align-items: center; }
.phone { border: 8px solid var(--ink); border-radius: 30px; background: var(--paper); padding: 16px 12px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-lift); line-height: 1.4; }
.phone .ph-h { font-weight: 600; font-size: .9rem; display: flex; justify-content: space-between; }
.phone .ph-h span { color: var(--ink-3); font-weight: 400; font-size: .78rem; }
.task { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; font-size: .82rem; transition: border-color .3s, background-color .3s; }
.task .row { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.task .addr { color: var(--ink-3); font-size: .74rem; }
.pchip { font-size: .68rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--sand); color: var(--ink-2); white-space: nowrap; }
.pchip.ok { background: #E7F3EC; color: var(--good); }
.task button { border: 0; border-radius: 8px; padding: 7px; background: var(--navy); color: #fff; font-size: .78rem; cursor: pointer; }
.task.done { border-color: var(--good); background: #E7F3EC; }
.task.done button { background: transparent; color: var(--good); cursor: default; }
.ph-log { display: flex; flex-direction: column; gap: 10px; font-size: .86rem; color: var(--ink-2); line-height: 1.45; }
.ph-log h5 { margin: 0; font-family: var(--sans); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); font-weight: 500; }
.ph-out { list-style: none; display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
.ph-out li { display: flex; gap: 10px; align-items: flex-start; animation: bxIn .4s var(--ease-out); }
.ph-out li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--good); margin-top: .5em; }
.ph-out .empty::before { background: var(--line); }
/* 3. nu of straks */
.flow-top { display: flex; justify-content: space-between; gap: 22px; align-items: end; flex-wrap: wrap; margin-bottom: clamp(30px, 4vw, 48px); }
.flow-ctrl { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.switch { display: inline-flex; border: 1px solid var(--band-line); border-radius: 999px; padding: 4px; position: relative; background: var(--band-2); }
.switch button { position: relative; z-index: 1; border: 0; background: transparent; color: var(--band-ink-2); padding: 10px 20px; border-radius: 999px; cursor: pointer; font-weight: 500; transition: color .3s; white-space: nowrap; }
.switch button[aria-pressed="true"] { color: var(--band); }
.switch .pill { position: absolute; top: 4px; bottom: 4px; left: 4px; border-radius: 999px; background: var(--amber-soft); transition: left .4s var(--ease-out), width .4s var(--ease-out); }
.counter { display: flex; gap: 28px; flex-wrap: wrap; }
.counter > div { display: flex; flex-direction: column; }
.counter .v { font-family: var(--display); font-size: 2.4rem; line-height: 1; color: var(--band-ink); font-variant-numeric: tabular-nums; transition: color .4s; }
.counter .k { font-size: .8rem; color: var(--band-ink-2); }
.flow[data-mode="auto"] .counter .v { color: var(--amber-glow); }
.lane { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; position: relative; }
.lane-line { position: absolute; left: 0; right: 0; top: 23px; height: 2px; background: var(--band-line); overflow: hidden; }
.lane-line::after { content: ""; position: absolute; top: 0; left: -30%; width: 30%; height: 100%; background: linear-gradient(90deg, transparent, var(--amber-glow), transparent); opacity: 0; }
.flow[data-mode="auto"] .lane-line::after { opacity: 1; animation: bxRun 2.2s linear infinite; }
@keyframes bxRun { to { left: 100%; } }
@keyframes bxRunY { to { top: 100%; } }
.stepc { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.stepc .node { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--band-2); border: 1px solid var(--band-line); color: var(--band-ink); transition: background-color .4s, border-color .4s, color .4s; position: relative; z-index: 1; }
.flow[data-mode="auto"] .stepc .node { background: var(--amber-soft); color: var(--band); border-color: var(--amber-soft); }
.stepc h4 { font-family: var(--sans); font-size: .98rem; font-weight: 600; letter-spacing: 0; }
.acts { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.act { font-size: .84rem; line-height: 1.4; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--band-line); color: var(--band-ink-2); display: flex; gap: 8px; align-items: flex-start; transition: opacity .35s, background-color .35s, color .35s; }
.act svg { flex: none; margin-top: 2px; }
.act.auto { display: none; border-color: transparent; background: rgba(240,220,190,.1); color: var(--band-ink); }
.act.check { border: 1px dashed var(--band-line); background: transparent; }
.flow[data-mode="auto"] .act.manual { opacity: .35; text-decoration: line-through; text-decoration-color: rgba(169,179,211,.6); }
.flow[data-mode="auto"] .act.manual.collapse { display: none; }
.flow[data-mode="auto"] .act.auto { display: flex; animation: bxIn .45s var(--ease-out) both; animation-delay: var(--d, 0s); }
.flow-foot { margin-top: 26px; font-size: .82rem; }
/* 4. stel je automatisering samen */
.recipe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(26px, 4vw, 60px); align-items: start; }
.pick { display: flex; flex-direction: column; gap: 24px; }
.pick-set { border: 0; margin: 0; padding: 0; min-width: 0; }
.pick-set legend { font-family: var(--display); font-weight: 700; font-size: 1.3rem; margin-bottom: 12px; padding: 0; }
.pick-set legend span { font-family: var(--sans); font-size: .8rem; font-weight: 400; color: var(--ink-3); margin-left: 8px; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 9px 15px; font-size: .88rem; line-height: 1.3; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; transition: border-color .2s, background-color .2s, color .2s; }
.opt:hover { border-color: var(--ink-2); }
.opt[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.opt .plus { transition: transform .2s; }
.opt[aria-pressed="true"] .plus { transform: rotate(45deg); }
.scenario { background: var(--paper); border: 1px solid var(--line-soft); border-radius: 20px; box-shadow: var(--shadow-lift); padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; gap: 22px; }
.sentence { font-family: var(--display); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); line-height: 1.35; letter-spacing: -.01em; color: var(--ink); }
.sentence mark { background: linear-gradient(transparent 60%, var(--amber-soft) 60%); color: inherit; padding: 0 2px; }
.chain { display: flex; flex-direction: column; }
.mod { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; position: relative; padding-block: 8px; line-height: 1.35; animation: bxIn .45s var(--ease-out) both; animation-delay: var(--d, 0s); }
.mod + .mod::before { content: ""; position: absolute; left: 21px; top: -10px; height: 20px; width: 2px; background: repeating-linear-gradient(to bottom, var(--line) 0 4px, transparent 4px 8px); }
.mod .mi { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .9rem; position: relative; }
.mod .mi::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--amber); opacity: 0; }
.mod.pulse .mi::after { animation: bxPing .9s var(--ease-out); }
@keyframes bxPing { 0% { opacity: .9; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.35); } }
.mod .mt { font-size: .92rem; font-weight: 500; }
.mod .ms { font-size: .78rem; color: var(--ink-3); }
.mi.mi-trig { background: var(--navy); } .mi.mi-cal { background: var(--good); } .mi.mi-doc { background: var(--amber); } .mi.mi-rep { background: var(--ink-2); }
.mi.has-logo { background: #fff; border: 1px solid var(--line-soft); box-shadow: var(--shadow-soft); }
.mod .mi svg { width: 22px; height: 22px; }
.mi .lg2 { position: absolute; right: -6px; bottom: -6px; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid var(--line-soft); display: grid; place-items: center; }
.mod .mi .lg2 svg { width: 13px; height: 13px; }
.empty-chain { font-size: .9rem; color: var(--ink-3); padding: 18px; border: 1px dashed var(--line); border-radius: 12px; text-align: center; }
.scenario-foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; border-top: 1px solid var(--line-soft); padding-top: 18px; }
.runs { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--good); font-weight: 500; }
.runs i { width: 8px; height: 8px; border-radius: 50%; background: var(--good); animation: bxLive 2s infinite; }
@keyframes bxLive { 0% { box-shadow: 0 0 0 0 rgba(46,139,87,.5); } 70%, 100% { box-shadow: 0 0 0 8px rgba(46,139,87,0); } }
/* 5. quickscan */
.scan { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 60px); align-items: start; }
.q-list { list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--line); counter-reset: q; }
.q { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 20px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); counter-increment: q; }
.q > p:first-child { display: flex; gap: 14px; line-height: 1.45; color: var(--ink); }
.q > p:first-child::before { content: counter(q); font-family: var(--display); color: var(--amber-deep); font-weight: 700; min-width: 1ch; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--panel); }
.seg button { border: 0; background: transparent; border-radius: 999px; padding: 6px 12px; font-size: .82rem; cursor: pointer; color: var(--ink-2); transition: background-color .2s, color .2s; white-space: nowrap; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.score { position: sticky; top: calc(var(--header-h) + 16px); background: var(--paper); border: 1px solid var(--line-soft); border-radius: 20px; box-shadow: var(--shadow-lift); padding: clamp(20px, 3vw, 30px); display: flex; flex-direction: column; gap: 18px; }
.gauge { display: flex; align-items: center; gap: 18px; }
.gauge svg { flex: none; width: 112px; height: 112px; transform: rotate(-90deg); }
.gauge .g-bg { fill: none; stroke: var(--sand-deep); stroke-width: 10; }
.gauge .g-fg { fill: none; stroke: var(--amber); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset .6s var(--ease-out), stroke .4s; }
.gauge .txt { display: flex; flex-direction: column; line-height: 1.3; }
.gauge .pct { font-family: var(--display); font-size: 2.3rem; line-height: 1; font-variant-numeric: tabular-nums; }
.gauge .lvl { font-weight: 550; }
.score .advice { color: var(--ink-2); font-weight: 300; }
.score h5 { margin: 0 0 8px; font-family: var(--sans); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); font-weight: 500; }
.wins { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.wins li { font-size: .88rem; padding: 10px 12px; border-radius: 10px; background: var(--amber-mist); line-height: 1.4; animation: bxIn .35s var(--ease-out); }
.progress-txt { font-size: .8rem; color: var(--ink-3); }
.score .btn { align-self: flex-start; }
/* 6. werkt het met mijn tools */
.tc { display: flex; flex-direction: column; gap: 26px; }
.tc-search { position: relative; max-width: 560px; }
.tc-search input { width: 100%; padding: 16px 20px 16px 50px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); font: inherit; font-size: 1.02rem; color: var(--ink); box-shadow: var(--shadow-soft); transition: border-color .2s, box-shadow .2s; }
.tc-search input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px rgba(27,42,85,.12); }
.tc-search svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--ink-3); }
.tc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.tc-tool { border: 1px solid var(--line-soft); background: var(--panel); border-radius: 14px; padding: 14px; display: flex; gap: 12px; align-items: center; cursor: pointer; text-align: left; transition: opacity .25s, transform .25s var(--ease-out), border-color .2s, box-shadow .2s; }
.tc-tool:hover { border-color: var(--line); box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.tc-tool[aria-pressed="true"] { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy); }
.tc-tool.dim { opacity: .28; transform: scale(.97); }
.tc-tool .lg { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .78rem; letter-spacing: -.02em; }
.tc-tool .nm { font-weight: 500; font-size: .9rem; line-height: 1.25; }
.tc-tool .ct { display: block; font-size: .72rem; color: var(--ink-3); font-weight: 400; }
.tc-answer { border-radius: 16px; padding: 18px 22px; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; background: #E7F3EC; border: 1px solid rgba(46,139,87,.25); max-width: 760px; animation: bxIn .35s var(--ease-out); }
.tc-answer[hidden=""] { display: none; }
.tc-answer.unknown { background: var(--amber-mist); border-color: var(--amber-soft); }
.tc-answer .badge { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--good); color: #fff; }
.tc-answer.unknown .badge { background: var(--amber); }
.tc-answer h4 { font-family: var(--sans); font-size: 1.02rem; font-weight: 600; letter-spacing: 0; margin-bottom: 4px; }
.tc-answer p { color: var(--ink-2); font-size: .94rem; }
.tc-answer a { color: var(--navy); font-weight: 500; }
@media (max-width: 900px) {
.calc, .roles, .recipe, .scan { grid-template-columns: minmax(0, 1fr); }
.role-tabs { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
.role-tab { flex: 0 0 auto; grid-template-columns: 34px auto; }
.role-tab .ic { width: 34px; height: 34px; grid-row: auto; }
.role-tab .d { display: none; }
.score { position: static; }
.lane { grid-template-columns: minmax(0, 1fr); gap: 22px; }
.lane-line { left: 23px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
.lane-line::after { left: 0; top: -30%; width: 100%; height: 30%; background: linear-gradient(180deg, transparent, var(--amber-glow), transparent); }
.flow[data-mode="auto"] .lane-line::after { animation-name: bxRunY; }
.stepc { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 6px 16px; }
.stepc .node { grid-row: span 2; }
}
@media (max-width: 620px) {
.kpis { grid-template-columns: minmax(0, 1fr); }
.phone-wrap { grid-template-columns: minmax(0, 1fr); }
.board-scroll { overflow-x: auto; }
.board { min-width: 520px; }
.q { grid-template-columns: minmax(0, 1fr); }
.calc-pair { grid-template-columns: minmax(0, 1fr); }
.switch button { padding: 9px 13px; font-size: .86rem; }
.counter { gap: 20px; }
.counter .v { font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
.app-view.is-swap, .mod, .wins li, .ph-out li, .tc-answer, .flow[data-mode="auto"] .act.auto { animation: none; }
.flow[data-mode="auto"] .lane-line::after, .runs i { animation: none; }
}

/* ===== BLOKKEN 2 ===== klein beginnen, als er iets ontbreekt, collega afwezig, wat bespreken we */
/* 7. klein beginnen */
.phase { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.phase-side { display: flex; flex-direction: column; gap: 28px; }
.phase-opts { display: flex; flex-direction: column; gap: 8px; }
.phase-opt { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); font-weight: 500; line-height: 1.35; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--ease-out); }
.phase-opt::after { content: "→"; opacity: .35; transition: transform .2s var(--ease-out), opacity .2s; }
.phase-opt:hover { border-color: var(--ink-2); }
.phase-opt:hover::after { transform: translateX(3px); opacity: .8; }
.phase-opt[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.phase-opt[aria-pressed="true"]::after { opacity: 1; color: var(--amber-glow); }
.phase-map { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 22px; box-shadow: var(--shadow-lift); padding: clamp(18px, 2.6vw, 30px); display: flex; flex-direction: column; gap: 18px; }
.phase-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .78rem; color: var(--ink-2); }
.phase-legend span { display: inline-flex; align-items: center; gap: 8px; }
.phase-legend span::before { content: ""; width: 12px; height: 12px; border-radius: 4px; }
.phase-legend .l1::before { background: var(--amber); }
.phase-legend .l2::before { background: var(--navy); }
.phase-legend .l3::before { border: 1.5px dashed var(--line); }
.phase-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ph-mod { border: 1px solid var(--line-soft); border-radius: 14px; padding: 14px; min-height: 108px; display: flex; flex-direction: column; gap: 6px; line-height: 1.3; background: var(--panel); transition: background-color .45s var(--ease-out), border-color .45s, opacity .45s, transform .45s var(--ease-out), box-shadow .45s; transition-delay: calc(var(--i, 0) * 45ms); }
.ph-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--sand); color: var(--ink-2); transition: background-color .45s, color .45s; transition-delay: inherit; }
.ph-ic svg { width: 18px; height: 18px; }
.ph-mod strong { font-weight: 550; font-size: .92rem; }
.ph-tag { font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-top: auto; }
.ph-mod[data-p="1"] { background: var(--amber-mist); border-color: var(--amber); transform: translateY(-3px); box-shadow: 0 14px 28px -20px rgba(143,87,20,.7); }
.ph-mod[data-p="1"] .ph-ic { background: var(--amber); color: #fff; }
.ph-mod[data-p="1"] .ph-tag { color: var(--amber-deep); }
.ph-mod[data-p="2"] { border-color: var(--navy); }
.ph-mod[data-p="2"] .ph-ic { background: var(--navy); color: #fff; }
.ph-mod[data-p="2"] .ph-tag { color: var(--navy); }
.ph-mod[data-p="3"] { opacity: .5; border-style: dashed; border-color: var(--line); }
.phase-out { border-left: 2px solid var(--amber); padding-left: 16px; color: var(--ink); line-height: 1.55; }
.phase-out.is-swap { animation: bxIn .4s var(--ease-out); }
.phase-foot { font-size: .8rem; color: var(--ink-3); }
/* 8. als er iets ontbreekt */
.exc-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.exc-stage { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 22px; box-shadow: var(--shadow-lift); padding: clamp(22px, 3.2vw, 40px); }
.exc-track { position: relative; --at: 0; }
.exc-line { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; position: relative; }
.exc-line::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 11px; height: 2px; background: var(--line); }
.exc-step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; font-size: .9rem; line-height: 1.35; position: relative; z-index: 1; color: var(--ink-2); transition: color .3s; }
.exc-dot { width: 24px; height: 24px; border-radius: 50%; background: var(--panel); border: 2px solid var(--line); transition: background-color .3s, border-color .3s, box-shadow .3s; }
.exc-step[data-s="done"] { color: var(--ink); }
.exc-step[data-s="done"] .exc-dot { background: var(--good); border-color: var(--good); box-shadow: inset 0 0 0 4px var(--panel); }
.exc-step[data-s="wait"] { color: var(--amber-deep); font-weight: 550; }
.exc-step[data-s="wait"] .exc-dot { background: var(--amber); border-color: var(--amber); animation: bxLiveA 1.6s infinite; }
@keyframes bxLiveA { 0% { box-shadow: 0 0 0 0 rgba(180,113,31,.45); } 70%, 100% { box-shadow: 0 0 0 10px rgba(180,113,31,0); } }
.exc-token { position: absolute; top: 5px; left: calc((var(--at) + .5) * 25% - 7px); width: 14px; height: 14px; border-radius: 50%; background: var(--navy); box-shadow: 0 0 0 4px rgba(27,42,85,.15); z-index: 2; transition: left .6s var(--ease-out), top .6s var(--ease-out); }
.exc-task { position: relative; margin-top: 24px; border: 1px solid var(--amber-soft); background: var(--amber-mist); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; animation: bxIn .4s var(--ease-out); }
.exc-task[hidden=""] { display: none; }
.exc-task::before { content: ""; position: absolute; top: -8px; left: calc(37.5% - 8px); width: 14px; height: 14px; background: var(--amber-mist); border-left: 1px solid var(--amber-soft); border-top: 1px solid var(--amber-soft); transform: rotate(45deg); }
.exc-task-h { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.exc-task-h span { font-size: .78rem; color: var(--amber-deep); }
.exc-task-text { color: var(--ink-2); }
.exc-task .btn { align-self: flex-start; padding: 11px 20px; }
.exc-status { margin-top: 22px; display: flex; gap: 10px; align-items: baseline; font-size: .92rem; color: var(--ink-2); }
.exc-status::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--good); transform: translateY(-1px); }
.exc[data-state="wait"] .exc-status::before { background: var(--amber); }
/* 9. collega afwezig */
.aw-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.aw-row { display: grid; grid-template-columns: 112px minmax(0, 1.2fr) minmax(48px, .5fr) minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px 18px; border: 1px solid var(--band-line); border-radius: 14px; background: var(--band-2); }
.aw-who { font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--amber-glow); }
.aw-q { color: var(--band-ink); font-weight: 500; line-height: 1.35; }
.aw-line { position: relative; height: 2px; background: repeating-linear-gradient(90deg, var(--band-line) 0 6px, transparent 6px 11px); transition: background .4s; }
.aw-line::after { content: "×"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; line-height: 1; background: var(--band); border: 1px solid var(--band-line); color: #E39A86; transition: opacity .3s; }
.away[data-mode="portaal"] .aw-line { background: linear-gradient(90deg, var(--band-line), var(--amber-glow)); }
.away[data-mode="portaal"] .aw-line::after { content: ""; width: 8px; height: 8px; border: 0; background: var(--amber-glow); left: 0; transform: translate(0, -50%); animation: bxFlowX 1.8s linear infinite; animation-delay: calc(var(--i) * .2s); }
@keyframes bxFlowX { from { left: 0; } to { left: calc(100% - 8px); } }
.aw-a { font-size: .9rem; line-height: 1.35; }
.aw-los { color: var(--band-ink-2); font-style: italic; }
.aw-portaal { display: none; color: var(--band-ink); font-weight: 500; }
.aw-portaal::before { content: "✓"; color: #7FD1A2; margin-right: 8px; font-weight: 700; }
.away[data-mode="portaal"] .aw-los { display: none; }
.away[data-mode="portaal"] .aw-portaal { display: inline; animation: bxIn .4s var(--ease-out) both; animation-delay: calc(var(--i) * .09s); }
.away[data-mode="portaal"] .aw-row { border-color: rgba(227,160,75,.35); }
.away[data-mode="portaal"] .counter .v { color: var(--amber-glow); }
/* 10. wat bespreken we */
.agenda { display: flex; flex-direction: column; gap: 10px; }
.ag-scale { display: flex; justify-content: space-between; font-size: .74rem; color: var(--ink-3); letter-spacing: .06em; }
.ag-list { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ag-item { border-top: 5px solid var(--navy); padding: 18px 14px 0 0; display: flex; flex-direction: column; gap: 6px; line-height: 1.45; outline: none; transition: border-color .25s; }
.ag-item:nth-child(2) { border-top-color: var(--navy-hover); }
.ag-item:nth-child(3) { border-top-color: #3A4C82; }
.ag-item:nth-child(4) { border-top-color: var(--amber); }
.ag-item:hover, .ag-item:focus-visible { border-top-color: var(--amber-glow); }
.ag-n { font-family: var(--display); font-size: 1.7rem; line-height: 1; color: var(--amber-deep); }
.ag-item strong { font-weight: 600; }
.ag-d { color: var(--ink-2); font-weight: 300; font-size: .94rem; }
@media (max-width: 900px) {
.phase { grid-template-columns: minmax(0, 1fr); }
.aw-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.aw-line { display: none; }
.aw-a { margin-top: 4px; }
.ag-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
}
@media (max-width: 620px) {
.phase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ph-mod { min-height: 92px; }
.exc-line { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.exc-line::before { left: 11px; right: auto; top: 12.5%; bottom: 12.5%; width: 2px; height: auto; }
.exc-step { flex-direction: row; text-align: left; }
.exc-token { left: 5px; top: calc((var(--at) + .5) * 25% - 7px); }
.exc-task::before { left: 6px; }
.ag-list { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
.ph-mod, .exc-token { transition: none; }
.away[data-mode="portaal"] .aw-line::after, .exc-step[data-s="wait"] .exc-dot { animation: none; }
}

/* ===== BLOKKEN 3 ===== excel, document, case-verhaal, jij en wij, hoofdstukken, begrippen, vervolgstap */
@keyframes bxFlash { from { background: var(--amber-soft); } to { background: transparent; } }
/* 11. van excel naar database */
.xl-steps { display: flex; flex-wrap: wrap; gap: 8px; }
.xl-steps .opt { padding-left: 8px; }
.xl-n { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; font-size: .74rem; font-weight: 600; background: var(--sand); color: var(--ink-2); }
.xl-steps .opt[aria-pressed="true"] .xl-n { background: var(--amber-glow); color: var(--band); }
.xl-stage { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 22px; box-shadow: var(--shadow-lift); padding: clamp(16px, 2.6vw, 30px); display: flex; flex-direction: column; gap: 16px; }
.xl-sheet, .xl-db { border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; animation: bxIn .45s var(--ease-out); }
.xl-db[hidden=""], .xl-sheet[hidden=""] { display: none; }
.xl-bar { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--paper); border-bottom: 1px solid var(--line-soft); font-size: .8rem; color: var(--ink-2); }
.xl-file { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--ink); }
.xl-file::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: #1D6F42; }
.xl-db .xl-file::before { background: var(--at-blue); }
.xl-scroll { overflow-x: auto; }
.xl-table { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 520px; }
.xl-table th { text-align: left; font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding: 9px 12px; border-bottom: 1px solid var(--line-soft); background: var(--panel); }
.xl-table td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); line-height: 1.35; transition: background-color .4s; }
.xl-table tr:last-child td { border-bottom: 0; }
.xl-empty { color: var(--ink-3); font-style: italic; font-size: .82rem; }
.xl-row.flag td { background: var(--amber-mist); text-decoration: line-through; text-decoration-color: var(--amber); color: var(--ink-3); }
.xl-row.gone { display: none; }
.xl-row.fixed td:first-child { animation: bxFlash 1.2s var(--ease-out); }
.xl-status[data-v] { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .76rem; font-weight: 600; animation: bxIn .35s var(--ease-out); }
.xl-status[data-v="Bezig"], .xl-link i[data-s="Bezig"] { background: #E8EDF8; color: var(--navy); }
.xl-status[data-v="Klaar"], .xl-link i[data-s="Klaar"] { background: #E7F3EC; color: var(--good); }
.xl-status[data-v="Offerte"], .xl-link i[data-s="Offerte"] { background: var(--amber-mist); color: var(--amber-deep); }
.xl-status[data-v="Wacht op klant"], .xl-link i[data-s="Wacht op klant"] { background: var(--sand); color: var(--ink-2); }
.xl-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px; }
.xl-card { border: 1px solid var(--line-soft); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 4px; line-height: 1.35; animation: bxIn .45s var(--ease-out) both; }
.xl-card:nth-child(2) { animation-delay: .08s; } .xl-card:nth-child(3) { animation-delay: .16s; }
.xl-sub { font-size: .8rem; color: var(--ink-3); }
.xl-links { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.xl-link { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: .84rem; padding: 7px 10px; border-radius: 8px; background: var(--paper); border-left: 3px solid var(--at-blue); }
.xl-link i { font-style: normal; font-size: .7rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.xl-note { border-left: 2px solid var(--amber); padding-left: 14px; color: var(--ink); line-height: 1.5; }
.xl-note.is-swap { animation: bxIn .4s var(--ease-out); }
.xl-reset { align-self: flex-start; border: 0; background: none; padding: 0; color: var(--navy); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.xl-reset[hidden=""] { display: none; }
/* 12. document maakt zichzelf */
.doc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.doc-side { display: flex; flex-direction: column; gap: 26px; }
.doc-form { display: flex; flex-direction: column; gap: 14px; }
.doc-form label { display: flex; flex-direction: column; gap: 6px; font-size: .86rem; font-weight: 500; }
.doc-form input[type=text], .doc-form input[type=number], .doc-form select { font: inherit; font-size: .95rem; font-weight: 400; color: var(--ink); padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); transition: border-color .2s, box-shadow .2s; }
.doc-form input:focus, .doc-form select:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px rgba(27,42,85,.1); }
.doc-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; align-items: start; }
.doc-mat { border: 0; margin: 0; padding: 0; min-width: 0; }
.doc-mat legend { font-size: .86rem; font-weight: 500; margin-bottom: 8px; padding: 0; }
.doc-mat label { flex-direction: row; align-items: center; display: inline-flex; gap: 6px; margin: 0 14px 6px 0; font-weight: 400; font-size: .9rem; }
.doc-mat input { accent-color: var(--navy); width: 16px; height: 16px; }
.doc-form .btn { align-self: flex-start; }
.doc-paper { position: relative; background: #fff; border: 1px solid var(--line-soft); border-radius: 6px; box-shadow: var(--shadow-lift); padding: clamp(20px, 3vw, 34px); display: flex; flex-direction: column; gap: 18px; font-size: .9rem; line-height: 1.45; transform: rotate(-.6deg); }
.doc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--navy); }
.doc-logo { font-family: var(--display); font-weight: 700; font-size: 1.15rem; }
.doc-type { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.doc-type b { color: var(--ink); letter-spacing: 0; }
.doc-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.doc-fields dt, .doc-lbl { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; display: block; }
.doc-fields dd { margin: 2px 0 0; font-weight: 500; }
.doc-block p { margin-top: 2px; }
.doc-lines { width: 100%; border-collapse: collapse; }
.doc-lines th { text-align: left; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; padding: 6px 0; border-bottom: 1px solid var(--line); }
.doc-lines th:last-child, .doc-lines td:last-child { text-align: right; }
.doc-lines td { padding: 7px 0; border-bottom: 1px dashed var(--line-soft); }
.doc-lines tr { animation: bxIn .3s var(--ease-out); }
[data-o].flash { animation: bxFlash 1s var(--ease-out); border-radius: 4px; }
.doc-sign { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.doc-sig { font-family: var(--display); font-style: italic; color: var(--navy); }
.doc-done { border-top: 1px solid var(--line-soft); padding-top: 14px; }
.doc-done[hidden=""] { display: none; }
.doc-done ul { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: .86rem; }
.doc-done li { animation: bxIn .4s var(--ease-out) both; }
.doc-done li:nth-child(2) { animation-delay: .25s; } .doc-done li:nth-child(3) { animation-delay: .5s; }
.doc-done li::before { content: "✓"; color: var(--good); font-weight: 700; margin-right: 8px; }
.doc-stamp { position: absolute; right: 30px; bottom: 34%; transform: rotate(-12deg); border: 3px solid var(--good); color: var(--good); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; padding: 6px 14px; border-radius: 8px; opacity: .85; animation: bxStamp .45s cubic-bezier(.2,1.6,.4,1) both; pointer-events: none; }
@keyframes bxStamp { from { transform: rotate(-12deg) scale(1.8); opacity: 0; } to { transform: rotate(-12deg) scale(1); opacity: .85; } }
/* 13. case-verhaal */
.cs-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.cs { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.cs[hidden=""] { display: none; }
.cs-stage { position: sticky; top: calc(var(--header-h) + 24px); background: var(--band); border-radius: 22px; padding: 18px; box-shadow: var(--shadow-lift); z-index: 2; }
.cs-board { position: relative; height: clamp(280px, 34vw, 400px); overflow: hidden; }
.cs-board::before { content: ""; position: absolute; left: 50%; top: 50%; width: 64%; aspect-ratio: 1; max-height: 92%; transform: translate(-50%, -50%) scale(.6); border: 1px dashed var(--band-line); border-radius: 50%; opacity: 0; transition: opacity .6s, transform .8s var(--ease-out); }
.cs[data-at="2"] .cs-board::before { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.cs-chip { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%) rotate(var(--r, 0deg)); padding: 7px 14px; border-radius: 999px; font-size: .82rem; white-space: nowrap; background: var(--band-2); color: var(--band-ink); border: 1px dashed var(--band-ink-2); transition: left .9s var(--ease-out), top .9s var(--ease-out), transform .9s var(--ease-out), opacity .6s, border-color .6s; transition-delay: calc(var(--c) * 40ms); }
.cs-chip:nth-child(1) { --x: 24%; --y: 16%; --r: -8deg; } .cs-chip:nth-child(2) { --x: 74%; --y: 12%; --r: 6deg; }
.cs-chip:nth-child(3) { --x: 34%; --y: 48%; --r: 4deg; } .cs-chip:nth-child(4) { --x: 76%; --y: 46%; --r: -5deg; }
.cs-chip:nth-child(5) { --x: 22%; --y: 82%; --r: 7deg; } .cs-chip:nth-child(6) { --x: 70%; --y: 80%; --r: -3deg; }
.cs[data-at="2"] .cs-chip { --r: 0deg; border-style: solid; border-color: var(--amber-glow); }
.cs[data-at="2"] .cs-chip:nth-child(1) { --x: 50%; --y: 12%; } .cs[data-at="2"] .cs-chip:nth-child(2) { --x: 80%; --y: 31%; }
.cs[data-at="2"] .cs-chip:nth-child(3) { --x: 80%; --y: 69%; } .cs[data-at="2"] .cs-chip:nth-child(4) { --x: 50%; --y: 88%; }
.cs[data-at="2"] .cs-chip:nth-child(5) { --x: 20%; --y: 69%; } .cs[data-at="2"] .cs-chip:nth-child(6) { --x: 20%; --y: 31%; }
.cs[data-at="3"] .cs-chip { --x: 50%; --y: 50%; --r: 0deg; opacity: 0; }
.cs-hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.6); padding: 14px 18px; border-radius: 16px; background: var(--amber-soft); color: var(--band); font-weight: 600; font-size: .92rem; text-align: center; opacity: 0; transition: opacity .6s .2s, transform .7s var(--ease-out) .2s; box-shadow: 0 0 0 10px rgba(240,220,190,.08); }
.cs[data-at="2"] .cs-hub { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.cs[data-at="3"] .cs-hub { opacity: 0; transform: translate(-50%, -50%) scale(.8); transition-delay: 0s; }
.cs-screen { position: absolute; inset: 10% 8%; background: var(--panel); border-radius: 14px; overflow: hidden; opacity: 0; transform: translateY(24px) scale(.96); transition: opacity .6s .25s, transform .7s var(--ease-out) .25s; display: flex; flex-direction: column; }
.cs[data-at="3"] .cs-screen { opacity: 1; transform: none; }
.cs-screen-h { background: var(--navy); color: #fff; font-weight: 600; font-size: .86rem; padding: 12px 16px; display: flex; align-items: center; gap: 10px; }
.cs-screen-h::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--amber-glow); }
.cs-screen ul { list-style: none; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; font-size: .88rem; color: var(--ink); line-height: 1.4; }
.cs-screen li { display: flex; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--paper); }
.cs-screen li::before { content: "✓"; color: var(--good); font-weight: 700; }
.cs-dots { display: flex; gap: 6px; justify-content: center; padding-top: 12px; }
.cs-dots i { width: 22px; height: 3px; border-radius: 2px; background: var(--band-line); transition: background-color .3s; }
.cs[data-at="1"] .cs-dots i:nth-child(1), .cs[data-at="2"] .cs-dots i:nth-child(-n+2), .cs[data-at="3"] .cs-dots i { background: var(--amber-glow); }
.cs-steps { list-style: none; display: flex; flex-direction: column; }
.cs-step { padding-block: clamp(60px, 16vh, 160px); opacity: .32; transition: opacity .4s; }
.cs-step:first-child { padding-top: 8px; }
.cs-step.is-on { opacity: 1; }
.cs-k { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--amber-deep); margin-bottom: 10px; }
.cs-step p { font-family: var(--display); font-size: clamp(1.15rem, 1.05rem + .5vw, 1.45rem); line-height: 1.4; color: var(--ink); letter-spacing: -.01em; }
.cs > .textlink { grid-column: 2; }
/* 14. jij en wij */
.sm-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .8rem; color: var(--ink-2); }
.sm-legend span { display: inline-flex; align-items: center; gap: 8px; }
.sm-legend span::before { content: ""; width: 12px; height: 12px; border-radius: 3px; }
.sm-l1::before { background: var(--amber); } .sm-l2::before { background: var(--navy); }
.sm-l3::before { transform: rotate(45deg) scale(.8); border: 2px solid var(--amber); background: var(--panel); }
.sm-scroll { overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
.sm-lanes { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(180px, 1fr)); }
.sm-col { position: relative; display: grid; grid-template-rows: auto 1fr 1fr; gap: 10px; padding: 0 12px 0 24px; border-left: 1px solid var(--line-soft); scroll-snap-align: start; transition: opacity .3s; }
.sm-col:first-child { border-left: 0; padding-left: 0; }
.sm-lanes.has-sel .sm-col:not(.is-sel) { opacity: .55; }
.sm-lanes.has-sel .sm-col:hover { opacity: 1; }
.sm-head { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; border: 0; background: none; padding: 4px 0 8px; cursor: pointer; line-height: 1.3; }
.sm-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--navy); color: var(--navy); font-weight: 600; font-size: .84rem; margin-bottom: 6px; transition: background-color .25s, color .25s, border-color .25s; }
.sm-head[aria-pressed="true"] .sm-n { background: var(--amber); border-color: var(--amber); color: #fff; }
.sm-head strong { font-weight: 600; font-size: .95rem; }
.sm-t { font-size: .76rem; color: var(--ink-3); }
.sm-cell { padding: 12px 14px; border-radius: 12px; font-size: .86rem; line-height: 1.45; color: var(--ink-2); }
.sm-jij { background: var(--amber-mist); border-left: 3px solid var(--amber); }
.sm-wij { background: var(--sand-deep); border-left: 3px solid var(--navy); }
.sm-who { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 4px; }
.sm-jij .sm-who { color: var(--amber-deep); } .sm-wij .sm-who { color: var(--navy); }
.sm-gate { position: absolute; right: -10px; top: 14px; z-index: 2; }
.sm-gate-i { display: block; width: 18px; height: 18px; transform: rotate(45deg); border: 2px solid var(--amber); background: var(--paper); border-radius: 3px; }
.sm-col.is-sel .sm-gate-i { background: var(--amber); }
.sm-out { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; padding: 16px 20px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line-soft); }
.sm-out-k { font-size: .76rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.sm-out-keep { color: var(--ink); }
.sm-out-keep[hidden=""] { display: none; }
.sm-out.is-swap { animation: bxIn .35s var(--ease-out); }
/* 15. hoofdstukwijzer */
.chapters { position: fixed; left: 22px; top: 50%; transform: translateY(-50%); z-index: 40; opacity: 0; pointer-events: none; transition: opacity .4s; display: none; }
.chapters.is-on { opacity: 1; pointer-events: auto; }
.chapters ol { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.chapters a { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink-3); font-size: .74rem; font-weight: 500; }
.chapters i { width: 16px; height: 2px; border-radius: 2px; background: var(--line); transition: width .3s var(--ease-out), background-color .3s; }
.chapters span { opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .25s var(--ease-out); background: var(--panel); color: var(--ink); padding: 3px 9px; border-radius: 999px; box-shadow: var(--shadow-soft); white-space: nowrap; }
.chapters:hover span, .chapters a:focus-visible span, .chapters a.is-on span { opacity: 1; transform: none; }
.chapters a.is-on i { width: 30px; background: var(--amber); }
.chapters a:hover i { background: var(--ink-2); }
@media (min-width: 1360px) { .chapters { display: block; } }
/* begrippen en vervolgstap */
.term { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: help; text-decoration: underline dotted; text-decoration-color: var(--amber); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.term[aria-expanded="true"] { color: var(--amber-deep); }
.band .term[aria-expanded="true"] { color: var(--amber-glow); }
.term-pop { position: absolute; z-index: 60; max-width: 300px; padding: 14px 16px; border-radius: 12px; background: var(--band); color: var(--band-ink); font-size: .88rem; line-height: 1.5; box-shadow: var(--shadow-lift); animation: bxIn .25s var(--ease-out); }
.term-pop strong { display: block; color: var(--amber-glow); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 4px; }
.from-chip { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .86rem; padding: 8px 8px 8px 14px; border-radius: 999px; background: var(--amber-mist); border: 1px solid var(--amber-soft); color: var(--ink); margin-bottom: 18px; }
.from-chip span { font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--amber-deep); }
.from-chip button { border: 0; background: var(--panel); border-radius: 999px; width: 26px; height: 26px; cursor: pointer; color: var(--ink-2); }
@media (max-width: 900px) {
.doc { grid-template-columns: minmax(0, 1fr); }
.xl-cards { grid-template-columns: minmax(0, 1fr); }
.cs { grid-template-columns: minmax(0, 1fr); }
.cs-stage { top: calc(var(--header-h) + 8px); padding: 10px; }
.cs-board { height: 230px; }
.cs-chip { font-size: .74rem; padding: 5px 10px; }
.cs-step { padding-block: 34vh 6vh; }
.cs-step:first-child { padding-top: 24px; }
.cs > .textlink { grid-column: 1; }
.sm-lanes { grid-template-columns: repeat(6, minmax(78%, 1fr)); }
}
@media (max-width: 620px) {
.doc-fields { grid-template-columns: 1fr 1fr; }
.doc-row { grid-template-columns: minmax(0, 1fr); }
.doc-paper { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.cs-chip, .cs-hub, .cs-screen, .cs-board::before { transition: none; }
.doc-stamp, [data-o].flash, .xl-row.fixed td:first-child { animation: none; }
}

/* ===== BLOKKEN 4 ===== jij en wij (stappen) */
.duo { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 24px; box-shadow: var(--shadow-lift); padding: clamp(20px, 3.2vw, 44px); display: flex; flex-direction: column; gap: clamp(22px, 3vw, 34px); --p: 0%; }
.duo-trackwrap { position: relative; }
.duo-rail { position: absolute; left: calc(100% / 12); right: calc(100% / 12); top: 17px; height: 3px; border-radius: 3px; background: var(--line-soft); overflow: hidden; }
.duo-fill { display: block; height: 100%; width: var(--p); background: linear-gradient(90deg, var(--navy), var(--amber)); transition: width .6s var(--ease-out); }
.duo-track { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); position: relative; z-index: 1; }
.duo-node { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; border: 0; background: none; padding: 0; cursor: pointer; text-align: center; }
.duo-n { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); border: 2px solid var(--line); color: var(--ink-2); font-weight: 600; font-size: .9rem; transition: background-color .3s, border-color .3s, color .3s, transform .3s var(--ease-out), box-shadow .3s; }
.duo-l { font-size: .8rem; line-height: 1.3; color: var(--ink-3); transition: color .3s; padding-inline: 4px; }
.duo-node:hover .duo-n { border-color: var(--ink-2); }
.duo-node[data-s="done"] .duo-n { background: var(--navy); border-color: var(--navy); color: #fff; }
.duo-node[data-s="done"] .duo-l { color: var(--ink-2); }
.duo-node[aria-pressed="true"] .duo-n { background: var(--amber); border-color: var(--amber); color: #fff; transform: scale(1.12); box-shadow: 0 0 0 6px var(--amber-mist); }
.duo-node[aria-pressed="true"] .duo-l { color: var(--ink); font-weight: 600; }
.duo-stage { position: relative; touch-action: pan-y; }
.duo-step { display: flex; flex-direction: column; gap: 22px; }
.duo-step[hidden=""] { display: none; }
.duo-step.in-next { animation: duoNext .45s var(--ease-out); }
.duo-step.in-prev { animation: duoPrev .45s var(--ease-out); }
@keyframes duoNext { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes duoPrev { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
.duo-h { display: flex; align-items: center; gap: 18px; }
.duo-big { font-family: var(--display); font-size: clamp(3rem, 2.4rem + 2vw, 4.4rem); line-height: .85; color: var(--amber-deep); font-weight: 700; }
.duo-h h3 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); line-height: 1.15; }
.duo-t { display: block; margin-top: 4px; font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.duo-cols { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); align-items: stretch; }
.duo-card { padding: clamp(18px, 2vw, 26px); border-radius: 18px; display: flex; flex-direction: column; gap: 10px; }
.duo-card p { font-size: 1rem; line-height: 1.6; }
.duo-jij { background: var(--amber-mist); border: 1px solid var(--amber-soft); color: var(--ink); }
.duo-wij { background: var(--band); color: var(--band-ink); }
.duo-wij p { color: var(--band-ink); }
.duo-who i { font-style: normal; display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; }
.duo-jij .duo-who i { background: var(--amber); color: #fff; }
.duo-wij .duo-who i { background: var(--amber-soft); color: var(--band); }
.duo-link { position: relative; }
.duo-link::before { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; border-top: 2px dashed var(--amber-soft); }
.duo-link::after { content: "⇄"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--line); color: var(--amber-deep); font-size: 1rem; }
.duo-res { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 14px 18px; border-radius: 12px; background: var(--paper); border-left: 3px solid var(--good); }
.duo-res span { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--good); }
.duo-res p { color: var(--ink); }
.duo-stopped { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 22px 24px; border-radius: 18px; background: #E7F3EC; border: 1px solid rgba(46,139,87,.3); animation: duoNext .4s var(--ease-out); }
.duo-stopped[hidden=""] { display: none; }
.duo-stop-i { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--good); color: #fff; font-weight: 700; font-size: 1.1rem; }
.duo-stopped > div { flex: 1 1 260px; }
.duo-stopped strong { display: block; font-weight: 600; margin-bottom: 2px; }
.duo-keep { color: var(--ink-2); }
.duo-back, .duo-stop { border: 0; background: none; padding: 6px 4px; color: var(--navy); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.duo-stop { color: var(--ink-2); }
.duo-bar { display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.duo-prev { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); font-size: 1.1rem; cursor: pointer; transition: border-color .2s, opacity .2s; }
.duo-prev:hover { border-color: var(--ink); }
.duo-prev:disabled { opacity: .35; cursor: default; }
.duo-count { font-size: .9rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.duo-count b { color: var(--ink); font-weight: 600; }
.duo-decide { margin-left: auto; display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.duo-q { display: inline-flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--amber-deep); }
.duo-q::before { content: ""; width: 10px; height: 10px; transform: rotate(45deg); background: var(--amber); border-radius: 2px; }
.duo-q[hidden=""], .duo-stop[hidden=""] { display: none; }
@media (max-width: 760px) {
.duo-l { display: none; }
.duo-node[aria-pressed="true"] .duo-l { display: none; }
.duo-n { width: 30px; height: 30px; font-size: .8rem; }
.duo-rail { top: 14px; }
.duo-cols { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 40px auto; }
.duo-link::before { left: 50%; right: auto; top: 4px; bottom: 4px; border-top: 0; border-left: 2px dashed var(--amber-soft); }
.duo-link::after { content: "⇅"; }
.duo-decide { margin-left: 0; width: 100%; }
.duo-decide .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
.duo-step.in-next, .duo-step.in-prev, .duo-stopped { animation: none; }
.duo-fill, .duo-n { transition: none; }
}

/* ===== BLOKKEN 5 ===== calculator-hint */
.calc-field.is-hint .range::-webkit-slider-thumb { box-shadow: 0 0 0 7px rgba(180,113,31,.22), 0 4px 10px -4px rgba(20,31,63,.5); border-color: var(--amber); }
.calc-field.is-hint .range::-moz-range-thumb { box-shadow: 0 0 0 7px rgba(180,113,31,.22); border-color: var(--amber); }
.calc-field.is-hint output { color: var(--amber-deep); }

/* ===== BLOKKEN 6 ===== logo's in de flowkaart en bij techniek */
.flow-step i.has-logo { background: #fff; border: 1px solid var(--line-soft); box-shadow: var(--shadow-soft); }
.flow-step i svg { width: 24px; height: 24px; }

/* ===== FEEDBACK 1 ===== Userback round, 6 Oct 2026 */ :root { --tone-amber: #B4711F; --tone-blue: #2563C9; --tone-violet: #6D3FD4; --tone-green: #1E8E5A; --chat-bg: #EFE7DB; --chat-out: #D9FDD3; --chat-bar: #0F7B52; --chat-tick: #34A7E5; } /* 8489115: the header (and its contact button) stays in view on every page. The sticky rule sat on .site-header, whose wrapper is only as tall as the header itself. */ .wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 50; } .header-side .btn--primary { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(135deg, #F4BE6C, var(--amber-glow)); color: var(--ink); font-weight: 550; box-shadow: 0 10px 22px -12px rgba(180,113,31,.85), inset 0 0 0 1px rgba(255,255,255,.35); } .header-side .btn--primary::before { content: ''; width: 18px; height: 18px; flex: none; background: currentColor; --m: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M21 11.5a8.4 8.4 0 0 1-12.3 7.4L3 21l2.1-5.7A8.4 8.4 0 1 1 21 11.5z%27/%3E%3Cpath d=%27M8.5 11.5h.01M12 11.5h.01M15.5 11.5h.01%27/%3E%3C/svg%3E'); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; animation: ctaWave 6s var(--ease-out) 2s infinite; } .header-side .btn--primary::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.6) 50%, transparent 65%); transform: translateX(-120%); animation: ctaShine 6s ease-in-out 2s infinite; } .header-side .btn--primary:hover { background: var(--navy); color: #fff; box-shadow: 0 12px 26px -12px rgba(27,42,85,.8); } .header-side .btn--primary:hover::after { animation: none; } @keyframes ctaShine { 0%, 70% { transform: translateX(-120%); } 88%, 100% { transform: translateX(120%); } } @keyframes ctaWave { 0%, 78%, 100% { transform: none; } 84% { transform: rotate(-14deg) scale(1.12); } 92% { transform: rotate(10deg) scale(1.12); } } @media (max-width: 640px) { .header-side .btn { display: inline-flex; padding: 10px 15px; gap: 8px; } .header-side .btn .arrow { display: none; } .header-side .btn > span { font-size: 0; } .header-side .btn > span::before { content: 'Contact'; font-size: .9rem; } .header-side { gap: 8px; } .menu-toggle > summary { padding: 10px 13px; } } @media (max-width: 430px) { .header-inner { gap: 10px; } .brand { gap: 9px; } .brand-name { font-size: 1.06rem; } .header-side .btn { padding: 9px 12px; gap: 7px; } .menu-toggle > summary { padding: 9px 12px; } } @media (max-width: 372px) { .header-side .btn { padding: 10px; } .header-side .btn > span::before { content: none; } } /* 8489019: chat in messenger colours */ .chat { position: relative; padding: 0 0 22px; gap: 10px; border: 0; overflow: hidden; box-shadow: var(--shadow-lift); background-color: var(--chat-bg); background-image: radial-gradient(rgba(20,31,63,.055) 1.2px, transparent 1.3px); background-size: 18px 18px; } .chat-head { margin: 0 0 8px; padding: 13px clamp(16px, 2.4vw, 24px); gap: 12px; border: 0; background: var(--chat-bar); color: #fff; font-size: .9rem; font-weight: 500; } .chat-head i { width: 34px; height: 34px; flex: none; background: rgba(255,255,255,.2) url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27white%27 stroke-width=%271.8%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%279%27 cy=%278%27 r=%273.2%27/%3E%3Cpath d=%27M2.8 19c.5-3.4 3-5.2 6.2-5.2s5.7 1.8 6.2 5.2%27/%3E%3Cpath d=%27M15.5 5.2a3.2 3.2 0 0 1 0 5.8M18.2 14.3c1.7.8 2.7 2.4 3 4.7%27/%3E%3C/svg%3E') center / 19px no-repeat; } .chat-head::after { content: ''; margin-left: auto; width: 9px; height: 9px; border-radius: 50%; background: #7CF2A6; animation: chatLive 2.2s infinite; } @keyframes chatLive { 0% { box-shadow: 0 0 0 0 rgba(124,242,166,.6); } 70%, 100% { box-shadow: 0 0 0 9px rgba(124,242,166,0); } } .msg { margin-inline: clamp(14px, 2.4vw, 24px); max-width: 84%; gap: 4px; } .msg p { background: #fff; border: 0; box-shadow: 0 1px 1.5px rgba(20,31,63,.16); } .msg:nth-child(odd) p { background: var(--chat-out); } .msg small { color: #6B6558; display: inline-flex; align-items: center; gap: 6px; } .msg:nth-child(odd) small { justify-content: flex-end; } .msg small b { font-weight: 600; color: var(--who, var(--chat-bar)); } .msg small b::first-letter { text-transform: uppercase; } .msg:nth-child(odd) small::after { content: ''; width: 17px; height: 11px; flex: none; background: var(--chat-tick); --m: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 18 11%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.7%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M1 6l3 3 6-7.5M7.5 8.3l.7.7 6-7.5%27/%3E%3C/svg%3E'); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; } .msg--typing { align-self: flex-end; text-align: right; opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); } .msg--typing.is-in { opacity: 1; transform: none; } .msg.msg--typing p { background: var(--navy); display: inline-flex; gap: 5px; align-self: flex-end; padding: 14px 16px; border-radius: 14px 14px 4px 14px; } .msg--typing p i { width: 7px; height: 7px; border-radius: 50%; background: #fff; opacity: .35; animation: chatDot 1.2s infinite; } .msg--typing p i:nth-child(2) { animation-delay: .18s; } .msg--typing p i:nth-child(3) { animation-delay: .36s; } .msg.msg--typing small::after { content: none; } @keyframes chatDot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-4px); } } /* 8489023: sliders in colour, with a handle that asks to be dragged */ .range { height: 36px; } .range::-webkit-slider-runnable-track { height: 10px; border-radius: 10px; background: linear-gradient(90deg, #F4BE6C, var(--amber)) 0 / var(--p) 100% no-repeat, var(--sand-deep); box-shadow: inset 0 1px 2px rgba(20,31,63,.12); } .range::-moz-range-track { height: 10px; border-radius: 10px; background: var(--sand-deep); box-shadow: inset 0 1px 2px rgba(20,31,63,.12); } .range::-moz-range-progress { height: 10px; border-radius: 10px; background: linear-gradient(90deg, #F4BE6C, var(--amber)); } .range::-webkit-slider-thumb { width: 30px; height: 30px; margin-top: -10px; border: 3px solid #fff; background: var(--amber) linear-gradient(90deg, transparent 10px, rgba(255,255,255,.9) 10px 11.5px, transparent 11.5px 14.5px, rgba(255,255,255,.9) 14.5px 16px, transparent 16px) center / 24px 10px no-repeat; box-shadow: 0 0 0 1px rgba(180,113,31,.35), 0 6px 14px -4px rgba(143,87,20,.75); transition: transform .18s var(--ease-out), box-shadow .18s ease; } .range::-moz-range-thumb { width: 26px; height: 26px; border: 3px solid #fff; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 1px rgba(180,113,31,.35), 0 6px 14px -4px rgba(143,87,20,.75); } .range:hover::-webkit-slider-thumb { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(227,160,75,.22), 0 6px 14px -4px rgba(143,87,20,.75); } .range:hover::-moz-range-thumb { box-shadow: 0 0 0 8px rgba(227,160,75,.22), 0 6px 14px -4px rgba(143,87,20,.75); } .range:active::-webkit-slider-thumb { transform: scale(1.18); box-shadow: 0 0 0 11px rgba(227,160,75,.26), 0 6px 14px -4px rgba(143,87,20,.75); } .range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--navy); outline-offset: 3px; } .calc-field label { align-items: center; } .calc-field output { min-width: 3.4em; text-align: center; padding: 3px 12px; border-radius: 999px; background: var(--amber-mist); border: 1px solid var(--amber-soft); color: var(--amber-deep); transition: background-color .2s ease, color .2s ease; } .calc-field:hover output, .calc-field:focus-within output { background: var(--amber); border-color: var(--amber); color: #fff; } .calc-field.is-hint .range::-webkit-slider-thumb { border-color: #fff; box-shadow: 0 0 0 9px rgba(227,160,75,.3), 0 6px 14px -4px rgba(143,87,20,.75); } .calc-field.is-hint output { background: var(--amber); border-color: var(--amber); color: #fff; } /* 8489065: the four pillars as a path that plays by itself */ .path { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); } .path-step { --t: var(--tone-amber); position: relative; display: flex; flex-direction: column; gap: 12px; overflow: hidden; padding: 30px clamp(18px, 1.8vw, 26px) 24px; border-radius: 18px; text-decoration: none; color: inherit; background: var(--paper); border: 1px solid var(--line-soft); transition: transform .35s var(--ease-out), box-shadow .35s ease, background-color .35s ease, border-color .35s ease, opacity .8s var(--ease-out); } .path-step:nth-child(4n+2) { --t: var(--tone-blue); } .path-step:nth-child(4n+3) { --t: var(--tone-violet); } .path-step:nth-child(4n+4) { --t: var(--tone-green); } .path-step::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: color-mix(in srgb, var(--t) 16%, #fff); } .path-step::after { content: ''; position: absolute; left: 0; top: 0; height: 5px; width: 0; background: var(--t); } .path-step.is-done::after { width: 100%; } .path-step.is-on::after { width: 100%; } .path.is-auto .path-step.is-on::after { animation: pathFill var(--dwell, 3.2s) linear both; } @keyframes pathFill { from { width: 0; } to { width: 100%; } } .path-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; } .path-num { font-family: var(--display); font-weight: 700; font-size: clamp(2.3rem, 1.8rem + 1.5vw, 3.1rem); line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.4px color-mix(in srgb, var(--t) 55%, #fff); transition: color .35s ease, -webkit-text-stroke-color .35s ease; } .path-step .pillar-icon { margin: 0; width: 50px; height: 50px; border-radius: 14px; background: color-mix(in srgb, var(--t) 12%, #fff); color: var(--t); } .path-step h3 { font-size: var(--fs-h3); } @media (min-width: 1021px) { .path-step h3 { min-height: 2.56em; } } .path-step p { color: var(--ink-2); font-size: .97rem; } .path-step .textlink { margin-top: auto; border-bottom-color: var(--t); } .path-step:hover, .path-step:focus-visible, .path-step.is-on { background: color-mix(in srgb, var(--t) 7%, #fff); border-color: color-mix(in srgb, var(--t) 38%, #fff); transform: translateY(-6px); box-shadow: 0 26px 46px -30px color-mix(in srgb, var(--t) 75%, transparent); } .path-step:hover .path-num, .path-step:focus-visible .path-num, .path-step.is-on .path-num { color: var(--t); -webkit-text-stroke-color: var(--t); } .path-step:hover .pillar-icon, .path-step:focus-visible .pillar-icon, .path-step.is-on .pillar-icon { background: var(--t); color: #fff; transform: rotate(-6deg) scale(1.06); } .path-step:hover .textlink { color: var(--t); } @media (max-width: 1020px) { .path { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .path { grid-template-columns: minmax(0, 1fr); } .path-step:hover, .path-step.is-on { transform: none; } } /* 8489087: 'what you get' as one short band instead of a full section */ .gains-band { position: relative; overflow: hidden; padding-block: clamp(44px, 5vw, 70px); background: var(--band); color: var(--band-ink); } .gains-band::before { content: ''; position: absolute; right: -8%; top: -120%; width: 46%; aspect-ratio: 1; pointer-events: none; background: radial-gradient(circle, rgba(227,160,75,.2), transparent 62%); } .gains-inner { position: relative; display: flex; flex-direction: column; gap: clamp(22px, 2.6vw, 34px); } .gains-band .eyebrow { color: var(--amber-glow); } .gains { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 36px); } .gain { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 4px 16px; align-items: start; } .gain-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(227,160,75,.14); color: var(--amber-glow); box-shadow: inset 0 0 0 1px rgba(227,160,75,.4); transition: transform .5s var(--ease-out) calc(var(--d, 0s) + .25s), background-color .3s ease, color .3s ease; } .js .gain.reveal:not(.is-in) .gain-ic { transform: scale(.4) rotate(-40deg); } .gain-ic svg { width: 22px; height: 22px; } .gain strong { min-height: 46px; display: flex; align-items: center; font-family: var(--display); font-weight: 700; font-size: clamp(1.2rem, 1.1rem + .5vw, 1.5rem); line-height: 1.2; letter-spacing: -.015em; color: var(--band-ink); align-self: center; } .gain span { grid-column: 2; color: var(--band-ink-2); font-size: .95rem; line-height: 1.5; } .gain:hover .gain-ic { background: var(--amber-glow); color: var(--band); } @media (max-width: 980px) { .gains { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .gains { grid-template-columns: minmax(0, 1fr); } } /* 8489095: topic tiles with an icon, a colour and a small example flow */ .tile { --t: var(--tone-amber); } .tile:has(.tile-ic) { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 3px 13px; align-items: start; padding: 16px; } .tile:nth-child(4n+2) { --t: var(--tone-blue); } .tile:nth-child(4n+3) { --t: var(--tone-violet); } .tile:nth-child(4n+4) { --t: var(--tone-green); } .tile-ic { grid-row: span 2; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--t) 12%, #fff); color: var(--t); transition: background-color .25s ease, color .25s ease, transform .3s var(--ease-out); } .tile-ic svg { width: 21px; height: 21px; } .tile strong { align-self: end; } .tile:hover { border-color: color-mix(in srgb, var(--t) 50%, #fff); } .tile:hover .tile-ic { transform: rotate(-6deg) scale(1.08); } .tile[aria-pressed='true'] { box-shadow: 0 18px 34px -24px rgba(20,31,63,.8); } .tile[aria-pressed='true'] .tile-ic { background: var(--t); color: #fff; } .tile-detail { overflow: hidden; isolation: isolate; } .tile-detail::before { content: ''; position: absolute; right: -22%; top: -28%; width: 62%; aspect-ratio: 1; z-index: -1; pointer-events: none; background: radial-gradient(circle, rgba(227,160,75,.2), transparent 64%); } .tile-ghost { position: absolute; right: 16px; bottom: 14px; width: 88px; height: 88px; z-index: -1; color: var(--band-line); pointer-events: none; } .tile-ghost svg { width: 100%; height: 100%; stroke-width: 1.1; } .mini-flow { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 14px; background: var(--band-2); box-shadow: inset 0 0 0 1px var(--band-line); } .mini-flow-head { display: flex; align-items: center; gap: 9px; font-size: var(--fs-micro); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--band-ink-2); } .mini-flow-head::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #7CF2A6; animation: chatLive 2.2s infinite; } .tile-detail .mini-flow-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; counter-reset: mf; position: relative; } .tile-detail .mini-flow-steps::before { content: ''; position: absolute; left: 16.6%; right: 16.6%; top: 15px; height: 2px; background: var(--band-line); } .tile-detail .mini-flow-steps::after { content: ''; position: absolute; left: 16.6%; top: 15px; height: 2px; width: 66.8%; transform-origin: left; background: linear-gradient(90deg, var(--amber-glow), #7CF2A6); animation: mfLine 1.5s var(--ease-out) .25s both; } .tile-detail .mini-flow-steps li { display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; position: relative; z-index: 1; color: var(--band-ink); font-size: .84rem; line-height: 1.35; counter-increment: mf; animation: mfStep .5s var(--ease-out) both; } .tile-detail .mini-flow-steps li:nth-child(1) { animation-delay: .15s; } .tile-detail .mini-flow-steps li:nth-child(2) { animation-delay: .7s; } .tile-detail .mini-flow-steps li:nth-child(3) { animation-delay: 1.25s; } .tile-detail .mini-flow-steps li::before { content: counter(mf); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: .92rem; color: var(--band); background: var(--amber-glow); box-shadow: 0 0 0 5px var(--band-2); } .tile-detail .mini-flow-steps li:last-child::before { content: '✓'; font-family: var(--sans); background: #7CF2A6; } @keyframes mfLine { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes mfStep { from { opacity: 0; transform: translateY(8px) scale(.9); } } @media (max-width: 960px) { .tile-detail { position: relative; top: auto; scroll-margin-top: calc(var(--header-h) + 16px); } } /* 8489103: cases with a visual, results and a live badge */ .case-card--rich { padding: 0; gap: 0; } .case-card--rich > :not(.case-visual) { margin-inline: clamp(22px, 2.6vw, 34px); } .case-card--rich .tag { margin-top: clamp(20px, 2.4vw, 28px); } .case-card--rich > h3 { margin-top: 12px; } .case-card--rich > p:not(.tag) { margin-top: 12px; } .case-card--rich > .textlink { margin-top: auto; margin-bottom: clamp(22px, 2.6vw, 32px); } .case-card--rich > .case-results { margin-bottom: 22px; } .case-visual { display: block; position: relative; height: clamp(190px, 17vw, 236px); overflow: hidden; background: linear-gradient(135deg, var(--band) 0%, var(--navy-hover) 100%); } .case-visual::after { content: ''; position: absolute; right: -12%; bottom: -70%; width: 60%; aspect-ratio: 1; background: radial-gradient(circle, rgba(227,160,75,.3), transparent 62%); pointer-events: none; } .case-visual:empty { height: 12px; } .case-live { position: absolute; right: 16px; top: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--tone-green); font-size: .76rem; font-weight: 600; box-shadow: 0 6px 16px -8px rgba(20,31,63,.6); margin: 0 !important; } .case-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--tone-green); animation: bxLive 2s infinite; } .case-card--rich .case-results { color: var(--ink); font-size: .93rem; white-space: pre-line; } .case-checks { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-top: 16px; margin-bottom: 24px; padding-top: 16px; border-top: 1px solid var(--line-soft); } .case-checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: .93rem; line-height: 1.45; color: var(--ink); } .case-checks li::before { content: ''; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: color-mix(in srgb, var(--tone-green) 14%, #fff) url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27 fill=%27none%27 stroke=%27%231E8E5A%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5.8 10.4l2.7 2.7 5.7-6%27/%3E%3C/svg%3E') center / 20px no-repeat; } /* mock: browser window with a portal */ .cv-win { position: absolute; left: 7%; right: 7%; top: 25%; bottom: -14%; border-radius: 12px 12px 0 0; overflow: hidden; background: #fff; box-shadow: 0 24px 44px -20px rgba(0,0,0,.55); display: grid; grid-template-rows: 28px minmax(0, 1fr); transition: transform .6s var(--ease-out); } .case-card:hover .cv-win { transform: translateY(-8px); } .cv-bar { display: flex; align-items: center; gap: 5px; padding-inline: 11px; background: var(--sand-deep); } .cv-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); } .cv-bar b { margin-left: 10px; flex: 1; max-width: 190px; height: 13px; border-radius: 7px; background: #fff; font: 500 .56rem/13px var(--sans); color: var(--ink-3); padding-inline: 8px; white-space: nowrap; overflow: hidden; } .cv-body { display: grid; grid-template-columns: 27% minmax(0, 1fr); min-height: 0; } .cv-side { background: var(--band); padding: 12px 10px; display: flex; flex-direction: column; gap: 8px; } .cv-side i { height: 7px; border-radius: 4px; background: var(--band-line); } .cv-side i:first-child { width: 70%; height: 9px; background: var(--amber-glow); margin-bottom: 4px; } .cv-side i:nth-child(3) { background: #fff; opacity: .85; } .cv-main { padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; } .cv-main > b { font: 700 .74rem/1.2 var(--display); color: var(--ink); margin-bottom: 2px; } .cv-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; background: var(--paper); font: 400 .62rem/1.2 var(--sans); color: var(--ink-2); } .cv-row::before { content: ''; width: 12px; height: 14px; border-radius: 2px; background: var(--line); flex: none; } .cv-row em { margin-left: auto; font-style: normal; font-weight: 600; font-size: .56rem; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--tone-green) 16%, #fff); color: var(--tone-green); white-space: nowrap; } .cv-row.is-wait em { background: var(--amber-mist); color: var(--amber-deep); } .js .case-card .cv-row { opacity: 0; transform: translateX(10px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); } .js .case-card.is-in .cv-row { opacity: 1; transform: none; } .js .case-card.is-in .cv-row:nth-child(2) { transition-delay: .5s; } .js .case-card.is-in .cv-row:nth-child(3) { transition-delay: .75s; } .js .case-card.is-in .cv-row:nth-child(4) { transition-delay: 1s; } /* mock: booking that flows into the administration */ .cv-flow { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 3.5%; padding: 0 6%; } .cv-node { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 13px; border-radius: 12px; background: #fff; box-shadow: 0 16px 30px -18px rgba(0,0,0,.6); font: 400 .64rem/1.3 var(--sans); color: var(--ink-2); transition: transform .5s var(--ease-out); } .cv-node i { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--amber-mist); color: var(--amber-deep); } .cv-node i svg { width: 15px; height: 15px; } .cv-node b { font: 700 .74rem/1.2 var(--display); color: var(--ink); } .cv-node:last-child i { background: color-mix(in srgb, var(--tone-green) 16%, #fff); color: var(--tone-green); } .cv-flow::before { content: ''; position: absolute; left: 14%; right: 14%; top: 50%; height: 2px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.4) 0 6px, transparent 6px 12px); } .cv-flow::after { content: ''; position: absolute; left: 14%; top: calc(50% - 4px); width: 10px; height: 10px; border-radius: 50%; background: var(--amber-glow); box-shadow: 0 0 0 5px rgba(227,160,75,.3); animation: cvRun 3.6s linear infinite; } @keyframes cvRun { from { left: 14%; } to { left: 84%; } } .case-card:hover .cv-node:nth-child(1) { transform: translateY(-6px); } .case-card:hover .cv-node:nth-child(2) { transform: translateY(5px); } .case-card:hover .cv-node:nth-child(3) { transform: translateY(-6px); } .js .case-card .cv-node { opacity: 0; } .js .case-card.is-in .cv-node { opacity: 1; transition: opacity .6s var(--ease-out), transform .5s var(--ease-out); } .js .case-card.is-in .cv-node:nth-child(2) { transition-delay: .35s, 0s; } .js .case-card.is-in .cv-node:nth-child(3) { transition-delay: .7s, 0s; } /* mock: dashboard */ .cv-dash { position: absolute; left: 8%; right: 8%; top: 14%; bottom: -6%; border-radius: 12px 12px 0 0; background: #fff; box-shadow: 0 24px 44px -20px rgba(0,0,0,.55); padding: 14px 16px; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; } .cv-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .cv-kpis span { border-radius: 8px; background: var(--paper); padding: 7px 9px; font: 400 .56rem/1.3 var(--sans); color: var(--ink-3); display: flex; flex-direction: column; } .cv-kpis b { font: 700 .82rem/1.2 var(--display); color: var(--ink); } .cv-bars { display: flex; align-items: flex-end; gap: 6%; padding-inline: 2%; } .cv-bars i { flex: 1; border-radius: 5px 5px 0 0; background: var(--sand-deep); height: calc(var(--h) * 1%); transform-origin: bottom; transition: transform .8s var(--ease-out); } .cv-bars i:nth-child(even) { background: var(--amber-glow); } .js .case-card:not(.is-in) .cv-bars i { transform: scaleY(.1); } /* 8489129: quickscan with colour per answer */ .q { padding: 16px 14px 16px 12px; border-left: 3px solid transparent; transition: background-color .3s ease, border-color .3s ease; } .q > p:first-child { align-items: center; } .q > p:first-child::before { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: .92rem; background: var(--amber-mist); box-shadow: inset 0 0 0 1px var(--amber-soft); transition: background-color .3s ease, color .3s ease, box-shadow .3s ease; } .seg { padding: 4px; gap: 2px; } .seg button { padding: 7px 13px; font-weight: 450; } .seg button[data-v='2']:hover { background: var(--amber-mist); color: var(--amber-deep); } .seg button[data-v='1']:hover { background: color-mix(in srgb, var(--tone-blue) 10%, #fff); color: var(--tone-blue); } .seg button[data-v='0']:hover { background: color-mix(in srgb, var(--tone-green) 12%, #fff); color: var(--tone-green); } .seg button[data-v='2'][aria-pressed='true'] { background: var(--amber); color: #fff; box-shadow: 0 6px 14px -8px var(--amber-deep); } .seg button[data-v='1'][aria-pressed='true'] { background: var(--tone-blue); color: #fff; box-shadow: 0 6px 14px -8px var(--tone-blue); } .seg button[data-v='0'][aria-pressed='true'] { background: var(--tone-green); color: #fff; box-shadow: 0 6px 14px -8px var(--tone-green); } .q:has([data-v='2'][aria-pressed='true']) { background: var(--amber-mist); border-left-color: var(--amber); } .q:has([data-v='1'][aria-pressed='true']) { background: color-mix(in srgb, var(--tone-blue) 6%, #fff); border-left-color: var(--tone-blue); } .q:has([data-v='0'][aria-pressed='true']) { background: color-mix(in srgb, var(--tone-green) 7%, #fff); border-left-color: var(--tone-green); } .q:has([data-v='2'][aria-pressed='true']) > p:first-child::before { background: var(--amber); color: #fff; box-shadow: none; } .q:has([data-v='1'][aria-pressed='true']) > p:first-child::before { background: var(--tone-blue); color: #fff; box-shadow: none; } .q:has([data-v='0'][aria-pressed='true']) > p:first-child::before { background: var(--tone-green); color: #fff; box-shadow: none; } .score { background: var(--panel); border: 0; overflow: hidden; } .score::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, var(--tone-green), var(--tone-blue), var(--amber-glow), var(--amber)); } .gauge .g-bg { stroke: var(--amber-mist); } .gauge .pct { color: var(--amber-deep); } .wins li { border-left: 3px solid var(--amber); background: var(--amber-mist); } .wins li:nth-child(2) { border-left-color: var(--tone-blue); background: color-mix(in srgb, var(--tone-blue) 7%, #fff); } .wins li:nth-child(3) { border-left-color: var(--tone-green); background: color-mix(in srgb, var(--tone-green) 8%, #fff); } @media (max-width: 900px) { .score { position: relative; } } @media (max-width: 620px) { .q .seg { justify-self: start; } } @media (prefers-reduced-motion: reduce) { .header-side .btn--primary::before, .header-side .btn--primary::after, .cv-flow::after { animation: none; } .msg--typing { opacity: 1; transform: none; } .js .case-card .cv-row, .js .case-card .cv-node { opacity: 1; transform: none; } }

/* ===== FEEDBACK 2 ===== Userback round 2, 6 Oct 2026 */ .tile:not(:has(.tile-ic)) strong { align-self: auto; } /* 8489603: recognition section is now only the head and the chat */ #herkenbaar .section-head { max-width: 760px; } /* 8489647 / 8489653 / 8489657: why Airtable, with coloured feature rows level with the story */ .features { display: flex; flex-direction: column; gap: 12px; } .feature { --t: var(--tone-amber); display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 2px 16px; align-items: start; padding: 16px 18px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line-soft); transition: transform .3s var(--ease-out), box-shadow .3s ease, border-color .3s ease, background-color .3s ease; } .feature:nth-child(4n+2) { --t: var(--tone-blue); } .feature:nth-child(4n+3) { --t: var(--tone-violet); } .feature:nth-child(4n+4) { --t: var(--tone-green); } .feature-ic { grid-row: span 2; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: color-mix(in srgb, var(--t) 12%, #fff); color: var(--t); transition: background-color .25s ease, color .25s ease, transform .3s var(--ease-out); } .feature-ic svg { width: 22px; height: 22px; } .feature strong { font-family: var(--display); font-weight: 700; font-size: 1.1rem; line-height: 1.3; color: var(--ink); letter-spacing: -.01em; } .feature span { grid-column: 2; font-size: .93rem; line-height: 1.5; color: var(--ink-2); } .feature:hover { transform: translateX(6px); background: color-mix(in srgb, var(--t) 6%, #fff); border-color: color-mix(in srgb, var(--t) 38%, #fff); box-shadow: 0 18px 34px -26px color-mix(in srgb, var(--t) 80%, transparent); } .feature:hover .feature-ic { background: var(--t); color: #fff; transform: rotate(-6deg) scale(1.06); } .js .features.reveal .feature { opacity: 0; transform: translateY(14px); } .js .features.reveal.is-in .feature { opacity: 1; transform: none; transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), box-shadow .3s ease, border-color .3s ease, background-color .3s ease; } .js .features.reveal.is-in .feature:nth-child(2) { transition-delay: .08s, .08s, 0s, 0s, 0s; } .js .features.reveal.is-in .feature:nth-child(3) { transition-delay: .16s, .16s, 0s, 0s, 0s; } .js .features.reveal.is-in .feature:nth-child(4) { transition-delay: .24s, .24s, 0s, 0s, 0s; } .js .features.reveal.is-in .feature:nth-child(5) { transition-delay: .32s, .32s, 0s, 0s, 0s; } .js .features.reveal.is-in .feature:nth-child(6) { transition-delay: .4s, .4s, 0s, 0s, 0s; } .js .features.reveal.is-in .feature:hover { transform: translateX(6px); transition-delay: 0s; } /* 8489681: page hero and 'our strength' merged into one opening block */ .hero-merge { overflow: clip; padding-bottom: clamp(56px, 7vw, 110px); } .hero-merge::before { content: ''; position: absolute; right: -12%; top: -36%; width: 58%; aspect-ratio: 1; pointer-events: none; background: radial-gradient(circle, rgba(227,160,75,.22), transparent 62%); } .hero-merge::after { content: ''; position: absolute; left: -14%; bottom: -30%; width: 44%; aspect-ratio: 1; pointer-events: none; background: radial-gradient(circle, rgba(30,142,90,.12), transparent 62%); } .hero-merge .wrap { position: relative; z-index: 1; } .hero-merge .hidden-auto { margin-top: 6px; } .hero-merge-k { margin-top: clamp(18px, 2.4vw, 34px) !important; } .auto-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; } .auto-chips li { --c: var(--line); display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px 8px 10px; border-radius: 999px; font-size: .95rem; font-weight: 450; color: var(--ink-2); background: var(--panel); box-shadow: inset 0 0 0 1.5px var(--line); animation: chipAuto 10s ease-in-out infinite both; } .auto-chips li::before { content: ''; width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--ink-3) url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27 fill=%27none%27 stroke=%27white%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5.8 10.4l2.7 2.7 5.7-6%27/%3E%3C/svg%3E') center / 20px no-repeat; animation: chipDot 10s ease-in-out infinite both; } .auto-chips li:nth-child(2), .auto-chips li:nth-child(2)::before { animation-delay: .6s; } .auto-chips li:nth-child(3), .auto-chips li:nth-child(3)::before { animation-delay: 1.2s; } .auto-chips li:nth-child(4), .auto-chips li:nth-child(4)::before { animation-delay: 1.8s; } .auto-chips li:nth-child(5), .auto-chips li:nth-child(5)::before { animation-delay: 2.4s; } .auto-chips li:nth-child(6), .auto-chips li:nth-child(6)::before { animation-delay: 3s; } @keyframes chipAuto { 0%, 6% { color: var(--ink-2); background-color: var(--panel); box-shadow: inset 0 0 0 1.5px var(--line); transform: none; } 11% { transform: translateY(-4px) scale(1.04); } 16%, 78% { color: var(--tone-green); background-color: #E6F4EC; box-shadow: inset 0 0 0 1.5px rgba(30,142,90,.35); transform: none; } 90%, 100% { color: var(--ink-2); background-color: var(--panel); box-shadow: inset 0 0 0 1.5px var(--line); } } @keyframes chipDot { 0%, 6% { background-color: var(--ink-3); } 16%, 78% { background-color: var(--tone-green); } 90%, 100% { background-color: var(--ink-3); } } .ha-item button { padding-inline: 12px; border-radius: 10px 10px 0 0; transition: color .25s ease, background-color .3s ease; } .ha-item.is-on button { background: linear-gradient(90deg, var(--amber-mist), rgba(250,243,232,0)); } .ha-item button:hover b { color: var(--amber-deep); } /* 8489621: case page with a visual, before and after, and a numbered story */ .case-hero .wrap.case-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: center; } .case-hero-copy { display: flex; flex-direction: column; gap: 22px; } .case-hero .h1-page { font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.2rem); line-height: 1.06; } .case-hero-visual { position: relative; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-lift); } .case-visual--lg { height: clamp(250px, 27vw, 350px); } .case-visual--lg .cv-bar { padding-inline: 14px; } .case-visual--lg .cv-win { grid-template-rows: 34px minmax(0, 1fr); } .case-visual--lg .cv-bar b { font-size: .68rem; height: 17px; line-height: 17px; max-width: 240px; } .case-visual--lg .cv-main { padding: 16px 18px; gap: 9px; } .case-visual--lg .cv-main > b { font-size: .95rem; } .case-visual--lg .cv-row { font-size: .78rem; padding: 9px 11px; } .case-visual--lg .cv-row em { font-size: .68rem; padding: 3px 9px; } .case-visual--lg .cv-node { font-size: .76rem; padding: 15px 14px 16px; gap: 8px; } .case-visual--lg .cv-node b { font-size: .92rem; } .case-visual--lg .cv-node i { width: 32px; height: 32px; } .case-visual--lg .cv-kpis span { font-size: .68rem; padding: 9px 11px; } .case-visual--lg .cv-kpis b { font-size: 1rem; } .js .case-enhance .cv-row, .js .case-enhance .cv-node { opacity: 1; transform: none; animation: mfStep .6s var(--ease-out) both; } .js .case-enhance .cv-row:nth-child(3), .js .case-enhance .cv-node:nth-child(2) { animation-delay: .35s; } .js .case-enhance .cv-row:nth-child(4), .js .case-enhance .cv-node:nth-child(3) { animation-delay: .7s; } .js .case-enhance .cv-bars i { transform: none; } .case-chips { display: flex; flex-wrap: wrap; gap: 8px; color: var(--ink-2); font-size: .95rem; } .chip { --t: var(--tone-amber); font-size: .86rem; font-weight: 500; padding: 6px 14px; border-radius: 999px; background: color-mix(in srgb, var(--t) 11%, #fff); color: var(--t); } .chip:nth-child(4n+2) { --t: var(--tone-blue); } .chip:nth-child(4n+3) { --t: var(--tone-violet); } .chip:nth-child(4n+4) { --t: var(--tone-green); } .case-change:has(.ba-lines:empty) { display: none; } .beforeafter { display: grid; grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr); gap: clamp(12px, 2vw, 26px); align-items: center; } .ba { --t: #C2410C; display: flex; flex-direction: column; gap: 16px; padding: clamp(22px, 2.8vw, 34px); border-radius: 20px; background: color-mix(in srgb, var(--t) 7%, #fff); border: 1px solid color-mix(in srgb, var(--t) 24%, #fff); height: 100%; } .ba--after { --t: var(--tone-green); box-shadow: 0 26px 46px -34px var(--tone-green); } .ba-k { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--t); } .ba-lines { white-space: pre-line; color: var(--ink); } .ba ul { list-style: none; display: flex; flex-direction: column; gap: 12px; } .ba li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; color: var(--ink); line-height: 1.45; } .ba li::before { content: ''; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--t) url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27 fill=%27none%27 stroke=%27white%27 stroke-width=%272.2%27 stroke-linecap=%27round%27%3E%3Cpath d=%27M6.5 6.5l7 7M13.5 6.5l-7 7%27/%3E%3C/svg%3E') center / 20px no-repeat; } .ba--after li::before { background-image: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27 fill=%27none%27 stroke=%27white%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5.8 10.4l2.7 2.7 5.7-6%27/%3E%3C/svg%3E'); } .ba-arrow { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; box-shadow: 0 14px 26px -14px rgba(27,42,85,.8); animation: baNudge 2.4s var(--ease-out) infinite; } .ba-arrow svg { width: 22px; height: 18px; } @keyframes baNudge { 0%, 60%, 100% { transform: none; } 30% { transform: translateX(6px); } } .case-steps { counter-reset: casestep; gap: 0; max-width: 62ch; } .case-steps h2 { counter-increment: casestep; display: flex; align-items: center; gap: 16px; margin: 0; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); } .case-steps h2::before { content: counter(casestep); width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; font-family: var(--sans); font-size: 1.05rem; font-weight: 600; letter-spacing: 0; color: #fff; background: var(--tone-amber); } .case-steps h2:nth-of-type(3n+2)::before { background: var(--tone-blue); } .case-steps h2:nth-of-type(3n+3)::before { background: var(--tone-green); } .case-steps p { margin: 8px 0 8px 20px; padding: 6px 0 30px 36px; border-left: 2px solid var(--line); font-size: 1.04rem; line-height: 1.7; } .case-steps p:last-child { border-left-color: transparent; padding-bottom: 0; } .case-facts-k { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); } .case-facts .case-results { white-space: pre-line; color: var(--ink); } .case-facts .case-checks { margin: 0; padding-top: 0; border-top: 0; } @media (max-width: 860px) { .case-hero .wrap.case-hero-grid { grid-template-columns: minmax(0, 1fr); } .beforeafter { grid-template-columns: minmax(0, 1fr); } .ba-arrow { margin-inline: auto; animation: none; transform: rotate(90deg); } } @media (prefers-reduced-motion: reduce) { .auto-chips li, .auto-chips li::before, .ba-arrow { animation: none; } .js .features.reveal .feature { opacity: 1; transform: none; } }

/* ===== FEEDBACK 3 ===== Userback round 3, 6 Oct 2026 */
:root{--tone-rose:#C2410C;--tone-teal:#0E7C86}
h3,h4,.h3,.tile strong,.faq summary,.story-line strong,.msg p,.bubble-inner,.flow-title,.feature strong,.gain strong,table.compare tbody th,.pick-set legend,.port-side b,.port-card strong,.portal-hello,.cv-main>b,.cv-node b,.cv-kpis b,.pain-num,.build-item b,.tl-num,.after-steps li::before,.ha-item button b,.flow-saving strong,.doc-logo{font-family:var(--sans);letter-spacing:-.012em}
h3,h4,.h3,.tile strong,.faq summary,.story-line strong,.flow-title,.feature strong,.gain strong,table.compare tbody th,.pick-set legend{font-weight:600}
.msg p{font-weight:500}
h3,h4{line-height:1.3}
.tile-detail h3,.case-card h3,.duo-h h3{letter-spacing:-.018em}
@media (min-width:901px){.faq-grid>.section-head,.contact-grid>:last-child{position:sticky;top:calc(var(--header-h) + 32px);align-self:start}
}
[data-auto-on]{position:relative}
.is-autoplay [data-auto-on]::after{content:"";position:absolute;left:12%;right:12%;bottom:3px;height:2px;border-radius:2px;background:currentColor;opacity:.55;transform-origin:left;animation:auto-bar var(--auto-ms,5s) linear both;pointer-events:none}
@keyframes auto-bar{from{transform:scaleX(0)}
to{transform:scaleX(1)}
}
.duo.is-autoplay .duo-node[data-auto-on]::after{left:-5px;right:-5px;top:-5px;bottom:-5px;height:auto;border-radius:50%;background:none;border:2px solid var(--amber);opacity:1;transform:none;animation:auto-ring var(--auto-ms,5s) linear both}
@keyframes auto-ring{from{clip-path:polygon(50% 50%,50% 0,50% 0,50% 0,50% 0,50% 0,50% 0)}
25%{clip-path:polygon(50% 50%,50% 0,100% 0,100% 50%,100% 50%,100% 50%,100% 50%)}
50%{clip-path:polygon(50% 50%,50% 0,100% 0,100% 100%,50% 100%,50% 100%,50% 100%)}
75%{clip-path:polygon(50% 50%,50% 0,100% 0,100% 100%,0 100%,0 50%,0 50%)}
to{clip-path:polygon(50% 50%,50% 0,100% 0,100% 100%,0 100%,0 0,50% 0)}
}
.auto-note{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;color:var(--ink-3);letter-spacing:.02em}
.auto-note::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 0 0 rgba(46,139,87,.5);animation:auto-dot 1.8s ease-out infinite}
.band .auto-note{color:var(--band-ink-2)}
@keyframes auto-dot{to{box-shadow:0 0 0 9px rgba(46,139,87,0)}
}
.is-taken .auto-note{visibility:hidden}
@media (prefers-reduced-motion:reduce){.auto-note{display:none}
}
.deck{--t:var(--tone-amber);display:grid;gap:clamp(18px,2.4vw,30px)}
.deck-tabs{display:flex;flex-wrap:wrap;gap:8px}
.deck-tab{display:inline-flex;align-items:center;gap:10px;text-align:left;cursor:pointer;font:500 .95rem/1.25 var(--sans);color:var(--ink-2);background:var(--panel);border:1px solid var(--line-soft);border-radius:14px;padding:11px 16px 11px 12px;transition:background .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease,transform .25s var(--ease-out)}
.deck-tab:hover{border-color:color-mix(in srgb,var(--t) 45%,var(--line));color:var(--ink);transform:translateY(-1px)}
.deck-tab[aria-pressed="true"]{background:var(--band);border-color:var(--band);color:var(--band-ink);box-shadow:0 14px 26px -18px rgba(20,31,63,.8)}
.deck-ic{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--t) 13%,#fff);color:var(--t);transition:background .25s ease,color .25s ease}
.deck-ic svg{width:18px;height:18px}
.deck-tab[aria-pressed="true"] .deck-ic{background:var(--t);color:#fff}
.deck-tab b{display:block;font-weight:600;color:inherit}
.deck-tab small{display:block;font-size:.8rem;font-weight:400;opacity:.75;margin-top:1px}
.deck-stage{position:relative;min-width:0}
.deck-panel.is-swap{animation:deck-in .5s var(--ease-out) both}
.deck.is-live .deck-panel{min-height:var(--deck-h,0px)}
@keyframes deck-in{from{opacity:0;transform:translateY(10px)}
to{opacity:1;transform:none}
}
.deck-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px;min-height:22px}
.deck-count{font-size:.8rem;font-variant-numeric:tabular-nums;color:var(--ink-3);letter-spacing:.06em}
.band .deck-count{color:var(--band-ink-2)}
.deck:not(.is-live) .deck-tabs,.deck:not(.is-live) .deck-foot{display:none}
.deck:not(.is-live) .deck-panel + .deck-panel{margin-top:18px}
.deck.is-live .deck-topic{display:none}
.deck-topic{font-weight:600;color:var(--ink);margin-bottom:8px}
@media (min-width:901px){.deck--vs{grid-template-columns:minmax(220px,.62fr) minmax(0,2fr);align-items:stretch}
.deck--vs .deck-stage{display:flex;flex-direction:column}
.deck--vs.is-live .deck-panel{flex:1;display:flex;flex-direction:column}
.deck--vs.is-live .vs{flex:1}
.deck--vs .deck-tabs{flex-direction:column;flex-wrap:nowrap}
.deck--vs .deck-tab{width:100%}
}
@media (max-width:900px){.deck--vs .deck-tabs,.deck--list .deck-tabs{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;margin-inline:calc(var(--gutter) * -1);padding:2px var(--gutter) 10px;scrollbar-width:none}
.deck--vs .deck-tabs::-webkit-scrollbar,.deck--list .deck-tabs::-webkit-scrollbar{display:none}
.deck--vs .deck-tab,.deck--list .deck-tab{flex:none;scroll-snap-align:start}
}
.vs{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1.12fr);align-items:stretch}
.vs-side{border-radius:20px;padding:clamp(20px,2.6vw,34px);display:flex;flex-direction:column;gap:14px;min-height:230px}
.vs-theirs{background:var(--sand-deep);border:1px dashed var(--line);color:var(--ink-2)}
.vs-ours{background:var(--band);color:var(--band-ink);box-shadow:var(--shadow-lift);position:relative;overflow:hidden}
.vs-ours::after{content:"";position:absolute;right:-25%;bottom:-55%;width:70%;aspect-ratio:1;background:radial-gradient(circle,color-mix(in srgb,var(--t) 38%,transparent),transparent 65%);pointer-events:none}
.vs-k{display:inline-flex;align-items:center;gap:9px;font-size:var(--fs-micro);font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.vs-theirs .vs-k{color:var(--ink-3)}
.vs-ours .vs-k{color:var(--amber-glow)}
.vs-k i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-style:normal}
.vs-k i svg{width:12px;height:12px}
.vs-theirs .vs-k i{background:#fff;color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--line)}
.vs-ours .vs-k i{background:var(--good);color:#fff}
.vs-v{font-size:clamp(1.12rem,1rem + .7vw,1.55rem);line-height:1.4;font-weight:400;position:relative;z-index:1}
.vs-theirs .vs-v{text-decoration:none}
.vs-ours .vs-v{font-weight:500}
.vs-ghost{position:absolute;right:22px;bottom:18px;width:96px;height:96px;color:rgba(255,255,255,.07);pointer-events:none}
.vs-ghost svg{width:100%;height:100%}
.vs-mid{display:grid;place-items:center;color:var(--amber)}
.vs-mid svg{width:22px;height:22px}
.deck-panel.is-swap .vs-ours{animation:vs-pop .6s var(--ease-out) .08s both}
@keyframes vs-pop{from{opacity:0;transform:translateX(-14px) scale(.98)}
to{opacity:1;transform:none}
}
@media (max-width:700px){.vs{grid-template-columns:minmax(0,1fr);gap:0}
.vs-mid{height:34px;transform:rotate(90deg)}
.vs-side{min-height:0}
}
.deck--rail .deck-tabs{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;align-items:start}
.deck--rail .deck-tabs::before,.deck--rail .deck-tabs::after{content:"";position:absolute;top:23px;height:2px;left:calc(50% / var(--n,8));right:calc(50% / var(--n,8));border-radius:2px}
.deck--rail .deck-tabs::before{background:var(--line)}
.deck--rail .deck-tabs::after{background:linear-gradient(90deg,var(--tone-amber),var(--tone-blue),var(--tone-violet),var(--tone-green));transform-origin:left;transform:scaleX(calc(var(--at,0) / (var(--n,8) - 1)));transition:transform .6s var(--ease-out)}
.deck--rail .deck-tab{position:relative;z-index:1;flex-direction:column;align-items:center;text-align:center;gap:10px;background:none;border:0;box-shadow:none;padding:0 4px;font-size:.84rem;color:var(--ink-3);border-radius:0}
.deck--rail .deck-tab:hover{transform:none;color:var(--ink)}
.deck--rail .deck-tab[aria-pressed="true"]{background:none;color:var(--ink);box-shadow:none}
.deck--rail .deck-ic{width:48px;height:48px;border-radius:50%;background:var(--panel);color:var(--ink-3);box-shadow:inset 0 0 0 1.5px var(--line);transition:background .3s ease,color .3s ease,box-shadow .3s ease,transform .3s var(--ease-out)}
.panel .deck--rail .deck-ic{background:var(--paper)}
.deck--rail .deck-ic svg{width:20px;height:20px}
.deck--rail .deck-tab.is-done .deck-ic{color:var(--t);box-shadow:inset 0 0 0 1.5px var(--t)}
.deck--rail .deck-tab[aria-pressed="true"] .deck-ic{background:var(--t);color:#fff;box-shadow:0 0 0 6px color-mix(in srgb,var(--t) 18%,transparent);transform:scale(1.08)}
.deck--rail .deck-tab b{font-weight:500}
.deck--rail .deck-tab[aria-pressed="true"] b{font-weight:600}
.deck--rail [data-auto-on]::after{display:none}
.rail-card{background:var(--panel);border:1px solid var(--line-soft);border-radius:22px;box-shadow:var(--shadow-soft);padding:clamp(22px,3vw,40px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(20px,4vw,56px);align-items:center;border-top:3px solid var(--t)}
.rail-copy{display:flex;flex-direction:column;gap:12px}
.rail-n{font:600 .78rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--t)}
.rail-copy h3{font-size:clamp(1.3rem,1.15rem + .7vw,1.75rem)}
.rail-copy p{color:var(--ink-2);max-width:46ch}
.seq{display:flex;flex-direction:column;gap:0}
.seq-step{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:center;padding:11px 14px;border-radius:14px;background:color-mix(in srgb,var(--t) 6%,var(--paper));border:1px solid color-mix(in srgb,var(--t) 16%,var(--line-soft));font-weight:500;color:var(--ink)}
.seq-step + .seq-step{margin-top:22px}
.seq-step + .seq-step::before{content:"";position:absolute;left:30px;top:-23px;height:22px;width:2px;background:repeating-linear-gradient(180deg,var(--t) 0 4px,transparent 4px 8px);animation:chain-flow 1s linear infinite}
@keyframes chain-flow{to{background-position:0 8px}
}
.seq-step i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--t);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--t) 40%,transparent);font:600 .82rem/1 var(--sans)}
.seq-step:last-child i{background:var(--good);color:#fff;box-shadow:none}
.seq-step i svg{width:16px;height:16px}
.seq-step small{display:block;font-size:.78rem;font-weight:400;color:var(--ink-3)}
.deck-panel.is-swap .seq-step{animation:deck-in .45s var(--ease-out) both;animation-delay:calc(var(--i,0) * .14s + .1s)}
@media (max-width:900px){.deck--rail .deck-tabs{grid-auto-columns:minmax(86px,1fr);overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gutter) * -1);padding:8px var(--gutter) 10px}
.deck--rail .deck-tabs::-webkit-scrollbar{display:none}
.deck--rail .deck-tabs::before,.deck--rail .deck-tabs::after{left:calc(var(--gutter) + 43px);right:auto;width:calc((var(--n,8) - 1) * 86px);top:31px}
.rail-card{grid-template-columns:minmax(0,1fr)}
}
.deck--seg .deck-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;padding:6px;border-radius:20px;background:var(--sand-deep)}
.panel .deck--seg .deck-tabs{background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-soft)}
.deck--seg .deck-tab{border:0;background:none;justify-content:center;padding:12px 14px}
.deck--seg .deck-tab[aria-pressed="true"]{background:var(--band)}
@media (max-width:700px){.deck--seg .deck-tabs{grid-auto-flow:row}
.deck--seg .deck-tab{justify-content:flex-start}
}
.give-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.give{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start;background:var(--panel);border:1px solid var(--line-soft);border-radius:18px;padding:18px 20px;box-shadow:var(--shadow-soft);transition:transform .3s var(--ease-out),border-color .3s ease}
.give:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--t) 40%,var(--line))}
.give i{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--t) 12%,#fff);color:var(--t)}
.give i svg{width:21px;height:21px}
.give strong{display:block;color:var(--ink);font-weight:600;margin-bottom:3px}
.give div>span{color:var(--ink-2);font-size:.95rem}
.deck-panel.is-swap .give{animation:deck-in .45s var(--ease-out) both;animation-delay:calc(var(--i,0) * .07s)}
.give-note{margin-top:18px;color:var(--ink-2);max-width:70ch;font-size:.95rem}
@media (max-width:700px){.give-grid{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:901px){.deck--list{grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);align-items:start;gap:clamp(24px,4vw,64px)}
.deck--list .deck-tabs{flex-direction:column;flex-wrap:nowrap;gap:6px}
.deck--list .deck-tab{width:100%;padding:14px 18px}
.deck--list .deck-stage{position:sticky;top:calc(var(--header-h) + 32px)}
}
.deck--list .deck-tab i{font:600 .8rem/1 var(--sans);font-style:normal;letter-spacing:.08em;color:var(--t);width:26px}
.deck--list .deck-tab[aria-pressed="true"] i{color:var(--amber-glow)}
.say{background:var(--band);color:var(--band-ink);border-radius:24px;padding:clamp(26px,3.6vw,48px);min-height:260px;display:flex;flex-direction:column;gap:16px;justify-content:center;position:relative;overflow:hidden;box-shadow:var(--shadow-lift)}
.say::after{content:"";position:absolute;right:-20%;top:-40%;width:70%;aspect-ratio:1;background:radial-gradient(circle,color-mix(in srgb,var(--t) 40%,transparent),transparent 65%);pointer-events:none}
.say-n{font:700 clamp(3rem,2.4rem + 2vw,4.4rem)/.85 var(--display);color:var(--amber-glow);position:relative;z-index:1}
.say h3{color:var(--band-ink);font-size:clamp(1.3rem,1.15rem + .7vw,1.75rem);position:relative;z-index:1}
.say p{color:var(--band-ink-2);font-size:1.05rem;max-width:48ch;position:relative;z-index:1}
.sync-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(34px,5vw,86px);align-items:center}
@media (max-width:960px){.sync-grid{grid-template-columns:minmax(0,1fr)}
}
.sync{display:flex;flex-direction:column;align-items:stretch}
.sync-node{display:grid;grid-template-columns:52px minmax(0,1fr);gap:16px;align-items:center;background:var(--band);color:var(--band-ink);border-radius:20px;padding:18px 22px;box-shadow:var(--shadow-lift)}
.sync-ic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:rgba(255,255,255,.08);color:var(--amber-glow)}
.sync-ic svg{width:24px;height:24px}
.sync-node b{display:block;font-weight:600;font-size:1.08rem}
.sync-node small{display:block;color:var(--band-ink-2);font-size:.9rem}
.sync-wire{position:relative;height:62px;display:grid;place-items:center}
.sync-wire i{position:absolute;top:0;bottom:0;width:2px;left:calc(50% - 9px);background:repeating-linear-gradient(180deg,var(--tone-amber) 0 5px,transparent 5px 11px);animation:wire-down 1s linear infinite}
.sync-wire i + i{left:calc(50% + 7px);background:repeating-linear-gradient(180deg,var(--tone-blue) 0 5px,transparent 5px 11px);animation-name:wire-up}
@keyframes wire-down{to{background-position:0 11px}
}
@keyframes wire-up{to{background-position:0 -11px}
}
.sync-wire span{position:relative;background:var(--panel);border:1px solid var(--line-soft);border-radius:99px;padding:4px 14px;font-size:.78rem;color:var(--ink-2);box-shadow:var(--shadow-soft)}
.sync-portal{background:#fff;border-radius:20px;box-shadow:0 30px 60px -38px rgba(20,31,63,.55),0 0 0 1px var(--line);overflow:hidden}
.sync-bar{display:flex;align-items:center;gap:7px;padding:11px 16px;border-bottom:1px solid var(--line-soft);background:var(--paper)}
.sync-bar i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.sync-bar span{margin-left:8px;flex:1;font-size:.78rem;color:var(--ink-3);background:#fff;border:1px solid var(--line-soft);border-radius:99px;padding:3px 12px}
.sync-foot{margin-top:14px;min-height:20px}
.deck--who{padding:16px;gap:14px}
.deck--who .deck-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.deck--who .deck-tab{flex-direction:column;gap:7px;padding:12px 6px;font-size:.84rem;text-align:center;border-radius:12px}
.deck--who .deck-stage{background:var(--paper);border-radius:14px;padding:18px 20px;min-height:196px}
.who-v{font-weight:500;color:var(--ink);font-size:1.04rem;line-height:1.45}
.who-rows{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.who-rows li{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line-soft);border-radius:99px;padding:6px 13px 6px 7px;font-size:.88rem;color:var(--ink)}
.who-rows i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--t);color:#fff}
.who-rows i svg{width:11px;height:11px}
.deck-panel.is-swap .who-rows li{animation:deck-in .4s var(--ease-out) both;animation-delay:calc(var(--i,0) * .09s + .12s)}
@media (max-width:520px){.deck--who .deck-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.why-title{font-size:clamp(1.4rem,1.2rem + .9vw,2rem)}
.why-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.know-grid{gap:16px}
@media (max-width:1000px){.why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){.why-grid{grid-template-columns:minmax(0,1fr)}
}
.why{--t:var(--tone-amber);position:relative;display:flex;flex-direction:column;gap:10px;background:var(--panel);border:1px solid var(--line-soft);border-radius:20px;padding:24px 22px 26px;box-shadow:var(--shadow-soft);overflow:hidden;transition:transform .35s var(--ease-out),box-shadow .35s ease,border-color .35s ease}
.panel .why{background:var(--paper)}
.why::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--t);transform:scaleX(.22);transform-origin:left;transition:transform .45s var(--ease-out)}
.why:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--t) 35%,var(--line));box-shadow:0 26px 44px -30px color-mix(in srgb,var(--t) 70%,#141F3F)}
.why:hover::before{transform:none}
.why i{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--t) 12%,#fff);color:var(--t);margin-bottom:4px;transition:background .3s ease,color .3s ease}
.why:hover i{background:var(--t);color:#fff}
.why i svg{width:22px;height:22px}
.why h3{font-size:1.12rem}
.why p{color:var(--ink-2);font-size:.96rem}
.crm-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(22px,4vw,56px);align-items:center}
@media (max-width:900px){.crm-grid{grid-template-columns:minmax(0,1fr)}
}
.crm-win{border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -38px rgba(20,31,63,.55),0 0 0 1px var(--line);font-size:.82rem}
.crm-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:var(--paper);border-bottom:1px solid var(--line-soft)}
.crm-bar i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.crm-bar>span{margin-left:8px;color:var(--ink-3)}
.crm-body{padding:16px;display:grid;gap:14px}
.crm-old{filter:saturate(.55)}
.crm-old .crm-bar{background:#DDD9D2}
.crm-old .crm-body{background:#EFECE7}
.crm-tabs{display:flex;gap:2px;border-bottom:1px solid #BEB9AF}
.crm-tabs b{font-weight:500;font-size:.74rem;padding:5px 9px;background:#DAD6CE;border:1px solid #BEB9AF;border-bottom:0;color:#6B665C}
.crm-tabs b:first-child{background:#F7F5F1;color:#333}
.crm-fields{display:grid;grid-template-columns:92px minmax(0,1fr);gap:6px 10px;align-items:center;color:#6B665C}
.crm-fields em{font-style:normal;background:#fff;border:1px solid #BEB9AF;padding:4px 8px;color:#333;min-height:26px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crm-side{display:flex;flex-wrap:wrap;gap:8px}
.crm-file{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px 10px;color:var(--ink);box-shadow:var(--shadow-soft);animation:crm-wob 3.4s ease-in-out infinite}
.crm-file::before{content:"";width:14px;height:14px;border-radius:3px;background:#217346}
.crm-file.w::before{background:#2B579A}
.crm-file.a::before{background:#25D366;border-radius:50%}
.crm-file.w{animation-delay:-1.1s}
.crm-file.a{animation-delay:-2.2s}
@keyframes crm-wob{0%,100%{transform:rotate(-1.5deg)}
50%{transform:rotate(1.5deg) translateY(-2px)}
}
.crm-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.crm-kpis>span{border:1px solid var(--line-soft);border-radius:10px;padding:9px 11px;display:flex;flex-direction:column;gap:2px}
.crm-kpis small{color:var(--ink-3);font-size:.72rem}
.crm-kpis b{color:var(--ink);font-weight:600}
.crm-rows{display:grid;gap:7px}
.crm-rows>span{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:9px;align-items:center;border:1px solid var(--line-soft);border-radius:10px;padding:8px 10px;color:var(--ink)}
.crm-rows i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--good);color:#fff}
.crm-rows i svg{width:11px;height:11px}
.crm-rows em{font-style:normal;font-size:.72rem;padding:2px 8px;border-radius:99px;background:#E7F4EC;color:var(--good);white-space:nowrap}
.crm-points{list-style:none;display:grid;gap:14px}
.crm-points li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:start}
.crm-points i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--t) 14%,#fff);color:var(--t);margin-top:1px}
.crm-points i svg{width:14px;height:14px}
.crm-points strong{display:block;color:var(--ink);font-weight:600}
.crm-points div>span{color:var(--ink-2);font-size:.95rem}
.deck-panel.is-swap .crm-points li{animation:deck-in .45s var(--ease-out) both;animation-delay:calc(var(--i,0) * .09s + .1s)}
.deck-panel.is-swap .crm-win{animation:vs-pop .55s var(--ease-out) both}
.deck--crm .deck-tabs{max-width:640px}
.sketch{--t:var(--tone-blue);display:flex;flex-direction:column;gap:14px;background:var(--paper);border:1px solid var(--line-soft);border-radius:22px;padding:clamp(22px,2.8vw,34px);border-top:3px solid var(--t);transition:transform .35s var(--ease-out),box-shadow .35s ease}
.sketch:hover{transform:translateY(-4px);box-shadow:0 26px 44px -32px color-mix(in srgb,var(--t) 70%,#141F3F)}
.sketch .tag{font-size:var(--fs-micro);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--t)}
.sketch h3{font-size:clamp(1.2rem,1.08rem + .5vw,1.5rem)}
.sketch .beforeafter{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:6px}
.sketch .ba{padding:18px 20px;gap:12px;border-radius:16px}
.sketch .ba li{font-size:.95rem}
.case-grid--live .case-card{border-top:3px solid var(--tone-green)}
.case-kicker{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:clamp(18px,2.4vw,28px)}
.case-kicker b{display:inline-flex;align-items:center;gap:9px;font:600 .78rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--tone-green);background:color-mix(in srgb,var(--tone-green) 10%,#fff);border-radius:99px;padding:8px 14px}
.case-kicker b::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tone-green);animation:auto-dot 1.8s ease-out infinite}
.case-kicker span{color:var(--ink-2);font-size:.95rem}
.page-hero .about-hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,5vw,80px);align-items:center}
@media (max-width:900px){.page-hero .about-hero-grid{grid-template-columns:minmax(0,1fr)}
}
.twin{display:flex;flex-direction:column}
.twin-node{--t:var(--tone-blue);display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:14px;align-items:center;background:var(--panel);border:1px solid var(--line-soft);border-radius:20px;padding:18px 20px;box-shadow:var(--shadow-soft)}
.twin-node .deck-ic{grid-row:span 2;width:46px;height:46px;border-radius:14px}
.twin-node .deck-ic svg{width:22px;height:22px}
.twin-node b{font-weight:600;color:var(--ink);align-self:end}
.twin-node small{color:var(--ink-2);font-size:.9rem;align-self:start}
.twin-node--ta{background:var(--band);border-color:var(--band);box-shadow:var(--shadow-lift)}
.twin-node--ta b{color:var(--band-ink)}
.twin-node--ta small{color:var(--band-ink-2)}
.twin-node--ta .deck-ic{background:var(--amber-glow);color:var(--band)}
.twin-wire{position:relative;height:74px;display:grid;grid-template-columns:1fr 34px 1fr;align-items:center;font-size:.78rem;color:var(--ink-3)}
.twin-wire span:first-child{text-align:right;padding-right:8px}
.twin-wire span:last-child{padding-left:8px}
.twin-wire i{grid-column:2;grid-row:1;justify-self:start;margin-left:8px;width:2px;height:100%;background:repeating-linear-gradient(180deg,var(--tone-blue) 0 5px,transparent 5px 11px);animation:wire-down 1s linear infinite}
.twin-wire i + i{justify-self:end;margin:0 8px 0 0;background:repeating-linear-gradient(180deg,var(--tone-amber) 0 5px,transparent 5px 11px);animation-name:wire-up}
.rail-card--text{grid-template-columns:minmax(0,1fr)}
.rail-card--text .rail-copy p{max-width:70ch;font-size:1.05rem}
.deck--rail[style*="--n:3"] .deck-tabs{max-width:720px;margin-inline:auto;width:100%}
.about-quote{margin:0 auto}
.direct a,.direct span{display:inline-flex;align-items:center;gap:12px;color:var(--ink);font-size:1.05rem}
.direct i{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--amber-mist);color:var(--amber-deep);flex:none}
.direct i svg{width:17px;height:17px}
.from-chip{display:none}
.band .stack>.btn,.about-hero .btn{align-self:flex-start}
.about-hero .page-hero-rule{width:100%}
.deck--hub{gap:18px}
.hub-map{position:relative;aspect-ratio:1.45;min-height:330px}
.deck--hub .deck-tabs{position:absolute;inset:0;display:block}
.hub-tab{position:absolute;z-index:2;width:min(46%,230px);background:var(--band-2);border-color:var(--band-line);color:var(--band-ink-2);padding:12px 14px 12px 12px}
.hub-tab:hover{color:var(--band-ink);border-color:color-mix(in srgb,var(--t) 70%,var(--band-line))}
.hub-tab[aria-pressed="true"]{background:#fff;border-color:#fff;color:var(--ink);box-shadow:0 0 0 5px color-mix(in srgb,var(--t) 35%,transparent),0 20px 40px -22px #000}
.hub-tab .deck-ic{background:rgba(255,255,255,.08);color:var(--amber-glow)}
.hub-tab--1{left:0;top:0}
.hub-tab--2{right:0;top:0}
.hub-tab--3{left:0;bottom:0}
.hub-tab--4{right:0;bottom:0}
.hub-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hub-wire{fill:none;stroke:var(--band-line);stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:5 7;animation:hub-flow 1.2s linear infinite;transition:stroke .3s ease}
@keyframes hub-flow{to{stroke-dashoffset:-24}
}
.deck--hub[data-at="0"] .hub-wire--1,.deck--hub[data-at="1"] .hub-wire--2,.deck--hub[data-at="2"] .hub-wire--3,.deck--hub[data-at="3"] .hub-wire--4{stroke:var(--amber-glow);stroke-width:3;animation-duration:.6s}
.deck--hub[data-at="2"] .hub-wire--3{animation-direction:reverse}
.hub-core{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:3;width:128px;aspect-ratio:1;border-radius:50%;background:var(--amber-glow);color:var(--band);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;text-align:center;box-shadow:0 0 0 10px rgba(227,160,75,.14),0 0 0 22px rgba(227,160,75,.07);animation:hub-pulse 2.6s ease-in-out infinite}
@keyframes hub-pulse{50%{box-shadow:0 0 0 14px rgba(227,160,75,.16),0 0 0 30px rgba(227,160,75,.05)}
}
.hub-core-ic svg{width:26px;height:26px;display:block}
.hub-core b{font-weight:600;font-size:.92rem;line-height:1.1}
.hub-core small{font-size:.72rem;opacity:.8}
.deck--hub .deck-stage{background:var(--band-2);border:1px solid var(--band-line);border-radius:18px;padding:18px 20px 14px}
.hub-dir{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-micro);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--amber-glow);margin-bottom:8px}
.hub-dir svg{width:16px;height:16px}
.hub-v{color:var(--band-ink-2);font-size:1.05rem;min-height:3.2em}
.hub-v strong{color:var(--band-ink);font-weight:600}
.deck--hub [data-auto-on]::after{display:none}
.deck--hub:not(.is-live) .hub-map{display:none}
@media (max-width:560px){.hub-map{aspect-ratio:auto;min-height:0;display:grid;gap:14px}
.deck--hub .deck-tabs{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;order:2}
.hub-tab{position:static;width:auto;flex-direction:column;align-items:flex-start;font-size:.86rem}
.hub-wires{display:none}
.hub-core{position:static;translate:none;margin:14px auto 6px;width:112px;order:1}
}
@media (prefers-reduced-motion:reduce){.hub-wire,.hub-core,.sync-wire i,.twin-wire i,.seq-step + .seq-step::before,.crm-file{animation:none}
}
.timeline>:nth-child(6n+1),.duo-track>:nth-child(6n+1),.duo-step:nth-child(6n+1){--t:var(--tone-amber)}
.timeline>:nth-child(6n+2),.duo-track>:nth-child(6n+2),.duo-step:nth-child(6n+2){--t:var(--tone-blue)}
.timeline>:nth-child(6n+3),.duo-track>:nth-child(6n+3),.duo-step:nth-child(6n+3){--t:var(--tone-violet)}
.timeline>:nth-child(6n+4),.duo-track>:nth-child(6n+4),.duo-step:nth-child(6n+4){--t:var(--tone-green)}
.timeline>:nth-child(6n+5),.duo-track>:nth-child(6n+5),.duo-step:nth-child(6n+5){--t:var(--tone-rose)}
.timeline>:nth-child(6n+6),.duo-track>:nth-child(6n+6),.duo-step:nth-child(6n+6){--t:var(--tone-teal)}
.timeline::after{background:linear-gradient(var(--tone-amber),var(--tone-blue) 24%,var(--tone-violet) 44%,var(--tone-green) 62%,var(--tone-rose) 80%,var(--tone-teal))}
.tl-num{color:var(--t,var(--ink-3));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--t,var(--line)) 45%,var(--line));font-weight:600}
.tl-item.is-on .tl-num{background:var(--t,var(--amber));color:#fff;box-shadow:0 0 0 6px color-mix(in srgb,var(--t,var(--amber)) 16%,transparent)}
.tl-item>div{position:relative;padding:2px 0 2px 0;transition:transform .45s var(--ease-out)}
.tl-item.is-on>div{transform:translateX(4px)}
.tl-item h3{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.tl-item h3 small{display:inline-flex;margin-top:0;padding:4px 11px;border-radius:99px;font-weight:600;letter-spacing:.02em;color:var(--t,var(--amber-deep));background:color-mix(in srgb,var(--t,var(--amber)) 10%,#fff)}
@media (max-width:600px){.tl-item{grid-template-columns:40px minmax(0,1fr);gap:14px}
.tl-item p{font-size:.96rem}
}
.duo-fill{background:linear-gradient(90deg,var(--tone-amber),var(--tone-blue),var(--tone-violet),var(--tone-green),var(--tone-rose),var(--tone-teal));background-size:calc(100% * 100 / max(var(--pn,100),1)) 100%}
.duo-node[data-s="done"] .duo-n{background:var(--t,var(--navy));border-color:var(--t,var(--navy))}
.duo-node[aria-pressed="true"] .duo-n{background:var(--t,var(--amber));border-color:var(--t,var(--amber));box-shadow:0 0 0 6px color-mix(in srgb,var(--t,var(--amber)) 16%,transparent)}
.duo.is-autoplay .duo-node[data-auto-on]::after{border-color:var(--t,var(--amber));left:calc(50% - 23px);right:auto;top:-5px;bottom:auto;width:46px;height:46px}
.duo-big{color:var(--t,var(--amber-deep))}
.duo-jij{background:color-mix(in srgb,var(--t,var(--amber)) 7%,#fff);border-color:color-mix(in srgb,var(--t,var(--amber)) 24%,#fff)}
.duo-jij .duo-who i{background:var(--t,var(--amber))}
.duo-link::before{border-top-color:color-mix(in srgb,var(--t,var(--amber)) 35%,#fff)}
.duo-link::after{color:var(--t,var(--amber-deep))}
.duo-card ul{list-style:none;display:grid;gap:8px}
.duo-card li{position:relative;padding-left:18px;line-height:1.5}
.duo-card li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--t,var(--amber))}
.duo-wij li::before{background:var(--amber-glow)}
.exc-token{left:calc((var(--at) + .5) * (100% + 10px) / 4 - 12px);transition:left .6s var(--ease-out),top .6s var(--ease-out),opacity .3s ease .35s}
.exc[data-state="ok"] .exc-token,.exc[data-state="fixed"] .exc-token{opacity:0}
@media (max-width:700px){.exc-token{left:5px}
}
.calc{--calc:var(--tone-blue);--calc-soft:#7FB0FF}
.calc .range::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--calc-soft),var(--calc)) 0 / var(--p) 100% no-repeat,var(--sand-deep)}
.calc .range::-moz-range-progress{background:linear-gradient(90deg,var(--calc-soft),var(--calc))}
.calc .range::-webkit-slider-thumb{background:var(--calc);border-color:#fff;box-shadow:0 0 0 1px var(--calc),0 6px 14px -4px rgba(37,99,201,.75)}
.calc .range::-moz-range-thumb{background:var(--calc);border-color:#fff;box-shadow:0 0 0 1px var(--calc),0 6px 14px -4px rgba(37,99,201,.75)}
.calc .range:hover::-webkit-slider-thumb{box-shadow:0 0 0 8px rgba(37,99,201,.2),0 6px 14px -4px rgba(37,99,201,.75)}
.calc .range:hover::-moz-range-thumb{box-shadow:0 0 0 8px rgba(37,99,201,.2),0 6px 14px -4px rgba(37,99,201,.75)}
.calc .range:active::-webkit-slider-thumb{box-shadow:0 0 0 11px rgba(37,99,201,.24),0 6px 14px -4px rgba(37,99,201,.75)}
.calc .calc-field output{color:var(--calc);border-color:color-mix(in srgb,var(--calc) 30%,#fff);background:color-mix(in srgb,var(--calc) 8%,#fff)}
.calc .calc-field:hover output,.calc .calc-field:focus-within output,.calc .calc-field.is-hint output{background:var(--calc);border-color:var(--calc);color:#fff}
.calc .calc-field.is-hint .range::-webkit-slider-thumb{border-color:#fff;box-shadow:0 0 0 9px rgba(37,99,201,.26),0 6px 14px -4px rgba(37,99,201,.75)}
.calc .calc-pair .v{color:var(--calc-soft)}
.calc .calc-bar .gone{background:linear-gradient(90deg,var(--calc),var(--calc-soft))}
.calc .calc-bar .legend i{background:var(--calc-soft)}
.calc .calc-result::after{background:radial-gradient(circle,rgba(127,176,255,.2),transparent 65%)}
.bubble:nth-of-type(4n+1) .bubble-inner{background:var(--tone-amber)}
.bubble:nth-of-type(4n+2) .bubble-inner{background:var(--tone-blue)}
.bubble:nth-of-type(4n+3) .bubble-inner{background:var(--tone-violet)}
.bubble:nth-of-type(4n+4) .bubble-inner{background:var(--tone-green)}
.bubble-inner{color:#fff;font-weight:600;box-shadow:0 1.6cqw 3.4cqw -1.6cqw rgba(20,31,63,.55);animation:bubble-pop .7s var(--ease-out) both,bubble-float 5.5s ease-in-out 1s infinite}
.bubble:nth-of-type(4n+2) .bubble-inner{animation-delay:.12s,1.6s}
.bubble:nth-of-type(4n+3) .bubble-inner{animation-delay:.24s,2.2s}
.bubble:nth-of-type(4n+4) .bubble-inner{animation-delay:.36s,2.8s}
@keyframes bubble-pop{from{opacity:0;scale:.6}
60%{scale:1.06}
to{opacity:1;scale:1}
}
@keyframes bubble-float{50%{translate:0 -1.4cqw}
}
.scene-wrap{position:relative}
.scene-wrap::before{content:"";position:absolute;inset:4% 2%;border-radius:50%;pointer-events:none;opacity:.5;filter:blur(46px);background:radial-gradient(circle at 24% 28%,color-mix(in srgb,var(--tone-amber) 34%,transparent),transparent 42%),radial-gradient(circle at 76% 24%,color-mix(in srgb,var(--tone-blue) 30%,transparent),transparent 42%),radial-gradient(circle at 72% 74%,color-mix(in srgb,var(--tone-violet) 28%,transparent),transparent 42%),radial-gradient(circle at 28% 78%,color-mix(in srgb,var(--tone-green) 28%,transparent),transparent 42%);animation:scene-glow 14s ease-in-out infinite alternate}
@keyframes scene-glow{to{transform:rotate(18deg) scale(1.06)}
}
.story-steps li:nth-child(1){--t:var(--tone-amber)}
.story-steps li:nth-child(2){--t:var(--tone-blue)}
.story-steps li:nth-child(3){--t:var(--tone-violet)}
.story-steps li:nth-child(4){--t:var(--tone-green)}
.story-steps li.on{border-color:var(--t,var(--amber));color:var(--t,var(--ink));font-weight:500}
@media (prefers-reduced-motion:reduce){.bubble-inner,.scene-wrap::before{animation:none}
}
.awb{display:grid;grid-template-columns:minmax(0,1fr) clamp(190px,22vw,260px);gap:0;align-items:stretch}
.awb-cards{list-style:none;display:grid;gap:10px}
.awb-card{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:14px;align-items:center;background:var(--band-2);border:1px solid var(--band-line);border-radius:16px;padding:12px 16px;margin-right:44px;transition:border-color .4s ease,background-color .4s ease}
.awb-card::after{content:"";position:absolute;left:100%;top:50%;width:44px;height:2px;background:repeating-linear-gradient(90deg,#C2410C 0 5px,transparent 5px 11px);opacity:.7}
.awb-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.07);color:var(--amber-glow)}
.awb-ic svg{width:20px;height:20px}
.awb-q{color:var(--band-ink);font-weight:500;line-height:1.35}
.awb-q b{display:block;font:600 var(--fs-micro)/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--band-ink-2)}
.awb-a>span{display:inline-flex;align-items:center;gap:8px;border-radius:99px;padding:7px 14px 7px 8px;font-size:.88rem;font-weight:500;white-space:nowrap}
.awb-a i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center}
.awb-a i svg{width:12px;height:12px}
.awb-a .awb-los{background:rgba(194,65,12,.16);color:#FFB48F}
.awb-a .awb-los i{background:#C2410C;color:#fff;animation:awb-wait 1.6s ease-in-out infinite}
.awb-a .awb-on{background:rgba(46,139,87,.2);color:#9FE0BB}
.awb-a .awb-on i{background:var(--good);color:#fff}
@keyframes awb-wait{50%{opacity:.45}
}
.away[data-mode="los"] .awb-on,.away[data-mode="portaal"] .awb-los{display:none}
.away[data-mode="portaal"] .awb-card{border-color:rgba(46,139,87,.45)}
.away[data-mode="portaal"] .awb-card::after{background:repeating-linear-gradient(90deg,#4CC38A 0 5px,transparent 5px 11px);opacity:1;animation:awb-flow .7s linear infinite;animation-delay:calc(var(--i) * .08s)}
@keyframes awb-flow{to{background-position:-11px 0}
}
.away[data-mode="portaal"] .awb-a .awb-on{animation:deck-in .45s var(--ease-out) both;animation-delay:calc(var(--i) * .12s)}
.awb-hub{position:relative;display:grid;align-items:center;padding-left:26px}
.awb-bus{position:absolute;left:0;top:30px;bottom:30px;width:2px;background:#C2410C;opacity:.6;transition:background-color .4s ease}
.awb-bus::after{content:"";position:absolute;left:0;top:50%;width:26px;height:2px;background:inherit}
.away[data-mode="portaal"] .awb-bus{background:#4CC38A;opacity:1}
.awb-node{border-radius:22px;padding:22px 18px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.awb-node-ic{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;margin-bottom:8px}
.awb-node-ic svg{width:26px;height:26px}
.awb-node b{font-weight:600;font-size:1.08rem}
.awb-node small{font-size:.88rem}
.awb-node em{font-style:normal;margin-top:10px;font:600 var(--fs-micro)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:7px 12px;border-radius:99px}
.awb-node.awb-los{background:var(--band-2);border:1px dashed #8A4A2E;color:var(--band-ink-2)}
.awb-node.awb-los .awb-node-ic{background:rgba(255,255,255,.06);color:var(--band-ink-2)}
.awb-node.awb-los b{color:var(--band-ink);text-decoration:line-through;text-decoration-color:#C2410C}
.awb-node.awb-los em{background:rgba(194,65,12,.18);color:#FFB48F}
.awb-node.awb-on{background:#fff;color:var(--ink-2);box-shadow:0 0 0 6px rgba(76,195,138,.25),0 30px 50px -30px #000;animation:vs-pop .55s var(--ease-out) both}
.awb-node.awb-on .awb-node-ic{background:var(--good);color:#fff}
.awb-node.awb-on b{color:var(--ink)}
.awb-node.awb-on em{background:#E7F4EC;color:var(--good)}
.awb-foot{margin-top:18px}
@media (max-width:860px){.awb{grid-template-columns:minmax(0,1fr);gap:18px}
.awb-card{margin-right:0;grid-template-columns:38px minmax(0,1fr)}
.awb-card::after,.awb-bus{display:none}
.awb-a{grid-column:1 / -1}
.awb-a>span{white-space:normal}
.awb-hub{padding-left:0;order:-1}
.awb-node{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;text-align:left;gap:4px 12px;padding:14px 16px}
.awb-node-ic{width:42px;height:42px;margin:0}
.awb-node em{margin:0 0 0 auto}
}
@media (prefers-reduced-motion:reduce){.awb-a i,.awb-card::after{animation:none !important}
}
.blog-filter{display:flex;flex-wrap:wrap;gap:8px}
.blog-filter:empty{display:none}
.blog-filter .opt{border:1px solid var(--line);background:var(--panel);border-radius:99px;padding:8px 16px;font-size:.9rem;cursor:pointer;color:var(--ink-2);transition:background .2s ease,color .2s ease,border-color .2s ease}
.blog-filter .opt:hover{border-color:var(--ink-2);color:var(--ink)}
.blog-filter .opt[aria-pressed="true"]{background:var(--band);border-color:var(--band);color:#fff}
.blog-grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,30px)}
.blog-item{display:flex;min-width:0}
.blog-item[hidden=""]{display:none}
.blog-card{--t:var(--tone-blue);display:flex;flex-direction:column;flex:1;min-width:0;background:var(--panel);border:1px solid var(--line-soft);border-radius:22px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:var(--shadow-soft);transition:transform .35s var(--ease-out),box-shadow .35s ease,border-color .35s ease}
.blog-item:nth-child(4n+1) .blog-card{--t:var(--tone-amber)}
.blog-item:nth-child(4n+3) .blog-card{--t:var(--tone-violet)}
.blog-item:nth-child(4n+4) .blog-card{--t:var(--tone-green)}
.blog-card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--t) 40%,var(--line));box-shadow:0 30px 50px -34px color-mix(in srgb,var(--t) 70%,#141F3F)}
.blog-card-cover{position:relative;aspect-ratio:16 / 8;overflow:hidden;display:block;background:radial-gradient(circle at 82% 18%,color-mix(in srgb,var(--t) 55%,transparent),transparent 46%),radial-gradient(circle at 12% 96%,rgba(227,160,75,.34),transparent 52%),var(--band)}
.blog-card-cover::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 44px),repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 44px)}
.blog-card-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.blog-card-cover img[src=""],.blog-card-cover img:not([src]){display:none}
.blog-card:hover .blog-card-cover img{transform:scale(1.04)}
.blog-card-mark{position:absolute;left:22px;bottom:20px;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.12);color:#fff;backdrop-filter:blur(4px);transition:transform .4s var(--ease-out)}
.blog-card:hover .blog-card-mark{transform:translateY(-4px) rotate(-4deg)}
.blog-card-mark svg{width:24px;height:24px}
.blog-card-cover img:not([src=""]) + .blog-card-mark{display:none}
.blog-card-body{display:flex;flex-direction:column;gap:12px;padding:clamp(20px,2.4vw,28px);flex:1}
.blog-card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:.8rem;color:var(--ink-3)}
.blog-card-cat span{display:inline-block;font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:.7rem;color:var(--t);background:color-mix(in srgb,var(--t) 10%,#fff);border-radius:99px;padding:5px 11px}
.blog-card-cat span:empty{display:none}
.blog-card-title{font:600 clamp(1.15rem,1.05rem + .4vw,1.4rem)/1.3 var(--sans);letter-spacing:-.014em;color:var(--ink);transition:color .2s ease}
.blog-card:hover .blog-card-title{color:var(--t)}
.blog-card-text{color:var(--ink-2);font-size:.96rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-card .textlink{margin-top:auto;padding-top:6px}
@media (min-width:861px){.blog-grid:not(.blog-grid--more)>.blog-item:first-child{grid-column:1 / -1}
.blog-grid:not(.blog-grid--more)>.blog-item:first-child .blog-card{flex-direction:row}
.blog-grid:not(.blog-grid--more)>.blog-item:first-child .blog-card-cover{flex:0 0 46%;aspect-ratio:auto;min-height:320px}
.blog-grid:not(.blog-grid--more)>.blog-item:first-child .blog-card-body{justify-content:center;padding:clamp(28px,4vw,56px);gap:16px}
.blog-grid:not(.blog-grid--more)>.blog-item:first-child .blog-card-title{font:700 clamp(1.7rem,1.3rem + 1.4vw,2.5rem)/1.16 var(--display);letter-spacing:-.02em}
.blog-grid:not(.blog-grid--more)>.blog-item:first-child .blog-card-text{font-size:1.05rem;-webkit-line-clamp:4}
.blog-grid:not(.blog-grid--more)>.blog-item:first-child .textlink{margin-top:6px}
}
@media (max-width:860px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){.blog-grid{grid-template-columns:minmax(0,1fr)}
}
.blog-grid--more .blog-item.is-current{display:none}
.post-more:has(.blog-grid--more:not(:has(.blog-item:not(.is-current)))){display:none}
.post-progress{position:fixed;left:0;right:0;top:var(--header-h);height:3px;z-index:40;pointer-events:none}
.post-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--tone-amber),var(--tone-blue),var(--tone-violet),var(--tone-green));transform-origin:left;transform:scaleX(0)}
.post-hero .wrap{max-width:1040px}
.post-hero .post-title{font-size:clamp(2.1rem,1.4rem + 2.8vw,3.5rem);line-height:1.1}
.post-hero .crumbs span:last-child{color:var(--amber-deep);font-weight:600}
.post-hero .crumbs span:last-child:empty,.post-hero .crumbs span:has(+ span:last-child:empty){display:none}
.post-meta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:.88rem;color:var(--ink-3)}
.post-meta>span + span::before{content:"·";margin-right:10px}
.post-meta .post-read:empty{display:none}
.post-by{color:var(--ink);font-weight:500}
.post-layout{display:grid;grid-template-columns:minmax(200px,270px) minmax(0,720px);gap:clamp(30px,5vw,80px);justify-content:center;align-items:start}
.post-aside{position:sticky;top:calc(var(--header-h) + 30px);display:flex;flex-direction:column;gap:26px}
.post-toc[hidden=""]{display:none}
.post-toc-list{list-style:none;display:flex;flex-direction:column;gap:2px;margin-top:14px;border-left:2px solid var(--line-soft)}
.post-toc-list a{display:block;padding:6px 0 6px 14px;margin-left:-2px;border-left:2px solid transparent;font-size:.9rem;line-height:1.35;color:var(--ink-3);text-decoration:none;transition:color .2s ease,border-color .2s ease}
.post-toc-list a:hover{color:var(--ink)}
.post-toc-list a.is-on{color:var(--ink);border-left-color:var(--amber);font-weight:500}
.post-aside-cta{background:var(--band);color:var(--band-ink-2);border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:10px;font-size:.92rem;box-shadow:var(--shadow-lift)}
.post-aside-cta strong{color:var(--band-ink);font-weight:600;font-size:1.05rem}
.post-aside-cta .btn{align-self:flex-start;margin-top:6px;background:var(--amber-glow);color:var(--band);padding:11px 18px;font-size:.92rem}
@media (max-width:960px){.post-layout{grid-template-columns:minmax(0,1fr)}
.post-aside{position:static}
.post-aside-cta{display:none}
.post-toc{background:var(--panel);border:1px solid var(--line-soft);border-radius:18px;padding:18px 20px}
}
.post-main{min-width:0;display:flex;flex-direction:column;gap:34px}
.post-body{max-width:none;font-size:1.06rem;line-height:1.75;gap:1.15em}
.post-body>.wp-block-post-content,.post-body .entry-content{display:flex;flex-direction:column;gap:1.15em}
.post-body h2{font-size:clamp(1.5rem,1.3rem + .9vw,2.05rem);line-height:1.2;margin-top:1.1em;scroll-margin-top:calc(var(--header-h) + 24px)}
.post-body h3{font-size:1.2rem;margin-top:.7em;color:var(--ink)}
.post-body p,.post-body li{color:var(--ink-2)}
.post-body strong{color:var(--ink);font-weight:600}
.post-body a{color:var(--ink);text-decoration-color:var(--amber);text-decoration-thickness:2px}
.post-body a:hover{color:var(--amber-deep)}
.post-body ul,.post-body ol{padding-left:1.3em;display:flex;flex-direction:column;gap:.5em}
.post-body li::marker{color:var(--amber);font-weight:600}
.post-body figure{margin:.6em 0}
.post-body .wp-block-table{overflow-x:auto;border:1px solid var(--line-soft);border-radius:18px;background:var(--panel);box-shadow:var(--shadow-soft)}
.post-body table{width:100%;border-collapse:collapse;font-size:.95rem;line-height:1.5;min-width:560px}
.post-body th,.post-body td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.post-body thead th{font:600 var(--fs-micro)/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);background:var(--paper);border-bottom:1px solid var(--line)}
.post-body tbody tr:last-child td{border-bottom:0}
.post-body tbody td:first-child{font-weight:600;color:var(--ink);white-space:nowrap}
.post-body tbody td:last-child{background:color-mix(in srgb,var(--tone-green) 6%,#fff);color:var(--ink)}
.post-body thead th:last-child{color:var(--tone-green);background:color-mix(in srgb,var(--tone-green) 10%,#fff)}
.post-summary{background:var(--amber-mist);border:1px solid var(--amber-soft);border-left:4px solid var(--amber);border-radius:18px;padding:clamp(20px,2.6vw,30px);display:flex;flex-direction:column;gap:.8em}
.post-summary p,.post-summary li{color:var(--ink)}
.post-cta{background:var(--band);border-radius:22px;padding:clamp(22px,3vw,36px);display:flex;flex-direction:column;gap:12px;align-items:flex-start;margin-block:.8em;position:relative;overflow:hidden}
.post-cta::after{content:"";position:absolute;right:-14%;top:-60%;width:55%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(227,160,75,.25),transparent 62%);pointer-events:none}
.post-body .post-cta strong{color:var(--band-ink);font:700 clamp(1.3rem,1.15rem + .7vw,1.7rem)/1.25 var(--display);letter-spacing:-.015em}
.post-body .post-cta p{color:var(--band-ink-2);max-width:52ch}
.post-body .post-cta a.btn{text-decoration:none;color:var(--band);background:var(--amber-glow);position:relative;z-index:1}
.post-body details{border:1px solid var(--line-soft);border-radius:16px;background:var(--panel);padding:0 20px;transition:border-color .2s ease,box-shadow .2s ease}
.post-body details[open]{border-color:var(--amber-soft);box-shadow:var(--shadow-soft)}
.post-body details + details{margin-top:-.5em}
.post-body summary{cursor:pointer;list-style:none;padding:16px 0;font-weight:600;color:var(--ink);display:flex;justify-content:space-between;gap:16px;align-items:center}
.post-body summary::-webkit-details-marker{display:none}
.post-body summary::after{content:"+";font-weight:300;font-size:1.5rem;line-height:1;color:var(--amber-deep);transition:transform .3s var(--ease-out);flex:none}
.post-body details[open] summary::after{transform:rotate(45deg)}
.post-body details>p{padding-bottom:18px}
.post-share{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-top:24px;border-top:1px solid var(--line-soft);font-size:.9rem;color:var(--ink-3)}
.post-share a{border:1px solid var(--line);border-radius:99px;padding:8px 16px;text-decoration:none;color:var(--ink);background:var(--panel);transition:border-color .2s ease,background .2s ease}
.post-share a:hover{border-color:var(--ink)}
.legal{max-width:74ch}
.legal h2{font-family:var(--sans);font-weight:600;font-size:1.25rem;letter-spacing:-.012em;margin-top:1.4em;padding-top:1.1em;border-top:1px solid var(--line-soft)}
.legal h2:first-child{margin-top:0;padding-top:0;border-top:0}
.footer-grid li{color:var(--band-ink);font-size:.96rem;line-height:1.5}
.footer-base p + p{display:flex;flex-wrap:wrap;gap:8px 22px}
.hero-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.hero-tags li{font-size:.84rem;font-weight:500;padding:7px 14px;border-radius:99px;color:var(--t);background:color-mix(in srgb,var(--t) 9%,#fff);border:1px solid color-mix(in srgb,var(--t) 22%,#fff);animation:bubble-pop .6s var(--ease-out) both}
.hero-tags li:nth-child(2){animation-delay:.08s}
.hero-tags li:nth-child(3){animation-delay:.16s}
.hero-tags li:nth-child(4){animation-delay:.24s}
.hero-tags li:nth-child(5){animation-delay:.32s}
.hero-tags li::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--t);margin-right:9px;transform:translateY(-1px)}
.cases-hero,.about-hero,.blog-hero{background:radial-gradient(circle at 92% 0%,color-mix(in srgb,var(--tone-blue) 9%,transparent),transparent 42%),radial-gradient(circle at 70% 110%,color-mix(in srgb,var(--tone-amber) 12%,transparent),transparent 46%)}
.flow-state{display:flex;align-items:center;gap:12px;margin-bottom:22px;font-weight:500}
.flow-state b{display:inline-flex;align-items:center;gap:9px;font:600 var(--fs-micro)/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;padding:9px 14px;border-radius:99px}
.flow-state b::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.flow-state span{color:var(--band-ink-2);font-size:.95rem}
.flow-state .is-old b{background:rgba(194,65,12,.18);color:#FFB48F}
.flow-state .is-new b{background:rgba(46,139,87,.22);color:#9FE0BB}
.flow-state>div{display:flex;align-items:center;gap:12px;flex-wrap:wrap;animation:deck-in .45s var(--ease-out) both}
.flow[data-mode="manual"] .flow-state .is-new,.flow[data-mode="auto"] .flow-state .is-old{display:none}
.flow[data-mode="manual"] .act.manual svg{color:#FF9D73}
.flow[data-mode="auto"] .act.auto svg{color:#7FD8A8}
.gform_wrapper .gfield.gfield--type-radio .gfield_radio{display:flex;flex-wrap:wrap;gap:8px}
.gform_wrapper .gfield.gfield--type-radio .gchoice{position:relative;margin:0}
.gform_wrapper .gfield.gfield--type-radio .gchoice input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.gform_wrapper .gfield.gfield--type-radio .gchoice label{display:inline-flex;align-items:center;margin:0;padding:9px 16px;border-radius:99px;border:1px solid var(--line);background:var(--paper);font-size:.92rem;color:var(--ink-2);cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease;max-width:none}
.gform_wrapper .gfield.gfield--type-radio .gchoice:hover label{border-color:var(--ink-2);color:var(--ink)}
.gform_wrapper .gfield.gfield--type-radio .gchoice input:checked + label{background:var(--band);border-color:var(--band);color:#fff;box-shadow:0 10px 20px -14px rgba(20,31,63,.9)}
.gform_wrapper .gfield.gfield--type-radio .gchoice input:focus-visible + label{outline:2px solid var(--amber);outline-offset:2px}
.tone-1{--t:var(--tone-amber)}
.tone-2{--t:var(--tone-blue)}
.tone-3{--t:var(--tone-violet)}
.tone-4{--t:var(--tone-green)}
.tone-5{--t:var(--tone-rose)}
.tone-6{--t:var(--tone-teal)}
/* ===== FEEDBACK 4 ===== Userback round 4, 6 Oct 2026 */
:root { --alert: #E5484D; --alert-deep: #C6353A; --alert-mid: #EE8689; --alert-soft: #F7C6C8; --alert-mist: #FDECEC; }

/* 8491243: in the dark result panel the automatic share and the figures are gold again; the sliders stay blue */
.calc .calc-pair .v { color: var(--amber-glow); }
.calc .calc-bar .gone { background: linear-gradient(90deg, var(--amber), var(--amber-glow)); box-shadow: 0 0 18px -2px rgba(227,160,75,.6); }
.calc .calc-bar .legend i { background: var(--amber-glow); }
.calc .calc-bar .legend span:first-child b { color: var(--amber-glow); font-weight: 600; }
.calc .calc-result::after { background: radial-gradient(circle, rgba(227,160,75,.22), transparent 65%); }

/* 8491489: in the scan a recognisable statement is a problem, so it reads red; gold stays for the way out */
.q > p:first-child::before { background: var(--paper); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.seg button[data-v='2']:hover, .seg button[data-v='1']:hover { background: var(--alert-mist); color: var(--alert-deep); }
.seg button[data-v='2'][aria-pressed='true'] { background: var(--alert); color: #fff; box-shadow: 0 6px 14px -8px var(--alert-deep); }
.seg button[data-v='1'][aria-pressed='true'] { background: var(--alert-soft); color: var(--alert-deep); box-shadow: none; }
.q:has([data-v='2'][aria-pressed='true']) { background: var(--alert-mist); border-left-color: var(--alert); }
.q:has([data-v='1'][aria-pressed='true']) { background: color-mix(in srgb, var(--alert) 4%, #fff); border-left-color: var(--alert-mid); }
.q:has([data-v='2'][aria-pressed='true']) > p:first-child::before { background: var(--alert); color: #fff; box-shadow: none; }
.q:has([data-v='1'][aria-pressed='true']) > p:first-child::before { background: var(--alert-soft); color: var(--alert-deep); box-shadow: none; }
.score::before { background: linear-gradient(90deg, var(--tone-green), var(--alert-soft), var(--alert)); }
.gauge .g-bg { stroke: var(--sand-deep); }
.gauge .pct { color: var(--ink); transition: color .4s; }
.scan[data-level='high'] .gauge .pct, .scan[data-level='high'] .gauge .lvl { color: var(--alert-deep); }
.scan[data-level='mid'] .gauge .pct { color: var(--alert); }
.scan[data-level='low'] .gauge .pct { color: var(--tone-green); }
.scan-key { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .82rem; color: var(--ink-2); }
.scan-key span { display: inline-flex; align-items: center; gap: 7px; }
.scan-key i { width: 10px; height: 10px; border-radius: 50%; background: var(--tone-green); }
.scan-key span:nth-child(1) i { background: var(--alert); }
.scan-key span:nth-child(2) i { background: var(--alert-soft); box-shadow: inset 0 0 0 1px var(--alert-mid); }

/* 8492265: the yearly amount and the working weeks in the result panel read red */
.calc .calc-pair .v { color: var(--alert); }

/* 8492265: the value labels of the sliders have a gold background */
.calc .calc-field output { background: var(--amber-glow); border-color: var(--amber-glow); color: var(--navy); }
.calc .calc-field:hover output, .calc .calc-field:focus-within output, .calc .calc-field.is-hint output { background: var(--amber); border-color: var(--amber); color: #fff; }

/* wordmark: Table in the sans, Automate in the italic serif, so the two words set each other off */
.brand-name { font-family: var(--sans); font-weight: 700; letter-spacing: -.035em; }
.brand-name em { font-family: var(--display); font-style: italic; font-weight: 700; letter-spacing: -.02em; margin-left: .04em; }

/* the dark blue of the brand is #00092D (owner, 6 Oct): text, buttons, dark sections and the logo mark */
:root { --ink: #00092D; --navy: #00092D; --navy-hover: #101D52; --band: #00092D; --band-2: #08133F; --band-line: #1C2858; }
svg [fill='#1b2a55' i] { fill: var(--navy); }
svg [stroke='#1b2a55' i] { stroke: var(--navy); }
/* wordmark: Table in the sans, Automate keeps the upright serif */
.brand-name { font-family: var(--sans); font-weight: 700; letter-spacing: -.035em; }
.brand-name em { font-family: var(--display); font-style: normal; font-weight: 700; letter-spacing: -.03em; margin-left: 0; }

/* ===== AI PAGE ===== AI-bedrijfsautomatiseringen, 20 Oct 2026: page /ai-automatiseringen/, home teaser, link card on Automatiseringen */

/* hero: loose files fly into one overview */
.ai-hero { overflow: clip; }
.ai-hero::before { content: ''; position: absolute; right: -14%; top: -30%; width: 60%; aspect-ratio: 1; pointer-events: none; background: radial-gradient(circle, rgba(227,160,75,.2), transparent 62%); }
.ai-hero::after { content: ''; position: absolute; left: -16%; bottom: -34%; width: 46%; aspect-ratio: 1; pointer-events: none; background: radial-gradient(circle, rgba(37,99,201,.1), transparent 62%); }
.ai-hero .wrap.ai-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.ai-hero-copy { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.ai-hero .h1-page { font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.5rem); line-height: 1.04; }
.ai-ticks { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.ai-ticks li { display: inline-flex; align-items: center; gap: 9px; font-size: .95rem; color: var(--ink-2); }
.ai-ticks i { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--good); color: #fff; }
.ai-ticks i svg { width: 13px; height: 13px; }
.ai-vis { position: relative; padding-top: 150px; }
.ai-chip { position: absolute; left: var(--x); top: var(--y); z-index: 2; display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px 9px 9px; background: var(--panel); border: 1px solid var(--line-soft); border-radius: 14px; box-shadow: var(--shadow-lift); rotate: var(--r, 0deg); white-space: nowrap; animation: ai-fly 8s var(--ease-out) infinite both; animation-delay: calc(var(--i) * .25s); }
.ai-chip i { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--t) 13%, #fff); color: var(--t); }
.ai-chip i svg { width: 18px; height: 18px; }
.ai-chip b { display: block; font-size: .88rem; font-weight: 600; color: var(--ink); line-height: 1.2; }
.ai-chip small { display: block; font-size: .74rem; color: var(--ink-3); }
@keyframes ai-fly {
0% { opacity: 0; transform: translateY(-10px); left: var(--x); top: var(--y); }
6%, 26% { opacity: 1; transform: none; left: var(--x); top: var(--y); rotate: var(--r, 0deg); }
38% { opacity: 0; transform: scale(.5); left: 34%; top: 52%; rotate: 0deg; }
100% { opacity: 0; transform: scale(.5); left: 34%; top: 52%; rotate: 0deg; }
}
@keyframes ai-drop {
0% { opacity: 0; transform: translateY(-10px); }
6%, 26% { opacity: 1; transform: none; }
38%, 100% { opacity: 0; transform: translateY(70px) scale(.6); }
}
.ai-card { position: relative; margin-left: 6%; z-index: 1; background: var(--panel); border: 1px solid var(--line-soft); border-radius: 22px; box-shadow: var(--shadow-lift); padding: 18px 18px 14px; }
.ai-card-top, .ai-dash-top, .ai-mini-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ai-card-top b, .ai-dash-top b, .ai-mini-top b { font: 600 1.02rem/1.2 var(--sans); color: var(--ink); }
.ai-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--amber-mist); color: var(--amber-deep); font-size: .78rem; font-weight: 600; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--amber-soft); }
.ai-pill i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--amber-soft); border-top-color: var(--amber); animation: spin 1s linear infinite; }
.ai-card-rows { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.ai-card-rows li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--paper); animation: ai-row 8s var(--ease-out) infinite both; animation-delay: calc(var(--i) * .25s); }
.ai-card-rows i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--good); color: #fff; }
.ai-card-rows i svg { width: 15px; height: 15px; }
.ai-card-rows li.is-wait i { background: var(--amber-glow); color: var(--navy); }
.ai-card-rows b { display: block; font-size: .9rem; font-weight: 600; color: var(--ink); line-height: 1.25; }
.ai-card-rows small { display: block; font-size: .76rem; color: var(--ink-3); }
.ai-card-rows em { font-style: normal; font-size: .74rem; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--good) 12%, #fff); color: var(--good); }
.ai-card-rows li.is-wait em { background: var(--amber-mist); color: var(--amber-deep); }
.ai-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: .8rem; color: var(--ink-2); }
.ai-card-foot span { display: inline-grid; color: var(--amber-deep); }
.ai-card-foot svg { width: 16px; height: 16px; }
@keyframes ai-row {
0%, 36% { opacity: .3; transform: translateY(6px); }
44%, 94% { opacity: 1; transform: none; }
100% { opacity: .3; transform: none; }
}

/* one overview, fed by the best AI: a deck whose tabs are the models */
.deck--ai { gap: 20px; }
.ai-map { position: relative; display: grid; grid-template-columns: minmax(0, 230px) minmax(0, 1fr); gap: clamp(56px, 8vw, 120px); align-items: center; }
.deck--ai .deck-tabs, .deck--ai:not(.is-live) .deck-tabs { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 14px; }
.deck--ai .ai-src { padding: 14px 16px; border-radius: 16px; background: var(--band-2); border: 1px solid var(--band-line); color: var(--band-ink); gap: 14px; transition: background .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease, transform .3s var(--ease-out); }
.deck--ai .ai-src:hover { border-color: color-mix(in srgb, var(--t) 70%, #fff); color: #fff; }
.deck--ai .ai-src[aria-pressed="true"] { background: var(--panel); border-color: var(--panel); color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--t) 45%, transparent), 0 22px 40px -22px rgba(0,0,0,.8); transform: translateX(6px); }
.deck--ai .ai-src b { font-size: 1.05rem; }
.deck--ai .ai-src small { color: var(--band-ink-2); opacity: 1; }
.deck--ai .ai-src[aria-pressed="true"] small { color: var(--ink-3); }
.ai-dot { width: 14px; height: 14px; flex: none; border-radius: 50%; background: var(--t); box-shadow: 0 0 0 4px color-mix(in srgb, var(--t) 28%, transparent); }
.ai-src[aria-pressed="true"] .ai-dot { animation: ai-beat 1.6s ease-in-out infinite; }
@keyframes ai-beat { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--t) 18%, transparent); } }
.ai-wires { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.ai-wire { fill: none; stroke: color-mix(in srgb, var(--band-ink-2) 45%, transparent); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1.5 7; animation: ai-flow 1.4s linear infinite; transition: stroke .35s ease, stroke-width .35s ease; }
.ai-wire.is-on { stroke: color-mix(in srgb, var(--t) 55%, #fff); stroke-width: 2.4; animation-duration: .7s; }
@keyframes ai-flow { to { stroke-dashoffset: -17; } }
.ai-pulse { fill: #fff; stroke: color-mix(in srgb, var(--t) 60%, #fff); stroke-width: 3; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--t) 70%, #fff)); }
.ai-dash { position: relative; z-index: 2; min-width: 0; background: var(--panel); color: var(--ink); border-radius: 24px; padding: clamp(18px, 2.4vw, 28px); box-shadow: 0 40px 80px -40px rgba(0,0,0,.75); }
.band .ai-dash p { color: var(--ink-3); }
.ai-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, auto)) minmax(110px, 1fr); gap: 14px clamp(18px, 3vw, 36px); align-items: end; margin-top: 18px; padding-bottom: 18px; }
.ai-kpi small { display: block; font-size: .76rem; color: var(--ink-3); }
.ai-kpi b { display: inline-block; margin-top: 2px; font: 600 clamp(1.7rem, 1.3rem + 1.2vw, 2.3rem)/1 var(--sans); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ai-kpi span { margin-left: 6px; font-size: .8rem; color: var(--ink-3); }
.ai-spark { width: 100%; height: 46px; display: block; }
.ai-spark-line { fill: none; stroke: var(--amber); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ai-spark-fill { fill: color-mix(in srgb, var(--amber-glow) 18%, transparent); }
.js .deck--ai .ai-spark-line { stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 1.6s var(--ease-out) .3s; }
.js .deck--ai.is-in .ai-spark-line { stroke-dashoffset: 0; }
.ai-table { display: flex; flex-direction: column; }
.ai-tr { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .8fr) minmax(0, 1.2fr); gap: 12px; align-items: center; padding: 11px 12px; border-top: 1px solid var(--line-soft); border-radius: 12px; transition: opacity .35s ease, background-color .35s ease, box-shadow .35s ease; }
.ai-th { font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); border-top: 0; padding-block: 6px 8px; }
.ai-in { display: flex; align-items: center; gap: 11px; min-width: 0; }
.ai-in i { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--paper); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-soft); }
.ai-in i svg { width: 17px; height: 17px; }
.ai-tr b { display: block; font-size: .9rem; font-weight: 600; color: var(--ink); line-height: 1.25; }
.ai-tr small { display: block; font-size: .76rem; color: var(--ink-3); }
.ai-tag { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px; border-radius: 999px; font-style: normal; font-size: .8rem; font-weight: 600; background: color-mix(in srgb, var(--t) 11%, #fff); color: color-mix(in srgb, var(--t) 80%, #000); white-space: nowrap; }
.ai-tag::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--t); }
.deck--ai.is-live[data-at="0"] .ai-row:not([data-m="0"]), .deck--ai.is-live[data-at="1"] .ai-row:not([data-m="1"]), .deck--ai.is-live[data-at="2"] .ai-row:not([data-m="2"]), .deck--ai.is-live[data-at="3"] .ai-row:not([data-m="3"]) { opacity: .42; }
.deck--ai[data-at="0"] .ai-row[data-m="0"], .deck--ai[data-at="1"] .ai-row[data-m="1"], .deck--ai[data-at="2"] .ai-row[data-m="2"], .deck--ai[data-at="3"] .ai-row[data-m="3"] { background: color-mix(in srgb, var(--t) 7%, #fff); box-shadow: inset 3px 0 0 var(--t); border-top-color: transparent; }
.ai-row.is-scan::after { content: ''; position: absolute; inset: 0; border-radius: 12px; pointer-events: none; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--t) 22%, transparent), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: ai-scan 1s var(--ease-out) both; }
@keyframes ai-scan { from { background-position: -40% 0; } to { background-position: 140% 0; } }
.band .ai-dash .ai-dash-note { margin-top: 12px; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); text-align: right; }
.deck--ai .deck-stage { margin-left: calc(min(230px, 100%) + clamp(56px, 8vw, 120px)); }
.ai-flow { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ai-flow li { position: relative; padding: 12px 16px; border-radius: 14px; background: var(--band-2); border: 1px solid var(--band-line); color: var(--band-ink); font-size: .92rem; line-height: 1.35; }
.ai-flow li + li::before { content: ''; position: absolute; left: -12px; top: 50%; width: 12px; height: 2px; background: color-mix(in srgb, var(--t) 60%, #fff); }
.ai-flow li:last-child { background: color-mix(in srgb, var(--t) 22%, var(--band-2)); border-color: color-mix(in srgb, var(--t) 50%, var(--band-line)); }
.ai-flow small { display: block; margin-bottom: 3px; font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--amber-glow); }
.deck-panel.is-swap .ai-flow li { animation: deck-in .45s var(--ease-out) both; animation-delay: calc(var(--i, 0) * .12s); }
.ai-msg { max-width: 30ch; font: 500 clamp(1.5rem, 1.15rem + 1.3vw, 2.2rem)/1.2 var(--display); letter-spacing: -.02em; color: var(--band-ink); }
.ai-msg em { color: var(--amber-glow); font-style: italic; }
.band .ai-msg { color: var(--band-ink); }

/* recognition: problems in red, one after the other */
.ai-pain-grid { align-items: center; }
.ai-pains { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.ai-pains li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 18px; background: var(--alert-mist); border: 1px solid var(--alert-soft); border-left: 3px solid var(--alert); border-radius: 14px; color: var(--ink-2); font-size: .95rem; line-height: 1.45; }
.ai-pains i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--alert); color: #fff; }
.ai-pains i svg { width: 20px; height: 20px; }
.ai-pains b { display: block; margin-bottom: 2px; font-size: 1.02rem; font-weight: 600; color: var(--ink); }
.js .ai-pains.reveal { opacity: 1; transform: none; }
.js .ai-pains li { opacity: 0; transform: translateX(22px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay: calc(var(--i, 0) * .22s + .1s); }
.js .ai-pains.is-in li { opacity: 1; transform: none; }

/* examples per department: six tabs on one row */
.ai-depts .deck--who .deck-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.deck-count { white-space: nowrap; }

/* safe and verifiable: six cards in three columns */
.why-grid.ai-why { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* home teaser: four models feed one overview */
.ai-teaser .lead { max-width: 46ch; }
.ai-mini { display: grid; grid-template-columns: auto 56px minmax(0, 1fr); align-items: center; }
.ai-mini-srcs { display: flex; flex-direction: column; gap: 10px; }
.ai-mini-srcs span { display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; border-radius: 12px; background: var(--band-2); border: 1px solid var(--band-line); color: var(--band-ink); font-size: .9rem; font-weight: 600; animation: ai-mini-src 8s ease-in-out infinite; animation-delay: calc(var(--i) * 2s); }
.ai-mini-srcs span::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--t); }
@keyframes ai-mini-src { 0%, 25%, 100% { background: var(--band-2); border-color: var(--band-line); color: var(--band-ink); } 3%, 22% { background: var(--panel); border-color: var(--panel); color: var(--ink); } }
.ai-mini-wire { position: relative; height: 2px; }
.ai-mini-wire i { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--amber-glow) 0 3px, transparent 3px 9px); background-size: 18px 2px; animation: ai-mini-flow .8s linear infinite; }
@keyframes ai-mini-flow { to { background-position: 18px 0; } }
.ai-mini-card { background: var(--panel); color: var(--ink); border-radius: 20px; padding: 18px; box-shadow: 0 34px 70px -36px rgba(0,0,0,.75); }
.ai-mini-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.ai-mini-rows span { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 11px; align-items: center; padding: 9px 11px; border-radius: 12px; background: var(--paper); animation: ai-mini-row 8s ease-in-out infinite; animation-delay: calc(var(--i) * 2s); }
.ai-mini-rows i { grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--good); color: #fff; }
.ai-mini-rows i svg { width: 14px; height: 14px; }
.ai-mini-rows b { font-size: .88rem; font-weight: 600; color: var(--ink); line-height: 1.2; }
.ai-mini-rows em { font-style: normal; font-size: .76rem; color: var(--ink-3); }
@keyframes ai-mini-row { 0%, 25%, 100% { background: var(--paper); box-shadow: none; } 3%, 22% { background: color-mix(in srgb, var(--t) 9%, #fff); box-shadow: inset 3px 0 0 var(--t); } }

/* header: the menu got one item more (AI); between 1081 and 1260 px it sits a little tighter so everything stays on one line */
@media (min-width: 1081px) and (max-width: 1260px) { .nav--desktop { gap: 15px; } .nav--desktop a { font-size: .9rem; } .header-side .btn { padding: 11px 16px; } }

/* link card on Automatiseringen */
.section.ai-link-sec { padding-block: clamp(48px, 6vw, 90px); }
.ai-link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(18px, 3vw, 40px); align-items: center; padding: clamp(22px, 3vw, 36px); border-radius: 24px; background: var(--panel); border: 1px solid var(--line-soft); box-shadow: var(--shadow-soft); text-decoration: none; color: inherit; transition: transform .3s var(--ease-out), box-shadow .3s ease, border-color .3s ease; }
.ai-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--amber-soft); }
.ai-link-ic { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: var(--band); color: var(--amber-glow); }
.ai-link-ic svg { width: 28px; height: 28px; }
.ai-link-copy { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ai-link-copy b { font: 600 clamp(1.25rem, 1rem + .9vw, 1.7rem)/1.2 var(--display); letter-spacing: -.015em; color: var(--ink); }
.ai-link-copy > span:last-child { color: var(--ink-2); max-width: 62ch; }
.ai-link .textlink { white-space: nowrap; }

@media (max-width: 991px) {
.ai-hero .wrap.ai-hero-grid { grid-template-columns: minmax(0, 1fr); }
.ai-vis { width: 100%; max-width: 580px; }
.ai-depts .deck--who .deck-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ai-map { grid-template-columns: minmax(0, 1fr); gap: 64px; }
.deck--ai .deck-tabs, .deck--ai:not(.is-live) .deck-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.deck--ai .ai-src[aria-pressed="true"] { transform: translateY(-3px); }
.deck--ai .deck-stage { margin-left: 0; }
.why-grid.ai-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ai-mini { grid-template-columns: minmax(0, 1fr); gap: 0; }
.ai-mini-srcs { display: grid; grid-template-columns: repeat(4, max-content); }
.ai-mini-wire { width: 2px; height: 34px; margin-left: 40px; }
.ai-mini-wire i { background: repeating-linear-gradient(180deg, var(--amber-glow) 0 3px, transparent 3px 9px); background-size: 2px 18px; animation-name: ai-mini-flow-v; }
@keyframes ai-mini-flow-v { to { background-position: 0 18px; } }
}
@media (max-width: 767px) {
.deck--ai .deck-tabs, .deck--ai:not(.is-live) .deck-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ai-flow { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.ai-flow li + li::before { left: 22px; top: -10px; width: 2px; height: 10px; }
.ai-link { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 622px) {
.ai-vis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-top: 0; }
.ai-chip { position: relative; left: auto; top: auto; min-width: 0; padding: 7px 11px 7px 7px; gap: 8px; animation-name: ai-drop; }
.ai-chip > span { min-width: 0; }
.ai-chip b, .ai-chip small { overflow: hidden; text-overflow: ellipsis; }
.ai-chip i { width: 28px; height: 28px; }
.ai-chip b { font-size: .8rem; }
.ai-chip small { font-size: .7rem; }
.ai-card { grid-column: 1 / -1; margin: 8px 0 0; }
.ai-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ai-spark { grid-column: 1 / -1; }
.ai-th { display: none; }
.ai-tr { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; padding: 12px 10px; }
.ai-out { grid-column: 1 / -1; padding-left: 45px; }
.why-grid.ai-why { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 478px) {
.ai-card { padding: 14px 12px 12px; }
.ai-depts .deck--who .deck-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ai-mini-srcs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ai-card-rows li { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 9px; padding: 9px 10px; }
.ai-card-rows i { width: 26px; height: 26px; }
.ai-pill { font-size: .72rem; padding: 5px 10px 5px 8px; }
.deck--ai .ai-src { padding: 12px; gap: 10px; }
.deck--ai .ai-src small { font-size: .72rem; }
.ai-pains li { grid-template-columns: 34px minmax(0, 1fr); padding: 14px; }
.ai-pains i { width: 34px; height: 34px; border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) {
.ai-chip, .ai-card-rows li, .ai-mini-srcs span, .ai-mini-rows span, .ai-wire, .ai-pill i, .ai-dot { animation: none !important; }
.ai-chip { opacity: 1; }
}

/* ===== RHYTHM ===== Colour rhythm and header, 20 Oct 2026: light intro, navy directly below it, light tones in between, navy CTA and footer; the header floats off and turns navy on scroll */

/* header: light at the top; on scroll it lifts off the edges into a floating navy bar */
:root { --pill-x: max(8px, calc(max(0px, (100% - var(--wrap)) / 2) + var(--gutter) - 22px)); }
.site-header { isolation: isolate; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 0; box-shadow: none; }
.site-header::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: 0; background: color-mix(in srgb, var(--paper) 88%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); box-shadow: 0 1px 0 transparent; transition: inset .5s var(--ease-out), border-radius .5s var(--ease-out), background-color .45s ease, box-shadow .5s ease; }
.site-header.is-scrolled { border-bottom: 0; box-shadow: none; }
.site-header.is-scrolled::before { inset: 8px var(--pill-x); border-radius: 18px; background: color-mix(in srgb, var(--band) 94%, transparent); box-shadow: 0 22px 44px -22px rgba(0,9,45,.6), 0 2px 6px rgba(0,9,45,.18), inset 0 0 0 1px rgba(255,255,255,.07); }
.site-header .brand, .site-header .brand-name em, .site-header .nav a, .menu-toggle > summary { transition: color .35s ease, border-color .35s ease, background-color .35s ease; }
.site-header .brand-mark > rect:first-child { transition: fill .35s ease, stroke .35s ease; }
.site-header.is-scrolled .brand { color: #fff; }
.site-header.is-scrolled .brand-name em { color: var(--amber-glow); }
.site-header.is-scrolled .brand-mark > rect:first-child { fill: #17245A; stroke: rgba(255,255,255,.22); stroke-width: 1; }
.site-header.is-scrolled .nav--desktop a { color: var(--band-ink-2); }
.site-header.is-scrolled .nav--desktop a:hover, .site-header.is-scrolled .nav--desktop a[aria-current="page"] { color: #fff; }
.site-header.is-scrolled .nav--desktop a[aria-current="page"] { border-bottom-color: var(--amber-glow); }
.site-header.is-scrolled .header-side .btn--primary:hover { background: #fff; color: var(--ink); }
.site-header.is-scrolled .menu-toggle > summary { color: #fff; border-color: rgba(255,255,255,.28); }
.site-header.is-scrolled .menu-toggle[open] > summary { background: rgba(255,255,255,.1); }
.site-header.is-scrolled .menu-panel { left: var(--pill-x); right: var(--pill-x); top: calc(var(--header-h) - 2px); border-radius: 18px; background: var(--band); border: 1px solid var(--band-line); box-shadow: 0 30px 60px -30px rgba(0,9,45,.7); }
.site-header.is-scrolled .menu-panel .nav a { color: var(--band-ink); border-bottom-color: var(--band-line); }
.site-header.is-scrolled .menu-panel .nav a[aria-current="page"] { color: var(--amber-glow); }
.site-header.is-scrolled .menu-panel .btn--primary:hover { background: #fff; color: var(--ink); }

/* the button in the mobile menu always shows its full label (the short 'Contact' version is meant for the bar itself) */
.menu-panel .btn > span { font-size: inherit; }
.menu-panel .btn > span::before { content: none; }
.menu-panel .btn .arrow { display: inline-block; }

/* the reading progress line of an article sits just under the floating bar */
.post-progress { transition: top .5s var(--ease-out), left .5s var(--ease-out), right .5s var(--ease-out); }
body:has(.site-header.is-scrolled) .post-progress { top: calc(var(--header-h) - 5px); left: calc(var(--pill-x) + 18px); right: calc(var(--pill-x) + 18px); height: 2px; border-radius: 2px; overflow: hidden; }

/* light tones between the navy blocks */
.section--sand { background: var(--sand); }
.section--mist { background: var(--sand-deep); }

/* two navy blocks in a row keep a hairline between them, and so do the CTA and the footer */
:is(.band, .gains-band, .cta-band) + :is(.band, .gains-band, .cta-band) { box-shadow: inset 0 1px 0 var(--band-line); }
.site-footer { box-shadow: inset 0 1px 0 var(--band-line); }

/* navy sections that used to be light: the colour tokens flip, so every component inside follows */
.section--navy { --ink: #F6F4F1; --ink-2: #B4BEDC; --ink-3: #8994BA; --line: #26346E; --line-soft: #1B285C; --paper: #08133F; --sand-deep: #16224F; --amber-deep: var(--amber-glow); --amber-mist: rgba(227,160,75,.14); --amber-soft: rgba(227,160,75,.34); color: var(--band-ink); }
.section--navy .lead, .section--navy .prose, .section--navy .prose p { color: var(--band-ink-2); }
.section--navy .prose a { color: #fff; }
.section--navy .btn--primary { background: #F0DCBE; color: var(--band); box-shadow: none; }
.section--navy .btn--primary:hover { background: #fff; }
.section--navy .btn--ghost { color: #fff; border-color: rgba(255,255,255,.3); }
.section--navy .btn--ghost:hover { border-color: #fff; }
/* white cards inside a navy section keep their own light colours */
.section--navy :is(.rail-card, .form-card, .why, .case-card, .blog-card, .ba) { --ink: #00092D; --ink-2: #545E84; --ink-3: #8A93B2; --line: #D3D6E0; --line-soft: #E6E8EF; --paper: #F7F5F3; --sand-deep: #ECEEF4; --amber-deep: #8F5714; --amber-mist: #FAF3E8; --amber-soft: #F0DCBE; color: var(--ink); }
.section--navy :is(.rail-card, .form-card, .why, .case-card, .blog-card, .ba) :is(h1, h2, h3, h4) { color: var(--ink); }
.section--navy :is(.rail-card, .form-card, .why, .case-card, .blog-card, .ba) p { color: var(--ink-2); }
.section--navy :is(.rail-card, .form-card, .why, .case-card, .blog-card, .ba) .textlink { color: var(--ink); }
.section--navy :is(.rail-card, .form-card, .why, .case-card, .blog-card, .ba) .textlink:hover { color: var(--amber-deep); }
.section--navy :is(.rail-card, .form-card, .why, .case-card, .blog-card, .ba) .btn--primary { background: var(--navy); color: #fff; }
.section--navy :is(.rail-card, .form-card, .why, .case-card, .blog-card, .ba) .btn--primary:hover { background: var(--navy-hover); }
/* component details on navy */
.marquee.section--navy { background: var(--band); border-color: var(--band-line); }
.section--navy .marquee-head { background: linear-gradient(90deg, var(--band) 70%, transparent); }
.section--navy .deck--rail .deck-ic { background: var(--band-2); color: var(--band-ink-2); box-shadow: inset 0 0 0 1.5px var(--band-line); }
.section--navy .deck--rail .deck-tab:hover { color: #fff; }
.section--navy .feature:hover { background: #0D1B52; }
.section--navy .tl-num { color: color-mix(in srgb, var(--t, var(--amber)) 55%, #fff); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--t, var(--amber)) 60%, var(--band-line)); }
.section--navy .tl-item.is-on .tl-num { color: #fff; }
.section--navy .case-kicker b { background: rgba(30,142,90,.18); color: #7FD6A6; }
.section--navy .case-kicker b::before { background: #7FD6A6; }
.section--navy .after-steps li::before { background: var(--amber-glow); color: var(--band); }
.section--navy .direct i { background: rgba(227,160,75,.16); color: var(--amber-glow); }
.section--navy .blog-filter .opt { background: transparent; color: var(--band-ink-2); border-color: var(--band-line); }
.section--navy .blog-filter .opt[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--band); }
.section--navy .about-quote .quote { border-left-color: var(--amber-glow); }

/* strip: a slim navy band directly under the intro of reading pages */
.strip { padding-block: 22px; }
.strip-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; }
.strip p { margin: 0; color: var(--band-ink-2); font-size: .95rem; }
.strip .strip-title { color: var(--band-ink); font-weight: 500; }
.strip-links { display: flex; flex-wrap: wrap; gap: 10px; }
.strip-links a, .strip .post-share a { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 99px; border: 1px solid var(--band-line); background: var(--band-2); color: var(--band-ink); font-size: .9rem; text-decoration: none; transition: border-color .2s ease, background-color .2s ease, color .2s ease; }
.strip-links a:hover, .strip .post-share a:hover { border-color: var(--amber-glow); color: #fff; }
.strip .post-meta { color: var(--band-ink-2); }
.strip .post-meta .post-by { color: var(--band-ink); }
.strip .post-share { padding-top: 0; border-top: 0; color: var(--band-ink-2); }

/* two small overflows found while checking every page */
.deck--hub { grid-template-columns: minmax(0, 1fr); }
.hub-map { width: 100%; }
.js .ai-pains li { transform: translateX(12px); }
@media (max-width: 478px) { .switch { display: flex; width: 100%; } .switch button { flex: 1 1 0; min-width: 0; padding: 9px 10px; white-space: normal; line-height: 1.25; } }

@media (max-width: 767px) {
.strip-inner { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
.site-header::before { transition: none; }
}

/* ===== HEADER FIT ===== the bar content always fits inside the page column, so the floating bar wraps it evenly */
@media (min-width: 1081px) {
.header-inner { gap: 20px; }
.nav--desktop { gap: 20px; }
.nav--desktop a { font-size: .92rem; }
.site-header .header-side .btn { padding: 12px 18px; }
}
@media (min-width: 1081px) and (max-width: 1260px) {
.header-inner { gap: 16px; }
.nav--desktop { gap: 13px; }
.nav--desktop a { font-size: .88rem; }
.site-header .header-side .btn { padding: 11px 15px; }
.site-header .header-side .btn .arrow { display: none; }
}

/* ===== AI LAYER ===== Home hero, 20 Oct 2026: a fifth step. Between Make and the tools sits a gold AI orbit with the models on it; incoming work turns gold once AI has read it */
.story { height: 540vh; }
.ai-layer .ai-halo { stroke-opacity: .13; }
.ai-model { stroke: #fff; stroke-width: .35; }
.ai-model--1 { fill: var(--tone-rose); }
.ai-model--2 { fill: var(--tone-green); }
.ai-model--3 { fill: var(--tone-violet); }
.ai-model--4 { fill: var(--tone-blue); }
.ai-badge {
left: 74.24%; top: 30.67%; translate: -50% -50%; z-index: 4;
display: flex; align-items: center; gap: .9cqw; padding: 1.1cqw 1.7cqw 1.1cqw 1.3cqw; border-radius: 99px;
background: var(--panel); border: 1px solid color-mix(in srgb, #E0962F 42%, var(--line));
box-shadow: var(--shadow-soft), 0 0 0 .7cqw rgba(224,150,47,.12); font: 600 2.4cqw/1 var(--sans); color: var(--ink); white-space: nowrap;
}
.ai-badge svg { width: 3.2cqw; height: 3.2cqw; }
.ai-badge-models { display: inline-flex; gap: .45cqw; margin-left: .3cqw; }
.ai-badge-models b { width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: var(--tone-rose); }
.ai-badge-models b:nth-child(2) { background: var(--tone-green); }
.ai-badge-models b:nth-child(3) { background: var(--tone-violet); }
.ai-badge-models b:nth-child(4) { background: var(--tone-blue); }
.story .hub { transition: box-shadow .6s ease; }
.story.is-ai .hub { box-shadow: var(--shadow-lift), 0 0 0 1.4cqw color-mix(in srgb, var(--panel) 60%, transparent), 0 0 0 2.6cqw rgba(224,150,47,.13); }
.story-steps li:nth-child(1) { --t: var(--tone-rose); }
.story-steps li:nth-child(4) { --t: var(--tone-amber); }
.story-steps li:nth-child(5) { --t: var(--tone-green); }
@media (max-width: 900px) {
.story { height: 500vh; }
}

/* ===== RHYTHM 2 ===== 20 Oct 2026: on the home page the tool strip is light and the block under it navy; every page follows one rule: navy under the intro, then the light blocks turn white, paper, sand, mist */

/* tool strip: the fade behind the label always matches the strip, so the label never runs into a tool */
.marquee { --mq-bg: var(--panel); background: var(--mq-bg); }
.marquee.section--mist { --mq-bg: var(--sand-deep); }
.marquee.section--navy { --mq-bg: var(--band); }
.marquee .marquee-head { background: linear-gradient(90deg, var(--mq-bg) calc(100% - 30px), transparent); }
/* light strip: white tool chips with a coloured dot, so the strip pops */
.marquee:not(.section--navy) .marquee-track span { display: inline-flex; align-items: center; gap: 9px; background: var(--panel); border-color: var(--line-soft); color: var(--ink); box-shadow: 0 1px 2px rgba(0,9,45,.05), 0 8px 18px -12px rgba(0,9,45,.4); }
.marquee:not(.section--navy) .marquee-track span::before { content: ''; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--t); box-shadow: 0 0 0 3px color-mix(in srgb, var(--t) 18%, transparent); }
.marquee-track span:nth-child(6n+1) { --t: var(--tone-amber); }
.marquee-track span:nth-child(6n+2) { --t: var(--tone-blue); }
.marquee-track span:nth-child(6n+3) { --t: var(--tone-violet); }
.marquee-track span:nth-child(6n+4) { --t: var(--tone-green); }
.marquee-track span:nth-child(6n+5) { --t: var(--tone-rose); }
.marquee-track span:nth-child(6n) { --t: var(--tone-teal); }

/* the chat keeps its own light colours inside a navy block and lifts off it */
.section--navy .chat { --ink: #00092D; --ink-2: #545E84; --ink-3: #8A93B2; --line: #D3D6E0; --line-soft: #E6E8EF; --paper: #F7F5F3; color: var(--ink); box-shadow: 0 40px 80px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08); }
.band .chat .chat-head { color: #fff; }
.band .answer { color: #fff; }

/* ===== RHYTHM 3 ===== 21 Oct 2026: every page runs the home colour order. Light cards and windows inside the blocks that turned navy keep their own light colours */
.section--navy :is(.crm-win, .path-step, .tc-tool, .tc-search, .tc-answer) { --ink: #00092D; --ink-2: #545E84; --ink-3: #8A93B2; --line: #D3D6E0; --line-soft: #E6E8EF; --paper: #F7F5F3; --sand-deep: #ECEEF4; --amber-deep: #8F5714; --amber-mist: #FAF3E8; --amber-soft: #F0DCBE; color: var(--ink); }
.section--navy :is(.path-step, .tc-answer) :is(h3, h4) { color: var(--ink); }
.section--navy :is(.path-step, .tc-answer) p { color: var(--ink-2); }
.section--navy .path-step .textlink { color: var(--ink); }
.section--navy .path-step { background: #fff; border-color: transparent; }
.section--navy .tc-tool[aria-pressed="true"] { border-color: var(--amber-glow); box-shadow: 0 0 0 2px var(--amber-glow); }

/* ===== RHYTHM 4 ===== 21 Oct 2026: the tool strip under the home intro belongs to the intro (same cream), so every page runs intro > navy > the same order */
.marquee.marquee--intro { --mq-bg: var(--paper); border-top-color: transparent; }

/* ===== ASK AI ===== 2 Nov 2026: 'Vraag AI naar ons' in the footer, opens an AI assistant with a ready-made question about TableAutomate */
.footer-ask { margin-top: clamp(36px, 4vw, 56px); padding: 20px 22px 20px 24px; border: 1px solid var(--band-line); border-radius: 18px; background: var(--band-2); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.footer-ask-title { margin: 0; display: flex; flex-direction: column; gap: 5px; max-width: 40ch; }
.footer-ask-title b { display: inline-flex; align-items: center; gap: 10px; color: var(--band-ink); font-size: 1.02rem; font-weight: 600; }
.footer-ask-title b::before { content: ''; width: 18px; height: 18px; flex: none; background: var(--amber-glow); --m: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M12 2.5C12.7 8 16 11.3 21.5 12 16 12.7 12.7 16 12 21.5 11.3 16 8 12.7 2.5 12 8 11.3 11.3 8 12 2.5z%27/%3E%3C/svg%3E'); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.site-footer .footer-ask-title span { color: var(--band-ink-2); font-size: .9rem; line-height: 1.5; }
.footer-ask-links { display: flex; flex-wrap: wrap; gap: 10px; }
.site-footer .ask-ai { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px 10px 14px; border-radius: 99px; border: 1px solid var(--band-line); background: rgba(255,255,255,.04); color: var(--band-ink); font-size: .9rem; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; transition: border-color .2s ease, background-color .2s ease, color .2s ease; }
.ask-ai::before { content: ''; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--t); box-shadow: 0 0 0 3px color-mix(in srgb, var(--t) 28%, transparent); }
.ask-ai::after { content: '↗'; font-size: .9em; color: var(--band-ink-2); transition: transform .2s ease, color .2s ease; }
.site-footer .ask-ai:hover, .site-footer .ask-ai:focus-visible { border-color: var(--amber-glow); background: rgba(255,255,255,.08); color: #fff; }
.ask-ai:hover::after, .ask-ai:focus-visible::after { transform: translate(2px, -2px); color: var(--amber-glow); }
.ask-ai--chatgpt { --t: #19C37D; }
.ask-ai--claude { --t: #D97757; }
.ask-ai--perplexity { --t: #20B8CD; }
.ask-ai--google { --t: #4C8DF6; }
@media (max-width: 767px) { .footer-ask { flex-direction: column; align-items: flex-start; padding: 18px; } }
@media (max-width: 478px) { .footer-ask-links { display: grid; grid-template-columns: 1fr 1fr; width: 100%; } .site-footer .ask-ai { justify-content: center; padding-inline: 10px; } }
@media (prefers-reduced-motion: reduce) { .ask-ai, .ask-ai::after { transition: none; } }

/* ===== ROUND 13 ===== 3 Nov 2026: branches, bibliotheek, woordenboek, drie vormen, elke ronde een taak minder, trust row, footer column. Additive only. */
/* light cards inside navy sections, same reset as the existing cards */
.section--navy :is(.lib-card, .sector-card, .form-way, .task-ask) { --ink: #00092D; --ink-2: #545E84; --ink-3: #8A93B2; --line: #D3D6E0; --line-soft: #E6E8EF; --paper: #F7F5F3; --sand-deep: #ECEEF4; --amber-deep: #8F5714; --amber-mist: #FAF3E8; --amber-soft: #F0DCBE; color: var(--ink); }
.section--navy :is(.lib-card, .sector-card, .form-way, .task-ask) :is(h2, h3) { color: var(--ink); }
.band :is(.lib-card, .sector-card, .form-way) p { color: var(--ink-2); }
.band :is(.lib-card, .sector-card, .form-way) .textlink { color: var(--ink); }
.band :is(.lib-card, .sector-card, .form-way) .textlink:hover { color: var(--amber-deep); }
.band .form-way .form-way-k { color: var(--t); }
.band .form-way .form-way-note { color: var(--ink-3); }

/* ---------- trust row in the home intro strip ---------- */
.marquee--intro .trust-row { position: relative; z-index: 3; list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 34px; padding: 2px var(--gutter) 16px; margin: 0 0 16px; border-bottom: 1px solid var(--line-soft); background: var(--mq-bg); }
.trust-row li { display: inline-flex; align-items: center; gap: 10px; font-size: .9rem; font-weight: 500; color: var(--ink); opacity: 0; transform: translateY(8px); animation: ta13-up .6s var(--ease-out) forwards; animation-delay: calc(var(--i) * .12s + .3s); }
.trust-row i { width: 30px; height: 30px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--amber-mist); color: var(--amber-deep); box-shadow: inset 0 0 0 1px var(--amber-soft); }
.trust-row i svg { width: 16px; height: 16px; }
.marquee--intro:has(.trust-row) .marquee-head { top: auto; height: var(--mq-row, 72px); }
@keyframes ta13-up { to { opacity: 1; transform: none; } }
@media (max-width: 767px) {
.marquee--intro .trust-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; padding-inline: var(--gutter); }
.trust-row li { font-size: .82rem; gap: 8px; align-items: flex-start; line-height: 1.3; }
.trust-row i { width: 26px; height: 26px; border-radius: 8px; }
}
@media (prefers-reduced-motion: reduce) { .trust-row li { animation: none; opacity: 1; transform: none; } }

/* ---------- small links added to existing sections ---------- */
.stack-12 > .closer-links { margin-top: calc(18px - clamp(40px, 5.4vw, 78px)); }
.stack-12 > .textlink + .textlink { margin-top: calc(14px - clamp(40px, 5.4vw, 78px)); }
.cases-more { margin-top: 8px; }
.ai-link-sec .ai-link + .ai-link { margin-top: 18px; }
.ai-link--lib .ai-link-ic { background: color-mix(in srgb, var(--tone-blue) 14%, #fff); color: var(--tone-blue); }

/* ---------- crumbs and chips in the new heroes ---------- */
.lib-hero .crumbs span:last-child, .sector-hero .crumbs span:last-child { color: var(--amber-deep); font-weight: 600; }
.lib-hero-cats { display: flex; flex-wrap: wrap; gap: 8px; }
:is(.lib-hero-cats, .lib-card-cats) span { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 99px; background: var(--sand-deep); color: var(--ink-2); line-height: 1; }
:is(.lib-hero-cats, .lib-card-cats) span.is-ai { background: var(--amber-mist); color: var(--amber-deep); box-shadow: inset 0 0 0 1px var(--amber-soft); }
.lib-hero .h1-page, .sector-hero .h1-page, .gloss-hero .h1-page { max-width: 22ch; }
.lib-hero .lead, .sector-hero .lead, .gloss-hero .lead { max-width: 62ch; }

/* ---------- library cards ---------- */
.lib-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.lib-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 24px 24px 22px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line-soft); box-shadow: var(--shadow-soft); color: var(--ink); text-decoration: none; transition: transform .35s var(--ease-out), box-shadow .35s ease, border-color .35s ease, opacity .8s var(--ease-out); }
.lib-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--t) 45%, var(--line-soft)); }
.lib-card.reveal.is-in:hover { transform: translateY(-4px); }
.lib-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.lib-card-ic { width: 48px; height: 48px; flex: none; border-radius: 15px; display: grid; place-items: center; background: color-mix(in srgb, var(--t) 13%, #fff); color: var(--t); transition: transform .4s var(--ease-out), background-color .3s ease, color .3s ease; }
.lib-card-ic svg { width: 23px; height: 23px; }
.lib-card:hover .lib-card-ic { transform: rotate(-6deg) scale(1.06); background: var(--t); color: #fff; }
.lib-card-cats { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; padding-top: 4px; }
.lib-card h3 { font-size: 1.2rem; line-height: 1.25; }
.lib-card p { color: var(--ink-2); font-size: .95rem; line-height: 1.5; flex: 1; }
.lib-card .textlink { margin-top: 2px; }
.lib-trail { position: relative; display: flex; justify-content: space-between; align-items: center; width: 132px; height: 10px; }
.lib-trail::before { content: ''; position: absolute; left: 4px; right: 4px; top: 4px; height: 2px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--t) 35%, transparent) 0 4px, transparent 4px 8px); }
.lib-trail i { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--panel); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--t) 45%, var(--line-soft)); transition: background-color .3s ease, box-shadow .3s ease, transform .3s ease; }
.lib-card:hover .lib-trail i, .lib-card:focus-visible .lib-trail i { animation: ta13-dot 1.6s var(--ease-out) infinite; }
.lib-trail i:nth-child(2) { animation-delay: .2s !important; }
.lib-trail i:nth-child(3) { animation-delay: .4s !important; }
.lib-trail i:nth-child(4) { animation-delay: .6s !important; }
@keyframes ta13-dot { 0%, 100% { background: var(--panel); transform: none; } 20%, 55% { background: var(--t); box-shadow: inset 0 0 0 2px var(--t), 0 0 0 4px color-mix(in srgb, var(--t) 18%, transparent); transform: scale(1.15); } }
.lib-card.is-pop { animation: ta13-pop .45s var(--ease-out) both; }
@keyframes ta13-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@media (max-width: 991px) { .lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 622px) { .lib-grid { grid-template-columns: minmax(0, 1fr); } .lib-card { padding: 20px; } }

/* ---------- filter bar and search (navy) ---------- */
.lib-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; flex-wrap: wrap; }
.lib-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.lib-filter:empty { display: none; }
.lib-filter .opt { background: transparent; color: var(--band-ink-2); border: 1px solid var(--band-line); padding: 8px 14px; font-size: .9rem; }
.lib-filter .opt:hover { border-color: var(--band-ink-2); color: #fff; }
.lib-filter .opt[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--band); }
.lib-filter .opt b { font-weight: 600; font-size: .74rem; min-width: 20px; height: 20px; padding-inline: 6px; border-radius: 99px; display: inline-grid; place-items: center; background: rgba(255,255,255,.1); color: inherit; }
.lib-filter .opt[aria-pressed="true"] b { background: var(--band); color: #fff; }
.lib-search { position: relative; display: flex; align-items: center; width: min(340px, 100%); }
.lib-search-ic { position: absolute; left: 15px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--band-ink-2); pointer-events: none; display: grid; }
.lib-search-ic svg { width: 18px; height: 18px; }
.lib-search input { width: 100%; font: inherit; font-size: .95rem; padding: 12px 18px 12px 44px; border-radius: 99px; border: 1px solid var(--band-line); background: rgba(255,255,255,.06); color: #fff; outline: none; transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease; -webkit-appearance: none; appearance: none; }
.lib-search input::placeholder { color: var(--band-ink-2); opacity: .85; }
.lib-search input:focus { border-color: var(--amber-glow); background: rgba(255,255,255,.1); box-shadow: 0 0 0 4px rgba(227,160,75,.18); }
.lib-count { font-size: .86rem; color: var(--ink-3); min-height: 1.3em; margin-top: -18px; }
.lib-count b { color: var(--ink); font-weight: 600; }
.lib-empty { padding: 26px; border-radius: 18px; border: 1px dashed var(--line); color: var(--ink-2); text-align: center; }
.lib-empty a { color: inherit; }
@media (max-width: 767px) { .lib-search { width: 100%; } .lib-count { margin-top: -10px; } }

/* ---------- 'zo werkt het': nodes with a travelling dot (navy) ---------- */
.lib-flow { --T: calc(var(--n) * 1.6s); --gap: 18px; --x0: calc((100% - (var(--n) - 1) * var(--gap)) / var(--n) / 2); }
.lib-flow-steps { list-style: none; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--gap); }
.lib-flow-steps::before { content: ''; position: absolute; top: 36px; left: var(--x0); right: var(--x0); height: 2px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.3) 0 6px, transparent 6px 12px); transform-origin: left; transform: scaleX(0); transition: transform 1.3s var(--ease-out) .25s; }
.lib-flow.is-in .lib-flow-steps::before { transform: none; }
.lib-flow-steps::after { content: ''; position: absolute; top: 30px; left: var(--x0); width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--amber-glow); box-shadow: 0 0 0 6px rgba(227,160,75,.2), 0 0 22px rgba(227,160,75,.8); opacity: 0; }
.lib-flow.is-in .lib-flow-steps::after { animation: ta13-travel var(--T) linear 1.4s infinite; }
@keyframes ta13-travel { 0% { left: var(--x0); opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { left: calc(100% - var(--x0)); opacity: 0; } }
.lib-node { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 9px; opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: calc(var(--i) * .16s + .1s); }
.lib-flow.is-in .lib-node { opacity: 1; transform: none; }
.lib-node-ic { position: relative; z-index: 1; width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; background: var(--band-2); border: 1px solid var(--band-line); color: #fff; box-shadow: 0 14px 30px -16px rgba(0,0,0,.7); margin-bottom: 6px; }
.lib-node-ic svg { width: 28px; height: 28px; }
.lib-flow.is-in .lib-node-ic { animation: ta13-pulse var(--T) linear infinite; animation-delay: calc(1.4s + var(--T) * (.06 + .88 * var(--i) / (var(--n) - 1)) - .15s); }
.lib-node:last-child .lib-node-ic { background: var(--good); border-color: var(--good); }
@keyframes ta13-pulse { 0%, 14%, 100% { border-color: var(--band-line); box-shadow: 0 14px 30px -16px rgba(0,0,0,.7); color: #fff; transform: none; } 4% { border-color: var(--amber-glow); box-shadow: 0 0 0 6px rgba(227,160,75,.16), 0 0 30px rgba(227,160,75,.45); color: var(--amber-glow); transform: scale(1.06); } }
.lib-node:last-child .lib-node-ic { animation-name: ta13-pulse-last; }
@keyframes ta13-pulse-last { 0%, 14%, 100% { box-shadow: 0 14px 30px -16px rgba(0,0,0,.7); transform: none; } 4% { box-shadow: 0 0 0 7px rgba(46,139,87,.25), 0 0 30px rgba(46,139,87,.6); transform: scale(1.08); } }
.lib-node b { font: 600 1.16rem/1.25 var(--display); color: #fff; letter-spacing: -.01em; }
.lib-node > span:not(.lib-node-ic) { font-size: .93rem; line-height: 1.45; color: var(--band-ink-2); max-width: 26ch; }
.lib-node-tag { font-style: normal; display: inline-flex; align-items: center; gap: 7px; margin-top: 2px; padding: 5px 11px 5px 9px; border-radius: 99px; background: rgba(255,255,255,.05); border: 1px solid var(--band-line); color: var(--band-ink); font-size: .74rem; font-weight: 600; letter-spacing: .04em; }
.lib-node-tag::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }
.lib-note { font-size: .86rem; color: var(--ink-3); }
@media (max-width: 767px) {
.lib-flow-steps { grid-template-columns: minmax(0, 1fr); gap: 22px; }
.lib-flow-steps::before { top: var(--fy0, 30px); bottom: auto; height: calc(var(--fy1, 300px) - var(--fy0, 30px)); left: 29px; right: auto; width: 2px; background: repeating-linear-gradient(180deg, rgba(255,255,255,.3) 0 6px, transparent 6px 12px); transform: scaleY(0); transform-origin: top; }
.lib-flow-steps::after { left: 30px; top: calc(var(--fy0, 30px) - 7px); }
.lib-flow.is-in .lib-flow-steps::after { animation-name: ta13-travel-v; }
@keyframes ta13-travel-v { 0% { top: calc(var(--fy0, 30px) - 7px); opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { top: calc(var(--fy1, 300px) - 7px); opacity: 0; } }
.lib-node { display: grid; grid-template-columns: 60px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; text-align: left; align-items: start; justify-items: start; }
.lib-node-ic { grid-row: 1 / span 3; width: 60px; height: 60px; border-radius: 18px; margin: 0; }
.lib-node-ic svg { width: 24px; height: 24px; }
.lib-node > span:not(.lib-node-ic) { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .lib-flow-steps::after { display: none; } .lib-flow.is-in .lib-node-ic { animation: none; } }

/* ---------- 'wat het oplevert' and 'gereedschap' ---------- */
.lib-case { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; width: fit-content; padding: 14px 20px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line-soft); box-shadow: var(--shadow-soft); }
.lib-case .case-live { position: static; box-shadow: none; background: color-mix(in srgb, var(--tone-green) 10%, #fff); }
.lib-side { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 70px); padding: clamp(22px, 3vw, 36px); border-radius: 24px; background: var(--panel); border: 1px solid var(--line-soft); box-shadow: var(--shadow-soft); }
.lib-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.lib-tools span { display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px 8px 11px; border-radius: 99px; background: var(--paper); border: 1px solid var(--line-soft); font-size: .92rem; font-weight: 500; color: var(--ink); transition: transform .25s var(--ease-out), border-color .25s ease; }
.lib-tools span::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent); }
.lib-tools span:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 50%, var(--line-soft)); }
.reveal .lib-tools span { opacity: 0; transform: translateY(8px); }
.reveal.is-in .lib-tools span { opacity: 1; transform: none; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.reveal.is-in .lib-tools span:nth-child(2) { transition-delay: .06s; } .reveal.is-in .lib-tools span:nth-child(3) { transition-delay: .12s; } .reveal.is-in .lib-tools span:nth-child(4) { transition-delay: .18s; } .reveal.is-in .lib-tools span:nth-child(5) { transition-delay: .24s; }
.lib-sectors { display: flex; flex-direction: column; gap: 8px; }
.lib-sector { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 14px; border: 1px solid var(--line-soft); background: var(--paper); color: var(--ink); text-decoration: none; font-weight: 500; transition: border-color .25s ease, transform .25s var(--ease-out); }
.lib-sector:hover { border-color: var(--amber-soft); transform: translateX(3px); }
.lib-sector i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--amber-mist); color: var(--amber-deep); }
.lib-sector i svg { width: 18px; height: 18px; }
.lib-sectors:empty { display: none; }
@media (max-width: 767px) { .lib-side { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 'jouw taak' ---------- */
.task-ask { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(22px, 4vw, 56px); align-items: center; padding: clamp(24px, 3.6vw, 48px); border-radius: 26px; background: var(--panel); border: 1px solid var(--line-soft); box-shadow: var(--shadow-lift); position: relative; overflow: hidden; }
.task-ask::before { content: ''; position: absolute; inset: -40% -10% auto auto; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(227,160,75,.16), transparent 65%); pointer-events: none; }
.task-ask-copy { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; position: relative; }
.task-ask-ic { width: 54px; height: 54px; border-radius: 17px; display: grid; place-items: center; background: var(--band); color: var(--amber-glow); }
.task-ask-ic svg { width: 26px; height: 26px; animation: ta13-spin 9s linear infinite; }
@keyframes ta13-spin { to { transform: rotate(360deg); } }
.task-ask h2 { font-family: var(--display); font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); margin-bottom: 8px; }
.task-ask p { color: var(--ink-2); }
.task-ask-form { position: relative; display: flex; gap: 10px; flex-wrap: wrap; }
.task-ask-form input { flex: 1 1 260px; min-width: 0; font: inherit; font-size: 1rem; padding: 15px 20px; border-radius: 99px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); outline: none; transition: border-color .2s ease, box-shadow .2s ease; }
.task-ask-form input:focus { border-color: var(--amber); box-shadow: 0 0 0 4px rgba(227,160,75,.2); background: var(--panel); }
.task-ask-form .btn { flex: none; }
@media (max-width: 767px) { .task-ask { grid-template-columns: minmax(0, 1fr); } .task-ask-form .btn { width: 100%; justify-content: center; } }
@media (max-width: 478px) { .task-ask-copy { grid-template-columns: minmax(0, 1fr); } }
.from-chip.from-chip--task { display: inline-flex; }

/* ---------- branch cards ---------- */
.sector-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.sector-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 26px 24px 24px; border-radius: 22px; background: var(--panel); border: 1px solid var(--line-soft); box-shadow: var(--shadow-soft); color: var(--ink); text-decoration: none; overflow: hidden; transition: transform .35s var(--ease-out), box-shadow .35s ease, border-color .35s ease, opacity .8s var(--ease-out); }
.sector-card::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--t); transform: scaleX(.18); transform-origin: left; transition: transform .5s var(--ease-out); }
.sector-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--t) 40%, var(--line-soft)); }
.sector-card.reveal.is-in:hover { transform: translateY(-4px); }
.sector-card:hover::after { transform: none; }
.sector-ic { position: relative; width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: color-mix(in srgb, var(--t) 13%, #fff); color: var(--t); }
.sector-ic svg { width: 26px; height: 26px; }
.sector-ic::before { content: ''; position: absolute; inset: -6px; border-radius: 22px; border: 1.5px dashed color-mix(in srgb, var(--t) 45%, transparent); opacity: 0; transition: opacity .3s ease; }
.sector-card:hover .sector-ic::before { opacity: 1; animation: ta13-spin 12s linear infinite; }
.sector-card h3 { font-size: 1.3rem; line-height: 1.22; }
.sector-card p { color: var(--ink-2); font-size: .95rem; line-height: 1.5; }
.sector-autos { display: flex; flex-direction: column; gap: 7px; margin: 4px 0 6px; padding-top: 14px; border-top: 1px solid var(--line-soft); flex: 1; }
.sector-autos span { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 9px; font-size: .88rem; line-height: 1.35; color: var(--ink); }
.sector-autos span::before { content: ''; width: 8px; height: 8px; margin: 5px 0 0 4px; border-radius: 50%; background: var(--t); box-shadow: 0 0 0 3px color-mix(in srgb, var(--t) 20%, transparent); }
.sector-card .textlink { margin-top: auto; }
.sector-card--mini { padding: 20px; gap: 10px; }
.sector-card--mini .sector-ic { width: 46px; height: 46px; border-radius: 14px; }
.sector-card--mini .sector-ic svg { width: 22px; height: 22px; }
.sector-card--mini h3 { font-size: 1.12rem; }
.sector-card--mini p { font-size: .9rem; flex: 1; }
@media (max-width: 1100px) { .sector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 622px) { .sector-grid { grid-template-columns: minmax(0, 1fr); } }
.sector-case { align-items: center; }
.sector-case-card .case-card { max-width: 540px; margin-left: auto; }
@media (max-width: 900px) { .sector-case-card .case-card { margin-left: 0; } }

/* ---------- woordenboek ---------- */
.gloss-top .section-head { max-width: none; }
.gloss-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; }
.gloss-letters { display: flex; flex-wrap: wrap; gap: 6px; }
.gloss-letters a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--band-line); color: var(--band-ink); text-decoration: none; font-weight: 600; font-size: .95rem; transition: background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease; }
.gloss-letters a:hover, .gloss-letters a.is-on { background: #fff; color: var(--band); border-color: #fff; }
.gloss-letters a.is-off { opacity: .3; pointer-events: none; }
.gloss-count { margin-top: -8px; }
.gloss { display: flex; flex-direction: column; gap: clamp(26px, 3vw, 40px); }
.gloss-group { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 24px; scroll-margin-top: calc(var(--header-h) + 30px); }
.gloss-letter { font: 700 clamp(2.6rem, 2rem + 2vw, 3.6rem)/1 var(--display); color: var(--amber-deep); position: sticky; top: calc(var(--header-h) + 30px); align-self: start; }
.gloss-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.gloss-item { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line-soft); box-shadow: var(--shadow-soft); scroll-margin-top: calc(var(--header-h) + 30px); transition: border-color .3s ease, box-shadow .3s ease; }
.gloss-item dt { font: 600 1.22rem/1.25 var(--display); color: var(--ink); }
.gloss-item dd { margin: 0; display: flex; flex-direction: column; gap: 12px; color: var(--ink-2); font-size: .96rem; line-height: 1.55; }
.gloss-item:target, .gloss-item.is-hit { border-color: var(--amber-soft); box-shadow: 0 0 0 4px var(--amber-mist), var(--shadow-soft); }
.gloss-item .textlink { font-size: .9rem; }
.gloss mark { background: var(--amber-mist); color: inherit; border-radius: 3px; box-shadow: 0 0 0 2px var(--amber-mist); }
@media (max-width: 991px) { .gloss-list { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 622px) { .gloss-group { grid-template-columns: minmax(0, 1fr); gap: 10px; } .gloss-letter { position: static; font-size: 2.4rem; } }

/* ---------- werkwijze: drie vormen ---------- */
.form-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.form-way { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 28px 26px 24px; border-radius: 22px; background: var(--panel); border: 1px solid var(--line-soft); box-shadow: var(--shadow-soft); transition: transform .35s var(--ease-out), box-shadow .35s ease, opacity .8s var(--ease-out); }
.form-way:hover { box-shadow: var(--shadow-lift); }
.form-way-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--t) 13%, #fff); color: var(--t); }
.form-way-ic svg { width: 25px; height: 25px; }
.form-way-k { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--t); }
.form-way h3 { font-size: 1.35rem; line-height: 1.22; }
.form-way-fit { font-family: var(--display); font-style: italic; font-size: 1.05rem; line-height: 1.4; color: var(--ink-2); }
.form-way-track { counter-reset: st; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; padding: 6px 0 20px; }
.form-way-track i { counter-increment: st; position: relative; height: 8px; border-radius: 99px; background: var(--line-soft); }
.form-way-track i::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--t); transform: scaleX(0); transform-origin: left; }
.form-way-track i.is-in::before { transition: transform .45s var(--ease-out); transition-delay: calc(var(--i) * .14s + .35s); }
.form-way.is-in .form-way-track i.is-in::before { transform: none; }
.form-way-track i::after { content: counter(st); position: absolute; left: 0; top: 13px; font-size: .7rem; font-weight: 600; color: var(--ink-3); }
.form-way-track i.is-in::after { color: var(--t); }
.form-way-lines { list-style: none; display: flex; flex-direction: column; gap: 9px; padding-top: 14px; border-top: 1px solid var(--line-soft); flex: 1; }
.form-way-lines li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: .94rem; line-height: 1.45; color: var(--ink); }
.form-way-lines li::before { content: ''; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: color-mix(in srgb, var(--t) 16%, #fff) url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27 fill=%27none%27 stroke=%27%2314203F%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5.5 10.5l3 3 6-7%27/%3E%3C/svg%3E') center / 14px no-repeat; }
.form-way-note { font-size: .86rem; color: var(--ink-3); }
.form-way-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .84rem; color: var(--band-ink-2); }
.form-way-legend span { display: inline-flex; align-items: center; gap: 8px; }
.form-way-legend b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; border: 1px solid var(--band-line); color: var(--band-ink); }
@media (max-width: 991px) { .form-ways { grid-template-columns: minmax(0, 1fr); max-width: 620px; } }

/* ---------- werkwijze: elke ronde een taak minder ---------- */
.rounds { display: flex; flex-direction: column; gap: 22px; }
.rounds-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.rounds-tabs .opt { background: var(--panel); }
.rounds-tabs .opt[aria-pressed="true"] { background: var(--navy); }
.rounds-board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; position: relative; }
.rounds-board::after { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--navy) url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 15 12%27 fill=%27none%27 stroke=%27white%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M1 6h12m0 0L8.6 1.6M13 6 8.6 10.4%27/%3E%3C/svg%3E') center / 16px no-repeat; box-shadow: 0 0 0 6px var(--sand-deep); z-index: 2; }
.rounds-col { padding: 22px; border-radius: 22px; background: var(--panel); border: 1px solid var(--line-soft); box-shadow: var(--shadow-soft); min-height: 300px; }
.rounds-col--auto { background: color-mix(in srgb, var(--good) 5%, var(--panel)); border-color: color-mix(in srgb, var(--good) 22%, var(--line-soft)); }
.rounds-k { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; font-size: var(--fs-micro); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.rounds-n { font: 700 1.6rem/1 var(--display); letter-spacing: 0; color: var(--ink); transition: transform .3s var(--ease-out); }
.rounds-n.is-bump { transform: scale(1.25); }
.rounds-col--auto .rounds-n { color: var(--good); }
.rounds-col ul { list-style: none; display: flex; flex-direction: column; }
.rounds-empty { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--good) 35%, var(--line-soft)); color: var(--ink-3); font-size: .92rem; transition: opacity .3s ease; }
.rounds-empty::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--good); animation: bxLive 2s infinite; }
.rounds-col--auto:has(.is-done) .rounds-empty { display: none; }
.rounds-task { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: center; padding: 11px 14px; margin-bottom: 8px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line-soft); font-weight: 500; color: var(--ink); max-height: 80px; overflow: hidden; transition: max-height .5s var(--ease-out), opacity .4s ease, transform .5s var(--ease-out), margin .5s var(--ease-out), padding .5s var(--ease-out), border-width .5s ease; }
.rounds-task i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--amber-mist); color: var(--amber-deep); }
.rounds-task i svg { width: 16px; height: 16px; }
.rounds-col--auto .rounds-task { background: var(--panel); }
.rounds-col--auto .rounds-task i { background: var(--good); color: #fff; }
.rounds-col--hand .rounds-task.is-done, .rounds-col--auto .rounds-task:not(.is-done) { max-height: 0; opacity: 0; margin-bottom: 0; padding-block: 0; border-width: 0; transform: translateX(28px) scale(.96); }
.rounds-col--auto .rounds-task:not(.is-done) { transform: translateX(-28px) scale(.96); }
.rounds-col--hand .rounds-task[data-r="99"] { border-style: dashed; color: var(--ink-2); }
.rounds-line { font-family: var(--display); font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); line-height: 1.35; color: var(--ink); min-height: 1.4em; transition: opacity .3s ease; }
.rounds-line.is-swap { opacity: 0; }
@media (max-width: 767px) { .rounds-board { grid-template-columns: minmax(0, 1fr); } .rounds-board::after { transform: rotate(90deg); } .rounds-col { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .rounds-task { transition: none; } }

/* ---------- footer: fifth column ---------- */
.footer-grid:has(> :nth-child(5)) { grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: clamp(26px, 3vw, 48px); }
@media (max-width: 1260px) { .footer-grid:has(> :nth-child(5)) { grid-template-columns: repeat(4, minmax(0, 1fr)); } .footer-grid:has(> :nth-child(5)) .footer-about { grid-column: 1 / -1; max-width: 640px; } }
@media (max-width: 900px) { .footer-grid:has(> :nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .footer-grid:has(> :nth-child(5)) { grid-template-columns: minmax(0, 1fr); } }

/* Blog cover illustration (cards without a featured image) */
.blog-card-cover{container-type:size}
.blog-card-art{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:1;font-size:min(.78cqmin,.5cqw)}
.blog-card-cover img[src]:not([src=""])~.blog-card-art{display:none}
.bca-win{position:relative;width:120em;border-radius:9em;background:#FBF7F0;box-shadow:0 16em 30em -10em rgba(0,5,26,.8),0 0 0 1px rgba(255,255,255,.06);transform:translateX(10%) rotate(-3deg);transition:transform .6s var(--ease-out,ease)}
.blog-item:nth-child(even) .bca-win{transform:translateX(10%) rotate(2.5deg)}
.blog-card:hover .bca-win{transform:translateX(10%) translateY(-3em) rotate(-1.5deg)}
.bca-bar{display:flex;gap:3em;padding:5em 7em;border-bottom:1px solid rgba(0,9,45,.07)}
.bca-bar i{width:4.4em;height:4.4em;border-radius:50%;background:rgba(0,9,45,.15)}
.bca-row{display:grid;grid-template-columns:1fr 22em 8em;align-items:center;gap:6em;padding:4.4em 7em;border-bottom:1px solid rgba(0,9,45,.05)}
.bca-row:last-child{border-bottom:0}
.bca-row b{height:4em;border-radius:2em;background:rgba(0,9,45,.13)}
.bca-row em{height:8em;border-radius:4em;background:color-mix(in srgb,var(--c) 28%,#fff)}
.bca-row s{width:8em;height:8em;border-radius:50%;background:var(--c)}
.bca-chip{position:absolute;right:-7em;top:-7em;display:grid;place-items:center;width:22em;height:22em;border-radius:7em;background:var(--t,#E3A04B);color:#00092D;box-shadow:0 8em 16em -6em color-mix(in srgb,var(--t,#E3A04B) 85%,transparent);transform:rotate(6deg)}
.bca-chip svg{width:11em;height:11em}
@media (prefers-reduced-motion:reduce){.bca-win{transition:none}}

/* ===== ROUND 22 ===== 3 Nov 2026: light design (Notion + Crisp), minified. Classes strak speels osmo paid notion nl come from functions.php. */
.strak h1,.strak h2,.strak h3,.strak h4{font-weight:600}.strak .skip-link,.strak .btn,.strak .menu-toggle>summary,.strak .footer-stack span{border-radius:4px}.strak .story-line strong{font-weight:600}.strak .story-hint i{border-radius:5px}.strak .make-badge{border-radius:4px}.strak .bubble-inner{font-weight:600}.strak .portal-bar span{border-radius:4px}.strak .portal-hello{font-weight:600}.strak .portal-progress,.strak .portal-row em,.strak .marquee-track span{border-radius:4px}.strak .pain-num{font-weight:600}.strak .msg p{border-radius:5px 5px 5px 4px;font-weight:600}.strak .msg:nth-child(odd) p{border-radius:5px 5px 4px}.strak .answer{letter-spacing:-.04em;font-weight:500}.strak .pillar-icon{border-radius:5px}.strak .cs-bar span{border-radius:4px}.strak .cs-label{font-family:var(--mono);letter-spacing:.045em;border-radius:4px;font-weight:450}.strak .port-side span{border-radius:4px}.strak .port-card{border-radius:5px}.strak .port-card small{font-family:var(--mono);letter-spacing:.045em;font-weight:450}.strak .port-card strong{font-weight:600}.strak .port-task{border-radius:5px}.strak .port-task em,.strak .port-btn{border-radius:4px}.strak .ha-item button b,.strak .flow-title{font-weight:600}.strak .flow-step i{font-family:var(--mono);letter-spacing:.045em;border-radius:5px;font-weight:450}.strak .tl-num{font-weight:600}.strak .quote p{letter-spacing:-.04em}.strak .tile{border-radius:5px}.strak .case-card .results span{border-radius:4px}.strak .case-facts dt{font-family:var(--mono);letter-spacing:.045em;font-weight:450}.strak .faq summary{font-weight:600}.strak .manifest{font-style:normal;font-weight:600}.strak table.compare thead th{font-family:var(--mono);letter-spacing:.045em;font-weight:450}.strak table.compare tbody th,.strak .after-steps li:before{font-weight:600}.strak .gform_wrapper input[type=text],.strak .gform_wrapper input[type=email],.strak .gform_wrapper input[type=tel],.strak .gform_wrapper textarea,.strak .gform_wrapper select{border-radius:5px}.strak .gform_wrapper .gform_button,.strak .gform_wrapper input[type=submit]{border-radius:4px}.strak .example-note{font-family:var(--mono);letter-spacing:.045em;font-weight:450}.strak .calc-result{border-radius:6px}.strak .calc-big .num{letter-spacing:-.04em}.strak .calc-pair{border-radius:5px}.strak .calc-pair .v{letter-spacing:-.04em}.strak .calc-bar .track{border-radius:4px}.strak .role-tab,.strak .role-tab .ic{border-radius:5px}.strak .app{border-radius:6px}.strak .app-bar .url{border-radius:4px}.strak .kpi,.strak .chart,.strak .board{border-radius:5px}.strak .job{border-radius:4px}.strak .job-detail{border-radius:5px}.strak .job-detail b{font-family:var(--mono);letter-spacing:.045em;font-weight:450}.strak .phone{border-radius:6px}.strak .task{border-radius:5px}.strak .pchip,.strak .task button{border-radius:4px}.strak .ph-log h5{font-family:var(--mono);letter-spacing:.045em;font-weight:450}.strak .switch,.strak .switch button,.strak .switch .pill{border-radius:4px}.strak .counter .v{letter-spacing:-.04em}.strak .stepc .node,.strak .act{border-radius:5px}.strak .pick-set legend{font-weight:600}.strak .opt{border-radius:4px}.strak .scenario{border-radius:6px}.strak .empty-chain{border-radius:5px}.strak .q>p:first-child:before{font-weight:600}.strak .seg,.strak .seg button{border-radius:4px}.strak .score{border-radius:6px}.strak .gauge .pct{letter-spacing:-.04em}.strak .score h5{font-family:var(--mono);letter-spacing:.045em;font-weight:450}.strak .wins li{border-radius:5px}.strak .tc-search input{border-radius:4px}.strak .tc-tool,.strak .tc-tool .lg{border-radius:5px}.strak .tc-answer{border-radius:6px}.strak .phase-opt{border-radius:5px}.strak .phase-map{border-radius:6px}.strak .ph-mod,.strak .ph-ic{border-radius:5px}.strak .ph-tag{font-family:var(--mono);letter-spacing:.045em;font-weight:450}.strak .exc-stage{border-radius:6px}.strak .exc-task,.strak .aw-row{border-radius:5px}.strak .aw-who{font-family:var(--mono);letter-spacing:.045em;font-weight:450}.strak .xl-stage{border-radius:6px}.strak .xl-sheet,.strak .xl-db{border-radius:5px}.strak .xl-table th{font-family:var(--mono);letter-spacing:.045em;font-weight:450}.strak .xl-status[data-v]{border-radius:4px}.strak .xl-card{border-radius:5px}.strak .xl-link,.strak .xl-link i{border-radius:4px}.strak .doc-form input[type=text],.strak .doc-form input[type=number],.strak .doc-form select{border-radius:5px}.strak .doc-paper{border-radius:4px}.strak .doc-logo{font-weight:600}.strak .doc-type,.strak .doc-fields dt,.strak .doc-lbl,.strak .doc-lines th{font-family:var(--mono);letter-spacing:.045em;font-weight:450}.strak .doc-sig{font-style:normal}.strak .doc-stamp{font-family:var(--mono);letter-spacing:.045em;border-radius:4px;font-weight:450}.strak .cs-stage{border-radius:6px}.strak .cs-chip{border-radius:4px}.strak .cs-hub{border-radius:6px}.strak .cs-screen,.strak .cs-screen li{border-radius:5px}.strak .cs-k{font-family:var(--mono);letter-spacing:.045em;font-weight:450}.strak .sm-cell{border-radius:5px}.strak .sm-who{font-family:var(--mono);letter-spacing:.045em;font-weight:450}.strak .sm-out{border-radius:5px}.strak .sm-out-k{font-family:var(--mono);letter-spacing:.045em;font-weight:450}.strak .chapters span{border-radius:4px}.strak .term-pop{border-radius:5px}.strak .term-pop strong{font-family:var(--mono);letter-spacing:.045em;font-weight:450}.strak .from-chip{border-radius:4px}.strak .from-chip span{font-family:var(--mono);letter-spacing:.045em;font-weight:450}.strak .from-chip button{border-radius:4px}.strak .duo{border-radius:6px}.strak .duo-big{letter-spacing:-.04em;font-weight:500}.strak .duo-t{font-family:var(--mono);letter-spacing:.045em;font-weight:450}.strak .duo-card{border-radius:6px}.strak .duo-who i{font-family:var(--mono);letter-spacing:.045em;border-radius:4px;font-weight:450}.strak .duo-res{border-radius:5px}.strak .duo-res span{font-family:var(--mono);letter-spacing:.045em;font-weight:450}.strak .duo-stopped{border-radius:6px}.strak .duo-q{font-family:var(--mono);letter-spacing:.045em;font-weight:450}.strak .msg.msg--typing p{border-radius:5px 5px 4px}.strak .calc-field output{border-radius:4px}.strak .path-step{border-radius:6px}.strak .path-num{letter-spacing:-.04em;font-weight:500}.strak .path-step .pillar-icon{border-radius:5px}.strak .gain strong{font-weight:600}.strak .tile-ic,.strak .mini-flow{border-radius:5px}.strak .mini-flow-head{font-family:var(--mono);letter-spacing:.045em;font-weight:450}.strak .tile-detail .mini-flow-steps li:before{font-weight:600}.strak .case-live{border-radius:4px}.strak .cv-win{border-radius:5px 5px 0 0}.strak .cv-bar b{border-radius:4px}.strak .cv-main>b{font-weight:600}.strak .cv-row,.strak .cv-row em{border-radius:4px}.strak .cv-node{border-radius:5px}.strak .cv-node i{border-radius:4px}.strak .cv-node b{font-weight:600}.strak .cv-dash{border-radius:5px 5px 0 0}.strak .cv-kpis span{border-radius:4px}.strak .cv-kpis b{font-weight:600}.strak .feature{border-radius:6px}.strak .feature-ic{border-radius:5px}.strak .feature strong{font-weight:600}.strak .auto-chips li{border-radius:4px}.strak .ha-item button{border-radius:5px 5px 0 0}.strak .case-hero-visual{border-radius:6px}.strak .chip{border-radius:4px}.strak .ba{border-radius:6px}.strak .ba-k,.strak .case-facts-k{font-family:var(--mono);letter-spacing:.045em;font-weight:450}.strak .deck-tab,.strak .deck-ic{border-radius:5px}.strak .vs-side{border-radius:6px}.strak .vs-k{font-family:var(--mono);letter-spacing:.045em;font-weight:450}.strak .rail-card{border-radius:6px}.strak .rail-n{font-family:var(--mono);letter-spacing:.045em;font-weight:450}.strak .seq-step{border-radius:5px}.strak .deck--seg .deck-tabs,.strak .give{border-radius:6px}.strak .give i{border-radius:5px}.strak .say{border-radius:6px}.strak .say-n{letter-spacing:-.04em;font-weight:500}.strak .sync-node{border-radius:6px}.strak .sync-ic{border-radius:5px}.strak .sync-wire span{border-radius:4px}.strak .sync-portal{border-radius:6px}.strak .sync-bar span{border-radius:4px}.strak .deck--who .deck-tab,.strak .deck--who .deck-stage{border-radius:5px}.strak .who-rows li{border-radius:4px}.strak .why{border-radius:6px}.strak .why i{border-radius:5px}.strak .crm-win{border-radius:6px}.strak .crm-file{border-radius:4px}.strak .crm-kpis>span,.strak .crm-rows>span{border-radius:5px}.strak .crm-rows em{border-radius:4px}.strak .sketch{border-radius:6px}.strak .sketch .tag{font-family:var(--mono);letter-spacing:.045em;font-weight:450}.strak .sketch .ba{border-radius:6px}.strak .case-kicker b{font-family:var(--mono);letter-spacing:.045em;border-radius:4px;font-weight:450}.strak .twin-node{border-radius:6px}.strak .twin-node .deck-ic,.strak .direct i{border-radius:5px}.strak .deck--hub .deck-stage{border-radius:6px}.strak .hub-dir{font-family:var(--mono);letter-spacing:.045em;font-weight:450}.strak .tl-item h3 small{border-radius:4px}.strak .awb-card{border-radius:6px}.strak .awb-ic{border-radius:5px}.strak .awb-q b{font-family:var(--mono);letter-spacing:.045em;font-weight:450}.strak .awb-a>span{border-radius:4px}.strak .awb-node{border-radius:6px}.strak .awb-node em{font-family:var(--mono);letter-spacing:.045em;border-radius:4px;font-weight:450}.strak .blog-filter .opt{border-radius:4px}.strak .blog-card,.strak .blog-card-mark{border-radius:6px}.strak .blog-card-cat span{font-family:var(--mono);letter-spacing:.045em;border-radius:4px;font-weight:450}.strak .post-aside-cta,.strak .post-body .wp-block-table{border-radius:6px}.strak .post-body thead th{font-family:var(--mono);letter-spacing:.045em;font-weight:450}.strak .post-summary,.strak .post-cta{border-radius:6px}.strak .post-body .post-cta strong{font-weight:600}.strak .post-body details{border-radius:6px}.strak .post-share a,.strak .hero-tags li{border-radius:4px}.strak .flow-state b{font-family:var(--mono);letter-spacing:.045em;border-radius:4px;font-weight:450}.strak .gform_wrapper .gfield.gfield--type-radio .gchoice label{border-radius:4px}.strak .ai-chip,.strak .ai-chip i{border-radius:5px}.strak .ai-card{border-radius:6px}.strak .ai-pill{border-radius:4px}.strak .ai-card-rows li{border-radius:5px}.strak .ai-card-rows em{border-radius:4px}.strak .deck--ai .ai-src,.strak .ai-dash{border-radius:6px}.strak .ai-tr{border-radius:5px}.strak .ai-th{font-family:var(--mono);letter-spacing:.045em;font-weight:450}.strak .ai-in i{border-radius:5px}.strak .ai-tag{border-radius:4px}.strak .ai-row.is-scan:after{border-radius:5px}.strak .band .ai-dash .ai-dash-note{font-family:var(--mono);letter-spacing:.045em;font-weight:450}.strak .ai-flow li{border-radius:5px}.strak .ai-flow small{font-family:var(--mono);letter-spacing:.045em;font-weight:450}.strak .ai-pains li,.strak .ai-pains i,.strak .ai-mini-srcs span{border-radius:5px}.strak .ai-mini-card{border-radius:6px}.strak .ai-mini-rows span{border-radius:5px}.strak .ai-link,.strak .ai-link-ic{border-radius:6px}.strak .ai-link-copy b{font-weight:600}.strak .site-header.is-scrolled:before,.strak .site-header.is-scrolled .menu-panel{border-radius:6px}.strak .strip-links a,.strak .strip .post-share a,.strak .ai-badge{border-radius:4px}.strak .footer-ask{border-radius:6px}.strak .trust-row i{border-radius:5px}.strak :is(.lib-hero-cats,.lib-card-cats) span{font-family:var(--mono);letter-spacing:.045em;border-radius:4px;font-weight:450}.strak .lib-card{border-radius:6px}.strak .lib-card-ic{border-radius:5px}.strak .lib-filter .opt b,.strak .lib-search input{border-radius:4px}.strak .lib-empty,.strak .lib-node-ic{border-radius:6px}.strak .lib-node b{font-weight:600}.strak .lib-node-tag{border-radius:4px}.strak .lib-case,.strak .lib-side{border-radius:6px}.strak .lib-tools span{border-radius:4px}.strak .lib-sector,.strak .lib-sector i{border-radius:5px}.strak .task-ask,.strak .task-ask-ic{border-radius:6px}.strak .task-ask h2{letter-spacing:-.04em}.strak .task-ask-form input{border-radius:4px}.strak .sector-card,.strak .sector-ic,.strak .sector-ic:before{border-radius:6px}.strak .sector-card--mini .sector-ic,.strak .gloss-letters a{border-radius:5px}.strak .gloss-letter{letter-spacing:-.04em;font-weight:500}.strak .gloss-item{border-radius:6px}.strak .gloss-item dt{font-weight:600}.strak .form-way,.strak .form-way-ic{border-radius:6px}.strak .form-way-k{font-family:var(--mono);letter-spacing:.045em;font-weight:450}.strak .form-way-fit{font-style:normal}.strak .form-way-track i{border-radius:4px}.strak .rounds-col{border-radius:6px}.strak .rounds-k{font-family:var(--mono);letter-spacing:.045em;font-weight:450}.strak .rounds-n{font-weight:600}.strak .rounds-empty,.strak .rounds-task{border-radius:5px}@media (width>=861px){.strak .blog-grid:not(.blog-grid--more)>.blog-item:first-child .blog-card-title{font-weight:600}}@media (width<=960px){.strak .post-toc{border-radius:6px}}@media (width<=478px){.strak .ai-pains i{border-radius:5px}}@media (width<=767px){.strak .trust-row i{border-radius:4px}.strak .lib-node-ic{border-radius:6px}}@font-face{font-family:Inter Tight;src:url(../fonts/inter-tight-latin-wght-normal.woff2)format("woff2");font-weight:100 900;font-style:normal;font-display:swap}@font-face{font-family:Inter;src:url(../fonts/inter-latin-wght-normal.woff2)format("woff2");font-weight:100 900;font-style:normal;font-display:swap}@font-face{font-family:Geist Mono;src:url(../fonts/geist-mono-latin-wght-normal.woff2)format("woff2");font-weight:100 900;font-style:normal;font-display:swap}@font-face{font-family:Newsreader;src:url(../fonts/newsreader-latin-wght-normal.woff2)format("woff2");font-weight:200 800;font-style:normal;font-display:swap}@font-face{font-family:Newsreader;src:url(../fonts/newsreader-latin-wght-italic.woff2)format("woff2");font-weight:200 800;font-style:italic;font-display:swap}:root.strak{--paper:#faf9f7;--panel:#fff;--sand:#f4f2ee;--sand-deep:#f1f2f5;--line:#e1dfda;--line-soft:#eae8e4;--hair:#e4e2dd;--ink:#0c1122;--ink-2:#4a4f62;--ink-3:#868b99;--mute:#8d919d;--navy:#0c1122;--navy-hover:#272d44;--band:#0a0f25;--band-2:#10163a;--band-ink:#f6f5f2;--band-ink-2:#a0a7bf;--band-line:#222a4c;--mute-band:#6f7796;--sq:#e0781c;--display:"Inter Tight","Inter",ui-sans-serif,system-ui,sans-serif;--sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"Geist Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;--serif:"Newsreader","Iowan Old Style",Georgia,serif;--fs-display:clamp(2.7rem,1.4rem + 4vw,4.9rem);--fs-h1-page:clamp(2.6rem,1.5rem + 3.9vw,4.5rem);--fs-h2:clamp(2.1rem,1.35rem + 2.7vw,3.45rem);--radius:6px;--radius-s:4px;--shadow-soft:0 1px 2px #0c11220d;--shadow-lift:0 1px 2px #0c11220f,0 28px 56px -36px #0c112261}.strak body{font-family:var(--sans);letter-spacing:-.006em;font-feature-settings:"cv11","ss03";background:var(--paper)}.strak :is(h1,h2,h3,h4,.h3,.tile strong,.faq summary,.story-line strong,.flow-title,.feature strong,.gain strong,.pick-set legend){font-family:var(--display)}.strak :is(h1,h2){letter-spacing:-.036em;font-weight:480}.strak :is(h3,h4,.h3){letter-spacing:-.022em;font-weight:560}.strak .display{font-size:var(--fs-display);letter-spacing:-.038em;font-weight:460;line-height:1}.strak .story .display{text-wrap:pretty;max-width:none;font-size:clamp(2.5rem,1.45rem + 2.9vw,3.7rem)}.strak .brand-name,.strak .brand-name em{letter-spacing:-.03em;font-family:Playfair Display,Georgia,serif;font-weight:700}.strak .story-line strong{letter-spacing:-.025em;font-weight:520}.strak .h2{letter-spacing:-.036em;font-weight:480;line-height:1.04}.strak .h1-page{letter-spacing:-.038em;font-weight:470;line-height:1.02}.strak :is(.display,.h2,.h1-page,.answer):has(em){color:var(--mute)}.strak :is(.display,.h2,.h1-page,.answer) em{font-style:normal;font-weight:inherit;color:var(--ink)}.strak :is(.band,.cta-band,.gains-band) :is(.display,.h2,.h1-page,.answer):has(em){color:var(--mute-band)}.strak :is(.band,.cta-band,.gains-band) :is(.display,.h2,.h1-page,.answer) em{color:#fff}.strak :is(.band,.cta-band) :is(.rail-card,.form-card,.why,.case-card,.blog-card,.ba,.path-step,.lib-card,.sector-card,.form-way) :is(.h2,h2) em{color:var(--ink)}.strak .lead{font-family:var(--serif);letter-spacing:-.003em;color:var(--ink-2);font-size:clamp(1.1rem,1.03rem + .3vw,1.26rem);font-weight:400;line-height:1.55}.strak :is(.band,.cta-band,.gains-band) .lead{color:var(--band-ink-2)}.strak .closer,.strak .manifest,.strak .form-way-fit{font-family:var(--serif);letter-spacing:-.005em;font-weight:400}.strak .manifest{font-size:clamp(1.15rem,1.05rem + .5vw,1.45rem);font-style:italic}.strak .eyebrow{font-family:var(--mono);letter-spacing:.045em;text-transform:uppercase;color:var(--ink);gap:10px;font-size:.74rem;font-weight:450}.strak .eyebrow:before{background:var(--sq);width:7px;height:7px}.strak :is(.band,.cta-band,.gains-band,.tile-detail) .eyebrow{color:var(--band-ink)}.strak :is(.band,.cta-band,.gains-band,.tile-detail) .eyebrow:before{background:var(--amber-glow)}.strak .btn{font-family:var(--sans);letter-spacing:-.01em;border-radius:4px;gap:10px;padding:13px 20px;font-size:.94rem;font-weight:500;transition:background-color .2s,color .2s,border-color .2s}.strak .btn:hover{transform:none}.strak .btn--primary{background:var(--ink);color:#fff;box-shadow:none}.strak .btn--primary:hover{background:var(--navy-hover)}.strak .btn--ghost{border-color:var(--ink);color:var(--ink);background:0 0}.strak .btn--ghost:hover{background:var(--ink);color:#fff}.strak .btn--light,.strak .section--navy .btn--primary{color:var(--ink);box-shadow:none;background:#fff}.strak .btn--light:hover,.strak .section--navy .btn--primary:hover{background:var(--amber-soft);color:var(--ink)}.strak .section--navy .btn--ghost{color:#fff;border-color:#fff6}.strak .section--navy .btn--ghost:hover{color:var(--ink);background:#fff;border-color:#fff}.strak .textlink{border-bottom:1px solid;padding-bottom:2px;font-size:.94rem;font-weight:500}.strak .textlink:hover{color:var(--ink-2)}.strak :is(.band,.cta-band) .textlink:hover{color:var(--amber-glow)}.strak{--header-h:68px}.strak .site-header:before,.strak .site-header.is-scrolled:before{box-shadow:0 1px 0 var(--line);background:#fffffffa;border-radius:0;inset:0}.strak .site-header.is-scrolled .brand{color:var(--ink)}.strak .site-header.is-scrolled .brand-name em{color:var(--amber-deep)}.strak .site-header.is-scrolled .brand-mark>rect:first-child{fill:#1b2a55;stroke:none}.strak .nav a,.strak .site-header.is-scrolled .nav--desktop a{color:var(--ink);letter-spacing:-.01em;font-size:.9rem;font-weight:450}.strak .nav a:hover,.strak .site-header.is-scrolled .nav--desktop a:hover{color:var(--ink-2)}.strak .nav a[aria-current=page],.strak .site-header.is-scrolled .nav--desktop a[aria-current=page]{color:var(--ink);border-bottom-color:var(--sq)}.strak .header-side .btn--primary,.strak .site-header.is-scrolled .header-side .btn--primary{background:var(--ink);color:#fff;box-shadow:none;border-radius:4px;font-weight:500}.strak .header-side .btn--primary:after{display:none}.strak .header-side .btn--primary:hover,.strak .site-header.is-scrolled .header-side .btn--primary:hover{background:var(--navy-hover);color:#fff}.strak .site-header.is-scrolled .menu-toggle>summary{color:var(--ink);border-color:var(--line)}.strak .site-header.is-scrolled .menu-toggle[open]>summary{background:var(--panel)}.strak .site-header.is-scrolled .menu-panel{border:0;border-bottom:1px solid var(--line);background:#fff;border-radius:0;left:0;right:0;box-shadow:0 30px 50px -40px #0c112280}.strak .site-header.is-scrolled .menu-panel .nav a{color:var(--ink);border-bottom-color:var(--line-soft)}.strak .site-header.is-scrolled .menu-panel .nav a[aria-current=page]{color:var(--amber-deep)}.sx-mk{pointer-events:none;height:0;position:absolute;top:0;left:0;right:0}.strak .sx-mk{pointer-events:none;z-index:5;height:0;position:absolute;top:0;left:0;right:0}.strak .sx-mk:before,.strak .sx-mk:after{content:"";background:var(--mk,#c9c6bf);width:6px;height:6px;position:absolute;top:18px}.strak .sx-mk:before{left:18px}.strak .sx-mk:after{right:18px}.strak :is(.band,.cta-band,.gains-band,.site-footer)>.sx-mk{--mk:#2c355c}.strak .story>.sx-mk{--mk:var(--sq);top:0}.strak .marquee{background:var(--panel);border-color:var(--line)}.strak .marquee-head{font-family:var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);font-size:.7rem;font-weight:450}.strak .marquee:not(.section--navy) .marquee-track span{box-shadow:none;font-family:var(--display);letter-spacing:-.02em;color:#9a9ea9;background:0 0;border-color:#0000;padding-inline:14px;font-size:.98rem;font-weight:560;transition:color .25s}.strak .marquee:not(.section--navy) .marquee-track span:before{box-shadow:none;opacity:.9;border-radius:1px;width:6px;height:6px}.strak .marquee:not(.section--navy) .marquee-track span:hover{color:var(--ink)}.strak .trust-row li{letter-spacing:-.01em;font-size:.88rem;font-weight:500}.strak .trust-row i{color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);background:0 0;border-radius:4px}.strak .story-steps li{font-family:var(--mono);letter-spacing:.02em;text-transform:uppercase;border-top-width:1px;font-size:.64rem;font-weight:450}.strak .story-steps li.on{border-top-width:2px;font-weight:500}.strak :is(.tile,.case-card,.lib-card,.sector-card,.blog-card,.form-way,.rail-card,.why){box-shadow:none}.strak :is(.tile,.case-card,.lib-card,.sector-card,.blog-card,.form-way):hover{box-shadow:none;border-color:var(--ink-3);transform:none}.strak .case-card{border-color:var(--line)}.strak .case-card .tag,.strak .case-card--rich .tag{font-family:var(--mono);letter-spacing:.05em;font-size:.7rem;font-weight:450}.strak .path-step{box-shadow:none}.strak .path-step:hover,.strak .path-step:focus-visible,.strak .path-step.is-on{box-shadow:none;transform:none}.strak .path-num{font-family:var(--mono);letter-spacing:.04em;color:var(--ink-3);-webkit-text-stroke:0;font-size:.82rem;font-weight:400}.strak .path-step:hover .path-num,.strak .path-step.is-on .path-num{color:var(--t)}.strak .tile[aria-pressed=true]{background:var(--ink);border-color:var(--ink);box-shadow:none}.strak .tl-num{font-family:var(--mono);border-radius:4px;font-size:.82rem;font-weight:450}.strak .tl-item.is-on .tl-num{box-shadow:none}.strak .tl-item h3 small{font-family:var(--mono);letter-spacing:.04em;text-transform:uppercase;border-radius:3px;font-size:.68rem;font-weight:450}.strak .ticks li:before{background:var(--sq);border:0;border-radius:1px;width:9px;height:9px;margin-top:8px}.strak .band .ticks li:before{background:var(--amber-glow)}.strak .gain-ic{border-radius:4px}.strak .tile-detail .mini-flow-steps li:before{font-family:var(--mono);border-radius:4px;font-weight:500}.strak .chapters i{border-radius:0;height:1px}.strak .chapters span{font-family:var(--mono);text-transform:uppercase;letter-spacing:.04em;border-radius:3px;font-size:.68rem}.strak .faq summary{letter-spacing:-.02em;font-weight:500}.strak .faq summary:after{color:var(--ink);font-weight:300}.strak .cta-band:before,.strak .gains-band:before,.strak .tile-detail:before{opacity:.55}.strak .footer-grid h2{font-family:var(--mono);letter-spacing:.06em;color:var(--band-ink-2);font-size:.7rem;font-weight:450}.strak .footer-grid a{font-size:.92rem}.strak .site-footer .ask-ai{border-radius:4px}.strak :is(.ai-mini,.usp-grid>.reveal:last-child){isolation:isolate;padding:clamp(14px,2.8vw,40px);position:relative}.strak .usp-grid>.reveal:last-child{padding:clamp(10px,1.5vw,20px) clamp(10px,1.5vw,20px) clamp(8px,1vw,12px)}.strak :is(.ai-mini,.usp-grid>.reveal:last-child):before{content:"";z-index:-1;pointer-events:none;background: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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),radial-gradient(120% 90% at 12% 0,#e3a04b42,#0000 58%),radial-gradient(90% 80% at 100% 100%,#6076ff42,#0000 60%),linear-gradient(160deg,#141c45,#0d1331);border-radius:6px;position:absolute;inset:0;box-shadow:inset 0 0 0 1px #ffffff12}.strak :not(.band)>.wrap>.usp-grid>.reveal:last-child:before{box-shadow:inset 0 0 0 1px var(--line);background:radial-gradient(120% 90% at 12% 0,#e3a04b33,#0000 58%),radial-gradient(90% 80% at 100% 100%,#6076ff24,#0000 60%),linear-gradient(160deg,#f1ece4,#e9ebf1)}@media (width>=992px){.strak .gains>li+li{border-left:1px solid var(--band-line);padding-left:clamp(18px,2.4vw,36px)}}@media (width<=767px){.strak .sx-mk:before,.strak .sx-mk:after{width:5px;height:5px;top:8px}.strak .sx-mk:before{left:8px}.strak .sx-mk:after{right:8px}.strak .story>.sx-mk{display:none}}.sx-switch{z-index:999;letter-spacing:.04em;text-transform:uppercase;background:#0c1122;border-radius:6px;gap:2px;padding:3px;font:500 12px/1 Geist Mono,ui-monospace,monospace;display:inline-flex;position:fixed;bottom:16px;left:16px;box-shadow:0 12px 30px -12px #00000080}.sx-switch button{all:unset;cursor:pointer;color:#a0a7bf;border-radius:4px;padding:9px 12px}.sx-switch button[aria-pressed=true]{color:#0c1122;background:#fff}@media (width<=767px){.sx-switch{font-size:11px;bottom:12px;left:auto;right:12px}.sx-switch button{padding:8px 10px}}@font-face{font-family:Caveat;src:url(../fonts/caveat-latin-wght-normal.woff2)format("woff2");font-weight:400 700;font-style:normal;font-display:swap}:root.speels{--hand:"Caveat","Segoe Print","Bradley Hand",cursive;--spring:cubic-bezier(.34,1.56,.64,1);--glide:cubic-bezier(.7,0,.2,1)}.sx-ticker,.sx-progress,.sx-chip,.sx-br,.sx-note,.sx-stickers,.sx-spot,html:not(.speels) .sx-rb{display:none}.speels .sx-ticker{z-index:51;background:var(--ink);color:#e9e7e1;height:30px;display:block;position:relative;overflow:hidden}.speels .sx-ticker-track{align-items:center;gap:18px;width:max-content;height:100%;padding-left:18px;animation:46s linear infinite sxTick;display:flex}.speels .sx-ticker span{font:450 .68rem/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}.speels .sx-ticker .sx-star{color:var(--amber-glow);flex:none;width:11px;height:11px;animation:9s linear infinite sxSpin}.speels .sx-ticker:hover .sx-ticker-track{animation-play-state:paused}@keyframes sxTick{to{transform:translate(-50%)}}@keyframes sxSpin{to{rotate:360deg}}.speels .sx-progress{transform-origin:0;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--amber-glow),var(--tone-rose));pointer-events:none;z-index:2;width:100%;height:2px;display:block;position:absolute;bottom:-1px;left:0}.speels .sx-chipped .sx-orig{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.speels .sx-br{display:inline}.speels .sx-chip{--t:var(--tone-amber);vertical-align:baseline;background:color-mix(in srgb,var(--t)15%,#fff);color:var(--ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t)22%,transparent),0 14px 30px -20px color-mix(in srgb,var(--t)80%,transparent);border-radius:999px;align-items:center;gap:.2em;margin:.04em 0 0;padding:.02em .32em .06em .24em;line-height:1;transition:background-color .6s,box-shadow .6s;display:inline-flex}.speels .sx-chip-dot{background:var(--t);border-radius:50%;flex:none;width:.26em;height:.26em;transition:background-color .6s;animation:2.4s ease-in-out infinite sxPulse}.speels .sx-chip-win{transition:width .55s var(--glide);height:1.08em;display:inline-block;position:relative;overflow:hidden}.speels .sx-chip-win b{font-weight:inherit;white-space:nowrap;transition:transform .6s var(--glide),opacity .5s ease;line-height:1.04;position:absolute;top:0;left:0}.speels .sx-chip-win b.is-below{opacity:0;transition:none;transform:translateY(105%)}.speels .sx-chip-win b.is-above{opacity:0;transform:translateY(-105%)}@keyframes sxPulse{50%{transform:scale(.72)}}.speels .sx-w{clip-path:inset(-.1em -.3em -.24em);display:inline-block}.speels .sx-split .sx-w>span{transition:transform .9s var(--glide);transition-delay:calc(var(--i)*38ms);display:inline-block;transform:translateY(108%)}.speels .sx-split.sx-in .sx-w>span{transform:none}.speels .sx-scr{-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .8s var(--glide).3s;background:0 100%/0% .34em no-repeat;padding-bottom:.1em}.speels .sx-scr--0{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M3 10c40-6 92-8 194-3' fill='none' stroke='%23E0781C' stroke-width='3.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}.speels .sx-scr--1{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M3 8c30 5 60-4 98 0s70 4 96-2' fill='none' stroke='%23E0781C' stroke-width='3.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}.speels .sx-scr--2{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M3 9c56-5 118-6 194-2M14 13c50-3 100-3 160-1' fill='none' stroke='%23E0781C' stroke-width='2.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}.speels :is(.band,.cta-band,.gains-band) .sx-scr--0{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M3 10c40-6 92-8 194-3' fill='none' stroke='%23F0B060' stroke-width='3.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}.speels :is(.band,.cta-band,.gains-band) .sx-scr--1{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M3 8c30 5 60-4 98 0s70 4 96-2' fill='none' stroke='%23F0B060' stroke-width='3.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}.speels :is(.band,.cta-band,.gains-band) .sx-scr--2{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M3 9c56-5 118-6 194-2M14 13c50-3 100-3 160-1' fill='none' stroke='%23F0B060' stroke-width='2.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}.speels .sx-in .sx-scr,.speels .sx-in.sx-scr{background-size:100% .34em}.speels .sx-roll{vertical-align:top;margin-block:-.06em;padding-block:.06em;display:inline-grid;overflow:hidden}.speels .sx-ra,.speels .sx-rb{transition:transform .5s var(--glide);grid-area:1/1}.speels .sx-rb{transform:translateY(115%)}.speels .btn:hover .sx-ra,.speels .btn:focus-visible .sx-ra{transform:translateY(-115%)}.speels .btn:hover .sx-rb,.speels .btn:focus-visible .sx-rb{transform:none}.speels main .btn{transition:background-color .25s ease,color .25s ease,border-color .25s ease,translate .5s var(--spring)}.speels .btn--primary:hover .arrow,.speels .btn--light:hover .arrow{transform:translate(3px)rotate(-45deg)}.speels .btn .arrow{transition:transform .45s var(--spring)}.speels .textlink{background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;border-bottom-color:#0000}.speels .textlink:hover{animation:sxLine .7s var(--glide)}@keyframes sxLine{0%{background-position:right 100%;background-size:100% 1px}45%{background-position:right 100%;background-size:0 1px}46%{background-position:0 100%;background-size:0 1px}to{background-position:0 100%;background-size:100% 1px}}.speels .path-step{background:color-mix(in srgb,var(--t)6%,#fff);border-color:color-mix(in srgb,var(--t)16%,#fff);border-radius:16px}.speels :is(.case-card,.lib-card,.sector-card,.blog-card,.form-way){border-radius:16px}.speels :is(.tile,.tile-detail){border-radius:14px}.speels :is(.ai-mini,.usp-grid>.reveal:last-child):before{border-radius:18px}.speels .tile-ic,.speels .path-step .pillar-icon{border-radius:10px}.strak.speels .sx-tilt{transform:perspective(1000px)rotateX(var(--rx,0deg))rotateY(var(--ry,0deg));transition:transform .5s var(--glide),background-color .3s ease,border-color .3s ease;will-change:transform}.strak.speels .sx-tilt:hover{transform:perspective(1000px)rotateX(var(--rx,0deg))rotateY(var(--ry,0deg))translateY(-4px);transition:transform .15s linear,background-color .3s,border-color .3s}.speels .tile:hover .tile-ic,.speels .gain:hover .gain-ic{animation:sxWiggle .55s var(--spring)}@keyframes sxWiggle{30%{rotate:-9deg;scale:1.08}60%{rotate:6deg}to{rotate:none;scale:1}}.speels .section--sand{background-image:radial-gradient(color-mix(in srgb,var(--ink)9%,transparent)1px,transparent 1.3px);background-position:11px 11px;background-size:22px 22px}.speels .sx-tool{background:color-mix(in srgb,var(--c)11%,#fff);color:color-mix(in srgb,var(--c)78%,#000);line-height:1.45;font-family:var(--sans);letter-spacing:-.01em;white-space:nowrap;border-radius:6px;align-items:center;gap:.32em;margin:0 .04em;padding:0 .38em;font-size:.92em;font-weight:500;display:inline-flex}.speels .sx-tool:before{content:"";background:var(--c);border-radius:2px;flex:none;width:.42em;height:.42em}.speels :is(.band,.cta-band) .sx-tool{background:color-mix(in srgb,var(--c)26%,transparent);color:#fff}.speels .sx-note{z-index:6;pointer-events:none;color:var(--sq);font:600 1.32rem/1 var(--hand);letter-spacing:0;white-space:nowrap;opacity:0;transform:translateY(6px)rotate(var(--nr,-4deg));transition:opacity .6s ease .2s,transform .8s var(--spring).2s;display:inline-flex;position:absolute}.speels .sx-note.sx-in,.speels .sx-in>.sx-note{opacity:1;transform:rotate(var(--nr,-4deg))}.speels .sx-note svg{flex:none;width:54px;height:40px}.speels :is(.band,.cta-band) .sx-note{color:var(--amber-glow)}.speels .sx-note--cs{--nr:-3deg;flex-direction:row-reverse;align-items:flex-end;gap:2px;top:-46px;right:4%}.speels .sx-note--cs svg{transform:translateY(26px)}.speels .sx-note--calc{--nr:-3deg;align-items:flex-end;top:-46px;right:70px}.speels .sx-note--calc svg{transform:translateY(22px)}.speels .sx-note--scan{--nr:-5deg;flex-direction:column;align-items:center;top:-54px;right:6%}.speels .sx-note--scan svg{width:30px;height:38px}.speels .sx-note--tiles{--nr:-4deg;align-items:flex-end;top:-52px;left:34%}.speels .sx-note--tiles svg{transform:translateY(22px)}.speels .sx-stickers{width:100%;max-width:470px;height:230px;margin-bottom:8px;display:block;position:relative}.speels .sx-sticker{--dx:0px;--dy:0px;color:var(--ink);font:560 .92rem/1.22 var(--display);letter-spacing:-.015em;translate:var(--dx)var(--dy);rotate:var(--r);opacity:0;transition:scale .7s var(--spring),opacity .4s ease,rotate .5s var(--spring),box-shadow .3s ease;cursor:grab;user-select:none;touch-action:none;background:#fff;border-radius:14px;align-items:center;gap:10px;max-width:212px;padding:11px 16px 11px 11px;display:inline-flex;position:absolute;scale:.6;box-shadow:inset 0 1px #fff9,0 18px 36px -18px #0000008c,0 2px 6px #00000026}.speels .sx-sticker i{background:color-mix(in srgb,var(--t)14%,#fff);color:var(--t);border-radius:10px;flex:none;place-items:center;width:34px;height:34px;display:grid}.speels .sx-sticker i svg{width:18px;height:18px}.speels .sx-sticker:after{content:"";background:color-mix(in srgb,var(--t)30%,#f6efe2);opacity:.85;border-radius:2px;width:38px;height:14px;position:absolute;top:-7px;left:50%;translate:-50%;rotate:-3deg}.speels .sx-sticker--0{--r:-5deg;transition-delay:50ms;top:14px;left:0}.speels .sx-sticker--1{--r:4deg;transition-delay:.15s;top:0;right:2%}.speels .sx-sticker--2{--r:3deg;transition-delay:.25s;top:108px;left:5%}.speels .sx-sticker--3{--r:-4deg;transition-delay:.35s;top:96px;right:0}.speels .sx-stickers.sx-in .sx-sticker{opacity:1;scale:1}.speels .sx-sticker:hover{rotate:calc(var(--r)*-1)}.speels .sx-sticker.is-drag{cursor:grabbing;transition:scale .2s,rotate .3s;scale:1.06;box-shadow:0 30px 50px -20px #0009,0 4px 10px #0003}.speels .sx-note--stick{--nr:-6deg;flex-direction:column;align-items:center;bottom:-10px;right:30%}.speels .sx-note--stick svg{width:28px;height:34px}.speels .sx-spot{pointer-events:none;z-index:0;opacity:0;background:radial-gradient(560px circle at var(--mx,50%)var(--my,0px),#f0b0601c,transparent 62%);transition:opacity .5s;display:block;position:absolute;inset:0}.speels :is(.band,.cta-band,.gains-band):hover>.sx-spot{opacity:1}.speels :is(.band,.cta-band,.gains-band)>.wrap{z-index:1;position:relative}.speels .sx-mk:before,.speels .sx-mk:after{background:var(--mk-s,var(--sq));opacity:.8;width:11px;height:11px;animation:14s linear infinite sxSpin;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v18M4.2 7.5l15.6 9M4.2 16.5l15.6-9' stroke='black' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v18M4.2 7.5l15.6 9M4.2 16.5l15.6-9' stroke='black' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") 50%/contain no-repeat}.speels .sx-mk:after{animation-direction:reverse}.speels :is(.band,.cta-band,.gains-band,.site-footer)>.sx-mk{--mk-s:var(--amber-glow)}.speels .eyebrow:before{transition:rotate .9s var(--spring),border-radius .9s ease}.speels .eyebrow.sx-in:before{border-radius:2px;rotate:135deg}@media (width<=991px){.speels .sx-note--tiles{left:auto;right:0}}@media (width<=767px){.speels .sx-note--calc,.speels .sx-note--tiles{display:none}.speels .sx-note--cs{font-size:1.15rem;top:-40px}.speels .sx-note--scan{font-size:1.15rem;top:-46px;right:0}.speels .sx-stickers{flex-wrap:wrap;gap:12px 10px;height:auto;padding:8px 0 34px;display:flex}.speels .sx-sticker{padding:9px 13px 9px 9px;font-size:.86rem;position:relative;top:auto;left:auto}.speels .sx-sticker i{width:30px;height:30px}.speels .sx-note--stick{bottom:0;right:4px}.speels .sx-chip{padding-inline:.2em .26em}}@media (prefers-reduced-motion:reduce){.speels .sx-split .sx-w>span{transition:none;transform:none}.speels .sx-scr{background-size:100% .34em;transition:none}.speels .sx-ticker-track,.speels .sx-star,.speels .sx-mk:before,.speels .sx-mk:after,.speels .sx-chip-dot{animation:none}.speels .sx-sticker,.speels .sx-note{opacity:1;scale:1;transform:rotate(var(--nr,-4deg));transition:none}}.sx-switch button{white-space:nowrap}.speels ::selection{background:color-mix(in srgb,var(--amber-glow)45%,#fff);color:var(--ink)}.speels :is(a,button,input,select,textarea,summary):focus-visible{outline:2px solid var(--amber-glow);outline-offset:3px;border-radius:4px}.speels .sx-stickers{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px;height:auto;padding:12px 0 70px;display:grid}.speels .sx-sticker{max-width:none;position:relative;top:auto;left:auto;right:auto}.speels .sx-sticker--0,.speels .sx-sticker--3{margin-top:0}.speels .sx-sticker--1,.speels .sx-sticker--2{margin-top:10px}.speels .sx-note--stick{bottom:0;left:50%;right:auto;translate:-50%}@media (width<=380px){.speels .sx-stickers{grid-template-columns:minmax(0,1fr)}.speels .sx-sticker--1,.speels .sx-sticker--2{margin-top:0}}.hx{--glide:cubic-bezier(.7,0,.2,1);--spring:cubic-bezier(.34,1.56,.64,1);isolation:isolate;background:var(--paper);padding-block:clamp(44px,6.4vw,96px) clamp(44px,5.4vw,84px);position:relative;overflow:hidden}.hx:before{content:"";z-index:-2;pointer-events:none;background:radial-gradient(55% 45% at 12% 0,#f0b06033,#0000 70%),radial-gradient(45% 40% at 92% 8%,#6e78ff21,#0000 70%),radial-gradient(60% 40% at 50% 100%,#f0b06014,#0000 70%);position:absolute;inset:0}.hx:after{content:"";z-index:-1;pointer-events:none;opacity:.7;background-image:linear-gradient(var(--line-soft)1px,transparent 1px),linear-gradient(90deg,var(--line-soft)1px,transparent 1px);background-position:50% -1px;background-size:72px 72px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(70% 55% at 50% 0,#000 25%,#0000 78%);mask-image:radial-gradient(70% 55% at 50% 0,#000 25%,#0000 78%)}.hx-copy{text-align:center;flex-direction:column;align-items:center;gap:22px;max-width:940px;margin-inline:auto;display:flex}.hx-pill{border:1px solid var(--line);font:500 .84rem/1.2 var(--sans);color:var(--ink);backdrop-filter:blur(8px);background:#ffffffd1;border-radius:999px;align-items:center;gap:10px;margin:0;padding:5px 14px 5px 5px;display:inline-flex;box-shadow:0 1px 2px #0c11220a,0 10px 24px -18px #0c112259}.hx-pill-b{background:var(--ink);color:#fff;font:500 .66rem/1 var(--mono,monospace);letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:4px 9px}.hx-pill>i{background:var(--line);width:1px;height:14px}.hx-pill-tools{color:var(--ink-3)}.hx .hx-title{max-width:16ch;margin:0;font-size:clamp(2.6rem,1.05rem + 5.3vw,5.6rem);line-height:.98}.strak .hx .hx-title{letter-spacing:-.046em;font-weight:470}.hx .hx-lead{text-align:center;max-width:37em;margin:0}.hx .hx-ctas{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:6px;display:flex}.hx-demo{flex-direction:column;align-items:center;margin-top:clamp(40px,5vw,64px);display:flex}.hx-toggle{border:1px solid var(--line);background:#fff;border-radius:12px;gap:2px;margin-bottom:18px;padding:4px;display:inline-flex;position:relative;box-shadow:0 1px 2px #0c11220d,0 14px 30px -22px #0c112273}.hx-thumb{top:4px;bottom:4px;left:var(--tx,4px);width:var(--tw,50%);background:var(--ink);transition:left .55s var(--glide),width .55s var(--glide),background-color .4s ease;border-radius:9px;position:absolute;box-shadow:0 6px 16px -8px #0c1122b3}.hx-toggle button{all:unset;z-index:1;cursor:pointer;font:500 .9rem/1 var(--sans);letter-spacing:-.01em;color:var(--ink-2);white-space:nowrap;border-radius:9px;align-items:center;gap:8px;padding:10px 16px;transition:color .35s;display:inline-flex;position:relative}.hx-toggle button svg{flex:none;width:16px;height:16px}.hx-toggle button[aria-pressed=true]{color:#fff}.hx-toggle button:focus-visible{outline:2px solid var(--amber-glow);outline-offset:2px}.hx-stage{isolation:isolate;border:1px solid var(--line);background:radial-gradient(80% 70% at 15% 10%,#fbf4ea,#0000 60%),radial-gradient(70% 70% at 90% 90%,#eceefa,#0000 60%),#f4f2ee;border-radius:20px;width:100%;height:548px;position:relative;overflow:hidden;box-shadow:inset 0 1px #fffc,0 50px 90px -60px #0c11228c}.hx-stage:before{content:"";z-index:-1;background-image:radial-gradient(color-mix(in srgb,var(--ink)11%,transparent)1px,transparent 1.3px);background-size:20px 20px;transition:opacity .8s;position:absolute;inset:0}.hx-stage.is-system:before{opacity:.35}.hx-beam{z-index:6;pointer-events:none;opacity:0;filter:blur(6px);background:linear-gradient(90deg,#0000,#f0b0604d 40%,#ffffffbf 50%,#7c5cff3d 60%,#0000);width:30%;position:absolute;top:-10%;bottom:-10%;left:-35%}.hx-stage.is-sorting .hx-beam{animation:hxBeam 1.25s var(--glide)both}@keyframes hxBeam{0%{opacity:0;left:-35%}12%{opacity:1}88%{opacity:1}to{opacity:0;left:105%}}.hx-win{z-index:1;border:1px solid var(--line);opacity:0;transition:opacity .55s ease,scale .8s var(--glide);background:#fff;border-radius:14px;width:min(960px,100% - 64px);height:fit-content;margin:auto;position:absolute;inset:0;scale:.965;box-shadow:0 2px 4px #0c11220a,0 40px 80px -40px #0c112273}.hx-stage.is-system .hx-win{opacity:1;scale:1}.hx-win-top{border-bottom:1px solid var(--line-soft);align-items:center;gap:16px;height:54px;padding:0 18px;display:flex}.hx-dots{gap:6px;display:inline-flex}.hx-dots i{background:#e3e1dc;border-radius:50%;width:9px;height:9px}.hx-win-top>b{font:600 .95rem/1 var(--display);letter-spacing:-.02em;color:var(--ink);white-space:nowrap}.hx-tabs{gap:4px;margin-left:6px;display:inline-flex}.hx-tabs span{font:500 .78rem/1 var(--sans);color:var(--ink-3);border-radius:7px;padding:6px 10px}.hx-tabs span.on{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-soft)}.hx-tabs em{background:var(--ink);color:#fff;border-radius:99px;margin-left:4px;padding:1px 6px;font-size:.68rem;font-style:normal}.hx-ai{margin-left:auto;display:inline-grid;position:relative}.hx-ai>span{font:600 .76rem/1 var(--sans);white-space:nowrap;transition:opacity .4s ease,translate .4s var(--glide);border-radius:99px;grid-area:1/1;align-items:center;gap:7px;padding:6px 11px;display:inline-flex}.hx-ai-a{background:var(--amber-mist);color:var(--amber-deep);box-shadow:inset 0 0 0 1px var(--amber-soft)}.hx-ai-b{background:color-mix(in srgb,var(--tone-green)11%,#fff);color:var(--tone-green);opacity:0;translate:0 6px}.hx-ai-b svg{width:13px;height:13px}.hx-stage.is-done .hx-ai-a{opacity:0;translate:0 -6px}.hx-stage.is-done .hx-ai-b{opacity:1;translate:0}.hx-spin{border:2px solid;border-right-color:#0000;border-radius:50%;width:11px;height:11px;animation:.8s linear infinite hxSpin}@keyframes hxSpin{to{rotate:360deg}}.hx-cols,.hx-row{grid-template-columns:minmax(0,1.75fr) minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.05fr);align-items:center;gap:14px;padding:0 18px;display:grid}.hx-cols{border-bottom:1px solid var(--line-soft);font:500 .64rem/1 var(--mono,monospace);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);height:38px}.hx-slots{margin:0;padding:0;list-style:none}.hx-slots li{border-bottom:1px solid var(--line-soft);height:58px}.hx-win-foot{font:500 .62rem/1 var(--mono,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);justify-content:flex-end;align-items:center;height:34px;margin:0;padding:0 18px;display:flex}.hx-cards{z-index:2;pointer-events:none;position:absolute;inset:0}.hx-card{left:var(--cx,0);top:var(--cy,0);width:var(--cw,220px);height:var(--ch,100px);rotate:var(--cr,0deg);z-index:calc(2 + var(--i));translate:calc(var(--px,0)*var(--d,10px))calc(var(--py,0)*var(--d,10px));transition:left .95s var(--glide),top .95s var(--glide),width .95s var(--glide),height .95s var(--glide),rotate .95s var(--glide),translate .6s ease-out;transition-delay:calc(var(--i)*85ms),calc(var(--i)*85ms),calc(var(--i)*85ms),calc(var(--i)*85ms),calc(var(--i)*85ms),0s;position:absolute}.hx-stage.is-system .hx-card{left:var(--sx,0);top:var(--sy,0);width:var(--sw,100%);height:var(--sh,58px);pointer-events:auto;translate:none;rotate:none}.hx-stage.is-chaos .hx-cards{pointer-events:auto}.hx-raw,.hx-row{position:absolute;inset:0}.hx-raw{color:var(--ink);transition:opacity .3s ease calc(.25s + var(--i)*85ms),scale .3s ease;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 2px #0c11220f,0 22px 44px -24px #0c112280}.hx-stage.is-chaos .hx-raw{opacity:1;animation:hxFloat var(--fd,6s)ease-in-out infinite alternate;transition-delay:.25s,0s}.hx-stage.is-system .hx-raw{opacity:0}.hx-stage.is-chaos .hx-card:hover .hx-raw{scale:1.035}@keyframes hxFloat{0%{transform:translate(0)rotate(0)}to{transform:translateY(-9px)rotate(1.4deg)}}.hx-row{opacity:0;box-shadow:inset 0 -1px 0 var(--line-soft);background:#fff;transition:opacity .35s,background-color .2s}.hx-stage.is-system .hx-row{opacity:1;transition-delay:calc(.38s + var(--i)*85ms),0s}.hx-card:last-child .hx-row{box-shadow:none}.hx-stage.is-system .hx-card:hover .hx-row{background:#fbfaf7}.hx-row>*{min-width:0}.hx-row .hx-ic{grid-column:1}.hx-row,.hx-cols{grid-template-columns:34px minmax(0,1.75fr) minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.05fr)}.hx-cols span:first-child{grid-column:1/span 2}.hx-ic{background:color-mix(in srgb,var(--t)12%,#fff);color:var(--t);border-radius:9px;place-items:center;width:34px;height:34px;display:grid}.hx-ic svg{width:17px;height:17px}.hx-name{flex-direction:column;gap:2px;display:flex}.hx-name b{font:600 .9rem/1.2 var(--display);letter-spacing:-.015em;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.hx-name small{color:var(--ink-3);white-space:nowrap;text-overflow:ellipsis;font-size:.74rem;overflow:hidden}.hx-tag{box-shadow:inset 0 0 0 1px var(--line);font:500 .64rem/1 var(--mono,monospace);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap;border-radius:6px;justify-self:start;padding:4px 8px}.hx-model{background:color-mix(in srgb,var(--m)10%,#fff);color:color-mix(in srgb,var(--m)70%,#000);font:600 .76rem/1 var(--sans);white-space:nowrap;border-radius:99px;justify-self:start;align-items:center;gap:7px;padding:5px 10px 5px 8px;display:inline-flex}.hx-model:before{content:"";background:var(--m);border-radius:50%;width:7px;height:7px}.hx-status{background:color-mix(in srgb,var(--tone-green)11%,#fff);color:var(--tone-green);font:600 .76rem/1 var(--sans);white-space:nowrap;border-radius:99px;justify-self:start;align-items:center;gap:6px;padding:5px 10px;display:inline-flex}.hx-status:before{content:"";background:currentColor;border-radius:50%;width:6px;height:6px}.hx-status--wait{background:var(--amber-mist);color:var(--amber-deep)}.hx-status--live{background:color-mix(in srgb,var(--tone-blue)10%,#fff);color:var(--tone-blue)}.hx-stage.is-system :is(.hx-status,.hx-model){animation:hxPop .55s var(--spring)both;animation-delay:calc(.95s + var(--i)*90ms)}@keyframes hxPop{0%{opacity:0;scale:.6}to{opacity:1;scale:1}}.hx-badge{color:#fff;font:700 .64rem/1 var(--sans);background:#e5484d;border-radius:99px;padding:3px 7px;animation:2.6s ease-in-out infinite hxPing;position:absolute;top:8px;right:8px;box-shadow:0 4px 10px -4px #e5484dcc}.hx-raw--xls .hx-badge{color:#7a5300;box-shadow:none;background:#ffe9a8;font-weight:600;top:auto;bottom:10px;right:10px}.hx-xh{color:#fff;font:500 .68rem/1 var(--mono,monospace);white-space:nowrap;background:#1d6f42;align-items:center;gap:8px;height:28px;padding:0 10px;display:flex;overflow:hidden}.hx-xh i{background:#ffffffd9;border-radius:2px;flex:none;width:12px;height:12px}.hx-xg{background:linear-gradient(#e7e8ec 1px,#0000 1px) 0 -1px/100% 26px,linear-gradient(90deg,#e7e8ec 1px,#0000 1px) -1px 0/33.34% 100%;grid-template-columns:repeat(3,1fr);grid-auto-rows:26px;display:grid;position:absolute;inset:28px 0 0}.hx-xg span{grid-column:var(--c);grid-row:var(--r);font:500 .7rem/1 var(--sans);color:#3d4252;white-space:nowrap;align-items:center;padding:0 8px;display:flex;overflow:hidden}.hx-xg span[style*=--r\:1]{color:#1d6f42;background:#f1f7f3;font-weight:700}.hx-xq{background:#fff4c2;box-shadow:inset 0 0 0 1.5px #f2c230}.hx-raw--mail{padding:12px 14px}.hx-mh{align-items:center;gap:10px;display:flex}.hx-mh>i{color:#2d5bd0;font:700 .7rem/1 var(--sans);background:#e8eefc;border-radius:50%;flex:none;place-items:center;width:30px;height:30px;font-style:normal;display:grid}.hx-mh span{flex-direction:column;min-width:0;display:flex}.hx-mh b{font:700 .8rem/1.2 var(--sans)}.hx-mh small{color:var(--ink-2);white-space:nowrap;text-overflow:ellipsis;font-size:.72rem;overflow:hidden}.hx-mh em{color:var(--ink-3);align-self:flex-start;margin-left:auto;padding-right:26px;font-size:.68rem;font-style:normal}.hx-raw--mail p{color:var(--ink-2);-webkit-line-clamp:1;-webkit-box-orient:vertical;margin:8px 0;font-size:.74rem;line-height:1.35;display:-webkit-box;overflow:hidden}.hx-att{font:500 .66rem/1 var(--mono,monospace);color:var(--ink-2);background:#f3f3f1;border-radius:6px;align-items:center;gap:6px;padding:4px 8px;display:inline-flex}.hx-att:before{content:"";background:#e5484d;border-radius:1px;width:8px;height:10px}.hx-raw--chat{background:#efeae2;padding:10px 12px}.hx-ch{align-items:baseline;gap:6px;margin-bottom:8px;display:flex}.hx-ch b{font:700 .76rem/1 var(--sans)}.hx-ch small{color:var(--ink-3);font-size:.68rem}.hx-raw--chat .hx-badge{box-shadow:none;background:#25d366;top:9px;right:10px}.hx-bub{font:500 .76rem/1.35 var(--sans);color:#1f2433;background:#fff;border-radius:10px 10px 10px 3px;margin:0;padding:8px 10px 16px;position:relative;box-shadow:0 1px 1px #00000014}.hx-bub em{color:var(--ink-3);font-size:.6rem;font-style:normal;position:absolute;bottom:4px;right:8px}.hx-raw--photo{background:#fff;padding:8px 8px 0}.hx-ph{background:linear-gradient(160deg,#8c7b6b,#5e5146);border-radius:4px;height:calc(100% - 30px);position:relative;overflow:hidden}.hx-ph-doc{background:#f7f3ea;border-radius:2px;flex-direction:column;gap:8px;width:74%;height:92%;padding:12px 10px;display:flex;position:absolute;top:10%;left:14%;rotate:-7deg;box-shadow:0 10px 20px -8px #0009}.hx-ph-doc b{font:800 .6rem/1 var(--sans);letter-spacing:.12em;color:#2f3443}.hx-ph-doc i{background:#cfc6b4;border-radius:3px;height:5px}.hx-ph-doc i:nth-child(3){width:70%}.hx-ph-doc i:nth-child(4){width:84%}.hx-ph-doc i:nth-child(5){width:52%}.hx-raw--photo small{text-align:center;line-height:30px;font:500 .64rem/30px var(--mono,monospace);color:var(--ink-3);height:30px;display:block}.hx-raw--pdf{align-items:center;gap:12px;padding:12px 14px;display:flex}.hx-raw--pdf>i{color:#d4343a;font:800 .66rem/1 var(--sans);background:#fdecec;border-radius:6px;flex:none;place-items:center;width:40px;height:48px;font-style:normal;display:grid;box-shadow:inset 0 0 0 1px #f6c9ca}.hx-raw--pdf span{flex-direction:column;gap:3px;min-width:0;display:flex}.hx-raw--pdf b{font:600 .76rem/1.2 var(--mono,monospace);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.hx-raw--pdf small{color:var(--ink-3);font-size:.7rem}.hx-raw--note{background:linear-gradient(#ffe98f,#ffdf6e);border-radius:4px;padding:18px 16px;overflow:visible}.hx-raw--note:before{content:"";background:#ffffff8c;width:54px;height:16px;position:absolute;top:-8px;left:50%;translate:-50%;rotate:3deg;box-shadow:0 1px 2px #00000014}.hx-raw--note p{color:#4a3b12;margin:0;font:600 1.3rem/1.1 Caveat,Segoe Print,cursive}@keyframes hxPing{0%,70%,to{scale:1}80%{scale:1.18}90%{scale:.96}}.hx-raw--xls .hx-badge{animation:none}.hx-foot{font:500 .8rem/1.3 var(--sans);color:var(--ink-3);align-items:center;gap:10px;width:100%;margin:14px 0 0;display:flex}.hx-live{background:var(--tone-green);box-shadow:0 0 0 4px color-mix(in srgb,var(--tone-green)18%,transparent);border-radius:50%;width:8px;height:8px;animation:1.8s ease-in-out infinite hxLive}.hx-demo.is-manual .hx-live{background:var(--ink-3);box-shadow:none;animation:none}@keyframes hxLive{50%{box-shadow:0 0 0 8px #0000}}.hx-hand{z-index:7;color:var(--sq,#e0781c);opacity:0;pointer-events:none;font:600 1.45rem/1 Caveat,cursive;transition:opacity .5s;display:none;position:absolute;bottom:5%;right:4%;rotate:-5deg}.speels .hx-hand{display:block}.speels .hx-stage.is-chaos .hx-hand{opacity:1;transition-delay:.6s}@media (width<=991px){.hx-stage{height:560px}.hx-row,.hx-cols{grid-template-columns:34px minmax(0,1.6fr) minmax(0,.8fr) minmax(0,1.1fr)}.hx-row .hx-model,.hx-cols span:nth-child(3),.hx-tabs span:nth-child(n+3){display:none}}@media (width<=767px){.hx-copy{gap:18px}.hx-pill-tools,.hx-pill>i{display:none}.hx-stage{border-radius:16px;height:600px}.hx-win{width:calc(100% - 24px)}.hx-tabs,.hx-cols{display:none}.hx-win-top{gap:10px;height:48px;padding:0 14px}.hx-dots{display:none}.hx-slots li{height:64px}.hx-row{grid-template-rows:auto auto;grid-template-columns:32px minmax(0,1fr);align-content:center;gap:5px 12px;padding:0 14px}.hx-row .hx-ic{grid-row:1/span 2;width:32px;height:32px}.hx-row .hx-tag,.hx-row .hx-model{display:none}.hx-row .hx-name{grid-column:2}.hx-row .hx-name small{display:none}.hx-row .hx-status{grid-area:2/2;padding:4px 8px;font-size:.7rem}.hx-toggle button{padding:10px 12px;font-size:.84rem}.hx-foot{font-size:.76rem}.hx-hand{font-size:1.25rem;bottom:2%}}@media (width<=380px){.hx-toggle button svg{display:none}}@media (prefers-reduced-motion:reduce){.hx-card,.hx-raw,.hx-row,.hx-win,.hx-thumb{transition:none!important;animation:none!important}.hx-beam,.hx-spin,.hx-live{animation:none!important}}.story.band,.story.band .story-line strong{color:var(--band-ink)}.story.band .story-line span,.story.band .story-hint{color:var(--band-ink-2)}.story.band .story-steps li{border-color:var(--band-line);color:var(--band-ink-2)}.story.band .btn--primary,.strak .story.band .btn--primary{color:#0c1122;box-shadow:none;background:#fff}.story.band .btn--primary:hover,.strak .story.band .btn--primary:hover{color:#0c1122;background:#f0dcbe}.story.band .btn--ghost{color:#fff;border-color:#fff6}.story.band .btn--ghost:hover{color:#0c1122;background:#fff;border-color:#fff}.speels .story.band .sx-chip{background:color-mix(in srgb,var(--t)30%,var(--band));color:#fff;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t)45%,transparent),0 14px 30px -18px color-mix(in srgb,var(--t)90%,transparent)}.speels .story.band .sx-chip-dot{background:color-mix(in srgb,var(--t)70%,#fff)}.hx-stage:not(.is-ready) .hx-card{opacity:0}:root.osmo{--ox-dark:#11152a;--ox-dark-2:#1a1f3a;--ox-dark-3:#232947;--ox-violet:#6a4cf5;--ox-chip:#e6e3dd;--header-h:72px}.ox-menu-btn,.ox-ticker,.ox-menu,.ox-dim,.ox-ast,.ox-ring,.ox-word,html:not(.osmo) .ox-n,.osmo .sx-ticker{display:none}.osmo .site-header{box-shadow:none;pointer-events:none;background:0 0;border:0;display:flow-root}.osmo .site-header:before,.osmo .site-header.is-scrolled:before{display:none}.osmo .site-header .header-inner{pointer-events:auto;z-index:2;background:var(--ox-dark);border-radius:12px;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;width:min(700px,100% - 20px);max-width:none;min-height:56px;margin:12px auto 0;padding:6px 6px 6px 8px;display:grid;position:relative;box-shadow:inset 0 1px #ffffff0f,0 0 0 1px #ffffff0f,0 22px 44px -22px #080a19bf}.osmo .site-header .nav--desktop,.osmo .site-header .menu-toggle{display:none}.osmo .site-header .brand,.osmo .site-header.is-scrolled .brand{color:#fff;grid-column:2;justify-self:center}.osmo .site-header .brand-name em,.osmo .site-header.is-scrolled .brand-name em{color:var(--amber-glow)}.osmo .site-header .brand-mark>rect:first-child,.osmo .site-header.is-scrolled .brand-mark>rect:first-child{fill:#fff;stroke:none}.osmo .site-header .brand-mark>rect:not(:first-child),.osmo .site-header.is-scrolled .brand-mark>rect:not(:first-child){fill:#1b2a55}.osmo .site-header .header-side{grid-column:3;justify-self:end;display:flex}.osmo .site-header .header-side .btn--primary,.osmo .site-header.is-scrolled .header-side .btn--primary{background:var(--amber-glow);color:var(--ox-dark);box-shadow:none;border-radius:8px;padding:11px 15px;font-weight:600}.osmo .site-header .header-side .btn--primary:hover,.osmo .site-header.is-scrolled .header-side .btn--primary:hover{color:var(--ox-dark);background:#fff}.osmo .ox-menu-btn{all:unset;color:#fff;font:500 .92rem/1 var(--sans);letter-spacing:-.01em;cursor:pointer;border-radius:8px;grid-column:1;justify-self:start;align-items:center;gap:11px;padding:11px 13px;transition:background-color .2s;display:inline-flex}.osmo .ox-menu-btn:hover{background:#ffffff14}.osmo .ox-menu-btn:focus-visible{outline:2px solid var(--amber-glow);outline-offset:2px}.osmo .ox-burger{flex:none;width:18px;height:10px;position:relative}.osmo .ox-burger i{transition:top .4s var(--glide,ease),bottom .4s var(--glide,ease),rotate .4s var(--glide,ease);background:currentColor;border-radius:2px;height:1.5px;position:absolute;left:0;right:0}.osmo .ox-burger i:first-child{top:0}.osmo .ox-burger i:last-child{bottom:0}.osmo.ox-open .ox-burger i:first-child{top:4.25px;rotate:45deg}.osmo.ox-open .ox-burger i:last-child{bottom:4.25px;rotate:-45deg}.osmo .ox-ticker{background:var(--amber-glow);color:var(--ox-dark);transition:opacity .35s ease,translate .45s var(--glide,ease);z-index:-1;border-radius:0 0 8px 8px;height:24px;display:none;position:absolute;top:100%;left:12px;right:12px;overflow:hidden}.osmo .site-header.is-scrolled .ox-ticker,.osmo.ox-open .ox-ticker{opacity:0;translate:0 -10px}.osmo .ox-ticker-track{align-items:center;gap:12px;width:max-content;height:100%;padding-left:12px;animation:40s linear infinite oxTick;display:flex}.osmo .ox-ticker span{font:500 .6rem/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}.osmo .ox-ticker svg{flex:none;width:9px;height:9px}@keyframes oxTick{to{transform:translate(-50%)}}.osmo .site-header .sx-progress{border-radius:2px;width:auto;height:2px;bottom:0;left:14px;right:14px}.osmo .ox-dim{z-index:48;backdrop-filter:blur(5px);opacity:0;pointer-events:none;background:#090c1a6b;transition:opacity .4s;display:block;position:fixed;inset:0}.osmo.ox-open .ox-dim{opacity:1;pointer-events:auto}.osmo .ox-menu{--pw:min(350px,calc(50% - 10px));z-index:49;background:var(--ox-dark);color:#fff;clip-path:inset(6px calc(50% - var(--pw))calc(100% - 62px)calc(50% - var(--pw))round 12px);visibility:hidden;transition:clip-path .75s var(--glide,ease),visibility 0s linear .75s;border-radius:18px;width:min(1180px,100% - 12px);max-height:calc(100dvh - 12px);padding:84px 20px 20px;display:block;position:fixed;top:6px;left:50%;overflow:auto;translate:-50%;box-shadow:0 40px 90px -40px #000c}.osmo.ox-open .ox-menu{clip-path:inset(0 round 18px);visibility:visible;transition:clip-path .75s var(--glide,ease),visibility 0s}.osmo .ox-menu-in{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,.95fr);gap:14px;display:grid}.osmo .ox-menu-in>*{opacity:0;transition:opacity .4s ease,translate .6s var(--glide,ease);translate:0 14px}.osmo.ox-open .ox-menu-in>*{opacity:1;translate:0}.osmo.ox-open .ox-menu-in>:first-child{transition-delay:.25s}.osmo.ox-open .ox-menu-in>:nth-child(2){transition-delay:.32s}.osmo.ox-open .ox-menu-in>:nth-child(3){transition-delay:.39s}.osmo .ox-col{border-radius:14px;padding:28px 30px}.osmo .ox-col--card{background:var(--ox-dark-2)}.osmo .ox-k{font:500 .66rem/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:#8f96b5;margin:0 0 14px}.osmo .ox-big{margin:0;padding:0;list-style:none}.osmo .ox-big a{color:#fff;font:500 clamp(1.25rem,1.05rem + .6vw,1.55rem)/1.1 var(--display);letter-spacing:-.03em;transition:color .25s ease,padding .35s var(--glide,ease);border-bottom:1px solid #ffffff14;align-items:center;gap:10px;padding:15px 0;text-decoration:none;display:flex}.osmo .ox-big li:last-child a{border-bottom:0}.osmo .ox-big a:hover,.osmo .ox-big a:focus-visible{color:var(--amber-glow);outline:0;padding-left:8px}.osmo .ox-big a[aria-current=page] span{box-shadow:inset 0 -2px 0 var(--amber-glow)}.osmo .ox-new{font:500 .56rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;background:var(--ox-violet);color:#fff;border-radius:3px;padding:4px 6px;font-style:normal}.osmo .ox-small{flex-wrap:wrap;gap:6px;margin:22px 0 0;display:flex}.osmo .ox-small a{color:#d9dceb;font:500 .84rem/1 var(--sans);background:#ffffff12;border-radius:7px;padding:7px 11px;text-decoration:none;transition:background-color .2s}.osmo .ox-small a:hover{color:#fff;background:#ffffff24}.osmo .ox-contact{flex-direction:column;gap:6px;margin:22px 0 0;display:flex}.osmo .ox-contact a{color:#8f96b5;font:500 .74rem/1.3 var(--mono);letter-spacing:.03em;text-decoration:none}.osmo .ox-contact a:hover{color:#fff}.osmo .ox-feat{text-align:center;color:#fff;isolation:isolate;background:radial-gradient(90% 70% at 50% 0%,#6a4cf573,transparent 70%),var(--ox-dark-2);border-radius:14px;flex-direction:column;justify-content:center;align-items:center;gap:18px;padding:34px 26px;text-decoration:none;display:flex;position:relative;overflow:hidden}.osmo .ox-feat strong{font:500 clamp(1.3rem,1.1rem + .6vw,1.7rem)/1.12 var(--display);letter-spacing:-.03em;max-width:15ch}.osmo .ox-models{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.osmo .ox-models i{font:500 .74rem/1 var(--sans);background:#ffffff14;border-radius:99px;align-items:center;gap:6px;padding:6px 9px;font-style:normal;display:inline-flex}.osmo .ox-models i:before{content:"";background:var(--m);border-radius:50%;width:7px;height:7px}.osmo .ox-feat-btn{color:var(--ox-dark);font:600 .88rem/1 var(--sans);background:#fff;border-radius:6px;padding:11px 16px;transition:background-color .2s}.osmo .ox-feat:hover .ox-feat-btn{background:var(--amber-glow)}.osmo .ox-split{font:500 .62rem/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;display:inline-flex}.osmo .ox-split b{padding:5px 7px 4px;font-weight:500}.osmo .ox-split b:first-child{color:#fff;background:#070a17;border-radius:4px 0 0 4px}.osmo .ox-split b:last-child{background:var(--ox-violet);color:#fff;border-radius:0 4px 4px 0}.osmo .ox-eb{font:500 .66rem/1 var(--mono);letter-spacing:.07em;gap:0}.osmo .ox-eb:before{display:none}.osmo .ox-n,.osmo .ox-l{padding:6px 8px 5px}.osmo .ox-n{color:#fff;background:#0c1122;border-radius:4px 0 0 4px}.osmo .ox-l{background:var(--ox-chip);color:#0c1122;border-radius:0 4px 4px 0}.osmo :is(.band,.cta-band,.gains-band) .ox-n{background:var(--amber-glow);color:#0c1122}.osmo :is(.band,.cta-band,.gains-band) .ox-l{color:#fff;background:#ffffff1a}.osmo .wp-block-post-content>.hx,.osmo main .hx{padding-top:calc(var(--ox-hh,68px) + 34px + clamp(36px,5vw,80px));margin-top:calc(-1*var(--ox-hh,68px))!important}.osmo .hx:after{opacity:1;background-image:linear-gradient(90deg,transparent calc(50% - .5px),var(--line)calc(50% - .5px),var(--line)calc(50% + .5px),transparent calc(50% + .5px));background-position:0 0;background-size:100% 100%;-webkit-mask-image:linear-gradient(#000 0% 40%,#0000 72%);mask-image:linear-gradient(#000 0% 40%,#0000 72%)}.osmo .hx-copy{position:relative}.osmo .hx-pill,.osmo .hx-toggle{z-index:1;position:relative}.osmo .ox-keep{white-space:nowrap}.osmo .ox-ast{vertical-align:.04em;color:var(--ox-violet);width:.6em;height:.6em;margin:0 .04em 0 .02em;animation:12s linear infinite oxSpin;display:inline-block}.osmo .ox-ast svg{width:100%;height:100%;display:block}@keyframes oxSpin{to{rotate:360deg}}.osmo .lead{font-family:var(--sans);letter-spacing:-.012em;font-weight:400}.osmo .hx-lead{color:var(--ink-2);font-size:clamp(1.06rem,1rem + .3vw,1.22rem);line-height:1.75}.osmo .ox-w{background:var(--ox-chip);color:#0c1122;white-space:nowrap;-webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:6px;margin:0 .03em;padding:.14em .42em;display:inline}.osmo .ox-w--dark{color:#fff;background:#0c1122}.osmo .ox-ring{left:50%;top:var(--ring-top,520px);aspect-ratio:1;z-index:-1;pointer-events:none;color:#0c11224d;translate:-50%;rotate:var(--rot,0deg);width:max(1500px,120vw);display:block;position:absolute;-webkit-mask-image:linear-gradient(#000 0 9%,#0000 22%);mask-image:linear-gradient(#000 0 9%,#0000 22%)}.osmo .ox-ring svg{width:100%;height:100%;display:block}.osmo .ox-ring .l{stroke-width:.26px}.osmo .ox-ring--cta{z-index:0;color:#ffffff29;width:max(1300px,100vw);-webkit-mask-image:linear-gradient(#000 0 12%,#0000 30%);mask-image:linear-gradient(#000 0 12%,#0000 30%)}.osmo .ox-word{font:600 clamp(3.6rem,17.4vw,19rem)/1 var(--display);letter-spacing:-.075em;text-align:center;white-space:nowrap;color:#1b2350;user-select:none;width:100vw;height:.74em;margin:clamp(36px,5vw,70px) 0 0 calc(50% - 50vw);display:block;position:relative;overflow:hidden}.osmo .ox-word em{color:#2b2e52;background:linear-gradient(90deg,#2b2e52,color-mix(in srgb,var(--amber-glow)45%,#1b2350));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-style:normal}.osmo .ox-base{border-top:1px solid var(--band-line);margin-top:0;padding-top:20px}.osmo .ox-base p{font:500 .66rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}.osmo .ox-base p:last-child{gap:2px;display:inline-flex}.osmo .ox-base p:last-child a{color:#fff;background:#ffffff17;border-radius:0;margin:0;padding:6px 8px 5px;text-decoration:none;transition:background-color .2s}.osmo .ox-base p:last-child a:first-child{border-radius:4px 0 0 4px}.osmo .ox-base p:last-child a:last-child{background:var(--ox-violet);border-radius:0 4px 4px 0}.osmo .ox-base p:last-child a:hover{background:#fff3}@media (width<=991px){.osmo .ox-menu-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.osmo .ox-feat{text-align:left;flex-flow:wrap;grid-column:1/-1;justify-content:space-between;padding:24px}.osmo .ox-feat strong{flex:260px;max-width:none}}@media (width<=767px){.osmo .site-header .header-inner{width:calc(100% - 16px);min-height:52px;margin-top:8px;padding:5px}.osmo .ox-menu-btn{padding:10px}.osmo .ox-menu{width:calc(100% - 8px);padding:74px 10px 10px;top:4px}.osmo .ox-menu-in{grid-template-columns:minmax(0,1fr);gap:8px}.osmo .ox-col{padding:22px}.osmo .ox-feat{text-align:center;flex-direction:column}.osmo .wp-block-post-content>.hx,.osmo main .hx{padding-top:calc(var(--ox-hh,64px) + 40px + 28px)}}@media (width<=478px){.osmo .ox-menu-t{display:none}.osmo .site-header .brand-name{font-size:1.12rem}}@media (width<=380px){.osmo .site-header .brand-name{display:none}}@media (prefers-reduced-motion:reduce){.osmo .ox-ticker-track,.osmo .ox-ast{animation:none}.osmo .ox-menu,.osmo .ox-menu-in>*{transition:none}}.ox-fan{display:none}.osmo .ox-fan{margin:clamp(48px,6vw,88px) 0 clamp(20px,3vw,40px);display:block}.osmo .ox-fan-head{justify-content:space-between;align-items:center;gap:16px;display:flex}.osmo .ox-split--light b:first-child{background:#0c1122}.osmo .ox-split--light b:last-child{background:var(--ox-chip);color:#0c1122}.osmo .ox-fan-nav{gap:6px;display:inline-flex}.osmo .ox-fan-nav button{all:unset;cursor:pointer;color:#0c1122;box-shadow:inset 0 0 0 1px var(--line);background:#fff;border-radius:50%;place-items:center;width:44px;height:44px;transition:background-color .2s,color .2s;display:grid}.osmo .ox-fan-nav button:hover{color:#fff;background:#0c1122}.osmo .ox-fan-nav button:focus-visible{outline:2px solid var(--amber-glow);outline-offset:2px}.osmo .ox-fan-nav svg{width:18px;height:18px}.osmo body{overflow-x:clip}.osmo .ox-fan-stage{--R:1350px;--cw:300px;--chh:392px;cursor:grab;touch-action:pan-y;user-select:none;width:100vw;height:540px;margin-top:18px;margin-left:calc(50% - 50vw);position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000 0,#000 6% 94%,#0000 100%);mask-image:linear-gradient(90deg,#0000 0,#000 6% 94%,#0000 100%)}.osmo .ox-fan-stage.is-live{cursor:grabbing}.osmo .ox-fan-ring{left:50%;top:calc(40px + var(--R) - var(--RW)/2);width:var(--RW);aspect-ratio:1;translate:-50%;rotate:var(--rot,0deg);color:#0c11226b;pointer-events:none;transition:rotate .7s var(--glide,ease);position:absolute}.osmo .ox-fan-stage.is-live .ox-fan-ring{transition:none}.osmo .ox-fan-ring svg{width:100%;height:100%;display:block}.osmo .ox-card{--a:0deg;--o:1;width:var(--cw);height:var(--chh);margin-left:calc(var(--cw)/-2);transform-origin:50% var(--R);rotate:var(--a);opacity:var(--o);isolation:isolate;transition:rotate .7s var(--glide,ease),opacity .4s ease,box-shadow .3s ease;border-radius:18px;flex-direction:column;gap:14px;padding:24px 24px 26px;text-decoration:none;display:flex;position:absolute;top:40px;left:50%;overflow:hidden;box-shadow:0 30px 60px -36px #0c112299}.osmo .ox-fan-stage.is-live .ox-card{transition:opacity .4s}.osmo .ox-card strong{font:500 clamp(1.45rem,1.25rem + .7vw,1.85rem)/1.05 var(--display);letter-spacing:-.04em;margin-top:auto}.osmo .ox-card-t{font:400 .92rem/1.45 var(--sans);opacity:.78;max-width:26ch}.osmo .ox-card-ast{width:34px;height:34px}.osmo .ox-card-ast svg{width:100%;height:100%}.osmo .ox-card.is-center .ox-card-ast{animation:6s linear infinite oxSpin}.osmo .ox-card .ox-split{align-self:flex-start}.osmo .ox-card-btn{font:600 .84rem/1 var(--sans);transition:rotate .4s var(--spring,ease),scale .4s var(--spring,ease);border-radius:4px;padding:10px 14px;position:absolute;top:70px;right:22px;rotate:6deg}.osmo .ox-card:hover .ox-card-btn,.osmo .ox-card:focus-visible .ox-card-btn{rotate:none;scale:1.08}.osmo .ox-card:focus-visible{outline:3px solid var(--amber-glow);outline-offset:3px}.osmo .ox-card--dark{background:var(--ox-dark);color:#fff}.osmo .ox-card--dark .ox-split b:first-child{background:#ffffff24}.osmo .ox-card--dark .ox-card-ast{color:var(--amber-glow)}.osmo .ox-card--dark .ox-card-btn{color:var(--ox-dark);background:#fff}.osmo .ox-card--violet{background:var(--ox-violet);color:#fff}.osmo .ox-card--violet .ox-split b:last-child{background:var(--ox-dark)}.osmo .ox-card--violet .ox-card-ast{color:#fff}.osmo .ox-card--violet .ox-card-btn{color:var(--ox-dark);background:#fff}.osmo .ox-card--amber{background:var(--amber-glow);color:var(--ox-dark)}.osmo .ox-card--amber .ox-split b:last-child{background:var(--ox-dark)}.osmo .ox-card--amber .ox-card-ast{color:var(--ox-dark)}.osmo .ox-card--amber .ox-card-btn{background:var(--ox-dark);color:#fff}.osmo .ox-card--light{color:var(--ox-dark);box-shadow:inset 0 0 0 1px var(--line),0 30px 60px -36px #0c112273;background:#fff}.osmo .ox-card--light .ox-card-ast{color:var(--ox-violet)}.osmo .ox-card--light .ox-card-btn{background:var(--ox-dark);color:#fff}.osmo .ox-fan-hand{z-index:3;color:var(--sq,#e0781c);pointer-events:none;font:600 1.4rem/1 Caveat,cursive;display:none;position:absolute;bottom:22px;left:50%;translate:120px;rotate:-5deg}.speels.osmo .ox-fan-hand{display:block}@media (width<=991px){.osmo .ox-fan-stage{--cw:270px;--chh:360px;height:500px}}@media (width<=619px){.osmo .ox-fan-stage{--cw:236px;--chh:318px;height:430px;-webkit-mask-image:none;mask-image:none}.osmo .ox-card{padding:18px}.osmo .ox-card-t{font-size:.84rem}.osmo .ox-card-btn{top:58px;right:16px}.osmo .ox-fan-hand{font-size:1.2rem;bottom:10px;translate:20px}}@media (prefers-reduced-motion:reduce){.osmo .ox-card,.osmo .ox-fan-ring{transition:none}}:root.paid{--hp-r:clamp(22px,3.2vw,44px);--hp-pill:#eceae5;--hp-pill-dark:#1a1f35;--hp-hot-a:#f3a245;--hp-hot-b:#e5484d;--hp-hot-c:#f2a7c3}.paid .site-header .header-inner{background:color-mix(in srgb,var(--hp-pill)88%,transparent);backdrop-filter:blur(14px)saturate(1.3);border-radius:999px;grid-template-columns:auto auto minmax(0,1fr) auto;gap:6px;width:min(1296px,100% - 24px);min-height:64px;margin-top:14px;padding:7px 7px 7px 10px;transition:background-color .45s,box-shadow .45s;box-shadow:inset 0 0 0 1px #0c11220d,0 18px 40px -30px #0c11228c}.paid .site-header .ox-menu-btn{color:var(--ink);border-radius:50%;grid-column:1;justify-content:center;width:46px;height:46px;padding:0}.paid .site-header .ox-menu-btn:hover{background:#0c11220f}.paid .site-header .ox-menu-t{display:none}.paid .site-header .brand,.paid .site-header.is-scrolled .brand{color:var(--ink);grid-column:2;justify-self:start;margin-right:10px}.paid .site-header .brand-name em,.paid .site-header.is-scrolled .brand-name em{color:var(--amber-deep)}.paid .site-header .brand-mark>rect:first-child,.paid .site-header.is-scrolled .brand-mark>rect:first-child{fill:#1b2a55}.paid .site-header .brand-mark>rect:not(:first-child),.paid .site-header.is-scrolled .brand-mark>rect:not(:first-child){fill:#f7f5f3}.paid .site-header .nav--desktop{grid-column:3;justify-self:start;gap:2px;display:flex}.paid .site-header .nav--desktop a,.paid .site-header.is-scrolled .nav--desktop a{color:var(--ink);border:0;border-radius:999px;padding:10px;font-size:.9rem;font-weight:500;transition:background-color .2s,color .3s}.paid .site-header .nav--desktop a:hover{color:var(--ink);background:#0c11220f}.paid .site-header .nav--desktop a[aria-current=page]{background:#fff;box-shadow:0 1px 2px #0c112214}.paid .site-header .header-side{grid-column:4}.paid .site-header .header-side .btn--primary,.paid .site-header.is-scrolled .header-side .btn--primary{background:var(--ink);color:#fff;box-shadow:none;border-radius:999px;padding:14px 22px;font-weight:550;transition:background-color .3s,color .3s}.paid .site-header .header-side .btn--primary:hover{color:#fff;background:#272d44}.paid .site-header .sx-progress{bottom:0;left:34px;right:34px}.paid .site-header.hp-dark .header-inner{background:color-mix(in srgb,var(--hp-pill-dark)90%,transparent);box-shadow:inset 0 0 0 1px #ffffff12,0 18px 40px -26px #000c}.paid .site-header.hp-dark .ox-menu-btn,.paid .site-header.hp-dark .brand,.paid .site-header.hp-dark .nav--desktop a,.paid .site-header.hp-dark .nav--desktop a:hover{color:#fff}.paid .site-header.hp-dark .ox-menu-btn:hover,.paid .site-header.hp-dark .nav--desktop a:hover{background:#ffffff14}.paid .site-header.hp-dark .nav--desktop a[aria-current=page]{box-shadow:none;background:#ffffff1f}.paid .site-header.hp-dark .brand-name em{color:var(--amber-glow)}.paid .site-header.hp-dark .brand-mark>rect:first-child{fill:#fff}.paid .site-header.hp-dark .brand-mark>rect:not(:first-child){fill:#1b2a55}.paid .site-header.hp-dark .header-side .btn--primary{color:var(--ink);background:#fff}.paid .site-header.hp-dark .header-side .btn--primary:hover{background:var(--amber-soft);color:var(--ink)}.paid .ox-menu{--pw:min(540px,calc(50% - 12px))}.paid .hp-blk{z-index:var(--hp-z);border-bottom-left-radius:var(--hp-r);border-bottom-right-radius:var(--hp-r);position:relative}.paid .hp-fill{background-color:var(--paper)}.paid .hp-blk.panel{background-color:var(--panel)}.paid .wp-block-post-content>.hp-under{padding-top:calc(var(--hp-pad,0px) + var(--hp-r));margin-top:calc(-1*var(--hp-r))!important}.paid .wp-block-post-content>.section.hp-under{padding-top:calc(clamp(72px,9vw,150px) + var(--hp-r))}.paid .wp-block-post-content>.marquee.hp-under{padding-top:calc(18px + var(--hp-r))}.paid .wp-block-post-content>.gains-band.hp-under{padding-top:calc(clamp(44px,5vw,70px) + var(--hp-r))}.paid .site-footer.hp-under{margin-top:calc(-1*var(--hp-r));padding-top:calc(clamp(64px,7vw,104px) + var(--hp-r));border-radius:0}.paid .hp-blk>.sx-mk{top:var(--hp-r)}.paid .hp-blk:first-child>.sx-mk{top:0}.paid .wp-block-post-content>.story.hp-blk{overflow:clip}.paid .hx .hx-title{color:var(--ink);letter-spacing:-.058em;font-weight:680;line-height:.94}.paid .hx .hx-title em{color:var(--ink)}.paid :is(.h2,.h1-page){letter-spacing:-.048em;font-weight:620}.paid .btn{border-radius:999px;padding:15px 24px}.paid .hx-ctas .btn--primary{color:#fff;background:#1b2a55;box-shadow:0 16px 30px -18px #1b2a55d9}.paid .hx-ctas .btn--primary .arrow{color:var(--amber-glow)}.paid .hx-ctas .btn--primary:hover{background:var(--amber-glow);color:var(--ink)}.paid .hx-ctas .btn--primary:hover .arrow{color:var(--ink)}.paid .hx-ctas .btn--ghost{background:#0c11220f;border-color:#0000}.paid .hx-ctas .btn--ghost:hover{background:var(--ink);color:#fff}.paid .hx-pill{border-radius:999px}.paid .hx-pill-b{background:color-mix(in srgb,var(--hp-hot-b)14%,#fff);color:#b4232a}.paid .hx-toggle,.paid .hx-thumb,.paid .hx-toggle button,.paid .ox-fan-nav button,.paid .ox-small a,.paid .ox-feat-btn{border-radius:999px}.paid .hx-demo{perspective:1800px}.paid .hx-stage{transform-origin:50% 0;transform:rotateX(var(--hp-tilt,0deg))scale(var(--hp-sc,1));will-change:transform;border-radius:26px}.paid .hp-lit{font-family:var(--display);letter-spacing:-.035em;max-width:30ch;font-size:clamp(1.45rem,1.05rem + 1.6vw,2.45rem);font-weight:600;line-height:1.14}.paid .hp-w{color:color-mix(in srgb,currentColor 26%,transparent);transition:color .35s}.paid .hp-w.on{color:inherit}.paid .hp-lit .hp-w{color:color-mix(in srgb,var(--ink)24%,transparent)}.paid .hp-lit .hp-w.on{color:var(--ink)}.paid :is(.band,.cta-band) .hp-lit .hp-w{color:#fff3}.paid :is(.band,.cta-band) .hp-lit .hp-w.on{color:#fff}.paid .hp-lit .sx-tool{vertical-align:.08em;font-size:.8em}.paid .site-footer>.wrap{flex-direction:column;display:flex}.paid .site-footer .footer-base{order:2}.paid .ox-word{color:#fbf7f2;border-radius:var(--hp-r)var(--hp-r)0 0;background:radial-gradient(70% 120% at 0% 100%,var(--hp-hot-c),transparent 60%),radial-gradient(60% 90% at 100% 0%,var(--hp-hot-a),transparent 65%),linear-gradient(110deg,var(--hp-hot-b),#ee6a3c 55%,var(--hp-hot-a));order:3;height:auto;margin-top:clamp(40px,5vw,64px);margin-bottom:calc(-1*clamp(34px,3.6vw,52px));padding:clamp(28px,3vw,46px) 0 0;line-height:.82;overflow:hidden}.paid .ox-word em{color:#fbf7f2;-webkit-text-fill-color:#fbf7f2;background:0 0}.paid .ox-base{border-top:0;margin-top:28px;padding-top:0}@media (width<=1365px){.paid .site-header .nav--desktop a,.paid .site-header.is-scrolled .nav--desktop a{padding:10px 8px;font-size:.86rem}.paid .site-header .brand{margin-right:4px}}@media (width<=1279px){.paid .site-header .nav--desktop{display:none}.paid .site-header .header-inner{grid-template-columns:auto auto minmax(0,1fr) auto;width:min(760px,100% - 20px)}}@media (width<=767px){.paid .site-header .header-inner{width:calc(100% - 16px);min-height:56px;margin-top:8px;padding:5px}.paid .site-header .ox-menu-btn{width:44px;height:44px}.paid .site-header .header-side .btn--primary{padding:12px 16px}.paid .hp-lit{font-size:clamp(1.3rem,1rem + 2vw,1.7rem)}}@media (prefers-reduced-motion:reduce){.paid .hx-stage{transform:none}.paid .hp-w{transition:none}}:root.notion{--n-blue:#0075de;--n-blue-dark:#005bab;--n-red:#f04830;--n-yellow:#fcae10;--n-green:#1eae36;--n-indigo:#1515b0;--n-blue-l:#e6f1fc;--n-red-l:#fde9e5;--n-yellow-l:#fff4d8;--n-green-l:#e4f5e7;--n-indigo-l:#e9e9fa;--n-warm:#f6f5f4;--n-dark:#191919;--n-dark-2:#252525;--n-dark-3:#2f2f2f;--paper:#fff;--panel:#fff;--sand:#f6f5f4;--sand-deep:#f1f6fc;--line:#e4e4e4;--line-soft:#ededed;--hair:#e9e9e9;--ink:#0d0d0d;--ink-2:#5c5c5c;--ink-3:#999;--mute:#a3a3a3;--navy:#0d0d0d;--navy-hover:#2f2f2f;--band:#191919;--band-2:#252525;--band-ink:#f7f7f5;--band-ink-2:#a8a8a8;--band-line:#2f2f2f;--mute-band:#8a8a8a;--amber:#d98e00;--amber-deep:#a86c00;--amber-glow:#fcae10;--amber-soft:#ffe6a8;--amber-mist:#fff6de;--tone-amber:#d98e00;--tone-blue:#0075de;--tone-violet:#3b3bc9;--tone-green:#1a9e33;--tone-rose:#e5432f;--tone-teal:#12857a;--sq:#0075de;--ox-dark:#191919;--ox-dark-2:#252525;--ox-dark-3:#2f2f2f;--ox-violet:#0075de;--ox-chip:#ededec;--hp-pill:#fff;--hp-pill-dark:#252525}.np-show .np-stage,.np-can{display:none}.notion .btn--primary,.notion .header-side .btn--primary,.notion.paid .site-header .header-side .btn--primary,.notion .site-header.is-scrolled .header-side .btn--primary,.notion .paid .hx-ctas .btn--primary,.notion.paid .hx-ctas .btn--primary{background:var(--n-blue);color:#fff;box-shadow:none}.notion .btn--primary:hover,.notion .site-header .header-side .btn--primary:hover,.notion.paid .site-header .header-side .btn--primary:hover,.notion.paid .hx-ctas .btn--primary:hover{background:var(--n-blue-dark);color:#fff}.notion.paid .hx-ctas .btn--primary .arrow,.notion.paid .hx-ctas .btn--primary:hover .arrow{color:#fff}.notion :is(.band,.cta-band,.section--navy,.story.band) .btn--primary,.notion :is(.band,.cta-band) .btn--light,.notion .site-header.hp-dark .header-side .btn--primary,.notion.paid .site-header.hp-dark .header-side .btn--primary{color:var(--ink);background:#fff}.notion :is(.band,.cta-band,.section--navy,.story.band) .btn--primary:hover,.notion :is(.band,.cta-band) .btn--light:hover,.notion .site-header.hp-dark .header-side .btn--primary:hover,.notion.paid .site-header.hp-dark .header-side .btn--primary:hover{background:var(--n-blue);color:#fff}.notion .btn--ghost{border-color:var(--line);color:var(--n-blue);background:#fff}.notion.paid .hx-ctas .btn--ghost{color:var(--n-blue);box-shadow:inset 0 0 0 1px var(--line);background:#fff}.notion.paid .hx-ctas .btn--ghost:hover{background:var(--n-blue-l);color:var(--n-blue)}.notion .textlink:hover{color:var(--n-blue)}.notion.paid .site-header .header-inner{box-shadow:inset 0 0 0 1px var(--line),0 18px 40px -32px #00000073;background:#ffffffeb}.notion.paid .site-header.hp-dark .header-inner{background:color-mix(in srgb,var(--n-dark-2)94%,transparent);box-shadow:inset 0 0 0 1px #ffffff14,0 18px 40px -26px #000c}.notion .site-header .brand-mark>rect:first-child{fill:var(--ink)}.notion .site-header.hp-dark .brand-mark>rect:first-child{fill:#fff}.notion .brand-name em,.notion.paid .site-header .brand-name em{color:var(--n-blue)}.notion .site-header.hp-dark .brand-name em{color:#6fb5f5}.notion .hx-pill-b{background:var(--n-blue-l);color:var(--n-blue)}.notion .ox-ast{color:var(--n-red)}.notion .ox-w--dark,.notion .ox-n{background:var(--n-blue)}.notion :is(.band,.cta-band,.gains-band) .ox-n{background:var(--n-yellow);color:var(--ink)}.notion .ox-new{background:var(--n-blue)}.notion .ox-feat{background:radial-gradient(90% 70% at 50% 0%,#0075de73,transparent 70%),var(--n-dark-2)}.notion.speels .sx-scr--0{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M3 10c40-6 92-8 194-3' fill='none' stroke='%230075DE' stroke-width='3.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}.notion.speels .sx-scr--1{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M3 8c30 5 60-4 98 0s70 4 96-2' fill='none' stroke='%230075DE' stroke-width='3.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}.notion.speels .sx-scr--2{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M3 9c56-5 118-6 194-2M14 13c50-3 100-3 160-1' fill='none' stroke='%230075DE' stroke-width='2.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}.notion.speels :is(.band,.cta-band,.gains-band) .sx-scr--0,.notion.speels :is(.band,.cta-band,.gains-band) .sx-scr--1,.notion.speels :is(.band,.cta-band,.gains-band) .sx-scr--2{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M3 10c40-6 92-8 194-3' fill='none' stroke='%23FCAE10' stroke-width='3.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}.notion .sx-note,.notion .hx-hand,.notion .ox-fan-hand{color:var(--n-blue)}.notion :is(.band,.cta-band) .sx-note{color:var(--n-yellow)}.notion .sx-progress{background:linear-gradient(90deg,var(--n-blue),var(--n-red),var(--n-yellow))}.notion .hx:before{background:radial-gradient(55% 45% at 12% 0,#0075de1a,#0000 70%),radial-gradient(45% 40% at 92% 8%,#fcae101f,#0000 70%)}.notion .hx-stage{background:var(--n-warm);border-color:var(--line)}.notion .ox-card--dark{background:var(--n-dark)}.notion .ox-card--violet{background:var(--n-blue)}.notion .ox-card--amber{background:var(--n-yellow)}.notion .ox-card--violet .ox-split b:last-child{background:var(--n-dark)}.notion.paid .ox-word{background:radial-gradient(70% 120% at 0% 100%,#f048308c,transparent 60%),radial-gradient(60% 90% at 100% 0%,#fcae10b3,transparent 65%),var(--n-blue)}.notion .ox-base p:last-child a:last-child{background:var(--n-blue)}.notion .np-can{width:100%;margin-top:clamp(40px,5vw,64px);display:block}.notion .np-can-k{font:500 .9rem/1.3 var(--sans);color:var(--ink-2);margin:0 0 12px}.notion .np-can-row{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;display:grid}.notion .np-can a{border:1px solid var(--line);color:var(--ink);transition:background-color .2s ease,border-color .2s ease,translate .35s var(--spring,ease);background:#fff;border-radius:12px;flex-direction:column;gap:32px;min-height:160px;padding:22px 22px 20px;text-decoration:none;display:flex}.notion .np-can a:hover{background:#fafaf9;border-color:#d6d6d6;translate:0 -3px}.notion .np-can i{background:var(--c);color:#fff;border-radius:50%;place-items:center;width:42px;height:42px;display:grid;box-shadow:inset 0 -3px #00000024}.notion .np-can i svg{width:20px;height:20px}.notion .np-can b{font:650 1.02rem/1.3 var(--sans);letter-spacing:-.015em;margin-top:auto}.notion .np-can b:after{content:" →";transition:margin .25s}.notion .np-can a:hover b:after{margin-left:4px}.notion .np-show{grid-template-columns:minmax(0,.92fr) minmax(0,1.18fr);align-items:start;gap:clamp(24px,3.4vw,56px);display:grid}.notion .np-show .path{flex-direction:column;grid-template-columns:none;gap:6px;display:flex}.notion .np-show .path-step,.strak.speels.notion .np-show .sx-tilt,.strak.speels.notion .np-show .sx-tilt:hover{box-shadow:none;background:0 0;border:1px solid #0000;border-radius:16px;grid-template-columns:52px minmax(0,1fr);grid-template-areas:"ic h""ic p""ic l";align-items:start;gap:0 18px;padding:18px 20px;transition:background-color .3s,border-color .3s,box-shadow .3s;display:grid;overflow:hidden;transform:translate(0,0)}.notion .np-show .path-step:before{display:none}.notion .np-show .path-step:after{height:3px;display:none;top:auto;bottom:0}.notion .np-show .path.is-auto .path-step.is-on.np-sel:after{display:block}.notion .np-show .path-top{grid-area:ic;display:block}.notion .np-show .path-num{display:none}.notion .np-show .path-step .pillar-icon{color:var(--ink);box-shadow:0 1px 2px #0000000f,0 6px 16px -10px #00000059,inset 0 0 0 1px var(--line-soft);background:#fff;border-radius:50%;width:52px;height:52px;margin:0;transition:background-color .3s,color .3s;transform:rotate(0)}.notion .np-show .path-step h3{grid-area:h;align-self:center;align-items:center;min-height:52px;margin:0;font-size:1.12rem;display:flex}.notion .np-show .path-step p{opacity:0;transition:max-height .5s var(--glide,ease),opacity .35s ease,margin .4s ease;grid-area:p;max-height:0;margin:0;overflow:hidden}.notion .np-show .path-step .textlink{opacity:0;transition:max-height .5s var(--glide,ease),opacity .35s ease,margin .4s ease;grid-area:l;max-height:0;margin:0;overflow:hidden}.notion .np-show .path-step.np-sel,.strak.speels.notion .np-show .path-step.np-sel.sx-tilt,.strak.speels.notion .np-show .path-step.np-sel.sx-tilt:hover{border-color:var(--line);background:#fff;box-shadow:0 1px 2px #0000000a,0 18px 36px -26px #00000059}.notion .np-show .path-step.np-sel p{opacity:1;max-height:8em;margin-top:2px}.notion .np-show .path-step.np-sel .textlink{opacity:1;max-height:3em;margin-top:12px}.notion .np-show .path-step.np-sel .pillar-icon{background:var(--t);color:#fff;box-shadow:none}.notion .np-show .path-step:first-child{--t:var(--n-yellow)}.notion .np-show .path-step:nth-child(2){--t:var(--n-blue)}.notion .np-show .path-step:nth-child(3){--t:var(--n-green)}.notion .np-show .path-step:nth-child(4){--t:var(--n-red)}.notion .np-show .path-step .textlink{border-bottom-color:var(--t);color:var(--ink)}.notion .np-stage{top:calc(var(--header-h,72px) + 30px);isolation:isolate;background:var(--n-yellow-l);border-radius:24px;height:460px;transition:background-color .6s;display:block;position:sticky;overflow:hidden;box-shadow:inset 0 0 0 1px #0000000a}.notion .np-stage:before{content:"";z-index:-1;opacity:.5;background-image:radial-gradient(#0000001f 1px,#0000 1.3px);background-size:18px 18px;position:absolute;inset:0}.notion .np-stage[data-tint=blue]{background:var(--n-blue-l)}.notion .np-stage[data-tint=green]{background:var(--n-green-l)}.notion .np-stage[data-tint=red]{background:var(--n-red-l)}.notion .np-note{font:500 .62rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#0006;margin:0;position:absolute;bottom:12px;right:16px}.notion .np-scene{pointer-events:none;position:absolute;inset:0}.notion .np-scene>*{opacity:0;transition:opacity .45s ease,translate .7s var(--glide,ease),rotate .7s var(--glide,ease)}.notion .np-scene.is-on>*{opacity:1}.notion .np-scene>:first-child{translate:-30px 24px}.notion .np-scene>:nth-child(2){transition-delay:0s,0s,0s;translate:30px 30px}.notion .np-scene.is-on>:first-child{translate:0}.notion .np-scene.is-on>:nth-child(2){transition-delay:.12s,.12s,.12s;translate:0}.notion .np-win{background:#f7f7f7;border-radius:14px;position:absolute;overflow:hidden;box-shadow:0 1px 2px #0000000f,0 30px 60px -30px #00000073}.notion .np-bar{align-items:center;gap:12px;height:38px;padding:0 12px;display:flex}.notion .np-dots{gap:5px;display:inline-flex}.notion .np-dots i{background:#dcdcdc;border-radius:50%;width:8px;height:8px}.notion .np-tab{font:500 .74rem/1.2 var(--sans);color:#333;white-space:nowrap;background:#e9e9e9;border-radius:7px;margin:0 auto;padding:4px 12px}.notion .np-body{background:#fff;border-radius:9px;margin:0 8px 8px;padding:16px 18px}.notion .np-chip{font-style:normal;font:500 .7rem/1.4 var(--sans);white-space:nowrap;border-radius:4px;padding:2px 7px;display:inline-flex}.notion .np-chip--yellow{color:#89632a;background:#fbf3db}.notion .np-chip--blue{color:#28456c;background:#ddebf1}.notion .np-chip--green{color:#2b593f;background:#ddedea}.notion .np-chip--red{color:#6e3630;background:#fbe4e4}.notion .np-w-back{width:56%;top:10%;left:7%}.notion .np-w-front{width:60%;bottom:9%;right:6%}.notion .np-todo{flex-direction:column;gap:11px;margin:0;padding:0;list-style:none;display:flex}.notion .np-todo li{font:500 .86rem/1.2 var(--sans);color:#222;align-items:center;gap:9px;display:flex}.notion .np-todo li i{border-radius:3px;flex:none;width:14px;height:14px;box-shadow:inset 0 0 0 1.5px #cfcfcf}.notion .np-todo .np-chip{margin-left:auto}.notion .np-flow{align-items:center;gap:0;padding:6px 0 4px;display:flex}.notion .np-node{background:#f7f6f3;border-radius:10px;flex-direction:column;gap:3px;padding:10px 12px;display:flex;box-shadow:inset 0 0 0 1px #ecebe8}.notion .np-node b{font:650 .82rem/1.2 var(--sans);color:#191919}.notion .np-node small{font:500 .66rem/1 var(--mono);color:#8c8c8c;text-transform:uppercase;letter-spacing:.05em}.notion .np-link{background:repeating-linear-gradient(90deg,#bdbdbd 0 4px,#0000 4px 8px);flex:1;min-width:14px;height:2px}.notion .np-sticky{color:#4a3b12;background:#ffe58a;margin:0;padding:10px 14px;font:600 1.15rem/1 Caveat,cursive;position:absolute;top:-24px;right:-10px;rotate:5deg;box-shadow:0 10px 20px -12px #0006}.notion .np-w-front:has(.np-sticky){overflow:visible}.notion .np-w-wide{width:auto;inset:9% 6% auto}.notion .np-dbtabs{gap:4px;margin:-4px 0 12px;display:flex;overflow:hidden}.notion .np-dbtabs span{font:500 .76rem/1 var(--sans);color:#8c8c8c;white-space:nowrap;border-radius:6px;padding:5px 9px}.notion .np-dbtabs span.on{color:#191919;background:#f1f1ef}.notion .np-table{flex-direction:column;display:flex}.notion .np-tr{font:500 .82rem/1.2 var(--sans);color:#222;border-top:1px solid #efefef;grid-template-columns:1.6fr 1fr 1fr;align-items:center;gap:10px;padding:9px 2px;display:grid}.notion .np-tr span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.notion .np-th{font:500 .66rem/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:#9a9a9a;border-top:0}.notion .np-card{background:#fff;border-radius:14px;flex-direction:column;gap:8px;width:230px;padding:16px;display:flex;position:absolute;bottom:7%;right:7%;rotate:-2deg;box-shadow:0 1px 2px #0000000f,0 30px 50px -24px #00000080}.notion .np-card b{font:650 .92rem/1.2 var(--sans);color:#191919;margin-bottom:2px}.notion .np-card span{font:500 .8rem/1 var(--sans);color:#444;align-items:center;gap:8px;display:flex}.notion .np-card span i{background:var(--c);border-radius:2px;width:8px;height:8px}.notion .np-card small{font:500 .7rem/1.3 var(--sans);color:#8c8c8c;margin-top:4px}.notion .np-apps{flex-wrap:wrap;gap:8px;display:flex}.notion .np-apps span{font:600 .8rem/1 var(--sans);color:#333;background:#f7f7f7;border-radius:8px;align-items:center;gap:7px;padding:7px 10px;display:inline-flex}.notion .np-apps span:before{content:"";background:var(--c);border-radius:2px;width:9px;height:9px}.notion .np-steps{flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;display:flex}.notion .np-steps li{font:500 .86rem/1.2 var(--sans);color:#222;align-items:center;gap:10px;display:flex}.notion .np-steps i{color:#0000;transition:background-color .3s ease,color .3s ease,scale .4s var(--spring,ease);background:#efefef;border-radius:50%;flex:none;place-items:center;width:22px;height:22px;display:grid}.notion .np-steps i svg{width:12px;height:12px}.notion .np-scene.is-on .np-steps i{background:var(--n-green);color:#fff;animation:npTick .5s var(--spring,ease)both;animation-delay:calc(.5s + var(--i)*.45s)}@keyframes npTick{0%{color:#0000;background:#efefef;scale:.7}to{background:var(--n-green);color:#fff;scale:1}}.notion .np-auto{font:500 .74rem/1 var(--sans);color:#1a7f2e;border-top:1px solid #efefef;align-items:center;gap:8px;margin:14px 0 0;padding-top:12px;display:flex}.notion .np-auto span{background:var(--n-green);border-radius:50%;width:8px;height:8px;box-shadow:0 0 0 4px #1eae362e}.notion .np-w-browser{width:auto;inset:9% 6% auto}.notion .np-url{font:500 .72rem/1 var(--mono);color:#555}.notion .np-ptop{justify-content:space-between;align-items:center;gap:10px;margin-bottom:18px;display:flex}.notion .np-logo{background:var(--n-red);color:#fff;font:700 .76rem/1 var(--sans);border-radius:7px;padding:6px 10px}.notion .np-roles{background:#f1f1ef;border-radius:8px;gap:2px;padding:3px;display:inline-flex}.notion .np-roles>*{font:500 .72rem/1 var(--sans);color:#777;border-radius:6px;padding:5px 8px}.notion .np-roles b{color:#191919;background:#fff;box-shadow:0 1px 2px #00000014}.notion .np-hello{font:650 1.3rem/1.1 var(--display);letter-spacing:-.03em;color:#191919;margin:0 0 12px}.notion .np-pcards{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.notion .np-pcards span{background:#faf9f8;border-radius:10px;flex-direction:column;gap:6px;padding:14px 12px;display:flex;box-shadow:inset 0 0 0 1px #efeeec}.notion .np-pcards b{font:650 .82rem/1.2 var(--sans);color:#191919}.notion .np-pcards small{font:500 .7rem/1.3 var(--sans);color:#8c8c8c}.notion .gains-band{background:var(--n-dark)}.notion .gains{gap:10px}.notion .gains>li,.notion .gains>li+li{background:var(--n-dark-2);border:0;border-radius:22px;flex-direction:column;gap:10px;padding:26px 24px 28px;display:flex}.notion .gain-ic{background:var(--c);color:#fff;box-shadow:none;border-radius:50%;width:52px;height:52px;margin-bottom:18px}.notion .gains>li:first-child{--c:var(--n-blue)}.notion .gains>li:nth-child(2){--c:var(--n-red)}.notion .gains>li:nth-child(3){--c:var(--n-yellow)}.notion .gains>li:nth-child(4){--c:var(--n-green)}.notion .gains>li:nth-child(3) .gain-ic{color:var(--ink)}.notion .gain strong{align-self:flex-start;min-height:0}.notion .gain:hover .gain-ic{background:var(--c)}.notion .gain span{grid-column:auto}@media (width<=1100px){.notion .np-can-row{grid-template-columns:repeat(3,minmax(0,1fr))}.notion .np-can-row a:nth-child(n+4){display:none}}@media (width<=991px){.notion .np-show{grid-template-columns:minmax(0,1fr)}.notion .np-stage{order:-1;height:420px;position:relative;top:0}}@media (width<=767px){.notion .np-can-row{grid-template-columns:repeat(2,minmax(0,1fr))}.notion .np-can-row a:nth-child(n+4){display:flex}.notion .np-can-row a:nth-child(5){grid-column:1/-1}.notion .np-can a{gap:22px;min-height:132px;padding:18px}.notion .np-stage{border-radius:18px;height:380px}.notion .np-w-back{width:74%;top:6%;left:4%}.notion .np-w-front{width:84%;bottom:6%;right:4%}.notion .np-w-wide,.notion .np-w-browser{top:6%;left:4%;right:4%}.notion .np-card{width:190px;padding:12px;bottom:5%;right:4%}.notion .np-tr{grid-template-columns:1.5fr 1fr}.notion .np-tr span:nth-child(3){display:none}.notion .np-pcards{grid-template-columns:minmax(0,1fr);gap:6px}.notion .np-pcards span{flex-direction:row;justify-content:space-between;align-items:center;padding:10px 12px}.notion .np-roles span{display:none}.notion .np-body{padding:12px 14px}.notion .np-flow .np-node{padding:8px 9px}.notion .np-sticky{font-size:1rem;top:-30px;right:6px}.notion .np-stage{height:400px}.notion .np-w-front{bottom:4%}.notion .np-todo{gap:8px}.notion .np-todo li{font-size:.78rem}}@media (width<=478px){.notion .np-can-row{grid-template-columns:minmax(0,1fr)}.notion .np-can a{flex-direction:row;align-items:center;gap:14px;min-height:0;padding:14px 16px}.notion .np-can b{margin-top:0}.notion .np-stage{height:360px}.notion .np-node small{display:none}}@media (prefers-reduced-motion:reduce){.notion .np-scene>*{transition:none;translate:none}.notion .np-scene.is-on .np-steps i{background:var(--n-green);color:#fff;animation:none}}.brand-mark .bm-grey{fill:currentColor;fill-opacity:.12}.brand-mark .bm-ink{fill:currentColor}.wp-site-blocks .brand.brand .brand-mark{flex:none;width:30px;height:30px}.wp-site-blocks .brand.brand .brand-name.brand-name,.wp-site-blocks .brand.brand .brand-name.brand-name em{letter-spacing:-.035em;color:inherit;margin:0;font-family:Inter Tight,Inter,ui-sans-serif,system-ui,sans-serif;font-style:normal;font-weight:650}.wp-site-blocks .brand.brand .brand-name.brand-name{font-size:1.24rem;line-height:1}.wp-site-blocks .brand.brand{gap:10px}@media (width<=478px){.wp-site-blocks .brand.brand .brand-name.brand-name{font-size:1.1rem}}:root.nl{--paper:#fff;--panel:#fff;--sand:#f6f5f4;--sand-deep:#f6f5f4;--band:#f6f5f4;--band-2:#fff;--band-ink:#0d0d0d;--band-ink-2:#5c5c5c;--band-line:#e4e4e4;--mute-band:#a3a3a3;--n-dark:#f6f5f4;--n-dark-2:#fff;--n-dark-3:#ededec;--ox-dark:#fff;--ox-dark-2:#f6f5f4;--ox-dark-3:#ededec;--hp-pill-dark:#fff;--amber-glow:#0075de;--amber-deep:#0063bd;--amber-soft:#d9eafb;--amber-mist:#eef5fd;--sq:#0075de;--nl-r:12px;--nl-crisp:linear-gradient(180deg,#e3efff 0%,#f1f7ff 55%,#fff 100%)}.nl body{color:#0d0d0d;background:#fff}.nl .wp-block-post-content>section,.nl .wp-block-post-content>.hp-blk{box-shadow:none;background-color:#fff;border-radius:0}.nl .wp-block-post-content>section.nl-g{background-color:#f6f5f4}.nl .wp-block-post-content>.hp-under{margin-top:0!important}.nl .wp-block-post-content>.section.hp-under{padding-top:clamp(72px,9vw,150px)}.nl .wp-block-post-content>.marquee.hp-under{padding-top:18px}.nl .wp-block-post-content>.gains-band.hp-under{padding-top:clamp(44px,5vw,70px)}.nl .wp-block-post-content>section+section{box-shadow:inset 0 1px #ededec}.nl .section--sand{background-image:none}.nl .sx-spot{display:none}.nl :is(.section--navy,.band,.cta-band,.gains-band,.story.band){--ink:#0d0d0d;--ink-2:#5c5c5c;--ink-3:#999;--line:#e4e4e4;--line-soft:#ededed;--paper:#fff;--sand-deep:#f6f5f4;--amber-deep:#0063bd;--amber-mist:#eef5fd;--amber-soft:#d9eafb;color:#0d0d0d}.nl :is(.band,.cta-band,.gains-band) :is(h1,h2,h3,h4,.h2,.display,.answer,.manifest){color:#0d0d0d}.nl :is(.band,.cta-band,.gains-band) :is(p,li,.lead,.prose,.small){color:#5c5c5c}.nl :is(.band,.cta-band,.gains-band) :is(strong,b),.nl :is(.band,.cta-band,.gains-band) .textlink{color:#0d0d0d}.nl :is(.band,.cta-band) .ticks li:before{background:#0075de}.nl .cta-band:before,.nl .gains-band:before,.nl .tile-detail:before{display:none}.nl .cta-side .small a{color:#0d0d0d}.nl .marquee.section--navy{background:#fff;border-color:#ededec}.nl :is(.display,.h2,.h1-page,.answer):has(em),.nl.strak :is(.band,.cta-band,.gains-band,.section--navy,.story) :is(.display,.h2,.h1-page,.answer):has(em),.nl :is(.display,.h2,.h1-page,.answer) em,.nl.strak :is(.band,.cta-band,.gains-band,.section--navy,.story) :is(.display,.h2,.h1-page,.answer) em{color:#0d0d0d}.nl :is(h1,h2,.h2,.h1-page,.display){letter-spacing:-.035em;font-weight:700}.nl .hx .hx-title{letter-spacing:-.045em;font-weight:700}.nl :is(h3,h4,.h3){letter-spacing:-.02em;color:#0d0d0d;font-weight:650}.nl .lead,.nl .hx .hx-lead{font-family:var(--sans);color:#5c5c5c;letter-spacing:-.01em;font-weight:400}.nl .manifest{font-family:var(--sans);color:#0075de;font-size:1.05rem;font-style:normal;font-weight:600}.nl .closer{font-family:var(--sans);letter-spacing:-.015em;font-weight:500}.nl.paid .hp-lit .hp-w{color:#0d0d0d2e}.nl.paid .hp-lit .hp-w.on{color:#0d0d0d}.nl .ox-eb{font:500 .95rem/1.2 var(--sans);letter-spacing:-.01em;text-transform:none;color:#0075de;gap:10px}.nl .ox-n,.nl :is(.band,.cta-band,.gains-band) .ox-n{color:#0075de;font:600 .7rem/1 var(--mono);background:#e6f1fc;border-radius:7px;place-items:center;width:26px;height:26px;padding:0;display:inline-grid;box-shadow:inset 0 0 0 1px #cfe3f8}.nl .ox-l,.nl :is(.band,.cta-band,.gains-band) .ox-l{color:#0075de;background:0 0;padding:0}.nl .eyebrow{color:#0075de}.nl .btn,.nl.paid .btn{border-radius:10px;padding:13px 20px}.nl .btn--primary,.nl.paid .hx-ctas .btn--primary,.nl.notion.paid .hx-ctas .btn--primary,.nl :is(.band,.cta-band,.section--navy,.story.band) .btn--primary,.nl :is(.band,.cta-band) .btn--light{color:#fff;background:#0075de;box-shadow:0 0 0 4px #0075de1f,inset 0 1px #ffffff2e}.nl .btn--primary:hover,.nl.notion.paid .hx-ctas .btn--primary:hover,.nl :is(.band,.cta-band,.section--navy,.story.band) .btn--primary:hover,.nl :is(.band,.cta-band) .btn--light:hover{color:#fff;background:#005bab}.nl .btn--ghost,.nl.notion.paid .hx-ctas .btn--ghost,.nl :is(.band,.section--navy,.story.band) .btn--ghost{color:#0075de;box-shadow:none;background:#fff;border:1px solid #e4e4e4}.nl .btn--ghost:hover,.nl.notion.paid .hx-ctas .btn--ghost:hover{color:#0075de;background:#f2f8fe}.nl .btn .arrow{color:currentColor}.nl .site-header,.nl.osmo .site-header{z-index:50;pointer-events:auto;backdrop-filter:saturate(1.4)blur(12px);background:#fffffff0;display:block;position:sticky;top:0;box-shadow:0 1px #ededec}.nl.osmo .site-header .header-inner,.nl.paid .site-header .header-inner,.nl.paid .site-header.hp-dark .header-inner{box-shadow:none;backdrop-filter:none;background:0 0;border-radius:0;grid-template-columns:auto minmax(0,1fr) auto;gap:24px;width:100%;max-width:1280px;min-height:64px;margin:0 auto;padding:0 clamp(16px,3vw,32px);display:grid}.nl.osmo .ox-menu-btn{display:none}.nl.paid .site-header .brand,.nl.paid .site-header.hp-dark .brand{color:#0d0d0d;grid-column:1;margin:0}.nl.paid .site-header .nav--desktop{grid-column:2;justify-self:center;gap:2px;display:flex}.nl.paid .site-header .nav--desktop a,.nl.paid .site-header.hp-dark .nav--desktop a{color:#0d0d0d;border-radius:8px;padding:8px 11px;font-size:.92rem;font-weight:500}.nl.paid .site-header .nav--desktop a:hover,.nl.paid .site-header.hp-dark .nav--desktop a:hover{color:#0d0d0d;background:#0d0d0d0d}.nl.paid .site-header .nav--desktop a[aria-current=page],.nl.paid .site-header.hp-dark .nav--desktop a[aria-current=page]{color:#0075de;box-shadow:none;background:#f2f8fe}.nl.paid .site-header .header-side{grid-column:3}.nl.notion.paid .site-header .header-side .btn--primary,.nl.notion.paid .site-header.hp-dark .header-side .btn--primary{color:#fff;box-shadow:none;background:#0075de;border-radius:9px;padding:10px 15px;font-weight:550}.nl.notion.paid .site-header .header-side .btn--primary:hover,.nl.notion.paid .site-header.hp-dark .header-side .btn--primary:hover{color:#fff;background:#005bab}.nl .site-header .sx-progress{border-radius:0;height:2px;bottom:-1px;left:0;right:0}.nl.osmo .ox-menu{color:#0d0d0d;background:#fff;box-shadow:0 40px 90px -40px #00000059,0 0 0 1px #ededec}.nl.osmo .ox-col--card{background:#f6f5f4}.nl.osmo .ox-big a{color:#0d0d0d;border-bottom-color:#ededec}.nl.osmo .ox-big a:hover{color:#0075de}.nl.osmo .ox-k{color:#8c8c8c}.nl.osmo .ox-small a{color:#0d0d0d;background:#f6f5f4}.nl.osmo .ox-contact a{color:#5c5c5c}.nl.osmo .ox-feat{background:var(--nl-crisp);color:#0d0d0d;box-shadow:inset 0 0 0 1px #dce9f8}.nl.osmo .ox-models i{color:#0d0d0d;background:#fff}.nl.osmo .ox-feat-btn{color:#fff;background:#0075de;border-radius:9px}.nl.osmo .ox-dim{background:#1414142e}.nl .wp-block-post-content>.hx,.nl.osmo main .hx{background:var(--nl-crisp);border-radius:28px;padding-top:clamp(56px,7vw,110px);box-shadow:inset 0 0 0 1px #e3edf9;margin:14px clamp(10px,1.6vw,24px) 0!important}.nl .hx:before{background:radial-gradient(50% 40% at 15% 0,#ffffffe6,#0000 70%)}.nl .hx:after{opacity:.55;background-image:linear-gradient(#0075de12 1px,#0000 1px),linear-gradient(90deg,#0075de12 1px,#0000 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(75% 60% at 50% 20%,#000 30%,#0000 80%);mask-image:radial-gradient(75% 60% at 50% 20%,#000 30%,#0000 80%)}.nl .wp-block-post-content>.page-hero{isolation:isolate;border-radius:28px;overflow:hidden;box-shadow:inset 0 0 0 1px #e3edf9;background:var(--nl-crisp)!important;margin:14px clamp(10px,1.6vw,24px) 0!important}.nl .wp-block-post-content>.page-hero+section{box-shadow:none}.nl .hx-pill{background:#fff;border-color:#dce9f8}.nl .hx-pill-b{color:#fff;background:#0075de}.nl .ox-w{background:#fff;box-shadow:inset 0 0 0 1px #dce9f8}.nl .ox-w--dark{color:#fff;box-shadow:none;background:#0075de}.nl .hx-stage{background:#f6f5f4;border-color:#e4e4e4;box-shadow:0 1px 2px #0000000a,0 40px 80px -50px #003c8c73}.nl .hx-toggle{border-color:#dce9f8}.nl .hx-thumb{box-shadow:none;background:#0075de}.nl .np-can a{background:#fff}.nl .hx-foot-t{color:#6b6b6b}.nl :is(.tile-detail,.calc-result,.case-visual,.cs-stage,.post-cta,.post-aside-cta,.say,.duo-wij,.awb-card,.vs-ours){color:#0d0d0d;background:#fff;box-shadow:inset 0 0 0 1px #e4e4e4,0 24px 48px -40px #00000059}.nl .tile-detail :is(h3,li,p){color:#0d0d0d}.nl .tile-detail li{color:#3d3d3d}.nl .tile-detail li:before{color:#0075de}.nl .tile-ghost{color:#ededec}.nl .tile[aria-pressed=true]{background:#f2f8fe;border-color:#0075de}.nl .tile[aria-pressed=true] strong{color:#0d0d0d}.nl .tile[aria-pressed=true] span{color:#5c5c5c}.nl .ai-mini-srcs span{color:#0d0d0d;background:#fff;border-color:#e4e4e4}.nl :is(.ai-mini,.usp-grid>.reveal:last-child):before{background:var(--nl-crisp);box-shadow:inset 0 0 0 1px #e3edf9}.nl .band .chat .chat-head,.nl :is(.band,.cta-band,.gains-band) .chat .chat-head,.nl .bubble-inner,.nl :is(.band,.story) .bubble-inner{color:#fff}.nl .bubble:nth-of-type(4n+1) .bubble-inner,.nl :is(.band,.story) .bubble:nth-of-type(4n+1) .bubble-inner,.nl .port-side b{color:#0d0d0d}.nl .port-side span.on{color:#0075de;background:#fff;box-shadow:inset 0 0 0 1px #e4e4e4}.nl .deck-tab[aria-pressed=true],.nl .hub-tab[aria-pressed=true],.nl .blog-filter .opt[aria-pressed=true]{color:#fff;background:#0075de}.nl .deck--rail .deck-tab[aria-pressed=true]{color:#0d0d0d;background:0 0}.nl .deck-tab[aria-pressed=true] small,.nl .deck--list .deck-tab[aria-pressed=true] i{color:#ffffffd1}.nl .opt[aria-pressed=true],.nl .rounds-tabs .opt[aria-pressed=true],.nl .phase-opt[aria-pressed=true]{color:#fff;background:#0075de;border-color:#0075de}.nl .phase-opt[aria-pressed=true]:after{color:#fff}.nl .lib-filter .opt{color:#5c5c5c;background:#fff;border-color:#e4e4e4}.nl .lib-filter .opt:hover{color:#0d0d0d;border-color:#bdbdbd}.nl .lib-filter .opt[aria-pressed=true]{color:#fff;background:#0075de;border-color:#0075de}.nl .lib-filter .opt b{color:#5c5c5c;background:#f6f5f4}.nl .lib-filter .opt[aria-pressed=true] b{color:#fff;background:#fff3}.nl .switch{background:#fff;border-color:#e4e4e4}.nl .switch button{color:#5c5c5c}.nl .switch button[aria-pressed=true]{color:#fff}.nl .switch .pill{background:#0075de}.nl .calc .calc-field output,.nl .calc .calc-field:hover output,.nl .calc .calc-field.is-hint output{color:#fff}.nl .cs-hub{color:#fff;background:#0075de}.nl .cs-screen-h{color:#0d0d0d;background:#f6f5f4;box-shadow:inset 0 -1px #e4e4e4}.nl .duo-wij .duo-who i{color:#fff;background:#0075de}.nl .awb-a .awb-los,.nl .awb-node.awb-los em{color:#b23a0a;background:#c2410c17}.nl .awb-node.awb-los{border-color:#e8b49b}.nl .awb-node.awb-los .awb-node-ic{background:#f6f5f4}.nl .gform_wrapper .gform_button,.nl .gform_wrapper input[type=submit]{background:#0075de!important;border-radius:10px!important;box-shadow:0 0 0 4px #0075de1f!important}.nl .gform_wrapper .gform_button:hover,.nl .gform_wrapper input[type=submit]:hover{background:#005bab!important}.nl .gains>li,.nl .gains>li+li{background:#fff;box-shadow:inset 0 0 0 1px #e4e4e4}.nl .gain strong{color:#0d0d0d}.nl .gain span{color:#5c5c5c}.nl .cta-band{background:#f6f5f4}.nl .sx-sticker{box-shadow:0 1px 2px #0000000f,0 18px 36px -24px #0006,inset 0 0 0 1px #ededec}.nl .sx-note,.nl :is(.band,.cta-band) .sx-note{color:#0075de}.nl .story.band .story-line strong{color:#0d0d0d}.nl .story.band .story-line span,.nl .story.band .story-hint{color:#5c5c5c}.nl .story.band .story-steps li{color:#8c8c8c;border-color:#e4e4e4}.nl.speels .story.band .sx-chip{background:color-mix(in srgb,var(--t)14%,#fff);color:#0d0d0d}.nl .ox-fan{--ox-dark:#0d0d0d}.nl .ox-split--light b:first-child{background:#0d0d0d}.nl .ox-card--dark{color:#fff;background:#f04830}.nl .ox-card--dark .ox-card-ast{color:#fff}.nl .ox-card--dark .ox-card-btn{color:#0d0d0d;background:#fff}.nl .ox-card--light{box-shadow:inset 0 0 0 1px #e4e4e4,0 30px 60px -36px #0000004d}.nl .site-footer{--band:#191919;--band-2:#252525;--band-ink:#f7f7f5;--band-ink-2:#a8a8a8;--band-line:#2f2f2f;--ink:#f7f7f5;color:#a8a8a8;background:#191919}.nl .site-footer .footer-ask{background:#252525;border-color:#2f2f2f}.nl .site-footer :is(h2,a){color:#f7f7f5}.nl .site-footer .footer-grid h2{color:#8c8c8c}.nl .chapters a.is-on i{background:#0075de}@media (width<=1279px){.nl.paid .site-header .nav--desktop{display:none}.nl.osmo .ox-menu-btn{color:#0d0d0d;order:2;grid-column:3;padding:10px;display:inline-flex}.nl.osmo .site-header .header-inner,.nl.paid .site-header .header-inner,.nl.osmo.paid .site-header .header-inner,.nl.osmo.paid .site-header.hp-dark .header-inner{grid-template-columns:auto minmax(0,1fr) auto auto;gap:14px}.nl.paid .site-header .header-side{grid-column:3}.nl.osmo .ox-menu-btn{grid-column:4}.nl.osmo .ox-menu-t{display:none}}@media (width<=767px){.nl .wp-block-post-content>.hx,.nl.osmo main .hx{border-radius:20px;padding-top:44px;margin:8px 8px 0!important}.nl .wp-block-post-content>.page-hero{border-radius:20px;margin:8px 8px 0!important}.nl.osmo .site-header .header-inner,.nl.osmo.paid .site-header .header-inner,.nl.osmo.paid .site-header.hp-dark .header-inner{gap:8px;min-height:58px}.nl.osmo .ox-menu-btn{padding:8px}}@media (width<=380px){.nl.osmo .site-header .brand-name{font-size:1.02rem;display:inline}.nl.osmo .site-header .header-inner,.nl.osmo.paid .site-header .header-inner,.nl.osmo.paid .site-header.hp-dark .header-inner{gap:6px;padding:0 12px}}.nl.paid .site-header.hp-dark .ox-menu-btn,.nl.paid .site-header.hp-dark .brand,.nl.paid .site-header.hp-dark .brand-name{color:#0d0d0d}.nl.paid .site-header.hp-dark .ox-menu-btn:hover{background:#0d0d0d0d}.nl.paid .site-header.hp-dark .brand-name em{color:inherit}.nl .gform_wrapper :is(textarea,select,input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=hidden])){box-sizing:border-box;max-width:100%}.nl .gform_wrapper textarea{width:100%}

/* ===== ROUND 22b: footer ===== */
.nl .site-footer.hp-under{margin-top:0}

/* ===== ROUND 23b ===== */
/* ===== ROUND 23b · TEAM: small round photos ===== */
.team-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(32px,5vw,80px)}
.team-wrap .section-head{max-width:600px}
.team-avs{list-style:none;margin:0;padding:0 0 0 14px;display:flex;align-items:center}
.team-av{position:relative;margin-left:-14px;transition:transform .35s var(--ease-out)}
.team-av img{display:block;width:56px;height:56px;border-radius:50%;object-fit:cover;background:#EAE5DE;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--c),0 12px 24px -14px rgba(0,0,0,.5)}
.team-av:hover{transform:translateY(-6px);z-index:2}
.team-tip{position:absolute;left:50%;bottom:calc(100% + 14px);transform:translate(-50%,4px);white-space:nowrap;padding:7px 11px 8px;border-radius:8px;background:#0D0D0D;color:#B8B8B8;font:500 .76rem/1.3 var(--sans);text-align:center;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .25s var(--ease-out)}
.team-tip b{display:block;font-size:.84rem;font-weight:600;color:#fff}
.team-tip::after{content:"";position:absolute;left:50%;top:100%;margin-left:-5px;border:5px solid transparent;border-top-color:#0D0D0D}
.team-av:hover .team-tip{opacity:1;transform:translate(-50%,0)}
@media (max-width:991px){.team-wrap{grid-template-columns:1fr;gap:28px}}
@media (max-width:767px),(hover:none){.team-tip{display:none}}
@media (max-width:622px){.team-avs{padding-left:10px}.team-av{margin-left:-10px}.team-av img{width:48px;height:48px}}
@media (max-width:478px){.team-avs{padding-left:8px}.team-av{margin-left:-8px}.team-av img{width:36px;height:36px;box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--c),0 8px 16px -10px rgba(0,0,0,.5)}}
/* ===== ROUND 23b · LOGO INTRO: cell by cell, then the blue cell turns ===== plays once per page load, CSS only */
@media (prefers-reduced-motion: no-preference) {
  .site-header .brand-mark path { transform-box: fill-box; transform-origin: 50% 50%; }
  .site-header .brand-mark path:nth-of-type(1) { animation: taCell .4s cubic-bezier(.34, 1.56, .64, 1) 0.050s both; }
  .site-header .brand-mark path:nth-of-type(2) { animation: taCell .4s cubic-bezier(.34, 1.56, .64, 1) 0.095s both; }
  .site-header .brand-mark path:nth-of-type(3) { animation: taCell .4s cubic-bezier(.34, 1.56, .64, 1) 0.140s both; }
  .site-header .brand-mark path:nth-of-type(4) { animation: taCell .4s cubic-bezier(.34, 1.56, .64, 1) 0.185s both; }
  .site-header .brand-mark path:nth-of-type(5) { animation: taCell .4s cubic-bezier(.34, 1.56, .64, 1) 0.230s both; }
  .site-header .brand-mark path:nth-of-type(6) { animation: taCell .4s cubic-bezier(.34, 1.56, .64, 1) 0.275s both; }
  .site-header .brand-mark path:nth-of-type(7) { animation: taCell .4s cubic-bezier(.34, 1.56, .64, 1) 0.320s both; }
  .site-header .brand-mark path:nth-of-type(8) { animation: taCell .4s cubic-bezier(.34, 1.56, .64, 1) 0.365s both; }
  .site-header .brand-mark path:nth-of-type(9) { animation: taCellTurn 1.05s linear 0.410s both; }
  .site-header .brand-name { animation: taLogoName .55s cubic-bezier(.16, 1, .3, 1) .22s both; }
}
@keyframes taCell { from { opacity: 0; transform: scale(.2); } 45% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes taCellTurn {
  0% { opacity: 0; transform: translate(-4px, -4px) scale(.2); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
  38% { opacity: 1; transform: translate(-4px, -4px) scale(1); animation-timing-function: linear; }
  52% { opacity: 1; transform: translate(-4px, -4px) scale(1); animation-timing-function: cubic-bezier(.3, 1.6, .5, 1); }
  100% { opacity: 1; transform: rotate(15deg); }
}
@keyframes taLogoName { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
/* ===== ROUND 26 · FEEDBACK 5 NOV ===== hero examples, CRM versus maatwerk on the home page, colourful case story, offer demo */

/* 1 · hero: pick a situation */
.hx-setnav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 18px auto 0; max-width: 820px; }
.hx-setnav-k { font-size: .84rem; font-weight: 600; color: #37352f; margin-right: 4px; }
.hx-set-b { appearance: none; cursor: pointer; font: 600 .84rem/1 var(--sans, inherit); padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(15, 15, 15, .12); background: #fff; color: #37352f; box-shadow: 0 1px 2px rgba(15, 15, 15, .06); transition: background-color .2s, color .2s, border-color .2s, transform .2s; }
.hx-set-b:hover { border-color: var(--n-blue); color: var(--n-blue); transform: translateY(-1px); }
.hx-set-b[aria-pressed="true"] { background: var(--n-blue); border-color: var(--n-blue); color: #fff; }
.hx-set-b:focus-visible { outline: 2px solid var(--n-blue); outline-offset: 2px; }
.hx-sets { display: none !important; }
.hx-stage.hx-swap .hx-card { animation: hx26In .55s var(--ease-out) both; }
@keyframes hx26In { from { filter: blur(6px) saturate(.4); } to { filter: none; } }
@media (max-width: 478px) { .hx-setnav { gap: 6px; } .hx-setnav-k { width: 100%; text-align: center; margin: 0 0 2px; } .hx-set-b { padding: 8px 11px; font-size: .78rem; } }

/* 2 · cases: the three steps in colour */
html.nl .cs-board { border-radius: 14px; background: radial-gradient(circle at 18% 18%, rgba(252, 174, 16, .16), transparent 42%), radial-gradient(circle at 84% 84%, rgba(0, 117, 222, .13), transparent 46%), radial-gradient(rgba(15, 15, 15, .07) 1px, transparent 1.2px) 0 0 / 16px 16px, #fbfaf8; }
html.nl .cs-chip { --cc: var(--n-blue); --cl: var(--n-blue-l); background: var(--cl); color: #191919; border: 1.5px dashed var(--cc); font-weight: 600; padding: 8px 14px 8px 32px; box-shadow: 0 6px 14px -8px var(--cc); }
html.nl .cs-chip::before { content: ""; position: absolute; left: 11px; top: 50%; width: 13px; height: 13px; margin-top: -6.5px; border-radius: 4px; background: var(--cc); }
html.nl .cs-chip:nth-child(1) { --cc: var(--n-red); --cl: var(--n-red-l); }
html.nl .cs-chip:nth-child(2) { --cc: var(--n-green); --cl: var(--n-green-l); }
html.nl .cs-chip:nth-child(3) { --cc: var(--n-blue); --cl: var(--n-blue-l); }
html.nl .cs-chip:nth-child(4) { --cc: #e09a00; --cl: var(--n-yellow-l); }
html.nl .cs-chip:nth-child(5) { --cc: var(--n-indigo); --cl: var(--n-indigo-l); }
html.nl .cs-chip:nth-child(6) { --cc: #e8590c; --cl: #fff0e6; }
html.nl .cs[data-at="2"] .cs-chip { border-style: solid; border-color: var(--cc); background: #fff; }
html.nl .cs-board::before { border: 2px dashed rgba(0, 117, 222, .35); }
html.nl .cs-hub { background: linear-gradient(135deg, var(--n-blue), var(--n-indigo)); color: #fff; box-shadow: 0 18px 40px -16px rgba(21, 21, 176, .7), 0 0 0 8px rgba(0, 117, 222, .1); }
html.nl .cs-screen { border: 1px solid rgba(15, 15, 15, .08); box-shadow: 0 24px 50px -24px rgba(15, 15, 15, .35); }
html.nl .cs-screen-h { background: linear-gradient(90deg, var(--n-blue), var(--n-indigo)); color: #fff; }
html.nl .cs-screen-h::before { background: var(--n-yellow); }
html.nl .cs-screen li { --cc: var(--n-green); --cl: var(--n-green-l); background: var(--cl); color: #191919; border-left: 4px solid var(--cc); }
html.nl .cs-screen li:nth-child(2) { --cc: var(--n-blue); --cl: var(--n-blue-l); }
html.nl .cs-screen li:nth-child(3) { --cc: #e09a00; --cl: var(--n-yellow-l); }
html.nl .cs-screen li::before { color: var(--cc); }
html.nl .cs-dots i:nth-child(1) { --dc: var(--n-red); }
html.nl .cs-dots i:nth-child(2) { --dc: var(--n-blue); }
html.nl .cs-dots i:nth-child(3) { --dc: var(--n-green); }
html.nl .cs[data-at="1"] .cs-dots i:nth-child(1), html.nl .cs[data-at="2"] .cs-dots i:nth-child(-n+2), html.nl .cs[data-at="3"] .cs-dots i { background: var(--dc); }
html.nl .cs-step .cs-k { display: inline-block; padding: 5px 10px; border-radius: 999px; background: var(--n-red-l); color: #b42318; }
html.nl .cs-step[data-n="2"] .cs-k { background: var(--n-blue-l); color: var(--n-blue-dark); }
html.nl .cs-step[data-n="3"] .cs-k { background: var(--n-green-l); color: #137a26; }

/* 3 · home: CRM versus a system built around the business */
.crm-vs { position: relative; overflow: hidden; background: linear-gradient(180deg, #fff 0, var(--n-warm) 100%); }
.crm-vs::before, .crm-vs::after { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(60px); opacity: .5; pointer-events: none; }
.crm-vs::before { left: -220px; top: 60px; background: radial-gradient(circle, rgba(240, 72, 48, .22), transparent 65%); }
.crm-vs::after { right: -220px; bottom: 80px; background: radial-gradient(circle, rgba(0, 117, 222, .22), transparent 65%); }
.crm-vs > .wrap { position: relative; z-index: 1; }
.crm-vs .section-head { max-width: 760px; }
.deck--pop .deck-tabs { border-radius: 999px; padding: 6px; background: #fff; box-shadow: 0 14px 34px -18px rgba(15, 15, 15, .35), inset 0 0 0 1px rgba(15, 15, 15, .08); max-width: 660px; }
.deck--pop .deck-tab { border-radius: 999px; }
.deck--pop .deck-tab.tone-5[aria-pressed="true"] { background: linear-gradient(135deg, #f04830, #c2410c); color: #fff; box-shadow: 0 10px 24px -10px rgba(240, 72, 48, .8); }
.deck--pop .deck-tab.tone-4[aria-pressed="true"] { background: linear-gradient(135deg, var(--n-blue), var(--n-indigo)); color: #fff; box-shadow: 0 10px 24px -10px rgba(0, 117, 222, .8); }
.deck--pop .deck-tab[aria-pressed="true"] small { color: rgba(255, 255, 255, .85); }
.deck--pop .deck-stage { border-radius: 22px; }
.deck--pop .crm-grid { position: relative; }
.deck--pop .crm-old { transform: rotate(-1.5deg); filter: saturate(.7); }
.deck--pop .crm-new { box-shadow: 0 30px 60px -28px rgba(0, 117, 222, .55), 0 0 0 1px rgba(0, 117, 222, .18); }
.crm-oldwrap { position: relative; }
.crm-orbit { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.crm-sat { position: absolute; display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px 6px 6px; border-radius: 9px; background: #fff; font: 600 .72rem/1.1 var(--sans, inherit); color: #37352f; white-space: nowrap; box-shadow: 0 10px 22px -12px rgba(15, 15, 15, .45), 0 0 0 1px rgba(15, 15, 15, .08); animation: crmSat 5.5s ease-in-out calc(var(--k) * -1.1s) infinite; }
.crm-sat::before { content: "X"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; color: #fff; font-size: .62rem; font-weight: 800; background: #1e7145; }
.crm-sat.w::before { content: "W"; background: #2b5797; }
.crm-sat.p::before { content: "PDF"; font-size: .5rem; background: #d93025; }
.crm-sat.a::before { content: "✉"; background: #1da851; }
.crm-sat.m::before { content: "@"; background: #0f6cbd; }
.crm-sat:nth-child(1) { right: -6%; top: -16px; --r: 5deg; }
.crm-sat:nth-child(2) { right: -20%; top: 46%; --r: -6deg; }
.crm-sat:nth-child(3) { left: -5%; top: -18px; --r: -7deg; }
.crm-sat:nth-child(4) { right: -4%; bottom: -16px; --r: 4deg; }
.crm-sat:nth-child(5) { left: 6%; bottom: -18px; --r: 6deg; }
@keyframes crmSat { 0%, 100% { transform: translateY(0) rotate(var(--r)); } 50% { transform: translateY(-7px) rotate(calc(var(--r) * -.5)); } }
.cvs { max-width: 1040px; margin-inline: auto; width: 100%; }
.cvs-head, .cvs-row { display: grid; grid-template-columns: 150px 1fr 1fr; gap: 12px; align-items: stretch; }
.cvs-head { align-items: center; margin-bottom: 10px; position: relative; }
.cvs-head b { font: 700 .82rem/1 var(--sans, inherit); letter-spacing: .08em; text-transform: uppercase; padding: 10px 14px; border-radius: 999px; text-align: center; }
.cvs-head .cvs-a { background: var(--n-red-l); color: #b42318; }
.cvs-head .cvs-b { background: var(--n-blue-l); color: var(--n-blue-dark); }
.cvs-badge { position: absolute; left: calc(150px + 12px + (100% - 150px - 24px) / 2 + 6px); top: 50%; transform: translate(-50%, -50%); width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #191919; color: #fff; font: 800 .9rem/1 var(--sans, inherit); font-style: normal; text-transform: uppercase; box-shadow: 0 0 0 5px #fff; z-index: 2; }
.cvs-rows { margin: 0; display: grid; gap: 10px; }
.cvs-row dt { display: flex; align-items: center; font-weight: 700; color: #191919; font-size: .95rem; }
.cvs-row dd { margin: 0; display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 14px; font-size: .95rem; line-height: 1.4; transition: transform .25s var(--ease-out), box-shadow .25s; }
.cvs-row dd i { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; }
.cvs-row dd i svg { width: 14px; height: 14px; }
.cvs-row dd small { display: none; }
.cvs-row .cvs-a { background: rgba(255, 255, 255, .6); color: #6b6a66; box-shadow: inset 0 0 0 1px rgba(15, 15, 15, .07); }
.cvs-row .cvs-a i { background: var(--n-red-l); color: var(--n-red); }
.cvs-row .cvs-b { background: #fff; color: #191919; font-weight: 600; box-shadow: 0 12px 26px -18px rgba(0, 117, 222, .6), inset 0 0 0 1.5px rgba(0, 117, 222, .25); }
.cvs-row .cvs-b i { background: var(--n-blue); color: #fff; }
.cvs-row:hover .cvs-b { transform: translateY(-2px); box-shadow: 0 16px 30px -16px rgba(0, 117, 222, .7), inset 0 0 0 1.5px var(--n-blue); }
.od-home { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(20px, 3vw, 36px); border-radius: 24px; background: #fff; box-shadow: 0 1px 2px rgba(15, 15, 15, .05), 0 24px 50px -30px rgba(15, 15, 15, .35); }
.od-home-t .h3 { margin: 6px 0 10px; }
.od-home-t p { color: #5f5e5b; margin: 0 0 14px; }
@media (max-width: 991px) {
  .od-home { grid-template-columns: 1fr; }
  .crm-sat:nth-child(2) { right: -2%; }
}
@media (max-width: 767px) {
  .cvs-head { display: none; }
  .cvs-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .cvs-row dt { grid-column: 1 / -1; margin-top: 6px; }
  .cvs-row dd { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; font-size: .88rem; }
  .cvs-row dd small { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 2px; color: inherit; opacity: .75; }
  .cvs-row .cvs-a small { color: #b42318; }
  .cvs-row .cvs-b small { color: var(--n-blue-dark); }
  .crm-sat { font-size: .66rem; }
  .crm-sat:nth-child(1), .crm-sat:nth-child(4) { right: 0; }
  .crm-sat:nth-child(3) { left: 0; }
}
@media (max-width: 478px) {
  .deck--pop .crm-old { transform: none; overflow: hidden; }
  .deck--pop .crm-body, .deck--pop .crm-tabs, .deck--pop .crm-fields, .deck--pop .crm-side { min-width: 0; max-width: 100%; }
  .deck--pop .crm-tabs { flex-wrap: wrap; }
  .deck--pop .crm-fields { grid-template-columns: auto minmax(0, 1fr); }
  .deck--pop .crm-fields em { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .deck--pop .crm-side { flex-wrap: wrap; }
  .deck--pop .crm-file { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .cvs-row { grid-template-columns: 1fr; }
  .cvs-row dd { flex-direction: row; align-items: center; }
  .crm-sat:nth-child(2), .crm-sat:nth-child(5) { display: none; }
}

/* 4 · offer demo: from loose Word files to an offer that follows itself up */
.od { --od-h: 330px; position: relative; border-radius: 20px; background: #fff; padding: 14px; box-shadow: 0 1px 2px rgba(15, 15, 15, .05), 0 0 0 1px rgba(15, 15, 15, .07); }
.sketch .od { margin: 4px 0 18px; }
.od-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.od-seg { display: inline-flex; padding: 4px; border-radius: 999px; background: #f1f0ee; }
.od-seg button { appearance: none; cursor: pointer; border: 0; background: transparent; padding: 8px 14px; border-radius: 999px; font: 600 .82rem/1 var(--sans, inherit); color: #5f5e5b; transition: background-color .25s, color .25s, box-shadow .25s; }
.od-seg button[aria-pressed="true"] { background: #fff; color: #191919; box-shadow: 0 2px 8px -2px rgba(15, 15, 15, .2); }
.od-seg button[data-v="after"][aria-pressed="true"] { background: var(--n-blue); color: #fff; }
.od-seg button:focus-visible { outline: 2px solid var(--n-blue); outline-offset: 2px; }
.od-tag { font-size: .72rem; color: #8b8a86; }
.od-stage { position: relative; height: var(--od-h); border-radius: 14px; overflow: hidden; background: radial-gradient(rgba(15, 15, 15, .08) 1px, transparent 1.2px) 0 0 / 16px 16px, #f7f6f3; transition: background-color .5s; }
.od-stage[data-v="after"] { background: radial-gradient(rgba(0, 117, 222, .1) 1px, transparent 1.2px) 0 0 / 16px 16px, #eef5fd; }
.od-w { flex: none; position: relative; width: 30px; height: 37px; border-radius: 4px 9px 4px 4px; background: linear-gradient(160deg, #3a6fc4, #2b5797); box-shadow: 0 4px 10px -4px rgba(43, 87, 151, .8); font-style: normal; }
.od-w::before { content: ""; position: absolute; right: 0; top: 0; width: 10px; height: 10px; border-radius: 0 9px 0 3px; background: rgba(255, 255, 255, .45); }
.od-w span { position: absolute; left: 0; right: 0; bottom: 5px; text-align: center; color: #fff; font: 800 .5rem/1 var(--sans, inherit); letter-spacing: .04em; }
.od-before, .od-after { position: absolute; inset: 0; transition: opacity .45s, transform .6s var(--ease-out); }
.od-doc { position: absolute; left: calc(6% + var(--k) * 6%); top: calc(16px + var(--k) * 62px); width: min(300px, 74%); display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 12px; background: #fff; box-shadow: 0 12px 26px -16px rgba(15, 15, 15, .5), 0 0 0 1px rgba(15, 15, 15, .06); transform: rotate(calc(-3deg + var(--k) * 2.6deg)); transition: transform .6s var(--ease-out) calc(var(--k) * .05s), opacity .4s; }
.od-doc b { display: block; font-size: .8rem; color: #191919; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 210px; }
.od-doc small { display: block; font-size: .7rem; color: #8b8a86; margin-top: 3px; }
.od-sticky { position: absolute; right: 6%; top: 20px; margin: 0; width: 132px; padding: 14px 12px 18px; background: #fde68a; color: #4a3b00; font: 600 1.06rem/1.15 Caveat, "Segoe Print", cursive; transform: rotate(6deg); box-shadow: 0 12px 20px -12px rgba(120, 90, 0, .6); }
.od-ask { position: absolute; right: 5%; bottom: 18px; margin: 0; max-width: 220px; padding: 10px 12px; border-radius: 14px 14px 4px 14px; background: #dcf8c6; color: #1f2d1a; font-size: .8rem; line-height: 1.35; box-shadow: 0 10px 22px -14px rgba(15, 15, 15, .5); }
.od-ask b { display: block; font-size: .7rem; color: #1e8e5a; margin-bottom: 2px; }
.od-after { display: grid; place-items: center; padding: 14px; opacity: 0; transform: translateY(18px) scale(.97); pointer-events: none; }
.od-card { width: min(400px, 100%); border-radius: 16px; background: #fff; padding: 14px 16px 6px; box-shadow: 0 26px 50px -26px rgba(0, 117, 222, .6), 0 0 0 1px rgba(0, 117, 222, .15); }
.od-card-h { display: flex; align-items: center; gap: 11px; padding-bottom: 12px; border-bottom: 1px solid #eeede9; }
.od-card-h > span:not(.od-score) { min-width: 0; flex: 1; }
.od-card-h b { display: block; font-size: .9rem; color: #191919; }
.od-card-h small { display: block; font-size: .74rem; color: #8b8a86; margin-top: 2px; }
.od-score { flex: none; text-align: right; padding: 6px 10px; border-radius: 10px; background: var(--n-green-l); }
.od-score small { color: #137a26; font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; }
.od-score b { color: #137a26; font-size: 1.05rem; }
.od-line { list-style: none; margin: 0; padding: 10px 0 4px; position: relative; }
.od-line::before { content: ""; position: absolute; left: 10px; top: 20px; bottom: 22px; width: 2px; background: #e6e5e1; }
.od-line li { position: relative; display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 5px 0; opacity: .25; }
.od-line li::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #d9d8d4; z-index: 1; }
.od-line li b { font-size: .82rem; color: #191919; }
.od-line li small { font-size: .7rem; color: #8b8a86; text-align: right; }
.od-stage[data-v="before"] .od-before { opacity: 1; }
.od-stage[data-v="after"] .od-before { opacity: 0; transform: scale(.94); }
.od-stage[data-v="after"] .od-doc { transform: translate(40px, 10px) rotate(0deg); }
.od-stage[data-v="after"] .od-after { opacity: 1; transform: none; pointer-events: auto; transition-delay: .15s; }
.od-stage[data-v="after"] .od-line li { animation: odStep .45s var(--ease-out) calc(.45s + var(--k) * .5s) both; }
.od-stage[data-v="after"] .od-line li::before { animation: odDot .45s var(--ease-out) calc(.45s + var(--k) * .5s) both; }
.od-stage[data-v="after"] .od-score { animation: odStep .5s var(--ease-out) 2.9s both; }
@keyframes odStep { from { opacity: .25; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes odDot { to { background: var(--n-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 13px no-repeat; box-shadow: 0 0 0 4px var(--n-green-l); } }
.od--mini { --od-h: 320px; }
@media (max-width: 622px) {
  .od { --od-h: 430px; padding: 10px; }
  .od-after { padding: 10px; }
  .od-card { padding: 12px 12px 4px; }
  .od-card-h b { font-size: .84rem; }
  .od-score { padding: 5px 8px; }
  .od-score b { font-size: .95rem; }
  .od-doc { width: 82%; left: calc(3% + var(--k) * 4%); }
  .od-sticky { top: auto; bottom: 74px; right: 4%; width: 120px; font-size: .98rem; }
  .od-ask { bottom: 12px; right: 4%; max-width: 200px; }
  .od-line li { grid-template-columns: 22px 1fr; }
  .od-line li small { grid-column: 2; text-align: left; margin-top: -4px; }
}
@media (max-width: 478px) { .od-card-h { flex-wrap: wrap; } .od-score { flex-basis: 100%; display: flex; align-items: center; justify-content: space-between; text-align: left; } }
@media (max-width: 340px) { .od-doc b { max-width: 150px; } .od-seg button { padding: 8px 10px; font-size: .76rem; } }
@media (prefers-reduced-motion: reduce) {
  .crm-sat { animation: none; }
  .od-stage[data-v="after"] .od-line li, .od-stage[data-v="after"] .od-line li::before, .od-stage[data-v="after"] .od-score { animation-duration: .01s; animation-delay: 0s; }
}

/* ===== ROUND 28 ===== Site-wide redesign (6 Nov 2026): dark top (hero, header inside it) and bottom (closing band, footer), light coloured blocks in between,
   docked/floating header, marker labels, glowing hero, pill buttons with a round arrow, geometric circles, heavier calculator figures,
   and the system map in "In vijf stappen". Added after round 26; nothing in the page content is changed or removed. */
html.nl{--mx-paper: #faf8f3;--mx-ink: #141824;--mx-night: #11151f;--mx-grey: #8b8f99;--mx-navy: #2b3550;--mx-yellow: #ffe066;--mx-blue: #0075de;--mx-orange: #ff8a3d;--mx-red: #f04830;--mx-sand: #ebe3c9;--mx-sand-line: #d3c9a6;--mx-t-blue: #eaf2ff;--mx-t-yellow: #fff5d6;--mx-t-peach: #ffede4;--mx-t-lilac: #f1ecff;--mx-t-mint: #e8f5ed;--mx-gutter: clamp(8px, 1.6vw, 22px);--mx-r: 28px;--mx-marker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M3 7C40 3 92 6 140 4S188 5 198 7L196 21 199 34C160 38 108 35 62 37S12 36 2 34L4 20Z' fill='%23ffe066'/%3E%3C/svg%3E")}
html.nl body{background: var(--mx-paper) !important}
html.nl .section, html.nl .band, html.nl .panel, html.nl .gains-band, html.nl .crm-vs, html.nl .marquee, html.nl .nl-g, html.nl .section--sand, html.nl .section--mist, html.nl .section--navy{background-color: var(--mx-paper) !important}
html.nl #herkenbaar, html.nl #wat-we-doen, html.nl #onze-kracht, html.nl #ai, html.nl #cases, html.nl .gains-band + .section--mist, html.nl #in-vijf-stappen{margin-inline: var(--mx-gutter) !important;border-radius: var(--mx-r) !important;box-shadow: inset 0 0 0 1px rgba(20, 24, 36, .05) !important}
html.nl #herkenbaar{background-color: var(--mx-t-blue) !important}
html.nl #wat-we-doen{background-color: var(--mx-t-yellow) !important}
html.nl #onze-kracht{background-color: var(--mx-t-peach) !important}
html.nl #ai{background-color: var(--mx-t-lilac) !important}
html.nl #cases{background-color: var(--mx-t-mint) !important}
html.nl .gains-band + .section--mist{background-color: var(--mx-t-yellow) !important}
html.nl #in-vijf-stappen{background-color: var(--mx-t-lilac) !important}
html.nl #herkenbaar .sx-mk, html.nl #wat-we-doen .sx-mk, html.nl #onze-kracht .sx-mk, html.nl #ai .sx-mk, html.nl #cases .sx-mk, html.nl .gains-band + .section--mist .sx-mk, html.nl #in-vijf-stappen .sx-mk{display: none !important}
html.nl .site-header{background: transparent !important;box-shadow: none !important;padding-top: 10px;backdrop-filter: none !important;-webkit-backdrop-filter: none !important}
html.nl .site-header::before, html.nl .site-header .header-inner::before, html.nl .site-header .header-inner::after, html.nl .sx-progress{display: none !important}
html.nl header.site-header .wrap.header-inner{border-radius: 999px !important;background: rgba(255, 255, 255, .95) !important;backdrop-filter: blur(16px);-webkit-backdrop-filter: blur(16px);border: 1px solid rgba(20, 24, 36, .08);box-shadow: 0 12px 32px -18px rgba(20, 24, 36, .45);transition: background-color .35s, border-color .35s, box-shadow .35s}
html.nl:not(.ox-open) header.site-header:not(.is-scrolled) .wrap.header-inner{background: rgba(255, 255, 255, .06) !important;border-color: rgba(255, 255, 255, .12);box-shadow: none}
html.nl:not(.ox-open) .site-header:not(.is-scrolled) .brand, html.nl:not(.ox-open) .site-header:not(.is-scrolled) .brand-name, html.nl:not(.ox-open) .site-header:not(.is-scrolled) .brand-name em{color: #fff !important}
html.nl:not(.ox-open) .site-header:not(.is-scrolled) .nav--desktop a{color: rgba(255, 255, 255, .78) !important}
html.nl:not(.ox-open) .site-header:not(.is-scrolled) .nav--desktop a:hover, html.nl:not(.ox-open) .site-header:not(.is-scrolled) .nav--desktop a[aria-current]{color: #fff !important}
html.nl:not(.ox-open) .site-header:not(.is-scrolled) .ox-burger i{background: #fff !important}
html.nl:not(.ox-open) .site-header:not(.is-scrolled) .ox-menu-t{color: #fff !important}
html.nl .nav--desktop a{border-radius: 999px;transition: color .25s, background-color .25s}
html.nl .site-header.is-scrolled .nav--desktop a:hover{background: rgba(20, 24, 36, .05)}
html.nl .hx.hp-blk{margin-top: -64px !important;padding-top: calc(95px + 64px) !important}
html.nl .hx .sx-mk{display: none !important}
@media (max-width: 767px){html.nl .site-header{padding-top: 6px}
html.nl header.site-header .wrap.header-inner{margin-inline: 8px !important;width: auto !important;max-width: none !important;padding-inline: 14px 6px !important}
html.nl .site-header .btn--primary .arrow{display: none !important}
html.nl .site-header .btn--primary:has(.arrow){padding: 9px 16px !important}
html.nl .hx.hp-blk{margin-top: -58px !important;padding-top: calc(64px + 58px) !important}}
html.nl .btn{border-radius: 999px !important}
html.nl .btn--primary{background: linear-gradient(180deg, #2a95ff 0%, #0075de 55%, #0063bd 100%) !important;color: #fff !important;border: 1px solid #0058a8 !important;box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -2px 0 rgba(0, 0, 0, .14), 0 8px 18px -8px rgba(0, 117, 222, .65) !important}
html.nl .btn--primary:has(.arrow){padding: 6px 6px 6px 22px !important;gap: 14px !important}
html.nl .btn--primary .arrow{display: block !important;width: 15px;height: 12px;box-sizing: content-box;padding: 11px 10px;border-radius: 50%;background: #fff;color: var(--mx-blue);flex: none}
html.nl .site-header .btn--primary:has(.arrow){padding: 4px 4px 4px 16px !important;gap: 10px !important}
html.nl .site-header .btn--primary .arrow{width: 13px;height: 10px;padding: 8px 7px}
html.nl .btn--ghost, html.nl .btn--light{background: var(--mx-sand) !important;color: var(--mx-ink) !important;border: 1px solid var(--mx-sand-line) !important;box-shadow: none !important}
html.nl .btn .arrow{transition: transform .35s cubic-bezier(.2, .8, .2, 1)}
html.nl .btn:hover .arrow{transform: translateX(3px)}
html.nl .textlink{display: inline-flex !important;flex-direction: row-reverse;justify-content: flex-end;align-items: center;gap: 12px;border-bottom: 0 !important;background-image: none !important;color: var(--mx-blue) !important;font-weight: 500}
html.nl .textlink::after, html.nl .textlink::before{display: none !important}
html.nl .textlink .arrow{width: 13px;height: 10px;box-sizing: content-box;padding: 10px 9px;border-radius: 50%;background: rgba(0, 117, 222, .12);flex: none}
html.nl .eyebrow.ox-eb{display: inline-flex !important;align-items: center;gap: 0 !important;background: none !important;padding: 0 !important;box-shadow: none !important}
html.nl .ox-eb .ox-n{display: inline-grid !important;place-items: center;width: 30px;height: 30px;padding: 0 !important;border-radius: 5px !important;position: relative;z-index: 1;background: var(--mx-ink) !important;color: var(--mx-yellow) !important;font: 500 11px/1 "Geist Mono", ui-monospace, Menlo, monospace !important;box-shadow: none !important}
html.nl .ox-eb .ox-l{display: inline-block;padding: 8px 16px 8px 18px !important;margin-left: -3px;background: var(--mx-marker) center / 100% 100% no-repeat !important;color: var(--mx-ink) !important;font: 500 13px/1.1 "Geist Mono", ui-monospace, Menlo, monospace !important;letter-spacing: .01em;text-transform: none !important}
html.nl h2 em, html.nl .h2 em{color: var(--mx-grey) !important}
html.nl .tile{background: #fff !important;box-shadow: inset 0 0 0 1.5px rgba(20, 24, 36, .14) !important;border-radius: 18px !important}
html.nl .tile[aria-pressed="true"]{box-shadow: inset 0 0 0 1.5px var(--mx-ink), 0 4px 0 0 var(--mx-ink) !important}
html.nl .tile-ic{border-radius: 8px !important}
html.nl .calc-result, html.nl .od{box-shadow: inset 0 0 0 1.5px var(--mx-ink), 0 6px 0 0 var(--mx-ink) !important}
html.nl .faq details, html.nl .faq-item{border-radius: 16px !important}
html.nl #crm-of-maatwerk{background-image: radial-gradient(circle at calc(100% + 30px) 90px, var(--mx-sand) 0 130px, transparent 131px) !important}
html.nl #begin-hier{background-image: radial-gradient(circle at calc(100% + 20px) 88%, var(--mx-blue) 0 92px, transparent 93px), radial-gradient(circle at calc(100% - 150px) 96%, var(--mx-yellow) 0 34px, transparent 35px) !important}
html.nl #vragen{background-image: radial-gradient(circle at calc(100% + 40px) calc(100% + 40px), var(--mx-sand) 0 150px, transparent 151px) !important}
html.nl #wat-we-doen, html.nl #onze-kracht, html.nl #ai, html.nl #cases, html.nl #herkenbaar, html.nl .gains-band + .section--mist, html.nl #in-vijf-stappen{background-image: none !important}
html.nl #crm-of-maatwerk, html.nl #begin-hier, html.nl #vragen{background-size: auto !important;background-repeat: no-repeat !important;background-position: 0 0 !important}
@media (max-width: 622px){html.nl #crm-of-maatwerk, html.nl #begin-hier, html.nl #vragen{background-image: none !important}}
html.nl .chapters a.is-on span{opacity: 0 !important}
html.nl .chapters a:hover span, html.nl .chapters a:focus-visible span{opacity: 1 !important;transform: none !important}
html.nl .chapters a.is-on i{background: var(--mx-blue) !important}
@media (min-width: 1560px){html.nl .chapters a.is-on span{opacity: 1 !important}}
html.nl .hx.hp-blk{background: radial-gradient(70% 50% at 50% 0, rgba(0, 117, 222, .22), transparent 70%), var(--mx-night) !important;box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08) !important;color: #fff;isolation: isolate;overflow: hidden}
html.nl .hx .sx-spot{display: none !important}
html.nl .hx.hp-blk::before{content: "" !important;position: absolute !important;inset: 380px -14% auto -14% !important;height: 1000px !important;width: auto !important;z-index: -1 !important;pointer-events: none;background-image: radial-gradient(34% 40% at 14% 52%, rgba(240, 72, 48, .95), transparent 70%), radial-gradient(34% 42% at 88% 46%, rgba(255, 138, 61, .95), transparent 70%), radial-gradient(44% 40% at 50% 70%, rgba(0, 117, 222, 1), transparent 72%), radial-gradient(26% 26% at 66% 34%, rgba(0, 150, 255, .45), transparent 70%) !important;filter: blur(36px) saturate(1.1);opacity: 1 !important;transform-origin: 50% 70%;animation: mxAurora 22s ease-in-out infinite alternate}
html.nl .hx.hp-blk::after{content: "" !important;position: absolute !important;inset: 0 !important;z-index: 0 !important;pointer-events: none;filter: none !important;opacity: .22 !important;mix-blend-mode: overlay;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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") repeat !important}
@keyframes mxAurora{0%{transform: translate3d(0, 0, 0) scale(1) rotate(0deg)}50%{transform: translate3d(3%, -4%, 0) scale(1.08) rotate(3deg)}100%{transform: translate3d(-3%, 2%, 0) scale(1.04) rotate(-2deg)}}
@media (prefers-reduced-motion: reduce){html.nl .hx.hp-blk::before{animation: none}}
html.nl .hx-wrap{position: relative;z-index: 1}
html.nl .hx-title, html.nl .hx-title em{color: #fff !important}
html.nl .hx-title em{color: rgba(255, 255, 255, .55) !important}
html.nl .hx-lead{color: rgba(255, 255, 255, .7) !important}
html.nl .hx .ox-w{background: none !important;box-shadow: none !important;border: 0 !important;padding: 0 !important;color: #fff !important;text-decoration: underline;text-decoration-color: rgba(255, 255, 255, .35);text-underline-offset: 5px}
html.nl .hx .ox-w--dark{color: var(--mx-ink) !important;text-decoration: none;padding: 1px 10px 2px !important;background: var(--mx-marker) center / 100% 100% no-repeat !important}
html.nl .hx-pill{background: none !important;border: 0 !important;box-shadow: none !important;padding: 0 !important;gap: 0 !important}
html.nl .hx-pill>i{display: none !important}
html.nl .hx-pill-b{display: inline-grid !important;place-items: center;height: 30px;padding: 0 9px !important;border-radius: 5px !important;position: relative;z-index: 1;background: var(--mx-yellow) !important;color: var(--mx-ink) !important;font: 600 10.5px/1 "Geist Mono", ui-monospace, Menlo, monospace !important;letter-spacing: .06em;box-shadow: none !important}
html.nl .hx-pill>span:nth-of-type(2){padding: 8px 16px 8px 18px;margin-left: -3px;background: var(--mx-marker) center / 100% 100% no-repeat;color: var(--mx-ink) !important;font: 500 13px/1.1 "Geist Mono", ui-monospace, Menlo, monospace}
html.nl .hx-pill-tools{color: rgba(255, 255, 255, .6) !important;font-family: "Geist Mono", ui-monospace, Menlo, monospace !important;font-size: 12px !important;padding-left: 14px}
html.nl .hx-ctas .btn--primary{background: #fff !important;color: var(--mx-ink) !important;border: 0 !important;padding: 6px 6px 6px 24px !important;gap: 14px;box-shadow: 0 0 0 4px rgba(255, 255, 255, .12), 0 14px 30px -12px rgba(0, 0, 0, .6) !important}
html.nl .hx-ctas .btn--primary .arrow{padding: 13px 12px;background: var(--mx-blue);color: #fff}
html.nl .hx-ctas .btn--ghost{background: rgba(255, 255, 255, .06) !important;color: #fff !important;border: 1px solid rgba(255, 255, 255, .22) !important}
html.nl .hx-toggle{background: rgba(255, 255, 255, .1) !important;border: 1px solid rgba(255, 255, 255, .16) !important;box-shadow: none !important;backdrop-filter: blur(10px)}
html.nl .hx-toggle button{color: rgba(255, 255, 255, .78) !important}
html.nl .hx-toggle button[aria-pressed="true"], html.nl .hx-toggle button.is-on{color: #fff !important}
html.nl .hx-stage{background-color: #fbfaf7 !important;box-shadow: 0 0 0 8px rgba(255, 255, 255, .07), 0 0 0 9px rgba(255, 255, 255, .14), 0 40px 80px -30px rgba(0, 0, 0, .7) !important}
html.nl .hx-foot, html.nl .hx-foot *{color: rgba(255, 255, 255, .72) !important}
html.nl .hx-setnav-k{color: rgba(255, 255, 255, .6) !important}
html.nl .hx-set-b{background: rgba(255, 255, 255, .08) !important;color: #fff !important;border-color: rgba(255, 255, 255, .2) !important;border-radius: 999px !important}
html.nl .hx-set-b[aria-pressed="true"]{background: var(--mx-yellow) !important;color: var(--mx-ink) !important;border-color: var(--mx-yellow) !important}
html.nl .hx .np-can-k{color: rgba(255, 255, 255, .62) !important}
html.nl .hx-demo{position: relative}
html.nl .hx-demo::before, html.nl .hx-demo::after{content: "";position: absolute;z-index: 0;pointer-events: none}
html.nl .hx-demo::before{width: clamp(150px, 19vw, 270px);aspect-ratio: 1;border-radius: 50%;left: clamp(-130px, -7vw, -40px);top: 150px;background: var(--mx-yellow)}
html.nl .hx-demo::after{width: clamp(140px, 17vw, 240px);aspect-ratio: 3 / 4;border-radius: 999px 999px 0 0;right: clamp(-120px, -6vw, -36px);top: 96px;background: var(--mx-blue);box-shadow: inset 0 -40px 60px -30px rgba(0, 0, 0, .35)}
html.nl .hx-demo>*{position: relative;z-index: 1}
@media (max-width: 767px){html.nl .hx-ctas .btn--primary{padding-left: 20px !important}
html.nl .hx-pill-tools{display: none !important}
html.nl .hx-demo::before{width: 120px;left: -54px;top: 120px}
html.nl .hx-demo::after{width: 96px;right: -40px;top: 80px}
html.nl .hx.hp-blk::before{top: 520px !important;height: 760px !important;filter: blur(26px)}}
html.nl .cta-band{margin-inline: var(--mx-gutter) !important;border-radius: var(--mx-r) !important;color: #fff;background: radial-gradient(50% 60% at 0% 100%, rgba(240, 72, 48, .55), transparent 70%), radial-gradient(50% 60% at 100% 100%, rgba(255, 138, 61, .55), transparent 70%), radial-gradient(40% 50% at 50% 110%, rgba(0, 117, 222, .7), transparent 70%), var(--mx-night) !important;box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08) !important}
html.nl .cta-band h2, html.nl .cta-band .h2, html.nl .cta-band h3{color: #fff !important}
html.nl .cta-band h2 em, html.nl .cta-band .h2 em{color: rgba(255, 255, 255, .5) !important}
html.nl .cta-band p, html.nl .cta-band .lead{color: rgba(255, 255, 255, .68) !important}
html.nl .cta-band a:not(.btn){color: var(--mx-yellow) !important}
html.nl .cta-band .ox-eb .ox-n{background: rgba(255, 255, 255, .14) !important}
html.nl .cta-band .btn--light, html.nl .cta-band .btn--primary{background: #fff !important;color: var(--mx-ink) !important;border: 0 !important;box-shadow: 0 0 0 4px rgba(255, 255, 255, .12) !important}
html.nl .cta-band .btn:has(.arrow){padding: 6px 6px 6px 22px !important;gap: 14px !important}
html.nl .cta-band .btn .arrow{display: block !important;width: 15px;height: 12px;box-sizing: content-box;padding: 13px 12px;border-radius: 50%;background: var(--mx-blue);color: #fff}
html.nl .site-footer{background: var(--mx-night) !important}
html.nl .site-footer [class*="ask"]{background: rgba(255, 255, 255, .05) !important}
html.nl #herkenbaar{--mx-acc: #0075de;--mx-deep: #d4e5ff}
html.nl #wat-we-doen{--mx-acc: #141824;--mx-deep: #ffe7a1}
html.nl #onze-kracht{--mx-acc: #f04830;--mx-deep: #ffd6c4}
html.nl #ai{--mx-acc: #6d4aff;--mx-deep: #e0d6ff}
html.nl #cases{--mx-acc: #16a34a;--mx-deep: #c8ead4}
html.nl .gains-band + .section--mist{--mx-acc: #141824;--mx-deep: #ffe7a1}
html.nl #in-vijf-stappen{--mx-acc: #6d4aff;--mx-deep: #e0d6ff}
html.nl :is(#herkenbaar, #onze-kracht, #ai, #cases, #in-vijf-stappen) .ox-eb .ox-n{background: var(--mx-acc) !important;color: #fff !important}
html.nl #herkenbaar{background-image: radial-gradient(circle at calc(100% + 40px) calc(100% + 40px), var(--mx-deep) 0 230px, transparent 231px) !important}
html.nl #wat-we-doen{background-image: radial-gradient(circle at calc(100% + 60px) -60px, var(--mx-deep) 0 240px, transparent 241px) !important}
html.nl #onze-kracht{background-image: radial-gradient(circle at -70px calc(100% + 70px), var(--mx-deep) 0 250px, transparent 251px) !important}
html.nl #ai{background-image: radial-gradient(circle at calc(100% + 50px) -50px, var(--mx-deep) 0 220px, transparent 221px) !important}
html.nl #cases{background-image: radial-gradient(circle at calc(100% + 60px) calc(100% + 60px), var(--mx-deep) 0 250px, transparent 251px) !important}
html.nl .gains-band + .section--mist{background-image: radial-gradient(circle at -60px -60px, var(--mx-deep) 0 220px, transparent 221px) !important}
html.nl #in-vijf-stappen{background-image: radial-gradient(circle at calc(100% + 60px) -40px, var(--mx-deep) 0 260px, transparent 261px) !important}
html.nl :is(#herkenbaar, #wat-we-doen, #onze-kracht, #ai, #cases, #in-vijf-stappen), html.nl .gains-band + .section--mist{background-repeat: no-repeat !important;background-size: auto !important;background-position: 0 0 !important}
@media (max-width: 622px){html.nl :is(#herkenbaar, #wat-we-doen, #onze-kracht, #ai, #cases, #in-vijf-stappen), html.nl .gains-band + .section--mist{background-image: none !important}}
html.nl .site-header.is-scrolled .nav--desktop a:hover{color: var(--mx-ink) !important}
html.nl .skip-link:not(:focus){top: -200px !important}
html.nl .site-header{padding-top: 18px !important}
html.nl .hx.hp-blk{margin-top: -74px !important;padding-top: calc(95px + 74px) !important}
@media (max-width: 1200px){html.nl header.site-header .wrap.header-inner{margin-inline: calc(var(--mx-gutter) + 10px) !important;width: auto !important;max-width: none !important}}
@media (max-width: 767px){html.nl header.site-header .wrap.header-inner{margin-inline: calc(var(--mx-gutter) + 8px) !important;padding-inline: 14px 6px !important}
html.nl .hx.hp-blk{margin-top: -72px !important;padding-top: calc(64px + 72px) !important}}
html.nl .calc-big .num{font-weight: 700 !important;letter-spacing: -.05em !important;color: var(--mx-ink) !important}
html.nl .calc-big .num small{font-weight: 500 !important;color: var(--mx-grey) !important;letter-spacing: -.01em !important}
html.nl .calc-big .lbl{font-weight: 450 !important;color: #5b606b !important}
html.nl .calc-pair .v{font-family: var(--display) !important;font-weight: 700 !important;letter-spacing: -.035em !important;color: var(--mx-ink) !important;font-variant-numeric: tabular-nums}
html.nl .calc-pair .k{color: #5b606b !important}
html.nl .calc-bar .legend b{font-weight: 700 !important}
html.nl .calc-result::after{display: none !important}
html.nl .site-header{padding-top: 18px !important;transition: padding-top .45s cubic-bezier(.2, .8, .2, 1)}
html.nl header.site-header .wrap.header-inner{width: calc(100% - 2 * (var(--mx-gutter) + 10px)) !important;max-width: 1280px !important;margin-inline: auto !important;transition: max-width .55s cubic-bezier(.2, .8, .2, 1), background-color .35s, border-color .35s, box-shadow .45s, padding .45s}
html.nl:not(.ox-open) header.site-header:not(.is-scrolled) .wrap.header-inner{background: transparent !important;border-color: transparent !important;box-shadow: none !important;backdrop-filter: none !important;-webkit-backdrop-filter: none !important;padding-inline: 12px !important}
html.nl:not(.ox-open) .site-header:not(.is-scrolled) .nav--desktop a:hover{background: rgba(255, 255, 255, .08)}
html.nl .site-header.is-scrolled{padding-top: 10px !important}
html.nl header.site-header.is-scrolled .wrap.header-inner{max-width: 1200px !important;background: rgba(255, 255, 255, .96) !important;border-color: rgba(20, 24, 36, .08) !important;box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 18px 40px -22px rgba(20, 24, 36, .5) !important;padding-inline: 18px 6px !important}
@media (max-width: 767px){html.nl header.site-header .wrap.header-inner{width: calc(100% - 2 * (var(--mx-gutter) + 8px)) !important}
html.nl:not(.ox-open) header.site-header:not(.is-scrolled) .wrap.header-inner{padding-inline: 10px 4px !important}
html.nl header.site-header.is-scrolled .wrap.header-inner{padding-inline: 14px 6px !important}}
@media (prefers-reduced-motion: reduce){html.nl .site-header, html.nl header.site-header .wrap.header-inner{transition: none !important}}
html.nl #in-vijf-stappen .scene>:not(.sx2){display: none !important}
html.nl .sx2{position: absolute;inset: 0;--ink: #141824;--mute: #6b7080;--line: rgba(20, 24, 36, .09);--a-base: #0075de;--a-make: #6d3bff;--a-ai: #d98a1f;--a-portal: #141824;font-family: inherit;color: var(--ink)}
html.nl .sx2-board{position: relative;width: 560px;height: 560px;transform: scale(var(--s, 1));transform-origin: 0 0}
html.nl .sx2-board>*{position: absolute;box-sizing: border-box}
html.nl .sx2 p{margin: 0;color: inherit}
html.nl .sx2 svg{display: block}
html.nl .sx2-card, html.nl .sx2-tray, html.nl .sx2-chip, html.nl .sx2-base, html.nl .sx2-portal{background: #fff;border: 1px solid var(--line);border-radius: 16px;box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 14px 34px -22px rgba(30, 24, 80, .45)}
html.nl .sx2-n{display: inline-grid;place-items: center;flex: none;width: 20px;height: 20px;border-radius: 50%;background: rgba(20, 24, 36, .07);color: var(--ink);font: 600 10.5px/1 "Geist Mono", ui-monospace, Menlo, monospace;transition: background-color .4s, color .4s}
html.nl .sx2-tray{left: 20px;top: 10px;width: 520px;height: 76px;display: flex;align-items: center;gap: 10px;padding: 0 16px}
html.nl .sx2-tray p, html.nl .sx2-chip p, html.nl .sx2-base-h p{display: flex;flex-direction: column;gap: 2px;line-height: 1.1}
html.nl .sx2 strong{font-weight: 650;font-size: 15px;letter-spacing: -.015em}
html.nl .sx2 p span{font-size: 12.5px;color: var(--mute)}
html.nl .sx2-tile{left: var(--tx);top: 28px;width: 40px;height: 40px;border-radius: 11px;background: #fff;border: 1px solid var(--line);display: grid;place-items: center;box-shadow: 0 6px 16px -10px rgba(30, 24, 80, .5);z-index: 3;transition: transform .9s cubic-bezier(.2, .8, .2, 1) calc(var(--i) * 45ms)}
html.nl .sx2-tile svg{width: 22px;height: 22px;fill: currentColor}
html.nl .sx2[data-step="0"] .sx2-tile{transform: translate(calc(var(--cx) - var(--tx) - 20px), calc(var(--cy) - 48px)) rotate(var(--cr)) scale(1.3);animation: sx2float 5s ease-in-out calc(var(--i) * -.7s) infinite alternate}
html.nl .sx2-ask{max-width: 200px;padding: 9px 13px;border-radius: 14px 14px 14px 4px;background: #fff;border: 1px solid var(--line);font-size: 13.5px !important;font-weight: 550;line-height: 1.3;color: var(--ink) !important;box-shadow: 0 10px 24px -16px rgba(30, 24, 80, .5);z-index: 4;opacity: 0;transform: translateY(10px) scale(.96);transition: opacity .45s, transform .45s;pointer-events: none}
html.nl .sx2[data-step="0"] .sx2-ask{opacity: 1;transform: none;transition-delay: calc(.25s + var(--i) * .12s);animation: sx2float 6s ease-in-out calc(var(--i) * -1.3s) infinite alternate}
@keyframes sx2float{from{translate: 0 -4px}to{translate: 0 5px}}
html.nl .sx2-wires{inset: 0;width: 560px;height: 560px;overflow: visible;z-index: 0}
html.nl .sx2-w{fill: none;stroke: rgba(20, 24, 36, .2);stroke-width: 1.5;stroke-linecap: round;transition: stroke .4s, opacity .4s}
html.nl .sx2[data-step="0"] .sx2-wires{opacity: 0}
html.nl .sx2-wires{transition: opacity .5s .2s}
html.nl .sx2:is([data-step="2"], [data-step="3"], [data-step="4"]) .sx2-w--make, html.nl .sx2:is([data-step="3"], [data-step="4"]) .sx2-w--ai, html.nl .sx2[data-step="4"] .sx2-w--portal{stroke-width: 2;stroke-dasharray: 3 7;animation: sx2flow .9s linear infinite}
html.nl .sx2:is([data-step="2"], [data-step="3"], [data-step="4"]) .sx2-w--make{stroke: var(--a-make)}
html.nl .sx2:is([data-step="3"], [data-step="4"]) .sx2-w--ai{stroke: var(--a-ai)}
html.nl .sx2[data-step="4"] .sx2-w--portal{stroke: var(--a-base)}
@keyframes sx2flow{from{stroke-dashoffset: 10}to{stroke-dashoffset: 0}}
html.nl .sx2-ghost{display: flex;align-items: center;justify-content: center;gap: 8px;border: 1.5px dashed rgba(20, 24, 36, .16);border-radius: 16px;color: #8b8f99;font: 500 12px/1 "Geist Mono", ui-monospace, Menlo, monospace;transition: opacity .4s;opacity: 0}
html.nl .sx2-ghost .sx2-n{background: transparent;border: 1.5px dashed rgba(20, 24, 36, .2);color: #8b8f99}
html.nl .sx2-ghost--make, html.nl .sx2-chip--make{left: 30px;top: 122px;width: 240px;height: 50px}
html.nl .sx2-ghost--ai, html.nl .sx2-chip--ai{left: 290px;top: 122px;width: 240px;height: 50px}
html.nl .sx2-ghost--portal, html.nl .sx2-portal{left: 110px;top: 390px;width: 340px;height: 162px}
html.nl .sx2[data-step="1"] .sx2-ghost, html.nl .sx2[data-step="2"] .sx2-ghost:not(.sx2-ghost--make), html.nl .sx2[data-step="3"] .sx2-ghost--portal{opacity: 1}
html.nl .sx2-tray, html.nl .sx2-chip, html.nl .sx2-base, html.nl .sx2-portal{opacity: 0;transform: translateY(12px) scale(.97);transition: opacity .5s, transform .6s cubic-bezier(.2, .8, .2, 1), box-shadow .4s, border-color .4s;z-index: 2}
html.nl .sx2:not([data-step="0"]) .sx2-tray, html.nl .sx2:not([data-step="0"]) .sx2-base, html.nl .sx2:is([data-step="2"], [data-step="3"], [data-step="4"]) .sx2-chip--make, html.nl .sx2:is([data-step="3"], [data-step="4"]) .sx2-chip--ai, html.nl .sx2[data-step="4"] .sx2-portal{opacity: 1;transform: none}
html.nl .sx2:not([data-step="0"]) .sx2-base{transition-delay: .25s}
html.nl .sx2[data-step="1"] .sx2-base{--acc: var(--a-base)}
html.nl .sx2[data-step="2"] .sx2-chip--make{--acc: var(--a-make)}
html.nl .sx2[data-step="3"] .sx2-chip--ai{--acc: var(--a-ai)}
html.nl .sx2[data-step="4"] .sx2-portal{--acc: var(--a-base)}
html.nl .sx2[data-step="1"] .sx2-base, html.nl .sx2[data-step="2"] .sx2-chip--make, html.nl .sx2[data-step="3"] .sx2-chip--ai, html.nl .sx2[data-step="4"] .sx2-portal{border-color: color-mix(in srgb, var(--acc) 55%, transparent);box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 14%, transparent), 0 18px 40px -22px rgba(30, 24, 80, .5)}
html.nl .sx2[data-step="1"] .sx2-base .sx2-n, html.nl .sx2[data-step="2"] .sx2-chip--make .sx2-n, html.nl .sx2[data-step="3"] .sx2-chip--ai .sx2-n, html.nl .sx2[data-step="4"] .sx2-portal .sx2-n{background: var(--acc);color: #fff}
html.nl .sx2[data-step="0"] .sx2-tray .sx2-n, html.nl .sx2[data-step="1"] .sx2-tray .sx2-n{background: var(--ink);color: #fff}
html.nl .sx2-chip{display: flex;align-items: center;gap: 10px;padding: 0 14px}
html.nl .sx2-chip>svg{width: 24px;height: 24px;flex: none}
html.nl .sx2-chip--make>svg{width: 28px;height: 22px}
html.nl .sx2-live{margin-left: auto;width: 8px;height: 8px;border-radius: 50%;background: #22c55e;box-shadow: 0 0 0 4px rgba(34, 197, 94, .16)}
html.nl .sx2-base{left: 70px;top: 200px;width: 420px;height: 170px;padding: 12px 14px 10px}
html.nl .sx2-base-h{display: flex;align-items: center;gap: 10px;height: 34px}
html.nl .sx2-base-h>svg{width: 26px;height: 22px;flex: none}
html.nl .sx2-base-h em{margin-left: auto;font-style: normal;font: 600 11px/1 "Geist Mono", ui-monospace, Menlo, monospace;color: #15803d;background: #e8f7ee;border-radius: 999px;padding: 5px 9px}
html.nl .sx2-rows{list-style: none;margin: 6px 0 0;padding: 0}
html.nl .sx2-rows li{display: flex;align-items: center;justify-content: space-between;height: 26px;padding: 0 2px;border-top: 1px solid var(--line);font-size: 13px;font-weight: 500}
html.nl .sx2-st{font-style: normal;font-size: 11px;font-weight: 600;border-radius: 6px;padding: 3px 7px}
html.nl .sx2-st--blue{color: #0060b8;background: #e7f0fd}
html.nl .sx2-st--amber{color: #a15c07;background: #fdf1de}
html.nl .sx2-st--green{color: #15803d;background: #e8f7ee}
html.nl .sx2-rows li.sx2-ev{position: relative;height: 30px;margin-top: 2px;border-radius: 9px;border-top: 0;background: #f4f6fb;transition: background-color .4s}
html.nl .sx2[data-step="2"] .sx2-ev{background: #f1ecff}
html.nl .sx2[data-step="3"] .sx2-ev{background: #fdf4e6}
html.nl .sx2[data-step="4"] .sx2-ev{background: #eaf2ff}
html.nl .sx2-ev2{position: absolute;inset: 0 10px;display: flex;align-items: center;gap: 7px;font-size: 12.5px;font-weight: 550;color: var(--ink);opacity: 0;transform: translateY(5px);transition: opacity .35s, transform .35s;white-space: nowrap}
html.nl .sx2-ev2 svg{width: 15px;height: 13px;flex: none}
html.nl .sx2:is([data-step="0"], [data-step="1"]) .sx2-ev2--base, html.nl .sx2[data-step="2"] .sx2-ev2--make, html.nl .sx2[data-step="3"] .sx2-ev2--ai, html.nl .sx2[data-step="4"] .sx2-ev2--portal{opacity: 1;transform: none;transition-delay: .3s}
html.nl .sx2-portal{overflow: hidden}
html.nl .sx2-bar{display: flex;align-items: center;gap: 5px;height: 28px;padding: 0 10px;border-bottom: 1px solid var(--line);background: #fafafc}
html.nl .sx2-bar>i{width: 7px;height: 7px;border-radius: 50%;background: #dcdde3}
html.nl .sx2-bar span{margin-left: 8px;font: 500 11px/1 "Geist Mono", ui-monospace, Menlo, monospace;color: #8b8f99}
html.nl .sx2-bar .sx2-n{margin-left: auto;width: 18px;height: 18px;font-size: 10px}
html.nl .sx2-pbody{padding: 10px 14px}
html.nl .sx2-hello{font-size: 15px;font-weight: 650;letter-spacing: -.015em}
html.nl .sx2-sub{font-size: 12px;color: var(--mute) !important;margin-top: 1px !important}
html.nl .sx2-prog{display: flex;align-items: center;gap: 10px;margin-top: 8px}
html.nl .sx2-prog>div{flex: 1;height: 6px;border-radius: 99px;background: #eceef3;overflow: hidden}
html.nl .sx2-prog i{display: block;height: 100%;border-radius: inherit;background: linear-gradient(90deg, #d98a1f, #0075de)}
html.nl .sx2-prog span{font: 600 11px/1 "Geist Mono", ui-monospace, Menlo, monospace;color: var(--mute)}
html.nl .sx2-meta{display: flex;justify-content: space-between;font-size: 10.5px;color: var(--mute) !important;margin-top: 3px !important}
html.nl .sx2-pbody ul{list-style: none;margin: 8px 0 0;padding: 0}
html.nl .sx2-pbody li{display: flex;align-items: center;justify-content: space-between;height: 22px;font-size: 12px;font-weight: 500;border-top: 1px solid var(--line)}
@media (prefers-reduced-motion: reduce){html.nl .sx2 *, html.nl .sx2{animation: none !important;transition: none !important}}
@media (max-width: 991px){html.nl #in-vijf-stappen .scene{width: min(100%, 46svh) !important}}
html.nl :is(main, .wp-block-post-content) .page-hero{color: #fff;isolation: isolate;overflow: hidden !important;background: radial-gradient(70% 60% at 50% 0, rgba(0, 117, 222, .2), transparent 70%), var(--mx-night) !important;box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08) !important;margin-top: -74px !important;padding-top: calc(clamp(56px, 8vw, 120px) + 74px) !important}
html.nl :is(main, .wp-block-post-content) .page-hero::before{content: "";position: absolute;z-index: -1;pointer-events: none;left: -14%;right: -14%;bottom: -55%;height: 95%;background-image: radial-gradient(30% 42% at 12% 50%, rgba(240, 72, 48, .85), transparent 70%), radial-gradient(30% 44% at 90% 46%, rgba(255, 138, 61, .85), transparent 70%), radial-gradient(42% 42% at 52% 64%, rgba(0, 117, 222, .95), transparent 72%);filter: blur(40px) saturate(1.1);animation: mxAurora 24s ease-in-out infinite alternate}
html.nl :is(main, .wp-block-post-content) .page-hero::after{content: "";position: absolute;inset: 0;z-index: -1;pointer-events: none;opacity: .2;mix-blend-mode: overlay;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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") repeat}
@media (prefers-reduced-motion: reduce){html.nl :is(main, .wp-block-post-content) .page-hero::before{animation: none}}
html.nl :is(main, .wp-block-post-content) .page-hero .sx-mk, html.nl :is(main, .wp-block-post-content) .page-hero .sx-spot{display: none !important}
html.nl :is(main, .wp-block-post-content) .page-hero :is(h1, .h1-page, .post-title, h2, h3){color: #fff !important}
html.nl :is(main, .wp-block-post-content) .page-hero :is(h1, .h1-page, .post-title) em{color: rgba(255, 255, 255, .55) !important}
html.nl :is(main, .wp-block-post-content) .page-hero .lead, html.nl :is(main, .wp-block-post-content) .page-hero>.wrap>p:not(.eyebrow), html.nl :is(main, .wp-block-post-content) .page-hero .ai-hero-copy>p:not(.eyebrow){color: rgba(255, 255, 255, .72) !important}
html.nl :is(main, .wp-block-post-content) .page-hero .page-hero-rule{background: rgba(255, 255, 255, .14) !important}
html.nl :is(main, .wp-block-post-content) .page-hero .crumbs, html.nl :is(main, .wp-block-post-content) .page-hero .crumbs a{color: rgba(255, 255, 255, .6) !important}
html.nl :is(main, .wp-block-post-content) .page-hero .crumbs a:hover{color: #fff !important}
html.nl :is(main, .wp-block-post-content) .page-hero .crumbs span:last-child{color: var(--mx-yellow) !important}
html.nl :is(main, .wp-block-post-content) .page-hero .ox-eb .ox-n{background: rgba(255, 255, 255, .14) !important;color: var(--mx-yellow) !important}
html.nl :is(main, .wp-block-post-content) .page-hero .eyebrow:not(.ox-eb){color: var(--mx-ink) !important;background: var(--mx-marker) center / 100% 100% no-repeat !important;padding: 7px 14px !important;display: inline-block}
html.nl :is(main, .wp-block-post-content) .page-hero .btn--primary{background: #fff !important;color: var(--mx-ink) !important;border: 0 !important;box-shadow: 0 0 0 4px rgba(255, 255, 255, .12), 0 14px 30px -12px rgba(0, 0, 0, .6) !important}
html.nl :is(main, .wp-block-post-content) .page-hero .btn--primary .arrow{background: var(--mx-blue);color: #fff}
html.nl :is(main, .wp-block-post-content) .page-hero .btn--ghost, html.nl :is(main, .wp-block-post-content) .page-hero .btn--light{background: rgba(255, 255, 255, .06) !important;color: #fff !important;border: 1px solid rgba(255, 255, 255, .22) !important}
html.nl :is(main, .wp-block-post-content) .page-hero .textlink{color: #fff !important}
html.nl :is(main, .wp-block-post-content) .page-hero .textlink .arrow{background: rgba(255, 255, 255, .14)}
@media (max-width: 767px){html.nl :is(main, .wp-block-post-content) .page-hero{margin-top: -72px !important;padding-top: calc(56px + 72px) !important}
html.nl :is(main, .wp-block-post-content) .page-hero::before{height: 70%;bottom: -35%;filter: blur(30px)}}
html.nl body:not(:has(.hx, .page-hero)) header.site-header .wrap.header-inner{background: rgba(255, 255, 255, .96) !important;border-color: rgba(20, 24, 36, .08) !important;box-shadow: 0 18px 40px -22px rgba(20, 24, 36, .5) !important;padding-inline: 18px 6px !important}
html.nl body:not(:has(.hx, .page-hero)) .site-header :is(.brand, .brand-name, .brand-name em){color: var(--mx-ink) !important}
html.nl body:not(:has(.hx, .page-hero)) .site-header .nav--desktop a{color: var(--mx-ink) !important}
html.nl body:not(:has(.hx, .page-hero)) .site-header .ox-burger i{background: var(--mx-ink) !important}
html.nl body:not(:has(.hx, .page-hero)) .site-header .ox-menu-t{color: var(--mx-ink) !important}
html.nl .wp-block-post-content>:is(.section--navy, .section--sand, .section--mist):not(.story):not(.cta-band){margin-inline: var(--mx-gutter) !important;border-radius: var(--mx-r) !important;box-shadow: inset 0 0 0 1px rgba(20, 24, 36, .05) !important}
html.nl .wp-block-post-content>.section--navy:not(.story):not(.cta-band){background-color: var(--mx-t-blue) !important}
html.nl .wp-block-post-content>.section--sand{background-color: var(--mx-t-yellow) !important}
html.nl .wp-block-post-content>.section--mist{background-color: var(--mx-t-peach) !important}
html.nl .wp-block-post-content>:is(.section--navy, .section--sand, .section--mist)>.sx-mk{display: none !important}
html.nl .wp-block-post-content>.section--navy:not(.story) .ox-eb .ox-n{background: var(--mx-blue) !important;color: #fff !important}
html.nl .wp-block-post-content>.section--mist .ox-eb .ox-n{background: var(--mx-red) !important;color: #fff !important}
html.nl:not(.ox-open) .site-header:not(.is-scrolled) .nav--desktop a[aria-current="page"]{background: rgba(255, 255, 255, .12) !important;color: #fff !important;box-shadow: none !important}
html.nl .site-header.is-scrolled .nav--desktop a[aria-current="page"], html.nl body:not(:has(.hx, .page-hero)) .site-header .nav--desktop a[aria-current="page"]{background: #eaf2ff !important;color: var(--mx-blue) !important;box-shadow: none !important}
html.nl :is(main, .wp-block-post-content) .hero-merge .ha-item button{background: transparent !important;color: rgba(255, 255, 255, .62) !important;border-color: rgba(255, 255, 255, .14) !important}
html.nl :is(main, .wp-block-post-content) .hero-merge .ha-item button span{color: inherit !important}
html.nl :is(main, .wp-block-post-content) .hero-merge .ha-item button b{color: rgba(255, 255, 255, .45) !important}
html.nl :is(main, .wp-block-post-content) .hero-merge .ha-item.is-on button, html.nl :is(main, .wp-block-post-content) .hero-merge .ha-item button[aria-selected="true"]{background: rgba(255, 255, 255, .08) !important;color: #fff !important}
html.nl :is(main, .wp-block-post-content) .hero-merge .ha-item.is-on button b, html.nl :is(main, .wp-block-post-content) .hero-merge .ha-item button[aria-selected="true"] b{color: var(--mx-yellow) !important}
html.nl :is(main, .wp-block-post-content) .page-hero .eyebrow:not(.ox-eb){align-self: flex-start;width: fit-content;max-width: 100%}
html.nl :is(main, .wp-block-post-content) .page-hero.post-hero{margin-inline: var(--mx-gutter) !important;border-radius: var(--mx-r) !important}
@media (max-width: 767px){html.nl :is(main, .wp-block-post-content) .page-hero.post-hero{border-radius: 20px !important}}
html.nl .gform_wrapper .gform_button{border-radius: 999px !important;padding: 14px 26px !important;border: 1px solid #0058a8 !important;background: linear-gradient(180deg, #2a95ff 0%, #0075de 55%, #0063bd 100%) !important;color: #fff !important;box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -2px 0 rgba(0, 0, 0, .14), 0 8px 18px -8px rgba(0, 117, 222, .65) !important}
html.nl .wp-block-post-content>:is(.section--navy, .section--sand, .section--mist), html.nl :is(#herkenbaar, #wat-we-doen, #onze-kracht, #ai, #cases, #in-vijf-stappen){--ink-3: #6f7480;--mute: #6f7480}

/* ===== ROUND 28b ===== header on pages without a dark hero (blog, faq): white pill, dark text */
html.nl:not(.ox-open) body:not(:has(.hx, .page-hero)) header.site-header:not(.is-scrolled) .wrap.header-inner{background:rgba(255,255,255,.96)!important;border-color:rgba(20,24,36,.08)!important;box-shadow:0 18px 40px -22px rgba(20,24,36,.5)!important;padding-inline:18px 6px!important}
html.nl:not(.ox-open) body:not(:has(.hx, .page-hero)) .site-header:not(.is-scrolled) :is(.brand,.brand-name,.brand-name em){color:var(--mx-ink,#141824)!important}
html.nl:not(.ox-open) body:not(:has(.hx, .page-hero)) .site-header:not(.is-scrolled) .nav--desktop a{color:var(--mx-ink,#141824)!important}
html.nl:not(.ox-open) body:not(:has(.hx, .page-hero)) .site-header:not(.is-scrolled) .nav--desktop a:hover{background:#f1f3f7!important}
html.nl:not(.ox-open) body:not(:has(.hx, .page-hero)) .site-header:not(.is-scrolled) .nav--desktop a[aria-current="page"]{background:#eaf2ff!important;color:var(--mx-blue,#0075de)!important}
html.nl:not(.ox-open) body:not(:has(.hx, .page-hero)) .site-header:not(.is-scrolled) .ox-burger i{background:var(--mx-ink,#141824)!important}
html.nl:not(.ox-open) body:not(:has(.hx, .page-hero)) .site-header:not(.is-scrolled) .ox-menu-t{color:var(--mx-ink,#141824)!important}

/* ===== ROUND 29 ===== CTA band and footer as standalone rounded cards (placement as on 4display.nl) */
html.nl :is(main,.wp-block-post-content)>.cta-band{width:min(1280px,calc(100% - 2*clamp(16px,3vw,32px)))!important;max-width:1280px!important;margin:clamp(40px,5vw,72px) auto!important;border-radius:26px!important;padding:clamp(32px,5vw,72px) 0!important}
html.nl :is(main,.wp-block-post-content)>.cta-band>.wrap{max-width:none!important;margin-inline:0!important;padding-inline:clamp(32px,5vw,72px)!important}
html.nl .site-footer{margin:0 12px 12px!important;border-radius:26px!important;padding:clamp(40px,5vw,64px) clamp(20px,3vw,40px) 28px!important}
html.nl .site-footer>.wrap{max-width:1240px!important;padding-inline:0!important}
@media (max-width:622px){html.nl .site-footer{margin:0 8px 8px!important;border-radius:22px!important;padding:40px 20px 28px!important}}
@media (max-width:478px){html.nl :is(main,.wp-block-post-content)>.cta-band .btn{max-width:100%!important;white-space:normal!important;text-align:left!important}}

/* ===== ROUND 32 ===== hero: top margin equal to the side margins (the docked header pill moves along) */
html.nl body header.site-header .wrap.header-inner{top:0;transition:max-width .55s cubic-bezier(.2,.8,.2,1),background-color .35s,border-color .35s,box-shadow .45s,padding .45s,top .45s cubic-bezier(.2,.8,.2,1)!important}
html.nl body :is(main,.wp-block-post-content) :is(.hx,.page-hero){margin-top:calc(-74px + clamp(10px,1.6vw,24px) - 8px)!important}
html.nl body:has(.hx,.page-hero) header.site-header:not(.is-scrolled) .wrap.header-inner{top:calc(clamp(10px,1.6vw,24px) - 8px)}
@media (max-width:1279px){html.nl body :is(main,.wp-block-post-content) :is(.hx,.page-hero){margin-top:calc(-74px + clamp(10px,1.6vw,24px) - 12px)!important}html.nl body:has(.hx,.page-hero) header.site-header:not(.is-scrolled) .wrap.header-inner{top:calc(clamp(10px,1.6vw,24px) - 12px)}}
@media (max-width:767px){html.nl body :is(main,.wp-block-post-content) :is(.hx,.page-hero){margin-top:-72px!important}html.nl body:has(.hx,.page-hero) header.site-header:not(.is-scrolled) .wrap.header-inner{top:0}}

/* ===== ROUND 32b ===== every top hero gets the same frame: side margins as the top margin, radius 28 (20 up to 767px) */
html.nl body :is(main,.wp-block-post-content) :is(.hx,.page-hero,.page-hero.post-hero){margin-left:clamp(10px,1.6vw,24px)!important;margin-right:clamp(10px,1.6vw,24px)!important;border-radius:28px!important;overflow:hidden}
@media (max-width:767px){html.nl body :is(main,.wp-block-post-content) :is(.hx,.page-hero,.page-hero.post-hero){margin-left:8px!important;margin-right:8px!important;border-radius:20px!important}}

/* ===== ROUND 33 ===== scrolled header: stays dark and floats at the same height as when docked in the hero */
html.nl:not(.ox-open) body header.site-header.is-scrolled .wrap.header-inner{top:clamp(10px,1.6vw,24px);background:rgba(17,21,31,.92)!important;border-color:rgba(255,255,255,.1)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 40px -18px rgba(8,10,18,.55)!important;-webkit-backdrop-filter:blur(16px) saturate(140%)!important;backdrop-filter:blur(16px) saturate(140%)!important}
html.nl:not(.ox-open) body header.site-header.is-scrolled :is(.brand,.brand-name,.brand-name em){color:#fff!important}
html.nl:not(.ox-open) body header.site-header.is-scrolled .nav--desktop a{color:rgba(255,255,255,.78)!important}
html.nl:not(.ox-open) body header.site-header.is-scrolled .nav--desktop a:hover{color:#fff!important;background:rgba(255,255,255,.08)!important}
html.nl:not(.ox-open) body header.site-header.is-scrolled .nav--desktop a[aria-current="page"]{background:rgba(255,255,255,.12)!important;color:#fff!important;box-shadow:none!important}
html.nl:not(.ox-open) body header.site-header.is-scrolled .ox-burger i{background:#fff!important}
html.nl:not(.ox-open) body header.site-header.is-scrolled .ox-menu-t{color:#fff!important}
@media (max-width:1279px){html.nl:not(.ox-open) body header.site-header.is-scrolled .wrap.header-inner{top:calc(clamp(10px,1.6vw,24px) - 4px)}}
@media (max-width:767px){html.nl:not(.ox-open) body header.site-header.is-scrolled .wrap.header-inner{top:8px}}

/* ===== ROUND 34 ===== header CTA button: calmer, more refined (solid blue, soft depth, clean arrow, 40px tap height) */
html.nl body header.site-header .header-side .btn--primary{display:inline-flex;align-items:center;height:40px;box-sizing:border-box;padding:0 4px 0 18px!important;gap:12px!important;font-size:15px;font-weight:600;letter-spacing:-.005em;line-height:1;color:#fff!important;background:#0075de!important;border:1px solid rgba(255,255,255,.12)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgba(0,0,0,.28),0 8px 20px -10px rgba(0,117,222,.9)!important;transition:background-color .2s ease,box-shadow .2s ease,transform .2s ease!important}
html.nl body header.site-header .header-side .btn--primary:hover{background:#1683ea!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 1px 2px rgba(0,0,0,.28),0 12px 26px -10px rgba(0,117,222,1)!important}
html.nl body header.site-header .header-side .btn--primary:active{transform:translateY(1px)}
html.nl body header.site-header .header-side .btn--primary:focus-visible{outline:2px solid #fff;outline-offset:3px}
html.nl body header.site-header .header-side .btn--primary::after{display:none!important}
html.nl body header.site-header .header-side .btn--primary::before{animation:none!important;width:16px;height:16px}
html.nl body header.site-header .header-side .btn--primary .arrow{width:32px!important;height:32px!important;padding:10px 9px!important;box-sizing:border-box;border-radius:50%;background:#fff!important;color:#0075de!important;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
html.nl body header.site-header .header-side .btn--primary:hover .arrow{transform:translateX(2px)}
@media (min-width:768px){html.nl body header.site-header .header-side .btn--primary:has(.arrow)::before{display:none!important}}
@media (max-width:767px){html.nl body header.site-header .header-side .btn--primary{padding:0 16px!important;gap:8px!important;font-size:14px}}
@media (max-width:372px){html.nl body header.site-header .header-side .btn--primary{width:40px;padding:0!important;justify-content:center}}

/* ===== ROUND 35 ===== header CTA follows the pill's rounding: equal gap top, bottom and right (concentric), from 1280px where it is the last item */
@media (min-width:1280px){html.nl:not(.ox-open) body header.site-header.is-scrolled .wrap.header-inner,html.nl:not(.ox-open) body:not(:has(.hx,.page-hero)) header.site-header:not(.is-scrolled) .wrap.header-inner,html.nl:not(.ox-open) body:has(.hx,.page-hero) header.site-header:not(.is-scrolled) .wrap.header-inner{padding-right:11px!important}}

/* ===== ROUND 37 ===== home: the header sits at the top of the intro hero and scrolls away with it; once the hero has passed, it floats in */
@keyframes taHdrIn{from{transform:translateY(-130%)}to{transform:none}}
@keyframes taHdrOut{from{transform:none}to{transform:translateY(-130%)}}
html.nl.js body:has(.hx) header.wp-block-template-part{position:relative!important}
html.nl.js.ta-hdr-in body:has(.hx) header.wp-block-template-part{position:sticky!important;top:0}
html.nl.js.ta-hdr-in body:has(.hx) header.wp-block-template-part>header.site-header{animation:taHdrIn .5s cubic-bezier(.2,.8,.2,1) both}
html.nl.js.ta-hdr-in.ta-hdr-out body:has(.hx) header.wp-block-template-part>header.site-header{animation:taHdrOut .3s cubic-bezier(.4,0,1,1) both}
@media (prefers-reduced-motion:reduce){html.nl.js body:has(.hx) header.wp-block-template-part>header.site-header{animation:none!important}}

/* ===== ROUND 38 ===== home hero title "AI-automatiseringen en systemen voor je bedrijf.": keep the grey part together, smaller type on narrow phones */
html.nl .hx-title em{white-space:nowrap}
@media (max-width:478px){html.nl .hx .hx-title{font-size:min(2.6rem,calc((100vw - 64px)/9.8))!important}}