/* CreedForge Order Flow — production responsive shell */
html,body{width:100%!important;min-width:0!important;margin:0!important;padding:0!important;overflow-x:hidden!important;background:#f4f5f9!important;color:#17182d}
body{display:block!important;align-items:initial!important;justify-content:initial!important}
.app{width:100%!important;max-width:none!important;min-width:0!important;min-height:100vh!important;height:auto!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important;background:#f5f6fa!important;display:flex!important;flex-direction:column!important}
.of-header{width:100%!important;height:76px!important;min-height:76px!important;flex:0 0 76px!important;padding:0 max(24px,calc((100% - 1280px)/2))!important;position:sticky!important;top:0!important;left:0!important;border-radius:0!important;z-index:1000!important;background:rgba(255,255,255,.96)!important;border-bottom:1px solid #e5e7ee!important;box-shadow:0 2px 18px rgba(23,24,45,.05)!important}
.of-brand{gap:11px!important}.of-brand .icon{width:42px!important;height:42px!important;flex:0 0 42px!important;border-radius:13px!important}.of-brand b{font-size:18px!important}.of-close{width:40px!important;height:40px!important;flex:0 0 40px!important}
.stepper{width:100%!important;height:92px!important;min-height:92px!important;flex:0 0 92px!important;padding:12px max(24px,calc((100% - 1120px)/2))!important;gap:8px!important;overflow-x:auto!important;background:#fff!important;border-bottom:1px solid #e5e7ee!important}
.step{min-width:0!important;flex:1 1 0!important;height:66px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;padding:6px 10px!important;border-radius:14px!important;font-size:11px!important}.step .num{width:34px!important;height:34px!important;margin:0 auto 5px!important;font-size:10px!important}
.of-content{width:min(1180px,calc(100% - 64px))!important;max-width:1180px!important;margin:0 auto!important;padding:32px 0 125px!important;flex:1 1 auto!important;min-height:calc(100vh - 168px)!important}
.of-title{font-size:32px!important;line-height:1.25!important}.of-sub{font-size:14px!important;max-width:820px!important}.eyebrow{font-size:11px!important}
.bottom{position:fixed!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;min-height:76px!important;padding:12px max(24px,calc((100% - 1180px)/2))!important;z-index:1200!important;border-top:1px solid #e5e7ee!important;background:rgba(255,255,255,.97)!important;box-shadow:0 -10px 30px rgba(23,24,45,.08)!important}
.bottom .btn{min-height:48px!important;font-size:12px!important}
.checkout-grid{grid-template-columns:minmax(0,1fr) 360px!important;gap:24px!important}.summary-card{top:92px!important}
.choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.method-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
@media(min-width:1400px){.of-content{width:min(1240px,calc(100% - 96px))!important;max-width:1240px!important}.stepper{padding-left:max(32px,calc((100% - 1240px)/2))!important;padding-right:max(32px,calc((100% - 1240px)/2))!important}.bottom{padding-left:max(32px,calc((100% - 1240px)/2))!important;padding-right:max(32px,calc((100% - 1240px)/2))!important}}
@media(max-width:900px){.of-content{width:calc(100% - 36px)!important}.checkout-grid{grid-template-columns:1fr!important}.summary-card{position:static!important}.step{font-size:10px!important}.stepper{padding-left:18px!important;padding-right:18px!important}}
@media(max-width:699px){
 html,body{background:#f5f6fa!important}
 .app{min-height:100dvh!important;padding-bottom:0!important}
 .of-header{height:66px!important;min-height:66px!important;flex-basis:66px!important;padding:0 13px!important;position:sticky!important}
 .of-brand .icon{width:37px!important;height:37px!important;flex-basis:37px!important;border-radius:11px!important}.of-brand b{font-size:16px!important}.of-brand small{font-size:8px!important}.of-close{width:35px!important;height:35px!important;border-radius:10px!important}
 .stepper{height:82px!important;min-height:82px!important;flex-basis:82px!important;padding:8px 10px!important;gap:4px!important}
 .step{height:66px!important;min-width:72px!important;padding:5px 4px!important;border-radius:11px!important;font-size:9px!important}.step .num{width:29px!important;height:29px!important;margin-bottom:4px!important;font-size:9px!important}
 .of-content{width:100%!important;max-width:none!important;margin:0!important;padding:18px 13px 96px!important;min-height:calc(100dvh - 148px)!important}
 .of-title{font-size:22px!important;line-height:1.3!important}.of-sub{font-size:11.5px!important;line-height:1.6!important;margin-bottom:17px!important}.eyebrow{font-size:9.5px!important;padding:6px 9px!important}
 .bottom{position:fixed!important;left:0!important;right:0!important;bottom:0!important;min-height:68px!important;padding:9px 10px!important}.bottom .btn{min-height:44px!important;font-size:10px!important;padding:9px 8px!important;border-radius:11px!important}
 .checkout-grid,.choice-grid,.method-grid{grid-template-columns:1fr!important}.card{border-radius:16px!important}
}
@media(max-width:380px){.of-content{padding-left:10px!important;padding-right:10px!important}.of-title{font-size:20px!important}.step{min-width:67px!important;font-size:8.5px!important}}

/* Step 1 — professional project presentation; compact desktop, stacked mobile. */
@media(min-width:901px){
  .step1-heading{margin-bottom:18px!important}
  .step1-project-card{display:grid!important;grid-template-columns:minmax(380px,.95fr) minmax(0,1.05fr)!important;gap:0!important;padding:0!important;overflow:hidden!important}
  .step1-cover{min-height:440px!important;height:100%!important}
  .step1-cover img{width:100%!important;height:100%!important;min-height:440px!important;object-fit:cover!important;border-radius:0!important}
  .cover-overlay{left:14px!important;right:14px!important;bottom:14px!important}
  .cover-overlay span{font-size:9px!important;padding:7px 9px!important}
  .step1-body{padding:28px 30px 26px!important;min-width:0!important}
  .step1-description{font-size:12px!important;line-height:1.8!important;margin:13px 0 16px!important}
  .step1-demo-card{margin:14px 0!important;padding:15px!important}
  .step1-credentials{margin:14px 0!important;padding:14px!important}
  .step1-section-title{font-size:12px!important;margin:16px 0 9px!important}
  .feature-grid{gap:8px!important}
  .feature-grid .feature{padding:9px!important;font-size:10px!important}
  .step1-price{margin-top:15px!important;padding-top:12px!important}
}
@media(min-width:701px) and (max-width:900px){
  .step1-project-card{padding:0!important}
  .step1-cover img{height:300px!important;border-radius:0!important}
  .step1-body{padding:22px!important}
}
@media(max-width:700px){
  .step1-project-card{padding:8px!important}
  .step1-cover img{height:200px!important;object-fit:cover!important}
  .step1-body{padding:5px 3px 0!important}
  .step1-description{margin:9px 0 12px!important}
}