/* =====================================================================
   KEY FOR CHANGE — LONG-FORM ARTICLE SYSTEM (Guide Page Styling System)
   Design doc approved by Michael, 9 Sept 2026 — §7 verbatim rules, with
   the shell reconciled to the live site:

   • The site's global fixed nav + quick-exit replace the design band's
     own slim header / quick-exit (no duplicates). The band keeps the
     dark deep hero + chip row and clears the fixed bar using the same
     pattern as .k4c-pagehead (pages.css).
   • Everything is namespaced under .k4c-guide so the quark2/theme +
     pages.css tokens and components are untouched. This file loads ONLY
     from the guide template — quark2's `.container` (1200px) and `.hero`
     rules never meet these selectors site-wide.
   • No JS needed for the chapter counter, criteria grid, table framing,
     FAQ accordions, progress bar or reveals; :has() / animation-timeline
     unsupported → plain list / no motion (acceptable, per design §9).
   ===================================================================== */

/* ---------- 0. Tokens (design §2) ---------- */
.k4c-guide {
  --ink: #241A33;  --ink-2: #4A415A;  --ink-3: #6F6580;  --ink-4: #8A809A;
  --paper: #FAF7F2; --paper-2: #F3EEE7; --white: #FFFFFF;
  --brand: #512D7F; --deep: #2A153F; --lilac: #C9A6F2; --lilac-2: #EADFF4;
  --line: rgba(81,45,127,0.14); --line-2: rgba(81,45,127,0.28);
  /* Brand fonts (Mike, #1000953): Montserrat headings, Lato body — same
     stacks as tokens.css. Guide weights 500/600 resolve via font matching
     (Montserrat 500->600; Lato 500->400, 600->700). */
  --display: 'Montserrat', 'Segoe UI', Tahoma, Arial, sans-serif;
  --serif: 'Lato', 'Segoe UI', Tahoma, Arial, sans-serif;
  --sans: 'Lato', 'Segoe UI', Tahoma, Arial, sans-serif;
  --measure: 68ch;
  --gutter: 64px;
  --rail: 264px;
  --ease: cubic-bezier(.2,.7,.2,1);

  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  /* Clear the site's fixed nav + let the dark band own the very top (the
     pages.css body:has(.k4c-pagehead) pattern; .band is the first child). */
  margin-top: calc(-1 * var(--k4c-nav-height));
}
.k4c-guide a { color: var(--brand); text-decoration: underline; text-decoration-color: rgba(81,45,127,0.35); text-underline-offset: 3px; }
.k4c-guide a:hover { color: var(--deep); text-decoration-color: currentColor; }
.k4c-guide :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.k4c-guide strong { font-weight: 600; color: var(--ink); }
.k4c-guide .container { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- 1. Reading progress (no JS: scroll-driven) ---------- */
.k4c-guide .progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; background: var(--lilac); transform-origin: 0 50%; transform: scaleX(0); z-index: 100; }
@supports (animation-timeline: scroll()) {
@media (prefers-reduced-motion: no-preference) {
.k4c-guide .progress { animation: k4c-guide-grow linear both; animation-timeline: scroll(root); }
@keyframes k4c-guide-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
}

/* ---------- 2. Compact hero band (Inner · Pillar guide) ----------
   The site's own nav + quick-exit sit above; the band is just the deep
   hero + chip row. */
.k4c-guide .band { position: relative; background: var(--deep); color: #F4EEFA; overflow: hidden; font-family: var(--sans); }
.k4c-guide .band::before { content: ""; position: absolute; right: -200px; top: -260px; width: 720px; height: 720px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, rgba(129,86,181,0.45) 0%, rgba(81,45,127,0.2) 45%, rgba(42,21,63,0) 70%); pointer-events: none; }
/* quark2's own .hero paints a light background + gradient (theme.css 1123);
   ours lives inside the dark band and must not. */
.k4c-guide .hero { position: relative; background: none; }
.k4c-guide .hero::before { content: none; }
.k4c-guide .hero .container { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 32px; padding-top: 96px; padding-bottom: 36px; align-items: end; }
.k4c-guide .hero .copy { grid-column: span 9; display: flex; flex-direction: column; gap: 18px; }
.k4c-guide .crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #B9A6D4; }
.k4c-guide .crumbs a { color: inherit; text-decoration: none; }
.k4c-guide .crumbs span:last-child { color: #fff; }
.k4c-guide .crumbs svg { width: 12px; height: 12px; }
.k4c-guide .hero h1 { margin: 0; max-width: 980px; font-family: var(--display); font-size: 72px; line-height: 0.98; font-weight: 800; letter-spacing: -0.03em; color: #fff; text-wrap: balance; }
.k4c-guide .hero h1 .accent { color: var(--lilac); }
.k4c-guide .hero .standfirst { margin: 0; max-width: 720px; font-family: var(--sans); font-size: 18px; line-height: 1.5; color: #D9C6F0; text-wrap: pretty; }
.k4c-guide .hero .meta { grid-column: span 3; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; font-size: 12px; color: #B9A6D4; text-align: right; }
.k4c-guide .byline { display: flex; align-items: center; gap: 10px; }
.k4c-guide .byline .avatar { width: 40px; height: 40px; border-radius: 50%; background: url('../images/keeley-portrait-camera.jpg') center / cover no-repeat, linear-gradient(160deg, #C9B7DC 0%, #512D7F 100%); }
.k4c-guide .byline b { display: block; font-size: 13px; color: #fff; font-weight: 600; }
.k4c-guide .chips { border-top: 1px solid rgba(255,255,255,0.14); }
.k4c-guide .chips .container { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 16px; padding-bottom: 20px; }
.k4c-guide .chips .label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #B9A6D4; margin-right: 6px; }
.k4c-guide .chip { padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.25); color: #fff; font-size: 13px; font-weight: 500; text-decoration: none; }
.k4c-guide .chip:hover { border-color: #fff; color: #fff; }

/* ---------- 3. Contents panel + page grid (article + support rail) ----------
   The contents used to be a 264px rail list (was a plain text list — see the
   #1000983 stretch fix in history); feedback #1001167 moved it OUT of the rail
   into a full-width <details> panel between the dark band and the article:
   every section is a numbered card, the live section fills in as you scroll.
   The rail keeps only the sticky support box. */
/* blades (Pico) sets bare `nav, nav ul { display: flex }` + accordion chrome on
   `details summary` — both would shrink-wrap the panel and paint a pill, so
   this block re-asserts the layout and strips that chrome (#1001167). */
.k4c-guide .toc { display: block; margin: 32px 0 0; }
.k4c-guide .tocbox { margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 1px 2px rgba(42,21,63,0.05); }
.k4c-guide .tocbox summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 18px 22px; margin: 0; background: none; border: 0; box-shadow: none; user-select: none; }
.k4c-guide .tocbox summary::-webkit-details-marker { display: none; }
.k4c-guide .tocbox summary::after { content: none; }   /* Pico's own float chevron — ours is .chev */
.k4c-guide .tocbox[open] summary { border-bottom: 1px solid var(--line); margin-bottom: 0; }
/* quark2 theme.css paints bare .label as a grey chip (same rule behind the
   band's "IN THIS GUIDE" chip) — keep the chip shape, tint it brand lilac. */
.k4c-guide .toc .label { font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand); background: var(--lilac-2); }
.k4c-guide .toc .meta { font-family: var(--sans); font-size: 12px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.k4c-guide .toc .chev { margin-left: auto; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--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='M6 9l6 6 6-6'/></svg>"); transition: transform .3s var(--ease); }
.k4c-guide .tocbox[open] .chev { transform: rotate(180deg); }
.k4c-guide .toc ol { list-style: none; margin: 0; padding: 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 10px; counter-reset: toc; }
.k4c-guide .toc li { counter-increment: toc; width: 100%; min-width: 0; }
.k4c-guide .toc a { position: relative; display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; width: 100%; box-sizing: border-box; min-height: 50px; padding: 11px 30px 11px 12px; background: var(--paper-2); border: 1px solid transparent; border-radius: 14px; color: var(--ink-2); font-size: 13.5px; line-height: 1.4; font-weight: 500; text-decoration: none; transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.k4c-guide .toc a::before { content: counter(toc, decimal-leading-zero); display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--white); border: 1px solid var(--line); color: var(--brand); font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.k4c-guide .toc a::after { content: ""; position: absolute; top: 16px; right: 13px; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); opacity: 0; transition: opacity .2s var(--ease); }
.k4c-guide .toc a:hover, .k4c-guide .toc a:focus-visible { background: var(--white); border-color: var(--line-2); color: var(--brand); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(81,45,127,0.10); text-decoration: none; }
.k4c-guide .toc a:hover::before, .k4c-guide .toc a:focus-visible::before { background: var(--brand); border-color: var(--brand); color: #fff; }
.k4c-guide .toc a:hover::after, .k4c-guide .toc a:focus-visible::after { opacity: 1; }
.k4c-guide .toc a.is-active { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 8px 20px rgba(81,45,127,0.22); text-decoration: none; }
.k4c-guide .toc a.is-active::before { background: #fff; border-color: #fff; color: var(--brand); }
.k4c-guide .toc a.is-active::after { opacity: 1; }

.k4c-guide .page { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail); gap: 64px; padding-top: 48px; padding-bottom: 72px; align-items: start; }
.k4c-guide .article { min-width: 0; max-width: calc(var(--measure) + 8ch); }
.k4c-guide .rail { position: sticky; top: 24px; font-family: var(--sans); font-size: 13px; }
.k4c-guide .rail .support { margin-top: 24px; padding: 14px 16px; border-radius: 12px; background: var(--lilac-2); color: var(--ink-2); line-height: 1.45; }
.k4c-guide .rail .support b { display: block; color: var(--ink); margin-bottom: 4px; }
.k4c-guide .rail .support a { color: var(--brand); }

/* ---------- Latest-videos rail widget (feedback #1001346) ---------- */
.k4c-guide .railvids { margin-top: 24px; }
.k4c-guide .railvids__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.k4c-guide .railvids__head b { font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand); }
.k4c-guide .railvids__head a { font-family: var(--sans); font-size: 12px; color: var(--ink-4); text-decoration: none; white-space: nowrap; }
.k4c-guide .railvids__head a:hover, .k4c-guide .railvids__head a:focus-visible { color: var(--brand); text-decoration: underline; }
.k4c-guide .railvids ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.k4c-guide .railvids li a { display: grid; grid-template-columns: 96px 1fr; gap: 11px; align-items: start; padding: 6px; border-radius: 12px; text-decoration: none; color: var(--ink-2); transition: background .2s var(--ease), transform .2s var(--ease); }
.k4c-guide .railvids li a:hover, .k4c-guide .railvids li a:focus-visible { background: var(--lilac-2); transform: translateY(-1px); }
.k4c-guide .railvids .thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--lilac-2); }
.k4c-guide .railvids .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.k4c-guide .railvids .play { position: absolute; inset: 0; margin: auto; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(42, 21, 63, 0.72); color: #fff; opacity: 0; transition: opacity .2s var(--ease); }
.k4c-guide .railvids li a:hover .play, .k4c-guide .railvids li a:focus-visible .play { opacity: 1; }
.k4c-guide .railvids .play svg { width: 13px; height: 13px; margin-left: 1px; }
.k4c-guide .railvids .vtitle { font-family: var(--sans); font-size: 12.5px; line-height: 1.35; font-weight: 500; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.k4c-guide .railvids li a:hover .vtitle, .k4c-guide .railvids li a:focus-visible .vtitle { color: var(--brand); }
.k4c-guide .railvids__note { margin: 12px 0 0; font-family: var(--sans); font-size: 11px; color: var(--ink-4); line-height: 1.4; }

/* ---------- 4. Definition + Answer-first: the opening pair ---------- */
.k4c-guide [data-block="definition"] { display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 0 0 32px; border-bottom: 1px solid var(--line); margin-bottom: 40px; font-family: var(--sans); }
.k4c-guide [data-block="definition"] .eyebrow { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand); font-weight: 600; padding-top: 6px; }
.k4c-guide [data-block="definition"] p { margin: 0; font-family: var(--serif); font-size: 26px; line-height: 1.4; color: var(--ink); text-wrap: pretty; }
.k4c-guide [data-block="definition"] p strong { font-weight: 600; }
.k4c-guide [data-block="answer"] { position: relative; margin: 0 0 48px; padding: 32px 36px 28px; border-radius: 20px; background: var(--deep); color: #EDE6F5; font-family: var(--sans); font-size: 17px; line-height: 1.6; overflow: hidden; }
.k4c-guide [data-block="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-guide [data-block="answer"] .eyebrow { position: relative; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lilac); font-weight: 600; margin-bottom: 14px; }
.k4c-guide [data-block="answer"] p { position: relative; margin: 0 0 14px; }
.k4c-guide [data-block="answer"] p:last-child { margin-bottom: 0; }
.k4c-guide [data-block="answer"] p:first-of-type { font-family: var(--serif); font-size: 24px; line-height: 1.38; color: #fff; }
.k4c-guide [data-block="answer"] p:first-of-type strong { color: var(--lilac); font-weight: 500; }
.k4c-guide [data-block="answer"] a { color: var(--lilac); text-decoration-color: rgba(201,166,242,0.5); }
.k4c-guide [data-block="answer"] p + p { color: #D9C6F0; }

/* ---------- 5. Sections: every H2 becomes a numbered chapter ---------- */
.k4c-guide .article { counter-reset: chapter; }
.k4c-guide .article section { counter-increment: chapter; position: relative; padding: 22px 0 8px; border-top: 1px solid var(--line); scroll-margin-top: 96px; }
.k4c-guide .article section:first-of-type { border-top: 0; }
.k4c-guide .article section > h2 { margin: 0 0 12px; font-family: var(--display); font-size: 36px; line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.k4c-guide .article section > h2::before { content: counter(chapter, decimal-leading-zero) " / " var(--total, "12"); display: block; width: auto; height: auto; border-radius: 0; background: none; opacity: 1; font-family: var(--sans); font-size: 12px; letter-spacing: 0.12em; color: var(--ink-4); font-variant-numeric: tabular-nums; margin-bottom: 10px; }
/* quark2's h2::before paints a 28px accent bar (theme.css 236); ours is the
   chapter counter — the resets above keep it from showing through. */
.k4c-guide .article section > h2 .anchor { color: var(--ink-4); text-decoration: none; margin-left: 8px; opacity: 0; font-weight: 500; }
.k4c-guide .article section:hover > h2 .anchor { opacity: 1; }
.k4c-guide .article p { margin: 0 0 1.25em; text-wrap: pretty; }
.k4c-guide .article section > p:first-of-type { font-size: 21px; line-height: 1.55; }   /* lead paragraph slightly larger */
/* every 3rd plain-text section gets a pull-quote at the text edge (JS lifts the first <strong>).
   The negative right margin nudges it into the gutter but MUST stay < the .page grid gap (64px)
   so it can never reach the sticky rail/TOC to its right — regardless of viewport or article width. */
.k4c-guide .pull { float: right; width: 250px; margin: 6px -48px 18px 34px; padding: 14px 0 0; border-top: 2px solid var(--brand); font-family: var(--display); font-size: 22px; line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; color: var(--brand); text-wrap: balance; }
/* inbound deep links target the h2 ids (kept); sections are #sN */
.k4c-guide .article section > h2[id] { scroll-margin-top: 96px; }

/* ---------- 6. Criteria lists: ol with strong leads becomes a card grid ---------- */
.k4c-guide .article ol:has(> li > strong) { list-style: none; margin: 8px 0 28px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; counter-reset: crit; font-family: var(--sans); font-size: 15px; line-height: 1.45; }
.k4c-guide .article ol:has(> li > strong) > li { counter-increment: crit; position: relative; padding: 18px 16px 16px; border-radius: 14px; background: var(--white); border: 1px solid var(--line); color: var(--ink-2); }
.k4c-guide .article ol:has(> li > strong) > li::before { content: counter(crit); display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 50%; background: var(--lilac-2); color: var(--brand); font-weight: 700; font-size: 12px; margin-bottom: 10px; }
.k4c-guide .article ol:has(> li > strong) > li strong { display: block; color: var(--ink); margin-bottom: 4px; }
.k4c-guide .article ul { margin: 0 0 1.25em; padding-left: 1.1em; }
.k4c-guide .article li { margin: 0 0 0.5em; }
.k4c-guide .article li::marker { color: var(--brand); }

/* ---------- 7. Tables: comparison tables become framed, sticky-header, mobile-stacking ---------- */
.k4c-guide .article .table-wrap { margin: 8px 0 28px; border-radius: 16px; border: 1px solid var(--line); background: var(--white); overflow-x: auto; }
.k4c-guide .article table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 15px; line-height: 1.45; }
.k4c-guide .article th, .k4c-guide .article td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.k4c-guide .article thead th { position: sticky; top: 0; background: var(--lilac-2); color: var(--brand); font-family: var(--display); font-size: 15px; font-weight: 700; }
.k4c-guide .article tbody th { width: 140px; color: var(--ink-3); font-weight: 600; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
.k4c-guide .article tbody tr:last-child td, .k4c-guide .article tbody tr:last-child th { border-bottom: 0; }
.k4c-guide .article td strong { color: var(--brand); }
/* the column the reader must not skip — generator marks with data-emphasis on the th */
.k4c-guide .article th[data-emphasis] { box-shadow: inset 0 -3px 0 var(--brand); }

/* ---------- 8. Keeley's voice: blockquote / [data-block="voice"] ---------- */
.k4c-guide [data-block="voice"], .k4c-guide .article blockquote { margin: 24px 0 28px; padding: 22px 24px 22px 76px; position: relative; border-radius: 16px; background: var(--paper-2); font-family: var(--serif); font-size: 19px; font-style: italic; color: var(--ink-2); }
.k4c-guide [data-block="voice"]::before, .k4c-guide .article blockquote::before { content: ""; position: absolute; left: 22px; top: 22px; width: 38px; height: 38px; border-radius: 50%; background: url('../images/keeley-portrait-camera.jpg') center / cover no-repeat, linear-gradient(160deg, #C9B7DC 0%, #512D7F 100%); }
.k4c-guide [data-block="voice"] .who, .k4c-guide .article blockquote cite { display: block; margin-top: 10px; font-family: var(--sans); font-style: normal; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); }
.k4c-guide [data-block="voice"] p:last-of-type { margin-bottom: 0; }

/* ---------- 9. CTA sections (CTA design file, 9 Sept 2026) ----------
   Three variants of one block: <div data-block="cta" data-cta="selfcheck|
   session|programme"> — each maps to a reader state: still working out what
   is happening → ready to talk → ready to commit. Design's display/serif/
   sans fonts resolve through the brand tokens (--display Montserrat,
   --serif/--sans Lato, #1000953). Programme variant renders template-level
   (guide-body.html.twig); selfcheck + session come from the PHP transform. */
.k4c-guide [data-block="cta"] { margin: 48px 0; font-family: var(--sans); border-radius: 22px; overflow: hidden; }
.k4c-guide [data-block="cta"] .eyebrow { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; }
.k4c-guide [data-block="cta"] h3 { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.k4c-guide [data-block="cta"] .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 24px; border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: transform .2s var(--ease), background .2s; }
.k4c-guide [data-block="cta"] .btn:hover { transform: translateY(-1px); text-decoration: none; }
.k4c-guide [data-block="cta"] .btn svg { width: 16px; height: 16px; }
.k4c-guide [data-block="cta"] .btn-ghost { background: transparent; }
.k4c-guide [data-block="cta"] .fine { font-size: 12px; color: var(--ink-4); }
/* the guide's blanket prose rules (§5/§6) must not reach inside the cards */
.k4c-guide [data-block="cta"] p, .k4c-guide [data-block="cta"] blockquote { margin: 0; }
.k4c-guide [data-block="cta"] ul { margin: 0; padding: 0; list-style: none; }
.k4c-guide [data-block="cta"] li { margin: 0; }
.k4c-guide [data-block="cta"] li::marker { content: ''; }

/* ---- 1. SELF-CHECK — "See the pattern" (low commitment, mid-understanding) ---- */
.k4c-guide [data-cta="selfcheck"] { background: var(--lilac-2); padding: 30px 32px 28px; display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: center; }
.k4c-guide [data-cta="selfcheck"] .eyebrow { color: var(--brand); margin-bottom: 10px; }
.k4c-guide [data-cta="selfcheck"] h3 { font-size: 26px; margin-bottom: 8px; }
.k4c-guide [data-cta="selfcheck"] p { margin: 0 0 18px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.k4c-guide [data-cta="selfcheck"] .btn { background: var(--brand); color: #fff; }
.k4c-guide [data-cta="selfcheck"] .btn:hover { background: var(--deep); }
.k4c-guide [data-cta="selfcheck"] .sample { background: var(--white); border-radius: 16px; padding: 18px 18px 14px; border: 1px solid var(--line); }
.k4c-guide [data-cta="selfcheck"] .sample .q { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 14px; line-height: 1.4; color: var(--ink); padding: 8px 0; border-bottom: 1px solid var(--line); }
.k4c-guide [data-cta="selfcheck"] .sample .q:last-of-type { border-bottom: 0; }
.k4c-guide [data-cta="selfcheck"] .sample .q i { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line-2); margin-top: 2px; }
.k4c-guide [data-cta="selfcheck"] .sample .more { font-size: 12px; color: var(--ink-4); padding-top: 8px; }
.k4c-guide [data-cta="selfcheck"] .sample .more b { color: var(--brand); font-weight: 600; }

/* ---- 2. SESSION — "Talk to Keeley" (one-to-one, after the 'what to do' section) ---- */
.k4c-guide [data-cta="session"] { background: var(--deep); color: #EDE6F5; position: relative; display: grid; grid-template-columns: 220px 1fr; gap: 0; }
.k4c-guide [data-cta="session"]::before { content: ""; position: absolute; right: -140px; top: -160px; width: 440px; height: 440px; border-radius: 50%; background: radial-gradient(circle, rgba(129,86,181,0.5) 0%, rgba(42,21,63,0) 70%); pointer-events: none; }
.k4c-guide [data-cta="session"] .photo { position: relative; background: linear-gradient(160deg, #9A7CC0 0%, #5E3A90 60%, #2A153F 100%); display: flex; align-items: flex-end; justify-content: center; min-height: 100%; }
.k4c-guide [data-cta="session"] .photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; color: transparent; }
.k4c-guide [data-cta="session"] .body { position: relative; padding: 30px 34px 28px; display: flex; flex-direction: column; gap: 14px; }
.k4c-guide [data-cta="session"] .eyebrow { color: var(--lilac); }
.k4c-guide [data-cta="session"] .quote { margin: 0; font-family: var(--serif); font-size: 24px; line-height: 1.35; font-style: italic; color: #fff; text-wrap: pretty; }
.k4c-guide [data-cta="session"] .quote b { font-style: normal; font-weight: 500; color: var(--lilac); }
.k4c-guide [data-cta="session"] .who { font-size: 13px; color: #B9A6D4; }
.k4c-guide [data-cta="session"] .who b { color: #fff; font-weight: 600; }
.k4c-guide [data-cta="session"] .row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 6px; }
.k4c-guide [data-cta="session"] .btn { background: #fff; color: var(--deep); }
.k4c-guide [data-cta="session"] .btn:hover { background: var(--lilac-2); }
.k4c-guide [data-cta="session"] .btn.btn-ghost { background: transparent; border: 1.5px solid rgba(255,255,255,0.35); color: #fff; }
.k4c-guide [data-cta="session"] .btn.btn-ghost:hover { background: rgba(255,255,255,0.08); }
.k4c-guide [data-cta="session"] .trust { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; color: #B9A6D4; margin-top: 4px; }
.k4c-guide [data-cta="session"] .trust span { display: inline-flex; align-items: center; gap: 6px; }
.k4c-guide [data-cta="session"] .trust svg { width: 13px; height: 13px; color: var(--lilac); }

/* ---- 3. PROGRAMME — "Changemakers" (group, near the end / before FAQ) ---- */
.k4c-guide [data-cta="programme"] { background: var(--white); border: 1.5px solid var(--brand); padding: 0; display: grid; grid-template-columns: 1fr 250px; }
.k4c-guide [data-cta="programme"] .main { padding: 30px 32px 28px; display: flex; flex-direction: column; gap: 14px; }
.k4c-guide [data-cta="programme"] .eyebrow { color: var(--brand); }
.k4c-guide [data-cta="programme"] h3 { font-size: 30px; line-height: 1.05; }
.k4c-guide [data-cta="programme"] h3 span { color: var(--brand); }
.k4c-guide [data-cta="programme"] p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.k4c-guide [data-cta="programme"] ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.k4c-guide [data-cta="programme"] li { padding: 12px 14px; border-radius: 12px; background: var(--paper-2); font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.k4c-guide [data-cta="programme"] li b { display: block; font-family: var(--display); font-size: 17px; color: var(--ink); font-weight: 700; margin-bottom: 2px; }
.k4c-guide [data-cta="programme"] .side { background: var(--brand); color: #fff; padding: 28px 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; position: relative; }
.k4c-guide [data-cta="programme"] .side::before { content: ""; position: absolute; left: -1px; top: 50%; width: 2px; height: 60px; margin-top: -30px; background: repeating-linear-gradient(180deg, var(--white) 0 6px, transparent 6px 12px); opacity: 0.6; }
.k4c-guide [data-cta="programme"] .side .k { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lilac); }
.k4c-guide [data-cta="programme"] .side .v { font-family: var(--display); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; margin-top: 4px; }
.k4c-guide [data-cta="programme"] .side .btn { background: #fff; color: var(--brand); width: 100%; }
.k4c-guide [data-cta="programme"] .side .btn:hover { background: var(--lilac-2); }
.k4c-guide [data-cta="programme"] .side .fine { color: #D9C6F0; text-align: center; }

/* ---------- 10. FAQ: details/summary accordions ---------- */
.k4c-guide [data-block="faq"] { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--line); }
.k4c-guide [data-block="faq"] > h2 { margin: 0 0 8px; font-family: var(--display); font-size: 36px; font-weight: 700; letter-spacing: -0.02em; }
.k4c-guide [data-block="faq"] > h2 + p { font-family: var(--sans); font-size: 15px; color: var(--ink-3); margin-bottom: 20px; }
.k4c-guide [data-block="faq"] details { border-top: 1px solid var(--line); }
.k4c-guide [data-block="faq"] details:last-of-type { border-bottom: 1px solid var(--line); }
.k4c-guide [data-block="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(--display); font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.k4c-guide [data-block="faq"] summary::-webkit-details-marker { display: none; }
.k4c-guide [data-block="faq"] summary::after { content: ""; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--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(--ease); }
.k4c-guide [data-block="faq"] details[open] summary::after { transform: rotate(45deg); }
.k4c-guide [data-block="faq"] details > div { padding: 0 44px 22px 0; font-size: 18px; }

/* ---------- 11. Where this leaves you: next-steps map ---------- */
.k4c-guide [data-block="next"] { margin-top: 48px; padding: 36px; border-radius: 24px; background: var(--deep); color: #EDE6F5; }
.k4c-guide [data-block="next"] h2 { margin: 0 0 12px; font-family: var(--display); font-size: 36px; font-weight: 800; letter-spacing: -0.025em; color: #fff; }
.k4c-guide [data-block="next"] > p { font-family: var(--serif); font-size: 21px; line-height: 1.5; color: #D9C6F0; }
.k4c-guide [data-block="next"] > p strong { color: var(--lilac); font-weight: 500; }
.k4c-guide [data-block="next"] .groups { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px 32px; margin: 28px 0 8px; font-family: var(--sans); }
.k4c-guide [data-block="next"] .group b { display: block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #B9A6D4; margin-bottom: 10px; }
.k4c-guide [data-block="next"] .group div { display: flex; flex-wrap: wrap; gap: 8px; }
.k4c-guide [data-block="next"] .group a { padding: 8px 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.25); color: #fff; font-size: 13px; font-weight: 500; text-decoration: none; }
.k4c-guide [data-block="next"] .group a:hover { border-color: #fff; }
.k4c-guide [data-block="next"] .close { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.14); font-family: var(--sans); font-size: 15px; color: #D9C6F0; }
.k4c-guide [data-block="next"] .close a { color: var(--lilac); }

/* ---------- 12. E-E-A-T footer: author + sources + dates ---------- */
.k4c-guide [data-block="author"] { margin-top: 40px; display: grid; grid-template-columns: 72px 1fr; gap: 20px; padding: 24px; border-radius: 20px; background: var(--white); border: 1px solid var(--line); font-family: var(--sans); font-size: 15px; color: var(--ink-2); }
.k4c-guide [data-block="author"] .avatar { width: 72px; height: 72px; border-radius: 50%; background: url('../images/keeley-portrait-camera.jpg') center / cover no-repeat, linear-gradient(160deg, #C9B7DC 0%, #512D7F 100%); }
.k4c-guide [data-block="author"] b { display: block; font-family: var(--display); font-size: 20px; color: var(--ink); margin-bottom: 4px; }
.k4c-guide [data-block="author"] .dates { margin-top: 10px; font-size: 12px; color: var(--ink-4); letter-spacing: 0.04em; }
.k4c-guide [data-block="sources"] { margin-top: 24px; font-family: var(--sans); font-size: 14px; color: var(--ink-2); }
.k4c-guide [data-block="sources"] h2 { font-family: var(--display); font-size: 20px; font-weight: 700; margin: 0 0 12px; }
.k4c-guide [data-block="sources"] ol { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 6px; }
.k4c-guide [data-block="sources"] li { margin: 0; }

/* ---------- 13. Motion: scroll-driven reveals, zero JS, opt-out via reduced-motion ---------- */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.k4c-guide .article section, .k4c-guide [data-block="answer"], .k4c-guide [data-block="cta"], .k4c-guide [data-block="next"], .k4c-guide [data-block="author"] {
animation: k4c-guide-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 28%;
}
.k4c-guide .article section > h2::after { content: ""; display: block; width: 48px; height: 3px; background: var(--brand); margin-top: 14px; transform-origin: 0 50%; animation: k4c-guide-draw linear both; animation-timeline: view(); animation-range: entry 10% entry 40%; }
.k4c-guide .article ol:has(> li > strong) > li { animation: k4c-guide-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
}
}
@keyframes k4c-guide-rise { from { opacity: 0.35; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes k4c-guide-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .k4c-guide .progress { display: none; }
  .k4c-guide * { transition: none !important; }
  .k4c-guide [data-block="cta"] .btn { transition: none; }
}

/* ---------- 14. Responsive ---------- */
@media (max-width: 1240px) { .k4c-guide .pull { float: none; width: auto; margin: 8px 0 24px; } }
@media (max-width: 1024px) {
.k4c-guide { --gutter: 32px; }
.k4c-guide .page { grid-template-columns: 1fr; gap: 32px; }
.k4c-guide .rail { position: static; }
/* contents panel: was hidden on ≤1024px — now a compact 2-col card grid
   (guide.js starts it collapsed ≤720px so it never walls off the page top) */
.k4c-guide .toc { margin-top: 24px; }
.k4c-guide .tocbox summary { padding: 15px 18px; }
.k4c-guide .toc ol { padding: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.k4c-guide .hero h1 { font-size: clamp(40px, 6vw, 72px); }
.k4c-guide .article ol:has(> li > strong) { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px) {
.k4c-guide { --gutter: 20px; font-size: 17px; }
.k4c-guide .page { padding-bottom: 48px; }
.k4c-guide .toc { margin-top: 20px; }
.k4c-guide .tocbox { border-radius: 16px; }
.k4c-guide .toc ol { grid-template-columns: 1fr; padding: 12px; }
.k4c-guide .toc a { min-height: 0; padding: 9px 24px 9px 10px; font-size: 13px; }
.k4c-guide .toc a::after { top: 13px; right: 11px; }
.k4c-guide .hero .container { grid-template-columns: 1fr; padding-top: 72px; }
.k4c-guide .hero .copy, .k4c-guide .hero .meta { grid-column: auto; }
.k4c-guide .hero .meta { align-items: flex-start; text-align: left; }
.k4c-guide [data-block="definition"] { grid-template-columns: 1fr; gap: 8px; }
.k4c-guide [data-block="definition"] p { font-size: 22px; }
.k4c-guide [data-block="answer"] { padding: 24px 22px; border-radius: 16px; }
.k4c-guide [data-block="answer"] p:first-of-type { font-size: 20px; }
.k4c-guide .article section > h2 { font-size: 28px; }
.k4c-guide .article ol:has(> li > strong) { grid-template-columns: 1fr; }
.k4c-guide [data-cta="selfcheck"] { grid-template-columns: 1fr; padding: 24px 20px; }
.k4c-guide [data-cta="session"] { grid-template-columns: 1fr; }
.k4c-guide [data-cta="session"] .photo { height: 200px; min-height: 0; }
.k4c-guide [data-cta="session"] .body { padding: 24px 20px; }
.k4c-guide [data-cta="programme"] { grid-template-columns: 1fr; }
.k4c-guide [data-cta="programme"] ul { grid-template-columns: 1fr; }
.k4c-guide [data-cta="programme"] .side::before { display: none; }
.k4c-guide [data-block="cta"] .btn { width: 100%; }
.k4c-guide [data-block="next"] { padding: 24px 20px; }
.k4c-guide [data-block="next"] .groups { grid-template-columns: 1fr; }
.k4c-guide [data-block="author"] { grid-template-columns: 56px 1fr; }
/* tables stack into cards: cells carry data-label from the th */
.k4c-guide .article table, .k4c-guide .article thead, .k4c-guide .article tbody, .k4c-guide .article tr, .k4c-guide .article th, .k4c-guide .article td { display: block; }
.k4c-guide .article thead { position: absolute; left: -9999px; }
.k4c-guide .article tbody tr { padding: 8px 0; border-bottom: 1px solid var(--line); }
.k4c-guide .article tbody th { width: auto; padding: 12px 16px 4px; border: 0; }
.k4c-guide .article td { padding: 6px 16px; border: 0; }
.k4c-guide .article td::before { content: attr(data-label); display: block; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand); margin-bottom: 2px; }
}