/* Ten treatments of the Signal stitch diagram. Copy, cards and timing stay the
   same; each block changes only materials, wires and atmosphere. */
.canopy-call-hero .fx-layer { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.canopy-call-hero .fx-under { z-index:0; }
.canopy-call-hero .fx-over { z-index:1; }
.canopy-call-hero .fx-mono { font:500 9.5px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace; letter-spacing:.14em; fill:#6b7672; }
.canopy-call-hero .fx-mono-strong { fill:#2f3a36; font-weight:600; }
.canopy-call-hero.dl-switchboard .h11-src::after, .canopy-call-hero.dl-switchboard .h11-out::before { pointer-events:none; }

/* ---------- 05 Switchboard ---------- */
.canopy-call-hero.dl-switchboard .h11-art::before { content:""; position:absolute; inset:-60px -30px; background:radial-gradient(#2a2f351c 1.1px,#0000 1.6px) 0 0/16px 16px; -webkit-mask:radial-gradient(closest-side,#000 35%,#0000); mask:radial-gradient(closest-side,#000 35%,#0000); pointer-events:none; }
.canopy-call-hero.dl-switchboard .h11-wires { opacity:0; }
.canopy-call-hero.dl-switchboard .h11-src, .canopy-call-hero.dl-switchboard .h11-out { border-radius:12px; background:linear-gradient(180deg,#fff,#f6f6f3); box-shadow:0 1px 0 #fff inset,0 0 0 1px #2a2c3014,0 18px 26px -20px #2a2c3066; }
.canopy-call-hero.dl-switchboard .h11-src::after, .canopy-call-hero.dl-switchboard .h11-out::before { content:""; position:absolute; top:calc(50% - 9px); width:18px; height:18px; border-radius:50%; background:radial-gradient(circle,#141518 0 3.5px,#5b5e64 4px 5.5px,#d9d6cc 6px); box-shadow:0 1px 2px #0003; }
.canopy-call-hero.dl-switchboard .h11-src::after { right:-9px; }
.canopy-call-hero.dl-switchboard .h11-out::before { left:-9px; }
.canopy-call-hero.dl-switchboard .h11-hubcard { border-radius:30px; background:linear-gradient(160deg,#3a3c41,#2a2c30); box-shadow:inset 0 1px 0 #ffffff1f,inset 0 -3px 0 #0006,0 28px 44px -20px #1d1f2480; }
.canopy-call-hero.dl-switchboard .h11-hubcard .h11-livedot { display:none; }
.canopy-call-hero.dl-switchboard .h11-v { object-fit:contain; width:78px; margin-top:14px; }
.canopy-call-hero.dl-switchboard .h11-hubcard .h11-wave i { background:color-mix(in srgb,#f0bd5e calc(var(--amp) * 100%),#7d8087); }
.canopy-call-hero.dl-switchboard .fx-lamps { position:absolute; top:20px; left:0; right:0; display:flex; justify-content:center; gap:9px; }
.canopy-call-hero.dl-switchboard .fx-lamps i { --on:0; width:8px; height:8px; border-radius:50%; background:color-mix(in srgb,#f6cf7d calc(var(--on) * 100%),#4b4d53); box-shadow:0 0 calc(var(--on) * 10px) calc(var(--on) * 1px) #f0bd5e99,inset 0 -1px 0 #0005; }
.canopy-call-hero.dl-switchboard .fx-lamps i:nth-child(3) { margin-right:10px; }
.canopy-call-hero.dl-switchboard .h11-ring-in, .canopy-call-hero.dl-switchboard .h11-ring-out, .canopy-call-hero.dl-switchboard .h11-orbit { opacity:0; }
.canopy-call-hero.dl-switchboard .h11-sonar circle { stroke:#c9a560; }


/* The supporting material changes; Switchboard's cards, cables and hub stay. */
.canopy-call-hero.grain-switchboard .h11-art::before { display:none; }
.canopy-call-hero.grain-switchboard .h11-sonar { visibility:hidden; }
.canopy-call-hero.grain-switchboard .h11-glow { opacity:.25; }
.canopy-call-hero.grain-switchboard .h11-out .h11-ok { width:22px; height:26px; padding:0; justify-content:center; background:transparent; }
.canopy-call-hero.grain-switchboard .h11-out .h11-ok svg { width:18px; height:18px; }
.canopy-call-hero.grain-switchboard .grain-material { position:absolute; left:0; top:-80px; width:100%; height:calc(100% + 160px); z-index:0; pointer-events:none; }
@media(max-width:1000px) {
  .canopy-call-hero.grain-switchboard .grain-material { top:0; height:100%; }
  .canopy-call-hero.grain-switchboard .h11-m11 .h11-stack { max-width:100%; }
  .canopy-call-hero.grain-switchboard .h11-src::after { right:auto; left:calc(50% - 9px); top:auto; bottom:-9px; }
  .canopy-call-hero.grain-switchboard .h11-out::before { left:calc(50% - 9px); top:-9px; }
}

/* Rounded stacked connections use card-side ports on phones and tablets. */
@media(max-width:1000px) {
  .canopy-call-hero.grain-switchboard .h11-src[data-mobile-port="left"]::after,
  .canopy-call-hero.grain-switchboard .h11-out[data-mobile-port="left"]::before { left:-7px; right:auto; top:calc(50% - 7px); bottom:auto; width:14px; height:14px; }
  .canopy-call-hero.grain-switchboard .h11-src[data-mobile-port="right"]::after,
  .canopy-call-hero.grain-switchboard .h11-out[data-mobile-port="right"]::before { left:auto; right:-7px; top:calc(50% - 7px); bottom:auto; width:14px; height:14px; }
  .canopy-call-hero.grain-switchboard .h11-src[data-mobile-port="bottom"]::after { left:calc(50% - 7px); bottom:-7px; width:14px; height:14px; }
}

/* Give the stacked tablet diagram room to use its wider canvas. */
@media(min-width:761px) and (max-width:1000px) {
  .canopy-call-hero .h11-m11 .h11-src,
  .canopy-call-hero .h11-m11 .h11-out { width:min(420px,calc(100% - 64px)); }
}

/* Compact the phone diagram and hide its decorative glow. */
@media(max-width:760px) {
  .canopy-call-hero.grain-switchboard .grain-material,
  .canopy-call-hero.grain-switchboard .h11-glow,
  .canopy-call-hero.grain-switchboard .h11-hub-rings { display:none; }
  .canopy-call-hero.dl-switchboard .h11-art::before { display:none; }
  .canopy-call-hero .h11-m11 .h11-src,
  .canopy-call-hero .h11-m11 .h11-out { width:min(262px,calc(100% - 40px)); }
  /* Compact the phone diagram without changing desktop content or geometry. */
  .canopy-call-hero .h11-m11 { gap:10px; }
  .canopy-call-hero .h11-m11 .h11-src .h11-lab { display:none; }
  .canopy-call-hero .h11-m11 .h11-src { padding:8px 12px; min-height:48px; }
  .canopy-call-hero .h11-m11 .h11-out { padding:8px 12px; min-height:58px; }
  .canopy-call-hero .h11-m11 .h11-lgbox { width:32px; height:32px; flex:0 0 32px; }
  .canopy-call-hero .h11-m11 .h11-stack { width:145px; height:135px; margin-top:4px; }
  .canopy-call-hero.dl-switchboard .h11-m11 .h11-hubcard { left:25px; top:18.5px; width:95px; height:95px; border-radius:15px; gap:8px; }
  .canopy-call-hero.dl-switchboard .h11-m11 .h11-hubcard .canopy-copy-logo { width:47px; height:46px; margin-top:7px; }
  .canopy-call-hero .h11-m11 .h11-hubcard .h11-wave { width:58px; height:13px; gap:1.5px; }
  .canopy-call-hero.dl-switchboard .fx-lamps { top:10px; gap:4.5px; }
  .canopy-call-hero.dl-switchboard .fx-lamps i { width:4px; height:4px; }
  .canopy-call-hero.dl-switchboard .fx-lamps i:nth-child(3) { margin-right:5px; }
  .canopy-call-hero .h11-m11 .h11-hub { margin-top:-8px; }
}

/* Match the selected composition without its standalone review bar. */
.canopy-call-hero.dl-switchboard .h11-copy>*, .canopy-call-hero.dl-switchboard .h11-conversion>*, .canopy-call-hero.dl-switchboard .h11-caps span, .canopy-call-hero.dl-switchboard .h11-src, .canopy-call-hero.dl-switchboard .h11-out, .canopy-call-hero.dl-switchboard .h11-stack, .canopy-call-hero.dl-switchboard .h11-hub { animation:none !important; }
.canopy-call-hero.dl-switchboard .h11-stack { z-index:2; }
.canopy-call-hero.dl-switchboard .h11-src, .canopy-call-hero.dl-switchboard .h11-out, .canopy-call-hero.dl-switchboard .h11-hub { z-index:3; }
.canopy-call-hero.dl-switchboard .h11-out { gap:7px; }
.canopy-call-hero.dl-switchboard .h11-out>div { min-width:0; }
.canopy-call-hero.dl-switchboard .h11-ok { flex:none; }
.canopy-call-hero.dl-switchboard .h11-src { cursor:pointer; transition:background-color .2s,box-shadow .2s; }
.canopy-call-hero.dl-switchboard .h11-src:hover, .canopy-call-hero.dl-switchboard .h11-src:focus-visible { outline:2px solid #355f52; outline-offset:5px; }

/* One authored connection reveal; the runtime owns interruption and replay state. */
.canopy-call-hero.dl-switchboard .h11-soft { display:inline-block; max-width:100%; vertical-align:bottom; animation:none !important; }
.canopy-call-hero.dl-switchboard .h11-soft::before { content:none; }
.canopy-call-hero.dl-switchboard .h11-cta { transition:background-color 180ms ease,transform 120ms ease; }
.canopy-call-hero.dl-switchboard .h11-cta .h11-ic { transition:background-color 180ms ease; }
.canopy-call-hero.dl-switchboard .h11-cta .h11-i { transition:transform 180ms cubic-bezier(.16,1,.3,1); }
.canopy-call-hero.dl-switchboard .h11-cta:focus-visible { background:#2e4640; }
.canopy-call-hero.dl-switchboard .h11-cta:focus-visible .h11-ic { background:#dbe8e2; }
.canopy-call-hero.dl-switchboard .h11-cta:focus-visible .h11-i { transform:translate(2px,-2px); }
@media (hover:hover) {
  .canopy-call-hero.dl-switchboard .h11-cta:hover { background:#2e4640; }
  .canopy-call-hero.dl-switchboard .h11-cta:hover .h11-ic { background:#dbe8e2; }
  .canopy-call-hero.dl-switchboard .h11-cta:hover .h11-i { transform:translate(2px,-2px); }
}
.canopy-call-hero.dl-switchboard .h11-cta:active { transform:scale(.98); }
.canopy-call-hero[data-running="false"] .h11-cta,
.canopy-call-hero[data-running="false"] .h11-cta .h11-ic,
.canopy-call-hero[data-running="false"] .h11-cta .h11-i { transition:none; }
.canopy-call-hero[data-running="false"] .h11-cta:active,
.canopy-call-hero[data-running="false"] .h11-cta .h11-i { transform:none !important; }
@media (prefers-reduced-motion:reduce) {
  .canopy-call-hero.dl-switchboard .h11-cta,
  .canopy-call-hero.dl-switchboard .h11-cta .h11-ic,
  .canopy-call-hero.dl-switchboard .h11-cta .h11-i { transition:none; }
  .canopy-call-hero.dl-switchboard .h11-cta:active,
  .canopy-call-hero.dl-switchboard .h11-cta .h11-i { transform:none !important; }
}