.home-page .hero-copy > p { text-align: justify; text-align-last: left; }
.home-benefits .home-benefits-statement { margin: 0 auto 32px; padding: 0 24px; max-width: 1500px; text-align: center; text-transform: none; }
.home-benefit-card { padding-bottom: 24px; min-height: 630px; aspect-ratio: auto; }
.home-benefit-card h2 { flex-shrink: 0; }
.benefit-demo { position: relative; display: flex; flex-direction: column; flex: 1 0 auto; min-width: 0; min-height: 430px; width: 100%; border: 1px solid #e5e5e9; border-radius: 9px; background: #fff; color: #252731; box-shadow: 0 12px 28px #20203008; font: 12px/1.4 var(--font-body); overflow: hidden; }
.demo-toolbar { display: flex; align-items: center; gap: 10px; padding: 12px; background: #fbfbfc; border-bottom: 1px solid #ededf0; font-size: 10px; color: #777b86; }
.demo-dots { color: #d5d7dd; letter-spacing: 2px; font-size: 7px; }
.demo-live { margin-left: auto; color: #8b91a0; font-size: 7px; letter-spacing: .06em; }
.demo-body { display: flex; flex-direction: column; gap: 15px; flex: 1 0 auto; padding: 20px 16px; }
.demo-toolbar, .demo-footer, .demo-body > * { flex-shrink: 0; }
.demo-eyebrow { color: #9296a1; font-size: 8px; letter-spacing: .09em; }
.demo-title { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: clamp(13px, 1.05vw, 17px); font-weight: 500; }
.demo-badge { padding: 4px 7px; border-radius: 4px; background: #f1f2f6; color: #7c8292; font-size: 8px; white-space: nowrap; }
.demo-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.demo-field > span { font-size: 9px; color: #858a96; }
.demo-typing, .demo-field > b { min-height: 36px; padding: 10px; border: 1px solid #e5e6ec; background: #fcfcfe; border-radius: 5px; font-size: 11px; font-weight: 400; }
.demo-typing { min-height: 100px; }
.benefit-demo[data-phase="typing"] .demo-typing { border-color: #6685ff; box-shadow: 0 0 0 3px #0033ff08; }
.benefit-demo[data-phase="typing"] .demo-typing::after { content: ''; display: inline-block; width: 1px; height: 12px; background: #0033ff; vertical-align: middle; margin-left: 2px; animation: demo-caret .8s steps(2) infinite; }
.demo-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.demo-chips { display: flex; gap: 6px; }
.demo-chips span { flex: 1; text-align: center; padding: 7px 2px; border: 1px solid #e9e9ed; border-radius: 4px; font-size: 9px; color: #9296a1; }
.demo-chips .demo-selected { background: #eef1ff; color: #0033ff; border-color: #ccd5ff; }
.demo-action { display: flex; justify-content: space-between; padding: 10px 12px; background: #0033ff; color: #fff; border-radius: 5px; font-size: 11px; transition: background .3s, transform .3s; }
.benefit-demo[data-phase="creating"] .demo-action { transform: scale(.98); background: #2445c9; }
.demo-result { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 12px 10px; border: 1px solid #dceee5; border-radius: 6px; background: #f6fbf8; opacity: .18; transform: translateY(5px); transition: opacity .45s, transform .45s; }
.demo-result.is-shown { opacity: 1; transform: none; }
[data-demo="buybox"] .demo-result:not(.is-shown), [data-buy-match-row]:not(.is-shown) { opacity: 0; visibility: hidden; transition: none; }
[data-buy-match-row] { transition: opacity .4s; }
[data-demo="buybox"][data-phase="typing"] .demo-action,
[data-demo="buybox"][data-phase="criteria"] .demo-action { background: #e9ecf5; color: #989fb1; }
.demo-result b { display: block; font-size: 11px; font-weight: 500; }.demo-result span { display: block; margin-top: 3px; font-size: 9px; color: #799186; }
.demo-result-icon { display: grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0; color: #38956c; background: #e3f3eb; border-radius: 50%; }
.demo-mini-row { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid #eeeeF2; font-size: 9px; }
.demo-mini-row > span:first-child { color: #a0a6b1; }.demo-mini-row b { font-weight: 500; }.demo-mini-row small { display: block; color: #969ca8; font-size: 8px; margin-top: 3px; }
.demo-match { margin-left: auto; color: #409579; font-size: 8px; }
.demo-footer { display: flex; align-items: center; gap: 7px; padding: 12px; border-top: 1px solid #ededf0; background: #fcfcfd; font-size: 9px; color: #8a91a0; }
.demo-status-dot { height: 5px; width: 5px; flex-shrink: 0; background: #5879ed; border-radius: 50%; }
.demo-capital-flow { display: flex; align-items: center; gap: 5px; padding: 16px 0; }
.demo-capital-flow > div:not(.demo-capital-track) { display: flex; flex-direction: column; align-items: center; gap: 9px; flex: 1; text-align: center; }
.demo-capital-flow b { font-size: 8px; font-weight: 400; color: #7f8593; min-height: 24px; }
.demo-bank, .demo-ordn { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #e9eaf0; border-radius: 10px; background: #fafbfe; font-size: 27px; color: #8492b8; }
.demo-ordn { font-size: 12px; font-weight: 700; color: #0033ff; background: #f1f4ff; border-color: #dae2ff; }
.demo-capital-track { position: relative; width: 22px; height: 1px; margin-top: -30px; background: #dbe3ff; overflow: visible; }
.demo-capital-track i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #4c70ff; top: -1.5px; animation: demo-transfer 1.8s linear infinite; }
.demo-capital-track i:nth-child(2) { animation-delay: -.6s; }.demo-capital-track i:nth-child(3) { animation-delay: -1.2s; }
.demo-quote { padding: 18px 14px; border: 1px solid #e1e6f4; background: #f8faff; border-radius: 7px; }
.demo-quote-value { margin: 12px 0 18px; font-size: 18px; font-weight: 500; }.demo-quote-value span { display: block; font-size: 10px; font-weight: 400; color: #7d8baf; margin-top: 5px; }
.demo-progress { height: 4px; background: #e4e9fa; border-radius: 5px; overflow: hidden; }.demo-progress i { display: block; width: 0; height: 100%; background: #446bff; transition: width .25s linear; }
.demo-cost-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 1px solid #f0f0f4; padding: 8px 0; font-size: 10px; }.demo-cost-row > span { color: #8b909c; }.demo-cost-row b { font-weight: 500; text-align: right; font-size: 9px; }
[data-demo="rates"] .demo-result { margin-top: auto; }
.demo-case-summary { display: grid; grid-template-columns: 1fr 1fr; padding: 14px 12px; gap: 12px; background: #f8f9fc; border-radius: 6px; }.demo-case-summary small { display: block; color: #959ba7; font-size: 9px; }.demo-case-summary b { display: block; margin-top: 5px; font-size: 12px; font-weight: 500; }
.demo-workflow { display: flex; flex-direction: column; flex: 1; gap: 9px; }
.demo-workflow > div { position: relative; display: flex; align-items: center; gap: 10px; flex: 1; min-height: 55px; border: 1px solid #e9ebf0; padding: 10px; border-radius: 6px; transition: background .4s, border-color .4s; }
.demo-step-icon { display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: 6px; background: #f1f3f8; color: #8994ae; font-size: 17px; }
.demo-workflow b { font-size: 11px; font-weight: 500; }.demo-workflow small { display: block; font-size: 8px; color: #9299a6; margin-top: 3px; }.demo-step-status { margin-left: auto; font-size: 8px; color: #a1a6b1; white-space: nowrap; }
.demo-workflow .is-active { background: #f5f7ff; border-color: #c8d4ff; }.is-active .demo-step-icon { color: #0033ff; background: #e8edff; }.is-active .demo-step-status { color: #4265de; }
.demo-workflow .is-done .demo-step-status { color: #429572; }.demo-workflow .is-done .demo-step-icon { color: #429572; background: #ecf7f1; }
.benefit-demo.is-paused *, .benefit-demo.is-paused *::after { animation-play-state: paused !important; }
@keyframes demo-caret { 50% { opacity: 0; } }
@keyframes demo-transfer { from { transform: translateX(0); opacity: 0; } 20%, 80% { opacity: 1; } to { transform: translateX(22px); opacity: 0; } }
@media (min-width: 768px) and (max-width: 1100px) {
  .home-benefit-card { padding-left: 14px; padding-right: 14px; }
  .demo-body { padding: 16px 10px; }.demo-live { display: none; }.demo-toolbar { gap: 5px; }
  .demo-cost-row { align-items: flex-start; flex-direction: column; gap: 4px; }
  .demo-workflow > div { flex-wrap: wrap; }.demo-step-status { margin-left: 36px; }
  .demo-capital-track { width: 12px; }.demo-bank, .demo-ordn { width: 32px; height: 36px; }.demo-badge { font-size: 7px; }
}
@media (max-width: 767px) { .home-benefit-card { min-height: 650px; aspect-ratio: auto; }.home-benefit-card h2 { min-height: 0; }.demo-title { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .benefit-demo *, .benefit-demo *::after { animation: none !important; transition: none !important; } }