/* =============================================================================
   VS-PAGES.CSS — Shared layout styles for all /vs/ comparison pages
   Layout only. All design tokens and components in global.css.
   New vs/ pages reference this file via pageCSS frontmatter.
   Existing vs/ pages (biy, izenda, logi) import this at the top of their
   own CSS files for shared components, then add page-specific rules below.
   ============================================================================= */


/* =============================================================================
   HERO — 2-column grid shared by all vs/ pages
   ============================================================================= */
.vs-hero-bg {
  background: linear-gradient(180deg, var(--bg-blue) 0%, var(--bg) 100%);
}

.vs-hero-inner {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--s-14);
  align-items: start;
}

/* h1 on interior pages uses the page-hero token — never hardcode */
.vs-hero-copy h1 {
  font-size: var(--t-hero-page);
  margin-bottom: var(--s-5);
  margin-top: var(--s-2);
}

.vs-hero-sub {
  font-size: var(--t-lead);
  color: var(--text-sec);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--s-6);
}

.vs-hero-ctas {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-6);
}




/* =============================================================================
   VENDOR "AT A GLANCE" CARD — quick facts about the competitor in hero
   Used when page doesn't have a unique visual (replaces timeline/acq stack)
   ============================================================================= */
.vs-vendor-card {
  background: var(--bg);
  border: 1px solid var(--border-sub);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}

.vs-vendor-card-head {
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-sub);
  padding: var(--s-4) var(--s-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.vs-vendor-card-head span {
  font-size: var(--t-caption);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--text-muted);
}

.vs-vendor-facts {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.vs-vendor-fact {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--s-4) var(--s-6);
  border-bottom: 1px solid var(--border-sub);
}

.vs-vendor-fact:last-child {
  border-bottom: none;
}

.vs-vendor-fact-label {
  font-size: var(--t-caption);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--text-muted);
}

.vs-vendor-fact-val {
  font-size: var(--t-base);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
}

.vs-vendor-fact-bad  { color: #C53030; }
.vs-vendor-fact-warn { color: #C05621; }
.vs-vendor-fact-ok   { color: var(--text); }
.vs-vendor-fact-good { color: var(--green); }


/* =============================================================================
   RISK GRID — status/concern cards (5-card diamond layout or 2-3 grid)
   Replaces .iz-status-grid pattern; shared across all vs/ pages
   ============================================================================= */
.vs-risk-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s-5);
}

/* 5-card diamond: 3 top row, 2 bottom centered */
.vs-risk-card:nth-child(1) { grid-column: 1 / span 2; }
.vs-risk-card:nth-child(2) { grid-column: 3 / span 2; }
.vs-risk-card:nth-child(3) { grid-column: 5 / span 2; }
.vs-risk-card:nth-child(4) { grid-column: 2 / span 2; }
.vs-risk-card:nth-child(5) { grid-column: 4 / span 2; }

/* 3-card full row */
.vs-risk-grid-3 .vs-risk-card { grid-column: span 2; }

/* 4-card 2x2 */
.vs-risk-grid-4 {
  grid-template-columns: repeat(2, 1fr);
}
.vs-risk-grid-4 .vs-risk-card { grid-column: span 1; }

.vs-risk-card {
  background: var(--bg);
  border-radius: var(--r-xl);
  padding: var(--s-7);
  border: 1.5px solid;
  transition: transform .18s, box-shadow .18s;
}

.vs-risk-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}

.vs-risk-bad  { border-color: rgba(229,62,62,.2); }
.vs-risk-warn { border-color: rgba(221,107,32,.25); }
.vs-risk-neutral { border-color: var(--border-sub); }

.vs-risk-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s-5);
  flex-shrink: 0;
}

.vs-risk-icon svg {
  width: 22px;
  height: 22px;
}

.vs-risk-bad  .vs-risk-icon { background: rgba(229,62,62,.08); }
.vs-risk-bad  .vs-risk-icon svg { color: #C53030; }
.vs-risk-warn .vs-risk-icon { background: rgba(221,107,32,.08); }
.vs-risk-warn .vs-risk-icon svg { color: #C05621; }
.vs-risk-neutral .vs-risk-icon { background: var(--bg-subtle); }
.vs-risk-neutral .vs-risk-icon svg { color: var(--text-muted); }

.vs-risk-card h3 {
  font-size: var(--t-card);
  font-weight: var(--w-bold);
  color: var(--text);
  line-height: var(--lh-snug);
  margin-bottom: var(--s-3);
}

.vs-risk-card p {
  font-size: var(--t-base);
  color: var(--text-sec);
  line-height: var(--lh-relaxed);
}


/* Attribution line inside vendor at-a-glance card — inherits .vs-compare-owner base,
   needs horizontal padding to align with the fact rows above it */
.vs-vendor-card .vs-compare-owner {
  padding: var(--s-2) var(--s-6) var(--s-4);
}

/* Sub-note line inside a vs-vendor-fact row (e.g. SSRS status card) */
.vs-vendor-fact-note {
  font-size: var(--t-caption);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
}

/* Yurbi highlight block at the bottom of a vendor card */
.vs-vendor-yurbi {
  background: var(--green-soft);
  border-top: 1px solid var(--green-border);
  padding: var(--s-4) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.vs-vendor-yurbi-label {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
  color: var(--green);
}

.vs-vendor-yurbi-label svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.vs-vendor-yurbi-sub {
  font-size: var(--t-caption);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
}

/* =============================================================================
   DBF PATTERN — "Choose them if / Choose us if" side by side
   ============================================================================= */
.vs-when-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
}

.vs-when-card {
  border-radius: var(--r-xl);
  border: 1.5px solid var(--border-sub);
  padding: var(--s-8);
  background: var(--bg);
}

.vs-when-card-yurbi {
  border-color: var(--blue);
  background: var(--blue-soft);
  box-shadow: var(--sh-blue);
}

.vs-when-card h3 {
  font-size: var(--t-body);
  font-weight: var(--w-bold);
  color: var(--text);
  margin-bottom: var(--s-5);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  line-height: var(--lh-snug);
}

.vs-when-card h3 svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.vs-when-card-yurbi h3 { color: var(--blue); }

.vs-when-card ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.vs-when-card li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font-size: var(--t-base);
  color: var(--text-sec);
  line-height: var(--lh-relaxed);
}

.vs-when-card li svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 3px;
}

.vs-when-card-yurbi li { color: var(--text); }
.vs-when-card li svg { color: var(--text-muted); }
.vs-when-card-yurbi li svg { color: var(--green); }  /* must come after general rule to win cascade */


/* =============================================================================
   MIGRATION STEPS — numbered step-by-step list
   Replaces .iz-mig-* pattern; shared across vs/ pages
   ============================================================================= */
.vs-mig-steps {
  max-width: 760px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: var(--s-6);
}

.vs-mig-step {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--s-5);
  align-items: start;
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--border-sub);
  position: relative;
}

.vs-mig-step:last-child {
  border-bottom: none;
}

.vs-mig-step::before {
  content: '';
  position: absolute;
  left: 23px;
  top: calc(var(--s-5) + 48px);
  bottom: 0;
  width: 2px;
  background: var(--border-sub);
}

.vs-mig-step:last-child::before {
  display: none;
}

.vs-mig-num {
  width: 48px;
  height: 48px;
  background: var(--blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-lead);
  font-weight: var(--w-xbold);
  color: #fff;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.vs-mig-content h3 {
  font-size: var(--t-card);
  font-weight: var(--w-bold);
  color: var(--text);
  line-height: var(--lh-snug);
  margin-bottom: var(--s-2);
  padding-top: var(--s-2);
}

.vs-mig-content p {
  font-size: var(--t-base);
  color: var(--text-sec);
  line-height: var(--lh-relaxed);
}


/* =============================================================================
   CALCULATOR CTA BLOCK — callout linking to /calculator/
   Required on all vs/ pages per handoff instructions
   ============================================================================= */
.vs-calc-cta {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  background: var(--blue-soft);
  border: 1px solid var(--blue-soft2);
  border-left: 3px solid var(--blue);
  border-radius: var(--r-md);
  padding: var(--s-5) var(--s-6);
  margin-block: var(--s-8);
}

.vs-calc-cta > svg {
  width: 28px;
  height: 28px;
  color: var(--blue);
  flex-shrink: 0;
}

.vs-calc-cta-text {
  flex: 1;
  min-width: 0;
}

.vs-calc-cta-text strong {
  display: block;
  font-size: var(--t-base);
  font-weight: var(--w-bold);
  color: var(--text);
  margin-bottom: var(--s-1);
}

.vs-calc-cta-text span {
  font-size: var(--t-sm);
  color: var(--text-sec);
  line-height: var(--lh-relaxed);
}


/* =============================================================================
   INFO LIST — icon + heading + body point list
   Used in sections comparing two options (e.g. "Why not Symphony").
   Usage:
     <ul class="vs-info-list">
       <li class="vs-info-point">
         <svg ...></svg>
         <div><strong>Title</strong><p>Body copy.</p></div>
       </li>
     </ul>
   ============================================================================= */
.vs-info-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  list-style: none;
}

.vs-info-point {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
}

.vs-info-point > svg {
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  flex-shrink: 0;
  margin-top: 2px;
}

