/* ============================================================
   ai.imrozzoha.com — Visual demo system
   demo-type badges · card thumbnails · mini-flow · rich modal · mock UI panels
   (loads after styles.css)
   ============================================================ */

/* ---------------- Demo-type badge ---------------- */
.demo-type {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 8px; border: 1px solid; margin-top: 14px; width: fit-content;
}
.demo-type svg { width: 12px; height: 12px; }
.demo-type.live    { color: var(--live);  border-color: rgba(34,197,94,.35);  background: rgba(34,197,94,.08); }
.demo-type.guided  { color: var(--cyan);  border-color: rgba(21,166,245,.35); background: rgba(21,166,245,.08); }
.demo-type.proto   { color: var(--violet);border-color: rgba(124,77,214,.4);  background: rgba(124,77,214,.1); }
.demo-type.roadmap { color: var(--amber); border-color: rgba(245,177,76,.35);  background: rgba(245,177,76,.08); }

/* ---------------- Card thumbnail (small visual preview) ---------------- */
.thumb {
  margin-top: 16px; height: 92px; border-radius: 12px; overflow: hidden; position: relative;
  border: 1px solid var(--border); background:
    linear-gradient(180deg, rgba(252,251,247,.96), rgba(244,242,235,.96));
  padding: 11px; display: flex; flex-direction: column; gap: 6px;
}
.thumb::after { /* subtle scanline sheen */
  content:""; position:absolute; inset:0; background:
    repeating-linear-gradient(115deg, rgba(18,45,28,.025) 0 2px, transparent 2px 7px);
  pointer-events:none;
}
.thumb .tline { height: 6px; border-radius: 3px; background: rgba(45,72,55,.18); }
.thumb .tline.s { width: 55%; } .thumb .tline.m { width: 75%; } .thumb .tline.l { width: 92%; }
.thumb .tline.hot { background: linear-gradient(90deg, var(--cyan), var(--indigo)); opacity:.8; }
.thumb .trow { display:flex; gap: 6px; align-items:center; }
.thumb .tbubble { padding: 5px 8px; border-radius: 8px; font-family: var(--font-mono); font-size: 8.5px; color: var(--text-dim); border:1px solid var(--border); background: var(--surface); }
.thumb .tbubble.me { margin-left:auto; color: var(--cyan); border-color: rgba(21,166,245,.3); background: rgba(21,166,245,.08); }
.thumb .tgrid { display:grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.thumb .tcell { height: 26px; border-radius: 7px; border:1px solid var(--border); background: var(--surface); position: relative; overflow:hidden; }
.thumb .tcell i { position:absolute; left:6px; top:6px; width: 18px; height: 4px; border-radius: 2px; background: var(--cyan); opacity:.6; }
.thumb .tcell b { position:absolute; left:6px; bottom:6px; width: 60%; height: 5px; border-radius: 2px; background: rgba(45,72,55,.25); }
.thumb .tbars { display:flex; align-items:flex-end; gap: 5px; height: 100%; padding-top: 4px; }
.thumb .tbars span { flex:1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--cyan), rgba(21,166,245,.15)); }
.thumb .ttable { display:flex; flex-direction:column; gap: 4px; }
.thumb .ttable .tr { display:grid; grid-template-columns: 14px 1fr 26px; gap:6px; align-items:center; }
.thumb .ttable .tr .rk { font-family: var(--font-mono); font-size: 8px; color: var(--cyan); }
.thumb .ttable .tr .nm { height:5px; border-radius:3px; background: rgba(45,72,55,.2); }
.thumb .ttable .tr .sc { height:9px; border-radius:4px; background: rgba(34,197,94,.25); }
.thumb .tchip { font-family: var(--font-mono); font-size: 8px; padding: 3px 6px; border-radius: 5px; border:1px solid var(--border); color: var(--text-mute); }

