/* Agency page only: shared chrome and the existing site's visual language stay intact. */
.demos{max-width:1200px;margin:auto;padding:0 5% 48px;font-size:17px;line-height:1.65;overflow-wrap:anywhere}
body:has(.demos)>header{height:80px;padding-top:12px;padding-bottom:12px}
.demos section{padding:36px 0}
.demos section>:last-child{margin-bottom:0}
.demos h1{max-width:850px;font-size:clamp(32px,4vw,56px);text-wrap:balance;margin:16px 0 22px}
.demos h2{font-size:clamp(26px,2.5vw,36px);margin:0 0 18px;text-wrap:balance}
.demos h3{line-height:1.3;margin:0 0 12px}
.demos p{max-width:72ch;margin:0 0 18px}
.demos .intro{font-size:19px;max-width:68ch}
.demos .eyebrow{font:15px/1.5 Pixelify,monospace;margin-bottom:12px}
.demos .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.demos .grid>article,.demos .demo,.demos .offer{border-top:2px solid var(--purple)}
.demos .grid>article{padding:22px;background:#FFD84D30}
.demos .grid>article>a{display:inline-flex;align-items:center;min-height:44px}
.demos .primary,.demos button{display:inline-block;background:var(--purple);color:var(--cream);padding:12px 18px;min-height:44px;border:2px solid var(--purple);font:inherit;cursor:pointer;margin:0 0 16px}
.demos .primary:hover,.demos button:hover{background:var(--plum);color:var(--cream)}
.demos .badge{display:inline-block;background:var(--yellow);padding:5px 10px;color:var(--plum);font-size:14px}
.demos .callout{background:var(--yellow);padding:12px 14px;color:var(--plum)}
.demos pre{white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.65 ui-monospace,monospace;margin:14px 0}
.demos summary{cursor:pointer;padding:12px 0;min-height:44px;font-weight:700;text-underline-offset:4px}
.demos summary:hover{text-decoration:underline}
.demos .output{background:#5426A808;padding:0 16px}
.demos select{display:block;width:min(100%,32rem);max-width:100%;padding:12px;font:inherit;color:var(--plum);background:var(--cream);border:1px solid var(--plum);margin:8px 0 20px;min-height:48px}
.demos :focus-visible{outline:3px solid var(--purple);outline-offset:4px}
.demos .reading{max-width:none;margin:0;padding-left:0;padding-right:0}
.demos .reading>p,.demos .reading>h3{max-width:72ch}
.demos .audit-details{max-width:790px;border-top:1px solid #24163230;border-bottom:1px solid #24163230;margin-top:24px}
.demos .audit-details>summary{padding:16px 0}
.demos .audit-details[open]>summary{margin-bottom:10px}
.demos .audit-details p{margin-bottom:12px}
.demos table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:15px}
.demos th,.demos td{text-align:left;vertical-align:top;border:1px solid #24163240;padding:10px}
.demos caption{text-align:left;font-weight:bold;margin-bottom:8px}
.demos dl{display:grid;grid-template-columns:1fr 1fr;max-width:600px;gap:6px 20px;margin:20px 0}
.demos dt{font-weight:bold}
.demos dd{margin:0}
.demos .price{font-size:26px;font-weight:750}
.demos .pilot-scope{max-width:790px}
.demos .source p:target{background:var(--yellow)}
.demos .source p{scroll-margin-top:120px;white-space:pre-line}
.demos .source a{display:inline-flex;align-items:center;min-height:44px;margin-bottom:14px;font-size:14px}
.demos .output-sources{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0 0 12px;font-size:14px}.demos .output-sources a{display:inline-flex;align-items:center;min-height:44px}
.demos .status{font-size:14px;font-weight:600;margin:18px 0 12px}
.demos .fallback-note{font-size:14px}
.demos [hidden]{display:none!important}
@media(max-width:900px){.demos .grid{grid-template-columns:1fr}.demos .output{margin-top:4px}}
@media(max-width:480px){.demos{padding:0 20px 28px}.demos section{padding:26px 0}.demos .grid>article{padding:16px}.demos .intro{font-size:18px}.demos h1{font-size:32px}.demos .grid{gap:20px}.demos .price{font-size:24px}}
/* Demo changes are immediate; the shared mascot supplies reduced-motion-safe character. */
@media(prefers-reduced-motion:reduce){.demos{scroll-behavior:auto}}

/* Pixel workbenches extend the existing violet, butter-yellow and cream palette. */
.demos .hero{display:block;min-height:0}.demos .hero>h1{font-family:Pixelify,monospace;font-size:clamp(38px,5vw,68px);max-width:900px;line-height:1.08;color:var(--purple)}
.demos .hero .grid{gap:24px;margin-top:28px}.demos .hero .grid>article{position:relative;border:2px solid var(--plum);padding:24px;box-shadow:6px 6px 0 var(--plum);background:var(--yellow)}
.demos .hero .grid>.inbox-card{background:#D6BDF3}.demos .hero article h2{font-family:Pixelify,monospace;margin-bottom:6px}.demos .demo-illustration{display:block;width:200px;height:110px;margin:0 0 18px;max-width:100%}
.demos .chart-bars{transform-origin:80px 62px;animation:chart-reveal 1.4s steps(4,end) 2}.demos .mail-packet{animation:packet-pass 1.4s steps(4,end) 2}
@keyframes chart-reveal{0%{transform:scaleY(.25)}70%,100%{transform:scaleY(1)}}@keyframes packet-pass{0%{transform:translateX(-5px);opacity:.35}60%,100%{transform:translateX(4px);opacity:1}}
.demos .demo{padding:28px;margin:32px 0;background:#F0E6FC;border:2px solid var(--purple);box-shadow:6px 6px 0 var(--purple)}.demos #inbox-demo{background:#FFF0AB}.demos .demo h2{font-family:Pixelify,monospace;line-height:1.15;max-width:26ch}
.demos .workflow-strip{display:flex;align-items:center;gap:12px;margin:20px 0;flex-wrap:wrap;font:16px/1.4 Pixelify,monospace}.demos .workflow-strip span{background:var(--purple);color:var(--cream);padding:8px 12px;box-shadow:3px 3px 0 var(--plum)}.demos .workflow-strip b{color:var(--purple);font-size:24px}
.demos .source-drawer,.demos .output{background:var(--cream);border:2px solid var(--plum);padding:0 16px;min-height:52px}.demos .grid>div{min-width:0}.demos .output{margin-top:0}.demos .source-drawer>summary{list-style-position:inside}.demos .output[open] .result{animation:output-reveal 200ms cubic-bezier(.23,1,.32,1)}@keyframes output-reveal{from{opacity:.55;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.demos .callout{margin-top:20px;border:1px solid var(--plum)}.demos #inbox-demo .callout{background:#D6BDF3}.demos .status{color:var(--purple)}
@media(max-width:480px){.demos .demo{padding:18px;margin:24px 0}.demos .workflow-strip{gap:7px;font-size:13px}.demos .workflow-strip span{padding:6px}.demos .workflow-strip b{font-size:18px}.demos .demo-illustration{width:160px;height:88px}.demos .hero .grid>article{padding:18px}}
@media(hover:hover) and (pointer:fine){.demos .hero article a:hover{text-decoration-thickness:3px}}
@media(prefers-reduced-motion:reduce){.demos .chart-bars,.demos .mail-packet,.demos .output[open] .result{animation:none}}