.vs-info-point > div {
  flex: 1;
  min-width: 0;
}

.vs-info-point strong {
  display: block;
  font-size: var(--t-base);
  font-weight: var(--w-bold);
  color: var(--text);
  margin-bottom: var(--s-1);
  line-height: var(--lh-snug);
}

.vs-info-point p {
  font-size: var(--t-base);
  color: var(--text-sec);
  line-height: var(--lh-relaxed);
  margin: 0;
}


/* =============================================================================
   TWO-COLUMN PITCH LAYOUT — text copy + sticky pitch card side by side
   Reuses .vs-hero-inner grid; this alias makes intent explicit.
   ============================================================================= */
.vs-two-col-pitch {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--s-14);
  align-items: start;
}

@media (max-width: 1024px) {
  .vs-two-col-pitch { grid-template-columns: 1fr; }
}

/* =============================================================================
   COMPARE OWNER — attribution line inside vendor at-a-glance card
   ============================================================================= */
.vs-compare-owner {
  font-size: var(--t-sm);
  color: var(--text-muted);
  font-weight: var(--w-medium);
  width: 100%;
  margin-top: 2px;
}


/* =============================================================================
   BOTTOM LINE — closing summary section
   ============================================================================= */
.vs-bottom-line {
  max-width: 760px;
  margin-inline: auto;
}

.vs-bottom-line-icon {
  width: 56px;
  height: 56px;
  background: var(--green-soft);
  border: 1px solid var(--green-border);
  border-radius: var(--r-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s-6);
}

.vs-bottom-line-icon svg {
  width: 28px;
  height: 28px;
  color: var(--green);
}

.vs-bottom-line h2 {
  font-size: var(--t-3xl);
  margin-bottom: var(--s-5);
}

.vs-bottom-line > p {
  font-size: var(--t-body);
  color: var(--text-sec);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--s-4);
}

.vs-bottom-line-cta {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-top: var(--s-8);
}

.vs-bottom-line-note {
  font-size: var(--t-sm);
  color: var(--text-muted);
}

.vs-table-disclaimer {
  font-size: var(--t-caption);
  color: var(--text-muted);
  text-align: center;
  margin-top: var(--s-6);
  max-width: 640px;
  margin-inline: auto;
  line-height: var(--lh-relaxed);
}

.vs-table-disclaimer a {
  color: var(--blue);
  font-weight: var(--w-semibold);
}

.vs-table-disclaimer a:hover {
  text-decoration: underline;
}


/* =============================================================================
   SECONDARY COMPARISONS — "Also compare" grid at bottom of each page
   ============================================================================= */
.vs-other-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
}

.vs-other-card {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  background: var(--bg);
  border: 1px solid var(--border-sub);
  border-radius: var(--r-lg);
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}

.vs-other-card:hover {
  border-color: var(--blue);
  box-shadow: var(--sh-sm);
  transform: translateY(-1px);
}

.vs-other-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: var(--bg-subtle);
  border: 1px solid var(--border-sub);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vs-other-icon svg {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
}

.vs-other-text {
  flex: 1;
  min-width: 0;
}

.vs-other-text h4 {
  font-size: var(--t-base);
  font-weight: var(--w-bold);
  color: var(--text);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vs-other-text span {
  font-size: var(--t-caption);
  color: var(--text-muted);
  white-space: nowrap;
}

.vs-other-arrow {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: color .15s, transform .15s;
}

.vs-other-card:hover .vs-other-arrow {
  color: var(--blue);
  transform: translateX(2px);
}


/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 1024px) {
  .vs-hero-inner          { grid-template-columns: 1fr; }

  .vs-risk-grid           { grid-template-columns: repeat(2, 1fr); }
  .vs-risk-card:nth-child(n) { grid-column: span 1; }
  .vs-risk-grid-3 .vs-risk-card { grid-column: span 1; }  /* specificity fix — prevents 2-col blowout */
  .vs-risk-grid-4         { grid-template-columns: repeat(2, 1fr); }

  .vs-when-grid           { grid-template-columns: 1fr; }
  .vs-other-grid          { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .vs-hero-copy h1        { font-size: var(--t-4xl); }
  .vs-risk-grid           { grid-template-columns: 1fr; }
  .vs-risk-grid-4         { grid-template-columns: 1fr; }

  .vs-mig-step            { grid-template-columns: 40px 1fr; gap: var(--s-4); }
  .vs-mig-num             { width: 40px; height: 40px; font-size: var(--t-base); }
  .vs-mig-step::before    { left: 19px; }

  .vs-calc-cta            { flex-direction: column; align-items: flex-start; }
  .vs-bottom-line-cta     { flex-direction: column; }
}

@media (max-width: 480px) {
  .vs-hero-copy h1        { font-size: var(--t-3xl); }
  .vs-hero-ctas           { flex-direction: column; }
  .vs-hero-ctas .btn      { width: 100%; }
  .vs-other-grid          { grid-template-columns: 1fr; }
}


/* =============================================================================
   VS-HERO VERDICT BAR — quick-stat summary row used in hero copy
   Usage: <div class="vs-hero-verdict"> <div class="vs-verdict-item">...</div> </div>
   ============================================================================= */
.vs-hero-verdict {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  background: var(--bg);
  border: 1px solid var(--border-sub);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: var(--s-6);
}

.vs-verdict-item {
  flex: 1;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-4) var(--s-5);
  border-right: 1px solid var(--border-sub);
}

.vs-verdict-item:last-child { border-right: none; }

.vs-verdict-label {
  font-size: var(--t-caption);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--text-muted);
}

.vs-verdict-val {
  font-size: var(--t-lead);
  font-weight: var(--w-xbold);
  line-height: 1.2;
}

.vs-verdict-bad  { color: #C53030; }
.vs-verdict-good { color: var(--green); }

.vs-verdict-sep { display: none; } /* kept for template compat — border handled by CSS */

@media (max-width: 640px) {
  .vs-verdict-item { min-width: 45%; border-bottom: 1px solid var(--border-sub); }
  .vs-verdict-item:nth-child(even) { border-right: none; }
}


/* =============================================================================
   PROBLEM CARD — numbered card used in BIY "five problems" section
   Extends .card with a number badge and cost-note row.
   ============================================================================= */
.vs-problem-num {
  font-size: var(--t-3xl);
  font-weight: var(--w-xbold);
  color: var(--border-sub);
  line-height: 1;
  margin-bottom: var(--s-3);
  letter-spacing: var(--ls-tight);
}

.vs-problem-cost {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border-sub);
  font-size: var(--t-sm);
}

.vs-problem-cost span { color: var(--text-muted); }
.vs-problem-cost strong { color: var(--text); font-weight: var(--w-bold); }


/* =============================================================================
   AI COMPARISON BLOCK — two-column copy + two AI comparison cards
   Uses vs-two-col-pitch grid; card pair sits in right column.
   ============================================================================= */
.vs-ai-cards {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.vs-ai-card {
  border-radius: var(--r-lg);
  padding: var(--s-5);
  border: 1.5px solid;
}

.vs-ai-card-bad  {
  background: rgba(229,62,62,.04);
  border-color: rgba(229,62,62,.2);
}

.vs-ai-card-good {
  background: var(--green-soft);
  border-color: var(--green-border);
}

.vs-ai-card-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
  margin-bottom: var(--s-4);
}

.vs-ai-card-bad  .vs-ai-card-head { color: #C53030; }
.vs-ai-card-good .vs-ai-card-head { color: var(--green); }

.vs-ai-card-head svg { width: 16px; height: 16px; flex-shrink: 0; }

.vs-ai-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.vs-ai-list li {
  font-size: var(--t-base);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  line-height: var(--lh-snug);
}

.vs-ai-list li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.vs-ai-card-bad  .vs-ai-list li { color: var(--text-sec); }
.vs-ai-card-bad  .vs-ai-list li.ok  { color: var(--text-sec); }
.vs-ai-card-bad  .vs-ai-list li.bad { color: #C53030; font-weight: var(--w-semibold); }
.vs-ai-card-bad  .vs-ai-list li.bad::before { background: #C53030; }
.vs-ai-card-bad  .vs-ai-list li.ok::before  { background: var(--text-muted); }

.vs-ai-card-good .vs-ai-list li { color: var(--green); font-weight: var(--w-semibold); }
.vs-ai-card-good .vs-ai-list li::before { background: var(--green); }

.vs-ai-verdict {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid;
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
}

.vs-ai-card-bad  .vs-ai-verdict { border-color: rgba(229,62,62,.2); color: #C53030; }
.vs-ai-card-good .vs-ai-verdict { border-color: var(--green-border); color: var(--green); }


/* =============================================================================
   BUILD COST CALCULATOR — interactive inputs + results display
   ============================================================================= */
.vs-calc-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.vs-calc-inputs {
  background: var(--bg);
  border: 1px solid var(--border-sub);
  border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-8);
}

.vs-calc-input-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
}

.vs-calc-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.vs-calc-field-label {
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
  color: var(--text);
  line-height: var(--lh-snug);
}

.vs-calc-hint {
  font-size: var(--t-caption);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
}

.vs-calc-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  height: 44px;
}

.vs-calc-step-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-lead);
  font-weight: var(--w-bold);
  color: var(--text-sec);
  background: var(--bg-subtle);
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .12s, color .12s;
}

