/* ============================================================================
   SOLUTION PAGES — /solutions/*.php
   Navy + yellow system built to the approved membership-portal layout.
   Scoped under .sol-page so no other template is affected.
   ============================================================================ */

.sol-page {
  --navy: #0F2A5E;
  --navy-2: #163C82;
  --ink: #16233D;
  --body: #5A6474;
  --line: #E3E8F0;
  --tint: #EEF4FF;
  --paper: #F7F9FC;
  --accent: #FFCC07;
}

.sol-page main { color: var(--body); }
.sol-page main p { color: var(--body); }
.sol-page .mp-icon { width: 22px; height: 22px; flex: 0 0 auto; }

/* Bands -------------------------------------------------------------------- */
.sol-page .mp-band { padding: 3.5rem 0; }
@media (min-width: 992px) { .sol-page .mp-band { padding: 5rem 0; } }
.sol-page .mp-band--tint { background: var(--tint); }
.sol-page .mp-band--paper { background: var(--paper); }
.sol-page .mp-band--navy { background: var(--navy); }

/* Shared type -------------------------------------------------------------- */
.sol-page .mp-eyebrow {
  display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: #C9A227; margin-bottom: .85rem;
}
.sol-page .mp-band--navy .mp-eyebrow { color: var(--accent); }
.sol-page .mp-h2 {
  font-size: 1.75rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.015em;
  color: var(--navy); margin: 0 0 1rem;
}
@media (min-width: 992px) { .sol-page .mp-h2 { font-size: 2.25rem; } }
.sol-page .mp-band--navy .mp-h2 { color: #FFFFFF; }
.sol-page .mp-lede { margin: 0; max-width: 52ch; }
.sol-page .mp-band--navy .mp-lede { color: #C3CEE4; }

.sol-page .mp-head { display: grid; gap: 1rem 3rem; margin-bottom: 2.5rem; align-items: end; }
@media (min-width: 992px) {
  .sol-page .mp-head { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); margin-bottom: 3rem; }
  .sol-page .mp-head .mp-lede { justify-self: end; }
}

/* Breadcrumb + hero -------------------------------------------------------- */
.sol-page .mp-crumb { font-size: .8125rem; color: #8A93A3; margin-bottom: 1.75rem; }
.sol-page .mp-crumb a { color: #8A93A3; text-decoration: none; }
.sol-page .mp-crumb a:hover { color: var(--navy); text-decoration: underline; }

.sol-page .mp-hero { background: var(--paper); position: relative; overflow: hidden; }
.sol-page .mp-hero .inner-grid { display: grid; gap: 2.5rem; align-items: center; padding: 2.5rem 0 3rem; }
@media (min-width: 992px) {
  .sol-page .mp-hero .inner-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 3.5rem; padding: 3rem 0 4rem; }
}
.sol-page .mp-hero h1 {
  font-size: 2.125rem; font-weight: 700; line-height: 1.08; letter-spacing: -0.02em;
  color: var(--navy); margin: 0 0 1rem; max-width: 14ch;
}
@media (min-width: 992px) { .sol-page .mp-hero h1 { font-size: 3.25rem; } }
.sol-page .mp-hero .kicker { font-size: 1.0625rem; font-weight: 700; color: var(--ink); margin: 0 0 1rem; max-width: 34ch; }
.sol-page .mp-hero .intro { margin: 0 0 2rem; max-width: 46ch; font-size: .9375rem; }

.sol-page .mp-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 2rem; }
@media (min-width: 576px) { .sol-page .mp-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sol-page .mp-chips div { background: #FFFFFF; padding: 1rem .85rem; text-align: center; }
.sol-page .mp-chips .mp-icon { color: var(--navy); margin: 0 auto .55rem; display: block; }
.sol-page .mp-chips span { display: block; font-size: .75rem; font-weight: 700; color: var(--ink); line-height: 1.3; }

.sol-page .mp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.sol-page .btn-solid {
  display: inline-block; background: var(--accent); color: var(--navy); font-weight: 700;
  padding: .85rem 1.75rem; border-radius: 6px; text-decoration: none; font-size: .9375rem; border: 0;
}
.sol-page .btn-solid:hover { background: #F0B800; color: var(--navy); }
.sol-page .btn-quiet { color: var(--navy); font-weight: 700; font-size: .9375rem; text-decoration: none; }
.sol-page .btn-quiet:hover { text-decoration: underline; }

/* Framed screenshots ------------------------------------------------------- */
.sol-page .mp-frame { border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #FFFFFF; box-shadow: 0 18px 45px rgba(15, 42, 94, .12); }
.sol-page .mp-frame img { display: block; width: 100%; height: auto; }
.sol-page .mp-frame--crop img { aspect-ratio: 16 / 11; object-fit: cover; object-position: top center; }

.sol-page .mp-media { position: relative; }
.sol-page .mp-media::before {
  content: ""; position: absolute; right: -14px; bottom: -14px; width: 55%; height: 55%;
  background: var(--accent); border-radius: 12px; z-index: 0;
}
.sol-page .mp-media .mp-frame { position: relative; z-index: 1; }

/* Status cards -------------------------------------------------------------- */
/* Positioned at every width: static content paints below an absolutely
   positioned sibling, which would let the accent block cover these. */
.sol-page .mp-floats { display: grid; gap: .6rem; margin-top: 1.25rem; position: relative; z-index: 2; }
@media (min-width: 992px) {
  .sol-page .mp-floats { position: absolute; left: -1.5rem; top: 50%; transform: translateY(-50%); margin: 0; width: 15rem; }
}
.sol-page .mp-floats div {
  background: #FFFFFF; border: 1px solid var(--line); border-radius: 8px; padding: .7rem .9rem;
  box-shadow: 0 8px 22px rgba(15, 42, 94, .10); display: flex; align-items: center; gap: .65rem;
}
.sol-page .mp-floats .mp-icon { width: 18px; height: 18px; color: var(--navy); }
.sol-page .mp-floats b { display: block; font-size: .75rem; color: var(--ink); font-weight: 700; line-height: 1.25; }
.sol-page .mp-floats span { font-size: .6875rem; color: #8A93A3; }

/* The problem section carries no screenshot, so its cards are the whole media
   column rather than labels floating over an image. They sit in normal flow at
   full width and take the same badge treatment as the audience cards. */
.sol-page .mp-split--mediafirst .mp-media::before { content: none; }
.sol-page .mp-split--mediafirst .mp-floats {
  position: static; inset: auto; transform: none; margin: 0; width: auto; gap: 1rem;
}
.sol-page .mp-split--mediafirst .mp-floats div {
  padding: 1.15rem 1.25rem; gap: 1rem; border-radius: 10px; align-items: flex-start;
  box-shadow: 0 10px 26px rgba(15, 42, 94, .07);
}
.sol-page .mp-split--mediafirst .mp-floats .mp-icon {
  width: 42px; height: 42px; padding: 10px; flex: 0 0 auto;
  background: var(--tint); border-radius: 9px; color: var(--navy);
}
.sol-page .mp-split--mediafirst .mp-floats b { font-size: .9375rem; margin-bottom: .2rem; }
.sol-page .mp-split--mediafirst .mp-floats span { font-size: .8125rem; color: var(--body); line-height: 1.45; }

/* Checklist ---------------------------------------------------------------- */
.sol-page .mp-checks { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.sol-page .mp-checks li { position: relative; padding: .55rem 0 .55rem 1.9rem; font-size: .9375rem; color: var(--body); }
.sol-page .mp-checks li::before {
  content: ""; position: absolute; left: 0; top: .95rem; width: 9px; height: 9px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(255, 204, 7, .22);
}

/* Audience cards ----------------------------------------------------------- */
.sol-page .mp-cards { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 576px) { .sol-page .mp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .sol-page .mp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sol-page .mp-cards article {
  border: 1px solid var(--line); border-radius: 10px; background: #FFFFFF; padding: 1.5rem 1.35rem;
  display: flex; gap: 1rem; align-items: flex-start;
}
.sol-page .mp-cards .badge-sq {
  width: 44px; height: 44px; border-radius: 9px; background: var(--tint); color: var(--navy);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.sol-page .mp-cards h3 { font-size: .9375rem; font-weight: 700; color: var(--navy); margin: 0 0 .35rem; }
.sol-page .mp-cards p { margin: 0; font-size: .8125rem; line-height: 1.5; }

.sol-page .mp-note {
  margin-top: 1.75rem; border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: 8px; background: #FFFFFF; padding: 1.1rem 1.4rem; font-size: .9375rem; color: var(--ink);
}
.sol-page .mp-note p { margin: 0; }
.sol-page .mp-note p + p { margin-top: .5rem; font-size: .875rem; color: var(--body); }
.sol-page .mp-note .mp-related { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line); font-size: .8125rem; }
.sol-page .mp-note .mp-related b { color: var(--ink); }
.sol-page .mp-note a { color: var(--navy); text-decoration: underline; }
.sol-page .mp-note a:hover { color: #163C82; }

/* Flow --------------------------------------------------------------------- */
.sol-page .mp-flow { display: grid; gap: 2rem; position: relative; }
@media (min-width: 768px) { .sol-page .mp-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 1rem; } }
@media (min-width: 1200px) { .sol-page .mp-flow { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.sol-page .mp-flow .node { text-align: center; position: relative; }
.sol-page .mp-flow .disc {
  width: 56px; height: 56px; border-radius: 50%; background: var(--navy); color: #FFFFFF;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; position: relative; z-index: 1;
}
.sol-page .mp-flow .disc .mp-icon { width: 24px; height: 24px; }
.sol-page .mp-flow h3 { font-size: .9375rem; font-weight: 700; color: var(--navy); margin: 0 0 .4rem; }
.sol-page .mp-flow p { margin: 0; font-size: .8125rem; line-height: 1.5; }
/* One dashed rule behind the row; the filled discs sit on top and break it. */
@media (min-width: 1200px) {
  .sol-page .mp-flow::before {
    content: ""; position: absolute; top: 27px; left: 8%; right: 8%;
    border-top: 2px dashed #C2D0E8; z-index: 0;
  }
}
.sol-page .mp-flow-note { margin: 2.25rem 0 0; font-size: .875rem; color: var(--body); max-width: 76ch; }

/* Module table ------------------------------------------------------------- */
.sol-page .mp-split { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 992px) {
  .sol-page .mp-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.5rem; }
  /* media column first: narrow image, wide text */
  .sol-page .mp-split--mediafirst { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
}
.sol-page .mp-table { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #FFFFFF; }
.sol-page .mp-table .tr { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: .35rem .75rem; padding: .95rem 1.1rem; align-items: start; border-bottom: 1px solid var(--line); }
/* Name and description both sit in column 2 on small screens, side by side above it. */
.sol-page .mp-table .tr b { grid-column: 2; }
.sol-page .mp-table .tr p { grid-column: 2; }
@media (min-width: 768px) {
  .sol-page .mp-table .tr { grid-template-columns: 2.75rem minmax(0, 11rem) minmax(0, 1fr); gap: 1rem; align-items: center; }
  .sol-page .mp-table .tr b { grid-column: 2; grid-row: 1; }
  .sol-page .mp-table .tr p { grid-column: 3; grid-row: 1; }
}
.sol-page .mp-table .tr:last-child { border-bottom: 0; }
.sol-page .mp-table .tr:nth-child(odd) { background: #FAFCFF; }
.sol-page .mp-table .mp-icon { color: var(--navy); }
.sol-page .mp-table b { font-size: .875rem; color: var(--navy); font-weight: 700; }
.sol-page .mp-table p { margin: 0; font-size: .8125rem; line-height: 1.5; }

/* Screenshot cards on navy -------------------------------------------------- */
.sol-page .mp-shots { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 576px) { .sol-page .mp-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .sol-page .mp-shots { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Pages with three screenshots rather than four. */
@media (min-width: 992px) { .sol-page .mp-shots--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sol-page .mp-shots figure { margin: 0; background: #FFFFFF; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.sol-page .mp-shots img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: top center; border-bottom: 1px solid var(--line); }
.sol-page .mp-shots figcaption { padding: 1rem 1.1rem 1.25rem; }
.sol-page .mp-shots figcaption b { display: block; font-size: .875rem; color: var(--navy); font-weight: 700; margin-bottom: .3rem; }
.sol-page .mp-shots figcaption span { display: block; font-size: .8125rem; color: var(--body); line-height: 1.5; }

/* Integration logo wall — used where real logos evidence the work better than
   a screenshot would (the ERP and API integration page). ---------------------- */
.sol-page .mp-logos { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 576px) { .sol-page .mp-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 992px) { .sol-page .mp-logos { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.sol-page .mp-logos div { background: #FFFFFF; padding: 1.1rem .9rem; display: flex; align-items: center; justify-content: center; min-height: 76px; }
.sol-page .mp-logos img { max-width: 100%; width: auto; max-height: 34px; height: auto; filter: grayscale(1); opacity: .8; }
.sol-page .mp-logogroup { margin-bottom: 2rem; }
.sol-page .mp-logogroup h3 { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 .85rem; }

/* Implementation steps ------------------------------------------------------ */
.sol-page .mp-steps { display: grid; gap: 1.5rem; }
.sol-page .mp-steps .st { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.sol-page .mp-steps .disc-sm {
  width: 42px; height: 42px; border-radius: 50%; background: var(--tint); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
}
.sol-page .mp-steps h3 { font-size: .9375rem; font-weight: 700; color: var(--navy); margin: .35rem 0 .35rem; }
.sol-page .mp-steps p { margin: 0; font-size: .8125rem; line-height: 1.55; }
.sol-page .mp-steps .out { display: block; margin-top: .4rem; font-size: .75rem; color: var(--navy); font-weight: 700; }

/* Gantt --------------------------------------------------------------------- */
.sol-page .mp-gantt { border: 1px solid var(--line); border-radius: 10px; background: #FFFFFF; padding: 1.25rem 1.25rem 1rem; }
.sol-page .mp-gantt .g-head, .sol-page .mp-gantt .g-row { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: .75rem; align-items: center; }
@media (min-width: 768px) { .sol-page .mp-gantt .g-head, .sol-page .mp-gantt .g-row { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 1rem; } }
.sol-page .mp-gantt .g-head { padding-bottom: .6rem; border-bottom: 1px solid var(--line); margin-bottom: .35rem; }
.sol-page .mp-gantt .months { display: grid; grid-template-columns: repeat(4, 1fr); }
.sol-page .mp-gantt .months span { font-size: .6875rem; font-weight: 700; color: #8A93A3; letter-spacing: .04em; }
.sol-page .mp-gantt .g-row { padding: .4rem 0; }
.sol-page .mp-gantt .g-row:nth-child(odd) { background: #FAFCFF; }
.sol-page .mp-gantt .g-name { font-size: .75rem; color: var(--ink); font-weight: 700; line-height: 1.3; padding: .35rem 0 .35rem .35rem; }
.sol-page .mp-gantt .lane { position: relative; height: 26px; }
.sol-page .mp-gantt .lane::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(to right, var(--line) 1px, transparent 1px);
  background-size: 25% 100%;
}
.sol-page .mp-gantt .bar { position: absolute; top: 7px; height: 12px; border-radius: 3px; background: var(--navy); }
.sol-page .mp-gantt .bar.is-key { background: var(--accent); }
.sol-page .mp-gantt-note { margin: 1.25rem 0 0; font-size: .8125rem; color: var(--body); }

/* Quote --------------------------------------------------------------------- */
.sol-page .mp-quote { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 992px) { .sol-page .mp-quote { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 3.5rem; } }

/* The mark wraps the whole quote: an opening glyph at the head and a full-height
   accent rule down the side, so the decoration spans the block instead of
   floating above one line of it. */
.sol-page .mp-quote .mark {
  position: relative; margin: 0; padding: .25rem 0 .25rem 3.25rem;
  border-left: 3px solid var(--accent);
}
.sol-page .mp-quote .mark::before {
  content: "\201C"; position: absolute; left: .75rem; top: -.5rem;
  font-family: Georgia, "Times New Roman", serif; font-size: 4.5rem; line-height: 1;
  color: var(--accent); pointer-events: none;
}
.sol-page .mp-quote blockquote { position: relative; margin: 0; font-size: 1rem; line-height: 1.7; color: var(--ink); }
@media (min-width: 992px) { .sol-page .mp-quote blockquote { font-size: 1.0625rem; } }
.sol-page .mp-quote .who { margin-top: 1.25rem; font-size: .8125rem; color: var(--body); }
.sol-page .mp-quote .who b { display: block; color: var(--navy); font-weight: 700; }

/* The closing navy CTA panel (.mp-cta / .mp-stats) was removed on 2026-07-27.
   The page now converts via the hero button and the footer consultation form. */