/* ==========================================================================
   12 Outcomes — stylesheet
   Extracted from the inline styles in index-2.html.
   Every rule is a single class or attribute selector, so specificity is flat
   and overrides happen by source order (modifiers follow their base rule,
   utilities live at the bottom of the file).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  --kg-pink: #EC008C;
  --kg-pink-dark: #B8006E;
  --kg-pink-deep: #8E0055;
  --kg-pink-soft: #F79AC9;
  --kg-pink-bg: #FDEEF6;
  --kg-pink-line: #F2CFE1;

  --kg-ink: #16202E;
  --kg-ink-line: #2B3646;
  --kg-body: #3A4553;
  --kg-muted: #5A6472;
  --kg-muted-soft: #9FA8B6;

  --kg-cream: #FEFCF6;
  --kg-white: #FFFFFF;
  --kg-paper: #F4F1EA;
  --kg-line: #E6E1D7;
  --kg-line-strong: #DCD7CD;
  --kg-track: #EFECE4;
  --kg-grey: #C9C3B6;

  --kg-max: 1040px;
  --kg-gutter: clamp(20px, 5vw, 40px);

  --kg-display: Impact, 'Haettenschweiler', 'Arial Narrow Bold', sans-serif !important;
  --kg-serif: 'Source Serif 4', serif;
  --kg-sans: 'IBM Plex Sans', sans-serif;

  --kg-ease: cubic-bezier(0.2, 0.75, 0.2, 1);
}

/* --------------------------------------------------------------------------
   2. Page base
   -------------------------------------------------------------------------- */

html { scroll-behavior: smooth; }
body { margin: 0; }
a { color: var(--kg-pink-dark); text-decoration: none; }
a:hover { color: var(--kg-pink-deep); text-decoration: underline; }

.kg-root {
  background: var(--kg-cream);
  color: var(--kg-ink);
  font-family: var(--kg-sans);
  overflow-x: visible;
}

/* Scroll-reveal starting state. The component script writes opacity and
   transform inline once an element enters the viewport. */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

/* --------------------------------------------------------------------------
   3. Sticky header
   -------------------------------------------------------------------------- */

.kg-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(254, 252, 246, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--kg-line);
}

.kg-topbar__inner {
  max-width: var(--kg-max);
  margin: 0 auto;
  padding: 11px var(--kg-gutter);
  display: flex;
  align-items: center;
  gap: 20px;
}

.kg-current {
  display: flex;
  align-items: stretch;
  gap: 14px;
  min-width: 0;
  flex: 1;
  color: var(--kg-ink);
  text-decoration: none;
}
.kg-current:hover { color: var(--kg-pink); text-decoration: none; }

.kg-current__num {
  flex: none;
  min-width: 34px;
  padding: 0 5px;
  background: var(--kg-pink);
  color: var(--kg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--kg-display);
  font-size: 24px;
  line-height: 1;
}

.kg-current__name {
  align-self: center;
  font-size: clamp(14px, 1.9vw, 19px);
  font-weight: 600;
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kg-menu-toggle {
  flex: none;
  background: none;
  border: 1px solid var(--kg-line-strong);
  padding: 9px 11px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
}
.kg-menu-toggle:hover { border-color: var(--kg-pink); }

.kg-menu-toggle__bar {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--kg-ink);
}

.kg-progress { height: 3px; background: var(--kg-track); }

.kg-progress__fill {
  height: 100%;
  width: 0%;
  background: var(--kg-pink);
}

/* --------------------------------------------------------------------------
   4. Drop-down outcome menu
   -------------------------------------------------------------------------- */

.kg-menu {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  background: var(--kg-ink);
  color: var(--kg-paper);
  box-shadow: 0 20px 44px rgba(22, 32, 46, 0.28);
  max-height: 78vh;
  overflow-y: auto;
}

.kg-menu__inner {
  max-width: var(--kg-max);
  margin: 0 auto;
  padding: 22px var(--kg-gutter) 26px;
}

.kg-menu__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kg-pink-soft);
  margin-bottom: 16px;
}