.vs-calc-step-btn:hover { background: var(--bg-muted); color: var(--text); }

.vs-calc-num {
  flex: 1;
  text-align: center;
  border: none;
  border-left: 1.5px solid var(--border);
  border-right: 1.5px solid var(--border);
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: var(--w-bold);
  color: var(--text);
  background: var(--bg);
  min-width: 0;
  height: 100%;
  padding: 0;
}

.vs-calc-num:focus { outline: none; background: var(--blue-soft); }

.vs-calc-input-wrap {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  height: 44px;
}

.vs-calc-prefix,
.vs-calc-suffix {
  padding: 0 var(--s-3);
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
  color: var(--text-muted);
  background: var(--bg-subtle);
  border-right: 1.5px solid var(--border);
  height: 100%;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.vs-calc-suffix {
  border-right: none;
  border-left: 1.5px solid var(--border);
}

.vs-calc-money {
  flex: 1;
  border: none;
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: var(--w-bold);
  color: var(--text);
  background: var(--bg);
  min-width: 0;
  height: 100%;
  padding: 0 var(--s-3);
}

.vs-calc-money:focus { outline: none; background: var(--blue-soft); }

.vs-calc-results {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--s-4);
  align-items: center;
}

.vs-result-card {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1.5px solid;
}

.vs-result-build { border-color: rgba(229,62,62,.25); }
.vs-result-yurbi  { border-color: var(--blue); box-shadow: var(--sh-blue); }

.vs-result-eyebrow {
  padding: var(--s-3) var(--s-5);
  font-size: var(--t-caption);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

.vs-result-build .vs-result-eyebrow { background: rgba(229,62,62,.08); color: #C53030; }
.vs-result-yurbi  .vs-result-eyebrow { background: var(--blue); color: #fff; -webkit-font-smoothing: antialiased; }

.vs-result-rows {
  padding: var(--s-4) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--bg);
}

.vs-result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--border-sub);
  font-size: var(--t-sm);
}

.vs-result-row:last-child { border-bottom: none; }

.vs-result-row span { color: var(--text-muted); }

.vs-result-build .vs-result-row strong { color: #C53030; font-weight: var(--w-bold); }
.vs-result-yurbi  .vs-result-row strong { color: var(--green); font-weight: var(--w-bold); }

.vs-result-total-row {
  padding-top: var(--s-3);
  margin-top: var(--s-1);
}

.vs-result-total-row span { color: var(--text); font-weight: var(--w-semibold); }
.vs-result-total-row strong { font-size: var(--t-base); }

.vs-result-note {
  padding: var(--s-3) var(--s-5);
  font-size: var(--t-caption);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
  background: var(--bg-subtle);
  border-top: 1px solid var(--border-sub);
}

.vs-result-vs {
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
  color: var(--text-muted);
  text-align: center;
  flex-shrink: 0;
}

.vs-calc-savings {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  background: var(--green-soft);
  border: 1px solid var(--green-border);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  font-size: var(--t-sm);
  color: var(--text-sec);
  line-height: var(--lh-relaxed);
}

.vs-calc-savings svg {
  width: 18px;
  height: 18px;
  color: var(--green);
  flex-shrink: 0;
  margin-top: 2px;
}

.vs-calc-savings strong { color: var(--green); font-weight: var(--w-bold); }

.vs-calc-disclaimer {
  font-size: var(--t-caption);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
  text-align: center;
}

@media (max-width: 900px) {
  .vs-calc-input-row  { grid-template-columns: 1fr; }
  .vs-calc-results    { grid-template-columns: 1fr; }
  .vs-result-vs       { text-align: left; }
}


/* =============================================================================
   HONEST BUILD/BUY GRID — two-column list used in "when to build" section
   ============================================================================= */
.vs-honest-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
  margin-top: var(--s-6);
}

.vs-honest-col h4 {
  font-size: var(--t-base);
  font-weight: var(--w-bold);
  color: var(--text);
  margin-bottom: var(--s-4);
}

.vs-honest-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.vs-honest-col li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font-size: var(--t-base);
  color: var(--text-sec);
  line-height: var(--lh-relaxed);
}

.vs-honest-col li::before {
  content: '—';
  color: var(--text-muted);
  flex-shrink: 0;
  font-weight: var(--w-bold);
}

.vs-honest-close {
  margin-top: var(--s-6);
  font-size: var(--t-base);
  color: var(--text-sec);
  line-height: var(--lh-relaxed);
  font-style: italic;
}

@media (max-width: 640px) {
  .vs-honest-grid { grid-template-columns: 1fr; }
}

/* =============================================================================
   FEATURE TABLE — used on all vs/ pages that include a full feature grid.
   .table-scroll provides horizontal scroll on narrow viewports.
   ============================================================================= */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-lg);
  border: 1px solid var(--border-sub);
}

.feature-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-base);
  background: var(--bg);
}

.feature-table thead {
  background: var(--bg-subtle);
  border-bottom: 2px solid var(--border-sub);
}

.feature-table thead th {
  padding: var(--s-4) var(--s-6);
  text-align: left;
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
  color: var(--text);
  white-space: nowrap;
}

.feature-table thead th:first-child {
  min-width: 220px;
}

.feature-table thead th:not(:first-child) {
  text-align: center;
  min-width: 160px;
}

.feature-table tbody tr {
  border-bottom: 1px solid var(--border-sub);
  transition: background .12s;
}

.feature-table tbody tr:last-child {
  border-bottom: none;
}

.feature-table tbody tr:hover {
  background: var(--bg-subtle);
}

.feature-table tbody th {
  padding: var(--s-4) var(--s-6);
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  color: var(--text-sec);
  text-align: left;
  vertical-align: top;
}

.feature-table tbody td {
  padding: var(--s-4) var(--s-6);
  text-align: center;
  vertical-align: top;
}

/* Section divider rows */
.feat-row-lead th {
  padding-top: var(--s-6);
  font-size: var(--t-caption);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--text-muted);
  background: var(--bg-subtle);
}

.feat-row-lead td {
  background: var(--bg-subtle);
  padding-top: var(--s-6);   /* match th padding-top so section divider rows align */
}

/* Value cell variants */
.feat-yes {
  font-size: var(--t-sm);
  font-weight: var(--w-semibold);
  color: var(--green);
}

.feat-no {
  font-size: var(--t-sm);
  font-weight: var(--w-semibold);
  color: #C53030;
}

.feat-partial {
  font-size: var(--t-sm);
  font-weight: var(--w-semibold);
  color: #C05621;
}


/* =============================================================================
   FAQ LIST — alias for .faq-grid used on vs/ pages
   Identical behavior; use .faq-grid or .faq-list interchangeably.
   ============================================================================= */
.faq-list {
  max-width: 760px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

/* =============================================================================
   VS-PAGES.CSS — BIY PAGE ADDITIONS
   Append this entire block to the end of vs-pages.css.
   Shared components use vs-* prefix. BIY-specific use biy-* prefix.
   ============================================================================= */


/* =============================================================================
   BIY HERO — page-specific grid + gradient override
   ============================================================================= */
.biy-hero {
  background: linear-gradient(180deg, var(--bg-blue) 0%, var(--bg) 100%);
  padding-bottom: var(--s-20);
}

.biy-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-16);
  align-items: start;
}


/* =============================================================================
   BIY ICEBERG VISUAL — hero right column
   ============================================================================= */
.biy-iceberg {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-xl);
  border: 1px solid var(--border);
}