/* ---------------- Card mini-flow (Input → AI → Output) ---------------- */
.mkt-flow { display:flex; align-items:center; gap: 7px; margin-top: auto; padding-top: 16px; flex-wrap: wrap; }
.mkt-flow .fnode { font-family: var(--font-mono); font-size: 10px; letter-spacing:.03em; color: var(--text-dim); padding: 5px 9px; border:1px solid var(--border); border-radius: 7px; background: var(--surface); }
.mkt-flow .fnode.ai { color: #ffffff; background: var(--grad-ai); border-color: transparent; font-weight: 700; }
.mkt-flow .farrow { color: var(--text-mute); flex-shrink:0; }
.mkt-flow .farrow svg { width: 12px; height: 12px; display:block; }

/* ---------------- Card CTAs ---------------- */
.mkt-ctas { display:flex; gap: 9px; margin-top: 18px; flex-wrap: wrap; }
.mkt-ctas .btn { flex: 1 1 auto; }
.mkt-ctas .btn.view-demo { flex: 2 1 50%; }
/* Live items: Guided + Live side-by-side, Discuss full-width below */
.mkt-ctas.trio .btn { flex: 1 1 calc(50% - 5px); }
.mkt-ctas.trio .btn.view-demo { flex: 1 1 calc(50% - 5px); }
.mkt-ctas.trio .btn-ghost { flex: 1 1 100%; }
.mkt-github { margin-top: 12px; display:flex; align-items:center; gap: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--text-mute); }
.mkt-github svg { width: 14px; height: 14px; }
.mkt-github a { color: var(--cyan); }
.mkt-github a:hover { text-decoration: underline; }
.mkt-github .soon { opacity: .7; }

/* ============================================================ Rich demo modal */
.demo-scrim {
  position: fixed; inset: 0; z-index: 130; display: none; align-items: flex-start; justify-content: center;
  background: rgba(22,30,24,.55); backdrop-filter: blur(9px); padding: 28px 16px; overflow-y: auto;
}
.demo-scrim.open { display: flex; }
.demo-dialog {
  width: 100%; max-width: 900px; margin: auto; position: relative;
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1)); box-shadow: var(--shadow);
  transform: translateY(16px) scale(.985); opacity: 0; transition: .3s ease; overflow: hidden;
}
.demo-scrim.open .demo-dialog { transform: none; opacity: 1; }
.demo-x {
  position: absolute; top: 16px; right: 16px; z-index: 5;
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border);
  background: rgba(255,255,255,.78); backdrop-filter: blur(6px); display:grid; place-items:center; color: var(--text-dim); transition: .2s;
}
.demo-x:hover { background: var(--surface-2); color: var(--text); }
.demo-x svg { width: 18px; height: 18px; }
.demo-content { padding: 0; }

/* Dark-themed demo modal */
.demo-dialog {
  --bg-2: #141b18; --bg-1: #0f1512;
  --surface: rgba(255,255,255,0.045);
  --surface-2: rgba(255,255,255,0.09);
  --border: rgba(255,255,255,0.1);
  --border-strong: rgba(255,255,255,0.16);
  --text: #f1f5f2; --text-dim: #b3c0b8; --text-mute: #818f86;
  color: var(--text);
}
.demo-dialog .demo-x { background: rgba(255,255,255,0.06); }
.demo-dialog .demo-x:hover { background: rgba(255,255,255,0.12); }
.demo-dialog .io-panel .io-bar,
.demo-dialog .out-bar,
.demo-dialog .demo-foot2 { background: rgba(255,255,255,0.03); }
.demo-dialog .out-body { background: rgba(255,255,255,0.02); }
.demo-dialog .rep { background: rgba(255,255,255,0.03); }
.demo-dialog .dom .db,
.demo-dialog .bar { background: rgba(255,255,255,0.08); }

