/* Scoped to the solutions module; reuse the homepage's existing design tokens. */
.solutions {
  scroll-margin-top: calc(var(--wb2-header-height) + 28px);
}
.solutions .wb2-head__sub { max-width: 420px; }
.solutions .wb2-head__title { text-wrap: balance; }
.solutions__tabs {
  position: relative;
  display: flex;
  width: max-content;
  max-width: 100%;
  gap: 4px;
  margin: 36px auto 28px;
  padding: 6px;
  border: 1px solid var(--wb2-border-info);
  border-radius: 999px;
  background: var(--wb2-surface-sunken);
}
.solutions__tabs[hidden] { display: none; }
.solutions__tabs button {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--wb2-text-secondary);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: color 180ms ease;
}
.solutions__tabs button:hover,
.solutions__tabs button[aria-selected="true"] { color: var(--wb2-text-brand); }
.solutions__tabs button[aria-selected="true"] { font-weight: 500; }
.solutions__tab-number { font-size: 11px; font-variant-numeric: tabular-nums; opacity: .65; }
.solutions__tab-indicator {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 0;
  border: 1px solid var(--wb2-border-subtle);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 6px #26213506;
  transform-origin: left center;
  pointer-events: none;
}
.solutions__stage { position: relative; isolation: isolate; margin-top: 42px; }
.solutions__stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -50px -100px 0 -60px;
  background: radial-gradient(ellipse at 79% 50%, #e9e0fb 0%, #f5f0fc 32%, #fcfaff80 55%, transparent 75%);
  mask-image: linear-gradient(to bottom, #000 75%, transparent 100%);
  pointer-events: none;
}
.solution-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  min-width: 0;
  min-height: 620px;
  background: transparent;
}
.solution-panel + .solution-panel { margin-top: 24px; }
.solutions.is-enhanced .solutions__stage { display: grid; }
.solutions.is-enhanced .solution-panel {
  grid-area: 1 / 1;
  margin: 0;
  visibility: hidden;
  pointer-events: none;
}
.solutions.is-enhanced .solution-panel.is-active {
  visibility: visible;
  pointer-events: auto;
}
.solution-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 36px 62px 36px 0;
}
.solution-name {
  margin: 0 0 18px;
  color: var(--wb2-text-brand);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
}
.solution-headline {
  margin: 0;
  font-size: clamp(28px, 2.7vw, 36px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -.02em;
  color: var(--wb2-text-primary);
}
.solution-description {
  margin: 18px 0 22px;
  color: var(--wb2-text-secondary);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.9;
}
.solution-benefits { display: grid; gap: 17px; margin: 0; padding: 0; list-style: none; }
.solution-benefits li { display: flex; align-items: flex-start; gap: 11px; }
.solution-check {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--wb2-brand-50);
  color: var(--wb2-text-brand);
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}
.solution-benefits strong { display: block; font-size: 15px; font-weight: 500; line-height: 1.6; }
.solution-benefits li div > span { display: block; margin-top: 3px; color: var(--wb2-text-secondary); font-size: 13px; line-height: 1.75; }
.solution-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 28px; }
.solution-cta,
.solution-consult { display: inline-flex; align-items: center; justify-content: center; gap: 15px; min-height: 46px; font-size: 14px; text-decoration: none; }
.solution-cta {
  padding: 0 22px;
  border-radius: 999px;
  background: var(--wb2-brand-500);
  color: #fff;
  transition: background 180ms ease, box-shadow 180ms ease;
}
.solution-cta:hover { background: #5938dd; box-shadow: 0 6px 18px #6848ff24; }
.solution-cta span { font-size: 19px; transition: transform 200ms ease; }
.solution-cta:hover span { transform: translate(2px, -2px); }
.solution-consult { color: var(--wb2-text-secondary); }
.solution-consult:hover { color: var(--wb2-text-brand); }
.solution-footnote { margin: 18px 0 0; color: #717078; font-size: 12px; line-height: 1.7; }
.solution-availability { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.solution-availability span:first-child { color: var(--wb2-text-brand); }
.solution-availability span:first-child::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: middle; }
.solution-availability span + span { border-left: 1px solid #d9d4e4; padding-left: 14px; }
.solution-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: 28px 30px 24px;
  background: transparent;
}
.solution-visual > * { position: relative; }
.solution-visual__topline { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; line-height: 1.6; color: #706582; }
.solution-visual__topline > span:first-child { color: var(--wb2-text-brand); }
.solution-flow { width: 100%; max-width: 440px; margin: 26px auto 22px; }
.solution-platforms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 16px 0; border: 1px solid #e4daf9; border-radius: 16px; background: #fff; }
.solution-platform { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; color: #40364e; font-size: 16px; font-weight: 500; }
.solution-platform img { display: block; flex-shrink: 0; width: 44px; height: 44px; }
.solution-connectors { display: block; width: 100%; height: 68px; overflow: visible; }
.solution-connectors path { stroke: #cbbce9; stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.solution-connectors .solution-flow-trace { stroke: #9271df; stroke-width: 1.8; stroke-dasharray: 280; }
.solution-hub { display: flex; align-items: center; gap: 12px; margin: 0; padding: 18px; border: 1px solid #e4daf9; border-radius: 16px; background: #fff; box-shadow: 0 12px 30px #6848ff0b; }
.solution-hub img { flex-shrink: 0; width: 52px; height: 52px; border-radius: 13px; }
.solution-hub strong { display: block; font-size: 18px; font-weight: 500; }
.solution-hub div > span { display: block; margin-top: 4px; color: #7b718d; font-size: 12px; }
.solution-hub__badge { margin-left: auto; padding: 5px 8px; border-radius: 6px; background: var(--wb2-brand-50); color: var(--wb2-text-brand); font-size: 10px; white-space: nowrap; }
.solution-flow-down { position: relative; width: 1px; height: 30px; margin: 0 auto; background: #cbbce9; }
.solution-flow-down span { position: absolute; bottom: 0; left: 50%; width: 5px; height: 5px; border-right: 1px solid #b7a3db; border-bottom: 1px solid #b7a3db; transform: translate(-50%, -1px) rotate(45deg); }
.solution-business {
  --ticket-seam: 108px;
  position: relative;
  border-radius: 16px;
  background: linear-gradient(120deg, #fcf9ff, #fff 72%);
  box-shadow: inset 0 0 0 1px #e2d6f1;
  -webkit-mask-image:
    radial-gradient(circle at 0 var(--ticket-seam), transparent 9px, #000 9.75px),
    radial-gradient(circle at 100% var(--ticket-seam), transparent 9px, #000 9.75px);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(circle at 0 var(--ticket-seam), transparent 9px, #000 9.75px),
    radial-gradient(circle at 100% var(--ticket-seam), transparent 9px, #000 9.75px);
  mask-composite: intersect;
}
.solution-business::before,
.solution-business::after {
  content: "";
  position: absolute;
  top: calc(var(--ticket-seam) - 10px);
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 1px solid #e2d6f1;
  border-radius: 50%;
  pointer-events: none;
}
.solution-business::before { left: -10px; }
.solution-business::after { right: -10px; }
.solution-ticket__head { padding: 20px 22px 18px; }
.solution-ticket__eyebrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; color: #7955b5; font-size: 10px; font-weight: 500; line-height: 14px; letter-spacing: .08em; }
.solution-ticket__barcode { width: 58px; height: 12px; opacity: .4; background: repeating-linear-gradient(90deg, #7955b5 0 1px, transparent 1px 3px, #7955b5 3px 5px, transparent 5px 7px, #7955b5 7px 8px, transparent 8px 11px); }
.solution-ticket__perforation { margin-inline: 12px; border-top: 1px dashed #d6c4ed; }
.solution-ticket__body { padding: 16px 22px 20px; }
.solution-business__heading { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.solution-business__icon { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; background: #f7f4fc; color: #8363bd; }
.solution-business__icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.solution-business__heading strong { display: block; font-size: 16px; font-weight: 500; line-height: 22px; }
.solution-business__heading div > span { display: block; margin-top: 4px; color: #80758f; font-size: 11px; line-height: 16px; }
.solution-process { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.solution-process li { display: flex; align-items: center; gap: 6px; color: #655c72; font-size: 12px; white-space: nowrap; }
.solution-process b { color: #9278b8; font-size: 10px; font-weight: 400; }
.solution-outcome { display: flex; align-items: center; gap: 10px; padding: 13px; border-radius: 8px; background: #f4edfc; }
.solution-outcome__check { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #ede6ff; color: #6848c2; font-size: 13px; }
.solution-outcome strong { display: block; color: #5e4388; font-size: 12px; font-weight: 500; }
.solution-outcome div > span { display: block; margin-top: 3px; color: #81718e; font-size: 10px; }
.solution-receipt-row { display: flex; justify-content: space-between; gap: 10px; padding: 14px 0; color: #766b80; font-size: 12px; border-bottom: 1px solid #f1edf5; }
.solution-receipt-row:first-of-type { margin-top: 10px; }
.solution-receipt-row b { margin-left: 6px; color: #7d57bd; font-weight: 400; }
.solution-receipt-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; padding-top: 16px; font-size: 10px; color: #81728f; }
.solution-receipt-footer strong { color: #74529e; font-weight: 500; }
.solution-visual__caption { margin: 0; color: #77668d; font-size: 12px; line-height: 1.7; text-align: center; }
.solution-screens { position: relative; width: 100%; max-width: 500px; height: 510px; margin: 18px auto; }
.solution-screen { position: absolute; width: 47%; max-width: 218px; margin: 0; }
.solution-screen--entry { top: 32px; left: 0; transform: rotate(-5deg); }
.solution-screen--slots { top: 0; right: 0; transform: rotate(4deg); }
.solution-screen figcaption { margin-bottom: 12px; color: #675378; font-size: 11px; line-height: 1.6; text-align: center; }
.solution-screen figcaption span { margin-right: 5px; color: #997cc1; font-size: 10px; }
.solution-screen a { display: block; padding: 5px; border: 1px solid #eee7f9; border-radius: 22px; background: #fff; box-shadow: 0 22px 40px #6f488c19, 0 4px 10px #6f488c0c; overflow: hidden; transition: transform 250ms ease, box-shadow 250ms ease; }
.solution-screen a:hover { transform: translateY(-5px); box-shadow: 0 26px 45px #6f488c25; }
.solution-screen img { display: block; width: 100%; height: auto; border-radius: 17px; }
.solutions__note { position: relative; z-index: 1; margin: 18px 0 0; color: #7a7480; font-size: 12px; line-height: 1.8; text-align: center; }
.solutions.is-enhanced.is-in-view .solution-panel.is-active .solution-copy,
.solutions.is-enhanced.is-in-view .solution-panel.is-active .solution-flow,
.solutions.is-enhanced.is-in-view .solution-panel.is-active .solution-screens { animation: solution-enter 500ms cubic-bezier(.2,.65,.25,1) both; }
.solutions.is-enhanced.is-in-view .solution-panel.is-active .solution-flow,
.solutions.is-enhanced.is-in-view .solution-panel.is-active .solution-screens { animation-delay: 70ms; }
.solutions.is-enhanced.is-in-view .solution-panel.is-active .solution-flow-trace { animation: solution-connect 1100ms ease-out both; }
@keyframes solution-enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes solution-connect { from { stroke-dashoffset: 280; opacity: .2; } to { stroke-dashoffset: 0; opacity: 1; } }
@media (max-width: 1100px) {
  .solution-copy { padding: 32px 36px 32px 0; }
  .solution-visual { padding: 26px 22px; }
  .solution-hub { padding: 16px 12px; }
  .solution-ticket__head, .solution-ticket__body { padding-inline: 16px; }
  .solution-actions { gap: 10px 14px; }
  .solution-screens { height: 460px; }
  .solution-screen { width: 48%; }
}
@media (max-width: 900px) {
  .solution-panel { grid-template-columns: minmax(0, 1fr); }
  .solution-copy { padding: 24px 0 34px; }
  .solutions__stage::before { inset: 30% -80px 0; background: radial-gradient(ellipse at 50% 65%, #ece3fc 0%, #f7f2fc 36%, transparent 72%); }
  .solution-visual { min-height: 540px; padding: 24px 34px; }
  .solution-description { max-width: 620px; font-size: 15px; }
  .solution-benefits strong { font-size: 16px; }
  .solution-benefits li div > span { font-size: 14px; }
  .solution-screens { height: 510px; max-width: 480px; }
  .solution-headline { font-size: 32px; }
}
@media (max-width: 600px) {
  .solutions__tabs { width: 100%; padding: 5px; gap: 0; margin-top: 28px; }
  .solutions__tabs button { flex: 1 1 0; min-width: 0; min-height: 46px; padding: 0 6px; font-size: 13px; white-space: nowrap; }
  .solutions__tab-number { display: none; }
  .solutions__tab-indicator { top: 5px; bottom: 5px; }
  .solution-copy { padding: 14px 0 30px; }
  .solution-name { font-size: 13px; margin-bottom: 16px; }
  .solution-headline { font-size: 28px; }
  .solution-description { font-size: 15px; line-height: 1.8; }
  .solution-benefits { gap: 16px; }
  .solution-benefits strong { font-size: 15px; }
  .solution-benefits li div > span { font-size: 13px; line-height: 1.8; }
  .solution-actions { gap: 8px 16px; margin-top: 24px; }
  .solution-cta { padding: 0 18px; font-size: 13px; }
  .solution-consult { gap: 6px; font-size: 13px; }
  .solution-visual { min-height: 500px; padding: 22px 0; }
  .solution-platforms { padding-block: 14px; }
  .solution-platform { min-height: 44px; gap: 7px; font-size: 14px; }
  .solution-platform img { width: 36px; height: 36px; }
  .solution-hub { margin-inline: 0; gap: 10px; padding: 14px; }
  .solution-hub strong { font-size: 16px; }
  .solution-hub img { width: 44px; height: 44px; }
  .solution-hub__badge { font-size: 9px; padding: 5px 6px; }
  .solution-ticket__head, .solution-ticket__body { padding-inline: 14px; }
  .solution-business__heading strong { font-size: 14px; }
  .solution-process { gap: 4px; }
  .solution-process li { gap: 4px; font-size: 11px; }
  .solution-receipt-row { font-size: 11px; }
  .solution-visual__topline { font-size: 10px; }
  .solution-visual__caption { font-size: 11px; }
  .solution-screens { height: auto; aspect-ratio: .8; max-width: 350px; }
  .solution-screen { width: 49%; }
  .solution-screen--entry { top: 30px; }
  .solution-screen a { padding: 4px; border-radius: 16px; }
  .solution-screen img { border-radius: 12px; }
  .solution-screen figcaption { font-size: 10px; }
  .solutions__note { font-size: 11px; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .solutions *, .solutions *::before, .solutions *::after { animation: none !important; transition: none !important; }
}