/* Kern4Good design system, ported from kern4good.be (Squarespace, 2025-2026).
   Hand-written CSS: tokens, chrome, then one block of rules per section. */

:root {
  --cream: #FFF5EB; --white: #FFFFFF; --cream-2: #FBF0E2;
  --green: #193F27; --green-2: #2F5C3F; --green-3: #6B8F78; --green-soft: #DCEBE0;
  --lavender: #E4E4FF; --periwinkle: #BBB9F2; --yellow: #F7FB8E; --mint: #CDF7C3; --coral: #F8B9AC;
  --sand: #F3E5C0; --sand-2: #EFE6D8; --line: rgba(25, 63, 39, .14); --ink-2: #4A6152;
  --step--1: clamp(0.86rem, 0.83rem + 0.15vw, 0.95rem);
  --step-0: clamp(1.00rem, 0.96rem + 0.22vw, 1.13rem);
  --step-1: clamp(1.20rem, 1.12rem + 0.40vw, 1.45rem);
  --step-2: clamp(1.50rem, 1.36rem + 0.70vw, 1.95rem);
  --step-3: clamp(1.90rem, 1.66rem + 1.20vw, 2.70rem);
  --step-4: clamp(2.40rem, 1.98rem + 2.10vw, 3.75rem);
  --space-xs: .75rem; --space-s: 1rem; --space-m: 1.5rem; --space-l: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem;
  --measure: 62ch; --wrap: 1220px; --gutter: clamp(1rem, 4vw, 3rem);
  --display: "Young Serif", Georgia, "Times New Roman", serif;
  --body: "Bitter", Georgia, serif;
  --marker: "Permanent Marker", "Comic Sans MS", cursive;
  --radius: 18px; --radius-s: 10px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

html { overflow-x: hidden; scroll-behavior: smooth; }
html body { padding-top: 0 !important; }
body.k4 {
  margin: 0; background: var(--cream); color: var(--green); font-family: var(--body); font-size: var(--step-0);
  line-height: 1.6; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; overflow-x: clip;
}
.k4 *, .k4 *::before, .k4 *::after { box-sizing: border-box; }
:where(.k4 img) { display: block; max-width: 100%; height: auto; }
:where(.k4 a) { color: inherit; }
:where(.k4 button) { font: inherit; color: inherit; }
.k4 :where(h1, h2, h3, h4) { font-family: var(--display); font-weight: 400; line-height: 1.08; margin: 0; text-wrap: balance; color: var(--green); letter-spacing: -0.01em; }
.k4 :where(h1) { font-size: var(--step-4); }
.k4 :where(h2) { font-size: var(--step-3); }
.k4 :where(h3) { font-size: var(--step-1); }
.k4 :where(h4) { font-size: var(--step-0); font-family: var(--body); font-weight: 700; }
.k4 :where(p) { margin: 0; text-wrap: pretty; }
.k4 :where(p + p) { margin-top: var(--space-s); }
.k4 :where(ul, ol) { margin: 0; padding-left: 1.2em; }
.k4 :focus-visible { outline: 3px solid var(--periwinkle); outline-offset: 3px; }
.k4 .wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.k4 .wrap--narrow { width: min(100% - 2 * var(--gutter), 900px); margin-inline: auto; }
.k4 .lead { color: var(--ink-2); max-width: var(--measure); font-size: var(--step-0); }
.k4 .center { text-align: center; }
.k4 .center .lead { margin-inline: auto; }
.k4 .rich a, .k4 .lead a, .k4 .faq a { color: var(--green); text-decoration: underline; text-underline-offset: .2em; }
.k4 .rich p + p { margin-top: .6em; }
.k4 .rich ul, .k4 .rich ol { margin: .5em 0 .5em 1.2em; padding: 0; }
.k4 .rich li + li { margin-top: .3em; }
.k4 strong { font-weight: 700; }
.k4 .section { padding-block: var(--space-2xl); }
.k4 .section--tight { padding-block: var(--space-xl); }
.k4 .section--yellow { background: var(--yellow); }
.k4 .section--lavender { background: var(--lavender); }
.k4 .section--white { background: var(--white); }
.k4 .section-head { max-width: 760px; margin-inline: auto; text-align: center; display: grid; gap: var(--space-s); justify-items: center; margin-bottom: var(--space-l); }
.k4 .section-head .lead { margin-inline: auto; }

/* Pills (hand-written labels) */
.k4 .pill {
  display: inline-block; background: var(--lavender); color: var(--green); font-family: var(--marker); font-size: .78rem;
  letter-spacing: .04em; text-transform: uppercase; padding: .3em 1.1em; border-radius: 999px; line-height: 1.4;
}
.k4 .pill--yellow { background: var(--yellow); }
.k4 .pill--sand { background: var(--sand); }
.k4 .marker { font-family: var(--marker); }

/* Buttons */
.k4 .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .85em 1.6em; border-radius: var(--radius-s);
  font-weight: 700; font-size: var(--step--1); text-decoration: none; border: 2px solid transparent; cursor: pointer; line-height: 1.25;
  transition: transform .25s var(--ease-out), background .25s, color .25s, box-shadow .25s; text-align: center;
}
.k4 .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(25, 63, 39, .45); }
.k4 .btn--green { background: var(--green); color: var(--cream); }
.k4 .btn--green:hover { background: var(--green-2); }
.k4 .btn--yellow { background: var(--yellow); color: var(--green); }
.k4 .btn--yellow:hover { background: #F2F86A; }
.k4 .btn--outline { background: transparent; color: var(--green); border-color: var(--green); }
.k4 .btn--outline:hover { background: var(--green); color: var(--cream); }
.k4 .btn--lg { padding: 1em 2em; font-size: var(--step-0); }
.k4 .btn-row { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-s); align-items: center; }
.k4 .btn-note { font-size: var(--step--1); color: var(--ink-2); margin-top: var(--space-xs); }