/* demo header */
.demo-hd { display:flex; gap: 16px; padding: 28px 30px 22px; border-bottom: 1px solid var(--border); position: relative; overflow: hidden; }
.demo-hd .glowbar { position:absolute; inset: 0 0 auto 0; height: 2px; background: var(--grad-ai); opacity:.8; }
.demo-hd-ic { width: 52px; height: 52px; border-radius: 13px; display:grid; place-items:center; flex-shrink:0; background: rgba(21,166,245,.1); border:1px solid rgba(21,166,245,.22); color: var(--cyan); }
.demo-hd-ic svg { width: 26px; height: 26px; }
.demo-badges { display:flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.demo-badges .demo-type { margin-top: 0; }
.demo-hd h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 3vw, 27px); letter-spacing: -0.02em; line-height: 1.1; }
.demo-bestfor { margin-top: 8px; font-size: 13.5px; color: var(--text-dim); }
.demo-bestfor b { color: var(--cyan); font-family: var(--font-mono); font-size: 11px; letter-spacing:.06em; text-transform: uppercase; margin-right: 6px; }

/* demo body sections */
.demo-body { padding: 26px 30px 30px; display: flex; flex-direction: column; gap: 28px; }
.demo-sec h4 {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan);
  display:flex; align-items:center; gap: 9px; margin-bottom: 14px;
}
.demo-sec h4::before { content:""; width: 5px; height: 5px; border-radius:50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.demo-sec > p { color: var(--text-dim); font-size: 14.5px; text-wrap: pretty; }

/* plain-language summary + visual flow */
.demo-plain {
  border: 1px solid var(--border-strong); border-radius: 14px; padding: 20px 22px;
  background: linear-gradient(180deg, rgba(21,166,245,.07), rgba(124,77,214,.04));
}
.demo-plain .pl-label {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cyan); display: inline-flex; align-items: center; gap: 8px;
}
.demo-plain .pl-label::before { content:""; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.demo-plain .pl-text { margin-top: 10px; font-size: 15.5px; line-height: 1.55; color: var(--text); text-wrap: pretty; }

.flow-viz { display: flex; align-items: stretch; gap: 8px; margin-top: 18px; }
.flow-viz .fv-node {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding: 16px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
}
.flow-viz .fv-node.ai { border-color: rgba(21,166,245,.35); background: rgba(21,166,245,.06); }
.flow-viz .fv-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); }
.flow-viz .fv-ic svg { width: 22px; height: 22px; }
.flow-viz .fv-ic.give { color: var(--cyan); background: rgba(21,166,245,.1); border-color: rgba(21,166,245,.25); }
.flow-viz .fv-ic.get { color: var(--live); background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.28); }
.flow-viz .fv-ic.ai { color: #fff; background: var(--grad-ai); border-color: transparent; }
.flow-viz .fv-cap { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); }
.flow-viz .fv-txt { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; }
.flow-viz .fv-arrow { display: flex; align-items: center; color: var(--text-mute); flex: 0 0 auto; }
.flow-viz .fv-arrow svg { width: 16px; height: 16px; }
@media (max-width: 620px) {
  .flow-viz { flex-direction: column; }
  .flow-viz .fv-arrow { transform: rotate(90deg); align-self: center; }
}

/* workflow stepper (horizontal) */
.stepper { display:flex; align-items:stretch; gap: 0; flex-wrap: wrap; }
.stepper .st { flex: 1 1 0; min-width: 120px; position: relative; padding: 14px 14px 14px 16px; border:1px solid var(--border); background: var(--surface); }
.stepper .st:first-child { border-radius: 11px 0 0 11px; }
.stepper .st:last-child { border-radius: 0 11px 11px 0; }
.stepper .st:not(:last-child) { border-right: none; }
.stepper .st .sn { font-family: var(--font-mono); font-size: 10px; color: var(--cyan); letter-spacing:.1em; }
.stepper .st .sl { font-size: 12.5px; color: var(--text); margin-top: 5px; font-weight: 500; line-height: 1.35; }
.stepper .st::after { content:"›"; position:absolute; right: -7px; top: 50%; transform: translateY(-50%); z-index:2; color: var(--text-mute); font-size: 16px; background: var(--bg-1); width: 14px; text-align:center; }
.stepper .st:last-child::after { display:none; }
@media (max-width: 620px) {
  .stepper { flex-direction: column; }
  .stepper .st { border-radius: 0 !important; border-right: 1px solid var(--border) !important; border-bottom: none; }
  .stepper .st:first-child { border-radius: 11px 11px 0 0 !important; }
  .stepper .st:last-child { border-radius: 0 0 11px 11px !important; border-bottom: 1px solid var(--border); }
  .stepper .st::after { content:"⌄"; right: 50%; top: auto; bottom: -10px; transform: translateX(50%); }
}

