/* Home chain finish (night pass): only the selected link carries its label, above its logo; the hint sits clear of the lower logos. */
.home-page .selection-copy h2,.tc-hero h1,.spoke-page h1{text-wrap:balance}

/* ===== First-screen ring (>=761px): headline + question compact on top, the WHOLE ring (with every logo) fits the first screen.
   JS (fitOval) draws the ring in an 842x560 viewBox centred on the frame and publishes --s = screen px per viewBox unit on #orbit-frame,
   so logos, the selected-link label and the centre text scale with the ring. Frame height = what is left of the viewport under the compact top stack. ===== */
@media(min-width:761px){
  .home-page{
    --h1:clamp(30px,min(3.3vw,5.4vh),56px);
    --q:clamp(22px,min(2.1vw,3.4vh),34px);
    --ring-h:clamp(380px,min(calc(100svh - 68px - 14px - 26px - var(--h1) * 2.12 - 8px - var(--q) * 1.25 - 12px),calc((100vw - 120px) / 1.5)),960px);
  }
  .home-page .hero{padding-top:14px}
  .home-page .hero .eyebrow{margin:0 0 4px;line-height:1.2}
  .home-page .hero h1{font-size:var(--h1);line-height:1.06;margin:0 auto 8px}
  .home-page .hero-copy{margin-bottom:0}
  .home-page .chain-question{font-size:var(--q);margin:0 12px 12px;line-height:1.25}
  .home-page .system-stage{padding-top:0}
  .home-page .orbit-frame{height:var(--ring-h);min-height:0}
  .orbit-svg{width:100%;max-width:none}
  /* Logos: sized in ring units (so they keep their proportion to the ring at every window size). */
  .home-page .link-logo{width:calc(176px * var(--s,1));max-height:calc(112px * var(--s,1))}
  .home-page .link-logo[data-opaque]{width:calc(112px * var(--s,1));height:calc(112px * var(--s,1));max-height:none}
  /* Selected link: label sits inside the ring, just above its logo (existing behaviour), scaled with the ring. */
  .home-page .anchored-link-label:not(.active){display:none}
  .home-page .anchored-link-label.active{z-index:9;transform:translate(-50%,calc(-100% - 54px * var(--s,1) - 8px));width:auto;white-space:nowrap;padding:7px 14px;font-size:clamp(15px,calc(17px * var(--s,1)),22px)}
  .home-page .anchored-link-label.active::after{height:calc(54px * var(--s,1) + 22px)}
  .home-page .stage-hint{margin-top:14px}
  /* Centre of the ring: the statement, then the ChiroUnchained logo (the replay control). */
  .home-page .master-lockup{width:calc(240px * var(--s,1));max-width:none;position:relative;top:calc(44px * var(--s,1));cursor:pointer;border-radius:14px}
  .home-page .ring-wrap{position:relative}
  .home-page .ring-statement{position:absolute;z-index:7;left:50%;top:calc(50% - 22px * var(--s,1));transform:translate(-50%,-100%);width:calc(420px * var(--s,1));margin:0;text-align:center;font-size:clamp(24px,calc(30px * var(--s,1)),52px);line-height:1.12;font-weight:700;letter-spacing:-.02em;color:#f0d398;text-wrap:balance;text-shadow:0 2px 10px #07111f,0 0 3px #07111f,0 0 18px #07111f}
}
/* Phones: no room inside the small ring, so the statement sits in the flow just under the question. */
@media(max-width:760px){
  .home-page .ring-statement{margin:0 8px 34px;text-align:center;font-size:24px;line-height:1.15;font-weight:700;letter-spacing:-.02em;color:#f0d398;text-wrap:balance}
  .home-page .chain-question{margin-bottom:14px}
  .home-page .master-lockup{cursor:pointer;border-radius:14px;position:relative;top:-34px}
}
.master-lockup:focus-visible{outline:3px solid #f0d398;outline-offset:2px}

/* Resting state of the product logos: dim but present (the intro / hub replay lights them). One variable flips it to fully hidden: --logo-rest:0 */
.home-page .link-logo:not(.lit):not(.link-halo){opacity:var(--logo-rest,.5);transform:translate(-50%,-50%) scale(1);filter:saturate(.55) brightness(.8) drop-shadow(0 0 1px rgba(2,6,12,.95));transition:opacity .9s ease,filter .9s ease}
.home-page .link-logo.link-halo:not(.lit){opacity:calc(var(--logo-rest,.5) * .9);transform:translate(-50%,-50%) scale(1)}
.link-wordmark{position:absolute;z-index:6;transform:translate(-50%,-50%);font-weight:800;letter-spacing:.02em;white-space:nowrap;pointer-events:none;font-size:clamp(13px,calc(24px * var(--s,1)),32px);line-height:1.1;padding:.3em .75em;border-radius:12px;background:rgba(7,17,31,.86);border:1px solid rgba(144,201,236,.4);color:#cfd8e1;opacity:var(--logo-rest,.5);transition:opacity .9s ease,color .9s ease,box-shadow .9s ease,border-color .9s ease}
.link-wordmark.lit{opacity:1;color:#fff3d2;border-color:#e3bf78;box-shadow:0 0 16px #69caff,0 0 28px rgba(245,193,106,.7)}
/* Intro / replay: logos arrive one after another with a smaller peak so nine of them never collide. */
.orbit-frame.showcase .link-logo{--peak:1.28}
.orbit-frame.showcase .link-logo.lit{pointer-events:none}
.orbit-frame.settling .plasma-strand,.orbit-frame.settling .plasma-core{transition:opacity .9s ease}
.home-page .hero-after{max-width:var(--max,1100px);margin:8px auto 0;padding:26px 24px 6px;text-align:center}
.home-page .hero-after .hero-lede{margin:0 auto}


/* "Click to see more" first line on the hover description (Brett 2026-10-21) */
.link-popup::before{content:"Click to see more";display:block;margin-bottom:8px;font-size:18px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#e3bf78}

/* ===== Connected-system map: Sentinel in the centre, products around it (mind map). Pulses travel both ways; click a node to light it and its connections. ===== */
.cm-svg{overflow:visible}
.cm-n{cursor:pointer;outline:none;transition:opacity .35s}
.cm-card{fill:#0c1b2b;stroke:#3a566e;stroke-width:1.8;transition:stroke .3s,fill .3s}
.cm-chipbox{fill:#0f2031;stroke:#4f6f8d;stroke-width:1.6;transition:stroke .3s,fill .3s}
.cm-hubdisc{stroke:#5f86a8;stroke-width:2.6;transition:stroke .3s}
.cm-halo{fill:none;stroke:#5f9fd0;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.cm-t{fill:#edf3f8;font:650 29px Switzer,system-ui,sans-serif;paint-order:stroke;stroke:#0b1726;stroke-width:5px;stroke-linejoin:round}
.cm-t.cm-big{font-size:34px}
.cm-t.cm-t-lab{font-size:22px}
.cm-s{fill:#c6d3df;font:500 22px Switzer,system-ui,sans-serif;paint-order:stroke;stroke:#0b1726;stroke-width:4px;stroke-linejoin:round}
.cm-chiptxt{fill:#edf3f8;font:650 25px Switzer,system-ui,sans-serif}
.cm-edge{fill:none;stroke:#2f5271;stroke-width:2.6;stroke-linecap:round;transition:stroke .3s,stroke-width .3s}
.cm-spoke .cm-edge{stroke:#406f97;stroke-width:3}
.cm-pulses{filter:drop-shadow(0 0 4px rgba(105,202,255,.9))}
.cm-pulse{fill:none;stroke:#9fdbff;stroke-width:5;stroke-linecap:round;stroke-dasharray:11 100;stroke-dashoffset:11;opacity:0}
.cm-pulse.cm-r{stroke:#f5c16a}
.cm-logo{filter:grayscale(1) brightness(.72);transition:filter 1.2s ease var(--ld,0s)}
.cm-play .cm-logo,.cm-static .cm-logo{filter:none}
.cm-play .cm-pulse{animation:cm-fire var(--dur,6s) linear var(--dl,0s) infinite}
.cm-play .cm-halo{animation:cm-halo 4.4s ease-out infinite}
.cm-play .cm-halo2{animation-delay:-2.2s}
@keyframes cm-fire{0%{stroke-dashoffset:11;opacity:0}5%{opacity:1}44%{stroke-dashoffset:-100;opacity:1}48%,100%{stroke-dashoffset:-100;opacity:0}}
@keyframes cm-halo{0%{opacity:.5;transform:scale(1)}100%{opacity:0;transform:scale(1.32)}}
/* selection: the chosen node, everything it connects to and the lines between them stay lit; the rest dims */
.cm-sel .cm-n{opacity:.26}
.cm-sel .cm-n.cm-on{opacity:1}
.cm-sel .cm-e{opacity:.1}
.cm-sel .cm-e.cm-on{opacity:1}
.cm-sel .cm-e:not(.cm-on) .cm-pulses{display:none}
.cm-e.cm-on .cm-edge{stroke:#e4c27f;stroke-width:3.4}
.cm-n.cm-on .cm-card,.cm-n.cm-on .cm-chipbox,.cm-n.cm-on .cm-hubdisc{stroke:#e4c27f}
.cm-n.cm-on .cm-card,.cm-n.cm-on .cm-chipbox{fill:#14263a}
.cm-n.cm-pick .cm-card,.cm-n.cm-pick .cm-chipbox,.cm-n.cm-pick .cm-hubdisc{stroke:#f7e0a8;stroke-width:4}
.cm-n:hover .cm-card,.cm-n:hover .cm-chipbox,.cm-n:hover .cm-hubdisc{stroke:#9fc3e0}
.cm-n:focus-visible .cm-card,.cm-n:focus-visible .cm-chipbox,.cm-n:focus-visible .cm-hubdisc{stroke:#fff;stroke-width:4}
.cm-static .cm-pulse,.cm-static .cm-halo{display:none}
@media(prefers-reduced-motion:reduce){.cm-pulse,.cm-halo{display:none}.cm-logo{filter:none;transition:none}}
.cm-phone .cm-s{font-size:21px}.cm-phone .cm-chiptxt{font-size:23px}
/* what the selected connection does for the office */
.cm-info{max-width:1000px;margin:22px auto 0;padding:22px 30px;border:1px solid #31506b;border-radius:18px;background:rgba(12,27,43,.72);text-align:left;font-size:20px;line-height:1.5;color:#dbe6f0}
.cm-info h3{margin:0 0 6px;font-size:28px;font-weight:650;color:#fff}
.cm-info .cm-own{margin:0 0 12px;color:#f0d398}
.cm-info ul{margin:0;padding-left:24px}
.cm-info li{margin:6px 0}
.cm-info .cm-hint{margin:0;text-align:center;color:#c6d3df}
@media(min-width:1600px){.cm-info{max-width:1250px;font-size:24px}.cm-info h3{font-size:32px}}
@media(max-width:760px){.cm-info{padding:18px 20px;margin-top:16px}.cm-info h3{font-size:24px}}

.cm-figure figcaption{font-size:20px}