/* =============================================================================
   Long-form content / prose — Pages, post fallback, research articles.
   Scoped to .ki-prose so it never touches home/product/global chrome.
   Manrope body, 760px measure, 1.75 line-height, teal links, tonal blocks.
   ========================================================================== */

.ki-prose {
  max-width: 760px;
  margin-inline: auto;
  font-family: var(--ki-font-display);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ki-on-surface);
}

/* Rhythm — generous vertical spacing between blocks */
.ki-prose > * + * { margin-top: 1.5rem; }

.ki-prose p { margin: 0; }

/* Headings — Manrope, tighter line-height, clear hierarchy + breathing room */
.ki-prose h2,
.ki-prose h3,
.ki-prose h4 {
  font-family: var(--ki-font-display);
  color: var(--ki-on-surface);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.ki-prose h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 300;
  margin-top: 3rem;
  padding-top: 0.25rem;
}
.ki-prose h3 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 500;
  margin-top: 2.5rem;
}
.ki-prose h4 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-top: 2rem;
}
.ki-prose h2:first-child,
.ki-prose h3:first-child { margin-top: 0; }

/* Links — teal, underlined on hover, accessible */
.ki-prose a {
  color: var(--ki-secondary);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 104, 119, 0.3);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.ki-prose a:hover {
  color: var(--ki-primary);
  border-bottom-color: currentColor;
}

/* Emphasis */
.ki-prose strong { font-weight: 600; color: var(--ki-on-surface); }
.ki-prose em { font-style: italic; }

/* Lists */
.ki-prose ul,
.ki-prose ol {
  margin-top: 1.25rem;
  padding-left: 1.4rem;
}
.ki-prose li { margin-top: 0.5rem; }
.ki-prose li > ul,
.ki-prose li > ol { margin-top: 0.5rem; }
.ki-prose ul { list-style: none; padding-left: 1.5rem; }
.ki-prose ul > li { position: relative; }
.ki-prose ul > li::before {
  content: "";
  position: absolute;
  left: -1.25rem;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ki-secondary);
}
.ki-prose ol { list-style: decimal; }
.ki-prose ol > li { padding-left: 0.3rem; }
.ki-prose ol > li::marker {
  font-family: var(--ki-font-label);
  color: var(--ki-gold);
  font-weight: 600;
}

/* Blockquote — teal rule, surface-low tint, no border-box */
.ki-prose blockquote {
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding: 1.25rem 1.5rem;
  background: var(--ki-surface-low);
  border-left: 3px solid var(--ki-secondary);
  border-radius: 0 0.5rem 0.5rem 0;
  font-size: 1.125rem;
  font-weight: 300;
  color: var(--ki-on-surface);
}
.ki-prose blockquote p { margin-top: 0; }
.ki-prose blockquote > * + * { margin-top: 0.75rem; }

/* Inline code + pre */
.ki-prose code {
  font-family: var(--ki-font-label);
  font-size: 0.9em;
  background: var(--ki-surface-low);
  padding: 0.1rem 0.4rem;
  border-radius: 0.3rem;
}
.ki-prose pre {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--ki-surface-inverse);
  color: rgba(255, 255, 255, 0.92);
  border-radius: 0.6rem;
  overflow-x: auto;
  font-size: 0.9375rem;
  line-height: 1.6;
}
.ki-prose pre code { background: transparent; padding: 0; color: inherit; }

/* Tables — hairline rows, mono header, scrollable on small screens */
.ki-prose table {
  width: 100%;
  margin-top: 1.75rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
  display: block;
  overflow-x: auto;
}
.ki-prose thead th {
  font-family: var(--ki-font-label);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ki-on-surface);
  padding: 0.75rem 1rem;
  border-bottom: 2px solid var(--ki-secondary);
  white-space: nowrap;
}
.ki-prose tbody td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(209, 194, 207, 0.4);
  vertical-align: top;
}
.ki-prose tbody tr:last-child td { border-bottom: 0; }

