/* ============================================================================
   help-center-demos.css — animated "live demo" players, SVG diagrams, and the
   FAQ accordion for the Help Center. Loaded alongside css/help-center.css.

   Everything here is purely decorative motion. A single master loop drives each
   demo (an SVG mouse cursor that moves + clicks through a mock UI, like a silent
   screen-recording). All motion is gated behind `prefers-reduced-motion:
   no-preference` so reduced-motion users get a clean static final frame.
   Owned by CLAUDE-2; classes are namespaced hc-d* / hc-diag* / hc-faq* so they
   never collide with help-center.css.
   ========================================================================== */

:root { --hcd-cyan:#38bdf8; --hcd-violet:#818cf8; --hcd-teal:#2dd4bf; --hcd-green:#34d399;
        --hcd-amber:#fbbf24; --hcd-red:#f0506e; --hcd-ink:#e7ecf5; }

/* ── Demo frame ─────────────────────────────────────────────────────────────*/
.hc-demo{margin:14px 0 6px;border:1px solid rgba(56,189,248,0.20);border-radius:14px;overflow:hidden;
  background:linear-gradient(160deg,rgba(13,18,38,0.9),rgba(7,10,24,0.95));}
.hc-demo-cap{display:flex;align-items:center;gap:8px;padding:9px 14px;font-size:11px;font-weight:700;
  letter-spacing:0.12em;text-transform:uppercase;color:rgba(125,211,252,0.85);
  border-bottom:1px solid rgba(148,163,184,0.12);background:rgba(56,189,248,0.05);}
.hc-demo-dot{width:7px;height:7px;border-radius:50%;background:var(--hcd-red);box-shadow:0 0 0 0 rgba(240,80,110,0.6);}
.hc-demo-stagewrap{display:flex;justify-content:center;padding:16px;}
.hc-demo-stage{position:relative;width:360px;height:200px;flex:0 0 360px;border-radius:10px;overflow:hidden;
  background:radial-gradient(120% 120% at 30% 0%,rgba(56,189,248,0.07),rgba(4,6,16,0.6));
  border:1px solid rgba(148,163,184,0.10);font-family:Inter,system-ui,sans-serif;}

/* mock chrome shared bits */
.hc-d-top{position:absolute;top:0;left:0;right:0;height:30px;display:flex;align-items:center;gap:8px;
  padding:0 10px;background:rgba(8,12,26,0.9);border-bottom:1px solid rgba(148,163,184,0.12);}
.hc-d-logo{width:14px;height:14px;border-radius:4px;background:conic-gradient(from 0deg,var(--hcd-cyan),var(--hcd-violet),var(--hcd-teal),var(--hcd-cyan));}
.hc-d-title{font-size:9px;font-weight:700;letter-spacing:0.18em;color:rgba(226,232,240,0.6);}
.hc-d-btn{margin-left:auto;font-size:9.5px;font-weight:700;color:#04121c;background:var(--hcd-teal);
  padding:4px 9px;border-radius:7px;box-shadow:0 0 0 0 rgba(45,212,191,0);}
.hc-d-gauges{position:absolute;top:42px;left:10px;right:10px;display:flex;gap:8px;}
.hc-d-gauges i{flex:1;height:46px;border-radius:8px;border:1px solid rgba(148,163,184,0.14);
  background:radial-gradient(circle at 50% 120%,rgba(56,189,248,0.18),transparent 70%);}

/* cursor + click ring (shared) */
.hc-d-cursor{position:absolute;top:0;left:0;z-index:9;filter:drop-shadow(0 2px 3px rgba(0,0,0,0.5));
  transform:translate(300px,175px);}
.hc-d-click{position:absolute;top:-9px;left:-9px;width:18px;height:18px;border-radius:50%;z-index:8;
  border:2px solid var(--hcd-cyan);opacity:0;transform:translate(300px,175px) scale(0.3);}

/* ── DEMO: submit a reading ─────────────────────────────────────────────────*/
.hc-d-modal{position:absolute;left:26px;right:26px;top:54px;border-radius:10px;padding:11px 13px;
  background:rgba(11,16,34,0.98);border:1px solid rgba(56,189,248,0.35);
  box-shadow:0 18px 40px rgba(0,0,0,0.5);opacity:0;transform:translateY(34px) scale(0.96);}
.hc-d-modal-h{font-size:11px;font-weight:700;color:#cfe8ff;margin-bottom:9px;}
.hc-d-field{display:flex;align-items:center;gap:8px;margin-bottom:7px;}
.hc-d-flabel{font-size:9px;font-weight:700;letter-spacing:0.1em;color:rgba(226,232,240,0.55);width:30px;}
.hc-d-input{flex:1;height:21px;border-radius:6px;border:1px solid rgba(148,163,184,0.2);
  background:rgba(148,163,184,0.06);display:flex;align-items:center;padding:0 8px;}
.hc-d-input b{font-size:11px;color:#fff;font-weight:600;opacity:0;}
.hc-d-caret{display:inline-block;width:1.5px;height:12px;margin-left:1px;background:var(--hcd-cyan);opacity:0;}
.hc-d-msub{margin-top:3px;text-align:center;font-size:10px;font-weight:700;border-radius:7px;padding:6px 0;
  background:var(--hcd-cyan);color:#04121c;position:relative;}
.hc-d-msub .lbl-go,.hc-d-msub .lbl-ing,.hc-d-msub .lbl-done{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.hc-d-msub .lbl-ing,.hc-d-msub .lbl-done{opacity:0;}
.hc-d-toast{position:absolute;left:50%;bottom:12px;transform:translate(-50%,20px);opacity:0;z-index:7;
  font-size:10px;font-weight:600;color:#062;background:var(--hcd-green);padding:6px 12px;border-radius:8px;
  white-space:nowrap;box-shadow:0 8px 20px rgba(52,211,153,0.3);}

/* ── DEMO: inbox ────────────────────────────────────────────────────────────*/
.hc-d-bell{position:relative;margin-left:auto;width:18px;height:18px;color:rgba(226,232,240,0.8);}
.hc-d-badge{position:absolute;top:-5px;right:-5px;min-width:13px;height:13px;border-radius:7px;
  background:var(--hcd-red);color:#fff;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 2px;}
.hc-d-tile{position:absolute;left:12px;right:12px;top:40px;bottom:12px;border-radius:9px;padding:8px;
  background:rgba(11,16,34,0.96);border:1px solid rgba(148,163,184,0.16);opacity:0;transform:translateY(10px);}
.hc-d-tile-h{display:flex;align-items:center;font-size:9px;font-weight:700;letter-spacing:0.1em;
  color:rgba(226,232,240,0.6);margin-bottom:6px;}
.hc-d-clear{margin-left:auto;font-size:8.5px;font-weight:700;color:#04121c;background:rgba(56,189,248,0.9);
  padding:2px 7px;border-radius:6px;}
.hc-d-row{display:flex;align-items:center;gap:6px;padding:6px 7px;margin-bottom:4px;border-radius:7px;
  background:rgba(148,163,184,0.06);border-left:2px solid var(--hcd-red);transform-origin:left center;}
.hc-d-row .tag{font-size:7.5px;font-weight:800;letter-spacing:0.06em;color:#fda4b4;background:rgba(240,80,110,0.16);
  padding:1px 5px;border-radius:5px;}
.hc-d-row .txt{font-size:9px;color:rgba(231,236,245,0.85);}
.hc-d-empty{position:absolute;inset:34px 12px 12px;display:flex;align-items:center;justify-content:center;
  font-size:9.5px;color:rgba(226,232,240,0.4);opacity:0;}

/* ── animated SVG diagrams ──────────────────────────────────────────────────*/
.hc-diag{margin:14px 0 6px;padding:16px;border:1px solid rgba(148,163,184,0.14);border-radius:14px;
  background:linear-gradient(160deg,rgba(13,18,38,0.7),rgba(7,10,24,0.85));}
.hc-diag svg{width:100%;height:auto;display:block;}
.hc-diag-cap{font-size:11px;color:rgba(226,232,240,0.55);text-align:center;margin-top:8px;}
.hc-diag .node{fill:rgba(11,16,34,0.95);stroke:rgba(56,189,248,0.5);stroke-width:1.5;}
.hc-diag .node.write{stroke:rgba(129,140,248,0.6);}
.hc-diag .ntext{fill:#e7ecf5;font:700 9px Inter,sans-serif;text-anchor:middle;}
.hc-diag .nsub{fill:rgba(226,232,240,0.5);font:600 6.5px Inter,sans-serif;text-anchor:middle;}
.hc-diag .wire{fill:none;stroke:rgba(56,189,248,0.28);stroke-width:1.5;}
.hc-diag .wire.violet{stroke:rgba(129,140,248,0.3);}
.hc-diag .flow{fill:none;stroke-width:2;stroke-linecap:round;stroke-dasharray:5 11;}
.hc-diag .flow.cyan{stroke:var(--hcd-cyan);}
.hc-diag .flow.violet{stroke:var(--hcd-violet);}

/* pH crash chart */
.hc-crash svg{width:100%;height:auto;}
.hc-crash .grid{stroke:rgba(148,163,184,0.12);stroke-width:1;}
.hc-crash .band{fill:rgba(52,211,153,0.06);}
.hc-crash .floor{stroke:var(--hcd-red);stroke-width:1.2;stroke-dasharray:4 4;}
.hc-crash .phline{fill:none;stroke:var(--hcd-cyan);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:520;stroke-dashoffset:520;}
.hc-crash .dot{fill:var(--hcd-cyan);opacity:0;}
.hc-crash .crashflag{opacity:0;transform-box:fill-box;transform-origin:center;}
.hc-crash .crashflag rect{fill:var(--hcd-red);}
.hc-crash .crashflag text{fill:#fff;font:800 8px Inter,sans-serif;text-anchor:middle;}

/* ── FAQ accordion (native <details>, zero JS) ─────────────────────────────*/
.hc-faq{margin:8px 0 4px;}
.hc-faq-item{border:1px solid rgba(148,163,184,0.14);border-radius:11px;margin-bottom:8px;overflow:hidden;
  background:rgba(148,163,184,0.04);transition:border-color .2s,background .2s;}
.hc-faq-item[open]{border-color:rgba(56,189,248,0.35);background:rgba(56,189,248,0.05);}
.hc-faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  padding:12px 14px;font-size:13px;font-weight:600;color:#eaf2fb;outline:none;}
.hc-faq-item summary::-webkit-details-marker{display:none;}
.hc-faq-item summary:hover{color:#fff;}
.hc-faq-q{flex:0 0 18px;height:18px;border-radius:6px;background:rgba(56,189,248,0.15);color:var(--hcd-cyan);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;}
.hc-faq-chev{margin-left:auto;flex:0 0 auto;color:rgba(226,232,240,0.5);transition:transform .25s ease;}
.hc-faq-item[open] .hc-faq-chev{transform:rotate(180deg);color:var(--hcd-cyan);}
.hc-faq-a{padding:0 14px 13px 42px;font-size:12.5px;line-height:1.6;color:rgba(231,236,245,0.82);}
.hc-faq-a code{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;background:rgba(56,189,248,0.12);
  color:#9fe7ff;padding:1px 5px;border-radius:5px;}
.hc-faq-a b{color:#fff;}

/* ============================ MOTION ====================================== */
@media (prefers-reduced-motion: no-preference){
  .hc-demo-dot{animation:hcdRec 1.6s ease-in-out infinite;}
  /* recording pulse */
  @keyframes hcdRec{0%,100%{box-shadow:0 0 0 0 rgba(240,80,110,0.5);}50%{box-shadow:0 0 0 5px rgba(240,80,110,0);}}

  /* SUBMIT demo — 10s master loop */
  [data-demo="submit"] .hc-d-cursor{animation:hcSubCursor 10s cubic-bezier(.5,.1,.3,1) infinite;}
  [data-demo="submit"] .hc-d-click{animation:hcSubCursor 10s cubic-bezier(.5,.1,.3,1) infinite, hcSubClick 10s linear infinite;}
  [data-demo="submit"] .hc-d-submit{animation:hcSubBtn 10s ease infinite;}
  [data-demo="submit"] .hc-d-modal{animation:hcSubModal 10s ease infinite;}
  [data-demo="submit"] .hc-d-typed{animation:hcType 10s steps(1) infinite;}
  [data-demo="submit"] .hc-d-caret{animation:hcCaret 10s steps(1) infinite;}
  [data-demo="submit"] .hc-d-typed2{animation:hcType2 10s steps(1) infinite;}
  [data-demo="submit"] .lbl-go{animation:hcLblGo 10s steps(1) infinite;}
  [data-demo="submit"] .lbl-ing{animation:hcLblIng 10s steps(1) infinite;}
  [data-demo="submit"] .lbl-done{animation:hcLblDone 10s steps(1) infinite;}
  [data-demo="submit"] .hc-d-msub{animation:hcMsub 10s steps(1) infinite;}
  [data-demo="submit"] .hc-d-toast{animation:hcToast 10s ease infinite;}

  @keyframes hcSubCursor{
    0%{transform:translate(300px,175px);} 12%{transform:translate(262px,16px);}
    16%{transform:translate(262px,16px);} 30%{transform:translate(262px,16px);}
    44%{transform:translate(120px,96px);} 56%{transform:translate(140px,128px);}
    66%{transform:translate(180px,168px);} 70%{transform:translate(180px,168px);}
    100%{transform:translate(300px,175px);}}
  @keyframes hcSubClick{0%,12%{opacity:0;}13%{opacity:0.9;}18%{opacity:0;transform:scale(1.8);}
    19%,66%{opacity:0;transform:scale(0.3);}67%{opacity:0.9;transform:scale(0.3);}72%{opacity:0;transform:scale(1.8);}100%{opacity:0;}}
  @keyframes hcSubBtn{0%,11%{box-shadow:0 0 0 0 rgba(45,212,191,0);}14%{box-shadow:0 0 0 5px rgba(45,212,191,0.35);}20%,100%{box-shadow:0 0 0 0 rgba(45,212,191,0);}}
  @keyframes hcSubModal{0%,16%{opacity:0;transform:translateY(34px) scale(0.96);}
    26%,90%{opacity:1;transform:translateY(0) scale(1);}97%,100%{opacity:0;transform:translateY(10px) scale(0.98);}}
  @keyframes hcType{0%,40%{opacity:0;}48%{opacity:1;}90%{opacity:1;}97%,100%{opacity:0;}}
  @keyframes hcCaret{0%,38%{opacity:0;}40%{opacity:1;}41%{opacity:0;}43%{opacity:1;}45%{opacity:0;}47%{opacity:1;}49%,100%{opacity:0;}}
  @keyframes hcType2{0%,52%{opacity:0;}60%{opacity:1;}90%{opacity:1;}97%,100%{opacity:0;}}
  @keyframes hcMsub{0%,66%{background:var(--hcd-cyan);}74%{background:var(--hcd-cyan);}80%,100%{background:var(--hcd-green);}}
  @keyframes hcLblGo{0%,66%{opacity:1;}67%,100%{opacity:0;}}
  @keyframes hcLblIng{0%,66%{opacity:0;}68%{opacity:1;}78%{opacity:1;}80%,100%{opacity:0;}}
  @keyframes hcLblDone{0%,79%{opacity:0;}82%{opacity:1;}100%{opacity:1;}}
  @keyframes hcToast{0%,80%{opacity:0;transform:translate(-50%,20px);}86%{opacity:1;transform:translate(-50%,0);}
    94%{opacity:1;transform:translate(-50%,0);}99%,100%{opacity:0;transform:translate(-50%,10px);}}

  /* INBOX demo — 9s master loop */
  [data-demo="inbox"] .hc-d-cursor{animation:hcInbCursor 9s cubic-bezier(.5,.1,.3,1) infinite;}
  [data-demo="inbox"] .hc-d-click{animation:hcInbCursor 9s cubic-bezier(.5,.1,.3,1) infinite, hcInbClick 9s linear infinite;}
  [data-demo="inbox"] .hc-d-tile{animation:hcInbTile 9s ease infinite;}
  [data-demo="inbox"] .hc-d-clear{animation:hcInbClear 9s ease infinite;}
  [data-demo="inbox"] .hc-d-row.r1{animation:hcInbRow 9s ease infinite;animation-delay:0s;}
  [data-demo="inbox"] .hc-d-row.r2{animation:hcInbRow 9s ease infinite;animation-delay:.08s;}
  [data-demo="inbox"] .hc-d-row.r3{animation:hcInbRow 9s ease infinite;animation-delay:.16s;}
  [data-demo="inbox"] .hc-d-badge{animation:hcInbBadge 9s steps(1) infinite;}
  [data-demo="inbox"] .hc-d-empty{animation:hcInbEmpty 9s ease infinite;}

  @keyframes hcInbCursor{0%{transform:translate(300px,178px);}12%{transform:translate(300px,15px);}
    16%{transform:translate(300px,15px);}40%{transform:translate(300px,52px);}46%{transform:translate(300px,52px);}
    100%{transform:translate(300px,178px);}}
  @keyframes hcInbClick{0%,12%{opacity:0;}13%{opacity:.9;}18%{opacity:0;transform:scale(1.8);}
    19%,44%{opacity:0;transform:scale(.3);}45%{opacity:.9;transform:scale(.3);}50%{opacity:0;transform:scale(1.8);}100%{opacity:0;}}
  @keyframes hcInbTile{0%,16%{opacity:0;transform:translateY(10px);}24%,92%{opacity:1;transform:translateY(0);}98%,100%{opacity:0;}}
  @keyframes hcInbClear{0%,44%{box-shadow:0 0 0 0 rgba(56,189,248,0);}47%{box-shadow:0 0 0 4px rgba(56,189,248,0.4);}53%,100%{box-shadow:0 0 0 0 rgba(56,189,248,0);}}
  @keyframes hcInbRow{0%,50%{opacity:1;transform:scaleY(1);max-height:30px;}
    58%{opacity:0;transform:scaleY(0.1) translateX(20px);}60%,92%{opacity:0;max-height:0;}98%,100%{opacity:1;transform:scaleY(1);max-height:30px;}}
  @keyframes hcInbBadge{0%,58%{opacity:1;}60%,97%{opacity:0;}100%{opacity:1;}}
  @keyframes hcInbEmpty{0%,60%{opacity:0;}68%,92%{opacity:1;}97%,100%{opacity:0;}}

  /* dataflow flowing dashes */
  .hc-diag .flow.cyan{animation:hcFlow 1.4s linear infinite;}
  .hc-diag .flow.violet{animation:hcFlow 1.4s linear infinite;animation-delay:.4s;}
  @keyframes hcFlow{to{stroke-dashoffset:-32;}}
  .hc-diag .node{animation:hcNodePulse 3s ease-in-out infinite;}
  @keyframes hcNodePulse{0%,100%{filter:drop-shadow(0 0 0 rgba(56,189,248,0));}50%{filter:drop-shadow(0 0 5px rgba(56,189,248,0.4));}}

  /* pH crash chart — 6s loop */
  .hc-crash .phline{animation:hcDraw 6s ease-in-out infinite;}
  .hc-crash .dot{animation:hcDot 6s ease-in-out infinite;}
  .hc-crash .crashflag{animation:hcFlag 6s ease-in-out infinite;}
  @keyframes hcDraw{0%{stroke-dashoffset:520;}45%{stroke-dashoffset:0;}85%{stroke-dashoffset:0;}100%{stroke-dashoffset:520;}}
  @keyframes hcDot{0%,40%{opacity:0;}48%{opacity:1;}85%{opacity:1;}100%{opacity:0;}}
  @keyframes hcFlag{0%,52%{opacity:0;transform:scale(.4);}58%{opacity:1;transform:scale(1.15);}62%{transform:scale(1);}85%{opacity:1;}100%{opacity:0;}}
}

/* reduced-motion: hold a clear, readable final frame (no looping) */
@media (prefers-reduced-motion: reduce){
  [data-demo="submit"] .hc-d-modal{opacity:1;transform:none;}
  [data-demo="submit"] .hc-d-typed,[data-demo="submit"] .hc-d-typed2{opacity:1;}
  [data-demo="submit"] .lbl-done{opacity:1;} [data-demo="submit"] .lbl-go{opacity:0;}
  [data-demo="submit"] .hc-d-msub{background:var(--hcd-green);}
  [data-demo="submit"] .hc-d-cursor,[data-demo="submit"] .hc-d-click{display:none;}
  [data-demo="inbox"] .hc-d-tile{opacity:1;transform:none;}
  [data-demo="inbox"] .hc-d-cursor,[data-demo="inbox"] .hc-d-click{display:none;}
  .hc-crash .phline{stroke-dashoffset:0;} .hc-crash .dot{opacity:1;} .hc-crash .crashflag{opacity:1;}
}

/* caption under a demo */
.hc-demo-note{font-size:12px;color:rgba(226,232,240,0.6);margin:2px 0 14px;padding-left:2px;
  border-left:2px solid rgba(56,189,248,0.4);padding:2px 0 2px 10px;}
.hc-demo-note b{color:#cfe8ff;}

/* ── "For: <tab>" context chip + in-tab help link ──────────────────────────*/
.hc-tabchip{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;letter-spacing:0.09em;
  text-transform:uppercase;color:#8be0ff;background:rgba(56,189,248,0.10);border:1px solid rgba(56,189,248,0.28);
  padding:4px 11px;border-radius:999px;margin:0 0 14px;}
.hc-tabchip svg{width:12px;height:12px;flex:0 0 12px;}
.hc-tabchip b{color:#fff;font-weight:800;}
.hc-tabchip .lbl{color:rgba(226,232,240,0.55);font-weight:700;}
.hc-intab{display:inline-flex;align-items:center;gap:8px;margin:10px 0 4px;font-family:inherit;font-size:12.5px;
  font-weight:700;color:#04121c;background:linear-gradient(135deg,#38bdf8,#818cf8);border:none;padding:9px 15px;
  border-radius:10px;cursor:pointer;transition:filter .2s,transform .15s,box-shadow .2s;
  box-shadow:0 4px 16px rgba(56,189,248,0.18);}
.hc-intab:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 6px 22px rgba(56,189,248,0.3);}
.hc-intab svg{width:15px;height:15px;}

/* ── DEMO: submission failsafe (red modal → retry → saved) ─────────────────*/
.hc-d-fail{position:absolute;left:22px;right:22px;top:44px;border-radius:11px;padding:13px;text-align:center;
  background:rgba(42,8,16,0.98);border:1px solid var(--hcd-red);box-shadow:0 18px 40px rgba(0,0,0,0.55);
  opacity:0;transform:translateY(26px) scale(0.95);}
.hc-d-fail-ic{width:30px;height:30px;border-radius:50%;background:var(--hcd-red);color:#fff;font-weight:800;font-size:18px;
  display:flex;align-items:center;justify-content:center;margin:0 auto 7px;box-shadow:0 0 0 6px rgba(240,80,110,0.14);}
.hc-d-fail-h{font-size:12.5px;font-weight:800;color:#fff;}
.hc-d-fail-sub{font-size:9.5px;color:rgba(255,214,221,0.78);margin:3px 0 10px;}
.hc-d-fail-retry{display:inline-block;font-size:10.5px;font-weight:800;color:#fff;background:var(--hcd-red);
  padding:6px 18px;border-radius:8px;box-shadow:0 0 0 0 rgba(240,80,110,0);}
.hc-d-fail-esc{font-size:8.5px;font-weight:600;letter-spacing:0.04em;color:rgba(255,196,201,0.85);margin-top:9px;opacity:0;}

/* ── DEMO: environment heat-map (Front / Middle / Back) ────────────────────*/
.hc-envd-svg{width:320px;height:178px;}
.hc-envd .tent{fill:rgba(56,189,248,0.04);stroke:rgba(148,163,184,0.25);stroke-width:1.5;}
.hc-envd .floor{stroke:rgba(148,163,184,0.18);stroke-width:1;stroke-dasharray:3 4;}
.hc-envd .nlabel{fill:rgba(226,232,240,0.6);font:800 8px Inter,sans-serif;text-anchor:middle;}
.hc-envd .nval{font:800 9px Inter,sans-serif;text-anchor:middle;}
.hc-envd .sensor{stroke:rgba(255,255,255,0.5);stroke-width:1.5;}
.hc-envd .legbar{}
.hc-envd .legtxt{fill:rgba(226,232,240,0.5);font:700 7px Inter,sans-serif;}

/* ── DEMO: equipment card toggling ON ──────────────────────────────────────*/
.hc-eqd{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}
.hc-eqd-card{width:138px;border-radius:12px;padding:13px;display:flex;flex-direction:column;align-items:center;gap:9px;
  background:rgba(255,255,255,0.02);border:1px solid rgba(148,163,184,0.16);transition:background .3s,border-color .3s,box-shadow .3s;}
.hc-eqd-icon{width:40px;height:40px;color:rgba(186,211,232,0.35);}
.hc-eqd-icon svg{width:40px;height:40px;}
.hc-eqd-label{font-size:9px;font-weight:800;letter-spacing:0.12em;color:rgba(226,232,240,0.6);}
.hc-eqd-pill{position:relative;display:inline-block;font-size:9px;font-weight:800;letter-spacing:0.06em;}
.hc-eqd-pillbg{display:block;padding:3px 14px;border-radius:999px;background:rgba(240,80,110,0.16);color:transparent;transition:background .3s;}
.hc-eqd-pill .on,.hc-eqd-pill .off{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.hc-eqd-pill .off{color:#fda4b4;}
.hc-eqd-pill .on{color:#6ee7b7;opacity:0;}

/* ============================ MOTION (extra demos) ======================== */
@media (prefers-reduced-motion: no-preference){
  /* failsafe — 11s loop */
  [data-demo="failsafe"] .hc-d-cursor{animation:hcFailCur 11s cubic-bezier(.5,.1,.3,1) infinite;}
  [data-demo="failsafe"] .hc-d-click{animation:hcFailCur 11s cubic-bezier(.5,.1,.3,1) infinite, hcFailClick 11s linear infinite;}
  [data-demo="failsafe"] .hc-d-submit{animation:hcSubBtn 11s ease infinite;}
  [data-demo="failsafe"] .hc-d-fail{animation:hcFailModal 11s ease infinite;}
  [data-demo="failsafe"] .hc-d-fail-retry{animation:hcFailRetry 11s ease infinite;}
  [data-demo="failsafe"] .hc-d-fail-esc{animation:hcFailEsc 11s ease infinite;}
  [data-demo="failsafe"] .hc-d-toast{animation:hcFailToast 11s ease infinite;}
  @keyframes hcFailCur{0%{transform:translate(300px,178px);}9%{transform:translate(262px,16px);}
    16%{transform:translate(262px,16px);}30%{transform:translate(262px,16px);}50%{transform:translate(176px,104px);}
    56%{transform:translate(176px,104px);}100%{transform:translate(300px,178px);}}
  @keyframes hcFailClick{0%,9%{opacity:0;}10%{opacity:.9;}15%{opacity:0;transform:scale(1.8);}
    16%,50%{opacity:0;transform:scale(.3);}51%{opacity:.9;transform:scale(.3);}56%{opacity:0;transform:scale(1.8);}100%{opacity:0;}}
  @keyframes hcFailModal{0%,16%{opacity:0;transform:translateY(26px) scale(.95);}
    24%,72%{opacity:1;transform:translateY(0) scale(1);}78%,100%{opacity:0;transform:translateY(10px) scale(.97);}}
  @keyframes hcFailRetry{0%,50%{box-shadow:0 0 0 0 rgba(240,80,110,0);}53%{box-shadow:0 0 0 5px rgba(240,80,110,0.4);}58%,100%{box-shadow:0 0 0 0 rgba(240,80,110,0);}}
  @keyframes hcFailEsc{0%,30%{opacity:0;}37%,72%{opacity:1;}78%,100%{opacity:0;}}
  @keyframes hcFailToast{0%,66%{opacity:0;transform:translate(-50%,20px);}73%{opacity:1;transform:translate(-50%,0);}
    90%{opacity:1;transform:translate(-50%,0);}96%,100%{opacity:0;transform:translate(-50%,10px);}}

  /* environment heat dots — gentle pulse + one node heating up (6s) */
  .hc-envd .sensor{animation:hcEnvPulse 2.4s ease-in-out infinite;}
  .hc-envd .n-b .sensor{animation:hcEnvHeat 6s ease-in-out infinite;}
  .hc-envd .n-b .nval{animation:hcEnvHeatTxt 6s ease-in-out infinite;}
  @keyframes hcEnvPulse{0%,100%{opacity:.85;}50%{opacity:1;filter:drop-shadow(0 0 4px currentColor);}}
  @keyframes hcEnvHeat{0%,100%{fill:#34d399;}50%{fill:#f0506e;filter:drop-shadow(0 0 6px rgba(240,80,110,0.6));}}
  @keyframes hcEnvHeatTxt{0%,100%{fill:#6ee7b7;}50%{fill:#fda4b4;}}

  /* equipment card auto-toggle ON↔OFF (4.5s) */
  [data-demo="equip"] .hc-eqd-card{animation:hcEqCard 4.5s ease-in-out infinite;}
  [data-demo="equip"] .hc-eqd-icon{animation:hcEqIcon 4.5s ease-in-out infinite;}
  [data-demo="equip"] .hc-eqd-fan{transform-origin:16px 16px;animation:hcEqFan 4.5s linear infinite;}
  [data-demo="equip"] .hc-eqd-pillbg{animation:hcEqPillBg 4.5s steps(1) infinite;}
  [data-demo="equip"] .hc-eqd-pill .off{animation:hcEqOff 4.5s steps(1) infinite;}
  [data-demo="equip"] .hc-eqd-pill .on{animation:hcEqOn 4.5s steps(1) infinite;}
  @keyframes hcEqCard{0%,40%{background:rgba(255,255,255,0.02);border-color:rgba(148,163,184,0.16);box-shadow:none;}
    50%,92%{background:rgba(167,139,250,0.08);border-color:rgba(167,139,250,0.4);box-shadow:0 0 22px rgba(167,139,250,0.18);}100%{background:rgba(255,255,255,0.02);border-color:rgba(148,163,184,0.16);box-shadow:none;}}
  @keyframes hcEqIcon{0%,40%{color:rgba(186,211,232,0.35);}50%,92%{color:#ddd6fe;}100%{color:rgba(186,211,232,0.35);}}
  @keyframes hcEqFan{0%,42%{transform:rotate(0deg);}100%{transform:rotate(900deg);}}
  @keyframes hcEqPillBg{0%,44%{background:rgba(240,80,110,0.16);}48%,96%{background:rgba(52,211,153,0.18);}100%{background:rgba(240,80,110,0.16);}}
  @keyframes hcEqOff{0%,44%{opacity:1;}48%,96%{opacity:0;}100%{opacity:1;}}
  @keyframes hcEqOn{0%,44%{opacity:0;}48%,96%{opacity:1;}100%{opacity:0;}}
}
@media (prefers-reduced-motion: reduce){
  [data-demo="failsafe"] .hc-d-fail{opacity:1;transform:none;} [data-demo="failsafe"] .hc-d-fail-esc{opacity:1;}
  [data-demo="failsafe"] .hc-d-cursor,[data-demo="failsafe"] .hc-d-click,[data-demo="failsafe"] .hc-d-toast{display:none;}
  [data-demo="equip"] .hc-eqd-card{background:rgba(167,139,250,0.08);border-color:rgba(167,139,250,0.4);}
  [data-demo="equip"] .hc-eqd-icon{color:#ddd6fe;} [data-demo="equip"] .hc-eqd-pill .on{opacity:1;} [data-demo="equip"] .hc-eqd-pill .off{opacity:0;}
  [data-demo="equip"] .hc-eqd-pillbg{background:rgba(52,211,153,0.18);}
}

@media (max-width:520px){ .hc-demo-stage{transform:scale(0.86);} .hc-envd-svg{width:300px;} }

/* ═══════════════════════════════════════════════════════════════════════
   SECURITY SECTION — shield hero, live password meter, request-flow,
   layered defenses. Motion gated behind prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════ */

/* green / red verdict pills (extend the existing crit/warn/minor set) */
.hc-pill.ok { background: rgba(74,222,128,0.16); border:1px solid rgba(74,222,128,0.45); color:#bbf7d0; }
.hc-pill.no { background: rgba(248,113,113,0.16); border:1px solid rgba(248,113,113,0.45); color:#fecaca; }

/* ── Shield hero ─────────────────────────────────────────────────────── */
.sec-hero {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  margin: 18px 0 22px;
  padding: 22px 0 18px;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(80% 90% at 50% 20%, rgba(56,189,248,0.10), transparent 60%),
    rgba(8,14,22,0.45);
  border: 1px solid rgba(56,189,248,0.14);
}
.sec-hero-three { position:absolute; inset:0; width:100%; height:100%; opacity:0.7; pointer-events:none; }
.sec-hero-glow {
  position:absolute; left:50%; top:34%; width:200px; height:200px; transform:translate(-50%,-50%);
  background: radial-gradient(circle, rgba(56,189,248,0.22), transparent 65%);
  filter: blur(8px); pointer-events:none;
  animation: sec-glow 4s ease-in-out infinite;
}
@keyframes sec-glow { 0%,100%{opacity:0.6;} 50%{opacity:1;} }
.sec-hero-svg { position:relative; width:148px; height:auto; display:block; }
.sec-ring { transform-origin:60px 62px; }
.sec-ring-2 { animation: sec-spin 18s linear infinite; }
.sec-ring-3 { animation: sec-spin 30s linear infinite reverse; }
@keyframes sec-spin { to { transform: rotate(360deg); } }
.sec-shield-scan { animation: sec-scan 3.4s linear infinite; }
@keyframes sec-scan { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.sec-lock-dot { animation: sec-lockpulse 2.2s ease-in-out infinite; transform-origin:60px 69px; }
@keyframes sec-lockpulse { 0%,100%{opacity:0.7;} 50%{opacity:1;} }
.sec-hero-cap {
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  color: rgba(186,230,253,0.85);
}
.sec-hero-dot { width:7px; height:7px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 0 rgba(74,222,128,0.6); animation: sec-live 2s ease-out infinite; }
@keyframes sec-live { 0%{box-shadow:0 0 0 0 rgba(74,222,128,0.55);} 70%{box-shadow:0 0 0 7px rgba(74,222,128,0);} 100%{box-shadow:0 0 0 0 rgba(74,222,128,0);} }

/* ── Live password-strength meter ────────────────────────────────────── */
.sec-pw { margin: 12px 0 6px; padding: 16px 18px; border-radius:14px; background: rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.07); }
.sec-pw-body { display:flex; flex-direction:column; gap:11px; }
.sec-pw-input {
  width:100%; box-sizing:border-box; padding:11px 14px; border-radius:10px;
  font-size:14px; font-family:inherit; color:#fff;
  background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.12); outline:none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.sec-pw-input::placeholder { color: rgba(186,211,232,0.35); }
.sec-pw-input:focus { border-color: rgba(56,189,248,0.5); box-shadow:0 0 0 3px rgba(56,189,248,0.15); }
.sec-pw-meter { height:8px; border-radius:5px; background: rgba(148,163,184,0.16); overflow:hidden; }
.sec-pw-meter i { display:block; height:100%; width:0; border-radius:5px; transition: width 0.28s ease, background 0.28s ease; background:#64748b; }
.sec-pw-meter i[data-tier="1"], .sec-pw-meter i[data-tier="2"] { background: linear-gradient(90deg,#f87171,#fb923c); }
.sec-pw-meter i[data-tier="3"] { background: linear-gradient(90deg,#fb923c,#fbbf24); }
.sec-pw-meter i[data-tier="4"] { background: linear-gradient(90deg,#fbbf24,#a3e635); }
.sec-pw-meter i[data-tier="5"], .sec-pw-meter i[data-tier="6"] { background: linear-gradient(90deg,#4ade80,#22c55e); }
.sec-pw-verdict { font-family: var(--font-display,'Space Grotesk',sans-serif); font-size:13px; font-weight:700; letter-spacing:0.04em; color: rgba(186,211,232,0.6); }
.sec-pw-verdict[data-tier="1"], .sec-pw-verdict[data-tier="2"] { color:#fca5a5; }
.sec-pw-verdict[data-tier="3"] { color:#fcd34d; }
.sec-pw-verdict[data-tier="4"] { color:#bef264; }
.sec-pw-verdict[data-tier="5"], .sec-pw-verdict[data-tier="6"] { color:#86efac; }
.sec-pw-rules { list-style:none; margin:2px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:6px 16px; }
.sec-pw-rules li { display:flex; align-items:center; gap:9px; font-size:12px; color: rgba(186,211,232,0.55); transition: color 0.2s ease; }
.sec-pw-dot { flex-shrink:0; width:14px; height:14px; border-radius:50%; border:1px solid rgba(148,163,184,0.35); background:rgba(148,163,184,0.12); position:relative; transition: all 0.2s ease; }
.sec-pw-rules li.is-ok { color: rgba(187,247,208,0.95); }
.sec-pw-rules li.is-ok .sec-pw-dot { background:rgba(74,222,128,0.85); border-color:rgba(74,222,128,1); }
.sec-pw-rules li.is-ok .sec-pw-dot::after { content:''; position:absolute; left:4px; top:1.5px; width:3px; height:6px; border:solid #04101c; border-width:0 1.6px 1.6px 0; transform:rotate(45deg); }

/* ── Request-flow diagram ────────────────────────────────────────────── */
.sec-flow { margin:12px 0; padding:18px; border-radius:14px; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.07); }
.sec-flow-track { display:flex; align-items:stretch; gap:0; }
.sec-flow-node { flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:5px; align-items:center; text-align:center; padding:14px 10px; border-radius:12px; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.07); }
.sec-flow-node.sec-flow-server { background:rgba(56,189,248,0.07); border-color:rgba(56,189,248,0.30); }
.sec-flow-ic { width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; border-radius:11px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); color:rgba(186,211,232,0.7); }
.sec-flow-ic .hc-ic { width:20px; height:20px; }
.sec-flow-server .sec-flow-ic { color:#7dd3fc; background:rgba(56,189,248,0.12); border-color:rgba(56,189,248,0.4); }
.sec-flow-locked { color:#86efac !important; background:rgba(74,222,128,0.10) !important; border-color:rgba(74,222,128,0.35) !important; }
.sec-flow-name { font-family:var(--font-display,'Space Grotesk',sans-serif); font-size:12.5px; font-weight:700; color:rgba(237,233,254,0.95); }
.sec-flow-sub { font-size:11px; line-height:1.4; color:rgba(186,211,232,0.6); }
.sec-flow-link { flex:0 0 38px; align-self:center; position:relative; height:2px; background:rgba(148,163,184,0.25); border-radius:2px; }
.sec-flow-packet { position:absolute; top:50%; left:0; width:7px; height:7px; margin-top:-3.5px; border-radius:50%; background:#38bdf8; box-shadow:0 0 8px rgba(56,189,248,0.8); animation: sec-packet 2.4s ease-in-out infinite; }
.sec-flow-packet-2 { background:#4ade80; box-shadow:0 0 8px rgba(74,222,128,0.8); animation-delay:1.2s; }
@keyframes sec-packet { 0%{left:0; opacity:0;} 12%{opacity:1;} 88%{opacity:1;} 100%{left:100%; opacity:0;} }

/* ── Layered defenses ────────────────────────────────────────────────── */
.sec-layers { margin:12px 0; }
.sec-layers-list { display:flex; flex-direction:column; gap:8px; }
.sec-layer { display:flex; align-items:center; gap:13px; padding:12px 15px; border-radius:12px; background:rgba(74,222,128,0.05); border:1px solid rgba(74,222,128,0.22); }
.sec-layer.is-pending { background:rgba(251,191,36,0.05); border-color:rgba(251,191,36,0.28); border-style:dashed; }
.sec-layer-no { flex-shrink:0; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; font-family:var(--font-display,'Space Grotesk',sans-serif); font-weight:700; font-size:13px; color:#86efac; background:rgba(74,222,128,0.14); border:1px solid rgba(74,222,128,0.4); }
.sec-layer.is-pending .sec-layer-no { color:#fcd34d; background:rgba(251,191,36,0.12); border-color:rgba(251,191,36,0.4); }
.sec-layer-txt { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.sec-layer-txt b { font-size:13px; color:rgba(237,233,254,0.96); }
.sec-layer-txt span { font-size:11.5px; line-height:1.4; color:rgba(186,211,232,0.62); }
.sec-layer-state { flex-shrink:0; }

/* ── Status two-column ───────────────────────────────────────────────── */
.sec-status { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; margin:12px 0; }
.sec-status .hc-card { margin:0; }
.sec-status .hc-card ul { margin:8px 0 0; padding-left:18px; }
.sec-status .hc-card li { margin:3px 0; }

/* ── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sec-ring-2, .sec-ring-3, .sec-shield-scan, .sec-lock-dot, .sec-hero-glow,
  .sec-hero-dot, .sec-flow-packet { animation: none !important; }
  .sec-hero-three { display:none; }
}

/* ── Light theme ─────────────────────────────────────────────────────── */
html[data-theme="light"] .sec-hero { background: radial-gradient(80% 90% at 50% 20%, rgba(2,132,199,0.08), transparent 60%), rgba(255,255,255,0.85); border-color:rgba(2,132,199,0.18); }
html[data-theme="light"] .sec-pw, html[data-theme="light"] .sec-flow { background:rgba(15,23,42,0.03); border-color:rgba(15,23,42,0.08); }
html[data-theme="light"] .sec-pw-input { color:#0f172a; background:rgba(15,23,42,0.03); border-color:rgba(15,23,42,0.14); }
html[data-theme="light"] .sec-pw-rules li { color:rgba(71,85,105,0.7); }
html[data-theme="light"] .sec-pw-rules li.is-ok { color:rgba(22,101,52,1); }
html[data-theme="light"] .sec-flow-node { background:rgba(15,23,42,0.02); border-color:rgba(15,23,42,0.08); }
html[data-theme="light"] .sec-flow-name { color:#1e1b4b; }
html[data-theme="light"] .sec-flow-sub { color:rgba(71,85,105,0.75); }
html[data-theme="light"] .sec-layer-txt b { color:#1e1b4b; }
html[data-theme="light"] .sec-layer-txt span { color:rgba(71,85,105,0.75); }

@media (max-width:560px) {
  .sec-flow-track { flex-direction:column; gap:10px; }
  .sec-flow-link { flex-basis:24px; width:2px; height:24px; align-self:center; }
  .sec-flow-packet { left:50%; top:0; margin-left:-3.5px; }
  @keyframes sec-packet { 0%{top:0; opacity:0;} 12%{opacity:1;} 88%{opacity:1;} 100%{top:100%; opacity:0;} }
}

/* ============================================================================
   New live demos (CLAUDE-2, 2026-06-13): Home Tent hub, threshold editor,
   account management. Same conventions — resting/final frame shown by default,
   motion gated behind prefers-reduced-motion:no-preference.
   ========================================================================== */

/* ── DEMO: Home Tent hub (bento) ────────────────────────────────────────────*/
.hc-htd{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"inv todo" "buy todo" "sched sched";
  gap:8px;width:360px;flex:0 0 360px;font-family:Inter,system-ui,sans-serif;}
.hc-htd-panel{border:1px solid rgba(148,163,184,0.14);border-radius:10px;padding:9px 10px;
  background:linear-gradient(160deg,rgba(56,189,248,0.05),rgba(7,10,24,0.5));opacity:1;}
.hc-htd-inv{grid-area:inv;} .hc-htd-todo{grid-area:todo;} .hc-htd-buy{grid-area:buy;} .hc-htd-sched{grid-area:sched;}
.hc-htd-hd{display:flex;align-items:center;gap:6px;font-size:9.5px;font-weight:700;letter-spacing:0.12em;
  text-transform:uppercase;color:rgba(125,211,252,0.85);margin-bottom:7px;}
.hc-htd-dot{width:6px;height:6px;border-radius:50%;}
.hc-htd-dot.c{background:var(--hcd-cyan);} .hc-htd-dot.v{background:var(--hcd-violet);} .hc-htd-dot.t{background:var(--hcd-teal);}
.hc-htd-invbody{display:flex;align-items:center;gap:9px;}
.hc-htd-ringfill{stroke-dasharray:106.8;stroke-dashoffset:66.2;}
.hc-htd-big{font-size:18px;font-weight:800;color:#e7ecf5;}
.hc-htd-sub{display:block;font-size:9px;color:rgba(148,163,184,0.8);}
.hc-htd-trow{display:flex;align-items:center;gap:7px;padding:3px 0;font-size:10.5px;color:rgba(226,232,240,0.85);}
.hc-htd-check{width:14px;height:14px;flex:0 0 14px;border-radius:4px;border:1.5px solid rgba(148,163,184,0.5);
  display:flex;align-items:center;justify-content:center;background:transparent;}
.hc-htd-tick .hc-htd-check{background:var(--hcd-green);border-color:var(--hcd-green);}
.hc-htd-checkpath{stroke-dasharray:14;stroke-dashoffset:0;}
.hc-htd-tick .hc-htd-tlabel{color:rgba(148,163,184,0.65);text-decoration:line-through;}
.hc-htd-brow{display:flex;justify-content:space-between;font-size:10px;color:rgba(226,232,240,0.82);padding:2.5px 0;}
.hc-htd-price{color:var(--hcd-green);font-weight:700;}
.hc-htd-days{display:flex;gap:5px;}
.hc-htd-days i{flex:1;text-align:center;font-size:9.5px;font-weight:700;font-style:normal;padding:5px 0;border-radius:6px;
  color:rgba(148,163,184,0.75);background:rgba(148,163,184,0.08);border:1px solid rgba(148,163,184,0.12);}
.hc-htd-days i.on{color:#04121c;background:var(--hcd-cyan);border-color:var(--hcd-cyan);}

@media (prefers-reduced-motion: no-preference){
  .hc-htd-inv{animation:htdIn 6s ease infinite;}
  .hc-htd-todo{animation:htdIn 6s ease infinite .12s;}
  .hc-htd-buy{animation:htdIn 6s ease infinite .24s;}
  .hc-htd-sched{animation:htdIn 6s ease infinite .36s;}
  .hc-htd-ringfill{animation:htdRing 6s ease infinite;}
  .hc-htd-tick .hc-htd-check{animation:htdCheckBg 6s ease infinite;}
  .hc-htd-checkpath{animation:htdCheck 6s ease infinite;}
  @keyframes htdIn{0%{opacity:0;transform:translateY(12px) scale(.96);}14%,92%{opacity:1;transform:none;}100%{opacity:0;transform:translateY(12px) scale(.96);}}
  @keyframes htdRing{0%,16%{stroke-dashoffset:106.8;}46%,92%{stroke-dashoffset:66.2;}100%{stroke-dashoffset:106.8;}}
  @keyframes htdCheck{0%,40%{stroke-dashoffset:14;}55%,92%{stroke-dashoffset:0;}100%{stroke-dashoffset:14;}}
  @keyframes htdCheckBg{0%,40%{background:transparent;border-color:rgba(148,163,184,0.5);}50%,92%{background:var(--hcd-green);border-color:var(--hcd-green);}100%{background:transparent;border-color:rgba(148,163,184,0.5);}}
}

/* ── DEMO: threshold editor ─────────────────────────────────────────────────*/
.hc-thd{width:360px;flex:0 0 360px;font-family:Inter,system-ui,sans-serif;padding:4px 6px;}
.hc-thd-hd{font-size:11px;font-weight:700;color:#cfe8ff;margin-bottom:9px;display:flex;align-items:center;gap:7px;}
.hc-thd-metric{font-size:9px;font-weight:800;letter-spacing:0.1em;color:#04121c;background:var(--hcd-cyan);padding:2px 7px;border-radius:6px;}
.hc-thd-scope{display:flex;gap:6px;margin-bottom:14px;}
.hc-thd-scope i{font-style:normal;font-size:9.5px;font-weight:700;padding:4px 9px;border-radius:7px;
  color:rgba(148,163,184,0.85);background:rgba(148,163,184,0.08);border:1px solid rgba(148,163,184,0.14);}
.hc-thd-scope .s-global{color:#04121c;background:var(--hcd-violet);border-color:var(--hcd-violet);}
.hc-thd-track{position:relative;height:8px;border-radius:5px;background:rgba(148,163,184,0.16);margin:22px 6px 10px;}
.hc-thd-band{position:absolute;top:0;bottom:0;left:18%;right:14%;border-radius:5px;
  background:linear-gradient(90deg,rgba(52,211,153,0.5),rgba(56,189,248,0.5));}
.hc-thd-handle{position:absolute;top:50%;width:15px;height:15px;border-radius:50%;background:#e7ecf5;
  border:2px solid var(--hcd-cyan);transform:translate(-50%,-50%);box-shadow:0 2px 6px rgba(0,0,0,0.4);}
.hc-thd-handle.lo{left:18%;} .hc-thd-handle.hi{left:86%;}
.hc-thd-read{position:absolute;top:50%;left:40%;width:9px;height:9px;border-radius:50%;
  transform:translate(-50%,-50%);background:var(--hcd-green);box-shadow:0 0 0 3px rgba(52,211,153,0.25);}
.hc-thd-cursor{transform:translate(64px,30px);}
.hc-thd-vals{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:rgba(226,232,240,0.85);margin:0 4px;}
.hc-thd-min,.hc-thd-max{font-weight:800;color:#e7ecf5;background:rgba(148,163,184,0.1);padding:2px 7px;border-radius:6px;font-variant-numeric:tabular-nums;}
.hc-thd-status{font-size:9.5px;font-weight:700;letter-spacing:0.04em;color:var(--hcd-green);}
.hc-thd-status .v2{display:none;}

@media (prefers-reduced-motion: no-preference){
  .hc-thd-scope .s-global{animation:thdScopeG 7s ease infinite;}
  .hc-thd-scope .s-room{animation:thdScopeR 7s ease infinite;}
  .hc-thd-handle.lo{animation:thdLo 7s ease infinite;}
  .hc-thd-band{animation:thdBand 7s ease infinite;}
  .hc-thd-read{animation:thdRead 7s ease infinite;}
  .hc-thd-cursor{animation:thdCursor 7s ease infinite;}
  .hc-thd-min .v1{animation:thdV1 7s steps(1) infinite;}
  .hc-thd-min .v2{animation:thdV2 7s steps(1) infinite;}
  .hc-thd-status{animation:thdStatus 7s steps(1) infinite;}
  .hc-thd-status .v1{animation:thdV1 7s steps(1) infinite;}
  .hc-thd-status .v2{animation:thdV2 7s steps(1) infinite;}
  @keyframes thdCursor{0%{transform:translate(160px,60px);opacity:0;}10%{opacity:1;}28%{transform:translate(64px,30px);}40%{transform:translate(150px,30px);}60%,100%{transform:translate(150px,30px);opacity:.5;}}
  @keyframes thdLo{0%,30%{left:18%;}55%,100%{left:50%;}}
  @keyframes thdBand{0%,30%{left:18%;}55%,100%{left:50%;}}
  @keyframes thdRead{0%,46%{background:var(--hcd-green);box-shadow:0 0 0 3px rgba(52,211,153,0.25);}
    52%,100%{background:var(--hcd-red);box-shadow:0 0 0 3px rgba(240,80,110,0.3);}}
  @keyframes thdStatus{0%,48%{color:var(--hcd-green);}52%,100%{color:var(--hcd-red);}}
  @keyframes thdV1{0%,48%{display:inline;}52%,100%{display:none;}}
  @keyframes thdV2{0%,48%{display:none;}52%,100%{display:inline;}}
  @keyframes thdScopeG{0%,40%{color:#04121c;background:var(--hcd-violet);border-color:var(--hcd-violet);}48%,100%{color:rgba(148,163,184,0.85);background:rgba(148,163,184,0.08);border-color:rgba(148,163,184,0.14);}}
  @keyframes thdScopeR{0%,40%{color:rgba(148,163,184,0.85);background:rgba(148,163,184,0.08);border-color:rgba(148,163,184,0.14);}48%,100%{color:#04121c;background:var(--hcd-cyan);border-color:var(--hcd-cyan);}}
}
.hc-thd-min .v2{display:none;}

/* ── DEMO: account suspend ──────────────────────────────────────────────────*/
.hc-acd{position:relative;width:360px;flex:0 0 360px;font-family:Inter,system-ui,sans-serif;min-height:120px;}
.hc-acd-row{position:relative;display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:11px;
  border:1px solid rgba(148,163,184,0.16);background:linear-gradient(160deg,rgba(56,189,248,0.05),rgba(7,10,24,0.5));}
.hc-acd-avatar{width:30px;height:30px;flex:0 0 30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:12px;color:#04121c;background:linear-gradient(135deg,var(--hcd-cyan),var(--hcd-violet));}
.hc-acd-name{font-size:12px;font-weight:700;color:#e7ecf5;display:flex;flex-direction:column;line-height:1.25;}
.hc-acd-name small{font-size:9px;font-weight:600;color:rgba(148,163,184,0.8);}
.hc-acd-status{margin-left:auto;position:relative;min-width:64px;text-align:right;}
.hc-acd-status b{font-size:9.5px;font-weight:800;letter-spacing:0.05em;padding:3px 8px;border-radius:6px;}
.st-active{color:#04121c;background:var(--hcd-green);}
.st-susp{display:none;color:#04121c;background:var(--hcd-amber);}
.hc-acd-btn{font-size:9.5px;font-weight:700;color:#04121c;background:var(--hcd-amber);padding:5px 10px;border-radius:7px;}
.hc-acd-cursor{transform:translate(300px,30px);}
.hc-acd-confirm{position:absolute;left:40px;right:40px;top:46px;border-radius:11px;padding:12px 14px;z-index:5;
  background:rgba(10,14,28,0.97);border:1px solid rgba(251,191,36,0.35);box-shadow:0 16px 40px rgba(0,0,0,0.5);
  opacity:0;transform:translateY(10px) scale(.96);pointer-events:none;}
.hc-acd-confirm-h{font-size:12px;font-weight:800;color:#fde68a;margin-bottom:4px;}
.hc-acd-confirm-sub{font-size:9.5px;color:rgba(203,213,225,0.85);line-height:1.4;margin-bottom:10px;}
.hc-acd-confirm-btns{display:flex;gap:8px;justify-content:flex-end;}
.hc-acd-confirm-btns span{font-size:9.5px;font-weight:700;padding:5px 10px;border-radius:7px;}
.hc-acd-confirm-btns .ghost{color:rgba(203,213,225,0.85);border:1px solid rgba(148,163,184,0.3);}
.hc-acd-confirm-btns .warn{color:#04121c;background:var(--hcd-amber);}

@media (prefers-reduced-motion: no-preference){
  .hc-acd-cursor{animation:acdCursor 8s ease infinite;}
  .hc-acd-confirm{animation:acdConfirm 8s ease infinite;}
  .hc-acd-row{animation:acdRow 8s ease infinite;}
  .st-active{animation:acdActive 8s steps(1) infinite;}
  .st-susp{animation:acdSusp 8s steps(1) infinite;}
  @keyframes acdCursor{0%{transform:translate(300px,80px);opacity:0;}8%{opacity:1;}20%{transform:translate(300px,30px);}
    26%{transform:translate(300px,30px) scale(.85);}32%{transform:translate(300px,30px);}
    44%{transform:translate(250px,96px);}50%{transform:translate(250px,96px) scale(.85);}56%,100%{transform:translate(250px,96px);opacity:.5;}}
  @keyframes acdConfirm{0%,28%{opacity:0;transform:translateY(10px) scale(.96);pointer-events:none;}
    34%,52%{opacity:1;transform:none;}58%,100%{opacity:0;transform:translateY(10px) scale(.96);}}
  @keyframes acdRow{0%,58%{opacity:1;filter:none;}66%,92%{opacity:.5;filter:grayscale(.4);}100%{opacity:1;filter:none;}}
  @keyframes acdActive{0%,58%{display:inline-block;}59%,96%{display:none;}100%{display:inline-block;}}
  @keyframes acdSusp{0%,58%{display:none;}59%,96%{display:inline-block;}100%{display:none;}}
}

/* ── IPM live demos (CLAUDE-3) — same .hc-demo stage as Submit/Inbox ────────── */
/* Demo 1 — interactive map */
.hc-ipm-badge{margin-left:auto;font-size:8px;font-weight:800;letter-spacing:.04em;color:#fff;background:rgba(240,80,110,0.85);padding:2px 7px;border-radius:6px;}
.hc-ipm-stage{position:absolute;inset:0;}
.hc-ipm-pot{position:absolute;width:13px;height:13px;border-radius:50%;transform:translate(-50%,-50%);box-shadow:inset 0 1px 1px rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.4);}
.hc-ipm-pot.clean{background:radial-gradient(circle at 35% 30%,#5ee9b5,#34d399);}
.hc-ipm-pot.flag{background:radial-gradient(circle at 35% 30%,#fdba74,#fb923c);}
.hc-ipm-pot.quar{background:radial-gradient(circle at 35% 30%,#fb7185,#f0506e);}
.hc-ipm-pot.treat{background:radial-gradient(circle at 35% 30%,#7dd3fc,#38bdf8);}
.hc-ipm-pot.flag,.hc-ipm-pot.quar{box-shadow:0 0 7px rgba(251,146,60,.5),0 1px 2px rgba(0,0,0,.4);}
.hc-ipm-tip{position:absolute;z-index:6;transform:translate(-50%,-130%) scale(.9);transform-origin:50% 120%;opacity:0;
  background:rgba(8,12,26,0.98);border:1px solid rgba(251,146,60,0.5);border-radius:8px;padding:5px 9px;white-space:nowrap;box-shadow:0 8px 20px rgba(0,0,0,.5);}
.hc-ipm-tip b{display:block;font-size:9px;font-weight:700;color:#fed7aa;}
.hc-ipm-tip span{font-size:8px;color:rgba(226,232,240,0.6);}
.hc-ipm-tip::after{content:"";position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);border:5px solid transparent;border-top-color:rgba(8,12,26,0.98);}
.hc-ipm-legend{position:absolute;left:10px;right:10px;bottom:7px;display:flex;align-items:center;gap:9px;font-size:8px;color:rgba(226,232,240,0.55);z-index:5;}
.hc-ipm-legend i{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:2px;vertical-align:-1px;}
.hc-ipm-legend i.clean{background:#34d399;}.hc-ipm-legend i.flag{background:#fb923c;}.hc-ipm-legend i.quar{background:#f0506e;}.hc-ipm-legend i.treat{background:#38bdf8;}

/* Demo 2 — flag-a-pot modal */
.hc-ipf-modal{position:absolute;left:22px;right:22px;top:44px;bottom:14px;border-radius:11px;padding:11px 13px;display:flex;flex-direction:column;
  background:rgba(11,16,34,0.98);border:1px solid rgba(56,189,248,0.32);box-shadow:0 18px 40px rgba(0,0,0,.5);opacity:0;transform:translateY(30px) scale(.97);}
.hc-ipf-h{font-size:10.5px;font-weight:700;color:#cfe8ff;margin-bottom:9px;}
.hc-ipf-rail{position:relative;display:flex;gap:5px;margin-bottom:11px;}
.hc-ipf-rail i{flex:1;height:4px;border-radius:3px;background:rgba(148,163,184,0.2);}
.hc-ipf-railfill{position:absolute;left:0;top:0;height:4px;width:100%;border-radius:3px;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--hcd-cyan),var(--hcd-violet));}
.hc-ipf-panes{position:relative;flex:1;}
.hc-ipf-pane{position:absolute;inset:0;opacity:0;}
.hc-ipf-q{display:block;font-size:9.5px;font-weight:700;color:rgba(226,232,240,0.75);margin-bottom:9px;}
.hc-ipf-chips{display:flex;gap:7px;flex-wrap:wrap;}
.hc-ipf-chips b{font-size:9.5px;font-weight:600;color:rgba(231,236,245,0.85);background:rgba(148,163,184,0.08);
  border:1px solid rgba(148,163,184,0.22);border-radius:8px;padding:6px 11px;transition:none;}
.hc-ipf-acts{display:flex;flex-direction:column;gap:5px;}
.hc-ipf-acts span{font-size:9px;color:rgba(231,236,245,0.85);background:rgba(52,211,153,0.08);border:1px solid rgba(52,211,153,0.25);
  border-radius:7px;padding:5px 9px 5px 22px;position:relative;}
.hc-ipf-acts span::before{content:"✓";position:absolute;left:8px;color:var(--hcd-green);font-weight:800;}
.hc-ipf-save{margin-top:9px;text-align:center;font-size:10px;font-weight:700;border-radius:8px;padding:7px 0;background:var(--hcd-cyan);color:#04121c;position:relative;}
.hc-ipf-save .lbl-go,.hc-ipf-save .lbl-done{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.hc-ipf-save .lbl-done{opacity:0;}
.hc-ipf-toast{position:absolute;left:50%;bottom:12px;transform:translate(-50%,20px);opacity:0;z-index:7;font-size:9.5px;font-weight:700;color:#fff;
  background:#fb923c;padding:6px 12px 6px 24px;border-radius:8px;white-space:nowrap;box-shadow:0 8px 20px rgba(251,146,60,0.35);}
.hc-ipf-toast::before{content:"⚑";position:absolute;left:10px;}

@media (prefers-reduced-motion: no-preference){
  /* MAP demo — 8s loop */
  [data-demo="ipm-map"] .hc-d-cursor{animation:ipmMapCur 8s cubic-bezier(.5,.1,.3,1) infinite;}
  [data-demo="ipm-map"] .hc-d-click{animation:ipmMapClick 8s linear infinite;}
  [data-demo="ipm-map"] .hc-ipm-tip{animation:ipmTip 8s ease infinite;}
  [data-demo="ipm-map"] .hc-ipm-pot.tgt{animation:ipmTgt 8s ease infinite;}
  @keyframes ipmMapCur{0%{transform:translate(300px,178px);}18%{transform:translate(216px,90px);}26%,74%{transform:translate(216px,90px);}92%,100%{transform:translate(300px,178px);}}
  @keyframes ipmMapClick{0%,17%{opacity:0;transform:translate(216px,90px) scale(.3);}19%{opacity:.9;transform:translate(216px,90px) scale(.45);}25%{opacity:0;transform:translate(216px,90px) scale(1.9);}100%{opacity:0;transform:translate(216px,90px) scale(.3);}}
  @keyframes ipmTip{0%,20%{opacity:0;transform:translate(-50%,-115%) scale(.9);}26%{opacity:1;transform:translate(-50%,-130%) scale(1);}72%{opacity:1;transform:translate(-50%,-130%) scale(1);}80%,100%{opacity:0;transform:translate(-50%,-120%) scale(.95);}}
  @keyframes ipmTgt{0%,18%{box-shadow:0 0 7px rgba(251,146,60,.5);}26%,74%{box-shadow:0 0 0 3px rgba(56,189,248,.6),0 0 11px rgba(251,146,60,.7);}82%,100%{box-shadow:0 0 7px rgba(251,146,60,.5);}}

  /* FLAG demo — 13s loop */
  [data-demo="ipm-flag"] .hc-d-cursor{animation:ipfCur 13s cubic-bezier(.5,.1,.3,1) infinite;}
  [data-demo="ipm-flag"] .hc-d-click{display:none;}
  [data-demo="ipm-flag"] .hc-ipf-modal{animation:ipfModal 13s ease infinite;}
  [data-demo="ipm-flag"] .hc-ipf-railfill{animation:ipfRail 13s ease infinite;}
  [data-demo="ipm-flag"] .hc-ipf-pane.p1{animation:ipfP1 13s ease infinite;}
  [data-demo="ipm-flag"] .hc-ipf-pane.p2{animation:ipfP2 13s ease infinite;}
  [data-demo="ipm-flag"] .hc-ipf-pane.p3{animation:ipfP3 13s ease infinite;}
  [data-demo="ipm-flag"] .c-pest{animation:ipfPickA 13s ease infinite;}
  [data-demo="ipm-flag"] .c-spread{animation:ipfPickB 13s ease infinite;}
  [data-demo="ipm-flag"] .hc-ipf-save{animation:ipfSaveBg 13s steps(1) infinite;}
  [data-demo="ipm-flag"] .hc-ipf-save .lbl-go{animation:ipfGoOff 13s steps(1) infinite;}
  [data-demo="ipm-flag"] .hc-ipf-save .lbl-done{animation:ipfDoneOn 13s steps(1) infinite;}
  [data-demo="ipm-flag"] .hc-ipf-toast{animation:ipfToast 13s ease infinite;}
  @keyframes ipfCur{0%{transform:translate(300px,178px);}10%{transform:translate(72px,116px);}16%,30%{transform:translate(72px,116px);}38%{transform:translate(250px,116px);}44%,52%{transform:translate(250px,116px);}64%{transform:translate(180px,176px);}72%,86%{transform:translate(180px,176px);}100%{transform:translate(300px,178px);}}
  @keyframes ipfModal{0%,4%{opacity:0;transform:translateY(30px) scale(.97);}9%,90%{opacity:1;transform:none;}95%,100%{opacity:0;transform:translateY(12px) scale(.98);}}
  @keyframes ipfRail{0%,6%{transform:scaleX(0);}72%,90%{transform:scaleX(1);}95%,100%{transform:scaleX(0);opacity:0;}}
  @keyframes ipfP1{0%,8%{opacity:0;}12%,28%{opacity:1;}32%,100%{opacity:0;}}
  @keyframes ipfP2{0%,32%{opacity:0;}36%,50%{opacity:1;}54%,100%{opacity:0;}}
  @keyframes ipfP3{0%,54%{opacity:0;}58%,88%{opacity:1;}92%,100%{opacity:0;}}
  @keyframes ipfPickA{0%,14%{background:rgba(148,163,184,0.08);border-color:rgba(148,163,184,0.22);color:rgba(231,236,245,0.85);}16%,30%{background:rgba(251,146,60,0.18);border-color:#fb923c;color:#fed7aa;}31%,100%{background:rgba(148,163,184,0.08);border-color:rgba(148,163,184,0.22);}}
  @keyframes ipfPickB{0%,40%{background:rgba(148,163,184,0.08);border-color:rgba(148,163,184,0.22);color:rgba(231,236,245,0.85);}42%,52%{background:rgba(240,80,110,0.18);border-color:var(--hcd-red);color:#fda4b4;}53%,100%{background:rgba(148,163,184,0.08);border-color:rgba(148,163,184,0.22);}}
  @keyframes ipfSaveBg{0%,70%{background:var(--hcd-cyan);}72%,100%{background:var(--hcd-green);}}
  @keyframes ipfGoOff{0%,70%{opacity:1;}72%,100%{opacity:0;}}
  @keyframes ipfDoneOn{0%,71%{opacity:0;}74%,100%{opacity:1;}}
  @keyframes ipfToast{0%,74%{opacity:0;transform:translate(-50%,20px);}80%,90%{opacity:1;transform:translate(-50%,0);}96%,100%{opacity:0;transform:translate(-50%,10px);}}
}

@media (prefers-reduced-motion: reduce){
  [data-demo="ipm-map"] .hc-d-cursor,[data-demo="ipm-map"] .hc-d-click{display:none;}
  .hc-ipm-tip{opacity:1;transform:translate(-50%,-130%) scale(1);}
  [data-demo="ipm-flag"] .hc-d-cursor,[data-demo="ipm-flag"] .hc-d-click{display:none;}
  .hc-ipf-modal{opacity:1;transform:none;}
  .hc-ipf-railfill{transform:scaleX(.43);}
  .hc-ipf-pane.p1{opacity:1;}
}

/* ════════════════════════════════════════════════════════════════════════
   LIGHT MODE
   The animated demo STAGES (.hc-demo-stage and every .hc-d*/.hc-htd*/.hc-thd*/
   .hc-acd*/.hc-ipm*/.hc-ipf*/.hc-envd/.hc-eqd/.hc-diag/.hc-crash inside them)
   are deliberate mock-ups of the dark dashboard — like silent screen-recordings
   — so they intentionally stay dark on both themes and are left untouched.
   Only the chrome that sits directly on the LIGHT help-center content surface is
   re-skinned here: the demo caption note, the "For:" tab chip, and the FAQ
   accordion. The .sec-* light overrides live earlier in this file already.
   ════════════════════════════════════════════════════════════════════════ */

/* Caption under a demo (on light content) */
html[data-theme="light"] .hc-demo-note {
  color: var(--text-secondary);
  border-left-color: rgba(2,132,199,0.4);
}
html[data-theme="light"] .hc-demo-note b { color: var(--accent-cyan, #0284c7); }

/* "For: <tab>" context chip — light-cyan text is invisible on the light chip */
html[data-theme="light"] .hc-tabchip {
  color: var(--accent-cyan, #0284c7);
  background: rgba(2,132,199,0.10);
  border-color: rgba(2,132,199,0.28);
}
html[data-theme="light"] .hc-tabchip b { color: var(--text-primary); }
html[data-theme="light"] .hc-tabchip .lbl { color: var(--text-muted); }

/* FAQ accordion (native <details>, on light content) */
html[data-theme="light"] .hc-faq-item {
  background: var(--glass-1, rgba(255,255,255,0.52));
  border-color: var(--glass-border, rgba(130,100,200,0.18));
}
html[data-theme="light"] .hc-faq-item[open] {
  border-color: rgba(2,132,199,0.35);
  background: rgba(2,132,199,0.06);
}
html[data-theme="light"] .hc-faq-item summary { color: var(--text-primary); }
html[data-theme="light"] .hc-faq-item summary:hover { color: var(--accent-cyan, #0284c7); }
html[data-theme="light"] .hc-faq-chev { color: var(--text-muted); }
html[data-theme="light"] .hc-faq-item[open] .hc-faq-chev { color: var(--accent-cyan, #0284c7); }
html[data-theme="light"] .hc-faq-a { color: var(--text-secondary); }
html[data-theme="light"] .hc-faq-a b { color: var(--text-primary); }
html[data-theme="light"] .hc-faq-a code {
  background: rgba(2,132,199,0.10);
  color: var(--accent-cyan, #0284c7);
}

/* Security section: caption + verdict text that the earlier .sec-* block missed */
html[data-theme="light"] .sec-hero-cap { color: var(--accent-cyan, #0284c7); }
html[data-theme="light"] .sec-pw-verdict { color: var(--text-secondary); }