/* ==========================================================================
   Solutions pages - imported OptiML section components, RMT theme tokens.
   Generated by _solutions_build.py. Every rule below is scoped to .sol-body
   so nothing here can reach the rest of the site.
   ========================================================================== */

.sol-body {
  /* Type - inherit the site stack rather than the reference webfonts */
  --font-sans: inherit;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Core accent - RMT blue */
  --accent: #094fb7;
  --accent-hover: #0b63e5;
  --accent-active: #073a8c;
  --accent-subtle: #f0f5ff;
  --accent-subtle-2: #dfeaff;
  --on-accent: #ffffff;

  /* Neutrals */
  --bg-app: #ffffff;
  --bg-surface: #ffffff;
  --bg-subtle: #f6f8fb;
  --text-primary: #161616;
  --text-secondary: #212529;
  --text-tertiary: #6c757d;
  --text-inverse: #ffffff;
  --border: #dee2e6;
  --border-subtle: #e9ecef;
  --border-strong: #b7c4d9;

  /* Semantic */
  --success: #198754;
  --success-bg: #eaf7f0;
  --warning: #9a6700;
  --warning-bg: #fff8e6;
  --danger: #dc3545;
  --danger-bg: #fdeced;

  /* Dark ground - the navy the platform pages already use */
  --marketing-deep: #0a1425;
  --marketing-deeper: #070f1c;
  --marketing-darkest: #050a14;
  --marketing-gradient: linear-gradient(135deg, #094fb7 0%, #0a1425 100%);
  --marketing-glow: rgba(9, 79, 183, 0.08);

  --on-dark: #ffffff;
  --on-dark-2: #c9d8ee;
  --on-dark-3: #93a9c9;
  --accent-on-dark: #7fb3f5;
  --dark-surface: #10203a;
  --dark-surface-2: #16294a;
  --dark-line: #1d3357;
  --dark-line-2: #27446e;
  --dark-scrim: rgba(5, 10, 20, 0.55);
  --glow-1: rgba(127, 179, 245, 0.22);
  --glow-0: rgba(127, 179, 245, 0);
  --surface-fade: rgba(255, 255, 255, 0);
  --on-dark-error: #ff8f8f;

  /* Mock chrome */
  --mock-chrome: #eef1f5;
  --mock-rail: #0d1c33;
  --mock-rail-active: #16294a;
  --mock-canvas: #f7f9fc;
  --mock-shadow: rgba(0, 12, 34, 0.28);

  /* Elevation - matched to the card shadows in css/style.css */
  --shadow-1: 0 2px 6px -2px #b7c4d9;
  --shadow-2: 0 2px 12px -1px #b7c4d9;
  --shadow-3: 0 24px 60px rgba(10, 20, 37, 0.28), 0 4px 14px rgba(10, 20, 37, 0.18);
  --shadow-header: 0 8px 28px rgba(10, 20, 37, 0.4);
  --shadow-focus: 0 0 0 2px #ffffff, 0 0 0 4px #094fb7;
  --shadow-focus-dark: 0 0 0 2px #0a1425, 0 0 0 4px #ffffff;
  --focus-ring: #094fb7;

  /* Radii - the site uses 10-12px cards */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* Spacing */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* Layout */
  --container: 1140px;
  --gutter: 15px;
  --section-y: clamp(2.5rem, 1.5rem + 3.2vw, 4.5rem);
  --measure: 68ch;

  /* Type scale - stepped down to sit beside .section_heading */
  --fs-display: clamp(2rem, 1.2rem + 3.2vw, 3.25rem);
  --fs-h1: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
  --fs-h2: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
  --fs-h3: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  --fs-h4: 1.125rem;
  --fs-h5: 1rem;
  --fs-h4-lg: 1.25rem;
  --fs-price: 1.5rem;
  --fs-lead: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --fs-body: 1rem;
  --fs-body-sm: 0.9375rem;
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;
  --fs-stat: clamp(2.5rem, 1.6rem + 3.4vw, 4rem);

  /* Motion */
  --dur-fast: 150ms; --dur-menu: 200ms; --dur-accordion: 250ms; --dur-reveal: 400ms;
  --ease-out: cubic-bezier(0.16, 0.84, 0.44, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  color: var(--text-secondary);
  font-size: var(--fs-body);
  line-height: 1.65;
}

/* --- element defaults, scoped ------------------------------------------- */
.sol-body *, .sol-body *::before, .sol-body *::after { box-sizing: border-box; }
.sol-body p { margin: 0 0 var(--sp-4); }
.sol-body p:last-child { margin-bottom: 0; }
.sol-body ul, .sol-body ol { margin: 0 0 var(--sp-4); padding-left: 1.25rem; }
.sol-body h2, .sol-body h3, .sol-body h4, .sol-body h5 {
  color: var(--text-primary); font-weight: 700; line-height: 1.2; margin: 0 0 var(--sp-3);
}
.sol-body a { color: var(--accent); }
.sol-body a:hover { color: var(--accent-hover); }
.sol-body table { border-collapse: collapse; width: 100%; }
.sol-body b, .sol-body strong { font-weight: 700; color: var(--text-primary); }
/* Reversed type: the rule above forces near-black, which vanishes on navy. */
.sol-body .on-dark b,
.sol-body .on-dark strong,
.sol-body .proofband b,
.sol-body .proofband strong { color: var(--on-dark); }
.sol-body em { font-style: italic; }
.sol-body img, .sol-body svg { max-width: 100%; }
.sol-body .visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sol-body .tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* --- section anchoring: the sticky sub-nav scrolls to these -------------- */
.sol-body .sol-section { scroll-margin-top: 96px; }

/* --- accent swipe ------------------------------------------------------
   Same treatment as .voice-ai-title-swipe on the platform module pages, so a
   Solutions heading and a Voice AI heading are marked up differently but read
   identically. */
.sol-accent {
  color: #094fb7;
  background: linear-gradient(120deg, #d2e8ff 0%, #d2e8ff 100%);
  background-repeat: no-repeat;
  background-size: 100% 30%;
  background-position: 0 88%;
  padding: 0 4px;
}
/* On a dark ground the band cannot work: the type is white on both sides of a
   translucent light-blue slab, so nothing changes contrast and the slab reads
   as a selection highlight struck through the lower third of the glyphs.
   Tint the words instead and drop the band - which is exactly what the hero
   below already does. Light sections keep the marker band. */
.sol-body .on-dark .sol-accent,
.pf_cta_title .sol-accent {
  color: #31bae6;
  background: none;
  padding: 0;
}

/* In the hero the platform module pages tint the accent word cyan and use no
   band at all (.pf_title_accent). Match that exactly, so a Solutions hero and
   a module hero are the same object. */
.pf_hero .inner_page_title .sol-accent {
  color: #31bae6;
  background: none;
  padding: 0;
}

/* --- accordions are <details> now --------------------------------------- */
.sol-body details.accordion__item > summary { list-style: none; cursor: pointer; }
.sol-body details.accordion__item > summary::-webkit-details-marker { display: none; }
.sol-body details.accordion__item > summary .sol-icon {
  transition: transform var(--dur-accordion) var(--ease-out);
}
.sol-body details.accordion__item[open] > summary .sol-icon { transform: rotate(45deg); }

/* --- icons -------------------------------------------------------------
   The imported markup keeps the reference .icon sizing classes, but the icons
   themselves are now Font Awesome <i> glyphs rather than SVGs, so the box
   dimensions have to become a font size as well. */
.sol-body i.sol-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  font-size: 18px; line-height: 1;
  flex: none;
}
.sol-body i.sol-icon--sm { width: 20px; height: 20px; font-size: 14px; }
.sol-body i.sol-icon--lg { width: 32px; height: 32px; font-size: 22px; }
.sol-body i.sol-icon--xl { width: 40px; height: 40px; font-size: 28px; }
.sol-body .arrow-link i.sol-icon,
.sol-body .tile__go i.sol-icon,
.sol-body .accordion__btn i.sol-icon { width: 18px; height: 18px; font-size: 13px; }
.sol-body .ticklist i.sol-icon,
.sol-body .chip i.sol-icon { font-size: 13px; }

/* --- diagram figures ---------------------------------------------------- */
.sol-body .mock-figure { margin: 0; }
.sol-body .mock-figure + .mock-figure { margin-top: var(--sp-6); }
.sol-mock-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* The hero title and CTA copy borrow .sol-body only for the accent span, so
   they must not inherit the body type scale from it. */
.inner_page_title.sol-body,
.pf_cta_copy.sol-body { color: inherit; font-size: inherit; line-height: inherit; }

/* --- imported components ------------------------------------------- */
.sol-body .on-dark { --focus-ring: var(--on-dark); }
.sol-body .mock,
.sol-body .table-scroll { --focus-ring: var(--accent); }
.sol-body .code-block,
.sol-body .proofband { --focus-ring: var(--on-dark); }
.sol-body .visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.sol-body .h2 { font-weight: 800; }
.sol-body .h2 {
  font-size: var(--fs-h2);
  line-height: 1.16;
  letter-spacing: -0.028em;

}
/* .sol-body .h2--wide { max-width: 30ch; } */
.sol-body .h4 {
  font-size: var(--fs-h4);
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 700;
}
.sol-body .h5 {
  font-size: var(--fs-h5);
  line-height: 1.35;
  letter-spacing: -0.01em;
  font-weight: 700;
}
.sol-body .display .line,
.sol-body .h1 .line,
.sol-body .h2 .line,
.sol-body .h3 .line { display: block; }
.sol-body .on-dark .lead { color: var(--on-dark-2); }
.sol-body .prose { max-width: var(--measure); color: var(--text-secondary); }
.sol-body .on-dark .prose { color: var(--on-dark-2); }
.sol-body .prose p + p { margin-top: var(--sp-4); }
.sol-body .small { font-size: var(--fs-small); color: var(--text-tertiary); }
.sol-body .on-dark .small { color: var(--on-dark-3); }
.sol-body .on-dark .eyebrow { color: var(--accent-on-dark); }
.sol-body .on-dark .swipe {
  background: var(--on-dark);
  color: var(--marketing-deep);
}
.sol-body .rule {
  display: block;
  width: 72px;
  height: 6px;
  border-radius: 3px;
  background: var(--accent);
  margin-bottom: var(--sp-5);
}
.sol-body .on-dark .rule { background: var(--accent-on-dark); }
.sol-body .tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.sol-body .section-label {
  display: block;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--sp-5);
}
.sol-body .on-dark .section-label { color: var(--on-dark-3); }
.sol-body .arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  font-weight: 700;
  font-size: var(--fs-body-sm);
  color: var(--accent);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.sol-body .arrow-link .sol-icon { width: 18px; height: 18px; transition: transform var(--dur-fast) var(--ease-out); }
.sol-body .arrow-link:hover { color: var(--accent-hover); }
.sol-body .arrow-link:hover .sol-icon { transform: translateX(4px); }
.sol-body .on-dark .arrow-link { color: var(--accent-on-dark); }
.sol-body .on-dark .arrow-link:hover { color: var(--on-dark); }
.sol-body .container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.sol-body .section { padding-block: var(--section-y); position: relative; }
.sol-body .section--tight { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.sol-body .section--white { background: var(--bg-surface); }
.sol-body .section--tint { background: var(--accent-subtle); }
.sol-body .on-dark { color: var(--on-dark); }
.sol-body .on-dark h1,
.sol-body .on-dark h2,
.sol-body .on-dark h3,
.sol-body .on-dark h4,
.sol-body .on-dark h5 { color: var(--on-dark); }
.sol-body .section__head { margin-bottom: var(--sp-8); }
.sol-body .section__head--split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--sp-7);
  align-items: end;
}
.sol-body .section__head--split-5-7 {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sp-7);
  align-items: end;
}
.sol-body .grid { display: grid; gap: var(--sp-5); }
.sol-body .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sol-body .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sol-body .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sol-body .split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
.sol-body .split--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.sol-body .split--start { align-items: start; }
.sol-body .split__media--first { order: -1; }
.sol-body .mt-4 { margin-top: var(--sp-4); }
.sol-body .mt-5 { margin-top: var(--sp-5); }
.sol-body .mt-6 { margin-top: var(--sp-6); }
.sol-body .mt-7 { margin-top: var(--sp-7); }
.sol-body .mt-8 { margin-top: var(--sp-8); }
.sol-body .mb-4 { margin-bottom: var(--sp-4); }
.sol-body .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 52px;
  padding: 0 var(--sp-6);
  border: 2px solid transparent;
  border-radius: var(--r-md);
  font-size: var(--fs-body-sm);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.sol-body .btn:active { transform: translateY(1px); }
