/* ============================================================
   IVR + CALL RECORDING page
   Motion system: animated diagrams, no text bricks.
   Brand: #1b8df6 / #6fc1ff / #0044ff. Reduced-motion safe.
   ============================================================ */

/* ---------- hero phone-ring visual ---------- */
.ivr-hero { position: relative; overflow: hidden; }
.ivr-hero-viz {
  position: absolute; z-index: 1; right: clamp(-80px, 4vw, 120px); top: 50%;
  transform: translateY(-50%); width: 460px; height: 460px;
  pointer-events: none; display: none;
}
@media (min-width: 1080px) { .ivr-hero-viz { display: grid; place-items: center; } }
.ivr-hero-viz .rw {
  position: absolute; border-radius: 50%; border: 1.5px solid rgba(27,141,246,0.45);
  width: 120px; height: 120px; opacity: 0; animation: ivrRing 4s ease-out infinite;
}
.ivr-hero-viz .rw.d2 { animation-delay: 1s; }
.ivr-hero-viz .rw.d3 { animation-delay: 2s; }
.ivr-hero-viz .rw.d4 { animation-delay: 3s; }
@keyframes ivrRing { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: scale(3.4); opacity: 0; } }
.ivr-hero-viz .ph-core {
  width: 110px; height: 110px; border-radius: 28px; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 38%, rgba(27,141,246,0.25), rgba(14,24,44,0.7));
  box-shadow: 0 0 50px rgba(27,141,246,0.4), inset 0 0 0 1px rgba(173,229,255,0.2);
  z-index: 2; animation: ivrCoreBreathe 2.4s ease-in-out infinite;
}
.ivr-hero-viz .ph-core i { font-size: 3rem; color: #6fc1ff; }
@keyframes ivrCoreBreathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }

/* ---------- section shell ---------- */
.ivr-sec { position: relative; }
.ivr-head { max-width: 60ch; }
.ivr-eyebrow {
  display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: #6fc1ff; margin-bottom: 0.8rem;
}

