/* aqivo — marketing site. On the Codebrouwerij house style:
   ink + paper neutrals, orange accent (the aqivo logo bubble), editorial type, pill buttons.
   Shared across the homepage and all SEO/landing pages so they read as one brand. */
/* Self-hosted fonts (latin subsets, variable where available) — no Google Fonts request,
   no render-blocking @import. Plus Jakarta Sans is preloaded from each page's head.
   (Special Gothic Expanded One was fully retired — every heading and the OG poster now ride
   the logo face, so that woff2 was removed.) */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/m/fonts/fraunces.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('/m/fonts/fraunces-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* aqivo's base UI typeface — one variable cut (200–800) covers body text (400) and the
   wordmark (800). Self-hosted, latin subset, no Google Fonts request. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/m/fonts/plus-jakarta-sans.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* We ship BOTH a light and a (deliberate, on-brand) dark theme — declaring the scheme stops
     browsers from "helpfully" auto-darkening the light design (which turned the orange muddy-brown
     and links a random light blue). The dark theme itself lives in one @media block at the bottom. */
  color-scheme: light dark;
  --ink: #0a0a0a;          /* cb-black */
  --paper: #f4f4f2;        /* cb-paper */
  --surface: #ffffff;
  --accent: #ff5a1f;       /* aqivo orange (the logo bubble) — for fills & decoration */
  --accent-deep: #bf360c;  /* contrast-safe deep orange for text/links on paper (passes AA, ~5:1) */
  --on-accent: #fff;       /* text/icon colour that sits ON an orange (accent) fill */
  --line: #e0ded8;
  --muted: #646464;        /* cb-smoke, een tikje donkerder dan #6b6b6b zodat hij ook op zand AA haalt */
  --sand: #eceae4;         /* sb section-alt */
  --green: #1a7a55;
  --radius: 1.1rem;
  --maxw: 70rem;
  --display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

/* affichewissel — cross-document view transitions between the pages (progressive enhancement;
   the brand mark morphs along). Disabled under reduced motion. */
@view-transition { navigation: auto; }
.site-header .brand { view-transition-name: cb-brand; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* skip link — visually hidden until it receives keyboard focus */
.skiplink { position: absolute; left: -999rem; top: 0; z-index: 200; background: var(--ink); color: #fff; font-weight: 600; padding: 0.6rem 1.1rem; border-radius: 0 0 0.5rem 0; }
.skiplink:focus { left: 0; }
/* `overflow-x: clip` is a site-wide guarantee against horizontal scroll: if any single element
   ever pokes past the viewport, it's clipped instead of widening the page. `clip` (not `hidden`)
   does NOT create a scroll container, so the sticky header and the rail's own overflow-x:auto keep
   working. -webkit-text-size-adjust stops mobile Safari from inflating text (which can force overflow). */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* Headings ride aqivo's word-mark face (Plus Jakarta Sans), tracked tight like the logo. The big
   poster-display titles use the SAME face (var(--display) now points at Plus Jakarta) at weight 800
   + uppercase, so the whole site speaks in the logo's voice. */
h1, h2, h3, h4 { font-family: var(--sans); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; margin: 0 0 0.5em; }
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 800; }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1rem; }
a { color: var(--accent-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; }
.narrow { max-width: 46rem; }
.eyebrow { font-family: var(--sans); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; color: var(--muted); margin: 0 0 1rem; display: inline-flex; align-items: center; gap: 0.5rem; }
.eyebrow::before { content: ''; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--accent); flex: none; }
.lead { font-size: 1.2rem; color: var(--muted); }
.muted { color: var(--muted); }
.center { text-align: center; }

/* buttons — pill-shaped, like the Codebrouwerij house style */
.btn { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--sans); font-weight: 600; font-size: 1rem; padding: 0.85rem 1.6rem; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease; text-decoration: none; }
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--light { background: #fff; color: var(--ink); border-color: var(--line); }
.btn--accent { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover, .btn--accent:hover { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(10, 10, 10, 0.18); }
  .btn--ghost:hover { background: var(--ink); color: #fff; }
  .btn--light:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(10, 10, 10, 0.1); }
}
/* On the dark CTA band the hover flips to white instead of ink (which would vanish). */
.cta-band .btn--primary:hover, .breedkaart .btn--primary:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* header */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(244, 241, 234, 0.82); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color 0.2s, background 0.2s; }
.site-header.scrolled { border-color: var(--line); }
.site-header__inner { display: flex; align-items: center; gap: 1.5rem; height: 4.5rem; }
/* The brand is now the aqivo logo (the animated SVG word-mark). The header shows the black cut on
   paper; the footer shows the white cut on ink. Sized by height so the SVG keeps its aspect ratio. */
.brand { display: inline-flex; align-items: center; }
.brand:hover { text-decoration: none; }
/* The header logo is wrapped in <picture> so dark mode can serve the white cut (see each page's
   head markup). display:contents makes the wrapper vanish from layout, so the <img> stays the
   direct flex child — the header renders pixel-identically in light mode. */
.brand picture { display: contents; }
.brand__logo { display: block; height: 2.8rem; width: auto; }
.site-footer .brand__logo { height: 2.6rem; }
/* aqivo word-mark set in type — for any context without the SVG logo (matches the logo's letterforms). */
.logo { font-family: var(--sans); font-weight: 800; letter-spacing: -0.04em; text-transform: lowercase; }
.nav { display: flex; align-items: center; gap: 1.6rem; margin-left: auto; }
.nav a:not(.btn) { color: var(--ink); font-weight: 500; font-size: 0.96rem; }
.nav a:not(.btn):hover { color: var(--accent-deep); text-decoration: none; }
.nav__cta { display: flex; gap: 0.6rem; align-items: center; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.4rem; }
.nav-toggle span { display: block; width: 1.5rem; height: 2px; background: var(--ink); margin: 4px 0; transition: 0.2s; }

@media (max-width: 56rem) {
  .nav { position: fixed; inset: 4.5rem 0 auto; flex-direction: column; align-items: stretch; background: var(--paper); border-bottom: 1px solid var(--line); padding: 1rem 1.5rem 1.5rem; gap: 1rem; transform: translateY(-120%); transition: transform 0.25s ease; }
  .nav.open { transform: none; }
  .nav__cta { flex-direction: column; align-items: stretch; }
  .nav-toggle { display: block; margin-left: auto; }
}
/* very narrow phones (≤22rem ≈ 352px): tighten the header so the brand + menu button
   never overflow the viewport (the 1.5rem inner gap + full-size wordmark pushed the
   hamburger past the right edge around 320px). */
@media (max-width: 22rem) {
  .site-header__inner { gap: 0.6rem; }
  .brand__logo { height: 2.2rem; }
}

/* boventiteling — the thin act rail under the header bar (affiche pages). The amber hairline on
   its lower edge is a scroll-progress indicator: scroll-driven where supported, hidden elsewhere
   and under reduced motion. */
.boventiteling { position: relative; border-top: 1px solid var(--line); }
.boventiteling__inner { display: flex; align-items: center; gap: 1.5rem; height: 2.5rem; font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; overflow-x: auto; scrollbar-width: none; }
.boventiteling__inner::-webkit-scrollbar { display: none; }
.boventiteling__akte { color: var(--muted); white-space: nowrap; }
/* Narrow screens: keep the rail's conversion anchors in view by collapsing the act labels to
   their numerals (the full text stays available to assistive tech via the aria-label) AND
   collapsing the demo-pill to zero width until it's actually shown — otherwise its reserved
   (visibility:hidden) width pushed "Naar de prijzen" off the right edge at the top of the page. */
