/* Isolated local preview: open, staggered scenes instead of a comparison table. */
.solutions-showcase { background: linear-gradient(180deg,#fff 0%,#fdfcff 50%,#fff 100%); }
.solutions-showcase .section-head { margin-bottom: 56px; }
.solutions-showcase .section-head > p { font-size: 14px; }
.solutions-showcase .solution-stories { display: grid; grid-template-columns: 1.08fr .92fr; gap: 64px 8%; align-items: start; }
.solutions-showcase .solution-story { min-width: 0; }
.solutions-showcase .story-workforce { margin-top: 104px; }
.solutions-showcase .story-workflow { width: 90%; }
.solutions-showcase .story-organization { margin-top: 80px; margin-left: -6%; }
.solutions-showcase .solution-art { position: relative; height: 300px; isolation: isolate; }
.solutions-showcase .solution-art::before { content: ''; position: absolute; inset: 5% -2%; z-index: -1; border-radius: 48%; background: radial-gradient(ellipse,#e6dfff99,transparent 70%); }
.solutions-showcase .solution-copy { padding: 26px 4px 0; }
.solutions-showcase .solution-category { color: #6054bd; font-size: 13px; font-weight: 550; display: flex; align-items: center; gap: 12px; }
.solutions-showcase .solution-category > span { font: 10px/1.5 "SFMono-Regular",Consolas,monospace; color: #777386; letter-spacing: 1.3px; }
.solutions-showcase h3 { color: var(--ink); font-size: clamp(26px,2.65vw,34px); font-weight: 550; line-height: 1.5; letter-spacing: -.8px; margin-top: 14px; text-wrap: balance; }
.solutions-showcase .solution-description { font-size: 14px; color: var(--muted); line-height: 1.9; margin-top: 15px; max-width: 29em; }
.solutions-showcase .solution-link { display: inline-flex; gap: 20px; align-items: center; min-height: 44px; margin-top: 17px; color: #4d43ba; font-size: 13px; font-weight: 500; }
.solutions-showcase .solution-link > span { display: inline-block; font-size: 22px; transition: transform 160ms var(--ease-out); }
.solutions-showcase .solution-link:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; border-radius: 5px; }
.solutions-showcase .disclaimer { margin-top: 58px; text-align: center; }
.solutions-showcase .art-caption { position: absolute; bottom: 9px; left: 0; width: 100%; text-align: center; font: 10px/1.8 "SFMono-Regular",Consolas,monospace; letter-spacing: 2px; color: #756e8b; }
/* Knowledge: loose source sheets come together in one grounded answer. */
.solutions-showcase .knowledge-sheet { position: absolute; width: 146px; height: 168px; border: 1px solid #ded9f3; border-radius: 15px; padding: 23px; background: linear-gradient(150deg,#fff,#f1edff); box-shadow: 0 16px 35px #7260a312; }
.solutions-showcase .knowledge-sheet > span { color: #8170ab; font-size: 12px; }
.solutions-showcase .knowledge-sheet i { display: block; height: 5px; background: #ddd5ee; border-radius: 5px; margin-top: 16px; }
.solutions-showcase .knowledge-sheet i:last-child { width: 60%; }
.solutions-showcase .sheet-back { top: 12px; left: 15%; transform: rotate(-13deg); }
.solutions-showcase .sheet-front { top: 18px; right: 14%; transform: rotate(11deg); }
.solutions-showcase .knowledge-answer { position: absolute; top: 117px; left: 10%; width: 80%; display: flex; align-items: center; gap: 17px; padding: 24px; border-radius: 22px; background: #ffffffed; border: 1px solid #fff; box-shadow: 0 17px 48px #7561b525,inset 0 -2px 2px #ddd4f338; transform: rotate(-3deg); }
.solutions-showcase .solution-spark { flex: none; width: 48px; height: 52px; display: grid; place-items: center; border-radius: 15px; background: linear-gradient(135deg,#eddefb,#d9deff); font-size: 34px; color: #6d57dc; }
.solutions-showcase .knowledge-answer small { display: block; font-size: 11px; color: #797487; margin-bottom: 7px; }
.solutions-showcase .knowledge-answer strong { font-size: 19px; font-weight: 550; color: #3e355b; }
.solutions-showcase .knowledge-answer p { display: flex; gap: 14px; font-size: 10px; color: #756b8b; margin-top: 15px; }
.solutions-showcase .knowledge-answer p span::before { content: '✓'; color: #8560d1; margin-right: 5px; }
/* Workforce: a friendly small copilot, with three distinct job contexts. */
.solutions-showcase .workforce-art::before { background: radial-gradient(ellipse,#dbdfffaa,transparent 70%); }
.solutions-showcase .copilot-orbit { position: absolute; width: 88%; height: 68%; top: 12%; left: 6%; border: 1px solid #cbc9f06b; border-radius: 50%; transform: rotate(-19deg); }
.solutions-showcase .copilot-orbit.inner { width: 64%; height: 50%; left: 18%; top: 21%; transform: rotate(21deg); }
.solutions-showcase .copilot-bot { position: absolute; left: calc(50% - 71px); top: 82px; width: 142px; height: 120px; border-radius: 48px 48px 43px 43px; background: linear-gradient(135deg,#fff 18%,#e1ddf1); box-shadow: 0 16px 24px #6c62a922,inset -6px -8px 14px #bcb4d554,inset 4px 6px 6px white; transform: rotate(-6deg); display: grid; place-items: center; }
.solutions-showcase .bot-face { width: 109px; height: 74px; border-radius: 29px; background: linear-gradient(140deg,#36345c,#151426); border: 3px solid #cec9e2; display: flex; justify-content: center; align-items: center; gap: 25px; }
.solutions-showcase .bot-face i { width: 13px; height: 23px; border-radius: 50%; background: linear-gradient(#adc9ff,#7390ff); box-shadow: 0 0 13px #7383ff80; }
.solutions-showcase .copilot-label { position: absolute; top: 236px; width: 100%; text-align: center; font-size: 12px; letter-spacing: 2px; color: #6d6685; }
.solutions-showcase .role-bubble { position: absolute; padding: 12px 15px; border: 1px solid #fff; border-radius: 15px; background: #ffffffe8; box-shadow: 0 10px 28px #6d55ae0f; font-size: 12px; color: #615674; z-index: 1; white-space: nowrap; }
.solutions-showcase .role-bubble i { color: #8562d9; font-size: 17px; margin-left: 13px; font-style: normal; }
.solutions-showcase .role-sales { top: 29px; left: 6%; transform: rotate(-7deg); }
.solutions-showcase .role-content { top: 60px; right: 0; transform: rotate(8deg); }
.solutions-showcase .role-ops { top: 197px; left: 0; transform: rotate(-5deg); }
/* Workflow: a stepped path, not another row-and-column matrix. */
.solutions-showcase .workflow-art { height: 280px; }
.solutions-showcase .workflow-art::before { background: radial-gradient(ellipse,#dfe6ff9e,transparent 70%); }
.solutions-showcase .workflow-trail { position: absolute; inset: 0; width: 100%; height: 100%; color: #aaa0da; }
.solutions-showcase .workflow-tile { position: absolute; width: 99px; height: 102px; border-radius: 23px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; background: linear-gradient(135deg,#fff,#f0effb); box-shadow: 0 12px 0 -6px #e0def0,0 20px 35px #8274ba16; border: 1px solid #fff; }
.solutions-showcase .workflow-tile > span { font-size: 27px; color: #7a68ce; }
.solutions-showcase .workflow-tile strong { font-size: 12px; font-weight: 500; color: #6b607f; }
.solutions-showcase .tile-input { left: 5%; top: 125px; transform: rotate(-8deg); }
.solutions-showcase .tile-ai { left: calc(50% - 49px); top: 81px; transform: rotate(4deg); background: linear-gradient(140deg,#7668ed,#5954d4); border-color: #9d8ef5; box-shadow: 0 12px 0 -6px #a39aea,0 20px 35px #7261c725; }
.solutions-showcase .tile-ai > span,.solutions-showcase .tile-ai strong { color: #fff; }
.solutions-showcase .tile-review { right: 4%; top: 26px; transform: rotate(9deg); }
/* Organization: shared working methods remain with the team. */
.solutions-showcase .organization-art { height: 320px; }
.solutions-showcase .team-playbook { position: absolute; width: 185px; height: 217px; top: 25px; left: calc(50% - 89px); padding: 24px 23px; border-radius: 6px 19px 19px 6px; background: linear-gradient(120deg,#e4dbfa,#f3eeff); border-left: 7px solid #c3b6e2; box-shadow: 4px 5px 0 #fff,6px 8px 0 #ddd7ed,12px 22px 30px #8372ac25; transform: rotate(9deg); }
.solutions-showcase .team-playbook > span { font: 8px monospace; letter-spacing: 1px; color: #84729f; }
.solutions-showcase .team-playbook strong { display: block; color: #665283; font-size: 23px; line-height: 1.6; margin-top: 17px; font-weight: 550; }
.solutions-showcase .team-playbook i { font-style: normal; font-size: 10px; color: #827094; display: block; margin-top: 13px; }
.solutions-showcase .team-playbook b { position: absolute; bottom: 10px; right: 17px; color: #b0a1d2; font-weight: 400; font-size: 34px; }
.solutions-showcase .team-note { position: absolute; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: #ffffffed; box-shadow: 0 12px 30px #8065ab14; border: 1px solid white; border-radius: 15px; color: #766285; font-size: 12px; }
.solutions-showcase .team-note i { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 9px; background: #efe8fb; font-style: normal; color: #8d6bd3; }
.solutions-showcase .note-method { top: 60px; left: -1%; transform: rotate(-6deg); }
.solutions-showcase .note-growth { top: 176px; right: -1%; transform: rotate(5deg); }
.solutions-showcase .team-avatars { display: flex; position: absolute; left: 14%; bottom: 12px; align-items: center; }
.solutions-showcase .team-avatars span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 3px solid white; background: #dcd8f1; color: #655886; font-size: 10px; margin-left: -7px; }
.solutions-showcase .team-avatars span:nth-child(2) { background: #d3dbf7; color: #526290; }
.solutions-showcase .team-avatars span:nth-child(3) { background: #e9d6ed; color: #87618c; }
.solutions-showcase .team-avatars b { font-size: 12px; color: #897399; font-weight: 500; margin-left: 9px; }
@media (hover: hover) and (pointer: fine) {
  .solutions-showcase .solution-link:hover > span { transform: translate(3px,-3px); }
  .solutions-showcase .solution-link:hover { text-decoration: underline; text-underline-offset: 5px; }
}
@media (max-width: 1100px) {
  .solutions-showcase .solution-stories { column-gap: 6%; }
  .solutions-showcase .knowledge-answer { padding: 20px; gap: 12px; left: 5%; width: 90%; }
  .solutions-showcase .knowledge-answer strong { font-size: 17px; }
  .solutions-showcase .note-method { left: -2%; top: 38px; }
  .solutions-showcase .note-growth { right: -2%; top: 195px; }
}
@media (max-width: 800px) {
  .solutions-showcase .section-head { display: block; }
  .solutions-showcase .section-head > p { margin-top: 23px; }
  .solutions-showcase .solution-stories { grid-template-columns: 1fr 1fr; gap: 50px 6%; }
  .solutions-showcase .story-workforce { margin-top: 76px; }
  .solutions-showcase .story-workflow { width: 100%; }
  .solutions-showcase .story-organization { margin-left: 0; }
  .solutions-showcase .solution-art { height: 250px; }
  .solutions-showcase .knowledge-sheet { width: 110px; height: 145px; padding: 17px; }
  .solutions-showcase .knowledge-answer { top: 100px; padding: 16px; gap: 10px; }
  .solutions-showcase .solution-spark { width: 35px; height: 42px; font-size: 27px; }
  .solutions-showcase .knowledge-answer strong { font-size: 14px; }
  .solutions-showcase .knowledge-answer p { gap: 6px; font-size: 9px; }
  .solutions-showcase .copilot-bot { top: 69px; }
  .solutions-showcase .copilot-label { top: 220px; font-size: 11px; }
  .solutions-showcase .role-bubble { font-size: 10px; padding: 10px 11px; }
  .solutions-showcase .role-bubble i { margin-left: 7px; }
  .solutions-showcase .role-sales { left: 0; top: 14px; }
  .solutions-showcase .role-content { top: 58px; }
  .solutions-showcase .role-ops { top: 182px; }
  .solutions-showcase .workflow-tile { width: 78px; height: 87px; border-radius: 20px; }
  .solutions-showcase .tile-ai { left: calc(50% - 39px); }
  .solutions-showcase .tile-input { top: 122px; }
  .solutions-showcase .team-playbook { width: 158px; height: 183px; left: calc(50% - 75px); top: 5px; padding: 18px; }
  .solutions-showcase .team-playbook strong { font-size: 20px; margin-top: 12px; }
  .solutions-showcase .team-playbook > span { font-size: 7px; }
  .solutions-showcase .team-playbook i { font-size: 9px; }
  .solutions-showcase .team-note { font-size: 10px; padding: 9px 11px; gap: 7px; }
  .solutions-showcase .note-method { top: 20px; left: -3%; }
  .solutions-showcase .note-growth { top: 146px; right: -3%; }
  .solutions-showcase h3 { font-size: 25px; }
  .solutions-showcase .solution-category > span { font-size: 8px; letter-spacing: .7px; }
}
@media (max-width: 600px) {
  .solutions-showcase .section-head { margin-bottom: 37px; }
  .solutions-showcase .section-head h2 { font-size: clamp(27px,6.5vw,34px); }
  .solutions-showcase .section-head > p { font-size: 13px; }
  .solutions-showcase .solution-stories { grid-template-columns: 1fr; gap: 49px; }
  .solutions-showcase .solution-story { width: 100%; max-width: 430px; margin: 0 auto; }
  .solutions-showcase .solution-art { max-width: 350px; margin: 0 auto; }
  .solutions-showcase .solution-copy { padding: 18px 9px 0; }
  .solutions-showcase h3 { font-size: 28px; margin-top: 12px; }
  .solutions-showcase .solution-description { font-size: 14px; margin-top: 12px; }
  .solutions-showcase .solution-link { margin-top: 11px; }
  .solutions-showcase .solution-category > span { font-size: 9px; letter-spacing: 1.2px; }
  .solutions-showcase .knowledge-answer strong { font-size: 16px; }
  .solutions-showcase .knowledge-answer p { font-size: 10px; gap: 12px; }
  .solutions-showcase .team-note { font-size: 11px; }
  .solutions-showcase .disclaimer { text-align: left; margin-top: 40px; }
}
@media (max-width: 370px) {
  .solutions-showcase .solution-copy { padding-inline: 3px; }
  .solutions-showcase h3 { font-size: 26px; }
  .solutions-showcase .knowledge-answer strong { font-size: 14px; }
  .solutions-showcase .knowledge-answer p { font-size: 9px; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .solutions-showcase .solution-link > span { transition: none; }
  .solutions-showcase .solution-link:hover > span { transform: none; }
}