/* Slimmie website: the homepage.
   Built on the tokens (branding/selected/tokens/slimmie.css) and the components in product/design-system/slimmie-ui.css,
   so the demos on the page are the product, not a drawing of it. Only layout and website-only pieces live here.
   Ochre appears only on the punt (the dot that lands on the i, and the full stop after "Akkoord" in the closing),
   on "wacht op jou" and on the akkoord button. Buttons are ink. */

html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body.site { overflow-x: clip; }
.site main { display: block; }
.wrap { width: 100%; max-width: calc(var(--layout-content) + 2 * var(--layout-gutter)); margin: 0 auto; padding-inline: var(--layout-gutter); }
.eyebrow { font: var(--type-label); letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.skip { position: absolute; left: var(--space-4); top: -60px; z-index: 60; padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); background: var(--bg-inverse); color: var(--text-inverse); font: 600 14px/1.4 var(--font-brand); text-decoration: none; }
.skip:focus { top: var(--space-3); }
.rot90 { transform: rotate(90deg); }
.nowrap { white-space: nowrap; }
.hero__line { display: block; }
.punt-period { color: var(--logo-punt); }
.btn:active { transform: scale(.98); }

/* ---------- top bar: fixed; light text over the dark hero, paper once you scroll ---------- */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 30; padding-top: var(--space-3); transition: background var(--duration-slow) var(--ease-standard), box-shadow var(--duration-slow) var(--ease-standard), padding var(--duration-slow) var(--ease-standard); }
.topbar:not(.on-dark) { background: color-mix(in srgb, var(--bg-canvas) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--border-default); padding-top: 0; }
.topbar__in { display: flex; align-items: center; gap: var(--space-6); height: 68px; }
.topbar__logo { display: block; flex: none; border-radius: var(--radius-sm); }
.topbar__logo img { display: block; height: 26px; width: auto; }
.topbar .logo--dark, .topbar.on-dark .logo--light { display: none; }
.topbar.on-dark .logo--dark { display: block; }
/* the nav in a pill; the section you are in is marked */
.topbar__nav { display: flex; gap: 2px; margin-left: auto; padding: 4px; border-radius: var(--radius-full); background: var(--bg-surface); box-shadow: var(--shadow-1); transition: background var(--duration-slow) var(--ease-standard), box-shadow var(--duration-slow) var(--ease-standard); }
.topbar__nav a { padding: 9px var(--space-4); border-radius: var(--radius-full); color: var(--text-secondary); text-decoration: none; font: 500 14px/1 var(--font-brand); transition: color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard); }
.topbar__nav a:hover { color: var(--text-primary); }
.topbar__nav a[aria-current="true"] { background: var(--text-primary); color: var(--text-inverse); }
/* over a dark hero, once you scroll: an ink bar, so content never runs under a transparent menu */
.topbar.on-dark.is-scrolled { background: color-mix(in srgb, var(--neutral-950) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding-top: 0; }
.topbar.on-dark .topbar__nav { background: color-mix(in srgb, var(--neutral-50) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neutral-50) 18%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.topbar.on-dark .topbar__nav a { color: color-mix(in srgb, var(--neutral-50) 82%, transparent); }
.topbar.on-dark .topbar__nav a:hover { color: var(--neutral-50); }
.topbar.on-dark .topbar__cta { background: var(--neutral-50); color: var(--neutral-950); }
.topbar.on-dark .topbar__cta .btn__arrow { background: var(--neutral-950); color: var(--neutral-50); }
.topbar__cta { flex: none; transition: opacity var(--duration-base) var(--ease-standard), background var(--duration-slow) var(--ease-standard), color var(--duration-slow) var(--ease-standard); }

/* buttons with the arrow in a circle; the arrow moves on hover */
.btn--cta { gap: var(--space-3); padding-right: 5px; }
.btn--cta.btn--lg { height: 52px; padding-left: var(--space-6); padding-right: 6px; }
.btn__arrow { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--text-inverse); color: var(--text-primary); transition: transform var(--duration-base) var(--ease-standard); }
.btn--lg .btn__arrow { width: 40px; height: 40px; }
.btn__arrow .icon { width: 16px; height: 16px; }
.btn--cta:hover .btn__arrow { transform: translateX(3px); }
.btn--light { background: var(--neutral-50); color: var(--neutral-950); }
.btn--light:hover { background: var(--neutral-0); }
.btn--light .btn__arrow { background: var(--neutral-950); color: var(--neutral-50); }
.btn--ghost { background: transparent; color: var(--neutral-50); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neutral-50) 35%, transparent); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--neutral-50); }
/* eyebrow with the punt in front (the punt is a brand element) */
.eyebrow--punt { display: inline-flex; align-items: center; gap: 10px; }
.eyebrow--punt::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--logo-punt); flex: none; }

/* ---------- hero: the work, full width; the paperwork Slimmie did floats on top ---------- */
.hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: min(900px, 100svh); padding: 132px 0 var(--space-16); background: var(--neutral-950); color: var(--neutral-50); }
.hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__img { width: 100%; height: 100%; object-fit: cover; }
.hero__img--mirror { transform: scaleX(-1); }
/* home: the workshop is the setting, Slimmie is the subject: darker and slightly out of focus */
.hero--home .hero__img { filter: blur(2px) saturate(.85); transform: scale(1.04); }
.hero--home .hero__bg::before { content: ""; position: absolute; inset: 0; z-index: 1; background: color-mix(in srgb, var(--neutral-950) 38%, transparent); }
.hero__bg::after { z-index: 1; }
/* a scrim for legible text: ink, not a colour gradient */
.hero__bg::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, color-mix(in srgb, var(--neutral-950) 86%, transparent) 0%, color-mix(in srgb, var(--neutral-950) 58%, transparent) 40%, color-mix(in srgb, var(--neutral-950) 8%, transparent) 70%),
  linear-gradient(0deg, color-mix(in srgb, var(--neutral-950) 55%, transparent) 0%, transparent 40%); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: var(--space-12); align-items: end; width: 100%; }
