/* ==========================================================================
   SPECTRUM ALLIANCE — Inner Page Styles
   Product pages, about, membership, contact, legal
   ========================================================================== */

/* ── Product page body overrides ─────────────────────────────────────── */
body.page-webstudio       { --brand-primary: var(--ws-blue); --brand-accent: var(--ws-purple); --brand-gradient: var(--ws-gradient); }
body.page-sunshine        { --brand-primary: var(--shr-orange); --brand-accent: var(--shr-amber); --brand-gradient: var(--shr-gradient); }
body.page-eles            { --brand-primary: var(--eles-gold); --brand-accent: var(--eles-green); --brand-gradient: var(--eles-gradient); }
body.page-ledgerpro       { --brand-primary: var(--lp-accent); --brand-accent: var(--lp-blue); --brand-gradient: var(--lp-gradient); }
body.page-lumorlist       { --brand-primary: var(--ll-warm); --brand-accent: var(--ll-brown); --brand-gradient: var(--ll-gradient); }
body.page-membership      { --brand-primary: var(--mem-teal); --brand-accent: var(--mem-cyan); --brand-gradient: var(--mem-gradient); }

/* ── Two-col layout ──────────────────────────────────────────────────── */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; }
.two-col--flip .two-col__text { order: 2; }
.two-col--flip .two-col__visual { order: 1; }
@media (max-width: 1024px) {
  .two-col { grid-template-columns: 1fr; gap: var(--space-12); }
  .two-col--flip .two-col__text,
  .two-col--flip .two-col__visual { order: unset; }
}

/* ── Who it's for / not for ──────────────────────────────────────────── */
.for-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
.for-list  { display: flex; flex-direction: column; gap: var(--space-3); }
.for-item  { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); color: var(--sa-silver); line-height: var(--leading-relaxed); }
.for-item__icon { font-size: 16px; flex-shrink: 0; margin-top: 2px; }
@media (max-width: 768px) { .for-grid { grid-template-columns: 1fr; } }

/* ── How it works steps ───────────────────────────────────────────────── */
.steps-list { display: flex; flex-direction: column; gap: var(--space-1); }
.step-item {
  display: flex;
  gap: var(--space-6);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  transition: background var(--dur-fast);
}
.step-item:hover { background: rgba(255,255,255,0.03); }
.step-num {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-sm); font-weight: var(--weight-bold);
  background: var(--brand-gradient);
  color: var(--sa-white);
  flex-shrink: 0;
}
.step-content {}
.step-title { font-size: var(--text-base); font-weight: var(--weight-semi); color: var(--sa-white); margin-bottom: var(--space-2); }
.step-desc  { font-size: var(--text-sm); color: var(--sa-ghost); line-height: var(--leading-relaxed); }

/* ── Proof placeholder ───────────────────────────────────────────────── */
.proof-placeholder {
  border: 2px dashed rgba(255,255,255,0.08);
  border-radius: var(--radius-2xl);
  padding: var(--space-16);
  text-align: center;
  color: var(--sa-ghost);
  font-size: var(--text-sm);
}