/* The frame stays light in either site theme. Timing is set on each element. */
.demo-main{max-width:1140px;padding-top:48px;padding-bottom:54px;text-align:center}
.demo-heading .eyebrow{margin-bottom:12px}
.demo-heading h1{font-size:clamp(32px,4.5vw,52px);letter-spacing:-1.8px;line-height:1.15;margin:0 0 14px}
.demo-heading>p:last-child{font-size:16px;line-height:1.6;color:var(--muted);margin:0 0 32px}
.site-demo{background:#f6f8ee;color:#252923;border:1px solid #d4dfbc;border-radius:16px;box-shadow:0 10px 35px #18191808;text-align:left;overflow:hidden}
.demo-site-header{height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 6%;border-bottom:1px solid #343d2b;background:#252923}
.demo-mark{width:65px;height:12px;background:#d6f56b;border-radius:4px}
.demo-nav{display:flex;gap:15px}.demo-nav span{width:34px;height:5px;background:#8f9e73;border-radius:3px}
.demo-site-content{padding:32px 6% 28px;text-align:center}
.demo-title{font-size:clamp(27px,3.5vw,39px);line-height:1.2;letter-spacing:-1.2px;margin:0 0 14px;font-weight:500}
.demo-copy{font-size:16px;line-height:1.65;color:#71776b;margin:0 0 25px}
.demo-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 auto 24px;max-width:680px}
.demo-card{height:93px;border:1px solid #e5e8df;border-radius:8px;background:#fff;box-shadow:0 3px 10px #18191803}
.demo-card:nth-child(1){background:#eaf5cb;border-color:#d6e5b2}
.demo-card:nth-child(2){background:#d6f56b;border-color:#c3de62}
.demo-card:nth-child(3){background:#e1e8d6;border-color:#cfdac0}
.demo-title{color:#3e512b}
.demo-button{display:inline-flex;align-items:center;justify-content:center;font:inherit;font-size:14px;padding:12px 24px;border:0;border-radius:8px;background:#d6f56b;color:#252923;opacity:1;cursor:pointer;box-shadow:0 3px 10px #2529230a;transition:background .3s ease}
.demo-button:hover{background:#c5e65a}.demo-button:focus-visible{outline:3px solid #596e2e;outline-offset:5px}
.demo-site-footer{background:#e8efda;display:flex;justify-content:space-between;padding:16px 6%;border-top:1px solid #d2dfbd;font-size:12px;color:#59684b}
.build-part{animation:build-in .8s cubic-bezier(.22,1,.36,1) var(--delay) both}
@keyframes build-in{from{opacity:0;visibility:hidden;transform:translateY(9px)}to{opacity:1;visibility:visible;transform:translateY(0)}}
.demo-status{display:grid;margin:19px 0 16px;color:var(--muted);font-size:14px;min-height:23px}
.demo-status span{grid-area:1/1;transition:opacity .25s ease,transform .25s ease}
.status-created{opacity:0;transform:translateY(4px)}
.demo-status.is-complete .status-building{opacity:0;transform:translateY(-4px)}
.demo-status.is-complete .status-created{opacity:1;transform:none}
.demo-back{font-size:14px;text-decoration:underline;text-underline-offset:4px}
.demo-page footer{border-top:1px solid var(--line)}
@media(max-width:700px){.demo-main{padding-top:32px;padding-bottom:38px}.demo-heading h1{letter-spacing:-1px}.demo-heading>p:last-child{margin-bottom:24px}.demo-site-content{padding:27px 7% 24px}.demo-cards{gap:9px}.demo-card{height:78px}.demo-copy{font-size:14px}.desktop-break{display:none}.demo-nav{gap:8px}.demo-nav span{width:22px}.demo-site-header{height:53px}}
@media(prefers-reduced-motion:reduce){.build-part{animation:none;opacity:1;visibility:visible;transform:none}.demo-status span{transition:none;transform:none}}

/* Extra detail stays inside the original demonstration. */
.demo-brand{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:#f5f8ec}.demo-brand .demo-mark{width:20px;height:20px;border-radius:6px}
.demo-site-content{background:radial-gradient(ellipse at top,#eaf3d355,transparent 65%);padding-top:40px;padding-bottom:32px}
.demo-card{height:auto;min-height:180px;padding:20px;text-align:left;border-radius:12px;box-shadow:0 5px 16px #25301907}
.demo-card-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:#ffffff65;color:#3e512b;margin-bottom:16px}.demo-card-icon svg{width:21px;height:21px}
.demo-card h3{font-size:17px;letter-spacing:-.3px;margin:0 0 8px}.demo-card p{font-size:14px;line-height:1.55;color:#4c5b3d;margin:0;max-width:170px}
.demo-card-lines{display:grid;gap:5px;margin-top:18px}.demo-card-lines span{height:4px;border-radius:3px;background:#46593115;width:80%}.demo-card-lines span:last-child{width:55%}
.demo-palette{display:flex;align-items:center;gap:5px}.demo-palette i{display:block;width:12px;height:12px;border-radius:50%;background:#d6f56b;border:1px solid #34432318}.demo-palette i:nth-child(2){background:#cad8ae}.demo-palette i:last-child{background:#252923}
.build-stages{display:flex;justify-content:space-between;gap:12px;max-width:680px;margin:25px auto 12px;text-align:left;font-size:12px;color:var(--muted)}.build-stages span{display:flex;gap:8px;align-items:center;transition:color .3s}.build-stages b{font-size:14px;font-weight:500}.build-stages .is-active{color:var(--ink)}.build-stages .is-done{color:var(--ink)}
.build-progress{height:3px;max-width:680px;margin:auto;background:var(--line);border-radius:4px;overflow:hidden}.build-progress span{display:block;width:100%;height:100%;background:#91b63e;transform-origin:left;animation:build-progress 6s linear both}
@keyframes build-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.demo-bottom-actions{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap}.demo-replay{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);padding:12px 16px;font:inherit;font-size:14px;cursor:pointer;min-height:44px}.demo-replay svg{width:18px;height:18px}.demo-replay:hover{border-color:var(--ink)}.demo-replay:focus-visible{outline:3px solid #72971c;outline-offset:4px}
.demo-reset .build-part,.demo-reset .build-progress span{animation:none!important}
@media(max-width:700px){.demo-card{padding:14px;min-height:172px}.demo-card h3{font-size:16px}.demo-card p{font-size:14px}.demo-card-icon{margin-bottom:12px}.build-stages{gap:8px}.build-stages span{flex-direction:column;align-items:flex-start;gap:4px}.build-stages b{font-size:14px}}
@media(max-width:480px){.demo-cards{grid-template-columns:1fr;gap:10px}.demo-card{min-height:0;display:grid;grid-template-columns:32px 1fr;gap:4px 12px;padding:14px 16px}.demo-card-icon{grid-row:1/3;margin:0;width:32px;height:32px}.demo-card h3{margin:0}.demo-card p{grid-column:2;max-width:none}.demo-card-lines{display:none}.demo-site-content{padding-top:28px}}
@media(prefers-reduced-motion:reduce){.build-progress span{animation:none;transform:scaleX(1)}.build-stages span{transition:none}}