/* index.html — page styles. Extracted from the page's inline <style> block (#46)
   so CSP style-src needs no 'unsafe-inline'. */
  * { box-sizing: border-box; margin: 0; }
  html { color-scheme: dark; }
  body { min-height: 100vh; }

  /* ===== Backdrop: mesh + dot grid ===== */
  .cp-stage {
    position: relative; min-height: 100vh; overflow: hidden;
    background:
      radial-gradient(ellipse 70% 45% at 50% -8%, rgba(168, 85, 247, calc(0.18 * var(--cp-glow, 1))), transparent 60%),
      radial-gradient(ellipse 45% 35% at 88% 28%, rgba(217, 70, 239, calc(0.10 * var(--cp-glow, 1))), transparent 55%),
      radial-gradient(ellipse 50% 40% at 8% 75%, rgba(139, 92, 246, calc(0.09 * var(--cp-glow, 1))), transparent 55%),
      var(--mq-bg);
  }
  .cp-stage::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
  }
  .cp-shell { position: relative; max-width: 1060px; margin: 0 auto; padding: 0 var(--mq-space-6) var(--mq-space-16); }

  /* ===== Nav — matches bemomentiq.com website nav (frosted sticky bar) ===== */
  .cp-topnav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(10, 10, 10, 0.7);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--mq-border-subtle);
  }
  .cp-topnav-inner {
    position: relative; max-width: 1280px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: var(--mq-space-6);
    padding: 14px 24px;
  }
  .cp-topnav-brand { display: flex; flex-direction: column; gap: 3px; }
  .cp-topnav-brand a { display: block; }
  .cp-logo { height: 11px; display: block; filter: brightness(1.05); }
  .cp-portal-label {
    font-size: 0.34rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85); white-space: nowrap;
    margin-left: 25px; /* aligns under the "MomentIQ" wordmark, past the mark */
  }
  .cp-topnav-links { display: none; gap: 44px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  @media (min-width: 768px) { .cp-topnav-links { display: flex; } }
  @media (max-width: 1240px) { .cp-topnav-links { gap: 30px; } .cp-topnav-links a { font-size: 13px; } }
  @media (max-width: 1080px) { .cp-topnav-links a.cp-nav-extra { display: none; } }
  .cp-topnav-links a { color: rgba(255,255,255,0.7); font-size: 14px; font-weight: 500; text-decoration: none; transition: color 0.2s; white-space: nowrap; }
  .cp-topnav-links a:hover { color: #fff; }
  .cp-topnav-cta { padding: 0.625rem 1.25rem; font-size: 14px; white-space: nowrap; margin-left: auto; text-decoration: none; }

  /* Account dropdown (affiliate matched from shopinsights affiliates table) */
  .cp-account { position: relative; margin-left: auto; }
  .cp-account-btn {
    display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer;
    padding: 0.2rem 0.5rem 0.2rem 0.2rem; border-radius: var(--mq-radius-pill);
    background: rgba(255,255,255,0.05); border: 1px solid var(--mq-border-strong); color: var(--mq-fg);
    transition: border-color var(--mq-dur-fast), background-color var(--mq-dur-fast);
  }
  .cp-account-btn:hover { border-color: rgba(168, 85, 247, 0.5); background: rgba(168, 85, 247, 0.1); }
  .cp-account-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; display: block; }
  .cp-account-initial { display: grid; place-items: center; background: var(--mq-gradient-brand); color: #fff; font-weight: 800; font-size: 0.8125rem; }
  .cp-account-avatar-lg { width: 42px; height: 42px; }
  .cp-account-menu {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; width: 248px;
    display: flex; flex-direction: column; padding: var(--mq-space-2);
    border-radius: var(--mq-radius-lg); border: 1px solid rgba(168, 85, 247, 0.35);
    background: #160f1f; box-shadow: 0 18px 48px rgba(0,0,0,0.6), 0 0 30px rgba(139, 92, 246, 0.15);
  }
  .cp-account-head { display: flex; align-items: center; gap: var(--mq-space-3); padding: var(--mq-space-3); }
  .cp-account-meta { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
  .cp-account-meta strong { color: var(--mq-fg); font-size: 0.9375rem; white-space: nowrap; }
  .cp-account-meta span { color: var(--mq-fg-quiet); font-size: 0.8125rem; }
  .cp-account-payout {
    display: flex; align-items: center; justify-content: space-between; gap: var(--mq-space-3);
    margin: 0 var(--mq-space-2) var(--mq-space-2); padding: 0.6rem 0.85rem; border-radius: var(--mq-radius-md);
    background: rgba(168, 85, 247, 0.1); border: 1px solid rgba(168, 85, 247, 0.3);
  }
  .cp-account-payout span { font-size: 0.6875rem; font-weight: 600; letter-spacing: var(--mq-eyebrow-track); text-transform: uppercase; color: var(--mq-fg-quiet); }
  .cp-account-payout strong { font-size: 1.0625rem; font-weight: 800; background: var(--mq-gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .cp-account-item {
    display: block; padding: 0.55rem 0.85rem; border-radius: var(--mq-radius-md);
    color: var(--mq-fg-muted); font-size: var(--mq-small-size); text-decoration: none;
    transition: background-color var(--mq-dur-fast), color var(--mq-dur-fast);
  }
  .cp-account-item:hover { background: rgba(168, 85, 247, 0.12); color: var(--mq-fg); }
  .cp-nav-pill {
    display: inline-flex; align-items: center; padding: 0.2rem 0.7rem; border-radius: var(--mq-radius-pill);
    border: 1px solid var(--mq-border); background: rgba(255,255,255,0.05);
    font-size: var(--mq-tiny-size); font-weight: 600; letter-spacing: var(--mq-eyebrow-track);
    text-transform: uppercase; color: var(--mq-purple); white-space: nowrap;
  }
  .cp-nav-help { font-size: var(--mq-small-size); color: var(--mq-fg-quiet); text-decoration: none; transition: color var(--mq-dur-fast); }
  .cp-nav-help:hover { color: var(--mq-fg-muted); }

  /* ===== Hero (compact — sits above the flow card) ===== */
  .cp-hero { text-align: center; padding: var(--mq-space-20) 0 var(--mq-space-10); }
  .cp-hero .mq-eyebrow { display: inline-flex; align-items: center; gap: var(--mq-space-2); margin-bottom: var(--mq-space-4); white-space: nowrap; font-size: 1.06rem; }
  .cp-eyebrow-x { color: var(--mq-fg-faint); font-weight: 400; }
  .cp-eyebrow-handle { background: var(--mq-gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; }
  .cp-hero h1 { font-size: clamp(2.1rem, 3.5vw + 0.75rem, 3.25rem); max-width: 17ch; margin: 0 auto; text-wrap: balance; }
  .cp-hero-sub { max-width: 46ch; margin: var(--mq-space-4) auto 0; font-size: var(--mq-body-lg-size); color: var(--mq-fg-muted); text-wrap: pretty; }

  /* ===== Flow card ===== */
  .cp-flow-wrap { max-width: 720px; margin: 0 auto; }
  .cp-flow-card {
    position: relative; overflow: hidden;
    background:
      radial-gradient(ellipse 90% 60% at 12% -10%, rgba(139, 92, 246, 0.16), transparent 55%),
      radial-gradient(ellipse 70% 50% at 95% 110%, rgba(217, 70, 239, 0.12), transparent 55%),
      var(--mq-card-soft);
    border: 1px solid rgba(168, 85, 247, 0.28);
    border-radius: var(--mq-radius-2xl); padding: var(--mq-space-8);
    box-shadow: 0 0 60px rgba(139, 92, 246, 0.12);
  }
  .cp-flow-card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    /* symmetric fade so the bar reads centered — bright middle, soft ends */
    background: linear-gradient(90deg, transparent 0%, rgba(139, 92, 246, 0.9) 18%, rgba(217, 70, 239, 0.95) 50%, rgba(139, 92, 246, 0.9) 82%, transparent 100%);
  }
  @keyframes cp-rise { from { transform: translateY(14px); } to { transform: none; } }
  /* Entrance animation only once JS confirms a real rendering context (rAF ticked) —
     base styles stay fully visible for static capture / print / reduced motion. */
  @media (prefers-reduced-motion: no-preference) {
    html[data-mounted] .cp-flow-card,
    html[data-mounted] .cp-home { animation: cp-rise var(--mq-dur-hero) var(--mq-ease-out-expo); animation-fill-mode: none; }
  }
  .cp-flow-head { margin-bottom: var(--mq-space-6); }

  /* ===== Forms ===== */
  .cp-field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: var(--mq-space-5); }

  /* Horizontal field: input box centered on the page, label floated to its left */
  .cp-field-stack { width: 248px; margin: 0 auto; }
  .cp-field-row {
    position: relative; width: 248px; margin: 0 auto var(--mq-space-4);
  }
  .cp-field-row .cp-field-label {
    position: absolute; right: calc(100% + var(--mq-space-3)); top: 0.85rem;
    margin: 0; text-align: right; white-space: nowrap;
  }
  .cp-field-row .cp-suggest-wrap, .cp-field-row .cp-select-wrap, .cp-field-row .cp-input { width: 100%; }
  .cp-field-row .cp-input { text-align: center; }
  .cp-field-row .cp-select { text-align: center; text-align-last: center; padding-left: 2.5rem; }
  .cp-field-row .cp-field-error, .cp-field-row .cp-field-hint { display: block; }
  @media (max-width: 560px) {
    .cp-field-stack, .cp-field-row { width: 100%; }
    .cp-field-row { padding-left: 84px; }
    .cp-field-row .cp-field-label { right: auto; left: 0; }
  }
  .cp-field-label { font-size: var(--mq-tiny-size); font-weight: 700; letter-spacing: var(--mq-eyebrow-track); text-transform: uppercase; color: var(--mq-purple); }
  .cp-field-hint { font-size: 0.8125rem; color: var(--mq-fg-faint); }
  .cp-field-error { font-size: 0.8125rem; color: var(--mq-danger); }
  .cp-input {
    width: 100%; padding: 0.75rem 1rem; border-radius: var(--mq-radius-md);
    background: rgba(139, 92, 246, 0.08); border: 1px solid rgba(168, 85, 247, 0.25);
    color: var(--mq-fg); font: inherit; font-size: 0.9375rem;
    transition: border-color var(--mq-dur-fast), box-shadow var(--mq-dur-fast), background-color var(--mq-dur-fast);
  }
  .cp-input:hover { border-color: rgba(168, 85, 247, 0.45); }
  .cp-input::placeholder { color: var(--mq-fg-faint); }
  .cp-input:focus { outline: none; border-color: rgba(217, 70, 239, 0.65); box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.22), 0 0 24px rgba(139, 92, 246, 0.18); background: rgba(139, 92, 246, 0.12); }
  .cp-input-invalid { border-color: rgba(239, 68, 68, 0.6); }
  .cp-mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.84rem; }
  .cp-select-wrap { position: relative; }
  .cp-select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.5rem; }
  .cp-select-empty { color: var(--mq-fg-faint); }
  .cp-select option { background: #1a1a1a; color: var(--mq-fg); }
  .cp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--mq-space-4); }
  .cp-grid-compact { max-width: 60%; }
  .cp-grid-center { margin-left: auto; margin-right: auto; }
  .cp-intro-placeholder { opacity: 0.45; }
  .cp-foot-center { justify-content: center; }
  .cp-form-foot.cp-foot-center { justify-content: center; }
  @media (max-width: 900px) { .cp-grid-compact { max-width: 100%; } }
  @media (max-width: 560px) { .cp-form-grid { grid-template-columns: 1fr; } }
  .cp-form-foot { display: flex; justify-content: flex-end; align-items: center; gap: var(--mq-space-3); margin-top: var(--mq-space-6); }
  .cp-btn-primary { padding: 0.8rem 1.75rem; font-size: 1rem; }
  .cp-btn-primary:disabled { opacity: 0.6; cursor: progress; transform: none; }
  .cp-btn-ghost { padding: 0.8rem 1.5rem; font-size: 0.9375rem; }
  .cp-btn-sm { padding: 0.65rem 1.1rem; font-size: var(--mq-small-size); margin-right: auto; }
  .cp-btn-center { margin: 0 auto; }
  .cp-section-label {
    font-size: var(--mq-tiny-size); font-weight: 600; letter-spacing: var(--mq-eyebrow-track);
    text-transform: uppercase; color: var(--mq-fg-quiet);
    margin: var(--mq-space-6) 0 var(--mq-space-3);
    display: flex; align-items: center; gap: var(--mq-space-3);
  }
  .cp-section-label::after { content: ""; flex: 1; height: 1px; background: var(--mq-border); }
  .cp-section-label span { white-space: nowrap; }

  /* Post link list */
  .cp-link-list { display: flex; flex-direction: column; gap: var(--mq-space-2); }
  .cp-link-row { display: flex; align-items: center; gap: var(--mq-space-2); }
  .cp-link-num { flex: none; min-width: 18px; text-align: right; font-size: 0.75rem; font-weight: 700; color: var(--mq-fg-faint); font-variant-numeric: tabular-nums; }
  .cp-icon-btn {
    flex: none; width: 36px; height: 36px; border-radius: var(--mq-radius-md); display: grid; place-items: center;
    background: rgba(255,255,255,0.04); border: 1px solid var(--mq-border); color: var(--mq-fg-quiet); cursor: pointer;
    transition: color var(--mq-dur-fast), border-color var(--mq-dur-fast);
  }
  .cp-icon-btn:hover { color: var(--mq-danger); border-color: rgba(239, 68, 68, 0.4); }
  .cp-add-link {
    display: inline-flex; align-items: center; gap: 0.4rem; align-self: flex-start;
    background: none; border: 1px dashed var(--mq-border-strong); border-radius: var(--mq-radius-pill);
    color: var(--mq-purple); font: inherit; font-size: var(--mq-small-size); font-weight: 600;
    padding: 0.45rem 1rem; cursor: pointer; transition: border-color var(--mq-dur-fast), background-color var(--mq-dur-fast);
    white-space: nowrap;
  }
  .cp-add-link:hover { border-color: rgba(168, 85, 247, 0.5); background: rgba(168, 85, 247, 0.08); }

  /* Stepper — centered, steps close together */
  .cp-stepper { display: flex; align-items: center; justify-content: center; gap: var(--mq-space-3); margin-bottom: var(--mq-space-8); }
  .cp-step { display: flex; align-items: center; gap: 0.45rem; }
  .cp-step-dot {
    width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none;
    font-size: 0.6875rem; font-weight: 700; border: 1px solid var(--mq-border-strong); color: var(--mq-fg-quiet);
    transition: all var(--mq-dur-base);
  }
  .cp-step-name { font-size: var(--mq-tiny-size); font-weight: 600; color: var(--mq-fg-faint); white-space: nowrap; }
  .cp-step.is-active .cp-step-dot { background: var(--mq-gradient-brand); border-color: transparent; color: #fff; box-shadow: 0 0 14px rgba(168, 85, 247, 0.45); }
  .cp-step.is-active .cp-step-name { color: var(--mq-fg); }
  .cp-step.is-done .cp-step-dot { background: rgba(168, 85, 247, 0.18); border-color: rgba(168, 85, 247, 0.4); color: var(--mq-purple); }
  .cp-step.is-done .cp-step-name { color: var(--mq-fg-muted); }
  .cp-step-line { width: 48px; height: 2px; border-radius: 1px; background: var(--mq-border); }
  .cp-step-line.is-filled { background: var(--mq-gradient-brand-h); }
  @media (max-width: 560px) { .cp-step-name { display: none; } .cp-step.is-active .cp-step-name { display: inline; } .cp-dropzone span { white-space: normal; } }

  /* ===== Mobile pass ===== */
  @media (max-width: 640px) {
    .cp-shell { padding-left: var(--mq-space-4); padding-right: var(--mq-space-4); }
    .cp-hero { padding: var(--mq-space-6) 0 var(--mq-space-8); }
    .cp-hero .mq-eyebrow { white-space: normal; }
    .cp-flow-card { padding: var(--mq-space-5); }
    .cp-form-foot { flex-direction: column-reverse; align-items: stretch; }
    .cp-form-foot .mq-btn-primary { justify-content: center; }
    .cp-form-foot .cp-btn-sm { margin-right: 0; justify-content: center; }
  }

  /* Callouts, dropzone, methods */
  .cp-callout {
    display: flex; gap: var(--mq-space-3); padding: var(--mq-space-4) var(--mq-space-5);
    border-radius: var(--mq-radius-lg); border: 1px solid var(--mq-border);
    background: rgba(255,255,255,0.03); margin-bottom: var(--mq-space-5);
  }
  .cp-callout p { font-size: var(--mq-small-size); margin-top: 0.15rem; }
  .cp-callout-icon { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(168, 85, 247, 0.15); color: var(--mq-purple); margin-top: 0.1rem; }
  .cp-callout-success { border-color: rgba(16, 185, 129, 0.3); background: rgba(16, 185, 129, 0.06); }
  .cp-callout-success .cp-callout-icon { background: rgba(16, 185, 129, 0.18); color: var(--mq-success-pulse); }
  .cp-dropzone {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: var(--mq-space-3);
    padding: var(--mq-space-6); border-radius: var(--mq-radius-lg); cursor: pointer;
    border: 1.5px dashed var(--mq-border-strong); background: rgba(255,255,255,0.02);
    color: var(--mq-fg-muted); font: inherit; font-size: var(--mq-small-size);
    transition: border-color var(--mq-dur-base), background-color var(--mq-dur-base);
    margin-bottom: var(--mq-space-2);
  }
  .cp-dropzone:hover { border-color: rgba(168, 85, 247, 0.5); background: rgba(168, 85, 247, 0.05); }
  .cp-dropzone strong { color: var(--mq-fg); }
  .cp-dropzone span { white-space: nowrap; }
  .cp-dropzone.is-filled { border-style: solid; border-color: rgba(16, 185, 129, 0.45); color: var(--mq-success-pulse); }
  .cp-method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mq-space-3); margin-bottom: var(--mq-space-5); }
  @media (max-width: 560px) { .cp-method-grid { grid-template-columns: 1fr; } }
  .cp-method {
    display: flex; align-items: flex-start; gap: var(--mq-space-3); text-align: left; cursor: pointer;
    padding: var(--mq-space-4); border-radius: var(--mq-radius-lg); font: inherit; color: inherit;
    background: rgba(139, 92, 246, 0.06); border: 1px solid rgba(168, 85, 247, 0.22);
    transition: border-color var(--mq-dur-base), background-color var(--mq-dur-base), box-shadow var(--mq-dur-base);
  }
  .cp-method:hover { background: rgba(139, 92, 246, 0.10); border-color: rgba(168, 85, 247, 0.4); }
  .cp-method.is-selected { border-color: rgba(168, 85, 247, 0.6); background: rgba(168, 85, 247, 0.08); box-shadow: 0 0 24px rgba(139, 92, 246, 0.18); }
  .cp-method-icon { flex: none; color: var(--mq-purple); margin-top: 0.1rem; }
  .cp-method-text { display: flex; flex-direction: column; gap: 0.2rem; }
  .cp-method-title { font-weight: 700; font-size: 0.9375rem; color: var(--mq-fg); display: flex; align-items: center; gap: 0.45rem; }
  .cp-method-badge { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.06em; padding: 0.1rem 0.45rem; border-radius: var(--mq-radius-pill); background: rgba(168, 85, 247, 0.18); color: var(--mq-purple); }
  .cp-method-desc { font-size: 0.8125rem; color: var(--mq-fg-quiet); line-height: 1.45; }
  .cp-method-radio {
    margin-left: auto; flex: none; width: 20px; height: 20px; border-radius: 50%;
    border: 1.5px solid var(--mq-border-strong); display: grid; place-items: center; color: #fff;
    transition: all var(--mq-dur-base);
  }
  .cp-method.is-selected .cp-method-radio { background: var(--mq-gradient-brand); border-color: transparent; }
  .cp-secure-note { display: flex; align-items: flex-start; gap: 0.45rem; font-size: 0.8125rem; color: var(--mq-fg-quiet); margin-top: var(--mq-space-4); }
  .cp-secure-note svg { color: var(--mq-success); flex: none; margin-top: 2px; }

  /* Step-2 context chip (who's posting, which campaign) */
  .cp-context {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.3rem 0.85rem; margin-bottom: var(--mq-space-5);
    border: 1px solid var(--mq-border); border-radius: var(--mq-radius-pill);
    background: rgba(255,255,255,0.04); font-size: 0.8125rem; color: var(--mq-fg-quiet);
    white-space: nowrap;
  }
  .cp-context strong { color: var(--mq-fg-muted); font-weight: 600; }
  .cp-context .cp-context-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--mq-fg-faint); }

  /* ===== Feed picker (recent posts grid) ===== */
  .cp-feed { display: flex; flex-direction: column; gap: var(--mq-space-3); }
  .cp-feed-head { display: flex; align-items: center; justify-content: space-between; gap: var(--mq-space-3); }
  .cp-feed-count { font-size: 0.8125rem; color: var(--mq-fg-quiet); }
  .cp-feed-count strong { color: var(--mq-purple); font-size: 0.9375rem; }
  .cp-feed-tools { display: flex; align-items: center; gap: var(--mq-space-3); white-space: nowrap; }
  .cp-feed-demo {
    font-size: 0.625rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--mq-fg-faint); border: 1px dashed var(--mq-border-strong); border-radius: var(--mq-radius-pill);
    padding: 0.15rem 0.55rem; white-space: nowrap;
  }
  .cp-feed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--mq-space-3); }
  @media (max-width: 480px) { .cp-feed-grid { grid-template-columns: repeat(3, 1fr); } }
  .cp-feed-sect { display: flex; flex-direction: column; gap: var(--mq-space-3); padding: var(--mq-space-4); border-radius: var(--mq-radius-lg); border: 1px solid rgba(168, 85, 247, 0.3); background: rgba(168, 85, 247, 0.06); }
  .cp-feed-sect.is-many {
    border-color: rgba(217, 70, 239, 0.45);
    background:
      radial-gradient(ellipse 80% 100% at 0% 0%, rgba(217, 70, 239, 0.12), transparent 60%),
      rgba(168, 85, 247, 0.07);
    box-shadow: 0 0 30px rgba(217, 70, 239, 0.12);
  }
  .cp-feed-sect-note { font-size: 0.8125rem; color: var(--mq-fg-quiet); margin-top: -0.35rem; }
  .cp-feed-sect-head { display: flex; align-items: center; justify-content: space-between; gap: var(--mq-space-3); }
  .cp-feed-sect-title { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--mq-tiny-size); font-weight: 700; letter-spacing: var(--mq-eyebrow-track); text-transform: uppercase; color: var(--mq-purple); }
  .cp-feed-sect-lead { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.9375rem; color: var(--mq-fg-muted); }
  .cp-feed-sect-lead svg { color: var(--mq-fuchsia); flex: none; }
  .cp-feed-sect-lead strong { color: var(--mq-fg); }
  .cp-feed-remaining { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; color: var(--mq-fg-muted); white-space: nowrap; }
  .cp-feed-remaining strong { color: var(--mq-fuchsia); font-size: 1rem; }
  .cp-feed-remaining.is-done { color: var(--mq-success-pulse); font-weight: 600; }
  .cp-post {
    display: flex; flex-direction: column; gap: 0.4rem; text-align: left; cursor: pointer;
    background: none; border: 0; padding: 0; font: inherit; color: inherit;
  }
  .cp-post-thumb {
    position: relative; aspect-ratio: 3 / 4; border-radius: var(--mq-radius-md);
    background-size: cover; background-position: center;
    display: grid; place-items: center;
    border: 2px solid transparent;
    transition: border-color var(--mq-dur-base), box-shadow var(--mq-dur-base), transform var(--mq-dur-base);
  }
  .cp-post:hover .cp-post-thumb { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(139, 92, 246, 0.2); }
  .cp-post.is-selected .cp-post-thumb { border-color: rgba(217, 70, 239, 0.85); box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.25), 0 0 28px rgba(139, 92, 246, 0.3); }
  .cp-post-check {
    position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%;
    display: grid; place-items: center; color: #fff;
    border: 1.5px solid rgba(255,255,255,0.55); background: rgba(0,0,0,0.35);
    transition: all var(--mq-dur-fast);
  }
  .cp-post.is-selected .cp-post-check { background: var(--mq-gradient-brand); border-color: transparent; }
  .cp-post-views {
    position: absolute; bottom: 6px; left: 6px; font-size: 0.625rem; font-weight: 700; color: #fff;
    background: rgba(0,0,0,0.5); border-radius: var(--mq-radius-pill); padding: 0.08rem 0.4rem; white-space: nowrap;
  }
  .cp-post-sug {
    position: absolute; top: 6px; left: 6px; display: inline-flex; align-items: center; gap: 0.2rem;
    font-size: 0.5rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: #fff; background: var(--mq-gradient-brand); border-radius: var(--mq-radius-pill);
    padding: 0.14rem 0.4rem; box-shadow: 0 2px 10px rgba(139, 92, 246, 0.4);
    max-width: calc(100% - 34px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .cp-post-desc {
    font-size: 0.6875rem; color: var(--mq-fg-muted); line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .cp-post-meta { font-size: 0.625rem; color: var(--mq-fg-faint); }
  .cp-post-skel {
    aspect-ratio: 9 / 13; border-radius: var(--mq-radius-lg);
    background: linear-gradient(110deg, rgba(139,92,246,0.08) 30%, rgba(139,92,246,0.18) 50%, rgba(139,92,246,0.08) 70%);
    background-size: 200% 100%;
  }
  @media (prefers-reduced-motion: no-preference) {
    .cp-post-skel { animation: cp-shimmer 1.4s ease infinite; }
  }
  @keyframes cp-shimmer { from { background-position: 120% 0; } to { background-position: -80% 0; } }
  .cp-linklike {
    background: none; border: 0; padding: 0; font: inherit; font-size: inherit; cursor: pointer;
    color: var(--mq-purple); text-decoration: underline; text-underline-offset: 2px;
    align-self: flex-start;
  }
  .cp-linklike:hover { color: var(--mq-fuchsia); }

  /* Step-2 instructions */
  .cp-instructions { list-style: none; padding: 0; margin: 0 0 var(--mq-space-6); display: flex; flex-direction: column; gap: var(--mq-space-2); }
  .cp-instructions li { display: flex; align-items: center; gap: var(--mq-space-3); font-size: var(--mq-small-size); color: var(--mq-fg-muted); }
  .cp-instructions-num {
    flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
    font-size: 0.6875rem; font-weight: 700; color: #fff; background: var(--mq-gradient-brand);
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.4);
  }

  /* Analyzing splash (step 2 fake processing) */
  .cp-analyze { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--mq-space-8) 0 var(--mq-space-6); gap: var(--mq-space-3); }
  .cp-analyze-orb { position: relative; width: 64px; height: 64px; display: grid; place-items: center; color: #fff; margin-bottom: var(--mq-space-2); }
  .cp-analyze-orb svg { position: relative; z-index: 1; filter: drop-shadow(0 0 8px rgba(217,70,239,0.7)); }
  .cp-analyze-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--mq-fuchsia); border-right-color: var(--mq-purple); }
  @media (prefers-reduced-motion: no-preference) { .cp-analyze-ring { animation: cp-spin 0.85s linear infinite; } }
  @keyframes cp-spin { to { transform: rotate(360deg); } }
  .cp-analyze-title { font-size: 1.25rem; max-width: 24ch; }
  .cp-analyze-sub { font-size: var(--mq-small-size); color: var(--mq-fg-quiet); }
  .cp-analyze-steps { list-style: none; padding: 0; margin: var(--mq-space-4) 0 0; display: flex; flex-direction: column; gap: var(--mq-space-2); text-align: left; }
  .cp-analyze-steps li { display: flex; align-items: center; gap: 0.6rem; font-size: var(--mq-small-size); color: var(--mq-fg-faint); transition: color var(--mq-dur-base); }
  .cp-analyze-steps li.is-active { color: var(--mq-fg); }
  .cp-analyze-steps li.is-done { color: var(--mq-fg-muted); }
  .cp-analyze-dot { width: 18px; height: 18px; border-radius: 50%; flex: none; display: grid; place-items: center; border: 1.5px solid var(--mq-border-strong); color: var(--mq-purple); }
  .cp-analyze-steps li.is-active .cp-analyze-dot { border-color: var(--mq-fuchsia); box-shadow: 0 0 10px rgba(217,70,239,0.5); }
  .cp-analyze-steps li.is-done .cp-analyze-dot { background: rgba(168,85,247,0.18); border-color: rgba(168,85,247,0.4); }

  /* Spark code rows reuse .cp-link-list / .cp-link-row */

  /* Email auto-suggest dropdown */
  .cp-suggest-wrap { position: relative; }
  .cp-suggest {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
    display: flex; flex-direction: column; gap: 2px; padding: 0.35rem;
    border-radius: var(--mq-radius-lg); border: 1px solid rgba(168, 85, 247, 0.35);
    background: #160f1f; box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55), 0 0 30px rgba(139, 92, 246, 0.15);
  }
  .cp-suggest-item {
    display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.6rem;
    background: none; border: 0; border-radius: var(--mq-radius-md); cursor: pointer;
    font: inherit; color: var(--mq-fg-muted); text-align: left;
    transition: background-color var(--mq-dur-fast);
  }
  .cp-suggest-item:hover { background: rgba(168, 85, 247, 0.14); }
  .cp-suggest-avatar {
    flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    background: var(--mq-gradient-brand); color: #fff; font-weight: 800; font-size: 0.6875rem;
  }
  .cp-suggest-text { display: flex; flex-direction: column; line-height: 1.25; }
  .cp-suggest-text strong { color: var(--mq-fg); font-size: 0.875rem; }
  .cp-suggest-text span { color: var(--mq-fg-quiet); font-size: 0.75rem; }
  .cp-autofill { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--mq-purple); }

  /* Payment header: payout chip + avatar */
  .cp-intro-right { display: flex; align-items: center; gap: var(--mq-space-4); }
  .cp-payout {
    display: inline-flex; align-items: baseline; gap: 0.5rem; white-space: nowrap;
    padding: 0.5rem 1rem; border-radius: var(--mq-radius-pill);
    border: 1px solid rgba(168, 85, 247, 0.35); background: rgba(168, 85, 247, 0.1);
    font-size: var(--mq-tiny-size); font-weight: 600; letter-spacing: var(--mq-eyebrow-track);
    text-transform: uppercase; color: var(--mq-fg-quiet);
  }
  .cp-payout strong {
    font-size: 1.25rem; letter-spacing: 0; font-weight: 800;
    background: var(--mq-gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  }

  /* W-9 tabs + embedded sign panel */
  .cp-w9-tabs { display: flex; gap: var(--mq-space-2); margin-bottom: var(--mq-space-4); }
  .cp-w9-tab {
    display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer;
    padding: 0.55rem 1.1rem; border-radius: var(--mq-radius-pill); font: inherit; font-size: var(--mq-small-size); font-weight: 600;
    background: rgba(255,255,255,0.04); border: 1px solid var(--mq-border-strong); color: var(--mq-fg-quiet);
    transition: all var(--mq-dur-fast); white-space: nowrap;
  }
  .cp-w9-tab.is-active { background: rgba(168, 85, 247, 0.14); border-color: rgba(168, 85, 247, 0.55); color: var(--mq-fg); }
  .cp-sign {
    border: 1px solid rgba(168, 85, 247, 0.3); border-radius: var(--mq-radius-lg);
    background: rgba(10, 8, 14, 0.55); padding: var(--mq-space-5); margin-bottom: var(--mq-space-2);
  }
  .cp-sign-head { display: flex; align-items: center; justify-content: space-between; gap: var(--mq-space-3); margin-bottom: var(--mq-space-4); }
  .cp-sign-brand { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--mq-small-size); font-weight: 700; color: var(--mq-fg); white-space: nowrap; }
  .cp-sign-power { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.6875rem; color: var(--mq-fg-faint); white-space: nowrap; }
  .cp-sign-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--mq-space-4); }
  @media (max-width: 720px) { .cp-sign-grid { grid-template-columns: 1fr; } }
  .cp-sign-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--mq-space-4); margin-top: var(--mq-space-2); }
  .cp-sign-cert { font-size: 0.6875rem; color: var(--mq-fg-faint); max-width: 46ch; }
  .cp-sign-complete {
    display: flex; align-items: center; gap: var(--mq-space-3);
    border-color: rgba(16, 185, 129, 0.4); background: rgba(16, 185, 129, 0.07);
    color: var(--mq-fg-muted); font-size: var(--mq-small-size);
  }
  .cp-sign-complete svg { color: var(--mq-success-pulse); flex: none; }
  .cp-sign-complete strong { color: var(--mq-fg); }

  /* Centered step-1 greeting (no byline) */
  .cp-intro-center { text-align: center; margin-bottom: var(--mq-space-6); }
  .cp-intro-center:empty { display: none; }
  .cp-payout-hero {
    font-size: 2.1rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em;
    color: #fff;
    text-shadow: 0 0 18px rgba(168, 85, 247, 0.55), 0 0 6px rgba(217, 70, 239, 0.4);
  }

  /* Step intro header (greeting left, profile picture top right) */
  .cp-intro-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--mq-space-4); margin-bottom: var(--mq-space-6); min-height: 40px; }
  .cp-intro { display: flex; align-items: center; gap: var(--mq-space-4); }
  .cp-intro-title { font-size: 1.375rem; line-height: 1.2; }
  .cp-intro-sub { font-size: var(--mq-small-size); color: var(--mq-fg-quiet); margin-top: 0.15rem; }
  .cp-avatar-img { border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.5), 0 0 18px rgba(139, 92, 246, 0.35); }
  image-slot { border-radius: 50%; box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.5), 0 0 18px rgba(139, 92, 246, 0.35); overflow: hidden; }
  .cp-intro-row .cp-greet-avatar { box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.5), 0 0 18px rgba(139, 92, 246, 0.35); }

  /* Greeting (creator matched from the sheet) */
  .cp-greet {
    display: flex; align-items: center; gap: var(--mq-space-3);
    padding: var(--mq-space-3) var(--mq-space-4); margin: calc(-1 * var(--mq-space-2)) 0 var(--mq-space-5);
    border: 1px solid rgba(168, 85, 247, 0.3); border-radius: var(--mq-radius-lg);
    background: rgba(168, 85, 247, 0.08);
  }
  .cp-greet-avatar {
    flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
    background: var(--mq-gradient-brand); color: #fff; font-weight: 800; font-size: 0.8125rem;
    box-shadow: 0 0 14px rgba(139, 92, 246, 0.35);
  }
  .cp-greet-text { font-size: var(--mq-small-size); color: var(--mq-fg-muted); }
  .cp-greet-text strong { color: var(--mq-fg); }

  /* Success */
  .cp-success { text-align: center; padding: var(--mq-space-6) 0 var(--mq-space-2); display: flex; flex-direction: column; align-items: center; gap: var(--mq-space-4); }
  .cp-success-ring {
    width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: #fff;
    background: var(--mq-gradient-brand); box-shadow: var(--mq-glow-violet);
  }
  /* Pop-in is additive (fill-mode none): the resting state is always visible —
     print, reduced motion, throttled iframes, DOM-clone screenshots all show it. */
  @media (prefers-reduced-motion: no-preference) {
    .cp-success.is-in .cp-success-ring { animation: cp-pop 0.55s var(--mq-ease-out-expo); animation-fill-mode: none; }
  }
  @keyframes cp-pop { from { transform: scale(0.4); } to { transform: scale(1); } }
  .cp-success-title { font-size: 1.5rem; }
  .cp-success-body p { max-width: 40ch; font-size: var(--mq-small-size); }
  .cp-receipt {
    list-style: none; padding: var(--mq-space-4) var(--mq-space-5); margin: 0 auto var(--mq-space-4);
    text-align: left; display: flex; flex-direction: column; gap: var(--mq-space-2);
    border: 1px solid var(--mq-border); border-radius: var(--mq-radius-lg); background: rgba(255,255,255,0.03);
  }
  .cp-receipt li { display: flex; align-items: baseline; gap: var(--mq-space-2); font-size: var(--mq-small-size); color: var(--mq-fg-muted); }
  .cp-receipt li svg { color: var(--mq-success); flex: none; transform: translateY(2px); }
  .cp-receipt li strong { color: var(--mq-fg); }

  /* Demo hint + footer */
  .cp-demo-hint {
    display: inline-block; margin: var(--mq-space-5) auto 0;
    padding: 0.4rem 1rem; border-radius: var(--mq-radius-pill);
    border: 1px dashed rgba(168, 85, 247, 0.35); background: rgba(168, 85, 247, 0.06);
    font-size: var(--mq-tiny-size); color: var(--mq-fg-quiet); max-width: 56ch; text-align: center; line-height: 1.6;
  }
  .cp-demo-hint code { color: var(--mq-purple); font-family: ui-monospace, Menlo, monospace; font-size: 0.7rem; }
  .cp-footer[hidden] { display: none; }
  .cp-footer { margin-top: var(--mq-space-20); text-align: center; }
  .cp-footer-rule { height: 1px; border: 0; background: linear-gradient(90deg, transparent, rgba(139,92,246,0.25), rgba(217,70,239,0.18), rgba(139,92,246,0.25), transparent); margin-bottom: var(--mq-space-6); }
  .cp-footer p { font-size: 0.8125rem; color: var(--mq-fg-faint); }
  .cp-footer a { color: var(--mq-fg-quiet); text-decoration: none; }
  .cp-footer a:hover { color: var(--mq-purple); }
  .cp-home-center { display: flex; flex-direction: column; align-items: center; }