/* Switchboard — home page Solutions band (industries + functions).

   Renders OUTSIDE the scaled 1440 stage, in the slot between the two
   stage segments, so everything here is native-size with its own
   responsive rules — the same arrangement the old helix section used.
   Type sizes match .h-display / .lead at scale 1 so the band reads as a
   sibling of the scaled sections around it.

   Hierarchy: industries are the focus — wide, slim, colour-carded, two
   per row. Functions sit below as a quiet neutral pill row under a
   casual sub-head, so the palette means exactly one thing on this page.
   The solution list and glyphs stay in step with components/nav.js and
   styles/nav.css (where the dropdown colours industries and functions
   alike — that's fine, the menus are their own surface). */

.sol {
  background: var(--bg);
  padding: 110px var(--pad, 24px) 120px;
}
.sol__inner {
  max-width: 1160px;
  margin: 0 auto;
}
.sol__head {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.sol__title {
  font: 500 50px/1.14 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.018em;
  color: #000;
  margin: 14px 0 0;
  text-wrap: balance;
}
.sol__title em { font-style: normal; color: var(--blue, #397ae7); }
.sol__lead {
  font: 400 19px/1.55 "Neue Montreal", system-ui, sans-serif;
  color: var(--muted, #656567);
  margin: 18px 0 0;
}

/* ---- Industries: the focus. Slim cards, three per row. ---- */
.sol__kicker {
  margin-top: 52px;
  text-align: center;
  font: 500 12px/1 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.45);
}
.sol__grid {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.sol__card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 84px;
  padding: 14px 18px;
  /* The card stays neutral — only the icon chip carries the solution's
     colour. The pastel pair still feeds the chip and the hover shadow. */
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
/* Industry pastels + their deep partners (same deep accents the segment
   pages use). Literals, kept in step with styles/nav.css. */
.sol__card[data-sol="financial-services"]      { --sol-chip: #c6dbff; --sol-tint: #eef4ff; --sol-deep: #2866ce; }
.sol__card[data-sol="insurance"]               { --sol-chip: #fcccbf; --sol-tint: #fff4ef; --sol-deep: #b4501f; }
.sol__card[data-sol="real-estate-construction"]{ --sol-chip: #caf0be; --sol-tint: #f1fbec; --sol-deep: #3a7a2c; }
.sol__card[data-sol="logistics"]               { --sol-chip: #ffeba1; --sol-tint: #fffaea; --sol-deep: #8a5a00; }
.sol__card[data-sol="professional-services"]   { --sol-chip: #ddd4ff; --sol-tint: #f3f0ff; --sol-deep: #6b52c9; }
.sol__card[data-sol="legal"]                   { --sol-chip: #bfe8e0; --sol-tint: #effaf7; --sol-deep: #1f7a6d; }

.sol__card i {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  border: 1px solid rgba(0, 0, 0, 0.55);
  background: var(--sol-chip);
  transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.3, 1), border-color 0.2s ease;
}
.sol__card i svg { width: 20px; height: 20px; display: block; }
.sol__card-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.sol__card-text strong {
  font: 500 16.5px/1.2 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.01em;
  color: #0f0f10;
}
.sol__card-text span {
  font: 400 14px/1.35 "Neue Montreal", system-ui, sans-serif;
  color: var(--muted, #656567);
}
/* Only link cards carry the arrow, so a glance tells you which pages are
   live. It rides at the card's right edge and leans in on hover. */
.sol__card-arrow {
  margin-left: auto;
  font: 400 20px/1 "Neue Montreal", system-ui, sans-serif;
  color: rgba(0, 0, 0, 0.55);
  transition: transform 0.2s ease, color 0.2s ease;
}
/* Hover keeps the card grounded: the outline and the arrow take the
   solution's deep accent and nothing lifts or casts. The chip lean and
   the arrow nudge carry the motion instead. Applies to every card — the
   unbuilt ones too, so the whole grid feels alive — but only link cards
   carry an arrow and a pointer. */
.sol__card:hover {
  border-color: var(--sol-deep);
}
.sol__card:hover i {
  transform: scale(1.07);
  border-color: rgba(0, 0, 0, 0.78);
}
.sol__card:hover .sol__card-arrow {
  transform: translateX(4px);
  color: var(--sol-deep);
}
/* Landers that aren't built yet render as spans: same card, no arrow, no
   navigation, no hand cursor. Delete the modifier as pages ship. */
.sol__card--soon { cursor: default; }

/* ---- Functions: the quiet second read. One line of plain text under a
        small sub-head — no cards, no icons, no palette — so it can never
        compete with the industry grid. The li spans become links as the
        landers ship. ---- */
.sol__fn {
  /* A quiet bounding panel: one step of cream against the page ground and
     a faint hairline, so the block reads as a deliberate aside — present,
     but never competing with the white industry cards above it. */
  margin: 64px auto 0;
  /* Narrower than the industry grid above it, so it reads as an aside rather
     than a second band of equal weight. The note inside is capped at 620px,
     which sets the floor here. */
  max-width: 760px;
  padding: 28px 36px 30px;
  background: var(--cream, #f7f4e8);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 18px;
  text-align: center;
}
.sol__fn-title {
  font: 500 17px/1.25 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.008em;
  color: #0f0f10;
  margin: 0;
}
.sol__fn-note {
  font: 400 14.5px/1.5 "Neue Montreal", system-ui, sans-serif;
  color: var(--muted, #656567);
  margin: 6px auto 0;
  max-width: 620px;
}
/* White pills on the cream panel — no icons, no palette, so they stay a
   register below the industry cards. Spans become <a>s as landers ship. */
.sol__fn-line {
  list-style: none;
  /* Capped so the six pills break three and three rather than five and one.
     The measured widths make row two 461px and a fourth pill on row one
     556px, so anything in between forces the even split; 508 sits in the
     middle of that window, ~47px of slack either way. Re-measure if a
     function is renamed or added. */
  max-width: 508px;
  margin: 18px auto 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.sol__fn-line li > span,
.sol__fn-line li > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  font: 400 14.5px/1 "Neue Montreal", system-ui, sans-serif;
  color: #2a2a2c;
  text-decoration: none;
}
.sol__fn-line svg { width: 14px; height: 14px; display: block; color: rgba(0, 0, 0, 0.6); transition: color 0.18s ease; }
/* Rest state stays white and neutral — the industry cards own the palette
   on this band. Hover is where each function shows its colour: the pill
   washes in the function's tint, the border picks up its pastel, and the
   glyph turns its deep accent. Same pairings as the nav dropdown rows. */
.sol__fn-line a[data-sol="business-operations"] { --sol-chip: #c6dbff; --sol-tint: #eef4ff; --sol-deep: #2866ce; }
.sol__fn-line a[data-sol="customer-support"]    { --sol-chip: #fcccbf; --sol-tint: #fff4ef; --sol-deep: #b4501f; }
.sol__fn-line a[data-sol="hr"]                  { --sol-chip: #ffdff4; --sol-tint: #fff4fb; --sol-deep: #ac3c85; }
.sol__fn-line a[data-sol="finance"]             { --sol-chip: #caf0be; --sol-tint: #f1fbec; --sol-deep: #3a7a2c; }
.sol__fn-line a[data-sol="sales-marketing"]           { --sol-chip: #ffeba1; --sol-tint: #fffaea; --sol-deep: #8a5a00; }
.sol__fn-line a[data-sol="compliance-audit"]    { --sol-chip: #ddd4ff; --sol-tint: #f3f0ff; --sol-deep: #6b52c9; }
.sol__fn-line li > a {
  /* Two zero-length shadows so hover can interpolate the weight smear. */
  text-shadow: 0 0 0 currentColor, 0 0 0 currentColor;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease,
              text-shadow 0.18s ease;
}
.sol__fn-line li > a:hover {
  background: var(--sol-tint, #fff);
  border-color: var(--sol-chip, rgba(0, 0, 0, 0.5));
  color: #0a0a0a;
  text-shadow: 0.32px 0 0 currentColor, -0.32px 0 0 currentColor;
}
.sol__fn-line li > a:hover svg { color: var(--sol-deep, rgba(0, 0, 0, 0.8)); }

@media (prefers-reduced-motion: reduce) {
  .sol__card, .sol__card i, .sol__card-arrow { transition: none; }
  .sol__card:hover i, .sol__card:hover .sol__card-arrow { transform: none; }
}

@media (max-width: 1023px) {
  .sol__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 899px) {
  .sol { padding: 72px var(--pad, 20px) 80px; }
  .sol__title { font-size: 34px; }
  .sol__lead { font-size: 17px; }
  .sol__kicker { margin-top: 36px; }
  .sol__grid { margin-top: 14px; gap: 10px; }
  .sol__card { min-height: 0; padding: 14px 18px; }
  .sol__fn { margin-top: 50px; padding: 22px 20px 24px; }
}
@media (max-width: 680px) {
  .sol__grid { grid-template-columns: 1fr; }
}
/* Two of the six labels are long enough that no two can share a phone-width
   row, so the natural wrap comes out ragged (one, two, two, one). One per row
   reads as the menu it actually is here, matches the mobile nav sheet, and
   gives each row a real tap target. */
@media (max-width: 620px) {
  .sol__fn-line { max-width: none; display: grid; grid-template-columns: 1fr; gap: 7px; }
  .sol__fn-line li > a,
  .sol__fn-line li > span {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
  }
}