/* sample input / output panels */
.io-panel { border:1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); }
.io-panel .io-bar { display:flex; align-items:center; gap: 9px; padding: 10px 14px; border-bottom:1px solid var(--border); background: rgba(18,45,28,.03); }
.io-panel .io-bar .lab { font-family: var(--font-mono); font-size: 10.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--text-mute); }
.io-panel .io-bar .tag { margin-left:auto; font-family: var(--font-mono); font-size: 10px; color: var(--cyan); }
.io-panel .io-in { padding: 14px; font-size: 14px; color: var(--text); line-height: 1.55; }
.io-panel .io-in .meta { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); display:flex; flex-direction:column; gap: 4px; }
.io-panel .io-in .meta b { color: var(--text); }

/* AI output preview container */
.out-wrap { border:1px solid var(--border-strong); border-radius: 14px; overflow:hidden; box-shadow: 0 12px 40px -20px rgba(25,45,30,.16); }
.out-bar { display:flex; align-items:center; gap: 9px; padding: 11px 14px; border-bottom:1px solid var(--border); background: linear-gradient(180deg, rgba(18,45,28,.04), transparent); }
.out-bar .dots { display:flex; gap:5px; } .out-bar .dots i { width:9px;height:9px;border-radius:50%; }
.out-bar .dots i:nth-child(1){background:#ff5f57;} .out-bar .dots i:nth-child(2){background:#febc2e;} .out-bar .dots i:nth-child(3){background:#28c840;}
.out-bar .ttl { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-mute); }
.out-bar .ai-flag { margin-left:auto; display:flex; align-items:center; gap:6px; font-family: var(--font-mono); font-size: 10.5px; color: var(--cyan); }
.out-body { padding: 16px; background: linear-gradient(180deg, rgba(252,251,247,.7), rgba(244,242,235,.5)); display:flex; flex-direction:column; gap: 14px; }

/* generic answer card */
.ans-card .a-main { font-size: 14.5px; color: var(--text); line-height: 1.6; }
.ans-points { list-style:none; padding:0; margin: 4px 0 0; display:flex; flex-direction:column; gap: 8px; }
.ans-points li { display:flex; gap: 10px; font-size: 13.5px; color: var(--text-dim); }
.ans-points li::before { content:""; width: 6px; height: 6px; border-radius:2px; background: var(--cyan); margin-top: 7px; flex-shrink:0; transform: rotate(45deg); }
.src-box { border:1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--surface); }
.src-box .sh { font-family: var(--font-mono); font-size: 10px; letter-spacing:.1em; text-transform:uppercase; color: var(--text-mute); margin-bottom: 8px; }
.src-box .cite { display:inline-flex; align-items:center; gap:5px; font-family: var(--font-mono); font-size: 11px; color: var(--cyan); background: rgba(21,166,245,.1); border:1px solid rgba(21,166,245,.25); border-radius: 6px; padding: 4px 9px; margin: 0 6px 6px 0; }

