/* =============================================================================
   SOLUTIONS PAGES — solutions.css
   Shared across all /solutions/* pages.
   Class prefix: sol-*
   WCAG AA: contrast ratios verified against global design tokens.
   Body copy minimum: --t-base (16px). --t-sm for UI chrome only.
   ============================================================================= */


/* =============================================================================
   HERO
   ============================================================================= */
.sol-hero {
  background: linear-gradient(160deg, var(--bg-blue) 0%, var(--bg) 65%);
}

.sol-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-14);
  align-items: center;
}

.sol-hero-copy h1 {
  font-size: var(--t-hero-page);  /* 52px — rule #12 */
  margin-top: var(--s-3);
  margin-bottom: var(--s-5);
}

.sol-hero-sub {
  font-size: var(--t-lead);       /* 18px */
  color: var(--text-sec);
  line-height: var(--lh-relaxed);
  max-width: 480px;
  margin-bottom: var(--s-8);
}

.sol-hero-ctas {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}


/* =============================================================================
   BEFORE / AFTER COMPARISON PANEL
   ============================================================================= */
.sol-ba-panel {
  background: var(--bg);
  border: 1px solid var(--border-sub);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-lg);
}

.sol-ba-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.sol-ba-col-before,
.sol-ba-col-after {
  padding: var(--s-4) var(--s-5);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);         /* 14px — column label UI chrome */
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

.sol-ba-col-before {
  background: rgba(197,48,48,.06);
  border-bottom: 2px solid rgba(197,48,48,.25);
  border-right: 1px solid var(--border-sub);
  color: #C53030;                 /* 5.1:1 on white ✓ */
}

.sol-ba-col-after {
  background: rgba(4,122,24,.05);
  border-bottom: 2px solid var(--green);
  color: var(--green);            /* #047A18 — 4.7:1 on white ✓ */
}

.sol-ba-col-before svg,
.sol-ba-col-after svg { width: 14px; height: 14px; }

.sol-ba-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--border-sub);
}

.sol-ba-row:last-child { border-bottom: none; }

.sol-ba-cell {
  padding: var(--s-4) var(--s-5);
  font-size: var(--t-base);       /* 16px ✓ */
  line-height: var(--lh-snug);
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
}

.sol-ba-cell svg {
  width: 15px; height: 15px;
  flex-shrink: 0;
  margin-top: 2px;
}

.sol-ba-cell-bad {
  color: var(--text-sec);
  border-right: 1px solid var(--border-sub);
}

.sol-ba-cell-bad svg { color: #C53030; }

.sol-ba-cell-good {
  background: rgba(4,122,24,.03);
  color: var(--text);
  font-weight: var(--w-semibold);
}

.sol-ba-cell-good svg { color: var(--green); }


/* =============================================================================
   PAIN CARDS — "Who This Is For"
   ============================================================================= */
.sol-pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}

.sol-pain-card {
  background: var(--bg);
  border: 1px solid var(--border-sub);
  border-radius: var(--r-xl);
  padding: var(--s-7);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}

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

.sol-pain-icon {
  width: 44px; height: 44px;
  background: var(--blue-soft);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  margin-bottom: var(--s-4);
}

.sol-pain-icon svg { width: 20px; height: 20px; }

.sol-pain-card h3 {
  font-size: var(--t-base);       /* 16px */
  font-weight: var(--w-xbold);
  color: var(--text);
  line-height: var(--lh-snug);
  margin-bottom: var(--s-2);
}

.sol-pain-card p {
  font-size: var(--t-base);       /* 16px ✓ */
  color: var(--text-sec);
  line-height: var(--lh-relaxed);
  margin: 0;
}


/* =============================================================================
   FEATURE CARDS — "What Customers Get"
   ============================================================================= */
.sol-feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}

.sol-feat-grid-2 { grid-template-columns: repeat(2, 1fr); }

.sol-feat-card {
  background: var(--bg);
  border: 1px solid var(--border-sub);
  border-radius: var(--r-xl);
  padding: var(--s-7);
  transition: border-color .18s, box-shadow .18s;
}

.sol-feat-card:hover {
  border-color: var(--blue);
  box-shadow: var(--sh-md);
}

.sol-feat-card-wide {
  grid-column: span 3;
  background: var(--blue-soft);
  border-color: var(--blue-soft2);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-6);
  align-items: center;
}