/* Header */
.k4h { position: sticky; top: 0; z-index: 40; background: rgba(255, 245, 235, .92); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.k4h.is-scrolled { border-bottom-color: var(--line); }
.k4h-in { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; display: flex; align-items: center; gap: var(--space-m); min-height: 76px; }
.k4h-logo { display: inline-flex; align-items: center; margin-right: auto; }
.k4h-logo img { height: 34px; width: auto; }
.k4h-nav { display: flex; gap: clamp(.9rem, 2vw, 1.7rem); align-items: center; }
.k4h-nav a { text-decoration: none; font-weight: 600; font-size: var(--step--1); color: var(--green); padding: .35em 0; border-bottom: 2px solid transparent; transition: border-color .2s; }
.k4h-nav a:hover, .k4h-nav a[aria-current="page"] { border-bottom-color: var(--green); }
.k4h-lang { display: flex; gap: .35em; font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.k4h-lang a { text-decoration: none; padding: .2em .35em; border-radius: 6px; }
.k4h-lang a.on { background: var(--lavender); color: var(--green); }
.k4h-cta { flex-shrink: 0; }
.k4h-burger { display: none; width: 44px; height: 44px; border: 0; background: transparent; border-radius: 8px; position: relative; cursor: pointer; }
.k4h-burger span, .k4h-burger span::before, .k4h-burger span::after { position: absolute; left: 10px; width: 24px; height: 2px; background: var(--green); border-radius: 2px; content: ""; transition: transform .25s, top .25s, opacity .2s; }
.k4h-burger span { top: 21px; }
.k4h-burger span::before { top: -7px; left: 0; }
.k4h-burger span::after { top: 7px; left: 0; }
body.k4-open .k4h-burger span { background: transparent; }
body.k4-open .k4h-burger span::before { top: 0; transform: rotate(45deg); }
body.k4-open .k4h-burger span::after { top: 0; transform: rotate(-45deg); }
.k4h-mobile { display: none; position: fixed; inset: 76px 0 0 0; z-index: 39; background: var(--cream); padding: var(--space-m) var(--gutter) var(--space-xl); flex-direction: column; gap: .3rem; font-size: var(--step-0); font-family: var(--display); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.k4h-mobile a { text-decoration: none; padding: .45em 0; border-bottom: 1px solid var(--line); }
/* The open menu is the only thing on screen: the consent card waits until it closes */
body.k4-open .k4c { display: none; }
.k4h-mobile .k4h-lang { font-family: var(--body); margin-top: var(--space-s); }
body.k4-open .k4h-mobile { display: flex; }
body.k4-open { overflow: hidden; }
@media (max-width: 900px) {
  .k4h-nav, .k4h-in > .k4h-lang { display: none; }
  .k4h-burger { display: block; }
  .k4h-in { gap: var(--space-s); }
  .k4 .k4h-cta { padding: .6em 1em; font-size: .8rem; }
}
@media (max-width: 380px) {
  .k4 .k4h-cta { display: none; }
}

/* Hero */
.k4-hero { padding-block: var(--space-xl) var(--space-2xl); }
.k4-hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); align-items: center; }
.k4-hero-copy { display: grid; gap: var(--space-m); justify-items: start; }
.k4-hero-copy h1 { max-width: 14ch; }
.k4-hero-media { position: relative; }
.k4-hero-media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 48% 48% 40% 40% / 60% 60% 30% 30%; }
.k4-hero-quote { position: absolute; right: 0; bottom: 8%; max-width: 62%; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-s); padding: var(--space-s) var(--space-m); font-style: italic; font-size: var(--step--1); box-shadow: 0 16px 40px -24px rgba(25, 63, 39, .5); }
.k4-hero--page { padding-block: var(--space-l) var(--space-xl); }
.k4-hero--tall .k4-hero-media img { aspect-ratio: 4 / 5; }
.k4-hero--tall .k4-hero-quote { bottom: 6%; }
.k4-hero--page .k4-band { font-size: var(--step-0); padding: .45em 1.1em; }
.k4-hero-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-s) var(--space-m); margin: 0; padding: var(--space-s) 0 0; list-style: none; border-top: 1px solid var(--line); width: 100%; }
.k4-hero-facts li { display: grid; gap: .15em; align-content: start; font-size: .84rem; color: var(--ink-2); }
@media (max-width: 560px) { .k4-hero-facts { grid-template-columns: 1fr; } }
.k4-hero-facts b { font-family: var(--display); font-weight: 400; font-size: var(--step-1); color: var(--green); line-height: 1.1; }
@media (max-width: 900px) {
  .k4-hero .wrap { grid-template-columns: 1fr; gap: var(--space-l); }
  .k4-hero-copy h1 { max-width: none; }
  .k4-hero-quote { position: static; max-width: none; margin-top: var(--space-s); }
}

/* Marquee */
.k4-marquee { background: var(--lavender); overflow: hidden; padding-block: var(--space-s); border-block: 1px solid rgba(25, 63, 39, .08); }
.k4-marquee-track { display: flex; gap: 3rem; width: max-content; animation: k4-marquee 40s linear infinite; font-family: var(--display); font-size: var(--step-2); white-space: nowrap; }
.k4-marquee-track span::after { content: "-"; margin-left: 3rem; opacity: .5; }
@keyframes k4-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .k4-marquee-track { animation: none; } }

/* Cards & grids */
.k4-grid { display: grid; gap: var(--space-m); }
.k4-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k4-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.k4-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .k4-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .k4-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .k4-grid--4, .k4-grid--3, .k4-grid--2 { grid-template-columns: 1fr; } }
.k4-card { border-radius: var(--radius); padding: var(--space-l) var(--space-m); background: var(--white); display: grid; gap: var(--space-s); align-content: start; }
.k4-card--lavender { background: var(--lavender); text-align: center; justify-items: center; }
.k4-card--yellow { background: var(--yellow); text-align: center; justify-items: center; }
.k4-card--sand { background: var(--sand); text-align: center; justify-items: center; }
.k4-card--sand2 { background: var(--sand-2); }
.k4-card p { font-size: var(--step--1); color: var(--ink-2); }
.k4-card h3 { font-size: var(--step-1); }
.k4-icon { width: 92px; height: 92px; border-radius: 50%; background: var(--green); display: grid; place-items: center; overflow: hidden; }
.k4-icon img { width: 100%; height: 100%; object-fit: cover; }
.k4-icon--sm { width: 64px; height: 64px; }
.k4-num { width: 64px; height: 64px; border-radius: 50%; background: var(--green); color: var(--cream); font-family: var(--display); font-size: 1.6rem; display: grid; place-items: center; }

/* Split section (text + image) */
.k4-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); align-items: center; }
.k4-split--reverse > :first-child { order: 2; }
.k4-split-copy { display: grid; gap: var(--space-m); justify-items: start; }
.k4-split-copy h2 { max-width: 18ch; }
.k4-split img { width: 100%; }
@media (max-width: 900px) { .k4-split { grid-template-columns: 1fr; gap: var(--space-l); } .k4-split--reverse > :first-child { order: 0; } }

