:root {
  /* Tokens taken from the product (canon-app design language, ch. 14), restated here for the marketing site */
  --bg: #4e54db;
  --indigo-deep: #3a40c8;
  --text: #ffffff;
  --text-2: rgba(255,255,255,0.75);
  --text-3: rgba(255,255,255,0.55);
  --surface: rgba(255,255,255,0.10);
  --surface-2: rgba(255,255,255,0.16);
  --border: rgba(255,255,255,0.28);
  --border-strong: rgba(255,255,255,0.45);
  --accent: #ffd9c7;
  --success: #8de8b8;
  --warning: #ffd59e;
  --danger: #ffb0a3;
  --blur: blur(30px) saturate(1.2);
  --glass-shadow: 0 24px 60px rgba(20,20,80,0.22);
  --glass-lifted: 0 30px 70px rgba(20,20,80,0.3);
  --hi: inset 0 1px 0 rgba(255,255,255,0.35);
  --primary-shadow: 0 12px 40px rgba(20,20,80,0.3);

  --f-read: "Geist", "Geist Sans", system-ui, sans-serif;
  --f-data: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --f-app: var(--f-read);

  --out: cubic-bezier(0.23, 1, 0.32, 1);
  --inout: cubic-bezier(0.77, 0, 0.175, 1);
  --gutter: clamp(20px, 4vw, 48px);
  --col: 1120px;
}
* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; scroll-behavior: smooth; scrollbar-color: rgba(255,255,255,0.3) transparent; scrollbar-width: thin; }
/* The ground: never a flat colour. A soft out-of-focus indigo, fixed behind everything. */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 55% at 12% 0%, #7077f2 0%, transparent 70%),
    radial-gradient(55% 60% at 100% 18%, #5b62ea 0%, transparent 70%),
    radial-gradient(70% 60% at 85% 100%, #3a40c8 0%, transparent 72%),
    radial-gradient(60% 50% at 0% 90%, #4349d2 0%, transparent 70%),
    #4e54db; }
body { margin: 0; color: var(--text); font: 400 1rem/1.6 var(--f-read); -webkit-font-smoothing: antialiased; overflow-x: hidden; caret-color: var(--accent); }
::selection { background: rgba(255,217,199,0.35); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 12px; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, dl, dd, dt, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
button { font: inherit; color: inherit; }
.data { font: 400 0.8125rem/1.4 var(--f-data); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* signature labels (product: kicker / caption) */
.kicker { font: 400 12px/1.2 var(--f-data); text-transform: uppercase; letter-spacing: 0.3em; color: var(--accent); }
.caption { font: 400 11px/1.3 var(--f-data); text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-2); }
.label { font: 400 11px/1.3 var(--f-data); text-transform: uppercase; letter-spacing: 0.18em; }

/* glass: the one motif */
.glass { border-radius: 24px; background: var(--surface); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--border); box-shadow: var(--glass-shadow), var(--hi); }
.glass-pill { border-radius: 100px; background: var(--surface); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--border); box-shadow: var(--glass-shadow), var(--hi); }

/* ================= site chrome: floating glass header pill ================= */
.nav { position: fixed; top: 16px; left: 0; right: 0; z-index: 50; padding: 0 var(--gutter); pointer-events: none; }
.nav-in { max-width: var(--col); margin: 0 auto; display: flex; align-items: center; gap: 20px; padding: 8px 8px 8px 28px; pointer-events: auto; }
.brand { display: flex; align-items: baseline; gap: 12px; }
.brand b { font: 500 16px/1 var(--f-data); letter-spacing: 0.35em; }
.brand span { font: 400 9px/1 var(--f-data); letter-spacing: 0.22em; color: var(--text-3); }
.nav-sp { flex: 1; }
.links { display: flex; gap: 22px; }
.links a { font: 400 14px/1 var(--f-read); color: var(--text-2); transition: color 150ms ease-out; }
@media (hover: hover) and (pointer: fine) { .links a:hover { color: var(--text); } }
@media (max-width: 900px) { .links a:not(.keep) { display: none; } .links { gap: 0; } .brand span { display: none; } }

/* buttons: pills. Primary = solid white with indigo text. No lift, no press. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 28px; border-radius: 100px; font: 500 15px/1.2 var(--f-read); cursor: pointer; border: 1px solid transparent; white-space: nowrap; transition: opacity 150ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out; }
.btn .arr { transition: transform 200ms var(--out); }
.btn-light { background: #fff; color: var(--indigo-deep); border-color: var(--border-strong); box-shadow: var(--primary-shadow); }
.btn-dark { background: var(--surface); color: var(--text); border-color: var(--border); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.btn-sm { padding: 9px 20px; font-size: 14px; }
@media (hover: hover) and (pointer: fine) {
  .btn-light:hover { opacity: 0.9; }
  .btn-light:hover .arr { transform: translateX(3px); }
  .btn-dark:hover { background: var(--surface-2); border-color: var(--border-strong); }
}

/* ================= hero ================= */
.hero { position: relative; min-height: max(100svh, 820px); padding: 120px var(--gutter) 128px; display: grid; grid-template-columns: minmax(0, 4.2fr) minmax(0, 7.8fr); gap: 40px; align-items: center; max-width: 1360px; margin: 0 auto; isolation: isolate; }
.hero > * { min-width: 0; }
.copy { position: relative; z-index: 2; display: grid; justify-items: start; gap: 26px; }
.pill-a { display: inline-flex; align-items: center; gap: 12px; padding: 9px 20px; }
.pill-a i { font-style: normal; color: var(--accent); font-size: 8px; }

h1.display { font: 500 clamp(2.25rem, 3.5vw, 3.25rem)/1.05 var(--f-read); letter-spacing: -0.02em; }
.ln { display: block; white-space: nowrap; overflow: hidden; padding: 0.04em 0 0.14em; margin-bottom: -0.1em; }
.ln > span { display: block; }
.ln.l2 > span, .ln.l3 > span { color: var(--accent); }
.sub { font: 300 clamp(1.0625rem, 1.35vw, 1.1875rem)/1.55 var(--f-read); color: var(--text-2); max-width: 44ch; }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; }

.demo-col { position: relative; z-index: 2; display: grid; gap: 16px; }
.mode-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.seg { position: relative; display: inline-grid; grid-auto-flow: column; padding: 3px; border-radius: 100px; background: rgba(255,255,255,0.08); border: 1px solid var(--border); }
.seg button { position: relative; z-index: 1; padding: 8px 18px; border: 0; background: transparent; color: var(--text-2); font: 500 13px/1 var(--f-read); border-radius: 100px; cursor: pointer; transition: color 150ms ease-out; }
.seg button[aria-pressed="true"] { color: var(--indigo-deep); }
.seg .thumb { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: var(--w, 50%); border-radius: 100px; background: #fff; transform: translateX(var(--x, 0)); transition: transform 300ms var(--inout), width 300ms var(--inout); }
.hint { color: var(--text-2); font: 400 0.875rem/1.4 var(--f-read); }
.hint kbd { font: 400 11px/1 var(--f-data); padding: 2px 6px; border-radius: 6px; border: 1px solid var(--border-strong); color: var(--text-3); }

/* ticker: a floating glass pill, like the app's footer bar */
.strip { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 24px; height: 52px; display: flex; align-items: center; overflow: hidden; z-index: 3; }
.strip .track { display: flex; width: max-content; animation: marq 70s linear infinite; }
.strip:hover .track, .paused .strip .track { animation-play-state: paused; }
.strip .group { display: flex; align-items: center; flex-shrink: 0; }
.strip .group span { color: var(--text-2); padding: 0 22px; white-space: nowrap; }
.strip .group em { color: var(--text-3); font-style: normal; font: 400 12px/1 var(--f-data); }
@keyframes marq { to { transform: translateX(-50%); } }
.strip::before, .strip::after { content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 1; pointer-events: none; }
.strip::before { left: 0; background: linear-gradient(90deg, rgba(78,84,219,0.9), transparent); }
.strip::after { right: 0; background: linear-gradient(-90deg, rgba(78,84,219,0.9), transparent); }

/* ================= the replica of the real app (tokens from the product) ================= */
.app {
  --t: #ffffff; --t-muted: rgba(255,255,255,0.75); --t-faint: rgba(255,255,255,0.55);
  --s: rgba(255,255,255,0.10); --s2: rgba(255,255,255,0.16);
  --b: rgba(255,255,255,0.28); --bs: rgba(255,255,255,0.45);
  --ink: rgba(255,255,255,0.28);
  --acc: #ffd9c7; --acc-strong: #ffffff; --acc-contrast: #3a40c8;
  --ok: #8de8b8; --warn: #ffd59e; --bad: #ffb0a3;
  --blur: blur(30px) saturate(1.2);
  --shadow: 0 24px 60px rgba(20,20,80,0.22); --hi: inset 0 1px 0 rgba(255,255,255,0.35);
  --track: rgba(255,255,255,0.08); --track-active: rgba(255,255,255,0.2);
  --code: rgba(20,20,80,0.22);
  --arrival: rgba(255,217,199,0.16);
  position: relative; container-type: inline-size; border-radius: 24px; padding: 16px; font: 400 14px/1.5 var(--f-app); color: var(--t); letter-spacing: 0;
  background: rgba(255,255,255,0.07); backdrop-filter: blur(30px) saturate(1.2); -webkit-backdrop-filter: blur(30px) saturate(1.2);
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow: 0 30px 70px rgba(20,20,80,0.3), inset 0 1px 0 rgba(255,255,255,0.35);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start;
}
.app.paper {
  --t: #191a22; --t-muted: #363944; --t-faint: #5a5d68;
  --s: rgba(255,255,255,0.46); --s2: rgba(255,255,255,0.6);
  --b: rgba(255,255,255,0.7); --bs: rgba(255,255,255,0.9);
  --ink: rgba(25,26,34,0.14);
  --acc: #4a50e0; --acc-strong: #4a50e0; --acc-contrast: #ffffff;
  --ok: #1f8a4c; --warn: #b26a00; --bad: #c0392b;
  --blur: blur(28px) saturate(1.4);
  --shadow: 0 20px 55px rgba(45,50,130,0.10); --hi: inset 0 1px 0 rgba(255,255,255,0.85);
  --track: rgba(25,26,34,0.05); --track-active: rgba(255,255,255,0.9);
  --code: rgba(25,26,34,0.05);
  --arrival: rgba(74,80,224,0.08);
  background:
    linear-gradient(90deg, rgba(88,94,230,0.55) 0%, rgba(88,94,230,0.12) 14%, transparent 26%),
    radial-gradient(60% 50% at 80% 0%, rgba(255,255,255,0.8), transparent 70%),
    #e9e7e6;
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 30px 70px rgba(20,20,80,0.3), inset 0 1px 0 rgba(255,255,255,0.85);
}
.app *, .app *::before, .app *::after { letter-spacing: inherit; }
.app button { cursor: pointer; }
.glass { border-radius: 24px; background: var(--s); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--b); box-shadow: var(--shadow), var(--hi); }
.gtile { border-radius: 12px; background: var(--s); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--b); }
.gpill { border-radius: 100px; background: var(--s); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--b); box-shadow: var(--shadow), var(--hi); }
.lifted { box-shadow: 0 30px 70px rgba(20,20,80,0.3), var(--hi); border-color: var(--bs); }
.kicker { font: 400 12px/1.2 var(--f-data); text-transform: uppercase; letter-spacing: 0.3em; color: var(--acc); }
.caption { font: 400 11px/1.3 var(--f-data); text-transform: uppercase; letter-spacing: 0.18em; color: var(--t-muted); }
.paper .caption, .paper .meta { font-size: 12px; }
.meta { font: 400 11px/1.4 var(--f-data); color: var(--t-faint); }
.mono { font-family: var(--f-data); }

.ahead { display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 22px; min-width: 0; }
.ahead .word { font: 500 14px/1 var(--f-data); letter-spacing: 0.35em; flex: none; }
.ahead .div { width: 1px; height: 20px; background: var(--ink); flex: none; }
.ahead .crumb { color: var(--t-muted); white-space: nowrap; font-size: 13px; }
.ahead .crumb b { color: var(--t); font-weight: 500; }
.ahead .sp { flex: 1; }
.search { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 7px 10px; border-radius: 12px; border: 1px solid var(--b); background: var(--s); color: var(--t-faint); font-size: 13px; transition: border-color 150ms ease-out, background-color 150ms ease-out; width: min(240px, 100%); text-align: left; }
.search:hover { border-color: var(--bs); background: var(--s2); }
.search span.t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.keycap { font: 400 11px/1 var(--f-data); padding: 2px 6px; border-radius: 6px; border: 1px solid var(--bs); color: var(--t-faint); }
.ahead nav { display: flex; gap: 14px; font-size: 13px; color: var(--t-muted); }
.ahead nav .cur { color: var(--t); font-weight: 500; }
@container (max-width: 440px) { .ahead .crumb, .ahead .div.c, .ahead nav { display: none; } }
@container (max-width: 420px) { .ahead .div { display: none; } .ahead { padding-left: 16px; gap: 10px; } .ahead .word { letter-spacing: 0.22em; } .search { flex: 1; width: auto; } .search .keycap { display: none; } }

.phead { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 4px 8px 0; flex-wrap: wrap; }
.phead h3 { font: 500 26px/1.15 var(--f-app); letter-spacing: -0.02em; margin-top: 4px; }
.ptabs { display: inline-flex; padding: 3px; border-radius: 100px; background: var(--track); border: 1px solid var(--b); }
.ptabs button { flex: none; height: 30px; padding: 0 14px; border: 0; border-radius: 100px; background: transparent; color: var(--t-muted); font: 500 13px/1 var(--f-app); transition: background-color 150ms ease-out, color 150ms ease-out; }
.ptabs button:hover { color: var(--t); }
.ptabs button[aria-selected="true"] { background: var(--acc-strong); color: var(--acc-contrast); }

.panel { padding: 20px 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.qrow { display: flex; gap: 8px; flex-wrap: wrap; }
.qchip { padding: 7px 12px; border-radius: 12px; border: 1px solid var(--b); background: var(--s); color: var(--t-muted); font: 400 13px/1.3 var(--f-app); text-align: left; transition: border-color 150ms ease-out, background-color 150ms ease-out, color 150ms ease-out; }
.qchip:hover { border-color: var(--bs); background: var(--s2); color: var(--t); }
.qchip[aria-pressed="true"] { border-color: var(--bs); background: var(--s2); color: var(--t); }
.askrow { display: flex; gap: 8px; }
.fld { flex: 1; min-width: 0; padding: 9px 14px; border-radius: 12px; border: 1px solid var(--b); background: var(--s); color: var(--t); font: 400 14px/1.3 var(--f-app); transition: border-color 150ms ease-out, background-color 150ms ease-out; }
.fld::placeholder { color: var(--t-faint); }
.fld:focus { outline: none; border-color: var(--bs); background: var(--s2); }
.pbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 20px; border-radius: 100px; border: 1px solid var(--bs); background: var(--acc-strong); color: var(--acc-contrast); font: 500 14px/1 var(--f-app); box-shadow: 0 12px 40px rgba(20,20,80,0.3); transition: opacity 150ms ease-out; white-space: nowrap; }
.pbtn:hover { opacity: 0.9; }
.pbtn[disabled] { opacity: 0.45; cursor: not-allowed; }
.sbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 18px; border-radius: 100px; border: 1px solid var(--b); background: var(--s); color: var(--t); font: 500 14px/1 var(--f-app); transition: border-color 150ms ease-out, background-color 150ms ease-out; max-width: 100%; text-align: center; backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.sbtn:hover { border-color: var(--bs); background: var(--s2); }
.app :focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 12px; }
.app .ptabs :focus-visible, .app .pbtn:focus-visible, .app .sbtn:focus-visible { border-radius: 100px; }

.trace { display: grid; gap: 0; }
.step { position: relative; padding: 0 0 14px 26px; min-height: 28px; }
.step::before { content: ""; position: absolute; left: 3px; top: 6px; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--t-faint); background: transparent; }
.step::after { content: ""; position: absolute; left: 7px; top: 19px; bottom: -2px; width: 1px; background: var(--ink); }
.step:last-child::after { display: none; }
.step[data-s="running"]::before { border-color: var(--acc); animation: pulse 1.2s ease-in-out infinite; }
.step[data-s="ok"]::before { background: var(--ok); border-color: var(--ok); }
.step[data-s="warn"]::before { background: var(--warn); border-color: var(--warn); }
@keyframes pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.step .line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.step .thought { color: var(--t-muted); font-style: normal; }
.tool { display: inline-flex; padding: 2px 8px; border-radius: 8px; border: 1px solid var(--b); background: var(--s); font: 400 11px/1.4 var(--f-data); }
.arg { color: var(--t-muted); }
.res { color: var(--t-faint); font: 400 11px/1.4 var(--f-data); }
.res.w { color: var(--warn); }
.step.in-a { animation: arrive 200ms ease-out both; }
@keyframes arrive { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.wirebtn { justify-self: start; border: 0; background: none; padding: 0; color: var(--t-muted); font: 400 11px/1.4 var(--f-data); text-decoration: underline; text-decoration-color: var(--ink); text-underline-offset: 3px; text-transform: uppercase; letter-spacing: 0.12em; }
.wirebtn:hover { color: var(--t); }
.wire { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--code); border: 1px solid var(--b); font: 400 11px/1.5 var(--f-data); color: var(--t-muted); overflow-x: auto; white-space: pre; }

.answer { padding: 20px 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-height: 120px; align-content: start; }
.answer .atext { font: 400 17px/1.5 var(--f-app); letter-spacing: -0.01em; }
.answer .empty { color: var(--t-faint); }
.cite { display: grid; gap: 6px; }
.ctile { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--b); background: var(--s); transition: border-color 150ms ease-out, background-color 150ms ease-out; }
.ctile:hover { border-color: var(--bs); background: var(--s2); }
.ctile .t { font-weight: 500; }
.ctile .p { color: var(--t-faint); font: 400 11px/1.4 var(--f-data); }
.strip2 { display: flex; flex-wrap: wrap; gap: 6px 18px; padding-top: 12px; border-top: 1px solid var(--ink); font: 400 12px/1.4 var(--f-data); color: var(--t-faint); }
.strip2 .ok { color: var(--ok); }
.strip2 .warn { color: var(--warn); }
.strip2 b { color: var(--t); font-weight: 400; }
.badge { display: inline-flex; align-items: center; padding: 1px 12px; border-radius: 100px; border: 1px solid var(--b); background: var(--s); font: 400 12px/1.6 var(--f-app); color: var(--t-muted); }
.badge.ok { border-color: var(--ok); color: var(--ok); }
.badge.warn { border-color: var(--warn); color: var(--warn); }
.badge.acc { border-color: var(--acc); color: var(--acc); }
.badge.bad { border-color: var(--bad); color: var(--bad); }

.reveal-a { animation: arrive 200ms ease-out both; }
#pgpane { grid-template-columns: minmax(0, 1fr); }
.qchip { max-width: 100%; }
@container (min-width: 700px) {
  #pgpane { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; }
  #pgpane .answer { min-height: 0; }
}