.hero--page { min-height: min(720px, 92svh); }
.hero--page .hero__grid { grid-template-columns: minmax(0, 1fr); }
/* home: Slimmie stands at the bottom edge of the hero and says what Slimmie does */
.hero__robot { position: relative; align-self: end; margin-bottom: calc(-1 * var(--space-16)); }
.hero__robot .robot { width: 100%; margin: 0; }
/* the speech bubble sits above Slimmie, clear of the antenna; its tail points down at the antenna ball (≈ 36% across the render) */
.speech { position: absolute; z-index: 2; left: -16%; bottom: calc(100% + 14px); max-width: 280px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-xl); background: var(--neutral-50); color: var(--neutral-950); box-shadow: var(--shadow-3); font: 600 16px/1.4 var(--font-brand); transition: opacity var(--duration-slow) var(--ease-standard), transform var(--duration-slow) var(--ease-standard); transform-origin: 80% 100%; }
.speech::after { content: ""; position: absolute; right: 30px; bottom: -7px; width: 16px; height: 16px; border-radius: 0 0 4px 0; background: inherit; transform: rotate(45deg); }
.speech.is-waiting { opacity: 0; transform: translateY(8px) scale(.96); }
/* the punt lands on the i of the headline once, like the logo animation */
/* the punt drops onto the i once, then the wedge appears: the logo intro (slimmie-logo-intro.svg) */
.ipunt--intro.is-measured .ipunt__dot { animation: punt-drop var(--duration-punt) var(--ease-standard) 900ms both; }
.ipunt--intro.is-measured .ipunt__nib { animation: nib-in var(--duration-base) var(--ease-standard) 1320ms both; }
.hero .eyebrow { color: color-mix(in srgb, var(--neutral-50) 78%, transparent); }
.hero__title { font: var(--type-display-xl); letter-spacing: var(--type-display-xl-tracking); margin-top: var(--space-4); text-wrap: balance; max-width: 680px; color: var(--neutral-50); }
.hero__lead { font: var(--type-body-l); color: color-mix(in srgb, var(--neutral-50) 82%, transparent); margin-top: var(--space-5); max-width: 520px; text-wrap: pretty; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.hero__small { display: flex; align-items: center; gap: 6px; margin-top: var(--space-4); font: var(--type-body-s); color: color-mix(in srgb, var(--neutral-50) 72%, transparent); }

/* the i with the punt, built like the i in the logo. The font's own dot is square, so it is cut off and replaced by the
   logo's parts, in the logo's proportions to the stem (--sw): a round ochre punt (1.545 × stem) with a gap (0.364 × stem)
   above the stem, and the ochre wedge (0.864 × 0.81 stem) in the top of the stem. JS measures the stem (--sx, --st, --sw)
   and where to cut (--cut). Without JS the i keeps its own dot. */
.ipunt { position: relative; display: inline-block; }
.ipunt__i { display: inline-block; }
.ipunt__dot, .ipunt__nib { position: absolute; display: none; pointer-events: none; background: var(--logo-punt); }
.ipunt__dot { left: calc(var(--sx) - var(--sw) * .7725); top: calc(var(--st) - var(--sw) * 1.909); width: calc(var(--sw) * 1.545); height: calc(var(--sw) * 1.545); border-radius: 50%; }
.ipunt__nib { left: calc(var(--sx) - var(--sw) * .432); top: calc(var(--st) - 1px); width: calc(var(--sw) * .864); height: calc(var(--sw) * .81 + 1px); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 0; }
.ipunt.is-measured .ipunt__i { clip-path: inset(var(--cut) 0 0 0); }
.ipunt.is-measured .ipunt__dot, .ipunt.is-measured .ipunt__nib { display: block; }

/* the demo: a real work card from the product */
#demo-say-text { color: var(--text-secondary); }
/* while Slimmie prepares: the rows keep their place (no layout shift) and appear one by one */

/* ---------- sections ---------- */
.section { padding: var(--space-20) 0; }
.section__head { border-top: 1px solid var(--border-default); padding-top: var(--space-8); }
.section__head .eyebrow + .section__title { margin-top: var(--space-3); }
.section__title { font: var(--type-display-m); letter-spacing: var(--type-display-m-tracking); text-wrap: balance; max-width: 780px; }
.section__lead { font: var(--type-body-l); color: var(--text-secondary); max-width: 640px; margin-top: var(--space-3); text-wrap: pretty; }
/* title left, lead right: so not every section opens the same way */
.section__head--split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); align-items: end; }
.section__head--split .section__lead { margin-top: 0; }

/* ---------- page heading for the follow-up pages (light) ---------- */
.phero { padding: 150px 0 var(--space-16); }
.phero__title { margin-top: var(--space-4); max-width: 900px; font: var(--type-display-l); letter-spacing: var(--type-display-l-tracking); text-wrap: balance; }
.phero__lead { margin-top: var(--space-5); max-width: 640px; font: var(--type-body-l); color: var(--text-secondary); text-wrap: pretty; }
.section--flush { padding-top: 0; }
.section--clay { background: var(--bg-subtle); }
.textlink { display: inline-flex; align-items: center; gap: 4px; color: var(--text-primary); font-weight: 600; text-underline-offset: 3px; }

/* ---------- how it works in three steps, with the real product ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); margin-top: var(--space-12); }
.steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.steps li { padding-top: var(--space-5); border-top: 1px solid var(--border-strong); }
.steps__n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--text-primary); color: var(--text-inverse); font: 600 14px/1 var(--font-brand); }
.steps h3 { margin-top: var(--space-4); font: var(--type-heading-s); letter-spacing: var(--type-heading-s-tracking); }
.steps p { margin-top: 4px; font: var(--type-body-m); color: var(--text-secondary); }

/* ---------- what Slimmie does: four, short ---------- */
.skillgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-10); }
.skillgrid li { padding: var(--space-6); border-radius: var(--radius-xl); background: var(--bg-surface); box-shadow: var(--shadow-1); }
.skillgrid h3 { margin-top: var(--space-5); font: var(--type-heading-s); letter-spacing: var(--type-heading-s-tracking); }
.skillgrid p { margin-top: 4px; font: var(--type-body-m); color: var(--text-secondary); }

/* ---------- the demo band at the bottom of each page ---------- */
.ctaband { padding: var(--space-20) 0 0; }
.ctaband__in { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; align-items: center; gap: var(--space-8); padding: 0 var(--space-10) 0 var(--space-6); border-radius: var(--radius-xl); background: var(--bg-surface); box-shadow: var(--shadow-2); overflow: hidden; }
.ctaband__robot { align-self: end; width: 220px; height: auto; margin-top: var(--space-6); margin-bottom: -2px; }
.ctaband__title { font: var(--type-heading-l); letter-spacing: var(--type-heading-l-tracking); }
.ctaband__copy p { margin-top: 4px; font: var(--type-body-l); color: var(--text-secondary); }
.meet__grid--small { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; }
.faq.faq--page { display: block; }
.faq--page .faq__list { max-width: 820px; }
.demo-page { padding-top: 120px; }

/* ---------- the software you already use (honest: built for, see the FAQ) ---------- */
.logobar__in { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding-block: var(--space-8); border-block: 1px solid var(--border-default); text-align: center; }
.logobar__title { font: var(--type-label); letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.logobar .logorow { justify-content: center; gap: var(--space-3) var(--space-6); }
.logobar .logorow li { font-size: 14px; color: var(--text-secondary); }
.logobar__more { font: 600 13px/1.3 var(--font-brand); color: var(--text-primary); text-underline-offset: 3px; }

/* ---------- who it is for: photo cards, the title on the photo; a card opens the vaardigheid that fits ---------- */
.section__head--center { border-top: 0; padding-top: 0; text-align: center; display: flex; flex-direction: column; align-items: center; }
.section__head--center .section__title { max-width: 820px; }
.section__head--center .section__lead { max-width: 560px; }
.aud { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-12); }
.aud__card { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--radius-xl); overflow: hidden; background: var(--neutral-900); color: var(--neutral-50); text-decoration: none; isolation: isolate; }
.aud__card:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 3px; }
.aud__img { position: absolute; inset: 0; z-index: -1; }
.aud__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-punt) var(--ease-rustig); }
.aud__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, color-mix(in srgb, var(--neutral-950) 82%, transparent) 0%, color-mix(in srgb, var(--neutral-950) 30%, transparent) 45%, transparent 70%); }
.aud__card:hover .aud__img img { transform: scale(1.05); }
.aud__body { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-6) 72px var(--space-6) var(--space-6); }
.aud__title { font: var(--type-heading-m); letter-spacing: var(--type-heading-m-tracking); }
.aud__text { font: var(--type-body-m); color: color-mix(in srgb, var(--neutral-50) 82%, transparent); }
.aud__arrow { position: absolute; right: var(--space-5); bottom: var(--space-6); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--neutral-50); color: var(--neutral-950); transition: transform var(--duration-base) var(--ease-standard); }
.aud__arrow .icon { width: 18px; height: 18px; }
.aud__card:hover .aud__arrow { transform: translateX(3px); }