.kg-menu__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 2px 26px;
}

.kg-menu__link {
  display: flex;
  gap: 13px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--kg-ink-line);
  color: var(--kg-white);
  text-decoration: none;
}
.kg-menu__link:hover { color: var(--kg-pink-soft); text-decoration: none; }

.kg-menu__num {
  flex: none;
  width: 20px;
  font-family: Impact, sans-serif;
  font-size: 16px;
  color: var(--kg-pink);
}

.kg-menu__text { font-size: 12.5px; line-height: 1.35; }

.kg-menu__footer {
  margin-top: 18px;
  border-top: 2px solid var(--kg-pink);
  padding-top: 16px;
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

.kg-menu__footer-link {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kg-white);
  text-decoration: none;
}
.kg-menu__footer-link:hover { color: var(--kg-pink-soft); text-decoration: none; }

.kg-menu__footer-link--pink { color: var(--kg-pink-soft); }
.kg-menu__footer-link--pink:hover { color: var(--kg-white); text-decoration: none; }

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */

.kg-hero { border-bottom: 1px solid var(--kg-line); }

.kg-hero__inner {
  max-width: var(--kg-max);
  margin: 0 auto;
  padding: clamp(56px, 4vw, 116px) var(--kg-gutter) clamp(48px, 8vw, 96px);
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 5vw, 52px);
}

.kg-hero__head {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.5vw, 26px);
}

.kg-hero__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kg-pink);
}

.kg-hero__title {
  margin: 0;
  font-family: var(--kg-display);
  font-weight: 400;
  letter-spacing: -0.02em;
}

.kg-hero__title-lead {
  display: block;
  font-size: clamp(38px, 7.4vw, 74px);
  line-height: 0.97;
}

.kg-hero__title-sub {
  display: block;
  margin-top: 0.22em;
  font-size: clamp(19px, 3.7vw, 42px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--kg-pink);
}

.kg-hero__lede {
  margin: 0;
  font-family: var(--kg-serif);
  font-size: clamp(17px, 2.2vw, 24px);
  line-height: 1.42;
  color: var(--kg-body);
  text-wrap: pretty;
}

.kg-hero__pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: clamp(20px, 3.5vw, 44px);
}

.kg-pillar {
  display: flex;
  flex-direction: column;
  gap: 9px;
  border-top: 3px solid var(--kg-pink);
  padding-top: 13px;
}
.kg-pillar--ink { border-top-color: var(--kg-ink); }

.kg-hero__index { display: flex; flex-direction: column; gap: 16px; }

.kg-hero__index-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kg-muted);
}

/* --------------------------------------------------------------------------
   6. Outcome index grid
   -------------------------------------------------------------------------- */

.kg-index {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 1px;
  background: var(--kg-line);
  border: 1px solid var(--kg-line);
}

.kg-index__link {
  background: var(--kg-white);
  padding: 15px 18px;
  display: flex;
  gap: 14px;
  align-items: baseline;
  color: var(--kg-ink);
  text-decoration: none;
}
.kg-index__link:hover {
  background: var(--kg-ink);
  color: var(--kg-white);
  text-decoration: none;
}

.kg-index__num {
  flex: none;
  width: 22px;
  font-family: Impact, sans-serif;
  font-size: 18px;
  color: var(--kg-pink);
}

.kg-index__text { font-size: 13px; line-height: 1.35; }

/* --------------------------------------------------------------------------
   7. Outcome opener
   -------------------------------------------------------------------------- */

.kg-outcome {
  scroll-margin-top: 70px;
  border-top: 1px solid var(--kg-line);
}

/* Outcome 1 opens the sequence and carries its own measure. */
.kg-outcome-lead {
  scroll-margin-top: 70px;
  max-width: var(--kg-max);
  margin: 0 auto;
  padding: clamp(56px, 4vw, 120px) var(--kg-gutter) clamp(36px, 6vw, 64px);
}

.kg-outcome__inner {
  max-width: var(--kg-max);
  margin: 0 auto;
  padding: clamp(52px, 4vw, 110px) var(--kg-gutter) clamp(36px, 6vw, 64px);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3.4vw, 34px);
}

.kg-outcome__head {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.6vw, 26px);
}
.kg-outcome__head--lead { gap: clamp(18px, 3vw, 30px); }

.kg-outcome__label { display: flex; align-items: stretch; gap: 16px; }

.kg-outcome__badge {
  flex: none;
  background: var(--kg-pink);
  color: var(--kg-white);
  padding: 9px clamp(12px, 1.8vw, 18px) 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.kg-outcome__badge-word {
  font-size: clamp(8.5px, 1.05vw, 10px);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.kg-outcome__badge-rule {
  display: block;
  align-self: stretch;
  height: 1px;
  background: var(--kg-white);
}

.kg-outcome__badge-num {
  font-family: var(--kg-display);
  font-size: clamp(32px, 4.8vw, 48px);
  line-height: 1;
}

.kg-outcome__name {
  align-self: center;
  font-size: clamp(14px, 1.9vw, 21px);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kg-pink);
  text-wrap: balance;
}

.kg-outcome__title {
  margin: 0;
  font-family: var(--kg-display);
  font-weight: 400;
  font-size: clamp(32px, 6vw, 48px) !important;
  line-height: 0.99;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.kg-outcome__title--lead {
  font-size: clamp(38px, 7.4vw, 82px);
  line-height: 0.98;
}

.kg-outcome__lede {
  margin: 0;
  font-family: var(--kg-serif);
  font-size: clamp(16px, 2.1vw, 22px);
  line-height: 1.45;
  color: var(--kg-body);
  max-width: 30em;
  text-wrap: pretty;
}
.kg-outcome__lede--lead { font-size: clamp(17px, 2.2vw, 23px); }

/* --------------------------------------------------------------------------
   8. Summary pair
   -------------------------------------------------------------------------- */

.kg-summary-section {
  max-width: var(--kg-max);
  margin: 0 auto;
  padding: 0 var(--kg-gutter) clamp(48px, 8vw, 88px);
}

.kg-summary {
  border-left: 3px solid var(--kg-pink);
  padding: 2px 0 2px clamp(18px, 3vw, 28px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(20px, 3.5vw, 44px);
}

.kg-summary__col { display: flex; flex-direction: column; gap: 10px; }

.kg-summary__label {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kg-ink);
}

.kg-summary__text {
  margin: 0;
  font-size: clamp(13.5px, 1.6vw, 15.5px);
  line-height: 1.6;
  color: var(--kg-body);
  text-wrap: pretty;
}

.kg-strong { color: var(--kg-ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   9. Data panels
   -------------------------------------------------------------------------- */

.kg-panel {
  border-top: 1px solid var(--kg-line);
  border-bottom: 1px solid var(--kg-line);
  background: var(--kg-white);
}
.kg-panel--open { border-bottom: 0; }

.kg-panel__inner {
  max-width: var(--kg-max);
  margin: 0 auto;
  padding: clamp(44px, 4vw, 88px) var(--kg-gutter);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 5vw, 48px);
}
.kg-panel__inner--lead {
  padding: clamp(48px, 4vw, 96px) var(--kg-gutter);
  gap: clamp(28px, 5vw, 52px);
}
.kg-panel__inner--wide { padding: clamp(48px, 4vw, 100px) var(--kg-gutter); }

.kg-panel__head { display: flex; flex-direction: column; gap: 10px; }

.kg-panel__title {
  margin: 0;
  font-family: var(--kg-display);
  font-weight: 400;
  font-size: clamp(26px, 3.6vw, 40px) !important;
  line-height: 1.06;
}

/* --------------------------------------------------------------------------
   10. Horizontal bar charts
   -------------------------------------------------------------------------- */

.kg-chart { display: flex; flex-direction: column; gap: 14px; }

.kg-chart__eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kg-muted);
}

.kg-chart__title { font-size: 20px; font-weight: 600; color: var(--kg-ink); }

.kg-chart__sub {
  display: block;
  font-weight: 400;
  font-size: 18px;
  color: var(--kg-muted);
  margin-top: 3px;
}

.kg-chart__rows {
  display: flex;
  flex-direction: column;
  gap: clamp(11px, 1.6vw, 16px);
}

.kg-row { display: flex; flex-direction: column; gap: 6px; }

.kg-row__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.kg-row__label { font-size: clamp(11.5px, 1.4vw, 13.5px); color: var(--kg-body); }

.kg-row__val {
  font-family: var(--kg-display);
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1;
}
.kg-row__val--big { font-size: clamp(24px, 3.6vw, 40px); }
.kg-row__val--muted { color: var(--kg-muted); }
.kg-row__val--ink { color: var(--kg-ink); }
.kg-row__val--pink { color: var(--kg-pink); }

.kg-bar-track {
  height: clamp(11px, 1.5vw, 15px);
  background: var(--kg-track);
}
.kg-bar-track--tall { height: 14px; }

/* Fill widths are written inline by the component script on reveal. */
.kg-bar {
  height: 100%;
  width: 0%;
  transition: width 1.2s var(--kg-ease);
}
.kg-bar--grey { background: var(--kg-grey); }
.kg-bar--ink { background: var(--kg-ink); }
.kg-bar--pink { background: var(--kg-pink); }

/* --------------------------------------------------------------------------
   11. Column charts
   -------------------------------------------------------------------------- */

.kg-colchart { display: flex; flex-direction: column; gap: 12px; }

.kg-cols { display: flex; align-items: flex-end; gap: clamp(24px, 6vw, 72px); }

.kg-cols__col {
  flex: 1;
  min-width: 0;
  padding-top: clamp(40px, 7vw, 88px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
}
.kg-cols__col--tall { padding-top: clamp(46px, 8.5vw, 104px); }

.kg-cols__plot {
  flex: none;
  height: clamp(150px, 24vw, 240px);
  display: flex;
  align-items: flex-end;
}
.kg-cols__plot--tall { height: clamp(170px, 28vw, 280px); }

/* Column heights are written inline by the component script on reveal. */
.kg-col {
  position: relative;
  flex: none;
  width: 100%;
  height: 0%;
  transition: height 1.3s var(--kg-ease);
}
.kg-col--grey { background: var(--kg-grey); }
.kg-col--pink { background: var(--kg-pink); }

.kg-col__val {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 10px);
  font-family: var(--kg-display);
  line-height: 1;
}
.kg-col__val--base { font-size: clamp(22px, 3.4vw, 38px); color: var(--kg-muted); }
.kg-col__val--peak { font-size: clamp(34px, 6vw, 74px); color: var(--kg-pink); }
.kg-col__val--base-xl { font-size: clamp(26px, 4vw, 44px); color: var(--kg-muted); }
.kg-col__val--peak-xl { font-size: clamp(44px, 8vw, 92px); color: var(--kg-pink); }

.kg-cols__caption {
  flex: none;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kg-muted);
}
.kg-cols__caption--pink { color: var(--kg-pink); }

/* --------------------------------------------------------------------------
   12. Meters and standout figure
   -------------------------------------------------------------------------- */

.kg-meters { display: flex; flex-direction: column; gap: clamp(22px, 3.5vw, 36px); }

.kg-meter { display: flex; flex-direction: column; gap: 12px; }

.kg-meter__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.kg-meter__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kg-muted);
}

.kg-meter__val {
  font-family: var(--kg-display);
  font-size: clamp(24px, 3.4vw, 38px);
}
.kg-meter__val--pink { color: var(--kg-pink); }
.kg-meter__val--ink { color: var(--kg-ink); }

.kg-standout {
  border-top: 2px solid var(--kg-pink);
  padding-top: 16px;
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}

.kg-standout__num {
  font-family: var(--kg-display);
  font-size: clamp(40px, 7vw, 76px);
  line-height: 1;
  color: var(--kg-pink);
}

.kg-standout__text {
  font-family: var(--kg-serif);
  font-size: clamp(16px, 2vw, 21px);
  line-height: 1.4;
  color: var(--kg-ink);
}

/* --------------------------------------------------------------------------
   13. Comparison table
   -------------------------------------------------------------------------- */

.kg-table { display: flex; flex-direction: column; gap: 0; }

.kg-table__caption { padding-bottom: 12px; }

