/* ===== GoshenWebX demos: shared bar + gallery ===== */
.gx-bar{background:#07110e;background-image:linear-gradient(rgba(26,158,114,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(26,158,114,.08) 1px,transparent 1px);background-size:28px 28px;border-bottom:1px solid rgba(26,158,114,.45);font-family:'IBM Plex Sans',system-ui,sans-serif;position:sticky;top:0;z-index:50}
.gx-bar-in{max-width:1240px;margin:0 auto;padding:10px 20px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.gx-tag{font:500 11px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;color:#3ddba0;border:1px solid rgba(61,219,160,.55);padding:6px 9px}
.gx-note{color:#9fb8ae;font-size:13px;line-height:1.4;flex:1 1 280px}
.gx-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.gx-links form{margin:0}
.gx-links a,.gx-links button{font:500 13px/1 'IBM Plex Sans',sans-serif;color:#d6e6df;background:transparent;border:1px solid rgba(214,230,223,.28);padding:9px 12px;cursor:pointer;text-decoration:none;border-radius:0;transition:border-color .15s,color .15s}
.gx-links a:hover,.gx-links button:hover{border-color:#3ddba0;color:#fff}
.gx-links a.gx-hot{background:linear-gradient(135deg,#1A9E72,#0f7a58);border-color:#1A9E72;color:#fff}

/* ----- gallery page ----- */
.dm-page{background:#07110e;color:#d6e6df;font-family:'IBM Plex Sans',system-ui,sans-serif;position:relative;overflow:hidden;
  background-image:radial-gradient(ellipse 70% 40% at 50% 0%,rgba(26,158,114,.22),transparent 70%),linear-gradient(rgba(26,158,114,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(26,158,114,.07) 1px,transparent 1px);background-size:auto,44px 44px,44px 44px}
.dm-wrap{max-width:1200px;margin:0 auto;padding:0 28px}
.dm-hero{padding:76px 0 40px;text-align:center}
.dm-page .dm-eyebrow{display:inline-block;font:500 12px/1 'IBM Plex Mono',monospace;letter-spacing:.16em;color:#3ddba0 !important;border:1px solid rgba(61,219,160,.5);background:rgba(26,158,114,.08);padding:10px 14px;margin:0 0 22px}
.dm-page h1.dm-h1{font:700 clamp(34px,5.4vw,58px)/1.08 'IBM Plex Sans',sans-serif !important;color:#fff !important;margin:0 0 6px !important;letter-spacing:-.02em}
.dm-page h1.dm-h1 em{display:block;color:#3ddba0;font-style:italic;font-weight:600}
.dm-page .dm-lead{max-width:640px;margin:18px auto 0;color:#a7c1b6 !important;font-size:17px;line-height:1.65}
.dm-points{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:28px 0 0;padding:0}
.dm-points li{font:500 12px/1 'IBM Plex Mono',monospace;color:#cfe3da;border:1px solid rgba(26,158,114,.4);background:rgba(255,255,255,.03);padding:10px 13px;letter-spacing:.04em}
.dm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:26px;padding:34px 0 70px}
.dm-card{display:flex;flex-direction:column;background:rgba(255,255,255,.035);border:1px solid rgba(26,158,114,.32);transition:border-color .18s,transform .18s,box-shadow .18s}
.dm-card:hover{border-color:#3ddba0;transform:translateY(-3px);box-shadow:0 14px 38px rgba(0,0,0,.45)}
.dm-thumb{display:block;position:relative;aspect-ratio:400/260;overflow:hidden;border-bottom:1px solid rgba(26,158,114,.32);background:#0d1b17}
.dm-thumb svg{display:block;width:100%;height:100%}
.dm-card.soon .dm-thumb svg{opacity:.55;filter:saturate(.6)}
.dm-ribbon{position:absolute;top:12px;left:12px;font:500 11px/1 'IBM Plex Mono',monospace;letter-spacing:.12em;padding:7px 9px;background:#1A9E72;color:#fff}
.dm-card.soon .dm-ribbon{background:#0b1512;color:#9fb8ae;border:1px solid rgba(159,184,174,.5)}
.dm-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.dm-pill{align-self:flex-start;font:500 11px/1 'IBM Plex Mono',monospace;letter-spacing:.12em;color:#3ddba0;border:1px solid rgba(61,219,160,.5);padding:6px 9px;background:rgba(26,158,114,.08)}
.dm-page .dm-body h3{font:600 21px/1.25 'IBM Plex Sans',sans-serif !important;color:#fff !important;margin:2px 0 0 !important}
.dm-page .dm-body p{color:#a7c1b6 !important;font-size:14.5px;line-height:1.6;margin:0 !important}
.dm-tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 0;padding:0}
.dm-tags li{font:400 12px/1 'IBM Plex Sans',sans-serif;color:#8fb0a3;border:1px solid rgba(143,176,163,.3);padding:6px 8px}
.dm-actions{margin-top:auto;padding-top:14px}
.dm-page a.dm-btn,.dm-page span.dm-btn{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;width:100%;font:600 15px/1 'IBM Plex Sans',sans-serif;color:#fff !important;text-decoration:none;background:linear-gradient(135deg,#1A9E72,#0f7a58);border:0;border-radius:0;cursor:pointer}
.dm-page a.dm-btn:hover{filter:brightness(1.1)}
.dm-page span.dm-btn.off{background:transparent;border:1px dashed rgba(159,184,174,.45);color:#8fb0a3 !important;cursor:default}
.dm-cta{border:1px solid rgba(26,158,114,.45);background:rgba(26,158,114,.07);padding:34px 30px;margin:0 0 80px;display:flex;flex-wrap:wrap;gap:18px 30px;align-items:center;justify-content:space-between}
.dm-page .dm-cta h2{font:600 24px/1.3 'IBM Plex Sans',sans-serif !important;color:#fff !important;margin:0 0 6px !important}
.dm-page .dm-cta p{color:#a7c1b6 !important;margin:0 !important;font-size:15px}
.dm-page .dm-cta a{width:auto;padding:0 28px;flex:0 0 auto}
@media (max-width:600px){.dm-wrap{padding:0 16px}.dm-grid{grid-template-columns:1fr}.dm-hero{padding:48px 0 22px}.gx-note{display:none}}

/* ===== IBM FONT LOCK (gallery) ===== */
html body .dm-page, html body .dm-page h1, html body .dm-page h2, html body .dm-page h3,
html body .dm-page p, html body .dm-page li, html body .dm-page a, html body .dm-page span, html body .dm-page em {
  font-family:'IBM Plex Sans',system-ui,-apple-system,sans-serif !important; -webkit-font-smoothing:antialiased; text-transform:none;
}
html body .dm-page h1.dm-h1 em { font-style:italic !important; font-weight:600 !important; }
html body .dm-page .dm-eyebrow, html body .dm-page .dm-pill, html body .dm-page .dm-ribbon, html body .dm-page .dm-points li {
  font-family:'IBM Plex Mono','SF Mono',monospace !important; text-transform:uppercase;
}

/* ===== home page demo strip ===== */
html body .dmh{padding:96px 0;border-top:1px solid rgba(26,158,114,.35);border-bottom:1px solid rgba(26,158,114,.35)}
html body .dmh .dmh-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
html body .dmh .dm-eyebrow{display:inline-block;margin:0 0 22px}
html body .dmh h2.dmh-h2{font:700 clamp(32px,4.2vw,52px)/1.1 'IBM Plex Sans',sans-serif !important;color:#fff !important;margin:0 0 18px !important;letter-spacing:-.02em;padding:0}
html body .dmh h2.dmh-h2 em{display:block;color:#3ddba0;font-style:italic;font-weight:600}
html body .dmh .dmh-copy>p{font-size:17px;line-height:1.65;color:#a7c1b6 !important;margin:0 0 22px !important;max-width:520px}
html body .dmh .dmh-list{list-style:none;margin:0 0 30px;padding:0}
html body .dmh .dmh-list li{position:relative;padding:0 0 0 22px;margin:0 0 10px;color:#cfe3da;font-size:15.5px;line-height:1.5}
html body .dmh .dmh-list li:before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;background:#3ddba0}
html body .dm-page a.dmh-btn{display:inline-flex;width:auto;padding:0 32px}
html body .dmh a.dmh-card{text-decoration:none;color:inherit}
@media (max-width:860px){html body .dmh{padding:60px 0}html body .dmh .dmh-grid{grid-template-columns:1fr;gap:34px}}

/* ===== uploaded photos ===== */
.dm-thumb img{display:block;width:100%;height:100%;object-fit:cover}

/* gwx-demos-light: light version of the demos page and bar; dark mode keeps the original look */
html:not(.site-dark) .gx-bar { background:#ffffff; background-image:none; border-bottom:1px solid #d5e2dc; }
html:not(.site-dark) .gx-tag { color:#0f7a58; border-color:rgba(15,122,88,.45); }
html:not(.site-dark) .gx-note { color:#5d746b; }
html:not(.site-dark) .gx-links a, html:not(.site-dark) .gx-links button { color:#2b4339; border-color:rgba(11,61,46,.22); }
html:not(.site-dark) .gx-links a:hover, html:not(.site-dark) .gx-links button:hover { border-color:#1A9E72; color:#0B3D2E; }
html:not(.site-dark) .gx-links a.gx-hot { color:#fff; }
html:not(.site-dark) .dm-page { background:#f4f8f6; color:#2b4339; background-image:radial-gradient(ellipse 70% 40% at 50% 0%, rgba(26,158,114,.10), transparent 70%); }
html:not(.site-dark) .dm-page .dm-eyebrow { color:#0f7a58 !important; border-color:rgba(15,122,88,.4); background:rgba(26,158,114,.08); }
html:not(.site-dark) .dm-page h1.dm-h1 { color:#0B3D2E !important; }
html:not(.site-dark) .dm-page h1.dm-h1 em { color:#0f7a58; }
html:not(.site-dark) .dm-page .dm-lead { color:#5d746b !important; }
html:not(.site-dark) .dm-points li { color:#2b4339; border-color:rgba(26,158,114,.35); background:#fff; }
html:not(.site-dark) .dm-card { background:#fff; border-color:#d5e2dc; }
html:not(.site-dark) .dm-card:hover { border-color:#1A9E72; box-shadow:0 14px 30px -18px rgba(11,61,46,.35); }
html:not(.site-dark) .dm-card h2, html:not(.site-dark) .dm-card h3, html:not(.site-dark) .dm-card .dm-title { color:#0B3D2E !important; }
html:not(.site-dark) .dm-card p { color:#5d746b !important; }
html:not(.site-dark) .dm-tags li { color:#5d746b; border-color:rgba(11,61,46,.22); }
html:not(.site-dark) .dm-page span.dm-btn.off { color:#5d746b !important; border-color:rgba(11,61,46,.3); }
/* gwx-demos-cta-light: readable call-to-action box in light mode */
html:not(.site-dark) .dm-cta { background:#ffffff; border-color:#b8dfc9; }
html:not(.site-dark) .dm-page .dm-cta h2 { color:#0B3D2E !important; }
html:not(.site-dark) .dm-page .dm-cta p { color:#5d746b !important; }
/* gwx-dmh-light: homepage Live Demos section in light mode */
html:not(.site-dark) body .dmh h2.dmh-h2 { color:#0B3D2E !important; }
html:not(.site-dark) body .dmh h2.dmh-h2 em { color:#0f7a58; }
html:not(.site-dark) body .dmh .dmh-copy > p { color:#5d746b !important; }
html:not(.site-dark) body .dmh .dmh-list li { color:#2b4339; }
html:not(.site-dark) body .dmh .dmh-list li:before { background:#1A9E72; }
html:not(.site-dark) body .dmh .dm-card,
html:not(.site-dark) body .dmh a.dmh-card,
html:not(.site-dark) body .dmh .dmh-slide .dmh-card { background:#ffffff !important; border-color:#d5e2dc !important; box-shadow:0 18px 40px -22px rgba(11,61,46,.35); }
html:not(.site-dark) body .dmh .dm-card h3,
html:not(.site-dark) body .dmh .dm-card h4,
html:not(.site-dark) body .dmh .dm-card .dm-title { color:#0B3D2E !important; }
html:not(.site-dark) body .dmh .dm-card p { color:#5d746b !important; }