/* Cohort */
.k4-cohort-head { text-align: center; display: grid; justify-items: center; gap: var(--space-s); margin-bottom: var(--space-l); }
.k4-cohort-dates { font-family: var(--display); font-size: var(--step-1); }
.k4-objective { display: inline-block; background: var(--green); color: var(--cream); font-family: var(--display); font-size: var(--step-1); padding: .6em 1.4em; border-radius: var(--radius-s); text-align: center; }
.k4-asso { position: relative; }
.k4-tag { display: inline-block; justify-self: start; font-size: .72rem; font-weight: 700; padding: .25em .8em; border-radius: 999px; }
.k4-tag--supported { background: var(--lavender); color: var(--green); }
.k4-tag--validating { background: #F9A26B; color: var(--green); }
.k4-asso .k4-mission { font-weight: 700; color: var(--green); font-size: var(--step--1); }
.k4-asso .k4-desc { font-size: var(--step--1); color: var(--ink-2); }
.k4-asso .btn { justify-self: start; margin-top: auto; }
.k4-asso-logo { height: 44px; width: auto; max-width: 160px; object-fit: contain; }

/* Arguments list */
.k4-args { display: grid; gap: var(--space-m); }
.k4-args h3 { font-size: var(--step-1); margin-bottom: .3em; }
.k4-args p { color: var(--ink-2); font-size: var(--step--1); }

/* Packs */
.k4-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-m); align-items: stretch; }
@media (max-width: 1000px) { .k4-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .k4-packs { grid-template-columns: 1fr; } }
.k4-pack { background: var(--white); border-radius: var(--radius); border: 1px solid var(--line); display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; }
.k4-pack-top { height: 14px; background: var(--yellow); }
.k4-pack:nth-child(2) .k4-pack-top { background: var(--mint); }
.k4-pack:nth-child(3) .k4-pack-top { background: var(--periwinkle); }
.k4-pack:nth-child(4) .k4-pack-top { background: var(--coral); }
.k4-pack:nth-child(5) .k4-pack-top { background: var(--sand); }
.k4-pack--friend .k4-pack-top { background: var(--sand); }
.k4-pack-note { font-size: .78rem; color: var(--ink-2); font-style: italic; }
.k4-pack--recommended { background: var(--lavender); border-color: var(--periwinkle); }
.k4-pack-body { padding: var(--space-m) var(--space-m) var(--space-s); display: grid; gap: var(--space-xs); align-content: start; justify-items: center; text-align: center; }
.k4-pack-reco { font-size: .72rem; font-weight: 700; background: var(--white); border-radius: 999px; padding: .2em .8em; }
.k4-pack-amount { font-family: var(--display); font-size: var(--step-3); line-height: 1; margin-top: .3em; }
.k4-pack-name { font-family: var(--display); font-size: var(--step-1); }
.k4-pack-features { text-align: left; font-size: .86rem; color: var(--ink-2); justify-self: stretch; }
.k4-pack-features ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5em; }
.k4-pack-features li { padding-left: 1.3em; position: relative; }
.k4-pack-features li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--green); font-weight: 700; }
.k4-pack-features ul ul { margin: .4em 0 0 .2em; }
.k4-pack-features ul ul li::before { content: "\2022"; }
.k4-pack-foot { padding: var(--space-s) var(--space-m) var(--space-m); text-align: center; }
.k4-pack-foot .btn { width: 100%; }
/* Friend pack: one band under the grid, three columns on desktop */
.k4-pack--band { margin-top: var(--space-m); grid-template-rows: none; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto; align-items: center; gap: var(--space-m); padding: var(--space-m) var(--space-l); border-top: 14px solid var(--sand); }
.k4-pack-band-head { display: grid; gap: var(--space-xs); justify-items: start; }
.k4-pack-band-head .pill { font-size: .62rem; }
.k4-pack-band-head .k4-pack-amount { font-size: var(--step-2); margin-top: .1em; }
.k4-pack-band-head .k4-pack-name { font-size: var(--step-0); }
.k4-pack-band-body { display: grid; gap: var(--space-xs); }
.k4-pack-band-body .k4-pack-features ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5em var(--space-m); }
.k4-pack-band-foot .btn { white-space: nowrap; }
@media (max-width: 1000px) { .k4-pack--band { grid-template-columns: 1fr; padding: var(--space-m); } .k4-pack-band-body .k4-pack-features ul { grid-template-columns: 1fr; } .k4-pack-band-foot .btn { width: 100%; } }
.k4-guarantee { display: inline-block; background: var(--green); color: var(--cream); border-radius: var(--radius-s); padding: var(--space-s) var(--space-m); text-align: center; }
.k4-guarantee strong { display: block; font-family: var(--display); font-weight: 400; font-size: var(--step-1); color: var(--yellow); }
.k4-guarantee span { font-size: var(--step--1); }

/* Fund */
.k4-fund { max-width: 780px; margin-inline: auto; display: grid; gap: var(--space-l); }
.k4-fund-card { background: var(--white); border: 1.5px solid var(--green); border-radius: var(--radius); padding: var(--space-m) var(--space-l) var(--space-l); }
.k4-fund-card h3 { font-size: var(--step-2); }
.k4-fund-card .k4-fund-sub { color: var(--ink-2); font-size: var(--step--1); margin-top: .2em; }
.k4-fund-amounts { display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--space-m); font-family: var(--display); font-size: var(--step-2); }
.k4-fund-amounts span:last-child { color: var(--green-3); }
.k4-fund-bar { position: relative; height: 16px; border-radius: 8px; background: var(--green-3); margin-top: .5em; overflow: visible; }
.k4-fund-fill { position: absolute; inset: 0 auto 0 0; background: var(--green); border-radius: 8px; transition: width 1.2s var(--ease-out); }
.k4-fund-mark { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--white); }
.k4-fund-mark span { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); white-space: nowrap; text-align: center; font-size: .72rem; color: var(--green-3); padding-top: .4em; line-height: 1.2; }
.k4-fund-mark span b { display: block; font-family: var(--display); font-weight: 400; font-size: .95rem; }
.k4-fund-pct { display: inline-block; margin-top: 3.4rem; background: var(--lavender); border-radius: var(--radius-s); padding: .3em .9em; font-size: var(--step--1); }
.k4-fund-pct b { font-weight: 700; }
.k4-fund-raised { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-top: var(--space-s); }
.k4-fund-raised b { font-family: var(--display); font-weight: 400; font-size: var(--step-3); line-height: 1; color: var(--green); }
.k4-fund-raised span { color: var(--ink-2); font-size: var(--step--1); }
.k4-fund-note { color: var(--ink-2); font-size: var(--step--1); margin-top: var(--space-s); max-width: 52ch; }
.k4-fund-card .btn { margin-top: var(--space-m); }

/* Our cohorts: the three ways a cohort exists */
.k4-cohorts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-m); }
@media (max-width: 900px) { .k4-cohorts { grid-template-columns: 1fr; } }
.k4-cohort-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-m); display: flex; flex-direction: column; gap: var(--space-xs); }
.k4-cohort-card--live { border: 1.5px solid var(--green); }
.k4-cohort-card--yours { border-style: dashed; background: transparent; }
.k4-cohort-card .pill { align-self: flex-start; }
.k4-cohort-card h3 { font-size: var(--step-1); }
.k4-cohort-card .k4-cohort-price { font-family: var(--display); font-size: var(--step-2); line-height: 1; color: var(--green); margin-block: .1em; min-height: 5.3rem; font-variant-numeric: tabular-nums; display: grid; align-content: start; gap: .35em; }
.k4-cohort-card .k4-cohort-price small { display: block; font-family: var(--body); font-size: var(--step--1); line-height: 1.35; color: var(--ink-2); }
.k4-cohort-card p { font-size: var(--step--1); color: var(--ink-2); }
.k4-cohort-card .k4-cohort-meta { font-size: var(--step--1); color: var(--green); }
.k4-cohort-card .btn { align-self: flex-start; margin-top: auto; padding-top: .7em; padding-bottom: .7em; font-size: var(--step--1); }
.k4-sponsors { display: grid; gap: var(--space-s); }
.k4-sponsors h3 { font-size: var(--step-2); }
.k4-sponsor { display: flex; align-items: center; gap: var(--space-s); padding: var(--space-s) 0; border-top: 1px solid var(--line); font-size: var(--step--1); }
.k4-sponsor:last-child { border-bottom: 1px solid var(--line); }
.k4-sponsor img { height: 28px; width: auto; }
.k4-sponsor .k4-sponsor-amount { margin-left: auto; font-weight: 700; white-space: nowrap; }
.k4-report { background: var(--green); color: var(--cream); border-radius: var(--radius-s); padding: var(--space-m); font-size: var(--step--1); }
.k4-report b { text-decoration: underline; text-underline-offset: .2em; }
.k4-empty { color: var(--ink-2); font-size: var(--step--1); font-style: italic; }