/* chat bubbles in output */
.mchat { display:flex; flex-direction:column; gap: 11px; }
.mmsg { display:flex; gap: 10px; max-width: 90%; }
.mmsg .mav { width: 28px; height: 28px; border-radius: 8px; flex-shrink:0; display:grid; place-items:center; font-family: var(--font-mono); font-size: 10px; font-weight: 700; }
.mmsg.u { align-self: flex-end; flex-direction: row-reverse; }
.mmsg.u .mav { background: var(--surface-2); color: var(--text-dim); border:1px solid var(--border); }
.mmsg.a .mav { background: var(--grad-ai); color:#ffffff; }
.mmsg .mb { padding: 11px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.55; }
.mmsg.u .mb { background: rgba(21,166,245,.14); border:1px solid rgba(21,166,245,.25); border-top-right-radius: 4px; }
.mmsg.a .mb { background: var(--surface); border:1px solid var(--border); border-top-left-radius: 4px; color: var(--text-dim); }
.mmsg .mb b { color: var(--text); }

/* support mock */
.sup-class { display:flex; flex-wrap:wrap; gap: 8px; }
.sup-tag { font-family: var(--font-mono); font-size: 11px; padding: 6px 11px; border-radius: 999px; border:1px solid var(--border); color: var(--text-dim); background: var(--surface); }
.sup-tag b { color: var(--cyan); }
.sup-tag.warn { color: var(--amber); border-color: rgba(245,177,76,.3); background: rgba(245,177,76,.08); }
.draft { border:1px dashed var(--border-strong); border-radius: 11px; padding: 13px 15px; background: var(--surface); }
.draft .dh { font-family: var(--font-mono); font-size: 10px; letter-spacing:.1em; text-transform:uppercase; color: var(--text-mute); margin-bottom: 8px; }
.draft p { font-size: 13.5px; color: var(--text-dim); line-height: 1.55; }
.act-row { display:flex; gap: 9px; flex-wrap:wrap; margin-top: 4px; }
.act { font-size: 12.5px; font-weight:600; padding: 9px 14px; border-radius: 9px; border:1px solid var(--border); color: var(--text-dim); display:inline-flex; align-items:center; gap:7px; cursor: default; }
.act svg { width: 14px; height: 14px; }
.act.approve { color: var(--live); border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.08); }
.act.edit { color: var(--cyan); border-color: rgba(21,166,245,.3); }
.act.esc { color: var(--amber); border-color: rgba(245,177,76,.3); }
.act-note { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-mute); margin-top: 6px; }

/* content mock (selectors + variants) */
.seltabs { display:flex; gap: 7px; flex-wrap: wrap; margin-bottom: 4px; }
.seltab { font-family: var(--font-mono); font-size: 11px; padding: 6px 12px; border-radius: 8px; border:1px solid var(--border); color: var(--text-dim); background: var(--surface); cursor: pointer; transition: .18s; }
.seltab:hover { color: var(--text); border-color: var(--border-strong); }
.seltab.on { color:#ffffff; background: var(--grad-ai); border-color: transparent; font-weight:700; }
.gen-card { border:1px solid var(--border); border-radius: 11px; padding: 14px 16px; background: var(--surface); }
.gen-card .gt { font-size: 14px; color: var(--text); line-height: 1.6; white-space: pre-line; }
.gen-meta { display:flex; gap: 8px; flex-wrap:wrap; margin-top: 12px; }
.gen-meta span { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-mute); border:1px solid var(--border); border-radius: 6px; padding: 4px 8px; }

/* intake mock */
.kv { display:flex; flex-direction:column; gap: 9px; }
.kv .r { display:grid; grid-template-columns: 130px 1fr; gap: 12px; font-size: 13px; }
.kv .r .k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing:.05em; text-transform:uppercase; color: var(--text-mute); padding-top: 1px; }
.kv .r .v { color: var(--text-dim); }
.kv .r .v.hi { color: var(--text); }
.checklist { list-style:none; padding:0; margin: 0; display:flex; flex-direction:column; gap: 8px; }
.checklist li { display:flex; gap: 10px; font-size: 13px; color: var(--text-dim); align-items:flex-start; }
.checklist li .ck { width: 17px; height: 17px; border-radius: 5px; border:1px solid var(--border-strong); flex-shrink:0; margin-top:1px; display:grid; place-items:center; }
.checklist li.miss .ck { border-color: rgba(245,177,76,.5); color: var(--amber); }
.checklist li.have .ck { border-color: rgba(34,197,94,.4); background: rgba(34,197,94,.1); color: var(--live); }
.checklist li .ck svg { width: 11px; height: 11px; }