/* ---------- the problem band: the one coloured block. Ink by default; ochre as a brand surface with ?vlak=oker ---------- */
.band { --band-bg: var(--neutral-950); --band-text: var(--neutral-50); --band-muted: var(--neutral-400); --band-line: var(--neutral-800);
  background: var(--band-bg); color: var(--band-text); padding: var(--space-20) 0; }
.band--clay { --band-bg: var(--bg-subtle); --band-text: var(--text-primary); --band-muted: var(--text-secondary); --band-line: var(--border-strong); }
.vlak-oker .band { --band-bg: var(--ochre-500); --band-text: var(--neutral-950); --band-muted: var(--neutral-800); --band-line: color-mix(in srgb, var(--neutral-950) 22%, transparent); }
.band__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-16); align-items: start; }
.band .eyebrow { color: var(--band-muted); }
.vlak-oker .band .eyebrow--punt::before { background: var(--neutral-950); }
.band__title { margin-top: var(--space-4); font: var(--type-display-l); letter-spacing: var(--type-display-l-tracking); text-wrap: balance; }
.band__lead { margin-top: var(--space-4); max-width: 440px; font: var(--type-body-l); color: var(--band-muted); }
.band .btn { margin-top: var(--space-8); }
.band .btn--primary { background: var(--band-text); color: var(--band-bg); }
.band .btn--primary .btn__arrow { background: var(--band-bg); color: var(--band-text); }
.pains li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-6) 0; border-top: 1px solid var(--band-line); }
.pains li:first-child { border-top: 0; padding-top: var(--space-2); }
.pains .icon { width: 30px; height: 30px; }
.pains h3 { font: var(--type-heading-s); letter-spacing: var(--type-heading-s-tracking); }
.pains p { margin-top: 4px; font: var(--type-body-m); color: var(--band-muted); }

/* ---------- ticker: the vaardigheden, with the punt between them ---------- */
.marquee { overflow: hidden; padding: var(--space-6) 0; background: var(--bg-canvas); border-block: 1px solid var(--border-default); }
.vlak-oker .marquee { background: var(--neutral-950); color: var(--neutral-50); border: 0; }
.marquee__track { display: flex; align-items: center; gap: var(--space-8); width: max-content; animation: marquee var(--duration-loop) linear infinite; }
.marquee__track span { font: var(--type-display-m); letter-spacing: var(--type-display-m-tracking); white-space: nowrap; }
.marquee__punt { width: 16px; height: 16px; border-radius: 50%; background: var(--logo-punt); flex: none; }
@keyframes marquee { to { transform: translateX(calc(-50% - var(--space-4))); } }

.section--tight { padding-top: var(--space-8); }
.logobar + .section .section__head { border-top: 0; padding-top: 0; }
.cta-inline { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); margin-top: var(--space-16); padding: var(--space-6) var(--space-8); border-radius: var(--radius-xl); background: var(--bg-surface); box-shadow: var(--shadow-1); }
.cta-inline p { font: var(--type-body-l); }
.cta-inline p b { display: block; font: var(--type-heading-s); letter-spacing: var(--type-heading-s-tracking); }
.cta-inline p span { color: var(--text-secondary); }
.cta-inline .btn { flex: none; }

/* ---------- how it works page: hero with the real app ---------- */
.hhero { position: relative; background: var(--neutral-950); color: var(--neutral-50); padding: 150px 0 0; text-align: center; overflow: hidden; }
.hhero__in { display: flex; flex-direction: column; align-items: center; }
.hhero .eyebrow { color: color-mix(in srgb, var(--neutral-50) 78%, transparent); }
.hhero__title { margin-top: var(--space-5); font: var(--type-display-l); letter-spacing: var(--type-display-l-tracking); text-wrap: balance; max-width: 960px; }
.hhero__flow { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-3); margin-top: var(--space-8); }
.hhero__flow li { display: inline-flex; align-items: center; gap: var(--space-2); height: 44px; padding: 0 var(--space-5) 0 var(--space-4); border-radius: var(--radius-full); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neutral-50) 22%, transparent); font: 600 16px/1 var(--font-brand); }
.hhero__flow li .status-icon { width: 20px; height: 20px; color: var(--neutral-50); }
.hhero__flow li small { font: 500 14px/1 var(--font-brand); color: color-mix(in srgb, var(--neutral-50) 65%, transparent); }
.hhero__flow li.is-yours { background: var(--neutral-50); color: var(--neutral-950); box-shadow: none; }
.hhero__flow li.is-yours .status-icon { color: var(--neutral-950); }
.hhero__flow li.is-yours small { color: var(--neutral-600); }
.hhero__flow .hhero__sep { height: auto; padding: 0; box-shadow: none; color: color-mix(in srgb, var(--neutral-50) 50%, transparent); }
.hhero .hero__actions { justify-content: center; margin-top: var(--space-10); }
.section--after-shot { padding-top: var(--space-16); }

/* the illustration sits on the bottom edge of the hero and runs into the next section */
.hhero__show { position: relative; z-index: 1; width: min(1080px, calc(100% - 2 * var(--layout-gutter))); margin: var(--space-16) auto 0; text-align: left; }
.hhero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 200px; background: var(--bg-canvas); }

/* ---------- showcase: an illustration of the idea, never a screenshot of the product ---------- */
.showcase { position: relative; height: 460px; border-radius: var(--radius-xl); background: var(--bg-subtle); box-shadow: inset 0 0 0 1px var(--border-default); overflow: hidden; }
.showcase::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(color-mix(in srgb, var(--text-primary) 9%, transparent) 1.2px, transparent 1.4px); background-size: 22px 22px; }   /* a quiet dot grid: a desk, not a dashboard */
.showcase__card { position: absolute; background: var(--bg-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); color: var(--text-primary); }
.showcase__brief { left: 6%; top: 11%; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3); border-radius: var(--radius-xl) var(--radius-xl) var(--radius-xl) 6px; }
.showcase__brief img { width: 48px; height: 46px; object-fit: contain; }
.showcase__brief b { display: block; font: var(--type-heading-s); letter-spacing: var(--type-heading-s-tracking); }
.showcase__brief span { font: var(--type-body-m); color: var(--text-secondary); }
.showcase__list { right: 6%; top: 22%; width: min(520px, 54%); padding: var(--space-4) var(--space-5) var(--space-2); }
.showcase__label { display: flex; align-items: center; gap: var(--space-2); padding-bottom: var(--space-3); font: 600 15px/1.3 var(--font-brand); }
.showcase__label .count { margin-left: 2px; }
.showcase__row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; border-top: 1px solid var(--border-default); font: var(--type-ui); }
.showcase__row b { display: block; font-weight: 600; }
.showcase__row small { display: block; font: var(--type-body-s); color: var(--text-secondary); }
.showcase__done { left: 10%; bottom: 12%; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5) var(--space-3) var(--space-4); font: var(--type-ui); }
.showcase__done .status-icon { width: 22px; height: 22px; flex: none; }
.showcase__done b { display: block; font-weight: 600; }
.showcase__done small { display: block; font: var(--type-body-s); color: var(--text-secondary); }
/* the cards arrive one by one when the illustration comes into view */
.js .showcase:not(.is-in) .showcase__card { opacity: 0; transform: translateY(14px); }
.showcase__card { transition: opacity var(--duration-slow) var(--ease-standard), transform var(--duration-punt) var(--ease-standard); }
.showcase__list { transition-delay: 160ms; }
.showcase__done { transition-delay: 420ms; }
.showcase-wrap { max-width: 1080px; margin: var(--space-16) auto 0; }
.showcase-wrap__cap { margin-top: var(--space-4); text-align: center; font: var(--type-body-m); color: var(--text-secondary); }
.showcase-wrap__cap a { margin-left: 6px; color: var(--text-primary); font-weight: 600; text-underline-offset: 3px; }