/* FAQ */
.k4-faq { max-width: 780px; margin-inline: auto; border-top: 1px solid var(--line); }
.k4-faq details { border-bottom: 1px solid var(--line); }
.k4-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); padding: 1.1em 0; font-size: var(--step-0); font-weight: 500; }
.k4-faq summary::-webkit-details-marker { display: none; }
.k4-faq summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(45deg); flex-shrink: 0; transition: transform .25s; margin-right: .3em; }
.k4-faq details[open] summary::after { transform: rotate(225deg); }
.k4-faq .k4-answer { padding: 0 0 1.4em; color: var(--ink-2); font-size: var(--step--1); max-width: 68ch; }
.k4-faq .k4-answer ul, .k4-faq .k4-answer ol { margin: .6em 0 .6em 1.2em; padding: 0; }
.k4-faq .k4-answer li + li { margin-top: .3em; }
.k4-faq .k4-answer p + p { margin-top: .6em; }

/* CTA block */
.k4-cta { text-align: center; display: grid; justify-items: center; gap: var(--space-m); max-width: 720px; margin-inline: auto; }
.k4-cta h2 { font-size: var(--step-2); }

/* Checks list (join page) */
.k4-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); max-width: 820px; margin-inline: auto; list-style: none; padding: 0; }
@media (max-width: 640px) { .k4-checks { grid-template-columns: 1fr; } }
.k4-checks li { background: var(--white); border-radius: var(--radius-s); padding: .9em 1.1em; display: flex; align-items: center; gap: .8em; font-weight: 700; font-size: var(--step--1); }
.k4-checks img { width: 22px; height: 22px; }
.k4-band { display: inline-block; background: var(--green); color: var(--yellow); font-family: var(--display); font-size: var(--step-1); padding: .5em 1.4em; border-radius: var(--radius-s); text-align: center; }

/* Logos strip */
.k4-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-l) var(--space-xl); }
.k4-logos img { height: 84px; width: auto; max-width: 220px; object-fit: contain; }

/* SourceHub specifics */
.k4-sh-hero .k4-hero-media { display: grid; place-items: center; position: relative; }
.k4-sh-hero .k4-hero-media img { border-radius: 0; aspect-ratio: auto; }
.k4-alliance { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-xl); align-items: center; }
.k4-alliance-cards { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-s); align-items: stretch; }
.k4-alliance-x { font-family: var(--display); font-size: var(--step-3); align-self: center; }
.k4-alliance .k4-card img { height: 60px; width: auto; max-width: 200px; object-fit: contain; }
.k4-alliance .k4-card .btn-link { text-decoration: underline; text-underline-offset: .2em; font-size: var(--step--1); }
@media (max-width: 900px) { .k4-alliance { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .k4-alliance-cards { grid-template-columns: 1fr; } .k4-alliance-x { justify-self: center; } }
.k4-price { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.3fr); gap: var(--space-l); align-items: center; }
.k4-price-market { background: var(--sand); border-radius: var(--radius); padding: var(--space-l) var(--space-m); text-align: center; display: grid; gap: .4em; }
.k4-price-market small { display: block; color: var(--ink-2); font-size: var(--step--1); }
.k4-price-market b { font-family: var(--display); font-weight: 400; font-size: var(--step-3); }
.k4-price-arrow { width: 64px; height: auto; justify-self: center; }
.k4-price-offer { position: relative; background: var(--green); color: var(--cream); border-radius: var(--radius); padding: var(--space-l); display: grid; gap: var(--space-s); }
.k4-price-offer .k4-price-head { text-align: center; }
.k4-price-offer .k4-price-head small { display: block; font-size: var(--step--1); opacity: .9; }
.k4-price-offer .k4-price-amount { font-family: var(--display); font-size: var(--step-3); text-align: center; line-height: 1; }
.k4-price-offer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45em; font-size: .88rem; }
.k4-price-offer li { padding-left: 1.1em; position: relative; }
.k4-price-offer li::before { content: "\2022"; position: absolute; left: 0; color: var(--yellow); }
.k4-price-offer .k4-price-extra { font-weight: 700; margin-top: var(--space-xs); font-size: .88rem; }
.k4-price-savings { position: absolute; top: -30px; right: -20px; width: 120px; height: 120px; background: var(--yellow); color: var(--green); border-radius: 50%; display: grid; place-content: center; text-align: center; font-weight: 700; font-size: .8rem; padding: 1em; transform: rotate(-8deg); box-shadow: 0 10px 30px -20px rgba(25, 63, 39, .5); }
@media (max-width: 900px) { .k4-price { grid-template-columns: 1fr; } .k4-price-arrow { transform: rotate(90deg); } .k4-price-savings { right: 8px; } }
/* The comparison table exists as two images (stacked, side by side): one per viewport, never both */
.k4-mockups { max-width: 1000px; margin-inline: auto; }
.k4-mockups img { max-width: 100%; height: auto; }
.k4-mockups img:first-child { display: none; }
@media (max-width: 640px) { .k4-mockups img:first-child { display: block; width: min(100%, 420px); margin-inline: auto; } .k4-mockups img:last-child { display: none; } }
.k4-testis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-m); align-items: start; }
@media (max-width: 900px) { .k4-testis { grid-template-columns: 1fr; } }
.k4-testi { background: var(--sand-2); border-radius: var(--radius); padding: var(--space-m); display: grid; gap: var(--space-s); font-size: var(--step--1); }
.k4-testi .k4-stars { letter-spacing: .1em; }
.k4-testi .k4-quote { font-style: italic; color: var(--ink-2); }
.k4-testi .k4-author { font-family: var(--marker); font-size: .85rem; }
.k4-refs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-m); }
@media (max-width: 1000px) { .k4-refs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .k4-refs { grid-template-columns: 1fr; } }
.k4-ref { display: grid; gap: var(--space-xs); align-content: start; }
.k4-ref img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-s); }
.k4-ref h3 { font-size: var(--step-1); margin-top: .3em; }
.k4-ref p { font-size: var(--step--1); color: var(--ink-2); }
.k4-ref a { font-size: var(--step--1); text-decoration: underline; text-underline-offset: .2em; }

/* Blog */
.k4-blog-head { padding-block: var(--space-xl) var(--space-l); }
.k4-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-m); }
@media (max-width: 900px) { .k4-posts { grid-template-columns: 1fr; } }
.k4-post-card { background: var(--white); border-radius: var(--radius); overflow: hidden; display: grid; grid-template-rows: auto 1fr; text-decoration: none; border: 1px solid var(--line); transition: transform .25s var(--ease-out); }
.k4-post-card:hover { transform: translateY(-3px); }
.k4-post-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.k4-post-card .k4-post-cover { aspect-ratio: 16 / 9; background: var(--lavender); }
.k4-post-body { padding: var(--space-m); display: grid; gap: .5em; align-content: start; }
.k4-post-meta { font-size: .8rem; color: var(--ink-2); }
.k4-post-body h3 { font-size: var(--step-1); }
.k4-post-body p { font-size: var(--step--1); color: var(--ink-2); }
.k4-article { max-width: 760px; margin-inline: auto; padding-block: var(--space-xl); }
.k4-article header { display: grid; gap: var(--space-s); margin-bottom: var(--space-l); }
.k4-article .k4-cover img { width: 100%; border-radius: var(--radius); margin-bottom: var(--space-l); }
.k4-article .rich h2 { font-size: var(--step-2); margin-top: 1.4em; margin-bottom: .5em; }
.k4-article .rich h3 { margin-top: 1.2em; margin-bottom: .4em; }
.k4-article .rich p { margin-top: .8em; }
.k4-article .rich img { border-radius: var(--radius-s); margin-block: 1em; }
.k4-article .rich blockquote { margin: 1.2em 0; padding: .2em 0 .2em 1.2em; border-left: 3px solid var(--periwinkle); color: var(--ink-2); font-style: italic; }
.k4-pager { display: flex; justify-content: center; gap: var(--space-s); margin-top: var(--space-l); }

