.demo-home { background: #f4f6fa; }
.demo-home .container { max-width: 1160px; }
.demo-home-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 28px; padding-bottom: 28px; }
.demo-home-header > span { font-size: 12px; color: #68788e; }
.demo-home-label { font-size: 10px; letter-spacing: .12em; margin-left: 8px; color: #68788e; }
.demo-intro { padding: 40px 0 32px; max-width: 720px; }
.demo-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .14em; color: #526078; }
.demo-intro h1 { font-size: clamp(34px, 5vw, 54px); letter-spacing: -.04em; margin: 14px 0; }
.demo-intro p { color: #526078; font-size: 17px; line-height: 1.7; }
.demo-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.demo-choice { padding: 32px; border: 1px solid #dce5f0; border-top: 5px solid #2456c5; border-radius: 18px; background: white; display: flex; flex-direction: column; box-shadow: 0 8px 28px #182a4e08; }
.demo-two { border-top-color: #087f77; }
.demo-number { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: #2456c5; }
.demo-two .demo-number { color: #087f77; }
.demo-choice h2 { margin: 16px 0 0; font-size: 28px; letter-spacing: -.03em; }
.demo-choice > p { color: #526078; line-height: 1.7; min-height: 72px; }
.demo-choice ul { padding-left: 18px; line-height: 2; color: #526078; margin: 22px 0 28px; }
.demo-preview { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; background: #f0f4fc; padding: 20px 12px; border-radius: 12px; text-align: center; }
.demo-preview span { font-size: 10px; color: #526078; }
.demo-preview b { color: #2456c5; background: white; border-radius: 6px; padding: 10px 0; }
.demo-kanban { grid-template-columns: repeat(3, 1fr); background: #edf7f5; text-align: left; }
.demo-kanban i { display: block; background: white; border-left: 3px solid #6cafaa; height: 18px; border-radius: 4px; margin-top: 8px; }
.demo-enter { display: block; text-align: center; margin-top: auto; padding: 14px; white-space: normal; line-height: 1.5; }
.demo-two .demo-enter { background: #087f77; }
.demo-separation { border: 1px solid #dce5f0; padding: 22px; border-radius: 12px; margin-top: 28px; }
.demo-separation p { color: #526078; line-height: 1.7; margin-bottom: 0; }
.demo-home a:focus-visible { outline: 3px solid #2456c5; outline-offset: 4px; }
.demo-context { border-bottom: 1px solid #cbd9f3; background: #eaf0fd; color: #23488e; }
.demo-context .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; padding-bottom: 12px; }
.demo-context strong { font-size: 12px; letter-spacing: .03em; }
.demo-context a { font-weight: 750; font-size: 12px; }
.demo-context-two { background: #e8f5f2; border-color: #c0dfd8; color: #076b64; }
.demo-context-two a { color: #076b64; }
.demo-context-two .container { max-width: 1440px; }
.demo-v1-header .nav { height: auto; min-height: 66px; flex-wrap: wrap; gap: 16px; padding-top: 16px; padding-bottom: 16px; }
.demo-v1-header nav { flex-wrap: wrap; gap: 20px; }
@media (max-width: 720px) { .demo-choices { grid-template-columns: 1fr; } .demo-choice { padding: 24px; } .demo-intro { padding-top: 20px; } .demo-home-header > span { display: none; } }