/*  CONNECT_SOLUTIONS_SYSTEM_V1 — the landing page's four Solutions touchpoints.
 *
 *  The landing page explains what Connect is. The Solutions pages explain how
 *  it works for one kind of business. These are the joins between them: a
 *  header menu, a preview band under the hero, an industry reading of the
 *  lifecycle, and an explore band before the closing call to action.
 *
 *  Every value here comes from the landing page's own tokens (`experience.css`
 *  and `colour-unification.css`). Nothing introduces a colour, a radius or a
 *  type size the page did not already have, and no existing rule is modified —
 *  this sheet only adds.
 */

/* --------------------------------------------------- header Solutions menu */

.lp-nav-solutions { position: relative; display: inline-flex; }
.lp-nav-trigger {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px;
  padding: 0; border: 0; background: none; color: inherit;
  font: inherit; font-size: var(--lp-sm); font-weight: 600; line-height: 1.4;
}
.lp-nav-trigger .lp-icon { width: 1rem; height: 1rem; transition: transform var(--lp-fast); }
.lp-nav-trigger[aria-expanded="true"] .lp-icon { transform: rotate(180deg); }

.lp-solutions-menu {
  /*  Anchored to the trigger's left edge, not centred on it. Centred, a 700px
   *  panel hanging off the first nav item started 13px left of the viewport at
   *  1280 — the width the desktop menu first appears at. "Solutions" is always
   *  the leftmost nav item, so opening rightwards is the one direction that
   *  cannot leave the screen. */
  position: absolute; top: calc(100% + var(--s-3)); left: 0; transform: none;
  width: min(700px, calc(100vw - 2rem)); padding: var(--s-5);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--lp-radius);
  box-shadow: var(--shadow, 0 28px 80px rgba(52, 39, 24, .12)); z-index: 60;
}
.lp-solutions-menu[hidden] { display: none; }
.lp-solutions-menu > p {
  margin: 0 0 var(--s-4) !important; font-size: var(--lp-xs); font-weight: 650;
  color: var(--muted); max-width: 46ch;
}
.lp-solutions-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-1);
  margin: 0; padding: 0; list-style: none;
}
.lp-solutions-grid a {
  display: grid; gap: .15rem; padding: .7rem .75rem; border-radius: .7rem;
  text-decoration: none; transition: background var(--lp-fast);
}
.lp-solutions-grid a:hover, .lp-solutions-grid a:focus-visible { background: var(--surface-2); }
.lp-solutions-grid b { font-size: var(--lp-sm); font-weight: 650; letter-spacing: -.02em; }
.lp-solutions-grid span { font-size: var(--lp-xs); line-height: 1.5; color: var(--muted); }
.lp-solutions-all {
  display: inline-flex; align-items: center; gap: var(--s-2); width: 100%;
  margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line);
  font-size: var(--lp-xs); font-weight: 650; text-decoration: none; color: var(--accent-text, var(--accent));
}
.lp-mobile-solutions { display: grid; }
.lp-mobile-label {
  margin: var(--s-4) 0 var(--s-1) !important; font-size: var(--lp-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.lp-mobile-menu .lp-mobile-solutions a { min-height: 46px; display: flex; align-items: center; }

/* ------------------------------------------- band 1: built for your business */

.lp-solutions-band { padding-block: var(--s-7); }
.lp-solutions-band-inner {
  display: grid; gap: var(--s-5); align-items: center;
  padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--lp-radius);
  background: var(--surface);
}
@media (min-width: 900px) {
  .lp-solutions-band-inner { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: var(--s-7); }
}
.lp-solutions-band-copy p:not(.lp-label) {
  margin-top: var(--s-3) !important; color: var(--muted); font-size: var(--lp-sm); max-width: 42ch;
}
.connect-site .lp-solutions-band-copy h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.lp-solutions-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.lp-solutions-chips a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-4);
  border: 1px solid var(--line-strong); border-radius: var(--lp-round);
  font-size: var(--lp-sm); font-weight: 600; text-decoration: none;
  transition: border-color var(--lp-fast), background var(--lp-fast), transform var(--lp-fast);
}
.lp-solutions-chips a:hover {
  border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px);
}
.lp-solutions-chips a.lp-solutions-chip-all { border-style: dashed; color: var(--accent-text, var(--accent)); }

/* ------------------------------------- band 2: the same loop, read by industry */

