/* Root now uses the exact ProductDemo header and first-viewport grid. */
.root-demo { --accent:#13b8b0; --accent-rgb:19,184,176; }
.root-demo .demo-kicker {
    color:var(--accent);
}
.root-demo .demo-copy h1 em { color:var(--accent); font-style:normal; }
.root-demo .demo-button { background:var(--accent); }
.root-demo .proof { margin-top:24px; }
.root-demo .dash-tools { margin-left:auto; display:flex; gap:7px; }
.root-demo .dash-tools i { width:23px; height:23px; display:grid; place-items:center; border:1px solid #303a45; border-radius:6px; color:#7d8995; font-size:8px; }
.root-demo .dash-top .avatar { margin-left:0; }
.root-demo .hero-visual {
    align-self:center;
    transform:translateY(42px);
    min-width:0;
    width:100%;
}
@media (max-width:900px) {
    .root-demo .hero-visual { margin-top:20px; transform:none; }
}

@media (max-width:600px) {
    .root-demo main { width:100%; max-width:100%; overflow-x:clip; }
    .root-demo .demo-hero { width:100%; max-width:none; min-width:0; padding:calc(var(--demo-header-height) + 34px) 12px 72px; gap:34px; grid-template-columns:minmax(0,1fr); }
    .root-demo .demo-copy,
    .root-demo .hero-visual { min-width:0; max-width:100%; }
    .root-demo .demo-copy>p { overflow-wrap:anywhere; }
    .root-demo .demo-actions { width:100%; flex-direction:column; }
    .root-demo .demo-button,
    .root-demo .demo-secondary { width:100%; min-height:52px; }
    .root-demo .dashboard-shell { width:100%; max-width:100%; }
    .root-demo .hero-visual { margin-top:20px; transform:none; }
    .root-demo .apps-section,
    .root-demo .statement { width:100%; max-width:none; margin-left:0; margin-right:0; padding-left:12px; padding-right:12px; }
    .root-demo .app-grid { grid-template-columns:minmax(0,1fr); }
    .root-demo .app-grid,
    .root-demo .app-card { width:100%; min-width:0; }
    .root-demo .app-card { padding:30px; }
    .root-demo .flow-section,
    .root-demo .cta { width:calc(100% - 24px); max-width:none; margin-left:12px; margin-right:12px; }
    .root-demo .cta { padding-left:26px; padding-right:26px; }
}

html.iphone .root-demo main { width:100%; max-width:100%; overflow-x:clip; }
html.iphone,
html.iphone body.root-demo {
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}
html.iphone body.root-demo {
    position:relative;
}
html.iphone .root-demo .demo-hero { width:100%; max-width:none; min-width:0; padding:calc(var(--demo-header-height) + 34px) 12px 72px; gap:34px; grid-template-columns:minmax(0,1fr); }
html.iphone .root-demo .demo-copy,
html.iphone .root-demo .hero-visual { min-width:0; max-width:100%; }
html.iphone .root-demo .demo-copy>p { overflow-wrap:anywhere; }
html.iphone .root-demo .demo-actions { width:100%; flex-direction:column; }
html.iphone .root-demo .demo-button,
html.iphone .root-demo .demo-secondary { width:100%; min-height:52px; }
html.iphone .root-demo .dashboard-shell { width:100%; max-width:100%; }
html.iphone .root-demo .hero-visual { margin-top:20px; transform:none; }
html.iphone .root-demo .apps-section,
html.iphone .root-demo .statement { width:100%; max-width:none; margin-left:0; margin-right:0; padding-left:12px; padding-right:12px; }
html.iphone .root-demo .app-grid { width:100%; min-width:0; grid-template-columns:minmax(0,1fr); }
html.iphone .root-demo .app-card { width:100%; min-width:0; padding:30px; }
html.iphone .root-demo .flow-section,
html.iphone .root-demo .cta { width:calc(100% - 24px); max-width:none; margin-left:12px; margin-right:12px; }
html.iphone .root-demo .cta { padding-left:26px; padding-right:26px; }