/* Extra demonstrations: the same typography and four-colour studio palette. */
.features-page .floating-start { top: auto; bottom: 1rem; transform: none; }
.xd-demo { padding: clamp(1.25rem, 4vw, 3rem); background: var(--ivory); color: var(--ink); }
.xd-demo h3 { font-size: clamp(1.4rem, 2.5vw, 2.5rem); line-height: 1.2; margin-bottom: .8rem; }
.xd-demo p { max-width: 42rem; line-height: 1.7; }
.xd-button { display: inline-flex; gap: 1rem; align-items: center; border: 1px solid var(--accent); background: transparent; color: var(--accent); padding: .85rem 1.2rem; font: inherit; font-size: .75rem; cursor: pointer; margin-top: 1.25rem; }
.xd-button:hover { background: var(--accent); color: white; }
.xd-demo-note { font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; opacity: .7; margin-bottom: 1rem; }
.xd-hotspots { position: relative; }
.xd-hotspots img { width: 100%; height: clamp(18rem, 40vw, 34rem); object-fit: cover; }
.xd-hotspots button { position: absolute; transform: translate(-50%, -50%); border: 1px solid white; border-radius: 50%; width: 2.5rem; height: 2.5rem; background: var(--accent); color: white; font: inherit; cursor: pointer; box-shadow: 0 0 0 .4rem #ffffff50; }
.xd-hotspots button[aria-expanded="true"] { background: white; color: var(--accent); }
.xd-hotspot-copy { padding-top: 1.5rem; min-height: 9rem; }
.xd-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.xd-gallery button { text-align: left; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.xd-gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.xd-gallery span { display: block; padding-top: .75rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; }
.xd-lightbox, .xd-enquiry-dialog { border: 0; padding: 2rem; margin: auto; width: min(90vw, 70rem); max-height: 90svh; background: var(--ivory); color: var(--ink); }
.xd-lightbox::backdrop, .xd-enquiry-dialog::backdrop { background: #0a0a0ad9; backdrop-filter: blur(6px); }
.xd-lightbox > img { width: 100%; max-height: 70svh; object-fit: contain; }
.xd-dialog-close { display: block; margin: 0 0 1rem auto; border: 0; background: none; font-size: 1.8rem; cursor: pointer; }
.xd-controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }
.xd-controls button { border: 1px solid currentColor; background: none; color: inherit; padding: .6rem 1rem; cursor: pointer; font-size: 1.3rem; }
.xd-video video { display: block; width: 100%; max-height: 65svh; background: var(--ink); }
.xd-video p { margin-top: 1rem; text-transform: uppercase; letter-spacing: .15em; font-size: .7rem; }
.xd-process { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.xd-process button { flex: 1; border: 1px solid #6b1e2350; color: var(--ink); background: transparent; padding: 1.5rem .5rem; font: inherit; cursor: pointer; transition: background .3s, color .3s; }
.xd-process button b { display: block; font-size: 2rem; font-weight: 300; margin-bottom: .5rem; }
.xd-process button[aria-pressed="true"] { background: var(--accent); color: white; }
.xd-process-copy { margin-top: 2rem; min-height: 7rem; }
.xd-testimonial { padding: clamp(1rem, 4vw, 4rem); background: var(--graphite); color: white; }
.xd-testimonial blockquote { font-size: clamp(1.6rem, 3.5vw, 3rem); line-height: 1.4; max-width: 48rem; min-height: 3em; margin-bottom: 1.5rem; }
.xd-download { display: grid; grid-template-columns: 1fr 1.5fr; align-items: center; gap: 3rem; }
.xd-document { display: block; background: var(--accent); color: white; padding: 2rem; aspect-ratio: 3/4; font-size: clamp(1.4rem, 3vw, 3rem); font-weight: 700; line-height: 1.3; }
.xd-document small { display: block; margin-top: 3rem; font-size: .9rem; letter-spacing: .1em; font-weight: 300; }
.xd-download .xd-demo-note { margin-top: 1rem; }
.xd-enquiry-stage, .xd-transition { padding: clamp(1rem, 4vw, 4rem); min-height: 20rem; }
.xd-transition { background: var(--accent); color: white; transition: background .5s, opacity .25s; }
.xd-transition .xd-button { border-color: white; color: white; }
.xd-transition.is-changing { opacity: .2; }
.xd-enquiry-dialog { max-width: 32rem; }
.xd-enquiry-dialog h2 { font-size: 2rem; line-height: 1.2; margin-bottom: 1.5rem; }
.xd-enquiry-dialog label { display: block; margin-top: 1rem; }
.xd-enquiry-dialog input, .xd-enquiry-dialog textarea { display: block; width: 100%; border: 1px solid #aaa; background: white; font: inherit; padding: .6rem; margin-top: .4rem; }
#xd-enquiry-status { margin-top: 1rem; }
@media (max-width: 680px) {
 .xd-gallery, .xd-download { grid-template-columns: 1fr; }
 .xd-document { max-width: 17rem; }
 .xd-process { flex-wrap: wrap; }
 .xd-process button { flex-basis: 40%; }
 .xd-process > span { display: none; }
 .xd-lightbox, .xd-enquiry-dialog { padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .xd-transition, .xd-process button { transition: none; } }

.features-page .floating-start.is-clear-of-controls { opacity: 0; pointer-events: none; }