/* Media */
.ki-prose img {
  max-width: 100%;
  height: auto;
  border-radius: 0.6rem;
  margin-top: 1.75rem;
}
.ki-prose figure { margin-top: 1.75rem; }
.ki-prose figcaption {
  margin-top: 0.6rem;
  font-size: 0.875rem;
  color: var(--ki-on-surface-muted);
  text-align: center;
}

/* Horizontal rule — fades to nothing, no hard line */
.ki-prose hr {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(209, 194, 207, 0.6), transparent);
}

/* =============================================================================
   Article / page hero band shared bits
   ========================================================================== */
.ki-content-head { margin-bottom: 0.5rem; }
.ki-content-head .ki-h1,
.ki-content-head .ki-h2 { margin-top: 0.5rem; }
/* Article titles use .ki-h1 (48px floor) — too large at 375; scale the article head down. */
@media (max-width: 749px) {
  .ki-content-head .ki-h1 { font-size: clamp(2.1rem, 9vw, 2.6rem); line-height: 1.12; }
}

.ki-article-meta {
  margin-top: 1rem;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--ki-on-surface-muted);
}

/* Back-to-index link on single research */
.ki-article-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 2.5rem;
  font-family: var(--ki-font-label);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ki-secondary);
  text-decoration: none;
}
.ki-article-back:hover { color: var(--ki-primary); }

/* Research archive — card hero image */
.ki-post-card__media {
  display: block;
  margin-bottom: 1.25rem;
  border-radius: var(--ki-radius-img);
  overflow: hidden;
}
.ki-post-card__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* Research archive card grid + card sub-elements (archive-research.php + index.php).
   These classes had NO CSS — cards stacked full-width with no gap and never went
   multi-column on tablet/desktop. */
.ki-post-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 750px) {
  .ki-post-grid { grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
}
@media (min-width: 1000px) {
  .ki-post-grid { grid-template-columns: repeat(3, 1fr); }
}
.ki-post-card__date {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--ki-on-surface-muted);
}
.ki-readmore {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  margin-top: 1rem;
  font-family: var(--ki-font-label);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ki-secondary);
  text-decoration: none;
}
.ki-readmore:hover { color: var(--ki-primary); }

/* Single research — hero image under the title band */
.ki-article-hero {
  margin-top: 1.75rem;
  border-radius: var(--ki-radius-img);
  overflow: hidden;
}
.ki-article-hero img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* =============================================================================
   Informational page sections — About / Science.
   Ported from the Shopify page templates (ki-page-hero / ki-editorial /
   ki-icon-grid / process). Self-contained in content.css (enqueued on is_page),
   so they don't depend on the front-page-only home.css. Editorial blocks run as
   a magazine split (title rail + body) — the migration carries no editorial
   photos, so the layout is text-forward rather than image+text.
   ========================================================================== */

/* Shared eyebrow (teal, leading dot) + accent bar across page sections */
.ki-page-hero__eyebrow,
.ki-editorial__eyebrow,
.ki-icon-grid__eyebrow,
.ki-page-steps__eyebrow,
.ki-cta-band__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--ki-font-label);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ki-secondary);
  margin: 0 0 1rem;
}
.ki-page-hero__eyebrow::before,
.ki-editorial__eyebrow::before,
.ki-icon-grid__eyebrow::before,
.ki-page-steps__eyebrow::before,
.ki-cta-band__eyebrow::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ki-secondary);
  box-shadow: 0 0 6px rgba(0, 104, 119, 0.8);
  flex-shrink: 0;
}
.ki-cta-band__eyebrow { color: var(--ki-gold); }
.ki-cta-band__eyebrow::before { background: var(--ki-gold); box-shadow: 0 0 6px rgba(217, 119, 6, 0.7); }

.ki-editorial__heading,
.ki-icon-grid__heading,
.ki-page-steps__heading {
  font-family: var(--ki-font-display);
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ki-on-surface);
  margin: 0;
}