/* ---------- the three steps as cards; the middle one (yours) is ink ---------- */
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-12); }
.three__card { display: flex; flex-direction: column; padding: var(--space-6); border-radius: var(--radius-xl); background: var(--bg-surface); box-shadow: var(--shadow-1); }
.three__card--ink { background: var(--neutral-950); color: var(--neutral-50); box-shadow: var(--shadow-3);
  --text-primary: var(--neutral-50); --text-secondary: var(--neutral-400); --text-tertiary: var(--neutral-500); --text-inverse: var(--neutral-950);
  --bg-surface: var(--neutral-900); --bg-subtle: var(--neutral-800); --bg-canvas: var(--neutral-900); --border-default: var(--neutral-800); --border-strong: var(--neutral-700); }
.three__who { display: flex; align-items: center; gap: var(--space-3); font: 600 14px/1 var(--font-brand); color: var(--text-secondary); }
.three__n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--text-primary); color: var(--text-inverse); font: 600 17px/1 var(--font-brand); }
.three__card h3 { margin-top: var(--space-5); font: var(--type-heading-m); letter-spacing: var(--type-heading-m-tracking); }
.three__text { margin-top: var(--space-2); font: var(--type-body-m); color: var(--text-secondary); }
.three__ui { display: flex; flex-direction: column; gap: var(--space-2); margin-top: auto; padding-top: var(--space-6); }
.three__ui .bubble { max-width: 92%; font: var(--type-body-s); }
.three__draft { align-self: flex-end; background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--border-strong); border-top-right-radius: 4px; }
.three__ui .note { font: var(--type-body-s); }
.three__btns { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.three__btns .btn { cursor: default; }
.three__btns .btn:active { transform: none; }
.three__ui .timeline { margin-top: 0; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--bg-canvas); }
.three__ui .timeline li:last-child { padding-bottom: 0; }

/* ---------- a day with Slimmie ---------- */
.day { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-16); align-items: center; }
.day__copy .section__title { margin-top: var(--space-4); }
.day__note { margin-top: var(--space-3); font: var(--type-body-m); color: var(--text-secondary); }
.day__list { position: relative; margin-top: var(--space-8); }
.day__list::before { content: ""; position: absolute; left: 63px; top: 10px; bottom: 10px; width: 1px; background: var(--border-strong); }
.day__list li { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--space-8); padding: var(--space-3) 0; }
.day__list li::before { content: ""; position: absolute; left: 58px; top: calc(var(--space-3) + 6px); width: 11px; height: 11px; border-radius: 50%; background: var(--bg-subtle); box-shadow: inset 0 0 0 2px var(--text-primary); }
.day__list li.is-yours::before { background: var(--logo-punt); box-shadow: none; }   /* your akkoord: the punt */
.day__list time { font: 600 14px/1.6 var(--font-brand); font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.day__list h3 { font: var(--type-heading-s); letter-spacing: var(--type-heading-s-tracking); }
.day__list p { margin-top: 2px; font: var(--type-body-m); color: var(--text-secondary); }
.day__photo { position: relative; margin: 0; }
.day__photo > img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 60% center; border-radius: var(--radius-xl); }
.day__photo figcaption { position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--bg-surface); box-shadow: var(--shadow-3); font: var(--type-body-s); }
.day__photo figcaption img { width: 40px; height: 38px; object-fit: contain; flex: none; }
.day__photo figcaption b { display: block; font: 600 14px/1.3 var(--font-brand); }

/* ---------- the three standen ---------- */
.standen3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-10); }
.standen3 li { position: relative; padding: var(--space-6); border-radius: var(--radius-xl); background: var(--bg-surface); box-shadow: var(--shadow-1); }
.standen3 li.is-start { box-shadow: inset 0 0 0 2px var(--text-primary), var(--shadow-2); }
.standen3__badge { position: absolute; top: var(--space-5); right: var(--space-5); padding: 4px 10px; border-radius: var(--radius-full); background: var(--text-primary); color: var(--text-inverse); font: 600 12px/1.3 var(--font-brand); }
.standen3__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--bg-subtle); }
.standen3__icon .status-icon { color: var(--text-primary); }
.standen3 h3 { margin-top: var(--space-5); font: var(--type-heading-s); letter-spacing: var(--type-heading-s-tracking); }
.standen3 p { margin-top: var(--space-2); font: var(--type-body-m); color: var(--text-secondary); }
.standen3 .standen3__eg { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-default); font: var(--type-body-s); color: var(--text-primary); }
.standen3 .standen3__eg::before { content: "Bijvoorbeeld: "; color: var(--text-secondary); }
.standen3__rule { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-8); font: var(--type-body-l); }

/* ---------- getting started, on ink ---------- */
.begin .section__head { border-top: 0; padding-top: 0; }
.begin .eyebrow { color: var(--text-secondary); }
.begin__steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-12); }
.begin__steps::before { content: ""; position: absolute; left: 28px; right: 28px; top: 28px; height: 1px; background: var(--border-strong); }
.begin__steps li { position: relative; }
.begin__n { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--neutral-50); color: var(--neutral-950); font: 600 22px/1 var(--font-brand); }
.begin__steps h3 { margin-top: var(--space-5); font: var(--type-heading-s); letter-spacing: var(--type-heading-s-tracking); }
.begin__steps p { margin-top: 4px; font: var(--type-body-m); color: var(--text-secondary); }