.sol-body .btn[disabled],
.sol-body .btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.sol-body .btn--on-dark { background: var(--on-dark); color: var(--accent); }
.sol-body .btn--on-dark:hover { background: var(--accent-subtle); color: var(--accent-active); }
.sol-body .accordion__btn:active { transform: translateY(1px); }
.sol-body .hero__title .line { display: block; }
.sol-body .card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  transition: transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.sol-body .card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  border-color: var(--border);
}
.sol-body .card--flat:hover { transform: none; box-shadow: none; border-color: var(--border-subtle); }
.sol-body .card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  background: var(--accent-subtle);
  color: var(--accent);
  margin-bottom: var(--sp-5);
}
.sol-body .card__title { margin-bottom: var(--sp-3); }
.sol-body .card__body { font-size: var(--fs-body-sm); color: var(--text-secondary); }
.sol-body .card--problem { border-top: 5px solid var(--accent); }
.sol-body .card--problem .card__icon { background: var(--danger-bg); color: var(--danger); }
.sol-body .on-dark .card {
  background: var(--dark-surface);
  border-color: var(--dark-line);
  color: var(--on-dark);
}
.sol-body .on-dark .card .card__body,
.sol-body .card--dark .card__body { color: var(--on-dark-2); }
.sol-body .on-dark .card .card__icon,
.sol-body .card--dark .card__icon { background: var(--dark-surface-2); color: var(--accent-on-dark); }
.sol-body .on-dark .card:hover { border-color: var(--accent-on-dark); box-shadow: none; }
.sol-body .tile {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  text-decoration: none;
  color: var(--text-primary);
  height: 100%;
  transition: transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.sol-body .tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--accent); color: var(--text-primary); }
.sol-body .tile__icon { color: var(--accent); }
.sol-body .tile__title { font-size: var(--fs-h5); font-weight: 700; letter-spacing: -0.015em; }
.sol-body .tile__body { font-size: var(--fs-small); color: var(--text-secondary); flex: 1 1 auto; }
.sol-body .tile__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--accent);
}
.sol-body .tile__go .sol-icon { width: 15px; height: 15px; transition: transform var(--dur-fast) var(--ease-out); }
.sol-body .tile:hover .tile__go .sol-icon { transform: translateX(4px); }
.sol-body .deploy__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}
.sol-body .deploy__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.sol-body .deploy-card__tag {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sol-body .deploy-card__who { font-size: var(--fs-small); color: var(--text-tertiary); font-weight: 600; }
.sol-body .deploy-note {
  margin-top: var(--sp-5);
  max-width: 72ch;
  font-size: var(--fs-small);
  color: var(--text-tertiary);
}
.sol-body .deploy-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.sol-body .deploy-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.sol-body .deploy-card__icon { color: var(--accent); }
.sol-body .deploy-card__body { font-size: var(--fs-body-sm); color: var(--text-secondary); }
.sol-body .casestudy {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-left: 6px solid var(--accent);
  border-radius: var(--r-md);
  padding: var(--sp-7);
  box-shadow: var(--shadow-1);
}
.sol-body .casestudy__quote {
  font-size: var(--fs-lead);
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  max-width: 44ch;
}
.sol-body .casestudy__meta { margin-top: var(--sp-5); display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.sol-body .casestudy__who { font-size: var(--fs-small); }
.sol-body .casestudy__who b { display: block; font-weight: 700; color: var(--text-primary); }
.sol-body .casestudy__who span { color: var(--text-tertiary); }
.sol-body .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.sol-body .chip .sol-icon { width: 14px; height: 14px; color: var(--accent); }
.sol-body .on-dark .chip { background: var(--dark-surface); border-color: var(--dark-line-2); color: var(--on-dark-2); }
.sol-body .on-dark .chip .sol-icon { color: var(--accent-on-dark); }
.sol-body .chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.sol-body .on-dark .pillar__index { -webkit-text-stroke-color: var(--accent-on-dark); }
.sol-body .on-dark .pillar__body { color: var(--on-dark-2); }
.sol-body .steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-8);
}
.sol-body .step {
  position: relative;
  isolation: isolate;
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  border-top: 5px solid var(--accent);
  background: var(--bg-surface);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.sol-body .on-dark .step { background: var(--dark-surface); border-top-color: var(--accent-on-dark); }
.sol-body .step__num {
  position: absolute;
  z-index: 0;
  top: -0.3em; right: -0.1em;
  font-size: 8.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--accent-subtle);
  pointer-events: none;
  user-select: none;
}
.sol-body .on-dark .step__num { color: var(--dark-surface-2); }
.sol-body .step__inner { position: relative; z-index: 1; }
.sol-body .step__kicker {
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-2);
}
.sol-body .on-dark .step__kicker { color: var(--accent-on-dark); }
.sol-body .step__title { margin-bottom: var(--sp-3); }
.sol-body .step__body { font-size: var(--fs-body-sm); color: var(--text-secondary); }
.sol-body .on-dark .step__body { color: var(--on-dark-2); }
.sol-body .on-dark .tline::before { background: var(--dark-line-2); }
.sol-body .on-dark .tline__item::before { background: var(--accent-on-dark); border-color: var(--marketing-deep); }
.sol-body .section--tint .tline__item::before { border-color: var(--accent-subtle); }
.sol-body .on-dark .tline__when { color: var(--accent-on-dark); }
.sol-body .on-dark .tline__body { color: var(--on-dark-2); }
.sol-body .ticklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-5); }
.sol-body .ticklist--1 { grid-template-columns: minmax(0, 1fr); }
.sol-body .ticklist li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
}
.sol-body .on-dark .ticklist li { color: var(--on-dark-2); }
.sol-body .ticklist .sol-icon { width: 20px; height: 20px; color: var(--accent); flex: none; margin-top: 3px; }
.sol-body .on-dark .ticklist .sol-icon { color: var(--accent-on-dark); }
.sol-body .on-dark .ticklist--cross .sol-icon { color: var(--on-dark-error); }
.sol-body .code-block {
  background: var(--marketing-deep);
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--dark-line);
}
.sol-body .code-block__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  background: var(--marketing-deeper);
  border-bottom: 1px solid var(--dark-line);
  flex-wrap: wrap;
}
.sol-body .code-block__lang {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-dark-3);
}
.sol-body .copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--on-dark-3);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--on-dark-2);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.sol-body .copy-btn:hover { background: var(--dark-surface); color: var(--on-dark); }
.sol-body .copy-btn:active { transform: translateY(1px); }
.sol-body .copy-btn .sol-icon { width: 15px; height: 15px; }
.sol-body .code-block pre {
  margin: 0;
  padding: var(--sp-5);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--on-dark-2);
}
.sol-body .code-block pre[hidden] { display: none; }
.sol-body .code-block .tok-tag { color: var(--accent-on-dark); }
.sol-body .code-block .tok-attr { color: var(--on-dark); }
.sol-body .code-block .tok-str { color: var(--accent-subtle); }
.sol-body .code-block .tok-com { color: var(--on-dark-3); }
.sol-body .code-block .tok-kw { color: var(--accent-on-dark); font-weight: 500; }
.sol-body .code-block .tok-num { color: var(--accent-subtle); }
.sol-body .code-block .tok-fn { color: var(--on-dark); font-weight: 500; }
.sol-body .on-dark .code-pill { background: var(--dark-surface); border-color: var(--dark-line-2); color: var(--on-dark-2); }
.sol-body .on-dark .metric { border-top-color: var(--accent-on-dark); }
.sol-body .on-dark .metric__fig { color: var(--on-dark); }
.sol-body .on-dark .metric__cap { color: var(--on-dark-2); }
.sol-body .statband { background: var(--accent-subtle); }
.sol-body .statband__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
}
.sol-body .stat { border-left: 5px solid var(--accent); padding-left: var(--sp-5); }
.sol-body .on-dark .stat { border-left-color: var(--accent-on-dark); }
.sol-body .stat__fig {
  display: block;
  font-size: var(--fs-stat);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: var(--marketing-deep);
  font-variant-numeric: tabular-nums;
}
.sol-body .on-dark .stat__fig { color: var(--on-dark); }
.sol-body .stat__cap {
  display: block;
  margin-top: var(--sp-4);
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  max-width: 26ch;
}
.sol-body .on-dark .stat__cap { color: var(--on-dark-2); }
.sol-body .on-dark .stat__note { color: var(--on-dark-3); }
.sol-body .cta-inline {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--sp-6);
  align-items: center;
  padding: var(--sp-6) var(--sp-7);
  border-radius: var(--r-lg);
  background: var(--marketing-deep);
  color: var(--on-dark);
}
.sol-body .cta-inline h2,
.sol-body .cta-inline h3 { color: var(--on-dark); max-width: 24ch; }
.sol-body .cta-inline p { color: var(--on-dark-2); font-size: var(--fs-body-sm); margin-top: var(--sp-2); }
.sol-body .cta-inline__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: flex-end; }
.sol-body .mock-figure { margin: 0; }
.sol-body .mock-cap {
  margin-top: var(--sp-3);
  font-size: var(--fs-label);
  line-height: 1.5;
  color: var(--text-tertiary);
  max-width: 62ch;
}
.sol-body .on-dark .mock-cap { color: var(--on-dark-3); }
.sol-body .section--gradient .mock-cap { color: var(--on-dark-2); }
.sol-body .mock {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.sol-body .mock--flat { box-shadow: var(--shadow-2); }
.sol-body .mock__chrome {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px var(--sp-4);
  background: var(--mock-chrome);
  border-bottom: 1px solid var(--border-subtle);
}
.sol-body .mock__dots { display: flex; gap: 6px; flex: none; }
.sol-body .mock__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); display: block; }
.sol-body .mock__title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-tertiary);
  letter-spacing: 0.01em;
}
.sol-body .mock__tabs { display: flex; gap: 4px; margin-left: auto; }
.sol-body .mock__tab {
  padding: 4px 10px;
  border-radius: var(--r-xs);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-tertiary);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
}
.sol-body .mock__tab--on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.sol-body .mock__body { display: grid; background: var(--mock-canvas); }
.sol-body .mock__rail {
  background: var(--mock-rail);
  color: var(--on-dark-2);
  padding: var(--sp-4) var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sol-body .mock__railhead {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-3);
  padding: 0 10px var(--sp-3);
}
.sol-body .mock__railitem {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  font-size: 0.75rem;
  font-weight: 600;
}
.sol-body .mock__railitem--on { background: var(--mock-rail-active); color: var(--on-dark); }
.sol-body .mock__railitem i {
  width: 7px; height: 7px; border-radius: 2px;
  background: var(--on-dark-3);
  display: block;
  flex: none;
}
.sol-body .mock__railitem--on i { background: var(--accent-on-dark); }
.sol-body .mock__railfoot { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 10px; }
.sol-body .av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  flex: none;
}
.sol-body .av--sm { width: 26px; height: 26px; font-size: 0.625rem; }
.sol-body .av--lg { width: 44px; height: 44px; font-size: 0.875rem; }
.sol-body .av--alt { background: var(--marketing-deep); }
.sol-body .av--tint { background: var(--accent-subtle); color: var(--accent); }
.sol-body .av--ghost { background: var(--bg-subtle); color: var(--text-secondary); border: 1px solid var(--border-subtle); }
.sol-body .mock__main { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.sol-body .mock > .mock__main { background: var(--mock-canvas); }
.sol-body .mock sup { font-size: 0.625rem; font-weight: 800; color: var(--accent); padding-left: 1px; }
.sol-body .mock__panel {
  background: var(--bg-surface);
  border-left: 1px solid var(--border-subtle);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}
.sol-body .mock__sectitle {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.sol-body .mock__flush { padding: 0; overflow: hidden; }
.sol-body .mockcard {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: var(--sp-3);
}
.sol-body .mockcard--accent { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); }
.sol-body .mockcard--tint { background: var(--accent-subtle); border-color: var(--accent-subtle-2); }
.sol-body .mock__callhead { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.sol-body .mock__callwho { min-width: 0; flex: 1 1 120px; }
.sol-body .mock__callname { display: block; font-weight: 700; font-size: 0.875rem; letter-spacing: -0.01em; }
.sol-body .mock__callmeta { display: block; color: var(--text-tertiary); font-size: 0.6875rem; }
.sol-body .mock__calltimer {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
}
.sol-body .pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sol-body .pill--live { background: var(--danger-bg); color: var(--danger); }
.sol-body .pill--live i { width: 6px; height: 6px; border-radius: 50%; background: var(--danger); display: block; }
.sol-body .pill--ok { background: var(--success-bg); color: var(--success); }
.sol-body .pill--warn { background: var(--warning-bg); color: var(--warning); }
.sol-body .pill--info { background: var(--accent-subtle); color: var(--accent); }
.sol-body .pill--neutral { background: var(--bg-subtle); color: var(--text-tertiary); }
.sol-body .wave { width: 100%; height: 34px; color: var(--accent); }
.sol-body .turns { display: flex; flex-direction: column; gap: 10px; }
.sol-body .turn { display: flex; gap: 9px; align-items: flex-start; }
.sol-body .turn__txt {
  border-radius: var(--r-md);
  padding: 8px 11px;
  font-size: 0.75rem;
  line-height: 1.5;
  max-width: 92%;
}
.sol-body .turn--cust .turn__txt { background: var(--bg-subtle); color: var(--text-primary); }
.sol-body .turn--agent .turn__txt { background: var(--accent-subtle); color: var(--text-primary); }
.sol-body .turn__time { font-family: var(--font-mono); font-size: 0.625rem; color: var(--text-tertiary); flex: none; padding-top: 9px; }
.sol-body .copilot { display: flex; flex-direction: column; gap: 9px; }
.sol-body .copilot__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sol-body .copilot__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.sol-body .copilot__text { font-size: 0.8125rem; line-height: 1.55; color: var(--text-primary); }
.sol-body .cite {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: var(--r-sm);
  background: var(--bg-surface);
  border: 1px dashed var(--accent);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--accent);
}
.sol-body .cite__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px; height: 15px;
  border-radius: 3px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.5625rem;
  font-weight: 800;
}
.sol-body .mock__actions { display: flex; gap: 6px; flex-wrap: wrap; }
.sol-body .mockbtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  font-size: 0.6875rem;
  font-weight: 700;
  background: var(--bg-subtle);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}
