/* Heavy forged chain treatment for the product orbit. */
.system-stage{
  max-width:1240px;
  padding:10px 18px 20px;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.orbit-frame{height:clamp(340px,39vw,480px);min-height:340px;overflow:visible;isolation:isolate}
.orbit-svg{width:min(100%,1080px);height:100%;overflow:visible}
.orbit-track{stroke:rgba(162,183,205,.11);stroke-width:1.2;stroke-dasharray:none}
.energy-path{animation:none;opacity:.08;stroke:#a9c0d4;stroke-width:1.4;stroke-dasharray:none}
#chain-links{isolation:isolate}
.steel-link{opacity:.98;pointer-events:none;transition:filter .35s,opacity .35s}
.steel-link-face{fill:url(#steel-face);stroke:#26333d;stroke-width:1.3;stroke-linejoin:round;fill-rule:evenodd;filter:drop-shadow(0 2px 1px rgba(0,0,0,.65))}
.steel-link-sheen{fill:none;stroke:rgba(255,255,255,.72);stroke-width:1.05;stroke-linecap:round;opacity:.83}
.steel-link-inner{fill:none;stroke:rgba(12,20,27,.82);stroke-width:1.8;stroke-linecap:round;opacity:.9}
.steel-link.is-blue{filter:url(#steel-glow);opacity:1}
.steel-link.is-blue .steel-link-face{fill:url(#steel-blue);stroke:#d8f1ff;stroke-width:1.5}
.steel-link.is-gold{filter:url(#steel-glow);opacity:1}
.steel-link.is-gold .steel-link-face{fill:url(#steel-gold);stroke:#ffe4a9;stroke-width:1.5}
.steel-link.is-gold .steel-link-sheen,.steel-link.is-blue .steel-link-sheen{stroke:#fff;opacity:1}
.orbit-node{pointer-events:auto;cursor:pointer;opacity:.76;transition:opacity .25s,filter .25s}
.orbit-node .node-rim{fill:#131c23;stroke:#91a6b7;stroke-width:2.5;filter:drop-shadow(0 2px 2px #000)}
.orbit-node .node-core{fill:#e1e8ed;stroke:#394956;stroke-width:1}
.orbit-node.active{opacity:1;filter:drop-shadow(0 0 9px rgba(222,184,112,.72))}
.orbit-node.active .node-rim{fill:#b18c50;stroke:#fff0c7;stroke-width:3.5}
.orbit-node.active .node-core{fill:#fff5da;stroke:#614c2d}
.active-link-plaque{pointer-events:none;filter:drop-shadow(0 5px 12px rgba(0,0,0,.85))}
.plaque-bg{fill:rgba(8,18,29,.94);stroke:rgba(219,187,128,.8);stroke-width:1.5}
.active-link-plaque.is-gold .plaque-bg{stroke:#f2d28e;fill:rgba(35,29,19,.96)}
.plaque-label{font:700 10px Switzer,system-ui,sans-serif;letter-spacing:.055em;fill:#f1f3f4;text-anchor:middle;dominant-baseline:middle}
.master-lockup{width:min(39%,350px);background:radial-gradient(ellipse,rgba(7,17,31,.96) 40%,rgba(7,17,31,.75) 66%,transparent 78%);padding:24px 14px}
.master-lockup .master-crisp{filter:drop-shadow(0 0 24px rgba(117,175,219,.16))}
.product-rail{justify-content:center;flex-wrap:wrap;overflow:visible;gap:7px;padding:13px 4px 4px}
.product-tab{flex:1 1 112px;max-width:146px;min-width:105px;min-height:64px;border:1px solid rgba(165,187,207,.3);border-radius:2px;background:linear-gradient(180deg,rgba(28,45,61,.56),rgba(8,20,32,.44));}
.product-tab:hover{border-color:rgba(210,174,108,.68);background:rgba(210,174,108,.07)}
.product-tab.active{border-color:#e4c27f;background:linear-gradient(180deg,rgba(100,78,43,.44),rgba(56,45,30,.3));color:#f5d79b;box-shadow:0 0 16px rgba(210,174,108,.13);transform:none}
.product-tab img{opacity:.84}
.product-tab.active img{filter:drop-shadow(0 0 9px rgba(226,179,104,.38))}
.product-tab .artwork-reserved{width:78px;height:28px;display:grid;place-content:center;text-align:center;border:1px solid rgba(163,181,198,.34);background:linear-gradient(145deg,rgba(135,158,177,.12),rgba(8,18,29,.45));color:#93a6b7;font-size:7px;line-height:1.15;letter-spacing:.11em;text-transform:uppercase}
.product-tab.active .artwork-reserved{border-color:rgba(228,194,127,.64);color:#e5c98f}
.hero h1 .work-in{color:#88c9f2;text-shadow:0 0 24px rgba(104,167,220,.2)}
.hero h1 .work-on{color:#e3bf78;text-shadow:0 0 24px rgba(210,174,108,.2)}
.intro-active .steel-link{animation:steel-arrive .72s cubic-bezier(.2,.7,.2,1) both}
.intro-active .steel-link:nth-child(3n){animation-delay:.08s}
.intro-active .steel-link:nth-child(3n + 1){animation-delay:.16s}
@keyframes steel-arrive{from{opacity:.08;filter:brightness(2.2)}to{opacity:.98;filter:brightness(1)}}
@media(max-width:760px){
  .system-stage{padding:10px 11px 17px}
  .orbit-frame{height:270px;min-height:250px;overflow:hidden}
  .orbit-svg{width:100%;height:100%}
  .master-lockup{width:37%;padding:11px 8px}
  .active-link-plaque{display:none}
  .product-rail{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;gap:6px;margin:0 -2px;padding:8px 3px 10px;scroll-snap-type:x mandatory}
  .product-tab{flex:0 0 104px;max-width:none;min-width:104px;min-height:62px}
}
@media(max-width:410px){
  .orbit-frame{height:235px;min-height:235px}
  .master-lockup{width:35%}
  .product-tab{flex-basis:96px;min-width:96px}
}
@media(prefers-reduced-motion:reduce){
  .intro-active .steel-link{animation:none}
  .steel-link,.orbit-node,.product-tab{transition:none}
}

/* Forged stud links: solid metal faces and extruded lower edges, not outlined rings. */
.steel-link-depth{fill:#26313b;stroke:#091019;stroke-width:2;fill-rule:evenodd;filter:drop-shadow(0 5px 3px #0009)}
.steel-link-face{stroke:#283845;stroke-width:1.2;filter:none}
.steel-link-bevel{fill:none;stroke:#e2e8ec;stroke-width:3.2;stroke-linecap:round;opacity:.75}
.steel-link-inner{stroke:#15212c;stroke-width:3;opacity:1}
.steel-link-stud{fill:url(#steel-face);stroke:#35434e;stroke-width:1.5}
.steel-stud-highlight{fill:none;stroke:#d8e1e7;stroke-width:2;opacity:.65}
.steel-edge .steel-link-face{filter:brightness(.76)}
.steel-link.is-gold .steel-link-stud{fill:url(#steel-gold)}
.steel-link.is-blue .steel-link-stud{fill:url(#steel-blue)}

/* Exactly three ordinary links between weak links. Topic travels above its actual link. */
.weak-chain-link:not(.is-gold):not(.is-blue) .steel-link-face{fill:url(#steel-blue)}
.anchored-link-label{position:absolute;z-index:5;transform:translate(-50%,-100%);width:220px;padding:10px 12px;background:#091724f5;border:1px solid #90c9ec;border-radius:5px;color:#fff;font-size:13px;font-weight:700;text-align:center;line-height:1.35;pointer-events:none;box-shadow:0 5px 16px #0009}
.anchored-link-label::after{content:'';position:absolute;left:calc(50% - 1px);top:100%;height:22px;width:2px;background:#90c9ec}
.anchored-link-label.is-gold{border-color:#e3bf78}.anchored-link-label.is-gold::after{background:#e3bf78}
@media(max-width:760px){.anchored-link-label{width:144px;padding:6px 7px;font-size:10px;line-height:1.25}.orbit-frame{overflow:visible}}

@media(min-width:761px){.home-page .hero{max-width:1600px;padding-left:24px;padding-right:24px}.system-stage{max-width:1500px;padding-left:8px;padding-right:8px}.orbit-frame{height:clamp(520px,47vw,700px)}.orbit-svg{width:100%;max-width:1440px}.anchored-link-label{font-size:16px;width:258px;padding:10px 14px}.anchored-link-label::after{height:10px}}
@media(max-width:760px){.anchored-link-label::after{height:8px}}

.chain-topic-heading{text-align:center;font-size:clamp(26px,3.2vw,46px);font-weight:650;line-height:1.1;letter-spacing:-.025em;color:#f0d398;margin:30px 12px 4px}
@media(max-width:760px){.chain-topic-heading{font-size:26px;margin:24px 8px 4px}}

.product-bottom-sheet{position:fixed;inset:auto 0 0;width:100%;max-width:100%;max-height:72dvh;margin:0;padding:22px 24px max(24px,env(safe-area-inset-bottom));border:1px solid #54748c;border-radius:20px 20px 0 0;background:#0b1a2a;color:#edf3f8;overflow-y:auto;box-shadow:0 -14px 60px #0008}
.product-bottom-sheet::backdrop{background:#02091475}.sheet-open{overflow:hidden}.sheet-close{display:block;margin:0 0 18px auto;min-height:44px;min-width:88px;padding:8px 14px;border:1px solid #a3b8ca;border-radius:6px;background:#172d42;color:#fff;font-weight:650}.product-bottom-sheet h2{font-size:26px;line-height:1.15;color:#e7c783;margin:0 0 20px}.product-bottom-sheet h3{font-size:20px;line-height:1.25;margin:0 0 12px}.product-bottom-sheet p{font-size:16px;line-height:1.6}.product-bottom-sheet .primary-link{min-height:48px;margin:18px 0 0}.product-bottom-sheet [aria-disabled=true]{opacity:.65;pointer-events:none}

/* Damaged steel stays steel; fractures communicate weakness instead of a clean color swap. */
.steel-link.weak-chain-link .steel-link-face,.steel-link.weak-chain-link .steel-link-stud{fill:url(#steel-face)}
.steel-link.weak-chain-link .steel-link-face{stroke:#57616b;stroke-width:1.3}
.weak-fracture-gap{fill:#07111f;stroke:#10161d;stroke-width:1.2;stroke-linejoin:bevel}
.weak-fracture-edge{fill:none;stroke:#e0d3b7;stroke-width:1.25;stroke-linejoin:bevel}
.weak-hairline-crack{fill:none;stroke:#27303a;stroke-width:1.7;stroke-linecap:round}
.anchored-link-label:not(.active){width:186px;font-size:12px;padding:7px 9px;color:#d3dce5;border-color:#657b8d;background:#0a1623ed;z-index:4}
@media(max-width:760px){.anchored-link-label:not(.active){display:none}}

/* Forged gunmetal: restrained reflections, rough grain and localized wear. */
.steel-link .steel-link-face{filter:url(#forged-surface)}
.steel-link.weak-chain-link:not(.is-gold):not(.is-blue) .steel-link-face{fill:url(#steel-face)}
.steel-link .steel-link-bevel{stroke:#c0c5c7;stroke-width:1.5;opacity:.52}
.steel-link-depth{fill:#202b33;stroke:#111921;stroke-width:1.7}
.steel-scratch{fill:none;stroke:#d2d4d2;stroke-width:.65;opacity:.46}.steel-pit{fill:none;stroke:#18212a;stroke-width:1;opacity:.75}
.steel-link .steel-stud-highlight{stroke:#afb8bb;stroke-width:1;opacity:.45}
.steel-link.weak-chain-link.is-blue .steel-link-face,.steel-link.weak-chain-link.is-gold .steel-link-face{stroke:#b5a481;stroke-width:1.4}
.weak-fracture-edge{stroke:#959993;stroke-width:.8}

.steel-rod-reflection{fill:none;stroke:#cbd0d0;stroke-width:1.6;opacity:.46;stroke-linecap:round}

.anchored-link-label::after{left:var(--leader-x,50%)}

/* Phone landscape (task-6): the whole oval, selected heading and anchored labels must fit a ~390px-tall viewport.
   Oval keeps its fixed orientation; the SVG scales uniformly (meet), never stretched. */
@media(orientation:landscape) and (max-height:540px) and (max-width:900px){
  .chain-topic-heading{font-size:22px;margin:8px 12px 0}
  .orbit-frame{height:min(280px,calc(100vh - 100px));min-height:230px;margin-top:30px}
  .orbit-svg{width:100%;max-width:none}
  .master-lockup{width:30%;padding:10px 8px}
  .anchored-link-label,.anchored-link-label:not(.active){width:118px;padding:3px 5px;font-size:10.5px;line-height:1.15}
  .anchored-link-label.active{width:160px;font-size:12px;padding:4px 8px}
  .anchored-link-label::after{height:6px}
}

/* Desktop first-viewport fold pass: chain + selected pain/solution together at scrollY=0.
   Ordinary desktop only; phone-landscape (max-height:540) and portrait/phone breakpoints are untouched. */
@media(min-width:761px) and (min-height:600px){
  .home-page .system-stage{padding-top:0;padding-bottom:6px}
  .home-page .chain-topic-heading{font-size:clamp(24px,2.5vw,34px);margin:6px 12px 88px}
  .home-page .orbit-frame{height:clamp(300px,calc(100vh - 480px),640px);min-height:300px}
  .home-page .anchored-link-label:not(.active){width:128px;font-size:12px;line-height:1.18;padding:4px 5px}
  .home-page .anchored-link-label.active{width:166px;font-size:14px;line-height:1.2;padding:6px 10px;transform:translate(-50%,calc(-100% - 62px))}
  .home-page .anchored-link-label.active::after{height:72px}
  .home-page .product-rail{padding-top:6px;padding-bottom:2px}
  .home-page .product-tab{min-height:48px;gap:2px}
  .home-page .product-tab img{height:22px}
  .home-page .stage-controls{padding-top:4px;display:flex;flex-direction:column}
}
/* Short desktops: the tab row sits under the selected description so chain + description stay together above the fold. */
@media(min-width:761px) and (min-height:600px) and (max-height:820px){
  .home-page .orbit-frame{height:clamp(300px,calc(100vh - 430px),640px)}
}

/* ===== UI interaction pass ===== */
/* Thumbnail slider (replaces the wrapped push-button row) */
.rail-wrap{width:100%;max-width:1260px;margin:0 auto}
.product-rail,.home-page .product-rail{display:flex;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;gap:12px;padding:8px 4px 10px;scroll-snap-type:x proximity;scrollbar-width:none;cursor:grab;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;margin:0}
.product-rail::-webkit-scrollbar{display:none}
.product-rail.dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.product-rail.dragging .product-tab{pointer-events:none}
.product-tab,.home-page .product-tab{flex:0 0 176px;max-width:none;min-width:176px;min-height:84px;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:8px;opacity:.78;transition:opacity .25s,border-color .25s,box-shadow .25s}
.product-tab img,.home-page .product-tab img{height:38px;width:auto;max-width:150px;object-fit:contain;pointer-events:none;-webkit-user-drag:none}
.product-tab span{font-size:15px}
.product-tab.active,.home-page .product-tab.active{opacity:1;border-color:#e4c27f;box-shadow:0 0 0 1px #e4c27f,0 0 22px rgba(210,174,108,.3)}
.product-tab .artwork-reserved{font-size:9px;height:34px}

@media(min-width:761px) and (max-height:820px){.home-page .orbit-frame{height:clamp(340px,calc(100vh - 390px),700px)}}
@media(max-width:760px){
  .product-tab,.home-page .product-tab{flex:0 0 112px;min-width:112px;min-height:76px}
  .product-tab img{height:30px;max-width:92px}
}

/* Logo fills the weak link itself, after the centre brightens */
.link-logo{position:absolute;z-index:6;width:clamp(156px,15.2vw,256px);height:auto;max-height:140px;object-fit:contain;transform:translate(-50%,-50%) scale(.5);opacity:0;pointer-events:none;filter:drop-shadow(0 0 1px rgba(2,6,12,.95)) drop-shadow(0 1px 1px rgba(2,6,12,.6));transition:opacity 1s ease}
.link-logo.lit{opacity:1;animation:link-fill 2.4s cubic-bezier(.3,.7,.3,1) both}.link-logo.armed{pointer-events:auto;cursor:pointer}
@keyframes link-fill{0%{transform:translate(-50%,-50%) scale(.5);filter:brightness(1) drop-shadow(0 0 1px rgba(2,6,12,.95)) drop-shadow(0 1px 1px rgba(2,6,12,.6))}22%{transform:translate(-50%,-50%) scale(var(--peak,1.9));filter:brightness(1.8) drop-shadow(0 0 22px #e5b45e) drop-shadow(0 0 1px rgba(2,6,12,.95)) drop-shadow(0 1px 1px rgba(2,6,12,.6))}46%{transform:translate(-50%,-50%) scale(.86);filter:brightness(1.3) drop-shadow(0 0 1px rgba(2,6,12,.95)) drop-shadow(0 1px 1px rgba(2,6,12,.6))}64%{transform:translate(-50%,-50%) scale(1.09);filter:brightness(1.1) drop-shadow(0 0 1px rgba(2,6,12,.95)) drop-shadow(0 1px 1px rgba(2,6,12,.6))}82%{transform:translate(-50%,-50%) scale(.97)}100%{transform:translate(-50%,-50%) scale(1);filter:brightness(1) drop-shadow(0 0 1px rgba(2,6,12,.95)) drop-shadow(0 1px 1px rgba(2,6,12,.6))}}
.intro-active .link-logo{opacity:1;transform:translate(-50%,-50%) scale(1);transition:none}
.master-lockup.pulse .master-crisp,.master-lockup.pulse img{animation:master-pulse 1.2s ease both}
@keyframes master-pulse{0%{filter:brightness(1)}35%{filter:brightness(1.55) drop-shadow(0 0 26px rgba(117,200,255,.8))}100%{filter:brightness(1)}}

/* Blue-out / gold-return plasma, radial only */
.plasma-strand{fill:none;stroke-width:3;stroke-linecap:round;opacity:0;transition:opacity 1s;filter:drop-shadow(0 0 5px #69caff);stroke-dasharray:14 9;animation:plasma-flow 1.1s linear infinite;pointer-events:none}
.plasma-strand.thin{stroke-width:1.5;animation-direction:reverse}
.plasma-strand.on{opacity:.85}
.intro-active .plasma-strand{opacity:.75;transition:none}
@keyframes plasma-flow{to{stroke-dashoffset:-46}}

/* Hover popup duplicates the below-chain pain/fix exactly */
.link-popup{position:fixed;z-index:30;width:min(520px,calc(100vw - 20px));max-height:calc(100vh - 20px);overflow:hidden;padding:16px 20px;background:#091724;border:1px solid #e3bf78;border-radius:10px;box-shadow:0 12px 40px #000c;color:#edf3f8;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s}
.link-popup.on{opacity:1;visibility:visible}
.link-popup b{display:block;font-size:20px;color:#f0d398;margin-bottom:8px}
.link-popup p{margin:0;font-size:17px;line-height:1.45;white-space:pre-line}
@media(max-width:760px),(max-height:540px){.link-popup{display:none}}
@media(prefers-reduced-motion:reduce){.link-logo.lit,.master-lockup.pulse img,.master-lockup.pulse .master-crisp,.plasma-strand{animation:none}.link-logo,.plasma-strand{transition:none}}

@media(max-width:760px){.link-logo{width:clamp(110px,30vw,150px);max-height:80px}}
/* Phone: doubled-size logos would swamp the small chain; keep them as large as the oval allows and lift the active label clear. */
@media(max-width:760px){.link-logo{width:104px;max-height:68px}.anchored-link-label.active{transform:translate(-50%,calc(-100% - 34px))}.anchored-link-label.active::after{height:40px}.chain-topic-heading{margin-bottom:46px}}
@media(orientation:landscape) and (max-height:540px) and (max-width:900px){.link-logo{width:96px;max-height:60px}.anchored-link-label.active{transform:translate(-50%,calc(-100% - 30px))}.anchored-link-label.active::after{height:36px}.orbit-frame{margin-top:78px}}

.orbit-node:focus{outline:none}.orbit-node:focus-visible .node-rim{stroke:#fff;stroke-width:5;filter:drop-shadow(0 0 10px #fff)}

/* Peak size is the 'considerably oversized' first fill; reduced per viewport so it never clips or adds page overflow. */
.link-logo{--peak:1.9}
@media(max-width:760px){.link-logo{--peak:1.35}}
@media(orientation:landscape) and (max-height:540px) and (max-width:900px){.link-logo{--peak:1.35}}
@media(prefers-reduced-motion:reduce){.link-logo.lit{animation:none;transform:translate(-50%,-50%) scale(1);filter:brightness(1.15) drop-shadow(0 0 1px rgba(2,6,12,.95)) drop-shadow(0 1px 1px rgba(2,6,12,.6))}}

/* Cortex and Stratum approved originals are fully opaque (baked square background; no transparent approved variant exists). Original files untouched; CSS feather only. */

/* Brighter, more obvious blue-out / gold-return plasma */
.plasma-strand{stroke-width:4.5;filter:drop-shadow(0 0 5px #69caff) drop-shadow(0 0 14px #69caff) drop-shadow(0 0 20px rgba(245,193,106,.7))}
.plasma-strand.thin{stroke-width:2.2}
.plasma-strand.on{opacity:1}

/* Masked (SVG) Cortex / Stratum logos: square box, inner svg fills it */
.link-logo[data-opaque]{width:160px;height:160px;max-height:none;padding:0}
.link-logo[data-opaque] svg{display:block;width:100%;height:100%}
@media(max-width:760px){.link-logo[data-opaque]{width:78px;height:78px}}
@media(orientation:landscape) and (max-height:540px) and (max-width:900px){.link-logo[data-opaque]{width:66px;height:66px}}
@media(max-width:760px){.system-stage{overflow-x:clip}}

/* Dark silhouette halo: a copy of the logo turned to black (alpha kept), softly blurred, BEHIND the crisp logo but IN FRONT of chain/plasma.
   Follows the artwork's own alpha/mask: no box, no large ellipse. Same motion as the logo so it tracks the oversized reveal. */
.link-logo.link-halo{z-index:5;filter:brightness(0) blur(1.6px) drop-shadow(0 0 4px rgba(0,0,0,.9));transition:opacity 1s ease}
.link-logo.link-halo.lit{opacity:.82;animation:halo-fill 2.4s cubic-bezier(.3,.7,.3,1) both}
.link-logo.link-halo[data-id=reportforge].lit{opacity:.95;filter:brightness(0) blur(2px) drop-shadow(0 0 5px rgba(0,0,0,.95))}
.intro-active .link-logo.link-halo{opacity:.82}
@keyframes halo-fill{0%{transform:translate(-50%,-50%) scale(.5)}22%{transform:translate(-50%,-50%) scale(var(--peak,1.9))}46%{transform:translate(-50%,-50%) scale(.86)}64%{transform:translate(-50%,-50%) scale(1.09)}82%{transform:translate(-50%,-50%) scale(.97)}100%{transform:translate(-50%,-50%) scale(1)}}
@media(prefers-reduced-motion:reduce){.link-logo.link-halo.lit{animation:none;transform:translate(-50%,-50%) scale(1)}}
.link-logo.link-halo,.link-logo.link-halo.armed{pointer-events:none!important}

/* Layout pass: hero, question, chain, carousel, persistent description. Whitespace reclaimed above the chain; hero wording untouched. */
.chain-question{margin:0 12px;text-align:center;font-size:clamp(26px,2.4vw,36px);font-weight:700;letter-spacing:-.02em;line-height:1.15;color:#f2f6fa}
@media(max-width:760px){.chain-question{font-size:22px;margin:6px 10px 0}.chain-topic-heading{margin-top:8px}}

/* Duplicate large selected-topic heading removed visually (kept as a screen-reader live region). The small attached link label stays.
   The question now sits directly above the chain and reserves the room the label stack needs above the top link. */
.chain-topic-heading{position:absolute!important;width:1px;height:1px;margin:-1px!important;padding:0!important;min-height:0!important;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.home-page .chain-question{margin-bottom:78px}
@media(max-width:760px){.home-page .chain-question{margin-bottom:46px}}
@media(orientation:landscape) and (max-height:540px) and (max-width:900px){.home-page .chain-question{font-size:20px;margin:4px 10px 0}.home-page .orbit-frame{margin-top:50px}}

/* Selected thumbnail: logo enlarges and brightens INSIDE its fixed box (transform only, no layout change). */
.product-tab{overflow:hidden}
.product-tab img{transition:transform .35s ease,filter .35s ease}
.product-tab.active img,.home-page .product-tab.active img{transform:scale(1.22);filter:brightness(1.35) drop-shadow(0 0 8px rgba(226,179,104,.55))}
@media(prefers-reduced-motion:reduce){.product-tab img{transition:none}}

/* Fold fit (modest): chain keeps the wider oval; frame height trimmed ~45px and thumbnail row tightened so chain + carousel share the first screen. */
@media(min-width:761px){
  .home-page .orbit-frame{height:clamp(340px,calc(100vh - 445px),700px)}
  .product-tab,.home-page .product-tab{min-height:74px}
  .product-tab img,.home-page .product-tab img{height:34px}
}
@media(min-width:761px) and (max-height:820px){
  .home-page .chain-question{margin-bottom:102px}
  .home-page .orbit-frame{height:clamp(340px,calc(100vh - 445px),700px)}
  .product-tab,.home-page .product-tab{min-height:70px}
  .product-tab img,.home-page .product-tab img{height:32px}
}
/* Question / selected-label collision fix (modest spacing only): more room under the question, compact top bar to pay for it. */
@media(min-width:761px) and (max-height:820px){.home-page .chain-question{margin-bottom:112px}}

/* ===== Logo entry / anchor pass ===== */
/* Legacy right-side duplicate logo + beam are removed in JS; keep them hidden if any markup survives. */
.solution-logo,.solution-beam{display:none!important}
/* Master (ChiroUnchained): masked SVG, no rectangular matte. Big dark ellipse backing replaced by the tight silhouette halo below. */
.master-lockup{background:none}
.master-art{display:block;position:relative;line-height:0}
.master-art svg{display:block;width:100%;height:auto;overflow:visible}
.master-art .master-halo{position:absolute;inset:0;filter:brightness(0) blur(3px);opacity:.55;pointer-events:none}
.master-art .master-crisp{position:relative}
.wordmark .master-art{width:100%;height:100%}
.wordmark .master-art svg{width:100%;height:100%}
.wordmark .master-halo{display:none}
/* Plasma connector: master edge -> selected/previewed link; brighter and a little thicker. */
.plasma-strand{stroke-width:6.5;filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 10px #69caff) drop-shadow(0 0 18px rgba(245,193,106,.85))}
.plasma-strand.thin{stroke-width:3}

/* Reveal before navigating: the anchored (selected) logo itself brightens and holds larger; no separate duplicate logo. */
.revealing .link-logo.lit:not(.link-halo){animation:link-launch 3.5s cubic-bezier(.3,.7,.3,1) both}
.revealing .link-logo.link-halo.lit{animation:halo-launch 3.5s cubic-bezier(.3,.7,.3,1) both}
@keyframes link-launch{0%{transform:translate(-50%,-50%) scale(1);filter:brightness(1)}35%,100%{transform:translate(-50%,-50%) scale(1.45);filter:brightness(1.35) drop-shadow(0 0 16px #e5b45e)}}
@keyframes halo-launch{0%{transform:translate(-50%,-50%) scale(1)}35%,100%{transform:translate(-50%,-50%) scale(1.45)}}
@media(prefers-reduced-motion:reduce){.revealing .link-logo.lit:not(.link-halo),.revealing .link-logo.link-halo.lit{animation:none;transform:translate(-50%,-50%) scale(1)}.revealing .link-logo.lit:not(.link-halo){filter:brightness(1.2)}.tc-logo-reveal:not(.in-header),.tc-logo-reveal:not(.in-header) .tc-logo-bright{animation:none}}

/* Hub master wrapper keeps the old <img> behaviour: fills the grid area width (an SVG alone would fall back to 300px intrinsic). */
.master-lockup .master-art{width:100%;justify-self:stretch}
/* The selected, lit logo is clickable immediately (navigation itself is gated in JS: queued until settled); hover previews stay non-interactive. */
.link-logo.selectable:not(.link-halo){pointer-events:auto;cursor:pointer}
.link-logo.link-halo,.link-logo.link-halo.selectable{pointer-events:none!important}

/* Hub label: small text-only dark backing sitting above the connector (HTML is above the SVG), so the strand is split around the label and the label stays legible. */
.master-lockup .master-orbit-label{position:relative;z-index:2;background:rgba(7,17,31,.92);padding:2px 10px;border-radius:6px}


/* Center-lock carousel: fixed centre marker, mandatory snap to centre. */
.product-rail,.home-page .product-rail{scroll-snap-type:x mandatory}
.product-tab,.home-page .product-tab{scroll-snap-align:center}
.product-rail.dragging{scroll-snap-type:none}
.rail-wrap{position:relative}
.rail-wrap::before{content:'';position:absolute;left:50%;top:-2px;width:0;height:0;transform:translateX(-50%);border-left:9px solid transparent;border-right:9px solid transparent;border-top:12px solid #e4c27f;filter:drop-shadow(0 0 6px rgba(228,194,127,.6));pointer-events:none;z-index:3}


/* Plasma: ONE continuous flow from the hub to the selected link (both strands same direction; no back-and-forth reversal, no on/off pulsing). */
.plasma-strand{stroke-dasharray:20 10;animation:plasma-flow 1.2s linear infinite}
.plasma-strand.thin{stroke-dasharray:9 17;animation-direction:normal;animation-duration:1.2s}
.plasma-strand,.plasma-strand.on{transition:none}
/* Hub label removed: the master now sits at the true vertical centre of the oval. */
.master-lockup{padding:14px}
/* Heavier, darker gunmetal finish (less pale/flat): stronger edge shadow and a thin specular rim. */
.steel-link-bevel{stroke:#dfe5e8;opacity:.62}
.steel-link-depth{fill:#12181d;stroke:#080c10}

/* Plasma: continuous luminous CORE (always visible between the endpoints) with flowing, textured filaments on top. */
.plasma-core{fill:none;stroke-width:5;stroke-linecap:round;opacity:0;pointer-events:none;filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 12px #69caff) drop-shadow(0 0 20px rgba(245,193,106,.8))}
.plasma-core.on{opacity:.85}
.plasma-strand{stroke:#eefaff;stroke-width:3;opacity:0}
.plasma-strand.on{opacity:.95}
.plasma-strand.thin{stroke:#ffe9b8;stroke-width:1.8}
/* Contact CTA: no verified destination, so it is clearly unavailable (not a link) */
.contact-cta{font:inherit;font-weight:650}
.contact-cta[disabled]{cursor:not-allowed;opacity:.78;background:transparent;border:1px dashed rgba(228,194,127,.75);color:#f0d398;padding:10px 14px;border-radius:6px}
@media(max-width:760px){.contact-cta[disabled]{font-size:11px;line-height:1.15;max-width:150px;padding:7px 8px;text-align:left}}
@media(prefers-reduced-motion:reduce){.plasma-strand{animation:none}}
/* Contact CTA text must wrap inside its box (an inherited nowrap made it overflow the phone header by 2 px). */
.contact-cta,.contact-cta[disabled]{white-space:normal;overflow-wrap:anywhere}
@media(max-width:760px){.contact-cta[disabled]{max-width:140px;overflow:hidden}}
/* Contact CTA must LOOK unavailable (override the gold "book" button styling that it inherits). */
button.contact-cta[disabled]{background:transparent!important;border:1px dashed rgba(228,194,127,.8)!important;color:#f0d398!important;box-shadow:none!important;opacity:.85;cursor:not-allowed}

/* ===== Connected-system information map (schematic) ===== */
.home-nav-link{margin-left:auto;margin-right:16px;font-size:16px;font-weight:600;color:#d3deea;text-decoration:none;white-space:nowrap}
.home-nav-link:hover,.home-nav-link:focus-visible{color:#f0d398}
@media(max-width:760px){.home-nav-link{display:none}}
.connected-map{padding-top:48px;padding-bottom:24px;scroll-margin-top:12px}
.connected-map h2{font-size:clamp(30px,3.4vw,46px);margin:0 0 18px}
.cm-figure{margin:0}
.cm-stage{max-width:1100px;margin:0 auto}
.cm-figure figcaption{max-width:900px;margin:14px auto 0;font-size:16px;line-height:1.5;color:#c2cfdb;text-align:center}
.cm-svg{display:block;width:100%;height:auto}
.cm-phone{display:none}
@media(max-width:1179px){.cm-desktop{display:none}.cm-phone{display:block;max-width:560px;margin:0 auto}}

/* ===== HOME LAYOUT — consolidated (finish pass). Replaces the earlier stacked hero / selection-panel / section patches.
   Single source for: header, hero type scale, selected pain/solution column, connected section, closer, contact. ===== */
.skip-link{transform:none;left:-9999px}.skip-link:focus-visible{left:12px}
.home-page .topbar{height:68px;padding-top:8px;padding-bottom:8px}
.home-page .wordmark{width:116px;height:58px;overflow:visible}
.home-page .hero{padding-top:18px}
.home-page .hero-copy{max-width:1060px;margin:0 auto 6px}
.home-page .hero .eyebrow{font-size:12px;letter-spacing:.22em;margin:0 0 10px}
.home-page .hero h1{font-size:clamp(34px,3.5vw,50px);line-height:1.06;margin:0 auto 12px}
.home-page .hero-lede{max-width:860px;font-size:clamp(16px,1.25vw,18px);line-height:1.5;color:#b9c6d4}
.home-page .chain-question{margin-top:14px}
@media(min-width:761px){.home-page .chain-question{margin-bottom:98px}.home-page .stage-controls{display:flex;flex-direction:column}}
.home-page .eyebrow{font-size:12px;letter-spacing:.22em}
.home-page .stage-hint{margin:8px auto 6px;font-size:15px;line-height:1.35;text-align:center;color:#c9d6e2}
/* Selected product: one centred reading column (no fixed reservation; height follows the copy). */
.home-page .selection-panel{display:flex;flex-direction:column;align-items:flex-start;gap:22px;max-width:860px;width:100%;margin:26px auto 0;padding:30px 8px 0;border-top:1px solid rgba(173,193,215,.16);min-height:0}
.home-page .selection-copy{display:block;max-width:none;width:100%}
.home-page .selection-copy .eyebrow{display:block;font-size:17px;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:#e3bf78;margin:0 0 14px}
.home-page .selection-copy h2{font-size:clamp(34px,3vw,46px);line-height:1.12;font-weight:650;letter-spacing:-.02em;color:#f4f7fa;margin:0 0 18px}
.home-page .selection-copy h2.is-long{font-size:clamp(21px,1.7vw,24px);line-height:1.5;font-weight:560;letter-spacing:-.005em;color:#e6edf3;margin-bottom:16px}
.home-page .selection-copy p:last-child{font-size:clamp(18px,1.45vw,21px);line-height:1.62;color:#c4d1dd;max-width:none;white-space:pre-line;margin:0;padding-left:18px;border-left:3px solid rgba(227,191,120,.55)}
.home-page #selection-action{align-self:flex-start;font-size:18px;padding:12px 20px;border:1px solid rgba(237,207,152,.7);border-radius:8px;white-space:nowrap;max-width:none;text-align:left}
.home-page #selection-action:hover{background:rgba(227,191,120,.1)}
/* Connected system, closer and contact share the same centred axis. */
.connected-map{padding-top:84px;padding-bottom:20px;scroll-margin-top:12px;text-align:center}
.connected-map h2{font-size:clamp(32px,3.2vw,46px);letter-spacing:-.02em;margin:0 0 26px}
.home-page .closer{padding:84px 24px 76px}
.home-page .closer>p:not(.eyebrow){font-size:19px;color:#b9c6d4}
.home-page .closer .text-link{font-size:18px}
.home-page .booking-preview{text-align:center;padding-top:64px;padding-bottom:72px}
.home-page .booking-preview p{margin-left:auto;margin-right:auto;font-size:18px}
.home-page .booking-preview .demo-policy{font-size:16px;line-height:1.6;max-width:760px;color:#aebdcc}
.home-page .footer{font-size:13px}
@media(max-width:760px){
  .home-page .topbar{height:64px;padding:8px 16px}
  .home-page .wordmark{width:96px;height:48px}
  .home-page .hero{padding-top:22px}
  .home-page .hero .eyebrow{font-size:11px}
  .home-page .hero h1{font-size:clamp(30px,8.4vw,38px)}
  .home-page .hero-lede{font-size:16px;line-height:1.55}
  .home-page .stage-hint{font-size:14px;margin:4px 8px 6px}
  .home-page .selection-panel{gap:18px;margin-top:16px;padding:24px 6px 0}
  .home-page .selection-copy .eyebrow{font-size:14px;margin-bottom:12px}
  .home-page .selection-copy h2{font-size:30px;line-height:1.15}
  .home-page .selection-copy h2.is-long{font-size:19px;line-height:1.55}
  .home-page .selection-copy p:last-child{font-size:17px;line-height:1.6;padding-left:14px}
  .home-page #selection-action{font-size:16px;padding:11px 16px}
  .connected-map{padding-top:60px}
  .connected-map h2{font-size:30px;margin-bottom:18px}
  .home-page .closer{padding:64px 18px 56px}
  .home-page .closer>p:not(.eyebrow),.home-page .booking-preview p{font-size:17px}
  .home-page .booking-preview .demo-policy{font-size:15px}
}

/* ===== Direct product navigation (static links to every product page; the carousel above remains the interactive selector) ===== */
.all-products{margin:26px auto 22px;max-width:1180px}
.all-products ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.all-products a{display:flex;flex-direction:column;gap:3px;height:100%;padding:14px 18px;border:1px solid rgba(165,187,207,.3);border-radius:12px;background:rgba(15,32,49,.5);text-decoration:none;text-align:left;transition:border-color .2s,background .2s}
.all-products a:hover,.all-products a:focus-visible{border-color:rgba(228,194,127,.8);background:rgba(60,48,28,.3);outline:none}
.all-products b{font-size:19px;color:#f4f7fa}
.all-products span{font-size:16px;line-height:1.35;color:#c4d1dd}
@media(max-width:900px){.all-products ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.all-products ul{grid-template-columns:1fr}.all-products a{padding:12px 16px}}

/* ===== Wide desktop (>=1280px): the layout grows with the monitor instead of sitting in the middle two-thirds. Phones and tablets are untouched.
   --max is the shared page width (header, hero, sections, footer); body text keeps a comfortable measure inside the wider composition. ===== */
@media(min-width:1280px){
  :root{--max:min(1760px,calc(100vw - 80px))}
  .home-page .hero{max-width:var(--max)}
  .system-stage{max-width:var(--max)}
  .rail-wrap{max-width:min(1600px,100%)}
  .home-page .selection-panel{max-width:min(1500px,100%)}
  .home-page .selection-copy h2.is-long{max-width:85ch}
  .home-page .selection-copy p:last-child{max-width:80ch}
  .connected-map.section-wrap,.home-page .booking-preview.section-wrap{max-width:var(--max)}
  .cm-stage{max-width:min(1500px,100%)}
  .cm-figure figcaption{max-width:80ch}
  .all-products{max-width:1400px}
}
@media(min-width:1600px){
  .home-page .hero h1{font-size:clamp(50px,3vw,58px)}
  .home-page .hero-lede{max-width:80ch;font-size:19px}
}

/* Ultrawide: grow further (still capped, so text measure and image proportions stay comfortable). */
@media(min-width:1900px){
  :root{--max:min(2060px,calc(100vw - 160px))}
  .rail-wrap{max-width:min(1900px,100%)}
  .home-page .selection-panel{max-width:min(1800px,100%)}
  .home-page .selection-copy h2{font-size:clamp(44px,2.6vw,60px)}
  .home-page .selection-copy h2.is-long{font-size:clamp(24px,1.4vw,28px)}
  .home-page .selection-copy p:last-child{font-size:clamp(21px,1.2vw,25px)}
  .cm-stage{max-width:min(1800px,100%)}
  .all-products{max-width:1700px}
}
@media(min-width:2400px){
  :root{--max:min(2360px,calc(100vw - 240px))}
  .home-page .selection-panel{max-width:min(2100px,100%)}
  .home-page .selection-copy p:last-child{font-size:26px}
  .cm-stage{max-width:min(2100px,100%)}
  .home-page .hero h1{font-size:64px}
  .home-page .hero-lede{font-size:22px}
}

/* ===== Wide-desktop chain geometry (>=1280px). The oval is drawn with preserveAspectRatio "meet" inside a viewBox of 856 x 366 (aspect 2.34), so its drawn width is
   limited by the frame HEIGHT. The frame width is the page width (--max) minus the hero and stage padding (64px). Setting the frame height to width / 2.45 (a little above the 2.4
   "wide" threshold in preview.js, so the wide oval is always used) makes the oval fill about 95% of that width at every monitor size, undistorted. ===== */
@media(min-width:1280px){
  .home-page .orbit-frame{height:calc((var(--max) - 64px) / 2.45);min-height:340px}
  .orbit-svg{max-width:none}
  /* Link logos scale with the chain (they were fixed px and sized for a chain about 990px wide: logo = 22% of the chain width, height capped at 64% of that). */
  .link-logo{width:calc((var(--max) - 64px) * 0.21);max-height:calc((var(--max) - 64px) * 0.1344)}
  .link-logo[data-opaque]{width:calc((var(--max) - 64px) * 0.122);height:calc((var(--max) - 64px) * 0.122);max-height:none}
}
@media(min-width:1900px){
  .home-page .anchored-link-label:not(.active){width:160px;font-size:14px;padding:5px 7px}
  .home-page .anchored-link-label.active{width:210px;font-size:17px;padding:8px 12px}
}