/* Interactive explainers, scoped to the two homepage components. */
.software-factory{scroll-margin-top:104px}
.software-factory [hidden]{display:none!important}
.software-factory button{font:inherit;cursor:pointer}
.software-factory button:focus-visible,.software-factory a:focus-visible{outline:3px solid #de8f2b;outline-offset:5px}
.ex-kicker{display:block;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.1em;line-height:1.6}

.software-factory{margin-top:48px;padding:38px;border-radius:24px;background:#132f26;color:#f4f3e8;position:relative;overflow:hidden;background-image:radial-gradient(ellipse at 100% 0,#62703b33,transparent 65%)}
.sf-intro{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;margin-bottom:30px}
.sf-intro .ex-kicker{color:#d2b979;font-size:9px;margin-bottom:14px}
.sf-intro h3{font-size:38px;font-weight:650;line-height:1.08;letter-spacing:-.04em;color:#faf8ec}
.sf-intro h3 em{font-style:normal;color:#d3b477}
.sf-intro>p{font-size:14px;line-height:1.85;color:#b2c6b5}
.sf-intro>p strong{font-weight:550;color:#f4e9cc}
.sf-demo{border:1px solid #55726066;background:#0c231c80;border-radius:16px;overflow:hidden}
.sf-demo-head{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:15px 23px;background:#28433866;border-bottom:1px solid #55726055}
.sf-demo-head>p{font-family:var(--mono);font-size:9px;letter-spacing:.07em;color:#a9be9e;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.sf-example-dot{width:6px;height:6px;border-radius:50%;background:#d5b574;flex:none}
.sf-demo-head b{font-family:var(--body);font-size:12px;letter-spacing:0;font-weight:500;color:#e5ecdc;margin-left:8px}
.sf-motion{background:transparent;border:1px solid #657d65;border-radius:6px;color:#d5e0c8;padding:4px 9px;display:flex;gap:7px;align-items:center;flex:none;font-size:11px!important;min-height:30px}
.sf-stages{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:23px 24px 0;gap:14px}
.sf-stage{position:relative;display:flex;flex-direction:column;align-items:flex-start;background:none;border:0;text-align:left;color:#9fb4a1;padding:0 0 17px;min-width:0}
.sf-stage-num{position:absolute;right:1px;top:0;font-family:var(--mono);font-size:10px;color:#859c87}
.sf-stage-icon{width:36px;height:36px;background:#2a4336;border:1px solid #46614c;display:grid;place-items:center;border-radius:9px;margin-bottom:10px;transition:background .2s,color .2s}
.sf-stage-icon>svg{width:20px;height:20px}
.sf-stage strong{font-family:var(--disp);font-size:15px;line-height:1.4;font-weight:600}
.sf-label-short{display:none}
.sf-stage-desc{font-size:10px;line-height:1.5;margin-top:3px;color:#8fa991}
.sf-stage[aria-pressed=true]{color:#f2deb1}
.sf-stage[aria-pressed=true] .sf-stage-icon{background:#d6b571;color:#17372b;border-color:#d6b571;box-shadow:0 0 20px -7px #d6b57155}
.sf-stage.is-complete .sf-stage-icon{background:#3a573c;border-color:#728d57;color:#d4e4b0}
.sf-stage-track{position:absolute;bottom:0;left:0;width:100%;height:2px;background:#3b5542;overflow:hidden}
.sf-stage-track::after{content:"";display:block;width:100%;height:100%;background:#d6b571;transform:scaleX(0);transform-origin:left}
.sf-stage[aria-pressed=true] .sf-stage-track::after{transform:scaleX(var(--sf-progress,0))}
.sf-stage.is-complete .sf-stage-track::after{transform:scaleX(1);background:#8da56c}
.sf-stage-content{padding:28px 25px 25px}
.sf-scene{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center;min-height:228px;animation:sf-reveal .35s ease both}
@keyframes sf-reveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.sf-scene-copy .ex-kicker{color:#b9b98d;font-size:9px;margin-bottom:12px}
.sf-scene-copy h4{font-family:var(--disp);font-weight:550;font-size:28px;line-height:1.13;letter-spacing:-.035em;color:#f5f1e3;margin-bottom:15px}
.sf-scene-copy>p{font-size:13px;line-height:1.75;color:#a9c0ad;max-width:42ch}
.sf-visual{background:#f3f0e5;border:1px solid #d6d7bf;border-radius:12px;min-width:0;min-height:208px;color:#224533;padding:23px;box-shadow:0 16px 36px -26px #000}
.sf-mini-label{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:#67745c}
.sf-request{transform:rotate(-1deg)}
.sf-request blockquote{font-family:var(--disp);font-size:21px;line-height:1.25;letter-spacing:-.025em;margin:14px 0 20px}
.sf-request>div{display:flex;align-items:center;gap:11px;font-size:11px;line-height:1.6;color:#677761}
.sf-request b{font-weight:500;color:#254732}
.sf-avatar{border:1px solid #b9bea1;background:#e6e5d4;border-radius:50%;width:33px;height:33px;font-size:9px;font-family:var(--mono);display:grid;place-items:center;flex:none;color:#526344}
.sf-app-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:10px}
.sf-version{font-family:var(--mono);font-size:8px;padding:3px 6px;background:#e6e6d4;border-radius:4px;color:#788062}
.sf-app-row{display:flex;justify-content:space-between;gap:12px;font-size:11px;padding:10px 0;border-bottom:1px solid #d7dac7;color:#737e66}
.sf-app-row b{font-weight:600;color:#294732;text-align:right}
.sf-mock-button{margin-top:16px;border-radius:5px;background:#234a36;color:#f1efd9;padding:10px 12px;display:flex;justify-content:space-between;align-items:center;font-size:12px}
.sf-mock-button svg{width:17px;height:17px}
.sf-checklist>div{display:flex;align-items:center;gap:9px;padding:15px 0;border-bottom:1px solid #d9ddc9;font-size:12px;animation:sf-reveal .4s both}
.sf-checklist>div:nth-of-type(2){animation-delay:.2s}.sf-checklist>div:nth-of-type(3){animation-delay:.4s}
.sf-checklist>div:last-child{border:0;padding-bottom:0}
.sf-checklist svg{width:17px;height:17px;flex:none;color:#537849}
.sf-checklist b{font-size:9px;font-family:var(--mono);font-weight:400;margin-left:auto;color:#5f7e48}
.sf-visual h5{font-family:var(--disp);font-size:19px;line-height:1.2;letter-spacing:-.025em;margin:12px 0 8px;font-weight:650}
.sf-document>p{font-size:12px;line-height:1.6;color:#738063;margin-bottom:17px}
.sf-document>div{display:flex;align-items:center;gap:8px;font-size:11px;margin-top:9px;color:#5b7350}
.sf-document>div svg{width:16px;height:16px}.sf-document>div svg:last-child{margin-left:auto}
.sf-approval,.sf-success{text-align:center;padding:20px 22px;background:#eeeedc}
.sf-approval-icon,.sf-success-icon{display:grid;place-items:center;width:39px;height:39px;border:1px solid #b6b590;border-radius:50%;margin:auto;background:#e3dfbd;color:#617048}
.sf-approval h5,.sf-success h5{font-size:19px;margin:11px 0 7px}
.sf-approval p,.sf-success p{font-size:11px;color:#6b785d}
.sf-approve{border:1px solid #b99140;background:#ddb56a;padding:9px 12px;border-radius:6px;display:flex;align-items:center;justify-content:center;gap:14px;color:#263e26;width:100%;margin-top:19px;font-size:12px!important;font-weight:650!important}
.sf-approve:hover{background:#e7c47e}
.sf-approve svg{width:18px;height:18px}
.sf-success-icon{background:#325537;color:#e6edca;border-color:#325537}
.sf-replay{border:0;border-bottom:1px solid #879770;background:none;color:#3a603d;margin-top:19px;font-size:12px!important;padding-bottom:3px}
.sf-caption{display:flex;justify-content:space-between;gap:18px;padding:13px 24px;border-top:1px solid #38543e;font-size:10px;color:#9caf95;line-height:1.6}
.sf-status{color:#d5c394}
.sf-outro{display:flex;align-items:center;justify-content:space-between;gap:35px;margin-top:25px}
.sf-outro p{font-size:12px;color:#a8b99e;max-width:58ch;line-height:1.75}
.sf-outro strong{display:block;color:#e5e5d2;font-weight:500}
.sf-outro a{color:#e5c78f;font-size:12px;display:flex;align-items:center;gap:12px;flex:none;text-underline-offset:5px}
.sf-outro a svg{width:18px;height:18px}

@media(max-width:1050px){
  .sf-stage strong{font-size:13px}.sf-stage-desc{font-size:9px}.sf-scene{gap:22px}.sf-outro{align-items:flex-start;gap:20px;flex-direction:column}
}
@media(max-width:760px){
  .software-factory{scroll-margin-top:156px}
  .software-factory{padding:25px;border-radius:18px}.sf-intro{grid-template-columns:1fr;gap:19px;margin-bottom:25px}.sf-intro h3{font-size:37px}.sf-intro>p{font-size:13px}.sf-demo-head{padding:14px 17px;align-items:flex-start;gap:12px}.sf-demo-head b{margin-left:0;font-size:11px;flex-basis:100%}
  .sf-stages{padding:18px 16px 0;gap:9px}.sf-stage-num{font-size:8px}.sf-stage strong{font-size:12px;overflow-wrap:anywhere}.sf-stage-desc{display:none}.sf-stage-icon{width:30px;height:30px;margin:13px 0 8px}.sf-stage-icon svg{width:17px;height:17px}.sf-stage-num{left:0;right:auto;top:-2px}
  .sf-label-long{display:none}.sf-label-short{display:inline}
  .sf-stage-content{padding:23px 20px}.sf-scene{grid-template-columns:1fr;gap:22px;align-content:start;min-height:415px}.sf-scene-copy h4{font-size:29px;margin-bottom:12px}.sf-scene-copy>p{max-width:none;font-size:12px}.sf-visual{min-height:190px;padding:21px}.sf-request blockquote{font-size:22px}.sf-caption{padding:13px 18px;flex-direction:column;gap:4px;font-size:9px}.sf-outro{margin-top:22px}.sf-outro p{font-size:12px}
}
@media(max-width:420px){
  .software-factory{padding:21px 15px;margin-left:-8px;margin-right:-8px}.sf-intro h3{font-size:32px}.sf-intro .ex-kicker{font-size:8px}.sf-stages{padding:18px 11px 0;gap:7px}.sf-stage strong{font-size:10px}.sf-stage-content{padding:22px 15px}.sf-scene-copy h4{font-size:26px}.sf-scene{min-height:465px}.sf-visual{padding:18px}.sf-demo-head{padding:13px 12px}.sf-demo-head>p{font-size:8px}.sf-demo-head b{font-size:10px}.sf-caption{padding:12px}.sf-outro a{font-size:11px}.sf-checklist>div{font-size:11px}
}
@media(prefers-reduced-motion:reduce){
  .software-factory *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .sf-request{transform:none}.sf-motion{display:none}
}