.demo-frame,
body.demo-frame-body {
    box-sizing: border-box;
    /* Visibly framed page so the demo reads as a contained
       surface when embedded in an iframe. Medium-dark neutral
       gray (#6b7280, Tailwind gray-500) keeps the border
       clearly visible against typical host-page backgrounds
       while staying calm next to the navy / blue demo
       palette. */
    border: 1.5px solid #6b7280;
    border-radius: 8px;
    box-shadow:
        0 1px 3px rgba(15, 23, 42, 0.06),
        0 1px 2px rgba(15, 23, 42, 0.04);
    background-clip: padding-box;
}

.demo-frame {
    /* Used on the home page's .home-root wrapper: it owns the
       scroll and the full viewport, so it just needs to fill
       like the original rule did. */
    width: 100%;
    min-height: 100vh;
}

body.demo-frame-body {
    /* Used on Claim Intake / Board Pack / Contract Review:
       frame the entire <body> so the border wraps the page
       chrome (header, stepper, side panels) as well as the
       centre panel. Inset the body by 8px on every side so
       the border doesn't sit flush against the stepper
       card edges, and don't change the existing overflow
       behaviour (those pages still scroll the body). */
    margin: 0;
    padding: 8px;
    min-height: 100vh;
}