/* Legal / standard pages */
.k4-legal { max-width: 760px; margin-inline: auto; padding-block: var(--space-xl); }
.k4-legal h1 { font-size: var(--step-3); margin-bottom: var(--space-m); }
.k4-legal h2 { font-size: var(--step-2); margin-top: 1.5em; margin-bottom: .5em; }
.k4-legal h3 { margin-top: 1.2em; margin-bottom: .4em; }
.k4-legal p { margin-top: .8em; color: var(--ink-2); }
.k4-legal ul { margin: .6em 0 .6em 1.2em; padding: 0; color: var(--ink-2); }
.k4-legal .updated { font-size: var(--step--1); color: var(--ink-2); }
.k4-legal a { text-decoration: underline; text-underline-offset: .2em; }

/* 404 */
.k4-404 { min-height: 60vh; display: grid; place-content: center; text-align: center; gap: var(--space-m); padding-block: var(--space-2xl); }

/* Footer */
.k4f { background: var(--green); color: var(--cream); padding-block: var(--space-xl) var(--space-l); margin-top: var(--space-2xl); }
.k4f-in { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.k4f-top { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); }
.k4f-top--4 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-l); }
@media (max-width: 1000px) { .k4f-top--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .k4f-top { grid-template-columns: 1fr; gap: var(--space-l); } }
@media (max-width: 640px) { .k4f-top--4 { grid-template-columns: 1fr; } }
.k4f-logo img { height: 30px; width: auto; }
.k4f-tag { margin-top: var(--space-s); font-size: var(--step--1); max-width: 34ch; opacity: .9; }
.k4f-t { font-family: var(--display); font-size: var(--step-1); margin-bottom: var(--space-s); }
.k4f ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5em; font-size: var(--step--1); }
.k4f a { color: var(--cream); text-decoration: underline; text-underline-offset: .25em; text-decoration-color: rgba(255, 245, 235, .5); }
.k4f a:hover { text-decoration-color: var(--cream); }
.k4f-bottom { margin-top: var(--space-xl); padding-top: var(--space-m); border-top: 1px solid rgba(255, 245, 235, .18); display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-m); justify-content: space-between; font-size: .85rem; opacity: .9; }
.k4f-links { display: flex; flex-wrap: wrap; gap: var(--space-s); }

/* Consent banner */
.k4c { position: fixed; inset: auto var(--gutter) var(--gutter) auto; z-index: 60; max-width: 420px; background: var(--white); color: var(--green); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-m); box-shadow: 0 24px 60px -30px rgba(25, 63, 39, .6); display: none; gap: var(--space-s); font-size: var(--step--1); }
.k4c.k4c--visible { display: grid; }
.k4c a { text-decoration: underline; text-underline-offset: .2em; }
.k4c-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
@media (max-width: 640px) { .k4c { inset: auto var(--space-s) var(--space-s) var(--space-s); max-width: none; } }

/* ===== Impact hub additions (2026-09-19) ===== */

/* Page head (thematic and prose pages) */
.k4-page-head { padding-block: var(--space-xl) var(--space-l); }
.k4-page-head .wrap--narrow { display: grid; gap: var(--space-s); justify-items: start; }
.k4-page-head h1 { max-width: 20ch; }
.k4-page-head .lead { max-width: 70ch; }
.k4-page-head--center .wrap--narrow { justify-items: center; text-align: center; }
.k4-page-head--center h1 { max-width: none; }
.k4-status { display: flex; gap: var(--space-s); align-items: flex-start; background: var(--white); border: 1px solid var(--line); border-left: 6px solid var(--periwinkle); border-radius: var(--radius-s); padding: var(--space-s) var(--space-m); font-size: var(--step--1); max-width: 70ch; }
.k4-status--available { border-left-color: var(--mint); }
.k4-status--consulting { border-left-color: var(--periwinkle); }
.k4-status--upcoming { border-left-color: var(--yellow); }
.k4-status b { display: block; font-family: var(--display); font-weight: 400; font-size: var(--step-0); margin-bottom: .15em; }

/* Blocks of the thematic pages */
.k4-block { padding-block: var(--space-l); }
.k4-block + .k4-block { padding-top: 0; }
.k4-block--prose { max-width: 760px; margin-inline: auto; }
.k4-block--prose h2 { font-size: var(--step-2); margin-bottom: var(--space-s); }
.k4-block--prose .rich p { color: var(--ink-2); }
.k4-block--prose .rich ul, .k4-block--prose .rich ol { color: var(--ink-2); }
.k4-block--prose .rich p + p { margin-top: .8em; }
.k4-block--columns h2 { text-align: center; margin-bottom: var(--space-m); font-size: var(--step-2); }
.k4-block--columns .k4-card { text-align: left; justify-items: stretch; }
.k4-block--columns .k4-card p { color: var(--green); font-size: var(--step-0); margin: 0; }
.k4-block--columns .k4-card p + ul, .k4-block--columns .k4-card p + p { margin-top: .6em; }
.k4-block--columns .k4-card ul { margin: .4em 0 0 1.1em; padding: 0; list-style: disc; font-size: var(--step--1); color: var(--ink-2); display: grid; gap: .35em; }
.k4-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-m); counter-reset: step; }
@media (max-width: 900px) { .k4-steps { grid-template-columns: 1fr; } }
.k4-step { background: var(--yellow); border-radius: var(--radius); padding: var(--space-l) var(--space-m) var(--space-m); position: relative; counter-increment: step; }
.k4-step::before { content: counter(step); position: absolute; top: -18px; left: var(--space-m); width: 40px; height: 40px; border-radius: 50%; background: var(--green); color: var(--cream); font-family: var(--display); display: grid; place-items: center; font-size: 1.1rem; }
.k4-step p { font-size: var(--step--1); color: var(--ink-2); }
.k4-step p:first-child { font-size: var(--step-0); color: var(--green); margin-bottom: .4em; }
.k4-steps-intro { text-align: center; max-width: 60ch; margin: 0 auto var(--space-l); color: var(--ink-2); }
.k4-block--cta .k4-cta { background: var(--lavender); border-radius: var(--radius); padding: var(--space-xl) var(--space-l); max-width: none; }
.k4-block--cta .k4-cta p { color: var(--ink-2); max-width: 60ch; }
.k4-related { border-top: 1px solid var(--line); padding-top: var(--space-m); font-size: var(--step--1); color: var(--ink-2); max-width: 760px; margin-inline: auto; }
.k4-related a { text-decoration: underline; text-underline-offset: .2em; color: var(--green); }
.k4-block--faq h2 { text-align: center; font-size: var(--step-2); margin-bottom: var(--space-m); }
.k4-block--media { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-l); align-items: center; }
@media (max-width: 900px) { .k4-block--media { grid-template-columns: 1fr; } }
.k4-block--media img { border-radius: var(--radius); }

