@import url('/assets/brand/shapedsi-v1/workspace.css?v=01fb383d2dd5');

body.shaped-demo {
  --card: var(--panel); --card2: var(--panel2);
  --bg1: var(--panel); --bg2: var(--panel2);
  --text: var(--ink); --text1: var(--ink); --text2: var(--muted); --text3: var(--muted);
  --border: var(--line); --border-h: var(--line2);
  --forest: #633C1F; --forest-dim: #E9DBCB; --og: #E9DBCB;
  --accent: #633C1F; --accent-dk: #51331D; --accent-dim: #E9DBCB;
  --yellow: #8B6950; --yellow-dim: #EEE5D9; --gold: #8B6950;
  --green: #4D6A50; --gg: #E5ECE5; --green-dim: #E5ECE5;
  --red: #A43239; --red-dim: #F8E7E3;
  --blue: #526479; --blue-dim: #E7EDF1; --purple: #71566E;
  --fi: var(--fb); --fm: var(--fb);
  display: block !important; padding: 0 !important; text-align: left !important;
  background: var(--bg) !important; color: var(--ink) !important;
  min-height: 100svh; overflow-x: clip; font-size: 14px !important;
}
body.shaped-demo::before, body.shaped-demo::after { content: none !important; }
html:has(body.shaped-demo), body.shaped-demo { height: auto !important; overflow-y: auto !important; }
body.shaped-demo *, body.shaped-demo *::before, body.shaped-demo *::after { box-sizing: border-box; }
.shaped-demo .si-demo-header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 18px; padding: 22px 5vw; background: var(--panel); border-bottom: 1px solid var(--line);
  position: relative; z-index: 40; width: 100%; min-height: 88px;
}
.shaped-demo .si-demo-brand { display: flex; align-items: center; gap: 13px; color: var(--ink); text-decoration: none; }
.shaped-demo .si-demo-brand img { width: 40px; height: 40px; }
.shaped-demo .si-demo-brand span { font: 400 24px var(--fh); letter-spacing: .2em; }
.shaped-demo .si-demo-brand i { font-style: normal; letter-spacing: .1em; }
.shaped-demo .si-demo-header nav { display: flex; gap: 22px; flex-wrap: wrap; position: static !important; transform: none !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
.shaped-demo .si-demo-header nav a { color: var(--ink); text-decoration: none; font: 500 11px var(--fb); }
.shaped-demo .si-demo-intro { padding: 36px 5vw 32px; border-bottom: 1px solid var(--line); background: var(--panel2); }
.shaped-demo .si-demo-eyebrow { font: 500 10px/1.7 var(--fb); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.shaped-demo .si-demo-intro h1 { font: 400 clamp(30px, 3.2vw, 46px)/1.08 var(--fh) !important; text-transform: none !important; letter-spacing: -.025em !important; color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; margin: 0 0 14px !important; max-width: 1000px; text-wrap: balance; }
.shaped-demo .si-demo-intro > p:last-child { font: 400 12px/1.8 var(--fb); max-width: 680px; color: var(--muted); margin: 0; }
.shaped-demo .si-demo-footer { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 24px 5vw; background: var(--panel2); border-top: 1px solid var(--line); color: var(--muted); font: 400 11px/1.8 var(--fb); }
.shaped-demo .si-demo-footer a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.shaped-demo > .back-to-portal { display: none !important; }
.shaped-demo > nav { position: static !important; transform: none !important; left: auto !important; top: auto !important; flex-wrap: wrap; justify-content: center; border-radius: 0; width: 100%; box-shadow: none; background: var(--panel2) !important; border-color: var(--line) !important; padding: 16px 5vw !important; }
.shaped-demo :is(.hero-glow, .hero::before, .hero::after) { display: none !important; }
.shaped-demo .hero { min-height: 0 !important; padding: 36px 5vw !important; background: transparent !important; }
.shaped-demo .hero :is(h1, h2, .hero-tag, .hero-badge, .hero-sub, .hero-description) { color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; background-image: none !important; }
.shaped-demo :is(.topbar, .card, .panel, .stat, .kpi, .feature-card, .node, .funnel) { background-color: var(--panel) !important; border-color: var(--line) !important; color: var(--ink); }
.shaped-demo .topbar { flex-wrap: wrap; gap: 16px; padding: 18px 5vw; }
.shaped-demo .topbar-logo { font: 400 24px var(--fh); }
.shaped-demo .topbar-nav { flex-wrap: wrap; }
.shaped-demo :is(.card, .panel, .feature-card) { border-radius: 16px; }
.shaped-demo :is(.card-title, .panel-title, .section-title) { font-family: var(--fh); font-size: 24px; letter-spacing: -.02em; text-transform: none; }
.shaped-demo :is(.stat-value, .kpi-value, .stat-num) { font-family: var(--fh); font-weight: 400; }
.shaped-demo :is(.roi-big,.roi-sub-val,.impact-value,.total-value,.result-value,.results-total,.result-num) { font-family: var(--fh); font-weight: 400; }
.shaped-demo :is(.nav-logo, .title, .hero h2) { font-family: var(--fh) !important; text-transform: none; }
.shaped-demo :is(input, select, textarea) { background: var(--panel) !important; color: var(--ink) !important; border-color: var(--line2) !important; border-radius: 10px; font-family: var(--fb) !important; }
.shaped-demo :is(input:not([type=range]), select) { min-height: 42px; }
.shaped-demo :is(.nav-cta, .link, .cta-btn, .action-btn) { border-radius: 50px; background: #633C1F !important; color: #FBF7F1 !important; border-color: #633C1F !important; }
.shaped-demo :is(.detail-panel, .detail-overlay, .modal-content, .modal, .slide) { background-color: var(--panel) !important; color: var(--ink) !important; border-color: var(--line) !important; }
.shaped-demo :is(.detail-panel, .detail-overlay) [style*="color:#fff"] { color: var(--ink) !important; }
.shaped-demo :is(.container, .layout, .grid) { max-width: 1400px; margin-left: auto; margin-right: auto; }
.shaped-demo .si-demo-access { max-width: 680px; padding: 65px 24px 85px; margin: auto; }
.shaped-demo .si-demo-access p { color: var(--muted); font: 400 15px/1.8 var(--fb); margin-bottom: 28px; }
.shaped-demo .si-demo-access a { display: inline-flex; padding: 14px 24px; border-radius: 50px; background: #633C1F; color: #FBF7F1; text-decoration: none; font: 500 12px var(--fb); }
.shaped-demo .r { opacity: 1 !important; transform: none !important; }
.shaped-demo :is(.btn-fill,.cta-btn,.ix-btn-fill) { background: var(--primary) !important; color: var(--primary-ink) !important; -webkit-text-fill-color: var(--primary-ink) !important; box-shadow: none; border-radius: 50px; }
.shaped-demo .hero-sub, .shaped-demo .hero-sub strong { color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; }
.shaped-demo .si-demo-brand, .shaped-demo .si-demo-brand :is(span,i) { opacity: 1 !important; color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; }
.shaped-demo :is(#adminGate,#nsGate) { background: var(--bg) !important; color: var(--ink); padding: 90px 24px 70px; }
.shaped-demo :is(#adminGate,#nsGate) .gate-grid { display: none; }
.shaped-demo .si-demo-gate-brand { position: absolute; top: 26px; left: 5vw; display: flex; align-items: center; gap: 14px; color: var(--ink); text-decoration: none; font: 400 23px var(--fh); letter-spacing: .18em; }
.shaped-demo .si-demo-gate-brand img { width: 40px; height: 40px; }
.shaped-demo :is(.gate-title,.ns-gate-title) { font: 400 clamp(32px,3vw,44px)/1.1 var(--fh); text-align: center; color: var(--ink); margin-bottom: 15px; }
.shaped-demo :is(.gate-sub,.ns-gate-sub,.gate-footer,.ns-gate-footer) { color: var(--muted); font-family: var(--fb); }
.shaped-demo :is(.gate-logo,.ns-gate-logo) { background: var(--panel2); box-shadow: none; }
.shaped-demo :is(.gate-logo,.ns-gate-logo) svg { fill: var(--accent); }
.shaped-demo :is(.gate-btn,.ns-gate-btn) { border-radius: 50px; background: var(--primary); color: var(--primary-ink); font-weight: 500; }
.shaped-demo[data-si-demo=employee-portal-demo] .sidebar-logo-icon { background: none; }
.shaped-demo[data-si-demo=employee-portal-demo] .sidebar-logo-text { font: 400 23px var(--fh); }
.shaped-demo[data-si-demo=northshore-admin] .app { display: grid; grid-template-columns: 208px minmax(0,1fr); }
.shaped-demo[data-si-demo=northshore-admin] .sidebar { position: relative; inset: auto; height: auto; width: 208px; }
.shaped-demo[data-si-demo=northshore-admin] .main { margin-left: 0; min-width: 0; }
.shaped-demo[data-si-demo=northshore-admin] :is(.content,.page,.page-section) { min-width: 0; }
.shaped-demo .si-demo-deck { position: relative; background: var(--panel); }
.shaped-demo .si-demo-deck .slide { display: none; position: relative; inset: auto; width: 100%; height: auto; min-height: 650px; padding: 64px 5vw; transform: none !important; }
.shaped-demo .si-demo-deck .slide.active { display: flex; }
.shaped-demo .si-demo-deck .click-zone { display: none; }
.shaped-demo .si-demo-deck .nav-bar { position: sticky; bottom: 0; flex-wrap: wrap; gap: 16px; background: var(--panel2); color: var(--ink); padding: 20px 5vw; backdrop-filter: none; }
.shaped-demo .si-demo-deck .nav-logo-icon { background: var(--panel); }
.shaped-demo .si-demo-deck .nav-logo-text { font: 400 22px var(--fh); }
.shaped-demo .si-demo-deck .s-title { font: 400 clamp(36px, 4.5vw, 64px)/1.04 var(--fh) !important; letter-spacing: -.025em; }
.shaped-demo .si-demo-deck .s-title .grad { color: var(--accent); -webkit-text-fill-color: var(--accent); background: none; }
.shaped-demo .si-demo-deck .s-subtitle { font-size: 18px !important; }
.shaped-demo .si-demo-deck .stat-val { font: 400 54px var(--fh); }
.shaped-demo .si-demo-deck .slide-bg-glow { background: var(--panel) !important; }
.shaped-demo .si-demo-deck .progress-bar { position: absolute; top: 0; background: var(--accent); }
.shaped-demo .si-demo-deck .fullscreen-btn { position: absolute; top: 14px; right: 22px; color: var(--ink); background: var(--panel2); }
.shaped-demo .si-demo-deck .slide-dot { background: var(--line2); box-shadow: none; }
.shaped-demo .si-demo-deck .slide-dot.active { background: var(--accent); }
.shaped-demo .si-demo-deck .nav-btn { color: var(--ink); border-color: var(--line2); }
@media(max-width:700px) {
  .shaped-demo .si-demo-header { padding: 18px 24px; gap: 15px; min-height: 80px; }
  .shaped-demo .si-demo-brand span { font-size: 21px; }
  .shaped-demo .si-demo-header nav { gap: 15px; }
  .shaped-demo .si-demo-header nav a { font-size: 10px; }
  .shaped-demo .si-demo-intro { padding: 30px 24px; }
  .shaped-demo .si-demo-footer { padding: 23px 24px; }
  .shaped-demo .topbar { padding: 18px 24px; }
  .shaped-demo :is(.stats, .kpis, .grid, .layout, .flow-anim, .flow, .features) { grid-template-columns: 1fr !important; max-width: 100%; min-width: 0; }
  .shaped-demo .topbar-right { flex-wrap: wrap; }
  .shaped-demo .flow-anim { flex-wrap: wrap; gap: 12px; }
  .shaped-demo :is(table, .table-wrap, .table-container) { max-width: 100%; }
  .shaped-demo :is(.card, .panel) { overflow-x: auto; }
  .shaped-demo input, .shaped-demo select, .shaped-demo textarea { font-size: 16px !important; }
  .shaped-demo[data-si-demo=neural-chat-demo] .arch-step { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 16px; }
  .shaped-demo[data-si-demo=neural-chat-demo] .arch-code { grid-column: 2; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .shaped-demo[data-si-demo=neural-chat-demo] .arch-label { min-width: 0; grid-column: 2; grid-row: 1; }
  .shaped-demo[data-si-demo=neural-chat-demo] .arch-num { grid-column: 1; grid-row: 1; }
  .shaped-demo[data-si-demo=neural-chat-demo] .arch-arrow { display: none; }
  .shaped-demo[data-si-demo=neural-chat-demo] :is(.cta-banner,.cta-banner::before) { max-width: 100%; overflow-x: clip; }
  .shaped-demo[data-si-demo=employee-portal-demo] .sidebar { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); height: auto; max-height: 240px; overflow-y: auto !important; gap: 6px !important; padding: 18px !important; }
  .shaped-demo[data-si-demo=employee-portal-demo] .sidebar-logo { grid-column: 1/-1; margin: 0 0 8px; }
  .shaped-demo[data-si-demo=employee-portal-demo] .nav-section { display: none; }
  .shaped-demo[data-si-demo=employee-portal-demo] .nav-item { min-height: 42px; font-size: 10px; min-width: 0; }
  .shaped-demo[data-si-demo=pulseware-forge-demo] .sidebar { max-height: 240px; height: auto; overflow-y: auto !important; gap: 8px !important; }
  .shaped-demo[data-si-demo=northshore-admin] .app { grid-template-columns: minmax(0,1fr); }
  .shaped-demo[data-si-demo=northshore-admin] .sidebar { display: none !important; }
  .shaped-demo[data-si-demo=northshore-admin] .sidebar.open { display: flex !important; position: fixed !important; inset: 0 auto 0 0; width: 260px !important; height: 100svh; flex-direction: column; flex-wrap: nowrap; overflow: auto !important; }
  .shaped-demo .si-demo-deck .slide { padding: 70px 24px 40px; min-height: 500px; }
  .shaped-demo .si-demo-deck .card-grid { grid-template-columns: 1fr; }
  .shaped-demo .si-demo-deck .stat-row { gap: 28px; }
  .shaped-demo .si-demo-deck .stat-box { min-width: 95px; }
  .shaped-demo .si-demo-deck .bar-row { flex-wrap: wrap; gap: 8px; }
  .shaped-demo .si-demo-deck .bar-label { width: 100%; text-align: left; }
  .shaped-demo .si-demo-deck .bar-track { flex-basis: 100%; }
  .shaped-demo .si-demo-deck .compare-table { display: block; overflow-x: auto; }
  .shaped-demo .si-demo-deck .nav-bar { padding: 18px 24px; }
  .shaped-demo .si-demo-deck .nav-hint { display: none; }
}
@media(prefers-reduced-motion:reduce) {
  .shaped-demo *, .shaped-demo *::before, .shaped-demo *::after { animation: none !important; transition: none !important; }
}
