.demo-page { min-height: 100svh; display: flex; flex-direction: column; background: linear-gradient(110deg, #102d23ed, #173b2db8), url('/brand/aurora.webp') center / cover; color: #f6f7f0; }
@media (max-width: 1200px) {
    .demo-page { background-image: linear-gradient(110deg, #102d23ed, #173b2db8), url('/brand/aurora-1200.webp'); }
}
@media (max-width: 600px) {
    .demo-page { background-image: linear-gradient(110deg, #102d23ed, #173b2db8), url('/brand/aurora-800.webp'); }
}
.demo-header, .demo-footer { display: flex; align-items: center; justify-content: space-between; gap: 2.4rem; padding: 3.2rem var(--gutter); }
.demo-home { display: flex; align-items: center; min-height: 4.4rem; width: 9.2rem; }
.demo-home img { filter: brightness(0) invert(1); }
.demo-back { font-size: 1.3rem; }
.demo-back:hover, .demo-footer a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.demo-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(6.4rem, 8vw, 12rem); width: 100%; max-width: 144rem; margin: auto; padding: 4.8rem var(--gutter) 6.4rem; }
.demo-intro { max-width: 51rem; }
.demo-intro h1 { font-family: 'Daily News BQ', Georgia, serif; font-size: clamp(5.6rem, 5.5vw, 8rem); font-weight: 400; line-height: 1.04; letter-spacing: -0.035em; }
.demo-intro > p { max-width: 44rem; margin-top: 2.8rem; font-size: 1.8rem; line-height: 1.7; color: #dde5dc; }
.demo-trust { margin-top: 5.6rem; }
.demo-trust > p { margin-bottom: 2.4rem; font-size: 1.4rem; font-weight: 500; color: #dde5dc; }
.demo-logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 2.4rem 2.8rem; max-width: 44rem; }
.demo-logos li { display: flex; align-items: center; min-width: 0; height: 3.6rem; }
.demo-logos img { width: 100%; max-width: 11rem; height: 2.4rem; object-fit: contain; object-position: left center; filter: brightness(0) invert(1); opacity: 0.78; }
.demo-logos img[src$='notion.webp'] { height: 3.2rem; }
.demo-logos img[src$='hebbia.webp'], .demo-logos img[src$='truecaller.webp'] { height: 2rem; }
.demo-card { width: 100%; max-width: 48rem; min-width: 0; margin-left: auto; padding: clamp(3.2rem, 3.3vw, 4.8rem); background: #fafafa; color: #17231b; border-radius: 0.6rem; }
.demo-card h2 { font-size: 3rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.025em; }
.demo-card-intro { margin-top: 1.2rem; color: #5a655d; font-size: 1.5rem; line-height: 1.6; }
#demo-form { margin-top: 3.2rem; }
#demo-form .p-form-input { margin-bottom: 2.4rem; }
.demo-privacy { margin-top: 2rem; color: #5a655d; font-size: 1.2rem; line-height: 1.7; }
.demo-privacy a, .demo-error a { text-decoration: underline; text-underline-offset: 0.2em; }
.demo-error { margin-top: 1.6rem; color: #9a2828; font-size: 1.3rem; line-height: 1.6; }
.demo-footer { font-size: 1.2rem; color: #dde5dc; padding-block: 2.4rem; }
@media (min-width: 1001px) {
    .demo-header, .demo-footer { padding-block: 1.6rem; }
    .demo-shell { padding-block: 2.4rem; }
    .demo-intro h1 { font-size: clamp(5.6rem, 8vh, 8rem); }
    .demo-trust { margin-top: 3.2rem; }
    .demo-card { padding-block: clamp(2.4rem, 3.5vh, 4rem); }
    #demo-form { margin-top: 2.4rem; }
    #demo-form .p-form-input { margin-bottom: 2rem; }
}
@media (min-width: 1001px) and (max-height: 760px) {
    .demo-shell { padding-block: 1.2rem; }
}
@media (max-width: 1000px) {
    .demo-shell { grid-template-columns: minmax(0, 1fr); gap: 4.8rem; max-width: 76rem; padding-block: 3.2rem 4.8rem; }
    .demo-intro { max-width: 54rem; }
    .demo-card { margin-inline: 0; max-width: none; }
    .demo-intro h1 { font-size: 6.4rem; }
    .demo-trust { margin-top: 3.2rem; }
}
@media (max-width: 600px) {
    .demo-header { padding-block: 1.6rem; }
    .demo-shell { gap: 3.2rem; padding-top: 2.4rem; }
    .demo-intro h1 { font-size: 4.8rem; }
    .demo-intro > p { font-size: 1.6rem; margin-top: 2rem; }
    .demo-logos { gap: 1.6rem; }
    .demo-trust > p { font-size: 1.3rem; margin-bottom: 1.6rem; }
    .demo-card { padding: 2.4rem; }
    .demo-card h2 { font-size: 2.6rem; }
    .demo-footer { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
}

.demo-page:has(.demo-modal[open]) { overflow: hidden; }
.demo-modal { width: min(90rem, calc(100vw - 4.8rem)); max-width: none; max-height: calc(100svh - 3.2rem); margin: auto; padding: 0; border: 0; border-radius: 0.6rem; background: #fdfdfb; color: #17231b; }
.demo-modal::backdrop { background: #081b15a6; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.demo-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 2.4rem; padding: 1.2rem 2.4rem; }
.demo-modal-header h2 { font-size: 1.8rem; font-weight: 500; }
.demo-close { display: grid; place-items: center; width: 4.4rem; height: 4.4rem; border-radius: 50%; color: #365642; }
.demo-close:hover { background: #edf1e8; }
.demo-modal .calendly-inline-widget { width: 100%; min-width: 32rem; height: min(70rem, calc(100svh - 15rem)); }
.demo-calendar-link { display: inline-block; margin: 1.2rem 2.4rem 2rem; color: #5a655d; font-size: 1.2rem; text-decoration: underline; text-underline-offset: 0.3em; }
@media (prefers-reduced-motion: no-preference) {
    .demo-modal[open] { animation: demoModalIn 0.25s ease-out; }
    .demo-modal[open]::backdrop { animation: demoBackdropIn 0.25s ease-out; }
}
@keyframes demoModalIn { from { opacity: 0; transform: translateY(0.8rem) scale(0.99); } to { opacity: 1; transform: none; } }
@keyframes demoBackdropIn { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 600px) {
    .demo-modal { width: 100%; max-height: 100dvh; height: 100dvh; border-radius: 0; }
    .demo-modal[open] { display: flex; flex-direction: column; }
    .demo-modal .calendly-inline-widget { flex: 1; min-height: 0; height: auto; }
}