/* Codebrouwerij Chatbot — marketing site. On the Codebrouwerij house style:
   ink + paper neutrals, amber accent, 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. The display cut is preloaded from index.html. */
@font-face {
  font-family: 'Special Gothic Expanded One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/m/fonts/special-gothic-expanded-one-400.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: 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;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/m/fonts/hanken-grotesk.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 {
  --ink: #0a0a0a;          /* cb-black */
  --paper: #f4f4f2;        /* cb-paper */
  --surface: #ffffff;
  --accent: #ffb400;       /* Codebrouwerij amber — for fills & decoration (use BLACK text on it) */
  --accent-deep: #8a6500;  /* contrast-safe deep amber for text/links on paper (passes AA) */
  --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: 'Special Gothic Expanded One', 'Arial Black', system-ui, sans-serif;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Hanken Grotesk', 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;
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.08; letter-spacing: -0.015em; margin: 0 0 0.5em; }
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
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: #0a0a0a; 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: #0a0a0a; 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: #0a0a0a; 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; }
.brand { display: flex; align-items: center; gap: 0.5rem; font-family: var(--display); font-weight: 400; font-size: 1.15rem; letter-spacing: -0.01em; text-transform: lowercase; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand__mark { width: 1.9rem; height: 1.9rem; border-radius: 0.5rem; background: var(--ink); color: var(--accent); display: grid; place-items: center; font-size: 0.9rem; font-family: var(--sans); font-weight: 800; text-transform: none; }
.brand em { color: var(--accent-deep); font-style: normal; }
.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 { font-size: 1rem; }
  .brand__mark { width: 1.6rem; height: 1.6rem; }
}

/* 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(--ink); }
}
.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: 400; text-transform: uppercase; font-size: clamp(2.2rem, 7.3vw, 7.05rem); line-height: 0.97; letter-spacing: -0.005em; 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(--ink); 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, 180, 0, 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: 400; text-transform: uppercase; font-size: clamp(2.2rem, 5vw, 4.6rem); line-height: 1; 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(--ink); }
.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(--ink); 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: 400; text-transform: uppercase; font-size: clamp(2.4rem, 6.5vw, 6.2rem); line-height: 0.97; margin: 0 0 1.6rem; }
.eyebrow--piek { color: rgba(10, 10, 10, 0.78); }
.eyebrow--piek::before { background: var(--ink); }
.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: 400; text-transform: uppercase; font-size: clamp(1.7rem, 4.8vw, 3.8rem); line-height: 1.02; margin: 0 0 1.2rem; }
.affiche .hero__title { font-family: var(--serif); font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.2; letter-spacing: 0; }
.affiche .hero__title .hl { color: inherit; 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, 180, 0, 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: 400; font-size: clamp(2.7rem, 6.5vw, 4.8rem); line-height: 0.98; letter-spacing: -0.01em; }
/* 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: #0a0a0a; 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: #0a0a0a; 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: #0a0a0a; font-size: 0.74rem; font-weight: 600; padding: 0.32rem 0.7rem; border-radius: 999px; }
.mock__foot { padding: 0.7rem 1.1rem; border-top: 1px solid var(--line); display: flex; gap: 0.5rem; background: #fff; }
.mock__foot input { flex: 1; border: 1px solid var(--line); border-radius: 0.7rem; padding: 0.5rem 0.7rem; font: inherit; font-size: 0.85rem; color: var(--muted); }
.mock__send { width: 2.2rem; height: 2.2rem; border-radius: 0.6rem; background: var(--accent); display: grid; place-items: center; color: #0a0a0a; }

/* 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: #fff7e6; 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: #0a0a0a; 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; } }
.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 huizen — one question, three voices; the active house 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); text-transform: uppercase; font-size: clamp(1.4rem, 3vw, 2.2rem); 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: 400; text-transform: uppercase; font-size: 1.18rem; line-height: 1.12; }
.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: #0a0a0a; 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, 180, 0, 0.2); position: relative; }
.plan__tag { position: absolute; top: -0.8rem; left: 50%; transform: translateX(-50%); background: var(--accent); color: #0a0a0a; 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,180,0,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; }

/* 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; }
.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) */