/* Self-hosted so the page makes no third-party request */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/montserrat-latin.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 400 800; font-display: swap; src: url("../fonts/montserrat-italic-latin.woff2") format("woff2"); }
@font-face { font-family: "Overpass"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/overpass-latin.woff2") format("woff2"); }

:root {
  --night: #1B1326;
  --aubergine: #271B36;
  --aubergine-light: #33244A;
  --line-on-dark: rgba(255, 255, 255, .12);
  --text-on-dark: #F3EEF8;
  --muted-on-dark: #B9AFC6;
  --faint-on-dark: #968CA3;
  --ink: #271B36;
  --ink-soft: #4E4460;
  --muted: #6F6879;
  --paper: #FCFCFC;
  --soft: #F3F0F6;
  --line: #E6E1EC;
  --magenta: #E2336B;
  --magenta-hot: #FF4D86;
  --magenta-deep: #B3194A;
  --blush: #FDEBF1;
  --mint: #06D6A0;
  --mint-deep: #048B67;
  --mint-soft: #E3F9F2;
  --yellow: #FFD166;
  --blue: #26547C;
  --font-heading: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --font-body: "Overpass", "Segoe UI", system-ui, sans-serif;
  --wrap: 1200px;
  --gutter: 24px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { position: relative; margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 18px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-heading); margin: 0; text-wrap: balance; letter-spacing: -0.02em; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
[hidden] { display: none !important; }
address { font-style: normal; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

/* Both languages, both audiences and both heroes are in the page; the html element says which one shows */
html[lang="en"] [lang="nl"], html[lang="nl"] [lang="en"],
html[data-audience="customers"] [data-for="employees"], html[data-audience="employees"] [data-for="customers"],
html[data-hero="dug-deep"] [data-for-hero="full-room"], html[data-hero="full-room"] [data-for-hero="dug-deep"] { display: none !important; }

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.no-wrap { white-space: nowrap; }
/* Overpass gives the middle dot no advance width, so separators use the headline face */
.separator { font-family: var(--font-heading); font-weight: 700; }
.wrap { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.dark { background: var(--night); color: var(--text-on-dark); }
/* Symbols in a display:none sprite can fail to render, so it is only sized away */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* The glow paints over the dark backgrounds and under the positioned content that follows it */
.glow { position: absolute; top: 0; left: 0; right: 0; height: 1000px; overflow: hidden; pointer-events: none; }
.glow::before { content: ""; position: absolute; width: 1000px; height: 1000px; right: -320px; top: -520px; background: radial-gradient(closest-side, rgba(226, 51, 107, .20), rgba(226, 51, 107, 0)); }

.kicker { font-family: var(--font-heading); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--magenta); }
.dark .kicker { color: var(--magenta-hot); }
.block { padding: 110px 0; }
/* Two light sections in a row share one gap */
.block:not(.dark) + .block:not(.dark), .block.dark + .block.dark { padding-top: 0; }
.section-head { max-width: 800px; margin-bottom: 52px; }
.section-head h2 { font-size: clamp(34px, 3.6vw, 50px); line-height: 1.08; font-weight: 800; margin-top: 12px; }
.dark .section-head h2 { color: #fff; }
.section-head > p:not(.kicker) { margin-top: 16px; font-size: 19px; color: var(--ink-soft); }
.dark .section-head > p:not(.kicker) { color: var(--muted-on-dark); }

.placeholder { display: inline-block; border: 1px dashed currentColor; border-radius: 6px; padding: 0 7px; font-size: .82em; font-weight: 600; line-height: 1.6; color: var(--magenta-deep); background: var(--blush); }
.dark .placeholder { color: #FF9CBC; background: rgba(226, 51, 107, .12); }
.example-tag { display: inline-block; font-family: var(--font-heading); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 3px 7px; background: #fff; }
.dark .example-tag { color: var(--muted-on-dark); border-color: var(--line-on-dark); background: rgba(255, 255, 255, .04); }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 28px; border: 0; border-radius: 14px; font-family: var(--font-heading); font-size: 16px; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .2s, border-color .2s, transform .2s; }
.button-hot { background: var(--magenta); color: #fff; box-shadow: 0 12px 30px -12px rgba(226, 51, 107, .7); }
.button-hot:hover { background: #EC4679; transform: translateY(-1px); }
.button-ghost { border: 1.5px solid rgba(255, 255, 255, .34); color: #fff; }
.button-ghost:hover { border-color: #fff; }
.button-dark { background: var(--aubergine); color: #fff; }
.button-line { border: 1.5px solid rgba(255, 255, 255, .6); color: #fff; }
.button-line:hover { border-color: #fff; }

.segmented { display: inline-flex; background: rgba(255, 255, 255, .07); border: 1px solid var(--line-on-dark); border-radius: 10px; padding: 3px; }
.segmented button { border: 0; background: none; color: var(--muted-on-dark); font: 700 12px/1 var(--font-heading); letter-spacing: .06em; padding: 8px 11px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
/* The pressed look follows the html element, so it is right before any script runs */
html[lang="en"] [data-set-language="en"], html[lang="nl"] [data-set-language="nl"],
html[data-audience="customers"] [data-set-audience="customers"], html[data-audience="employees"] [data-set-audience="employees"] { background: #fff; color: var(--aubergine); }

.icon { width: 1em; height: 1em; flex: none; }
.mark { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; }
.mark .icon { width: 12px; height: 12px; }
.mark-yes { background: var(--mint); color: #fff; }
.mark-partly { background: #FFF1CC; color: #8A6400; }
.mark-no { background: #EEE9F2; color: #8A8295; }

/* One conversation turn: Elly or the person she talks to */
.turn { display: flex; gap: 10px; align-items: flex-start; }
.turn + .turn { margin-top: 10px; }
.turn.person { flex-direction: row-reverse; }
.avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; }
.avatar.person { background: #4A3B60; color: #fff; }
.avatar.person .icon { width: 14px; height: 14px; }
.bubble { max-width: 84%; padding: 11px 15px; border-radius: 14px; font-size: 15.5px; line-height: 1.45; }
.turn.elly .bubble { background: var(--blush); color: var(--ink); border-top-left-radius: 4px; }
.turn.person .bubble { background: #fff; color: var(--ink); border-top-right-radius: 4px; }
.bubble b { font-weight: 700; color: var(--magenta-deep); }
/* While Elly is typing, three dots stand where her bubble will be */
.turn .typing { display: none; }
.turn.is-typing { position: relative; }
.turn.is-typing .typing { position: absolute; left: 40px; top: 0; display: flex; gap: 4px; padding: 19px 15px; border-radius: 14px; border-top-left-radius: 4px; background: var(--blush); }
.turn.is-typing .bubble { opacity: 0; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--magenta); opacity: .3; animation: typing-dot 1s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing-dot { 30% { opacity: 1; transform: translateY(-2px); } }
.root-cause { margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: rgba(6, 214, 160, .12); border: 1px solid rgba(6, 214, 160, .45); display: flex; gap: 12px; align-items: flex-start; }
.root-cause .root-icon { flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--mint); color: #fff; display: grid; place-items: center; }
.root-cause .root-icon .icon { width: 16px; height: 16px; }
.root-cause b { display: block; font-family: var(--font-heading); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mint); }
.root-cause span { display: block; margin-top: 2px; font-family: var(--font-heading); font-size: 17px; font-weight: 700; color: #fff; line-height: 1.3; }

.quote { border: 1px solid var(--line); border-radius: 22px; padding: 32px 34px; background: #fff; display: flex; flex-direction: column; gap: 22px; }
.quote-mark { width: 34px; height: 26px; color: var(--magenta); }
.quote blockquote { margin: 0; }
.quote p { text-wrap: balance; font-family: var(--font-heading); font-size: 20px; line-height: 1.36; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.quote p em { font-style: normal; color: var(--magenta); }
.quote figcaption { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--muted); }
.quote figcaption img { height: 26px; width: auto; }
.quote figcaption strong { display: block; color: var(--ink); font-weight: 600; }

@media (max-width: 720px) {
  :root { --gutter: 16px; }
  body { font-size: 17px; }
  .block { padding: 72px 0; }
  .section-head { margin-bottom: 32px; }
  .section-head h2 { font-size: 31px; }
  .section-head > p:not(.kicker) { font-size: 17px; }
  .segmented button { padding: 7px 8px; }
  .bubble { font-size: 14.5px; padding: 10px 12px; max-width: 86%; }
  .avatar { width: 26px; height: 26px; }
  .turn.is-typing .typing { left: 36px; padding: 17px 12px; }
  .root-cause span { font-size: 15.5px; }
  .quote { padding: 24px 22px; }
  .quote p { font-size: 19px; }
}
/* Chrome balances at most six lines, and the longest Dutch heading needs seven at 31px below 375 wide */
@media (max-width: 374px) {
  .section-head h2 { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}