/* ==========================================================================
   TYTEN v2 — /insights/build-in-house-fm-back-office-software
   Long-form insight article: hero chart, stat callouts, integration
   treadmill diagram, pull quote, build/buy table, end CTA.
   Every colour is a --v2-* token (or a page token defined per theme below)
   so day and night both work.
   ========================================================================== */

:root,
[data-theme="light"] {
  --ibh-warn: #9A4A12;              /* amber annotation ("vendor ships day one"), readable on cream */
  --ibh-fill-top: 0.30;             /* cost-area gradient opacity */
}
[data-theme="dark"] {
  --ibh-warn: #F6B27A;
  --ibh-fill-top: 0.34;
}

/* Column ----------------------------------------------------------------- */
.ibh-col { max-width: calc(800px + 2 * var(--v2-gutter)); }
.ibh-col--wide { max-width: calc(1000px + 2 * var(--v2-gutter)); }

/* Hero ------------------------------------------------------------------- */
.ibh-hero { padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.ibh-hero__inner { display: grid; gap: 22px; justify-items: start; }
.ibh-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--v2-fs-small);
  font-weight: 600;
  color: var(--v2-text-muted);
  text-decoration: none;
}
.ibh-back:hover { color: var(--v2-accent-ink); }
.ibh-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.ibh-pill {
  display: inline-block;
  padding: 7px 14px;
  border-radius: var(--v2-r-pill);
  border: 1px solid var(--v2-chip-border);
  font-size: var(--v2-fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--v2-text);
}
.ibh-pill.is-primary {
  border-color: var(--v2-accent-tint-border);
  background: var(--v2-accent-tint);
  color: var(--v2-accent-ink);
}
.ibh-h1 { font-size: clamp(2.125rem, 1.6rem + 2.4vw, 3.75rem); text-wrap: balance; }   /* 34 → 60 */
.ibh-deck { max-width: 760px; }
.ibh-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  width: 100%;
  padding: 16px 0;
  border-top: 1px solid var(--v2-line-soft);
  border-bottom: 1px solid var(--v2-line-soft);
  font-size: var(--v2-fs-small);
  color: var(--v2-text-muted);
}
.ibh-meta strong { color: var(--v2-text); font-weight: 600; }
.ibh-meta__dot { color: var(--v2-line-strong); }

/* Hero chart (inline SVG, geometry unchanged, colours from tokens) -------- */
.ibh-hero-art {
  margin-top: clamp(28px, 3vw, 44px);
  padding: clamp(14px, 1rem + 1.6vw, 36px);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-r-card);
  background: var(--v2-glass-bg);
  box-shadow: var(--v2-shadow-frame);
}
.ibh-chart { display: block; width: 100%; height: auto; max-height: 360px; font-family: var(--v2-font-display); }
.ibh-c-stop-top { stop-color: var(--v2-accent); stop-opacity: var(--ibh-fill-top); }
.ibh-c-stop-bottom { stop-color: var(--v2-accent); stop-opacity: 0.02; }
.ibh-c-eyebrow,
.ibh-c-accent { fill: var(--v2-accent-ink); }
.ibh-c-strong { fill: var(--v2-text); }
.ibh-c-muted { fill: var(--v2-text-muted); }
.ibh-c-axis { fill: var(--v2-text-muted); }
.ibh-c-rule { stroke: var(--v2-line-soft); }
.ibh-c-delivered,
.ibh-c-delivered-end { stroke: var(--v2-text-muted); }
.ibh-c-delivered-lbl { fill: var(--v2-text-muted); }
.ibh-c-cost { stroke: var(--v2-accent); }
.ibh-c-point { fill: var(--v2-accent); }
.ibh-c-warn { fill: var(--ibh-warn); }

