/* ============================================
   PLATFORM PAGE — extends style.css
   ============================================ */

.platform-hero{ padding: 88px 0 0; text-align:center; }
.platform-title{ max-width: 680px; margin: 0 auto 20px; }
.platform-sub{ max-width: 580px; margin: 0 auto; color: var(--text-mid); font-size: 16.5px; }
.platform-sub code{ font-family: var(--font-mono); background: var(--mint); color: var(--green-dim); padding: 2px 6px; border-radius: 4px; font-size: 13.5px; }

.feature-jump{
  display:flex; justify-content:center; gap: 6px; flex-wrap:wrap; margin-top: 48px;
  padding: 16px 32px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.feature-jump a{
  font-size: 13.5px; font-weight: 600; color: var(--text-mid); padding: 8px 16px; border-radius: 999px; transition: all .15s;
}
.feature-jump a:hover{ color: var(--green-dim); background: var(--mint); }

/* alternating feature rows */
.feature-row{ padding: 100px 0; background: var(--paper); }
.feature-row--tint{ background: var(--paper-2); }
.feature-row-inner{ display:grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items:center; }
.feature-row--reverse .feature-row-inner{ direction: rtl; }
.feature-row--reverse .feature-copy, .feature-row--reverse .feature-visual{ direction: ltr; }
.feature-copy h2{ font-size: clamp(24px, 3vw, 32px); font-weight:600; line-height:1.2; margin: 6px 0 18px; letter-spacing: -0.01em; color: var(--ink); }
.feature-lead{ color: var(--text-mid); font-size: 16px; margin-bottom: 24px; max-width: 460px; }
.feature-lead code{ font-family: var(--font-mono); background: var(--mint); color: var(--green-dim); padding: 1px 5px; border-radius: 4px; font-size: 13.5px; }
.feature-list{ display:flex; flex-direction:column; gap: 12px; }
.feature-list li{ position:relative; padding-left: 22px; font-size: 15px; color: var(--ink); }
.feature-list li::before{ content:"—"; position:absolute; left:0; color: var(--green-dim); }

/* generic mock frame — dark-green card, echoing the product's own dashboard panels */
.mock-frame{
  background: var(--ink-2); border: 1px solid var(--on-dark-line); border-radius: 18px; overflow:hidden;
  box-shadow: 0 30px 70px rgba(16,30,20,.25);
}
.mock-toolbar{ display:flex; gap:6px; padding: 14px 16px; border-bottom: 1px solid var(--on-dark-line); }
.mock-toolbar span{ width:9px;height:9px;border-radius:50%; background: var(--on-dark-mid); opacity:.4; }
.mock-toolbar span:nth-child(1){ background: var(--coral); opacity:.7; }
.mock-toolbar span:nth-child(2){ background: var(--green); opacity:.8; }
.mock-toolbar span:nth-child(3){ background: var(--teal); opacity:.8; }

/* inbox mock */
.mock-inbox-body{ padding: 16px; display:flex; flex-direction:column; gap:8px; }
.mock-thread{ display:flex; align-items:center; gap:12px; padding: 12px; border-radius: 12px; }
.mock-thread--active{ background: rgba(47,168,84,0.12); border: 1px solid rgba(47,168,84,0.3); }
.mock-avatar{ width:34px;height:34px;border-radius:50%; background: var(--teal); color:#fff; font-size:11.5px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.mock-thread-text{ display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; }
.mock-thread-text strong{ font-size: 13.5px; color: var(--on-dark); }
.mock-thread-text span{ font-size: 12.5px; color: var(--on-dark-mid); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mock-tag{ font-family: var(--font-mono); font-size: 10.5px; background: rgba(47,168,84,0.2); color: #7FD99B; padding: 4px 10px; border-radius: 999px; flex-shrink:0; }
.mock-tag--muted{ background: rgba(255,255,255,0.06); color: var(--on-dark-mid); }

/* flow diagram */
.flow-svg{ width:100%; height:220px; display:block; }
.flow-node{ fill: var(--ink); stroke: var(--on-dark-line); stroke-width:1; }
.flow-node--start{ fill: rgba(47,168,84,0.18); stroke: var(--green); }
.flow-node--cond{ fill: rgba(255,255,255,0.05); }
.flow-node--assign{ fill: rgba(61,139,99,0.3); stroke: var(--teal); }
.flow-node--tmpl{ fill: rgba(214,90,69,0.18); stroke: var(--coral); }
.flow-label{ fill: var(--on-dark); font-family: var(--font-mono); font-size: 11px; }
.flow-edge{ stroke: var(--on-dark-mid); stroke-width: 1.5; fill:none; }
.mock-frame--flow{ padding-bottom: 8px; }

/* AI mock */
.mock-ai-body{ padding: 22px; display:flex; flex-direction:column; gap: 12px; }
.mock-ai-msg{ font-size: 13.5px; padding: 10px 14px; border-radius: 12px; max-width: 85%; }
.mock-ai-msg--in{ background: rgba(255,255,255,0.06); align-self:flex-start; color: var(--on-dark); }
.mock-ai-msg--out{ background: var(--green); color: #fff; align-self:flex-end; font-weight:500; }
.mock-ai-tool{ font-family: var(--font-mono); font-size: 11.5px; color: #7FD99B; align-self:flex-start; padding-left: 4px; }
.mock-ai-tool code{ background: rgba(61,139,99,0.25); padding: 2px 6px; border-radius: 4px; }

/* channel orbit */
.channel-orbit{ position:relative; height: 320px; display:flex; align-items:center; justify-content:center; }
.channel-center{
  width: 140px; height: 140px; border-radius:50%; background: var(--ink-2); border: 1px solid var(--green);
  display:flex; align-items:center; justify-content:center; text-align:center; font-weight:600; font-size:14px;
  color: var(--on-dark);
  box-shadow: 0 0 0 1px rgba(47,168,84,0.2), 0 20px 50px rgba(16,30,20,.3); z-index:2;
}
.channel-node{
  position:absolute; background: var(--ink-2); border: 1px solid var(--on-dark-line); border-radius: 999px;
  padding: 10px 18px; font-size: 13px; font-weight:600; color: var(--on-dark-mid);
}
.channel-node--1{ top: 6%; left: 8%; }
.channel-node--2{ bottom: 10%; left: 4%; }
.channel-node--3{ top: 4%; right: 6%; }
.channel-node--4{ bottom: 8%; right: 2%; }
.channel-node--soon{ opacity: .6; border-style: dashed; }
.channel-node--soon::after{ content:" · soon"; font-family: var(--font-mono); font-size: 10px; }

/* drip mock */
.drip-body{ padding: 26px; }
.drip-step{ display:flex; align-items:center; gap:12px; font-size: 13.5px; color: var(--on-dark); }
.drip-step--muted{ color: var(--on-dark-mid); }
.drip-dot{ width:9px; height:9px; border-radius:50%; background: var(--green); flex-shrink:0; }
.drip-step--muted .drip-dot{ background: var(--on-dark-mid); }
.drip-connector{ width:1px; height: 26px; background: var(--on-dark-line); margin-left: 4px; }

/* admin mock */
.mock-admin-body{ padding: 16px; display:flex; flex-direction:column; gap:8px; }
.mock-admin-row{ display:flex; justify-content:space-between; align-items:center; padding: 14px 16px; border-radius: 10px; background: rgba(255,255,255,0.04); font-size: 13.5px; color: var(--on-dark); }
.mock-admin-row--ghost{ border: 1px dashed var(--on-dark-line); background:none; color: var(--on-dark-mid); }
.mock-status{ font-family: var(--font-mono); font-size: 10.5px; padding: 4px 10px; border-radius: 999px; }
.mock-status--live{ background: rgba(61,139,99,0.3); color: #7FD99B; }
.mock-status--pending{ background: rgba(47,168,84,0.2); color: #7FD99B; }

@media (max-width: 900px){
  .feature-row-inner{ grid-template-columns: 1fr; direction: ltr !important; }
  .feature-row--reverse .feature-visual{ order:-1; }
}