/* ---------- the no-click money leak (split: bad vs good) ---------- */
.noclick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin-top: 2.5rem; }
.nc-card {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.5rem;
  background: rgba(14,24,44,0.5); position: relative; overflow: hidden;
}
.nc-card.bad { border-color: rgba(255,99,99,0.3); }
.nc-card.good { border-color: rgba(76,201,143,0.35); }
.nc-tag {
  display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 0.25rem 0.6rem; border-radius: 999px;
  margin-bottom: 1rem;
}
.nc-card.bad .nc-tag { background: rgba(255,99,99,0.14); color: #ff8c8c; }
.nc-card.good .nc-tag { background: rgba(76,201,143,0.14); color: #6fe0aa; }
.nc-chat { display: flex; flex-direction: column; gap: 0.55rem; }
.nc-bubble {
  max-width: 88%; padding: 0.55rem 0.8rem; border-radius: 14px; font-size: 0.86rem; line-height: 1.4;
}
.nc-bubble.them { align-self: flex-start; background: rgba(173,229,255,0.1); color: #dceaf8; border-bottom-left-radius: 5px; }
.nc-bubble.you { align-self: flex-end; background: linear-gradient(135deg, #1b8df6, #0a6fd4); color: #fff; border-bottom-right-radius: 5px; }
.nc-bubble.hangup { align-self: flex-start; background: rgba(255,99,99,0.16); color: #ffb0b0; font-style: italic; }
.nc-outcome {
  margin-top: 1.1rem; padding-top: 1rem; border-top: 1px dashed var(--line);
  font-weight: 800; font-size: 0.95rem;
}
.nc-card.bad .nc-outcome { color: #ff8c8c; }
.nc-card.good .nc-outcome { color: #6fe0aa; }

/* the 10% stat band */
.leak-band {
  margin-top: 2.5rem; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.8rem;
  background: radial-gradient(60% 120% at 0% 0%, rgba(27,141,246,0.12), transparent 70%), rgba(14,24,44,0.5);
}
.leak-band .big { font-size: clamp(2.6rem, 6vw, 4rem); font-weight: 900; color: #6fc1ff; line-height: 1; }
.leak-band p { margin: 0; color: var(--text-dim); max-width: 48ch; }

/* ---------- generic workflow strip (recording / survey) ---------- */
.wf {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; margin-top: 2.5rem;
  align-items: stretch;
}
.wf-step {
  position: relative; border: 1px solid var(--line); border-radius: 14px; padding: 1.3rem 1.1rem;
  background: rgba(14,24,44,0.55); margin: 0 0.5rem; text-align: center;
  opacity: 0.5; animation: wfPulse 8s ease-in-out infinite;
}
.wf-step:nth-child(1) { animation-delay: 0s; }
.wf-step:nth-child(2) { animation-delay: 1.6s; }
.wf-step:nth-child(3) { animation-delay: 3.2s; }
.wf-step:nth-child(4) { animation-delay: 4.8s; }
.wf-step:nth-child(5) { animation-delay: 6.4s; }
@keyframes wfPulse {
  0%, 8% { opacity: 0.5; border-color: var(--line); }
  14%, 22% { opacity: 1; border-color: rgba(27,141,246,0.7); box-shadow: 0 8px 30px rgba(27,141,246,0.25); }
  30%, 100% { opacity: 0.5; border-color: var(--line); }
}
.wf-step .wf-ic {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  margin: 0 auto 0.8rem; font-size: 1.3rem; color: #6fc1ff; background: rgba(27,141,246,0.14);
}
.wf-step b { display: block; font-size: 0.95rem; margin-bottom: 0.3rem; }
.wf-step span { display: block; font-size: 0.78rem; color: var(--text-dim); line-height: 1.4; }
.wf-step .wf-no {
  position: absolute; top: -10px; left: -10px; width: 24px; height: 24px; border-radius: 50%;
  background: #1b8df6; color: #fff; font-size: 0.74rem; font-weight: 900; display: grid; place-items: center;
}

/* ---------- post-call survey pass/fail ---------- */
.survey-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin-top: 2.5rem; }
.sv-card {
  border-radius: var(--radius); padding: 1.8rem 1.6rem; text-align: center; position: relative; overflow: hidden;
  border: 1px solid var(--line); background: rgba(14,24,44,0.5);
}
.sv-card.pass { border-color: rgba(76,201,143,0.4); }
.sv-card.fail { border-color: rgba(255,99,99,0.4); }
.sv-emoji { font-size: 2.6rem; line-height: 1; margin-bottom: 0.8rem; display: inline-block; }
.sv-card.pass .sv-emoji { animation: svBounce 2.4s ease-in-out infinite; }
@keyframes svBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.sv-card h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.sv-card.pass h3 { color: #6fe0aa; }
.sv-card.fail h3 { color: #ff8c8c; }
.sv-card p { color: var(--text-dim); font-size: 0.9rem; margin: 0; }
.sv-notify {
  margin-top: 1rem; display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.78rem;
  font-weight: 700; padding: 0.4rem 0.8rem; border-radius: 999px;
}
.sv-card.fail .sv-notify { background: rgba(255,99,99,0.14); color: #ffb0b0; }
.sv-card.pass .sv-notify { background: rgba(76,201,143,0.14); color: #6fe0aa; }

/* ---------- reasons grid (why record) ---------- */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2.5rem; }
.why-card {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.4rem;
  background: rgba(14,24,44,0.5); transition: transform 0.25s, border-color 0.25s;
}
.why-card:hover { transform: translateY(-4px); border-color: rgba(27,141,246,0.45); }
.why-card .why-ic { font-size: 1.8rem; color: #6fc1ff; margin-bottom: 0.9rem; display: block; }
.why-card h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.why-card p { color: var(--text-dim); font-size: 0.9rem; margin: 0; }

/* ---------- AI investigation web (the dispute story) ---------- */
.web-zone {
  margin-top: 2.5rem; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2rem 1.8rem; background:
    radial-gradient(70% 100% at 100% 0%, rgba(27,141,246,0.1), transparent 70%), rgba(14,24,44,0.5);
}
.web-viz { position: relative; height: 280px; margin-top: 1.5rem; overflow: hidden; }
.web-node {
  position: absolute; transform: translate(-50%, -50%);
  border: 1px solid var(--line); border-radius: 12px; padding: 0.55rem 0.85rem;
  background: rgba(11,20,36,0.92); font-size: 0.78rem; font-weight: 700; white-space: nowrap;
  display: flex; align-items: center; gap: 0.4rem; z-index: 2;
}
.web-node i { color: #6fc1ff; }
.web-node.center {
  border-color: rgba(27,141,246,0.7); box-shadow: 0 0 24px rgba(27,141,246,0.35);
  font-size: 0.85rem;
}
.web-node.center i { color: #fff; }
.web-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.web-svg line { stroke: rgba(111,193,255,0.4); stroke-width: 1.5; stroke-dasharray: 4 4; animation: webDash 18s linear infinite; }
@keyframes webDash { to { stroke-dashoffset: -200; } }

/* ---------- Shmo Calls coming soon ---------- */
.shmocalls {
  position: relative; overflow: hidden;
  background: radial-gradient(80% 140% at 80% 0%, rgba(232,181,63,0.1), transparent 70%), var(--ink-2);
}
.shmocalls-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center; }
.sc-badge {
  display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; color: #ffd479;
  background: rgba(232,181,63,0.14); border: 1px solid rgba(232,181,63,0.35);
  padding: 0.35rem 0.8rem; border-radius: 999px; margin-bottom: 1.2rem;
}
.shmocalls h2 .sc-name { color: #ffd479; }
.sc-feats { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 1.6rem; }
.sc-feat {
  display: flex; align-items: flex-start; gap: 0.8rem; font-size: 0.92rem;
  border: 1px solid var(--line); border-radius: 12px; padding: 0.85rem 1rem; background: rgba(14,24,44,0.5);
}
.sc-feat i { color: #ffd479; font-size: 1.2rem; flex: 0 0 auto; margin-top: 0.1rem; }
.sc-feat b { color: var(--text); }
.sc-feat span { color: var(--text-dim); }
/* the marshmallow-on-a-phone teaser stage */
.sc-stage { position: relative; display: grid; place-items: center; min-height: 320px; }
.sc-mallow {
  width: 180px; height: auto; filter: drop-shadow(0 16px 40px rgba(232,181,63,0.3));
  animation: scFloat 5s ease-in-out infinite; z-index: 2;
}
@keyframes scFloat { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-14px) rotate(2deg); } }
.sc-glow {
  position: absolute; width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,181,63,0.28), transparent 70%); filter: blur(8px);
  animation: scGlow 4s ease-in-out infinite; z-index: 1;
}
@keyframes scGlow { 0%,100% { opacity: 0.6; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.05); } }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .noclick-grid, .survey-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .wf { grid-auto-flow: row; grid-auto-columns: auto; }
  .wf-step { margin: 0.4rem 0; }
  .shmocalls-grid { grid-template-columns: 1fr; gap: 2rem; }
  .web-node { font-size: 0.68rem; padding: 0.4rem 0.6rem; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ivr-hero-viz .rw, .ivr-hero-viz .ph-core, .wf-step, .sv-card.pass .sv-emoji,
  .sc-mallow, .sc-glow, .web-svg line, .ivr-hero-viz .ph-core i { animation: none !important; }
  .wf-step { opacity: 1; }
  .ivr-hero-viz .rw { opacity: 0.25; }
}

/* ============================================================
   v2 REBUILD (20260702) — phone-tree hero · greeting script ·
   after-hours scene · why-record rows
   ============================================================ */

/* ---------- hero: live phone-tree mock ---------- */
.ivr-tree{
  display:none;position:absolute;z-index:2;right:clamp(24px,4vw,110px);top:50%;
  transform:translateY(-50%);width:min(420px,34vw);
}
@media(min-width:1080px){
  .ivr-tree{display:block;}
  .ivr-hero .wrap{padding-right:clamp(420px,40vw,500px);}
  .ivr-hero-viz{display:none !important;}
}
.tree-panel{
  border-radius:22px;overflow:hidden;
  border:1px solid rgba(127,166,204,.25);
  background:linear-gradient(180deg, rgba(15,31,54,.9), rgba(11,20,36,.96));
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.tp-bar{
  display:flex;align-items:center;gap:.6rem;padding:.8rem 1.1rem;
  background:rgba(10,19,34,.9);border-bottom:1px solid rgba(127,166,204,.15);
  font-size:.78rem;font-weight:700;color:#9db8d6;
}
.tp-bar i{color:#6fc1ff;animation:tpRing 2.4s ease-in-out infinite;}
@keyframes tpRing{0%,70%,100%{transform:rotate(0);}75%{transform:rotate(-14deg);}85%{transform:rotate(10deg);}95%{transform:rotate(-6deg);}}
.tp-bar b{color:#eef4fb;}
.tp-body{padding:1.1rem;display:flex;flex-direction:column;gap:.55rem;min-height:250px;}
.tp-line{
  display:flex;align-items:center;gap:.7rem;
  padding:.6rem .8rem;border-radius:12px;
  background:rgba(21,39,65,.6);border:1px solid rgba(127,166,204,.16);
  font-size:.84rem;color:#cfe3f7;font-weight:600;
  opacity:0;transform:translateY(6px);
  transition:opacity .4s ease, transform .4s ease, border-color .3s ease, background .3s ease;
}
.tp-line.show{opacity:1;transform:translateY(0);}
.tp-line .key{
  flex:0 0 auto;width:26px;height:26px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(27,141,246,.15);border:1px solid rgba(27,141,246,.5);
  color:#6fc1ff;font-weight:800;font-size:.8rem;
  transition:background .25s ease,color .25s ease,transform .25s ease;
}
.tp-line.pressed{border-color:rgba(27,141,246,.6);background:rgba(27,141,246,.1);}
.tp-line.pressed .key{background:#1b8df6;color:#fff;transform:scale(1.15);}
.tp-result{
  margin-top:.3rem;display:flex;align-items:center;gap:.5rem;justify-content:center;
  font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#7fe0a8;opacity:0;transition:opacity .4s ease;
  padding:.55rem .8rem;border-radius:999px;
  background:rgba(53,208,127,.1);border:1px solid rgba(53,208,127,.3);
}
.tp-result.show{opacity:1;}
.tp-cap{
  padding:.7rem 1.1rem .9rem;font-size:.72rem;color:#7fa6cc;text-align:center;
  border-top:1px dashed rgba(127,166,204,.15);
}

/* ---------- the greeting, word for word ---------- */
.ivr-script{
  max-width:560px;margin:2.4rem auto 0;border-radius:18px;overflow:hidden;
  border:1px solid rgba(127,166,204,.22);
  background:linear-gradient(180deg, rgba(15,31,54,.7), rgba(11,20,36,.9));
}
.is-head{
  display:flex;align-items:center;gap:.6rem;padding:.85rem 1.2rem;
  font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#7fc1ff;background:rgba(27,141,246,.07);
  border-bottom:1px solid rgba(127,166,204,.14);
}
.is-line{
  display:flex;gap:.8rem;align-items:flex-start;
  padding:.85rem 1.2rem;border-bottom:1px solid rgba(127,166,204,.09);
  font-size:.92rem;line-height:1.55;color:#cfe3f7;
}
.is-line:last-child{border-bottom:none;}
.is-line i{flex:0 0 auto;color:#6fc1ff;font-size:1.05rem;margin-top:.15rem;}
.is-line.caller{background:rgba(27,141,246,.05);}
.is-line.caller i{color:#7fe0a8;}

/* ---------- after hours scene ---------- */
.night-scene{
  max-width:720px;margin:2.4rem auto 0;
  display:grid;grid-template-columns:auto 1fr;gap:1.6rem;align-items:center;
  border-radius:20px;padding:1.8rem 2rem;
  border:1px solid rgba(127,166,204,.2);
  background:
    radial-gradient(70% 120% at 20% 0%, rgba(27,141,246,.1), transparent 60%),
    linear-gradient(180deg, #0a1322, #070e1b);
}
.ns-clock{text-align:center;}
.ns-clock b{
  display:block;font-size:2.2rem;font-weight:900;letter-spacing:-.02em;color:#eef4fb;
  font-variant-numeric:tabular-nums;
}
.ns-closed{
  display:inline-block;margin-top:.5rem;font-size:.62rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;padding:.3rem .7rem;border-radius:6px;
  background:rgba(210,74,74,.14);color:#f2a0a0;border:1px solid rgba(210,74,74,.35);
}
.ns-answer{display:flex;flex-direction:column;gap:.6rem;}
.ns-bubble{
  align-self:flex-start;padding:.75rem 1rem;border-radius:14px;border-bottom-left-radius:5px;
  background:rgba(21,39,65,.85);border:1px solid rgba(127,166,204,.25);
  font-size:.92rem;color:#cfe3f7;font-weight:600;line-height:1.5;
}
.ns-tag{
  align-self:flex-start;display:inline-flex;align-items:center;gap:.4rem;
  font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#7fe0a8;padding:.3rem .7rem;border-radius:999px;
  background:rgba(53,208,127,.1);border:1px solid rgba(53,208,127,.3);
}
@media(max-width:600px){.night-scene{grid-template-columns:1fr;text-align:center;}
  .ns-answer{align-items:center;}.ns-bubble,.ns-tag{align-self:center;}}

/* ---------- survey icons (replace emoji) ---------- */
.sv-ic{
  display:inline-flex;width:56px;height:56px;align-items:center;justify-content:center;
  border-radius:16px;font-size:1.7rem;margin-bottom:.7rem;
}
.sv-card.pass .sv-ic{background:rgba(53,208,127,.13);color:#7fe0a8;border:1px solid rgba(53,208,127,.35);}
.sv-card.fail .sv-ic{background:rgba(210,74,74,.12);color:#f2a0a0;border:1px solid rgba(210,74,74,.35);}

/* ============================================================
   v3 FULL REBUILD (20260702) — education arc
   New units: split-focus scene w/ toggle · outcomes band ·
   objection card. Kept: tree hero, no-click, survey, web, shmocalls
   ============================================================ */

/* ---------- the two-customers problem: before/after toggle ---------- */
.focus-scene{max-width:860px;margin:2.6rem auto 0;}
.fs-toggle{display:flex;justify-content:center;margin-bottom:1.6rem;}
.fs-btn{
  display:inline-flex;align-items:center;gap:.7rem;cursor:pointer;
  border:1px solid rgba(127,166,204,.3);border-radius:999px;
  background:rgba(15,31,54,.8);padding:.5rem .6rem;
  font:inherit;color:#cfe3f7;font-weight:800;font-size:.82rem;
}
.fs-btn span{padding:.45rem 1rem;border-radius:999px;transition:background .3s ease,color .3s ease;}
.fs-btn .fs-off{background:rgba(210,74,74,.18);color:#f2a0a0;}
.fs-btn .fs-on{color:#7fa6cc;}
.focus-scene.with .fs-btn .fs-off{background:none;color:#7fa6cc;}
.focus-scene.with .fs-btn .fs-on{background:rgba(53,208,127,.16);color:#7fe0a8;}
.fs-stage{
  display:grid;grid-template-columns:1fr auto 1fr;gap:1.2rem;align-items:stretch;
}
.fs-side{
  border-radius:18px;padding:1.4rem 1.3rem;text-align:center;
  border:1px solid rgba(210,74,74,.35);background:rgba(210,74,74,.05);
  transition:border-color .4s ease, background .4s ease;
}
.fs-side .fs-ic{
  display:inline-flex;width:52px;height:52px;border-radius:14px;
  align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:.7rem;
  background:rgba(127,166,204,.1);color:#9db8d6;border:1px solid rgba(127,166,204,.25);
}
.fs-side .fs-quote{
  font-size:.95rem;font-weight:700;color:#eef4fb;line-height:1.4;
}
.fs-side .fs-mood{
  display:inline-block;margin-top:.8rem;font-size:.62rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;padding:.3rem .7rem;border-radius:999px;
  background:rgba(210,74,74,.15);color:#f2a0a0;border:1px solid rgba(210,74,74,.4);
  transition:all .4s ease;
}
.fs-emp{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;
  padding:1.2rem 1.4rem;border-radius:18px;min-width:170px;
  border:1px solid rgba(127,166,204,.3);
  background:linear-gradient(180deg, rgba(21,39,65,.8), rgba(13,25,44,.95));
}
.fs-emp .fs-face{
  width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;color:#6fc1ff;background:rgba(27,141,246,.12);
  border:1px solid rgba(27,141,246,.4);
}
.focus-scene:not(.with) .fs-emp .fs-face{animation:fsTorn 1.6s ease-in-out infinite;}
@keyframes fsTorn{0%,100%{transform:rotate(-14deg);}50%{transform:rotate(14deg);}}
.fs-emp b{font-size:.85rem;color:#eef4fb;}
.fs-emp .fs-state{font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#f2a0a0;transition:color .4s ease;}
/* attention bar: split red vs solid green */
.fs-meter{width:120px;height:8px;border-radius:999px;overflow:hidden;display:flex;background:rgba(127,166,204,.15);}
.fs-meter i{display:block;height:100%;transition:width .5s ease,background .5s ease;}
.fs-meter .m-store{width:50%;background:#d24a4a;}
.fs-meter .m-phone{width:50%;background:#d24a4a;opacity:.6;}
/* WITH IVR state */
.focus-scene.with .fs-side.store{border-color:rgba(53,208,127,.4);background:rgba(53,208,127,.05);}
.focus-scene.with .fs-side.store .fs-mood{background:rgba(53,208,127,.14);color:#7fe0a8;border-color:rgba(53,208,127,.4);}
.focus-scene.with .fs-side.phone{border-color:rgba(27,141,246,.4);background:rgba(27,141,246,.05);}
.focus-scene.with .fs-side.phone .fs-mood{background:rgba(27,141,246,.14);color:#7fc1ff;border-color:rgba(27,141,246,.4);}
.focus-scene.with .fs-emp .fs-state{color:#7fe0a8;}
.focus-scene.with .fs-meter .m-store{width:100%;background:#35d07f;}
.focus-scene.with .fs-meter .m-phone{width:0;}
.fs-cap{text-align:center;font-size:.85rem;color:#7fa6cc;margin-top:1.3rem;font-weight:700;}
@media(max-width:760px){
  .fs-stage{grid-template-columns:1fr;}
  .fs-emp{order:-1;}
}
@media(prefers-reduced-motion:reduce){.focus-scene:not(.with) .fs-emp .fs-face{animation:none;}}

/* ---------- outcomes band ---------- */
.ivr-outcomes{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;
  max-width:760px;margin:2.4rem auto 0;
}
.io-chip{
  text-align:center;padding:1.2rem 1rem;border-radius:16px;
  border:1px solid rgba(27,141,246,.3);
  background:linear-gradient(180deg, rgba(27,141,246,.08), rgba(11,20,36,.6));
}
.io-chip i{font-size:1.5rem;color:#6fc1ff;}
.io-chip b{display:block;margin-top:.5rem;font-size:.95rem;color:#eef4fb;}
.io-chip span{display:block;margin-top:.25rem;font-size:.76rem;color:#9db8d6;line-height:1.45;}
@media(max-width:700px){.ivr-outcomes{grid-template-columns:1fr;max-width:380px;}}

/* ============================================================
   v4 — scenes, not boxes. Counter diorama + owner's lock screen.
   ============================================================ */

/* ---------- the counter, as a scene ---------- */
.counter-stage{max-width:820px;margin:2.6rem auto 0;}
.cs-scene{
  position:relative;border-radius:18px;overflow:hidden;
  width:100%;aspect-ratio:16/8;min-height:300px;
  background:
    radial-gradient(90% 70% at 24% 30%, rgba(255,91,91,.10), transparent 60%),
    radial-gradient(70% 90% at 78% 40%, rgba(27,141,246,.14), transparent 65%),
    linear-gradient(180deg, #060b16 0%, #0a1424 70%, #0d1a2e 100%);
  border:1px solid rgba(127,166,204,.16);
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  transition:background 1s ease;
}
.cs-scanlines{
  position:absolute;inset:0;opacity:.35;pointer-events:none;z-index:6;
  background:repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.28) 2px 4px);
}
.cs-glare{
  position:absolute;inset:0;pointer-events:none;z-index:6;
  background:linear-gradient(115deg, transparent 30%, rgba(207,227,247,.05) 45%, transparent 60%);
  animation:csGlare 7s ease-in-out infinite;
}
@keyframes csGlare{0%,100%{transform:translateX(-55%);}50%{transform:translateX(55%);}}
/* neon sign, borrowed light from the movie scene Jeff loves */
.cs-sign{
  position:absolute;left:6%;top:9%;z-index:2;
  font-size:clamp(1rem,2.4vw,1.5rem);font-weight:900;letter-spacing:.34em;padding-left:.34em;
  color:#ff5b5b;text-shadow:0 0 12px rgba(255,80,80,.9), 0 0 34px rgba(255,60,60,.5);
  animation:csBuzz 4s linear infinite;
}
@keyframes csBuzz{0%,18%,22%,62%,68%,100%{opacity:1;}19%,21%{opacity:.35;}63%,66%{opacity:.5;}}
.cs-sub{
  position:absolute;left:6%;top:23%;z-index:2;
  font-size:.58rem;font-weight:800;letter-spacing:.42em;color:rgba(207,227,247,.35);
}
/* back-wall dressing: tv, hanging guitars */
.cs-wall{position:absolute;inset:0;z-index:1;pointer-events:none;}
.cs-wall .w-tv{
  position:absolute;left:38%;top:17%;width:66px;height:42px;border-radius:5px;
  background:linear-gradient(135deg,rgba(27,141,246,.18),rgba(10,20,36,.9));
  border:1px solid rgba(127,166,204,.28);box-shadow:0 0 26px rgba(27,141,246,.14);
}
.cs-wall .w-gtr{position:absolute;left:57%;top:12%;width:20px;height:60px;}
.cs-wall .w-gtr::before{
  content:"";position:absolute;left:50%;transform:translateX(-50%);top:0;width:3px;height:36px;
  background:rgba(127,166,204,.35);
}
.cs-wall .w-gtr::after{
  content:"";position:absolute;left:0;bottom:0;width:20px;height:26px;
  border-radius:45% 45% 50% 50%;background:#152743;border:1px solid rgba(127,166,204,.25);
  box-shadow:0 -9px 0 -5px #152743;
}
.cs-wall .w-gtr.g2{left:64%;top:15%;height:54px;}
/* the counter slab */
.cs-counter{
  position:absolute;left:0;right:0;bottom:0;height:26%;z-index:3;
  background:linear-gradient(180deg, #142238 0%, #0c1626 100%);
  border-top:2px solid rgba(127,166,204,.28);
  box-shadow:0 -12px 40px rgba(0,0,0,.5);
}
/* glass display case with gold glints on the counter */
.cs-counter::before{
  content:"";position:absolute;left:5%;width:33%;top:10px;height:20px;border-radius:4px;
  background:linear-gradient(180deg,rgba(127,166,204,.12),rgba(127,166,204,.02));
  border:1px solid rgba(127,166,204,.16);
}
.cs-counter::after{
  content:"";position:absolute;left:7%;width:29%;top:16px;height:9px;
  background:
    radial-gradient(circle at 12% 50%, rgba(255,215,140,.9) 0 1.4px, transparent 2.6px),
    radial-gradient(circle at 38% 30%, rgba(207,227,247,.85) 0 1.1px, transparent 2.2px),
    radial-gradient(circle at 64% 60%, rgba(255,215,140,.8) 0 1.2px, transparent 2.4px),
    radial-gradient(circle at 88% 40%, rgba(207,227,247,.7) 0 1px, transparent 2px);
}
/* silhouettes: employee behind counter, customer in front */
.cs-fig{position:absolute;z-index:2;}
.cs-fig .head{
  display:block;width:34px;height:34px;border-radius:50%;
  background:#1b2c47;box-shadow:inset -4px -2px 8px rgba(0,0,0,.5), 0 0 0 1px rgba(127,166,204,.22);
  margin:0 auto;
}
.cs-fig .body{
  display:block;width:74px;height:58px;border-radius:16px 16px 0 0;margin:6px auto 0;
  background:linear-gradient(180deg, #1b2c47, #14213a);
  box-shadow:inset -6px 0 10px rgba(0,0,0,.4), 0 0 0 1px rgba(127,166,204,.18);
}
.cs-emp{left:42%;bottom:23%;transform:translateX(-50%);}
.cs-emp .head{animation:csLook 2.2s ease-in-out infinite;}
@keyframes csLook{0%,100%{transform:translateX(-8px);}50%{transform:translateX(8px);}}
.counter-stage.with .cs-emp .head{animation:none;transform:translateX(-5px);}
.cs-cust{left:12%;bottom:-2%;z-index:4;}
.cs-cust .head{width:40px;height:40px;}
.cs-cust .body{width:90px;height:88px;}
/* impatience / happy indicator over the customer */
.cs-cust .cs-dots{
  position:absolute;top:-36px;left:50%;transform:translateX(-50%);
  display:flex;gap:5px;padding:7px 10px;border-radius:12px;border-bottom-left-radius:3px;
  background:rgba(21,39,65,.9);border:1px solid rgba(210,74,74,.45);
}
.cs-cust .cs-dots i{
  width:6px;height:6px;border-radius:50%;background:#f2a0a0;display:block;
  animation:csDot 1.2s ease-in-out infinite;
}
.cs-cust .cs-dots i:nth-child(2){animation-delay:.18s;}
.cs-cust .cs-dots i:nth-child(3){animation-delay:.36s;}
@keyframes csDot{0%,60%,100%{opacity:.35;}30%{opacity:1;}}
.cs-cust .cs-ok{
  position:absolute;top:-36px;left:50%;transform:translateX(-50%) scale(.6);
  width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(53,208,127,.16);border:1px solid rgba(53,208,127,.5);color:#7fe0a8;font-size:.85rem;
  opacity:0;transition:opacity .4s ease, transform .4s ease;
}
.counter-stage.with .cs-cust .cs-dots{display:none;}
.counter-stage.with .cs-cust .cs-ok{opacity:1;transform:translateX(-50%) scale(1);}
/* the ringing phone: a real call screen floating right */
.cs-phone{
  position:absolute;right:8%;top:12%;z-index:4;width:clamp(120px,17vw,150px);
  animation:csShake .5s ease-in-out infinite;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.6));
}
@keyframes csShake{0%,100%{transform:rotate(-1.6deg);}50%{transform:rotate(1.6deg);}}
.counter-stage.with .cs-phone{animation:none;transform:rotate(0);}
.cph{
  border-radius:20px;padding:14px 12px 12px;text-align:center;position:relative;
  background:linear-gradient(180deg,#101d33,#0a1424);
  border:1px solid rgba(127,166,204,.35);
}
.cph::before{ /* notch */
  content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:34%;height:5px;border-radius:99px;background:rgba(127,166,204,.25);
}
.cph small{display:block;font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:#7fa6cc;font-weight:800;margin-top:8px;}
.cph b{display:block;font-size:.78rem;color:#eef4fb;margin-top:2px;font-variant-numeric:tabular-nums;}
.cph .cph-btns{display:flex;justify-content:space-around;margin-top:12px;}
.cph .cph-btns i{
  width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:.8rem;
}
.cph .b-dec{background:rgba(210,74,74,.85);color:#fff;}
.cph .b-acc{background:rgba(53,208,127,.9);color:#fff;animation:csAccPulse 1.1s ease-in-out infinite;}
@keyframes csAccPulse{50%{transform:scale(1.18);box-shadow:0 0 0 7px rgba(53,208,127,.18);}}
.counter-stage.with .cph .b-acc{animation:none;}
/* IVR takes the call */
.cs-ivr{
  position:absolute;inset:-1px;border-radius:20px;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:linear-gradient(180deg,#101d33,#0a1424);opacity:0;transition:opacity .45s ease;
}
.counter-stage.with .cs-ivr{border:1px solid rgba(53,208,127,.4);}
.cs-ivr i{font-size:1.3rem;color:#6fc1ff;}
.cs-ivr span{font-size:.6rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#7fe0a8;line-height:1.5;text-align:center;padding:0 8px;}
.counter-stage.with .cs-ivr{opacity:1;}
.counter-stage.with .cph{border-color:rgba(53,208,127,.4);}
/* warm the room when the IVR is on */
.cs-warm{
  position:absolute;inset:0;z-index:1;opacity:0;transition:opacity 1s ease;pointer-events:none;
  background:radial-gradient(80% 80% at 40% 55%, rgba(255,180,90,.10), transparent 65%);
}
.counter-stage.with .cs-warm{opacity:1;}
/* the switch: a physical toggle on the frame */
.cs-switch{
  display:flex;justify-content:center;margin-top:1.3rem;
}
.cs-lever{
  display:inline-flex;align-items:center;gap:.8rem;cursor:pointer;border:none;background:none;
  font:inherit;color:#9db8d6;font-weight:800;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
}
.cs-track{
  width:64px;height:32px;border-radius:999px;position:relative;flex:0 0 auto;
  background:rgba(210,74,74,.25);border:1px solid rgba(210,74,74,.5);
  transition:background .35s ease, border-color .35s ease;
}
.cs-knob{
  position:absolute;top:3px;left:4px;width:24px;height:24px;border-radius:50%;
  background:#f2a0a0;transition:left .35s cubic-bezier(.34,1.56,.64,1), background .35s ease;
  box-shadow:0 3px 10px rgba(0,0,0,.5);
}
.counter-stage.with .cs-track{background:rgba(53,208,127,.25);border-color:rgba(53,208,127,.55);}
.counter-stage.with .cs-knob{left:34px;background:#7fe0a8;}
.cs-lever .lab-off{color:#f2a0a0;}
.cs-lever .lab-on{color:#4c6788;}
.counter-stage.with .cs-lever .lab-off{color:#4c6788;}
.counter-stage.with .cs-lever .lab-on{color:#7fe0a8;}
.cs-cap{text-align:center;font-size:.85rem;color:#7fa6cc;margin-top:1rem;font-weight:700;}
@media(prefers-reduced-motion:reduce){
  .cs-glare,.cs-sign,.cs-emp .head,.cs-phone,.cph .b-acc,.cs-cust .cs-dots i{animation:none;}
}
@media(max-width:560px){
  .cs-wall{display:none;}
  .cs-counter::before,.cs-counter::after{display:none;}
  .cs-cust{left:7%;}
  .cs-emp{left:45%;}
  .cs-phone{right:5%;top:9%;}
  .cph b{font-size:.66rem;white-space:nowrap;}
  .cs-sub{top:24%;}
}

/* ---------- the owner's lock screen (post-call survey) ---------- */
.lockscreen{
  max-width:400px;margin:2.4rem auto 0;border-radius:26px;overflow:hidden;
  border:1px solid rgba(127,166,204,.3);
  background:
    radial-gradient(120% 90% at 30% 0%, rgba(27,141,246,.18), transparent 55%),
    linear-gradient(180deg,#0d1a2e,#070e1b);
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  padding:1.6rem 1rem 1.8rem;text-align:center;
}
.ls-time{
  display:block;font-size:2.6rem;font-weight:200;color:#eef4fb;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.ls-date{display:block;font-size:.8rem;color:#9db8d6;margin-top:.15rem;margin-bottom:1.4rem;}
.ls-notif{
  display:flex;gap:.7rem;align-items:flex-start;text-align:left;
  border-radius:16px;padding:.85rem .95rem;margin:0 .35rem .6rem;
  background:rgba(21,39,65,.85);border:1px solid rgba(127,166,204,.2);
  backdrop-filter:blur(6px);
}
.ls-notif.fail{border-color:rgba(210,74,74,.5);box-shadow:0 10px 34px rgba(210,74,74,.12);}
.ls-notif .ln-ic{
  flex:0 0 auto;width:34px;height:34px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;font-size:1rem;
}
.ls-notif.fail .ln-ic{background:rgba(210,74,74,.18);color:#f2a0a0;}
.ls-notif.pass .ln-ic{background:rgba(53,208,127,.14);color:#7fe0a8;}
.ls-notif .ln-tx{flex:1;min-width:0;}
.ls-notif .ln-tx b{display:block;font-size:.8rem;color:#eef4fb;}
.ls-notif .ln-tx span{display:block;font-size:.74rem;color:#9db8d6;line-height:1.45;margin-top:.15rem;}
.ls-notif time{flex:0 0 auto;font-size:.62rem;color:#7fa6cc;margin-top:.15rem;}
.ls-notif.pass{opacity:.7;}