.sol-feat-card-wide:hover {
  border-color: var(--blue);
  box-shadow: var(--sh-blue);
}

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

.sol-feat-card-wide .sol-feat-icon {
  width: 52px; height: 52px;
  background: rgba(0,95,172,.12);
  border: 1px solid var(--blue-soft2);
  margin-bottom: 0;
}

.sol-feat-icon svg { width: 20px; height: 20px; }
.sol-feat-card-wide .sol-feat-icon svg { width: 24px; height: 24px; }

.sol-feat-card h4 {
  font-size: var(--t-card);       /* 19px */
  font-weight: var(--w-xbold);
  color: var(--text);
  line-height: var(--lh-snug);
  margin-bottom: var(--s-2);
}

.sol-feat-card-wide h4 { font-size: var(--t-xl); }  /* 22px */

.sol-feat-card p {
  font-size: var(--t-base);       /* 16px ✓ */
  color: var(--text-sec);
  line-height: var(--lh-relaxed);
  margin: 0;
}


/* =============================================================================
   BUILD VS BUY BANNER
   ============================================================================= */
.sol-calc-banner {
  background: var(--navy);
  border-radius: var(--r-xl);
  padding: var(--s-10) var(--s-12);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-8);
  align-items: center;
  position: relative;
  overflow: hidden;
}

.sol-calc-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 40% 100% at 0% 50%, rgba(0,95,172,.3) 0%, transparent 65%);
  pointer-events: none;
}

.sol-calc-banner > * { position: relative; z-index: 1; }

.sol-calc-banner-icon {
  width: 56px; height: 56px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

.sol-calc-banner-icon svg { width: 28px; height: 28px; }

.sol-calc-banner-body h2 {
  font-size: var(--t-2xl);        /* 26px */
  color: #fff;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  margin-bottom: var(--s-2);
}

.sol-calc-banner-body p {
  font-size: var(--t-base);       /* 16px ✓ */
  color: var(--on-dark-sec);      /* #C8DCE9 — 4.8:1 ✓ */
  line-height: var(--lh-relaxed);
  margin: 0;
  max-width: 460px;
}

.sol-calc-banner-actions {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  align-items: flex-end;
  flex-shrink: 0;
}

.sol-calc-banner-link {
  font-size: var(--t-base);       /* 16px ✓ */
  font-weight: var(--w-semibold);
  color: var(--on-dark-link);     /* #D8E8F2 — 5.6:1 ✓ */
  text-decoration: underline;
  text-align: right;
  transition: color .15s;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.sol-calc-banner-link:hover { color: #fff; }


/* =============================================================================
   HOW IT WORKS — Steps
   CSS counter generates 01 / 02 / 03 automatically.
   ============================================================================= */
.sol-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  counter-reset: sol-step-counter;
}

.sol-step {
  background: var(--bg);
  border: 1px solid var(--border-sub);
  border-radius: var(--r-xl);
  padding: var(--s-8) var(--s-6);
  counter-increment: sol-step-counter;
  text-align: center;
}

.sol-step::before {
  content: counter(sol-step-counter, decimal-leading-zero);
  display: block;
  font-size: 2.5rem;
  font-weight: var(--w-xbold);
  color: var(--bg-muted);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--s-4);
}

.sol-step h3 {
  font-size: var(--t-card);       /* 19px */
  font-weight: var(--w-xbold);
  color: var(--text);
  line-height: var(--lh-snug);
  margin-bottom: var(--s-2);
}

.sol-step p {
  font-size: var(--t-base);       /* 16px ✓ */
  color: var(--text-sec);
  line-height: var(--lh-relaxed);
  margin: 0;
}

.sol-steps-note { margin-top: var(--s-8); }


/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 1024px) {
  .sol-hero-grid {
    grid-template-columns: 1fr;
    gap: var(--s-10);
  }
  .sol-ba-panel { max-width: 580px; }
  .sol-pain-grid { grid-template-columns: repeat(2, 1fr); }
  .sol-feat-grid { grid-template-columns: repeat(2, 1fr); }
  .sol-feat-grid-2 { grid-template-columns: 1fr; }
  .sol-feat-card-wide { grid-column: span 2; }
  .sol-calc-banner {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: var(--s-6);
    padding: var(--s-8);
  }
  .sol-calc-banner-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }
  .sol-calc-banner-link { text-align: left; }
  .sol-steps { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .sol-feat-grid { grid-template-columns: 1fr; }
  .sol-feat-card-wide {
    grid-column: span 1;
    grid-template-columns: 1fr;
  }
  .sol-feat-card-wide .sol-feat-icon { margin-bottom: var(--s-4); }
  .sol-calc-banner {
    grid-template-columns: 1fr;
    padding: var(--s-7) var(--s-6);
  }
  .sol-calc-banner-icon { display: none; }
  .sol-calc-banner-actions {
    grid-column: 1;
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .sol-pain-grid { grid-template-columns: 1fr; }
  .sol-step::before { font-size: 2rem; }
  .sol-ba-cell { padding: var(--s-3) var(--s-4); }
}


/* =============================================================================
   LEGACY REPLACEMENT PAGE — leg-* prefix
   ============================================================================= */

/* ── Problem cards (Crystal / SSRS / Izenda) ── */
.leg-problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}

