/* The concepts have their own brand palettes. Parent preferences remain available. */
.demo-body { --demo-bg:#edf0e3; --demo-ink:#17352d; --demo-muted:#5b7161; --demo-line:#ccd6c1; color:var(--demo-ink); background:var(--demo-bg); }
.demo-body[data-concept="baan"] { --demo-bg:#f2eeda; --demo-ink:#333025; --demo-muted:#736950; --demo-line:#d9d0b6; }
.demo-body[data-concept="haven"] { --demo-bg:#f7f5ee; --demo-ink:#34432d; --demo-muted:#677060; --demo-line:#d4d8c7; }
.demo-notice { display:flex; align-items:center; gap:20px; padding:7px 3vw; font-size:10px; border-bottom:1px solid var(--demo-line); background:var(--bg); color:var(--ink); }
.demo-notice > a { display:flex; align-items:center; gap:8px; min-height:44px; white-space:nowrap; }
.demo-notice > a .icon { width:13px; height:13px; }
.demo-notice > span { margin-inline:auto; color:var(--muted); }
.demo-preferences { display:flex; gap:4px; margin-left:auto; }
.demo-header { display:flex; align-items:center; justify-content:space-between; gap:25px; padding:24px 7vw; border-bottom:1px solid var(--demo-line); }
.demo-brand { font-size:28px; font-weight:650; line-height:1; letter-spacing:-.06em; white-space:nowrap; }
.demo-header nav { display:flex; gap:26px; font-size:12px; }
.demo-header nav a { display:flex; align-items:center; gap:6px; min-height:44px; }
.demo-header nav a:last-child { border:1px solid var(--demo-line); border-radius:24px; padding:8px 18px; }
.demo-header .icon { width:14px; height:14px; }
.demo-body .eyebrow { color:var(--demo-muted); }
.demo-hero { display:grid; grid-template-columns:1fr 1fr; }
.demo-hero > div:first-child { padding:85px 5vw 85px 7vw; }
.demo-hero h1 { font-size:clamp(42px,6.4vw,92px); font-weight:500; line-height:1.06; letter-spacing:-.065em; margin-block:30px; }
.demo-hero p:not(.eyebrow) { font-size:15px; line-height:1.9; max-width:380px; color:var(--demo-muted); }
.demo-hero > .spatial-art { min-height:525px; }
.demo-cta { display:inline-flex; min-height:46px; align-items:center; gap:35px; font-size:12px; margin-top:29px; padding:12px 0; border-bottom:1px solid var(--demo-ink); color:var(--demo-ink); }
.demo-cta:hover { opacity:.7; }
.demo-marquee { display:flex; justify-content:space-around; gap:25px; align-items:center; padding:19px; font-size:10px; letter-spacing:.06em; border-block:1px solid var(--demo-line); }
.demo-story { padding:90px 7vw; display:grid; grid-template-columns:1fr 1fr; gap:9vw; align-items:center; }
.demo-story h2 { font-size:clamp(30px,4vw,50px); font-weight:500; margin-block:24px; }
.demo-story p:not(.eyebrow) { font-size:14px; line-height:1.95; color:var(--demo-muted); }
.demo-story img { border-radius:2px; width:100%; aspect-ratio:1.17; object-fit:cover; }
.demo-offer { padding:70px 7vw 90px; border-top:1px solid var(--demo-line); }
.demo-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:25px; margin-bottom:35px; }
.demo-section-heading h2 { margin-top:18px; font-size:40px; }
.demo-tabs { display:flex; gap:5px; }
.demo-tabs button { min-height:44px; padding:10px 18px; border-radius:25px; font-size:12px; border:1px solid var(--demo-line); }
.demo-tabs .active { background:var(--demo-ink); color:var(--demo-bg); border-color:var(--demo-ink); }
.demo-items { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.demo-items article { display:flex; gap:13px; padding-block:25px; border-top:1px solid var(--demo-line); }
.demo-items article > span { font-size:9px; color:var(--demo-muted); }
.demo-items h3 { font-size:19px; }
.demo-items p { font-size:12px; color:var(--demo-muted); margin-top:13px; }
.demo-items article > .icon { width:14px; height:14px; margin-left:auto; }
.demo-visit { border-top:1px solid var(--demo-line); padding:75px 7vw; display:grid; grid-template-columns:1.2fr 1fr; gap:8vw; align-items:center; }
.demo-visit h2 { font-size:40px; margin-block:22px; }
.demo-visit p:not(.eyebrow) { font-size:13px; color:var(--demo-muted); max-width:460px; }
.demo-visit .demo-cta { margin-top:0; }
#demo-interaction-result { margin-top:18px; padding:16px; border:1px solid var(--demo-line); }
.demo-footer { padding:30px 7vw; display:flex; justify-content:space-between; gap:40px; border-top:1px solid var(--demo-line); }
.demo-footer p { max-width:600px; font-size:10px; color:var(--demo-muted); }
.demo-footer .text-link { font-size:11px; white-space:nowrap; }
:lang(th) .demo-hero h1 { font-size:clamp(35px,5.25vw,70px); line-height:1.4; }
:lang(zh) .demo-hero h1 { font-size:clamp(35px,5.25vw,70px); line-height:1.35; }
[data-embedded="true"] .demo-notice { display:none; }
[data-embedded="true"] .demo-header { padding-block:17px; }
@media(max-width:900px) {
 .demo-hero > div:first-child { padding-block:65px; }
 .demo-hero > .spatial-art { min-height:465px; }
 .demo-header { padding-inline:5vw; } .demo-header nav { gap:13px; font-size:11px; }
 .demo-brand { font-size:25px; }
 .demo-notice > span { display:none; }
 .demo-story { gap:6vw; padding:65px 6vw; }
 .demo-items { grid-template-columns:1fr; gap:5px; }
 .demo-visit { gap:5vw; }
 .demo-footer { display:block; } .demo-footer .text-link { margin-top:14px; }
}
@media(max-width:600px) {
 .demo-header { padding:17px 6vw; flex-wrap:wrap; gap:15px; }
 .demo-header nav { width:100%; justify-content:space-between; font-size:10px; gap:10px; }
 .demo-header nav a:last-child { padding:6px 12px; }
 .demo-hero { grid-template-columns:1fr; }
 .demo-hero > div:first-child { padding:42px 7vw; }
 .demo-hero h1 { font-size:clamp(42px,10vw,59px); }
 .demo-hero p:not(.eyebrow) { font-size:14px; }
 .demo-hero > .spatial-art { min-height:350px; height:350px; }
 .demo-hero .art-arch { width:36%; left:25%; }
 .demo-hero .art-ball { width:22%; right:15%; } .demo-hero .art-pillar { width:22%; right:15%; }
 .demo-marquee { font-size:8px; justify-content:center; padding-block:15px; }
 .demo-marquee > span { display:none; }
 .demo-story { grid-template-columns:1fr; gap:33px; padding:55px 7vw; }
 .demo-story h2 { font-size:35px; } .demo-story img { max-height:300px; }
 .demo-offer { padding:55px 7vw; } .demo-section-heading { display:block; }
 .demo-section-heading h2 { font-size:34px; } .demo-tabs { margin-top:22px; }
 .demo-visit { grid-template-columns:1fr; gap:25px; padding:55px 7vw; }
 .demo-visit h2 { font-size:33px; }
 .demo-footer { padding:25px 7vw; }
 :lang(th) .demo-hero h1 { font-size:40px; } :lang(zh) .demo-hero h1 { font-size:40px; }
}