/* Only the shared top brand area and homepage operation demonstration. */
header .brand-lockup{background:#102e23;padding:10px 14px;border-radius:4px;gap:12px}
header .brand-lockup .brand-copy{display:flex;min-width:0}
header .brand-lockup .brand-mark{width:48px;height:48px;flex-basis:48px}
header .brand-lockup .brand-name{font-family:Inter,Arial,sans-serif;font-size:17px;font-weight:800;line-height:1.25;letter-spacing:.025em;color:#fff;white-space:normal}
header .brand-lockup .brand-title-line{display:block;white-space:nowrap}
header .brand-lockup .brand-subtitle{font-size:9px;line-height:1.8;letter-spacing:.1em;color:#d9e3dd}
.cinematic-home header{background:#102e23}
.cinematic-home header:focus-within,.cinematic-home header:has(nav.open),.cinematic-home header.scene-ended{background:#102e23}
.cinematic-home .cinematic-brand.brand-lockup{width:auto;height:86px;min-width:0;padding:10px 0;gap:14px;opacity:1;pointer-events:auto}
.cinematic-home .cinematic-brand .brand-name{font-size:17px;line-height:1.25;letter-spacing:.025em}
.cinematic-home .cinematic-brand .brand-subtitle{font-size:9px;line-height:1.8;letter-spacing:.1em;color:#d9e3dd}
#demo-section{position:relative;isolation:isolate;overflow:hidden;background:#f7f7f2;padding-block:100px;border-color:#e2e5dc}
#demo-section>.max-w-\[1280px\]{position:relative;z-index:1}
#demo-section .demo-gear{position:absolute;z-index:0;pointer-events:none;width:560px;height:560px;right:-100px;top:10px;color:#174d3b;opacity:.045;transform:rotate(12deg)}
#demo-section .demo-heading{margin-bottom:48px;max-width:740px}
#demo-section .demo-eyebrow{display:block;font-size:12px;line-height:1.5;letter-spacing:.18em;font-weight:750;color:#174d3b;margin-bottom:18px}
#demo-section h2{font-size:clamp(38px,4vw,60px);line-height:1.08;font-weight:800;letter-spacing:-.045em;color:#202923;margin:0 0 22px}
#demo-section .demo-description{font-size:17px;line-height:1.85;color:#59635c;max-width:650px;margin:0}
#demo-section #demo-player-frame{min-width:0}
#demo-section .operation-player{border-radius:10px;border-color:#d5dcd2;box-shadow:0 14px 42px #183b2512}
#demo-section .space-y-4>div{background:#fffffff0;border-color:#dee4da;border-radius:8px;padding:24px;box-shadow:0 3px 12px #183b2503}
#demo-section h4{font-weight:650;color:#233d30}
#demo-section .space-y-4 p{color:#606a63;line-height:1.7;margin-top:7px}
#demo-section #demo-player-frame>p{font-size:12px;line-height:1.7;color:#5e6d62}
#demo-section #video-status:empty{display:none}
@media(min-width:768px) and (max-width:1100px){
 .cinematic-home .cinematic-brand .brand-name{font-size:13px}
 .cinematic-home .cinematic-brand .brand-subtitle{font-size:7px}
 .cinematic-home .cinematic-brand .brand-mark{width:38px;height:38px;flex-basis:38px}
}
@media(max-width:767px){
 header .brand-lockup{padding:10px;gap:9px;min-width:0}
 header .brand-lockup .brand-mark{width:36px;height:36px;flex-basis:36px}
 header .brand-lockup .brand-name{font-size:12px;letter-spacing:.015em}
 header .brand-lockup .brand-subtitle{font-size:7.5px;letter-spacing:.065em}
 header .brand-lockup .brand-copy{display:flex}
 .cinematic-home header>div:nth-child(2){padding-inline:16px}
 .cinematic-home .cinematic-header-row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:0;min-height:88px;padding-block:8px}
 .cinematic-home .cinematic-brand.brand-lockup{grid-column:1;grid-row:1/3;width:100%;height:72px;gap:10px;padding:0;flex-basis:auto}
 .cinematic-home .cinematic-brand .brand-copy{display:flex}
 .cinematic-home .cinematic-brand .brand-name{font-size:12px;letter-spacing:.015em}
 .cinematic-home .cinematic-brand .brand-subtitle{font-size:7.5px;letter-spacing:.065em}
 .cinematic-home header button.md\:hidden{grid-column:2;grid-row:1;justify-self:end;padding:4px 8px;min-height:32px}
 .cinematic-home .cinematic-actions{grid-column:2;grid-row:2;justify-self:end}
 .cinematic-home header .cinematic-actions a:last-child{padding:7px 9px;font-size:10px;line-height:1.4}
 .cinematic-home header nav{top:88px}
 #demo-section{padding-block:64px}
 #demo-section .demo-heading{margin-bottom:30px}
 #demo-section .demo-eyebrow{font-size:10px;letter-spacing:.15em;margin-bottom:14px}
 #demo-section h2{font-size:40px;line-height:1.12;margin-bottom:18px}
 #demo-section .demo-description{font-size:15px;line-height:1.8}
 #demo-section .demo-gear{width:340px;height:340px;right:-180px;top:90px;opacity:.035}
 #demo-section .space-y-4>div{padding:20px}
 #demo-section .pt-2.flex{flex-wrap:wrap;gap:16px}
}