/* ============================================================
   AQ2 Homepage Interactive Widgets — shared CSS
   Scoped under .aq2-ew so it can never affect anything outside
   these three widgets, on any page. Ported 1:1 from the original
   AQURIT mock-up markup/classes (colors reference the same CSS
   variables already defined by 01-aq2-global.css — this file
   falls back to literal hex values too, so it still renders
   correctly even on a page that hasn't loaded the global stylesheet).
   ============================================================ */

.aq2-ew{
  --aq2-primary:      var(--color-primary, #A32D2D);
  --aq2-primary-soft: var(--color-primary-soft, #FBEDEC);
  --aq2-primary-deep: var(--color-primary-deep, #5A1A1A);
  --aq2-navy:         var(--color-navy, #1C2A3A);
  --aq2-teal:         var(--color-teal, #0F6E56);
  --aq2-teal-soft:    var(--color-teal-soft, #E1F5EE);
  --aq2-gold:         var(--color-gold, #B8892B);
  --aq2-gold-soft:    var(--color-gold-soft, #FDF4E3);
  --aq2-ink:          var(--color-ink, #211D1A);
  --aq2-body:         var(--color-body, #5C554E);
  --aq2-muted:        var(--color-muted, #9A9089);
  --aq2-line:         var(--color-line, #EBE6E0);
  --aq2-surface:      var(--color-surface, #F6F2EC);
  --aq2-white:        var(--color-white, #FDFBF7);
  --aq2-radius-lg:    var(--radius-lg, 18px);
  --aq2-radius-md:    var(--radius-md, 12px);
  --aq2-radius-sm:    var(--radius-sm, 8px);
}
.aq2-ew *{box-sizing:border-box}

/* ---------------- Step Demo ---------------- */
.aq2-ew .aq2-stepdemo{display:grid;grid-template-columns:0.85fr 1.15fr;gap:20px;align-items:stretch}
.aq2-ew .aq2-stepdemo-steps{display:flex;flex-direction:column;gap:10px}
.aq2-ew .aq2-stepdemo-cue{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--aq2-primary);margin-bottom:10px;display:flex;align-items:center;gap:7px}
.aq2-ew .aq2-stepdemo-cue .pdot{width:8px;height:8px;border-radius:50%;background:var(--aq2-primary);animation:aq2-pulse 1.6s infinite;flex-shrink:0}
@keyframes aq2-pulse{0%{box-shadow:0 0 0 0 rgba(163,45,45,.5)}70%{box-shadow:0 0 0 7px rgba(163,45,45,0)}100%{box-shadow:0 0 0 0 rgba(163,45,45,0)}}
.aq2-ew .aq2-stepdemo-step{position:relative;display:flex;gap:13px;align-items:flex-start;text-align:left;background:var(--aq2-white);border:1px solid var(--aq2-line);border-radius:14px;padding:16px 34px 16px 18px;cursor:pointer;transition:all .15s;font-family:inherit;width:100%}
.aq2-ew .aq2-stepdemo-step:hover{border-color:#D8C4C0}
.aq2-ew .aq2-stepdemo-step.active{border-color:var(--aq2-primary);background:var(--aq2-primary-soft);box-shadow:0 2px 10px rgba(163,45,45,.08)}
.aq2-ew .aq2-stepdemo-step::after{content:"\203A";position:absolute;right:15px;top:50%;transform:translateY(-50%);color:var(--aq2-muted);font-size:22px;line-height:1}
.aq2-ew .aq2-stepdemo-step.active::after{color:var(--aq2-primary)}
.aq2-ew .aq2-stepdemo-num{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--aq2-line);color:var(--aq2-body);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.aq2-ew .aq2-stepdemo-step.active .aq2-stepdemo-num{background:var(--aq2-primary);color:#fff}
.aq2-ew .aq2-stepdemo-step strong{display:block;font-size:16px;color:var(--aq2-ink);margin-bottom:2px}
.aq2-ew .aq2-stepdemo-step small{font-size:13px;color:var(--aq2-body);line-height:1.4}
.aq2-ew .aq2-stepdemo-stage{position:relative;min-height:400px}
.aq2-ew .aq2-stepdemo-panel{display:none;height:100%;border:1px solid var(--aq2-line);border-radius:var(--aq2-radius-lg);background:var(--aq2-surface);padding:20px 20px 24px;text-align:center;flex-direction:column;align-items:center;justify-content:center}
.aq2-ew .aq2-stepdemo-panel.active{display:flex}
.aq2-ew .aq2-stepdemo-panel .tag{display:inline-block;background:var(--aq2-primary);color:#fff;font-size:11px;font-weight:700;letter-spacing:.08em;padding:4px 12px;border-radius:20px;margin-bottom:12px}
.aq2-ew .aq2-stepdemo-panel h4{font-size:20px;font-weight:600;color:var(--aq2-primary-deep);margin-bottom:6px}
.aq2-ew .aq2-stepdemo-panel .rows{width:100%;max-width:280px;text-align:left;margin-top:4px}
.aq2-ew .aq2-stepdemo-panel .row-item{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--aq2-body);padding:8px 0;border-bottom:1px solid #F0ECE6}
.aq2-ew .aq2-stepdemo-panel .row-item:last-child{border-bottom:none}
.aq2-ew .aq2-stepdemo-panel .row-item b{color:var(--aq2-ink)}
.aq2-ew .aq2-stepdemo-clock{position:absolute;top:16px;right:18px;font-size:15px;font-weight:700;color:var(--aq2-primary);background:var(--aq2-white);border:1px solid var(--aq2-primary-soft);border-radius:20px;padding:4px 12px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.aq2-ew .aq2-stepdemo-clock.done{background:var(--aq2-primary);color:#fff;border-color:var(--aq2-primary)}
@media(max-width:760px){.aq2-ew .aq2-stepdemo{grid-template-columns:1fr}}

/* ---------------- Industry Tabs ---------------- */
.aq2-ew .aq2-indtabs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:28px}
.aq2-ew .aq2-indtab{border:1px solid var(--aq2-line);background:var(--aq2-white);border-radius:22px;padding:9px 18px;font-size:14px;color:var(--aq2-body);font-weight:500;cursor:pointer}
.aq2-ew .aq2-indtab.active{background:var(--aq2-primary);color:#fff;border-color:var(--aq2-primary)}
.aq2-ew .aq2-indpanel-wrap{position:relative}
.aq2-ew .aq2-indpanel{display:none;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.aq2-ew .aq2-indpanel.active{display:grid}
.aq2-ew .aq2-indpanel h3{font-size:26px;font-weight:700;color:var(--aq2-ink);letter-spacing:-.015em;line-height:1.3;margin-bottom:10px}
.aq2-ew .aq2-indpanel p{font-size:16px;color:var(--aq2-body);line-height:1.55;margin-bottom:14px}
.aq2-ew .aq2-indpanel blockquote{border-left:3px solid var(--aq2-primary);padding-left:14px;font-style:italic;color:var(--aq2-ink);margin:0 0 8px}
.aq2-ew .aq2-indlearn{display:inline-block;color:var(--aq2-primary);font-weight:600;font-size:15px;margin-top:8px;text-decoration:none}
.aq2-ew .aq2-indlearn:hover{text-decoration:underline}
@media(max-width:760px){.aq2-ew .aq2-indpanel{grid-template-columns:1fr;gap:18px}}

/* ---------------- shared "mini app" mock panel (used inside industry tabs) ---------------- */
.aq2-ew .aq2-mini{width:100%;max-width:100%;background:#fff;border:1px solid var(--aq2-line);border-radius:var(--aq2-radius-md);box-shadow:0 12px 32px rgba(33,29,26,.12);overflow:hidden;text-align:left;margin:14px auto 0}
.aq2-ew .aq2-mini-bar{background:var(--aq2-surface);border-bottom:1px solid var(--aq2-line);padding:11px 15px;font-size:13px;font-weight:600;color:var(--aq2-body);display:flex;align-items:center;gap:7px}
.aq2-ew .aq2-mini-bar .dd{width:9px;height:9px;border-radius:50%;background:#D8CFC4}
.aq2-ew .aq2-mini-body{padding:18px 20px}
.aq2-ew .aq2-mini-row{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--aq2-body);padding:10px 0;border-bottom:1px solid #F0ECE6}
.aq2-ew .aq2-mini-row:last-child{border-bottom:none}
.aq2-ew .aq2-mini-row b{color:var(--aq2-ink)}
.aq2-ew .aq2-mini-check{display:flex;align-items:center;gap:9px;font-size:14.5px;color:#0B4A3A;padding:8px 0}
.aq2-ew .aq2-mini-check .ck{color:var(--aq2-teal);font-weight:800}

/* ---------------- Product Tour ---------------- */
.aq2-ew .aq2-tourframe{max-width:900px;margin:0 auto;border-radius:14px;overflow:hidden;box-shadow:0 24px 60px rgba(33,29,26,.20);border:1px solid var(--aq2-line);background:#fff}
.aq2-ew .aq2-tourbar{background:#E7E2DB;padding:10px 14px;display:flex;align-items:center;gap:7px}
.aq2-ew .aq2-tourbar .d{width:11px;height:11px;border-radius:50%}
.aq2-ew .aq2-tourbar .url{margin-left:10px;background:#fff;border-radius:6px;padding:4px 14px;font-size:12px;color:#8A8078}
.aq2-ew .aq2-tourstage{position:relative;min-height:440px;background:#fff;display:flex}
.aq2-ew .aq2-tourside{width:180px;background:var(--aq2-navy);color:#C9D6E3;padding:16px 12px;flex-shrink:0}
.aq2-ew .aq2-tourside .brand{color:#fff;font-weight:700;font-size:15px}
.aq2-ew .aq2-tourside .org{font-size:11px;color:#7F9CB5;margin-bottom:16px}
.aq2-ew .aq2-tourside .ni{font-size:13px;padding:7px 10px;border-radius:7px;margin-bottom:2px;color:#C9D6E3}
.aq2-ew .aq2-tourside .ni.on{background:rgba(255,255,255,.12);color:#fff;font-weight:600}
.aq2-ew .aq2-tourside .cat{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:#5E7488;margin:13px 0 4px 10px}
.aq2-ew .aq2-tourmain{flex:1;padding:26px 28px;position:relative}
.aq2-ew .aq2-scene{display:none}.aq2-ew .aq2-scene.on{display:block}
.aq2-ew .aq2-sgreet{font-size:20px;font-weight:700;color:var(--aq2-ink)}
.aq2-ew .aq2-smeta{font-size:12px;color:var(--aq2-muted);margin-bottom:18px}
.aq2-ew .aq2-ssec{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--aq2-muted);margin:14px 0 9px}
.aq2-ew .aq2-thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:12px}
.aq2-ew .aq2-thumb{aspect-ratio:1.35;background:#F1ECE4;border:1px solid #E3DACF;border-radius:6px}
.aq2-ew .aq2-field{display:flex;justify-content:space-between;align-items:center;background:var(--aq2-surface);border:1px solid var(--aq2-line);border-radius:var(--aq2-radius-sm);padding:11px 13px;margin-bottom:8px;font-size:13.5px}
.aq2-ew .aq2-field .fl{color:var(--aq2-muted)}
.aq2-ew .aq2-field .fv{color:var(--aq2-ink);font-weight:600;display:flex;align-items:center;gap:7px}
.aq2-ew .aq2-aib{background:var(--aq2-teal-soft);color:var(--aq2-teal);font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px}
.aq2-ew .aq2-sbtn{background:var(--aq2-primary);color:#fff;font-size:13.5px;font-weight:600;text-align:center;padding:11px;border-radius:9px;margin-top:6px}
.aq2-ew .aq2-totrow{display:flex;justify-content:space-between;font-size:13.5px;color:var(--aq2-ink);font-weight:700;padding:10px 2px;border-top:1px solid var(--aq2-line);margin-top:6px}
.aq2-ew .aq2-chk{display:flex;align-items:center;gap:9px;font-size:14px;color:#0B4A3A;padding:8px 0}
.aq2-ew .aq2-chk .ck{color:var(--aq2-teal);font-weight:800;font-size:16px}
.aq2-ew .aq2-ring{position:absolute;border:2px solid var(--aq2-primary);border-radius:10px;box-shadow:0 0 0 4000px rgba(28,42,58,.42);transition:all .35s;pointer-events:none;z-index:5}
.aq2-ew .aq2-beacon{position:absolute;width:18px;height:18px;border-radius:50%;background:var(--aq2-primary);z-index:7;transform:translate(-50%,-50%);animation:aq2-beacon 1.5s infinite;pointer-events:none}
@keyframes aq2-beacon{0%{box-shadow:0 0 0 0 rgba(163,45,45,.55)}70%{box-shadow:0 0 0 16px rgba(163,45,45,0)}100%{box-shadow:0 0 0 0 rgba(163,45,45,0)}}
.aq2-ew .aq2-ttip{position:absolute;z-index:8;background:#fff;border-radius:12px;box-shadow:0 12px 34px rgba(33,29,26,.28);padding:16px 18px;width:270px}
.aq2-ew .aq2-ttip .tstep{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--aq2-primary);margin-bottom:6px}
.aq2-ew .aq2-ttip h4{font-size:16px;color:var(--aq2-ink);margin-bottom:5px;letter-spacing:-.01em}
.aq2-ew .aq2-ttip p{font-size:13.5px;color:var(--aq2-body);line-height:1.5}
.aq2-ew .aq2-ttip .trow{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.aq2-ew .aq2-dots{display:flex;gap:6px}
.aq2-ew .aq2-dots i{width:7px;height:7px;border-radius:50%;background:var(--aq2-line);font-style:normal}
.aq2-ew .aq2-dots i.on{background:var(--aq2-primary)}
.aq2-ew .aq2-tnav{display:flex;gap:8px}
.aq2-ew .aq2-tnav button{font-family:inherit;font-size:13px;font-weight:600;border-radius:8px;padding:7px 14px;cursor:pointer;border:1px solid var(--aq2-line);background:#fff;color:var(--aq2-body)}
.aq2-ew .aq2-tnav button.pri{background:var(--aq2-primary);color:#fff;border-color:var(--aq2-primary)}
.aq2-ew .aq2-tnav button:disabled{opacity:.4;cursor:default}
.aq2-ew .aq2-tourhint{text-align:center;font-size:13px;color:var(--aq2-muted);margin-top:16px}
.aq2-ew .aq2-tourhint b{color:var(--aq2-primary)}
@media(max-width:700px){.aq2-ew .aq2-tourstage{flex-direction:column}}