/* clx-sr-economics — /seo-reseller/ "agentic advantage" figure.
 * Source: Claude Design handoff "AI Workflows section.html" → DirectionH
 * (dir-h.jsx) + the section's vis-frame entrance animations.
 *
 * Everything is scoped under .clx-sre and every token is --sre-* prefixed
 * so the source design's generic rd-* and --ember names cannot collide
 * with anything on the site (same containment tactic as clx-intelligence-belt).
 * Enqueued only on /seo-reseller/, so blast radius is one page regardless.
 */

.clx-sre {
  /* Light-theme tokens (design .rd-light) */
  --sre-bg:#FBFBFD;
  --sre-ink:#16161D;
  --sre-ink-dim:#52525F;
  --sre-muted:#8A8A98;
  --sre-ember:#E2562A;
  --sre-ember-soft:rgba(226,86,42,.10);
  --sre-line:rgba(20,20,40,.11);
  --sre-line-2:rgba(20,20,40,.07);
  --sre-card:#FFFFFF;
  --sre-font:"DM Sans","Cabin",system-ui,sans-serif;
  --sre-mono:"DM Mono","SFMono-Regular",ui-monospace,monospace;

  /* vis-frame: bordered card — fills its grid column so it sits flush to
     the section's right edge instead of floating centered with a gap. */
  width:100%;
  max-width:none;
  margin:0;
  border:1px solid #efeeec;
  border-radius:16px;
  overflow:hidden;
  background:#ffffff;
  box-shadow:0 10px 30px -24px rgba(20,20,40,0.18); /* lightened (S2 change 3) */
  box-sizing:border-box;
}
.clx-sre *,
.clx-sre *::before,
.clx-sre *::after { box-sizing:border-box; }

/* rd-stage (light) */
.clx-sre .sre-stage {
  position:relative;
  width:100%;
  background:radial-gradient(120% 90% at 82% 0%, #FFF4EF 0%, var(--sre-bg) 48%);
  color:var(--sre-ink);
  font-family:var(--sre-font);
  padding:26px 30px;
  display:flex;
  flex-direction:column;
}

.clx-sre .sre-head {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
}
.clx-sre .sre-kicker {
  font-family:var(--sre-mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--sre-ember);
}
.clx-sre .sre-eyebrow {
  font-family:var(--sre-mono);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--sre-muted);
}
.clx-sre .sre-h3 {
  font:600 20px/1.15 var(--sre-font);
  margin:7px 0 4px;
  letter-spacing:-.02em;
  color:var(--sre-ink);
}
.clx-sre .sre-chip-meta {
  font-family:var(--sre-mono);
  font-size:10.5px;
  color:var(--sre-muted);
  margin-top:3px;
}
.clx-sre .sre-formula {
  font-size:10.5px;
  margin-top:3px;
  margin-bottom:12px;
}
.clx-sre .sre-dim { color:var(--sre-ink-dim); }
.clx-sre .sre-em  { color:var(--sre-ember); }

.clx-sre .sre-chart { width:100%; height:140px; display:block; }