/* ranking table */
.rank-table { width:100%; border-collapse: collapse; font-size: 13px; }
.rank-table th { font-family: var(--font-mono); font-size: 10px; letter-spacing:.08em; text-transform:uppercase; color: var(--text-mute); text-align:left; padding: 9px 10px; border-bottom:1px solid var(--border); font-weight: 500; }
.rank-table td { padding: 11px 10px; border-bottom:1px solid var(--border); color: var(--text-dim); vertical-align: top; }
.rank-table tr:last-child td { border-bottom: none; }
.rank-table .cand { color: var(--text); font-weight: 600; }
.rank-table .rk { font-family: var(--font-mono); color: var(--cyan); }
.score-pill { display:inline-flex; align-items:center; gap:6px; font-family: var(--font-mono); font-size: 11.5px; padding: 3px 9px; border-radius: 999px; font-weight: 600; }
.score-pill.hi { color: var(--live); background: rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.3); }
.score-pill.mid { color: var(--cyan); background: rgba(21,166,245,.1); border:1px solid rgba(21,166,245,.3); }
.score-pill.low { color: var(--amber); background: rgba(245,177,76,.1); border:1px solid rgba(245,177,76,.3); }

/* domain score cards (role fit) */
.dom-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.dom { border:1px solid var(--border); border-radius: 10px; padding: 12px; background: var(--surface); }
.dom .dn { font-size: 12px; color: var(--text-dim); margin-bottom: 8px; min-height: 30px; }
.dom .db { height: 6px; border-radius: 999px; background: rgba(18,42,27,.09); overflow:hidden; }
.dom .db i { display:block; height:100%; border-radius:999px; background: var(--grad-ai); }
.dom .dv { font-family: var(--font-mono); font-size: 12px; color: var(--text); margin-top: 7px; }
.sg-cols { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sg-col h5 { font-family: var(--font-mono); font-size: 10.5px; letter-spacing:.08em; text-transform:uppercase; margin-bottom: 9px; }
.sg-col.str h5 { color: var(--live); } .sg-col.gap h5 { color: var(--amber); }
.sg-col ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap: 7px; }
.sg-col li { font-size: 12.5px; color: var(--text-dim); display:flex; gap: 8px; }
.sg-col li::before { content:""; width:5px;height:5px;border-radius:50%; margin-top:6px; flex-shrink:0; }
.sg-col.str li::before { background: var(--live); } .sg-col.gap li::before { background: var(--amber); }
@media (max-width: 620px){ .dom-grid{grid-template-columns:1fr 1fr;} .sg-cols{grid-template-columns:1fr;} }

/* report mock */
.rep { border:1px solid var(--border); border-radius: 10px; background: #ffffff; overflow:hidden; }
.rep .rsec { padding: 12px 15px; border-bottom: 1px solid var(--border); }
.rep .rsec:last-child { border-bottom:none; }
.rep .rsec h5 { font-family: var(--font-mono); font-size: 10px; letter-spacing:.1em; text-transform:uppercase; color: var(--cyan); margin-bottom: 7px; }
.rep .rsec p, .rep .rsec li { font-size: 13px; color: var(--text-dim); line-height: 1.55; }
.rep .rsec ul { margin: 0; padding-left: 18px; display:flex; flex-direction:column; gap: 4px; }

/* rag mock */
.rag-kb { display:flex; gap: 8px; flex-wrap:wrap; }
.rag-kb .kb { font-family: var(--font-mono); font-size: 11px; padding: 6px 11px; border-radius: 8px; border:1px solid var(--border); color: var(--text-dim); background: var(--surface); }
.rag-kb .kb.on { color: var(--cyan); border-color: rgba(21,166,245,.35); background: rgba(21,166,245,.08); }
.retrieved { display:flex; flex-direction:column; gap: 7px; }
.retrieved .rc { display:flex; gap: 10px; align-items:center; border:1px solid var(--border); border-radius: 9px; padding: 9px 12px; background: var(--surface); font-size: 12.5px; color: var(--text-dim); }
.retrieved .rc .rcs { margin-left:auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--cyan); }
.retrieved .rc svg { width: 15px; height: 15px; color: var(--text-mute); flex-shrink:0; }

