/* clx-attention-panel — full-width chart + evidence composite (SEO Section 2).
   Same visual language as clx-cost-curves; --full modifier scales it for the
   ~60%-of-1140 chart column. Self-contained: loaded only on /seo-services/. */

.clx-attention-panel{display:flex;gap:44px;align-items:stretch;margin-top:48px;}
.clx-attention-panel__chart{flex:0 0 60%;max-width:60%;min-width:0;}
.clx-attention-panel__evidence{flex:1 1 40%;min-width:0;background:#FFEEE6;border-radius:14px;padding:34px 32px;display:flex;flex-direction:column;justify-content:center;}

/* ---- chart ---- */
.clx-attention-curves__eyebrow{font-family:'Cabin',sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:#8a94a0;text-transform:none;margin-bottom:16px;max-width:640px;}

.clx-attention-curves__readout{display:flex;gap:30px;flex-wrap:wrap;margin-bottom:6px;}
.clx-attention-curves__rd{display:flex;flex-direction:column;gap:5px;}
.clx-attention-curves__rd-val{font-family:'Cabin',sans-serif;font-weight:700;font-size:clamp(30px,3.4vw,40px);line-height:1;letter-spacing:-1px;color:#142533;font-variant-numeric:tabular-nums;}
.clx-attention-curves__rd-val--accent{color:#FA4900;}
.clx-attention-curves__rd-val--gain{color:#FA4900;}
.clx-attention-curves__rd--gain{padding-left:26px;margin-left:4px;border-left:1px solid rgba(20,37,51,.12);}
.clx-attention-curves__rd-lbl{display:flex;align-items:center;gap:7px;font-family:'Cabin',sans-serif;font-size:12.5px;line-height:1.35;color:#5c6873;max-width:150px;}
.clx-attention-curves__dot{width:9px;height:9px;border-radius:50%;flex:none;}
.clx-attention-curves__dot--gray{background:#8a94a0;}
.clx-attention-curves__dot--orange{background:#FA4900;}

.clx-attention-curves__svg{display:block;width:100%;height:auto;margin-top:14px;overflow:visible;}
.clx-attention-curves__axis-lbl{font-family:'Cabin',sans-serif;font-size:11px;fill:#8a94a0;}
.clx-attention-curves__phase-num{font-family:'Cabin',sans-serif;font-size:12px;font-weight:700;fill:#142533;}
.clx-attention-curves__phase-name{font-family:'Cabin',sans-serif;font-size:10.5px;fill:#8a94a0;}
/* numbered anchor badges — house numbered-bullet style (svc-why-num): #E8491D
   circle + white numeral. White ring separates it from the orange curve. */
.clx-attention-curves__anchor-ring{fill:#fff;}
.clx-attention-curves__anchor-bg{fill:#E8491D;}
.clx-attention-curves__anchor-num{font-family:'Cabin',sans-serif;font-size:11px;font-weight:600;fill:#fff;}

/* ---- evidence ---- */
.clx-attention-panel__evidence-title{font-family:'Cabin',sans-serif;font-weight:700;font-size:16px;color:#142533;margin:0 0 20px;}
.clx-evidence-list{list-style:none;margin:0;padding:0;}
.clx-evidence-list li{display:flex;gap:13px;align-items:flex-start;}
.clx-evidence-list li + li{margin-top:24px;}
/* numbered badge — house numbered-bullet style (svc-why-num), matches the graph anchor */
.clx-evidence-list__badge{flex:none;width:26px;height:26px;border-radius:50%;background:#E8491D;color:#fff;font-family:'Cabin',sans-serif;font-size:13px;font-weight:600;line-height:1;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.clx-evidence-list__tx{font-family:'Cabin',sans-serif;font-size:15.5px;line-height:1.55;color:#142533;}

/* ---- reveal (only when JS arms the panel; no-JS shows final state) ---- */
.clx-attention-curves__svg path[data-ac-role]{stroke-dasharray:1;stroke-dashoffset:0;}
.clx-attention-panel.is-armed .clx-attention-curves__svg path[data-ac-role]{stroke-dashoffset:1;}
.clx-attention-panel.is-armed .clx-attention-curves__anchor{opacity:0;}
.clx-attention-panel.is-armed .clx-evidence-list li{opacity:0;transform:translateY(8px);}

.clx-attention-panel.is-revealed .clx-attention-curves__svg path[data-ac-role="single"]{stroke-dashoffset:0;transition:stroke-dashoffset .8s ease;}
.clx-attention-panel.is-revealed .clx-attention-curves__svg path[data-ac-role="both"]{stroke-dashoffset:0;transition:stroke-dashoffset .8s ease .8s;}

/* anchor badges stay hidden through the curve draw, then each is revealed by JS
   in sync with its sidebar bullet (is-shown). Specificity must beat the
   .is-armed hide rule (3 classes), so scope it under .is-armed too. */
.clx-attention-panel.is-armed .clx-attention-curves__anchor.is-shown{opacity:1;transition:opacity .3s ease;}

.clx-attention-panel.is-evidence .clx-evidence-list li{opacity:1;transform:none;transition:opacity .4s ease,transform .4s ease;}
.clx-attention-panel.is-evidence .clx-evidence-list li:nth-child(2){transition-delay:.2s;}
.clx-attention-panel.is-evidence .clx-evidence-list li:nth-child(3){transition-delay:.4s;}

/* anchor pulse (fired per-bullet by JS) */
.clx-attention-curves__anchor-badge{transform-box:fill-box;transform-origin:center;}
@keyframes clx-ac-pulse{0%{transform:scale(1)}50%{transform:scale(1.4)}100%{transform:scale(1)}}
.clx-attention-curves__anchor.is-pulsing .clx-attention-curves__anchor-badge{animation:clx-ac-pulse .4s ease;}

@media (prefers-reduced-motion:reduce){
  .clx-attention-panel.is-armed .clx-attention-curves__svg path[data-ac-role]{stroke-dashoffset:0;}
  .clx-attention-panel.is-armed .clx-attention-curves__anchor{opacity:1;}
  .clx-attention-panel.is-armed .clx-evidence-list li{opacity:1;transform:none;}
}

/* ---- mobile: stack chart above evidence ---- */
@media (max-width:900px){
  .clx-attention-panel{flex-direction:column;gap:28px;margin-top:34px;}
  .clx-attention-panel__chart,.clx-attention-panel__evidence{flex:1 1 100%;max-width:100%;}
  .clx-attention-curves__readout{gap:20px;}
  .clx-attention-curves__rd--gain{padding-left:20px;}
}