/* Above the waterline */
.biy-iceberg-above {
  background: linear-gradient(180deg, #EBF4FF 0%, #DAEEFF 100%);
  padding: var(--s-8) var(--s-8) var(--s-6);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
}

.biy-ice-tip {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
}

.biy-ice-tip-label {
  font-size: var(--t-caption);
  color: var(--text-muted);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

.biy-ice-tip-tag {
  background: #fff;
  border: 2px solid var(--blue-soft2);
  border-radius: var(--r-lg);
  padding: var(--s-3) var(--s-8);
  font-size: var(--t-lead);
  font-weight: var(--w-xbold);
  color: var(--text);
  box-shadow: var(--sh-md);
}

/* Waterline separator */
.biy-waterline {
  background: var(--blue);
  padding: var(--s-2) var(--s-6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.biy-waterline-label {
  font-size: var(--t-caption);
  font-weight: var(--w-bold);
  color: rgba(255,255,255,.8);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
}

/* Below the waterline */
.biy-iceberg-below {
  background: linear-gradient(180deg, #0C2D4A 0%, #081926 100%);
  padding: var(--s-6) var(--s-8) var(--s-8);
  -webkit-font-smoothing: antialiased;
}

.biy-ice-items {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.biy-ice-item {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-4);
  font-size: var(--t-base);
  color: var(--on-dark-sec);
}

.biy-ice-lg {
  font-weight: var(--w-bold);
  color: #fff;
  background: rgba(255,255,255,.13);
}

.biy-ice-sm {
  font-size: var(--t-caption);
  color: #94ADBF;
}


/* =============================================================================
   BIY BUILD COST CALCULATOR — more visual than the shared vs-calc-* variant
   ============================================================================= */
.biy-calc-wrap {
  max-width: 920px;
  margin-inline: auto;
}

.biy-calc-inputs {
  background: var(--bg);
  border: 1px solid var(--border-sub);
  border-radius: var(--r-xl);
  padding: var(--s-8);
  margin-bottom: var(--s-6);
  box-shadow: var(--sh-sm);
}

.biy-calc-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
}

.biy-calc-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.biy-calc-label {
  font-size: var(--t-base);
  font-weight: var(--w-bold);
  color: var(--text);
  line-height: var(--lh-snug);
  min-height: 40px;
}

.biy-calc-stepper {
  display: flex;
  align-items: center;
  border: 2px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}

.biy-step-btn {
  width: 44px;
  height: 52px;
  background: var(--bg-muted);
  color: var(--text-sec);
  font-size: var(--t-xl);
  font-weight: var(--w-regular);
  border: none;
  cursor: pointer;
  transition: background .15s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.biy-step-btn:hover { background: var(--border); color: var(--text); }

.biy-calc-num {
  flex: 1;
  font-family: var(--mono);
  font-size: var(--t-2xl);
  font-weight: var(--w-bold);
  color: var(--blue);
  text-align: center;
  border: none;
  background: var(--bg);
  padding: var(--s-2);
  min-height: 52px;
  -moz-appearance: textfield;
}

.biy-calc-num::-webkit-inner-spin-button,
.biy-calc-num::-webkit-outer-spin-button { -webkit-appearance: none; }
.biy-calc-num:focus { outline: none; background: var(--blue-soft); }

.biy-calc-input-wrap {
  display: flex;
  align-items: center;
  border: 2px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  min-height: 52px;
}

.biy-calc-prefix,
.biy-calc-suffix {
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-lead);
  font-weight: var(--w-bold);
  color: var(--text-muted);
  background: var(--bg-muted);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.biy-calc-money {
  flex: 1;
  font-family: var(--mono);
  font-size: var(--t-base);
  font-weight: var(--w-bold);
  color: var(--text);
  border: none;
  background: var(--bg);
  padding: var(--s-2) var(--s-3);
  min-height: 48px;
  -moz-appearance: textfield;
  width: 100%;
}

.biy-calc-money::-webkit-inner-spin-button,
.biy-calc-money::-webkit-outer-spin-button { -webkit-appearance: none; }
.biy-calc-money:focus { outline: none; background: var(--blue-soft); }

.biy-calc-hint {
  font-size: var(--t-sm);   /* 14px — supplementary UI guidance, not body copy */
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
}

/* Result cards */
.biy-calc-results {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--s-4);
  align-items: center;
  margin-bottom: var(--s-5);
}

.biy-result-card {
  border-radius: var(--r-xl);
  padding: var(--s-7);
  border: 1.5px solid;
}

.biy-result-build {
  background: rgba(229,62,62,.04);
  border-color: rgba(229,62,62,.2);
}

.biy-result-yurbi {
  background: rgba(4,122,24,.04);
  border-color: var(--green-border);
  box-shadow: var(--sh-green);
}

.biy-result-eyebrow {
  font-size: var(--t-label);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--text-muted);
  margin-bottom: var(--s-4);
}

.biy-result-rows {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

.biy-result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: var(--t-base);
}

.biy-result-row span  { color: var(--text-sec); }
.biy-result-row strong { font-weight: var(--w-bold); color: var(--text); font-family: var(--mono); }

.biy-result-total-row {
  padding-top: var(--s-3);
  border-top: 1px solid var(--border-sub);
  font-size: var(--t-base);
}

.biy-result-total-row strong { font-size: var(--t-lead); }
.biy-result-build .biy-result-total-row strong { color: #C53030; }

.biy-yurbi-price { color: var(--green) !important; }

.biy-result-note {
  font-size: var(--t-base);  /* 16px — readable explanatory content */
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
  border-top: 1px solid var(--border-sub);
  padding-top: var(--s-3);
}

.biy-result-vs {
  font-size: var(--t-3xl);
  font-weight: var(--w-xbold);
  color: var(--border);
  text-align: center;
  flex-shrink: 0;
  line-height: 1;
}

.biy-calc-savings {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  background: var(--green-soft);
  border: 1px solid var(--green-border);
  border-radius: var(--r-md);
  padding: var(--s-5) var(--s-6);
  font-size: var(--t-base);
  color: var(--text-sec);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--s-4);
}

.biy-calc-savings svg   { width: 20px; height: 20px; color: var(--green); flex-shrink: 0; margin-top: 2px; }
.biy-calc-savings strong { color: var(--text); font-weight: var(--w-bold); }
.biy-calc-savings em     { font-style: italic; }

.biy-calc-disclaimer {
  font-size: var(--t-sm);    /* 14px — supplementary disclaimer, not body copy */
  color: var(--text-muted);
  text-align: center;
  line-height: var(--lh-relaxed);
}


/* =============================================================================
   SHARED PROBLEM CARDS — ghost-number grid, shared across pages
   ============================================================================= */
.vs-problems-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s-5);
}

/* 5-card offset: 3 top, 2 centered below */
.vs-problem-card:nth-child(1) { grid-column: 1 / span 2; }
.vs-problem-card:nth-child(2) { grid-column: 3 / span 2; }
.vs-problem-card:nth-child(3) { grid-column: 5 / span 2; }
.vs-problem-card:nth-child(4) { grid-column: 2 / span 2; }
.vs-problem-card:nth-child(5) { grid-column: 4 / span 2; }

.vs-problem-card {
  background: var(--bg);
  border: 1px solid var(--border-sub);
  border-radius: var(--r-xl);
  padding: var(--s-8);
  position: relative;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}

.vs-problem-card:hover {
  border-color: var(--blue);
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
}

.vs-problem-num {
  position: absolute;
  top: var(--s-6);
  right: var(--s-6);
  font-size: 3.5rem;
  font-weight: var(--w-xbold);
  color: var(--bg-muted);
  line-height: 1;
  font-family: var(--mono);
  letter-spacing: var(--ls-tight);
  pointer-events: none;
  user-select: none;
}

.vs-problem-icon {
  width: 44px;
  height: 44px;
  background: var(--blue-soft);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s-5);
  flex-shrink: 0;
}

.vs-problem-icon svg { width: 22px; height: 22px; color: var(--blue); }

.vs-problem-card h3 {
  font-size: var(--t-card);
  font-weight: var(--w-bold);
  color: var(--text);
  line-height: var(--lh-snug);
  margin-bottom: var(--s-3);
  max-width: 280px;
}

.vs-problem-card p {
  font-size: var(--t-base);
  color: var(--text-sec);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--s-5);
}

.vs-problem-cost {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: var(--s-4);
  border-top: 1px solid var(--border-sub);
}

.vs-problem-cost span {
  font-size: var(--t-caption);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--text-muted);
}

.vs-problem-cost strong {
  font-size: var(--t-base);
  font-weight: var(--w-bold);
  color: var(--text);
}


/* =============================================================================
   BIY AI OBJECTION — 2-col layout; cards use shared vs-ai-* classes
   ============================================================================= */
.biy-ai-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-16);
  align-items: start;
}

.biy-ai-copy .sh-title { font-size: var(--t-3xl); }

.biy-ai-copy p {
  font-size: var(--t-body);
  color: var(--text-sec);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--s-5);
}


/* =============================================================================
   SHARED COMPARISON TABLE — 3-col: dimension | Build | Yurbi
   Reusable on any vs/ page that needs a side-by-side row comparison.
   ============================================================================= */
.vs-compare-table {
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--border-sub);
  box-shadow: var(--sh-md);
}

.vs-compare-head-row,
.vs-compare-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
}

.vs-compare-head-row > div {
  padding: var(--s-5) var(--s-6);
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.vs-compare-th-dim {
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: var(--t-caption);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  border-bottom: 1px solid var(--border-sub);
}

.vs-compare-th-build {
  background: rgba(229,62,62,.06);
  color: #C53030;
  border-left: 1px solid rgba(229,62,62,.15);
  border-bottom: 2px solid rgba(229,62,62,.2);
}

.vs-compare-th-yurbi {
  background: var(--blue);
  color: #fff;
  border-left: 1px solid rgba(255,255,255,.12);
  border-bottom: 2px solid var(--blue-dark);
  -webkit-font-smoothing: antialiased;
}

.vs-compare-head-row > div svg { width: 16px; height: 16px; flex-shrink: 0; }

.vs-compare-row {
  border-bottom: 1px solid var(--border-sub);
  transition: background .12s;
}

.vs-compare-row:last-child { border-bottom: none; }
.vs-compare-row:hover      { background: var(--bg-subtle); }

.vs-compare-dim {
  padding: var(--s-4) var(--s-6);
  font-size: var(--t-base);  /* 16px — readable table row labels */
  color: var(--text-muted);
  font-weight: var(--w-medium);
  border-right: 1px solid var(--border-sub);
  display: flex;
  align-items: center;
  line-height: var(--lh-snug);
}

.vs-compare-val {
  padding: var(--s-4) var(--s-6);
  font-size: var(--t-base);  /* 16px — readable table values */
  font-weight: var(--w-bold);
  display: flex;
  align-items: center;
  border-right: 1px solid var(--border-sub);
  line-height: var(--lh-snug);
}

.vs-compare-val:last-child { border-right: none; }

.vs-val-bad  { color: #C53030; }
.vs-val-good { color: var(--green); }


/* =============================================================================
   BIY HONEST SECTION — when building actually makes sense
   ============================================================================= */
.biy-honest-block {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-10);
  align-items: start;
}

.biy-honest-icon {
  width: 64px;
  height: 64px;
  background: var(--blue-soft);
  border: 2px solid var(--blue-soft2);
  border-radius: var(--r-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: var(--s-2);
}

.biy-honest-icon svg { width: 32px; height: 32px; color: var(--blue); }

.biy-honest-copy .sh-title { margin-bottom: var(--s-4); font-size: var(--t-3xl); }

.biy-honest-copy > p {
  font-size: var(--t-body);
  color: var(--text-sec);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--s-6);
}

.biy-honest-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
  margin-bottom: var(--s-6);
}

