/* The problem is the entry point; the working tool is the proof. */
.niche-section { scroll-margin-top:88px; }
.niche-section > .container { max-width: 1240px; }
.niche-centered-header { margin-bottom: 34px; }
.problem-accordion { --solution-accent:#426555; --solution-soft:#eef3ee; }
.problem-accordion[data-niche="accounting"] { --solution-accent:#30685e; --solution-soft:#edf6f2; }
.problem-accordion[data-niche="law"] { --solution-accent:#70543e; --solution-soft:#f6f1e9; }
.problem-accordion[data-niche="architecture_engineering"] { --solution-accent:#42688e; --solution-soft:#edf2f7; }
.problem-accordion[data-niche="marketing"] { --solution-accent:#7756a3; --solution-soft:#f4effa; }
.problem-accordion[data-niche="recruitment"] { --solution-accent:#327980; --solution-soft:#edf6f7; }
.problem-accordion[data-niche="logistics"] { --solution-accent:#a66734; --solution-soft:#faf3eb; }
.solution-item { border:1px solid #e7e7e5; border-radius:22px; margin-bottom:12px; overflow:hidden; background:#fff; scroll-margin-top:88px; transition:background .3s,box-shadow .3s; }
.solution-item.is-open { background:#fbfbfa; box-shadow:0 6px 20px -16px #30352d55; }
.solution-heading { margin:0; }
.solution-trigger { width:100%; display:flex; align-items:center; gap:22px; padding:23px 28px; text-align:left; border:0; background:transparent; color:#141713; cursor:pointer; font:inherit; }
.solution-trigger:hover { background:#f6f7f5; }
.solution-trigger:focus-visible,.solution-playback button:focus-visible,.solution-primary-action:focus-visible,.niche-tab:focus-visible { outline:2px solid var(--solution-accent,#426555); outline-offset:-3px; }
.solution-number { font-size:13px; font-weight:500; font-variant-numeric:tabular-nums; color:#93988f; align-self:center; }
.solution-trigger-copy { display:flex; flex-direction:column; gap:6px; flex:1; }
.solution-category { font-size:10px; font-weight:600; letter-spacing:.1em; color:#82877f; }
.solution-title { font-size:clamp(18px,2.1vw,24px); font-weight:620; letter-spacing:-.035em; line-height:1.25; }
.solution-toggle { width:30px; height:30px; border:1px solid #dedfdb; border-radius:50%; position:relative; flex-shrink:0; transition:background .25s; }
.solution-toggle:before,.solution-toggle:after { content:''; position:absolute; background:#50574b; width:10px; height:1.5px; top:13px; left:9px; transition:transform .3s; }
.solution-toggle:after { transform:rotate(90deg); }
.is-open .solution-toggle { background:#ecefe9; border-color:#ecefe9; }
.is-open .solution-toggle:after { transform:rotate(0deg); }
.solution-panel { display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .42s cubic-bezier(.22,.8,.3,1),opacity .3s; }
.is-open .solution-panel { grid-template-rows:1fr; opacity:1; }
.solution-panel-clip { overflow:hidden; min-height:0; }
.solution-panel-inner { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr); gap:40px; padding:8px 28px 22px 63px; align-items:center; }
.solution-problem { font-size:15px; line-height:1.65; color:#686d64; margin:0 0 28px; }
.solution-build-label { color:var(--solution-accent); font-weight:650; font-size:10px; letter-spacing:.09em; margin-bottom:7px; }
.solution-story h4 { font-size:24px; line-height:1.2; font-weight:650; letter-spacing:-.035em; margin:0 0 10px; }
.solution-description { font-size:14px; line-height:1.6; color:#656b60; margin-bottom:22px; }
.solution-story-steps { list-style:none; padding:0; margin:0 0 23px; display:flex; flex-direction:column; gap:12px; }
.solution-story-step { display:flex; align-items:center; gap:11px; font-size:12px; color:#8b9185; transition:color .3s; }
.solution-story-step > span { display:grid; place-items:center; width:21px; height:21px; border-radius:50%; background:#eff0ec; color:#8b9185; font-size:10px; flex-shrink:0; transition:background .3s,color .3s; }
.solution-story-step.is-current { color:#343d2e; font-weight:600; }
.solution-story-step.is-current > span { background:var(--solution-accent); color:white; }
.solution-outcome { display:flex; align-items:flex-start; gap:10px; padding-top:18px; border-top:1px solid #e4e7df; color:#596451; font-size:12px; line-height:1.6; }
.solution-outcome > span { border:1px solid #cbd4c5; border-radius:50%; width:20px; height:20px; display:grid; place-items:center; flex-shrink:0; line-height:1; transition:background .3s; }
.solution-outcome.is-achieved > span { background:var(--solution-accent); border-color:var(--solution-accent); color:white; }
.solution-outcome p { margin:0; }
.solution-preview { min-width:0; }
.solution-window { aspect-ratio:4/3; width:100%; display:flex; flex-direction:column; position:relative; overflow:hidden; border:1px solid #dfe3dd; border-radius:14px; background:white; box-shadow:0 16px 30px -22px #33402d75,0 2px 4px #33402d08; isolation:isolate; }
.solution-window-bar { height:48px; padding:0 15px; display:flex; justify-content:space-between; align-items:center; gap:12px; border-bottom:1px solid #edf0e9; flex-shrink:0; background:white; }
.solution-window-brand { display:flex; align-items:center; gap:8px; min-width:0; }
.solution-window-brand strong { font-size:12px; font-weight:650; letter-spacing:-.025em; white-space:nowrap; }
.solution-app-mark { width:23px; height:23px; display:grid; place-items:center; background:var(--solution-accent); color:white; border-radius:6px; font-size:12px; font-weight:650; flex-shrink:0; }
.solution-window-status { font-size:9px; white-space:nowrap; color:#85897f; display:flex; align-items:center; gap:5px; }
.solution-window-status i { width:5px; height:5px; background:#c29964; border-radius:50%; }
.solution-window-status.is-done { color:#477456; }
.solution-window-status.is-done i { background:#5f936a; }
.solution-app-content { flex:1; min-height:0; overflow:hidden; position:relative; container-type:inline-size; }
.solution-window-footer { min-height:56px; padding:10px 14px; display:flex; justify-content:space-between; align-items:center; border-top:1px solid #e9ece5; gap:8px; background:white; flex-shrink:0; }
.solution-flow-dots { display:flex; gap:4px; align-items:center; min-width:0; }
.solution-flow-dots > span:not(.solution-step-name) { width:5px; height:5px; border-radius:50%; background:#dee4d9; flex-shrink:0; }
.solution-flow-dots > .is-filled { background:var(--solution-accent)!important; }
.solution-step-name { margin-left:5px; color:#777d70; font-size:9px; max-width:150px; line-height:1.3; }
.solution-primary-action { border:0; padding:9px 11px; background:var(--solution-accent); color:white; font:600 10px var(--font-sans); border-radius:7px; display:flex; gap:10px; align-items:center; cursor:pointer; white-space:nowrap; transition:filter .2s,transform .2s; }
.solution-primary-action:hover { filter:brightness(1.1); transform:translateY(-1px); }
.solution-primary-action:active { transform:scale(.97); }
.solution-primary-action > span { font-size:13px; }
.solution-playback { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:11px; color:#93988d; font-size:10px; }
.solution-playback > div { display:flex; gap:5px; }
.solution-playback button { display:flex; align-items:center; gap:5px; color:#818878; font:500 10px var(--font-sans); cursor:pointer; border:0; background:transparent; padding:4px 5px; border-radius:4px; }
.solution-playback button:hover { color:#333f2d; background:#ecefe8; }
.solution-playback svg { width:12px; height:12px; }
.app-cursor { pointer-events:none; position:absolute; right:12%; bottom:18px; z-index:10; opacity:0; transform:translate(-65px,-65px); }
.app-cursor > svg { display:block; width:17px; height:23px; filter:drop-shadow(0 1px 1px #0003); }
.app-cursor > span { position:absolute; left:16px; top:20px; color:white; font-size:8px; font-weight:500; background:#333c2e; border-radius:3px; padding:1px 5px; }
.app-cursor.is-moving { animation:solution-pointer 1.6s cubic-bezier(.23,.7,.3,1) both; }
@keyframes solution-pointer { 0% { opacity:0; transform:translate(-65px,-65px); } 20% { opacity:1; } 72%,88% { opacity:1; transform:translate(0,0); } 80% { transform:translate(0,0) scale(.82); } 100% { opacity:0; transform:translate(0,0); } }
@media(min-width:1400px) { .solution-panel-inner { gap:56px; } }
@media(max-width:1000px) { .solution-panel-inner { padding-left:28px; gap:28px; grid-template-columns:minmax(0,.8fr) minmax(0,1.25fr); } .solution-problem { font-size:14px; margin-bottom:20px; } .solution-story h4 { font-size:22px; } .solution-story-steps { margin-bottom:16px; gap:9px; } .solution-step-name { display:none; } }
@media(max-width:760px) { .niche-centered-header { margin-bottom:22px; } .niche-headline-single { white-space:normal; font-size:28px; max-width:600px; } .niche-selector-wrapper { margin-inline:-10px; width:calc(100% + 20px); } .niche-selector { margin-inline:0; } .solution-trigger { padding:19px 20px; gap:13px; } .solution-category { font-size:9px; } .solution-title { font-size:19px; } .solution-panel-inner { grid-template-columns:1fr; gap:22px; padding:2px 20px 18px; } .solution-story { display:grid; grid-template-columns:1fr 1fr; column-gap:24px; align-items:start; } .solution-problem { grid-column:1/-1; margin-bottom:20px; } .solution-build-label,.solution-story h4,.solution-description { grid-column:1; } .solution-story h4 { font-size:21px; } .solution-description { margin-bottom:0; font-size:13px; } .solution-story-steps { grid-column:2; grid-row:2/5; margin:0; padding-top:3px; gap:14px; } .solution-outcome { grid-column:1/-1; margin-top:18px; padding-top:14px; } .solution-step-name { display:inline; } }
@media(max-width:420px) { .niche-section > .container { padding-inline:14px; } .solution-panel-inner { padding-inline:12px; } .solution-trigger { padding-inline:14px; } .solution-title { font-size:18px; } .solution-window-bar { height:40px; padding-inline:10px; } .solution-window-brand strong { font-size:10px; } .solution-app-mark { width:20px;height:20px; } .solution-window-status { font-size:8px; } .solution-window-footer { min-height:44px; padding:7px 9px; } .solution-primary-action { font-size:9px; padding:7px; } .solution-step-name { display:none; } .solution-story { column-gap:15px; } .solution-story-step { font-size:11px; gap:7px; } }
@media(prefers-reduced-motion:reduce) { .solution-panel,.solution-item,.solution-toggle:after { transition:none; } .app-cursor { display:none; } }

/* Three equal choices in one row; the selected workspace spans the row below. */
.solution-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:18px; }
.solution-options .solution-heading { min-width:0; border:1px solid #e7e7e5; border-radius:20px; overflow:hidden; background:white; transition:border-color .2s,background .2s; }
.solution-options .solution-heading.is-selected { border-color:var(--solution-accent); background:var(--solution-soft); }
.solution-options .solution-trigger { height:100%; min-height:148px; padding:22px; display:grid; grid-template-columns:1fr 30px; gap:12px; align-items:start; }
.solution-options .solution-trigger-copy { grid-column:1/-1; grid-row:2; gap:8px; }
.solution-options .solution-number { align-self:center; }
.solution-options .solution-toggle { grid-column:2; grid-row:1; }
.solution-options .solution-title { font-size:21px; line-height:1.28; }
.solution-options .solution-category { font-size:9px; }
.is-selected .solution-toggle { background:var(--solution-accent); border-color:var(--solution-accent); }
.is-selected .solution-toggle:before,.is-selected .solution-toggle:after { background:white; }
.is-selected .solution-toggle:after { transform:rotate(0); }
.problem-accordion > .solution-item { display:none; margin-bottom:0; }
.problem-accordion > .solution-item.is-open { display:block; }
.solution-item .solution-panel-inner { padding:30px; }
@media(max-width:760px) {
  .solution-options { display:flex; overflow-x:auto; gap:10px; padding:2px 0 7px; scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:#dfe3dc transparent; }
  .solution-options .solution-heading { flex:0 0 235px; scroll-snap-align:start; }
  .solution-options .solution-trigger { min-height:150px; padding:18px; }
  .solution-options .solution-title { font-size:18px; }
  .solution-item .solution-panel-inner { padding:22px 16px 16px; }
}