/* ============================================================
   MageMate — Features page visuals (extends homepage.css)
   Pipeline (RAG) · Timeline (handover) · Lang demo (multilingual)
   ============================================================ */

/* ---------- page header ---------- */
.page-head{position:relative; overflow:hidden; padding:clamp(52px,7vw,104px) 0 clamp(36px,5vw,64px);}
.page-head::before{content:""; position:absolute; inset:0; background:var(--grad-teal-soft); opacity:.55; z-index:-2;}
.page-head::after{content:""; position:absolute; inset:0; background:var(--grad-ai-glow); z-index:-1;}
.page-head .lead{margin-top:20px;}
.feat-jump{display:flex; gap:10px; flex-wrap:wrap; margin-top:30px;}
.feat-jump a{text-decoration:none; white-space:nowrap;}

/* section eyebrow index number on deep features already handled by .eyebrow */

/* ---------- RAG pipeline ---------- */
.pipeline{display:flex; flex-direction:column; gap:12px;}
.pl-cap{font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); text-align:center;}
.pl-sources{display:flex; gap:8px; flex-wrap:wrap; justify-content:center;}
.pl-source{font-family:var(--font-mono); font-size:12px; padding:8px 13px; border-radius:9px;
  background:var(--color-primary-light); color:var(--color-primary-dark); border:1px solid color-mix(in srgb,var(--color-primary) 18%,transparent);}
.pl-arrow{display:flex; justify-content:center; color:var(--color-primary); opacity:.7;}
.pl-node{display:flex; align-items:center; justify-content:center; gap:10px; padding:14px 16px; font-weight:600;
  color:var(--text-primary); background:var(--surface-raised); border:1px solid var(--border-subtle); border-radius:var(--r-md); box-shadow:var(--shadow-sm);}
.pl-answer{background:var(--surface-raised); border:1px solid var(--border-subtle); border-radius:var(--r-md); box-shadow:var(--shadow-md); padding:14px 16px;}
.pl-answer .a-txt{font-size:.92rem; color:var(--text-primary); line-height:1.5;}
.pl-answer .src{display:flex; gap:6px; margin-top:10px; flex-wrap:wrap;}

/* ---------- handover timeline ---------- */
.timeline{position:relative; display:flex; flex-direction:column; gap:0; padding-left:6px;}
.tl-item{position:relative; display:grid; grid-template-columns:26px 1fr; gap:16px; padding:0 0 26px 0;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{content:""; position:absolute; left:12px; top:18px; bottom:-8px; width:2px; background:var(--border-default);}
.tl-item:last-child::before{display:none;}
.tl-dot{width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--color-primary-light); color:var(--color-primary-dark); z-index:1; margin-top:2px;}
.tl-item.switch .tl-dot{background:var(--color-ai-tint); color:var(--color-ai);}
.tl-item.human .tl-dot{background:var(--grad-teal); color:#fff;}
.tl-k{font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted);}
.tl-t{font-weight:600; color:var(--text-primary); margin-top:3px;}
.tl-bubble{margin-top:9px; display:inline-block; max-width:100%; padding:10px 13px; font-size:.88rem; line-height:1.45;
  border-radius:13px; border-bottom-left-radius:4px; background:var(--surface-sunken); border:1px solid var(--border-subtle); color:var(--text-primary);}
.tl-item.switch .tl-t{color:var(--color-ai);}

/* ---------- multilingual demo ---------- */
.lang-rows{display:flex; flex-direction:column; gap:10px;}
.lang-row{display:flex; align-items:center; gap:13px; padding:13px 15px; background:var(--surface-raised);
  border:1px solid var(--border-subtle); border-radius:var(--r-md); box-shadow:var(--shadow-sm);}
.lang-tag{font-family:var(--font-mono); font-size:11px; font-weight:500; width:30px; flex:0 0 auto;
  color:var(--color-primary-dark); background:var(--color-primary-light); border-radius:6px; padding:4px 0; text-align:center;}
.lang-q{flex:1; font-size:.92rem; color:var(--text-secondary); min-width:0;}
.lang-ok{display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:11px; color:var(--color-primary-dark); flex:0 0 auto;}
.lang-ok .live{width:7px; height:7px; border-radius:50%; background:var(--color-primary);}

/* ---------- alternate band tint for rhythm ---------- */
.band-tint{background:var(--surface-sunken); border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle);}

@media (max-width:600px){
  .lang-ok span:not(.live){display:none;}
}