/* =====================================================================
   Key for Change — VIDEO_POST page styling (task #1000976 / design #1000975)
   Loaded ONLY on template: video (gated in base.html.twig).
   Everything is scoped under .k4c-vid so it can't leak into other pages,
   and all brand colour comes from the theme tokens (tokens.css). Local
   vars below only cover the typographic feel of this one page type.
   ===================================================================== */
.k4c-vid {
  --kv-ink: #241A33; --kv-ink-2: #4A415A; --kv-ink-3: #6F6580; --kv-ink-4: #8A809A;
  --kv-paper: var(--k4c-purple-50, #F5F2FA); --kv-paper-2: var(--k4c-purple-100, #EBE5F2); --kv-white: #FFFFFF;
  --kv-brand: var(--k4c-purple, #512D7F); --kv-deep: var(--k4c-purple-dark, #3D2260); --kv-deeper: var(--k4c-purple-900, #2C1748);
  --kv-lilac: #C9A6F2; --kv-lilac-2: #EADFF4;
  --kv-line: rgba(81,45,127,0.14); --kv-line-2: rgba(81,45,127,0.28);
  --kv-measure: 68ch; --kv-rail: 264px; --kv-ease: var(--k4c-ease, cubic-bezier(.2,.7,.2,1));
  /* Typography — mirror the About/Programme/Success heroes: Montserrat display,
     Georgia serif standfirst, Lato sans. The headings below reference
     var(--k4c-font-display,…) which is defined NOWHERE in the theme, so it was
     resolving to `inherit` = Lato — the hero H1 (and every page heading) rendered
     in the body font, off-brand and inconsistent with every other hero (#1001015). */
  --kv-display: var(--k4c-font-heading); --kv-serif: Georgia, 'Times New Roman', serif; --kv-sans: var(--k4c-font-body);
  --k4c-font-display: var(--k4c-font-heading);
  color: var(--kv-ink);
}
.k4c-vid *, .k4c-vid *::before, .k4c-vid *::after { box-sizing: border-box; }
/* neutralise the vendored Pico/quark bare-tag margins that otherwise leak in */
.k4c-vid button, .k4c-vid input { margin: 0; font: inherit; }
.k4c-vid button { cursor: pointer; }
.k4c-vid :focus-visible { outline: 2px solid var(--kv-brand); outline-offset: 3px; }
.k4c-vid__c { max-width: var(--k4c-container-wide, 1440px); margin: 0 auto; padding-inline: var(--k4c-container-pad, 2rem); }

/* ---------- hero band with live player ---------- */
/* The band owns the top of the page and paints its deep purple up under the
   transparent fixed nav (its own padding-top clears the bar for the hero copy).
   Cancel nav.css's `body:not(.has-hero) main#start` scaffold offset — mirrors
   inner-hero.css's `body:has(.kfc-band)` rule. Without this a nav-height strip
   of light body background shows behind the transparent nav at the very top,
   so the nav reads a different colour to the rest of the site (#1000986). */
body:has(.k4c-vid__band) main#start { padding-top: 0; }
.k4c-vid__band { position: relative; background: var(--kv-deeper); color: #F4EEFA; overflow: hidden; padding-top: var(--k4c-nav-height, 4.5rem); }
.k4c-vid__band::before { content: ""; position: absolute; left: 40%; top: -300px; width: 900px; height: 900px; border-radius: 50%; background: radial-gradient(circle, rgba(129,86,181,0.4) 0%, rgba(81,45,127,0.18) 45%, rgba(42,21,63,0) 70%); pointer-events: none; }
.k4c-vid__band > * { position: relative; }
.k4c-vid__hero { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 40px; padding-top: 40px; padding-bottom: 40px; align-items: center; }
.k4c-vid__copy { grid-column: span 6; display: flex; flex-direction: column; gap: 18px; }
.k4c-vid__crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #B9A6D4; flex-wrap: wrap; }
.k4c-vid__crumbs a { color: inherit; text-decoration: none; } .k4c-vid__crumbs svg { width: 12px; height: 12px; } .k4c-vid__crumbs span:last-child { color: #fff; }
.k4c-vid__h1 { margin: 0; font-family: var(--k4c-font-display, inherit); font-size: clamp(36px, 5vw, 54px); line-height: 1.03; font-weight: 800; letter-spacing: -0.02em; color: #fff; text-wrap: balance; }
.k4c-vid__h1 .kv-accent { color: var(--kv-lilac); }
.k4c-vid__standfirst { margin: 0; font-family: var(--kv-serif); font-size: 19px; line-height: 1.5; color: #D9C6F0; text-wrap: pretty; }
.k4c-vid__meta { display: flex; align-items: center; gap: 14px; font-size: 13px; color: #B9A6D4; flex-wrap: wrap; }
.k4c-vid__byline { display: flex; align-items: center; gap: 10px; }
.k4c-vid__byline .kv-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(160deg, #C9B7DC 0%, #512D7F 100%); flex-shrink: 0; background-size: cover; background-position: center; }
.k4c-vid__byline b { color: #fff; font-weight: 600; }
.k4c-vid__ctas { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; }
.kv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 13px 22px; border-radius: var(--k4c-radius-pill, 999px); font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; border: 0; }
.kv-btn svg { width: 16px; height: 16px; }
.kv-btn--white { background: #fff; color: var(--kv-deep); }
.kv-btn--ghost { background: transparent; border: 1.5px solid rgba(255,255,255,0.35); color: #fff; font-weight: 600; }
.kv-btn--brand { background: var(--kv-brand); color: #fff; }

/* the player: one element, two states */
.k4c-vid__slot { grid-column: span 6; position: relative; aspect-ratio: 16 / 9; }
.k4c-vid__player { position: absolute; inset: 0; border-radius: 20px; overflow: hidden; background: #120820; box-shadow: 0 30px 60px rgba(0,0,0,0.35); transition: opacity .3s var(--kv-ease), transform .3s var(--kv-ease); }
.k4c-vid__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.k4c-vid__poster { position: absolute; inset: 0; background: center / cover no-repeat linear-gradient(160deg, #6B4A96 0%, #3A2160 100%); display: flex; align-items: center; justify-content: center; cursor: pointer; border: 0; padding: 0; width: 100%; }
.k4c-vid__poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,8,34,0.55) 0%, rgba(20,8,34,0) 50%); }
.k4c-vid__poster .kv-play { position: relative; z-index: 1; width: 84px; height: 84px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,0.35); transition: transform .2s var(--kv-ease); }
.k4c-vid__poster:hover .kv-play { transform: scale(1.06); }
.k4c-vid__poster .kv-play svg { width: 30px; height: 30px; margin-left: 4px; }
.k4c-vid__poster .kv-dur { position: absolute; z-index: 1; right: 14px; bottom: 12px; padding: 4px 8px; border-radius: 6px; background: rgba(0,0,0,0.6); color: #fff; font-size: 12px; font-weight: 600; }
.k4c-vid__minibar { display: none; }
.k4c-vid__player.is-mini { position: fixed; inset: auto 24px 24px auto; width: 380px; aspect-ratio: 16 / 9; border-radius: 14px; z-index: 90; box-shadow: 0 24px 60px rgba(0,0,0,0.45); animation: kv-dock .35s var(--kv-ease); }
@keyframes kv-dock { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
.k4c-vid__player.is-mini .k4c-vid__minibar { display: flex; position: absolute; top: 0; left: 0; right: 0; z-index: 2; align-items: center; justify-content: space-between; padding: 8px 8px 8px 12px; background: linear-gradient(180deg, rgba(20,8,34,0.8) 0%, rgba(20,8,34,0) 100%); font-size: 12px; color: #fff; pointer-events: none; }
.k4c-vid__player.is-mini .k4c-vid__minibar span { max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k4c-vid__player.is-mini .k4c-vid__minibar button { pointer-events: auto; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,0.15); color: #fff; border: 0; display: inline-flex; align-items: center; justify-content: center; }
.k4c-vid__player.is-mini .k4c-vid__minibar button svg { width: 14px; height: 14px; }
.k4c-vid__slot .kv-ghost { position: absolute; inset: 0; border-radius: 20px; border: 1px dashed rgba(255,255,255,0.2); display: none; align-items: center; justify-content: center; font-size: 13px; color: #B9A6D4; text-align: center; padding: 0 20px; }
.k4c-vid__slot.is-empty .kv-ghost { display: flex; }

/* chapter chips */
.k4c-vid__chips { border-top: 1px solid rgba(255,255,255,0.14); }
.k4c-vid__chips .k4c-vid__c { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 18px; }
.k4c-vid__chips .kv-label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #B9A6D4; margin-right: 6px; }
.kv-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: var(--k4c-radius-pill, 999px); border: 1px solid rgba(255,255,255,0.25); background: none; color: #fff; font-size: 13px; font-weight: 500; }
.kv-chip:hover { border-color: #fff; }
.kv-chip i { display: inline-flex; width: 20px; height: 20px; border-radius: 50%; background: var(--kv-lilac); color: var(--kv-deep); align-items: center; justify-content: center; font-style: normal; font-size: 10px; font-weight: 700; }
.kv-chip small { color: #B9A6D4; font-size: 11px; }

/* ---------- page grid ---------- */
.k4c-vid__page { display: grid; grid-template-columns: minmax(0, 1fr) var(--kv-rail); gap: 64px; padding-top: 48px; padding-bottom: 40px; align-items: start; }
.k4c-vid__main { min-width: 0; max-width: none; }
/* feature blocks fill the full column; running prose keeps a readable line length */
.k4c-vid__prose { max-width: calc(var(--kv-measure) + 8ch); }
.k4c-vid__rail { position: sticky; top: calc(var(--k4c-nav-height, 4.5rem) + 24px); font-size: 13px; }
.k4c-vid__toc { border-left: 1px solid var(--kv-line-2); padding-left: 16px; }
.k4c-vid__toc .kv-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kv-ink-4); margin-bottom: 10px; display: block; }
/* align-items:stretch overrides quark2's base flex ol (align-items:center),
   which was shrinking each li to its content width and centring it in the rail
   — so the entries now fill 100% of the column and line up hard-left (#1000985). */
.k4c-vid__toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: stretch; gap: 6px; counter-reset: kvtoc; }
.k4c-vid__toc li { counter-increment: kvtoc; width: 100%; }
.k4c-vid__toc a { display: grid; grid-template-columns: 22px 1fr; gap: 6px; color: var(--kv-ink-3); text-decoration: none; line-height: 1.35; padding: 2px 0; }
.k4c-vid__toc a::before { content: counter(kvtoc, decimal-leading-zero); font-variant-numeric: tabular-nums; color: var(--kv-ink-4); font-size: 11px; padding-top: 2px; }
.k4c-vid__toc a.is-active, .k4c-vid__toc a:hover { color: var(--kv-brand); }
.k4c-vid__rail .kv-support { margin-top: 24px; padding: 14px 16px; border-radius: 12px; background: var(--kv-lilac-2); color: var(--kv-ink-2); line-height: 1.45; }
.k4c-vid__rail .kv-support b { display: block; color: var(--kv-ink); margin-bottom: 4px; }

/* ---------- answer-first + questions ---------- */
.k4c-vid__answer { position: relative; margin: 0 0 40px; padding: 30px 34px 26px; border-radius: 20px; background: var(--kv-deep); color: #EDE6F5; font-size: 16px; line-height: 1.6; overflow: hidden; }
.k4c-vid__answer::before { content: ""; position: absolute; right: -160px; top: -200px; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(129,86,181,0.5) 0%, rgba(42,21,63,0) 70%); }
.k4c-vid__answer > * { position: relative; }
.k4c-vid__answer .kv-eyebrow { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kv-lilac); font-weight: 600; margin-bottom: 12px; }
.k4c-vid__answer p { margin: 0; font-size: 21px; line-height: 1.42; color: #fff; }
.k4c-vid__answer p strong { color: var(--kv-lilac); font-weight: 500; }
.k4c-vid__answer .kv-strip { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 8px; counter-reset: kvh; }
.k4c-vid__answer .kv-strip li { counter-increment: kvh; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); font-size: 13px; line-height: 1.3; color: #D9C6F0; }
.k4c-vid__answer .kv-strip li::before { content: "0" counter(kvh); display: block; font-family: var(--k4c-font-display, inherit); font-size: 16px; font-weight: 800; color: var(--kv-lilac); margin-bottom: 4px; }
.k4c-vid__questions { margin: 0 0 44px; padding: 0 0 32px; border-bottom: 1px solid var(--kv-line); }
.k4c-vid__questions b { display: block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kv-brand); margin-bottom: 12px; }
.k4c-vid__questions ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
/* Pico's `ul li { list-style: square }` targets the li directly and beats the
   `none` set on the ul above — kill the square bullet on the li itself (#1000987,
   same landmine as pages.css .k4c-checklist / #1000897). */
.k4c-vid__questions li { list-style: none; margin: 0; }
.k4c-vid__questions a { padding: 8px 14px; border-radius: var(--k4c-radius-pill, 999px); background: var(--kv-white); border: 1px solid var(--kv-line); color: var(--kv-ink-2); font-size: 14px; text-decoration: none; }
.k4c-vid__questions a:hover { border-color: var(--kv-brand); color: var(--kv-brand); }

/* ---------- article prose (markdown body, enhanced by video.js) ---------- */
.k4c-vid__prose { counter-reset: kvchapter; font-size: 19px; line-height: 1.62; }
.k4c-vid__prose p { margin: 0 0 1.25em; text-wrap: pretty; }
.k4c-vid__prose > p:first-of-type { font-size: 22px; line-height: 1.5; color: var(--kv-ink); }
.k4c-vid__prose h2 { counter-increment: kvchapter; position: relative; margin: 0; padding: 44px 0 0; border-top: 1px solid var(--kv-line); font-family: var(--k4c-font-display, inherit); font-size: clamp(26px, 3.4vw, 36px); line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; scroll-margin-top: calc(var(--k4c-nav-height, 4.5rem) + 16px); text-wrap: balance; }
.k4c-vid__prose > h2:first-child { border-top: 0; padding-top: 0; }
.k4c-vid__prose h2::after { content: ""; display: block; width: 48px; height: 3px; background: var(--kv-brand); margin: 14px 0 18px; }
/* chapter number + watch button injected by JS into a wrapper before the h2 */
/* position:relative + z-index lifts the bar (and its Watch button) ABOVE the
   following h2. The h2 is a later static sibling pulled up over the bar by the
   -44px margin, so it paints on top and — despite padding-right keeping its TEXT
   clear — its transparent box covered the top-right button and swallowed clicks
   (#1001025). No background here, so raising it is purely a hit-target fix. */
.k4c-vid__chapterbar { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 44px; border-top: 1px solid var(--kv-line); margin-bottom: -44px; }
/* reserve a right gutter so long chapter titles never run under the right-aligned
   watch button (widest realistic button ~261px incl. an hour-long timestamp) */
.k4c-vid__chapterbar + h2 { border-top: 0; padding-top: 12px; padding-right: 17rem; }
.k4c-vid__chapterbar .kv-kick { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kv-ink-4); font-variant-numeric: tabular-nums; }
.kv-watch { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: var(--k4c-radius-pill, 999px); background: var(--kv-white); border: 1px solid var(--kv-line-2); color: var(--kv-brand); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.kv-watch:hover { background: var(--kv-lilac-2); }
.kv-watch i { display: inline-flex; width: 20px; height: 20px; border-radius: 50%; background: var(--kv-brand); color: #fff; align-items: center; justify-content: center; }
.kv-watch i svg { width: 9px; height: 9px; margin-left: 1px; }
/* "Next step:" paragraphs, upgraded to a callout by JS */
.k4c-vid__next { margin: 20px 0 8px !important; padding: 18px 22px; border-radius: 16px; background: var(--kv-lilac-2); font-size: 15px !important; line-height: 1.55; color: var(--kv-ink); display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.k4c-vid__next .kv-k { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--k4c-radius-pill, 999px); background: var(--kv-brand); color: #fff; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; white-space: nowrap; margin-top: 2px; }
.k4c-vid__next .kv-k svg { width: 12px; height: 12px; }

/* ---------- self-check CTA ---------- */
.k4c-vid__selfcheck { margin: 48px 0; padding: 30px 32px 28px; border-radius: 22px; background: var(--kv-lilac-2); display: grid; grid-template-columns: 1fr 280px; gap: 32px; align-items: center; }
.k4c-vid__selfcheck .kv-eyebrow { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kv-brand); font-weight: 600; margin-bottom: 10px; }
.k4c-vid__selfcheck h3 { margin: 0 0 8px; font-family: var(--k4c-font-display, inherit); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.k4c-vid__selfcheck p { margin: 0 0 18px; font-size: 15px; line-height: 1.5; color: var(--kv-ink-2); }
.k4c-vid__selfcheck .kv-sample { background: var(--kv-white); border-radius: 16px; padding: 16px 18px 12px; border: 1px solid var(--kv-line); }
.k4c-vid__selfcheck .kv-q { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 14px; line-height: 1.4; padding: 8px 0; border-bottom: 1px solid var(--kv-line); }
.k4c-vid__selfcheck .kv-q:last-of-type { border-bottom: 0; }
.k4c-vid__selfcheck .kv-q i { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--kv-line-2); margin-top: 2px; }

/* ---------- FAQ ---------- */
.k4c-vid__faq { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--kv-line); }
.k4c-vid__faq > h2 { margin: 0 0 16px; font-family: var(--k4c-font-display, inherit); font-size: clamp(26px, 3.4vw, 36px); font-weight: 700; letter-spacing: -0.02em; }
.k4c-vid__faq details { border-top: 1px solid var(--kv-line); } .k4c-vid__faq details:last-of-type { border-bottom: 1px solid var(--kv-line); }
.k4c-vid__faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 28px; gap: 16px; align-items: center; padding: 18px 0; font-family: var(--k4c-font-display, inherit); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.k4c-vid__faq summary::-webkit-details-marker { display: none; }
.k4c-vid__faq summary::after { content: ""; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--kv-line-2); background: center / 12px no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23512D7F' stroke-width='2.5' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>"); transition: transform .3s var(--kv-ease); }
.k4c-vid__faq details[open] summary::after { transform: rotate(45deg); }
.k4c-vid__faq details > div { padding: 0 44px 22px 0; font-size: 17px; line-height: 1.6; }

/* ---------- more videos ---------- */
.k4c-vid__more { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--kv-line); }
.k4c-vid__more .kv-sh { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.k4c-vid__more h2 { margin: 0; font-family: var(--k4c-font-display, inherit); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.k4c-vid__more .kv-all { font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.k4c-vid__vgrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.k4c-vid__vcard { text-decoration: none; color: var(--kv-ink); display: flex; flex-direction: column; gap: 10px; }
.k4c-vid__vcard .kv-thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; background: center / cover no-repeat linear-gradient(160deg, #6B4A96 0%, #3A2160 100%); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.k4c-vid__vcard .kv-thumb .kv-play { width: 40px; height: 40px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; } .k4c-vid__vcard .kv-thumb .kv-play svg { width: 14px; height: 14px; margin-left: 2px; }
.k4c-vid__vcard h4 { margin: 0; font-family: var(--k4c-font-display, inherit); font-size: 17px; font-weight: 700; line-height: 1.2; }
.k4c-vid__vcard span { font-size: 12px; color: var(--kv-ink-4); }

/* ---------- author + sources ---------- */
.k4c-vid__author { margin-top: 32px; display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding: 22px; border-radius: 18px; background: var(--kv-white); border: 1px solid var(--kv-line); font-size: 14px; color: var(--kv-ink-2); }
.k4c-vid__author .kv-avatar { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(160deg, #C9B7DC 0%, #512D7F 100%); background-size: cover; background-position: center; }
.k4c-vid__author b { display: block; font-family: var(--k4c-font-display, inherit); font-size: 18px; color: var(--kv-ink); margin-bottom: 4px; }
.k4c-vid__author .kv-dates { margin-top: 8px; font-size: 12px; color: var(--kv-ink-4); }
.k4c-vid__sources { margin: 36px 0 0; padding: 28px; border-radius: 20px; background: var(--kv-paper); border: 1px solid var(--kv-line); color: var(--kv-ink-2); }
.k4c-vid__sources .kv-eyebrow { margin-bottom: 6px; }
.k4c-vid__sources h2 { font-family: var(--k4c-font-display, inherit); font-size: 22px; line-height: 1.25; font-weight: 700; color: var(--kv-ink); margin: 0 0 20px; hyphens: manual; }
.k4c-vid__sources ul.kv-orgs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; }
/* 3 per row max; a short last row stretches to fill instead of leaving an orphan card */
.k4c-vid__sources ul.kv-orgs > li.kv-org { list-style: none; margin: 0; padding: 0; display: flex; flex: 1 1 calc((100% - 28px) / 3); min-width: 260px; }
.k4c-vid__sources ul.kv-orgs > li.kv-org::marker { content: none; }
.kv-org__link, .kv-org--plain { flex: 1; display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: start; padding: 16px; border-radius: 16px; background: var(--kv-white); border: 1px solid var(--kv-line); text-decoration: none; color: inherit; transition: border-color .2s var(--kv-ease), box-shadow .2s var(--kv-ease), transform .2s var(--kv-ease); }
.kv-org__link:hover, .kv-org__link:focus-visible { border-color: var(--kv-line-2); box-shadow: 0 10px 28px -14px rgba(61,34,96,.35); transform: translateY(-2px); text-decoration: none; }
.kv-org__link:focus-visible { outline: 3px solid var(--kv-lilac); outline-offset: 2px; }
.kv-org__mark { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(150deg, var(--kv-brand) 0%, var(--kv-deeper) 100%); color: #fff; font-family: var(--k4c-font-display, inherit); font-weight: 800; font-size: 13px; letter-spacing: .02em; }
.kv-org--plain .kv-org__mark { background: var(--kv-paper-2); color: var(--kv-brand); }
.kv-org__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kv-org__name { font-family: var(--k4c-font-display, inherit); font-size: 15px; line-height: 1.3; color: var(--kv-ink); }
.kv-org__desc { font-size: 13px; line-height: 1.5; color: var(--kv-ink-2); }
.kv-org__cite { font-size: 12px; font-style: italic; line-height: 1.45; color: var(--kv-ink-3); }
.kv-org__url { margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--kv-brand); overflow-wrap: anywhere; }
.kv-org__link:hover .kv-org__url { text-decoration: underline; }
@media (max-width: 720px) { .k4c-vid__sources { padding: 20px 16px; } .k4c-vid__sources ul.kv-orgs > li.kv-org { flex-basis: 100%; min-width: 0; } }
@media (prefers-reduced-motion: reduce) { .kv-org__link { transition: none; } .kv-org__link:hover { transform: none; } }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) { .k4c-vid__player.is-mini { animation: none; } }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .k4c-vid__hero { grid-template-columns: 1fr; } .k4c-vid__copy, .k4c-vid__slot { grid-column: auto; }
  .k4c-vid__page { grid-template-columns: 1fr; } .k4c-vid__rail { position: static; top: auto; } .k4c-vid__toc { display: none; }
  .k4c-vid__answer .kv-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .k4c-vid__vgrid { grid-template-columns: 1fr; }
  .k4c-vid__player.is-mini { width: min(320px, calc(100% - 32px)); inset: auto 16px 16px auto; }
}
@media (max-width: 720px) {
  .k4c-vid__prose { font-size: 17px; }
  .k4c-vid__selfcheck { grid-template-columns: 1fr; }
  .k4c-vid__next { grid-template-columns: 1fr; }
  /* stacked: the watch button sits in its own strip above the title, no overlap,
     and the desktop right-gutter is not needed once the button is off the title line */
  .k4c-vid__chapterbar { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
  .k4c-vid__chapterbar + h2 { padding-right: 0; }
}
.k4c-vid__sources .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }