/* Editorial story: typography, whitespace, comparison columns and numbered steps. */
.ki-story {
  --ks-accent: var(--ki-theme-primary, #17385c);
  --ks-line: var(--ki-theme-border, #e2e8f0);
  --ks-muted: var(--ki-theme-muted, #64748b);
  display: grid; gap: 36px; min-width: 0; margin: 28px 0 40px;
  color: var(--ki-theme-text, #182433); font-size: 1rem; line-height: 1.85;
  overflow-wrap: anywhere;
}
.ki-story--gold { --ks-accent: #86620d; }
.ki-story *, .ki-story *::before, .ki-story *::after { box-sizing: border-box; }
.ki-story :is(.ki-story__section,.ki-story__prose,.ki-story__option,.ki-story__metric) { min-width: 0; }
.ki-story .ki-story__lead { border-top: 3px solid var(--ks-accent); padding-top: 18px; }
.ki-story .ki-story__eyebrow { margin: 0 0 8px; font-size: .8em; color: var(--ks-accent); font-weight: 700; }
.ki-story .ki-story__title { font-size: clamp(21px, 3vw, 29px); line-height: 1.5; color: var(--ks-accent); }
.ki-story .ki-story__lead > .ki-story__title { font-size: clamp(25px, 4vw, 36px); }
.ki-story .ki-story__prose > :first-child { margin-top: 0; }
.ki-story .ki-story__prose > :last-child { margin-bottom: 0; }
.ki-story .ki-story__prose p { margin: 0 0 1em; font-size: inherit; line-height: inherit; }
.ki-story .ki-story__metrics { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,180px),1fr)); gap: 24px; }
.ki-story .ki-story__metric { padding: 16px 0; border-top: 1px solid var(--ks-line); }
.ki-story .ki-story__metric-label { margin: 0 0 6px; color: var(--ks-muted); font-size: .85em; }
.ki-story .ki-story__value { margin: 0 0 8px; font-size: clamp(28px,5vw,44px); line-height: 1.2; font-weight: 800; color: var(--ks-accent); font-variant-numeric: tabular-nums; }
.ki-story .ki-story__metric .ki-story__prose { font-size: .85em; }
.ki-story .ki-story__compare { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
.ki-story .ki-story__option { padding: 16px 0 0; border-top: 2px solid var(--ks-accent); }
.ki-story :is(.ki-story__option-title,.ki-story__step-title) { font-size: 1.15em; line-height: 1.5; color: var(--ks-accent); }
.ki-story .ki-story__steps { counter-reset: ki-story-step; }
.ki-story .ki-story__step { position: relative; counter-increment: ki-story-step; }
.ki-story .ki-story__step::before {
  content: counter(ki-story-step, decimal-leading-zero); position: absolute;
  left: 0; top: 0; width: 32px; background: #fff; color: var(--ks-accent);
  font-size: 1.05em; font-weight: 800; line-height: 1.6;
}
.ki-story .ki-story__step:not(:last-child)::after {
  content: ""; position: absolute; left: 15px; top: 36px; bottom: 8px; width: 1px; background: var(--ks-line);
}
.ki-story .ki-story__note { border-top: 1px solid var(--ks-line); padding-top: 16px; color: var(--ks-muted); font-size: .85em; }
.ki-story .ki-story__note .ki-story__title { font-size: 1em; }
.ki-story a { color: var(--ks-accent); text-decoration: underline; text-underline-offset: 3px; }
.ki-story a:focus-visible { outline: 2px solid var(--ks-accent); outline-offset: 3px; }
@media (max-width: 600px) {
  .ki-story { gap: 28px; }
  .ki-story .ki-story__compare { grid-template-columns: minmax(0,1fr); gap: 20px; }
}