.biy-honest-col h4 {
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
  color: var(--text);
  margin-bottom: var(--s-3);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

.biy-honest-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.biy-honest-col li {
  font-size: var(--t-base);
  color: var(--text-sec);
  line-height: var(--lh-relaxed);
  padding-left: var(--s-5);
  position: relative;
}

.biy-honest-col li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--blue);
}

.biy-honest-col li em { font-style: italic; }

.biy-honest-close {
  font-size: var(--t-base);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
  padding: var(--s-4) var(--s-5);
  background: var(--bg-muted);
  border-radius: var(--r-md);
  border-left: 3px solid var(--blue);
  font-style: italic;
}


/* =============================================================================
   BIY RESPONSIVE
   ============================================================================= */
@media (max-width: 1024px) {
  .biy-hero-inner             { grid-template-columns: 1fr; gap: var(--s-8); }
  .biy-iceberg                { display: none; }

  .biy-calc-row               { grid-template-columns: 1fr; gap: var(--s-5); }
  .biy-calc-results           { grid-template-columns: 1fr; }
  .biy-result-vs              { display: none; }

  .vs-problems-grid           { grid-template-columns: repeat(2, 1fr); }
  .vs-problem-card:nth-child(n) { grid-column: span 1; }

  .biy-ai-block               { grid-template-columns: 1fr; gap: var(--s-8); }

  .biy-honest-block           { grid-template-columns: 1fr; }
  .biy-honest-icon            { display: none; }
}

@media (max-width: 768px) {
  .vs-problems-grid           { grid-template-columns: 1fr; }
  .biy-honest-grid            { grid-template-columns: 1fr; }

  /* Collapse compare table: hide dim column, show 2-col */
  .vs-compare-head-row,
  .vs-compare-row             { grid-template-columns: 1fr 1fr; }
  .vs-compare-th-dim,
  .vs-compare-dim             { display: none; }
  .vs-compare-th-build        { border-left: none; }
}

@media (max-width: 480px) {
  .biy-calc-inputs            { padding: var(--s-5); }
  .biy-result-card            { padding: var(--s-5); }
}

/* =============================================================================
   IZENDA PAGE ADDITIONS
   Append after the BIY additions block in vs-pages-biy-additions.css
   ============================================================================= */


/* =============================================================================
   IZ HERO — same 2-col grid as BIY hero
   ============================================================================= */
.iz-hero {
  background: linear-gradient(180deg, var(--bg-blue) 0%, var(--bg) 100%);
  padding-bottom: var(--s-20);
}

.iz-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-16);
  align-items: start;
}


/* =============================================================================
   IZ ACQUISITION TIMELINE CARD
   Left-border color progression: blue (founded) → amber (acquired) → red (legacy)
   Extends the existing vs-vendor-card/vs-vendor-fact structure.
   ============================================================================= */
.iz-timeline-card {
  background: var(--bg);
  border: 1px solid var(--border-sub);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}

.iz-timeline-head {
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-sub);
  padding: var(--s-4) var(--s-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.iz-timeline-head span {
  font-size: var(--t-caption);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--text-muted);
}

.iz-timeline-item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-6);
  border-bottom: 1px solid var(--border-sub);
  border-left: 3px solid transparent;
  transition: background .12s;
}

.iz-timeline-item:last-child { border-bottom: none; }
.iz-timeline-item:hover { background: var(--bg-subtle); }

/* Color progression — tells the acquisition story visually */
.iz-item-ok   { border-left-color: var(--blue); }
.iz-item-warn { border-left-color: #C05621; }
.iz-item-bad  { border-left-color: #E53E3E; }
.iz-item-end  { border-left-color: #C53030; background: rgba(229,62,62,.03); }

.iz-timeline-year {
  font-size: var(--t-caption);
  font-weight: var(--w-xbold);
  font-family: var(--mono);
  color: var(--text-muted);
  line-height: var(--lh-snug);
  padding-top: 2px;
}

.iz-item-end .iz-timeline-year { color: #C53030; }

.iz-timeline-text {
  font-size: var(--t-base);
  color: var(--text-sec);
  line-height: var(--lh-snug);
}

.iz-timeline-text strong {
  color: var(--text);
  font-weight: var(--w-bold);
}

.iz-item-end .iz-timeline-text  { color: var(--text-sec); }
.iz-item-end .iz-timeline-text strong { color: #C53030; }


/* =============================================================================
   IZ RESPONSIVE
   ============================================================================= */
@media (max-width: 1024px) {
  .iz-hero-inner { grid-template-columns: 1fr; gap: var(--s-8); }
  .iz-timeline-card { max-width: 560px; }
}

@media (max-width: 480px) {
  .iz-timeline-item { grid-template-columns: 56px 1fr; gap: var(--s-3); }
}

/* =============================================================================
   SISENSE PAGE ADDITIONS — /vs/sisense/
   Append this block to vs-pages-biy-additions.css
   ============================================================================= */

.si-hero {
  background: linear-gradient(180deg, var(--bg-blue) 0%, var(--bg) 100%);
  padding-bottom: var(--s-20);
}

.si-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-16);
  align-items: start;
}


/* =============================================================================
   SI BLACK BOX CARD — hero right column
   Visualizes Sisense's pricing opacity: every field is locked.
   ============================================================================= */
.si-blackbox {
  background: var(--bg);
  border: 1px solid var(--border-sub);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}

.si-blackbox-head {
  background: var(--navy);
  padding: var(--s-4) var(--s-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  -webkit-font-smoothing: antialiased;
}

.si-blackbox-head span {
  font-size: var(--t-caption);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: rgba(255, 255, 255, 0.55);
}

.si-blackbox-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-6);
  border-bottom: 1px solid var(--border-sub);
  align-items: center;
  transition: background 0.12s;
}

.si-blackbox-item:hover { background: var(--bg-subtle); }
.si-blackbox-item:last-of-type { border-bottom: none; }

.si-blackbox-label {
  font-size: var(--t-base);
  color: var(--text-sec);
  font-weight: var(--w-medium);
  line-height: var(--lh-snug);
}

.si-blackbox-val {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
  color: #C53030;
  white-space: nowrap;
}

.si-blackbox-val svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  stroke: #C53030;
}

.si-blackbox-footer {
  background: var(--blue-soft);
  padding: var(--s-4) var(--s-6);
  border-top: 2px solid var(--blue-soft2);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--blue);
  font-weight: var(--w-bold);
}

.si-blackbox-footer svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--green);
  stroke: var(--green);
}

.si-blackbox-footer a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.si-blackbox-footer a:hover { color: var(--blue-dark); }


/* =============================================================================
   SI RESPONSIVE
   ============================================================================= */
@media (max-width: 1024px) {
  .si-hero-inner { grid-template-columns: 1fr; gap: var(--s-8); }
  .si-blackbox    { max-width: 560px; }
}

@media (max-width: 480px) {
  .si-blackbox-item { grid-template-columns: 1fr; gap: var(--s-1); }
  .si-blackbox-val  { justify-content: flex-start; }
}

/* =============================================================================
   LOGI SYMPHONY PAGE ADDITIONS — /vs/logi-symphony/
   Append this block to vs-pages-biy-additions.css
   ============================================================================= */

.ls-hero {
  background: linear-gradient(180deg, var(--bg-blue) 0%, var(--bg) 100%);
  padding-bottom: var(--s-20);
}

.ls-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-16);
  align-items: start;
}


/* =============================================================================
   LS ACQUISITION STACK CARD — hero right column
   Visualizes the four acquired codebases with status per layer.
   Color coding: blue = active foundation, amber = merged, red = legacy.
   ============================================================================= */
.ls-acq-stack {
  background: var(--bg);
  border: 1px solid var(--border-sub);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}

.ls-acq-head {
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-sub);
  padding: var(--s-4) var(--s-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.ls-acq-head span {
  font-size: var(--t-caption);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--text-muted);
}

.ls-acq-layer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-6);
  border-bottom: 1px solid var(--border-sub);
  border-left: 3px solid transparent;
  transition: background 0.12s;
}

.ls-acq-layer:hover { background: var(--bg-subtle); }