/* Article body ----------------------------------------------------------- */
.ibh-article { padding-top: clamp(2rem, 1rem + 3vw, 3.5rem); }
.ibh-body {
  max-width: 760px;
  min-width: 0;
  font-size: var(--v2-fs-body);
  line-height: 1.75;
  color: var(--v2-text-body);
}
.ibh-body > p { margin: 0 0 22px; }
.ibh-body h2 {
  margin: clamp(40px, 3vw + 24px, 64px) 0 18px;
  font-family: var(--v2-font-display);
  font-weight: 500;
  font-size: clamp(1.625rem, 1.4rem + 1vw, 2.375rem);   /* 26 → 38 */
  line-height: var(--v2-lh-heading);
  letter-spacing: -0.02em;
  color: var(--v2-text);
  text-wrap: balance;
}
.ibh-body h3 {
  margin: 36px 0 10px;
  font-family: var(--v2-font-display);
  font-weight: 600;
  font-size: clamp(1.1875rem, 1.12rem + 0.3vw, 1.3125rem);   /* 19 → 21 */
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--v2-text);
}
.ibh-body strong { color: var(--v2-text); font-weight: 700; }
.ibh-body a:not(.v2-btn) { color: var(--v2-accent-ink); text-decoration: underline; text-underline-offset: 3px; }

/* Stat callouts ---------------------------------------------------------- */
.ibh-stat-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 32px 0;
}
@media (min-width: 640px) { .ibh-stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ibh-stat {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 24px 24px 22px;
  border: 1px solid var(--v2-border);
  border-top: 3px solid var(--v2-accent);
  border-radius: var(--v2-r-banner);
  background: var(--v2-card-bg);
}
.ibh-stat__num {
  font-family: var(--v2-font-display);
  font-weight: 500;
  font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);   /* 40 → 56 */
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--v2-accent-ink);
}
.ibh-stat__lbl { font-size: var(--v2-fs-small); line-height: 1.5; color: var(--v2-text-muted); }
.ibh-stat--callout {
  margin: 32px 0;
  gap: 14px 28px;
  padding: 28px 30px;
  background: var(--v2-card-bg-hover);
  border-color: var(--v2-accent-tint-border);
}
@media (min-width: 700px) {
  .ibh-stat--callout { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
}
.ibh-stat--callout .ibh-stat__num { font-size: clamp(2.125rem, 1.7rem + 1.6vw, 3rem); white-space: nowrap; }
.ibh-stat--callout .ibh-stat__lbl { font-size: var(--v2-fs-ui); color: var(--v2-text-body); }

/* Integration treadmill diagram ------------------------------------------ */
.ibh-diagram {
  margin: 32px 0 12px;
  padding: clamp(20px, 1rem + 1.4vw, 32px);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-r-card);
  background: var(--v2-card-bg);
  line-height: 1.4;
}
.ibh-diag-hub {
  max-width: 480px;
  margin: 0 auto 18px;
  padding: 22px 28px;
  border-radius: var(--v2-r-banner);
  background: var(--v2-btn-bg);
  color: var(--v2-btn-fg);
  text-align: center;
  box-shadow: var(--v2-shadow-panel);
}
.ibh-diag-hub__eyebrow {
  margin-bottom: 6px;
  font-size: var(--v2-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.ibh-diag-hub__title {
  font-family: var(--v2-font-display);
  font-size: clamp(1.1875rem, 1rem + 0.8vw, 1.5rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.ibh-diag-hub__sub { margin-top: 6px; font-size: var(--v2-fs-xs); opacity: 0.8; }
.ibh-diag-arrow { margin: 0 0 4px; text-align: center; font-size: 18px; line-height: 1; color: var(--v2-accent); }
.ibh-diag-arrow-label {
  margin-bottom: 22px;
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--v2-text-muted);
}
.ibh-diag-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.ibh-diag-card {
  display: flex;
  flex-direction: column;
  padding: 14px 12px 12px;
  border: 1px solid var(--v2-border);
  border-top: 2px solid var(--v2-accent);
  border-radius: var(--v2-r-sm);
  background: var(--v2-bg);
  transition: border-color var(--v2-dur) ease, transform var(--v2-dur) ease;
}
.ibh-diag-card:hover { border-color: var(--v2-accent-deep); transform: translateY(-2px); }
.ibh-diag-card__header {
  margin-bottom: 12px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v2-accent-ink);
}
.ibh-diag-card__list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.ibh-diag-card__list li { font-size: 0.8125rem; line-height: 1.4; color: var(--v2-text-body); }
.ibh-diag-card__cost {
  margin-top: auto;
  padding-top: 9px;
  border-top: 1px dashed var(--v2-line-soft);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--v2-accent-ink);
}
.ibh-diag-total {
  padding: 18px 22px;
  border: 1px solid var(--v2-accent-tint-border);
  border-radius: var(--v2-r-sm);
  background: var(--v2-accent-tint);
  text-align: center;
}
.ibh-diag-total__label {
  margin-bottom: 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--v2-text-muted);
}
.ibh-diag-total__value {
  font-family: var(--v2-font-display);
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--v2-accent-ink);
}
.ibh-diag-total__sub { margin-top: 6px; font-size: var(--v2-fs-xs); color: var(--v2-text-muted); }
.ibh-body > .ibh-diagram-cap {
  margin: 0 0 26px;
  font-size: var(--v2-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--v2-text-muted);
}
@media (max-width: 720px) {
  .ibh-diag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ibh-diag-grid > .ibh-diag-card:nth-child(5) { grid-column: 1 / -1; }
  .ibh-diag-hub { padding: 18px 20px; }
}
@media (max-width: 460px) {
  .ibh-diag-grid { grid-template-columns: 1fr; gap: 10px; }
  .ibh-diag-grid > .ibh-diag-card:nth-child(5) { grid-column: auto; }
}

