*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    --demo-toolbar-height:64px;
    margin:0;
    font-family:"Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:#f7f1eb;
    color:#1d1613;
    overflow-x:hidden;
}

a{
    color:inherit;
    text-decoration:none;
}

img{
    max-width:100%;
    display:block;
}

.demo-badge{
    font-family:var(--font-ui);
    position:sticky;
    top:0;
    z-index:1000;
    background:rgba(11,11,15,.96);
    backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(255,255,255,.08);
    box-shadow:0 16px 32px rgba(0,0,0,.12);
}

.demo-badge__inner{
    width:min(1180px, calc(100% - 32px));
    margin:0 auto;
    min-height:var(--demo-toolbar-height);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.demo-badge__label{
    color:#f5eee8;
    font-size:14px;
    font-weight:700;
    letter-spacing:.02em;
}

.demo-badge__actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
}

.demo-badge__link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:44px;
    padding:0 16px;
    border:1px solid rgba(255,255,255,.24);
    border-radius:999px;
    color:rgba(245,238,232,.8);
    font-size:14px;
    font-weight:600;
    white-space:nowrap;
    transition:color .25s ease, border-color .25s ease, background .25s ease;
}

.demo-badge__cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:44px;
    padding:0 16px;
    border-radius:999px;
    background:#B80A24;
    color:#fff;
    font-size:14px;
    font-weight:800;
    white-space:nowrap;
    transform:translate3d(0, 0, 0);
    backface-visibility:hidden;
    transition:
        transform .36s cubic-bezier(.16,1,.3,1),
        background .32s cubic-bezier(.16,1,.3,1),
        box-shadow .38s cubic-bezier(.16,1,.3,1);
}

.demo-badge__actions svg{
    flex:0 0 auto;
    stroke:currentColor;
    stroke-width:1.65;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:transform .36s cubic-bezier(.16,1,.3,1);
}

@media (hover:hover){
    .demo-badge__cta:hover{background:#d00b2c;box-shadow:0 6px 20px rgba(184,10,36,.2);}
    .demo-badge__link:hover{color:#fff;border-color:#b80a24;background:rgba(184,10,36,.1);}
    .demo-badge__cta:hover svg{transform:translateX(2px);}
    .demo-badge__link:hover svg{transform:translateX(-2px);}
}

.demo-badge__link:focus-visible,
.demo-badge__cta:focus-visible{
    outline:2px solid #e1062c;
    outline-offset:3px;
}

/* Keep the demo's own sticky navigation below the HEES choices. */
body:not(.demo-body--embedded) .coif-header,
body:not(.demo-body--embedded) .demo-restaurant-header,
body:not(.demo-body--embedded) .shop-topbar,
body:not(.demo-body--embedded) .artisan-topbar,
body:not(.demo-body--embedded) .coach-header{
    top:calc(var(--demo-toolbar-height) + 1px);
}

.demo-body--embedded{
    overflow:hidden;
    scroll-behavior:auto;
}

.demo-body--embedded .coif-header,
.demo-body--embedded .demo-restaurant-header,
.demo-body--embedded .shop-topbar,
.demo-body--embedded .artisan-topbar,
.demo-body--embedded .coach-header{
    position:relative;
    top:0;
}

.demo-body--embedded [data-demo-reveal],
.demo-body--embedded .reveal-up,
.demo-body--embedded [data-coach-reveal]{
    opacity:1;
    transform:none;
    transition:none;
}

.demo-body--embedded *,
.demo-body--embedded *::before,
.demo-body--embedded *::after{
    animation-duration:.001ms;
    animation-iteration-count:1;
}

@media (max-width: 720px){
    body{--demo-toolbar-height:88px;}
    .demo-badge__inner{
        width:calc(100% - 24px);
        padding:10px 0;
        align-items:flex-start;
        flex-direction:column;
        gap:8px;
    }

    .demo-badge__label{font-size:11px;line-height:16px;}

    .demo-badge__actions{
        width:100%;
        display:grid;
        grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);
        gap:8px;
    }

    .demo-badge__link,
    .demo-badge__cta{
        width:100%;
        justify-content:center;
        padding-inline:10px;
        font-size:12px;
        gap:7px;
    }
}

@media (prefers-reduced-motion: reduce){
    html{
        scroll-behavior:auto;
    }
    .demo-badge__link, .demo-badge__cta, .demo-badge__actions svg{transition:none;}
}

/* Keep the agency CTA readable on narrow demo toolbars. */
@media (max-width: 720px) {
    .demo-badge__cta > span { min-width: 0; white-space: normal; line-height: 1.2; text-align: center; }
}