/* ---------- vaardigheden: a list on the left, the work on the right ---------- */
.skills { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--space-12); margin-top: var(--space-12); align-items: start; }
.skills__tabs { position: relative; display: flex; flex-direction: column; border-top: 1px solid var(--border-default); }
.skilltab { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-3); align-items: start; width: 100%; padding: var(--space-4) var(--space-3) var(--space-4) var(--space-4); border: 0; border-bottom: 1px solid var(--border-default); background: transparent; color: var(--text-secondary); font: inherit; text-align: left; cursor: pointer; transition: color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard); }
.skilltab .icon { margin-top: 2px; }
.skilltab b { display: block; font: 600 16px/1.35 var(--font-brand); }
.skilltab small { display: block; margin-top: 2px; font: var(--type-body-s); }
.skilltab:hover { color: var(--text-primary); }
.skilltab[aria-selected="true"] { color: var(--text-primary); }
.skilltab[aria-selected="true"] small { color: var(--text-secondary); }
.skilltab:focus-visible { outline-offset: -2px; }
.skills__ind { position: absolute; left: 0; top: 0; width: 2px; background: var(--text-primary); border-radius: 1px; transition: transform var(--duration-slow) var(--ease-standard), height var(--duration-slow) var(--ease-standard); pointer-events: none; }
.js .skills__panels { display: grid; }
.js .skillpanel { grid-area: 1 / 1; }
.js .skillpanel:not(.is-on) { visibility: hidden; }
.skillpanel + .skillpanel { margin-top: var(--space-10); }
.js .skillpanel + .skillpanel { margin-top: 0; }
.skillpanel:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 6px; border-radius: var(--radius-lg); }
.skillpanel.is-on .skillpanel__ui { animation: panel-in var(--duration-slow) var(--ease-standard) both; }
.skillpanel.is-on .skillpanel__facts { animation: panel-in var(--duration-slow) var(--ease-standard) 60ms both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } }
.skillpanel__ui { max-width: 620px; }
.skillpanel__ui .thread { margin-top: 0; }
.skillpanel__facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); max-width: 620px; margin: var(--space-6) 0 0; }
.skillpanel__facts dt { font: var(--type-label); letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
.skillpanel__facts dd { margin: var(--space-2) 0 0; font: var(--type-body-m); }
.skills__foot { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-10); font: var(--type-body-l); }
.skills__foot .icon { flex: none; }
.software { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-4) var(--space-12); margin-top: var(--space-16); padding-top: var(--space-8); border-top: 1px solid var(--border-default); }
.software__title { font: var(--type-heading-m); letter-spacing: var(--type-heading-m-tracking); }
.software__lead { grid-column: 1; font: var(--type-body-m); color: var(--text-secondary); }
.logorow { grid-column: 2; grid-row: 1 / span 3; display: flex; flex-wrap: wrap; align-content: flex-start; gap: var(--space-4) var(--space-6); }
.logorow li { display: inline-flex; align-items: center; gap: 10px; font: 600 15px/1.3 var(--font-brand); }
.logorow .applogo { width: 32px; height: 32px; border-radius: 9px; }
.logorow .applogo i, .logorow .applogo img { width: 20px; height: 20px; }
.logorow .applogo--fill img { width: 100%; height: 100%; }
.software__note { grid-column: 1; font: var(--type-caption); letter-spacing: var(--type-caption-tracking); color: var(--text-secondary); }
.attach { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-2); padding: 4px 10px 4px 8px; border-radius: var(--radius-full); background: var(--bg-subtle); font: 600 12.5px/1.3 var(--font-brand); }
.mini-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-2); }
.mini-head b { font: var(--type-heading-s); letter-spacing: var(--type-heading-s-tracking); }
.mini-label { margin-top: var(--space-4); }
.skillpanel .assume { margin-top: var(--space-2); font: var(--type-body-s); }
.skillpanel .note { margin-top: var(--space-4); font: var(--type-body-s); }
.mini-parts { margin-top: var(--space-2); }
.mini-part { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; padding: var(--space-3) 0; border-top: 1px solid var(--border-default); font: var(--type-ui); }
.mini-part .icon { margin-top: 1px; }
.mini-part b { display: block; font-weight: 600; }
.mini-part span { color: var(--text-secondary); font: var(--type-body-s); }
.mini-part--wacht { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border: 0; border-radius: var(--radius-md); box-shadow: inset 3px 0 0 var(--status-wacht), inset 0 0 0 1px var(--border-default); grid-template-columns: 20px minmax(0, 1fr); }
.mini-product { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-3); }
.mini-product__img { aspect-ratio: 1; border-radius: var(--radius-md); background: radial-gradient(circle at 50% 38%, var(--neutral-200) 0 22%, transparent 23%), linear-gradient(var(--bg-subtle), var(--bg-subtle)); }
.mini-product b { font: 600 15px/1.35 var(--font-brand); }
.mini-product p { margin: 4px 0; font: var(--type-body-s); }
.mini-foot { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border-default); }
.mini-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-3); border-top: 1px solid var(--border-default); }
.mini-metrics > div { padding: var(--space-3) var(--space-3) var(--space-3) 0; }
.mini-metrics > div + div { padding-left: var(--space-4); border-left: 1px solid var(--border-default); }
.mini-metrics span { display: block; font: 600 12.5px/1.3 var(--font-brand); color: var(--text-secondary); }
.mini-metrics b { display: block; margin-top: 4px; font: 600 26px/1.1 var(--font-brand); letter-spacing: -.02em; }
.mini-metrics small { display: block; margin-top: 4px; font: var(--type-body-s); color: var(--text-secondary); }
.mini-say { padding-top: var(--space-3); border-top: 1px solid var(--border-default); font: var(--type-body-s); }

/* ---------- klussenbord: the cards move on by themselves ---------- */
.sboard-wrap { margin-top: var(--space-12); }
.sboard { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2); }
.scol { border-radius: var(--radius-lg); background: var(--bg-subtle); padding: var(--space-2); min-height: 236px; }
.scol__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); padding: var(--space-1) var(--space-2) var(--space-3); font: 600 14px/1.3 var(--font-brand); }
.scol__head small { font: var(--type-body-s); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.sboard .bcard { cursor: default; will-change: transform; }
.sboard .bcard:hover { box-shadow: var(--shadow-1); }
.sboard .bcard--wacht:hover { box-shadow: var(--shadow-1), inset 3px 0 0 var(--status-wacht); }
.sboard .bcard__state { color: var(--text-secondary); }
.sboard .bcard--wacht .bcard__state { color: var(--text-primary); }
.board-log { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); min-height: 44px; }
.board-log__face { flex: none; }
.board-log__face img { display: block; width: 40px; height: 38px; object-fit: contain; }
.board-log p { font: var(--type-body-m); }
.board-log p.is-new { animation: s-fade var(--duration-slow) var(--ease-standard); }

