/* Solutions pages — shared family components for the eight /solutions/* pages.
   Pages combine these with the el-* utilities (el-eyebrow, el-h2, el-lede, el-cta)
   and inline style attributes for page-specific mock details. */

/* ---------- Hero (dark, matches pc-hero) ---------- */
.sol-hero { background: var(--sv-noire); background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px); background-size: 72px 72px; position: relative; overflow: hidden; }
.sol-hero::after { content: ""; position: absolute; top: -180px; right: -140px; width: 640px; height: 640px; background: radial-gradient(circle, rgba(var(--sv-green-rgb),0.16), transparent 62%); pointer-events: none; }
.sol-hero__inner { max-width: 1240px; margin: 0 auto; padding: 72px 28px 64px; position: relative; z-index: 1; }
.sol-hero__title { font-size: 52px; line-height: 58px; font-weight: 700; letter-spacing: -0.03em; color: #fff; margin: 0 0 22px; max-width: 24ch; text-wrap: pretty; }
.sol-hero__lede { font-size: 19px; line-height: 30px; color: rgba(255,255,255,0.66); margin: 0 0 32px; max-width: 62ch; text-wrap: pretty; }
.sol-hero__checks { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.sol-hero__checks .check-item { color: rgba(255,255,255,0.66); }
.sol-hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }

/* ---------- Sections ---------- */
.sol-section { background: var(--sv-paper); }
.sol-section--mist { background: var(--sv-mist); border-top: 1px solid var(--sv-line-soft); }
.sol-section--cream { background: var(--sv-cream); border-top: 1px solid var(--sv-line-soft); }
.sol-section__inner { max-width: 1240px; margin: 0 auto; padding: 72px 28px 76px; }

/* ---------- Card grids ---------- */
.sol-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sol-cards--2 { grid-template-columns: repeat(2, 1fr); }
.sol-cards--4 { grid-template-columns: repeat(4, 1fr); }
.sol-card { background: var(--sv-paper); border: 1px solid var(--sv-line-soft); border-radius: var(--radius-lg); padding: 24px; display: flex; flex-direction: column; align-items: flex-start; }
.sol-card--tinted { background: var(--sv-mist); }
.sol-card__tag { font: 500 11.5px/16px var(--font-sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--sv-muted); margin-bottom: 10px; }
.sol-card__title { font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 8px; }
.sol-card__copy { font-size: 14px; line-height: 22px; color: var(--sv-muted); margin: 0; }
.sol-card__link { display: inline-block; margin-top: 14px; font-size: 13.5px; font-weight: 600; color: var(--sv-green-700); text-decoration: none; }
.sol-card__link:hover { text-decoration: underline; }

/* ---------- Numbered steps ---------- */
.sol-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sol-steps--3 { grid-template-columns: repeat(3, 1fr); }
.sol-step { border: 1px solid var(--sv-line-soft); border-radius: var(--radius-lg); padding: 22px; background: var(--sv-paper); }
.sol-step__num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sv-green-50); color: var(--sv-green-700); font: 600 13px/1 var(--font-sans); margin-bottom: 14px; }
.sol-step__title { font-size: 15.5px; line-height: 22px; font-weight: 600; margin: 0 0 6px; }
.sol-step__copy { font-size: 13.5px; line-height: 21px; color: var(--sv-muted); margin: 0; }

/* ---------- Split feature rows ---------- */
.sol-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 30px 0; }
.sol-split__copy h3 { font-size: 24px; line-height: 31px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 10px; }
.sol-split__copy p { font-size: 15px; line-height: 24px; color: var(--sv-muted); margin: 0 0 14px; }

/* ---------- Stat band ---------- */
.sol-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sol-stats--4 { grid-template-columns: repeat(4, 1fr); }
.sol-stat { border: 1px solid var(--sv-line-soft); border-radius: var(--radius-lg); padding: 20px 24px; background: var(--sv-paper); }
.sol-stat__value { font-size: 32px; line-height: 38px; font-weight: 700; letter-spacing: -0.02em; }
.sol-stat__label { font-size: 13px; line-height: 19px; color: var(--sv-muted); margin-top: 4px; }

/* ---------- Quote ---------- */
.sol-quote { border-left: 3px solid var(--sv-green); padding: 6px 0 6px 24px; max-width: 760px; }
.sol-quote__text { font-size: 19px; line-height: 30px; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 10px; }
.sol-quote__attr { font-size: 13.5px; color: var(--sv-muted); }

/* ---------- FAQ ---------- */
.sol-faq { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 44px; }
.sol-faq__q { font-size: 15.5px; line-height: 23px; font-weight: 600; margin: 0 0 6px; }
.sol-faq__a { font-size: 14px; line-height: 22px; color: var(--sv-muted); margin: 0; }

/* ---------- Mock panel (generic UI frame for page mocks) ---------- */
.sol-panel { background: #fff; border: 1px solid var(--sv-line); border-radius: 14px; box-shadow: var(--shadow-3); overflow: hidden; }
.sol-panel__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--sv-line-soft); background: var(--sv-mist); }
.sol-panel__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(27,27,27,0.14); }
.sol-panel__addr { margin-left: 10px; display: inline-flex; align-items: center; height: 22px; padding: 0 12px; border-radius: 999px; background: #fff; border: 1px solid var(--sv-line-soft); font: 500 11.5px/1 var(--font-mono); color: var(--sv-muted); }
.sol-panel__body { padding: 18px; }
.sol-pill { display: inline-flex; align-items: center; height: 20px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1; white-space: nowrap; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .sol-hero__grid { grid-template-columns: 1fr; }
  .sol-hero__title { font-size: 38px; line-height: 44px; }
  .sol-cards, .sol-cards--2, .sol-cards--4, .sol-steps, .sol-steps--3, .sol-stats, .sol-stats--4 { grid-template-columns: 1fr 1fr; }
  .sol-split { grid-template-columns: 1fr; gap: 28px; }
  .sol-faq { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .sol-cards, .sol-cards--2, .sol-cards--4, .sol-steps, .sol-steps--3, .sol-stats, .sol-stats--4 { grid-template-columns: 1fr; }
}