.leg-problem-card {
  background: var(--bg);
  border: 1px solid var(--border-sub);
  border-radius: var(--r-xl);
  overflow: hidden;
}

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

.leg-tool-badge {
  font-size: var(--t-sm);        /* 14px — badge UI chrome ✓ */
  font-weight: var(--w-bold);
  padding: 4px 12px;
  border-radius: var(--r-full);
}

.leg-badge-crystal { background: rgba(197,48,48,.1);  color: #C53030; border: 1px solid rgba(197,48,48,.2); }
.leg-badge-ssrs    { background: var(--blue-soft);     color: var(--blue);  border: 1px solid var(--blue-soft2); }
.leg-badge-izenda  { background: rgba(221,107,32,.1);  color: #C05621; border: 1px solid rgba(221,107,32,.2); }

.leg-compare-link {
  font-size: var(--t-sm);
  font-weight: var(--w-semibold);
  color: var(--blue);
  white-space: nowrap;
}
.leg-compare-link:hover { text-decoration: underline; }

.leg-problem-list {
  list-style: none;
  padding: var(--s-5) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.leg-problem-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font-size: var(--t-base);      /* 16px ✓ */
  color: var(--text-sec);
  line-height: var(--lh-snug);
}

.leg-problem-list li svg {
  width: 15px; height: 15px;
  color: #C53030;
  flex-shrink: 0;
  margin-top: 3px;
}


/* ── Comparison table (legacy vs Yurbi) ── */
.leg-compare-table {
  border: 1px solid var(--border-sub);
  border-radius: var(--r-xl);
  overflow: hidden;
}

.leg-ct-head,
.leg-ct-row {
  display: grid;
  grid-template-columns: 150px 1fr 1fr;
}

.leg-ct-head {
  background: var(--bg-subtle);
  border-bottom: 2px solid var(--border-sub);
}

.leg-ct-head > div {
  padding: var(--s-4) var(--s-5);
  font-size: var(--t-sm);        /* 14px — column header UI chrome ✓ */
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--text-muted);
}

.leg-ct-yurbi-col {
  background: var(--blue-soft);
  color: var(--blue) !important;
  border-left: 1px solid var(--blue-soft2);
}

.leg-ct-row {
  border-bottom: 1px solid var(--border-sub);
}
.leg-ct-row:last-child { border-bottom: none; }

.leg-ct-label {
  padding: var(--s-4) var(--s-5);
  font-size: var(--t-sm);        /* 14px — row label UI chrome ✓ */
  font-weight: var(--w-bold);
  color: var(--text-muted);
  background: var(--bg-subtle);
  border-right: 1px solid var(--border-sub);
  display: flex;
  align-items: center;
}

.leg-ct-bad,
.leg-ct-good {
  padding: var(--s-4) var(--s-5);
  font-size: var(--t-base);      /* 16px ✓ */
  color: var(--text-sec);
  line-height: var(--lh-snug);
  display: flex;
  align-items: center;
}

.leg-ct-bad {
  border-right: 1px solid var(--border-sub);
}

.leg-ct-good {
  background: rgba(4,122,24,.03);
  color: var(--text);
  font-weight: var(--w-medium);
}


/* ── Comparison link cards (/vs/ links) ── */
.leg-compare-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}

.leg-compare-card {
  background: var(--bg);
  border: 1px solid var(--border-sub);
  border-radius: var(--r-xl);
  padding: var(--s-7);
  display: block;
  text-decoration: none;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}

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