.lp-industry-preview { padding-block: var(--s-8); }
.lp-industry-head { max-width: 56ch; margin-bottom: var(--s-6); }
.lp-industry-head p:not(.lp-label) { margin-top: var(--s-3) !important; color: var(--muted); }
.lp-industry-rows { display: grid; gap: var(--s-3); }
.lp-industry-row {
  display: grid; gap: var(--s-4); padding: var(--s-5);
  border: 1px solid var(--line); border-radius: var(--lp-radius); background: var(--surface);
  text-decoration: none; transition: border-color var(--lp-fast), transform var(--lp-fast);
}
@media (min-width: 880px) {
  .lp-industry-row { grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto; align-items: center; }
}
.lp-industry-row:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.lp-industry-row > b { font-size: 1.05rem; font-weight: 650; letter-spacing: -.02em; }
.lp-industry-steps {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  margin: 0; padding: 0; list-style: none;
}
.lp-industry-steps li {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--lp-xs); color: var(--muted); line-height: 1.5;
}
.lp-industry-steps li + li::before {
  content: ""; width: 14px; height: 1px; background: var(--line-strong); flex: none;
}
.lp-industry-steps li b { color: var(--ink); font-weight: 650; }
.lp-industry-go { display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--lp-xs); font-weight: 650; color: var(--accent-text, var(--accent)); }
.lp-industry-note { margin-top: var(--s-5) !important; font-size: var(--lp-xs); color: var(--muted); max-width: 70ch; }

/* ------------------------------------------------ band 3: explore solutions */

.lp-explore { padding-block: var(--s-8); }
.lp-explore-inner {
  display: grid; gap: var(--s-6);
  padding: var(--s-7) var(--s-6); border: 1px solid var(--line); border-radius: var(--lp-radius);
  background: var(--bg-2);
}
@media (min-width: 900px) {
  .lp-explore-inner { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: var(--s-8); align-items: start; }
}
.connect-site .lp-explore-copy h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.lp-explore-copy p { margin-top: var(--s-3) !important; color: var(--muted); font-size: var(--lp-sm); max-width: 40ch; }
.lp-explore-copy a.lp-text-link {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px;
  margin-top: var(--s-4); font-size: var(--lp-sm); font-weight: 650;
  color: var(--accent-text, var(--accent)); text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
}
.lp-explore-lists { display: grid; gap: var(--s-6); }
@media (min-width: 620px) { .lp-explore-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lp-explore-col { display: grid; gap: .1rem; align-content: start; }
.lp-explore-col > b {
  margin-bottom: var(--s-2); font-size: var(--lp-xs); font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
}
.lp-explore-col a {
  display: flex; align-items: center; min-height: 40px; gap: var(--s-2);
  font-size: var(--lp-sm); text-decoration: none; border-bottom: 1px solid var(--line);
}
.lp-explore-col a:last-child { border-bottom: 0; }
.lp-explore-col a:hover { color: var(--accent-text, var(--accent)); }

/* --------------------------------------------------------- footer solutions */

.lp-footer-solutions { display: grid; gap: .1rem; align-content: start; }
.lp-footer-solutions b {
  margin-bottom: var(--s-2); font-size: var(--lp-xs); font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
}
.lp-footer-solutions a { min-height: 34px; display: flex; align-items: center; font-size: var(--lp-xs); text-decoration: none; }
.lp-footer-solutions a:hover { text-decoration: underline; }
@media (min-width: 900px) and (max-width: 1179px) {
  .lp-footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-footer nav { grid-column: 2 / -1; justify-content: start; }
}
@media (min-width: 1180px) {
  .lp-footer-top { grid-template-columns: 1.15fr 1.15fr 1.05fr 1fr 1.25fr; gap: clamp(1.5rem, 2.4vw, 3rem); }
  .lp-footer nav { grid-column: auto; justify-content: start; }
}

/* ------------------------------------------------------------------ mobile */

@media (max-width: 899px) {
  .lp-nav-solutions { display: none; }
}
@media (max-width: 600px) {
  .lp-solutions-band-inner, .lp-explore-inner { padding: var(--s-5); }
  .lp-industry-steps li:nth-child(n+4) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-nav-trigger .lp-icon, .lp-solutions-chips a, .lp-industry-row { transition: none; }
  .lp-solutions-chips a:hover, .lp-industry-row:hover { transform: none; }
}

/*  The menu grew when Solutions joined it: on a tablet it now reaches down over
 *  the hero video, which is `position: relative; z-index: 2`. It gets a layer of
 *  its own and a scroll, so the last link is always reachable and nothing in the
 *  page paints through it. */
.connect-site .lp-mobile-menu:not([hidden]) {
  z-index: 90;
  max-height: calc(100dvh - var(--header) - var(--s-4));
  overflow-y: auto;
  overscroll-behavior: contain;
}