/* social — the Able Social product page (asio system; soc- is page-local) */

[data-cmp="social"] .soc, [data-cmp="social"].soc { background: var(--surface-base); }
[data-cmp="social"] .soc-green, [data-cmp="social"].soc-green { color: var(--accent); }
[data-cmp="social"] .soc-center, [data-cmp="social"].soc-center { text-align: center; margin-bottom: var(--space-10); }
[data-cmp="social"] .soc-narrow, [data-cmp="social"].soc-narrow { max-width: 48rem; margin-inline: auto; padding-inline: var(--space-4); text-align: center; }
[data-cmp="social"] .soc-narrow .asio-h2, [data-cmp="social"].soc-narrow .asio-h2 { margin: 0 0 var(--space-4); }
[data-cmp="social"] .soc-narrow .asio-lead, [data-cmp="social"].soc-narrow .asio-lead { margin: 0; }

/* ── 1 · Hero ── */
[data-cmp="social"] .soc-hero, [data-cmp="social"].soc-hero { position: relative; overflow: hidden; background: var(--surface-base);
  padding: var(--space-10) 0 var(--space-12); }
[data-cmp="social"] .soc-hero-grid, [data-cmp="social"].soc-hero-grid { pointer-events: none; position: absolute; inset: 0;
  background-image: linear-gradient(hsl(220 15% 20% / 0.03) 1px, transparent 1px),
                    linear-gradient(90deg, hsl(220 15% 20% / 0.03) 1px, transparent 1px);
  background-size: 48px 48px; }
[data-cmp="social"] .soc-hero-glow, [data-cmp="social"].soc-hero-glow { pointer-events: none; position: absolute; left: 50%; top: 55%;
  width: 800px; height: 600px; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(ellipse, hsl(142 71% 45% / 0.08), transparent 70%); }
[data-cmp="social"] .soc-hero-inner, [data-cmp="social"].soc-hero-inner { position: relative; max-width: 52rem; margin-inline: auto; text-align: center; }
[data-cmp="social"] .soc-hero-logo, [data-cmp="social"].soc-hero-logo { display: inline-block; font-size: 28px; margin-bottom: var(--space-4); }
[data-cmp="social"] .soc-hero-inner .asio-h1, [data-cmp="social"].soc-hero-inner .asio-h1 { margin: 0 0 var(--space-3); }
[data-cmp="social"] .soc-hero-inner .asio-lead, [data-cmp="social"].soc-hero-inner .asio-lead { max-width: 44rem; margin-inline: auto; }
[data-cmp="social"] .soc-hero-actions, [data-cmp="social"].soc-hero-actions { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3); margin-top: var(--space-8); }
@media (min-width: 640px) { [data-cmp="social"] .soc-hero-actions, [data-cmp="social"].soc-hero-actions { flex-direction: row; }}

/* ── 2 & 5 · Screenshot bands (dark ink) ── */
[data-cmp="social"] .soc-shot, [data-cmp="social"].soc-shot { background: #0d1526; padding: var(--space-12) 0; }
[data-cmp="social"] .soc-shot-figure, [data-cmp="social"].soc-shot-figure { max-width: 62rem; margin: 0 auto; }
[data-cmp="social"] .soc-shot-figure img, [data-cmp="social"].soc-shot-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius-xl);
  border: 1px solid hsl(220 30% 30% / 0.6); box-shadow: 0 24px 48px -16px hsl(220 60% 5% / 0.55); }
[data-cmp="social"] .soc-shot-figure figcaption, [data-cmp="social"].soc-shot-figure figcaption { margin-top: var(--space-4); text-align: center;
  font-size: 0.875rem; color: hsl(220 15% 72%); }

/* ── 3 · Cards ── */
[data-cmp="social"] .soc-section, [data-cmp="social"].soc-section { background: var(--surface-base); padding: var(--space-12) 0; }
[data-cmp="social"] .soc-section--subtle, [data-cmp="social"].soc-section--subtle { background: color-mix(in srgb, var(--surface-subtle) 50%, var(--surface-base)); }
[data-cmp="social"] .soc-cards, [data-cmp="social"].soc-cards { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 768px) { [data-cmp="social"] .soc-cards, [data-cmp="social"].soc-cards { grid-template-columns: repeat(3, 1fr); }}
[data-cmp="social"] .soc-cards .asio-h3, [data-cmp="social"].soc-cards .asio-h3 { margin: 0 0 var(--space-3); }
[data-cmp="social"] .soc-cards p, [data-cmp="social"].soc-cards p { margin: 0; color: var(--text-secondary); line-height: 1.6; }

/* ── 4 · The TikTok flow rail ── */
[data-cmp="social"] .soc-flow, [data-cmp="social"].soc-flow { list-style: none; max-width: 44rem; margin: var(--space-10) auto 0; padding: 0;
  display: grid; gap: var(--space-6); }
[data-cmp="social"] .soc-step, [data-cmp="social"].soc-step { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start; }
[data-cmp="social"] .soc-step-n, [data-cmp="social"].soc-step-n { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: var(--radius-full); background: var(--accent); color: var(--on-accent);
  font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: var(--asio-shadow-soft); }
[data-cmp="social"] .soc-step-title, [data-cmp="social"].soc-step-title { margin: 0 0 var(--space-1); font-size: 1.0625rem; font-weight: 600; color: var(--text-primary); }
[data-cmp="social"] .soc-step p, [data-cmp="social"].soc-step p { margin: 0; color: var(--text-secondary); line-height: 1.65; }
[data-cmp="social"] .soc-chip, [data-cmp="social"].soc-chip { display: inline-block; margin: 2px 2px 0 0; padding: 2px 10px; border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-base));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--text-primary); font-family: var(--font-mono); font-size: 0.8125rem; }

/* ── 6 · CTA ── */
[data-cmp="social"] .soc-cta, [data-cmp="social"].soc-cta { background: var(--surface-base); padding: var(--space-12) 0; }
[data-cmp="social"] .soc-cta .asio-lead, [data-cmp="social"].soc-cta .asio-lead { margin-bottom: var(--space-6); }
[data-cmp="social"] .soc-legal, [data-cmp="social"].soc-legal { margin: var(--space-6) 0 0; font-size: 0.8125rem; color: var(--text-muted); }
[data-cmp="social"] .soc-legal a, [data-cmp="social"].soc-legal a { color: var(--text-secondary); text-decoration: underline; }
@media (hover: hover) and (pointer: fine) { [data-cmp="social"] .soc-legal a:hover, [data-cmp="social"].soc-legal a:hover { color: var(--accent); }}