.oppad { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: var(--space-12); align-items: center; margin-top: var(--space-16); padding-top: var(--space-12); border-top: 1px solid var(--border-default); }
.oppad__visual { position: relative; display: flex; justify-content: flex-end; min-height: 520px; }
.oppad__photo { width: 72%; margin: 0; border-radius: var(--radius-xl); overflow: hidden; background: var(--bg-subtle); }
.oppad__photo img { width: 100%; height: 100%; object-fit: cover; }
.oppad__visual .phone { position: absolute; left: 0; top: 50%; translate: 0 -50%; zoom: .82; }
.oppad__title { font: var(--type-heading-l); letter-spacing: var(--type-heading-l-tracking); max-width: 520px; }
.oppad__copy > p { margin-top: var(--space-4); font: var(--type-body-l); color: var(--text-secondary); max-width: 540px; }
.ticks { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); font: var(--type-body-m); }
.ticks li { display: flex; align-items: center; gap: var(--space-2); }
/* a plain phone: no notch or brand, just a screen in a dark frame */
.phone { width: 300px; height: 600px; padding: 9px; border-radius: 46px; background: var(--neutral-950); box-shadow: var(--shadow-3); justify-self: center; }
.phone__screen { height: 100%; overflow: hidden; border-radius: 38px; background: var(--neutral-50); color: var(--neutral-950); }
.phone__bar { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 22px 18px 0; border-bottom: 1px solid var(--neutral-200); }
.phone__bar img { height: 16px; width: auto; }
.phone__bar .seg { padding: 3px; }
.phone__bar .seg a { height: 24px; padding: 0 10px; font-size: 11.5px; }
.phone__body { padding: 16px; }
.phone__when { font: var(--type-caption); letter-spacing: .02em; color: var(--text-secondary); }
.phone__title { margin-top: 4px; font: 600 22px/1.15 var(--font-brand); letter-spacing: -.015em; }
.phone__addr { display: flex; align-items: center; gap: 6px; margin-top: 6px; font: var(--type-body-s); }
.phone__brief { display: grid; grid-template-columns: 24px 1fr; gap: 8px; margin-top: 12px; padding: 10px; border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: var(--shadow-1); font: 400 12.5px/1.45 var(--font-brand); }
.phone__brief img { width: 24px; height: 23px; object-fit: contain; }
.phone__checks { margin-top: 12px; border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: var(--shadow-1); }
.pcheck { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; font: 500 13px/1.3 var(--font-brand); }
.pcheck + .pcheck { border-top: 1px solid var(--border-default); }
.pcheck i { position: relative; flex: none; width: 20px; height: 20px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--border-strong); transition: background var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard); }
.pcheck i::after { content: ""; position: absolute; left: 5px; top: 5px; width: 9px; height: 5px; border: 2px solid var(--text-inverse); border-top: 0; border-right: 0; transform: rotate(-45deg) scale(0); transition: transform var(--duration-base) var(--ease-standard); }
.pcheck.is-done { color: var(--text-secondary); }
.pcheck.is-done i { background: var(--text-primary); box-shadow: none; }
.pcheck.is-done i::after { transform: rotate(-45deg) scale(1); }
.phone__rec { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: var(--shadow-1); }
.phone__rec b { display: block; font: 600 13px/1.3 var(--font-brand); }
.phone__mic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-inverse); color: var(--text-inverse); }
.phone__mic.is-rec { box-shadow: 0 0 0 4px var(--bg-subtle); }
.phone__recstate { display: flex; align-items: center; gap: 6px; margin-top: 2px; font: var(--type-caption); color: var(--text-secondary); }
.phone__recstate .icon { width: 14px; height: 14px; }

/* ---------- the colleague ---------- */
.meet { padding-bottom: 0; }
.meet__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: var(--space-12); align-items: end; }
.meet__copy { padding-bottom: var(--space-24); }
.meet__copy .section__title { margin-top: var(--space-4); }
.meet__copy { border-top: 1px solid var(--border-default); padding-top: var(--space-8); }
.chat { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-8); max-width: 480px; }
.chat .bubble { max-width: 100%; }
.chat .say--me .bubble { max-width: 80%; }
.chat .avatar { background: var(--neutral-50); }
.chat .avatar img { object-fit: contain; padding: 3px; }
.meet__robot { align-self: end; }
.robot { position: relative; display: block; width: 100%; aspect-ratio: 1; margin: 0 0 -1px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.robot:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -12px; border-radius: var(--radius-xl); }
.robot img, .robot__eyes { position: absolute; inset: 0; width: 100%; height: 100%; }
.robot__eyes { overflow: visible; pointer-events: none; }

/* ---------- control: ink band ---------- */
.band-ink { background: var(--bg-inverse); color: var(--neutral-50);
  /* the dark-theme aliases from the tokens, for this band only */
  --text-primary: var(--neutral-50); --text-secondary: var(--neutral-400); --text-tertiary: var(--neutral-500); --text-inverse: var(--neutral-950);
  --bg-surface: var(--neutral-900); --bg-subtle: var(--neutral-800); --border-default: var(--neutral-800); --border-strong: var(--neutral-700); --border-focus: var(--neutral-50); }
.controle__head { border-top: 1px solid var(--border-strong); padding-top: var(--space-8); }
.controle__title { font: var(--type-display-l); letter-spacing: var(--type-display-l-tracking); text-wrap: balance; max-width: 900px; }
.rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-12); margin-top: var(--space-12); counter-reset: none; }
.rules li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-6) 0; border-top: 1px solid var(--border-default); }
.rules__n { font: 600 28px/1 var(--font-brand); letter-spacing: -.02em; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.rules h3 { font: var(--type-heading-s); letter-spacing: var(--type-heading-s-tracking); }
.rules p { margin-top: var(--space-2); font: var(--type-body-m); color: var(--text-secondary); max-width: 440px; }
.rules--short { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--space-6); }
.rules--short li { grid-template-columns: 40px minmax(0, 1fr); align-items: baseline; padding: var(--space-5) 0; }
.rules--short h3 { font: 600 17px/1.35 var(--font-brand); }
.pause-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--border-default); }
.pause-row .pause, .pause-row .pause__state { margin: 0; }
.pause { display: inline-flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); font: var(--type-body-s); color: var(--text-secondary); cursor: pointer; }
.pause b { color: var(--text-primary); font-weight: 600; }
.pause__state { min-height: 1.5em; margin-top: var(--space-2); font: var(--type-body-s); color: var(--text-primary); }