.sol-body .mockbtn--primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.sol-body .kv { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); font-size: 0.75rem; }
.sol-body .kv + .kv { margin-top: 7px; }
.sol-body .kv__k { color: var(--text-tertiary); }
.sol-body .kv__v { font-weight: 700; color: var(--text-primary); }
.sol-body .timeline { display: flex; flex-direction: column; gap: 9px; }
.sol-body .tl { display: flex; gap: 8px; align-items: flex-start; font-size: 0.6875rem; }
.sol-body .tl__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  margin-top: 5px;
  flex: none;
}
.sol-body .tl__dot--muted { background: var(--border-strong); }
.sol-body .tl__ch { font-weight: 700; color: var(--text-primary); }
.sol-body .tl__meta { color: var(--text-tertiary); }
.sol-body .spark { width: 100%; height: 40px; color: var(--accent); }
.sol-body .floor {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}
.sol-body .floor__cell {
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  padding: 8px;
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
}
.sol-body .floor__name { font-size: 0.6875rem; font-weight: 700; }
.sol-body .floor__state { font-size: 0.625rem; color: var(--text-tertiary); }
.sol-body .floor__cell--on { border-color: var(--success); }
.sol-body .floor__cell--busy { border-color: var(--warning); }
.sol-body .floor__cell--alert { border-color: var(--danger); }
.sol-body .inbox { display: flex; flex-direction: column; }
.sol-body .inbox__row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}
.sol-body .inbox__row--on { background: var(--accent-subtle); }
.sol-body .inbox__who { display: block; font-size: 0.75rem; font-weight: 700; }
.sol-body .inbox__prev { display: block; font-size: 0.6875rem; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sol-body .inbox__right { display: flex; align-items: center; gap: 6px; }
.sol-body .prov { width: 100%; font-size: 0.75rem; }
.sol-body .prov th {
  text-align: left;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 700;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-subtle);
}
.sol-body .prov td { padding: 8px; border-bottom: 1px solid var(--border-subtle); }
.sol-body .prov tr:last-child td { border-bottom: 0; }
.sol-body .prov__name { font-weight: 700; }
.sol-body .prov__byo { font-family: var(--font-mono); font-size: 0.625rem; color: var(--text-tertiary); display: block; }
.sol-body .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.sol-body .dot--ok { background: var(--success); }
.sol-body .dot--warn { background: var(--warning); }
.sol-body .segbar { display: flex; gap: 4px; flex-wrap: wrap; }
.sol-body .segbar span {
  padding: 5px 10px;
  border-radius: var(--r-sm);
  font-size: 0.6875rem;
  font-weight: 700;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  background: var(--bg-surface);
}
.sol-body .segbar span.is-on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.sol-body .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sol-body .kpi { display: block; border: 1px solid var(--border-subtle); border-radius: var(--r-sm); padding: 9px 10px; background: var(--bg-surface); }
.sol-body .kpi__k { display: block; font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; }
.sol-body .kpi__v { display: block; font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.02em; margin-top: 3px; }
.sol-body .kpi__d { display: block; font-size: 0.625rem; color: var(--success); font-weight: 700; }
.sol-body .chart { width: 100%; height: 168px; }
.sol-body .legend { display: flex; gap: var(--sp-4); flex-wrap: wrap; font-size: 0.6875rem; color: var(--text-tertiary); }
.sol-body .legend span { display: inline-flex; align-items: center; gap: 6px; }
.sol-body .legend i { width: 10px; height: 10px; border-radius: 2px; display: block; }
.sol-body .legend i.is-a { background: var(--accent); }
.sol-body .legend i.is-b { background: var(--accent-subtle-2); }
.sol-body .gate {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 9px 11px;
  border-radius: var(--r-sm);
  background: var(--success-bg);
  border: 1px solid var(--success);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--success);
}
.sol-body .meter { flex: 1 1 auto; height: 7px; border-radius: 4px; background: var(--bg-subtle); overflow: hidden; min-width: 60px; }
.sol-body .meter i { display: block; height: 100%; background: var(--success); }
.sol-body .meter--warn i { background: var(--warning); }
.sol-body .meter--danger i { background: var(--danger); }
.sol-body .meter--accent i { background: var(--accent); }
.sol-body .trace { display: flex; flex-wrap: wrap; gap: 6px; }
.sol-body .trace span {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  padding: 3px 8px;
  border-radius: var(--r-xs);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}