/* custom GPT mock */
.gpt-divider { display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--cyan); margin-top:4px; }
.gpt-divider:first-child { margin-top:0; }
.gpt-divider::after { content:""; flex:1; height:1px; background:var(--border); }
.gpt-divider .gn { width:19px; height:19px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; font-size:11px; font-weight:700; color:#fff; background:var(--grad-ai); letter-spacing:0; }
.gpt-cfg { border:1px solid var(--border); border-radius:12px; background:var(--surface); overflow:hidden; }
.gpt-cfg-hd { display:flex; align-items:center; gap:12px; padding:14px 15px; border-bottom:1px solid var(--border); background:rgba(124,77,214,.06); }
.gpt-av { width:40px; height:40px; border-radius:11px; display:grid; place-items:center; flex-shrink:0; background:var(--grad-ai); color:#fff; }
.gpt-av svg { width:22px; height:22px; }
.gpt-meta { flex:1; min-width:0; }
.gpt-nm { font-size:14.5px; font-weight:600; color:var(--text); }
.gpt-pp { font-size:12.5px; color:var(--text-dim); margin-top:2px; line-height:1.45; }
.gpt-tag { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--violet); border:1px solid rgba(124,77,214,.4); background:rgba(124,77,214,.1); border-radius:7px; padding:4px 9px; flex-shrink:0; align-self:flex-start; }
.gpt-instr { padding:14px 15px; }
.gpt-instr .dh, .gpt-block .dh { font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-mute); margin-bottom:11px; }
.gpt-files { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; padding:13px 14px; }
.gpt-file { display:flex; align-items:center; gap:9px; border:1px solid var(--border); border-radius:9px; padding:9px 11px; background:var(--surface); font-size:12.5px; }
.gpt-file svg { width:15px; height:15px; color:var(--cyan); flex-shrink:0; }
.gpt-file b { color:var(--text); font-weight:600; }
.gpt-file span { margin-left:auto; font-family:var(--font-mono); font-size:9.5px; color:var(--text-mute); flex-shrink:0; }
.gpt-starters { display:flex; flex-wrap:wrap; gap:8px; }
.gpt-starter { font-size:12.5px; color:var(--text-dim); border:1px solid var(--border); border-radius:999px; padding:7px 13px; background:var(--surface); }
.gpt-chat { padding:14px; }
.gpt-actions { display:flex; align-items:flex-start; gap:13px; border:1px dashed var(--border-strong); border-radius:11px; padding:13px 15px; background:var(--surface); }
.gpt-actions .api-badge { display:inline-flex; align-items:center; gap:6px; flex-shrink:0; font-family:var(--font-mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--amber); border:1px solid rgba(245,177,76,.35); background:rgba(245,177,76,.08); border-radius:8px; padding:6px 10px; }
.gpt-actions .api-badge svg { width:13px; height:13px; }
.gpt-actions p { font-size:12.5px; color:var(--text-dim); line-height:1.5; }
@media (max-width:620px){ .gpt-files{grid-template-columns:1fr;} .gpt-actions{flex-direction:column;} }