/* Home: three doors, digital scope, pricing teaser, posts */
.k4-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-m); }
@media (max-width: 900px) { .k4-doors { grid-template-columns: 1fr; } }
.k4-door { display: grid; gap: var(--space-s); align-content: start; padding: var(--space-l) var(--space-m); border-radius: var(--radius); text-decoration: none; transition: transform .25s var(--ease-out); border: 1px solid transparent; }
.k4-door:hover { transform: translateY(-3px); }
.k4-door--asso { background: var(--yellow); }
.k4-door--company { background: var(--lavender); }
.k4-door--provider { background: var(--sand); }
.k4-door .pill { background: rgba(255, 255, 255, .7); justify-self: start; }
.k4-door h3 { font-size: var(--step-2); }
.k4-door p { color: var(--ink-2); font-size: var(--step--1); }
.k4-door .k4-door-link { font-weight: 700; margin-top: auto; }
.k4-scope { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-m); }
@media (max-width: 900px) { .k4-scope { grid-template-columns: 1fr; } }
.k4-scope-col { background: var(--white); border-radius: var(--radius); padding: var(--space-l) var(--space-m); border: 1px solid var(--line); }
.k4-scope-col h3 { margin-bottom: var(--space-s); }
.k4-scope-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6em; }
.k4-scope-col li { padding-left: 1.6em; position: relative; font-size: var(--step--1); color: var(--ink-2); }
.k4-scope-col li::before { content: ""; position: absolute; left: 0; top: .45em; width: 10px; height: 10px; border-radius: 50%; background: var(--green); }
.k4-scope-col--next li::before { background: var(--periwinkle); }
.k4-scope-col li a { color: var(--green); text-decoration: underline; text-underline-offset: .2em; }
.k4-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-m); }
@media (max-width: 900px) { .k4-tiers { grid-template-columns: 1fr; } }
.k4-tier { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-l) var(--space-m); display: grid; gap: var(--space-xs); align-content: start; }
.k4-tier--featured { background: var(--green); color: var(--cream); border-color: var(--green); }
.k4-tier.k4-tier--featured h3, .k4-tier.k4-tier--featured .k4-tier-price { color: var(--yellow); }
.k4-tier.k4-tier--featured p, .k4-tier.k4-tier--featured li { color: var(--cream); }
.k4-tier .pill { justify-self: start; }
.k4-tier h3 { font-size: var(--step-1); }
.k4-tier .k4-tier-price { font-family: var(--display); font-size: var(--step-3); line-height: 1; margin-block: .2em; color: var(--green); }
.k4-tier-price small { font-family: var(--body); font-size: var(--step--1); color: var(--ink-2); display: block; margin-top: .3em; }
.k4-tier-price .k4-tier-from { margin-top: 0; margin-bottom: .15em; font-size: .8rem; text-transform: none; }
.k4-tier.k4-tier--featured .k4-tier-price .k4-tier-from { color: var(--cream); opacity: .85; }
.k4-tier.k4-tier--featured .k4-tier-price small { color: var(--cream); opacity: .85; }
.k4-tier p { font-size: var(--step--1); color: var(--ink-2); }
.k4-tier ul { list-style: none; margin: .4em 0 0; padding: 0; display: grid; gap: .45em; font-size: .9rem; color: var(--ink-2); }
.k4-tier li { padding-left: 1.3em; position: relative; }
.k4-tier li::before { content: "\2713"; position: absolute; left: 0; top: 0; font-weight: 700; }
.k4-tier .btn { margin-top: var(--space-s); justify-self: start; }
.k4-extras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-m); margin-top: var(--space-l); }
@media (max-width: 900px) { .k4-extras { grid-template-columns: 1fr; } }
.k4-extra { background: var(--lavender); border-radius: var(--radius); padding: var(--space-m); display: grid; gap: .4em; align-content: start; }
.k4-extra b { font-family: var(--display); font-weight: 400; font-size: var(--step-1); }
.k4-extra p { font-size: var(--step--1); color: var(--ink-2); }
.k4-extra--sand { background: var(--sand); }
.k4-extra--mint { background: var(--mint); }
.k4-extras--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* Pricing: sponsored band, website ladder, budget slider, search visibility */
.k4-free { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-l); background: var(--green); color: var(--cream); border-radius: var(--radius); padding: var(--space-l); align-items: center; }
@media (max-width: 900px) { .k4-free { grid-template-columns: 1fr; padding: var(--space-m); } }
.k4-free .pill { justify-self: start; display: inline-block; margin-bottom: var(--space-xs); }
.k4-free h2 { color: var(--yellow); font-size: var(--step-2); margin-bottom: var(--space-xs); }
.k4-free p, .k4-free li { color: var(--cream); }
.k4-free ul { list-style: none; margin: var(--space-s) 0 0; padding: 0; display: grid; gap: .45em; font-size: var(--step--1); }
.k4-free li { padding-left: 1.3em; position: relative; }
.k4-free li::before { content: "\2713"; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--yellow); }
.k4-free-cta { display: grid; gap: var(--space-s); justify-items: center; text-align: center; background: rgba(255, 245, 235, .08); border-radius: var(--radius); padding: var(--space-m); }
.k4-free-price { font-family: var(--display); font-size: var(--step-4); line-height: 1; color: var(--yellow); }
.k4-free-price small { display: block; font-family: var(--body); font-size: var(--step--1); color: var(--cream); opacity: .85; margin-top: .3em; }
.k4-free-link { font-size: var(--step--1); color: var(--cream); text-decoration: underline; text-underline-offset: .2em; }
.k4-ladder { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: var(--space-s); }
.k4-ladder .k4-tier { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-m) var(--space-s); }
.k4-ladder .k4-tier .pill { align-self: flex-start; }
.k4-ladder .k4-tier h3 { font-size: var(--step-0); }
.k4-ladder .k4-tier .k4-tier-price { font-size: var(--step-2); }
.k4-ladder .k4-tier .k4-tier-price--range { font-size: var(--step-1); padding-top: .25em; }
.k4-ladder .k4-tier ul { font-size: var(--step--1); }
.k4-ladder .k4-tier .btn { align-self: flex-start; margin-top: auto; padding-top: .7em; padding-bottom: .7em; font-size: var(--step--1); }
.k4-tier-not { font-size: var(--step--1); color: var(--ink-2); border-top: 1px solid var(--line); padding-top: var(--space-xs); }
.k4-tier.k4-tier--featured .k4-tier-not { color: var(--cream); opacity: .85; border-top-color: rgba(255, 245, 235, .25); }
.k4-ladder-note { margin-top: var(--space-m); font-size: var(--step--1); color: var(--ink-2); max-width: var(--measure); }
.k4-ladder-note a { color: var(--green); text-decoration: underline; text-underline-offset: .2em; }
.k4-sim { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-l); background: var(--lavender); border-radius: var(--radius); padding: var(--space-l); align-items: center; }
@media (max-width: 900px) { .k4-sim { grid-template-columns: 1fr; padding: var(--space-m); } }
.k4-sim-copy { display: grid; gap: var(--space-s); }
.k4-sim-copy .pill { justify-self: start; background: rgba(255, 255, 255, .7); }
.k4-sim-copy h2 { font-size: var(--step-2); }
.k4-sim-demo { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-m); }
.k4-sim-amount { display: flex; align-items: baseline; gap: .5rem; font-family: var(--display); font-size: var(--step-3); line-height: 1; color: var(--green); font-variant-numeric: tabular-nums; }
.k4-sim-amount small { font-family: var(--body); font-size: var(--step--1); color: var(--ink-2); }
#k4SimRange { --p: 75%; width: 100%; margin: var(--space-s) 0 .4rem; appearance: none; -webkit-appearance: none; height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--green) var(--p), rgba(25, 63, 39, .15) var(--p)); outline-offset: 6px; cursor: pointer; }
#k4SimRange::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--yellow); border: 3px solid var(--green); box-shadow: 0 2px 8px rgba(25, 63, 39, .2); cursor: grab; }
#k4SimRange::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--yellow); border: 3px solid var(--green); cursor: grab; }
.k4-sim-ticks { display: flex; justify-content: space-between; list-style: none; margin: 0 0 var(--space-s); padding: 0; font-size: .78rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.k4-sim-days { display: grid; gap: .15rem; margin-bottom: var(--space-s); }
.k4-sim-days b { color: var(--green); }
.k4-sim-days span { font-size: var(--step--1); color: var(--ink-2); }
.k4-sim-gauges { list-style: none; margin: 0 0 var(--space-s); padding: 0; display: grid; gap: .5rem; }
.k4-sim-gauges li { display: grid; grid-template-columns: 11rem minmax(0, 1fr); align-items: center; gap: .7rem; font-size: var(--step--1); color: var(--ink-2); }
@media (max-width: 600px) { .k4-sim-gauges li { grid-template-columns: 8.5rem minmax(0, 1fr); } }
.k4-sim-gauges .bar { display: block; height: 8px; border-radius: 999px; background: rgba(25, 63, 39, .12); overflow: hidden; }
.k4-sim-gauges .bar i { display: block; height: 100%; width: var(--v, 50%); background: var(--green); border-radius: 999px; transition: width .35s var(--ease-out); }
.k4-sim-what { font-size: var(--step--1); color: var(--ink-2); border-top: 1px solid var(--line); padding-top: var(--space-xs); }
.k4-sim-what b { color: var(--green); }
.k4-rate { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-l); background: var(--white); border: 1.5px solid var(--green); border-radius: var(--radius); padding: var(--space-l); align-items: start; }
@media (max-width: 900px) { .k4-rate { grid-template-columns: 1fr; padding: var(--space-m); } }
.k4-rate-figure { display: grid; gap: var(--space-s); }
.k4-rate-figure .pill { justify-self: start; }
.k4-rate-figure p { font-size: var(--step--1); color: var(--ink-2); }
.k4-rate-amount { font-family: var(--display); font-size: var(--step-4); line-height: 1; color: var(--green); }
.k4-rate-figure .k4-rate-amount { color: var(--green); font-size: var(--step-4); }
.k4-rate-amount small { display: block; font-family: var(--body); font-size: var(--step--1); color: var(--ink-2); margin-top: .35em; }
.k4-rate-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-m); }
@media (max-width: 900px) { .k4-rate-cols { grid-template-columns: 1fr; } }
.k4-rate-cols h3 { font-size: var(--step-0); margin-bottom: .5em; }
.k4-rate-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5em; font-size: var(--step--1); color: var(--ink-2); }
.k4-rate-cols li { padding-left: 1.3em; position: relative; }
.k4-rate-cols li::before { content: ""; position: absolute; left: 0; top: .5em; width: 9px; height: 9px; border-radius: 50%; background: var(--green); }
.k4-scale { margin-top: var(--space-m); background: var(--lavender); border-radius: var(--radius); padding: var(--space-l); display: grid; gap: var(--space-m); }
@media (max-width: 900px) { .k4-scale { padding: var(--space-m); } }
.k4-scale-head { display: grid; gap: var(--space-xs); max-width: var(--measure); }
.k4-scale-head h3 { font-size: var(--step-1); }
.k4-scale-head p { font-size: var(--step--1); color: var(--ink-2); }
.k4-scale-axis { position: relative; height: 8px; border-radius: 999px; background: rgba(25, 63, 39, .18); margin: 4.6rem 3.5rem 4.6rem 2.2rem; }
.k4-scale-band { position: absolute; top: 0; bottom: 0; left: var(--from); width: calc(var(--to) - var(--from)); background: rgba(25, 63, 39, .3); border-radius: 999px; }
.k4-scale-band--dark { background: rgba(25, 63, 39, .45); }
.k4-scale-mark { position: absolute; left: var(--x); top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--green); border: 3px solid var(--lavender); font-style: normal; }
.k4-scale-mark b, .k4-scale-mark span { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; text-align: center; line-height: 1.15; }
.k4-scale-mark b { bottom: calc(100% + .35rem); font-family: var(--display); font-weight: 400; font-size: var(--step-0); color: var(--green); }
.k4-scale-mark span { bottom: calc(100% + 1.75rem); top: auto; font-size: .78rem; color: var(--ink-2); }
.k4-scale-mark--below b { bottom: auto; top: calc(100% + .35rem); }
.k4-scale-mark--below span { bottom: auto; top: calc(100% + 1.75rem); }
.k4-scale-mark--k4g { width: 22px; height: 22px; margin: -11px 0 0 -11px; background: var(--yellow); border-color: var(--green); }
.k4-scale-mark--k4g b { font-size: var(--step-1); }
.k4-scale-mark--k4g span { font-weight: 700; color: var(--green); }
.k4-scale-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: .5em; font-size: var(--step--1); color: var(--ink-2); }
.k4-scale-legend li { padding-left: 7.6rem; position: relative; }
.k4-scale-legend b { position: absolute; left: 0; top: 0; color: var(--green); font-family: var(--display); font-weight: 400; white-space: nowrap; }
@media (max-width: 600px) { .k4-scale-legend li { padding-left: 0; } .k4-scale-legend b { position: static; display: block; } .k4-scale-mark span { display: none; } .k4-scale-mark--agency b { top: auto; bottom: calc(100% + .35rem); } .k4-scale-axis { margin: 3rem 3.4rem 3rem 1.4rem; } }
.k4-scale-sources { font-size: .8rem; color: var(--ink-2); }
.k4-free-more { font-size: var(--step--1); color: var(--cream); opacity: .9; margin-top: var(--space-s); }
.k4-free-more a { color: var(--yellow); text-decoration: underline; text-underline-offset: .2em; }
.k4-scale-sources a { color: var(--green); text-decoration: underline; text-underline-offset: .2em; }
.k4-fit { margin-top: var(--space-m); display: grid; gap: var(--space-m); }
.k4-fit-head { max-width: var(--measure); display: grid; gap: var(--space-xs); }
.k4-fit-head h3 { font-size: var(--step-1); }
.k4-fit-head p { font-size: var(--step--1); color: var(--ink-2); }
.k4-fit-head a { color: var(--green); text-decoration: underline; text-underline-offset: .2em; }
.k4-fit-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-m); }
@media (max-width: 900px) { .k4-fit-cols { grid-template-columns: 1fr; } }
.k4-fit-col { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-m); display: grid; gap: var(--space-s); align-content: start; }
.k4-fit-col--out { background: var(--sand-2); border-color: transparent; }
.k4-fit-col h4 { font-family: var(--display); font-weight: 400; font-size: var(--step-1); }
.k4-fit-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5em; font-size: var(--step--1); color: var(--ink-2); }
.k4-fit-col li { padding-left: 1.4em; position: relative; }
.k4-fit-col li::before { content: "\2713"; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--green); }
.k4-fit-col--out li::before { content: "\2192"; }
.k4-fit-col p { font-size: var(--step--1); color: var(--green); }
.k4-fit-col--path { gap: var(--space-s); }
.k4-fit-col--path .pill { justify-self: start; }
.k4-fit-col--path h3 { font-size: var(--step-1); }
.k4-fit-col--path > p { color: var(--ink-2); }
.k4-fit-col--path li::before { content: "\2713"; }
.k4-fit-col--path .btn { justify-self: start; margin-top: var(--space-xs); }
.k4-fit-col--path .btn-note { font-size: var(--step--1); color: var(--ink-2); margin-top: -.4rem; }
.k4-fit-col--fund { background: var(--lavender); border-color: transparent; }
.k4-seo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-m); }
@media (max-width: 900px) { .k4-seo { grid-template-columns: 1fr; } }
.k4-seo-col { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-m); display: grid; gap: var(--space-s); align-content: start; }
.k4-seo-col--work { background: var(--sand); border-color: transparent; }
.k4-seo-col h3 { font-size: var(--step-1); }
.k4-seo-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5em; font-size: var(--step--1); color: var(--ink-2); }
.k4-seo-col li { padding-left: 1.4em; position: relative; }
.k4-seo-col li::before { content: "\2713"; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--green); }
.k4-seo-col--work li::before { content: "\2192"; }
.k4-seo-col p { font-size: var(--step--1); color: var(--ink-2); }
.k4-seo-col p a { color: var(--green); text-decoration: underline; text-underline-offset: .2em; }