/* live feed */
.feedcap { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.livedot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); margin-right: 8px; animation: lring 2s ease-out infinite; vertical-align: 1px; }
@keyframes lring { 0% { box-shadow: 0 0 0 0 rgba(141,232,184,0.55); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
.paper .livedot { box-shadow: none; }
.rows { display: grid; }
.row { display: grid; grid-template-columns: 52px auto 1fr auto; gap: 4px 12px; align-items: baseline; padding: 11px 8px; margin: 0 -8px; border-top: 1px solid var(--ink); border-radius: 0; }
.row:first-child { border-top: 0; }
.row.fresh { animation: arrive 200ms ease-out both, wash 2400ms ease-out both; }
@keyframes wash { from { background-color: var(--arrival); } to { background-color: transparent; } }
.row > * { min-width: 0; }
.row .who, .row .pin, .row .out { overflow-wrap: anywhere; }
.row .time { color: var(--t-faint); font: 400 11px/1.4 var(--f-data); }
.row .who { color: var(--t-faint); font: 400 11px/1.4 var(--f-data); grid-column: 2 / -1; }
.row .what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .out { font: 400 11px/1.4 var(--f-data); color: var(--t-muted); white-space: nowrap; }
.row .pin { grid-column: 2 / -1; font: 400 11px/1.4 var(--f-data); color: var(--t-faint); }
.row .pin .now { color: var(--acc); }
.linkbtn { border: 0; background: none; padding: 0; font: inherit; color: var(--t); text-decoration: underline; text-decoration-color: var(--ink); text-underline-offset: 3px; cursor: pointer; }
.diffbox { grid-column: 2 / -1; padding: 8px 10px; border-radius: 12px; background: var(--code); border: 1px solid var(--b); font: 400 11px/1.6 var(--f-data); }
.diffbox .del { color: var(--bad); }
.diffbox .add { color: var(--ok); }
.emptyrows { padding: 22px 8px; color: var(--t-muted); }
.emptyrows b { display: block; color: var(--t); font-weight: 500; font-size: 15px; margin-bottom: 4px; }

/* ================= sections ================= */
.sec { position: relative; padding: 96px var(--gutter); isolation: isolate; max-width: calc(var(--col) + var(--gutter) * 2); margin: 0 auto; }
.sec .rule { height: 1px; background: var(--border); transform-origin: left; margin-bottom: 56px; }
.sec .kicker { margin-bottom: 20px; }
h2.h1 .ln { white-space: normal; }
h2.h1 { font: 500 clamp(2rem, 3.6vw, 2.75rem)/1.1 var(--f-read); letter-spacing: -0.02em; max-width: 20ch; }
.lead { margin-top: 20px; color: var(--text-2); font: 300 1.25rem/1.55 var(--f-read); max-width: 52ch; }
.instr { margin-top: 12px; color: var(--text-2); font: 400 0.9375rem/1.5 var(--f-read); }
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: 48px; align-items: start; }
.duo > * { min-width: 0; }

.pv h4 { margin: 0; font: 500 clamp(24px, 3vw, 32px)/1.15 var(--f-app); letter-spacing: -0.02em; }
.pvhead { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.pvstat { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.article { font: 400 17px/1.65 var(--f-app); color: var(--t); max-width: 62ch; }
.article .val { font-weight: 500; border-bottom: 1.5px dashed var(--acc); }
.article .val.changed { background: rgba(31,138,76,0.14); border-bottom-color: var(--ok); border-radius: 4px; padding: 0 3px; }
.editbox { display: grid; gap: 12px; padding: 16px; border-radius: 12px; border: 1px solid var(--ink); background: rgba(255,255,255,0.4); }
.editbox label { display: grid; gap: 6px; font-size: 13px; color: var(--t-muted); }
.editbox .fld { color: var(--t); background: rgba(255,255,255,0.7); border-color: var(--ink); font-size: 15px; }
.editbox .err { color: var(--bad); font-size: 13px; min-height: 18px; }
.btnrow { display: flex; gap: 8px; flex-wrap: wrap; }
.paper .pbtn { box-shadow: 0 12px 34px rgba(45,50,130,0.18); }
.paper .sbtn { border-color: var(--ink); }

.who-seg { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--track); width: max-content; max-width: 100%; }
.who-seg button { padding: 6px 16px; border: 0; border-radius: 10px; background: transparent; color: var(--t-muted); font: 400 13px/1.2 var(--f-app); transition: background-color 150ms ease-out, color 150ms ease-out; }
.who-seg button:hover { color: var(--t); }
.who-seg button[aria-pressed="true"] { background: var(--track-active); color: var(--t); }
.result { padding: 20px 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-height: 150px; align-content: start; }
.result .big { font: 400 20px/1.4 var(--f-app); letter-spacing: -0.01em; }
.result .note { color: var(--t-muted); font-size: 13px; }

.graphwrap { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.graphwrap > * { min-width: 0; }
.gsvg { width: 100%; height: auto; display: block; }
.gnode { cursor: pointer; transition: opacity 200ms ease-out; }
.gnode circle { transition: r 150ms ease-out; }
.app .gnode:focus-visible, .gnode:focus-visible { outline: none; }
.gnode:focus-visible circle.ring { stroke: #fff; stroke-width: 3; }
.gedge { stroke: rgba(255,255,255,0.35); stroke-width: 1; transition: opacity 200ms ease-out; }
.gedge.wanted { stroke-dasharray: 4 4; stroke: #ffd9c7; }
.dim { opacity: 0.2; }
.glabel { font: 400 11px var(--f-data); fill: rgba(255,255,255,0.85); pointer-events: none; }
.ginfo { padding: 20px 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-content: start; }
.ginfo h4 { margin: 0; font: 500 20px/1.2 var(--f-app); letter-spacing: -0.02em; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--t-muted); font: 400 11px/1.4 var(--f-data); padding: 0 8px; }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; border: 2px solid; vertical-align: -1px; }

.cta { text-align: left; }
.ctabox { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: end; padding: 40px 44px; }
.ctabox p { color: var(--text-2); font: 300 1.125rem/1.55 var(--f-read); max-width: 52ch; }
.ctabox p + p { margin-top: 12px; }
.ctabox .ctas { margin-top: 28px; }

footer.foot { padding: 0 var(--gutter) 24px; }
.foot-in { max-width: var(--col); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; justify-content: space-between; padding: 14px 32px; }
.foot-l a:hover { color: var(--text); }
/* palette */
.overlay { position: fixed; inset: 0; z-index: 100; display: none; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; background: rgba(20,20,80,0.25); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.overlay.open { display: flex; animation: fadeo 150ms ease-out both; }
@keyframes fadeo { from { opacity: 0; } to { opacity: 1; } }
.pal { width: min(620px, 100%); border-radius: 24px; background: rgba(255,255,255,0.92); border: 1px solid rgba(255,255,255,0.9); box-shadow: 0 30px 70px rgba(20,20,80,0.3), inset 0 1px 0 rgba(255,255,255,0.85); color: #191a22; font: 400 14px/1.5 var(--f-app); overflow: hidden; transform-origin: 50% 0; animation: palin 180ms var(--out) both; }
@keyframes palin { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
.pal-h { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid rgba(25,26,34,0.14); }
.pal-h input { flex: 1; border: 0; background: none; font: 400 16px var(--f-app); color: #191a22; outline: none; min-width: 0; }
.pal-h .keycap { color: #5a5d68; border-color: rgba(25,26,34,0.22); }
.pal-b { padding: 8px; max-height: 50vh; overflow: auto; }
.pal-g { font: 400 11px var(--f-data); text-transform: uppercase; letter-spacing: 0.18em; color: #5a5d68; padding: 8px 12px 4px; }
.pal-i { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; background: none; text-align: left; color: #191a22; cursor: pointer; font: inherit; }
.pal-i[aria-selected="true"] { background: rgba(74,80,224,0.08); }
.pal-i .tt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-i .cx { font: 400 11px var(--f-data); color: #5a5d68; }
.pal-i .badge { color: #5a5d68; border-color: rgba(25,26,34,0.2); background: none; }
.pal-e { padding: 24px 12px; color: #363944; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 120; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; padding: 12px 18px; border-radius: 100px; background: rgba(255,255,255,0.92); color: #191a22; box-shadow: var(--glass-lifted), var(--hi); font: 400 0.9375rem/1.3 var(--f-read); max-width: calc(100vw - 32px); transition: opacity 200ms ease, transform 200ms var(--out); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ================= motion: entrance + reveal ================= */
.js .pre { opacity: 0; transform: translateY(14px); filter: blur(6px); }
.js .ln > span { transform: translateY(105%); }
.js .strip { opacity: 0; }
.ready .pre { opacity: 1; transform: none; filter: none; transition: opacity 700ms var(--out), transform 700ms var(--out), filter 700ms var(--out); transition-delay: var(--d, 0ms); }
.ready .ln > span { transform: none; transition: transform 700ms var(--out); transition-delay: var(--d, 0ms); }
.ready .strip { opacity: 1; transition: opacity 800ms ease 1000ms; }
.js [data-r] { opacity: 0; transform: translateY(24px); filter: blur(6px); }
.js [data-r].in { opacity: 1; transform: none; filter: none; transition: opacity 550ms var(--out), transform 550ms var(--out), filter 550ms var(--out); transition-delay: var(--d, 0ms); }
.js .sec .rule[data-r] { opacity: 1; transform: scaleX(0); filter: none; }
.js .sec .rule[data-r].in { transform: scaleX(1); transition: transform 800ms var(--inout); }
.js .sec h2 .ln > span { transform: translateY(105%); }
.js .sec.in h2 .ln > span { transform: none; transition: transform 600ms var(--out); transition-delay: var(--d, 0ms); }

/* ================= responsive ================= */
@media (max-width: 1100px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 120px; min-height: 0; padding-bottom: 120px; }
  .duo, .ctabox { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .graphwrap { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ln { white-space: normal; }
  .ctas .btn { width: 100%; justify-content: center; }
  .app { padding: 10px; border-radius: 20px; }
  .panel, .answer, .result, .ginfo { padding: 16px; }
  .sec { padding-top: 80px; padding-bottom: 80px; }
  .phead h3 { font-size: 22px; }
  .row { grid-template-columns: 44px 1fr; }
  .row .who, .row .pin, .row .diffbox { grid-column: 2; }
  .row .out { grid-column: 2; white-space: normal; }
  .row .what { white-space: normal; overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .pre, .js .ln > span, .js [data-r], .js .sec h2 .ln > span, .js .demo-col .mode-row, .js .demo-col .app, .js .demo-col .hint { transform: none !important; filter: none !important; }
  .js .sec .rule[data-r] { transform: none !important; }
  .strip .track, .livedot, .step[data-s="running"]::before { animation: none !important; }
  .row.fresh, .step.in-a, .reveal-a, .pal, .overlay.open { animation-duration: 1ms !important; }
  .row.fresh { animation: none !important; border-left: 2px solid var(--acc); }
  .seg .thumb, .toast, .gnode, .gedge { transition-duration: 1ms !important; }
}

/* =====================================================================
   Shared by team, blog index and blog posts
   ===================================================================== */

/* cursor spotlight on glass tiles (js: site.js) */
[data-spot] { position: relative; }
[data-spot]::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,0.7), transparent 65%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0; transition: opacity 200ms ease-out; pointer-events: none; }
[data-spot]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,0.08), transparent 65%); opacity: 0; transition: opacity 200ms ease-out; pointer-events: none; }
@media (hover: hover) and (pointer: fine) { [data-spot]:hover::before, [data-spot]:hover::after { opacity: 1; } }

/* LinkedIn pill */
.in-link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 100px; border: 1px solid var(--border); background: var(--surface); font: 500 13px/1 var(--f-read); color: var(--text); transition: background-color 150ms ease-out, border-color 150ms ease-out; backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.in-link svg { width: 14px; height: 14px; flex: none; }
.in-link:hover { background: var(--surface-2); border-color: var(--border-strong); }

/* ---------- team ---------- */
.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.tcard { padding: 28px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; transition: background-color 150ms ease-out, border-color 150ms ease-out; }
@media (hover: hover) and (pointer: fine) { .tcard:hover { background: var(--surface-2); border-color: var(--border-strong); } }
.avatar { width: 56px; height: 56px; border-radius: 50%; background: #fff; color: var(--indigo-deep); display: grid; place-items: center; font: 500 18px/1 var(--f-data); box-shadow: var(--primary-shadow); }
.tcard h3 { font: 500 32px/1.1 var(--f-read); letter-spacing: -0.02em; margin-top: 6px; }
.tcard p { color: var(--text-2); font: 300 1.0625rem/1.55 var(--f-read); }
.tcard .in-link { justify-self: start; margin-top: 6px; }
.tcard .nolink { margin-top: 6px; color: var(--text-3); font: 400 11px/1.4 var(--f-data); }
@media (max-width: 900px) { .team-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- blog index ---------- */
.page { max-width: calc(var(--col) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.bhead { padding-top: 148px; }
.bhead h1 { font: 500 clamp(2.25rem, 4vw, 3.5rem)/1.08 var(--f-read); letter-spacing: -0.02em; max-width: 18ch; text-wrap: balance; }
.bhead .lead { margin-top: 20px; color: var(--text-2); font: 300 1.25rem/1.55 var(--f-read); max-width: 56ch; }
.btools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 40px 0 20px; }
.chips { display: inline-flex; padding: 3px; border-radius: 100px; background: rgba(255,255,255,0.08); border: 1px solid var(--border); }
.chips button { padding: 8px 18px; border: 0; background: transparent; color: var(--text-2); font: 500 13px/1 var(--f-read); border-radius: 100px; cursor: pointer; transition: background-color 150ms ease-out, color 150ms ease-out; }
.chips button:hover { color: var(--text); }
.chips button[aria-pressed="true"] { background: #fff; color: var(--indigo-deep); }
.finder { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 200px; max-width: 360px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); transition: border-color 150ms ease-out, background-color 150ms ease-out; }
.finder:focus-within { border-color: var(--border-strong); background: var(--surface-2); }
.finder input { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font: 400 14px/1.3 var(--f-read); outline: none; }
.finder input::placeholder { color: var(--text-3); }
.finder .keycap { font: 400 11px/1 var(--f-data); padding: 2px 6px; border-radius: 6px; border: 1px solid var(--border-strong); color: var(--text-3); }
.count { margin-left: auto; color: var(--text-2); font: 400 11px/1.3 var(--f-data); text-transform: uppercase; letter-spacing: 0.18em; }
.pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-bottom: 96px; }
.pcard { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; padding: 32px 36px; transition: background-color 150ms ease-out, border-color 150ms ease-out, opacity 200ms ease-out; color: inherit; }
.pcard.feat { grid-column: 1 / -1; padding: 44px 48px; }
.pcard.feat h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); max-width: 26ch; }
.pcard h2 { font: 500 1.625rem/1.2 var(--f-read); letter-spacing: -0.02em; text-wrap: balance; }
.pcard p.t { color: var(--text-2); font: 300 1.0625rem/1.55 var(--f-read); max-width: 62ch; }
.pcard .go { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1 var(--f-read); margin-top: 6px; }
.pcard .go span { transition: transform 200ms var(--out); }
@media (hover: hover) and (pointer: fine) { .pcard:hover { background: var(--surface-2); border-color: var(--border-strong); } .pcard:hover .go span { transform: translateX(4px); } }
.tstrip { display: flex; flex-wrap: wrap; gap: 4px 16px; font: 400 12px/1.4 var(--f-data); color: var(--text-2); }
.tstrip .ok { color: var(--success); }
.tstrip b { font-weight: 400; color: var(--text); }
.pcard[hidden] { display: none; }
.empty-b { grid-column: 1 / -1; padding: 40px 36px; }
.empty-b b { display: block; font: 500 1.25rem/1.3 var(--f-read); margin-bottom: 6px; }
.empty-b p { color: var(--text-2); }
.js .pcard, .js .btools, .js .bhead > * { opacity: 0; transform: translateY(18px); filter: blur(6px); }
.ready .pcard, .ready .btools, .ready .bhead > * { opacity: 1; transform: none; filter: none; transition: opacity 600ms var(--out), transform 600ms var(--out), filter 600ms var(--out), background-color 150ms ease-out, border-color 150ms ease-out; transition-delay: var(--d, 0ms), var(--d, 0ms), var(--d, 0ms), 0ms, 0ms; }
@media (max-width: 800px) { .pgrid { grid-template-columns: minmax(0, 1fr); } .pcard, .pcard.feat { padding: 24px; } .count { margin-left: 0; width: 100%; } }

/* ---------- paper: the light reading surface (product read mode) ---------- */
html.paper { --text: #191a22; --text-2: #363944; --text-3: #5a5d68; --surface: rgba(255,255,255,0.46); --surface-2: rgba(255,255,255,0.6); --border: rgba(255,255,255,0.7); --border-strong: rgba(255,255,255,0.9); --ink: rgba(25,26,34,0.14); --ink-strong: rgba(25,26,34,0.22); --accent: #4a50e0; --success: #1f8a4c; --warning: #b26a00; --danger: #c0392b; --glass-shadow: 0 20px 55px rgba(45,50,130,0.10); --glass-lifted: 0 26px 65px rgba(45,50,130,0.16); --hi: inset 0 1px 0 rgba(255,255,255,0.85); --primary-shadow: 0 12px 34px rgba(45,50,130,0.18); --blur: blur(28px) saturate(1.4); color-scheme: light; background: #e9e7e6; }
html.paper body::before { background: linear-gradient(90deg, #5a60e6 0%, #7a80ee 5%, rgba(122,128,238,0.4) 13%, transparent 25%), radial-gradient(60% 50% at 80% 0%, #ffffff, transparent 70%), #e9e7e6; }
html.paper ::selection { background: rgba(74,80,224,0.18); }
html.paper :focus-visible { outline-color: #4a50e0; }
html.paper .btn-light { background: #4a50e0; color: #fff; border-color: transparent; }
html.paper .btn-dark { border-color: var(--ink-strong); }
html.paper .brand span { color: var(--text-3); }
html.paper .nav-in { background: rgba(255,255,255,0.55); }
html.paper .in-link, html.paper .chips { border-color: var(--ink-strong); }

/* ---------- blog post (read mode) ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 80; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); }
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; max-width: 1180px; margin: 0 auto; padding: 128px var(--gutter) 32px; align-items: start; }
.crumbs { display: flex; gap: 8px; align-items: center; font: 400 13px/1.4 var(--f-read); color: var(--text-2); margin-bottom: 20px; flex-wrap: wrap; }
.crumbs a:hover { color: var(--text); }
.crumbs b { font-weight: 500; color: var(--text); }
.post { padding: 44px 52px 48px; }
.post .tstrip { padding-top: 16px; margin-top: 20px; border-top: 1px solid var(--ink); }
.pstat { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.post .badge { display: inline-flex; align-items: center; padding: 1px 12px; border-radius: 100px; border: 1px solid var(--border); background: var(--surface); font: 400 12px/1.6 var(--f-read); color: var(--text-2); }
.post .badge.ok { border-color: var(--success); color: var(--success); }
.post h1 { font: 500 clamp(2rem, 3.4vw, 2.75rem)/1.1 var(--f-read); letter-spacing: -0.02em; text-wrap: balance; }
.reading { font-size: 17px; line-height: 1.65; max-width: 70ch; }
.reading .lead { margin-top: 28px; font: 300 1.3125rem/1.55 var(--f-read); color: var(--text); }
.reading p { margin: 18px 0 0; }
.reading h2 { font: 500 1.625rem/1.2 var(--f-read); letter-spacing: -0.02em; margin: 44px 0 0; scroll-margin-top: 104px; position: relative; }
.reading h3 { font: 500 1.125rem/1.3 var(--f-read); margin: 28px 0 0; }
.reading h3 + p { margin-top: 8px; }
.reading strong { font-weight: 500; }
.reading a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ink-strong); }
.reading blockquote { margin: 28px 0 0; padding: 20px 24px; border-radius: 12px; background: rgba(74,80,224,0.06); border: 1px solid var(--ink); }
.reading blockquote p { margin: 0; font: 500 1.375rem/1.4 var(--f-read); letter-spacing: -0.01em; }
.reading blockquote::before { content: "— Onthoud"; display: block; font: 400 11px/1.2 var(--f-data); text-transform: uppercase; letter-spacing: 0.3em; color: var(--accent); margin-bottom: 10px; }
.reading .box { margin: 28px 0 0; padding: 20px 24px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--ink); }
.reading .box p { margin: 0; }
.reading ul { margin: 18px 0 0; display: grid; gap: 10px; }
.reading ul li { position: relative; padding-left: 26px; }
.reading ul li::before { content: "—"; position: absolute; left: 0; color: var(--accent); font-family: var(--f-data); }
.hanchor { position: absolute; left: -30px; top: 2px; width: 24px; height: 24px; border: 0; background: none; color: var(--text-3); font: 400 15px/24px var(--f-data); cursor: pointer; opacity: 0; transition: opacity 150ms ease-out, color 150ms ease-out; border-radius: 6px; }
.reading h2:hover .hanchor, .hanchor:focus-visible { opacity: 1; }
.hanchor:hover { color: var(--accent); }
@media (max-width: 1100px) { .hanchor { display: none; } }

.selftest { counter-reset: q; }
.reading ul.selftest li { padding: 16px 18px; display: grid; gap: 10px; border-radius: 12px; border: 1px solid var(--ink); background: var(--surface); }
.reading ul.selftest li::before { content: none; }
.yn { display: inline-flex; padding: 3px; border-radius: 100px; background: rgba(25,26,34,0.05); border: 1px solid var(--ink); width: max-content; }
.yn button { padding: 6px 16px; border: 0; background: transparent; color: var(--text-2); font: 500 13px/1 var(--f-read); border-radius: 100px; cursor: pointer; transition: background-color 150ms ease-out, color 150ms ease-out; }
.yn button:hover { color: var(--text); }
.yn button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.stresult { margin: 14px 0 0; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--ink); font: 400 12px/1.5 var(--f-data); color: var(--text-2); min-height: 52px; transition: background-color 200ms ease-out, border-color 200ms ease-out; }
.stresult.hit { background: rgba(74,80,224,0.08); border-color: var(--accent); color: var(--text); font: 500 1rem/1.5 var(--f-read); }

.cta-end { margin: 48px 0 0; padding: 28px 32px; border-radius: 24px; background: var(--surface-2); border: 1px solid var(--border-strong); box-shadow: var(--glass-lifted), var(--hi); display: grid; gap: 12px; justify-items: start; }
.cta-end h3 { font: 500 1.625rem/1.2 var(--f-read); letter-spacing: -0.02em; margin: 0; }
.cta-end p { margin: 0; color: var(--text-2); max-width: 52ch; font: 300 1.0625rem/1.55 var(--f-read); }
.byline { margin-top: 32px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--ink); }
.byline .avatar { background: var(--accent); color: #fff; width: 48px; height: 48px; box-shadow: none; }
.byline b { font-weight: 500; display: block; }
.byline span { color: var(--text-2); font-size: 14px; }
.byline .in-link { margin-left: auto; }

.rail { position: sticky; top: 104px; display: grid; gap: 12px; }
.rail .box2 { padding: 20px; display: grid; gap: 14px; }
.outline { display: grid; gap: 2px; margin: 0 -8px; }
.outline a { display: block; padding: 7px 10px; border-radius: 12px; font: 400 14px/1.35 var(--f-read); color: var(--text-2); transition: background-color 150ms ease-out, color 150ms ease-out; }
.outline a:hover { background: rgba(255,255,255,0.45); color: var(--text); }
.outline a[aria-current="true"] { background: rgba(74,80,224,0.10); color: #3a40c8; font-weight: 500; }
.copybtn { display: inline-flex; align-items: center; justify-content: center; padding: 9px 16px; border-radius: 100px; border: 1px solid var(--ink-strong); background: var(--surface); font: 500 13px/1 var(--f-read); color: var(--text); cursor: pointer; transition: background-color 150ms ease-out, border-color 150ms ease-out; }
.copybtn:hover { background: var(--surface-2); }
.more { max-width: 1180px; margin: 0 auto; padding: 24px var(--gutter) 96px; }
.more .pgrid { padding-bottom: 0; margin-top: 16px; }
@media (max-width: 1000px) { .post-layout { grid-template-columns: minmax(0, 1fr); } .rail { display: none; } .post { padding: 28px 22px 32px; } }
@media (prefers-reduced-motion: reduce) {
  .js .pcard, .js .btools, .js .bhead > * { transform: none !important; filter: none !important; }
  .progress { transition: none; }
}

#team h2.h1 { max-width: 28ch; }

/* =====================================================================
   Hero brain v2 (lateral view, procedural cortex, knowledge network with gaps)
   ===================================================================== */
.hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: max(100svh, 760px); padding-bottom: 96px; }
.brain-col { position: relative; z-index: 2; display: grid; gap: 14px; justify-items: stretch; }
.brain-stage { position: relative; width: 100%; max-width: 660px; margin: 0 auto; aspect-ratio: 600 / 520; will-change: transform; }
.brain-stage::before { content: ""; position: absolute; inset: -6% -6%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,205,190,0.20), rgba(255,255,255,0.05) 60%, transparent); pointer-events: none; }
.brain-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: drop-shadow(0 28px 40px rgba(20,16,90,0.45)); }
.brain-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.rim { fill: none; stroke: rgba(255,226,214,0.55); stroke-width: 1.2; stroke-linejoin: round; }
.e { fill: none; stroke: rgba(255,255,255,0.4); stroke-width: 0.8; vector-effect: non-scaling-stroke; }
.e.v { stroke: var(--success); stroke-opacity: 0.9; stroke-width: 1.5; }
.nodes { filter: drop-shadow(0 0 3px rgba(255,255,255,0.9)); }
.n { fill: #fff; }
.n.v { fill: var(--success); }
.nodes .n.v { filter: drop-shadow(0 0 4px rgba(141,232,184,0.9)); }
.n.v.new { animation: pop 400ms var(--out) both; transform-box: fill-box; transform-origin: center; }
.e.grow { animation: growin 400ms var(--out) both; }
.e.out, .n.out { opacity: 0; transition: opacity 200ms ease-out; }
@keyframes pop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }
@keyframes growin { from { opacity: 0; } to { opacity: 1; } }
.pd { fill: #fff; }
.ph { fill: rgba(255,217,199,0.5); }
.void { transition: opacity 400ms var(--out); pointer-events: none; }
.void.closed { opacity: 0; }
.gr { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 4 5; animation: gapPulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; transition: opacity 300ms ease-out, transform 300ms var(--out); }
.gc { fill: var(--accent); opacity: 0.9; transition: opacity 200ms ease-out; }
.gap { cursor: pointer; outline: none; }
.gap .hit { fill: transparent; }
.gap:focus-visible .gr, .gap:hover .gr { stroke-width: 2.4; stroke: #fff; }
.gap.closed .gr { opacity: 0; transform: scale(0.6); animation: none; }
.gap.closed .gc { opacity: 0; }
.gap.closed { cursor: default; }
.gap.hit .gr { animation: gapHit 600ms var(--out) both; stroke: var(--warning); }
.burst { fill: none; stroke: var(--success); stroke-width: 1.8; transform-box: fill-box; transform-origin: center; animation: burst 700ms var(--out) both; pointer-events: none; }
@keyframes gapPulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
@keyframes gapHit { 0% { transform: scale(1); } 35% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes burst { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(5); } }

.gap-tip { position: absolute; z-index: 5; transform: translate(-50%, calc(-100% - 34px)); display: grid; gap: 2px; padding: 8px 14px; border-radius: 12px; background: rgba(255,255,255,0.92); color: #191a22; box-shadow: var(--glass-lifted), var(--hi); font: 400 13px/1.3 var(--f-read); white-space: nowrap; pointer-events: none; animation: arrive 150ms ease-out both; }
.gap-tip b { font-weight: 500; }
.gap-tip span { font: 400 11px/1.3 var(--f-data); color: #5a5d68; }
.gap-tip span.ok { color: #1f8a4c; }
.gap-tip span.w { color: #b26a00; }
@keyframes arrive { from { opacity: 0; } to { opacity: 1; } }

.brain-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.brain-count { display: flex; align-items: baseline; gap: 8px; font: 400 11px/1 var(--f-data); text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-2); }
.brain-count b { font: 500 2.25rem/1 var(--f-read); letter-spacing: -0.02em; color: var(--text); text-transform: none; min-width: 1ch; text-align: right; }
.brain-stage[data-state="complete"] ~ .brain-bar .brain-count b { color: var(--success); }
.brain-cap { font: 400 0.9375rem/1.4 var(--f-read); color: var(--text-2); }

/* entrance: outline draws, the cortex grows in, nodes light up from the centre outwards, gaps flicker in last */
.js .rim { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .brain-canvas { opacity: 0; transform: scale(0.97); }
.js .n:not(.v), .js .e:not(.v) { opacity: 0; }
.js .gap, .js .void { opacity: 0; }
.brain-stage.play .rim { stroke-dashoffset: 0; transition: stroke-dashoffset 1500ms var(--inout); }
.brain-stage.play.built .brain-canvas { opacity: 1; transform: none; transition: opacity 900ms ease-out 500ms, transform 1200ms var(--out) 500ms; }
.brain-stage.play .n:not(.v) { opacity: 1; transition: opacity 500ms var(--out) calc(1200ms + var(--i, 0) * 14ms); }
.brain-stage.play .e:not(.v) { opacity: 1; transition: opacity 600ms ease-out calc(1400ms + var(--i, 0) * 25ms); }
.brain-stage.play .gap { opacity: 1; transition: opacity 400ms ease-out calc(2000ms + var(--i, 0) * 90ms); }
.brain-stage.play .void:not(.closed) { opacity: 1; transition: opacity 600ms ease-out calc(1800ms + var(--i, 0) * 90ms); }

@media (max-width: 1100px) { .hero { grid-template-columns: minmax(0, 1fr); } .brain-stage { max-width: 560px; } }
@media (prefers-reduced-motion: reduce) {
  .js .rim { stroke-dashoffset: 0; }
  .js .brain-canvas { opacity: 1; transform: none; }
  .js .n:not(.v), .js .e:not(.v), .js .gap, .js .void:not(.closed) { opacity: 1; }
  .gr { animation: none; }
  .n.v.new, .e.grow, .burst { animation: none; }
  .brain-stage.play .rim, .brain-stage.play .brain-canvas, .brain-stage.play .n, .brain-stage.play .e, .brain-stage.play .gap, .brain-stage.play .void { transition: none; }
}
.gap-tip[hidden] { display: none; }
.hero { overflow-x: clip; }
.brain-stage::before { inset: -4% -4%; }

/* =====================================================================
   The dive: scroll through a gap in the brain into the example (desktop, js-driven)
   ===================================================================== */
.dive-light { display: none; }
.dive.on { position: relative; height: 360vh; }
.dive.on .dive-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.dive.on .hero { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: 0 auto; width: 100%; max-width: 1360px; min-height: 0; height: 100%; padding: 104px var(--gutter) 56px; overflow: visible; align-content: center; z-index: 1; }
.dive.on .brain-stage { transform-origin: 50% 44.6%; }
.dive.on #zoeken { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: 0 auto; width: 100%; max-width: 1360px; padding: 100px var(--gutter) 40px; display: grid; grid-template-columns: minmax(0, 4.2fr) minmax(0, 7.8fr); grid-template-rows: auto auto; column-gap: 40px; align-content: center; opacity: 0; pointer-events: none; z-index: 3; transform-origin: 70% 50%; overflow: visible; }
.dive.on #zoeken .rule { display: none; }
.dive.on #zoeken .kicker { grid-column: 1; grid-row: 1; align-self: end; margin-bottom: 18px; }
.dive.on #zoeken h2 { grid-column: 1; grid-row: 2; align-self: start; }
.dive.on #zoeken .demo-col { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.dive.on .dive-light { display: block; position: absolute; left: 50%; top: 50%; width: 150vmax; height: 150vmax; margin: -75vmax 0 0 -75vmax; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,236,226,0.9), rgba(255,205,190,0.45) 38%, rgba(120,128,255,0.15) 62%, transparent); opacity: 0; pointer-events: none; z-index: 2; will-change: opacity, transform; }
.dive.on .copy, .dive.on .brain-bar, .dive.on .brain-cap { will-change: transform, opacity; }

/* whole site: smooth page changes (cross-document view transitions) and a ground that drifts with the scroll */
@view-transition { navigation: auto; }
.nav { view-transition-name: nav; }
::view-transition-old(root) { animation: vt-out 200ms ease-out both; }
::view-transition-new(root) { animation: vt-in 420ms var(--out) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } body::before { transform: none; } }
.dive:not(.on) #zoeken .demo-col { margin-top: 44px; }

/* =====================================================================
   Hero constellation: departments with their rules around a core of knowledge
   ===================================================================== */
.orbit-col { position: relative; z-index: 2; display: grid; gap: 12px; justify-items: stretch; }
.orbit-stage { position: relative; width: 100%; max-width: min(700px, 74vh); margin: 0 auto; aspect-ratio: 1; will-change: transform; }
.orbit-canvas, .orbit-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.orbit-svg { overflow: visible; }
.orbit-svg text { font-family: var(--f-data); }
.spoke { stroke: rgba(255,255,255,0.18); stroke-width: 1; stroke-dasharray: 2 6; vector-effect: non-scaling-stroke; }
.dept { transition: opacity 400ms var(--out); cursor: pointer; }
.dept.dim { opacity: 0.14; }
.dept .e { stroke: rgba(255,255,255,0.42); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
.dept .e.e-gap { stroke: rgba(255,217,199,0.55); stroke-dasharray: 3 4; }
.dept .tick { fill: var(--tint); opacity: 0.9; }
.dept .sub { fill: #fff; filter: drop-shadow(0 0 4px rgba(255,255,255,0.8)); }
.dept .ln { fill: #fff; filter: drop-shadow(0 0 3px rgba(255,255,255,0.7)); transform-box: fill-box; transform-origin: center; }
.dept .ln.v { fill: var(--success); filter: drop-shadow(0 0 5px rgba(141,232,184,0.9)); }
.dept .ln.v.new { animation: pop 400ms var(--out) both; }
.dept .ln.out { opacity: 0; transition: opacity 200ms ease-out; }
.leaf { outline: none; }
.leaf .hit { fill: transparent; }
.leaf.ping .ln { animation: ping 500ms var(--out); }
@keyframes ping { 0% { transform: scale(1); } 40% { transform: scale(1.7); } 100% { transform: scale(1); } }
.leaf.gap .gr { fill: rgba(255,217,199,0.08); stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 3 3.5; vector-effect: non-scaling-stroke; }
.leaf.gap .gc { fill: var(--accent); }
.leaf.gap.closed .gr { opacity: 0; transform: scale(0.5); animation: none; }
.leaf.gap.closed .gc { opacity: 0; }
.leaf.gap.hit .gr { animation: gapHit 600ms var(--out) both; stroke: var(--warning); }
.zoomed .leaf { cursor: pointer; }
.zoomed .leaf:focus-visible .gr, .zoomed .leaf:hover .gr, .zoomed .leaf:focus-visible .ln, .zoomed .leaf:hover .ln { stroke: #fff; stroke-width: 2; }
.hub { outline: none; }
.hub-halo { fill: var(--tint); opacity: 0.16; transition: opacity 200ms ease-out; }
.hub-ring { fill: rgba(30,32,120,0.55); stroke: var(--tint); stroke-width: 1.6; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px var(--tint)); }
.hub-code { fill: #fff; font-size: 10px; font-weight: 500; letter-spacing: 0.06em; pointer-events: none; }
.dept:hover .hub-halo, .hub:focus-visible .hub-halo, .dept.focus .hub-halo { opacity: 0.38; }
.hub:focus-visible .hub-ring { stroke: #fff; stroke-width: 2.4; }
.dept-label { fill: #fff; font-size: 21px; font-weight: 500; letter-spacing: 0.22em; }
.dept-sub { fill: rgba(255,255,255,0.6); font-size: 11.5px; letter-spacing: 0.04em; }
.leaf-label, .sub-label { opacity: 0; transition: opacity 300ms ease-out; pointer-events: none; }
.leaf-label { fill: rgba(255,255,255,0.92); font-size: 12px; }
.sub-label { fill: var(--accent); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; }
.dept.focus .leaf-label, .dept.focus .sub-label { opacity: 1; transition-delay: 380ms; }
.zoomed .dept-label, .zoomed .dept-sub { opacity: 0; transition: opacity 250ms ease-out; }
.dept-label, .dept-sub { transition: opacity 300ms ease-out 300ms; }
.orbit-svg .pd { fill: #fff; }
.orbit-svg .ph { fill: rgba(255,217,199,0.55); }

.orbit-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.orbit-stage[data-state="complete"] ~ .orbit-bar .brain-count b { color: var(--success); }
.orbit-panel { min-height: 118px; }
.orbit-cap { font: 400 0.9375rem/1.4 var(--f-read); color: var(--text-2); padding-top: 4px; }
.orbit-cap .data { color: var(--text-3); }
.orbit-panel .op-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.orbit-panel h3 { font: 500 1.5rem/1.2 var(--f-read); letter-spacing: -0.02em; margin: 6px 0 2px; }
.orbit-panel .meta { font: 400 11px/1.4 var(--f-data); color: var(--text-2); }
.orbit-panel .meta em { font-style: normal; color: var(--accent); }
.orbit-panel .meta i { font-style: normal; color: var(--success); }
.op-back { flex: none; padding: 8px 16px; border-radius: 100px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: 500 13px/1 var(--f-read); cursor: pointer; transition: background-color 150ms ease-out, border-color 150ms ease-out; }
.op-back:hover { background: var(--surface-2); border-color: var(--border-strong); }
.op-subs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; margin-top: 12px; }
.op-subs li { display: flex; justify-content: space-between; gap: 8px; font: 400 13px/1.4 var(--f-read); padding: 6px 0; border-top: 1px solid rgba(255,255,255,0.14); }
.op-sel { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 10px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.op-sel b { font-weight: 500; }
.op-sel .ok { color: var(--success); font: 400 11px/1.4 var(--f-data); }
.op-sel .w { color: var(--warning); font: 400 11px/1.4 var(--f-data); }
.orbit-panel > * { animation: arrive 200ms ease-out both; }
.gap-tip span.ok { color: #1f8a4c; }

/* entrance: core first, then spokes, hubs, branches, labels */
.js .orbit-canvas { opacity: 0; transform: scale(0.92); }
.js .spoke, .js .dept { opacity: 0; }
.orbit-stage.play .orbit-canvas { opacity: 1; transform: none; transition: opacity 900ms ease-out, transform 1200ms var(--out); }
.orbit-stage.play .spoke { opacity: 1; transition: opacity 600ms ease-out 400ms; }
.orbit-stage.play .dept:not(.dim) { opacity: 1; transition: opacity 600ms var(--out) calc(500ms + var(--i, 0) * 70ms); }
.orbit-stage.play .dept.dim { opacity: 0.14; }

@media (max-width: 1100px) { .orbit-stage { max-width: 600px; } }
@media (max-width: 560px) { .dept-sub { display: none; } .dept-label { font-size: 26px; letter-spacing: 0.12em; } .op-subs { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .js .orbit-canvas, .js .spoke, .js .dept:not(.dim) { opacity: 1; transform: none; }
  .orbit-stage.play .orbit-canvas, .orbit-stage.play .spoke, .orbit-stage.play .dept { transition: none; }
  .dept .ln.v.new, .leaf.ping .ln, .leaf.gap.hit .gr { animation: none; }
}

/* the dive now goes through the core */
.dive.on .orbit-stage { transform-origin: 50% 50%; }

/* the constellation is not the old brain: undo the brain's hidden-until-play rules */
.js .orbit-stage .e, .js .orbit-stage .gap, .js .orbit-stage .n { opacity: 1; }
.orbit-stage .leaf.gap .gr { animation: gapPulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; transition: opacity 300ms ease-out, transform 300ms var(--out); }
.orbit-stage .leaf.gap.closed .gr { animation: none; }
.dept .e { stroke-linejoin: round; }
.leaf-label { font-size: 11px; }

.orbit-svg { overflow: hidden; }

.dept-sub { font-size: 12px; fill: rgba(255,255,255,0.72); }
.dept.done .dept-sub { fill: var(--success); }
@media (max-width: 560px) { .dept-label { font-size: 32px; } .leaf-label { font-size: 14px; } .hub-code { font-size: 13px; } }
.dept-label { font-size: 23px; }
.dept-sub { font-size: 13px; }

/* ---------- v4.3: flow, equal columns, lighter dive ---------- */
[hidden] { display: none !important; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
.op-ask { margin-top: 12px; max-width: 100%; white-space: normal; text-align: left; }
.op-sel + .op-ask, .op-subs + .op-ask { display: inline-flex; }
/* while diving: drop the expensive per-node glow filters, they are scaled 5x */
.dive-stage.diving .orbit-svg *, .dive-stage.diving .orbit-svg { filter: none !important; }
.dive-stage.diving .orbit-stage { will-change: transform, opacity; }
.dive.on #zoeken { will-change: transform, opacity; }
/* equal columns in two-up sections */
#beat-b .duo { align-items: stretch; }
#beat-b .duo > .app { display: flex; flex-direction: column; gap: 12px; }
#beat-b .duo > .app > .panel { flex: 1 1 auto; }
#beat-b .duo > .app > .answer { flex: none; }
.graphwrap { align-items: stretch; }
/* one rhythm between all sections, and a soft hand-over between them */
.sec { padding-top: 112px; padding-bottom: 112px; }
.sec + .sec { padding-top: 0; }
.sec .rule { margin-bottom: 64px; }
.js .sec .kicker[data-r] { transition-delay: 60ms; }

#beat-b .panel { align-content: start; }
.op-ask { margin: 12px 0 4px; }
.dive.on #zoeken { padding: 104px var(--gutter) 24px; }
.dive.on #zoeken .demo-col { gap: 12px; }
.dive.on #zoeken { align-content: start; }
.dive.on #zoeken .demo-col { align-self: start; }
.dive.on #zoeken .kicker { align-self: end; }
.dive.on #zoeken h2 { align-self: start; }
@media (max-height: 880px) { .dive.on #zoeken .demo-col { transform: scale(0.86); transform-origin: 50% 0; } .dive.on #zoeken { padding-top: 96px; } }
/* keep the two "Hoe het werkt" windows the same height: the feed shows the four newest rows */
#live2 .rows .row:nth-child(n+5) { display: none; }

/* ---------- v4.4: smoother dive and ground ---------- */
body::before { will-change: transform; }
.dive-canvas { display: none; }
.dive.on .dive-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; opacity: 0; }
.dive.on .orbit-svg { will-change: transform, opacity; transform-origin: 50% 50%; }
.dive.on .dive-stage .orbit-stage { will-change: auto; }
.dive.on .dive-light { background: radial-gradient(closest-side, rgba(255,240,232,0.75), rgba(255,210,196,0.32) 40%, rgba(120,128,255,0.12) 64%, transparent); }

/* ---------- v4.4: affordances ---------- */
.cue { pointer-events: none; transition: opacity 300ms ease-out; }
.cue-ring { fill: none; stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; animation: cue 2.2s var(--out) infinite; }
.cue-ring.r2 { animation-delay: 1.1s; }
.cue-text { fill: #fff; font: 500 15px var(--f-read); letter-spacing: 0; paint-order: stroke; stroke: rgba(40,40,140,0.55); stroke-width: 4px; animation: cueText 2.2s ease-in-out infinite; }
@keyframes cue { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.2); } }
@keyframes cueText { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }
.js .orbit-stage .cue { opacity: 0; }
.orbit-stage.play:not(.cued):not(.zoomed) .cue { opacity: 1; transition-delay: 2200ms; }
.dept { cursor: pointer; }
.dept:hover .hub-ring { stroke-width: 2.6; }
.dept:hover .hub-halo { opacity: 0.45; }
.gap-tip .go { color: #3a40c8; font-weight: 500; font: 500 12px/1.3 var(--f-read); margin-top: 2px; }
.op-ask { display: flex !important; width: 100%; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 22px; margin: 14px 0 6px; white-space: normal; text-align: left; }
.op-ask small { display: block; font: 400 11px/1.3 var(--f-data); text-transform: uppercase; letter-spacing: 0.14em; color: rgba(58,64,200,0.75); margin-bottom: 3px; }
.op-ask .arr { flex: none; font-size: 18px; }
.orbit-panel .op-ask { animation: askIn 500ms var(--out) both, askNudge 1.6s ease-in-out 700ms 2; }
@keyframes askIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes askNudge { 0%, 100% { box-shadow: var(--primary-shadow); } 50% { box-shadow: var(--primary-shadow), 0 0 0 6px rgba(255,255,255,0.18); } }
.answer .capture { justify-self: start; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .cue-ring, .cue-text, .orbit-panel .op-ask { animation: none; } .cue-ring.r2 { display: none; } }

.cue-ring { stroke-width: 2; }
.orbit-cue { position: absolute; z-index: 4; transform: translate(26px, -50%); display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 12px; border-radius: 100px; border: 1px solid rgba(255,255,255,0.9); background: rgba(255,255,255,0.92); color: #3a40c8; font: 500 13px/1 var(--f-read); white-space: nowrap; cursor: pointer; box-shadow: var(--glass-lifted); opacity: 0; pointer-events: none; transition: opacity 300ms ease-out, transform 300ms var(--out); animation: cueBob 2.4s ease-in-out infinite; }
.orbit-cue .dot { width: 7px; height: 7px; border-radius: 50%; background: #3a40c8; box-shadow: 0 0 0 0 rgba(58,64,200,0.5); animation: lring 2s ease-out infinite; }
.orbit-stage.play:not(.cued):not(.zoomed) .orbit-cue { opacity: 1; pointer-events: auto; transition-delay: 2200ms; }
@keyframes cueBob { 0%, 100% { margin-left: 0; } 50% { margin-left: 5px; } }
.dive-stage.diving .orbit-cue { opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) { .orbit-cue, .orbit-cue .dot { animation: none; } }

/* v4.5: only the switch and the counter under the constellation */
.orbit-panel { min-height: 0; }
.orbit-panel .op-back { margin-top: 2px; }
.orbit-bar .data { color: var(--text-3); font: 400 11px/1 var(--f-data); letter-spacing: 0.18em; }

/* ---------- v5: language switch and EU flag ---------- */
.lang { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: 100px; background: rgba(255,255,255,0.08); border: 1px solid var(--border); flex: none; }
.lang a { position: relative; z-index: 1; padding: 6px 11px; border-radius: 100px; font: 500 12px/1 var(--f-data); letter-spacing: 0.08em; color: var(--text-2); text-align: center; transition: color 200ms ease-out; }
.lang a[aria-current="true"] { color: var(--indigo-deep); }
.lang a:hover:not([aria-current]) { color: var(--text); }
.lang-thumb { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 100px; background: #fff; box-shadow: 0 2px 8px rgba(20,20,80,0.18); transition: transform 260ms var(--inout); }
.lang[data-on="en"] .lang-thumb { transform: translateX(100%); }
.lang.going a { color: var(--text-2); }
.lang.going a.to { color: var(--indigo-deep); }
html.paper .lang { border-color: var(--ink-strong); background: rgba(25,26,34,0.05); }
html.paper .lang a[aria-current="true"], html.paper .lang.going a.to { color: #fff; }
html.paper .lang-thumb { background: #4a50e0; }
@media (max-width: 900px) { .nav-in { gap: 12px; padding-left: 20px; } }
@media (max-width: 420px) { .lang a { padding: 6px 8px; } .nav-in .btn-sm { padding: 9px 14px; } }
.foot-eu { display: inline-flex; align-items: center; gap: 11px; }
.eu-flag { flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,0.25); }
html[lang="en"] .reading blockquote::before { content: "— Remember"; }
@media (prefers-reduced-motion: reduce) { .lang-thumb { transition: none; } }
/* nav must stay readable over any content */
.nav-in { background: rgba(78,84,219,0.72); backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3); }
html.paper .nav-in { background: rgba(255,255,255,0.78); }
@media (max-width: 560px) {
  .nav { padding: 0 12px; }
  .nav-in { gap: 8px; padding: 6px 6px 6px 16px; }
  .brand b { font-size: 14px; letter-spacing: 0.28em; }
  .links .keep { font-size: 13px; }
  .nav-in .btn-sm { padding: 8px 12px; font-size: 13px; }
}
@media (max-width: 400px) { .links { display: none; } }
@media (max-width: 340px) { .brand b { letter-spacing: 0.18em; } .nav-in .btn-sm { padding: 8px 10px; } }

/* v6: a bigger constellation on desktop (phones unchanged) */
@media (min-width: 1101px) {
  .hero, .dive.on .hero { grid-template-columns: minmax(0, 4fr) minmax(0, 6.6fr); gap: 24px; max-width: 1480px; }
  .orbit-col { position: relative; }
  .orbit-stage { width: 112%; max-width: none; height: auto; max-height: calc(100svh - 96px); aspect-ratio: 1; margin: 0 -6%; justify-self: center; }
  .orbit-bar { position: absolute; left: 4%; right: 4%; bottom: 0; z-index: 5; }
  .orbit-panel { position: absolute; left: 4%; bottom: 52px; z-index: 5; }
  .dive.on .hero { padding-top: 84px; padding-bottom: 16px; }
}
@media (min-width: 1101px) {
  .orbit-stage { width: min(112%, calc(100svh - 96px)); max-height: none; margin: 0 auto; justify-self: center; }
}

/* v7: the lint scan in "Waar de gaten zitten" */
.gsvg { overflow: hidden; }
.gsweep { opacity: 0; transition: opacity 300ms ease-out; pointer-events: none; will-change: transform; }
.gsweep line { stroke: #ffd9c7; stroke-width: 1.5; filter: drop-shadow(0 0 6px rgba(255,217,199,0.9)); }
.gsvg.scanning .gsweep { opacity: 1; }
.gnode.hid, .gedge.hid { opacity: 0; pointer-events: none; }
.scanring { fill: none; stroke: #ffd9c7; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; pointer-events: none; }
.gnode.scanned .scanring { animation: gscan 700ms var(--out); }
@keyframes gscan { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }
.gnode.born .ring { animation: gborn 520ms var(--out) both; transform-box: fill-box; transform-origin: center; }
.gnode.born .glabel { animation: gfade 400ms ease-out 180ms both; }
.gnode.is-wanted .ring { animation: gborn 520ms var(--out) both, gspin 9s linear infinite 520ms; transform-box: fill-box; transform-origin: center; }
.gnode.is-wanted:not(.born) .ring { animation: gspin 9s linear infinite; }
@keyframes gborn { 0% { opacity: 0; transform: scale(0.4); } 60% { opacity: 1; transform: scale(1.25); } 100% { opacity: 1; transform: scale(1); } }
@keyframes gspin { to { transform: rotate(360deg); } }
@keyframes gfade { from { opacity: 0; } to { opacity: 1; } }
.gedge.draw { stroke-dasharray: 4 4; animation: gdraw 600ms var(--out) both; }
@keyframes gdraw { from { opacity: 0; stroke-dashoffset: 40; } to { opacity: 1; stroke-dashoffset: 0; } }
.ginfo h4 .gcount { display: inline-block; }
.ginfo .livedot.off { animation: none; background: var(--t-faint); }
.glog { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; font: 400 12.5px/1.45 var(--f-app); color: var(--t-muted); min-height: 150px; align-content: start; }
.glog .gl { padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); animation: arrive 200ms ease-out both; overflow-wrap: anywhere; }
.glog .gl.w { border-color: rgba(255,217,199,0.55); background: rgba(255,217,199,0.12); color: var(--t); }
.glog .gl.w em { font-style: normal; color: var(--acc); }
.glog .gl.ok { border-color: rgba(141,232,184,0.5); color: var(--t); }
.glog .mono { font-family: var(--f-data); font-size: 11.5px; }
.glog .dim { color: var(--t-faint); }
.ginfo .gagain, .ginfo #gback { justify-self: start; }
.ginfo #gwrite { justify-self: start; }
@media (prefers-reduced-motion: reduce) { .gnode.is-wanted .ring, .gnode.born .ring, .gnode.scanned .scanring, .gedge.draw, .glog .gl { animation: none; } }
.glog { color: rgba(255,255,255,0.88); }
.glog .gl { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.18); }
.glog .lc { color: rgba(255,255,255,0.62); }
.gsvg .gnode, .gsvg .gnode:focus, .gsvg .gnode:focus-visible { outline: none !important; }
.gsvg .gnode:focus-visible .ring { stroke: #fff; stroke-width: 3; }

/* v8: FAQ, CTA sub-line, legal pages */
.faq { display: grid; gap: 10px; margin-top: 40px; max-width: 860px; }
.faq-i { border-radius: 18px; padding: 0; overflow: hidden; }
.faq-i summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 24px; font: 500 1.125rem/1.35 var(--f-read); }
.faq-i summary::-webkit-details-marker { display: none; }
.faq-i summary:hover { background: rgba(255,255,255,0.05); }
.faq-i summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 18px; }
.faq-plus { position: relative; flex: none; width: 14px; height: 14px; }
.faq-plus::before, .faq-plus::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 2px; background: var(--accent); transition: transform 250ms var(--out); }
.faq-plus::after { transform: rotate(90deg); }
.faq-i[open] .faq-plus::after { transform: rotate(0deg); }
.faq-i p { margin: 0; padding: 0 24px 22px; color: var(--text-2); font: 300 1.0625rem/1.6 var(--f-read); max-width: 70ch; }
.faq-i[open] p { animation: arrive 260ms ease-out both; }
.cta-sub { margin-top: 18px !important; font: 400 0.875rem/1.6 var(--f-read) !important; color: var(--text-2); }
.cta-sub a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,0.4); }
.foot-l a:hover { color: var(--text); }
.legal { max-width: 820px; margin: 0 auto; padding: 140px var(--gutter) 80px; }
.legal .post { padding: 44px 52px 48px; }
.legal h1 { font: 500 clamp(2rem, 3.4vw, 2.75rem)/1.1 var(--f-read); letter-spacing: -0.02em; }
.legal .upd { margin-top: 12px; font: 400 12px/1.4 var(--f-data); color: var(--text-3); }
.legal .todo { background: rgba(178,106,0,0.12); border-radius: 4px; padding: 0 4px; color: #8a5200; font-weight: 500; }
@media (max-width: 700px) { .legal .post { padding: 28px 22px; } .faq-i summary { padding: 18px; } .faq-i p { padding: 0 18px 18px; } }

/* v8 a11y: contrast and heading levels */
:root { --text-2: rgba(255,255,255,0.88); --text-3: rgba(255,255,255,0.8); }
html.paper { --text-3: #4c4f5a; }
.seg button, .lang a { color: #fff; }
.seg button[aria-pressed="true"], .lang a[aria-current="true"] { color: var(--indigo-deep); }
html.paper .lang a { color: #191a22; }
html.paper .lang a[aria-current="true"] { color: #fff; }
.pv h3.h4 { margin: 0; font: 500 clamp(24px, 3vw, 32px)/1.15 var(--f-app); letter-spacing: -0.02em; }
.ginfo h3.h4 { margin: 0; font: 500 20px/1.2 var(--f-app); letter-spacing: -0.02em; }
.orbit-bar .data, .mode-row .data, .feedcap .meta { color: rgba(255,255,255,0.9) !important; }
html.paper { --success: #16703c; }
.chips button { color: #fff; } .chips button[aria-pressed="true"] { color: var(--indigo-deep); }

/* ===== perf 1: a static ground on its own layer (no scroll-driven root variable) ===== */
body::before { transform: translateZ(0); will-change: auto; contain: strict; }

/* ===== perf 2: no live backdrop blur on panels. The ground behind them is a soft gradient,
   so a slightly denser tint looks the same and costs nothing while scrolling. ===== */
.glass, .gtile, .gpill, .glass-pill, .btn-dark, .in-link, .sbtn, .app, .app .glass, .app .gtile, .app .gpill, .strip, .search, .finder, .chips, .seg, .lang, .ptabs, .copybtn, .op-back {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.glass, .glass-pill { background: rgba(255,255,255,0.12); }
.app { background: rgba(255,255,255,0.09); }
.app .glass { background: rgba(255,255,255,0.12); }
html.paper .glass { background: rgba(255,255,255,0.62); }
.app.paper .glass { background: rgba(255,255,255,0.6); }
/* the fixed nav keeps a light blur: it is small and it sits over moving content */
.nav-in { backdrop-filter: blur(12px) saturate(1.2) !important; -webkit-backdrop-filter: blur(12px) saturate(1.2) !important; background: rgba(78,84,219,0.78); }
html.paper .nav-in { background: rgba(255,255,255,0.82); }
.overlay { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(20,20,80,0.45); }

/* ===== v9: footer in columns ===== */
.sitefoot { padding: 24px var(--gutter) 28px; }
.sf-in { max-width: var(--col); margin: 0 auto; border-radius: 24px; padding: 36px 40px 22px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 28px 32px; }
.sf-brand { display: grid; gap: 12px; align-content: start; justify-items: start; }
.sf-brand p { margin: 0; color: var(--text-2); font: 400 0.9375rem/1.4 var(--f-read); }
.sf-col { display: grid; gap: 10px; align-content: start; }
.sf-col h2 { margin: 0 0 4px; font-size: 11px; }
.sf-col a { color: var(--text-2); font: 400 0.9375rem/1.35 var(--f-read); width: fit-content; transition: color 150ms ease-out; }
.sf-col a:hover { color: var(--text); }
.sf-col .sf-cta { color: var(--text); font-weight: 500; }
.sf-bottom { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font: 400 12px/1.4 var(--f-data); color: var(--text-2); letter-spacing: 0.04em; }
html.paper .sf-bottom { border-top-color: var(--ink); }
@media (max-width: 900px) { .sf-in { grid-template-columns: 1fr 1fr; padding: 28px 24px 18px; } .sf-brand { grid-column: 1 / -1; } }
@media (max-width: 420px) { .sf-in { grid-template-columns: 1fr; } }
.faq-paper { margin-top: 8px; }
html.paper .faq-i { background: rgba(255,255,255,0.55); border: 1px solid var(--ink); }
html.paper .faq-i summary:hover { background: rgba(255,255,255,0.4); }
html.paper .faq-i p { color: var(--text-2); }
html.paper .faq-plus::before, html.paper .faq-plus::after { background: #4a50e0; }

/* ===== perf 3: the constellation SVG stays static; everything that moves is canvas or a composited layer ===== */
.orbit-fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 2; }
.orbit-svg { z-index: 1; }
.orbit-svg, .orbit-canvas, .orbit-fx { contain: strict; }
.dept .sub, .dept .ln, .dept .ln.v, .hub-ring, .gsweep line, .nodes, .nodes .n.v { filter: none !important; }
.dept .sub { fill: #fff; }
.hub-ring { stroke-width: 2; }
.orbit-stage .leaf.gap .gr, .gr { animation: none !important; }
.gnode.is-wanted .ring, .gnode.is-wanted:not(.born) .ring { animation: none; }
.gnode.is-wanted.born .ring { animation: gborn 520ms var(--out) both; }
.orbit-cue { animation: none; }
.livedot { animation-iteration-count: 6; }
.dive-stage.diving .orbit-cue { display: none; }

/* ===== perf 4: reveals move and fade only (no blur on large panels) ===== */
.js [data-r] { filter: none !important; }
.js [data-r].in { transition: opacity 550ms var(--out), transform 550ms var(--out); transition-delay: var(--d, 0ms); }
.dive-canvas { image-rendering: auto; }
.orbit-canvas { z-index: 2; pointer-events: none; }

/* ===== perf 5: no live blur behind the fixed nav either; a dense tint reads the same ===== */
.nav-in { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(82,88,222,0.94); }
html.paper .nav-in { background: rgba(255,255,255,0.95); }
/* the bloom is a small soft texture scaled up, not a 150vmax layer */
.dive.on .dive-light { width: 60vmax; height: 60vmax; margin: -30vmax 0 0 -30vmax; will-change: transform, opacity; }
html:not(.paper) .sf-col a, html:not(.paper) .sf-brand p, html:not(.paper) .sf-bottom { color: #fff; }
html:not(.paper) .sf-col a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ===== v10: "In their own AI" — replica Claude / ChatGPT (dark) ===== */
.llm-wrap { margin-top: 40px; display: grid; gap: 14px; }
.llm-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.llm-qs { display: flex; gap: 8px; flex-wrap: wrap; }
.llm-qs .qchip { padding: 8px 14px; border-radius: 100px; border: 1px solid var(--border); background: rgba(255,255,255,0.08); color: #fff; font: 400 13px/1.2 var(--f-read); cursor: pointer; transition: background-color 150ms ease-out, border-color 150ms ease-out; }
.llm-qs .qchip:hover { background: rgba(255,255,255,0.16); }
.llm-qs .qchip[aria-pressed="true"] { background: #fff; color: var(--indigo-deep); border-color: #fff; }
.llm-frame { border-radius: 16px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(10,10,60,0.7), 0 0 0 1px rgba(255,255,255,0.18); height: 560px; contain: layout paint; }
.llm-note { margin: 0; font: 400 11px/1.4 var(--f-data); letter-spacing: 0.06em; color: rgba(255,255,255,0.8); }
.llm-app { height: 100%; display: grid; grid-template-columns: 260px minmax(0, 1fr); font-family: ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif; letter-spacing: 0; }
.llm-app .ic { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; flex: none; }
.llm-app svg { width: 18px; height: 18px; flex: none; }
.llm-app .sp { flex: 1; }
.llm-thread { display: none; }
.llm-app.chatting .llm-thread { display: flex; flex-direction: column; gap: 18px; overflow: hidden; padding: 28px 0 8px; width: min(680px, 100%); margin: 0 auto; flex: 1 1 auto; justify-content: flex-end; }
.llm-app.chatting .cl-hello, .llm-app.chatting .gp-hello { display: none; }
.msg p { margin: 0; font-size: 15px; line-height: 1.6; }
.msg.user { align-self: flex-end; max-width: 80%; border-radius: 18px; padding: 10px 16px; animation: arrive 200ms ease-out both; }
.msg.bot { display: grid; gap: 10px; animation: arrive 200ms ease-out both; }
.tool { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 6px 12px 6px 6px; border-radius: 10px; font-size: 13px; }
.tool em { font-style: normal; opacity: 0.6; }
.tool.running em { animation: pulse 1.1s ease-in-out infinite; }
.cn-ico { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: #4e54db; flex: none; }
.cn-ico svg { width: 15px; height: 15px; }
.ans { display: grid; gap: 12px; }
.cn-card { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; animation: arrive 220ms ease-out both; max-width: 520px; }
.cn-card b { display: block; font-size: 14px; font-weight: 600; }
.cn-card .st { display: block; font-size: 12px; margin-top: 2px; }
.cn-card .st.ok { color: #6fdc9f; } .cn-card .st.w { color: #f0b860; }
.cn-card dl { margin: 8px 0 0; display: grid; gap: 3px; font-size: 12.5px; }
.cn-card dl div { display: grid; grid-template-columns: 92px 1fr; gap: 8px; }
.cn-card dt { opacity: 0.6; } .cn-card dd { margin: 0; }

/* Claude */
.cl { background: #262624; color: #e8e6e3; }
.cl-side { background: #1f1e1d; border-right: 1px solid #2f2e2c; display: flex; flex-direction: column; padding: 14px 10px; gap: 6px; min-width: 0; overflow: hidden; }
.cl-top { display: flex; align-items: center; gap: 2px; padding: 2px 6px 8px; color: #b7b4ad; }
.cl-word { flex: 1; font: 500 22px/1 Georgia, "Times New Roman", serif; color: #f1efe9; letter-spacing: -0.01em; }
.cl-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 10px; background: #2a2927; font-size: 14px; color: #a9a6a0; }
.cl-tabs span { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px; border-radius: 8px; }
.cl-tabs span.on { background: #3a3936; color: #f1efe9; }
.cl-tabs svg { width: 15px; height: 15px; }
.cl-new { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #2f2e2b; font-size: 14px; margin-top: 4px; }
.cl-nav, .cl-list { display: grid; gap: 1px; }
.cl-nav span, .cl-list span { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; font-size: 14px; color: #d8d5cf; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-sec { margin: 14px 10px 4px; font-size: 12.5px; color: #8f8c86; }
.cl-list span i { width: 5px; height: 5px; border-radius: 50%; border: 1px solid #6f6c66; flex: none; }
.cl-user { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 8px 6px 0; font-size: 14px; border-top: 1px solid #2f2e2c; }
.cl-user .pl { color: #8f8c86; }
.llm-app .av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; background: #3d3c39; color: #e8e6e3; flex: none; }
.cl-main { display: flex; flex-direction: column; justify-content: center; padding: 0 32px 28px; min-width: 0; }
.cl-hello { display: flex; align-items: center; justify-content: center; gap: 14px; font: 400 40px/1.1 Georgia, "Times New Roman", serif; color: #f1efe9; margin-bottom: 28px; letter-spacing: -0.01em; }
.cl-star { width: 40px !important; height: 40px !important; }
.cl-comp { width: min(680px, 100%); margin: 0 auto; border-radius: 18px; background: #30302e; border: 1px solid #3c3b38; padding: 14px 14px 10px; display: grid; gap: 14px; }
.cl-in { min-height: 24px; font-size: 15.5px; color: #f1efe9; }
.cl-in .ph { color: #8f8c86; }
.cl-row { display: flex; align-items: center; gap: 6px; color: #b7b4ad; font-size: 14px; }
.cl-mode { display: inline-flex; padding: 3px; border-radius: 10px; background: #262624; }
.cl-mode b, .cl-mode span { padding: 4px 12px; border-radius: 8px; font-weight: 400; }
.cl-mode b { background: #3d3c39; color: #f1efe9; }
.cl-model em { font-style: normal; color: #8f8c86; margin: 0 8px 0 4px; }
.cl .send { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #c96442; color: #fff; }
.cl .send svg { width: 16px; height: 16px; }
.cl.chatting .cl-main { justify-content: flex-end; }
.cl .msg.user { background: #141413; color: #f1efe9; }
.cl .msg.bot p { color: #e8e6e3; font-family: Georgia, "Times New Roman", serif; font-size: 16px; }
.cl .tool { background: #30302e; border: 1px solid #3c3b38; color: #d8d5cf; }
.cl .cn-card { background: #30302e; border: 1px solid #3c3b38; }

/* ChatGPT */
.gp { background: #000; color: #ececec; }
.gp-side { background: #000; border-right: 1px solid #1f1f1f; display: flex; flex-direction: column; padding: 14px 10px; gap: 4px; min-width: 0; overflow: hidden; }
.gp-top { display: flex; align-items: center; gap: 2px; padding: 0 4px 10px 10px; color: #b4b4b4; }
.gp-word { font-size: 19px; font-weight: 600; color: #fff; }
.gp-new { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; background: #1f1f1f; font-size: 14px; }
.gp-nav, .gp-list { display: grid; gap: 1px; }
.gp-nav span, .gp-list span { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; font-size: 14px; color: #ececec; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-sec { margin: 14px 10px 4px; font-size: 13px; color: #8e8e8e; }
.gp-user { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px 6px 0; border-top: 1px solid #1f1f1f; font-size: 14px; }
.gp-user small { display: block; color: #8e8e8e; font-size: 12px; }
.gp-user .av { background: #2f2f2f; }
.gp-main { display: flex; flex-direction: column; justify-content: center; padding: 0 32px 28px; position: relative; min-width: 0; }
.gp-head { position: absolute; top: 12px; left: 0; right: 0; display: flex; justify-content: center; }
.gp-pill { display: inline-flex; padding: 3px; border-radius: 100px; background: #1a1a1a; font-size: 14px; }
.gp-pill b, .gp-pill span { padding: 6px 18px; border-radius: 100px; font-weight: 400; }
.gp-pill b { background: #2f2f2f; color: #fff; } .gp-pill span { color: #6aa6ff; }
.gp-hello { text-align: center; font-size: 28px; font-weight: 400; color: #fff; margin-bottom: 26px; }
.gp-comp { width: min(700px, 100%); margin: 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border-radius: 28px; background: #303030; color: #cfcfcf; }
.gp-in { flex: 1; min-width: 0; font-size: 15.5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-in .ph { color: #a5a5a5; }
.gp-think { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; padding: 0 6px; }
.gp-voice { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #3b6ff0; color: #fff; }
.gp.chatting .gp-main { justify-content: flex-end; padding-top: 56px; }
.gp .msg.user { background: #303030; color: #fff; }
.gp .tool { background: #1a1a1a; border: 1px solid #2a2a2a; color: #cfcfcf; }
.gp .cn-card { background: #171717; border: 1px solid #2a2a2a; }

@media (max-width: 900px) {
  .llm-app { grid-template-columns: minmax(0, 1fr); } .cl-side, .gp-side { display: none; }
  .llm-frame { height: 520px; } .cl-main, .gp-main { padding: 0 14px 14px; }
  .cl-hello { font-size: 28px; } .cl-star { width: 30px !important; height: 30px !important; } .gp-hello { font-size: 22px; }
  .cl-model, .gp-think { display: none; }
}
@media (prefers-reduced-motion: reduce) { .msg, .cn-card, .tool.running em { animation: none !important; } }
.llm-bar .seg button[aria-selected="true"] { color: var(--indigo-deep); }
.llm-app .tool { font-family: inherit; font-size: 13px; }
.llm-app .tool span { font-weight: 600; }
.llm-app .tool em { font-family: inherit; }

/* ===================================================================
   v11: other laptops (short screens) and phones
   =================================================================== */
/* Windows renders thin weights lighter: one step heavier there */
html.win .sub, html.win .lead, html.win .tcard p, html.win .ctabox p, html.win .faq-i p { font-weight: 400; }

/* short laptop screens: the hero always fits, with switch and counter in view */
@media (min-width: 1101px) {
  .hero, .dive.on .hero { min-height: 0; height: auto; }
  .hero { min-height: 100svh; padding-top: clamp(80px, 11vh, 120px); padding-bottom: clamp(24px, 5vh, 96px); }
  .orbit-stage { width: min(112%, calc(100svh - 140px)); }
  .llm-frame { height: clamp(440px, calc(100svh - 230px), 560px); }
}
@media (min-width: 1101px) and (max-height: 820px) {
  h1.display { font-size: clamp(2.1rem, 6.2vh, 3.25rem); }
  .copy { gap: 18px; }
  .dive.on .hero { padding-top: 84px; padding-bottom: 12px; }
  .dive.on #zoeken { padding-top: 88px; }
  .dive.on #zoeken h2 { font-size: clamp(1.8rem, 5vh, 2.75rem); }
  .sec { padding-top: 88px; padding-bottom: 88px; }
}

/* touch chips under the constellation (phones + tablets) */
.touch-chips { display: none; }
@media (max-width: 1100px) {
  .orbit-panel { position: static !important; }
  .touch-chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; margin: 6px -2px 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .touch-chips::-webkit-scrollbar { display: none; }
  .tchip { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 100px; border: 1px solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.12); color: #fff; font: 500 14px/1 var(--f-read); white-space: nowrap; cursor: pointer; }
  .tchip i { width: 9px; height: 9px; border-radius: 50%; }
  .tchip.gap { border-style: dashed; border-color: #ffd9c7; color: #ffe6da; }
  .tchip:active { background: rgba(255,255,255,0.22); }
  .orbit-panel .op-back { min-height: 40px; }
  .orbit-cue { display: none !important; }
  .orbit-bar { position: static !important; }
}

/* the menu button and sheet */
.menu-btn { display: none; }
@media (max-width: 900px) {
  .links { display: none !important; }
  .menu-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-left: 2px; border-radius: 100px; border: 1px solid var(--border); background: rgba(255,255,255,0.1); color: #fff; cursor: pointer; flex: none; }
  html.paper .menu-btn { color: #191a22; border-color: var(--ink-strong); background: rgba(25,26,34,0.04); }
  .mb-lines { position: relative; width: 18px; height: 12px; display: block; }
  .mb-lines i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform 200ms var(--out), top 200ms var(--out); }
  .mb-lines i:first-child { top: 1px; } .mb-lines i:last-child { top: 9px; }
  .menu-open .mb-lines i:first-child { top: 5px; transform: rotate(45deg); }
  .menu-open .mb-lines i:last-child { top: 5px; transform: rotate(-45deg); }
  .nav-in .btn-sm { display: none; }
  .mmenu { position: fixed; z-index: 45; left: 12px; right: 12px; top: 84px; border-radius: 24px; padding: 14px; background: rgba(66,72,214,0.98); box-shadow: 0 30px 70px rgba(20,20,80,0.45), inset 0 1px 0 rgba(255,255,255,0.35); border: 1px solid rgba(255,255,255,0.3); display: grid; gap: 10px; animation: arrive 180ms ease-out both; max-height: calc(100svh - 100px); overflow: auto; }
  .mmenu[hidden] { display: none; }
  html.paper .mmenu { background: rgba(255,255,255,0.98); border-color: var(--ink); }
  .mmenu nav { display: grid; }
  .mmenu nav a { display: flex; align-items: center; min-height: 52px; padding: 0 12px; border-radius: 14px; font: 500 1.125rem/1.2 var(--f-read); color: #fff; border-bottom: 1px solid rgba(255,255,255,0.14); }
  html.paper .mmenu nav a { color: #191a22; border-bottom-color: var(--ink); }
  .mmenu nav a:last-child { border-bottom: 0; }
  .mmenu nav a:active { background: rgba(255,255,255,0.12); }
  .mm-cta { justify-content: center; width: 100%; min-height: 52px; }
}

/* phones: calmer rhythm, readable demos */
@media (max-width: 640px) {
  .sec { padding-top: 64px; padding-bottom: 64px; }
  .sec .rule { margin-bottom: 36px; }
  .lead { font-size: 1.0625rem; }
  .hero { padding-top: 104px; padding-bottom: 40px; gap: 28px; }
  /* live feed rows: the argument gets its own full line */
  .row { grid-template-columns: 44px minmax(0, 1fr); }
  .row .what { grid-column: 1 / -1; white-space: normal; overflow-wrap: anywhere; }
  .row .tool { justify-self: start; }
  /* the knowledge graph scrolls sideways at a readable size */
  .graphwrap > .glass { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .gsvg { min-width: 680px; }
  .legend { min-width: 0; }
  /* the AI example: one row of questions you can swipe, a frame that fits the phone */
  .llm-qs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
  .llm-qs::-webkit-scrollbar { display: none; }
  .llm-qs .qchip { flex: none; min-height: 40px; }
  .llm-frame { height: min(520px, calc(100svh - 120px)); }
  .cl-hello, .gp-hello { margin-bottom: 18px; }
  .llm-app.chatting .llm-thread { padding-top: 12px; }
  .cn-card dl div { grid-template-columns: 82px 1fr; }
  .qchip, .seg button, .who-seg button, .chips button { min-height: 40px; }
  .team-grid { gap: 12px; }
}
.orbit-col, .orbit-panel, .orbit-bar, .llm-wrap, .llm-bar { min-width: 0; max-width: 100%; }
.orbit-col { grid-template-columns: minmax(0, 1fr); }
.dive-stage.past .orbit-cue { display: none !important; }
@media (max-width: 1100px) { .touch-chips { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 40px; } }
@media (max-width: 640px) {
  .graphwrap > .glass { overflow-x: visible; }
  .gsvg { min-width: 0; }
  .gsvg .glabel { font-size: 21px; display: none; }
  .gsvg .gnode[data-n="idx"] .glabel, .gsvg .gnode.is-wanted .glabel, .gsvg.has-sel .gnode:not(.dim) .glabel { display: inline; }
  .gsvg .ring { stroke-width: 3.5; }
}
@media (max-width: 640px) { .graphwrap > .glass { overflow: hidden; padding: 8px 26px 0 !important; } .gsvg { overflow: visible; } }

/* ===== v12: the AI example — explanation and questions stay in view next to the window ===== */
.llm-grid { display: grid; gap: 28px; margin-top: 8px; }
.llm-intro { display: grid; gap: 0; align-content: start; min-width: 0; }
.llm-intro .llm-wrap { margin-top: 28px; }
.llm-stage { display: grid; gap: 12px; min-width: 0; }
.llm-frame { height: clamp(380px, calc(100svh - 150px), 600px); }
@media (min-width: 901px) {
  .llm-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px; align-items: start; }
  .llm-intro { position: sticky; top: 104px; }
  .llm-intro h2.h1 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
  .llm-lead { font-size: 1.0625rem !important; margin-top: 14px !important; }
  .llm-intro .llm-wrap { margin-top: 22px; }
  .llm-bar { flex-direction: column; align-items: stretch; gap: 14px; }
  .llm-bar .seg { align-self: flex-start; }
  .llm-qs { flex-direction: column; flex-wrap: nowrap; gap: 8px; }
  .llm-qs .qchip { text-align: left; border-radius: 14px; padding: 11px 14px; font-size: 14px; line-height: 1.3; }
  .llm-stage { position: sticky; top: 96px; }
  .llm-app { grid-template-columns: 210px minmax(0, 1fr); }
}
@media (min-width: 901px) and (max-width: 1250px) { .llm-app { grid-template-columns: minmax(0, 1fr); } .cl-side, .gp-side { display: none; } }
@media (min-width: 901px) and (max-height: 700px) {
  .llm-intro { top: 88px; } .llm-stage { top: 84px; }
  .llm-frame { height: calc(100svh - 120px); }
  .llm-lead { display: none; }
  .llm-intro h2.h1 { font-size: 1.7rem; }
  .llm-qs .qchip { padding: 8px 12px; font-size: 13px; }
}
@media (max-width: 900px) {
  .llm-qs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .llm-qs::-webkit-scrollbar { display: none; }
  .llm-qs .qchip { flex: none; min-height: 40px; }
  .llm-frame { height: clamp(400px, calc(100svh - 140px), 540px); }
}
@media (min-width: 901px) { .llm-intro, .llm-stage { position: static; } .llm-grid { align-items: stretch; } .llm-intro { align-content: center; } }
@media (min-width: 901px) { .llm-grid { align-items: start; } .llm-intro, .llm-stage { align-content: start; } }
.llm-app.chatting .llm-thread { min-height: 0; }
.cl-main, .gp-main { min-height: 0; overflow: hidden; }
.cl-comp, .gp-comp { flex: none; }
@media (min-width: 901px) and (max-height: 700px) { .llm-frame { height: calc(100svh - 132px); } .cl-comp { gap: 8px; padding: 10px 12px 8px; } .llm-app.chatting .llm-thread { gap: 12px; padding-top: 12px; } .cn-card { padding: 10px 12px; } }
@media (min-width: 901px) and (max-height: 760px) {
  .llm-app.chatting .llm-thread { justify-content: flex-start; padding-top: 14px; gap: 10px; }
  .msg.user { padding: 7px 14px; }
  .msg p { font-size: 14px; line-height: 1.45; }
  .cl .msg.bot p { font-size: 15px; }
  .cn-card dl { margin-top: 4px; gap: 1px; }
  .cl-hello, .gp-hello { margin-bottom: 14px; }
}
/* the AI example rests on screen for a while: heading, questions and the whole window stay in view together */
@media (min-width: 901px) {
  #llm .llm-grid { position: sticky; top: 92px; }
  #llm .llm-grid::after { content: none; }
  #llm { padding-bottom: calc(112px + 30vh); }
}
@media (min-width: 901px) {
  #llm { padding-bottom: 112px; }
  #llm::after { content: ""; display: block; height: 32vh; }
}

/* v13: "Waarom zoeken niet helpt" on the same column as every other chapter */
.dive.on #zoeken { max-width: calc(var(--col) + var(--gutter) * 2) !important; }
/* v13: AI example mirrored — the window left, the text right (zigzag with the section above) */
@media (min-width: 901px) {
  .llm-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
  .llm-stage { grid-column: 1; grid-row: 1; }
  .llm-intro { grid-column: 2; grid-row: 1; }
}

/* ============ v104: value-proposition structure (why → map / keep / use) ============ */
/* why not just an LLM: three reasons under the headline */
.why { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; max-width: 44ch; }
.why li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; align-items: start; color: var(--text-2); font: 300 1.0625rem/1.5 var(--f-read); }
.why li b { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.35); display: grid; place-items: center; font: 400 12px/1 var(--f-data); color: #fff; margin-top: -2px; }
.why li strong { color: var(--text); font-weight: 500; }
.dive.on #zoeken { grid-template-rows: auto auto 1fr; }
.dive.on #zoeken .why { grid-column: 1; grid-row: 3; align-self: start; }
.dive.on #zoeken .demo-col { grid-row: 1 / span 3; }
@media (max-height: 820px) { .dive.on #zoeken .why { gap: 8px; margin-top: 18px; } .dive.on #zoeken .why li { font-size: 0.9375rem; } }

/* how it works: one rhythm for the three steps */
.steps-nav { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.steps-nav a { display: block; height: 100%; padding: 24px 26px 26px; border-radius: 20px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.18); color: inherit; text-decoration: none; transition: background-color 200ms ease, transform 200ms var(--out, ease-out); }
.steps-nav a:hover { background: rgba(255,255,255,0.13); transform: translateY(-2px); }
.steps-nav .sn { font: 400 12px/1.2 var(--f-data); letter-spacing: 0.3em; text-transform: uppercase; color: var(--acc); }
.steps-nav b { display: block; font: 500 1.5rem/1.15 var(--f-read); letter-spacing: -0.01em; margin-top: 14px; }
.steps-nav .t { display: block; margin-top: 8px; color: var(--text-2); font: 300 1rem/1.45 var(--f-read); }
.step-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.step-n { width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--indigo-deep, #2D3282); display: grid; place-items: center; font: 500 15px/1 var(--f-data); flex: none; }
.step-k { font: 400 12px/1.2 var(--f-data); letter-spacing: 0.3em; text-transform: uppercase; color: var(--acc); }
#werkt + .sec { padding-top: 0; }
#beat-b, #gaten, #llm { scroll-margin-top: 96px; }
#rechten { padding-top: 0; }
@media (max-width: 760px) { .steps-nav { grid-template-columns: minmax(0, 1fr); gap: 10px; } .steps-nav a { padding: 18px 20px; } .steps-nav b { margin-top: 8px; font-size: 1.25rem; } }

/* keep: a system discrepancy, surfaced */
.signal { display: flex; gap: 14px; align-items: flex-start; margin-top: 32px; padding: 16px 20px; border-radius: 16px; max-width: 760px; border: 1px solid rgba(255,196,120,0.55); background: rgba(255,170,80,0.13); }
.signal .sig-ic { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #f0b860; color: #2a1a00; display: grid; place-items: center; font: 600 16px/1 var(--f-read); }
.signal b { display: block; font: 400 12px/1.2 var(--f-data); letter-spacing: 0.22em; text-transform: uppercase; color: #ffd8a3; }
.signal span { display: block; margin-top: 6px; color: var(--text); font: 400 1rem/1.5 var(--f-read); }

/* Gemini replica (illustration only) */
.gm { background: #131314; color: #e3e3e3; }
.gm-side { background: #1e1f20; display: flex; flex-direction: column; padding: 14px 10px; gap: 4px; min-width: 0; overflow: hidden; }
.gm-top { display: flex; align-items: center; gap: 2px; padding: 0 4px 12px; color: #c4c7c5; }
.gm-new { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 100px; background: #282a2c; font-size: 14px; color: #c4c7c5; width: fit-content; margin-left: 4px; }
.gm-nav, .gm-list { display: grid; gap: 1px; margin-top: 10px; }
.gm-nav span, .gm-list span { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 100px; font-size: 14px; color: #e3e3e3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-sec { margin: 16px 12px 2px; font-size: 13px; color: #9aa0a6; }
.gm-user { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px 8px 0; font-size: 14px; color: #c4c7c5; }
.gm-main { display: flex; flex-direction: column; justify-content: center; padding: 0 32px 24px; position: relative; min-width: 0; }
.gm-head { position: absolute; top: 12px; left: 22px; right: 18px; display: flex; align-items: center; gap: 10px; }
.gm-word { font-size: 20px; color: #e3e3e3; }
.gm-model { font-size: 13px; color: #c4c7c5; background: #282a2c; padding: 4px 10px; border-radius: 100px; }
.gm-head .av { background: #5e5fd8; color: #fff; }
.gm-hello { text-align: center; font-size: 32px; font-weight: 500; margin-bottom: 26px; background: linear-gradient(90deg, #4285f4, #9b72cb 45%, #d96570); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gm-spark { width: 22px !important; height: 22px !important; }
.gm-comp { width: min(700px, 100%); margin: 0 auto; border-radius: 28px; background: #1e1f20; border: 1px solid #3c4043; padding: 14px 16px 10px 20px; }
.gm-in { min-height: 26px; font-size: 15.5px; color: #e3e3e3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-in .ph { color: #9aa0a6; }
.gm-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: #c4c7c5; }
.gm-tools { font-size: 14px; padding: 4px 10px; border-radius: 100px; }
.gm.chatting .gm-main { justify-content: flex-end; padding-top: 56px; }
.llm-app.chatting .gm-hello { display: none; }
.gm .msg.user { background: #333537; color: #e3e3e3; border-radius: 22px 6px 22px 22px; }
.gm .tool { background: #1e1f20; border: 1px solid #3c4043; color: #c4c7c5; }
.gm .cn-card { background: #1e1f20; border: 1px solid #3c4043; }
@media (max-width: 760px) { .gm-side { display: none; } .gm-main { padding: 0 14px 14px; } .gm-hello { font-size: 24px; } }

/* ============ v105: chapters, tabs, next ============ */
/* numbered menu that follows the page */
.links a i { font: 400 10px/1 var(--f-data); font-style: normal; letter-spacing: 0.08em; opacity: 0.55; margin-right: 6px; vertical-align: 1px; }
.links a { position: relative; }
.links a.on { color: var(--text); }
.links a.on i { opacity: 1; color: var(--acc); }
.links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 2px; border-radius: 2px; background: var(--acc); transform: scaleX(0); transition: transform 250ms var(--out, ease-out); }
.links a.on::after { transform: scaleX(1); }
.nav-in { position: relative; }
.nav-in::before { content: ""; position: absolute; left: 22px; right: 22px; bottom: 0; height: 2px; border-radius: 2px; background: rgba(255,255,255,0.75); transform: scaleX(var(--p, 0)); transform-origin: left; opacity: 0.55; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .links a::after { transition: none; } }

/* chapter number on every kicker */
.kicker .ch { display: inline-block; margin-right: 12px; padding: 3px 7px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.35); color: #fff; letter-spacing: 0.08em; }

/* how it works: three tabs, one demo at a time */
.tabs { margin-top: 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tabs [role="tab"] { position: relative; overflow: hidden; text-align: left; font: inherit; color: inherit; cursor: pointer; padding: 22px 24px 24px; border-radius: 20px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.18); transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--out, ease-out); }
.tabs [role="tab"]:hover { background: rgba(255,255,255,0.13); }
.tabs [role="tab"]:active { transform: scale(0.98); }
.tabs [role="tab"] .sn { font: 400 12px/1.2 var(--f-data); letter-spacing: 0.3em; text-transform: uppercase; color: var(--acc); }
.tabs [role="tab"] b { display: block; font: 500 1.5rem/1.15 var(--f-read); letter-spacing: -0.01em; margin-top: 12px; }
.tabs [role="tab"] .t { display: block; margin-top: 6px; color: var(--text-2); font: 300 1rem/1.45 var(--f-read); }
.tabs [role="tab"][aria-selected="true"] { background: #fff; color: #1F2160; border-color: #fff; }
.tabs [role="tab"][aria-selected="true"] .sn { color: #4E54DB; }
.tabs [role="tab"][aria-selected="true"] .t { color: #4a4c6e; }
.tabs .bar { position: absolute; left: 24px; right: 24px; bottom: 12px; height: 3px; border-radius: 3px; background: #4E54DB; transform: scaleX(0); transform-origin: left; }
.tabs [role="tab"][aria-selected="true"] .bar { transform: scaleX(1); transition: transform 500ms var(--out, ease-out); }
.tabs [role="tab"]:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.tab-panel { margin-top: 56px; }
.tab-panel > h2.h1 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); max-width: 26ch; }
.tab-panel[hidden] { display: none; }
.tab-panel:not([hidden]) { animation: panelIn 380ms var(--out, ease-out) both; }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tab-panel:not([hidden]) { animation: none; } }
@media (max-width: 760px) { .tabs { grid-template-columns: minmax(0, 1fr); gap: 8px; } .tabs [role="tab"] { padding: 14px 18px 18px; } .tabs [role="tab"] b { margin-top: 6px; font-size: 1.2rem; } .tabs [role="tab"] .t { display: none; } .tab-panel { margin-top: 36px; } }

/* where to next */
.next-ch { display: flex; align-items: center; gap: 16px; margin-top: 72px; padding: 22px 26px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.18); color: inherit; text-decoration: none; transition: background-color 200ms ease; }
.next-ch:hover { background: rgba(255,255,255,0.08); }
.next-ch span { font: 400 12px/1.2 var(--f-data); letter-spacing: 0.3em; text-transform: uppercase; color: var(--acc); }
.next-ch b { font: 500 1.25rem/1.2 var(--f-read); flex: 1; }
.next-ch b i { font: 400 12px/1 var(--f-data); font-style: normal; margin-right: 12px; opacity: 0.7; }
.next-ch em { font-style: normal; font-size: 1.4rem; transition: transform 200ms var(--out, ease-out); }
.next-ch:hover em { transform: translateX(4px); }
.more-ch { display: inline-flex; gap: 8px; margin-top: 24px; color: var(--text); font: 400 1rem/1.4 var(--f-read); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,0.4); }
#rechten .duo { margin-top: 32px; }

/* ============ v106: three full-screen steps with a sticky rail ============ */
.step-rail { position: sticky; top: 84px; z-index: 20; margin-top: 40px; }
.step-rail-in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 6px; border-radius: 22px; background: rgba(78,84,219,0.78); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 20px 40px -24px rgba(10,10,60,0.6); }
.step-rail a { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 10px 14px; border-radius: 16px; color: inherit; text-decoration: none; transition: background-color 200ms ease, color 200ms ease; }
.step-rail a:hover { background: rgba(255,255,255,0.1); }
.step-rail .sn { grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.45); display: grid; place-items: center; font: 400 12px/1 var(--f-data); }
.step-rail b { font: 500 1rem/1.2 var(--f-read); }
.step-rail .t { font: 300 0.8125rem/1.3 var(--f-read); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step-rail a.on { background: #fff; color: #1F2160; }
.step-rail a.on .sn { background: #4E54DB; border-color: #4E54DB; color: #fff; }
.step-rail a.on .t { color: #4a4c6e; }
.step-panel { min-height: calc(100svh - 120px); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: center; padding: 48px 0; scroll-margin-top: 150px; }
.step-panel + .step-panel { border-top: 1px solid var(--border); }
.step-copy > h2.h1 { font-size: clamp(1.6rem, 2.5vw, 2.15rem); max-width: 18ch; }
.step-copy .lead { font-size: 1.0625rem; max-width: 40ch; }
.step-copy .signal { margin-top: 24px; }
.step-k2 { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font: 400 12px/1.2 var(--f-data); letter-spacing: 0.3em; text-transform: uppercase; color: var(--acc); }
.step-k2 .step-n { width: 34px; height: 34px; font-size: 14px; letter-spacing: 0; }
.step-demo { min-width: 0; }
.step-fit { transform-origin: 50% 0; }
.step-demo .duo { margin-top: 0; }
#rechten .step-demo .duo { margin-top: 0; }
#rechten .step-demo .app { max-width: none !important; }
@media (max-width: 1000px) {
  .step-panel { grid-template-columns: minmax(0, 1fr); gap: 28px; min-height: 0; padding: 40px 0; }
  .step-rail { top: 72px; }
}
@media (max-width: 760px) {
  .step-rail-in { gap: 4px; padding: 4px; border-radius: 18px; }
  .step-rail a { grid-template-columns: minmax(0, 1fr); padding: 8px 6px; text-align: center; justify-items: center; row-gap: 4px; }
  .step-rail .sn { grid-row: auto; width: 24px; height: 24px; font-size: 11px; }
  .step-rail b { font-size: 0.8125rem; }
  .step-rail .t { display: none; }
}

/* ============ v107: landing first impression + steady gap panel ============ */
.btn-ghost { background: transparent; color: var(--text); border-color: rgba(255,255,255,0.45); }
@media (hover: hover) and (pointer: fine) { .btn-ghost:hover { background: rgba(255,255,255,0.1); border-color: #fff; } }
.btn-ghost .arr { transition: transform 200ms var(--out, ease-out); }
.btn-ghost:hover .arr { transform: translateY(2px); }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-proof { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 6px 18px; font: 400 12px/1.4 var(--f-data); letter-spacing: 0.08em; color: var(--text-2); }
.hero-proof span { display: inline-flex; align-items: center; gap: 8px; }
.hero-proof span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #8DE8B8; box-shadow: 0 0 10px rgba(141,232,184,0.8); }
/* step 2: the gap panel keeps the graph's height; new finds roll in at the bottom */
@media (min-width: 1001px) {
  .step-demo .ginfo { contain: size; overflow: hidden; }
  .step-demo .glog { min-height: 0; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px); mask-image: linear-gradient(to bottom, transparent 0, #000 22px); padding-top: 6px; }
}
.glog .gl:last-child { animation: glIn 320ms var(--out, ease-out) both; }
@keyframes glIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .glog .gl { animation: none; } }
.glog .gl.miss { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 13px; padding: 7px 10px; border-radius: 10px; border: 1px dashed rgba(255,217,199,0.6); background: rgba(255,217,199,0.08); }
.glog .gl.miss::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px dashed #FFD9C7; flex: none; }
.glog .gl.miss { padding: 5px 10px; font-size: 12.5px; }
.step-demo .glog { gap: 5px; }
.step-demo .ginfo { gap: 8px; padding: 18px 20px; }

/* ============ v108: minimal header + the narrator (the hero brain, in miniature) ============ */
.story { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) translateY(8px); display: flex; align-items: center; gap: 10px; max-width: min(560px, 46vw); padding: 6px 16px 6px 8px; border-radius: 100px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); opacity: 0; pointer-events: none; transition: opacity 300ms ease, transform 500ms cubic-bezier(0.16, 1, 0.3, 1); }
.story.on { opacity: 1; transform: translate(-50%, -50%); }
.story-g { width: 26px; height: 26px; flex: none; overflow: visible; }
.sg-l line { stroke: rgba(255,255,255,0.35); stroke-width: 0.8; }
.sg-n circle { fill: #fff; stroke: #fff; stroke-width: 1; transition: fill 300ms ease, stroke 300ms ease; }
.sg-n circle.gap { fill: rgba(255,217,199,0.08); stroke: #FFD9C7; stroke-dasharray: 1.7 1.3; }
.sg-c { fill: rgba(255,255,255,0.55); transition: fill 400ms ease; }
.story.whole .sg-c { fill: #fff; filter: drop-shadow(0 0 2.5px rgba(255,255,255,0.95)); }
.sg-ai circle { fill: #8DE8B8; opacity: 0; transition: opacity 400ms ease; }
.story.ai .sg-ai circle { opacity: 1; }
.story-n { font: 400 12px/1 var(--f-data); letter-spacing: 0.06em; color: #FFD9C7; white-space: nowrap; }
.story-n b { font-weight: 500; color: #fff; font-variant-numeric: tabular-nums; }
.story.whole .story-n { color: #8DE8B8; }
.story-t { font: 400 13px/1.2 var(--f-read); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 10px; border-left: 1px solid rgba(255,255,255,0.22); transition: opacity 160ms ease, filter 160ms ease; }
.story-t.swap { opacity: 0; filter: blur(3px); }
@media (max-width: 1100px) { .story-t { display: none; } .story { padding-right: 12px; } }
@media (max-width: 640px) { .story { display: none; } }
@media (prefers-reduced-motion: reduce) { .story, .story-t { transition: none; } }
/* no menu any more: the booking link stays in the header on every screen */
@media (max-width: 900px) { .nav-in .btn-sm { display: inline-flex !important; } .menu-btn { display: none !important; } }
@media (max-width: 400px) { .nav-in .btn-sm { padding: 8px 12px; font-size: 13px; } .brand b { letter-spacing: 0.2em; } }

/* ============ v109: scroll as narrative (after aitakesover.co) ============ */
/* the colour world shifts per chapter: indigo → violet (the steps) → deep blue (your AI) → warm (the check) */
.cworld { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.cworld i { position: absolute; inset: 0; opacity: 0; transition: opacity 1100ms ease; }
.cworld .w1 { background: radial-gradient(70% 60% at 85% 20%, rgba(130,92,232,0.75), transparent 70%), radial-gradient(60% 60% at 10% 90%, rgba(98,64,214,0.55), transparent 70%); }
.cworld .w2 { background: radial-gradient(80% 70% at 20% 15%, rgba(34,58,196,0.8), transparent 72%), radial-gradient(60% 60% at 90% 85%, rgba(30,46,170,0.65), transparent 70%); }
.cworld .w3 { background: radial-gradient(70% 55% at 50% 100%, rgba(255,190,160,0.38), transparent 70%), radial-gradient(60% 60% at 85% 10%, rgba(120,96,236,0.5), transparent 70%); }
html[data-world="1"] .cworld .w1, html[data-world="2"] .cworld .w2, html[data-world="3"] .cworld .w3 { opacity: 1; }

/* chapters: giant outlined words that slide sideways while you scroll */
.chapter { position: relative; overflow: hidden; padding: 120px 0 110px; isolation: isolate; }
.chapter.short { padding: 70px 0 30px; }
.mq { white-space: nowrap; line-height: 0.92; pointer-events: none; }
.mq span { display: inline-block; will-change: transform; font: 300 clamp(4.5rem, 13.5vw, 13rem)/0.92 var(--f-read); letter-spacing: -0.045em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.2px rgba(255,255,255,0.55); margin-left: -6vw; }
.mq + .mq span { -webkit-text-stroke-color: rgba(255,217,199,0.6); margin-left: -30vw; }
.chapter.short .mq span { font-size: clamp(3.6rem, 10vw, 9.5rem); }
/* statements that light up word by word */
.stmt { position: relative; z-index: 2; max-width: min(1120px, 88vw); margin: 64px auto 0; padding: 0 var(--gutter); font: 400 clamp(1.9rem, 3.9vw, 3.6rem)/1.12 var(--f-read); letter-spacing: -0.025em; text-wrap: balance; }
.stmt.big { font-size: clamp(2.2rem, 5vw, 4.6rem); margin-top: 0; }
.stmt .w > span { color: rgba(255,255,255,0.22); transition: color 350ms ease; }
.stmt .w.on > span { color: #fff; }
.stmt .w.on > .em { color: #FFD9C7; }
/* glass chips drifting past at their own depth */
.fchip { position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 100px; font: 400 14px/1 var(--f-read); color: #fff; white-space: nowrap; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 24px 50px -24px rgba(10,10,60,0.6), inset 0 1px 0 rgba(255,255,255,0.35); will-change: transform; }
.fchip i { width: 8px; height: 8px; border-radius: 50%; background: #8DE8B8; box-shadow: 0 0 10px rgba(141,232,184,0.9); }
.fchip.c1.f3 i, .fchip.c1.f4 i { background: #FFD59E; box-shadow: 0 0 10px rgba(255,213,158,0.9); }
.fchip.c2 i { background: #fff; box-shadow: 0 0 10px rgba(255,255,255,0.9); }
/* arrivals: from the side they belong to */
.js [data-in] { opacity: 0; transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1), transform 1000ms cubic-bezier(0.16, 1, 0.3, 1), filter 900ms ease; transition-delay: calc(var(--i, 0) * 110ms); filter: blur(6px); }
.js [data-in="left"] { transform: translate3d(-90px, 0, 0); }
.js [data-in="right"] { transform: translate3d(110px, 0, 0); }
.js [data-in="up"] { transform: translate3d(0, 70px, 0); }
.js [data-in].shown { opacity: 1; transform: none; filter: none; }
/* one big way in */
.bigcta { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 40px; padding: clamp(26px, 4vw, 44px) clamp(28px, 4vw, 56px); border-radius: 100px; background: #fff; color: #1F2160; text-decoration: none; font: 400 clamp(1.6rem, 4vw, 3.4rem)/1.05 var(--f-read); letter-spacing: -0.03em; box-shadow: 0 40px 90px -40px rgba(20,20,80,0.7); transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms ease; }
.bigcta em { font-style: normal; display: grid; place-items: center; width: clamp(48px, 6vw, 80px); height: clamp(48px, 6vw, 80px); border-radius: 50%; background: #4E54DB; color: #fff; font-size: 0.7em; transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1); flex: none; }
@media (hover: hover) and (pointer: fine) { .bigcta:hover { box-shadow: 0 50px 100px -40px rgba(20,20,80,0.85); } .bigcta:hover em { transform: rotate(45deg); } }
.bigcta:active { transform: scale(0.985); }
@media (max-width: 760px) {
  .chapter { padding: 70px 0 60px; } .chapter.short { padding: 40px 0 10px; }
  .fchip { font-size: 12px; padding: 9px 13px; }
  .stmt { margin-top: 36px; }
  .bigcta { border-radius: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .mq span, .fchip { transform: none !important; }
  .js [data-in] { opacity: 1; transform: none; filter: none; transition: none; }
  .cworld i { transition: none; }
}
/* chips live at the edges, never over the statement */
#ch-steps .stmt { max-width: min(860px, 64vw); text-align: center; margin-left: auto; margin-right: auto; }
.chapter .fchip { left: auto; right: auto; }
#ch-steps .f1 { left: 3%; top: 5%; } #ch-steps .f2 { right: 3%; top: 9%; } #ch-steps .f3 { left: 4%; top: 86%; } #ch-steps .f4 { right: 5%; top: 82%; }
#ch-ai .f1 { left: 6%; top: 8%; } #ch-ai .f2 { left: 30%; top: 76%; } #ch-ai .f3 { right: 8%; top: 10%; } #ch-ai .f4 { right: 20%; top: 74%; }
@media (max-width: 760px) { #ch-steps .stmt { max-width: 92vw; } .chapter .f3, .chapter .f4 { display: none; } #ch-ai .f2 { left: auto; right: 6%; top: 8%; } }

/* ============ v110: the structure of aitakesover.co, in Canon's house style ============ */
/* hero: the giant word across the top, three labels above it, the brain below */
.hero.ato, .dive.on .hero.ato { padding-top: calc(112px + 9.4vw); }
.hero-word { position: absolute; top: 84px; left: calc(50% - 50vw); width: 100vw; z-index: 0; pointer-events: none; will-change: transform, opacity; }
.hw-labels { display: flex; justify-content: space-between; padding: 0 3.2vw 6px; font: 400 11px/1 var(--f-data); letter-spacing: 0.32em; text-transform: uppercase; color: var(--text-2); }
.hw { font: 400 8.55vw/0.86 var(--f-data); letter-spacing: -0.02em; text-transform: uppercase; text-align: center; white-space: nowrap; color: #fff; -webkit-mask-image: linear-gradient(180deg, #000 20%, rgba(0,0,0,0.25) 100%); mask-image: linear-gradient(180deg, #000 20%, rgba(0,0,0,0.25) 100%); }
.hero.ato .copy, .hero.ato .orbit-col { position: relative; z-index: 1; }
.hero.ato .copy h1.display { font-size: clamp(2rem, 3vw, 2.9rem); }
.hero.ato .copy { align-self: end; padding-bottom: 40px; }

/* giant chapter words (filled, fading down, drifting sideways) */
.giant { white-space: nowrap; pointer-events: none; padding-left: 3vw; }
.giant span { display: inline-block; will-change: transform; font: 400 clamp(4.2rem, 14.5vw, 15rem)/0.86 var(--f-data); letter-spacing: -0.045em; text-transform: uppercase; color: #fff; -webkit-mask-image: linear-gradient(180deg, #000 18%, rgba(0,0,0,0.12) 100%); mask-image: linear-gradient(180deg, #000 18%, rgba(0,0,0,0.12) 100%); }
.chapter { padding: 110px 0 90px; }
.how-sec, .dep-sec, .team-sec { padding: 120px 0 24px; }

/* statements with the glass mark */
.stmt-sec { perspective: 1200px; min-height: 86vh; display: flex; align-items: center; }
.stmt-sec .stmt { margin: 0 0 0 max(var(--gutter), calc((100vw - 1280px) / 2)); max-width: min(980px, 64vw); text-align: left; font-size: clamp(1.9rem, 3.7vw, 3.5rem); }
.stmt-sec.end { flex-direction: column; align-items: stretch; justify-content: center; padding: 120px max(var(--gutter), calc((100vw - 1280px) / 2)); }
.stmt-sec.end .stmt { margin: 0; max-width: 18ch; font-size: clamp(2.4rem, 5.4vw, 5rem); }
.tile3d { position: absolute; right: 9vw; top: 50%; width: clamp(140px, 17vw, 250px); aspect-ratio: 1; margin-top: calc(clamp(140px, 17vw, 250px) / -2); transform-style: preserve-3d; will-change: transform; z-index: 1; }
.t-face { position: absolute; inset: 0; border-radius: 24%; display: grid; place-items: center; background: radial-gradient(110% 110% at 25% 15%, #8a8ff5 0%, #4E54DB 45%, #2D3282 100%); border: 1px solid rgba(255,255,255,0.45); box-shadow: inset 0 2px 0 rgba(255,255,255,0.55), inset 0 -18px 40px rgba(20,20,90,0.55), 0 50px 90px -30px rgba(10,10,60,0.75); }
.t-face::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,0) 70%, rgba(255,217,199,0.25) 100%); }
.t-face svg { width: 66%; height: 66%; overflow: visible; filter: drop-shadow(0 0 6px rgba(255,255,255,0.6)); }
.t-glow { position: absolute; inset: 15%; border-radius: 50%; background: rgba(255,217,199,0.55); filter: blur(60px); transform: translateZ(-80px); }

/* myths */
.myths-sec .giant { margin-bottom: 40px; }
.myths { list-style: none; margin: 0 auto; padding: 0 var(--gutter); max-width: 1280px; display: grid; gap: 64px; position: relative; z-index: 2; }
.myth { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; }
.m-q { margin: 0; font: 400 clamp(1.7rem, 3.2vw, 3rem)/1.1 var(--f-read); letter-spacing: -0.025em; }
.m-a { margin: 0; display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 20px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.28); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 24px 50px -28px rgba(10,10,60,0.6), inset 0 1px 0 rgba(255,255,255,0.35); font: 400 1rem/1.5 var(--f-read); color: var(--text); }
.m-x { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: #FFB0A3; color: #3a0d05; }
.mcard { position: absolute; z-index: 1; width: clamp(220px, 22vw, 330px); margin: 0; padding: 8px 8px 10px; border-radius: 18px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 40px 80px -36px rgba(10,10,60,0.75), inset 0 1px 0 rgba(255,255,255,0.35); will-change: transform; }
.mcard img { display: block; width: 100%; height: auto; border-radius: 12px; }
.mcard figcaption { margin: 8px 4px 0; font: 400 11px/1.3 var(--f-data); letter-spacing: 0.06em; color: var(--text-2); }
.mcard.m1 { right: 7vw; top: 40px; } .mcard.m2 { right: 30vw; top: 150px; }

/* horizontal chapters (aitakesover: history, everywhere) */
.hz { position: relative; }
.hz.on .hz-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; }
.hz-track { display: flex; will-change: transform; }
.hz .step-panel { flex: none; box-sizing: border-box; width: 100vw; min-height: 100vh; margin: 0; border: 0 !important; padding: 96px max(var(--gutter), calc((100vw - 1280px) / 2)) 40px; }
.yr { font: 400 clamp(3.6rem, 6vw, 5.6rem)/0.9 var(--f-data); letter-spacing: -0.04em; color: #fff; margin-bottom: 18px; -webkit-mask-image: linear-gradient(180deg, #000 30%, rgba(0,0,0,0.3)); mask-image: linear-gradient(180deg, #000 30%, rgba(0,0,0,0.3)); }
.hz:not(.on) .hz-track { flex-direction: column; }
.hz:not(.on) .step-panel { width: auto; min-height: 0; }
.hz.cards .hz-track { gap: 24px; padding: 0 max(var(--gutter), calc((100vw - 1280px) / 2)); }
.hz.cards:not(.on) .hz-track { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 20px; }
.dcard { flex: none; scroll-snap-align: start; width: clamp(280px, 28vw, 400px); min-height: 380px; display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 24px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.28); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 40px 80px -40px rgba(10,10,60,0.7), inset 0 1px 0 rgba(255,255,255,0.35); }
.d-k { display: flex; justify-content: space-between; align-items: center; font: 400 12px/1 var(--f-data); letter-spacing: 0.28em; text-transform: uppercase; color: #FFD9C7; }
.d-k em { font-style: normal; color: var(--text-3, rgba(255,255,255,0.55)); letter-spacing: 0.18em; font-size: 10px; }
.dcard h3 { margin: 18px 0 0; font: 500 clamp(1.5rem, 2.2vw, 2rem)/1.1 var(--f-read); letter-spacing: -0.02em; }
.dcard p { margin: 0; color: var(--text-2); font: 400 1rem/1.55 var(--f-read); flex: 1; }
.d-o { display: flex; gap: 10px; align-items: center; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.18); font: 400 13px/1.3 var(--f-read); }
.d-o span { font: 400 11px/1 var(--f-data); letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-2); }

/* the numbers that matter */
.nums { max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.num b { display: block; font: 300 clamp(5rem, 10vw, 9.5rem)/0.9 var(--f-data); letter-spacing: -0.06em; color: #fff; }
.num span { display: block; margin-top: 14px; max-width: 16ch; color: var(--text-2); font: 400 1rem/1.45 var(--f-read); border-top: 1px solid rgba(255,255,255,0.25); padding-top: 12px; }

/* zoom straight through "in your own AI" */
.zoom { position: relative; height: 220vh; }
.zoom-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; overflow: hidden; }
.zoom-word { font: 400 clamp(3rem, 9vw, 9rem)/1 var(--f-data); letter-spacing: -0.04em; text-transform: uppercase; white-space: nowrap; color: #fff; will-change: transform, opacity; transform-origin: 50% 55%; }

/* the chat bot */
.cbot { position: fixed; left: 20px; bottom: 20px; z-index: 40; width: min(320px, calc(100vw - 40px)); pointer-events: none; }
.bot-log { display: grid; gap: 8px; }
.bmsg { display: flex; gap: 10px; align-items: flex-end; animation: botIn 420ms cubic-bezier(0.16, 1, 0.3, 1) both; transition: opacity 300ms ease, transform 300ms ease; transform-origin: left bottom; }
.bmsg.old { opacity: 0.45; transform: scale(0.94); }
.bmsg p { margin: 0; padding: 11px 14px; border-radius: 16px 16px 16px 4px; background: #fff; color: #1F2160; font: 400 13.5px/1.4 var(--f-read); box-shadow: 0 20px 40px -20px rgba(10,10,60,0.6); }
.b-av { flex: none; width: 28px; height: 28px; border-radius: 9px; background: radial-gradient(110% 110% at 25% 15%, #8a8ff5, #3a40c8); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 6px 14px -4px rgba(10,10,60,0.6); position: relative; }
.b-av::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff; }
@keyframes botIn { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } }

@media (max-width: 1000px) {
  .hero.ato, .dive.on .hero.ato { padding-top: calc(104px + 12vw); }
  .hw { font-size: 8.4vw; } .hw-labels { font-size: 9px; letter-spacing: 0.2em; }
  .myth { grid-template-columns: minmax(0, 1fr); gap: 16px; } .myths { gap: 40px; }
  .mcard { position: relative; right: auto !important; top: auto !important; left: auto; display: inline-block; width: 44vw; margin: 0 0 20px var(--gutter); transform: none !important; }
  .nums { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .tile3d { position: relative; right: auto; top: auto; margin: 0 0 30px var(--gutter); width: 120px; }
  .stmt-sec { flex-direction: column; align-items: flex-start; min-height: 0; }
  .stmt-sec .stmt { max-width: 92vw; }
  .zoom { height: 140vh; }
  .hz .step-panel { padding-top: 56px; }
  .cbot { left: 12px; bottom: 12px; width: min(280px, calc(100vw - 24px)); } .bmsg p { font-size: 12.5px; } .bmsg.old { display: none; }
}
@media (prefers-reduced-motion: reduce) { .bmsg { animation: none; } .giant span, .tile3d, .mcard { transform: none !important; } .zoom { height: auto; } .zoom-pin { position: relative; height: auto; padding: 80px 0; } }
/* v110b: hero word fitted by script; the hero starts right below it */
.hero.ato, .dive.on .hero.ato { padding-top: calc(var(--hwh, 220px) + 12px); }
.hw { -webkit-mask-image: linear-gradient(180deg, #000 30%, rgba(0,0,0,0.35) 100%); mask-image: linear-gradient(180deg, #000 30%, rgba(0,0,0,0.35) 100%); }
@media (min-width: 1001px) {
  .myths-sec .giant { margin-bottom: 0; }
  .mcard.m1 { right: 5vw; top: 70px; } .mcard.m2 { right: 27vw; top: 150px; }
  .myths { margin-top: 170px; }
  .myth { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}
.cbot { width: min(290px, calc(100vw - 40px)); }
.bmsg p { font-size: 12.5px; padding: 9px 12px; }
.bmsg.old { opacity: 0.35; }
.hero-word { text-align: center; }
.hw { display: inline-block; text-align: left; }

/* ============ v111: landing = only the brain · WAAROM as a story · playful departments · simpler team ============ */
.hero.solo, .dive.on .hero.solo { grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; padding-top: 92px; padding-bottom: 70px; }
.hero.solo .orbit-col { width: min(100%, 1060px, calc((100svh - 150px) * 1.12)); }
.hero.solo .copy { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 3; display: flex; justify-content: center; pointer-events: none; }
.cue { display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px; border-radius: 100px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.cue-w { font: 400 13px/1 var(--f-data); letter-spacing: 0.42em; color: #fff; }
.cue-s { font: 400 10px/1 var(--f-data); letter-spacing: 0.3em; color: var(--text-2); }
.cue-t { font: 400 13px/1 var(--f-read); color: var(--text-2); padding-left: 12px; border-left: 1px solid rgba(255,255,255,0.25); }
.cue-a { width: 9px; height: 9px; border-right: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(45deg) translateY(-2px); animation: cueArrow 1.6s ease-in-out infinite; }
@keyframes cueArrow { 0%, 100% { transform: rotate(45deg) translate(-2px, -2px); } 50% { transform: rotate(45deg) translate(2px, 2px); } }
.hero.solo .orbit-bar { justify-content: center; gap: 24px; }

/* WAAROM: a pinned story in four beats */
.why2 { position: relative; height: 420vh; }
.w2-pin { position: sticky; top: 0; height: 100vh; height: 100svh; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; padding: 96px max(var(--gutter), calc((100vw - 1280px) / 2)) 40px; }
.w2-h { margin: 0; font: 500 clamp(2rem, 3.4vw, 3.2rem)/1.08 var(--f-read); letter-spacing: -0.025em; }
.w2-steps { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 18px; counter-reset: b; }
.w2-steps li { counter-increment: b; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; font: 300 1.125rem/1.45 var(--f-read); color: rgba(255,255,255,0.32); transition: color 400ms ease, transform 500ms cubic-bezier(0.16, 1, 0.3, 1); }
.w2-steps li::before { content: counter(b, decimal-leading-zero); font: 400 12px/2 var(--f-data); letter-spacing: 0.1em; }
.w2-steps li.on { color: var(--text-2); }
.w2-steps li.cur { color: #fff; transform: translateX(8px); }
.w2-ex { display: inline-block; margin-top: 28px; font: 400 11px/1 var(--f-data); letter-spacing: 0.2em; color: var(--text-2); }
.w2-stage { position: relative; height: min(560px, 70vh); }
.w2-q { position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; padding: 12px 18px 12px 12px; border-radius: 22px 22px 22px 6px; background: #fff; color: #1F2160; box-shadow: 0 30px 60px -30px rgba(10,10,60,0.7); white-space: nowrap; font: 400 1.0625rem/1.2 var(--f-read); }
.w2-q p { margin: 0; }
.w2-av { width: 30px; height: 30px; border-radius: 50%; background: #FFB59A; color: #1F2160; display: grid; place-items: center; font: 500 13px/1 var(--f-read); }
.src { position: absolute; width: 46%; padding: 16px 18px; border-radius: 18px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 30px 60px -34px rgba(10,10,60,0.7), inset 0 1px 0 rgba(255,255,255,0.35); display: grid; gap: 4px; opacity: 0; transition: opacity 500ms ease, transform 700ms cubic-bezier(0.16, 1, 0.3, 1), border-color 300ms ease, background-color 300ms ease; }
.src-k { font: 400 11px/1 var(--f-data); letter-spacing: 0.24em; text-transform: uppercase; color: #FFD9C7; }
.src-f { font: 400 13px/1.3 var(--f-read); color: var(--text-2); }
.src b { font: 400 1.9rem/1.1 var(--f-data); letter-spacing: -0.03em; color: #fff; margin-top: 4px; }
.src.s1 { top: 16%; left: 0; transform: translate3d(-60px, 0, 0); } .src.s2 { top: 16%; right: 0; transform: translate3d(60px, 0, 0); }
.src.s3 { top: 46%; left: 0; transform: translate3d(-60px, 0, 0); } .src.s4 { top: 46%; right: 0; transform: translate3d(60px, 0, 0); }
.why2:not([data-s="0"]) .src { opacity: 1; transform: none; }
.why2[data-s="2"] .src b { color: #FFB0A3; }
.why2[data-s="2"] .src { border-color: rgba(255,176,163,0.6); }
.why2[data-s="3"] .src { opacity: 0.35; }
.why2[data-s="3"] .src.s3 { opacity: 1; border-color: rgba(141,232,184,0.8); background: rgba(141,232,184,0.14); }
.why2[data-s="3"] .src.s3 b { color: #8DE8B8; }
.why2[data-s="3"] .src.s4 { opacity: 1; border-color: rgba(255,213,158,0.8); }
.w2-ai { position: absolute; bottom: 0; left: 0; width: 62%; display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 20px; background: #F2F2F8; color: #1F2160; opacity: 0; transform: translate3d(0, 30px, 0); transition: opacity 400ms ease, transform 600ms cubic-bezier(0.16, 1, 0.3, 1); }
.w2-ai p { margin: 0; font: 400 1.0625rem/1.3 var(--f-read); flex: 1; }
.w2-ai-i { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #E2E2EC; display: grid; place-items: center; font: 400 11px/1 var(--f-data); color: #6B6B6B; }
.w2-ai em { font-style: normal; font: 500 1.05rem/1 var(--f-read); color: #B93C0A; border: 2.5px solid #B93C0A; border-radius: 10px; padding: 6px 10px; transform: rotate(-6deg); }
.why2[data-s="2"] .w2-ai { opacity: 1; transform: none; }
.w2-canon { position: absolute; bottom: 0; left: 50%; width: 74%; margin-left: -37%; display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 22px; background: #fff; color: #1F2160; box-shadow: 0 40px 80px -36px rgba(10,10,60,0.8); opacity: 0; transform: translate3d(0, 30px, 0) scale(0.97); transition: opacity 450ms ease, transform 650ms cubic-bezier(0.16, 1, 0.3, 1); }
.w2-canon b { font: 500 1.0625rem/1.2 var(--f-read); } .w2-canon p { margin: 4px 0; font: 400 1.25rem/1.3 var(--f-read); } .w2-canon small { font: 400 12px/1.3 var(--f-data); color: #1E874B; letter-spacing: 0.04em; }
.w2-c-i { flex: none; width: 38px; height: 38px; border-radius: 11px; background: radial-gradient(110% 110% at 25% 15%, #8a8ff5, #3a40c8); position: relative; }
.w2-c-i::after { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff; }
.why2[data-s="3"] .w2-canon { opacity: 1; transform: none; }
.w2-flag { position: absolute; top: 40%; right: 2%; padding: 6px 12px; border-radius: 100px; background: #FFD59E; color: #3a2400; font: 400 12px/1 var(--f-read); opacity: 0; transition: opacity 400ms ease 200ms; }
.why2[data-s="3"] .w2-flag { opacity: 1; }

/* every department: rows of real questions that drift; click one for its answer */
.dq { padding: 30px 0 110px; overflow: hidden; }
.dq-rows { display: grid; gap: 14px; }
.dq-row { white-space: nowrap; will-change: transform; }
.dq-track { display: inline-flex; gap: 12px; animation: dqMove var(--dur, 70s) linear infinite; }
.dq-row.rev .dq-track { animation-direction: reverse; }
.dq-row:hover .dq-track { animation-play-state: paused; }
@keyframes dqMove { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.dq-chip { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 100px; border: 1px solid rgba(255,255,255,0.28); background: rgba(255,255,255,0.1); color: #fff; font: 400 15px/1 var(--f-read); cursor: pointer; transition: background-color 180ms ease, transform 160ms cubic-bezier(0.16, 1, 0.3, 1), border-color 180ms ease; }
.dq-chip span { font: 400 10px/1 var(--f-data); letter-spacing: 0.22em; text-transform: uppercase; color: #FFD9C7; }
.dq-chip.dq-gap { border-style: dashed; border-color: rgba(255,217,199,0.6); background: rgba(255,217,199,0.06); }
.dq-chip:hover { background: rgba(255,255,255,0.2); }
.dq-chip:active { transform: scale(0.96); }
.dq-chip[aria-pressed="true"] { background: #fff; color: #1F2160; border-color: #fff; }
.dq-chip[aria-pressed="true"] span { color: #4E54DB; }
.dq-card { max-width: 720px; margin: 44px auto 0; padding: 26px 30px; border-radius: 24px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 40px 80px -40px rgba(10,10,60,0.75), inset 0 1px 0 rgba(255,255,255,0.35); min-height: 180px; }
.dq-card .k { display: flex; justify-content: space-between; font: 400 11px/1 var(--f-data); letter-spacing: 0.24em; text-transform: uppercase; color: #FFD9C7; }
.dq-card .k em { font-style: normal; color: var(--text-2); }
.dq-card h3 { margin: 14px 0 8px; font: 500 1.6rem/1.15 var(--f-read); letter-spacing: -0.02em; }
.dq-card p { margin: 0; font: 400 1.125rem/1.5 var(--f-read); color: var(--text); }
.dq-card dl { margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font: 400 13px/1.3 var(--f-read); color: var(--text-2); }
.dq-card dl div { display: flex; gap: 8px; } .dq-card dt { font: 400 11px/1.6 var(--f-data); letter-spacing: 0.16em; text-transform: uppercase; } .dq-card dd { margin: 0; color: #fff; }
.dq-card.dq-gap { border-style: dashed; border-color: rgba(255,217,199,0.7); }
.dq-card .ok { color: #8DE8B8; }
.dq-card.swap { animation: dqSwap 380ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes dqSwap { from { opacity: 0.2; transform: translateY(10px) scale(0.99); } to { opacity: 1; transform: none; } }

/* team: simpler */
#team .team-grid { gap: 28px; }
@media (min-width: 901px) { #team .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; } }
#team .tcard { background: transparent; border: 0; border-top: 1px solid rgba(255,255,255,0.25); border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 22px 0 0; }
#team .tcard .avatar { width: 40px; height: 40px; font-size: 15px; }
#team .tcard p { font-size: 0.9375rem; }
#team { padding-top: 100px; }
.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; }

@media (max-width: 1000px) {
  .why2 { height: auto; } .w2-pin { position: relative; height: auto; grid-template-columns: minmax(0, 1fr); padding-top: 80px; padding-bottom: 60px; gap: 36px; }
  .w2-steps li { color: var(--text-2); } .w2-steps li.cur { transform: none; }
  .w2-stage { height: 620px; } .src { width: 48%; } .src b { font-size: 1.4rem; } .w2-q { white-space: normal; width: 90%; }
  .dq-chip { font-size: 13px; padding: 10px 14px; }
  .hero.solo .orbit-col { width: 100%; }
  .cue-t { display: none; }
}
@media (prefers-reduced-motion: reduce) { .dq-track { animation: none; flex-wrap: wrap; white-space: normal; } .cue-a { animation: none; } }

/* ============ v112: wider playground in the dive · the composer that grows into your AI ============ */
@media (min-width: 1100px) {
  .dive.on #zoeken { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); row-gap: 0; max-width: 1320px; padding-top: 96px; }
  .dive.on #zoeken .kicker { grid-column: 1; grid-row: 1; margin-bottom: 10px; }
  .dive.on #zoeken h2 { grid-column: 1; grid-row: 2; max-width: none; font-size: clamp(1.8rem, 2.7vw, 2.6rem); margin-bottom: 18px; }
  .dive.on #zoeken h2 .ln { display: inline-block; margin-right: 0.3em; }
  .dive.on #zoeken .demo-col { grid-column: 1; grid-row: 3; width: 100%; max-width: 1320px; justify-self: center; align-self: start; }
  .dive.on #zoeken #pgpane { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
.morph { position: relative; height: 280vh; }
.mp-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.mp-stage { position: absolute; left: 50%; top: 52%; width: 0; height: 0; }
.mp-win { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); background: #1d1d21; border-radius: 18px; box-shadow: 0 60px 120px -40px rgba(10,10,50,0.85); will-change: clip-path; }
.mp-ui { position: absolute; inset: 0; display: grid; grid-template-columns: 22% minmax(0, 1fr); opacity: 0; }
.mp-side { background: #17171a; padding: 22px 16px; display: grid; align-content: start; gap: 12px; border-radius: 18px 0 0 18px; }
.mp-side i { height: 10px; border-radius: 6px; background: #2a2a30; } .mp-side i:first-child { width: 60%; height: 14px; background: #34343b; margin-bottom: 10px; }
.mp-main { padding: 34px 6% 90px; display: flex; flex-direction: column; gap: 14px; justify-content: flex-end; }
.mp-user { align-self: flex-end; padding: 11px 16px; border-radius: 18px; background: #303036; color: #fff; font: 400 15px/1.3 var(--f-read); }
.mp-used { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 6px 12px 6px 6px; border-radius: 10px; background: #2a2a30; color: #d6d6dc; font: 500 13px/1 var(--f-read); }
.mp-ci { width: 22px; height: 22px; border-radius: 7px; background: radial-gradient(110% 110% at 25% 15%, #8a8ff5, #3a40c8); position: relative; flex: none; }
.mp-ci::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #fff; }
.mp-lines { display: grid; gap: 9px; } .mp-lines i { height: 10px; border-radius: 6px; background: #34343b; } .mp-lines i:nth-child(2) { width: 82%; } .mp-lines i:nth-child(3) { width: 58%; }
.mp-card { display: inline-flex; align-items: center; gap: 10px; width: fit-content; padding: 12px 14px; border-radius: 12px; background: #26262b; border: 1px solid #36363d; color: #8DE8B8; font: 400 13px/1.3 var(--f-read); }
.mp-bar { position: absolute; left: 50%; top: 50%; height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 8px 0 18px; border-radius: 28px; background: #2b2b31; color: #fff; box-sizing: border-box; }
.mp-plus { color: #a5a5ad; font-size: 22px; }
.mp-text { font: 400 18px/1 var(--f-read); white-space: nowrap; }
.mp-caret { width: 2px; height: 22px; background: #fff; margin-left: -8px; animation: caretBlink 1s steps(2) infinite; flex: none; }
.mp-send { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #1d1d21; display: grid; place-items: center; font: 500 18px/1 var(--f-read); flex: none; }
@keyframes caretBlink { 50% { opacity: 0; } }
.mpc { position: absolute; left: 0; top: 0; padding: 10px 16px; border-radius: 100px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.35); color: #fff; font: 500 14px/1 var(--f-read); white-space: nowrap; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background-color 300ms ease, color 300ms ease; z-index: 2; }
.mpc.docked[data-k="0"] { background: #fff; color: #1F2160; }
.mp-cap { position: absolute; left: 0; top: calc(min(580px, 66vh) / 2 + 26px); margin: 0; white-space: nowrap; font: 400 clamp(1.4rem, 2.4vw, 2.2rem)/1.1 var(--f-read); letter-spacing: -0.02em; color: #fff; opacity: 0; }
@media (max-width: 1000px) { .morph { height: 200vh; } .mp-ui { grid-template-columns: minmax(0, 1fr); } .mp-side { display: none; } .mp-text { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .mp-caret { animation: none; } }

/* v113: step 3, sections per access layer */
.rsecs { display: grid; gap: 10px; }
.rsec { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: baseline; }
.rsec .badge { grid-row: span 2; flex-shrink: 0; white-space: nowrap; }
.rsec b { font: 500 14px/1.3 var(--f-app); color: var(--t); }
.rsec p { margin: 0; font: 400 16px/1.45 var(--f-app); }
.rsec.in { animation: rsecIn 320ms cubic-bezier(0.23, 1, 0.32, 1) both; }
@keyframes rsecIn { from { opacity: 0; transform: translateY(6px); } }
.badge.lv2 { border-color: var(--acc); color: var(--acc); }
.badge.lv3 { border-color: #f0b860; color: #f0b860; }
.ladder { margin-top: 10px; padding: 14px 18px; display: grid; gap: 6px; }
.lrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 10px; border-radius: 10px; opacity: 0.5; transition: opacity 200ms ease, background-color 200ms ease; }
.lrow.on { opacity: 1; background: var(--s); }
.lrole { font: 500 13px/1.2 var(--f-app); color: var(--t); white-space: nowrap; }
.lrole em { font-style: normal; color: var(--t-muted); font-weight: 400; }
.llv { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.llv i { font: 400 11px/1.6 var(--f-app); font-style: normal; padding: 0 9px; border-radius: 100px; border: 1px solid var(--ok); color: var(--ok); }
.llv i.lv2 { border-color: var(--acc); color: var(--acc); }
.llv i.lv3 { border-color: #f0b860; color: #f0b860; }
@media (prefers-reduced-motion: reduce) { .rsec.in { animation: none; } }

/* ============ v114: short laptop screens, simpler phone, shorter WAAROM ============ */
html, body { overflow-x: clip; }
.bot-log { transition: opacity 600ms ease, transform 600ms ease; }
.bot-log.quiet { opacity: 0; transform: translateY(8px); }
.why2 { height: 230vh; }

/* step 3: one question, three roles */
.r3 { max-width: 620px; }
.r3-top { display: grid; gap: 14px; }
.r3-q { margin: 0; display: flex; align-items: center; gap: 12px; font: 400 18px/1.35 var(--f-app); color: var(--t); }
.r3-av { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--s); border: 1px solid var(--b); font: 500 14px/1 var(--f-app); color: var(--t-muted); }
.r3 .who-seg button { padding: 8px 18px; font-size: 14px; }
.r3 .result { min-height: 214px; }

/* laptops with a short window (e.g. a 14–15" Windows laptop at 125–150% scaling) */
@media (min-width: 1001px) and (max-height: 800px) {
  .yr { font-size: 2.6rem; margin-bottom: 8px; }
  .hz .step-panel { padding-top: 84px; padding-bottom: 20px; }
  .hz .step-panel .h1 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
  .hz .step-panel .lead { font-size: 0.95rem; line-height: 1.5; }
  .step-copy .signal { margin-top: 14px; padding: 12px 16px; } .signal span { font-size: 0.9rem; }
  .cbot { width: 250px; } .bmsg.old { display: none; }
  .hero.solo { padding-top: 80px; padding-bottom: 64px; }
  .hero.solo .orbit-col { width: min(100%, 1060px, calc((100svh - 190px) * 1.12)); }
  .hero.solo .copy { bottom: 10px; } .cue { padding: 7px 14px; } .cue-t { display: none; }
  .w2-pin { padding-top: 80px; padding-bottom: 20px; }
  .r3 .result { min-height: 190px; }
}

/* phones: one column, fewer layers, steps and team swipe sideways (like linear.app) */
@media (max-width: 760px) {
  .cbot { display: none; }
  .why2 { height: auto; }
  .w2-pin { position: relative; height: auto; display: block; padding: 72px var(--gutter) 40px; }
  .w2-steps { display: none; }
  .w2-ex { display: none; }
  .w2-h { margin-bottom: 24px; }
  .morph { height: 160vh; }

  /* how it works: a swipeable row of three cards */
  #werkt-hz .hz-track { flex-direction: row !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 0 var(--gutter) 18px; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  #werkt-hz .hz-track::-webkit-scrollbar { display: none; }
  #werkt-hz .step-panel { flex: none; width: 86vw !important; min-height: 0; scroll-snap-align: center; padding: 22px 18px 20px !important; border-radius: 24px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16) !important; display: block; }
  #werkt-hz .step-copy, #werkt-hz .step-demo { min-width: 0; max-width: 100%; }
  #werkt-hz .yr { font-size: 2.4rem; margin-bottom: 6px; }
  #werkt-hz .h1 { font-size: 1.45rem; }
  #werkt-hz .lead { font-size: 0.95rem; }
  #werkt-hz .instr, #werkt-hz .more-ch { display: none; }
  #werkt-hz .step-demo { margin-top: 18px; }
  #werkt-hz .duo { grid-template-columns: minmax(0, 1fr) !important; gap: 12px; }
  #werkt-hz .app { min-width: 0; max-width: 100%; }
  #beat-b .duo > .app:nth-child(2) .phead, #beat-b #live2 { display: none; }
  .hz-dots { display: flex; justify-content: center; gap: 8px; padding: 4px 0 8px; }
  .hz-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.35); transition: background-color 200ms ease, width 200ms ease; }
  .hz-dots i.on { width: 22px; border-radius: 4px; background: #fff; }

  /* team: swipe cards */
  #team .team-grid, #team .tgrid { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 12px; scrollbar-width: none; }
  #team .tcard { flex: none; width: 78vw; scroll-snap-align: center; }
}
@media (min-width: 761px) and (max-height: 800px) { .mp-stage { top: calc(50% + 34px); } }
@media (max-width: 760px) {
  /* WAAROM on a phone: the whole story at once, top to bottom */
  .w2-stage { height: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .w2-stage > * { position: static !important; transform: none !important; opacity: 1 !important; margin: 0 !important; width: auto !important; left: auto !important; }
  .w2-q { grid-column: 1 / -1; justify-self: start; white-space: normal; order: 0; margin-bottom: 6px !important; }
  .w2-stage .src { order: 1; }
  .w2-flag { grid-column: 1 / -1; justify-self: end; order: 2; }
  .w2-ai { grid-column: 1 / -1; order: 3; margin-top: 8px !important; }
  .w2-ai em { flex: none; }
  .w2-canon { grid-column: 1 / -1; order: 4; }
  .w2-canon p { font-size: 1.1rem; }
  /* the hero: brain, the toggle and the count; the legend line goes */
  .hero.solo .orbit-bar .data { display: none; }
}
@media (max-width: 760px) { .touch-chips { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); padding-right: 40px; } }
@media (min-width: 1001px) and (min-height: 801px) and (max-height: 900px) { .hero.solo .orbit-col { width: min(100%, 1060px, calc((100svh - 180px) * 1.12)); } }

/* v117: the closing statement and button sit in line with the rest; team intro */
.stmt.big { font-size: clamp(1.9rem, 3.6vw, 3.3rem); }
.bigcta { max-width: min(880px, 88vw); margin: 36px auto 0; padding: clamp(18px, 2.2vw, 26px) clamp(22px, 2.6vw, 34px); font-size: clamp(1.25rem, 2.2vw, 1.9rem); }
.bigcta em { width: clamp(40px, 3.6vw, 52px); height: clamp(40px, 3.6vw, 52px); }
.team-lead { max-width: 760px; margin-top: 18px; }
/* v117: the worded hero fits shorter laptop screens */
.hero.worded .hero-proof { margin-top: 18px; }
@media (min-width: 1001px) and (max-height: 900px) {
  .hero.worded .display { font-size: clamp(2.1rem, 3.3vw, 3rem); }
  .hero.worded .sub { font-size: 1rem; line-height: 1.55; margin-top: 16px; }
  .hero.worded .ctas { flex-direction: row; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
  .hero.worded .ctas .btn { width: auto; }
}
@media (min-width: 1001px) and (max-height: 700px) {
  .hero.worded .kicker { margin-bottom: 10px; }
  .hero.worded .display { font-size: clamp(1.9rem, 2.9vw, 2.5rem); }
  .hero.worded .sub { font-size: 0.95rem; }
  .hero.worded .hero-proof { display: none; }
}

/* v119: the playground holds its size. Trace and answer reserve room for their longest content,
   so nothing below or around them jumps when a question runs. */
#zoeken .trace { min-height: 140px; align-content: start; }
#zoeken #answer { min-height: 300px; }
#zoeken #answer .atext { margin: 0; }
@media (max-width: 760px) { #zoeken #answer { min-height: 380px; } #zoeken .trace { min-height: 170px; } }
#zoeken .wirebtn[hidden] { display: inline-flex !important; visibility: hidden; }
@media (max-width: 760px) { #zoeken .trace { min-height: 210px; } }

/* v119: three plain lines under the hero buttons: what changes for your AI */
.hero-gets { list-style: none; margin: 26px 0 0; padding: 18px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; border-top: 1px solid rgba(255,255,255,0.22); max-width: 620px; }
.hero-gets li { display: grid; gap: 4px; align-content: start; }
.hero-gets b { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1.25 var(--f-read); color: #fff; }
.hero-gets b::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #8DE8B8; box-shadow: 0 0 10px rgba(141,232,184,0.8); }
.hero-gets span { font: 400 13.5px/1.4 var(--f-read); color: var(--text-2); }
@media (max-height: 800px) and (min-width: 1001px) { .hero-gets { margin-top: 18px; padding-top: 14px; } .hero-gets span { font-size: 12.5px; } }
@media (max-width: 760px) { .hero-gets { grid-template-columns: minmax(0, 1fr); gap: 12px; } .hero-gets li { grid-template-columns: 11.5em minmax(0, 1fr); gap: 10px; } }