/* Approved radar and ribbons, merged into the multipage production package. */
.reference-ribbon{background:#f0f6fa;border-bottom:1px solid #e1e9ef;overflow:hidden;color:#0b1e32}
.ribbon-shell{display:flex;align-items:center;gap:20px;min-height:61px;min-width:0}
.ribbon-window{flex:1;min-width:0;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent)}
.ribbon-track{display:flex;width:max-content;animation:ribbon-travel var(--ribbon-duration,90s) linear infinite;will-change:transform}
.ribbon-items{display:flex;align-items:center;flex:none;gap:0;padding:0;margin:0;list-style:none}
.ribbon-items li{display:flex;align-items:center;gap:12px;white-space:nowrap;padding:0 28px;min-height:56px;font-family:var(--serif);font-size:14px;position:relative}
.benefits-ribbon .ribbon-items li:after{content:'';height:15px;width:1px;background:#bdcbd6;position:absolute;right:0;top:50%;transform:translateY(-50%)}
.ribbon-items .icon{width:22px;height:22px;color:#092335}
.ribbon-pause{display:inline-flex;align-items:center;gap:5px;flex:none;min-height:44px;min-width:80px;padding:5px 8px;border:1px solid #c3d6df;border-radius:5px;background:transparent;color:#244653;font:12px var(--sans)}
.ribbon-pause .icon{width:15px;height:15px}
.reference-ribbon:hover .ribbon-track,.reference-ribbon:focus-within .ribbon-track,.reference-ribbon[data-paused=true] .ribbon-track{animation-play-state:paused}
@keyframes ribbon-travel{to{transform:translateX(-50%)}}
.reference-radar-section{padding:59px 0 47px;background:#fff;border-top:1px solid #e9eff3}
.reference-section-heading{max-width:800px;margin:0 auto 33px;text-align:center}
.reference-section-heading h2{font-size:34px}
.reference-section-heading>p{font-size:14px;line-height:1.7;margin-top:12px}
.reference-radar-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:64px;align-items:center}
.reference-map-column{min-width:0}
.reference-signal-map{position:relative;min-height:482px;overflow:hidden;border:1px solid #244555;border-radius:12px;background:radial-gradient(ellipse at 50% 45%,#11333f 0%,#081d2b 65%,#071927 100%);box-shadow:0 18px 48px rgba(9,28,44,.13);color:#fff}
.map-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:51px;border-bottom:1px solid #244452;padding:0 20px;font:600 10px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#bfd3df}
.map-demo{font:600 8px var(--sans);letter-spacing:.08em;color:#9de4df;border:1px solid #36646a;padding:5px 7px;border-radius:3px}
.radar{position:absolute;top:88px;left:50%;width:292px;height:292px;transform:translateX(-50%);border:1px solid rgba(39,190,194,.28);border-radius:50%}
.radar-sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 270deg,transparent 0deg,transparent 275deg,rgba(39,190,194,.06) 290deg,rgba(64,211,216,.35) 359deg,transparent 360deg);animation:radar-turn 14s linear infinite}
@keyframes radar-turn{to{transform:rotate(360deg)}}
.radar:before,.radar:after,.radar>i{position:absolute;border:1px solid rgba(39,190,194,.22);border-radius:50%;content:'';pointer-events:none}
.radar:before{inset:46px}.radar:after{inset:94px}
.radar>i:nth-of-type(1){top:50%;left:-1px;right:-1px;border-radius:0}.radar>i:nth-of-type(2){left:50%;top:-1px;bottom:-1px;border-radius:0}.radar>i:nth-of-type(3){display:none}
.radar b{position:absolute;top:50%;left:50%;display:grid;place-items:center;transform:translate(-50%,-50%);height:47px;width:47px;border:4px solid rgba(39,190,194,.4);border-radius:50%;background:#087b80;color:#fff;box-shadow:0 0 28px rgba(64,211,216,.4);font:700 19px var(--sans)}
.pulse{position:absolute;width:10px;height:10px;border:2px solid #b9f5ed;border-radius:50%;background:#27bec2;box-shadow:0 0 14px #27bec2;animation:signal-glow 4s ease-in-out infinite}
.p1{top:31%;left:18%}.p2{top:22%;right:17%;animation-delay:1s}.p3{right:28%;bottom:16%;animation-delay:2s}
@keyframes signal-glow{50%{box-shadow:0 0 5px #27bec2,0 0 0 7px rgba(39,190,194,.12)}}
.reference-signal-map:has(.map-tag:focus-visible) .radar-sweep{animation-play-state:paused}
.map-tag{position:absolute;min-width:180px;max-width:calc(100% - 28px);text-align:left;border:1px solid #315867;border-radius:7px;padding:12px 40px 12px 13px;background:#123341;box-shadow:0 10px 26px rgba(0,0,0,.15);transition:border-color .2s,background .2s;min-height:58px;color:#fff}
.map-tag:hover{background:#194752;border-color:#37b7bc}.map-tag[aria-pressed=true]{border-color:#27bec2;background:#123d46;box-shadow:0 0 0 1px rgba(39,190,194,.18),0 10px 26px rgba(0,0,0,.15)}
.map-tag strong,.map-tag small{display:block;font-family:var(--sans)}.map-tag strong{font-size:11px;line-height:1.4;letter-spacing:0}.map-tag small{font-size:10px;color:#b7cbd5;margin-top:4px;line-height:1.35}.map-tag em{position:absolute;top:14px;right:11px;color:#60ded8;font:600 10px var(--sans)}
.tag-one{top:121px;left:18px}.tag-two{top:212px;right:17px}.tag-three{bottom:38px;left:20px}
.score{position:absolute;right:18px;bottom:31px;width:146px;border:1px solid #315867;border-radius:7px;padding:13px 12px;background:#081c2a}
.score small{display:block;color:#adc5d2;font:9px var(--sans);letter-spacing:.07em;text-transform:uppercase}.score strong{display:inline-block;margin-top:6px;color:#fff;font:500 36px/1 var(--sans)}.score span{float:right;margin-top:17px;border:1px solid #316669;padding:3px 5px;color:#91e1db;font:7px var(--sans);text-transform:uppercase}
.map-disclosure{font-size:10px;color:#586b78;margin-top:12px;line-height:1.6}
.reference-context{min-width:0}.reference-context .eyebrow{font-size:9px;letter-spacing:.22em;margin-bottom:12px}.reference-context h3{font-size:36px;line-height:1.12;letter-spacing:-.025em}.reference-context h3 .accent{color:#007e82}
.reference-context-intro{font-size:13px;line-height:1.8;max-width:490px;margin-top:15px}
.signal-detail{border-left:3px solid #27bec2;background:#f3f9fa;padding:17px 20px;margin-top:22px;min-height:195px}
.signal-detail-label{font:600 8px var(--sans);letter-spacing:.15em;text-transform:uppercase;color:#36636c;margin-bottom:8px}
.signal-detail h4{font-size:21px;margin-bottom:8px;letter-spacing:-.02em}.signal-detail>p{font-size:12px;line-height:1.75;color:#48606b}
.conversation-angle{border-top:1px solid #daeaee;margin-top:12px;padding-top:10px}.conversation-angle strong{font:600 10px var(--sans);color:#24545b}.conversation-angle p{font-size:12px;line-height:1.65;margin-top:4px;color:#294650}
.reference-keypoints{display:grid;grid-template-columns:1fr 1fr;gap:10px 17px;margin-top:22px;list-style:none;padding:0}.reference-keypoints li{position:relative;padding-left:19px;font-size:11px;line-height:1.5;color:#365261}.reference-keypoints li:before{content:'✓';position:absolute;left:0;color:#00898c;font-weight:700}
.reference-context .text-link{margin-top:13px;font-size:12px}.interaction-hint{font-size:10px;color:#657580;margin-top:3px}
.audience-ribbon{background:#f7fafc;border-top:1px solid #e1e9ef}.audience-ribbon .ribbon-shell{min-height:80px;gap:28px}.ribbon-title{color:#365361;font:600 9px/1.7 var(--sans);letter-spacing:.14em;text-transform:uppercase;flex:none;max-width:190px}.audience-ribbon .ribbon-items li{font:600 11px var(--sans);letter-spacing:.04em;text-transform:uppercase;padding:0 22px;min-height:66px;color:#526a79}.ribbon-dot{width:5px;height:5px;border-radius:50%;background:#00898c;flex:none}
.ribbon-track.motion-still{animation:none;transform:none}.ribbon-window.motion-still{overflow:auto;mask-image:none}.ribbon-track.motion-still .ribbon-copy{display:none}
@media(max-width:1100px){.reference-radar-grid{gap:35px}.map-tag{min-width:165px}.score{width:128px}.reference-context h3{font-size:32px}.signal-detail{padding:16px}.ribbon-shell{gap:12px}.reference-keypoints{grid-template-columns:1fr;gap:7px}}
@media(max-width:780px){.reference-radar-section{padding:39px 0 32px}.reference-section-heading{margin-bottom:25px}.reference-section-heading h2{font-size:29px}.reference-section-heading>p{font-size:13px}.reference-radar-grid{grid-template-columns:1fr;gap:30px}.reference-map-column{max-width:580px;width:100%;margin-inline:auto}.reference-context{max-width:580px;width:100%;margin-inline:auto}.reference-context h3{font-size:32px}.reference-context h3 br{display:none}.reference-keypoints{grid-template-columns:1fr 1fr;gap:10px 18px}.signal-detail{min-height:0}.reference-ribbon .ribbon-shell{width:100%;padding-left:14px;padding-right:14px;gap:9px}.ribbon-items li{font-size:13px;padding:0 22px}.ribbon-pause{min-width:66px;font-size:11px;padding:5px}.ribbon-pause .icon{width:13px}.audience-ribbon .ribbon-shell{min-height:75px;gap:8px}.ribbon-title{font-size:8px;max-width:115px;letter-spacing:.1em;line-height:1.7}.audience-ribbon .ribbon-items li{padding:0 15px;font-size:10px}}
@media(max-width:480px){.reference-signal-map{min-height:469px}.map-heading{padding:0 13px;font-size:9px;letter-spacing:.09em}.map-demo{font-size:7px;padding:4px}.radar{width:244px;height:244px;top:86px}.radar:before{inset:40px}.radar:after{inset:78px}.map-tag{min-width:151px;padding:11px 34px 11px 10px;min-height:54px}.map-tag strong{font-size:10px}.map-tag small{font-size:9px}.map-tag em{font-size:9px;right:9px}.tag-one{top:120px;left:12px}.tag-two{top:219px;right:12px}.tag-three{bottom:83px;left:12px}.score{width:123px;right:12px;bottom:22px;padding:11px}.score small{font-size:8px}.score strong{font-size:30px}.score span{margin-top:12px;font-size:6px;padding:3px 4px}.reference-keypoints{grid-template-columns:1fr;font-size:12px}.reference-context-intro{font-size:13px}.signal-detail>p,.conversation-angle p{font-size:12px}.reference-section-heading h2{font-size:28px}.reference-radar-section .container{width:calc(100% - 36px)}.ribbon-title{max-width:99px;font-size:7px}.audience-ribbon .ribbon-pause span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.audience-ribbon .ribbon-pause{min-width:38px;justify-content:center}.map-disclosure{font-size:10px}.reference-context .text-link{font-size:12px}}
@media(prefers-reduced-motion:reduce){.ribbon-track,.radar-sweep,.pulse{animation:none!important}.ribbon-copy{display:none}.ribbon-window{overflow-x:auto;mask-image:none}.ribbon-pause{display:none}}

/* Production enhancement: CSP-compatible durations, keyboard scrolling, and motion controls. */
.benefits-ribbon .ribbon-track{--ribbon-duration:90s}
.audience-ribbon .ribbon-track{--ribbon-duration:75s}
.reference-ribbon:not(.interaction-ready) .ribbon-track{animation:none;transform:none}
.reference-ribbon:not(.interaction-ready) .ribbon-copy{display:none}
.reference-ribbon:not(.interaction-ready) .ribbon-window{overflow-x:auto;mask-image:none}
.reference-ribbon:focus-within .ribbon-window{overflow-x:auto}
.reference-radar-section:not(.interaction-ready) .radar-sweep,
.reference-radar-section:not(.interaction-ready) .pulse{animation:none}
.reference-radar-section[data-radar-paused=true] .radar-sweep,
.reference-radar-section[data-radar-paused=true] .pulse{animation-play-state:paused}
.radar-controls{display:flex;justify-content:flex-end;margin-top:8px}
.radar-pause{border:1px solid #bdcfd9;border-radius:4px;background:#f5fafb;color:#244653;font:11px var(--sans);padding:8px 12px;min-height:44px;cursor:pointer}
.radar-pause:hover{background:#e4f3f3}
.radar-pause[hidden],.ribbon-pause[hidden]{display:none}
.map-tag:disabled{opacity:1;cursor:default}
@media(prefers-reduced-motion:reduce){.radar-pause{display:none}}