/* =================================================================
   AIM DEV · Connect Methods · Shared styles for method-2..8
   (uses variables from demo-base.css)
================================================================= */

.pw{max-width:1100px;margin:2rem auto;padding:0 1.25rem}

/* ─ Hero ─ */
.hero-connect{text-align:center;padding:3rem 1rem 2rem}
.hero-tag{
  display:inline-block;background:rgba(99,102,241,.1);border:1px solid var(--aim-p);
  color:var(--aim-p);padding:.35rem 1rem;border-radius:50px;
  font-size:.78rem;font-weight:700;letter-spacing:.5px;margin-bottom:1rem;text-transform:uppercase;
}
.hero-connect h1{
  font-size:clamp(2rem,4vw,2.8rem);font-weight:800;line-height:1.2;
  margin-bottom:.75rem;background:linear-gradient(135deg,var(--aim-p),var(--aim-s));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.hero-connect .lede{color:var(--aim-muted);font-size:1.1rem;max-width:680px;margin:0 auto 1.5rem}
.hero-stats{display:flex;justify-content:center;gap:2.5rem;flex-wrap:wrap;margin-top:1.5rem}
.hero-stat{text-align:center}
.hero-stat .v{font-size:1.8rem;font-weight:800;color:var(--aim-green)}
.hero-stat .l{font-size:.8rem;color:var(--aim-muted);text-transform:uppercase;letter-spacing:.4px}

/* ─ Section title ─ */
.sec-title{
  font-size:1.5rem;font-weight:700;margin:3rem 0 .3rem;display:flex;align-items:center;gap:.6rem;
}
.sec-title .num{
  display:grid;place-items:center;width:34px;height:34px;
  background:linear-gradient(135deg,var(--aim-p),var(--aim-s));color:#fff;
  border-radius:10px;font-size:.95rem;font-weight:800;
}
.sec-sub{color:var(--aim-muted);margin-bottom:1.5rem;font-size:.95rem}

/* ─ Generic cards ─ */
.c-card{
  background:var(--aim-card);border:1px solid var(--aim-border);
  border-radius:16px;padding:1.5rem;transition:var(--aim-trans);
}
.c-card:hover{border-color:var(--aim-border2)}
.c-grid{display:grid;gap:1rem}
.c-grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.c-grid-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.c-grid-4{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}

/* ─ Steps / How it works ─ */
.steps{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.step-box{
  background:var(--aim-card);border:1px solid var(--aim-border);border-radius:14px;
  padding:1.5rem;position:relative;
}
.step-box .step-n{
  position:absolute;top:-14px;left:1.5rem;
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,var(--aim-p),var(--aim-s));color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:.9rem;
}
.step-box h4{margin:.5rem 0 .5rem;font-size:1rem}
.step-box p{color:var(--aim-muted);font-size:.88rem;line-height:1.6}

/* ─ Code block ─ */
.codeblock{
  background:#050510;border:1px solid var(--aim-border);border-radius:10px;
  padding:1.1rem 1.3rem;font-family:'JetBrains Mono','Fira Code',monospace;
  font-size:.85rem;line-height:1.65;color:#e2e8f0;overflow-x:auto;
  position:relative;margin:.75rem 0;
}
.codeblock .tok-tag{color:#ec4899}
.codeblock .tok-attr{color:#14b8a6}
.codeblock .tok-str{color:#fbbf24}
.codeblock .tok-com{color:#64748b;font-style:italic}
.codeblock .tok-key{color:#a855f7}
.copy-btn{
  position:absolute;top:.6rem;right:.6rem;
  background:rgba(255,255,255,.05);border:1px solid var(--aim-border);
  color:var(--aim-muted);padding:.3rem .7rem;border-radius:6px;font-size:.75rem;
  cursor:pointer;font-family:inherit;transition:var(--aim-trans);
}
.copy-btn:hover{background:rgba(255,255,255,.1);color:var(--aim-txt);border-color:var(--aim-p)}
.copy-btn.copied{background:var(--aim-green);color:#fff;border-color:var(--aim-green)}

/* ─ Feature pills ─ */
.feat-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.8rem;margin:1rem 0}
.feat{
  display:flex;align-items:flex-start;gap:.6rem;
  background:var(--aim-card);border:1px solid var(--aim-border);
  border-radius:10px;padding:.9rem 1rem;
}
.feat-icon{
  flex-shrink:0;width:32px;height:32px;border-radius:8px;
  display:grid;place-items:center;font-size:1rem;
  background:linear-gradient(135deg,rgba(99,102,241,.15),rgba(236,72,153,.1));
  border:1px solid var(--aim-p);
}
.feat-text{font-size:.88rem}
.feat-text strong{display:block;margin-bottom:.1rem;color:var(--aim-txt)}
.feat-text span{color:var(--aim-muted);font-size:.82rem}

/* ─ Pricing row ─ */
.pricing-box{
  background:linear-gradient(135deg,rgba(99,102,241,.06),rgba(236,72,153,.04));
  border:1px solid var(--aim-p);border-radius:16px;padding:1.75rem;margin:1.5rem 0;
}
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}
.pricing-item{text-align:center}
.pricing-label{font-size:.75rem;color:var(--aim-muted);text-transform:uppercase;letter-spacing:.5px}
.pricing-value{font-size:1.8rem;font-weight:800;color:var(--aim-txt);margin:.25rem 0}
.pricing-sub{font-size:.78rem;color:var(--aim-dim)}

/* ─ CTA bottom ─ */
.cta-bottom{
  text-align:center;padding:3rem 1.5rem;margin:3rem 0 1rem;
  background:linear-gradient(135deg,rgba(99,102,241,.08),rgba(236,72,153,.05));
  border:1px solid var(--aim-p);border-radius:20px;
}
.cta-bottom h2{font-size:1.6rem;margin-bottom:.5rem}
.cta-bottom p{color:var(--aim-muted);margin-bottom:1.5rem}
.cta-bottom .btn-row{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}

/* ─ Tier badge ─ */
.tier-pill{
  display:inline-block;padding:.2rem .65rem;border-radius:50px;
  font-size:.72rem;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
}
.tier-pill.t1{background:rgba(16,185,129,.15);color:var(--t1-color);border:1px solid var(--t1-color)}
.tier-pill.t2{background:rgba(20,184,166,.15);color:var(--t2-color);border:1px solid var(--t2-color)}
.tier-pill.t3{background:rgba(251,191,36,.15);color:var(--t3-color);border:1px solid var(--t3-color)}
.tier-pill.t4{background:rgba(245,158,11,.15);color:var(--t4-color);border:1px solid var(--t4-color)}
.tier-pill.t5{background:rgba(168,85,247,.15);color:var(--t5-color);border:1px solid var(--t5-color)}

/* ─ Interactive demo containers ─ */
.interactive-box{
  background:var(--aim-card);border:1px solid var(--aim-border);border-radius:16px;
  padding:1.5rem;margin:1rem 0;
}
.interactive-box h3{margin-bottom:.8rem;font-size:1.1rem}

/* ─ Social Hub: unified inbox ─ */
.inbox{display:grid;grid-template-columns:240px 1fr;gap:1rem;min-height:420px}
@media(max-width:700px){.inbox{grid-template-columns:1fr}}
.inbox-list{background:var(--aim-bg);border:1px solid var(--aim-border);border-radius:10px;overflow:hidden}
.inbox-item{padding:.85rem 1rem;border-bottom:1px solid var(--aim-border);cursor:pointer;transition:var(--aim-trans);display:flex;gap:.6rem;align-items:flex-start}
.inbox-item:last-child{border-bottom:0}
.inbox-item:hover,.inbox-item.active{background:rgba(99,102,241,.08)}
.inbox-item .ch{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:.8rem;font-weight:700;flex-shrink:0}
.inbox-item .ch.line{background:#06c755}
.inbox-item .ch.fb{background:#1877f2}
.inbox-item .ch.ig{background:linear-gradient(135deg,#e1306c,#f77737,#fcaf45)}
.inbox-item .ch.shop{background:#ee4d2d}
.inbox-item .n{font-size:.85rem;font-weight:700;margin-bottom:.15rem}
.inbox-item .m{font-size:.78rem;color:var(--aim-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inbox-detail{background:var(--aim-bg);border:1px solid var(--aim-border);border-radius:10px;padding:1rem;display:flex;flex-direction:column}
.inbox-msgs{flex:1;overflow-y:auto;max-height:340px}
.bubble{padding:.6rem .85rem;border-radius:10px;margin-bottom:.5rem;max-width:75%;font-size:.85rem;line-height:1.45}
.bubble.left{background:rgba(255,255,255,.06);border:1px solid var(--aim-border)}
.bubble.right{background:linear-gradient(135deg,var(--aim-p),var(--aim-s));color:#fff;margin-left:auto}
.bubble.ai{background:linear-gradient(135deg,rgba(16,185,129,.12),rgba(20,184,166,.08));border:1px solid var(--aim-green);color:var(--aim-green)}

/* ─ API Playground ─ */
.api-box{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:800px){.api-box{grid-template-columns:1fr}}
.api-req,.api-res{background:var(--aim-bg);border:1px solid var(--aim-border);border-radius:10px;padding:1rem}
.api-req h4,.api-res h4{font-size:.85rem;text-transform:uppercase;letter-spacing:.5px;color:var(--aim-muted);margin-bottom:.6rem}
.api-endpoint{background:#050510;padding:.6rem .85rem;border-radius:6px;font-family:'JetBrains Mono',monospace;font-size:.8rem;color:var(--aim-green);margin-bottom:.6rem}
.api-endpoint .m{color:#ec4899;font-weight:700}
.api-run{background:linear-gradient(135deg,var(--aim-p),var(--aim-s));color:#fff;border:none;padding:.55rem 1.2rem;border-radius:8px;font-weight:700;cursor:pointer;font-family:inherit;font-size:.85rem;width:100%;margin-top:.5rem}
.api-run:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(99,102,241,.3)}
.api-json{font-family:'JetBrains Mono',monospace;font-size:.78rem;line-height:1.6;color:#e2e8f0;white-space:pre-wrap;word-break:break-all;min-height:180px}

/* ─ iPaaS workflow ─ */
.flow-chain{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;justify-content:center;padding:1rem;background:var(--aim-bg);border:1px solid var(--aim-border);border-radius:12px}
.flow-node{background:var(--aim-card);border:2px solid var(--aim-border);border-radius:12px;padding:.85rem 1rem;min-width:140px;text-align:center;transition:var(--aim-trans)}
.flow-node.trigger{border-color:var(--aim-green)}
.flow-node.action{border-color:var(--aim-p)}
.flow-node.ai{border-color:var(--aim-gold);background:linear-gradient(135deg,rgba(251,191,36,.08),rgba(245,158,11,.05))}
.flow-node .ic{font-size:1.6rem;margin-bottom:.3rem}
.flow-node .tt{font-size:.85rem;font-weight:700}
.flow-node .dd{font-size:.72rem;color:var(--aim-muted)}
.flow-arrow{color:var(--aim-dim);font-size:1.3rem}

/* ─ Plugin cards ─ */
.plugin-card{
  background:var(--aim-card);border:1px solid var(--aim-border);border-radius:14px;
  padding:1.5rem;text-align:center;transition:var(--aim-trans);position:relative
}
.plugin-card:hover{border-color:var(--aim-p);transform:translateY(-4px)}
.plugin-logo{font-size:2.5rem;margin-bottom:.6rem}
.plugin-card h4{margin-bottom:.3rem}
.plugin-card .v{color:var(--aim-muted);font-size:.8rem;margin-bottom:.8rem}
.plugin-card .install{display:inline-block;background:linear-gradient(135deg,var(--aim-green),var(--aim-teal));color:#fff;padding:.45rem .9rem;border-radius:8px;font-size:.82rem;font-weight:700;text-decoration:none}

/* ─ Starter site builder ─ */
.builder-form{max-width:600px;margin:0 auto}
.builder-form .form-group{margin-bottom:1rem}
.builder-form label{display:block;font-size:.85rem;color:var(--aim-muted);margin-bottom:.4rem;font-weight:600}
.builder-form input,.builder-form select,.builder-form textarea{
  width:100%;padding:.75rem .95rem;background:var(--aim-bg);
  border:1px solid var(--aim-border);border-radius:10px;color:var(--aim-txt);font-family:inherit
}
.builder-form input:focus,.builder-form select:focus,.builder-form textarea:focus{outline:none;border-color:var(--aim-p)}
.preview-site{
  background:#fff;color:#0a0a0f;border-radius:10px;overflow:hidden;
  border:1px solid var(--aim-border);min-height:400px;font-family:-apple-system,sans-serif;
}
.preview-site .ph-nav{background:#1e293b;color:#fff;padding:.8rem 1.2rem;display:flex;justify-content:space-between;font-size:.82rem}
.preview-site .ph-hero{padding:2.5rem 1.5rem;text-align:center;background:linear-gradient(135deg,#6366f1,#ec4899);color:#fff}
.preview-site .ph-hero h1{font-size:1.6rem;margin-bottom:.5rem}
.preview-site .ph-body{padding:1.2rem}
.preview-site .ph-body h3{color:#0a0a0f;font-size:1rem;margin-bottom:.5rem}
.preview-site .ph-body p{color:#475569;font-size:.85rem;margin-bottom:.8rem}

/* ─ Enterprise checklist ─ */
.checklist{display:grid;gap:.6rem}
.check-item{
  display:grid;grid-template-columns:28px 1fr auto;gap:.75rem;align-items:center;
  background:var(--aim-card);border:1px solid var(--aim-border);border-radius:10px;
  padding:.85rem 1.1rem;
}
.check-icon{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--aim-green);color:#fff;font-size:.75rem;font-weight:700}
.check-name{font-weight:700;font-size:.92rem}
.check-desc{font-size:.78rem;color:var(--aim-muted);margin-top:.15rem}
.check-cert{background:rgba(168,85,247,.15);color:var(--aim-purple);border:1px solid var(--aim-purple);padding:.2rem .6rem;border-radius:50px;font-size:.68rem;font-weight:700}

/* ─ Tabs ─ */
.tab-bar{display:flex;gap:.4rem;border-bottom:1px solid var(--aim-border);margin-bottom:1rem;overflow-x:auto}
.tab-btn{background:transparent;border:none;color:var(--aim-muted);padding:.7rem 1.2rem;cursor:pointer;font-family:inherit;font-size:.88rem;border-bottom:2px solid transparent;transition:var(--aim-trans);white-space:nowrap}
.tab-btn.active{color:var(--aim-p);border-bottom-color:var(--aim-p);font-weight:700}
.tab-pane{display:none}
.tab-pane.active{display:block;animation:fadeIn .3s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}