/* ============================================================
   Hero "See it move" - interactive scenario  ·  PRODUCTION
   Drops into the Praxis home. Reuses the site's existing classes
   (.hero-home .container .hero-grid .eyebrow .h1-hero .hero-lede
   .hero-btns .btn .hero-meta) - this file only adds the right-hand
   interactive instrument and the scenario layout override.
   All colors reference the site tokens with safe hex fallbacks.
   ============================================================ */

/* layout override: give the instrument a touch more room than the default hero */
.praxis .hero-home.hero-scenario .hero-grid, .hero-home.hero-scenario .hero-grid{ grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.hero-home.hero-scenario .hero-glow{
  background:radial-gradient(circle, rgba(28,122,87,.12), transparent 62%);
  top:auto; bottom:-34%; left:auto; right:-8%;
}

/* ---------- the instrument ---------- */
.cc-inst{
  --cc-o:var(--orange,#C75B22); --cc-ob:var(--orange-bright,#E2761A);
  --cc-g:var(--green,#1C7A57); --cc-gb:var(--green-bright,#2A9E6E);
  --cc-r:#B23A2E; --cc-ink:var(--ink,#1A1714); --cc-ink2:var(--ink-2,#4A4138);
  --cc-mut:var(--muted,#9A8E7E); --cc-ln:var(--line,#DCD3C2); --cc-ln2:#C9BEAA; --cc-surf:#FBF9F3;
  background:var(--cc-surf); border:1px solid var(--cc-ln); border-radius:16px; overflow:hidden;
  box-shadow:0 44px 86px -30px rgba(26,23,20,.26);
  font-family:'Hanken Grotesk',system-ui,sans-serif;
}
.cc-inst-head{
  display:flex; align-items:center; gap:10px; padding:16px 22px; border-bottom:1px solid var(--cc-ln);
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.05em; color:var(--cc-mut);
}
.cc-inst-hint{ margin-left:auto; display:flex; align-items:center; gap:7px; color:var(--cc-o);
  text-transform:uppercase; letter-spacing:.1em; font-size:10px; white-space:nowrap; }
.cc-inst-hint b{ width:6px; height:6px; border-radius:50%; background:var(--cc-o); }
@media (prefers-reduced-motion: no-preference){
  .cc-inst-hint b{ animation:ccHintPulse 1.6s infinite; }
  @keyframes ccHintPulse{0%{box-shadow:0 0 0 0 rgba(199,91,34,.5);}70%{box-shadow:0 0 0 7px rgba(199,91,34,0);}100%{box-shadow:0 0 0 0 rgba(199,91,34,0);}}
}

.cc-inst-body{ padding:22px 26px 8px; display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }

/* readout side */
.cc-tailviz{ position:relative; height:104px; display:flex; align-items:stretch; gap:8px; }
.cc-tailviz::before{ content:""; position:absolute; left:0; right:0; top:50%; border-top:1px dashed var(--cc-ln2); }
.cc-col{ flex:1; position:relative; }
.cc-bar{ position:absolute; left:12%; right:12%; border-radius:3px; background:var(--cc-r);
  transition:height .14s ease, top .14s ease, bottom .14s ease, background .14s ease; }
.cc-tlabel{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.03em; color:var(--cc-mut); margin-top:8px; }

.cc-rk{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--cc-mut); margin-top:20px; }
.cc-rv{ font-family:'Newsreader',Georgia,serif; font-weight:500; font-size:clamp(44px,5vw,60px); line-height:.92;
  color:var(--cc-ink); margin-top:8px; font-variant-numeric:tabular-nums; }
.cc-delta{ display:inline-flex; align-items:baseline; gap:7px; margin-top:14px; background:rgba(28,122,87,.1);
  color:var(--cc-g); border-radius:30px; padding:7px 15px; font-family:'IBM Plex Mono',monospace; font-size:13.5px; }
.cc-delta b{ font-weight:600; }
.cc-delta span{ font-size:11px; color:var(--cc-g); opacity:.78; }

/* controls side */
.cc-ctl-k{ display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--cc-ink2); }
.cc-ctl-k b{ font-family:'Newsreader',Georgia,serif; font-size:19px; color:var(--cc-o); font-weight:500; }
.cc-ctl-sub{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--cc-mut); margin-top:2px; }

.cc-inst-slider{ -webkit-appearance:none; appearance:none; width:100%; height:26px; background:transparent;
  cursor:grab; margin:12px 0 2px; --fill:35%; accent-color:var(--cc-o); }
.cc-inst-slider:active{ cursor:grabbing; }
.cc-inst-slider::-webkit-slider-runnable-track{ height:6px; border-radius:4px;
  background:linear-gradient(90deg, var(--cc-o) var(--fill), var(--cc-ln2) var(--fill)); }
.cc-inst-slider::-moz-range-track{ height:6px; border-radius:4px; background:var(--cc-ln2); }
.cc-inst-slider::-moz-range-progress{ height:6px; border-radius:4px; background:var(--cc-o); }
.cc-inst-slider::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:24px; height:24px;
  border-radius:50%; background:var(--cc-o); border:3px solid #fff; box-shadow:0 2px 8px rgba(26,23,20,.3); margin-top:-9px; }
.cc-inst-slider::-moz-range-thumb{ width:24px; height:24px; border:3px solid #fff; border-radius:50%;
  background:var(--cc-o); box-shadow:0 2px 8px rgba(26,23,20,.3); }
.cc-inst-slider:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 4px rgba(199,91,34,.32); }
.cc-inst-slider:focus-visible::-moz-range-thumb{ box-shadow:0 0 0 4px rgba(199,91,34,.32); }

.cc-chips{ display:flex; flex-direction:column; gap:9px; margin-top:18px; }
.cc-chip{ display:flex; align-items:center; gap:11px; padding:11px 14px; border:1px solid var(--cc-ln2);
  border-radius:9px; background:#fff; cursor:pointer; font:inherit; text-align:left; min-height:46px;
  transition:border-color .15s, background .15s; }
.cc-chip:hover{ border-color:var(--cc-o); }
.cc-chip[aria-pressed="true"]{ border-color:var(--cc-g); background:rgba(28,122,87,.05); }
.cc-chip:focus-visible{ outline:2px solid var(--cc-o); outline-offset:2px; }
.cc-box{ width:18px; height:18px; border-radius:5px; border:1.5px solid var(--cc-ln2); flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; transition:all .15s; }
.cc-chip[aria-pressed="true"] .cc-box{ background:var(--cc-g); border-color:var(--cc-g); }
.cc-box svg{ opacity:0; transition:opacity .15s; }
.cc-chip[aria-pressed="true"] .cc-box svg{ opacity:1; }
.cc-ct{ flex:1; font-size:14px; color:var(--cc-ink); }
.cc-cg{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--cc-g); font-weight:600; white-space:nowrap; }

.cc-inst-foot{ padding:16px 26px 18px; border-top:1px solid var(--cc-ln); margin-top:14px;
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.02em; color:var(--cc-mut); }
.cc-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- responsive ---------- */
@media (max-width:960px){
  .praxis .hero-home.hero-scenario .hero-grid, .hero-home.hero-scenario .hero-grid{ grid-template-columns:1fr; gap:40px; }
  .cc-inst{ max-width:560px; }
}
@media (max-width:560px){
  .cc-inst-body{ grid-template-columns:1fr; gap:22px; }
  .cc-inst-head{ font-size:10.5px; }
}