/* ---------- questions ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); }
.faq__head { border-top: 1px solid var(--border-default); padding-top: var(--space-8); }
.faq__list { border-top: 1px solid var(--border-default); }
.faq__list details { border-top: 1px solid var(--border-default); }
.faq__list details:first-child { border-top: 0; }
.faq__list summary { padding: var(--space-5) 0; font: 600 17px/1.4 var(--font-brand); border-radius: var(--radius-sm); }
.faq__list summary:hover { color: var(--text-primary); }
.faq__list details p { padding-bottom: var(--space-5); font: var(--type-body-m); max-width: 600px; }
@supports (interpolate-size: allow-keywords) {
  .faq__list { interpolate-size: allow-keywords; }
  .faq__list details::details-content { block-size: 0; overflow: hidden; transition: block-size var(--duration-slow) var(--ease-standard), content-visibility var(--duration-slow) allow-discrete; }
  .faq__list details[open]::details-content { block-size: auto; }
}

/* ---------- the demo request: the one thing we ask (prototype: the form does not send yet) ---------- */
.cta { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); border-radius: var(--radius-xl); background: var(--bg-surface); box-shadow: var(--shadow-2); overflow: hidden; }
.cta__photo { position: relative; margin: 0; min-height: 100%; background: var(--bg-subtle); }
.cta__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta__body { padding: var(--space-10) var(--space-12) var(--space-10); }
.closing__logo { display: block; width: 150px; height: auto; overflow: visible; }
.closing__n { transform-box: fill-box; transform-origin: 50% 0; }
.js .closing:not(.is-in) .closing__o { opacity: 0; transform: translateY(-60px); }
.js .closing:not(.is-in) .closing__n { transform: scaleY(0); }
.closing.is-in .closing__o { animation: punt-drop var(--duration-punt) var(--ease-standard) 200ms both; }
.closing.is-in .closing__n { animation: nib-in var(--duration-base) var(--ease-standard) 620ms both; }
@keyframes punt-drop { from { opacity: 0; transform: translateY(-60px); } to { opacity: 1; transform: none; } }
@keyframes nib-in { from { transform: scaleY(0); } to { transform: none; } }
.cta__title { margin-top: var(--space-6); font: var(--type-display-m); letter-spacing: var(--type-display-m-tracking); text-wrap: balance; }
.cta .ticks { margin-top: var(--space-4); }
.demo-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-8); }
.demo-form .field--wide { grid-column: 1 / -1; }
.demo-form .input { width: 100%; }
.demo-form .input[aria-invalid="true"] { border-color: var(--feedback-error-text); }
.select-input { appearance: none; padding-right: 40px; background: var(--bg-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369645A' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 18px; }
.demo-form__msg { min-height: 1.5em; font: var(--type-body-s); color: var(--text-secondary); }
.demo-form__msg.is-ok { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--feedback-success-bg); color: var(--feedback-success-text); }

/* ---------- coming soon: one screen, an e-mail field ---------- */
.soon { min-height: 100svh; }
.soon-form { margin-top: var(--space-8); max-width: 560px; }
.soon-form__row { display: flex; gap: var(--space-2); padding: 6px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--neutral-50) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neutral-50) 22%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.soon-form__input { flex: 1; min-width: 0; height: 52px; padding: 0 var(--space-5); border: 0; border-radius: var(--radius-full); background: transparent; color: var(--neutral-50); font: var(--type-body-l); }
.soon-form__input::placeholder { color: color-mix(in srgb, var(--neutral-50) 55%, transparent); }
.soon-form__input:focus { outline: none; }
.soon-form__row:focus-within { box-shadow: inset 0 0 0 2px var(--neutral-50); }
.soon-form__row .btn { flex: none; }
.soon-form.is-invalid .soon-form__row { box-shadow: inset 0 0 0 2px var(--red-300); }
.soon-form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.soon-form__note { display: flex; align-items: center; gap: 6px; margin-top: var(--space-3); padding-left: var(--space-5); font: var(--type-body-s); color: color-mix(in srgb, var(--neutral-50) 72%, transparent); }
.soon-form__msg { min-height: 1.5em; margin-top: var(--space-2); padding-left: var(--space-5); font: 600 15px/1.45 var(--font-brand); color: var(--neutral-50); }
.soon-form__msg:empty { display: none; }
.soon-form.is-done .soon-form__row, .soon-form.is-done .soon-form__note { display: none; }
.soon-form.is-done .soon-form__msg { display: flex; align-items: center; gap: var(--space-3); margin-top: 0; padding: var(--space-4) var(--space-5); border-radius: var(--radius-xl); background: var(--neutral-50); color: var(--neutral-950); font: 600 16px/1.45 var(--font-brand); }
.soon-form.is-done .soon-form__msg .status-icon { width: 22px; height: 22px; flex: none; color: var(--neutral-950); }
.footer.footer--bare { margin-top: 0; padding: var(--space-6) 0; }
.footer.footer--bare .footer__in { margin-top: 0; padding-top: 0; border-top: 0; justify-content: space-between; }
.footer.footer--bare .footer__small { margin-top: 0; }

/* ---------- footer: ink, one huge line ---------- */
.footer { background: var(--neutral-950); color: var(--neutral-50); padding: var(--space-20) 0 var(--space-8); margin-top: var(--space-16);
  --text-primary: var(--neutral-50); --text-secondary: var(--neutral-400); --text-tertiary: var(--neutral-500); --border-default: var(--neutral-800); }