.leg-compare-card-tool {
  font-size: var(--t-card);      /* 19px */
  font-weight: var(--w-xbold);
  color: var(--text);
  margin-bottom: var(--s-3);
}

.leg-compare-card p {
  font-size: var(--t-base);      /* 16px ✓ */
  color: var(--text-sec);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--s-4);
}

.leg-compare-card-link {
  font-size: var(--t-base);      /* 16px ✓ */
  font-weight: var(--w-semibold);
  color: var(--blue);
}


/* ── Responsive additions ── */
@media (max-width: 1024px) {
  .leg-problem-grid   { grid-template-columns: 1fr; }
  .leg-compare-cards  { grid-template-columns: 1fr; }
  .leg-ct-head,
  .leg-ct-row         { grid-template-columns: 120px 1fr 1fr; }
}

@media (max-width: 768px) {
  .leg-compare-table  { overflow-x: auto; }
  .leg-ct-head,
  .leg-ct-row         { min-width: 580px; }
}


/* =============================================================================
   ON-PREM ISV PAGE — onp-* prefix
   ============================================================================= */

/* ── Architecture topology diagram ── */
.onp-topology { margin-bottom: var(--s-8); }

.onp-topo-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}

.onp-customer-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
}

.onp-customer-label {
  font-size: var(--t-sm);         /* 14px — UI label ✓ */
  font-weight: var(--w-bold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

.onp-customer-server {
  background: var(--bg);
  border: 1px solid var(--border-sub);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
}

.onp-server-muted {
  opacity: .4;
  border-style: dashed;
}

.onp-server-icon { color: var(--text-muted); }
.onp-server-icon svg { width: 26px; height: 26px; }

.onp-server-apps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.onp-app {
  font-size: var(--t-sm);         /* 14px — pill UI chrome ✓ */
  font-weight: var(--w-bold);
  padding: 4px var(--s-2);
  border-radius: var(--r-sm);
  text-align: center;
  line-height: 1.3;
}

.onp-app-yours { background: var(--bg-blue);    color: var(--blue);         border: 1px solid var(--blue-soft2);  }
.onp-app-yurbi { background: var(--green-soft); color: var(--green);        border: 1px solid var(--green-border); }
.onp-app-db    { background: var(--bg-muted);   color: var(--text-muted);   border: 1px solid var(--border-sub);  }

.onp-instance-note {
  font-size: var(--t-sm);
  color: var(--green);
  font-weight: var(--w-semibold);
  text-align: center;
}

.onp-customer-more .onp-instance-note { color: var(--text-muted); }

.onp-no-crossing {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-6);
  background: var(--bg-subtle);
  border: 1px solid var(--border-sub);
  border-radius: var(--r-md);
  font-size: var(--t-base);       /* 16px ✓ */
  color: var(--text-sec);
  font-weight: var(--w-semibold);
  max-width: 560px;
  margin-inline: auto;
  margin-bottom: var(--s-8);
}

.onp-no-crossing svg { width: 18px; height: 18px; color: #C53030; flex-shrink: 0; }


/* ── Pricing band ── */
.onp-pricing-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border-sub);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-bottom: var(--s-6);
}

.onp-pricing-item {
  padding: var(--s-6) var(--s-5);
  border-right: 1px solid var(--border-sub);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.onp-pricing-item:last-child { border-right: none; }

.onp-pricing-item strong {
  font-size: var(--t-base);       /* 16px ✓ */
  font-weight: var(--w-xbold);
  color: var(--text);
  display: block;
}

.onp-pricing-item span {
  font-size: var(--t-base);       /* 16px ✓ */
  color: var(--text-sec);
  line-height: var(--lh-snug);
}


/* ── Responsive additions ── */
@media (max-width: 1024px) {
  .onp-topo-row       { grid-template-columns: repeat(2, 1fr); }
  .onp-pricing-band   { grid-template-columns: repeat(2, 1fr); }
  .onp-pricing-item:nth-child(2) { border-right: none; }
  .onp-pricing-item:nth-child(1),
  .onp-pricing-item:nth-child(2) { border-bottom: 1px solid var(--border-sub); }
}

@media (max-width: 640px) {
  .onp-pricing-band { grid-template-columns: 1fr; }
  .onp-pricing-item { border-right: none; border-bottom: 1px solid var(--border-sub); }
  .onp-pricing-item:last-child { border-bottom: none; }
}