.ls-layer-ok   { border-left-color: var(--blue); }
.ls-layer-warn { border-left-color: #C05621; }
.ls-layer-bad  {
  border-left-color: #E53E3E;
  background: rgba(229, 62, 62, 0.025);
}
.ls-layer-bad:hover { background: rgba(229, 62, 62, 0.05); }

.ls-acq-info { flex: 1; min-width: 0; }

.ls-acq-name {
  font-size: var(--t-base);
  font-weight: var(--w-bold);
  color: var(--text);
  line-height: var(--lh-snug);
}

.ls-layer-bad .ls-acq-name { color: #C53030; }

.ls-acq-meta {
  font-size: var(--t-caption);
  color: var(--text-muted);
  margin-top: 2px;
  font-family: var(--mono);
  line-height: 1.4;
}

/* Dashed seam divider between active and legacy layers */
.ls-acq-seam {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-5);
  background: rgba(229, 62, 62, 0.04);
  border-top: 1px dashed rgba(229, 62, 62, 0.25);
  border-bottom: 1px dashed rgba(229, 62, 62, 0.25);
}

.ls-acq-seam-label {
  font-size: 10px;
  font-weight: var(--w-xbold);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: #C53030;
  white-space: nowrap;
  flex-shrink: 0;
}

.ls-acq-seam-line {
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(
    90deg,
    rgba(229, 62, 62, 0.35) 0,
    rgba(229, 62, 62, 0.35) 5px,
    transparent 5px,
    transparent 10px
  );
}

.ls-acq-footer {
  padding: var(--s-4) var(--s-6);
  background: var(--navy);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  color: rgba(255, 255, 255, 0.7);
  -webkit-font-smoothing: antialiased;
}

.ls-acq-footer svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.6;
}


/* =============================================================================
   LS MIGRATION CARD — "Coming from Izenda?" section
   ============================================================================= */
.ls-migration-card {
  background: var(--bg);
  border: 1px solid var(--border-sub);
  border-left: 4px solid var(--blue);
  border-radius: var(--r-lg);
  padding: var(--s-8) var(--s-10);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-8);
  align-items: start;
  box-shadow: var(--sh-sm);
}

.ls-migration-icon {
  width: 56px;
  height: 56px;
  background: var(--blue-soft);
  border: 2px solid var(--blue-soft2);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: var(--s-1);
}

.ls-migration-icon svg {
  width: 26px;
  height: 26px;
  color: var(--blue);
}

.ls-migration-copy h3 {
  font-size: var(--t-2xl);
  font-weight: var(--w-bold);
  color: var(--text);
  margin-bottom: var(--s-4);
  line-height: var(--lh-snug);
}

.ls-migration-copy p {
  font-size: var(--t-body);
  color: var(--text-sec);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--s-4);
}

.ls-migration-copy p:last-of-type { margin-bottom: 0; }


/* =============================================================================
   LS RESPONSIVE
   ============================================================================= */
@media (max-width: 1024px) {
  .ls-hero-inner  { grid-template-columns: 1fr; gap: var(--s-8); }
  .ls-acq-stack   { max-width: 560px; }
}

@media (max-width: 768px) {
  .ls-migration-card { grid-template-columns: 1fr; gap: var(--s-5); padding: var(--s-6); }
  .ls-migration-icon { display: none; }
}

@media (max-width: 480px) {
  .ls-acq-layer   { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .ls-acq-meta    { white-space: normal; }
}

/* =============================================================================
   CRYSTAL REPORTS PAGE ADDITIONS — /vs/crystal-reports/
   Append this block to vs-pages-biy-additions.css
   ============================================================================= */

.cr-hero {
  background: linear-gradient(180deg, var(--bg-blue) 0%, var(--bg) 100%);
  padding-bottom: var(--s-20);
}

.cr-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-16);
  align-items: start;
}


/* =============================================================================
   CR LIFECYCLE TIMELINE CARD — hero right column
   Version history hitting a visible support wall at 2027.
   Color: blue (founded) → amber (SAP acquisition) → red (maintenance end) → wall
   ============================================================================= */
.cr-timeline-card {
  background: var(--bg);
  border: 1px solid var(--border-sub);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}

.cr-timeline-head {
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-sub);
  padding: var(--s-4) var(--s-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.cr-timeline-head span {
  font-size: var(--t-caption);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--text-muted);
}

.cr-timeline-item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-6);
  border-bottom: 1px solid var(--border-sub);
  border-left: 3px solid transparent;
  transition: background 0.12s;
}

.cr-timeline-item:hover { background: var(--bg-subtle); }

.cr-item-ok   { border-left-color: var(--blue); }
.cr-item-warn { border-left-color: #C05621; }
.cr-item-bad  {
  border-left-color: #E53E3E;
  background: rgba(229, 62, 62, 0.03);
}
.cr-item-bad:hover { background: rgba(229, 62, 62, 0.06); }
.cr-item-wall {
  border-left-color: #C53030;
  background: rgba(229, 62, 62, 0.05);
  border-bottom: none;
}
.cr-item-wall:hover { background: rgba(229, 62, 62, 0.09); }

.cr-timeline-year {
  font-size: var(--t-caption);
  font-weight: var(--w-xbold);
  font-family: var(--mono);
  color: var(--text-muted);
  line-height: var(--lh-snug);
  padding-top: 2px;
}

.cr-item-bad .cr-timeline-year,
.cr-item-wall .cr-timeline-year { color: #C53030; }

.cr-timeline-text {
  font-size: var(--t-base);
  color: var(--text-sec);
  line-height: var(--lh-snug);
}

.cr-item-wall .cr-timeline-text strong { color: #C53030; }

/* The wall — visual boundary at the end of the timeline */
.cr-timeline-wall {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-6);
  background: rgba(229, 62, 62, 0.06);
  border-top: 3px solid #C53030;
}

.cr-timeline-wall-label {
  font-size: 10px;
  font-weight: var(--w-xbold);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: #C53030;
  white-space: nowrap;
  flex-shrink: 0;
}

.cr-timeline-wall-fill {
  flex: 1;
  height: 3px;
  background: repeating-linear-gradient(
    90deg,
    rgba(197, 48, 48, 0.45) 0,
    rgba(197, 48, 48, 0.45) 7px,
    transparent 7px,
    transparent 14px
  );
}


/* =============================================================================
   CR RESPONSIVE
   ============================================================================= */
@media (max-width: 1024px) {
  .cr-hero-inner   { grid-template-columns: 1fr; gap: var(--s-8); }
  .cr-timeline-card { max-width: 560px; }
}

@media (max-width: 480px) {
  .cr-timeline-item { grid-template-columns: 56px 1fr; gap: var(--s-3); }
}

/* =============================================================================
   SSRS PAGE ADDITIONS — /vs/ssrs/
   Append this block to vs-pages-biy-additions.css
   ============================================================================= */

.ss-hero {
  background: linear-gradient(180deg, var(--bg-blue) 0%, var(--bg) 100%);
  padding-bottom: var(--s-20);
}

.ss-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-16);
  align-items: start;
}


/* =============================================================================
   SS LIFECYCLE TIMELINE CARD — hero right column
   Same visual pattern as the Crystal Reports cr-timeline-card.
   Version history hitting the support wall at Jan 2033.
   ============================================================================= */
.ss-timeline-card {
  background: var(--bg);
  border: 1px solid var(--border-sub);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}

.ss-timeline-head {
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-sub);
  padding: var(--s-4) var(--s-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.ss-timeline-head span {
  font-size: var(--t-caption);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--text-muted);
}

.ss-timeline-item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-6);
  border-bottom: 1px solid var(--border-sub);
  border-left: 3px solid transparent;
  transition: background 0.12s;
}

.ss-timeline-item:hover { background: var(--bg-subtle); }

.ss-item-ok   { border-left-color: var(--blue); }
.ss-item-warn { border-left-color: #C05621; }
.ss-item-bad  {
  border-left-color: #E53E3E;
  background: rgba(229, 62, 62, 0.03);
}
.ss-item-bad:hover { background: rgba(229, 62, 62, 0.06); }
.ss-item-wall {
  border-left-color: #C53030;
  background: rgba(229, 62, 62, 0.05);
  border-bottom: none;
}
.ss-item-wall:hover { background: rgba(229, 62, 62, 0.09); }

.ss-timeline-year {
  font-size: var(--t-caption);
  font-weight: var(--w-xbold);
  font-family: var(--mono);
  color: var(--text-muted);
  line-height: var(--lh-snug);
  padding-top: 2px;
}

.ss-item-bad .ss-timeline-year,
.ss-item-wall .ss-timeline-year { color: #C53030; }

.ss-timeline-text {
  font-size: var(--t-base);
  color: var(--text-sec);
  line-height: var(--lh-snug);
}

.ss-item-wall .ss-timeline-text strong { color: #C53030; }

/* The wall — visual boundary at the end of the timeline */
.ss-timeline-wall {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-6);
  background: rgba(229, 62, 62, 0.06);
  border-top: 3px solid #C53030;
}

.ss-timeline-wall-label {
  font-size: 10px;
  font-weight: var(--w-xbold);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: #C53030;
  white-space: nowrap;
  flex-shrink: 0;
}

.ss-timeline-wall-fill {
  flex: 1;
  height: 3px;
  background: repeating-linear-gradient(
    90deg,
    rgba(197, 48, 48, 0.45) 0,
    rgba(197, 48, 48, 0.45) 7px,
    transparent 7px,
    transparent 14px
  );
}


/* =============================================================================
   SS RESPONSIVE
   ============================================================================= */
@media (max-width: 1024px) {
  .ss-hero-inner    { grid-template-columns: 1fr; gap: var(--s-8); }
  .ss-timeline-card { max-width: 560px; }
}

@media (max-width: 480px) {
  .ss-timeline-item { grid-template-columns: 56px 1fr; gap: var(--s-3); }
}


/* =============================================================================
   POWER BI EMBEDDED PAGE ADDITIONS — /vs/power-bi-embedded/
   Append this block to vs-pages-biy-additions.css
   ============================================================================= */

.pb-hero {
  background: linear-gradient(180deg, var(--bg-blue) 0%, var(--bg) 100%);
  padding-bottom: var(--s-20);
}

.pb-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-16);
  align-items: start;
}


