/* Product examples complement the photos without inventing a game interface. */
.marketing-icon { flex-shrink: 0; vertical-align: middle; }
/* One gentle entrance per heading/icon; content is never hidden or delayed. */
@media (prefers-reduced-motion: no-preference) {
    .marketing-body .marketing-heading-enter { animation: marketing-heading-enter 420ms ease-out; }
    .marketing-body .marketing-icon-enter { transform-origin: center; animation: marketing-icon-swing 880ms ease-out; }
    .marketing-body .marketing-icon-enter[data-marketing-motion="slide-left"] { animation-name: marketing-icon-slide-left; animation-duration: 760ms; }
    .marketing-body .marketing-icon-enter[data-marketing-motion="bounce"] { animation-name: marketing-icon-bounce; animation-duration: 780ms; }
    .marketing-body .marketing-icon-enter[data-marketing-motion="slide-right"] { animation-name: marketing-icon-slide-right; animation-duration: 760ms; }
    @keyframes marketing-heading-enter {
        from { translate: 0 6px; }
        to { translate: 0 0; }
    }
    @keyframes marketing-icon-swing {
        0% { rotate: -45deg; }
        25% { rotate: 34deg; }
        46% { rotate: -22deg; }
        65% { rotate: 12deg; }
        80% { rotate: -5deg; }
        92% { rotate: 2deg; }
        100% { rotate: 0deg; }
    }
    @keyframes marketing-icon-slide-left {
        0% { translate: -16px 0; rotate: -15deg; }
        55% { translate: 3px 0; rotate: 7deg; }
        78% { translate: -1px 0; rotate: -3deg; }
        100% { translate: 0 0; rotate: 0deg; }
    }
    @keyframes marketing-icon-slide-right {
        0% { translate: 16px 0; rotate: 15deg; }
        55% { translate: -3px 0; rotate: -7deg; }
        78% { translate: 1px 0; rotate: 3deg; }
        100% { translate: 0 0; rotate: 0deg; }
    }
    @keyframes marketing-icon-bounce {
        0% { translate: 0 10px; scale: .9; }
        40% { translate: 0 -5px; scale: 1.08; }
        68% { translate: 0 2px; scale: .98; }
        85% { translate: 0 -1px; scale: 1.01; }
        100% { translate: 0 0; scale: 1; }
    }
}
/* Small musical accents support the text; they are decorative, never controls. */
.marketing-body .eyebrow-symbol { display: inline-flex; vertical-align: middle; margin-right: .65rem; color: #ffab7d; }
.eyebrow-symbol .marketing-icon { width: 20px; height: 20px; }
.section-title { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1rem; }
.section-title h2 { min-width: 0; margin-bottom: 0; overflow-wrap: anywhere; hyphens: auto; }
.section-symbol { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; margin-top: .05rem; color: #8c3d26; background: #ffe3d2; border-radius: 48% 52% 44% 56%; transform: rotate(-5deg); }
.section-symbol .marketing-icon { width: 22px; height: 22px; transform: rotate(5deg); }
.body-section:nth-of-type(even) .section-symbol { background: #f6e6c8; color: #735127; }
.body-section.body-section--night .section-symbol { background: transparent; color: #ffab7d; transform: none; }
.body-section--night .section-symbol .marketing-icon { transform: none; }
.hero-art, .playlist-guide { position: relative; }
.photo-music-accent { position: absolute; top: -15px; right: 16px; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 2px solid #ffb697; border-radius: 50% 50% 30% 50%; background: #fff0e2; color: #a64a2e; box-shadow: 0 5px 15px #07172526; transform: rotate(10deg); pointer-events: none; }
.photo-music-accent .marketing-icon { width: 31px; height: 31px; transform: rotate(-10deg); }
.cta-heading { display: flex; align-items: center; justify-content: center; gap: .8rem; margin-bottom: .8rem; }
.cta-heading h2 { min-width: 0; margin-bottom: 0; overflow-wrap: anywhere; hyphens: auto; }
.cta-symbol { display: inline-flex; padding: .6rem; color: #ffab7d; border: 1px solid #ffab7d66; border-radius: 14px 14px 4px 14px; transform: rotate(5deg); }
.cta-symbol .marketing-icon { width: 25px; height: 25px; transform: rotate(-5deg); }
.product-story { margin: 2rem 0 3rem; padding: 2rem; background: #f1ece5; border: 1px solid #dedbd4; border-radius: 22px; }
.product-story-copy { max-width: 70ch; margin: 0 auto 1.5rem; text-align: center; }
.product-story h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); margin-bottom: .8rem; }
.product-story-copy p:last-child { color: var(--text-soft); margin-bottom: 0; }
.product-story figure { margin: 0; min-width: 0; }
.product-story-examples { display: flex; justify-content: center; align-items: stretch; gap: 2rem; }
.product-story-examples figure { flex: 1 1 0; padding: 1.25rem; background: #fffaf4; border: 1px solid #dedbd4; border-radius: 16px; text-align: center; }
.product-story-examples img { display: block; width: auto; max-width: 100%; height: auto; max-height: 340px; object-fit: contain; margin: 1rem auto 0; }
.product-story-examples .share-example img { width: 224px; height: 224px; }
.product-story-mobile img { border: 4px solid #263c4b; border-radius: 16px; background: #fffaf4; box-shadow: 0 6px 18px #07172514; }
.example-label { display: flex; align-items: center; justify-content: center; gap: .6rem; color: var(--brand-ink); font-weight: 700; }
.example-label .marketing-icon { color: #973d23; }
.product-story figcaption { margin-top: .9rem; color: var(--text-soft); font-size: .8rem; line-height: 1.7; }
.product-story-host img { display: block; width: 100%; height: auto; border: 1px solid #d1d6d7; border-radius: 12px; }
.product-story-host figcaption { text-align: center; }
.share-alternative { display: flex; align-items: flex-start; gap: .7rem; max-width: 70ch; margin: 1.5rem auto 0 !important; color: var(--text-soft); font-size: .92rem; }
.share-alternative .marketing-icon { margin-top: .2rem; color: #973d23; }
.related-section { background: #fff; border-top: 1px solid #e4e3df; }
.related-section h2 { font-size: 1.55rem; margin-bottom: 1.5rem; }
.related-section .link-card-list { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.marketing-body .related-section .link-card { padding: 1.2rem; border: 1px solid #dcdedc; border-radius: 16px; background: #fffaf4; }
.related-section .link-card strong::after { content: ' →'; color: #973d23; }
.page-main--ideas .marketing-icon { margin-bottom: .8rem; color: #973d23; }
.marketing-home .step-help { display: inline-flex; align-items: center; min-height: 44px; margin-top: .5rem; font-size: .85rem; font-weight: 600; color: #893b22; }
.playlist-inline-help { margin-top: 1rem !important; }
.playlist-inline-help a { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .55rem; min-height: 44px; font-weight: 600; }
.playlist-guide { padding: 1.5rem; background: #fffaf4; color: var(--text-main); border: 1px solid #ff784f80; border-radius: 22px; box-shadow: 0 16px 40px #00000025; }
.playlist-guide h2 { font-size: 1.4rem; margin-bottom: 1.2rem; }
.playlist-guide ol { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; list-style: none; padding: 0; margin: 0; }
.playlist-guide li { position: relative; display: grid; grid-template-columns: 1fr auto; gap: .55rem; padding: 1rem; border: 1px solid #dedbd4; border-radius: 14px; background: #fff; }
.playlist-guide-number { display: inline-grid; place-items: center; width: 28px; height: 28px; background: #ffebe0; color: #893b22; border-radius: 50%; font-weight: 700; }
.playlist-guide .marketing-icon { color: #973d23; }
.playlist-guide strong, .playlist-guide li > span:last-child { grid-column: 1 / -1; }
.playlist-guide strong { font-size: .92rem; }
.playlist-guide li > span:last-child, .playlist-guide-note { font-size: .8rem; color: var(--text-soft); line-height: 1.6; }
.playlist-guide .section-kicker { color: #973d23; }
.playlist-guide-note { margin: 1rem 0 0 !important; }
/* Compact presentation; cookie choices, text and consent behavior stay unchanged. */
.marketing-body .cookie-consent { background: rgba(6,23,43,.22); }
.marketing-body .cookie-consent-card { padding: 18px 20px; max-height: calc(100dvh - 32px); overflow-y: auto; background: #fffaf4; border: 1px solid #e4d4c4; }
.marketing-body .cookie-consent-card h3 { font-size: 1.15rem; margin-bottom: .6rem; }
.marketing-body .cookie-consent-card p { font-size: .83rem; line-height: 1.55; margin-bottom: .7rem; }
.marketing-body .cookie-consent-message:empty { margin: 0; min-height: 0; }
.marketing-body .cookie-consent-button { min-height: 44px; font-size: .82rem; }
.marketing-body .cookie-consent-actions { gap: .6rem; flex-wrap: wrap; }
.marketing-body .cookie-consent-button--primary { background: #ff784f; color: #071725; }
.marketing-body .cookie-consent-button--secondary { background: #fffaf4; color: #071725; border: 1px solid #b9a99a; }
.marketing-body .cookie-consent-link { color: #743b29; font-size: .83rem; }
.marketing-body .cookie-consent-preferences { background: #f3eee7; }
@media (min-width: 375px) and (max-width: 600px) {
    .marketing-body .cookie-consent-actions { flex-direction: row; }
    .marketing-body .cookie-consent-actions .cookie-consent-button { flex: 1; width: auto; padding: 10px 6px; font-size: .8rem; }
}
.marketing-body .card-formats-section { background: #f1ece5; }
.marketing-body .card-formats .format-card { background: #fffaf4; border-color: #dedbd4; color: var(--brand-ink); }
.marketing-body .card-formats .format-name { color: var(--brand-ink); }
.marketing-body .card-formats .card-description, .marketing-body .card-formats-section .format-note { color: var(--text-soft); }
.marketing-body .card-formats .bingo-preview { border-color: #263c4b; background: #fffaf4; }
.marketing-body .card-formats .bingo-preview > div { background-color: #ffb697; }
.marketing-body .card-formats .bingo-preview > .logo { background: #fffaf4 url('/img/logo.png?v=20261008') center / contain no-repeat; }
.marketing-body .card-product-example { background: #f1ece5; border-color: #dedbd4; }
.marketing-body .card-product-example figcaption { color: var(--text-soft); }
.marketing-body .card-product-example--mobile img { border: 4px solid #263c4b; border-radius: 16px; background: #fffaf4; }
@media (min-width: 601px) and (max-width: 960px) {
    .page-hero .hero-art { width: 100%; max-width: 640px; justify-self: center; }
    .playlist-guide { width: 100%; max-width: 640px; justify-self: center; }
}
@media (max-width: 600px) {
    .section-title { gap: .6rem; }
    .section-symbol { width: 30px; height: 30px; }
    .section-symbol .marketing-icon { width: 19px; height: 19px; }
    .cta-heading { align-items: flex-start; justify-content: flex-start; gap: .65rem; }
    .cta-symbol { padding: .45rem; }
    .cta-symbol .marketing-icon { width: 22px; height: 22px; }
    .photo-music-accent { width: 40px; height: 40px; top: -12px; right: 12px; }
    .photo-music-accent .marketing-icon { width: 26px; height: 26px; }
    .playlist-guide { padding: 1rem; }
    .playlist-guide h2 { font-size: 1.15rem; margin-bottom: .85rem; }
    .playlist-guide li { padding: .7rem; gap: .35rem; }
    .playlist-guide-number { width: 24px; height: 24px; font-size: .8rem; }
    .playlist-guide strong { font-size: .82rem; }
    .playlist-guide li > span:last-child, .playlist-guide-note { font-size: .75rem; }
    .marketing-home .audience-card img[src*="muzino-scholen"] { object-position: 24% center; }
    .product-story { padding: 1.2rem; margin: 1.6rem 0 2rem; }
    .product-story-copy { text-align: left; }
    .product-story-examples { flex-direction: column; gap: 1rem; }
    .product-story-examples figure { width: 100%; padding: 1rem; }
    .product-story-examples img { max-height: 300px; }
    .product-story-examples .share-example img { width: 200px; height: 200px; }
    .example-label { font-size: .95rem; }
    .related-section .link-card-list { grid-template-columns: 1fr; gap: .75rem; }
}