/* =============================================================================
 * experience-library.css — work-page Experience Library grid + format detail page
 * Styled to the qiksense light-page look (Oxanium, teal #0fa9b2), not the mockup's
 * own palette. Loaded on the work page and on /work/formats/ detail pages.
 * =============================================================================
 */

/* ---------- Experience Library (work page) ---------- */
/* Standalone /library/ page: extra top padding so the title clears the fixed nav
   (on /work/ the grid sits mid-page, so it only needs the base 76px). */
.library-page #library { padding-top: 128px; }
#library {
    background: #f7fbfc;
    background-image:
        linear-gradient(rgba(15,169,178,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,169,178,.05) 1px, transparent 1px);
    background-size: 52px 52px;
    padding: 76px 0 92px;
}
#library .xlib-inner { max-width: min(1200px, 92vw); margin: 0 auto; padding: 0 20px; }

.xlib-head { position: relative; max-width: 940px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; gap: 14px; }
.xlib-sub { max-width: 900px; margin-left: auto; margin-right: auto; }
/* arrow on the right, on the title row */
.xlib-head-arrow { position: absolute; right: 0; top: 4px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #cfe6e8; border-radius: 50%; color: #0fa9b2; background: #fff; transition: background .18s, color .18s, border-color .18s; }
.xlib-head-arrow svg { width: 20px; height: 20px; }
.xlib-head-arrow:hover { background: #0fa9b2; border-color: #0fa9b2; color: #fff; }
.xlib-title { font-family: 'Oxanium', sans-serif; font-weight: 700; font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.02em; color: #0fa9b2; margin: 0; line-height: 1.2; }
.xlib-title-accent { color: #0fa9b2; }
.xlib-sub { font-family: 'Oxanium', sans-serif; font-size: 16px; line-height: 1.65; color: #5a5a66; margin: 0; }
/* Teaser variant (work page) — links across to the standalone /library/ page. */
.xlib-head--teaser { padding: 24px 0; }
.xlib-teaser-btn { display: inline-flex; align-items: center; justify-content: center; align-self: center; height: 44px; padding: 0 30px; margin-top: 24px; border-radius: 999px; background: #0fa9b2; color: #fff; font-family: 'Oxanium', sans-serif; font-size: 16px; font-weight: 600; text-decoration: none; transition: background .18s, box-shadow .18s; }
.xlib-teaser-btn:hover { background: linear-gradient(140deg, #0fa9b2 0%, #0fa9b2 45%, #FB9082 100%); box-shadow: 0 0 24px rgba(15,169,178,.45); }

/* Category tabs — two even rows, each filling the same width (buttons flex to fill). */
.xlib-filters { margin: 34px auto 4px; max-width: min(1180px, 94vw); }
.xlib-chips { display: flex; flex-direction: column; gap: 8px; }
.xlib-chip-row { display: flex; gap: 8px; }
.xlib-chip { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; height: 38px; font-family: 'Oxanium', sans-serif; background: #fff; border: 1px solid #dce8ea; color: #5a5a66; border-radius: 999px; padding: 0 16px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .16s, border-color .16s, color .16s; }
.xlib-chip:hover { border-color: #0fa9b2; color: #0fa9b2; }
.xlib-chip[aria-pressed="true"] { background: #0fa9b2; border-color: #0fa9b2; color: #fff; box-shadow: 0 4px 14px rgba(15,169,178,0.35); }

/* Mobile category dropdown (hidden on desktop; swapped in for the chips at <=760px). */
.xlib-dd { display: none; position: relative; }
.xlib-dd-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 46px; padding: 0 18px; border-radius: 12px; border: 1px solid #dce8ea; background: #fff; color: #1a1a1f; font-family: 'Oxanium', sans-serif; font-size: 15px; font-weight: 600; cursor: pointer; }
.xlib-dd-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xlib-dd-caret { width: 20px; height: 20px; flex: 0 0 auto; color: #0fa9b2; transition: transform .2s ease; }
.xlib-dd-trigger[aria-expanded="true"] .xlib-dd-caret { transform: rotate(180deg); }
.xlib-dd-menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; background: #fff; border: 1px solid #dce8ea; border-radius: 12px; box-shadow: 0 12px 30px rgba(10,43,46,.16); overflow: hidden auto; max-height: 320px; }
.xlib-dd-menu[hidden] { display: none; }
.xlib-dd-opt { display: block; width: 100%; text-align: left; padding: 12px 18px; border: 0; border-bottom: 1px solid #eef4f5; background: none; font-family: 'Oxanium', sans-serif; font-size: 15px; font-weight: 600; color: #5a5a66; cursor: pointer; }
.xlib-dd-opt:last-child { border-bottom: 0; }
.xlib-dd-opt.is-active { color: #0fa9b2; background: #eaf6f7; }

.xlib-toolbar { margin-top: 28px; padding-top: 20px; border-top: 1px solid #dce8ea; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.xlib-search { position: relative; flex: 0 0 320px; max-width: 320px; }
.xlib-search input { width: 100%; padding: 11px 14px; border: 1px solid #dce8ea; border-radius: 10px; background: #fff; font-family: 'Oxanium', sans-serif; font-size: 14px; color: #1a1a1f; outline: none; transition: border-color .16s; }
.xlib-search input::placeholder { color: #97a7ad; }
.xlib-search input:focus { border-color: #0fa9b2; }
.xlib-reset { font-family: 'Oxanium', sans-serif; border: 1px solid #1a1a1f; background: transparent; color: #1a1a1f; border-radius: 999px; padding: 10px 22px; font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color .16s, color .16s, background .16s; }
.xlib-reset:hover { border-color: #0fa9b2; color: #0fa9b2; }

.xlib-grid { margin-top: 44px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.xlib-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e3edef; border-radius: 14px; overflow: hidden; text-decoration: none; transition: border-color .18s, box-shadow .18s, transform .18s; }
.xlib-card:hover { border-color: #0fa9b2; }
.xlib-card-media { position: relative; aspect-ratio: 16/9; background: #eef5f6; border-bottom: 1px solid #e3edef; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.xlib-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.xlib-card-media.is-placeholder { background: repeating-linear-gradient(135deg, #f2f8f9 0 9px, #e8f1f2 9px 18px); }
.xlib-card-media.is-placeholder::after { content: attr(data-label); font-family: 'Oxanium', sans-serif; font-size: 11px; letter-spacing: .05em; color: #94aab0; text-transform: uppercase; padding: 0 12px; text-align: center; }
.xlib-card-body { padding: 16px 18px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.xlib-card-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.xlib-pill { font-family: 'Oxanium', sans-serif; font-size: 10.5px; font-weight: 600; color: #0fa9b2; background: rgba(15,169,178,.09); border-radius: 5px; padding: 3px 7px; }
.xlib-card-name { font-family: 'Oxanium', sans-serif; margin: 0; font-size: 16px; font-weight: 700; color: #1a1a1f; letter-spacing: -.01em; }
.xlib-card-blurb { font-family: 'Oxanium', sans-serif; margin: 0; font-size: 13px; line-height: 1.5; color: #5a5a66; }
/* Circular "go" arrow on each live card (name left, arrow right). */
.xlib-card-name { flex: 1 1 auto; }
.xlib-card-arrow { flex: 0 0 auto; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: #0fa9b2; transition: transform .2s ease; }
.xlib-card-arrow svg { width: 22px; height: 22px; }
.xlib-card:hover .xlib-card-arrow { transform: rotate(-45deg); }

/* Coming-soon cards: badge + muted, not clickable */
.xlib-card--soon { cursor: default; }
.xlib-card--soon:hover { border-color: #e3edef; box-shadow: none; transform: none; }
.xlib-card--soon .xlib-card-name { color: #6b7a80; }
.xlib-card--soon .xlib-card-blurb { color: #97a7ad; }
.xlib-soon { position: absolute; top: 10px; left: 10px; z-index: 2; font-family: 'Oxanium', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #e5573f; background: #fdece9; border: 1px solid #f6cfc9; border-radius: 999px; padding: 4px 9px 2px; line-height: 1; }
/* Coming-soon cards showing the original coded animation — light backdrop to match the other cards. */
.xlib-card-media--anim { background: radial-gradient(circle at 50% 55%, rgba(15,169,178,.06), #eef5f6 72%); }
.xlib-card-anim { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.xlib-card-anim > * { transform: scale(.74); }
/* Racing: road is height:100%, so drop the scale to let the track reach the card's top & bottom. */
.xlib-card-anim > .et-race-scene { transform: none; }
/* Body Motion: its scene animates transform (overriding the shared scale), so resize it directly to make the figure smaller. */
.xlib-card-anim > .et-body-scene { width: 88px; height: 104px; }

/* Scroll-in reveal (fade + slide up), staggered per card via inline transition-delay. */
.xlib-head, .xlib-filters { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.xlib-card { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease, border-color .18s ease; }
.xlib-head.is-in, .xlib-filters.is-in, .xlib-card.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .xlib-head, .xlib-filters, .xlib-card { opacity: 1; transform: none; transition: none; }
}

.xlib-empty { margin-top: 22px; padding: 52px; text-align: center; background: #fff; border: 1px dashed #c9dde0; border-radius: 14px; }
.xlib-empty h3 { font-family: 'Oxanium', sans-serif; margin: 0 0 6px; font-size: 16px; font-weight: 700; color: #1a1a1f; }
.xlib-empty p { font-family: 'Oxanium', sans-serif; margin: 0; font-size: 14px; color: #5a5a66; }

/* Mobile "Show more" expand button (shown by JS only on phones when the grid is collapsed). */
/* Matches the blog "View all posts" button (.home-blog-cta .l2-btn-2): solid teal fill. */
.xlib-more { display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; margin: 20px auto 0; min-height: 40px; padding: 0 32px; border-radius: 25px; border: none; background: #0fa9b2; color: #fff; -webkit-text-fill-color: #fff; box-shadow: 0 4px 14px rgba(15,169,178,0.35); font-family: 'Oxanium', sans-serif; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background .3s ease, box-shadow .2s ease; }
.xlib-more:hover { background: linear-gradient(140deg, #0fa9b2 0%, #0fa9b2 45%, #FB9082 100%); box-shadow: 0 0 24px rgba(15,169,178,0.45); color: #fff; }
.xlib-more[hidden] { display: none; }

@media (max-width: 1024px) { .xlib-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) {
    #library { padding: 56px 0 68px; }
    .xlib-grid { grid-template-columns: repeat(2, 1fr); }
    .xlib-toolbar { flex-direction: column; align-items: stretch; }
    .xlib-search { flex: 1 1 auto; max-width: none; }
    /* Swap the chip rows for a single dropdown (like the FAQ mobile category picker). */
    .xlib-chips { display: none; }
    .xlib-dd { display: block; }
}
@media (max-width: 460px) {
    /* 2 per row on phones so the grid isn't an endless single column. */
    .xlib-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .xlib-card-body { padding: 12px 12px 14px; }
    .xlib-card-name { font-size: 14px; }
    .xlib-card-arrow { width: 22px; height: 22px; }
    .xlib-card-arrow svg { width: 18px; height: 18px; }
}


/* ---------- Format detail page (/work/formats/) ---------- */
.qsf-wrap { --qsf-ink: #1a1a1f; --qsf-soft: #5a5a66; --qsf-line: #e3edef; --qsf-teal: #0fa9b2; --qsf-teal-dk: #0d949c; font-family: 'Oxanium', sans-serif; }
.qsf-wrap a { text-decoration: none; }
/* max-width + inline padding mirror the work-page hero column (min(1200px,90vw)
   + 20px) so the detail hero content lines up with where the work-page hero
   title begins. */
.qsf-inner { max-width: min(1200px, 90vw); margin: 0 auto; box-sizing: border-box; }

/* Hero */
.qsf-hero {
    padding: 128px 0 56px;
    background: #f7fbfc;
    border-bottom: 1px solid #dce8ea;
    background-image:
        linear-gradient(rgba(15,169,178,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,169,178,.05) 1px, transparent 1px);
    background-size: 52px 52px;
}
.qsf-crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: #8a9ba1; }
.qsf-crumb a { color: #0fa9b2; font-size: 16px; font-weight: 600; }
.qsf-crumb a:hover { color: #0d3a3f; }
.qsf-crumb .qsf-crumb-cur { color: #5a5a66; }
.qsf-hero-grid { margin-top: 26px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; align-items: start; }
.qsf-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.qsf-tag { font-size: 11.5px; font-weight: 600; color: #0fa9b2; background: rgba(15,169,178,.09); border-radius: 6px; padding: 4px 10px; }
/* Hero title/lede sized to match the body section title (.qsf-h2) + text. */
.qsf-title { margin: 0; font-size: clamp(30px, 4.2vw, 44px); line-height: 1.2; font-weight: 700; letter-spacing: -.03em; color: #0fa9b2; }
.qsf-lede { margin: 14px 0 0; font-size: 16px; line-height: 1.5; color: #5a5a66; max-width: 480px; }
.qsf-lede b { font-weight: 700; color: #1a1a1f; }
.qsf-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.qsf-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 32px; border-radius: 25px; font-size: 16px; font-weight: 600; font-family: 'Oxanium', sans-serif; transition: background .18s, border-color .18s, color .18s, box-shadow .18s; }
.qsf-btn-primary { background: #0fa9b2; color: #fff; box-shadow: 0 4px 14px rgba(15,169,178,0.35); }
.qsf-btn-primary:hover { background: linear-gradient(140deg, #0fa9b2 0%, #0fa9b2 45%, #FB9082 100%); box-shadow: 0 0 24px rgba(15,169,178,.45); color: #fff; }
.qsf-btn-ghost { border: 1px solid #c9dde0; color: #1a1a1f; background: #fff; }
.qsf-btn-ghost:hover { border-color: #0fa9b2; color: #0fa9b2; }
.qsf-hero-media { position: relative; aspect-ratio: 16/9; border-radius: 16px; border: 1px solid #dce8ea; overflow: hidden; background: repeating-linear-gradient(135deg, #f2f8f9 0 10px, #e8f1f2 10px 20px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.qsf-hero-media img, .qsf-hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qsf-slot { font-size: 11px; letter-spacing: .08em; color: #7e969c; text-transform: uppercase; }
.qsf-slot--dim { color: #a3b4b9; }

/* Facts row */
.qsf-facts-band { border-bottom: 1px solid #e3edef; }
.qsf-facts { display: grid; grid-template-columns: repeat(4, 1fr); }
.qsf-fact { padding: 24px; display: flex; flex-direction: column; gap: 5px; border-right: 1px solid #e3edef; }
.qsf-fact:last-child { border-right: 0; }
.qsf-fact-k { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #8a9ba1; font-weight: 600; }
.qsf-fact-v { font-size: 21px; font-weight: 700; color: #1a1a1f; letter-spacing: -.015em; }

/* Body */
.qsf-body { padding: 89px 0 84px; }
.qsf-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 60px; align-items: start; }
.qsf-main { display: flex; flex-direction: column; gap: 91px; min-width: 0; }
.qsf-sec { display: flex; flex-direction: column; gap: 30px; scroll-margin-top: 90px; }
.qsf-h2 { margin: 0; font-size: clamp(26px, 3vw, 36px); line-height: 1.2; font-weight: 700; letter-spacing: -.02em; color: #0fa9b2; }
#ideas > .qsf-h2 { text-align: center; }

/* Steps */
.qsf-step { display: grid; grid-template-columns: 64px 1fr; gap: 20px; padding: 20px 0; border-bottom: 1px solid #edf3f4; }
.qsf-step-n { font-size: 44px; color: #0fa9b2; font-weight: 700; letter-spacing: -.02em; padding-top: 0; line-height: 1; }
.qsf-step h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; color: #1a1a1f; }
.qsf-step p { margin: 0; font-size: 14px; line-height: 1.5; color: #5a5a66; }

/* Customise grid */
.qsf-custom { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qsf-custom-item { display: flex; gap: 11px; align-items: flex-start; background: #f7fbfc; border: 1px solid #e3edef; border-radius: 10px; padding: 14px 16px; }
.qsf-dot { width: 7px; height: 7px; flex: 0 0 7px; margin-top: 6px; border-radius: 50%; background: #0fa9b2; }
.qsf-custom-item b { font-size: 16px; font-weight: 600; color: #1a1a1f; display: block; margin-bottom: 5px; }
.qsf-custom-item span { font-size: 14px; line-height: 1.5; color: #5a5a66; }

/* Venues */
.qsf-venues { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.qsf-venue { border: 1px solid #e3edef; border-radius: 12px; overflow: hidden; }
.qsf-venue-media { aspect-ratio: 3/2; background: repeating-linear-gradient(135deg, #f2f8f9 0 9px, #e8f1f2 9px 18px); display: flex; align-items: center; justify-content: center; }
.qsf-venue-body { padding: 16px 16px 18px; }
.qsf-venue-ico { display: inline-flex; margin: 0 0 12px; color: #0fa9b2; }
.qsf-venue-ico svg { width: 38px; height: 38px; }
.qsf-venue-body h3 { margin: 0 0 5px; font-size: 16px; font-weight: 600; color: #1a1a1f; }
.qsf-venue-body p { margin: 0; font-size: 14px; line-height: 1.5; color: #5a5a66; }

/* Ways you can use it — idea cards */
.qsf-ideas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.qsf-idea { border: 1px solid #e3edef; border-radius: 12px; overflow: hidden; background: #fff; }
.qsf-idea-media { aspect-ratio: 16/10; background: repeating-linear-gradient(135deg, #f2f8f9 0 9px, #e8f1f2 9px 18px); display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 12px; }

/* Before/after comparison slider */
.qsf-idea-media.qsf-compare { aspect-ratio: 3/4; padding: 0; position: relative; overflow: hidden; cursor: ew-resize; touch-action: none; -webkit-user-select: none; user-select: none; }
.qsf-compare-pane { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.qsf-compare-pane img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qsf-compare-before { background: repeating-linear-gradient(135deg, #eef2f3 0 10px, #e4ebec 10px 20px); }
.qsf-compare-after { background: linear-gradient(135deg, #cfeef1, #a6e0e6); clip-path: inset(0 0 0 var(--pos, 50%)); }
.qsf-compare-handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(15,169,178,.35); pointer-events: none; }
.qsf-compare-grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; border-radius: 999px; background: #fff; border: 2px solid #0fa9b2; color: #0fa9b2; box-shadow: 0 2px 10px rgba(0,0,0,.2); display: flex; align-items: center; justify-content: center; }
.qsf-compare-grip svg { width: 20px; height: 20px; }
/* Small circular thumbnail on the "original" pane showing the face used for the swap. */
.qsf-compare-face { position: absolute; left: 12px; bottom: 12px; width: 92px; height: 92px; border-radius: 50%; overflow: hidden; border: 3px solid #fff; box-shadow: 0 3px 12px rgba(0,0,0,.4); z-index: 3; }
.qsf-idea-body { padding: 13px 16px 16px; }
.qsf-idea-body h3 { margin: 0 0 5px; font-size: 16px; font-weight: 600; color: #1a1a1f; }
.qsf-idea-body p { margin: 0; font-size: 14px; line-height: 1.5; color: #5a5a66; }
/* What it can do for your campaign — dark outcome band */
.qsf-outcome .qsf-outcome-inner { background: linear-gradient(180deg, #0d3a3f 0%, #0a2d31 100%); border-radius: 18px; padding: 46px 48px; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.5fr); gap: 44px; }
.qsf-outcome-title { margin: 0; font-family: 'Oxanium', sans-serif; font-size: clamp(26px, 3vw, 36px); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: #fff; max-width: 340px; }
.qsf-outcome-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 44px; align-content: start; }
.qsf-outcome-n { display: block; font-family: 'Oxanium', sans-serif; font-size: 22px; font-weight: 700; letter-spacing: .02em; color: #0fa9b2; margin-bottom: 8px; }
.qsf-outcome-item h3 { margin: 0 0 8px; font-size: 16px; font-weight: 600; color: #fff; }
.qsf-outcome-item p { margin: 0; font-size: 14px; line-height: 1.6; color: #9fb6bb; }

/* Pre-footer CTA banner */
.qsf-cta-band { background: #0fa9b2; border-radius: 18px; padding: 38px 44px; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.qsf-cta-copy h2 { margin: 0 0 8px; font-family: 'Oxanium', sans-serif; font-size: clamp(26px, 3vw, 36px); line-height: 1.2; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.qsf-cta-copy p { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.9); }
.qsf-cta-actions { display: flex; gap: 12px; flex-shrink: 0; }
.qsf-cta-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 32px; border-radius: 25px; font-size: 16px; font-weight: 600; font-family: 'Oxanium', sans-serif; transition: background .18s, color .18s, box-shadow .18s, border-color .18s; white-space: nowrap; }
.qsf-cta-btn--solid { background: #fff; color: #0fa9b2; }
.qsf-cta-btn--solid:hover { background: #0d3a3f; color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.2); }
.qsf-cta-btn--ghost { border: 1.5px solid rgba(255,255,255,.7); color: #fff; }
.qsf-cta-btn--ghost:hover { background: #fff; border-color: #fff; color: #0fa9b2; }

/* Campaign rows */
.qsf-case { display: grid; grid-template-columns: 172px 1fr auto; gap: 22px; align-items: center; border: 1px solid #e3edef; border-radius: 12px; padding: 14px; transition: border-color .18s; }
.qsf-case:hover { border-color: #0fa9b2; }
.qsf-case-media { aspect-ratio: 16/10; border-radius: 8px; background: repeating-linear-gradient(135deg, #f2f8f9 0 9px, #e8f1f2 9px 18px); display: flex; align-items: center; justify-content: center; }
.qsf-case-body h3 { margin: 0 0 5px; font-size: 16px; font-weight: 700; color: #1a1a1f; }
.qsf-case-body p { margin: 0 0 5px; font-size: 13.5px; line-height: 1.5; color: #5a5a66; }
.qsf-case-stat { font-size: 11.5px; color: #0fa9b2; letter-spacing: .02em; }
.qsf-case-more { font-size: 14px; font-weight: 600; color: #0fa9b2; padding-right: 8px; white-space: nowrap; }

/* Specs */
.qsf-specs { border: 1px solid #e3edef; border-radius: 12px; overflow: hidden; }
.qsf-spec { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 14px 20px; border-bottom: 1px solid #edf3f4; }
.qsf-spec:last-child { border-bottom: 0; }
.qsf-spec-k { font-size: 14px; font-weight: 600; color: #1a1a1f; }
.qsf-spec-v { font-size: 14px; line-height: 1.55; color: #5a5a66; }

/* Grouped "Ways to set it up" cards (Online / On-site). */
.qsf-setups { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.qsf-setups .qsf-setup:only-child { grid-column: 1 / -1; }

/* "From attention to participation" — a lead line + an arrow flow of campaign steps. */
.qsf-flow-lead { margin: 0 0 18px; font-size: 16px; line-height: 1.6; color: #4a4a55; }
.qsf-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.qsf-flow-step { display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 999px; background: #ecf7f9; border: 1px solid #cfeaed; color: #0d3a3f; font-weight: 600; font-size: 14px; }
.qsf-flow-arrow { color: #0fa9b2; font-weight: 700; font-size: 15px; }

/* Screenshot gallery (9:16) after "How it works" on game, luck and pickleball pages.
   Empty items render a dashed placeholder; fill by supplying `screens: ['/path.jpg', …]`. */
.qsf-screens { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.qsf-screen { position: relative; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #eef4f5; border: 1px solid #e2ecee; }
.qsf-screen img, .qsf-screen video { width: 100%; height: 100%; object-fit: cover; display: block; }
.qsf-screen.is-empty { border-style: dashed; border-color: #c3d5d8; }
.qsf-screen-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #9fb3b7; font-family: 'Oxanium', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .06em; pointer-events: none; }
.qsf-screen:not(.is-empty) .qsf-screen-label { display: none; }

/* Client campaign showcase (Sound Activation): a lead line, a 5-wide 9:16 media row and a read-more link. */
.qsf-project-lead { margin: 0 0 18px; font-size: 15.5px; line-height: 1.62; color: #4a5b5e; }
.qsf-project-lead b { color: #14343a; }
.qsf-project-row { grid-template-columns: repeat(5, 1fr); gap: 12px; }
.qsf-project-cta { margin-top: 22px; }
@media (max-width: 640px) {
    /* Every portrait (9:16) gallery is too cramped when wrapped on phones: switch each
       one — the game/luck "A closer look" galleries and the campaign filmstrip alike — to
       a swipeable filmstrip so each screen stays a readable size and users swipe through. */
    .qsf-screens { display: flex; grid-template-columns: none; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 8px; scrollbar-width: none; }
    .qsf-screens::-webkit-scrollbar { display: none; }
    .qsf-screens .qsf-screen { flex: 0 0 85%; scroll-snap-align: start; }
}

/* "What you can create" cards with an example image (AR + Sound pages).
   Empty media renders a placeholder; fill by adding `img: '/path.jpg'` to each create item. */
.qsf-creates-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.qsf-create-card { border: 1px solid #e6eef0; border-radius: 14px; overflow: hidden; background: #fff; }
.qsf-create-media { position: relative; aspect-ratio: 4 / 3; background: #eef4f5; }
.qsf-create-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qsf-create-media.is-empty { border-bottom: 1px dashed #dbe6e8; }
.qsf-create-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #9fb3b7; font-family: 'Oxanium', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .06em; pointer-events: none; }
.qsf-create-media:not(.is-empty) .qsf-create-ph { display: none; }
.qsf-create-body { padding: 14px 16px 16px; }
.qsf-create-body h3 { margin: 0 0 5px; font-family: 'Oxanium', sans-serif; font-size: 16px; font-weight: 700; color: #1a1a1f; }
.qsf-create-body p { margin: 0; font-size: 14px; line-height: 1.5; color: #5a5a66; }
@media (max-width: 620px) { .qsf-creates-grid { grid-template-columns: 1fr; } }
.qsf-setup { border: 1px solid #e3edef; border-radius: 14px; padding: 24px 24px 26px; background: #fbfdfd; }
.qsf-setup-title { margin: 0 0 8px; font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: #0fa9b2; }
.qsf-setup-desc { margin: 0 0 20px; min-height: 45px; font-size: 14px; line-height: 1.6; color: #5a5a66; }
.qsf-setup-rows { display: flex; flex-direction: column; }
.qsf-setup-row { display: grid; grid-template-columns: 160px 1fr; gap: 16px; padding: 13px 0; border-top: 1px solid #e8f0f1; }
.qsf-setup-k { font-size: 16px; font-weight: 600; color: #1a1a1f; }
.qsf-setup-v { font-size: 14px; line-height: 1.5; color: #5a5a66; }
.qsf-setup-note { margin-top: 16px; padding: 14px 16px; background: #fff7f5; border: none; border-radius: 10px; }
.qsf-setup-note b { display: block; font-size: 16px; font-weight: 600; color: #e5573f; margin-bottom: 4px; }
.qsf-setup-note span { font-size: 14px; line-height: 1.5; color: #5a5a66; }
/* Featured (teal-filled) setup card — e.g. the On-site experience. */
.qsf-setup--teal { background: #ecf7f9; border-color: #cfeaed; }
.qsf-setup--teal .qsf-setup-title { color: #0fa9b2; }
.qsf-setup--teal .qsf-setup-row { border-top-color: #d6e9eb; }
.qsf-setup--teal .qsf-setup-note { background: #fff7f5; border: none; }

/* FAQ */
/* Card-style FAQ, matching the pricing page (.ref-faq-card): grey pill card,
   teal hover/open, +/- sign in teal. */
.qsf-faq { display: flex; flex-direction: column; gap: 16px; }
.qsf-faq-item { background: #f8f9fa; border: 1px solid rgba(0,0,0,0.12); box-shadow: 0 1px 2px rgba(0,0,0,0.04); border-radius: 12px; overflow: hidden; transition: border-color .2s ease, background .2s ease; }
.qsf-faq-item:hover { border-color: #0fa9b2; background: #ecf7f9; }
.qsf-faq-item:has(.qsf-faq-a:not([hidden])) { border-color: #0fa9b2; background: #fff; }
.qsf-faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px; border: 0; background: none; padding: 20px 24px; text-align: left; font-family: 'Oxanium', sans-serif; font-size: 16px; font-weight: 600; color: #1a1a1f; cursor: pointer; }
.qsf-faq-item:hover .qsf-faq-q,
.qsf-faq-item:has(.qsf-faq-a:not([hidden])) .qsf-faq-q { color: #0fa9b2; }
.qsf-faq-sign { font-size: 22px; color: #0fa9b2; flex: 0 0 auto; line-height: 1; }
.qsf-faq-a { margin: 0; padding: 0 24px 22px; font-size: 14.5px; line-height: 1.68; color: #5a5a66; }
.qsf-faq-item[hidden] { display: block; }

/* Sidebar */
.qsf-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 96px; }
.qsf-side-card { border: 1px solid #e3edef; border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.qsf-side-card--toc { background: #f7fbfc; }
.qsf-side-label { font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase; color: #8a9ba1; font-weight: 600; }
.qsf-toc { display: flex; flex-direction: column; gap: 9px; }
.qsf-toc a { font-size: 14px; color: #5a5a66; }
.qsf-toc a:hover { color: #0fa9b2; }
.qsf-side-card h3 { margin: 0; font-size: 17px; font-weight: 700; color: #1a1a1f; }
.qsf-related a { display: flex; flex-direction: column; gap: 3px; padding: 11px 0; border-top: 1px solid #edf3f4; }
.qsf-related a:first-of-type { border-top: 0; }
.qsf-related-t { font-size: 14.5px; font-weight: 600; color: #1a1a1f; }
.qsf-related-d { font-size: 12.5px; line-height: 1.45; color: #8a9ba1; }
.qsf-side-cta { border: 1px solid #0fa9b2; background: rgba(15,169,178,.07); }
.qsf-side-cta p { margin: 0; font-size: 13.5px; line-height: 1.55; color: #3d5058; }
.qsf-side-cta .qsf-btn-primary { text-align: center; padding: 11px 22px; font-size: 14.5px; }

@media (max-width: 980px) {
    .qsf-hero-grid { grid-template-columns: 1fr; gap: 28px; }
    .qsf-cols { grid-template-columns: 1fr; gap: 40px; }
    .qsf-side { position: static; }
    .qsf-facts { grid-template-columns: repeat(2, 1fr); }
    .qsf-fact:nth-child(2) { border-right: 0; }
    .qsf-fact:nth-child(1), .qsf-fact:nth-child(2) { border-bottom: 1px solid #e3edef; }
}
@media (max-width: 620px) {
    .qsf-custom, .qsf-venues, .qsf-values { grid-template-columns: 1fr; }
    .qsf-ideas { grid-template-columns: 1fr 1fr; }
    .qsf-case { grid-template-columns: 1fr; }
    .qsf-case-more { display: none; }
    .qsf-spec { grid-template-columns: 1fr; gap: 4px; }
    .qsf-setups { grid-template-columns: 1fr; }
    .qsf-setup-row { grid-template-columns: 1fr; gap: 3px; }
    .qsf-outcome .qsf-outcome-inner { grid-template-columns: 1fr; gap: 28px; padding: 32px 24px; }
    .qsf-outcome-grid { grid-template-columns: 1fr; gap: 26px; }
    .qsf-outcome-title { max-width: none; }
    .qsf-cta-band { flex-direction: column; align-items: center; text-align: center; padding: 30px 26px; }
    .qsf-cta-actions { width: 100%; flex-direction: column; }
    .qsf-cta-btn { width: 100%; }
    .qsf-facts { grid-template-columns: 1fr; }
    .qsf-fact { border-right: 0 !important; border-bottom: 1px solid #e3edef; }
}