/* ==================================================================
   Customer Enquiries — demonstration layer
   Built on the v2 design system tokens (styles.css). Nothing here
   introduces a new palette; it reuses --bg/--panel/--gold/--cyan.
   Mobile-first: base styles are the 360px phone, layout is added at
   min-width breakpoints.
   ================================================================== */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- hero stage ---------- */
.hero-demo{
  background:linear-gradient(155deg,#0d2028f2,#060f13f7);
  border:1px solid #2e515b;border-radius:16px;padding:18px;
  box-shadow:0 22px 60px #0009;min-height:340px;position:relative;overflow:hidden;
}
.hero-demo:before{content:'';position:absolute;inset:0;background:radial-gradient(600px 220px at 85% -10%,#f4c86e1f,transparent 70%);pointer-events:none}
.hero-demo-head{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #1e3b45;padding-bottom:12px;margin-bottom:14px}
.hero-demo-head b{font:600 12px 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#9fb8bd}
.hero-demo-head .live{display:inline-flex;align-items:center;gap:7px;font-size:11px;color:var(--cyan)}
.hero-demo-head .live i{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 0 #39d6ff88;animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 #39d6ff77}70%{box-shadow:0 0 0 9px #39d6ff00}100%{box-shadow:0 0 0 0 #39d6ff00}}
.hero-stage{display:flex;flex-direction:column;gap:10px;min-height:250px}
.hx-meta{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8fa9ae;display:flex;align-items:center;gap:8px;opacity:0;transform:translateY(6px);transition:.5s}
.hx-dot{width:6px;height:6px;border-radius:50%;background:var(--gold)}
.hx-msg{max-width:92%;padding:12px 14px;border-radius:12px;font-size:14px;opacity:0;transform:translateY(8px);transition:.5s}
.hx-msg.in{opacity:1;transform:none}
.hx-in{background:#12262e;border:1px solid #2b4f5a;border-bottom-left-radius:4px;align-self:flex-start;color:#dbe8ea}
.hx-out{background:linear-gradient(140deg,#123039,#0b2027);border:1px solid #2f6270;border-bottom-right-radius:4px;align-self:flex-end;color:#e8f6f8}
.hx-who{display:block;font:600 10px 'DM Sans',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);margin-bottom:4px}
.hx-rows{border:1px solid #2c4c55;border-radius:10px;overflow:hidden;background:#08171c;opacity:0;transform:translateY(8px);transition:.5s}
.hx-rows.in{opacity:1;transform:none}
.hx-row{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;font-size:12.5px;border-bottom:1px solid #1a323a}
.hx-row:last-child{border-bottom:0}
.hx-row span{color:#93aeb3}
.hx-row b{color:#eaf6f7;font-weight:600}
.hx-handoff{border:1px solid #7d6634;background:linear-gradient(150deg,#1d2318,#101b1c);border-radius:12px;padding:12px 14px;opacity:0;transform:translateY(8px);transition:.5s}
.hx-handoff.in{opacity:1;transform:none}
.hx-tag{font:700 10px 'DM Sans',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.hx-handoff p{margin:6px 0 4px;font-size:13.5px;color:#e9f2f0}
.hx-handoff small{color:#a9bdb8;font-size:11.5px}
.hero-replay{margin-top:14px;display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid #3c606a;color:#cfe3e6;border-radius:8px;padding:7px 12px;font:600 12px 'DM Sans',sans-serif;cursor:pointer}
.hero-replay:hover{border-color:var(--gold);color:var(--gold)}
.hero-replay svg{width:13px;height:13px}

/* ---------- shared demo section frame ---------- */
.demo-section{padding:70px 0}
.demo-head{max-width:780px;margin-bottom:30px}
.demo-head h2{margin:10px 0 12px}
.demo-head p{color:#c2d4d7;margin:0}
.demo-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid #3b5a63;border-radius:20px;padding:4px 11px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#a9c2c7}

/* ---------- calculator ---------- */
.calc-wrap{display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:900px){.calc-wrap{grid-template-columns:.9fr 1.1fr;align-items:start}}
.calc-form{background:#0a1a1f;border:1px solid #2b4b54;border-radius:14px;padding:20px}
.fld{margin-bottom:18px}
.fld:last-child{margin-bottom:0}
.fld label{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 8px;font-weight:600;font-size:13.5px;color:#dcebed}
.fld label output{font:700 15px Rajdhani,sans-serif;color:var(--gold);white-space:nowrap}
.hint{display:block;color:#8ba5aa;font-size:11.5px;margin-top:5px}
.num-wrap{display:flex;align-items:center;background:#0d242b;border:1px solid #4b6770;border-radius:8px;padding-left:12px}
.num-wrap .pre{color:#9fb6bb;font-size:14px}
.num-wrap input{border:0;background:transparent;padding:12px}
.num-wrap:focus-within{border-color:var(--cyan)}
input[type=range]{width:100%;accent-color:#eac16b;height:26px}
.calc-out{background:linear-gradient(150deg,#0c1f26,#071418);border:1px solid #2e515b;border-radius:14px;padding:22px}
.stat-grid{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:520px){.stat-grid{grid-template-columns:repeat(3,1fr)}}
.stat{background:#0d222a;border:1px solid #2c4a53;border-radius:11px;padding:14px}
.stat-l{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#93aeb3}
.stat strong{display:block;font:700 clamp(26px,4vw,34px) Rajdhani,sans-serif;color:#f2fbfc;margin:4px 0 2px;line-height:1.05}
.stat small{display:block;color:#8fa9ae;font-size:11.5px;line-height:1.4}
.stat-off strong{color:#5d7a80}
.stat-why{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:8px}
.stat-why li{position:relative;padding-left:20px;font-size:13.5px;color:#cfe0e3}
.stat-why li:before{content:'↳';position:absolute;left:0;color:var(--cyan)}
.rec{margin-top:18px;border-left:3px solid var(--gold);background:#1a241f;padding:13px 16px;border-radius:0 10px 10px 0}
.rec-tag{font:700 10px 'DM Sans',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.rec ul{margin:8px 0 0;padding-left:18px}
.rec li{font-size:13.5px;color:#dbe9e6;margin-bottom:5px}
.calc-notes{margin-top:18px;border-top:1px solid #1e3741;padding-top:14px;font-size:12px;color:#9db4b9}
.notes-h{font-weight:600;color:#c3d5d8;margin:0 0 7px;font-size:12.5px}
.calc-notes ul{margin:0;padding-left:16px;display:grid;gap:4px}
.calc-notes em{color:#88a2a7;font-style:normal}
.notes-f{margin:10px 0 0;color:#8ba3a8}

/* ---------- receptionist lab ---------- */
.lab{background:linear-gradient(160deg,#0b1d23,#061115);border:1px solid #2b4b54;border-radius:18px;padding:18px}
@media(min-width:900px){.lab{padding:24px}}
.scn-row{display:grid;gap:8px;grid-template-columns:repeat(2,1fr);margin-bottom:16px}
@media(min-width:760px){.scn-row{grid-template-columns:repeat(4,1fr)}}
.scn{text-align:left;background:#0d222a;border:1px solid #2f4c55;border-radius:10px;padding:10px 12px;cursor:pointer;color:#dbe9eb;transition:.15s}
.scn b{display:block;font:600 13px 'DM Sans',sans-serif;margin-bottom:2px}
.scn span{display:block;font-size:11px;color:#92abb0;line-height:1.35}
.scn:hover{border-color:#4e7d89}
.scn[aria-pressed=true]{border-color:var(--gold);background:#1c2419;box-shadow:inset 0 0 0 1px #f4c86e44}
.lab-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #1e3a43;border-bottom:1px solid #1e3a43;padding:11px 0;margin-bottom:14px}
.lab-title{font:600 15px 'DM Sans',sans-serif;color:#eaf5f6}
.lab-ctx{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.ctx-pill{font-size:10.5px;border:1px solid #35555e;border-radius:20px;padding:2px 9px;color:#9fb8bd;letter-spacing:.03em}
.view-toggle{display:inline-flex;border:1px solid #3a5b65;border-radius:9px;overflow:hidden}
.view-toggle button{background:transparent;border:0;color:#b9cdd2;font:600 12px 'DM Sans',sans-serif;padding:8px 13px;cursor:pointer}
.view-toggle button[aria-pressed=true]{background:#1d3a44;color:#fff}
.lab-grid{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:860px){.lab-grid{grid-template-columns:1.05fr .95fr;align-items:start}}
.chat-shell{background:#07161b;border:1px solid #274751;border-radius:13px;display:flex;flex-direction:column;min-height:400px}
.lab-log{flex:1;padding:16px;display:flex;flex-direction:column;gap:10px;max-height:420px;overflow-y:auto;scroll-behavior:smooth}
.msg{max-width:88%;padding:10px 13px;border-radius:12px;font-size:13.5px;animation:msgIn .28s ease both}
@keyframes msgIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.msg p{margin:0;color:inherit}
.msg .who{display:block;font:600 9.5px 'DM Sans',sans-serif;letter-spacing:.18em;text-transform:uppercase;margin-bottom:4px;opacity:.8}
.from-ai{align-self:flex-start;background:#102b34;border:1px solid #2c5a68;border-bottom-left-radius:4px;color:#e6f4f6}
.from-ai .who{color:var(--cyan)}
.from-customer{align-self:flex-end;background:#1b2a22;border:1px solid #46603f;border-bottom-right-radius:4px;color:#eaf2e6}
.from-customer .who{color:#b9d59a}
.typing{padding:12px 14px}
.dots{display:inline-flex;gap:4px}
.dots i{width:5px;height:5px;border-radius:50%;background:#8fb7bf;animation:bounce 1s infinite}
.dots i:nth-child(2){animation-delay:.15s}
.dots i:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-3px);opacity:1}}
.lab-chips{display:flex;flex-wrap:wrap;gap:7px;padding:0 14px 12px}
.chip-btn{min-height:44px;background:#122c34;border:1px solid #3e6d79;color:#dff2f5;border-radius:20px;padding:8px 13px;font:500 12.5px 'DM Sans',sans-serif;cursor:pointer;text-align:left;transition:.15s}
.chip-btn:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-1px)}
.chips-done{font-size:12px;color:#8fa9ae;padding:4px 2px}
.lab-form{display:flex;gap:8px;padding:12px 14px;border-top:1px solid #22404a;background:#061216}
.lab-form input{flex:1;border-radius:8px;border:1px solid #3d5f69;background:#0d2229;color:#fff;padding:11px 12px;font:inherit;font-size:13.5px;min-width:0}
.lab-form button{background:linear-gradient(125deg,#a66e21,#f4c86e);border:0;color:#0b1014;font-weight:700;border-radius:8px;padding:0 15px;min-height:44px;cursor:pointer}
.lab-form button:hover{filter:brightness(1.1)}
.lab-note{font-size:11.5px;color:#8ba3a8;margin:9px 2px 0}
.owner-shell{background:#0a1c22;border:1px solid #2c4c55;border-radius:13px;padding:16px;min-height:400px}
.own-head{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #1e3a43;padding-bottom:11px;margin-bottom:12px}
.own-cat{font:600 13px 'DM Sans',sans-serif;color:#e8f4f6}
.own-st{font:700 10px 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;border-radius:20px;padding:4px 10px;border:1px solid #3d5f69;color:#c7dade}
.st-new{border-color:#3f6e79;color:#9fd8e4}
.st-qualified{border-color:#6b7a3a;color:#d7e48f}
.st-booked{border-color:#3f7a52;color:#9be0ae}
.st-dispatched{border-color:#7a4a3a;color:#f0b49c}
.st-needsaperson{border-color:#8a6a2f;color:#f4c86e;background:#231d0e}
.st-emergency{border-color:#8a3f3f;color:#f19c9c;background:#26100f}
.st-notfit{border-color:#5b5b5b;color:#b9b9b9}
.st-closed{border-color:#3d5f69;color:#9fb8bd}
.own-fields{margin:0 0 12px}
.own-fields>div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed #1e3a43;font-size:12.5px;animation:msgIn .25s ease both}
.own-fields dt{color:#93aeb3;flex:0 0 42%}
.own-fields dd{margin:0;color:#e6f3f5;font-weight:500;text-align:right}
.own-empty dd{color:#5d7a80}
.own-next{display:flex;flex-direction:column;gap:3px;background:#0d242b;border:1px solid #2b4a53;border-radius:9px;padding:10px 12px;margin-bottom:8px}
.own-next span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#8fa9ae}
.own-next b{font-size:13px;color:#eaf6f7;font-weight:600}
.own-handoff{display:flex;flex-direction:column;gap:3px;background:#221a0d;border:1px solid #6d5527;border-radius:9px;padding:10px 12px;margin-bottom:8px}
.own-handoff span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.own-handoff b{font-size:12.5px;color:#f7e7c4;font-weight:500;line-height:1.4}
.own-summary{margin-top:10px;border-top:1px solid #1e3a43;padding-top:10px}
.own-summary span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#8fa9ae}
.own-summary p{margin:5px 0 0;font-size:12.5px;color:#cfe3e6;line-height:1.5}
.own-note{font-size:11px;color:#7f989d;margin:12px 0 0;font-style:italic}
.lab-error{color:#f19c9c;font-size:13px;padding:16px}

/* ---------- workflow rail ---------- */
.rail-shell{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:860px){.rail-shell{grid-template-columns:.85fr 1.15fr;align-items:start}}
.rail-steps{display:grid;gap:7px}
.rail-step{display:flex;gap:12px;align-items:flex-start;text-align:left;background:#0a1c22;border:1px solid #274751;border-radius:10px;padding:12px 14px;cursor:pointer;color:#d7e6e9;transition:.16s}
.rail-step:hover{border-color:#4b7c88}
.rail-step[aria-selected=true]{border-color:var(--gold);background:#1a2318;box-shadow:inset 0 0 0 1px #f4c86e33}
.rail-step .n{font:700 13px Rajdhani,sans-serif;color:var(--gold);letter-spacing:.06em;min-width:22px}
.rail-step b{display:block;font:600 14px 'DM Sans',sans-serif;margin-bottom:2px}
.rail-step span{display:block;font-size:11.5px;color:#93aeb3;line-height:1.4}
.rail-detail{background:linear-gradient(150deg,#0d222a,#071418);border:1px solid #2e515b;border-radius:14px;padding:22px;min-height:210px}
.rail-n{font:700 11px Rajdhani,sans-serif;letter-spacing:.3em;color:var(--cyan)}
.rail-detail h3{margin:8px 0 10px}
.rail-detail p{color:#cfe0e3;font-size:14px;margin:0}
.rail-meta{display:flex;align-items:baseline;gap:10px;margin-top:16px;border-top:1px solid #1e3741;padding-top:12px}
.rail-meta span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#8fa9ae}
.rail-meta b{font:700 18px Rajdhani,sans-serif;color:var(--gold)}

/* ---------- before / after ---------- */
.sim-cols{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:760px){.sim-cols{grid-template-columns:1fr 1fr}}
.sim-col{background:#0a1c22;border:1px solid #274751;border-radius:14px;padding:18px}
.sim-col.good{border-color:#3c6a52;background:linear-gradient(160deg,#0c241f,#07161a)}
.sim-col h3{font-size:19px;margin:0 0 14px}
.sim-col.bad h3{color:#e7b9b0}
.sim-col.good h3{color:#a9e0bb}
.sim-list{list-style:none;padding:0;margin:0;border-left:1px solid #24424b;margin-left:6px}
/* Visible by default. The reveal is an enhancement applied only when the
   column is actually seen — so print, screenshots, no-JS and any browser whose
   observer never fires still show the content. */
.sim-list li{position:relative;padding:0 0 16px 20px;opacity:1;transform:none;transition:.45s}
.sim-cols.animating .sim-list li{opacity:0;transform:translateX(-4px)}
.sim-cols.animating .sim-list li.in{opacity:1;transform:none}
.sim-list li:before{content:'';position:absolute;left:-4.5px;top:5px;width:8px;height:8px;border-radius:50%;background:#3d6a76;border:1px solid #071518}
.good .sim-list li:before{background:#7fd39b}
.bad .sim-list li:before{background:#c07a6c}
.sim-t{display:block;font:600 11px 'DM Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#93aeb3}
.sim-list li p{margin:2px 0 0;font-size:13px;color:#d6e6e8}
.sim-metrics{display:grid;gap:10px;margin-top:16px;grid-template-columns:1fr}
@media(min-width:760px){.sim-metrics{grid-template-columns:repeat(3,1fr)}}
.met{background:#0b1e25;border:1px solid #274751;border-radius:11px;padding:13px 15px}
.met>span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#93aeb3}
.met-pair{display:flex;align-items:baseline;gap:9px;margin-top:5px;flex-wrap:wrap}
.met-a{font:700 20px Rajdhani,sans-serif;color:#d9a79c;text-decoration:line-through;text-decoration-thickness:1px}
.met-pair i{color:#5d7a80;font-style:normal;font-size:11px}
.met-b{font:700 22px Rajdhani,sans-serif;color:#9be0ae}
.sim-play{margin-top:16px;background:transparent;border:1px solid #3c606a;color:#cfe3e6;border-radius:8px;padding:8px 14px;font:600 12px 'DM Sans',sans-serif;cursor:pointer}
.sim-play:hover{border-color:var(--gold);color:var(--gold)}
.sim-note{font-size:11.5px;color:#8ba3a8;margin-top:12px}

/* ---------- summary ---------- */
.summary-box{background:linear-gradient(150deg,#10262d,#071418);border:1px solid #3d6470;border-radius:16px;padding:24px}
#summ-text p{font-size:14.5px;color:#d8e8ea;margin:0 0 10px}
#summ-text b{color:#fff}
.summ-ref{font-size:11.5px;color:#8ba3a8;margin:10px 0 0}
.summ-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}

@media(prefers-reduced-motion:reduce){
  .hero-demo-head .live i,.dots i{animation:none}
  .msg,.own-fields>div{animation:none}
  .hx-meta,.hx-msg,.hx-rows,.hx-handoff,.sim-list li{opacity:1;transform:none}
}

/* Tap targets: 44px minimum, measured on a 360px viewport. */
.hero-replay{min-height:44px;padding:10px 16px}
.lab-form button{min-height:44px}
.chip-btn{min-height:44px;display:inline-flex;align-items:center}
/* Reduced motion is a CSS guarantee, not a JS timing assumption: whatever the
   module does, nothing may sit invisible when motion is suppressed. */
@media (prefers-reduced-motion: reduce){
  .sim-cols.animating .sim-list li{opacity:1!important;transform:none!important}
  .hx-meta,.hx-msg,.hx-rows,.hx-handoff{opacity:1!important;transform:none!important}
}