/* Pull quote ------------------------------------------------------------- */
.ibh-quote {
  display: grid;
  gap: 14px;
  margin: 36px 0;
  padding: 26px clamp(20px, 2vw, 32px);
  border-left: 3px solid var(--v2-accent);
  border-radius: 0 var(--v2-r-banner) var(--v2-r-banner) 0;
  background: var(--v2-banner-bg);
}
.ibh-quote__text {
  font-family: var(--v2-font-display);
  font-weight: 500;
  font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);   /* 19 → 24 */
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--v2-text);
}
.ibh-quote__attr {
  font-size: var(--v2-fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--v2-ls-eyebrow);
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--v2-accent-ink);
}

/* Build / buy table ------------------------------------------------------ */
.ibh-table {
  margin: 28px 0 32px;
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-r-card);
  background: var(--v2-card-bg);
  overflow: hidden;
}
.ibh-table__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--v2-line-soft);
}
.ibh-table__row:first-child { border-top: 0; }
.ibh-table__row > div {
  padding: 18px 22px;
  font-size: var(--v2-fs-small);
  line-height: 1.55;
  color: var(--v2-text-body);
}
.ibh-table__row > div + div { border-left: 1px solid var(--v2-line-soft); }
.ibh-table__head { background: var(--v2-banner-bg); }
.ibh-table__head > div {
  padding-block: 16px;
  font-size: var(--v2-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v2-text-muted);
}
.ibh-table__head > div:last-child { color: var(--v2-accent-ink); }
@media (max-width: 720px) {
  .ibh-table { border: 0; border-radius: 0; background: none; overflow: visible; display: grid; gap: 14px; }
  .ibh-table__head { display: none; }   /* labels are reprojected onto each cell (data-label, set by the page JS) */
  .ibh-table__row {
    grid-template-columns: 1fr;
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-r-banner);
    background: var(--v2-card-bg);
    overflow: hidden;
  }
  .ibh-table__row:first-child { border-top: 1px solid var(--v2-border); }
  .ibh-table__row > div { padding: 14px 18px; }
  .ibh-table__row > div + div { border-left: 0; border-top: 1px dashed var(--v2-line-soft); }
  .ibh-table__row > div[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-size: var(--v2-fs-eyebrow);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--v2-text-muted);
  }
}

/* Divider + end CTA ------------------------------------------------------ */
.ibh-divider { margin: clamp(40px, 4vw, 56px) 0; }
.ibh-end-cta {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: clamp(28px, 1.5rem + 2vw, 48px) clamp(22px, 2vw, 40px);
  border: 1px solid var(--v2-accent-tint-border);
  border-radius: var(--v2-r-panel);
  background: var(--v2-card-bg-hover);
  text-align: center;
}
.ibh-body .ibh-end-cta h3 {
  margin: 0;
  font-weight: 500;
  font-size: clamp(1.625rem, 1.35rem + 1.2vw, 2.375rem);   /* 26 → 38 */
  line-height: var(--v2-lh-heading);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.ibh-end-cta p { max-width: 560px; font-size: var(--v2-fs-ui); line-height: 1.6; color: var(--v2-text-muted); }
.ibh-end-cta .v2-btn { margin-top: 6px; }
@media (max-width: 420px) {
  .ibh-end-cta .v2-btn { white-space: normal; }
}