.demo-section { padding-top: 20px; }
.demo-kicker { margin: 0 0 12px; color: var(--teal-deep); font-weight: 600; font-size: .9375rem; }
.demo-notice { border-left: 3px solid var(--teal); background: var(--foam); padding: 16px 20px; margin: 0 0 24px; }
.demo-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; gap: clamp(16px, 3vw, 32px); }
.demo-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.demo-card__body { padding: clamp(18px, 3vw, 32px); }
.demo-property { padding: clamp(20px, 4vw, 42px); background: linear-gradient(125deg, var(--navy), var(--teal-deep)); color: var(--white); }
.demo-property h2 { color: inherit; }
.demo-property p { margin: 8px 0 0; }
.demo-card__body h2 { font-size: 1.6rem; margin-bottom: 12px; }
.demo-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(82px, .65fr); gap: 12px; margin: 16px 0; }
.demo-fields label { font-weight: 600; font-size: .9rem; }
.demo-fields input, .demo-fields select { display: block; width: 100%; min-width: 0; margin-top: 5px; border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 8px; font: inherit; color: var(--navy); background: var(--white); min-height: 44px; }
.demo-muted { font-size: .9rem; color: var(--slate-soft); }
.demo-muted:empty, .demo-card [data-demo-status]:empty { display: none; }
.demo-card [hidden] { display: none; }
.demo-prices { margin: 0 0 20px; }
.demo-prices > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.demo-prices dd { margin: 0; text-align: right; }
.demo-total { color: var(--navy); font-weight: 600; }
.demo-confirmation { margin-top: 18px; padding: 16px; background: var(--foam); border-left: 3px solid var(--teal-deep); }
.demo-confirmation p { margin: 6px 0 0; }
@media (max-width: 820px) { .demo-layout { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .demo-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Availability and simulated checkout */
.demo-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; list-style: none; padding: 0; margin: 0 0 16px; }
.demo-steps li { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); font-size: .875rem; }
.demo-steps span { font-weight: 600; color: var(--teal-deep); }
.demo-steps li[aria-current="step"] { border-color: var(--teal-deep); background: var(--foam); font-weight: 600; color: var(--navy); }
.demo-calendar { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.demo-calendar h3 { margin-bottom: 12px; font-size: 1rem; }
.demo-days, .demo-legend { list-style: none; padding: 0; }
.demo-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin: 0 0 12px; }
.demo-days li { display: grid; place-items: center; padding: 5px 2px; border: 1px solid var(--line); border-radius: 5px; background: var(--white); font-size: .72rem; }
.demo-days li strong { color: var(--navy); font-size: .875rem; }
.demo-days li.is-selected, .demo-legend .is-selected span { background: #dcefed; border-color: var(--teal-deep); }
.demo-days li.is-blocked, .demo-legend .is-blocked span { background: var(--foam); border-style: dashed; }
.demo-days li.is-blocked strong { color: var(--slate-soft); text-decoration: line-through; }
.demo-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; font-size: .75rem; }
.demo-legend li { display: flex; align-items: center; gap: 5px; }
.demo-legend li span { width: 12px; height: 12px; border: 1px solid var(--line-strong); border-radius: 2px; }
.demo-rates { margin: 0 0 16px; padding: 10px 12px; border-radius: 5px; background: var(--foam); font-size: .875rem; }
.demo-rates > div { display: flex; justify-content: space-between; gap: 8px; }
.demo-rates dd { margin: 0; font-weight: 600; white-space: nowrap; }
.demo-payment { margin: 0 0 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); }
.demo-payment legend { padding: 0 4px; color: var(--navy); font-size: .875rem; font-weight: 600; }
.demo-payment label { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.demo-payment input { accent-color: var(--teal-deep); }
.demo-error { margin: 0 0 12px; padding: 8px 12px; border-left: 3px solid #a33a31; background: #fff3ef; color: #7e251e; }
.demo-error:empty { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; margin: 0; overflow: hidden; clip-path: inset(50%); }
.demo-range { margin-bottom: 8px; }
.demo-restart { margin-top: 14px; }
@media (max-width: 480px) {
	.demo-steps { gap: 5px; }
	.demo-steps li { padding: 8px; align-items: flex-start; flex-direction: column; gap: 1px; font-size: .75rem; }
}