/* job dashboard mock */
.jobs { display:grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.jobc { border:1px solid var(--border); border-radius: 11px; padding: 13px; background: var(--surface); }
.jobc .jt { font-size: 13.5px; font-weight: 600; color: var(--text); }
.jobc .jco { font-size: 12px; color: var(--text-mute); margin-top: 2px; }
.jobc .jrow { display:flex; align-items:center; gap: 8px; margin-top: 11px; }
.jstatus { font-family: var(--font-mono); font-size: 9.5px; letter-spacing:.05em; text-transform:uppercase; padding: 3px 8px; border-radius: 999px; border:1px solid; }
.jstatus.scored { color: var(--live); border-color: rgba(34,197,94,.3); background: rgba(34,197,94,.08); }
.jstatus.need { color: var(--amber); border-color: rgba(245,177,76,.3); background: rgba(245,177,76,.08); }
.jstatus.applied { color: var(--cyan); border-color: rgba(21,166,245,.3); background: rgba(21,166,245,.08); }
.jstatus.skip { color: var(--text-mute); border-color: var(--border); }
@media (max-width: 620px){ .jobs{grid-template-columns:1fr;} }

/* ops dashboard mock */
.ops-metrics { display:grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.opm { border:1px solid var(--border); border-radius: 11px; padding: 13px; background: var(--surface); }
.opm .ok { font-family: var(--font-mono); font-size: 9.5px; letter-spacing:.08em; text-transform:uppercase; color: var(--text-mute); }
.opm .ov { font-family: var(--font-display); font-weight: 600; font-size: 22px; margin-top: 6px; }
.opm .ov small { font-size: 11px; color: var(--text-mute); font-weight: 400; font-family: var(--font-mono); }
.opm .od { font-family: var(--font-mono); font-size: 10px; margin-top: 4px; }
.opm .od.up { color: var(--live); } .opm .od.down { color: var(--amber); }
.health { width:100%; border-collapse: collapse; font-size: 12.5px; margin-top: 4px; }
.health th { font-family: var(--font-mono); font-size: 9.5px; letter-spacing:.06em; text-transform:uppercase; color: var(--text-mute); text-align:left; padding: 8px 10px; border-bottom:1px solid var(--border); font-weight:500; }
.health td { padding: 9px 10px; border-bottom:1px solid var(--border); color: var(--text-dim); }
.health tr:last-child td { border-bottom:none; }
.health .dot { display:inline-flex; align-items:center; gap:7px; }
.health .dot::before { content:""; width:7px;height:7px;border-radius:50%; }
.health .dot.ok::before { background: var(--live); box-shadow:0 0 7px var(--live); }
.health .dot.warn::before { background: var(--amber); }
.cost-chart { height: 80px; display:flex; align-items:flex-end; gap: 6px; padding: 8px 0; }
.cost-chart span { flex:1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--indigo), rgba(21,166,245,.15)); min-height: 8px; }
@media (max-width: 620px){ .ops-metrics{grid-template-columns:1fr 1fr;} }

/* customisation chips */
.cust-chips { display:flex; flex-wrap:wrap; gap: 9px; }
.cust-chips span { font-size: 12.5px; color: var(--text-dim); border:1px solid var(--border); border-radius: 999px; padding: 7px 13px; background: var(--surface); display:inline-flex; align-items:center; gap:7px; }
.cust-chips span::before { content:"+"; color: var(--cyan); font-weight: 700; }

/* security / human-review callout */
.sec-note { display:flex; gap: 13px; border:1px solid rgba(34,197,94,.28); border-radius: 12px; padding: 15px 17px; background: rgba(34,197,94,.05); }
.sec-note .si { width: 34px; height: 34px; border-radius: 9px; display:grid; place-items:center; background: rgba(34,197,94,.12); color: var(--live); flex-shrink:0; border:1px solid rgba(34,197,94,.3); }
.sec-note .si svg { width: 18px; height: 18px; }
.sec-note p { font-size: 13.5px; color: var(--text-dim); line-height: 1.55; }
.sec-note p b { color: var(--text); }

/* demo footer */
.demo-foot2 { display:flex; flex-wrap:wrap; align-items:center; gap: 12px; padding: 20px 30px; border-top: 1px solid var(--border); background: rgba(18,45,28,.022); position: sticky; bottom: 0; }
.demo-foot2 .gh { display:flex; align-items:center; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--text-mute); margin-right: auto; }
.demo-foot2 .gh svg { width: 16px; height: 16px; }
.demo-foot2 .gh a { color: var(--cyan); }
.demo-foot2 .btn { flex: 0 0 auto; }
@media (max-width: 560px){ .demo-foot2 { flex-direction: column; align-items: stretch; } .demo-foot2 .gh { margin-right: 0; margin-bottom: 4px; } .demo-foot2 .btn { width: 100%; } }

.demo-hd, .demo-body { scroll-margin-top: 20px; }
@media (max-width: 560px){ .demo-hd { padding: 26px 20px 20px; } .demo-body { padding: 22px 20px 26px; } }

@media (prefers-reduced-motion: reduce) { .demo-dialog { transition: none; } }