/* ════════════════════════════════════════════════════════════════════════════
   KanaStudio Blog Blocks — ks-blocks.css
   Sharp. Flat. Signal terracotta accent. Fraunces + JetBrains Mono type.
   No border-radius. All colours from --ks-* CSS variables.
════════════════════════════════════════════════════════════════════════════ */

/* ── Shared helpers ─────────────────────────────────────────────────────── */
.ks-block-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════════════════
   1. CALLOUT
══════════════════════════════════════════════════════════════════════════ */
.ks-callout {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 0 0.875rem;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--ks-line, #e8e6e0);
  border-left-width: 3px;
  background: var(--ks-canvas-alt, #f2efe8);
  margin: 1.75rem 0;
}
.ks-callout--note    { border-left-color: #4a7ee0; }
.ks-callout--tip     { border-left-color: #27a05a; }
.ks-callout--warning { border-left-color: #d48a0a; }
.ks-callout--info    { border-left-color: var(--ks-signal, #c0593b); }

.ks-callout__icon { padding-top: 1px; }
.ks-callout--note    .ks-callout__icon { color: #4a7ee0; }
.ks-callout--tip     .ks-callout__icon { color: #27a05a; }
.ks-callout--warning .ks-callout__icon { color: #d48a0a; }
.ks-callout--info    .ks-callout__icon { color: var(--ks-signal, #c0593b); }

.ks-callout__heading {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0.375rem;
  color: var(--ks-ink, #1a1917);
}
.ks-callout__body { font-size: 0.9375rem; line-height: 1.65; color: var(--ks-ink, #1a1917); }
.ks-callout__body p:first-child { margin-top: 0; }
.ks-callout__body p:last-child  { margin-bottom: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   2. ACCORDION
══════════════════════════════════════════════════════════════════════════ */
.ks-accordion { margin: 1.75rem 0; border-top: 1px solid var(--ks-line, #e8e6e0); }
.ks-accordion__item { border-bottom: 1px solid var(--ks-line, #e8e6e0); }

.ks-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.ks-accordion__summary::-webkit-details-marker { display: none; }

.ks-accordion__title {
  font-family: 'Fraunces', serif;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ks-ink, #1a1917);
}
.ks-accordion__item[open] .ks-accordion__title { color: var(--ks-signal, #c0593b); }

.ks-accordion__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  color: var(--ks-ink-muted, #8a8a87);
  transition: color 0.2s;
}
/* Plus/minus crosshair icon */
.ks-accordion__icon::before,
.ks-accordion__icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.ks-accordion__icon::before { top: 50%; left: 2px; right: 2px; height: 1.5px; transform: translateY(-50%); }
.ks-accordion__icon::after  { left: 50%; top: 2px; bottom: 2px; width: 1.5px; transform: translateX(-50%); }
.ks-accordion__item[open] .ks-accordion__icon { color: var(--ks-signal, #c0593b); }
.ks-accordion__item[open] .ks-accordion__icon::after { opacity: 0; transform: translateX(-50%) scaleY(0); }

.ks-accordion__body {
  padding: 0.25rem 0 1.25rem;
  font-size: 0.9375rem;
  color: var(--ks-ink, #1a1917);
  line-height: 1.68;
}
.ks-accordion__body > *:first-child { margin-top: 0; }
.ks-accordion__body > *:last-child  { margin-bottom: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   3. TABS
══════════════════════════════════════════════════════════════════════════ */
.ks-tabs { margin: 1.75rem 0; }

.ks-tabs__nav {
  display: flex;
  border-bottom: 1px solid var(--ks-line, #e8e6e0);
  overflow-x: auto;
  scrollbar-width: none;
}
.ks-tabs__nav::-webkit-scrollbar { display: none; }

.ks-tabs__btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.75rem 1.125rem;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--ks-ink-muted, #8a8a87);
  cursor: pointer;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.ks-tabs__btn:hover  { color: var(--ks-ink, #1a1917); }
.ks-tabs__btn.is-active {
  color: var(--ks-signal, #c0593b);
  border-bottom-color: var(--ks-signal, #c0593b);
  font-weight: 700;
}

.ks-tabs__panels { border: 1px solid var(--ks-line, #e8e6e0); border-top: none; }
.ks-tabs__panel {
  display: none;
  padding: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.68;
  color: var(--ks-ink, #1a1917);
}
.ks-tabs__panel.is-active { display: block; }
.ks-tabs__panel > *:first-child { margin-top: 0; }
.ks-tabs__panel > *:last-child  { margin-bottom: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   4. PULL QUOTE
══════════════════════════════════════════════════════════════════════════ */
.ks-pull-quote {
  margin: 2.5rem 0;
  padding: 1.5rem 1.75rem 1.5rem 2rem;
  border-left: 3px solid var(--ks-signal, #c0593b);
  background: var(--ks-canvas-alt, #f2efe8);
  position: relative;
  overflow: hidden;
}
.ks-pull-quote::before {
  content: '\201C';
  font-family: 'Fraunces', serif;
  font-size: 7rem;
  line-height: 1;
  color: var(--ks-signal, #c0593b);
  opacity: 0.12;
  position: absolute;
  top: -0.75rem;
  left: 0.75rem;
  pointer-events: none;
  user-select: none;
}
.ks-pull-quote__text {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.48;
  color: var(--ks-ink, #1a1917);
  margin: 0 0 0.875rem;
}
.ks-pull-quote__attribution {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ks-ink-muted, #8a8a87);
}

/* ══════════════════════════════════════════════════════════════════════════
   5. WIDE IMAGE
══════════════════════════════════════════════════════════════════════════ */
.ks-wide-image { margin: 2rem -3rem; display: block; }
.ks-wide-image img { width: 100%; height: auto; display: block; }
.ks-wide-image__caption {
  display: block;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--ks-ink-muted, #8a8a87);
  margin-top: 0.625rem;
}
@media (max-width: 900px) { .ks-wide-image { margin-inline: -2.5vw; } }

/* ══════════════════════════════════════════════════════════════════════════
   NEW BLOCKS
══════════════════════════════════════════════════════════════════════════ */

/* ── Score helper ─────────────────────────────────────────────────────────
   .ks-s-excellent  8–10/10   green
   .ks-s-good       6–7.9/10  blue
   .ks-s-average    4–5.9/10  amber
   .ks-s-poor       0–3.9/10  red
──────────────────────────────────────────────────────────────────────── */
.ks-s-excellent { color: #1f9b57 !important; }
.ks-s-good      { color: #2f6fd4 !important; }
.ks-s-average   { color: #c47e0a !important; }
.ks-s-poor      { color: #c0392b !important; }

/* ══════════════════════════════════════════════════════════════════════════
   6. SCORE BADGE  (ks/score)
   Inline score display — can sit in text or as a standalone badge.
══════════════════════════════════════════════════════════════════════════ */
.ks-score {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 1rem 1.5rem;
  border: 1px solid var(--ks-line, #e8e6e0);
  background: var(--ks-canvas-alt, #f2efe8);
  margin: 1.25rem 0;
  min-width: 100px;
  text-align: center;
}
.ks-score__number {
  font-family: 'JetBrains Mono', monospace;
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1;
}
.ks-score__denom {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.875rem;
  color: var(--ks-ink-muted, #8a8a87);
  line-height: 1;
}
.ks-score__bar {
  width: 60px;
  height: 2px;
  background: var(--ks-line, #e8e6e0);
  position: relative;
  overflow: hidden;
  margin-top: 0.25rem;
}
.ks-score__fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--ks-signal, #c0593b);
}
.ks-score__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ks-ink-muted, #8a8a87);
}

/* ══════════════════════════════════════════════════════════════════════════
   7. PROS & CONS  (ks/pros-cons)
══════════════════════════════════════════════════════════════════════════ */
.ks-pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--ks-line, #e8e6e0);
  margin: 1.75rem 0;
}
.ks-pros-cons__col { padding: 1.125rem 1.25rem; }
.ks-pros-cons__col--pros { border-right: 1px solid var(--ks-line, #e8e6e0); }

.ks-pros-cons__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0.75rem;
  display: block;
}
.ks-pros-cons__col--pros .ks-pros-cons__label { color: #1f9b57; }
.ks-pros-cons__col--cons .ks-pros-cons__label { color: #c0392b; }

.ks-pros-cons__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.ks-pros-cons__item {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ks-ink, #1a1917);
}
.ks-pros-cons__item::before {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 0.875rem;
  flex-shrink: 0;
  margin-top: 0.05em;
}
.ks-pros-cons__col--pros .ks-pros-cons__item::before { content: '+'; color: #1f9b57; }
.ks-pros-cons__col--cons .ks-pros-cons__item::before { content: '−'; color: #c0392b; }

@media (max-width: 540px) {
  .ks-pros-cons { grid-template-columns: 1fr; }
  .ks-pros-cons__col--pros { border-right: none; border-bottom: 1px solid var(--ks-line, #e8e6e0); }
}

/* ══════════════════════════════════════════════════════════════════════════
   8. RATING CARD  (ks/rating-card)
   Full app / product review: icon, name, score, desc, pros/cons, meta, link.
══════════════════════════════════════════════════════════════════════════ */
.ks-rating-card { border: 1px solid var(--ks-line, #e8e6e0); margin: 2rem 0; }

.ks-rating-card__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
  border-bottom: 1px solid var(--ks-line, #e8e6e0);
}
.ks-rating-card__icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border: 1px solid var(--ks-line, #e8e6e0);
  flex-shrink: 0;
  display: block;
}
.ks-rating-card__icon-ph {
  width: 48px;
  height: 48px;
  background: var(--ks-canvas-alt, #f2efe8);
  border: 1px solid var(--ks-line, #e8e6e0);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ks-signal, #c0593b);
}
.ks-rating-card__title-wrap { flex: 1; min-width: 0; }
.ks-rating-card__name {
  font-family: 'Fraunces', serif;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.125rem;
  color: var(--ks-ink, #1a1917);
}
.ks-rating-card__tagline {
  font-size: 0.875rem;
  color: var(--ks-ink-muted, #8a8a87);
  margin: 0;
  line-height: 1.4;
}
.ks-rating-card__badge {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.ks-rating-card__score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}
.ks-rating-card__score-denom {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--ks-ink-muted, #8a8a87);
}

.ks-rating-card__desc {
  padding: 1.125rem 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.68;
  border-bottom: 1px solid var(--ks-line, #e8e6e0);
  color: var(--ks-ink, #1a1917);
}
.ks-rating-card__desc > *:last-child { margin-bottom: 0; }

.ks-rating-card__pc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--ks-line, #e8e6e0);
}
.ks-rating-card__pc-col { padding: 1rem 1.25rem; }
.ks-rating-card__pc-col:first-child { border-right: 1px solid var(--ks-line, #e8e6e0); }
.ks-rating-card__pc-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0.625rem;
  display: block;
}
.ks-rating-card__pc-col:first-child  .ks-rating-card__pc-label { color: #1f9b57; }
.ks-rating-card__pc-col:last-child   .ks-rating-card__pc-label { color: #c0392b; }
.ks-rating-card__pc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.ks-rating-card__pc-item {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ks-ink, #1a1917);
}
.ks-rating-card__pc-item::before { font-family: 'JetBrains Mono', monospace; font-weight: 700; flex-shrink: 0; }
.ks-rating-card__pc-col:first-child .ks-rating-card__pc-item::before { content: '+'; color: #1f9b57; }
.ks-rating-card__pc-col:last-child  .ks-rating-card__pc-item::before { content: '−'; color: #c0392b; }

.ks-rating-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1.25rem;
  background: var(--ks-canvas-alt, #f2efe8);
  flex-wrap: wrap;
}
.ks-rating-card__meta { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.ks-rating-card__meta-item {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
}
.ks-rating-card__meta-key { color: var(--ks-ink-muted, #8a8a87); }
.ks-rating-card__meta-val { color: var(--ks-ink, #1a1917); font-weight: 600; }
.ks-rating-card__link {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ks-signal, #c0593b);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  white-space: nowrap;
}
.ks-rating-card__link:hover { opacity: 0.75; }

@media (max-width: 540px) {
  .ks-rating-card__pc { grid-template-columns: 1fr; }
  .ks-rating-card__pc-col:first-child { border-right: none; border-bottom: 1px solid var(--ks-line, #e8e6e0); }
}

/* ══════════════════════════════════════════════════════════════════════════
   9. VERDICT BOX  (ks/verdict)
══════════════════════════════════════════════════════════════════════════ */
.ks-verdict { border: 2px solid var(--ks-signal, #c0593b); margin: 2rem 0; }

.ks-verdict__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1.25rem;
  background: var(--ks-signal, #c0593b);
  color: #fff;
}
.ks-verdict__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
}
.ks-verdict__score-wrap {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}
.ks-verdict__score-denom { font-size: 0.75em; opacity: 0.75; }

.ks-verdict__body { padding: 1.25rem; }
.ks-verdict__summary {
  font-family: 'Fraunces', serif;
  font-size: 1.125rem;
  font-style: italic;
  line-height: 1.5;
  margin: 0 0 1rem;
  color: var(--ks-ink, #1a1917);
}

.ks-verdict__meta { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.ks-verdict__meta-item {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
}
.ks-verdict__meta-key { color: var(--ks-ink-muted, #8a8a87); margin-right: 0.25rem; }
.ks-verdict__meta-val { color: var(--ks-ink, #1a1917); font-weight: 600; }

.ks-verdict__rec {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.625rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}
.ks-verdict__rec--buy  { background: #1f9b57; color: #fff; }
.ks-verdict__rec--try  { background: #2f6fd4; color: #fff; }
.ks-verdict__rec--wait { background: #c47e0a; color: #fff; }
.ks-verdict__rec--skip { background: #c0392b; color: #fff; }

/* ══════════════════════════════════════════════════════════════════════════
   10. RANKED LIST  (ks/ranked-list)
   For "Top 10 apps", "Best X tools", etc.
══════════════════════════════════════════════════════════════════════════ */
.ks-ranked-list { margin: 1.75rem 0; }
.ks-ranked-item {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  gap: 0 1.25rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--ks-line, #e8e6e0);
  align-items: start;
}
.ks-ranked-item:first-child { border-top: 1px solid var(--ks-line, #e8e6e0); }

.ks-ranked-item__num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 2rem;
  font-weight: 700;
  color: var(--ks-signal, #c0593b);
  line-height: 1;
  padding-top: 0.125rem;
  opacity: 0.4;
}
.ks-ranked-item:first-child .ks-ranked-item__num { opacity: 1; font-size: 2.5rem; }
.ks-ranked-item:nth-child(2) .ks-ranked-item__num { opacity: 0.7; }
.ks-ranked-item:nth-child(3) .ks-ranked-item__num { opacity: 0.55; }

.ks-ranked-item__name {
  font-family: 'Fraunces', serif;
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
  color: var(--ks-ink, #1a1917);
  line-height: 1.3;
}
.ks-ranked-item__desc {
  font-size: 0.9rem;
  color: var(--ks-ink-muted, #8a8a87);
  line-height: 1.5;
  margin: 0 0 0.5rem;
}
.ks-ranked-item__link {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ks-signal, #c0593b);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  display: inline-block;
}
.ks-ranked-item__score-wrap {
  text-align: center;
  flex-shrink: 0;
  min-width: 48px;
}
.ks-ranked-item__score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  display: block;
}
.ks-ranked-item__score-max {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  color: var(--ks-ink-muted, #8a8a87);
  display: block;
}

@media (max-width: 480px) {
  .ks-ranked-item { grid-template-columns: 2.5rem 1fr; }
  .ks-ranked-item__score-wrap { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   11. COMPARISON TABLE  (ks/compare-table)
══════════════════════════════════════════════════════════════════════════ */
.ks-compare { margin: 1.75rem 0; overflow-x: auto; }
.ks-compare table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  border: 1px solid var(--ks-line, #e8e6e0);
}
.ks-compare thead th {
  padding: 0.625rem 1rem;
  text-align: left;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  background: var(--ks-ink, #1a1917);
  color: #fff;
  border: 1px solid var(--ks-ink, #1a1917);
  white-space: nowrap;
}
.ks-compare thead th:first-child {
  background: var(--ks-signal, #c0593b);
  border-color: var(--ks-signal, #c0593b);
}
.ks-compare tbody td {
  padding: 0.625rem 1rem;
  border: 1px solid var(--ks-line, #e8e6e0);
  line-height: 1.45;
  vertical-align: middle;
  color: var(--ks-ink, #1a1917);
}
.ks-compare tbody tr:nth-child(even) td { background: var(--ks-canvas-alt, #f2efe8); }
.ks-compare tbody td:first-child {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--ks-canvas, #f9f8f5);
}
.ks-compare tbody tr:nth-child(even) td:first-child { background: var(--ks-canvas-alt, #f2efe8); }
.ks-compare .ks-yes { color: #1f9b57; font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.ks-compare .ks-no  { color: #c0392b; font-weight: 700; font-family: 'JetBrains Mono', monospace; }

/* ══════════════════════════════════════════════════════════════════════════
   12. KEY TAKEAWAY  (ks/key-takeaway)
══════════════════════════════════════════════════════════════════════════ */
.ks-key-takeaway {
  border-left: 3px solid var(--ks-signal, #c0593b);
  padding: 1.125rem 1.5rem;
  background: var(--ks-canvas-alt, #f2efe8);
  margin: 1.75rem 0;
}
.ks-key-takeaway__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ks-signal, #c0593b);
  margin-bottom: 0.5rem;
  display: block;
}
.ks-key-takeaway__text {
  font-family: 'Fraunces', serif;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.45;
  margin: 0;
  color: var(--ks-ink, #1a1917);
}

/* ══════════════════════════════════════════════════════════════════════════
   13. STAT HIGHLIGHT  (ks/stat)
   Big number + label — great for article intros and data points.
══════════════════════════════════════════════════════════════════════════ */
.ks-stat {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  padding: 1.25rem 1.75rem;
  border: 1px solid var(--ks-line, #e8e6e0);
  background: var(--ks-canvas-alt, #f2efe8);
  margin: 1.25rem 0;
  min-width: 140px;
  text-align: center;
}
.ks-stat__number {
  font-family: 'JetBrains Mono', monospace;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ks-signal, #c0593b);
}
.ks-stat__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ks-ink-muted, #8a8a87);
  margin-top: 0.25rem;
}
.ks-stat__context {
  font-size: 0.875rem;
  color: var(--ks-ink-muted, #8a8a87);
  margin-top: 0.25rem;
  line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════════════════════
   14. CHECKLIST  (ks/checklist)
══════════════════════════════════════════════════════════════════════════ */
.ks-checklist { border: 1px solid var(--ks-line, #e8e6e0); margin: 1.75rem 0; }
.ks-checklist__title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--ks-line, #e8e6e0);
  background: var(--ks-canvas-alt, #f2efe8);
  color: var(--ks-ink, #1a1917);
}
.ks-checklist__list { list-style: none; margin: 0; padding: 0; }
.ks-checklist__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--ks-line, #e8e6e0);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ks-ink, #1a1917);
}
.ks-checklist__item:last-child { border-bottom: none; }
.ks-checklist__box {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  border: 1.5px solid var(--ks-line, #e8e6e0);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: background 0.15s, border-color 0.15s;
}
.ks-checklist__item--done .ks-checklist__box {
  background: var(--ks-signal, #c0593b);
  border-color: var(--ks-signal, #c0593b);
  color: #fff;
}
.ks-checklist__item--done .ks-checklist__text {
  color: var(--ks-ink-muted, #8a8a87);
  text-decoration: line-through;
  text-decoration-color: var(--ks-ink-muted, #8a8a87);
}

/* ══════════════════════════════════════════════════════════════════════════
   15. APP CARD  (ks/app-card)
   Lightweight card — good for "also see" references inside an article.
══════════════════════════════════════════════════════════════════════════ */
.ks-app-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--ks-line, #e8e6e0);
  margin: 1.25rem 0;
}
.ks-app-card__icon {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border: 1px solid var(--ks-line, #e8e6e0);
  flex-shrink: 0;
  display: block;
}
.ks-app-card__icon-ph {
  width: 52px;
  height: 52px;
  background: var(--ks-canvas-alt, #f2efe8);
  border: 1px solid var(--ks-line, #e8e6e0);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ks-signal, #c0593b);
}
.ks-app-card__body { flex: 1; min-width: 0; }
.ks-app-card__name {
  font-family: 'Fraunces', serif;
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 0 0 0.125rem;
  color: var(--ks-ink, #1a1917);
  line-height: 1.3;
}
.ks-app-card__desc {
  font-size: 0.875rem;
  color: var(--ks-ink-muted, #8a8a87);
  margin: 0 0 0.5rem;
  line-height: 1.5;
}
.ks-app-card__tags { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.ks-app-card__tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--ks-line, #e8e6e0);
  color: var(--ks-ink-muted, #8a8a87);
}
.ks-app-card__right {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}
.ks-app-card__price {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ks-ink, #1a1917);
  white-space: nowrap;
}
.ks-app-card__link {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ks-signal, #c0593b);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  white-space: nowrap;
}
.ks-app-card__link:hover { opacity: 0.75; }

/* ── Mobile safety ────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .ks-callout { grid-template-columns: 18px 1fr; gap: 0 0.625rem; }
  .ks-tabs__btn { padding: 0.625rem 0.75rem; }
  .ks-pull-quote { padding: 1rem 1.25rem 1rem 1.5rem; }
  .ks-wide-image { margin-inline: -2.5vw; }
  .ks-app-card { flex-wrap: wrap; }
  .ks-app-card__right { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
}