@media (max-width: 44rem) {
  .boventiteling__aktetekst { display: none; }
  .boventiteling__inner { gap: 0.7rem; }
  .boventiteling__demo { padding: 0.22rem 0.7rem; }
  .boventiteling__demo:not(.is-zichtbaar) { width: 0; padding-left: 0; padding-right: 0; overflow: hidden; }
}
.boventiteling__akte:hover { text-decoration: none; }
.boventiteling__akte[aria-current='true'] { color: var(--ink); font-weight: 700; }
.boventiteling__demo { margin-left: auto; white-space: nowrap; background: var(--ink); color: var(--accent); font-weight: 700; padding: 0.22rem 0.8rem; border-radius: 999px; opacity: 0; visibility: hidden; transform: translateY(0.3rem); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; }
.boventiteling__demo:hover { text-decoration: none; }
.boventiteling__demo.is-zichtbaar { opacity: 1; visibility: visible; transform: none; }
.boventiteling__prijzen { white-space: nowrap; color: var(--accent-deep); font-weight: 700; }
.boventiteling__prijzen:hover { text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .boventiteling__akte:hover, .boventiteling__prijzen:hover { color: var(--ink); }
  .boventiteling__demo:hover { background: var(--accent); color: var(--on-accent); }
}
.boventiteling::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; }
@supports (animation-timeline: scroll()) {
  .boventiteling::after { animation: boventiteling-vorder linear both; animation-timeline: scroll(root); }
}
@keyframes boventiteling-vorder { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .boventiteling::after { display: none; }
  .boventiteling__demo { transition: none; transform: none; }
}

/* sections */
section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.section-head { max-width: 40rem; margin: 0 auto 3rem; text-align: center; }

/* zetterij — the poster hero: a typeset grid on paper, words that stamp themselves like lead
   type, an amber print block, and the widget mascot peeking up from the prompter's box. Motion is
   transform-only (the text itself paints immediately — LCP stays a plain text line). */
.zetterij { position: relative; padding: clamp(2.6rem, 6vw, 5rem) 0 clamp(2.6rem, 5vw, 4.2rem); overflow: hidden; }
.zetterij::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(10, 10, 10, 0.045) 1px, transparent 1px); background-size: calc(100% / 12) 100%; pointer-events: none; }
.zetterij__regie { font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep); margin: 0 0 clamp(1.2rem, 3vw, 2rem); }
.zetterij__regie span { display: inline-block; max-width: 100%; overflow: hidden; white-space: nowrap; vertical-align: bottom; animation: zetterij-typ 1s steps(49, end) both; }
@keyframes zetterij-typ { from { max-width: 0; } to { max-width: 100%; } }
/* On narrow screens the line must wrap instead of clip (WCAG reflow) — the typewriter only runs
   where the whole line fits on one rule. */
@media (max-width: 38rem) { .zetterij__regie span { white-space: normal; overflow: visible; max-width: none; animation: none; } }
.zetterij__kop { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(2.2rem, 7.3vw, 7.05rem); line-height: 0.97; letter-spacing: -0.03em; margin: 0 0 clamp(1.6rem, 3vw, 2.2rem); }
.zetterij__regel { display: block; }
.zetterij__woord { display: inline-block; animation: zetterij-stamp 0.42s cubic-bezier(0.2, 1.6, 0.35, 1) both; animation-delay: var(--d, 0s); }
@keyframes zetterij-stamp { 0% { transform: scale(1.16) rotate(-1.4deg); } 55% { transform: scale(0.985) rotate(0.3deg); } 100% { transform: none; } }
.zetterij__niet { background: var(--accent); color: var(--on-accent); padding: 0 0.16em; box-shadow: 0.05em 0.08em 0 var(--ink); }
.zetterij__sub { font-family: var(--serif); font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.45; max-width: 44rem; margin: 0 0 clamp(1.6rem, 3vw, 2.2rem); }
.zetterij__colofon { font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--muted); margin: 1.1rem 0 0; }
.zetterij__souffleur { position: absolute; right: clamp(1rem, 9vw, 10rem); bottom: 0; width: 5.6rem; height: 4.1rem; overflow: hidden; pointer-events: none; }
.zetterij__souffleur svg { position: absolute; left: 50%; top: 0.3rem; width: 3.6rem; height: 3.6rem; margin-left: -1.8rem; background: #fff; border: 2px solid var(--ink); border-radius: 50%; fill: var(--ink); transform: translateY(115%); animation: zetterij-souffleur 0.65s cubic-bezier(0.2, 1.2, 0.4, 1) 1.5s forwards; }
/* the prompter's box itself: an amber tray with an ink rim, in front of the face */
.zetterij__bak { position: absolute; left: 0; right: 0; bottom: 0; height: 1.25rem; background: var(--accent); border: 2px solid var(--ink); border-bottom: 0; border-radius: 0.45rem 0.45rem 0 0; }
.zetterij__ogen { transform-box: fill-box; transform-origin: center; animation: zetterij-knipper 4.6s 2.4s infinite; }
@keyframes zetterij-souffleur { to { transform: translateY(0); } }
@keyframes zetterij-knipper { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }
@media (min-width: 72rem) { .zetterij__regel--uitsteek { margin-left: -4%; } }
@media (max-width: 56rem) { .zetterij__souffleur { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .zetterij__regie span, .zetterij__woord, .zetterij__ogen { animation: none; }
  .zetterij__souffleur svg { animation: none; transform: none; }
}

/* echtheidsstrook — the honesty bar right under the hero */
.echtheid { background: var(--sand); border-block: 1px solid var(--line); }
.echtheid__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; padding-block: 0.75rem; font-size: 0.9rem; }
.echtheid__claim::before { content: '●'; color: var(--green); margin-right: 0.5rem; }
.echtheid__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-left: auto; }
.echtheid__chip { font-size: 0.8rem; font-weight: 600; color: var(--ink); border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 0.18rem 0.7rem; }
.echtheid__chip:hover { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .echtheid__chip:hover { border-color: var(--ink); } }

/* de zaal — the lights go down: a sticky widget stage in a spotlight, surtitles set like
   poster type, one recorded conversation in four beats */
.zaal { background: var(--ink); color: var(--paper); overflow: clip; } /* clip (not hidden!) keeps the sticky scene working while the spotlight can't cause sideways scroll */
/* Named areas keep the left-column order (intro → beats → taal) on desktop while letting the
   demo (scene) span all three rows on the right and stay sticky. On mobile the same four blocks
   restack to intro → demo → language chips → beats (see the narrow-screen rule below). */
