body[data-chrome="demo"] { background:#f6f3eb; color:#26382f; }
.demo-banner { position:sticky; top:0; z-index:90; background:#273d32; color:#faf5e8; padding:12px 20px; display:flex; justify-content:center; flex-wrap:wrap; gap:8px 18px; text-align:center; font-size:.78rem; line-height:1.45; }
.demo-banner strong { letter-spacing:.09em; }
.demo-header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; padding-block:22px; border-bottom:1px solid #d5d6ca; }
.demo-logo { font-family:Georgia,serif; font-size:1.7rem; font-weight:700; text-decoration:none; }
.demo-logo span { font:400 .72rem "Segoe UI",sans-serif; display:block; letter-spacing:.08em; text-transform:uppercase; }
.demo-header nav { display:flex; gap:18px; flex-wrap:wrap; font-size:.84rem; }
.demo-header nav a { text-decoration:none; padding:6px 0; }
.demo-header nav a:hover { text-decoration:underline; }
.demo-state-summary { font-size:.74rem; padding-block:14px; color:#626d61; border-bottom:1px solid #dfdfd3; line-height:1.7; }
.demo-main { padding-block:36px 60px; scroll-margin-top:78px; }
.demo-main h1 { font-family:Georgia,serif; font-size:clamp(2.1rem,5vw,3.5rem); max-width:850px; line-height:1.12; margin:0 0 18px; }
.demo-main h2 { font-family:Georgia,serif; font-size:1.65rem; margin:0 0 14px; }
.demo-main h3 { font-size:1.05rem; margin:0 0 10px; }
.demo-main p { line-height:1.65; }
.demo-main .eyebrow { color:#a15e47; letter-spacing:.1em; font-size:.72rem; text-transform:uppercase; margin-bottom:12px; }
.demo-intro { max-width:750px; margin-bottom:30px; }
.demo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.demo-product-layout { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:38px; align-items:start; }
.demo-mockup { display:block; width:100%; height:auto; background:#ebe6dc; border-radius:5px; }
.demo-product-copy { padding-top:12px; }
.demo-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:20px 0; }
.demo-actions .btn { text-align:center; }
.demo-secondary { background:transparent!important; color:#304135!important; border:1px solid #bdc3b5!important; }
.demo-panel { padding:24px; background:#fffdf7; border:1px solid #dedfd2; border-radius:5px; margin:20px 0; }
.demo-panel > :last-child { margin-bottom:0; }
.demo-notice { padding:16px 20px; background:#e8ecdf; border-left:3px solid #71856b; margin:20px 0; font-size:.88rem; }
.demo-badge { display:inline-block; font-size:.72rem; padding:5px 10px; background:#e9ddcf; border-radius:20px; margin:0 8px 10px 0; }
.demo-line { display:grid; grid-template-columns:140px minmax(0,1fr); gap:20px; align-items:start; padding:22px 0; border-bottom:1px solid #dcded0; }
.demo-line .demo-mockup { max-height:185px; object-fit:contain; }
.demo-line .demo-actions { margin:12px 0 0; }
.demo-line input[type="number"] { width:75px; }
.demo-totals { max-width:420px; margin:24px 0 24px auto; }
.demo-total-row { display:flex; justify-content:space-between; gap:25px; padding:7px 0; }
.demo-total-row:last-child { margin-top:8px; border-top:1px solid #c7cdbe; font-weight:700; font-size:1.15rem; }
.demo-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 24px; }
.demo-field { display:block; }
.demo-field label { display:block; font-weight:500; font-size:.87rem; margin:0 0 7px; }
.demo-field input, .demo-field textarea { width:100%; padding:11px 12px; border:1px solid #bfc7b7; background:#fffdf8; border-radius:3px; color:#283b30; font:inherit; }
.demo-field textarea { min-height:110px; resize:vertical; }
.demo-field input[aria-invalid="true"] { border-color:#a8483c; }
.demo-field-wide { grid-column:1/-1; }
.demo-field-error { color:#a13e36; display:block; font-size:.78rem; margin-top:6px; }
.demo-proof-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.demo-proof-grid .demo-mockup { max-height:420px; object-fit:contain; }
.demo-status { font-weight:600; color:#526349; margin:8px 0; }
.demo-main [disabled] { opacity:.5; cursor:not-allowed; }
.demo-inbox-list { display:grid; gap:16px; }
.demo-inbox-message { border:1px solid #d3d9c7; padding:22px; background:#fffdf7; }
.demo-inbox-message small { color:#677261; }
.demo-progress-list { display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:20px 0; }
.demo-progress-list li { background:#e4eadb; border-radius:3px; padding:6px 10px; font-size:.75rem; }
.demo-footer { border-top:1px solid #d5d6ca; padding-block:26px 40px; font-size:.75rem; color:#657061; }
.demo-main .studio-grid { margin-top:20px; }
.demo-commit { padding:20px 24px; background:#e8eddf; border:1px solid #c9d2bd; margin-top:22px; }
.demo-commit .demo-field { max-width:130px; }
@media (max-width:799px) { .demo-product-layout { grid-template-columns:1fr; gap:20px; } .demo-product-copy { order:-1; } .demo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .demo-proof-grid { grid-template-columns:1fr; } .demo-form-grid { grid-template-columns:1fr; } .demo-banner { padding:10px 12px; font-size:.7rem; } .demo-header { padding-block:16px; } .demo-header nav { gap:12px; font-size:.76rem; } .demo-line { grid-template-columns:100px minmax(0,1fr); gap:14px; } .demo-main { padding-block:26px 40px; } .demo-panel { padding:18px; } .demo-totals { margin-left:0; } }
@media (max-width:420px) { .demo-grid { grid-template-columns:1fr; } .demo-header nav { width:100%; } .demo-line { grid-template-columns:82px minmax(0,1fr); } .demo-actions .btn { width:100%; } }