/* ── Page hero: heading + subheading, with a right-offset stat cluster ─────── */
.ki-page-hero {
  background: var(--ki-surface-low);
  padding: clamp(4rem, 10vh, 8rem) 0 clamp(3rem, 8vh, 6rem);
  overflow: hidden;
}
.ki-page-hero__container { max-width: var(--ki-container); margin: 0 auto; padding-inline: var(--ki-gutter); }
.ki-page-hero__layout { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 990px) {
  .ki-page-hero__layout { grid-template-columns: 1.1fr 0.9fr; align-items: end; gap: 5rem; }
}
.ki-page-hero__heading {
  font-family: var(--ki-font-display);
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ki-on-surface);
  margin: 0 0 1.5rem;
  max-width: 16ch;
}
.ki-page-hero__subheading {
  font-family: var(--ki-font-display);
  font-weight: 300;
  font-size: clamp(1rem, 1.3vw, 1.1875rem);
  line-height: 1.65;
  color: var(--ki-on-surface-muted);
  max-width: 50ch;
  margin: 0;
}
.ki-page-hero__stats { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 2.5rem); }
@media (min-width: 990px) { .ki-page-hero__stats { justify-content: flex-end; padding-bottom: 0.5rem; } }
.ki-page-hero__stat { display: flex; flex-direction: column; gap: 0.25rem; }
.ki-page-hero__stat-value {
  font-family: var(--ki-font-label);
  font-size: clamp(1.75rem, 2.5vw, 2.25rem);
  font-weight: 700;
  color: var(--ki-secondary);
  line-height: 1;
}
.ki-page-hero__stat-label {
  font-family: var(--ki-font-label);
  font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ki-on-surface-muted);
}