.footer__statement { font: var(--type-display-2xl); letter-spacing: var(--type-display-2xl-tracking); text-wrap: balance; max-width: 1000px; }
.footer__in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-10); margin-top: var(--space-16); padding-top: var(--space-8); border-top: 1px solid var(--border-default); }
.footer__brand { display: flex; align-items: center; gap: var(--space-4); }
.footer__brand img { height: 24px; width: auto; }
.footer__brand p { font: 600 14px/1.3 var(--font-brand); color: var(--text-secondary); }
.footer__nav { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-left: auto; }
.footer__nav a { color: var(--text-secondary); text-decoration: none; font: 500 14px/1.4 var(--font-brand); }
.footer__nav a:hover { color: var(--text-primary); }
.footer__small { margin-top: var(--space-6); font: var(--type-body-s); color: var(--text-tertiary); }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  .hero__title { font: var(--type-display-m); letter-spacing: var(--type-display-m-tracking); }
  .statement__title { font: var(--type-display-l); letter-spacing: var(--type-display-l-tracking); }
  .hhero__title { font: var(--type-display-m); letter-spacing: var(--type-display-m-tracking); }
  .three { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-inline: auto; }
  .begin__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-10); }
  .begin__steps::before { display: none; }
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: var(--space-8); }
  .skillgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .band__grid { gap: var(--space-10); }
  .rules--short { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta__body { padding: var(--space-8); }
  /* smaller screens: the six stages in two rows of three, so a card that moves stays in view */
  .sboard { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .scol { min-height: 180px; }
}
@media (max-width: 900px) {
  .topbar__nav { display: none; }
  .topbar__cta { margin-left: auto; }
  .hero { min-height: 0; padding-top: 120px; }
  .hero__bg::after { background: linear-gradient(0deg, color-mix(in srgb, var(--neutral-950) 88%, transparent) 0%, color-mix(in srgb, var(--neutral-950) 55%, transparent) 55%, color-mix(in srgb, var(--neutral-950) 25%, transparent) 100%); }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .hero__robot { width: min(360px, 80%); justify-self: end; margin-top: 150px; }
  .speech { left: -24%; max-width: 230px; font-size: 14px; }
  .phero { padding-top: 120px; }
  .phero__title { font: var(--type-display-m); letter-spacing: var(--type-display-m-tracking); }
  .steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .ctaband__in { grid-template-columns: 140px minmax(0, 1fr); padding: 0 var(--space-6) var(--space-6) var(--space-4); }
  .ctaband__robot { width: 140px; }
  .ctaband__in .btn { grid-column: 1 / -1; justify-self: start; }
  .meet__grid--small { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .hhero { padding-top: 120px; }
  .showcase { height: auto; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); }
  .showcase__card { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; }
  .showcase__brief { align-self: flex-start; }
  .showcase__done { align-self: flex-start; }
  .day { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .day__photo > img { aspect-ratio: 16 / 10; }
  .standen3 { grid-template-columns: minmax(0, 1fr); }
  .band__grid { grid-template-columns: minmax(0, 1fr); }
  .aud { grid-template-columns: minmax(0, 1fr); }
  .aud__card { aspect-ratio: 16 / 10; }
  .statement { flex-direction: column; align-items: flex-start; }
  .badge { width: 120px; height: 120px; }
  .footer__statement { font: var(--type-display-l); letter-spacing: var(--type-display-l-tracking); }
  .logobar__in { gap: var(--space-3); }
  .cta-inline { flex-direction: column; align-items: flex-start; padding: var(--space-6); }
  .oppad__visual { display: block; min-height: 0; }
  .oppad__photo { width: 100%; height: 320px; }
  .oppad__visual .phone { position: relative; top: auto; left: auto; translate: none; margin: -180px var(--space-4) 0 auto; zoom: .72; }
  .cta { grid-template-columns: minmax(0, 1fr); }
  .cta__photo { height: 260px; min-height: 0; }
  .section__head--split { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .software { grid-template-columns: minmax(0, 1fr); }
  .logorow { grid-column: 1; grid-row: auto; }
  .section { padding: var(--space-16) 0; }
  .skills { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); margin-top: var(--space-8); }
  .skills__tabs { flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: var(--space-2); border-top: 0; margin: 0 calc(-1 * var(--layout-gutter)); padding: 2px var(--layout-gutter); }
  .skills__tabs::-webkit-scrollbar { display: none; }
  .skilltab { flex: none; width: auto; grid-template-columns: 18px auto; align-items: center; gap: var(--space-2); padding: 0 var(--space-4) 0 var(--space-3); height: 40px; border: 0; border-radius: var(--radius-full); box-shadow: inset 0 0 0 1px var(--border-default); }
  .skilltab small { display: none; }
  .skilltab b { font-size: 14px; }
  .skilltab .icon { margin-top: 0; width: 18px; height: 18px; }
  .skilltab[aria-selected="true"] { background: var(--text-primary); color: var(--text-inverse); box-shadow: none; }
  .skills__ind { display: none; }
  .oppad { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); margin-top: var(--space-16); }
  .meet__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .meet.section { padding-bottom: 0; }
  .meet__copy { padding-bottom: var(--space-8); }
  .controle__title { font: var(--type-heading-l); letter-spacing: var(--type-heading-l-tracking); }
  .meet__robot { width: min(340px, 86%); justify-self: center; }
  .rules:not(.rules--short) { grid-template-columns: minmax(0, 1fr); }
  .faq { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .footer__nav { margin-left: 0; }
}
@media (max-width: 640px) {
  .wrap { padding-inline: var(--layout-gutter-sm); }
  .statement__title { font: var(--type-display-m); letter-spacing: var(--type-display-m-tracking); }
    .skills__foot { font: var(--type-body-m); align-items: flex-start; }
  .skills__foot .icon { margin-top: 3px; }
  .logorow { gap: var(--space-3) var(--space-5); }
  .logorow li { font-size: 14px; }
  .aud__card { aspect-ratio: 4 / 5; }
  .aud__body { padding: var(--space-5) 64px var(--space-5) var(--space-5); }
  .band__title { font: var(--type-heading-l); letter-spacing: var(--type-heading-l-tracking); }
  .band__lead, .pains p { font: var(--type-body-m); }
  .marquee__track span { font: var(--type-heading-l); letter-spacing: var(--type-heading-l-tracking); }
  .marquee__punt { width: 10px; height: 10px; }
  .footer__statement { font: var(--type-display-m); letter-spacing: var(--type-display-m-tracking); }
  .footer .btn { width: 100%; justify-content: space-between; }
  .rules--short { grid-template-columns: minmax(0, 1fr); }
  .demo-form { grid-template-columns: minmax(0, 1fr); }
  .cta__body { padding: var(--space-6) var(--space-5); }
  .cta__title { font: var(--type-heading-l); letter-spacing: var(--type-heading-l-tracking); }
  .hero { padding-top: 100px; }
  .skillgrid, .steps--4 { grid-template-columns: minmax(0, 1fr); }
  .hhero__title { font: var(--type-heading-l); letter-spacing: var(--type-heading-l-tracking); }
  .hhero__flow { gap: var(--space-2); }
  .hhero__flow li { height: 38px; padding: 0 var(--space-3); font-size: 14px; }
  .hhero__flow li small { display: none; }
  .hhero__flow .hhero__sep { display: none; }
  .hhero__show { width: calc(100% - 2 * var(--layout-gutter-sm)); margin-top: var(--space-10); }
  .showcase { padding: var(--space-3); }
  .showcase__row { grid-template-columns: 20px minmax(0, 1fr); }
  .showcase__row .chip { display: none; }
  .three__card { padding: var(--space-5); }
  .day__list::before { left: 55px; }
  .day__list li { grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-6); }
  .day__list li::before { left: 50px; }
  .day__list p { font: var(--type-body-s); }
  .begin__steps { grid-template-columns: minmax(0, 1fr); }
  .standen3__rule { font: var(--type-body-m); }
  .phero__title { font: var(--type-heading-l); letter-spacing: var(--type-heading-l-tracking); }
  .phero__lead { font: var(--type-body-m); }
  .ctaband__in { grid-template-columns: minmax(0, 1fr); padding: var(--space-6); }
  .ctaband__robot { display: none; }
  .ctaband__title { font: var(--type-heading-m); letter-spacing: var(--type-heading-m-tracking); }
  .speech { position: relative; left: auto; bottom: auto; max-width: 300px; margin: 0 0 var(--space-5); }
  .speech::after { right: auto; left: 38%; }
  .hero__robot { width: min(320px, 92%); justify-self: center; }
  .sboard .bcard { padding: var(--space-2) var(--space-3); }
  .sboard .bcard__what { display: none; }
  .sboard .bcard__state { margin-top: 4px; }
  .scol { padding: var(--space-1) var(--space-2) var(--space-2); }
  .topbar__in { height: 60px; }
  .topbar__logo img { height: 22px; }
  .topbar__cta { height: 40px; padding: 0 4px 0 var(--space-4); font-size: 13px; }
  .topbar__cta .btn__arrow { width: 30px; height: 30px; }
  /* phone: the hero has the same button; the bar shows it once you scroll past */
  .topbar:not(.is-past-hero) .topbar__cta { opacity: 0; visibility: hidden; }
    .hero__title { font: var(--type-display-m); letter-spacing: var(--type-display-m-tracking); }
  .hero__lead { font: var(--type-body-m); font-size: 16px; }
  .hero__actions .btn--lg { flex: 1; justify-content: space-between; }
  .soon-form__row { flex-direction: column; gap: var(--space-1); padding: var(--space-2); border-radius: var(--radius-xl); }
  .soon-form__row .btn { width: 100%; }
  .soon-form__row .btn { justify-content: space-between; }
  .soon-form__input { height: 52px; padding: 0 var(--space-4); font: var(--type-body-m); font-size: 17px; }
  .soon-form__note, .soon-form__msg { padding-left: var(--space-2); }
  .hero__actions .btn--ghost { justify-content: center; }
  .section__title { font: var(--type-heading-l); letter-spacing: var(--type-heading-l-tracking); }
  .section__lead { font: var(--type-body-m); }
  .skills__tabs { margin: 0 calc(-1 * var(--layout-gutter-sm)); padding: 2px var(--layout-gutter-sm); }
  .skillpanel__facts { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  /* phone: the stages as rows; a card moves down to its next stage */
  .sboard-wrap { margin-top: var(--space-8); }
  .sboard { grid-template-columns: minmax(0, 1fr); }
  .scol { min-height: 0; }
  .scol__head { padding-bottom: var(--space-2); }
  .board-log { flex-wrap: wrap; align-items: flex-start; }
  .board-log p { flex: 1; min-width: 0; font: var(--type-body-s); }
  .oppad__title { font: var(--type-heading-m); letter-spacing: var(--type-heading-m-tracking); }
  .oppad__copy > p { font: var(--type-body-m); }
  .rules li { grid-template-columns: 36px minmax(0, 1fr); }
  .rules__n { font-size: 22px; }
  .demo-form .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .showcase__card, .speech, .topbar, .topbar__logo img, .skilltab, .skills__ind, .pcheck i, .pcheck i::after, .aud__img img, .aud__arrow, .btn__arrow { transition: none; }
  .skillpanel.is-on .skillpanel__ui, .skillpanel.is-on .skillpanel__facts, .closing.is-in .closing__o, .closing.is-in .closing__n, .board-log p.is-new, .marquee__track, .badge__spin, .ipunt--intro.is-measured .ipunt__dot, .ipunt--intro.is-measured .ipunt__nib { animation: none; }
  .faq__list details::details-content { transition: none; }
}