/* vs grid */
/* S2 change 2 — the two stat chips read as one panel with a single divider */
.clx-sre .sre-grid2 {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  margin-top:16px;
  background:#faf9f8;
  border:1px solid #efeeec;
  border-radius:12px;
  overflow:hidden;
}
.clx-sre .sre-chip {
  background:transparent;
  border:0;
  border-radius:0;
  padding:14px 16px;
  box-shadow:none;
}
.clx-sre .sre-chip + .sre-chip { border-left:1px solid #ececea; }
.clx-sre .sre-chip-top {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
}
.clx-sre .sre-chip-k {
  font-size:9.5px;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-top:0;
}
.clx-sre .sre-chip-val {
  font:600 17px/1 var(--sre-font);
  color:var(--sre-ember);
  letter-spacing:-.02em;
}
.clx-sre .sre-chip-sub { margin-top:3px; margin-bottom:9px; }

.clx-sre .sre-bar-row {
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:5px;
}
.clx-sre .sre-bar-label {
  font-family:var(--sre-mono);
  font-size:8.5px;
  color:var(--sre-muted);
  width:34px;
  flex:none;
}
.clx-sre .sre-bar-track {
  flex:1;
  height:7px;
  border-radius:4px;
  background:var(--sre-ember-soft);
  overflow:hidden;
}
.clx-sre .sre-bar-fill {
  height:100%;
  border-radius:4px;
  transform-origin:left;
  background:rgba(20,20,40,.22);
}
.clx-sre .sre-bar-hot { background:var(--sre-ember); }

.clx-sre .sre-footer {
  margin-top:auto;
  padding-top:13px;
  border-top:1px solid var(--sre-line-2);
  display:flex;
  align-items:center;
  gap:9px;
}
.clx-sre .sre-dot {
  width:7px; height:7px;
  border-radius:50%;
  background:var(--sre-ember);
  flex:none;
}
.clx-sre .sre-foot-txt { font-size:12px; color:var(--sre-ink-dim); line-height:1.4; }
.clx-sre .sre-foot-sub { color:var(--sre-muted); }

/* ---- entrance animations (gated on .in, locked by .settled) ---- */
.clx-sre:not(.in) .h-fade { opacity:0; }
.clx-sre:not(.in) .h-pop  { opacity:0; transform:translateY(6px); }
.clx-sre:not(.in) .h-bar  { transform:scaleX(0); }
.clx-sre:not(.in) .h-line-ai { stroke-dasharray:420; stroke-dashoffset:420; }

.clx-sre.in .h-fade { animation:clxsre-fade .7s ease both; animation-delay:.2s; }
.clx-sre.in .h-fade.d1 { animation-delay:.4s; }
.clx-sre.in .h-pop  { animation:clxsre-count .6s ease both; animation-delay:.6s; }
.clx-sre.in .h-bar  { animation:clxsre-grow-x .85s cubic-bezier(.2,.8,.2,1) both; animation-delay:.5s; }
.clx-sre.in .h-line-ai { stroke-dasharray:420; animation:clxsre-line .9s ease forwards; animation-delay:.35s; }

.clx-sre.settled .h-fade { opacity:1 !important; }
.clx-sre.settled .h-pop  { opacity:1 !important; transform:none !important; }
.clx-sre.settled .h-bar  { transform:none !important; }
.clx-sre.settled .h-line-ai { stroke-dashoffset:0 !important; }

@keyframes clxsre-grow-x { from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes clxsre-count  { from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
@keyframes clxsre-fade   { from{ opacity:0; } to{ opacity:1; } }
@keyframes clxsre-line   { from{ stroke-dashoffset:420; } to{ stroke-dashoffset:0; } }

@media (prefers-reduced-motion: reduce) {
  .clx-sre .h-fade { opacity:1 !important; }
  .clx-sre .h-pop  { opacity:1 !important; transform:none !important; }
  .clx-sre .h-bar  { transform:none !important; }
  .clx-sre .h-line-ai { stroke-dashoffset:0 !important; }
}

/* On narrow viewports the figure stacks under the text (handled by the
   existing .svc-cards-heading slug-scoped rules); keep the frame fluid. */
@media (max-width:880px){
  .clx-sre .sre-stage { padding:22px 20px; }
}

/* NOTE: the .svc-cards-section > h3 / > p alignment fix now lives globally
   in site-wide.css (applies to every clx_service_cards variant), so it is
   intentionally not duplicated here. */

/* S2 two-column layout: text left, agentic-advantage figure right, sized ~50/50
   so the figure reads as a prominent visual (same treatment as the Creative &
   Design figure). The shared base makes the text span 2-of-3 columns (≈66/33),
   which leaves the figure squeezed; pin the 2-col ratio + un-span the text here
   so it renders consistently (prod was falling back to the 66/33 base).
   !important to beat the base across envs. SR only (file enqueued only here). */
.page-seo-reseller .svc-cards-heading {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) !important;
  column-gap: 48px;
  align-items: center !important;
}
.page-seo-reseller .svc-cards-heading-text {
  grid-column: auto !important;
}

/* NOTE: the S2 comparison table is rendered by clx-sr-compare.php as a
   self-contained HTML widget (reusing the "AI Engineering Engagement
   Models" table style), so it needs no rules here. */

/* Mobile: the pinned 2-col grid above forces the figure beside the heading and
   breaks the section on phones. Stack it: heading + intro, then the figure. */
@media (max-width: 767px) {
  .page-seo-reseller .svc-cards-heading {
    grid-template-columns: minmax(0, 1fr) !important;
    column-gap: 0 !important;
  }
}