/* Collective */
.k4-members { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-m); }
@media (max-width: 1000px) { .k4-members { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .k4-members { grid-template-columns: 1fr; } }
.k4-member { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-m); display: grid; gap: .5em; align-content: start; }
.k4-member img { height: 44px; width: auto; max-width: 160px; object-fit: contain; }
.k4-member h3 { font-size: var(--step-1); }
.k4-member .k4-tag { justify-self: start; }
.k4-member p { font-size: var(--step--1); color: var(--ink-2); }
.k4-member a.btn-link { font-size: var(--step--1); text-decoration: underline; text-underline-offset: .2em; }
.k4-member--empty { background: var(--sand); border-style: dashed; }
.k4-member-logo img { height: 56px; max-width: 220px; }
.k4-member--supporter .k4-member-link { font-size: var(--step--1); color: var(--green); text-decoration: underline; text-underline-offset: .2em; }

/* With the support of: logo strip */
.k4-supporters { display: grid; gap: var(--space-m); padding: var(--space-l) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.k4-supporters-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s); }
.k4-supporters-head p { font-size: var(--step--1); color: var(--ink-2); }
.k4-supporters-logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-m) var(--space-xl); }
.k4-supporters-logos img { height: 40px; width: auto; max-width: 200px; object-fit: contain; display: block; }
.k4-supporters-logos a { display: inline-block; }
.k4-supporters-name { font-family: var(--display); font-size: var(--step-1); color: var(--green); }
.k4-supporters-you a { font-size: var(--step--1); color: var(--green); text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 600px) { .k4-supporters-logos { gap: var(--space-s) var(--space-m); } .k4-supporters-logos img { height: 32px; max-width: 150px; } }
.k4-tag--delivered { background: var(--mint); color: var(--green); }
.k4-tag--in_progress { background: var(--yellow); color: var(--green); }
.k4-tag--candidate { background: var(--sand); color: var(--green); }
.k4-cohort-group { margin-bottom: var(--space-xl); }
.k4-cohort-group h3 { font-size: var(--step-2); margin-bottom: var(--space-m); }