.sol-body .usage-list { display: flex; flex-direction: column; gap: 9px; }
.sol-body .usage-row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(56px, 0.85fr) 60px;
  gap: 10px;
  align-items: center;
  font-size: 0.75rem;
}
.sol-body .usage-row__label { min-width: 0; }
.sol-body .usage-row__label b { display: block; font-weight: 700; }
.sol-body .usage-row__label span { display: block; font-size: 0.625rem; color: var(--text-tertiary); }
.sol-body .usage-row__val { font-family: var(--font-mono); font-size: 0.6875rem; text-align: right; color: var(--text-secondary); }
.sol-body .usage-row .meter { min-width: 40px; }
.sol-body .mock__rowhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.sol-body .mock__total {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-primary);
}
.sol-body .canvas { position: relative; background: var(--mock-canvas); padding: var(--sp-4); min-height: 210px; }
.sol-body .canvas__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--border-subtle) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border-subtle) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.7;
  pointer-events: none;
}
.sol-body .canvas__inner { position: relative; display: flex; flex-direction: column; gap: 10px; }
.sol-body .node {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  font-size: 0.6875rem;
  font-weight: 700;
  box-shadow: var(--shadow-1);
}
.sol-body .node i { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); display: block; flex: none; }
.sol-body .node--start i { background: var(--success); }
.sol-body .node--branch i { background: var(--warning); }
.sol-body .node--end i { background: var(--marketing-deep); }
.sol-body .node--sel { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); }
.sol-body .node__meta { font-weight: 400; color: var(--text-tertiary); }
.sol-body .node-row { display: flex; gap: 10px; flex-wrap: wrap; }
.sol-body .wire { width: 2px; height: 14px; background: var(--border-strong); margin-left: 18px; }
.sol-body .sched { display: grid; grid-template-columns: 78px repeat(7, minmax(0, 1fr)); gap: 3px; font-size: 0.625rem; }
.sol-body .sched__h { font-weight: 700; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.08em; padding: 4px; }
.sol-body .sched__who { font-weight: 700; padding: 6px 4px; }
.sol-body .sched__cell { border-radius: 3px; background: var(--bg-subtle); padding: 6px 4px; text-align: center; color: var(--text-tertiary); }
.sol-body .sched__cell--on { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.sol-body .sched__cell--half { background: var(--accent-subtle-2); color: var(--accent); font-weight: 700; }
.sol-body .sched__cell--off { background: var(--bg-subtle); color: var(--text-tertiary); }
.sol-body .score-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 42px; gap: 10px; align-items: center; font-size: 0.75rem; }
.sol-body .score-row + .score-row { margin-top: 7px; }
.sol-body .score-row__val { font-family: var(--font-mono); font-size: 0.6875rem; text-align: right; font-weight: 700; }
.sol-body .sitemock { background: var(--bg-surface); border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border-subtle); }
.sol-body .sitemock__bar { height: 26px; background: var(--mock-chrome); display: flex; align-items: center; gap: 6px; padding: 0 10px; }
.sol-body .sitemock__url { font-family: var(--font-mono); font-size: 0.5625rem; color: var(--text-tertiary); background: var(--bg-surface); border-radius: var(--r-pill); padding: 2px 10px; }
.sol-body .sitemock__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: 8px; position: relative; min-height: 150px; }
.sol-body .skel { height: 10px; border-radius: 3px; background: var(--bg-subtle); }
.sol-body .skel--title { height: 18px; width: 52%; background: var(--border-subtle); }
.sol-body .skel--w70 { width: 70%; }
.sol-body .skel--w45 { width: 45%; }
.sol-body .bubble {
  position: absolute;
  right: 12px; bottom: 12px;
  width: 172px;
  border-radius: var(--r-md);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.sol-body .bubble__head { background: var(--accent); color: var(--on-accent); padding: 7px 10px; font-size: 0.625rem; font-weight: 700; }
.sol-body .bubble__body { padding: 9px 10px; display: flex; flex-direction: column; gap: 7px; }
.sol-body .table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  background: var(--bg-surface);
}
.sol-body .table-scroll:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sol-body .table-hint { font-size: var(--fs-small); color: var(--text-tertiary); margin-bottom: var(--sp-3); max-width: 72ch; }
.sol-body .table-hint code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  padding: 1px 5px;
  border-radius: var(--r-xs);
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}
.sol-body .table-caption {
  caption-side: top;
  text-align: left;
  padding: var(--sp-4) var(--sp-4) 0;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--text-secondary);
}
.sol-body .dtable { width: 100%; font-variant-numeric: tabular-nums; }
.sol-body .dtable th,
.sol-body .dtable td {
  padding: var(--sp-4);
  text-align: left;
  vertical-align: top;
  font-size: var(--fs-small);
  border-bottom: 1px solid var(--border-subtle);
}
.sol-body .dtable thead th {
  background: var(--bg-subtle);
  border-bottom: 2px solid var(--border);
  font-weight: 800;
  color: var(--text-secondary);
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sol-body .dtable tbody th {
  font-weight: 700;
  color: var(--text-primary);
  width: 34%;
}
.sol-body .dtable tbody tr:last-child th,
.sol-body .dtable tbody tr:last-child td { border-bottom: 0; }
.sol-body .dtable tbody tr:hover td,
.sol-body .dtable tbody tr:hover th { background: var(--bg-app); }
.sol-body .dtable--wide { min-width: 760px; }
.sol-body .dtable--compact th,
.sol-body .dtable--compact td { padding: var(--sp-3) var(--sp-4); }
.sol-body .dtable code { font-family: var(--font-mono); font-size: 0.9em; color: var(--accent); }
.sol-body .dtable--pinned tbody th,
.sol-body .dtable--pinned thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--bg-surface);
  border-right: 1px solid var(--border-subtle);
}
.sol-body .dtable--pinned thead th:first-child { background: var(--bg-subtle); z-index: 3; }
.sol-body .included-line {
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  background: var(--bg-subtle);
  font-size: var(--fs-small);
  color: var(--text-secondary);
}
.sol-body .callout {
  margin-top: var(--sp-7);
  background: var(--bg-surface);
  border-left: 6px solid var(--accent);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  box-shadow: var(--shadow-1);
}
.sol-body .callout h3 { margin-bottom: var(--sp-3); }
.sol-body .callout p { color: var(--text-secondary); max-width: 62ch; }
.sol-body .callout p + p { margin-top: var(--sp-3); }
.sol-body .callout--flush { margin-top: 0; }
.sol-body .diagram {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-1);
  overflow-x: auto;
}
.sol-body .diagram svg { width: 100%; height: auto; min-width: 520px; }
.sol-body .on-dark .diagram { background: var(--dark-surface); border-color: var(--dark-line); }
.sol-body .diagram__cap {
  margin-top: var(--sp-3);
  font-size: var(--fs-label);
  color: var(--text-tertiary);
  max-width: 62ch;
}
.sol-body .on-dark .diagram__cap { color: var(--on-dark-3); }
.sol-body .dg-box { fill: var(--bg-surface); stroke: var(--border-strong); stroke-width: 1.5; }
.sol-body .dg-box--accent { fill: var(--accent-subtle); stroke: var(--accent); }
.sol-body .dg-box--dark { fill: var(--marketing-deep); stroke: var(--marketing-deep); }
.sol-body .dg-boundary { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 7 5; }
.sol-body .dg-line { stroke: var(--text-tertiary); stroke-width: 1.5; fill: none; }
.sol-body .dg-line--flow { stroke: var(--accent); stroke-width: 2.5; }
.sol-body .dg-label { fill: var(--text-primary); font-size: 13px; font-weight: 600; font-family: var(--font-sans); }
.sol-body .dg-label--sm { fill: var(--text-tertiary); font-size: 11px; font-weight: 600; }
.sol-body .dg-label--inv { fill: var(--on-dark); }
.sol-body .on-dark .capblock__kicker { color: var(--accent-on-dark); }
.sol-body .on-dark .capblock__body { color: var(--on-dark-2); }
.sol-body .relgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.sol-body .linkrow { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.sol-body .linkpill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
}
.sol-body .linkpill:hover { border-color: var(--accent); background: var(--accent-subtle); color: var(--accent-hover); }
.sol-body .on-dark .linkpill { background: var(--dark-surface); border-color: var(--dark-line-2); color: var(--on-dark-2); }
.sol-body .on-dark .linkpill:hover { border-color: var(--accent-on-dark); color: var(--on-dark); background: var(--dark-surface-2); }
.sol-body .accordion { max-width: 900px; }
.sol-body .accordion--wide { max-width: none; }
.sol-body .accordion__item { border-bottom: 1px solid var(--border); }
.sol-body .accordion__item:first-child { border-top: 1px solid var(--border); }
.sol-body .on-dark .accordion__item,
.sol-body .on-dark .accordion__item:first-child { border-color: var(--dark-line-2); }
.sol-body .accordion__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  width: 100%;
  min-height: var(--sp-8);
  padding: var(--sp-4) 0;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  cursor: pointer;
}
.sol-body .on-dark .accordion__btn { color: var(--on-dark); }
.sol-body .accordion__btn:hover { color: var(--accent); }
.sol-body .on-dark .accordion__btn:hover { color: var(--accent-on-dark); }
.sol-body .accordion__btn .sol-icon { flex: none; color: var(--accent); transition: transform var(--dur-menu) var(--ease-out); }
.sol-body .on-dark .accordion__btn .sol-icon { color: var(--accent-on-dark); }
.sol-body .accordion__btn[aria-expanded="true"] .sol-icon { transform: rotate(45deg); }
.sol-body .accordion__panel { padding: 0 0 var(--sp-5); }
.sol-body .accordion__panel[hidden] { display: none; }
.sol-body .accordion__panel p { max-width: 62ch; color: var(--text-secondary); font-size: var(--fs-body-sm); }
.sol-body .on-dark .accordion__panel p { color: var(--on-dark-2); }
.sol-body .accordion__panel p + p { margin-top: var(--sp-3); }
.sol-body .accordion__panel ul,
.sol-body .accordion__panel ol { margin-top: var(--sp-3); }
.sol-body .accordion--chev .accordion__btn[aria-expanded="true"] .sol-icon { transform: rotate(180deg); }
.sol-body .proofband { background: var(--marketing-deep); color: var(--on-dark); }
.sol-body .proofband__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); }
.sol-body .proof-item { display: flex; flex-direction: column; gap: var(--sp-2); }
.sol-body .proof-item__icon { color: var(--accent-on-dark); }
.sol-body .proof-item__title { font-size: var(--fs-h5); font-weight: 700; color: var(--on-dark); }
.sol-body .proof-item__body { font-size: var(--fs-small); color: var(--on-dark-2); }
.sol-body .longform .table-scroll,
.sol-body .longform .code-block,
.sol-body .longform .diagram { max-width: none; }
.sol-body .on-dark .placeholder {
  background: var(--warning-bg);
  color: var(--warning);
  border-color: var(--warning-bg);
}
.sol-body .on-dark .tabs__list { border-bottom-color: var(--dark-line-2); }
.sol-body .on-dark .tabs__tab { color: var(--on-dark-2); }
.sol-body .on-dark .tabs__tab:hover { color: var(--on-dark); background: var(--dark-surface); }
.sol-body .on-dark .tabs__tab[aria-selected="true"] { color: var(--on-dark); border-bottom-color: var(--accent-on-dark); }
.sol-body .note {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  border: 1px solid var(--border-subtle);
  border-left: 5px solid var(--accent);
  background: var(--bg-subtle);
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  max-width: 78ch;
}
.sol-body .note .sol-icon { flex: none; color: var(--accent); margin-top: 2px; }
.sol-body .note b { color: var(--text-primary); }
.sol-body .note--info { border-left-color: var(--accent); background: var(--accent-subtle); }
.sol-body .note--warn { border-left-color: var(--warning); background: var(--warning-bg); }
.sol-body .note--warn .sol-icon { color: var(--warning); }
.sol-body .on-dark .to-top { color: var(--accent-on-dark); }
@media (max-width: 1180px) {
  .sol-body .floor { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sol-body .relgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .sol-body .split,
.sol-body .split--7-5,
.sol-body .cta-inline,
.sol-body .section__head--split,
.sol-body .section__head--split-5-7 { grid-template-columns: minmax(0, 1fr); }
  .sol-body .split__media--first { order: 0; }
  .sol-body .cta-inline__actions { justify-content: flex-start; }
  .sol-body .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sol-body .deploy__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sol-body .statband__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sol-body .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sol-body .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sol-body .proofband__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sol-body .relgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .sol-body .grid--3 { grid-template-columns: minmax(0, 1fr); }
  .sol-body .ticklist { grid-template-columns: minmax(0, 1fr); }
  .sol-body .floor { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sol-body .statband__grid { grid-template-columns: minmax(0, 1fr); }
  .sol-body .relgrid { grid-template-columns: minmax(0, 1fr); }
  .sol-body .proofband__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .sol-body .steps { grid-template-columns: minmax(0, 1fr); }
  .sol-body .deploy__grid { grid-template-columns: minmax(0, 1fr); }
  .sol-body .grid--2,
.sol-body .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .sol-body .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sol-body .btn { width: 100%; }
  .sol-body .btn-row .btn { width: 100%; }
  .sol-body .casestudy { padding: var(--sp-5); }
  .sol-body .dtable th,
.sol-body .dtable td { padding: var(--sp-3); overflow-wrap: anywhere; }
  .sol-body .dtable tbody th { width: 40%; }
  .sol-body .dtable--pinned { table-layout: fixed; }
  .sol-body .dtable--pinned tbody th,
.sol-body .dtable--pinned thead th:first-child { width: min(150px, 40vw); }
}
@media (max-width: 560px) {
  .sol-body .prov th:nth-child(3),
.sol-body .prov td:nth-child(3) { display: none; }
  .sol-body .prov th,
.sol-body .prov td { padding: 7px 6px; }
  .sol-body .usage-row { grid-template-columns: minmax(0, 1fr) 56px; }
  .sol-body .usage-row .meter { display: none; }
  .sol-body .sched { grid-template-columns: 62px repeat(7, minmax(0, 1fr)); font-size: 0.5625rem; }
}
@media (max-width: 520px) {
  .sol-body .hero__title .line,
.sol-body .h1 .line,
.sol-body .h2 .line,
.sol-body .h3 .line,
.sol-body .display .line { display: inline; }
  .sol-body .step__num { font-size: 6.5rem; }
  .sol-body .floor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 430px) {
  .sol-body .header__actions .btn { display: none; }
  .sol-body .prov th:nth-child(2),
.sol-body .prov td:nth-child(2) { display: none; }
  .sol-body .kpis { grid-template-columns: minmax(0, 1fr); }
}
.sol-body .mock--desk .mock__body { grid-template-columns: 136px minmax(0, 1fr) 204px; }
.sol-body .mock--inbox .mock__body { grid-template-columns: 160px minmax(0, 1fr); }
.sol-body .mock--ground .mock__body { grid-template-columns: 148px minmax(0, 1fr); }
.sol-body .mock--router .mock__body { grid-template-columns: 150px minmax(0, 1fr); }
.sol-body .mock--finops .mock__body { grid-template-columns: 148px minmax(0, 1fr); }
.sol-body .mock--builder .mock__body { grid-template-columns: 150px minmax(0, 1fr); }
.sol-body .mock--wfm .mock__body { grid-template-columns: 148px minmax(0, 1fr); }
.sol-body .mock--quality .mock__body { grid-template-columns: 148px minmax(0, 1fr) 190px; }
.sol-body .mock--analytics .mock__body { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1180px) {
  .sol-body .mock--desk .mock__body { grid-template-columns: minmax(0, 1fr) 220px; }
  .sol-body .mock--quality .mock__body { grid-template-columns: minmax(0, 1fr) 190px; }
  .sol-body .mock--desk .mock__rail,
.sol-body .mock--quality .mock__rail,
.sol-body .mock--inbox .mock__rail { display: none; }
  .sol-body .mock--inbox .mock__body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .sol-body .mock--ground .mock__rail,
.sol-body .mock--router .mock__rail,
.sol-body .mock--builder .mock__rail,
.sol-body .mock--wfm .mock__rail,
.sol-body .mock--finops .mock__rail { display: none; }
  .sol-body .mock--ground .mock__body,
.sol-body .mock--router .mock__body,
.sol-body .mock--builder .mock__body,
.sol-body .mock--wfm .mock__body,
.sol-body .mock--finops .mock__body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .sol-body .mock--desk .mock__body,
.sol-body .mock--quality .mock__body { grid-template-columns: minmax(0, 1fr); }
  .sol-body .mock--desk .mock__panel,
.sol-body .mock--quality .mock__panel { display: none; }
  .sol-body .mock__chrome .mock__tabs { display: none; }
}
@media print {
  .sol-body .section { padding-block: 18pt; }
  .sol-body .cta-inline,
.sol-body .statband,
.sol-body .proofband { background: var(--bg-surface) !important; color: var(--text-primary) !important; }
  .sol-body .on-dark,
.sol-body .on-dark h1,
.sol-body .on-dark h2,
.sol-body .on-dark h3,
.sol-body .on-dark h4,
.sol-body .on-dark p,
.sol-body .on-dark li,
.sol-body .cta-inline p,
.sol-body .proof-item__body { color: var(--text-primary) !important; }
  .sol-body .on-dark .swipe {
    background: transparent !important;
    color: var(--text-primary) !important;
    font-weight: 800;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    padding: 0;
    margin: 0;
  }
  .sol-body .rule { background: var(--text-primary) !important; }
  .sol-body .accordion__panel[hidden] { display: block !important; }
  .sol-body .code-block pre[hidden] { display: block !important; }
  .sol-body .table-scroll { overflow: visible; border-color: var(--border-strong); }
  .sol-body .dtable { min-width: 0; table-layout: auto; }
  .sol-body .dtable--pinned tbody th { position: static; }
  .sol-body .card,
.sol-body .tile,
.sol-body .deploy-card { break-inside: avoid; box-shadow: none; }
  .sol-body .mock { box-shadow: none; border-color: var(--border-strong); break-inside: avoid; }
}

/* ==========================================================================
   Align the imported components with the OptiML CX Platform module pages
   ========================================================================== */

/* --- container: line up with the site chrome ------------------------------
   The imported .container resolves to 1170px and goes full-bleed below that,
   while the hero, "The platform underneath" and "More solutions" bands around
   it use Bootstrap's .container. That left every page with a horizontal jog
   where the two meet - 15px at 1440, 24px at 768. Match Bootstrap's ladder
   exactly so one content edge runs the whole page. */
.sol-body .container { max-width: 100%; }
@media (min-width: 576px)  { .sol-body .container { max-width: 540px; } }
@media (min-width: 768px)  { .sol-body .container { max-width: 720px; } }
@media (min-width: 992px)  { .sol-body .container { max-width: 960px; } }
@media (min-width: 1200px) { .sol-body .container { max-width: 1140px; } }

/* --- section rhythm: .single_service_frame is 40px 0 ---------------------- */
.sol-body .section { padding: 40px 0; }
.sol-body .section--tight { padding: 32px 0; }
.sol-body .section--white { background-color: #ffffff; }
.sol-body .section--tint { background-color: #edf2fa; }
.sol-body .section.on-dark {
  background-color: #0a1425;
  background-image: linear-gradient(135deg, #0a1425 0%, #10203a 55%, #094fb7 160%);
}

/* --- headings: match .section_heading / .single_service_box_two_sub_heading */
.sol-body .h2,
.sol-body h2 {
  color: #0a1425;
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  margin-bottom: 18px;
}
.sol-body .on-dark .h2, .sol-body .on-dark h2 { color: #ffffff; }
.sol-body .h3, .sol-body h3 {
  color: #0a1425; font-size: 1.4375rem; font-weight: 600; line-height: 30px;
}
.sol-body .h4, .sol-body h4 {
  color: #0a1425; font-size: 1.25rem; font-weight: 600; line-height: 28px;
}
.sol-body .h5, .sol-body h5 { color: #0a1425; font-size: 1rem; font-weight: 600; }
.sol-body .on-dark .h3, .sol-body .on-dark h3,
.sol-body .on-dark .h4, .sol-body .on-dark h4,
.sol-body .on-dark .h5, .sol-body .on-dark h5 { color: #ffffff; }
.sol-body .line { display: block; }

/* --- body copy: match .section_sub_heading ------------------------------- */
.sol-body .prose,
.sol-body .lead {
  color: #5e6162;
  font-size: 1.05469rem;
  line-height: 32px;
  letter-spacing: 0.5px;
  max-width: 68ch;
}
.sol-body .on-dark .prose, .sol-body .on-dark .lead { color: #c9d8ee; }
/* .deploy-note and .included-line had no on-dark counterpart, so they kept
   light-theme greys on the proof band. */
.sol-body .on-dark .deploy-note,
.sol-body .on-dark .included-line,
.sol-body .on-dark .small,
.sol-body .on-dark .note { color: #c9d8ee; }
.sol-body .on-dark .deploy-note b,
.sol-body .on-dark .deploy-note strong,
.sol-body .on-dark .included-line b,
.sol-body .on-dark .included-line strong { color: #ffffff; }
.sol-body .eyebrow, .sol-body .section-label {
  display: inline-block;
  color: #094fb7; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 1.1px; text-transform: uppercase; margin-bottom: 10px;
}
.sol-body .on-dark .eyebrow, .sol-body .on-dark .section-label { color: #7fb3f5; }

/* --- the accent rule above each section head ----------------------------- */
.sol-body .rule { width: 56px; height: 4px; border-radius: 3px; background: #094fb7; margin-bottom: 18px; }
.sol-body .on-dark .rule { background: #7fb3f5; }

/* --- cards and tiles: the .single_service_box_inner treatment ------------- */
.sol-body .card,
.sol-body .tile,
.sol-body .mockcard,
.sol-body .casestudy,
.sol-body .callout,
.sol-body .note,
.sol-body .deploy-card {
  background-color: #ffffff;
  border: 1px solid #094fb72e;
  border-radius: 16px;
  box-shadow: 0 2px 6px -2px #b7c4d9;
}
.sol-body .card, .sol-body .tile, .sol-body .casestudy, .sol-body .deploy-card { padding: 25px 25px 30px; }
.sol-body .callout, .sol-body .note { padding: 20px 22px; }

/* The inline CTA is a dark panel: its heading is white and its button is
   .btn--on-dark. Styling it as a white card made the heading invisible. */
.sol-body .cta-inline {
  padding: 26px 28px;
  border: 0;
  border-radius: 16px;
  background: #0a1425;
  background-image: linear-gradient(135deg, #0a1425 0%, #10203a 55%, #094fb7 190%);
  box-shadow: 0 2px 12px -1px #b7c4d9;
}
.sol-body .cta-inline h3,
.sol-body .cta-inline .h4 { color: #ffffff; }
.sol-body .cta-inline p { color: #c9d8ee; }
.sol-body .cta-inline b,
.sol-body .cta-inline strong { color: #ffffff; }
.sol-body .tile { text-decoration: none; transition: all ease 0.2s; }
.sol-body .tile:hover,
.sol-body .tile:focus-visible {
  text-decoration: none;
  box-shadow: 0 2px 12px -1px #b7c4d9;
  transform: translateY(-2px);
}
.sol-body .card__title, .sol-body .tile__title {
  color: #0a1425; font-size: 1.1875rem; font-weight: 600; line-height: 28px;
}
.sol-body .card__body, .sol-body .tile__body {
  color: #5e6162; font-size: 0.9375rem; line-height: 27px;
}
.sol-body .tile__go, .sol-body .cap__go {
  color: #094fb7; font-size: 0.875rem; font-weight: 600;
}
.sol-body .card__icon, .sol-body .tile__icon, .sol-body .proof-item__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 12px;
  background: #f0f5ff; color: #094fb7; margin-bottom: 16px;
}
.sol-body .card--problem { border-top: 4px solid #094fb7; }
.sol-body .card--problem .card__icon { background: #fdeced; color: #dc3545; }
.sol-body .on-dark .card,
.sol-body .card--dark {
  background-color: #10203a; border-color: #1d3357; box-shadow: none;
}
.sol-body .on-dark .card .card__icon,
.sol-body .card--dark .card__icon { background: #16294a; color: #7fb3f5; }

/* --- proof band items on the dark ground --------------------------------- */
.sol-body .proof-item__title { color: #ffffff; font-size: 1.0625rem; font-weight: 600; }
.sol-body .proof-item__body { color: #c9d8ee; font-size: 0.9375rem; line-height: 27px; }
.sol-body .on-dark .proof-item__icon { background: #16294a; color: #7fb3f5; }
/* Where one title in a row wraps to two lines, that card's body dropped 30px
   below its neighbours' - "Recordings, encrypted and consented" on the contact
   centre band pushed its body to 152px while the other three sat at 122px.
   Every .proof-item is icon / title / body, so let the row share those three
   tracks: only the rows that actually carry a wrapped title grow, which a
   min-height on the title could not do without padding out every single-line
   card on the other 29 pages. Guarded, because without subgrid the span would
   scatter the items across the parent's rows. */
@supports (grid-template-rows: subgrid) {
  .sol-body .proof-item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    row-gap: 8px;
  }
}

/* --- lists: the FontAwesome tick the rest of the site uses ---------------- */
.sol-body .ticklist { list-style: none; padding-left: 0; margin-top: 20px; }
.sol-body .ticklist li {
  position: relative; padding-left: 28px; margin-bottom: 10px;
  font-size: 0.9375rem; line-height: 27px; color: #5e6162;
}
.sol-body .ticklist li i.sol-icon {
  position: absolute; left: 0; top: 5px; width: auto; height: auto; color: #094fb7;
}
.sol-body .on-dark .ticklist li { color: #c9d8ee; }
.sol-body .on-dark .ticklist li i.sol-icon { color: #7fb3f5; }

/* --- pills and chips ------------------------------------------------------ */
.sol-body .chip, .sol-body .pill, .sol-body .linkpill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; margin: 0 8px 8px 0;
  border-radius: 100px; border: 1px solid #094fb72e;
  background: #f0f5ff; color: #094fb7;
  font-size: 0.8125rem; font-weight: 600; text-decoration: none;
}
.sol-body .linkpill:hover { background: #dfeaff; color: #073a8c; text-decoration: none; }
.sol-body .on-dark .chip, .sol-body .on-dark .pill, .sol-body .on-dark .linkpill {
  background: rgba(127, 179, 245, 0.12); border-color: #1d3357; color: #ffffff;
}

/* --- accordion: the FAQ treatment from css/style.css ---------------------- */
.sol-body .accordion__item {
  margin-bottom: 10px;
  border: 1px solid #094fb72e;
  border-radius: 10px;
  box-shadow: 0 2px 6px -2px #b7c4d9;
  overflow: hidden;
  background: #ffffff;
}
.sol-body .accordion__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: 0.65rem 0.95rem;
  background-color: #f0f5ff; color: #094fb7;
  border: 0; text-align: left;
  font-size: 0.9375rem; font-weight: 600; line-height: 27px;
  transition: all ease 0.1s;
}
.sol-body details[open] > .accordion__btn,
.sol-body .accordion__item:hover > .accordion__btn {
  background-color: #094fb7; color: #ffffff;
}
/* The label inside each <summary> is an <h3> so the section keeps a document
   outline. It must not carry the heading's own size, weight or margins. */
.sol-body .accordion__btn .accordion__title {
  margin: 0;
  flex: 1 1 auto;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  text-transform: none;
  letter-spacing: inherit;
}
.sol-body .accordion__panel {
  padding: 0.85rem 0.95rem;
  background-color: #ffffff;
  border-top: 1px solid #094fb72e;
  font-size: 0.9375rem; line-height: 27px; color: #5e6162;
}
.sol-body .accordion__panel p { margin-bottom: 12px; }

/* --- buttons -------------------------------------------------------------- */
.sol-body .btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px; border-radius: 6px;
  font-size: 0.9375rem; font-weight: 600; text-decoration: none;
  border: 1px solid transparent; transition: all ease 0.2s;
}
.sol-body .btn--primary, .sol-body .btn--on-dark {
  background-color: #094fb7; border-color: #094fb7; color: #ffffff;
}
.sol-body .btn--primary:hover, .sol-body .btn--on-dark:hover {
  background-color: #0b63e5; border-color: #0b63e5; color: #ffffff; text-decoration: none;
}
.sol-body .btn--secondary, .sol-body .btn--ghost, .sol-body .btn--ghost-dark {
  background-color: transparent; border-color: #094fb7; color: #094fb7;
}
.sol-body .on-dark .btn--ghost-dark,
.sol-body .on-dark .btn--secondary { border-color: #ffffff; color: #ffffff; }
.sol-body .btn--secondary:hover, .sol-body .btn--ghost:hover {
  background-color: #094fb7; color: #ffffff; text-decoration: none;
}
.sol-body .on-dark .btn--ghost-dark:hover { background-color: #ffffff; color: #0a1425; }
.sol-body .btn--sm { padding: 7px 16px; font-size: 0.8125rem; }

/* --- arrow links ---------------------------------------------------------- */
.sol-body .arrow-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: #094fb7; font-size: 0.9375rem; font-weight: 600; text-decoration: none;
}
.sol-body .arrow-link:hover { color: #0b63e5; text-decoration: none; }
.sol-body .on-dark .arrow-link { color: #7fb3f5; }
.sol-body .on-dark .arrow-link:hover { color: #ffffff; }

/* --- stat bands ----------------------------------------------------------- */
.sol-body .stat__fig, .sol-body .kpi__v {
  color: #094fb7; font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.25rem);
  font-weight: 700; line-height: 1.05; display: block;
}
.sol-body .on-dark .stat__fig, .sol-body .on-dark .kpi__v { color: #7fb3f5; }
.sol-body .stat__cap, .sol-body .kpi__k {
  color: #5e6162; font-size: 0.9375rem; line-height: 26px; display: block; margin-top: 8px;
}
.sol-body .on-dark .stat__cap, .sol-body .on-dark .kpi__k { color: #c9d8ee; }
/* .kpi__v and .kpi__k only ever appear inside a miniature hero mock, where the
   stat-band scale above blew the figure up to 52px and the label to 15px - on
   telecom "1,284,610" then overflowed its tile by 24px. Restore the mock scale
   without disturbing the real stat bands. */
.sol-body .mock .kpi__v { font-size: 1.0625rem; line-height: 1.2; margin-top: 3px; }
.sol-body .mock .kpi__k { font-size: 0.625rem; line-height: 1.3; margin-top: 0; }

/* --- data tables ---------------------------------------------------------- */
.sol-body .dtable { font-size: 0.9375rem; }
.sol-body .dtable th, .sol-body .dtable td {
  padding: 12px 16px; border-bottom: 1px solid #dee2e6; text-align: left; vertical-align: top;
}
.sol-body .dtable thead th {
  background: #f0f5ff; color: #0a1425; font-weight: 600;
  border-bottom: 2px solid #094fb72e;
}
.sol-body .dtable tbody th { color: #0a1425; font-weight: 600; }
.sol-body .table-scroll {
  overflow-x: auto; border: 1px solid #094fb72e; border-radius: 12px; background: #fff;
}
.sol-body .table-hint, .sol-body .table-caption, .sol-body .small, .sol-body .note--sm {
  /* #6c757d gives 4.17:1 on the #edf2fa tint, under the 4.5:1 AA minimum for
     text this size. #565e64 clears it on both the tint and white. */
  color: #565e64; font-size: 0.8125rem;
}
.sol-body .mock-cap { color: #565e64; }

/* --- steps ----------------------------------------------------------------
   .steps is an <ol> with its own numbered badges, so the list marker would be
   a second number next to the first. */
.sol-body ol.steps { list-style: none; padding-left: 0; margin-left: 0; }
.sol-body .step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: #094fb7; color: #fff; font-size: 1.125rem; font-weight: 700;
}
.sol-body .step__kicker {
  color: #094fb7; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 1.1px; text-transform: uppercase; margin-bottom: 6px;
}
.sol-body .step__body { color: #5e6162; font-size: 0.9375rem; line-height: 27px; }

/* --- wide tables and diagrams on small screens --------------------------
   A .table-scroll or .diagram narrower than its content scrolls, but with no
   affordance the reader cannot tell: on a 390px phone the collections
   pre-dial table hid 53% of itself, including a whole column.
   The cue is painted as two white cover panels on background-attachment:
   local over two edge shadows on background-attachment: scroll, so it appears
   only while there is something left to scroll in that direction and
   disappears the moment the content fits. A plain mask and a "Scroll for
   more" caption showed on tables that were not scrolling at all, and faded
   the last column of a table that fitted perfectly well. */
.sol-body .table-scroll,
.sol-body .diagram {
  scrollbar-width: thin;
  scrollbar-color: #094fb7 #edf2fa;
  -webkit-overflow-scrolling: touch;
  background-image:
    linear-gradient(to right, #ffffff 45%, rgba(255, 255, 255, 0)),
    linear-gradient(to left, #ffffff 45%, rgba(255, 255, 255, 0)),
    radial-gradient(farthest-side at 0 50%, rgba(10, 20, 37, 0.18), rgba(10, 20, 37, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(10, 20, 37, 0.18), rgba(10, 20, 37, 0));
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-size: 36px 100%, 36px 100%, 14px 100%, 14px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.sol-body .table-scroll::-webkit-scrollbar,
.sol-body .diagram::-webkit-scrollbar { height: 8px; }
.sol-body .table-scroll::-webkit-scrollbar-track,
.sol-body .diagram::-webkit-scrollbar-track { background: #edf2fa; border-radius: 4px; }
.sol-body .table-scroll::-webkit-scrollbar-thumb,
.sol-body .diagram::-webkit-scrollbar-thumb { background: #094fb7; border-radius: 4px; }

/* The widest table is authored at 760px. Let the three-column layout reflow
   rather than hide a column at every width where the container is narrower
   than that - which, now that .sol-body .container follows Bootstrap's
   ladder, is everything below 992px. On a phone there is no width left to
   reflow into: at 390 the three columns landed at 143/125/90px and the copy
   broke mid-word, so the tablet reflow stops at 641 and the phone gets a
   measure it can scroll instead. */
@media (min-width: 641px) and (max-width: 991.98px) {
  .sol-body .dtable--wide { min-width: 0; }
  .sol-body .dtable--wide th,
  .sol-body .dtable--wide td { padding: 10px 12px; font-size: 0.875rem; }
}
@media (max-width: 640px) {
  /* The .table-scroll wrapper is already overflow-x:auto; give it something
     to scroll. 560px is the narrowest the three columns read at. */
  .sol-body .dtable--wide { min-width: 560px; }
  .sol-body .dtable--wide th,
  .sol-body .dtable--wide td { padding: 10px 12px; font-size: 0.875rem; }
  /* overflow-wrap:anywhere also feeds the table's min-content width, which is
     how a 760px table was squeezed into 358px in the first place, and it
     splits ordinary words: "predictable ratio" rendered as "predictabl / e
     ratio". break-word breaks only a word that cannot fit a line on its own. */
  .sol-body .dtable th,
  .sol-body .dtable td { overflow-wrap: break-word; }
  /* 40% of the width to the short label column left ~90px each to the two
     columns carrying the sentences. */
  .sol-body .dtable tbody th { width: 30%; }
}
/* The residency diagram cannot reflow - its svg needs 520px before the 13px
   labels become unreadable - so buy it width by trimming the card padding and
   mark the cut edge. Below 768px the container is at most 540px wide, so the
   svg always overflows here and the cue is never shown on a diagram that
   fits; the scroll shadows above cannot help it because the svg paints over
   them. */
@media (max-width: 767.98px) {
  .sol-body .diagram { padding: 16px; }
  .sol-body .diagram {
    -webkit-mask-image: linear-gradient(to right, #000 90%, transparent 100%);
    mask-image: linear-gradient(to right, #000 90%, transparent 100%);
  }
  .sol-body .diagram::after {
    content: "Scroll for more";
    display: block;
    padding: 8px 2px 0;
    font-size: 0.75rem;
    color: #565e64;
  }
}

/* --- tablet stage -----------------------------------------------------------
   The three-column grids dropped straight from 3 columns to 1 between 641 and
   860px, while the two-column grids on the same page stayed at 2. Give them a
   two-column stage so a tablet does not get a single tall stack. */
@media (min-width: 641px) and (max-width: 860px) {
  .sol-body .grid--3,
  .sol-body .relgrid,
  .sol-body .proofband__grid,
  .sol-body .statband__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Two columns leave a grid holding an odd number of cards ending 2+1, with
     the last card alone against ~357px of empty ground. Let that one card
     take the row. The :nth-child(odd) guard is what keeps this off the grids
     that divide evenly - a six-card capability grid is untouched.
     Only the card grids: a .stat is a rail, a number and a 210px caption, so
     widening its column widens the empty ground beside it rather than the
     content, and .proofband__grid holds an even count on every page. */
  .sol-body .grid--3 > :last-child:nth-child(odd),
  .sol-body .relgrid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* --- split section heads ----------------------------------------------------
   The two columns were bottom-aligned, so where a lead paragraph began
   relative to its own heading was a function of how many lines it happened to
   run: measured at 1440 the offset swung from 42px above the heading to 86px
   below it, and 30 pages showed a spread of 20px or more down the page. Align
   the tops instead. The heading column opens with the 4px .rule and its 18px
   margin, so the lead column is inset by the same 22px and every lead now
   starts level with the first line of its heading. */
@media (min-width: 1024px) {
  .sol-body .section__head--split,
  .sol-body .section__head--split-5-7 { align-items: start; }
  .sol-body .section__head--split > :nth-child(2),
  .sol-body .section__head--split-5-7 > :nth-child(2) { padding-top: calc(4px + 18px); }
}
/* Stacked, the 48px column gutter became a row gutter and sat on top of the
   h2's own 18px margin: 66px between a heading and its own lead, against the
   64px .section__head margin below it, so the lead belonged to neither. Only
   the head margin should be a large gap. */
@media (max-width: 1023px) {
  .sol-body .section__head--split,
  .sol-body .section__head--split-5-7 { gap: var(--sp-4); }
}

/* --- card rows keep a shared baseline ---------------------------------------
   A title that wraps to two lines pushed its card's body 28px below its
   neighbours'. Reserving the second line with a min-height fixed that row and
   charged every other one for it: 265 single-line titles across 31 pages got
   a 56px box for 28px of type, so each heading sat 40-52px from its own
   paragraph and only 28px from the icon above it.

   Share the row's tracks instead, the way .proof-item already does above, so
   only a row that actually carries a wrapped title grows and a row of
   single-line titles is left exactly as it was. Every .grid/.relgrid child on
   these pages is either a .tile (icon/title/body/go) or a .card
   (icon/title/body), so the spans are fixed. Guarded on subgrid, because
   without it the span would scatter the cards across the parent's rows;
   browsers without it keep the natural, unreserved heights. */
@supports (grid-template-rows: subgrid) {
  .sol-body .grid > .tile,
  .sol-body .relgrid > .tile {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    row-gap: 12px;
  }
  .sol-body .grid > .card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    row-gap: 0;
  }
  /* Same treatment for the step row, whose titles were never reserved at all
     and so zigzagged the bodies 28px across a four-up row. The step number is
     absolutely positioned and therefore out of flow, so the tracks have to be
     handed down twice: .step spans them and .step__inner subgrids them again
     for the kicker / title / body it actually contains. */
  .sol-body .steps > .step,
  .sol-body .steps > .step > .step__inner {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    row-gap: 0;
  }
}

/* --- case-study aside ------------------------------------------------------ */
.sol-body .casestudy__quote { color: #0a1425; font-size: 1.0625rem; line-height: 30px; font-style: italic; }
.sol-body .casestudy__who b { display: block; color: #0a1425; }
.sol-body .casestudy__who span { color: #6c757d; font-size: 0.875rem; }
/* The card treatment above replaced the component's 6px accent rail with a
   flat 1px border, which left a very wide, mostly empty white panel reading
   as an unfinished frame. Put the rail back. */
.sol-body .casestudy { border-left: 6px solid #094fb7; }
/* Where the card spans the full container the 44ch quote filled a third of it
   while the paragraphs under it ran the full width. Give the quote the card's
   own measure once there is a card wide enough to need it. */
@media (min-width: 992px) {
  .sol-body .casestudy__quote { max-width: 62ch; }
}
/* Where the story card is the only child of a .container it took the whole
   1110px grid while its quote kept the 62ch measure above and the "Until
   then" meta and the CTA are short strings - a 472px by 285px block of empty
   white down the right of the panel, on 18 pages. Cap the panel to its own
   copy measure so the frame ends where the writing does. Inside a split the
   card is already sized by its column and this never applies. */
.sol-body .container > .casestudy { max-width: 72ch; }

/* In the "proof we will not invent" row the story card is the 7-column child
   and runs shorter than the tile beside it. Equalise the two. The :first-child
   guard matters: on the industry pages the card is the 5-column child of a
   much taller row and must keep its own height.
   Equal height alone left 120-148px of dead white under the CTA on six pages,
   so distribute the content rather than pool the slack at the bottom: the
   quote stays at the top and the attribution and CTA sit on the bottom edge.
   Where there is no slack the auto margin resolves to 0 and nothing moves. */
.sol-body .split--7-5 > .casestudy:first-child {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.sol-body .split--7-5 > .casestudy:first-child > .section-label { margin-top: auto; }

/* Where the 7-column child is the short "In practice" callout and the 5-column
   child is the tall "You'll need" card, the wider column carried the smaller
   panel and left a 139-193px void beside it. Swap the tracks for that pairing
   only - the callout takes the narrow column and grows, the card takes the
   wide one and shrinks - and give the callout the card's padding so the two
   headings share a baseline. :has() keeps this off every other 7-5 split. */
@media (min-width: 1024px) {
  .sol-body .split--7-5:has(> .callout:first-child + .card) {
    grid-template-columns: 5fr 7fr;
  }
  .sol-body .split--7-5:has(> .callout:first-child + .card) > .callout {
    padding: 25px 25px 30px;
  }
}

/* --- callouts keep a measure ------------------------------------------------
   .callout p is capped at 62ch but the card was not capped at all, so a
   full-width callout put 535px of copy in a 1140px panel and left the right
   half blank. Cap the copy rather than the card, so the panel's right edge
   agrees with the block it sits in and the measure still holds. */
.sol-body .callout { max-width: none; }
.sol-body .callout p { max-width: 78ch; }
.sol-body .note { max-width: none; }
/* The note is a flex row: an icon and then the copy, which is a <span> on the
   industry and role pages and a <p> on the use-case ones. */
.sol-body .note > span,
.sol-body .note > p { max-width: 78ch; }

/* --- captions and hints belong to the block above them ----------------------
   Each of these caps the box rather than the text, so the element's right edge
   disagreed with the full-width table, figure or card it annotates: a 505px
   hint above an 1108px table, a 401px caption under a 605px figure. Let the
   box take its parent's width; where the type is small enough to need a
   measure, cap the paragraph. */
.sol-body .table-hint { max-width: 100%; }
.sol-body .mock-cap { max-width: 100%; }
.sol-body .casestudy p.small { max-width: 62ch; }
/* The footnote about the empty slot is a direct sibling of the panel, so it
   ran the full 1110px at 13px - the smallest type on the page carrying the
   longest line. Give it the panel's own measure so the two edges agree. */
.sol-body .casestudy + .small { max-width: 72ch; }

/* --- one gutter for every card grid on the page -----------------------------
   .relgrid carried a 16px gap while the capability .grid above it, holding the
   same tile component, carried 24px, so the related row read tighter than
   everything else for no reason. */
.sol-body .relgrid { gap: var(--sp-5); }

/* --- the "what's included" aside on the dark proof band ---------------------
   The on-dark override gave this component reversed type but nothing ever
   swapped its surface, so #c9d8ee sat on the #f6f8fb light card at 1.36:1 and
   the white lead-ins at 1.07:1 - a blank white slab on the navy band with a
   faint smudge in it. Panel and text have to share a ground. */
.sol-body .on-dark .included-line {
  background: #16294a;
  border: 1px solid #1d3357;
}

/* --- the inline CTA headline ------------------------------------------------
   A 24ch cap put the 20px headline in a 266px column above its own 596px
   paragraph, breaking mid-clause and reading as a caption rather than a call
   to action. Let it share the paragraph's own column and lift the size: at
   1440 all six headlines then set on one line at the paragraph's 596px. */
.sol-body .cta-inline h3 { max-width: none; font-size: 1.5rem; }

/* --- the it-engineering Terraform panel ------------------------------------
   The snippet is 1015px tall beside a 483px copy column, leaving ~600px of
   dead space in the row. The <pre> already scrolls horizontally; let it
   scroll vertically too rather than set the height of the whole section. */
.sol-body .code-block pre { max-height: 560px; overflow-y: auto; }

/* --- the real-estate site mock ----------------------------------------------
   The chat bubble is 177.5px tall and pinned 12px from the bottom of a panel
   whose min-height is 150px, so its header rendered above the panel and was
   clipped by the mock's overflow. Give a panel that carries a bubble room for
   it; a mock without one keeps the original height. */
.sol-body .sitemock__body:has(.bubble) { min-height: 210px; }

/* ==========================================================================
   RMT components for the Solutions section
   ========================================================================== */

/* --- "More solutions" band ---------------------------------------------- */
.sol-more-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 20px 18px;
  background: #fff;
  border: 1px solid #094fb72e;
  border-radius: 10px;
  box-shadow: 0 2px 6px -2px #b7c4d9;
  text-decoration: none;
  transition: all ease 0.2s;
}
.sol-more-card:hover,
.sol-more-card:focus-visible {
  text-decoration: none;
  box-shadow: 0 2px 12px -1px #b7c4d9;
  transform: translateY(-2px);
}
.sol-more-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #f0f5ff;
  color: #094fb7;
  font-size: 1rem;
}
.sol-more-card__title { font-size: 1rem; font-weight: 600; color: #161616; line-height: 1.35; }
.sol-more-card__body { font-size: 0.875rem; color: #6c757d; line-height: 1.55; flex: 1 1 auto; }
.sol-more-card__go { font-size: 0.8125rem; font-weight: 600; color: #094fb7; }
.sol-more-card__go i { margin-left: 4px; transition: transform ease 0.2s; }
.sol-more-card:hover .sol-more-card__go i { transform: translateX(3px); }

/* --- "The platform underneath" chips ------------------------------------ */
.sol-module-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #094fb72e;
  border-radius: 10px;
  box-shadow: 0 2px 6px -2px #b7c4d9;
  color: #0a1425;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: all ease 0.2s;
}
.sol-module-chip:hover, .sol-module-chip:focus-visible {
  text-decoration: none; color: #094fb7;
  box-shadow: 0 2px 12px -1px #b7c4d9;
  transform: translateY(-2px);
}
.sol-module-chip > i:first-child {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 34px; height: 34px;
  border-radius: 9px; background: #f0f5ff; color: #094fb7; font-size: 0.875rem;
}
.sol-module-chip > span { flex: 1 1 auto; }
.sol-module-chip__go { color: #094fb7; font-size: 0.75rem; transition: transform ease 0.2s; }
.sol-module-chip:hover .sol-module-chip__go { transform: translateX(3px); }

/* --- Solutions overview: the "jump to" card in the hero ----------------- */
.sol-hub-jump {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  padding: 18px;
  backdrop-filter: blur(4px);
}
.sol-hub-jump__title {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: #93a9c9; margin: 0 0 10px;
}
.sol-hub-jump__link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px; margin-bottom: 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff; font-size: 0.9375rem; font-weight: 500;
  text-decoration: none;
  transition: all ease 0.2s;
}
.sol-hub-jump__link:last-child { margin-bottom: 0; }
.sol-hub-jump__link:hover, .sol-hub-jump__link:focus-visible {
  background: rgba(127, 179, 245, 0.22); color: #fff; text-decoration: none;
}
.sol-hub-jump__count {
  min-width: 26px; text-align: center;
  font-size: 0.8125rem; font-weight: 700; color: #7fb3f5;
}
.sol-hub-group + .sol-hub-group { border-top: 1px solid #eef2f7; }

/* --- Use-cases hub: search and filters ---------------------------------- */
.uc-search-card {
  background: #fff;
  border: 1px solid #094fb72e;
  border-radius: 12px;
  box-shadow: 0 2px 12px -1px #b7c4d9;
  padding: 20px;
}
.uc-search-label { display: block; font-size: 0.8125rem; font-weight: 600; color: #6c757d; margin-bottom: 6px; }
.uc-search { position: relative; display: flex; align-items: center; }
.uc-search > i:first-child { position: absolute; left: 12px; color: #6c757d; font-size: 0.875rem; }
.uc-search__input {
  width: 100%;
  padding: 10px 36px 10px 34px;
  font-size: 0.9375rem;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  background: #fff;
  color: #212529;
}
.uc-search__input:focus { outline: 2px solid #094fb7; outline-offset: 1px; border-color: #094fb7; }
.uc-search__clear {
  position: absolute; right: 6px;
  width: 28px; height: 28px;
  border: 0; border-radius: 6px;
  background: transparent; color: #6c757d; cursor: pointer;
}
.uc-search__clear:hover { background: #f0f5ff; color: #094fb7; }
.uc-filters { border: 0; margin: 16px 0 0; padding: 0; min-width: 0; }
.uc-filters legend {
  float: none; width: auto;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: #6c757d; margin-bottom: 6px; padding: 0;
}
.uc-check {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 12px 6px 0; font-size: 0.875rem; color: #212529;
  cursor: pointer; font-weight: 400;
}
.uc-check input { accent-color: #094fb7; width: 16px; height: 16px; }
.uc-filters__note { font-size: 0.75rem; color: #6c757d; margin: 12px 0 10px; }

/* --- Use-cases hub: the card grid --------------------------------------- */
.uc-count { font-size: 0.875rem; color: #6c757d; margin: 8px 0 20px; }
.uc-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  padding: 20px;
  background: #fff;
  border: 1px solid #094fb72e;
  border-radius: 10px;
  box-shadow: 0 2px 6px -2px #b7c4d9;
  text-decoration: none;
  transition: all ease 0.2s;
}
.uc-card:hover, .uc-card:focus-visible {
  text-decoration: none;
  box-shadow: 0 2px 12px -1px #b7c4d9;
  transform: translateY(-2px);
}
.uc-card__head { display: flex; gap: 12px; align-items: flex-start; }
.uc-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 38px; height: 38px;
  border-radius: 10px; background: #f0f5ff; color: #094fb7;
}
.uc-card__name { display: block; font-size: 0.9375rem; font-weight: 600; color: #161616; line-height: 1.4; }
.uc-card__cat {
  display: block; margin-top: 4px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: #565e64;
}
.uc-card__body { font-size: 0.875rem; color: #6c757d; line-height: 1.6; flex: 1 1 auto; }
.uc-card__go { font-size: 0.8125rem; font-weight: 600; color: #094fb7; }
.uc-card__go i { margin-left: 4px; transition: transform ease 0.2s; }
.uc-card:hover .uc-card__go i { transform: translateX(3px); }
.uc-card-col[hidden] { display: none !important; }
.uc-empty { font-size: 0.9375rem; color: #6c757d; }
.uc-linkbtn {
  border: 0; background: none; padding: 0;
  color: #094fb7; font: inherit; font-weight: 600;
  text-decoration: underline; cursor: pointer;
}

@media (max-width: 575.98px) {
  .uc-search-card { padding: 16px; }
}

/* Creative steps: all white-ground step sections */
.sol-body .section--white .steps > .step {
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(9, 79, 183, 0.08);
  transition: all 0.3s ease;
  background: #fff;
}

.sol-body .section--white .steps > .step:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 44px rgba(9, 79, 183, 0.14);
}

.sol-body .section--white .steps > .step:nth-child(1) { border-top-color: #094fb7; }
.sol-body .section--white .steps > .step:nth-child(2) { border-top-color: #31bae6; }
.sol-body .section--white .steps > .step:nth-child(3) { border-top-color: #f0812d; }
.sol-body .section--white .steps > .step:nth-child(4) { border-top-color: #16a64a; }

.sol-body .section--white .steps > .step .step__num {
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(9, 79, 183, 0.08);
  color: #094fb7;
  font-size: 18px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
}

.sol-body .section--white .steps > .step:nth-child(1) .step__num { background: rgba(9,79,183,0.08); color: #094fb7; }
.sol-body .section--white .steps > .step:nth-child(2) .step__num { background: rgba(49,186,230,0.10); color: #21738c; }
.sol-body .section--white .steps > .step:nth-child(3) .step__num { background: rgba(240,129,45,0.10); color: #f0812d; }
.sol-body .section--white .steps > .step:nth-child(4) .step__num { background: rgba(22,166,74,0.10); color: #16a64a; }

.sol-body .section--white .step__title {
  color: #0a1425;
  font-size: 1.25rem;
}

.sol-body .section--white .step__body {
  color: #4a4a4a;
}

/* Creative table for Replace your IVR */
section#replace-your-ivr-sec-3 .table-scroll {
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(9, 79, 183, 0.08);
  background: #fff;
}

section#replace-your-ivr-sec-3 .dtable {
  border-collapse: collapse;
  width: 100%;
}

section#replace-your-ivr-sec-3 .dtable caption {
  caption-side: top;
  text-align: left;
  padding: 16px 20px;
  font-weight: 700;
  color: #0a1425;
  background: #fff;
  border-bottom: 1px solid #e6eef7;
}

section#replace-your-ivr-sec-3 .dtable thead th {
  background: linear-gradient(90deg, #094fb7, #31bae6);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 0;
}

section#replace-your-ivr-sec-3 .dtable th,
section#replace-your-ivr-sec-3 .dtable td {
  padding: 18px 20px;
  font-size: 0.9375rem;
  border-bottom: 1px solid #eef2f7;
  vertical-align: top;
}

section#replace-your-ivr-sec-3 .dtable tbody tr:nth-child(even) {
  background: #f7fbff;
}

section#replace-your-ivr-sec-3 .dtable tbody tr:hover th,
section#replace-your-ivr-sec-3 .dtable tbody tr:hover td {
  background: #e8f2ff;
}

/* ===========================================================================
   SHARED SECTION TEMPLATE — every solution and use-case sub-page
   ---------------------------------------------------------------------------
   These pages were each hand-written, so the same section slot ended up with
   a split head on one page and a centred head on the next, and the creative
   proof band only existed on the four pages it was built for. Everything
   below is keyed on the section classes rather than on a page id, so all of
   /solutions/* and /use-cases/* render from one definition. Nothing here
   changes page copy — only how the shared blocks are laid out.
   ======================================================================== */

/* --- one head treatment: centred, no rule, lead constrained -------------- */
.sol-body .section__head,
.sol-body .section__head--split,
.sol-body .section__head--split-5-7 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-4);
}

.sol-body .section__head > * { width: 100%; }

.sol-body .section__head .rule { display: none; }

.sol-body .section__head .prose,
.sol-body .section__head .lead {
  max-width: 70ch;
  margin-inline: auto;
  text-align: center;
}

/* The split heads carried a 22px top inset on their second column to line the
   lead up with the heading. Centred and stacked, there is nothing to line up
   against. */
@media (min-width: 1024px) {
  .sol-body .section__head--split > :nth-child(2),
  .sol-body .section__head--split-5-7 > :nth-child(2) { padding-top: 0; }
}

/* --- one proof band: cards on the dark ground ---------------------------- */
.sol-body .proofband .proof-item {
  position: relative;
  padding: 30px 24px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(127, 179, 245, 0.18);
  overflow: hidden;
  transition: all 0.3s ease;
}

.sol-body .proofband .proof-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #7fb3f5, #31bae6);
  opacity: 0.85;
}

.sol-body .proofband .proof-item:hover {
  transform: translateY(-8px);
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(127, 179, 245, 0.4);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.sol-body .proofband .proof-item__icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(127, 179, 245, 0.22), rgba(49, 186, 230, 0.16));
  color: #7fb3f5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 16px;
  transition: all 0.3s ease;
}

.sol-body .proofband .proof-item:hover .proof-item__icon {
  transform: scale(1.08) rotate(-5deg);
  color: #fff;
  background: linear-gradient(135deg, #094fb7, #31bae6);
}

.sol-body .proofband .proof-item__title {
  font-size: 1.125rem;
  margin-bottom: 8px;
}

/* --- chip rows sit under a centred head, so centre them too -------------- */
.sol-body .proofband .chip-row { justify-content: center; }

/* --- .ucrail: sticky shot on the left, numbered rail on the right --------
   Replaces the accordion on the use-case section. Eight collapsed rows meant
   seven of the eight mechanisms were invisible until clicked, so none of them
   were read and none of them were indexed as visible copy. Here every item is
   open, threaded on a spine with its own numbered node, and the screenshot
   stays in view alongside as you read down. Counter-driven numbers, so the
   markup is an ordered list and nothing has to be hand-numbered. */
.sol-body .ucrail {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sp-7);
  align-items: start;
}

.sol-body .ucrail__media { position: sticky; top: 100px; }

.sol-body .ucrail__shot {
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(9, 79, 183, 0.14);
  box-shadow: 0 18px 44px rgba(9, 79, 183, 0.14);
}

.sol-body .ucrail__shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* The spine. Sits behind the nodes, stopping at the last one. */
.sol-body .ucrail__list {
  counter-reset: ucrail;
  list-style: none;
  margin: 0;
  padding: 0 0 0 62px;
  position: relative;
}

.sol-body .ucrail__list::before {
  content: '';
  position: absolute;
  left: 21px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(180deg, rgba(9, 79, 183, 0.28), rgba(49, 186, 230, 0.12));
}

.sol-body .ucrail__item {
  counter-increment: ucrail;
  position: relative;
  padding: 0 0 var(--sp-6) 0;
}

.sol-body .ucrail__item:last-child { padding-bottom: 0; }

/* Numbered node on the spine. */
.sol-body .ucrail__item::before {
  content: counter(ucrail, decimal-leading-zero);
  position: absolute;
  left: -62px;
  top: -2px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid rgba(9, 79, 183, 0.2);
  color: #094fb7;
  font-size: 0.8125rem;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(9, 79, 183, 0.1);
  transition: all 0.25s var(--ease-out);
}

.sol-body .ucrail__item:hover::before {
  background: linear-gradient(135deg, #094fb7, #31bae6);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 20px rgba(9, 79, 183, 0.3);
}

.sol-body .ucrail__title {
  margin: 0 0 6px;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.45;
  color: #0b1b33;
}

.sol-body .ucrail__body {
  margin: 0 0 10px;
  max-width: 60ch;
  font-size: 0.9375rem;
  line-height: 27px;
  color: #5e6162;
}

.sol-body .ucrail__item .arrow-link {
  font-size: 0.875rem;
  font-weight: 600;
}

.sol-body .ucrail__item .arrow-link i.sol-icon {
  transition: transform 0.25s var(--ease-out);
}

.sol-body .ucrail__item:hover .arrow-link i.sol-icon { transform: translateX(4px); }

/* Stacked, the sticky shot would pin over the list, so release it. */
@media (max-width: 1023px) {
  .sol-body .ucrail { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .sol-body .ucrail__media { position: static; top: auto; }
}

@media (max-width: 600px) {
  .sol-body .ucrail__list { padding-left: 46px; }
  .sol-body .ucrail__list::before { left: 17px; }
  .sol-body .ucrail__item::before {
    left: -46px;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    font-size: 0.75rem;
  }
}

/* --- one accordion: numbered cards --------------------------------------- */
/* The use-case list was a flat stack of blue bars: eight identical rows with
   nothing to tell you how far down the list you were, and the open row filled
   solid blue so its own body text lost the heading it belonged to. Number the
   rows from a counter (no markup change), keep the panel on white, and let the
   accent rail and the badge carry the open state instead of the whole bar. */
.sol-body .accordion { counter-reset: solacc; }

.sol-body .accordion__item {
  position: relative;
  counter-increment: solacc;
  margin-bottom: 14px;
  border: 1px solid rgba(9, 79, 183, 0.14);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(9, 79, 183, 0.06);
  overflow: hidden;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out),
    border-color 0.25s var(--ease-out);
}

.sol-body .accordion__item:first-child { border-top: 1px solid rgba(9, 79, 183, 0.14); }

/* Accent rail down the left edge, revealed on hover and while open. */
.sol-body .accordion__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #094fb7, #31bae6);
  opacity: 0;
  transition: opacity 0.25s var(--ease-out);
}

.sol-body .accordion__item:hover {
  transform: translateY(-2px);
  border-color: rgba(9, 79, 183, 0.28);
  box-shadow: 0 12px 30px rgba(9, 79, 183, 0.12);
}

.sol-body details.accordion__item[open] {
  border-color: rgba(9, 79, 183, 0.3);
  box-shadow: 0 16px 36px rgba(9, 79, 183, 0.14);
}

.sol-body .accordion__item:hover::before,
.sol-body details.accordion__item[open]::before { opacity: 1; }

/* Summary row. Stays on white when open — only the badge and the rail change,
   so the panel below reads as a continuation of its own heading. */
.sol-body .accordion__btn {
  gap: 16px;
  padding: 18px 22px;
  background: #fff;
  color: #0b1b33;
  font-size: 1rem;
  line-height: 1.5;
  transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}

.sol-body details[open] > .accordion__btn,
.sol-body .accordion__item:hover > .accordion__btn {
  background-color: #f7fbff;
  color: #094fb7;
}

/* Row number, from the counter above. */
.sol-body .accordion__btn::before {
  content: counter(solacc, decimal-leading-zero);
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f0f5ff;
  color: #094fb7;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: all 0.25s var(--ease-out);
}

.sol-body .accordion__item:hover > .accordion__btn::before {
  background: #e2edff;
}

.sol-body details[open] > .accordion__btn::before {
  background: linear-gradient(135deg, #094fb7, #31bae6);
  color: #fff;
  box-shadow: 0 6px 16px rgba(9, 79, 183, 0.28);
}

/* The plus sits in its own circle so the row has a clear affordance. */
.sol-body .accordion__btn i.sol-icon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f0f5ff;
  color: #094fb7;
  font-size: 12px;
  transition: all 0.25s var(--ease-out);
}

.sol-body details[open] > .accordion__btn i.sol-icon {
  background: #094fb7;
  color: #fff;
}

/* Panel copy is inset to the badge's text edge, under a dashed divider. */
.sol-body .accordion__panel {
  padding: 16px 22px 20px 76px;
  background: #fff;
  border-top: 1px dashed rgba(9, 79, 183, 0.18);
}

.sol-body .accordion__panel p { margin-bottom: 10px; }
.sol-body .accordion__panel p:last-child { margin-bottom: 0; }

/* The "see how X works" link reads as an action, so give it a pill. */
.sol-body .accordion__panel .arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(9, 79, 183, 0.28);
  background: #f7fbff;
  font-weight: 600;
  transition: all 0.25s var(--ease-out);
}

.sol-body .accordion__panel .arrow-link:hover {
  background: #094fb7;
  color: #fff;
  border-color: #094fb7;
}

.sol-body .accordion__panel .arrow-link:hover i.sol-icon { transform: translateX(3px); }
.sol-body .accordion__panel .arrow-link i.sol-icon { transition: transform 0.25s var(--ease-out); }

@media (max-width: 600px) {
  .sol-body .accordion__btn { padding: 16px; gap: 12px; }
  .sol-body .accordion__panel { padding: 14px 16px 18px 16px; }
}

/* Dark-ground accordions keep the same shape on the deep background. */
.sol-body .on-dark .accordion__item {
  background: #10203a;
  border-color: #1d3357;
  box-shadow: none;
}

.sol-body .on-dark .accordion__item:hover,
.sol-body .on-dark details.accordion__item[open] {
  border-color: rgba(127, 179, 245, 0.4);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
}

.sol-body .on-dark .accordion__btn,
.sol-body .on-dark details[open] > .accordion__btn,
.sol-body .on-dark .accordion__item:hover > .accordion__btn {
  background: transparent;
  color: var(--on-dark);
}

.sol-body .on-dark .accordion__btn::before,
.sol-body .on-dark .accordion__btn i.sol-icon {
  background: #16294a;
  color: #7fb3f5;
}

.sol-body .on-dark .accordion__panel {
  background: transparent;
  border-top-color: rgba(127, 179, 245, 0.18);
}

.sol-body .on-dark .accordion__panel .arrow-link {
  background: #16294a;
  border-color: rgba(127, 179, 245, 0.28);
}

/* Styled case-study card for Replace your IVR */
.ivr-casestudy {
  background: #fff;
  border-left: 6px solid #094fb7;
  border-radius: 18px;
  padding: 36px 32px;
  box-shadow: 0 12px 32px rgba(9, 79, 183, 0.08);
  text-align: center;
}

.ivr-casestudy .casestudy__quote {
  font-size: 1.25rem;
  color: #0a1425;
  font-style: normal;
  margin-bottom: 20px;
  line-height: 1.6;
}

.ivr-casestudy .casestudy__who b {
  display: block;
  color: #094fb7;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.ivr-casestudy .casestudy__who span {
  color: #6c757d;
  font-size: 0.9375rem;
}

.ivr-casestudy .arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #094fb7;
  color: #fff;
  padding: 12px 28px;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s ease;
}

.ivr-casestudy .arrow-link:hover {
  background: #063c7d;
  transform: translateX(4px);
}

.ivr-casestudy .arrow-link .sol-icon {
  color: #fff;
  transition: transform 0.25s ease;
}

.ivr-casestudy .arrow-link:hover .sol-icon {
  transform: translateX(4px);
}

/* Next steps section for Replace your IVR */
section#replace-your-ivr-sec-6 .tile {
  background: #fff;
  border-radius: 18px;
  padding: 28px 24px;
  box-shadow: 0 10px 28px rgba(9, 79, 183, 0.08);
  transition: all 0.3s ease;
  border-top: 5px solid #094fb7;
  text-decoration: none;
}

section#replace-your-ivr-sec-6 .tile:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 44px rgba(9, 79, 183, 0.14);
}

section#replace-your-ivr-sec-6 .relgrid > .tile:nth-child(1) { border-top-color: #094fb7; }
section#replace-your-ivr-sec-6 .relgrid > .tile:nth-child(2) { border-top-color: #31bae6; }
section#replace-your-ivr-sec-6 .relgrid > .tile:nth-child(3) { border-top-color: #f0812d; }

section#replace-your-ivr-sec-6 .tile__icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #f0f7ff;
  color: #094fb7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  font-size: 24px;
}

section#replace-your-ivr-sec-6 .tile__title {
  font-size: 1.125rem;
  color: #0a1425;
  margin-bottom: 10px;
}

section#replace-your-ivr-sec-6 .tile__body {
  color: #4a4a4a;
  font-size: 0.9375rem;
  line-height: 1.55;
  margin-bottom: 18px;
}

section#replace-your-ivr-sec-6 .tile__go {
  color: #094fb7;
  font-weight: 600;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

section#replace-your-ivr-sec-6 .tile:hover .tile__go .sol-icon {
  transform: translateX(4px);
}

section#replace-your-ivr-sec-6 .linkrow {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 32px;
}

section#replace-your-ivr-sec-6 .linkpill {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 50px;
  background: #fff;
  border: 1px solid #e6eef7;
  color: #094fb7;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  transition: all 0.25s ease;
}

section#replace-your-ivr-sec-6 .linkpill:hover {
  background: #094fb7;
  color: #fff;
  border-color: #094fb7;
  transform: translateY(-3px);
}

/* More solutions by use case (IVR) */
.sol-more .section__head {
  text-align: center;
  margin-bottom: var(--sp-6);
}

.sol-more .sol-more-card {
  border-radius: 18px;
  padding: 26px 22px;
  box-shadow: 0 10px 28px rgba(9, 79, 183, 0.08);
  transition: all 0.3s ease;
  border-top: 5px solid #094fb7;
  position: relative;
  overflow: hidden;
}

.sol-more .sol-more-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 44px rgba(9, 79, 183, 0.14);
}

.sol-more .row > .col-lg-3:nth-child(4n+1) .sol-more-card { border-top-color: #094fb7; }
.sol-more .row > .col-lg-3:nth-child(4n+2) .sol-more-card { border-top-color: #31bae6; }
.sol-more .row > .col-lg-3:nth-child(4n+3) .sol-more-card { border-top-color: #f0812d; }
.sol-more .row > .col-lg-3:nth-child(4n+4) .sol-more-card { border-top-color: #16a64a; }

.sol-more .sol-more-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #f0f7ff;
  color: #094fb7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  font-size: 22px;
  transition: all 0.25s ease;
}

.sol-more .sol-more-card:hover .sol-more-card__icon {
  transform: scale(1.1) rotate(-4deg);
}

.sol-more .sol-more-card__title {
  font-size: 1.05rem;
  color: #0a1425;
  margin-bottom: 10px;
}

.sol-more .sol-more-card__body {
  color: #4a4a4a;
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 18px;
}

.sol-more .sol-more-card__go {
  color: #094fb7;
  font-weight: 600;
  font-size: 0.875rem;
}

.sol-more .sol-more-card:hover .sol-more-card__go i {
  transform: translateX(4px);
}