.demo-cta { display: inline-flex; align-items: center; justify-content: center; gap: 23px; min-height: 48px; padding: 14px 22px; border: 1px solid #072957; border-radius: 40px; background: #072957; color: #fff; text-decoration: none; font-size: 12px; font-weight: 600; line-height: 1.5; transition: background .2s, transform .2s; }
.demo-cta:hover { background: #124981; transform: translateY(-2px); }
.demo-cta span { font-size: 19px; line-height: 1; color: #b7df55; }
.hero-payoff .demo-cta { margin-top: 24px; opacity: 0; }
.payoff-revealed .hero-payoff .demo-cta { animation: payoff-reveal .65s 1s both; }
.demo-band { display: flex; justify-content: space-between; align-items: center; gap: 35px; padding: 40px; margin-top: 54px; background: #d6e9e5; border-radius: 20px; border: 1px solid #a5c8be; }
.demo-band .kicker { color: #245e50; }
.demo-band h3 { font-family: Georgia,serif; font-weight: 400; font-size: 31px; line-height: 1.16; letter-spacing: -.035em; }
.demo-band p:last-child { max-width: 520px; font-size: 13px; line-height: 1.8; color: #3e645e; margin-top: 15px; }
.demo-band .demo-cta { flex: 0 0 auto; }
.science-path { display: grid; grid-template-columns: repeat(3,1fr); margin: 0 0 45px; border: 1px solid #b5cdde; border-radius: 20px; overflow: hidden; background: #ffffff65; }
.science-path article { padding: 27px; border-right: 1px solid #b5cdde; }
.science-path article:last-child { border: 0; }
.science-path span { font-size: 10px; letter-spacing: .12em; color: #1a6b9b; }
.science-path h3 { font: 400 26px/1.16 Georgia,serif; margin: 19px 0 15px; letter-spacing: -.03em; }
.science-path p { font-size: 13px; line-height: 1.8; color: #466782; }
.demo-dialog { inset: 18px; width: min(1060px,calc(100% - 36px)); height: calc(100svh - 36px); max-width: none; max-height: none; margin: auto; padding: 0; border: 1px solid #c6dce7; border-radius: 24px; background: #e6f0f9; color: #072957; overflow: hidden; box-shadow: 0 25px 90px #001d4877; }
.demo-dialog::backdrop { background: #031a3dbb; backdrop-filter: blur(8px); }
.demo-dialog[open] { display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
.demo-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 28px; border-bottom: 1px solid #b5cdde; }
.demo-header .kicker { margin-bottom: 8px; }
.demo-header h2 { font: 400 30px/1.1 Georgia,serif; letter-spacing: -.03em; }
.demo-header button { flex-shrink: 0; min-height: 44px; }
.demo-calendar { position: relative; min-height: 0; overflow: auto; }
.demo-calendar iframe { display: block; border: 0; width: 100%; height: 100%; min-height: 600px; background: #e6f0f9; }
#demo-status { position: absolute; top: 15px; left: 20px; right: 20px; padding: 12px; border-radius: 8px; background: #fff; font-size: 13px; color: #254c72; pointer-events: none; }
.demo-dialog footer { display: flex; justify-content: space-between; gap: 15px; padding: 14px 28px; font-size: 11px; line-height: 1.6; border-top: 1px solid #b5cdde; }
.demo-dialog footer a { font-weight: 600; }
@media (max-width: 900px) {
  .demo-band { flex-direction: column; align-items: flex-start; padding: 28px; }
  .science-path { grid-template-columns: 1fr; }
  .science-path article { border-right: 0; border-bottom: 1px solid #b5cdde; }
}
@media (max-width: 700px) {
  .hero-payoff .demo-cta { min-height: 44px; font-size: 11px; padding: 12px 15px; gap: 12px; margin-top: 22px; }
  .demo-band { margin-top: 35px; padding: 24px 18px; }
  .demo-band h3 { font-size: 27px; }
  .demo-band .demo-cta { max-width: 100%; font-size: 11px; padding: 12px 15px; gap: 10px; }
  .demo-dialog { inset: 0; width: 100%; height: 100dvh; border-radius: 0; }
  .demo-header { padding: 17px 16px; gap: 12px; }
  .demo-header h2 { font-size: 25px; }
  .demo-header .kicker { font-size: 8px; }
  .demo-dialog footer { display: block; padding: 12px 16px max(12px,env(safe-area-inset-bottom)); font-size: 10px; }
  .demo-dialog footer a { display: inline-flex; min-height: 40px; align-items: center; }
}
@media (max-height: 850px) { .hero-tag { display: none; } }
@media (max-height: 670px) and (max-width: 700px) { .hero-payoff .demo-cta { margin-top: 15px; } }
@media (prefers-reduced-motion: reduce) { .hero-payoff .demo-cta { opacity: 1; } }