/* =============================================================================
   PB COST SPIKE CHART CARD — hero right column
   Bar chart illustrating A SKU billing spikes vs Yurbi flat rate.
   Bars grow upward from flex-end baseline; pb-flat-line is Yurbi's cost.
   ============================================================================= */
.pb-chart-card {
  background: var(--bg);
  border: 1px solid var(--border-sub);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}

.pb-chart-head {
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-sub);
  padding: var(--s-4) var(--s-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.pb-chart-head span {
  font-size: var(--t-caption);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--text-muted);
}

.pb-chart-body {
  padding: var(--s-5) var(--s-6) 0;
}

/* Bar chart container — bars grow upward from flex-end */
.pb-bars-wrap {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 160px;
}

/* Yurbi flat cost line — at 28% from bottom (~$833 / $3,000 max) */
.pb-flat-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 28%;
  height: 2px;
  background: var(--green);
  border-radius: 1px;
  z-index: 2;
  pointer-events: none;
}

/* Each month column */
.pb-bar-col {
  flex: 1;
  display: flex;
  align-items: flex-end;
  height: 100%;
  position: relative;
  z-index: 1;
}

/* Spike month column — subtle red wash behind bar */
.pb-bar-col.is-spike {
  background: rgba(229, 62, 62, 0.05);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}

/* The bar itself */
.pb-bar {
  width: 100%;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}

/* A1 SKU — ~$750/mo ≈ 25% of $3,000 max */
.pb-bar-low {
  height: 25%;
  background: rgba(0, 95, 172, 0.30);
}

/* A2 SKU — ~$1,500/mo ≈ 50% of $3,000 max */
.pb-bar-mid {
  height: 50%;
  background: rgba(0, 95, 172, 0.50);
}

/* A3 SKU spike — ~$3,000/mo = 100% of chart height */
.pb-bar-spike {
  height: 100%;
  background: #E53E3E;
}

/* Month label row below bars */
.pb-months-row {
  display: flex;
  gap: 4px;
  padding: var(--s-2) 0 var(--s-4);
}

.pb-month-label {
  flex: 1;
  font-size: 9px;
  font-weight: var(--w-bold);
  text-align: center;
  color: var(--text-muted);
  text-transform: uppercase;
}

.pb-month-label.is-spike {
  color: #C53030;
}

/* Legend */
.pb-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  padding: var(--s-3) var(--s-6);
  border-top: 1px solid var(--border-sub);
  background: var(--bg-subtle);
}

.pb-chart-legend > span {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-caption);
  color: var(--text-sec);
}

.pb-leg-bar {
  display: inline-block;
  width: 12px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

.pb-leg-low   { background: rgba(0, 95, 172, 0.30); }
.pb-leg-spike { background: #E53E3E; }

.pb-leg-line {
  display: inline-block;
  width: 16px;
  height: 2px;
  background: var(--green);
  border-radius: 1px;
  flex-shrink: 0;
}

/* Warning note below chart */
.pb-chart-note {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-6);
  font-size: var(--t-sm);
  color: var(--text-sec);
  border-top: 1px solid var(--border-sub);
  line-height: var(--lh-relaxed);
}

.pb-chart-note > svg {
  width: 15px;
  height: 15px;
  color: #C05621;
  flex-shrink: 0;
  margin-top: 2px;
}


/* =============================================================================
   PB RESPONSIVE
   ============================================================================= */
@media (max-width: 1024px) {
  .pb-hero-inner { grid-template-columns: 1fr; gap: var(--s-8); }
  .pb-chart-card { max-width: 560px; }
}

/* =============================================================================
   GOODDATA PAGE ADDITIONS — /vs/gooddata/
   Append this block to vs-pages-biy-additions.css
   ============================================================================= */

.gd-hero {
  background: linear-gradient(180deg, var(--bg-blue) 0%, var(--bg) 100%);
  padding-bottom: var(--s-20);
}

.gd-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-16);
  align-items: start;
}


/* =============================================================================
   GD ENTERPRISE GATE CARD — hero right column
   Shows what ISVs need vs which GoodData plan provides it.
   Pattern: feature label on left, plan status on right with color coding.
   Enterprise-gated features use gd-val-gate (orange with ↗ indicator).
   ============================================================================= */
.gd-gate-card {
  background: var(--bg);
  border: 1px solid var(--border-sub);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}

.gd-gate-head {
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-sub);
  padding: var(--s-4) var(--s-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.gd-gate-head span {
  font-size: var(--t-caption);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--text-muted);
  flex: 1;
  min-width: 0;
}

.gd-gate-head .tag {
  flex-shrink: 0;
}

/* Feature rows */
.gd-gate-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-6);
  border-bottom: 1px solid var(--border-sub);
  transition: background 0.12s;
}

.gd-gate-row:hover { background: var(--bg-subtle); }

.gd-gate-row:last-of-type { border-bottom: none; }

.gd-gate-feat {
  font-size: var(--t-sm);
  color: var(--text-sec);
  font-weight: var(--w-medium);
  flex-shrink: 0;
}

.gd-gate-val {
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
  text-align: right;
  line-height: var(--lh-snug);
}

/* Value color variants */
.gd-val-bad  { color: #C53030; }
.gd-val-warn { color: #C05621; }

/* Enterprise-gated: available but locked behind Enterprise plan */
.gd-val-gate {
  color: #C05621;
  background: rgba(221, 107, 32, 0.08);
  border: 1px solid rgba(221, 107, 32, 0.18);
  border-radius: var(--r-sm);
  padding: 2px var(--s-2);
  white-space: nowrap;
}

/* Footer warning */
.gd-gate-footer {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-6);
  background: rgba(229, 62, 62, 0.04);
  border-top: 2px solid rgba(229, 62, 62, 0.15);
}

.gd-gate-footer > svg {
  width: 16px;
  height: 16px;
  color: #C53030;
  flex-shrink: 0;
  margin-top: 3px;
}

.gd-gate-footer strong {
  display: block;
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
  color: #C53030;
  margin-bottom: var(--s-1);
}

.gd-gate-footer span {
  font-size: var(--t-caption);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
}


/* =============================================================================
   GD RESPONSIVE
   ============================================================================= */
@media (max-width: 1024px) {
  .gd-hero-inner  { grid-template-columns: 1fr; gap: var(--s-8); }
  .gd-gate-card   { max-width: 560px; }
}

/* =============================================================================
   REVEAL BI PAGE ADDITIONS — /vs/reveal-bi/
   Append this block to vs-pages-biy-additions.css
   ============================================================================= */

.rv-hero {
  background: linear-gradient(180deg, var(--bg-blue) 0%, var(--bg) 100%);
  padding-bottom: var(--s-20);
}

.rv-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-16);
  align-items: start;
}


/* =============================================================================
   RV SDK OWNERSHIP CARD — hero right column
   Shows what Reveal BI SDK integration permanently means for your dev team.
   Each row: task label on left, burden description on right with color coding.
   Footer: Yurbi's contrast — iframe independence.
   ============================================================================= */
.rv-sdk-card {
  background: var(--bg);
  border: 1px solid var(--border-sub);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}

.rv-sdk-head {
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-sub);
  padding: var(--s-4) var(--s-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.rv-sdk-head span {
  font-size: var(--t-caption);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--text-muted);
  flex: 1;
  min-width: 0;
}

.rv-sdk-head .tag {
  flex-shrink: 0;
}

/* Feature rows */
.rv-sdk-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-6);
  border-bottom: 1px solid var(--border-sub);
  transition: background 0.12s;
}

.rv-sdk-row:hover { background: var(--bg-subtle); }

.rv-sdk-row:last-of-type { border-bottom: none; }

.rv-sdk-label {
  font-size: var(--t-sm);
  color: var(--text-sec);
  font-weight: var(--w-medium);
  flex-shrink: 0;
}

.rv-sdk-val {
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
  text-align: right;
  line-height: var(--lh-snug);
}

.rv-val-bad  { color: #C53030; }
.rv-val-warn { color: #C05621; }

/* Green footer — Yurbi contrast */
.rv-sdk-footer {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-6);
  background: var(--green-soft);
  border-top: 1px solid var(--green-border);
}

.rv-sdk-footer > svg {
  width: 16px;
  height: 16px;
  color: var(--green);
  flex-shrink: 0;
  margin-top: 3px;
}

.rv-sdk-footer strong {
  display: block;
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
  color: var(--green);
  margin-bottom: var(--s-1);
}

.rv-sdk-footer span {
  font-size: var(--t-caption);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
}


/* =============================================================================
   RV RESPONSIVE
   ============================================================================= */
@media (max-width: 1024px) {
  .rv-hero-inner { grid-template-columns: 1fr; gap: var(--s-8); }
  .rv-sdk-card   { max-width: 560px; }
}

/* =============================================================================
   JASPERSOFT PAGE ADDITIONS — /vs/jaspersoft/
   Append this block to vs-pages-biy-additions.css
   ============================================================================= */

.js-hero {
  background: linear-gradient(180deg, var(--bg-blue) 0%, var(--bg) 100%);
  padding-bottom: var(--s-20);
}

.js-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-16);
  align-items: start;
}