.kg-table__head {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0 clamp(16px, 3vw, 34px);
  padding: 9px 0;
  border-top: 2px solid var(--kg-ink);
  border-bottom: 1px solid var(--kg-line-strong);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kg-muted);
}

.kg-table__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0 clamp(16px, 3vw, 34px);
  padding: 11px 0;
  border-bottom: 1px solid var(--kg-line);
  font-size: clamp(12px, 1.5vw, 14px);
  color: var(--kg-body);
}

.kg-table__cell { text-align: right; min-width: 58px; }

.kg-table__val {
  font-family: var(--kg-display);
  font-weight: 400;
  font-size: clamp(15px, 1.9vw, 20px);
}
.kg-table__val--pink { color: var(--kg-pink); }
.kg-table__val--muted { color: var(--kg-muted); }

/* --------------------------------------------------------------------------
   14. Bullet lists and note cards
   -------------------------------------------------------------------------- */

.kg-list-section__inner {
  max-width: var(--kg-max);
  margin: 0 auto;
  padding: clamp(48px, 4vw, 100px) var(--kg-gutter);
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 4vw, 40px);
}

.kg-list { display: flex; flex-direction: column; gap: 9px; }

.kg-list__item { display: flex; gap: 13px; align-items: baseline; }

.kg-list__dot {
  flex: none;
  width: 5px;
  height: 5px;
  background: var(--kg-pink);
  margin-top: 8px;
}

.kg-list__text {
  font-size: clamp(14px, 1.7vw, 17px);
  line-height: 1.45;
  color: var(--kg-ink);
}
.kg-list__text--sm { font-size: clamp(13.5px, 1.6vw, 16px); }
.kg-list__text--sm-loose { font-size: clamp(13.5px, 1.6vw, 16px); line-height: 1.5; }

.kg-cards { display: flex; flex-direction: column; gap: 13px; }

.kg-cards__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 1px;
  background: var(--kg-line);
  border: 1px solid var(--kg-line);
}

.kg-card {
  background: var(--kg-cream);
  padding: 16px 18px;
  font-size: clamp(12.5px, 1.5vw, 14.5px);
  line-height: 1.45;
  color: var(--kg-ink);
}

.kg-card__name { font-weight: 600; }

/* --------------------------------------------------------------------------
   15. Body copy
   -------------------------------------------------------------------------- */

.kg-subhead {
  margin: 0;
  font-size: clamp(15px, 1.9vw, 18px);
  font-weight: 600;
  line-height: 1.3;
}

.kg-text {
  margin: 0;
  font-size: clamp(13px, 1.5vw, 15px);
  line-height: 1.6;
  color: var(--kg-body);
  text-wrap: pretty;
}
.kg-text--ruled { border-top: 1px solid var(--kg-line); padding-top: 16px; }
.kg-text--ruled-below {
  border-bottom: 1px solid var(--kg-line);
  padding-bottom: clamp(20px, 3.5vw, 32px);
}
.kg-text--serif { font-family: var(--kg-serif); color: var(--kg-muted); }

.kg-source {
  margin: 14px 0 0;
  font-family: var(--kg-serif);
  font-size: clamp(13px, 1.5vw, 15px);
  line-height: 1.55;
  color: var(--kg-muted);
  text-wrap: pretty;
}

.kg-pullquote {
  margin: 0;
  border-left: 3px solid var(--kg-pink);
  padding-left: clamp(16px, 2.6vw, 24px);
  max-width: 40em;
  font-family: var(--kg-serif);
  font-style: italic;
  font-size: clamp(15px, 1.9vw, 19px);
  line-height: 1.45;
  color: var(--kg-ink);
  text-wrap: pretty;
}

.kg-section-title {
  margin: 0;
  font-family: var(--kg-display);
  font-weight: 400;
  font-size: clamp(24px, 3.4vw, 38px) !important;
  line-height: 1.06;
}

