.demo-proof-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.demo-proof-strip > div {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .1rem .75rem;
    align-items: center;
    padding: 1rem;
    background: #fff;
    border: 1px solid var(--story-line, #cfe4f1);
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
}

.demo-proof-strip i { grid-row: 1 / 3; color: var(--story-blue, #0284c7); font-size: 1.7rem; }
.demo-proof-strip strong { color: #0f172a; }
.demo-proof-strip span { color: #64748b; font-size: .84rem; }

.demo-pilot {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
    gap: 2rem;
    padding: 2.5rem;
    background: rgba(255, 255, 255, .96);
    border-color: var(--story-line, #cfe4f1);
}

.demo-pilot__copy { align-self: center; }
.demo-pilot__copy .lead { color: #475569; font-size: 1.05rem; }
.demo-pilot__copy h2,
.demo-sites-heading h2 {
    margin: 0 0 .8rem;
    color: var(--story-ink, #0f172a);
    font-size: clamp(1.8rem, 3.2vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.08;
}
.demo-sites-heading p:not(.story-kicker) { max-width: 780px; margin: 0; color: var(--story-copy, #475569); line-height: 1.65; }
.demo-journey-list { display: grid; gap: .8rem; margin: 1.5rem 0; padding: 0; list-style: none; }
.demo-journey-list li { display: flex; gap: .8rem; align-items: flex-start; }
.demo-journey-list li > span,
.demo-flow-grid article > span {
    display: inline-flex;
    flex: 0 0 2rem;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: #fff;
    font-weight: 800;
    background: linear-gradient(135deg, var(--story-blue, #0284c7), var(--story-teal, #0f766e));
    border-radius: 50%;
}
.demo-journey-list strong { color: #0f172a; }
.demo-journey-list p { margin: .15rem 0 0; color: #64748b; font-size: .91rem; }

.demo-pilot__frame-wrap {
    overflow: hidden;
    min-height: 650px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .16);
}
.demo-browser-bar { display: flex; gap: .35rem; align-items: center; padding: .75rem 1rem; color: #64748b; background: #f8fafc; border-bottom: 1px solid #e2e8f0; font-size: .8rem; }
.demo-browser-bar span { width: .65rem; height: .65rem; background: #cbd5e1; border-radius: 50%; }
.demo-browser-bar strong { margin-left: .4rem; }
.demo-pilot__frame { display: block; width: 100%; height: 610px; border: 0; }
.demo-pilot__placeholder { display: grid; place-content: center; min-height: 610px; color: #64748b; text-align: center; }
.demo-pilot__placeholder i { color: #0891e5; font-size: 3rem; }

.demo-sites-section { background: rgba(255, 255, 255, .96); }
.demo-sites-heading { display: flex; gap: 1.5rem; align-items: flex-start; justify-content: space-between; margin-bottom: 1.5rem; }
.demo-site-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.demo-site-card {
    display: flex;
    flex-direction: column;
    min-height: 355px;
    padding: 1.2rem;
    background: #fff;
    border: 1px solid var(--story-line, #cfe4f1);
    border-top: 4px solid var(--story-blue, #0284c7);
    border-radius: 12px;
    box-shadow: 0 7px 20px rgba(15, 23, 42, .07);
}
.demo-site-card__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.demo-site-card h3 { margin: 1rem 0 .5rem; color: #0f172a; font-size: 1.08rem; font-weight: 800; }
.demo-site-card p { flex: 1; color: #64748b; font-size: .92rem; line-height: 1.55; }
.demo-site-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; color: #fff; background: linear-gradient(135deg, var(--story-blue, #0284c7), var(--story-teal, #0f766e)); border-radius: 10px; font-size: 1.25rem; }
.demo-site-status { padding: .3rem .55rem; color: #475569; background: #f1f5f9; border-radius: 999px; font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.demo-site-status--live { color: #047857; background: #d1fae5; }
.demo-site-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: .8rem 0; }
.demo-site-tags span { padding: .2rem .45rem; color: #475569; background: #f1f5f9; border-radius: 5px; font-size: .72rem; font-weight: 700; }
.demo-site-actions { display: flex; flex-wrap: wrap; gap: .4rem .8rem; padding-top: .8rem; border-top: 1px solid #e2e8f0; }
.demo-site-actions a { color: var(--story-blue, #0284c7); font-size: .86rem; font-weight: 800; text-decoration: none; }
.demo-site-actions a:hover { text-decoration: underline; }
.demo-capitalization-note { display: flex; gap: .65rem; margin-top: 1.25rem; padding: 1rem; color: #334155; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; }

.demo-flow-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; }
.demo-flow-grid article { position: relative; padding: 1rem; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px; }
.demo-flow-grid article:not(:last-child)::after { position: absolute; top: 1.45rem; right: -.62rem; z-index: 2; color: var(--story-amber, #fbbf24); content: "→"; font-weight: 900; }
.demo-flow-grid article > span { color: var(--story-navy, #071c33); background: var(--story-amber, #fbbf24); }
.demo-flow-grid h3 { margin: .8rem 0 .35rem; color: #fff; font-size: .98rem; font-weight: 800; }
.demo-flow-grid p { margin: 0; color: rgba(255, 255, 255, .72); font-size: .82rem; }

@media (max-width: 1100px) {
    .demo-proof-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .demo-pilot { grid-template-columns: 1fr; }
    .demo-site-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .demo-flow-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .demo-flow-grid article:nth-child(3)::after { display: none; }
}

@media (max-width: 700px) {
    .demo-proof-strip,
    .demo-site-grid,
    .demo-flow-grid { grid-template-columns: 1fr; }
    .demo-pilot { display: block; }
    .demo-pilot__frame-wrap { min-height: 570px; margin-top: 1.5rem; }
    .demo-pilot__frame { height: 530px; }
    .demo-sites-heading,
    .demo-capitalization-note { display: block; }
    .demo-sites-heading .btn { margin-top: 1rem; }
    .demo-flow-grid article::after { display: none; }
}