/* Glossary */
.k4-alpha { display: flex; flex-wrap: wrap; gap: .4em; margin-block: var(--space-m); }
.k4-alpha a { display: inline-grid; place-items: center; min-width: 2.2em; height: 2.2em; border-radius: 8px; background: var(--white); border: 1px solid var(--line); text-decoration: none; font-weight: 700; font-size: .9rem; }
.k4-alpha a.on, .k4-alpha a:hover { background: var(--green); color: var(--cream); border-color: var(--green); }
.k4-terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-m); }
@media (max-width: 900px) { .k4-terms { grid-template-columns: 1fr; } }
.k4-term { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-m); text-decoration: none; display: grid; gap: .4em; align-content: start; transition: transform .25s var(--ease-out); }
.k4-term:hover { transform: translateY(-3px); }
.k4-term h3 { font-size: var(--step-1); }
.k4-term p { font-size: var(--step--1); color: var(--ink-2); }
.k4-letter { font-family: var(--marker); color: var(--periwinkle); font-size: var(--step-3); margin: var(--space-l) 0 var(--space-s); }
.k4-def-short { background: var(--lavender); border-radius: var(--radius); padding: var(--space-m) var(--space-l); font-size: var(--step-0); margin-bottom: var(--space-l); }
.k4-def-tip { background: var(--yellow); border-radius: var(--radius); padding: var(--space-m) var(--space-l); margin-block: var(--space-l); font-size: var(--step--1); }
.k4-def-tip b { display: block; font-family: var(--marker); font-weight: 400; margin-bottom: .3em; }
.k4-def-related { display: flex; flex-wrap: wrap; gap: .5em; margin-top: var(--space-s); }
.k4-def-related a { background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: .3em .9em; font-size: .85rem; text-decoration: none; }
.k4-def-related a:hover { background: var(--green); color: var(--cream); }
.definition-link { text-decoration: underline; text-decoration-color: var(--periwinkle); text-decoration-thickness: 2px; text-underline-offset: .2em; }

/* Partner page */
.k4-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-m); }
.k4-ways--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 960px; margin-inline: auto; }
@media (max-width: 900px) { .k4-ways { grid-template-columns: 1fr; } }
.k4-way { border-radius: var(--radius); padding: var(--space-l) var(--space-m); display: grid; gap: var(--space-s); align-content: start; }
.k4-way--sponsor { background: var(--lavender); }
.k4-way--provider { background: var(--sand); }
.k4-way--hand { background: var(--yellow); }
.k4-way h3 { font-size: var(--step-2); }
.k4-way p, .k4-way li { font-size: var(--step--1); color: var(--ink-2); }
.k4-way ul { margin: 0 0 0 1.1em; padding: 0; list-style: disc; display: grid; gap: .3em; }
.k4-way .btn { justify-self: start; margin-top: auto; }
.k4-way .pill { justify-self: start; }
.k4-charter { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-l); max-width: 760px; margin-inline: auto; }
.k4-charter ol { margin: var(--space-s) 0 0 1.2em; padding: 0; display: grid; gap: .6em; color: var(--ink-2); list-style: decimal; }

/* Blog category chips */
.k4-post-card .pill { justify-self: start; }
.k4-article header .pill { justify-self: start; }

/* Mobile nav: grouped links */
.k4h-mobile .k4h-group { font-family: var(--marker); font-size: .8rem; color: var(--ink-2); margin-top: var(--space-s); text-transform: uppercase; }