/* ── Editorial: magazine split (title rail + body), alternating tonal bg ───── */
.ki-editorial { background: var(--ki-surface); padding: clamp(3.5rem, 9vh, 7rem) 0; }
.ki-editorial--alt { background: var(--ki-surface-low); }
.ki-editorial__container { max-width: var(--ki-container); margin: 0 auto; padding-inline: var(--ki-gutter); }
.ki-editorial__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 900px) {
  .ki-editorial__grid { grid-template-columns: 0.8fr 1.2fr; gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .ki-editorial__grid--reversed { grid-template-columns: 1.2fr 0.8fr; }
  .ki-editorial__grid--reversed .ki-editorial__head { order: 2; }
  .ki-editorial__head { position: sticky; top: calc(var(--ki-header-h) + 1.5rem); }
}
.ki-editorial__heading { margin-bottom: 1.25rem; }
.ki-editorial__accent-bar { display: flex; gap: 4px; margin: 0; }
.ki-editorial__accent-bar span { height: 3px; border-radius: 2px; background: var(--ki-secondary); }
.ki-editorial__accent-bar span:nth-child(1) { width: 40px; }
.ki-editorial__accent-bar span:nth-child(2) { width: 20px; opacity: 0.6; }
.ki-editorial__accent-bar span:nth-child(3) { width: 10px; opacity: 0.3; }
.ki-editorial__body {
  font-family: var(--ki-font-display);
  font-weight: 300;
  font-size: clamp(1rem, 1.1vw, 1.0625rem);
  line-height: 1.75;
  color: var(--ki-on-surface-muted);
  max-width: 62ch;
}
.ki-editorial__body p { margin: 0 0 1.15em; }
.ki-editorial__body p:last-child { margin-bottom: 0; }
.ki-editorial__body strong { font-weight: 600; color: var(--ki-on-surface); }

/* ── Icon grid: 3-up value/feature cards ──────────────────────────────────── */
.ki-icon-grid { background: var(--ki-surface); padding: clamp(3.5rem, 9vh, 7rem) 0; }
.ki-icon-grid--alt { background: var(--ki-surface-low); }
.ki-icon-grid__container { max-width: var(--ki-container); margin: 0 auto; padding-inline: var(--ki-gutter); }
.ki-icon-grid__header { max-width: 560px; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.ki-icon-grid__grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 750px) {
  .ki-icon-grid__grid { grid-template-columns: repeat(3, 1fr); }
  .ki-icon-grid__item:nth-child(2) { margin-top: 2rem; }
}
.ki-icon-grid__item {
  background: var(--ki-surface-lowest);
  padding: 2.25rem 1.75rem;
  box-shadow: var(--ki-hairline);
  border-radius: var(--ki-radius-card);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ki-icon-grid__item:hover { transform: translateY(-3px); box-shadow: var(--ki-lift); }
.ki-icon-grid__icon-wrap {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 104, 119, 0.07);
  border-radius: 10px;
  color: var(--ki-secondary);
  margin-bottom: 1.5rem;
}
.ki-icon-grid__title {
  font-family: var(--ki-font-label);
  font-size: 1rem; font-weight: 500; letter-spacing: 0.03em;
  color: var(--ki-on-surface);
  margin: 0 0 0.75rem;
}
.ki-icon-grid__text {
  font-family: var(--ki-font-display);
  font-weight: 300; font-size: 0.9375rem; line-height: 1.6;
  color: var(--ki-on-surface-muted);
  margin: 0;
}

/* ── Process: numbered 5-step quality-control sequence ────────────────────── */
.ki-page-steps { background: var(--ki-surface); padding: clamp(3.5rem, 9vh, 7rem) 0; }
.ki-page-steps--alt { background: var(--ki-surface-low); }
.ki-page-steps__container { max-width: var(--ki-container); margin: 0 auto; padding-inline: var(--ki-gutter); }
.ki-page-steps__header { max-width: 640px; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.ki-page-steps__heading { margin-bottom: 1rem; }
.ki-page-steps__sub {
  font-family: var(--ki-font-display);
  font-weight: 300; font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); line-height: 1.6;
  color: var(--ki-on-surface-muted);
  margin: 0;
}
.ki-page-steps__grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 600px) and (max-width: 999px) { .ki-page-steps__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ki-page-steps__grid { grid-template-columns: repeat(5, 1fr); gap: 0.75rem; } }
.ki-page-steps__step {
  background: var(--ki-surface-lowest);
  border-radius: 12px;
  padding: 1.75rem 1.5rem;
  box-shadow: var(--ki-hairline);
}
.ki-page-steps__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem;
  font-family: var(--ki-font-label);
  font-size: 0.8125rem; font-weight: 600;
  color: var(--ki-secondary);
  border: 1px solid rgba(0, 104, 119, 0.3);
  border-radius: 50%;
  margin-bottom: 1rem;
}
.ki-page-steps__title {
  font-family: var(--ki-font-label);
  font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.02em;
  color: var(--ki-on-surface);
  margin: 0 0 0.5rem;
}
.ki-page-steps__text {
  font-family: var(--ki-font-display);
  font-weight: 300; font-size: 0.8125rem; line-height: 1.55;
  color: var(--ki-on-surface-muted);
  margin: 0 0 0.75rem;
}
.ki-page-steps__data {
  display: inline-block;
  font-family: var(--ki-font-label);
  font-size: 0.6875rem; font-weight: 600;
  color: var(--ki-gold);
  background: rgba(217, 119, 6, 0.07);
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
}

/* ── Closing CTA band (centered) ──────────────────────────────────────────── */
.ki-cta-band { background: var(--ki-surface); padding: clamp(3.5rem, 9vh, 7rem) 0; text-align: center; }
.ki-cta-band--alt { background: var(--ki-surface-low); }
.ki-cta-band__inner { max-width: 640px; margin: 0 auto; padding-inline: var(--ki-gutter); }
.ki-cta-band__eyebrow { justify-content: center; }
.ki-cta-band__heading {
  font-family: var(--ki-font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 300; line-height: 1.1; letter-spacing: -0.01em;
  color: var(--ki-on-surface);
  margin: 0 0 1rem;
}
.ki-cta-band__body {
  font-family: var(--ki-font-display);
  font-weight: 300; font-size: clamp(1rem, 1.2vw, 1.125rem); line-height: 1.6;
  color: var(--ki-on-surface-muted);
  max-width: 50ch;
  margin: 0 auto 2rem;
}
.ki-cta-band__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* Tier-pricing hero carries no stat cluster → single, contained column. */
.ki-page-hero--solo .ki-page-hero__layout { grid-template-columns: 1fr; }
.ki-page-hero--solo .ki-page-hero__heading { max-width: 18ch; }
.ki-page-hero--solo .ki-page-hero__subheading { max-width: 60ch; }