.style-minimal{--demo-primary:#f16a3b;--demo-accent:#5b2833;--demo-soft:#fff0e8;--demo-on-primary:#171717}
.style-editorial{--demo-primary:#2c3042;--demo-accent:#7c92ff;--demo-soft:#eef1ff;--demo-on-primary:#fff}
.style-luxury,.style-sage{--demo-primary:#527263;--demo-accent:#c78f45;--demo-soft:#edf4ef;--demo-on-primary:#fff}
.style-bold,.style-plum{--demo-primary:#6c3f72;--demo-accent:#e09a71;--demo-soft:#f7edf8;--demo-on-primary:#fff}

.demo-hero{padding:72px 0 46px;background:radial-gradient(circle at 14% 15%,color-mix(in srgb,var(--color-brand-orange) 20%,transparent),transparent 34%),var(--color-surface-2)}
.demo-hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:clamp(28px,6vw,84px);align-items:end}.demo-hero h1{max-width:870px;margin:14px 0;font-size:clamp(2.25rem,5.5vw,4.9rem);line-height:1.06;letter-spacing:-.04em}.demo-hero p{max-width:700px;margin:0;color:var(--color-text-muted);font-size:clamp(1rem,1.6vw,1.14rem);line-height:2}.demo-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:26px}.demo-hero-actions>span{color:var(--color-text-muted);font-size:.82rem}
.demo-how-card{padding:24px;border:1px solid var(--color-border);border-radius:24px;background:color-mix(in srgb,var(--color-surface) 92%,transparent);box-shadow:var(--shadow-md)}.demo-how-card>strong{display:block;margin-bottom:18px;font-size:1.05rem}.demo-how-card ol{display:grid;gap:14px;margin:0;padding:0;list-style:none}.demo-how-card li{display:grid;grid-template-columns:36px 1fr;gap:11px;align-items:center}.demo-how-card li>span{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--color-accent-surface);color:var(--color-brand-orange-text);font-weight:900}.demo-how-card b,.demo-how-card small{display:block}.demo-how-card small{margin-top:2px;color:var(--color-text-muted);line-height:1.5}

.demo-categories{padding-block:38px 78px;scroll-margin-top:90px}.demo-category{margin-block:38px 52px}.demo-category>header{display:flex;gap:14px;align-items:center;margin-bottom:17px}.demo-category>header>span{font:900 1.05rem var(--font-family-mono);color:var(--color-brand-orange-text)}.demo-category h2{margin:0;font-size:1.45rem}.demo-category header small{display:block;margin-top:2px;color:var(--color-text-muted)}
.demo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.demo-card{overflow:hidden;border:1px solid var(--color-border);border-radius:24px;background:var(--color-surface);box-shadow:var(--shadow-sm);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.demo-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--demo-primary) 55%,var(--color-border));box-shadow:var(--shadow-lg)}.demo-card-main{display:grid;gap:16px;padding:19px;color:inherit}.demo-card-brand,.demo-logo{display:flex;align-items:center;gap:9px;font-size:.78rem;letter-spacing:.06em}.demo-card-brand i,.demo-logo i{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--demo-primary);color:var(--demo-on-primary);font-style:normal;font-weight:950}.demo-card-brand>span{margin-inline-start:auto;color:var(--color-text-muted);font-size:.68rem;letter-spacing:0}
.demo-card-scene{display:grid;grid-template-columns:1.2fr .8fr;grid-template-rows:1fr 1fr;gap:9px;min-height:150px;padding:17px;border-radius:18px;background:linear-gradient(128deg,var(--demo-primary),var(--demo-accent));overflow:hidden}.demo-card-scene span,.demo-card-scene b{display:block;border-radius:12px;background:color-mix(in srgb,var(--demo-on-primary) 78%,transparent)}.demo-card-scene span:first-child{grid-row:span 2}.demo-card-scene b{display:none}.demo-card-copy>small{color:var(--color-brand-orange-text);font-weight:800}.demo-card-copy h3{margin:5px 0;font-size:1.3rem}.demo-card-copy p{margin:0;color:var(--color-text-muted);line-height:1.8}.demo-card-copy strong{display:block;margin-top:10px;font-size:.82rem;line-height:1.7}
.demo-card-details{display:grid;grid-template-columns:.8fr 1.2fr;gap:14px;padding:17px 19px;border-top:1px solid var(--color-border);background:var(--color-surface-2)}.demo-card-details>div>span{display:block;margin-bottom:7px;color:var(--color-text-muted);font-size:.69rem;font-weight:800}.demo-card-details ul{display:grid;gap:4px;margin:0;padding-inline-start:18px;font-size:.78rem}.demo-feature-tags{display:flex;flex-wrap:wrap;gap:5px}.demo-feature-tags small,.demo-site [data-demo-feature-summary] small{padding:5px 8px;border-radius:999px;background:var(--demo-soft);color:var(--demo-primary);font-weight:800}.demo-card-action{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:12px 19px;border-top:1px solid var(--color-border);color:var(--color-brand-orange-text);font-weight:900}.demo-card-action .ui-icon{width:18px;height:18px}
.demo-trust-strip{padding:36px 0;border-block:1px solid var(--color-border);background:var(--color-surface-2)}.demo-trust-strip>.shell{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.demo-trust-strip .shell>div{padding:19px;border:1px solid var(--color-border);border-radius:18px;background:var(--color-surface)}.demo-trust-strip strong,.demo-trust-strip span{display:block}.demo-trust-strip strong{margin-bottom:6px}.demo-trust-strip span{color:var(--color-text-muted);font-size:.83rem;line-height:1.75}

.demo-preview{padding-block:24px 78px}.demo-breadcrumb{display:flex;gap:8px;align-items:center;margin-bottom:24px;color:var(--color-text-muted);font-size:.8rem}.demo-breadcrumb a{color:var(--color-brand-orange-text);font-weight:800}.demo-preview-intro{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.5fr);gap:28px;align-items:end;margin-bottom:28px}.demo-preview-intro h1{max-width:850px;margin:10px 0;font-size:clamp(2.1rem,5vw,4.1rem);line-height:1.08}.demo-preview-intro p{max-width:760px;margin:0;color:var(--color-text-muted);line-height:1.9}.demo-preview-intro aside{padding:19px;border-inline-start:3px solid var(--color-brand-orange);background:var(--color-surface-2)}.demo-preview-intro aside span,.demo-preview-intro aside strong,.demo-preview-intro aside small{display:block}.demo-preview-intro aside>span{color:var(--color-text-muted);font-size:.72rem}.demo-preview-intro aside strong{margin:6px 0;line-height:1.7}.demo-preview-intro aside small{color:var(--color-text-muted);line-height:1.65}
.demo-workbench{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(340px,.65fr);gap:20px;align-items:start}.demo-stage-wrap,.demo-config{border:1px solid var(--color-border);border-radius:24px;background:var(--color-surface);box-shadow:var(--shadow-sm)}.demo-stage-wrap{position:sticky;top:88px;overflow:hidden}.demo-stage-toolbar{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:15px 17px;border-bottom:1px solid var(--color-border);background:var(--color-surface-2)}.demo-stage-toolbar span,.demo-stage-toolbar strong{display:block}.demo-stage-toolbar span{color:var(--color-brand-orange-text);font-size:.68rem;font-weight:900}.demo-stage-toolbar strong{margin-top:2px;font-size:.85rem}
.demo-view-switch{display:flex;gap:4px;padding:4px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface)}.demo-view-switch button{min-height:36px;padding:7px 11px;border:0;border-radius:8px;background:transparent;color:var(--color-text-muted);font:inherit;font-size:.75rem;font-weight:800;cursor:pointer}.demo-view-switch button[aria-pressed="true"]{background:var(--color-text);color:var(--color-bg)}
.demo-stage{display:flex;justify-content:center;min-height:670px;padding:18px;background:var(--color-surface-3);transition:padding .2s ease}.demo-stage[data-view="mobile"]{padding-inline:clamp(12px,8%,74px)}.demo-stage[data-view="mobile"] .demo-site{max-width:390px}.demo-site{width:100%;overflow:hidden;border:1px solid color-mix(in srgb,var(--demo-primary) 32%,var(--color-border));border-radius:19px;background:#fff;color:#1b1b1f;box-shadow:0 16px 45px rgba(20,20,28,.13);transition:max-width .25s ease,border-radius .2s ease}.demo-site>header{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:15px 18px;border-bottom:1px solid rgba(30,30,35,.1)}.demo-site nav{display:flex;gap:15px;color:#50505b;font-size:.7rem}.demo-site>main{padding:clamp(38px,8vw,86px) clamp(22px,7%,64px);background:linear-gradient(130deg,var(--demo-soft),#fff)}.demo-site>main>span{color:var(--demo-primary);font-size:.64rem;font-weight:900;letter-spacing:.09em}.demo-site>main h1,.demo-site>main h2{max-width:680px;margin:12px 0;color:#17171b;font-size:clamp(1.8rem,4.5vw,3.7rem);line-height:1.08}.demo-site>main p{max-width:560px;color:#555561;line-height:1.8}.demo-site>main button,.demo-site>main>a{display:inline-flex;margin-top:12px;padding:11px 16px;border:0;border-radius:10px;background:var(--demo-primary);color:var(--demo-on-primary);font:inherit;font-weight:850;cursor:pointer}
.demo-site-sections{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;padding:18px}.demo-site-sections article{min-height:120px;padding:14px;border-radius:13px;background:var(--demo-soft);color:#222}.demo-site-sections small,.demo-site-sections strong{display:block}.demo-site-sections small{color:var(--demo-primary);font-weight:900}.demo-site-sections strong{margin:7px 0}.demo-site-sections p{margin:0;color:#62626c;font-size:.76rem;line-height:1.65}.demo-site-sections article>span{display:block;width:60%;height:5px;margin-top:14px;border-radius:99px;background:var(--demo-accent)}.demo-site>footer,.demo-full-features{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:16px 18px;border-top:1px solid rgba(30,30,35,.1);font-size:.72rem}.demo-site [data-demo-feature-summary]{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px}
.demo-site[data-personality="editorial"]>main h1,.demo-site[data-personality="editorial"]>main h2{font-family:Georgia,serif;font-weight:500}.demo-site[data-personality="luxury"]{border-radius:8px;box-shadow:0 24px 55px rgba(43,34,22,.17)}.demo-site[data-personality="luxury"] .demo-scene,.demo-site[data-personality="luxury"] .demo-site-sections article,.demo-site[data-personality="luxury"] .demo-jewel-card{border-radius:8px}.demo-site[data-personality="bold"]>main h1,.demo-site[data-personality="bold"]>main h2{text-transform:uppercase;letter-spacing:-.055em}.demo-site[data-personality="minimal"]{box-shadow:none}.demo-site[data-personality="modern"]{border-radius:12px}.demo-site[data-personality="modern"]>header{border-bottom:0;background:#172338;color:#fff}.demo-site[data-personality="modern"]>header nav{color:#e4eafa}.demo-site[data-personality="modern"]>main{background:linear-gradient(125deg,var(--demo-soft),#fff 68%)}.demo-site[data-personality="modern"] .demo-scene{border-radius:12px;box-shadow:0 9px 28px rgba(31,43,67,.09)}.demo-site[data-personality="industrial"]{border-radius:3px;border-width:2px;box-shadow:7px 7px 0 color-mix(in srgb,var(--demo-primary) 22%,transparent)}.demo-site[data-personality="industrial"]>header{background:#222831;color:#fff;border-bottom:3px solid var(--demo-accent)}.demo-site[data-personality="industrial"]>header nav{color:#d4d9df}.demo-site[data-personality="industrial"]>main{background:linear-gradient(135deg,#e8e9e7,#fff)}.demo-site[data-personality="industrial"]>main>span,.demo-site[data-personality="industrial"] .demo-scene-heading small{font-family:var(--font-family-mono,monospace);letter-spacing:.13em}.demo-site[data-personality="industrial"] .demo-scene,.demo-site[data-personality="industrial"] .demo-site-sections article,.demo-site[data-personality="industrial"] button{border-radius:3px}
.demo-stage[data-view="mobile"] .demo-site>header nav{display:none}.demo-stage[data-view="mobile"] .demo-site>main{padding:42px 21px}.demo-stage[data-view="mobile"] .demo-site>main h1,.demo-stage[data-view="mobile"] .demo-site>main h2{font-size:2rem}.demo-stage[data-view="mobile"] .demo-site-sections{grid-template-columns:1fr}.demo-stage[data-view="mobile"] .demo-site>footer{align-items:flex-start;flex-direction:column}.demo-stage[data-view="mobile"] .demo-site [data-demo-feature-summary]{justify-content:flex-start}

.demo-config{padding:22px}.demo-config>header>span{color:var(--color-brand-orange-text);font-size:.68rem;font-weight:900}.demo-config h2{margin:7px 0;font-size:1.35rem}.demo-config p{margin:0;color:var(--color-text-muted);line-height:1.75}.demo-config form{margin-top:20px}.demo-field>label,.demo-config legend{display:block;margin-bottom:9px;font-weight:850}.demo-field input{width:100%;min-height:46px;padding:10px 12px;border:1px solid var(--color-border);border-radius:11px;background:var(--color-bg);color:var(--color-text);font:inherit}.demo-field small{display:block;margin-top:6px;color:var(--color-text-muted);line-height:1.5}.demo-config fieldset{margin:23px 0;padding:0;border:0}.demo-option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.demo-option-grid label{display:flex;align-items:center;gap:8px;min-height:46px;padding:9px 10px;border:1px solid var(--color-border);border-radius:11px;font-size:.78rem;cursor:pointer}.demo-option-grid input{accent-color:var(--color-brand-orange)}.demo-option-grid label:has(input:checked){border-color:var(--color-brand-orange);background:var(--color-accent-surface)}.demo-theme-options{grid-template-columns:1fr}.demo-theme-options label>span{width:17px;height:17px;border:1px solid rgba(0,0,0,.18);border-radius:50%;background:#f16a3b}.demo-theme-options .tone-midnight{background:#2c3042}.demo-theme-options .tone-sage{background:#527263}.demo-theme-options .tone-plum{background:#6c3f72}.demo-theme-options .tone-custom{background:linear-gradient(135deg,#2563eb 0 50%,#ec4899 50%)}
.demo-custom-color{display:flex;justify-content:space-between;align-items:center;min-height:48px;margin-top:9px;padding:8px 10px;border:1px dashed var(--color-border);border-radius:11px;font-size:.78rem;font-weight:800}.demo-custom-color input{width:42px;height:32px;padding:2px;border:1px solid var(--color-border);border-radius:7px;background:transparent}.demo-custom-color output{margin-inline-start:auto;margin-inline-end:9px;color:var(--color-text-muted);font:700 .7rem var(--font-family-mono)}.demo-live-summary{padding:13px;border-radius:12px;background:var(--color-surface-2)}.demo-live-summary span,.demo-live-summary strong{display:block}.demo-live-summary span{color:var(--color-text-muted);font-size:.67rem}.demo-live-summary strong{margin-top:4px;font-size:.78rem;line-height:1.6}.demo-config-actions{display:grid;gap:8px;margin-top:16px}.demo-config-actions .button{width:100%;justify-content:center}.demo-reset{min-height:44px;border:0;background:transparent;color:var(--color-text-muted);font:inherit;font-weight:800;cursor:pointer}.demo-reset:hover{color:var(--color-text)}.demo-error{padding:11px;border-radius:10px;background:var(--status-danger-surface);color:var(--status-danger-text)}
.demo-notice{padding:11px;border-radius:10px;background:var(--status-info-surface);color:var(--status-info-text)}
.demo-decision-details{margin-top:54px}.demo-decision-details>header{max-width:760px}.demo-decision-details h2{margin:9px 0 20px;font-size:clamp(1.7rem,4vw,2.8rem)}.demo-decision-details>div{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.demo-decision-details article{padding:20px;border:1px solid var(--color-border);border-radius:18px;background:var(--color-surface-2)}.demo-decision-details p{margin:7px 0 0;color:var(--color-text-muted);font-size:.83rem;line-height:1.8}

.demo-full-body{margin:0;background:#17171b}.demo-full{min-height:100vh;color:#f7f7f8}.demo-full-toolbar{position:sticky;z-index:20;top:0;display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;padding:11px clamp(13px,3vw,36px);border-bottom:1px solid #36363e;background:rgba(23,23,27,.96);backdrop-filter:blur(16px)}.demo-full-back{display:flex;align-items:center;gap:8px;min-height:44px;color:#fff;font-weight:850}.demo-full-identity{text-align:center}.demo-full-identity small,.demo-full-identity strong{display:block}.demo-full-identity small{color:#aaaab5;font-size:.62rem;letter-spacing:.09em}.demo-full-identity strong{margin-top:2px;font-size:.82rem}.demo-full-toolbar .demo-view-switch{justify-self:end;border-color:#404049;background:#222228}.demo-full-toolbar .demo-view-switch button{color:#bbb}.demo-full-toolbar .demo-view-switch button[aria-pressed="true"]{background:#fff;color:#17171b}
.demo-full-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:12px clamp(13px,3vw,36px);border-bottom:1px solid #36363e;background:#202026}.demo-full-controls>label{display:flex;align-items:center;gap:8px;min-height:44px;padding:5px 9px;border:1px solid #45454f;border-radius:10px;color:#c8c8d0;font-size:.72rem}.demo-full-controls input:not([type]),.demo-full-controls select{min-width:125px;min-height:32px;padding:4px 8px;border:0;border-radius:7px;background:#303038;color:#fff;font:inherit}.demo-full-colour>span:last-child{display:flex;align-items:center;gap:5px}.demo-full-colour input{width:35px;height:30px;padding:1px;border:0;background:transparent}.demo-full-colour output{font:700 .66rem var(--font-family-mono)}.demo-full-controls .demo-reset{padding-inline:12px;color:#ddd}.demo-full-status{margin:0;padding:8px 18px;background:#17171b;color:#aaa;text-align:center;font-size:.7rem}.demo-full-status strong{color:#fff}
.demo-full-stage{display:flex;justify-content:center;padding:24px;background:#292930}.demo-full-stage .demo-site{max-width:1440px;min-height:900px;border-radius:13px}.demo-full-stage[data-view="mobile"] .demo-site{max-width:390px}.demo-site-full>main{min-height:560px;padding-top:130px}.demo-site-full>main h1{max-width:830px}.demo-full-offer{padding:clamp(42px,7vw,90px) clamp(22px,7%,76px)}.demo-full-offer>header{max-width:720px}.demo-full-offer>header small,.demo-full-proof small{color:var(--demo-primary);font-weight:900}.demo-full-offer h2,.demo-full-proof h2{margin:8px 0 25px;font-size:clamp(1.7rem,4vw,3rem)}.demo-full-offer .demo-site-sections{padding:0}.demo-full-proof{display:grid;grid-template-columns:1fr 1fr;gap:50px;padding:clamp(42px,7vw,90px) clamp(22px,7%,76px);background:var(--demo-soft);color:#1d1d22}.demo-full-proof ul{display:grid;gap:10px;align-content:center;margin:0;padding:0;list-style:none}.demo-full-proof li{padding:14px;border-bottom:1px solid color-mix(in srgb,var(--demo-primary) 25%,transparent);font-weight:800}.demo-site-full>footer{padding:28px clamp(22px,7%,76px);background:var(--demo-primary);color:var(--demo-on-primary)}.demo-site-full>footer div small,.demo-site-full>footer div strong{display:block}.demo-site-full>footer a{padding:11px 15px;border-radius:9px;background:var(--demo-on-primary);color:var(--demo-primary);font-weight:900}
.demo-full-stage[data-view="mobile"]{padding:14px}.demo-full-stage[data-view="mobile"] .demo-site>header nav{display:none}.demo-full-stage[data-view="mobile"] .demo-site>main{min-height:450px;padding:80px 22px}.demo-full-stage[data-view="mobile"] .demo-site>main h1{font-size:2.35rem}.demo-full-stage[data-view="mobile"] .demo-full-offer{padding:42px 18px}.demo-full-stage[data-view="mobile"] .demo-site-sections,.demo-full-stage[data-view="mobile"] .demo-full-proof{grid-template-columns:1fr}.demo-full-stage[data-view="mobile"] .demo-full-proof{gap:16px;padding:42px 22px}.demo-full-stage[data-view="mobile"] .demo-full-features,.demo-full-stage[data-view="mobile"] .demo-site-full>footer{align-items:flex-start;flex-direction:column}.demo-full-stage[data-view="mobile"] .demo-site [data-demo-feature-summary]{justify-content:flex-start}

.demo-card a:focus-visible,.demo-breadcrumb a:focus-visible,.demo-view-switch button:focus-visible,.demo-config input:focus-visible,.demo-config button:focus-visible,.demo-config a:focus-visible,.demo-full a:focus-visible,.demo-full button:focus-visible,.demo-full input:focus-visible,.demo-full select:focus-visible{outline:3px solid color-mix(in srgb,var(--color-brand-orange) 72%,#fff);outline-offset:3px}
@media(max-width:1080px){.demo-workbench{grid-template-columns:1fr}.demo-stage-wrap{position:static}.demo-preview-intro{grid-template-columns:1fr}.demo-config{max-width:none}.demo-stage{min-height:560px}}
@media(max-width:760px){.demo-hero{padding-block:46px 30px}.demo-hero-grid,.demo-grid,.demo-trust-strip>.shell,.demo-decision-details>div{grid-template-columns:1fr}.demo-card-details{grid-template-columns:1fr}.demo-stage-toolbar{align-items:flex-start;flex-direction:column}.demo-view-switch{width:100%}.demo-view-switch button{flex:1}.demo-full-toolbar{grid-template-columns:1fr auto}.demo-full-identity{display:none}.demo-full-controls{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap}.demo-full-controls>label{flex:0 0 auto}.demo-full-stage{padding:12px}.demo-full-stage .demo-site{min-height:0}.demo-site-full>main{min-height:470px}.demo-full-proof{grid-template-columns:1fr}}
@media(max-width:520px){.demo-preview{padding-top:16px}.demo-preview-intro h1{font-size:2rem}.demo-workbench{margin-inline:-9px}.demo-stage{min-height:520px;padding:10px}.demo-config{padding:17px}.demo-option-grid{grid-template-columns:1fr}.demo-site>header{padding:13px}.demo-site>header nav{display:none}.demo-site>main{padding:40px 19px}.demo-site>main h2{font-size:1.85rem}.demo-site-sections{grid-template-columns:1fr}.demo-full-toolbar{gap:8px;padding:8px}.demo-full-back span:last-child{font-size:.72rem}.demo-full-stage[data-view="desktop"]{overflow-x:auto;justify-content:flex-start}.demo-full-stage[data-view="desktop"] .demo-site{min-width:760px}}
@media(prefers-reduced-motion:reduce){.demo-card,.demo-stage,.demo-site{scroll-behavior:auto;transition:none}.demo-card:hover{transform:none}}

/* Keep custom light colours readable and interactive targets comfortably large. */
.demo-site>main>span,.demo-site-sections small,.demo-full-offer>header small,.demo-full-proof small,.demo-site [data-demo-feature-summary] small{color:var(--demo-primary-text,var(--demo-primary))}
.demo-site-full>footer a{color:var(--demo-primary-text,var(--demo-primary))}
.demo-view-switch button{min-height:40px}

/* Restaurant demo: a category-specific art-directed hero that remains fully
   driven by the shared configurator tokens. */
.demo-special{position:relative;display:grid;grid-template-columns:1fr .9fr;gap:10px;min-height:154px;margin-top:30px;padding:12px;border:1px solid color-mix(in srgb,var(--demo-primary) 26%,transparent);border-radius:20px;background:linear-gradient(135deg,color-mix(in srgb,var(--demo-primary) 13%,white),rgba(255,255,255,.72));overflow:hidden}.demo-special-orbit{position:absolute;inset-inline-end:-26px;inset-block-start:-44px;width:155px;height:155px;border:1px solid color-mix(in srgb,var(--demo-accent) 55%,transparent);border-radius:50%;box-shadow:0 0 0 16px color-mix(in srgb,var(--demo-accent) 8%,transparent),0 0 0 32px color-mix(in srgb,var(--demo-accent) 5%,transparent);animation:demo-orbit 9s linear infinite}.demo-special-note{position:relative;z-index:1;display:grid;align-content:center;gap:5px;padding:10px}.demo-special-note small,.demo-menu-card>span{color:var(--demo-primary-text,var(--demo-primary));font-size:.58rem;font-weight:950;letter-spacing:.11em}.demo-special-note strong{max-width:190px;color:#17171b;font-size:1.25rem;line-height:1.15}.demo-special-note span{color:#5d5d67;font-size:.67rem}.demo-menu-card{position:relative;z-index:1;display:grid;align-content:center;gap:5px;padding:14px;border:1px solid rgba(255,255,255,.75);border-radius:15px;background:rgba(255,255,255,.8);box-shadow:0 12px 25px rgba(20,20,28,.1);transform:rotate(-2deg);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease}.demo-special:hover .demo-menu-card{transform:rotate(1deg) translateY(-4px);box-shadow:0 18px 32px rgba(20,20,28,.15)}.demo-menu-card>b{color:#17171b;font-size:.92rem}.demo-menu-card>i{display:block;width:52px;height:3px;margin:5px 0 3px;border-radius:99px;background:var(--demo-accent)}.demo-menu-card>div{display:flex;justify-content:space-between;align-items:end;gap:8px}.demo-menu-card small{color:#70707a;font-size:.57rem}.demo-menu-card strong{color:var(--demo-primary-text,var(--demo-primary));font-size:.67rem;white-space:nowrap}@keyframes demo-orbit{to{transform:rotate(360deg)}}
@media(max-width:520px){.demo-special{grid-template-columns:1fr;min-height:0;margin-top:22px}.demo-special-note{min-height:104px}.demo-menu-card{margin-inline:8px;transform:none}.demo-special:hover .demo-menu-card{transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.demo-special-orbit{animation:none}.demo-special:hover .demo-menu-card{transform:none}}

/* Mobile order panel: keeps the live preview visible while controls stay one
   thumb-tap away, instead of forcing a long settings page scroll. */
.demo-config-mobile-toggle{display:none}
.demo-special-stats{display:flex;gap:8px;margin-top:13px}.demo-special-stats span{display:grid;gap:1px;padding:7px 9px;border:1px solid color-mix(in srgb,var(--demo-primary) 16%,transparent);border-radius:10px;background:rgba(255,255,255,.56);color:#686873;font-size:.56rem}.demo-special-stats b{color:var(--demo-primary-text,var(--demo-primary));font-size:.82rem}.demo-menu-items{display:flex;justify-content:space-between;align-items:end;gap:8px}
@media(max-width:760px){
  .demo-config{position:relative;z-index:12}
  .demo-config-mobile-toggle{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;margin:-17px 0 15px;padding:10px 0;border:0;border-bottom:1px solid var(--color-border);background:transparent;color:var(--color-text);font:inherit;text-align:inherit;cursor:pointer}
  .demo-config-mobile-toggle b{flex:1;font-size:.88rem}.demo-config-grip{width:28px;height:4px;border-radius:99px;background:var(--color-border)}.demo-config-toggle-icon{font-size:1.2rem;transition:transform .22s ease}.demo-config.is-mobile-open .demo-config-toggle-icon{transform:rotate(180deg)}
  .demo-config>header,.demo-config>form,.demo-config>.demo-error,.demo-config>.demo-notice{display:none}.demo-config.is-mobile-open>header,.demo-config.is-mobile-open>form,.demo-config.is-mobile-open>.demo-error,.demo-config.is-mobile-open>.demo-notice{display:block}.demo-config.is-mobile-open>form{animation:demo-config-reveal .24s ease both}
  .demo-config.is-mobile-open{box-shadow:0 16px 42px rgba(18,22,35,.16)}
}
@keyframes demo-config-reveal{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
@media(max-width:520px){.demo-special-stats{gap:6px}.demo-special-stats span{padding:6px 7px}.demo-menu-items{display:grid;gap:7px}}
@media(prefers-reduced-motion:reduce){.demo-config-toggle-icon,.demo-config.is-mobile-open>form{animation:none;transition:none}}

/* Live design canvas: editor controls live on the canvas and mirror the
   saved configurator state, making cause and effect obvious. */
.demo-editor-strip{display:grid;grid-template-columns:minmax(150px,.7fr) auto minmax(250px,1.3fr);gap:18px;align-items:center;padding:15px 18px;border-bottom:1px solid var(--color-border);background:var(--color-surface)}
.demo-editor-strip>div:first-child small,.demo-editor-strip>div:first-child strong{display:block}.demo-editor-strip>div:first-child small{color:var(--color-brand-orange-text);font-size:.62rem;font-weight:950;letter-spacing:.08em}.demo-editor-strip>div:first-child strong{margin-top:3px;font-size:.84rem}
.demo-quick-group>span{display:block;margin-bottom:6px;color:var(--color-text-muted);font-size:.6rem;font-weight:900;letter-spacing:.08em}.demo-quick-group>div{display:flex;flex-wrap:wrap;gap:5px}.demo-quick-swatch{width:36px;height:36px;border:2px solid var(--color-surface);border-radius:50%;box-shadow:0 0 0 1px var(--color-border);cursor:pointer}.demo-quick-swatch[aria-pressed="true"]{box-shadow:0 0 0 2px var(--color-text)}.demo-quick-swatch.tone-warm{background:#f16a3b}.demo-quick-swatch.tone-midnight{background:#2c3042}.demo-quick-swatch.tone-sage{background:#527263}.demo-quick-swatch.tone-plum{background:#6c3f72}
.demo-quick-style>div{gap:4px}.demo-quick-style button{min-height:40px;padding:6px 10px;border:1px solid var(--color-border);border-radius:999px;background:var(--color-surface-2);color:var(--color-text-muted);font:inherit;font-size:.68rem;font-weight:800;cursor:pointer}.demo-quick-style button[aria-pressed="true"]{border-color:var(--demo-primary,#f16a3b);background:var(--demo-soft,#fff0e8);color:var(--demo-primary-text,#a92f08)}
.demo-live-edit-feedback{grid-column:1/-1;margin:0;color:var(--color-text-muted);font-size:.66rem;line-height:1.5}.demo-live-edit-feedback.is-changed{color:var(--status-success-text);animation:demo-feedback-in .24s ease both}@keyframes demo-feedback-in{from{opacity:.4;transform:translateY(3px)}to{opacity:1;transform:none}}
.demo-open-config{display:none;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:7px 11px;border:1px solid var(--color-border);border-radius:10px;background:var(--color-surface);color:var(--color-text);font:inherit;font-size:.68rem;font-weight:850;cursor:pointer}
.demo-config [data-config-body]>header>span{color:var(--color-brand-orange-text);font-size:.68rem;font-weight:900}.demo-config [data-config-body]>header h2{margin:7px 0;font-size:1.35rem}.demo-config [data-config-body]>header p{margin:0;color:var(--color-text-muted);line-height:1.75}

/* The same design grammar produces a different, meaningful product scene for
   each business category. */
.demo-scene{margin:8px clamp(18px,5%,52px) 26px;padding:clamp(15px,3vw,26px);border:1px solid color-mix(in srgb,var(--demo-primary) 19%,#d8d5ce);border-radius:20px;background:linear-gradient(145deg,#fff 0%,var(--demo-soft,#fff0e8) 100%);color:#1b1b1f;overflow:hidden;animation:demo-scene-in .36s cubic-bezier(.2,.8,.2,1) both}.demo-scene-heading{display:grid;grid-template-columns:1fr auto;gap:5px 14px;align-items:end;margin-bottom:17px}.demo-scene-heading small{grid-column:1/-1;color:var(--demo-primary-text,var(--demo-primary));font-size:.59rem;font-weight:950;letter-spacing:.11em}.demo-scene-heading strong{font-size:clamp(1rem,2vw,1.45rem);line-height:1.4}.demo-scene-heading a{color:var(--demo-primary-text,var(--demo-primary));font-size:.68rem;font-weight:900}.demo-trust-line{margin-top:17px;color:#72717a;font-size:.61rem;text-align:center}.demo-trust-line span{padding-inline:7px;color:var(--demo-primary)}
@keyframes demo-scene-in{from{opacity:.75;transform:translateY(7px)}to{opacity:1;transform:none}}
.demo-product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.demo-product-card,.demo-jewel-card{display:grid;align-content:start;gap:4px;min-width:0}.demo-product-card>small,.demo-jewel-card>small{margin-top:7px;color:#72717a;font-size:.56rem;font-weight:850;letter-spacing:.05em}.demo-product-card>b,.demo-jewel-card>b{font-size:.78rem}.demo-product-card>strong,.demo-jewel-card>strong{color:var(--demo-primary-text,var(--demo-primary));font-size:.63rem;line-height:1.65}.demo-product-art{position:relative;display:grid;place-items:center;min-height:126px;border-radius:13px;background:#f3ede4;overflow:hidden}.demo-product-art>span,.demo-jewel-art>span{position:absolute;z-index:2;inset-block-start:9px;inset-inline-start:9px;padding:4px 7px;border-radius:99px;background:rgba(255,255,255,.76);color:#59575c;font-size:.48rem;font-weight:900;letter-spacing:.06em}.demo-product-art>i{position:relative;display:block;width:64px;height:80px;border-radius:45% 45% 36% 36%;background:linear-gradient(130deg,#dec9af,#f8f1e5 42%,#be9b73);box-shadow:12px 13px 22px rgba(81,54,31,.2);transform:rotate(-5deg)}.demo-art-ceramic>i:after{content:"";position:absolute;top:-17px;left:18px;width:28px;height:24px;border-radius:50% 50% 10% 10%;background:#d8c0a2}.demo-art-lamp{background:#e8e6dd}.demo-art-lamp>i{width:72px;height:65px;border-radius:60% 60% 8px 8px;background:linear-gradient(130deg,#f4d89b,#c79b54);clip-path:polygon(50% 0,100% 75%,0 75%)}.demo-art-lamp>i:after{content:"";position:absolute;top:53px;left:33px;width:7px;height:29px;background:#786448}.demo-art-textile{background:repeating-linear-gradient(135deg,#d8ddce 0 8px,#ebe9dc 8px 16px)}.demo-art-textile>i{width:85px;height:54px;border:2px solid rgba(67,78,55,.32);border-radius:5px;background:repeating-linear-gradient(0deg,transparent 0 8px,rgba(84,96,69,.24) 8px 11px)}
.demo-dining-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:12px}.demo-dish-card{display:grid;grid-template-columns:72px 1fr auto;gap:10px;align-items:center;padding:10px;border:1px solid rgba(61,44,33,.1);border-radius:13px;background:rgba(255,255,255,.73)}.demo-dish-art{position:relative;display:grid;place-items:center;width:72px;height:76px;border-radius:11px;background:radial-gradient(ellipse at center,#f2dba4 0 22%,#fff2d2 23% 43%,#c47741 44% 48%,#45634e 49% 60%,#eee8d9 61%)}.demo-dish-art>span{position:absolute;inset-block-start:5px;inset-inline-start:6px;color:#62543c;font-size:.45rem}.demo-dish-card>div:nth-child(2){display:grid;gap:2px}.demo-dish-card small,.demo-reservation-card small{color:var(--demo-primary-text,var(--demo-primary));font-size:.5rem;font-weight:950}.demo-dish-card b{font-size:.68rem}.demo-dish-card p{margin:0;color:#76747a;font-size:.55rem}.demo-dish-card>strong{font-size:.58rem;white-space:nowrap}.demo-reservation-card{display:grid;align-content:center;gap:5px;padding:12px;border-radius:13px;background:var(--demo-primary);color:var(--demo-on-primary,#fff)}.demo-reservation-card small{color:var(--demo-on-primary,#fff);opacity:.8}.demo-reservation-card>b{font-size:.78rem;line-height:1.4}.demo-reservation-card>span{font-size:.56rem;opacity:.82}.demo-reservation-card button,.demo-webinar-card button{min-height:38px;margin-top:4px;border:0;border-radius:9px;background:var(--demo-on-primary,#fff);color:var(--demo-primary-text,var(--demo-primary));font:inherit;font-size:.63rem;font-weight:900}
.demo-case-card{display:grid;grid-template-columns:1.05fr .95fr;min-height:205px;border-radius:14px;background:#1b2330;color:#fff;overflow:hidden}.demo-case-art{position:relative;display:grid;align-content:space-between;min-height:205px;padding:15px;background:radial-gradient(circle at 65% 45%,color-mix(in srgb,var(--demo-accent) 62%,#fff) 0 2%,transparent 3%),linear-gradient(135deg,#273547,#607864 55%,#e9bd87)}.demo-case-art>span,.demo-case-art>b{z-index:1;font-size:.55rem;letter-spacing:.1em}.demo-case-art>b{max-width:210px;font-size:1rem;letter-spacing:0}.demo-case-art>i{position:absolute;inset:20% 18%;border:1px solid rgba(255,255,255,.54);border-radius:50%;box-shadow:0 0 0 18px rgba(255,255,255,.1),0 0 0 38px rgba(255,255,255,.08)}.demo-case-copy{display:grid;align-content:center;gap:8px;padding:18px}.demo-case-copy>small{color:#d3b28c;font-size:.49rem;font-weight:900}.demo-case-copy h3{margin:0;font-size:.94rem;line-height:1.45}.demo-case-copy p{margin:0;color:#d2d7de;font-size:.63rem;line-height:1.7}.demo-case-copy>div{display:flex;flex-wrap:wrap;gap:5px}.demo-case-copy>div span{padding:4px 7px;border:1px solid rgba(255,255,255,.2);border-radius:99px;color:#eee;font-size:.5rem}
.demo-corporate-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:12px}.demo-corporate-lead{display:grid;align-content:center;gap:9px;padding:18px;border-radius:14px;background:var(--demo-primary);color:var(--demo-on-primary,#fff)}.demo-corporate-lead>span{font-size:.55rem;opacity:.72}.demo-corporate-lead h3{margin:0;font-size:1.1rem;line-height:1.45}.demo-corporate-lead p{margin:0;font-size:.63rem;line-height:1.75;opacity:.82}.demo-corporate-lead a{font-size:.62rem;font-weight:900}.demo-service-list{display:grid;gap:6px}.demo-service-list>article{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:7px;padding:8px 9px;border-bottom:1px solid rgba(30,30,35,.1)}.demo-service-list>article small{color:var(--demo-primary-text,var(--demo-primary));font-size:.51rem}.demo-service-list>article b{font-size:.63rem}.demo-proof-stats{display:flex;gap:9px;padding:5px 8px}.demo-proof-stats strong{color:var(--demo-primary-text,var(--demo-primary));font-size:.7rem}.demo-proof-stats small{color:#73727b;font-size:.53rem}
.demo-clinic-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:12px}.demo-practitioner,.demo-appointment{display:grid;align-content:center;justify-items:start;gap:6px;padding:14px;border:1px solid rgba(36,84,68,.13);border-radius:14px;background:rgba(255,255,255,.72)}.demo-practitioner-avatar{display:grid;place-items:center;width:43px;height:43px;border-radius:50%;background:#dcebe1;color:#426f5e;font-weight:900}.demo-practitioner small,.demo-appointment small{color:var(--demo-primary-text,var(--demo-primary));font-size:.5rem;font-weight:900}.demo-practitioner>b,.demo-appointment>b{font-size:.74rem}.demo-practitioner p,.demo-practitioner>span{margin:0;color:#73747b;font-size:.56rem}.demo-appointment>div{display:flex;flex-wrap:wrap;gap:5px}.demo-appointment button{min-height:34px;padding:5px 9px;border:1px solid #a7c7b6;border-radius:8px;background:#fff;color:#345e4d;font:inherit;font-size:.6rem}.demo-appointment>p{margin:0;color:#777;font-size:.5rem}
.demo-learning-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:12px}.demo-webinar-card{position:relative;display:grid;gap:6px;padding:12px;border-radius:14px;background:#24213b;color:#fff;overflow:hidden}.demo-live-dot{position:absolute;z-index:2;inset-block-start:9px;inset-inline-start:9px;padding:4px 6px;border-radius:99px;background:#ff6b6b;font-size:.49rem;font-weight:900}.demo-webinar-art{position:relative;display:grid;place-items:center;min-height:73px;border-radius:10px;background:radial-gradient(circle at 68% 35%,#ffbe76 0 5%,transparent 6%),linear-gradient(120deg,#5b4d83,#191c37)}.demo-webinar-art i{width:32px;height:32px;border:1px solid rgba(255,255,255,.7);border-radius:50%;box-shadow:0 0 0 9px rgba(255,255,255,.1)}.demo-webinar-art b{position:absolute;inset-inline-end:8px;inset-block-end:6px;font-size:.48rem}.demo-webinar-card>small{color:#d7ccff;font-size:.49rem}.demo-webinar-card h3{margin:0;font-size:.73rem;line-height:1.5}.demo-webinar-card p{margin:0;color:#ccc5df;font-size:.55rem}.demo-webinar-card button{min-height:34px;background:#fff;color:#292340}.demo-course-list{display:grid;align-content:center;gap:5px}.demo-course-list>article{display:grid;grid-template-columns:27px 1fr auto;align-items:center;gap:7px;padding:9px;border:1px solid rgba(40,35,65,.1);border-radius:10px;background:rgba(255,255,255,.7)}.demo-course-list>article>span{color:var(--demo-primary-text,var(--demo-primary));font-size:.57rem;font-weight:900}.demo-course-list>article>div{display:grid;gap:2px}.demo-course-list small{color:#777;font-size:.47rem}.demo-course-list b{font-size:.62rem}.demo-course-list>article>strong{color:var(--demo-primary-text,var(--demo-primary))}
.demo-jewel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.demo-jewel-card{padding:8px;border:1px solid rgba(147,112,48,.2);border-radius:14px;background:rgba(255,255,255,.72)}.demo-jewel-art{position:relative;display:grid;place-items:center;min-height:139px;border-radius:10px;background:radial-gradient(ellipse at 50% 60%,#44382c,#211d1a 72%);color:#d8b462;overflow:hidden}.demo-jewel-necklace{background:radial-gradient(ellipse at 50% 60%,#34332b,#1b1c19 72%);color:#c9b77d}.demo-jewel-art svg{position:relative;z-index:1;width:78%;height:112px;filter:drop-shadow(0 8px 10px rgba(0,0,0,.42));transition:transform .32s ease}.demo-jewel-card:hover .demo-jewel-art svg{transform:translateY(-3px) scale(1.035)}.demo-scene-jewelry{background:linear-gradient(135deg,#fbf8f0,#f3ecde)}.demo-scene-jewelry .demo-scene-heading small,.demo-scene-jewelry .demo-scene-heading a{color:#89682e}
.demo-product-card>button,.demo-jewel-card>button,.demo-corporate-lead>button,.demo-appointment>button,.demo-learning-grid button,.demo-case-copy>button{min-height:42px;padding:8px 11px;border:1px solid color-mix(in srgb,var(--demo-primary) 28%,#fff);border-radius:9px;background:#fff;color:var(--demo-primary-text,var(--demo-primary));font:inherit;font-size:.65rem;font-weight:900;cursor:pointer;transition:transform .18s ease,background .18s ease,color .18s ease}.demo-product-card>button:hover,.demo-jewel-card>button:hover,.demo-corporate-lead>button:hover,.demo-appointment>button:hover,.demo-learning-grid button:hover,.demo-case-copy>button:hover{transform:translateY(-2px);background:var(--demo-primary);color:var(--demo-on-primary,#fff)}.demo-corporate-lead>button{justify-self:start;background:var(--demo-on-primary,#fff);color:var(--demo-primary-text,var(--demo-primary))}.demo-learning-grid button{width:100%;text-align:start}.demo-learning-grid button>span:nth-child(2){display:grid;gap:3px}.demo-learning-grid button>span:nth-child(2) small,.demo-learning-grid button>span:nth-child(2) b{font:inherit}.demo-jewelry-note{margin:10px 0 0;color:#6f6759;font-size:.58rem;line-height:1.7;text-align:center}

@media(max-width:760px){
  .demo-editor-strip{grid-template-columns:1fr auto;gap:12px;padding:12px}.demo-quick-style{grid-column:1/-1}.demo-live-edit-feedback{grid-column:1/-1}.demo-open-config{display:flex;grid-column:1/-1}
.demo-config-backdrop{position:fixed;z-index:499;inset:0;width:100%;height:100%;border:0;background:rgba(11,18,32,.44);backdrop-filter:blur(3px)}.demo-config-backdrop[hidden]{display:none}
  .demo-config{position:relative;z-index:12;inset:auto;max-height:none;margin:0 10px 12px;padding:10px 14px;border-radius:16px;box-shadow:var(--shadow-sm)}
  .demo-config-mobile-toggle{margin:0;padding:5px 0 9px;border-bottom:0}.demo-config-grip{display:none}.demo-config-mobile-toggle b{padding:0}.demo-config-toggle-icon{margin-inline-start:auto}
  .demo-config [data-config-body]{display:none;max-height:0;overflow:hidden}.demo-config.is-mobile-open{position:fixed;z-index:500;inset-inline:10px;inset-block-end:calc(var(--mobile-tabbar-height,72px) + env(safe-area-inset-bottom,0px) + 8px);max-height:calc(84dvh - env(safe-area-inset-top,0px));margin:0;padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px));border-radius:22px 22px 18px 18px;box-shadow:0 18px 60px rgba(11,18,32,.24);overflow-y:auto;overscroll-behavior:contain;transition:max-height .25s cubic-bezier(.2,.8,.2,1),transform .25s cubic-bezier(.2,.8,.2,1)}.demo-config.is-mobile-open [data-config-body]{display:block;max-height:calc(84dvh - 116px);overflow-y:auto;padding-bottom:5px;animation:demo-config-reveal .24s ease both}.demo-config>button[data-config-toggle]{position:relative}.demo-config [data-config-body]>header{padding-top:2px}.demo-config [data-config-body]>header h2{font-size:1.12rem}.demo-config [data-config-body]>form{margin-top:13px}
  .demo-config.is-mobile-open .demo-config-mobile-toggle{border-bottom:1px solid var(--color-border)}.demo-config.is-mobile-open .demo-config-grip{inset-block-start:0}.demo-config .demo-option-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-config .demo-theme-options{grid-template-columns:1fr}.demo-config fieldset{margin:16px 0}.demo-config form{margin-top:12px}.demo-config .demo-field input{min-height:48px}
}
@media(max-width:520px){.demo-scene{margin:4px 10px 18px;padding:13px;border-radius:15px}.demo-scene-heading{grid-template-columns:1fr;gap:5px}.demo-scene-heading a{justify-self:start}.demo-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-product-third{display:none}.demo-dining-grid,.demo-case-card,.demo-corporate-grid,.demo-clinic-grid,.demo-learning-grid{grid-template-columns:1fr}.demo-case-art{min-height:145px}.demo-jewel-grid{gap:8px}.demo-jewel-card{padding:6px}.demo-jewel-art{min-height:112px}.demo-jewel-art svg{height:96px}.demo-dish-card{grid-template-columns:60px 1fr auto}.demo-dish-art{width:60px;height:64px}.demo-editor-strip{grid-template-columns:1fr auto}.demo-quick-group>div{gap:4px}}
@media(prefers-reduced-motion:reduce){.demo-scene,.demo-live-edit-feedback{animation:none}.demo-jewel-art svg{transition:none}}
.demo-quick-swatch.tone-gold{background:linear-gradient(135deg,#825f23,#dfbd70)}
.demo-theme-options .tone-gold{background:linear-gradient(135deg,#825f23,#dfbd70)}
.demo-site-jewelry{--demo-primary:#825f23;--demo-accent:#dfbd70;--demo-soft:#f6efdf;--demo-on-primary:#20180d}
.demo-card[data-category="jewelry"] .demo-card-scene{background:radial-gradient(circle at 68% 42%,#e2c16e 0 7%,transparent 8%),radial-gradient(circle at 40% 50%,#d4b05f 0 18%,transparent 19%),linear-gradient(120deg,#29251f,#5f4b2d)}
.demo-card[data-category="clinic"] .demo-card-scene{background:linear-gradient(145deg,#dcebe2,#6f9984)}.demo-card[data-category="restaurant"] .demo-card-scene{background:radial-gradient(ellipse at 70% 45%,#e5bc73 0 12%,transparent 13%),linear-gradient(125deg,#344b3d,#c46a3f)}.demo-card[data-category="education"] .demo-card-scene{background:radial-gradient(circle at 70% 35%,#ffc478 0 6%,transparent 7%),linear-gradient(125deg,#272542,#7765a4)}.demo-card[data-category="portfolio"] .demo-card-scene{background:linear-gradient(135deg,#2b3545,#d8a579 55%,#647a68)}.demo-card[data-category="corporate"] .demo-card-scene{background:linear-gradient(135deg,#18283c,#52788b)}
.demo-action-status{margin:10px 0 0;padding:9px 11px;border-inline-start:3px solid var(--demo-accent);border-radius:8px;background:var(--demo-soft);color:#45434a;font-size:.63rem;line-height:1.65}.demo-action-status[hidden]{display:none!important}
body.demo-config-open{overflow:hidden}
.demo-appointment [aria-pressed="true"]{border-color:#416c59;background:#416c59;color:#fff;box-shadow:0 0 0 2px rgba(65,108,89,.18)}

/* Category demos are working prototypes, not static mock cards. */
.demo-scene [hidden]{display:none!important}
.demo-shop-toolbar{display:grid;grid-template-columns:minmax(150px,1fr) auto auto;align-items:end;gap:12px;margin:0 0 14px;padding:12px;border:1px solid rgba(30,30,35,.1);border-radius:14px;background:rgba(255,255,255,.72)}
.demo-shop-search,.demo-party-size,.demo-priority-select,.demo-jewel-options label{display:grid;gap:5px;color:#5c5c64;font-size:.65rem;font-weight:800}
.demo-shop-search input,.demo-party-size select,.demo-priority-select select,.demo-jewel-options select{width:100%;min-height:42px;padding:8px 10px;border:1px solid #d5d6dc;border-radius:9px;background:#fff;color:#24252b;font:inherit;font-size:.68rem}
.demo-filter-row{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}.demo-filter-row button,.demo-consultation-options button,.demo-appointment-days button,.demo-appointment-slots button{min-height:40px;padding:8px 12px;border:1px solid rgba(39,43,52,.16);border-radius:99px;background:rgba(255,255,255,.82);color:#3c3d44;font:inherit;font-size:.65rem;font-weight:850;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease}.demo-filter-row button:hover,.demo-consultation-options button:hover,.demo-appointment-days button:hover,.demo-appointment-slots button:hover{transform:translateY(-1px);border-color:var(--demo-primary)}.demo-filter-row button[aria-pressed="true"],.demo-consultation-options button[aria-pressed="true"],.demo-appointment-days button[aria-pressed="true"],.demo-appointment-slots button[aria-pressed="true"]{border-color:var(--demo-primary);background:var(--demo-primary);color:var(--demo-on-primary,#fff);box-shadow:0 0 0 2px color-mix(in srgb,var(--demo-primary) 17%,transparent)}
.demo-cart-preview{display:flex;align-items:center;gap:8px;min-height:42px;padding:7px 12px;border:1px solid color-mix(in srgb,var(--demo-primary) 28%,#fff);border-radius:11px;background:var(--demo-soft);font-size:.68rem;font-weight:850}.demo-cart-preview b{display:grid;place-items:center;min-width:26px;height:26px;border-radius:50%;background:var(--demo-primary);color:var(--demo-on-primary,#fff)}
.demo-product-card>p,.demo-case-copy details p,.demo-course-list article>div p{margin:0;color:#777;font-size:.61rem;line-height:1.65}.demo-product-card>button.demo-add-button{margin-top:6px;background:var(--demo-primary);color:var(--demo-on-primary,#fff)}.demo-empty-filter{grid-column:1/-1;padding:15px;border:1px dashed var(--color-border);border-radius:12px;color:var(--color-text-muted);font-size:.75rem;text-align:center}
.demo-checkout-preview,.demo-learning-payment,.demo-jewel-payment,.demo-clinic-payment{display:grid;gap:5px;margin:13px 0;padding:13px 15px;border-inline-start:3px solid var(--demo-accent);border-radius:10px;background:var(--demo-soft)}.demo-checkout-preview span,.demo-learning-payment strong,.demo-jewel-payment b,.demo-clinic-payment b{color:var(--demo-primary-text,var(--demo-primary));font-size:.59rem;font-weight:950;letter-spacing:.08em}.demo-checkout-preview b,.demo-learning-payment p,.demo-jewel-payment p,.demo-clinic-payment span{margin:0;color:#46464d;font-size:.68rem;line-height:1.75}.demo-checkout-preview small{color:#73737a;font-size:.6rem}
.demo-menu-panel{margin:0 0 13px;padding:12px;border:1px solid rgba(31,44,36,.1);border-radius:15px;background:rgba(255,255,255,.72)}.demo-menu-heading{display:flex;justify-content:space-between;align-items:end;gap:10px}.demo-menu-heading small,.demo-menu-heading b,.demo-learning-resources-title small,.demo-learning-resources-title b{display:block}.demo-menu-heading small,.demo-learning-resources-title small{color:var(--demo-primary-text,var(--demo-primary));font-size:.59rem;font-weight:950;letter-spacing:.09em}.demo-menu-heading b,.demo-learning-resources-title b{margin-top:4px;font-size:.85rem}.demo-menu-heading>span{color:#777;font-size:.58rem}.demo-menu-items{display:grid;gap:8px}.demo-drink-art,.demo-dessert-art{position:relative;display:grid;place-items:center;width:76px;height:76px;border-radius:14px;background:radial-gradient(circle at 50% 45%,#c8e2a6 0 17%,#87a56b 18% 24%,transparent 25%),linear-gradient(145deg,#e6f0d9,#b2c39c)}.demo-drink-art span,.demo-dessert-art span{position:absolute;inset-block-start:5px;inset-inline-start:6px;color:#315343;font-size:.48rem;font-weight:950}.demo-drink-art i{width:26px;height:31px;border:2px solid rgba(255,255,255,.9);border-radius:4px 4px 10px 10px}.demo-dessert-art{background:radial-gradient(ellipse at 50% 57%,#f2c27c 0 24%,#b37c4e 25% 30%,transparent 31%),linear-gradient(145deg,#fbecdc,#dbbea0)}.demo-dessert-art i{width:37px;height:9px;border-radius:50%;background:#fff6e9}.demo-dish-card{display:grid;grid-template-columns:76px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px;border:1px solid rgba(35,35,40,.08);border-radius:12px;background:#fff}.demo-dish-card>div:nth-child(2){display:grid;gap:3px}.demo-dish-card small{color:var(--demo-primary-text,var(--demo-primary));font-size:.55rem;font-weight:900}.demo-dish-card b{font-size:.71rem}.demo-dish-card p{margin:0;color:#777;font-size:.58rem;line-height:1.5}.demo-dish-card>strong{font-size:.65rem;white-space:nowrap}.demo-reservation-choices,.demo-appointment-days,.demo-appointment-slots{display:flex;flex-wrap:wrap;gap:6px}.demo-reservation-card{display:grid;gap:9px;margin:13px 0;padding:14px;border-radius:14px;background:var(--demo-primary);color:var(--demo-on-primary,#fff)}.demo-reservation-card>b{font-size:.9rem}.demo-reservation-card>small{font-size:.58rem;opacity:.82}.demo-party-size{max-width:230px}.demo-inline-note,.demo-group-choice-summary,.demo-jewel-summary{margin:2px 0;padding:9px 11px;border-radius:9px;background:rgba(255,255,255,.72);color:#4b4b52;font-size:.63rem;line-height:1.65}
.demo-event-note{display:grid;gap:4px;margin:11px 0;padding:12px;border:1px dashed color-mix(in srgb,var(--demo-primary) 32%,#fff);border-radius:11px}.demo-event-note span{color:var(--demo-primary-text,var(--demo-primary));font-size:.56rem;font-weight:950}.demo-event-note b{font-size:.73rem}.demo-event-note small{color:#76767c;font-size:.6rem}
.demo-portfolio-filters{margin:0 0 12px}.demo-portfolio-grid{display:grid;gap:12px}.demo-case-card{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}.demo-case-art-digital{background:radial-gradient(circle at 70% 35%,#f1c58e 0 4%,transparent 5%),linear-gradient(135deg,#273547,#647b71)}.demo-case-art-identity{background:radial-gradient(circle at 45% 45%,#f2c5a6 0 14%,transparent 15%),linear-gradient(130deg,#513a44,#db9a73 56%,#ebd2b0)}.demo-case-art-space{background:radial-gradient(circle at 50% 55%,#eac594 0 15%,transparent 16%),linear-gradient(140deg,#35483e,#c88f69)}.demo-case-copy details{padding:8px;border-radius:9px;background:rgba(255,255,255,.08);color:#fff}.demo-case-copy summary{cursor:pointer;font-size:.62rem;font-weight:850}.demo-case-copy details p{margin-top:7px;color:#e2e5eb}.demo-portfolio-grid .demo-case-copy>button{justify-self:start}
.demo-process-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:4px}.demo-process-steps span{display:grid;gap:3px;padding:8px;border:1px solid rgba(255,255,255,.27);border-radius:8px;font-size:.58rem}.demo-process-steps b{color:var(--demo-accent);font-size:.55rem}.demo-service-list>article{grid-template-columns:24px minmax(0,1fr) auto;align-items:start}.demo-service-list>article>div{display:grid;gap:3px}.demo-service-list>article p{margin:0;color:#75757b;font-size:.58rem;line-height:1.55}.demo-service-list details{font-size:.56rem}.demo-service-list summary{min-height:36px;padding:8px;cursor:pointer;font-weight:850}.demo-service-list details p{max-width:240px;padding:5px 9px}.demo-consultation{display:grid;gap:10px;margin-top:14px;padding:14px;border:1px solid color-mix(in srgb,var(--demo-primary) 22%,#fff);border-radius:14px;background:var(--demo-soft)}.demo-consultation>div:first-child small,.demo-consultation>div:first-child b{display:block}.demo-consultation>div:first-child small{color:var(--demo-primary-text,var(--demo-primary));font-size:.58rem;font-weight:950}.demo-consultation>div:first-child b{margin-top:4px;font-size:.79rem}.demo-consultation-options{display:flex;flex-wrap:wrap;gap:6px}.demo-consultation-options [data-demo-group-summary]{flex-basis:100%;margin:2px 0;color:#666;font-size:.62rem}.demo-priority-select{max-width:250px}
.demo-clinic-team,.demo-appointment{display:grid;gap:10px;margin:0 0 13px;padding:13px;border:1px solid rgba(36,84,68,.13);border-radius:14px;background:rgba(255,255,255,.72)}.demo-clinic-team>div:first-child small,.demo-clinic-team>div:first-child b{display:block}.demo-clinic-team>div:first-child small{color:#416c59;font-size:.57rem;font-weight:950}.demo-clinic-team>div:first-child b{margin-top:4px;font-size:.79rem}.demo-practitioner-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.demo-practitioner{align-content:start;justify-items:start;min-width:0}.demo-practitioner-avatar-alt{background:#e8e0ef;color:#674d76}.demo-practitioner button{min-height:40px;padding:7px 10px;border:1px solid #a7c7b6;border-radius:9px;background:#fff;color:#345e4d;font:inherit;font-size:.6rem;font-weight:850;cursor:pointer}.demo-appointment-label{font-size:.65rem}.demo-appointment .demo-party-size{margin-top:5px}.demo-clinic-safety,.demo-jewelry-trust{display:grid;gap:5px;margin:11px 0;padding:12px;border-radius:11px;background:#eff4f1}.demo-clinic-safety>span,.demo-jewelry-trust>b{color:#38614e;font-size:.58rem;font-weight:950;letter-spacing:.06em}.demo-clinic-safety p{margin:0;color:#536259;font-size:.63rem;line-height:1.7}.demo-clinic-payment{margin-top:10px}
.demo-course-feature{display:grid;grid-template-columns:.72fr 1.28fr;gap:12px}.demo-course-list{align-content:start}.demo-course-list>article{align-items:start;grid-template-columns:28px minmax(0,1fr)}.demo-course-list>article>div{display:grid;gap:5px}.demo-course-list>article details{grid-column:1/-1;padding:8px 0;border-top:1px solid rgba(30,30,35,.1)}.demo-course-list>article summary{cursor:pointer;color:#4f4e59;font-size:.62rem;font-weight:850}.demo-course-list>article ul{display:grid;gap:3px;margin:7px 0 0;padding-inline-start:18px;color:#73737a;font-size:.59rem}.demo-course-list>article button{grid-column:1/-1;min-height:40px;padding:7px 10px;border:1px solid color-mix(in srgb,var(--demo-primary) 26%,#fff);border-radius:9px;background:#fff;color:var(--demo-primary-text,var(--demo-primary));font:inherit;font-size:.61rem;font-weight:900;cursor:pointer}.demo-learning-resources{margin:14px 0;padding:13px;border:1px solid rgba(40,35,65,.12);border-radius:14px;background:rgba(255,255,255,.73)}.demo-resource-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}.demo-resource-grid article{display:grid;align-content:start;gap:6px;padding:10px;border-radius:11px;background:#f3f1f7}.demo-resource-grid article>span{color:#5b4d83;font-size:1.1rem}.demo-resource-grid b{font-size:.68rem}.demo-resource-grid small{color:#73717b;font-size:.57rem;line-height:1.55}.demo-resource-grid button{min-height:40px;padding:7px;border:1px solid #c9c2d7;border-radius:8px;background:#fff;color:#3f3758;font:inherit;font-size:.58rem;font-weight:850;cursor:pointer}.demo-learning-note{color:#6d6b75;font-size:.6rem;line-height:1.65}.demo-learning-payment p{margin-top:2px}
.demo-jewel-intro{display:grid;grid-template-columns:1fr .8fr;gap:14px;align-items:center;margin:11px 0;padding:13px;border-inline-start:3px solid var(--demo-accent);border-radius:11px;background:rgba(255,255,255,.75)}.demo-jewel-intro small,.demo-jewel-intro b{display:block}.demo-jewel-intro small{color:#89682e;font-size:.58rem;font-weight:950}.demo-jewel-intro b{margin-top:4px;font-size:.8rem}.demo-jewel-intro p{margin:0;color:#696257;font-size:.63rem;line-height:1.7}.demo-jewel-card>p{display:grid;gap:5px;margin:7px 0;color:#777;font-size:.61rem;line-height:1.6}.demo-jewel-card>p strong{color:#795c2c;font-size:.62rem}.demo-jewel-builder{display:grid;gap:10px;margin:14px 0;padding:14px;border:1px solid rgba(147,112,48,.2);border-radius:15px;background:rgba(255,255,255,.78)}.demo-jewel-builder header small,.demo-jewel-builder header b{display:block}.demo-jewel-builder header small{color:#89682e;font-size:.57rem;font-weight:950}.demo-jewel-builder header b{margin-top:4px;font-size:.84rem}.demo-jewel-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.demo-jewel-builder>p{margin:0;color:#746c60;font-size:.6rem;line-height:1.7}.demo-jewel-summary{background:#f3ebda;color:#574a34}
@media(max-width:620px){.demo-shop-toolbar{grid-template-columns:1fr auto}.demo-shop-search{grid-column:1/-1}.demo-cart-preview{grid-column:1/-1;justify-self:start}.demo-dish-card{grid-template-columns:58px minmax(0,1fr);gap:8px}.demo-dish-card>strong{grid-column:2;grid-row:1;justify-self:start;align-self:end}.demo-dish-art,.demo-drink-art,.demo-dessert-art{width:58px;height:62px}.demo-portfolio-grid .demo-case-card{grid-template-columns:1fr}.demo-case-art{min-height:135px}.demo-practitioner-grid{grid-template-columns:1fr}.demo-course-feature{grid-template-columns:1fr}.demo-resource-grid{grid-template-columns:1fr}.demo-jewel-intro{grid-template-columns:1fr}.demo-jewel-options{grid-template-columns:1fr}.demo-service-list>article{grid-template-columns:22px minmax(0,1fr)}.demo-process-steps span{padding:6px;font-size:.53rem}}
@media(prefers-reduced-motion:reduce){.demo-filter-row button,.demo-consultation-options button,.demo-appointment-days button,.demo-appointment-slots button{transition:none}}

/* On a phone, use the phone's real viewport instead of nesting another narrow
   device mock inside it. The desktop layout keeps its framed mobile preview. */
@media(max-width:760px){
  .demo-preview{padding-inline:14px;padding-block-start:12px}
  .demo-breadcrumb{margin-bottom:12px;font-size:.68rem}
  .demo-preview-intro{gap:10px;margin-bottom:12px}
  .demo-preview-intro h1{margin:5px 0;font-size:clamp(1.55rem,7vw,2rem);line-height:1.18}
  .demo-preview-intro p{font-size:.79rem;line-height:1.65}
  .demo-preview-intro aside{padding:9px 11px;border-radius:0 11px 11px 0}
  .demo-preview-intro aside>span{font-size:.61rem}
  .demo-preview-intro aside strong{margin:3px 0;font-size:.75rem;line-height:1.5}
  .demo-preview-intro aside small{display:none}
  .demo-workbench{margin-inline:-8px;gap:9px}
  .demo-stage-wrap{display:flex;flex-direction:column;overflow:visible;border-radius:17px 17px 0 0}
  .demo-stage-toolbar{gap:8px;padding:11px 13px}
  .demo-stage-toolbar strong{font-size:.77rem}
  .demo-stage-toolbar{order:0}
  .demo-editor-strip{order:1}
  .demo-stage{order:2}
  .demo-stage[data-view="mobile"]{min-height:0;padding:0}
  .demo-stage[data-view="mobile"] .demo-site{width:100%;max-width:none;border-inline:0;border-radius:0;box-shadow:none}
  .demo-stage[data-view="mobile"] .demo-site>main{padding:30px 17px}
  .demo-stage[data-view="mobile"] .demo-site>main h1,.demo-stage[data-view="mobile"] .demo-site>main h2{font-size:1.72rem;line-height:1.2}
  .demo-stage[data-view="mobile"] .demo-site-sections{padding:13px}
  .demo-stage[data-view="mobile"] .demo-site-sections article{min-height:0;padding:11px}
  .demo-stage[data-view="mobile"] .demo-site>footer{padding:13px}
  .demo-editor-strip{display:grid;grid-template-columns:minmax(0,1fr);min-height:0;gap:9px;padding:12px 13px;border:1px solid var(--color-border);border-radius:0 0 14px 14px;background:var(--color-surface)}
  .demo-editor-strip>div:first-child small,.demo-editor-strip>div:first-child strong{display:block}
  .demo-editor-strip>div:first-child small{color:var(--color-brand-orange-text);font-size:.61rem;font-weight:900}
  .demo-editor-strip>div:first-child strong{margin-top:2px;font-size:.79rem}
  .demo-editor-strip>.demo-quick-group,.demo-editor-strip>.demo-quick-style,.demo-editor-strip>.demo-live-edit-feedback{display:none}
  .demo-open-config{position:static;z-index:auto;inset:auto;display:flex;width:100%;min-height:48px;grid-column:auto;justify-content:center;border-color:var(--demo-primary,var(--color-brand-orange));background:var(--demo-primary,var(--color-brand-orange));box-shadow:0 5px 14px rgba(20,20,28,.12);color:var(--demo-on-primary,#fff);font-size:.75rem}
  .demo-config{margin-inline:8px}
}
@media(max-width:520px){
  .demo-preview{padding-inline:12px}
  .demo-preview-intro aside{display:none}
  .demo-workbench{margin-inline:-6px}
  .demo-stage-toolbar{align-items:stretch}
  .demo-stage-toolbar>div:first-child{max-width:100%}
  .demo-stage[data-view="mobile"] .demo-site>header{padding:12px 15px}
  .demo-stage[data-view="mobile"] .demo-site>main{padding:27px 15px}
  .demo-config{margin-inline:6px}
}