/* --------------------------------------------------------------------------
   16. Dark pull quotes
   -------------------------------------------------------------------------- */

.kg-quote { background: var(--kg-ink); color: var(--kg-paper); }

.kg-quote__inner {
  max-width: var(--kg-max);
  margin: 0 auto;
  padding: clamp(56px, 4vw, 112px) var(--kg-gutter);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.kg-quote__inner--sm {
  padding: clamp(48px, 8vw, 92px) var(--kg-gutter);
  gap: 18px;
}

.kg-quote__text {
  margin: 0;
  font-family: var(--kg-serif);
  font-style: italic;
  font-size: clamp(24px, 4.6vw, 52px);
  line-height: 1.22;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.kg-quote__text--sm { font-size: clamp(22px, 4vw, 44px); line-height: 1.24; }

.kg-quote__cite {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kg-muted-soft);
}

/* --------------------------------------------------------------------------
   17. "How Kagan achieves these results"
   -------------------------------------------------------------------------- */

.kg-how { background: var(--kg-pink-bg); border-top: 1px solid var(--kg-pink-line); }

.kg-how__inner {
  max-width: var(--kg-max);
  margin: 0 auto;
  padding: clamp(44px, 4vw, 88px) var(--kg-gutter);
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 3.6vw, 36px);
}

.kg-how__title {
  margin: 0;
  font-family: var(--kg-display);
  font-weight: 400;
  font-size: clamp(22px, 3.2vw, 36px);
  line-height: 1.06;
}

.kg-how__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: clamp(18px, 3vw, 32px);
}

.kg-how__item { display: flex; flex-direction: column; gap: 11px; }

.kg-rule { height: 3px; background: var(--kg-pink); width: 36px; }

/* --------------------------------------------------------------------------
   18. Closing call to action
   -------------------------------------------------------------------------- */

.kg-cta__inner {
  max-width: var(--kg-max);
  margin: 0 auto;
  padding: clamp(48px, 4vw, 100px) var(--kg-gutter) clamp(60px, 10vw, 120px);
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 4vw, 40px);
}

.kg-cta__head { display: flex; flex-direction: column; gap: 14px; }

.kg-cta__eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kg-pink);
}

.kg-cta__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.kg-btn {
  padding: 15px 28px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}

.kg-btn--pink { background: var(--kg-pink); color: var(--kg-white) !important; }
.kg-btn--pink:hover {
  background: var(--kg-pink-dark);
  color: var(--kg-white);
  text-decoration: none;
}

.kg-btn--ghost { border: 1px solid var(--kg-line-strong); color: var(--kg-ink); }
.kg-btn--ghost:hover {
  border-color: var(--kg-ink);
  color: var(--kg-ink);
  text-decoration: none;
}

.kg-cta__footer { border-top: 1px solid var(--kg-line); padding-top: 20px; }

.kg-cta__footer-text {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--kg-muted);
}

.kg-cta__footer-link { color: var(--kg-pink-dark); }

/* --------------------------------------------------------------------------
   19. Utilities — keep last so they win over component rules
   -------------------------------------------------------------------------- */

.kg-mw22 { max-width: 22em; }
.kg-mw24 { max-width: 24em; }
.kg-mw26 { max-width: 26em; }
.kg-mw34 { max-width: 34em; }
.kg-mw44 { max-width: 44em; }
.kg-mw46 { max-width: 46em; }

.kg-t8 { transition-duration: 0.8s; }

.kg-d05 { transition-delay: 0.05s; }
.kg-d06 { transition-delay: 0.06s; }
.kg-d08 { transition-delay: 0.08s; }
.kg-d09 { transition-delay: 0.09s; }
.kg-d10 { transition-delay: 0.1s; }
.kg-d12 { transition-delay: 0.12s; }
.kg-d15 { transition-delay: 0.15s; }
.kg-d18 { transition-delay: 0.18s; }
.kg-d27 { transition-delay: 0.27s; }
.kg-d36 { transition-delay: 0.36s; }
.kg-d45 { transition-delay: 0.45s; }