.zaal__grid { display: grid; grid-template-columns: 1fr minmax(22rem, 26rem); grid-template-areas: "intro scene" "beats scene" "taal scene"; column-gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.zaal__beats { grid-area: beats; }
.zaal__scene { grid-area: scene; position: sticky; top: 8.5rem; display: grid; place-items: center; padding: 2rem 0 3rem; }
.zaal__scene::before { content: ''; position: absolute; inset: -10% -20%; background: radial-gradient(ellipse at 50% 35%, rgba(255, 90, 31, 0.22), transparent 62%); pointer-events: none; }
.zaal__scene .simchat { position: relative; }
.zaal__intro { grid-area: intro; padding-bottom: clamp(2rem, 6vh, 4rem); }
.zaal__intro h2 { color: #fff; }
.zaal__lead { color: rgba(244, 244, 242, 0.75); font-size: 1.1rem; max-width: 32rem; }
.zaal__beat { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; transition: opacity 0.35s ease; }
/* dimming only when JS drives the highlight — a no-JS page keeps every beat at full contrast */
.zaal--js .zaal__beat { opacity: 0.45; }
.zaal--js .zaal__beat.is-actief { opacity: 1; }
.zaal__titel { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(2.2rem, 5vw, 4.6rem); line-height: 1; letter-spacing: -0.03em; color: #fff; margin: 0 0 0.6rem; }
.zaal__beat p { color: rgba(244, 244, 242, 0.78); max-width: 30rem; margin: 0; }
.zaal__taal { grid-area: taal; padding: 1rem 0 3rem; }
.zaal__taal p { color: rgba(244, 244, 242, 0.78); margin: 0 0 0.8rem; max-width: 30rem; }
.zaal__chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.zaal__chip { font: inherit; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; color: var(--paper); background: transparent; border: 1.5px solid rgba(244, 244, 242, 0.4); border-radius: 999px; padding: 0.3rem 0.9rem; cursor: pointer; }
.zaal__chip.is-actief { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.zaal__chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .zaal__chip:hover { border-color: var(--accent); } }
.eyebrow--inkt { color: rgba(244, 244, 242, 0.65); }
@media (max-width: 56rem) {
  /* Scrollytelling can't work on one column, so restack for reading: the intro sets it up, the
     recorded demo comes straight after (no longer buried under four beats), the language chips sit
     right under the demo they switch, and the four beats follow as a recap. */
  .zaal__grid { grid-template-columns: 1fr; grid-template-areas: "intro" "scene" "taal" "beats"; row-gap: clamp(1.2rem, 5vw, 2rem); }
  .zaal__intro { padding-bottom: 0; }
  /* relative (not static) keeps the scene the containing block for its ::before glow, so the
     -20% horizontal spread stays clipped by .zaal instead of spilling off-screen on mobile.
     top:0 cancels the desktop sticky offset — left in place it shoved the chat 8.5rem down onto
     the language chips below it. */
  .zaal__scene { position: relative; top: 0; padding: 0.5rem 0 0; }
  .zaal__taal { padding: 0; }
  .zaal__beat, .zaal--js .zaal__beat { min-height: 0; padding: 1.2rem 0; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .zaal__beat { opacity: 1; transition: none; } }

/* de avondpiek — an amber statement band; the dot grid is the seating plan filling up */
.avondpiek { background: var(--accent); color: var(--on-accent); position: relative; overflow: hidden; }
.avondpiek::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(10, 10, 10, 0.16) 23%, transparent 27%); background-size: 1.7rem 1.7rem; opacity: 0.5; pointer-events: none; }
@supports (animation-timeline: view()) {
  .avondpiek::before { animation: avondpiek-vullen linear both; animation-timeline: view(); animation-range: entry 10% cover 65%; }
  @keyframes avondpiek-vullen { from { opacity: 0.12; } to { opacity: 0.5; } }
}
.avondpiek .wrap { position: relative; }
.avondpiek__kop { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(2.4rem, 6.5vw, 6.2rem); line-height: 0.97; letter-spacing: -0.03em; margin: 0 0 1.6rem; }
.eyebrow--piek { color: rgba(255, 255, 255, 0.85); }
.eyebrow--piek::before { background: #fff; }
.avondpiek__tijdlijn { display: grid; gap: 0.55rem; font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace; font-size: clamp(0.85rem, 1.6vw, 1.05rem); max-width: 44rem; margin: 0 0 1.6rem; }
.avondpiek__tijdlijn strong { display: inline-block; min-width: 4.2em; }
.avondpiek__som { font-family: var(--serif); font-size: clamp(1.1rem, 2vw, 1.4rem); max-width: 36rem; margin: 0; }
@media (prefers-reduced-motion: reduce) { .avondpiek::before { animation: none; } }

/* landing heroes on affiche pages: the sector question is the poster, the keyword H1 becomes a
   serif subline, and the old amber-text highlight becomes a small print block (contrast rule) */
.affiche .hero__vraagregel { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.7rem, 4.8vw, 3.8rem); line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 1.2rem; }
.affiche .hero__title { font-family: var(--sans); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.2; letter-spacing: -0.02em; }
.affiche .hero__title .hl { color: var(--on-accent); background: var(--accent); padding: 0 0.12em; box-shadow: 0.05em 0.07em 0 var(--ink); }

/* the ticket band that carries the Kaartje on landing pages, directly under the hero */
.kaartjeband { background: var(--sand); border-block: 1px solid var(--line); padding: 1.6rem 0 2rem; }
.kaartjeband .kaartje { max-width: 44rem; }

/* sector label in the landing boventiteling */
.boventiteling__sector { color: var(--ink); font-weight: 700; white-space: nowrap; }

/* voor-it: the dry facts list, set in mono-led definition rows */
.voorit__lijst { display: grid; gap: 1rem; margin: 0; }
.voorit__feit { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.5rem; }
.voorit__feit dt { font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 0.4rem; }
.voorit__feit dd { margin: 0; }
.voorit__feit code { background: var(--sand); border-radius: 0.3rem; padding: 0.05rem 0.35rem; font-size: 0.86em; }

/* hero */
.hero { padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: clamp(3rem, 7vw, 5rem); position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; top: -30%; right: -10%; width: 50rem; height: 50rem; background: radial-gradient(circle, rgba(255, 90, 31, 0.18), transparent 60%); pointer-events: none; }
.hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3rem; align-items: center; }
/* Hero headline in the Codebrouwerij display face — like "Bold by design." */
.hero__title { margin-bottom: 1.2rem; font-family: var(--display); font-weight: 800; font-size: clamp(2.7rem, 6.5vw, 4.8rem); line-height: 0.98; letter-spacing: -0.03em; }
/* the emphasis word stays in the heading's display font — only amber-coloured */
.hero__title .hl { color: var(--accent); }
.hero__cta { display: flex; gap: 0.8rem; flex-wrap: wrap; margin: 1.8rem 0 1.2rem; }
.hero__trust { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; color: var(--muted); }
@media (max-width: 56rem) { .hero__grid { grid-template-columns: 1fr; gap: 2rem; } .hero__visual { order: -1; } }

/* (the hero video + static mock fallback were retired with the zetterij hero) */

/* chat mockup */
.mock { background: var(--surface); border: 1px solid var(--line); border-radius: 1.4rem; box-shadow: 0 30px 70px rgba(26, 25, 22, 0.16); overflow: hidden; max-width: 23rem; margin: 0 auto; transform: rotate(0.5deg); }
.mock__head { background: var(--accent); color: var(--on-accent); padding: 1rem 1.1rem; display: flex; align-items: center; gap: 0.7rem; }
.mock__avatar { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: rgba(10,10,10,0.14); display: grid; place-items: center; font-weight: 700; }
.mock__name { font-weight: 700; line-height: 1.1; }
.mock__sub { font-size: 0.75rem; opacity: 0.9; display: flex; align-items: center; gap: 0.3rem; }
.mock__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #46d39a; }
.mock__body { padding: 1.1rem; background: #faf8f4; display: flex; flex-direction: column; gap: 0.6rem; min-height: 16rem; }
.bubble { padding: 0.6rem 0.85rem; border-radius: 1.1rem; font-size: 0.9rem; max-width: 85%; line-height: 1.45; }
.bubble--bot { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 0.3rem; align-self: flex-start; }
.bubble--user { background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 0.3rem; align-self: flex-end; }
.mock__card { background: #fff; border: 1px solid var(--line); border-radius: 0.8rem; padding: 0.7rem; align-self: flex-start; max-width: 92%; }
.mock__card h5 { margin: 0 0 0.15rem; font-family: var(--sans); font-size: 0.85rem; }
.mock__card .m { font-size: 0.74rem; color: var(--muted); margin-bottom: 0.5rem; }
.mock__card .cta { display: inline-block; background: var(--accent); color: var(--on-accent); font-size: 0.74rem; font-weight: 600; padding: 0.32rem 0.7rem; border-radius: 999px; }
/* Composer mirrors the live widget: rounded input + a 2.75rem gradient send button with a soft
   accent shadow and the paper-plane icon (see component-simchat.css for the shared treatment). */
.mock__foot { padding: 0.75rem; border-top: 1px solid var(--line); display: flex; gap: 0.55rem; align-items: flex-end; background: #fff; }
.mock__foot input { flex: 1; min-height: 2.75rem; border: 1px solid var(--line); border-radius: 0.9rem; padding: 0.7rem 0.85rem; font: inherit; font-size: 0.9rem; color: var(--muted); background: var(--paper); }
.mock__send { flex: none; width: 2.75rem; height: 2.75rem; border-radius: 0.9rem; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 78%, #000)); display: grid; place-items: center; color: var(--on-accent); box-shadow: 0 0.25rem 0.75rem color-mix(in srgb, var(--accent) 32%, transparent); }
.mock__send svg { width: 1.15rem; height: 1.15rem; }

/* trust strip */
.strip { background: var(--ink); color: #fff; padding: 1.4rem 0; }
.strip__inner { display: flex; align-items: center; justify-content: center; gap: 2.5rem; flex-wrap: wrap; font-family: var(--serif); font-size: 1.1rem; opacity: 0.92; }
.strip__inner span { white-space: nowrap; }

/* feature cards */
.grid { display: grid; gap: 1.2rem; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 56rem) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 38rem) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; transition: transform 0.2s ease, box-shadow 0.2s ease; }
@media (hover: hover) and (pointer: fine) { .card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(26, 25, 22, 0.1); } }
.card__icon { width: 3rem; height: 3rem; border-radius: 0.8rem; background: #ffeee7; color: var(--accent-deep); display: grid; place-items: center; margin-bottom: 1rem; font-size: 1.4rem; }
.card__icon svg { width: 1.5rem; height: 1.5rem; }

/* programma-bento — uneven feature tiles where the capabilities live (homepage #functies) */
/* minmax(0, 1fr) — not 1fr — so a long embed-snippet (the codeblock below) can't force a
   track wider than its share and push the whole grid past the viewport on mobile */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
.bento__tegel { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; min-height: 11rem; display: flex; flex-direction: column; gap: 0.45rem; }
.bento__tegel h3 { font-size: 1.15rem; margin: 0; }
.bento__tegel p { margin: 0; font-size: 0.95rem; }
.bento__tegel--breed { grid-column: span 2; }
.bento__kop { font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-deep); }
/* the phrases stack in one grid cell so the tile always fits the tallest (wrapped) phrase */
.bento__cyclus { display: grid; font-family: var(--serif); font-size: 1.25rem; margin-top: auto; }
.bento__cyclus span { grid-area: 1 / 1; opacity: 0; animation: bento-cyclus 15s linear infinite; animation-delay: var(--d, 0s); }
@keyframes bento-cyclus { 0%, 17% { opacity: 1; } 21%, 100% { opacity: 0; } }
.bento__chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: auto; }
.bento__chips span { font-size: 0.74rem; font-weight: 600; border: 1px solid var(--line); border-radius: 999px; padding: 0.12rem 0.6rem; background: var(--paper); }
/* installatie-snippet — een mini code-editor kaart (titelbalk + kopieerknop + code).
   De code WRAPT (pre-wrap + overflow-wrap) i.p.v. horizontaal te scrollen, zodat een lange
   regel de tegel — en op mobiel de hele pagina — nooit uit elkaar kan duwen. */
.bento__code { margin-top: auto; min-width: 0; }
.snippet { min-width: 0; background: var(--ink); border-radius: 0.8rem; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 12px 30px rgba(10, 10, 10, 0.14); }
.snippet__bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.55rem 0.5rem 0.85rem; background: rgba(255, 255, 255, 0.045); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.snippet__dots { display: inline-flex; gap: 0.35rem; flex: none; }
.snippet__dots i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: rgba(244, 241, 234, 0.22); }
.snippet__naam { font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace; font-size: 0.7rem; color: rgba(244, 241, 234, 0.5); margin-right: auto; }
.snippet__kopieer { flex: none; display: inline-flex; align-items: center; gap: 0.4rem; font: inherit; font-size: 0.74rem; font-weight: 700; line-height: 1; background: var(--accent); color: var(--on-accent); border: 0; border-radius: 999px; padding: 0.42rem 0.8rem; cursor: pointer; }
.snippet__icoon { width: 0.85rem; height: 0.85rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.snippet__kopieer:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .snippet__kopieer:hover { background: #fff; color: var(--ink); } }
.snippet__pre { margin: 0; padding: 0.85rem 0.95rem; font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace; font-size: 0.72rem; line-height: 1.6; color: #f4f1ea; white-space: pre-wrap; overflow-wrap: anywhere; }
.snippet__pre code { background: none; border: 0; padding: 0; color: inherit; font: inherit; }
.bento__mono { font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace; font-size: 0.72rem; color: var(--muted); background: var(--sand); border-radius: 0.5rem; padding: 0.5rem 0.7rem; margin-top: auto; }
@media (max-width: 56rem) { .bento { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 38rem) { .bento { grid-template-columns: minmax(0, 1fr); } .bento__tegel--breed { grid-column: auto; } .bento__tegel { min-height: 0; } }
@media (prefers-reduced-motion: reduce) {
  .bento__cyclus span { animation: none; }
  .bento__cyclus span:first-child { opacity: 1; }
}

/* drie organisaties — one question, three voices; the active org tints the panel and (when the live
   widget is on the page) re-skins it via the embed's preview mechanism */
.huizen { --huis-accent: #7a1f2b; }
.huizen[data-actief='kindermuseum'] { --huis-accent: #ff7a00; }
.huizen[data-actief='poppodium'] { --huis-accent: #5b2d8e; }
.huizen__tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.huizen__tab { font: inherit; font-size: 0.95rem; font-weight: 700; color: var(--ink); background: var(--surface); border: 1.5px solid var(--line); border-radius: 999px; padding: 0.5rem 1.2rem; cursor: pointer; }
.huizen__tab.is-actief { background: var(--ink); color: #fff; border-color: var(--ink); }
.huizen__tab:focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .huizen__tab:hover { border-color: var(--ink); } }
.huizen__vraag { text-align: center; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.4rem, 3vw, 2.2rem); letter-spacing: -0.02em; margin: 0 0 1.6rem; }
.huizen__panelen { max-width: 44rem; margin: 0 auto; }
.huizen__paneel { background: var(--surface); border: 1px solid var(--line); border-left: 0.45rem solid var(--huis-accent); border-radius: var(--radius); padding: 1.5rem 1.8rem; transition: border-color 0.25s ease; }
.huizen__paneel[hidden] { display: none; }
.huizen__antwoord { font-family: var(--serif); font-size: 1.18rem; line-height: 1.55; margin: 0 0 0.8rem; }
.huizen__wie { margin: 0; font-size: 0.88rem; color: var(--huis-accent); font-weight: 700; }
.huizen__label { text-align: center; font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 1.2rem 0 0; }
/* without JS all three panels stack — give them air */
.huizen__paneel + .huizen__paneel { margin-top: 1rem; }
@media (prefers-reduced-motion: reduce) { .huizen__paneel { transition: none; } }

/* small margin note under the bento ("zeg eens haha") — only revealed when the live widget is on the page */
.bento__noot { margin: 1rem 0 0; text-align: right; font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace; font-size: 0.72rem; color: var(--muted); }

/* affiche-rek — the sector cards as mini posters in a rack */
.affiches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.affichekaart { display: flex; flex-direction: column; justify-content: space-between; gap: 1.2rem; min-height: 12rem; background: var(--surface); border: 2px solid var(--ink); border-radius: 0.9rem; padding: 1.3rem; box-shadow: 0.35rem 0.4rem 0 rgba(10, 10, 10, 0.9); color: var(--ink); }
.affichekaart:hover { text-decoration: none; }
.affichekaart:nth-child(odd) { transform: rotate(-0.5deg); }
.affichekaart:nth-child(even) { transform: rotate(0.6deg); }
.affichekaart__vraag { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 1.18rem; line-height: 1.12; letter-spacing: -0.02em; }
.affichekaart__sector { font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-deep); }
@media (hover: hover) and (pointer: fine) { .affichekaart:hover { transform: translate(-2px, -2px); box-shadow: 0.55rem 0.6rem 0 var(--accent); } }
@media (max-width: 56rem) { .affiches { grid-template-columns: 1fr 1fr; } }
@media (max-width: 38rem) { .affiches { grid-template-columns: 1fr; } .affichekaart { min-height: 9rem; } }
@media (prefers-reduced-motion: reduce) { .affichekaart:nth-child(odd), .affichekaart:nth-child(even) { transform: none; } }
.card h3 { margin-bottom: 0.4rem; font-family: var(--sans); font-weight: 700; font-size: 1.1rem; }
.card p { margin: 0; font-size: 0.96rem; color: var(--muted); }

/* steps */
.steps { counter-reset: step; display: grid; gap: 1.5rem; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 56rem) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding-left: 3.5rem; }
.step::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-family: var(--serif); font-weight: 700; display: grid; place-items: center; }
.step h3 { font-family: var(--sans); font-weight: 700; font-size: 1.15rem; }

/* alternating feature rows */
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; margin-bottom: 4rem; }
.feature-row:last-child { margin-bottom: 0; }
.feature-row--flip .feature-row__media { order: 2; }
@media (max-width: 56rem) { .feature-row { grid-template-columns: 1fr; gap: 1.5rem; } .feature-row--flip .feature-row__media { order: 0; } }
.checklist { list-style: none; padding: 0; margin: 1rem 0 0; }
.checklist li { position: relative; padding-left: 1.9rem; margin-bottom: 0.7rem; }
.checklist li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--green); font-weight: 700; background: #e7f4ee; width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.8rem; }

/* pricing */
.billtoggle { display: flex; width: max-content; gap: 0.2rem; margin: 0 auto 1.6rem; padding: 0.3rem; background: var(--sand); border: 1px solid var(--line); border-radius: 999px; }
.billtoggle__opt { display: inline-flex; align-items: center; gap: 0.4rem; border: none; background: none; cursor: pointer; font: inherit; font-size: 0.95rem; font-weight: 600; color: var(--muted); padding: 0.5rem 1.2rem; border-radius: 999px; transition: background 0.15s, color 0.15s; }
.billtoggle__opt.is-active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(10,10,10,0.12); }
.billtoggle__save { font-size: 0.72rem; font-weight: 700; color: #1a7a55; background: #e7f7ef; border-radius: 999px; padding: 0.1rem 0.45rem; }
.plan__note { font-size: 0.78rem; color: var(--muted); margin-bottom: 0.4rem; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; align-items: stretch; }
@media (max-width: 56rem) { .plans { grid-template-columns: 1fr; max-width: 26rem; margin: 0 auto; } }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; display: flex; flex-direction: column; }
.plan--featured { border-color: var(--accent); box-shadow: 0 16px 40px rgba(255, 90, 31, 0.2); position: relative; }
.plan__tag { position: absolute; top: -0.8rem; left: 50%; transform: translateX(-50%); background: var(--accent); color: var(--on-accent); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.25rem 0.8rem; border-radius: 999px; }
.plan__name { font-family: var(--serif); font-size: 1.5rem; }
.plan__price { font-family: var(--serif); font-size: 2.4rem; margin: 0.4rem 0 0.1rem; }
.plan__price small { font-family: var(--sans); font-size: 0.9rem; font-weight: 400; color: var(--muted); }
/* programmaboekje-spread (affiche pages): mono plan names, big tabular serif prices, a stamped
   "meest gekozen" badge, and a second path for who'd rather talk first */
.affiche .plan__name { font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-deep); }
.affiche .plan__price { font-size: 3.1rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.affiche .plan--featured .plan__tag { transform: translateX(-50%) rotate(-4deg); border: 2px solid var(--ink); box-shadow: 0.14rem 0.18rem 0 var(--ink); }
.prijzen__paden { display: flex; justify-content: center; gap: 0.8rem; flex-wrap: wrap; margin-top: 2rem; }
.plan__desc { color: var(--muted); font-size: 0.92rem; min-height: 2.6rem; }
.plan ul { list-style: none; padding: 0; margin: 1rem 0 1.5rem; flex: 1; }
.plan li { padding-left: 1.6rem; position: relative; margin-bottom: 0.55rem; font-size: 0.94rem; }
.plan li::before { content: '✓'; position: absolute; left: 0; color: var(--accent-deep); font-weight: 700; }
.plan .btn { width: 100%; justify-content: center; }

/* stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; }
@media (max-width: 38rem) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat__num { font-family: var(--serif); font-size: clamp(2.4rem, 5vw, 3.4rem); color: var(--accent-deep); line-height: 1; }
.stat__label { color: var(--muted); font-size: 0.92rem; margin-top: 0.4rem; }

/* FAQ */
.faq { max-width: 46rem; margin: 0 auto; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 0.8rem; margin-bottom: 0.7rem; overflow: hidden; }
.faq summary { padding: 1.1rem 1.3rem; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.4rem; color: var(--accent-deep); transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > p { padding: 0 1.3rem 1.2rem; margin: 0; color: var(--muted); }

/* CTA band */
/* breedkaart — the "works on any site" banner inside the use-case section: same dark band
   language as the CTA, but left-aligned and informative */
.breedkaart { margin-top: 1.2rem; background: var(--ink); color: var(--paper); border-radius: var(--radius); padding: clamp(1.6rem, 4vw, 2.4rem); display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.5rem; align-items: center; }
.breedkaart h3 { color: #fff; }
.breedkaart p { margin: 0; color: rgba(244, 244, 242, 0.85); }
.breedkaart__acties { display: flex; flex-direction: column; gap: 0.6rem; align-items: stretch; }
.breedkaart__acties .btn { justify-content: center; }
@media (max-width: 56rem) { .breedkaart { grid-template-columns: 1fr; } }

.cta-band { background: var(--ink); color: #fff; border-radius: 1.6rem; padding: clamp(2.5rem, 5vw, 4rem); text-align: center; position: relative; overflow: hidden; }
.cta-band::after { content: ''; position: absolute; bottom: -40%; left: -5%; width: 30rem; height: 30rem; background: radial-gradient(circle, rgba(255,90,31,0.35), transparent 60%); }
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,0.8); max-width: 34rem; margin: 0 auto 1.8rem; }

/* tonal section */
.tone-sand { background: var(--sand); }
.tone-ink { background: var(--ink); color: #fff; }
.tone-ink h2, .tone-ink h3 { color: #fff; }
.tone-ink .muted { color: rgba(255,255,255,0.72); }
.tone-ink .card { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); }
.tone-ink .card p { color: rgba(255,255,255,0.72); }

/* footer */
.site-footer { background: var(--ink); color: rgba(255,255,255,0.75); padding: 3.5rem 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 2rem; margin-bottom: 2.5rem; }
@media (max-width: 56rem) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 38rem) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h2, .site-footer h4 { color: #fff; font-family: var(--sans); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem; }
.site-footer a { color: rgba(255,255,255,0.75); display: block; margin-bottom: 0.5rem; font-size: 0.94rem; }
.site-footer a:hover { color: #fff; }
.site-footer .brand { color: #fff; margin-bottom: 0.8rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 1.5rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.85rem; }
/* footer social — round icon buttons; the `.site-footer a` block rule is overridden back to inline-flex */
.footer-social { display: flex; gap: 0.7rem; margin: 1.2rem 0 0; padding: 0; list-style: none; }
.footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; margin: 0; border: 1px solid rgba(255,255,255,0.18); border-radius: 50%; color: rgba(255,255,255,0.75); }
.footer-social svg { width: 1.2rem; height: 1.2rem; }
@media (hover: hover) and (pointer: fine) {
  .footer-social a { transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease; }
  .footer-social a:hover { color: var(--on-accent); border-color: var(--accent); background-color: var(--accent); }
}
@media (prefers-reduced-motion: reduce) { .footer-social a { transition: none; } }

/* breadcrumb (landing pages) */
.crumb { font-size: 0.85rem; color: var(--muted); padding-top: 1.5rem; }
.crumb a { color: var(--muted); }

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* docs / guide */
.doc { max-width: 48rem; }
.doc h2 { margin-top: 2.5rem; }
.doc h3 { margin-top: 1.75rem; }
.doc p, .doc li { color: #34322c; }
/* a .cta-band nested in a .doc column is a dark component with its own light text —
   keep it readable so the content paragraph colour (and its dark-mode variant) can't bleed in */
.doc .cta-band p { color: rgba(255,255,255,0.8); }
.doc ul, .doc ol { padding-left: 1.2rem; }
.doc li { margin-bottom: 0.4rem; }
.doc code { background: var(--sand); border: 1px solid var(--line); padding: 0.05rem 0.35rem; border-radius: 0.35rem; font-size: 0.88em; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.callout { background: #fff3ee; border: 1px solid #ffd9c9; border-left: 3px solid var(--accent); border-radius: 0.6rem; padding: 1rem 1.1rem; margin: 1.25rem 0; }
.callout strong { color: var(--accent-deep); }
.codeblock { background: var(--ink); color: #f4f1ea; border-radius: 0.7rem; padding: 1rem 1.1rem; overflow-x: auto; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.84rem; line-height: 1.55; margin: 0; }
.codeblock code { background: none; border: none; padding: 0; color: inherit; font-size: inherit; }

/* code language tabs — without JS all panels show (stacked); JS turns them into tabs */
.codetabs { margin: 1rem 0; }
.codetabs__btns { display: none; gap: 0.4rem; margin-bottom: 0.6rem; flex-wrap: wrap; }
.codetabs--js .codetabs__btns { display: flex; }
.codetabs__btn { font: inherit; font-weight: 600; font-size: 0.85rem; padding: 0.4rem 0.85rem; border-radius: 0.5rem; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
.codetabs__btn.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.codetabs__panel-label { display: block; font-size: 0.78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin: 1rem 0 0.4rem; }
.codetabs--js .codetabs__panel-label { display: none; }
.codetabs--js .codetabs__panel { display: none; }
.codetabs--js .codetabs__panel.is-active { display: block; }

/* Hero "try with your own site" demo box */
/* (the old .demobox hero form was replaced by the Kaartje — see component-kaartje.css) */

/* ============================================================================
   DARK THEME
   The light theme above is the source of truth and is left completely untouched —
   every rule below only takes effect when the visitor's OS asks for dark.

   The trick: --ink and --paper KEEP their light values on purpose.
   • --ink is the near-black behind every "dark by design" band (the footer, .zaal,
     .cta-band, .strip, .snippet, .tone-ink, .breedkaart, .codeblock …). Those bands
     already pair it with light text, so they stay correct with zero changes.
   • --paper is the warm off-white we now reuse as the body TEXT colour on dark.
   So we only re-point the neutral surface tokens plus the handful of hard-coded light
   surfaces, and lift --accent-deep / --green to dark-legible tints. The orange accent
   itself is untouched — it carries the brand in both themes.
   ============================================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141310;            /* page background — a warm near-black, not a flat grey */
    --surface: #24221c;       /* cards, raised panels, inputs */
    --sand: #1c1a15;          /* alt sections / chips / inline code */
    --line: #34312a;          /* hairlines on dark */
    --muted: #a8a298;         /* secondary text — clears AA on --bg */
    --accent-deep: #ff8c57;   /* links + accent text: a LIGHT orange (the dark counterpart of the
                                 light theme's deep orange) — this is the real fix for the random
                                 "light blue" links the browser used to invent on auto-dark */
    --green: #3ecb8a;         /* success ticks, lightened for dark */
  }

  body { background: var(--bg); color: var(--paper); }

  /* the typeset grid behind the hero was drawn in faint black — flip it to faint white */
  .zetterij::before { background-image: linear-gradient(to right, rgba(244, 244, 242, 0.05) 1px, transparent 1px); }
  .zetterij__niet { box-shadow: 0.05em 0.08em 0 rgba(244, 244, 242, 0.22); }

  /* sticky header + the mobile nav drawer were paper-coloured */
  .site-header { background: rgba(20, 19, 16, 0.82); }
  @media (max-width: 56rem) { .nav { background: var(--bg); border-bottom-color: var(--line); } }
  .nav a:not(.btn) { color: var(--paper); }
  .nav-toggle span { background: var(--paper); }

  /* text/borders that were pinned to --ink and would otherwise vanish on dark */
  .btn--ghost { color: var(--paper); border-color: var(--paper); }
  /* the non-featured pricing CTAs are .btn--light (a white pill on a white card in light mode) — on
     a dark card a hard-white slab glares, so mirror the light "subtle bordered pill" with a faint
     raised tint. Scoped to .plan so the .btn--light inside the dark .breedkaart band stays white. */
  .plan .btn--light { background: rgba(255, 255, 255, 0.06); color: var(--paper); border-color: var(--line); }
  .echtheid__chip { color: var(--paper); }
  .huizen__tab { color: var(--paper); }
  .billtoggle__opt.is-active { color: var(--paper); }
  .boventiteling__akte[aria-current='true'],
  .boventiteling__sector { color: var(--paper); }
  .doc p, .doc li { color: #d6d2ca; }
  @media (hover: hover) and (pointer: fine) {
    .boventiteling__akte:hover, .boventiteling__prijzen:hover { color: var(--paper); }
    .echtheid__chip:hover, .huizen__tab:hover { border-color: var(--paper); }
  }

  /* hard-coded light surfaces that are NOT "dark by design" */
  .codetabs__btn { background: var(--surface); color: var(--paper); }
  .card__icon { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
  .callout { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 30%, var(--surface)); }
  .checklist li::before { background: color-mix(in srgb, var(--green) 22%, var(--surface)); }
  .billtoggle__save { color: var(--green); background: color-mix(in srgb, var(--green) 18%, var(--surface)); }
  .bento__chips span { background: var(--sand); }

  /* the "stamped poster" cards: their bold ink frame + hard black print-shadow disappear on dark,
     so give them a light frame and a faint light shadow to keep the printed-poster character */
  .affichekaart { color: var(--paper); border-color: var(--paper); box-shadow: 0.35rem 0.4rem 0 rgba(244, 244, 242, 0.10); }
  @media (hover: hover) and (pointer: fine) { .affichekaart:hover { box-shadow: 0.55rem 0.6rem 0 var(--accent); } }

  /* three-voices panel accents are deep jewel tones in light mode — lift them to read on dark */
  .huizen { --huis-accent: #e06a7c; }
  .huizen[data-actief='kindermuseum'] { --huis-accent: #ff9a4d; }
  .huizen[data-actief='poppodium'] { --huis-accent: #a87fe0; }

  /* the retired-but-still-present hero chat mock — keep it coherent if any page still mounts it */
  .mock__body { background: var(--sand); }
  .mock__foot, .bubble--bot, .mock__card { background: var(--surface); }
  .mock__foot input { background: var(--sand); color: var(--paper); }
}

/* Aqivo - block component styles only.
   Site chrome (header/footer/typography) comes from /m/marketing.css.
   These rules style the Block List content blocks until block-specific designs land
   (e.g. the bespoke homepage hero / simchat). */

.block-hero {
    padding: 3rem 0 2rem;
}

.block-hero__heading {
    font-family: "Fraunces", Georgia, serif;
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.1;
    margin: 0 0 1rem;
}

.block-hero__subheading {
    font-size: 1.2rem;
    line-height: 1.6;
    max-width: 46rem;
    opacity: 0.85;
}

.block-hero__image,
.block-image__img {
    max-width: 100%;
    height: auto;
    border-radius: 0.75rem;
}

.block-text {
    margin: 2rem 0;
}

.block-image {
    margin: 2rem 0;
}

.block-image__caption {
    font-size: 0.875rem;
    opacity: 0.7;
    margin-top: 0.5rem;
}

/* ── Language switcher (header) ─────────────────────────────────────────────
   Restrained globe dropdown that adapts to the ink/paper/accent theme vars. */
.langswitch {
    position: relative;
}

.langswitch__toggle {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    list-style: none;
    cursor: pointer;
    padding: .5rem .7rem;
    border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
    border-radius: 2rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--ink);
    background: transparent;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.langswitch__toggle::-webkit-details-marker { display: none; }
.langswitch__toggle::marker { content: ""; }
.langswitch__globe { flex: none; }
.langswitch__caret { flex: none; opacity: .55; }

.langswitch__menu {
    position: absolute;
    top: calc(100% + .55rem);
    right: 0;
    min-width: 12rem;
    background: var(--paper);
    border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
    border-radius: .85rem;
    box-shadow: 0 1.5rem 3rem -1.25rem color-mix(in srgb, var(--ink) 45%, transparent);
    padding: .35rem;
    z-index: 60;
}

.langswitch__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: .55rem .7rem;
    border-radius: .55rem;
    text-decoration: none;
    color: var(--ink);
    font-size: .92rem;
    line-height: 1.2;
}

.langswitch__abbr {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    opacity: .4;
}

.langswitch__link--active { color: var(--accent); }
.langswitch__link--active .langswitch__abbr { color: var(--accent); opacity: .85; }

.langswitch__toggle:focus-visible,
.langswitch__link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .langswitch__toggle { transition: border-color .18s ease; }
    .langswitch__toggle:hover { border-color: color-mix(in srgb, var(--ink) 45%, transparent); }
    .langswitch__caret { transition: transform .2s ease; }
    .langswitch__link { transition: background .15s ease, color .15s ease; }
    .langswitch__link:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
}

.langswitch[open] .langswitch__caret { transform: rotate(180deg); }

/* On narrow screens the nav becomes a stacked panel; let the menu flow in it. */
@media (max-width: 56rem) {
    .langswitch__menu {
        position: static;
        box-shadow: none;
        margin-top: .4rem;
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .langswitch__toggle,
    .langswitch__caret,
    .langswitch__link { transition: none; }
}

/* Het Kaartje — the dual ticket-shaped hero input: paste a URL and we build a live demo bot,
   or type a question and you ask the real assistant on this page. Styled as a theatre ticket:
   amber stub with perforation, ink frame, hard print shadow. Shared by the homepage now and the
   landing pages from fase 3. */

.kaartje { max-width: 44rem; margin: 0; }
.kaartje__label { display: block; font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); margin-bottom: 0.55rem; }
.kaartje__ticket { position: relative; display: flex; align-items: stretch; background: var(--surface); border: 2px solid var(--ink); border-radius: 0.9rem; box-shadow: 0.4rem 0.45rem 0 rgba(10, 10, 10, 0.9); transform: rotate(-0.4deg); }
.kaartje__ticket:focus-within { outline: 3px solid var(--accent-deep); outline-offset: 3px; }

/* the tear-off stub: amber, perforated edge, vertical caption */
.kaartje__stub { flex: none; display: grid; place-items: center; width: 2.4rem; background: var(--accent); border-right: 2px dashed var(--ink); border-radius: 0.7rem 0 0 0.7rem; }
.kaartje__stub span { writing-mode: vertical-rl; transform: rotate(180deg); font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); }

.kaartje__veld { flex: 1; min-width: 0; border: 0; background: transparent; padding: 1rem 1rem; font: inherit; font-size: 1.05rem; color: var(--ink); }
.kaartje__veld::placeholder { color: var(--muted); }
.kaartje__veld:focus { outline: none; }
.kaartje__veld:disabled { color: var(--muted); cursor: not-allowed; -webkit-text-fill-color: var(--muted); }
.kaartje__knop { margin: 0.45rem 0.45rem 0.45rem 0; white-space: nowrap; }
.kaartje__knop:disabled { cursor: not-allowed; opacity: 0.65; }
.kaartje__knop:disabled:hover { transform: none; box-shadow: none; background: var(--accent); color: var(--on-accent); }

/* the ticket is spent: one free demo per visitor — drop the playful tilt and dim it so the locked
   state reads as "done", not broken. */
.kaartje__ticket.is-gebruikt { transform: none; opacity: 0.75; box-shadow: 0.4rem 0.45rem 0 rgba(10, 10, 10, 0.3); }

.kaartje__micro { font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace; font-size: 0.76rem; color: var(--muted); margin: 0.55rem 0 0; min-height: 1.2em; }
.kaartje__micro em { font-style: normal; color: var(--muted); opacity: 0.85; }

/* a clear inline CTA inside the micro-hint (e.g. "Open je demo →", "Maak een gratis account") */
.kaartje__link { color: var(--accent-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 0.15em; }

/* "Opent zo automatisch…" — a tiny three-dot loader in the hint while the fresh demo finishes
   ingesting and the chat is about to open itself, so the short wait reads as progress, not a hang. */
.kaartje__wachtdots { display: inline-flex; gap: 0.18rem; margin: 0 0.2rem; vertical-align: middle; }
.kaartje__wachtdots i { width: 0.32rem; height: 0.32rem; border-radius: 50%; background: var(--accent-deep); }
@media (prefers-reduced-motion: no-preference) {
  .kaartje__wachtdots i { animation: kaartje-wachtdot 1.1s ease-in-out infinite; }
  .kaartje__wachtdots i:nth-child(2) { animation-delay: 0.18s; }
  .kaartje__wachtdots i:nth-child(3) { animation-delay: 0.36s; }
  @keyframes kaartje-wachtdot { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-0.2rem); } }
}

/* Cloudflare Turnstile slot — renders an iframe only when a challenge is shown; no gap when empty. */
.kaartje__turnstile { margin-top: 0.6rem; }
.kaartje__turnstile:empty { margin-top: 0; }

/* "Bewaar deze demo" / throttle-capture: a small mail row under the ticket */
.kaartje__bewaar { margin-top: 1.1rem; max-width: 44rem; }
.kaartje__bewaarlabel { display: block; font-size: 0.88rem; font-weight: 600; margin-bottom: 0.45rem; }
.kaartje__bewaarrij { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.kaartje__bewaarrij input { flex: 1; min-width: 12rem; padding: 0.6rem 0.85rem; border: 1.5px solid var(--ink); border-radius: 999px; font: inherit; background: var(--surface); }
.kaartje__bewaarrij input:focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 2px; }

/* the credits roll while a demo builds — honestly labelled as scripted */
.kaartje__aftiteling { list-style: none; margin: 0.9rem 0 0; padding: 0; font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace; font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; }
.kaartje__aftiteling li { opacity: 0; transform: translateY(0.25rem); transition: opacity 0.3s ease, transform 0.3s ease; margin: 0.15rem 0; }
.kaartje__aftiteling li.in { opacity: 1; transform: none; }
.kaartje__aftiteling .kaartje__aftiteling-label { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }

/* the tear: the stub rips off when a demo build starts */
@media (prefers-reduced-motion: no-preference) {
  .kaartje__ticket.is-gescheurd .kaartje__stub { animation: kaartje-scheur 0.55s cubic-bezier(0.3, 0, 0.7, 0.2) forwards; }
  @keyframes kaartje-scheur {
    35% { transform: translate(-0.15rem, 0.1rem) rotate(-3deg); }
    100% { transform: translate(-1.1rem, 0.9rem) rotate(-12deg); opacity: 0; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .kaartje__ticket { transform: none; }
  .kaartje__aftiteling li { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 38rem) {
  .kaartje__ticket { flex-wrap: wrap; }
  .kaartje__stub { display: none; }
  .kaartje__veld { flex: 1 1 100%; padding: 0.85rem 0.9rem; }
  .kaartje__knop { margin: 0 0.45rem 0.45rem 0.45rem; flex: 1; justify-content: center; }
}

/* Dark theme — the ink ticket-frame + hard black print-shadow vanish on dark, so swap the frame to
   the off-white text colour and a faint light shadow (the stub stays amber — brand carries over).
   Tokens come from marketing.css's dark :root; literal fallbacks keep this file standalone. */
@media (prefers-color-scheme: dark) {
  .kaartje__label,
  .kaartje__veld { color: var(--paper, #f4f4f2); }
  .kaartje__ticket { border-color: var(--paper, #f4f4f2); box-shadow: 0.4rem 0.45rem 0 rgba(244, 244, 242, 0.08); }
  .kaartje__ticket.is-gebruikt { box-shadow: 0.4rem 0.45rem 0 rgba(244, 244, 242, 0.04); }
  .kaartje__bewaarrij input { border-color: var(--line, #34312a); color: var(--paper, #f4f4f2); }
}

/* simchat — a replayed widget conversation, styled like the real embed widget. The full
   transcript lives in the HTML (SEO + no-JS/reduced-motion fallback shows everything at once);
   component-simchat.js replays it beat by beat with typing indicators. Always labelled
   "opgenomen gesprek" — honesty is a design rule on this site. */

.simchat { width: min(24rem, 100%); margin: 0; background: #fff; border-radius: 1.3rem; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45); overflow: hidden; font-size: 0.92rem; color: var(--ink); }

.simchat__head { display: flex; gap: 0.65rem; align-items: center; padding: 0.85rem 1rem; background: linear-gradient(135deg, #0a0a0a, #2c2b26); color: #fff; }
.simchat__avatar { flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.simchat__avatar svg { width: 1.7rem; height: 1.7rem; fill: var(--ink); }
.simchat__naam { font-weight: 700; font-size: 0.95rem; line-height: 1.2; }
.simchat__sub { font-size: 0.72rem; opacity: 0.78; display: flex; align-items: center; gap: 0.35rem; }
.simchat__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #3ddc84; }
.simchat__label { margin-left: auto; font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace; font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; background: rgba(255, 255, 255, 0.14); padding: 0.22rem 0.55rem; border-radius: 999px; white-space: nowrap; }

.simchat__body { padding: 1rem; display: flex; flex-direction: column; gap: 0.55rem; min-height: 21rem; max-height: 23rem; overflow-y: auto; background: #faf9f7; }

.simchat__msg { max-width: 86%; padding: 0.6rem 0.85rem; border-radius: 1rem; line-height: 1.45; }
.simchat__msg--bot { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 0.3rem; align-self: flex-start; }
.simchat__msg--user { background: var(--ink); color: #fff; border-bottom-right-radius: 0.3rem; align-self: flex-end; }
.simchat__msg--agent { background: #fff; border: 1.5px solid var(--accent); border-bottom-left-radius: 0.3rem; align-self: flex-start; }

.simchat__sys { align-self: center; font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace; font-size: 0.66rem; color: var(--muted); background: var(--sand); padding: 0.25rem 0.7rem; border-radius: 999px; text-align: center; }

.simchat__card { align-self: flex-start; width: 88%; background: #fff; border: 1px solid var(--line); border-radius: 0.9rem; padding: 0.7rem 0.85rem; box-shadow: 0 6px 18px rgba(10, 10, 10, 0.07); }
.simchat__card h4 { margin: 0 0 0.15rem; font-family: var(--serif); font-weight: 600; font-size: 1.02rem; }
.simchat__card .m { font-size: 0.74rem; color: var(--muted); margin: 0 0 0.5rem; }
.simchat__cta { display: inline-block; background: var(--accent); color: var(--on-accent); font-size: 0.76rem; font-weight: 700; padding: 0.32rem 0.75rem; border-radius: 999px; }

.simchat__bron { align-self: flex-start; font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace; font-size: 0.64rem; color: var(--muted); }

.simchat__typing { align-self: flex-start; display: flex; gap: 0.28rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 1rem; border-bottom-left-radius: 0.3rem; padding: 0.55rem 0.8rem; }
.simchat__typing em { font-style: normal; font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace; font-size: 0.62rem; color: var(--muted); margin-right: 0.3rem; }
.simchat__typing span { width: 0.38rem; height: 0.38rem; border-radius: 50%; background: var(--muted); animation: simchat-stip 1s infinite; }
.simchat__typing span:nth-child(2) { animation-delay: 0.15s; }
.simchat__typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes simchat-stip { 0%, 60%, 100% { transform: none; opacity: 0.55; } 30% { transform: translateY(-0.2rem); opacity: 1; } }

/* Composer — a faithful copy of the live widget's footer: a rounded input field (the fake placeholder
   sits in it like real typed-nothing) and a 2.75rem gradient send button with a soft accent shadow and
   the same paper-plane icon. align-items:flex-end matches the real composer (send sticks to the bottom). */
.simchat__foot { display: flex; gap: 0.55rem; align-items: flex-end; padding: 0.75rem; border-top: 1px solid var(--line); background: #fff; }
/* :not(.simchat__send) — the send button is also a <span>, so the input rule must NOT match it
   (it has higher specificity than .simchat__send and would otherwise stretch the button to flex:1). */
.simchat__foot span:not(.simchat__send) { flex: 1; display: flex; align-items: center; min-height: 2.75rem; border: 1px solid var(--line); border-radius: 0.9rem; padding: 0.5rem 0.85rem; font-size: 0.9rem; color: var(--muted); background: var(--paper); }
.simchat__send { flex: none; width: 2.75rem; height: 2.75rem; border-radius: 0.9rem; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 78%, #000)); display: grid; place-items: center; color: var(--on-accent); box-shadow: 0 0.25rem 0.75rem color-mix(in srgb, var(--accent) 32%, transparent); }
.simchat__send svg { width: 1.15rem; height: 1.15rem; }

/* progressive replay: with JS active, lines hide until their beat plays them */
.simchat--js [data-stap]:not(.is-af) { display: none; }
.simchat--js [data-stap].is-af { animation: simchat-in 0.3s ease both; }
@keyframes simchat-in { from { opacity: 0; transform: translateY(0.3rem); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .simchat--js [data-stap].is-af { animation: none; }
  .simchat__typing span { animation: none; }
}

/* Dark theme — the simchat lives inside the (always-dark) .zaal stage, but in dark mode the white
   card would float on a now-dark page; turn it into a dark card that mirrors how the REAL widget
   paints itself in dark mode (faint translucent bubbles, kept-orange accents). Tokens come from
   marketing.css's dark :root, with literal fallbacks so this file is safe on its own. */
@media (prefers-color-scheme: dark) {
  .simchat { background: var(--surface, #24221c); color: var(--paper, #f4f4f2); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6); }
  /* head is already a dark gradient — leave it */
  .simchat__body { background: var(--sand, #1c1a15); }
  .simchat__msg--bot,
  .simchat__msg--agent,
  .simchat__card,
  .simchat__typing { background: rgba(255, 255, 255, 0.05); }
  .simchat__msg--user { background: rgba(255, 255, 255, 0.12); color: var(--paper, #f4f4f2); }
  .simchat__foot { background: var(--surface, #24221c); }
  .simchat__foot span:not(.simchat__send) { background: var(--sand, #1c1a15); }
}