/* =============================================================================
   JS DEPLOYMENT STACK CARD — hero right column
   Shows each layer required to get Jaspersoft running, stacked bottom-up.
   The visual tells the complexity story — and the "who set it up" dependency.
   ============================================================================= */
.js-stack-card {
  background: var(--bg);
  border: 1px solid var(--border-sub);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}

.js-stack-head {
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-sub);
  padding: var(--s-4) var(--s-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.js-stack-head span {
  font-size: var(--t-caption);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--text-muted);
  flex: 1;
  min-width: 0;
}

.js-stack-head .tag {
  flex-shrink: 0;
}

/* Stack layers — each one a deployment requirement */
.js-stack-layer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-6);
  border-bottom: 1px solid var(--border-sub);
  transition: background 0.12s;
}

.js-stack-layer:hover { background: var(--bg-subtle); }

/* Top layer — the actual analytics, at the end of the stack */
.js-stack-layer-top {
  background: rgba(0, 95, 172, 0.03);
  border-bottom: none;
}

.js-layer-label {
  font-size: var(--t-sm);
  font-weight: var(--w-semibold);
  color: var(--text);
}

/* Badge showing the requirement/status */
.js-layer-badge {
  font-size: 11px;
  font-weight: var(--w-bold);
  border-radius: var(--r-sm);
  padding: 2px var(--s-2);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Required layer — orange warning */
.js-badge-req {
  color: #C05621;
  background: rgba(221, 107, 32, 0.1);
  border: 1px solid rgba(221, 107, 32, 0.2);
}

/* Top layer — neutral/blue (finally the analytics) */
.js-badge-ok {
  color: var(--blue);
  background: var(--blue-soft);
  border: 1px solid var(--blue-soft2);
}

/* Footer — the cautionary note */
.js-stack-footer {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-6);
  background: rgba(229, 62, 62, 0.04);
  border-top: 2px solid rgba(229, 62, 62, 0.15);
}

.js-stack-footer > svg {
  width: 16px;
  height: 16px;
  color: #C05621;
  flex-shrink: 0;
  margin-top: 3px;
}

.js-stack-footer strong {
  display: block;
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
  color: var(--text);
  margin-bottom: var(--s-1);
  line-height: var(--lh-snug);
}

.js-stack-footer span {
  font-size: var(--t-caption);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
}


/* =============================================================================
   JS RESPONSIVE
   ============================================================================= */
@media (max-width: 1024px) {
  .js-hero-inner  { grid-template-columns: 1fr; gap: var(--s-8); }
  .js-stack-card  { max-width: 560px; }
}


/* =============================================================================
   APACHE SUPERSET PAGE ADDITIONS — /vs/superset/
   Append this block to vs-pages-biy-additions.css
   ============================================================================= */

.sp-hero {
  background: linear-gradient(180deg, var(--bg-blue) 0%, var(--bg) 100%);
  padding-bottom: var(--s-20);
}

.sp-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-16);
  align-items: start;
}


/* =============================================================================
   SP ISV REQUIREMENTS CARD — hero right column
   Shows what ISV embedding requires and what Superset provides at each point.
   Each row: requirement label on left, Superset's answer on right.
   Red = not supported, orange = custom engineering required.
   Footer: Yurbi contrast — included at every plan.
   ============================================================================= */
.sp-req-card {
  background: var(--bg);
  border: 1px solid var(--border-sub);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}

.sp-req-head {
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-sub);
  padding: var(--s-4) var(--s-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.sp-req-head span {
  font-size: var(--t-caption);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--text-muted);
  flex: 1;
  min-width: 0;
}

.sp-req-head .tag {
  flex-shrink: 0;
}

/* Requirement rows */
.sp-req-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-6);
  border-bottom: 1px solid var(--border-sub);
  transition: background 0.12s;
}

.sp-req-row:hover { background: var(--bg-subtle); }

.sp-req-row:last-of-type { border-bottom: none; }

.sp-req-label {
  font-size: var(--t-sm);
  color: var(--text-sec);
  font-weight: var(--w-medium);
  flex-shrink: 0;
  max-width: 55%;
}

.sp-req-status {
  font-size: 11px;
  font-weight: var(--w-bold);
  text-align: right;
  line-height: var(--lh-snug);
  border-radius: var(--r-sm);
  padding: 2px var(--s-2);
  white-space: nowrap;
}

/* Not supported — red */
.sp-status-bad {
  color: #C53030;
  background: rgba(229, 62, 62, 0.08);
  border: 1px solid rgba(229, 62, 62, 0.18);
}

/* Custom engineering required — orange */
.sp-status-warn {
  color: #C05621;
  background: rgba(221, 107, 32, 0.08);
  border: 1px solid rgba(221, 107, 32, 0.18);
}

/* Green footer — Yurbi contrast */
.sp-req-footer {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-6);
  background: var(--green-soft);
  border-top: 1px solid var(--green-border);
}

.sp-req-footer > svg {
  width: 16px;
  height: 16px;
  color: var(--green);
  flex-shrink: 0;
  margin-top: 3px;
}

.sp-req-footer strong {
  display: block;
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
  color: var(--green);
  margin-bottom: var(--s-1);
}

.sp-req-footer span {
  font-size: var(--t-caption);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
}


/* =============================================================================
   SP RESPONSIVE
   ============================================================================= */
@media (max-width: 1024px) {
  .sp-hero-inner { grid-template-columns: 1fr; gap: var(--s-8); }
  .sp-req-card   { max-width: 560px; }
}

/* =============================================================================
   YELLOWFIN BI PAGE ADDITIONS — /vs/yellowfinbi/
   Append this block to vs-pages-biy-additions.css
   ============================================================================= */

.yf-hero {
  background: linear-gradient(180deg, var(--bg-blue) 0%, var(--bg) 100%);
  padding-bottom: var(--s-20);
}

.yf-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-16);
  align-items: start;
}


/* =============================================================================
   YF ACQUISITION TIMELINE CARD — hero right column
   Follows the established iz-timeline-card visual pattern.
   Shows Yellowfin's ownership path: independent → Idera (PE-backed, 30+ brands).
   Left-border color tells the story: blue (founded) → orange (acquired/today).
   ============================================================================= */
.yf-acq-card {
  background: var(--bg);
  border: 1px solid var(--border-sub);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}

.yf-acq-head {
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-sub);
  padding: var(--s-4) var(--s-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.yf-acq-head span {
  font-size: var(--t-caption);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--text-muted);
  flex: 1;
  min-width: 0;
}

.yf-acq-head .tag {
  flex-shrink: 0;
}

/* Timeline items — each one an ownership event */
.yf-acq-item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-6);
  border-bottom: 1px solid var(--border-sub);
  border-left: 3px solid transparent;
  transition: background 0.12s;
}

.yf-acq-item:hover { background: var(--bg-subtle); }

/* Independent era — blue */
.yf-item-ok {
  border-left-color: var(--blue);
}

/* Acquisition warning — orange */
.yf-item-warn {
  border-left-color: #C05621;
  background: rgba(221, 107, 32, 0.03);
}
.yf-item-warn:hover { background: rgba(221, 107, 32, 0.06); }

/* Current state */
.yf-item-end {
  border-left-color: #C05621;
  background: rgba(221, 107, 32, 0.04);
  border-bottom: none;
}
.yf-item-end:hover { background: rgba(221, 107, 32, 0.07); }

.yf-acq-year {
  font-size: var(--t-caption);
  font-weight: var(--w-xbold);
  font-family: var(--mono);
  color: var(--text-muted);
  line-height: var(--lh-snug);
  padding-top: 2px;
}

.yf-item-warn .yf-acq-year,
.yf-item-end  .yf-acq-year { color: #C05621; }

.yf-acq-text {
  font-size: var(--t-base);
  color: var(--text-sec);
  line-height: var(--lh-snug);
}

.yf-item-end .yf-acq-text strong { color: var(--text); }

/* Measured, non-alarmist contextual note at the bottom */
.yf-acq-note {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-6);
  background: rgba(221, 107, 32, 0.04);
  border-top: 1px solid rgba(221, 107, 32, 0.15);
}

.yf-acq-note > svg {
  width: 15px;
  height: 15px;
  color: #C05621;
  flex-shrink: 0;
  margin-top: 2px;
}

.yf-acq-note span {
  font-size: var(--t-caption);
  color: var(--text-sec);
  line-height: var(--lh-relaxed);
}


/* =============================================================================
   YF RESPONSIVE
   ============================================================================= */
@media (max-width: 1024px) {
  .yf-hero-inner { grid-template-columns: 1fr; gap: var(--s-8); }
  .yf-acq-card   { max-width: 560px; }
}

@media (max-width: 480px) {
  .yf-acq-item { grid-template-columns: 56px 1fr; gap: var(--s-3); }
}