@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; }