/* ============================================================
   service-pages.css — bespoke, per-page signature components.
   Each service page gets its OWN hero-adjacent component so the
   pages stop reading as homepage clones. Built on the warm-theme
   tokens (--green/--ink/--sub/--card/--fb-shadow). No gradients.
   ============================================================ */

.svc-stage{ max-width:980px; margin:38px auto 0; }
.svc-card-base{ background:var(--card,#fff); border:1px solid rgba(28,30,36,.08);
  border-radius:var(--fb-radius,14px); box-shadow:var(--fb-shadow); }

/* status pill shared */
.svc-tag{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600;
  padding:5px 11px; border-radius:999px; white-space:nowrap; line-height:1; }
.svc-tag-stuck{ color:#9A5B00; background:#FBF0DC; }
.svc-tag-hold{ color:#1F5FA8; background:#E6EFF9; }
.svc-tag-fraud{ color:#B5392F; background:#FBE7E5; }
.svc-tag-age{ color:#5B4399; background:#EFEAFA; }
.svc-tag-ok{ color:var(--green-d,#1F7A6F); background:var(--green-soft,#E4F4F1); }

/* ---------- COMMERCE OPS: live operations board ------------- */
.svc-board{ overflow:hidden; }
.svc-board, .svc-stock-card, .svc-flow-wrap, .svc-chat{ /* share base */ }
.svc-board, .svc-chat{ background:var(--card,#fff); border:1px solid rgba(28,30,36,.08);
  border-radius:var(--fb-radius,14px); box-shadow:var(--fb-shadow); }
.svc-board-bar{ display:flex; align-items:center; gap:14px; padding:16px 22px;
  background:var(--green-soft,#E4F4F1); border-bottom:1px solid rgba(28,30,36,.07); }
.svc-live{ display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:13px;
  letter-spacing:.04em; text-transform:uppercase; color:var(--green-d,#1F7A6F); }
.svc-live-dot{ display:none; }
@keyframes svc-pulse{ 0%{box-shadow:0 0 0 0 rgba(43,158,143,.45)} 70%{box-shadow:0 0 0 9px rgba(43,158,143,0)} 100%{box-shadow:0 0 0 0 rgba(43,158,143,0)} }
.svc-board-title{ font-weight:700; color:var(--ink,#1C1E24); }
.svc-board-count{ margin-left:auto; font-size:13px; color:var(--sub,#6E727B); font-weight:500; }
.svc-board-row{ display:flex; align-items:center; gap:16px; padding:16px 22px;
  border-bottom:1px solid rgba(28,30,36,.06); }
.svc-board-row:last-child{ border-bottom:0; }
.svc-oid{ font-family:"SFMono-Regular",ui-monospace,Menlo,monospace; font-size:14px;
  font-weight:600; color:var(--ink,#1C1E24); min-width:74px; }
.svc-issue{ flex:1; min-width:0; color:var(--sub,#6E727B); font-size:14.5px; }
.svc-go{ color:#B7BBC2; font-weight:700; }
@media (max-width:560px){ .svc-board-row{ flex-wrap:wrap; gap:8px } .svc-issue{ flex-basis:100% } }

/* ---------- INVENTORY: stock / forecast panel -------------- */
.svc-stock{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; max-width:1040px; margin:38px auto 0; }
.svc-stock-card{ background:var(--card,#fff); border:1px solid rgba(28,30,36,.08);
  border-radius:var(--fb-radius,14px); box-shadow:var(--fb-shadow); padding:22px 22px 24px; }
.svc-stock-card.svc-alert{ border-color:rgba(181,57,47,.30); }
.svc-stock-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:18px; }
.svc-stock-name{ font-weight:700; color:var(--ink,#1C1E24); font-size:15px; }
.svc-bar{ height:10px; border-radius:999px; background:#EDEFF2; overflow:hidden; }
.svc-bar > i{ display:block; height:100%; border-radius:999px; background:var(--green,#2B9E8F); }
.svc-bar-low > i{ background:#D9534A; }
.svc-stock-meta{ margin-top:12px; font-size:13.5px; color:var(--sub,#6E727B); }
.svc-spark{ display:flex; align-items:flex-end; gap:7px; height:64px; margin-top:6px; }
.svc-spark > i{ flex:1; background:var(--green-soft,#E4F4F1); border-radius:4px 4px 0 0; }
.svc-spark > i.hi{ background:var(--green,#2B9E8F); }
@media (max-width:820px){ .svc-stock{ grid-template-columns:1fr } }

/* ---------- AI: workflow pipeline diagram ------------------ */
.svc-flow-wrap{ max-width:1060px; margin:38px auto 0; }
.svc-flow{ display:flex; align-items:stretch; flex-wrap:wrap; gap:0; justify-content:center; }
.svc-node{ background:var(--card,#fff); border:1px solid rgba(28,30,36,.10);
  border-radius:12px; box-shadow:var(--fb-shadow); padding:14px 18px; min-width:120px; text-align:center; }
.svc-node b{ display:block; color:var(--ink,#1C1E24); font-size:14.5px; }
.svc-node small{ display:block; color:var(--sub,#6E727B); font-size:12px; margin-top:3px; }
.svc-node.human{ border-color:var(--green,#2B9E8F); background:var(--green-soft,#E4F4F1); }
.svc-node.human b{ color:var(--green-d,#1F7A6F); }
.svc-link{ align-self:center; width:30px; height:2px; background:#CDD2D8; position:relative; flex:0 0 auto; }
.svc-link::after{ content:""; position:absolute; right:-1px; top:-3px; border:4px solid transparent; border-left-color:#CDD2D8; }
.svc-flow-stat{ text-align:center; margin:26px auto 0; font-size:16px; color:var(--sub,#6E727B); }
.svc-flow-stat s{ color:#AEB3BA; }
.svc-flow-stat b{ color:var(--green-d,#1F7A6F); font-size:22px; vertical-align:-1px; }
@media (max-width:720px){ .svc-flow{ flex-direction:column; align-items:center } .svc-link{ width:2px; height:22px } .svc-link::after{ right:-3px; top:auto; bottom:-1px; border:4px solid transparent; border-top-color:#CDD2D8 } }

/* ---------- 3-step process row (CX "how it works") --------- */
.svc-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:36px; }
.svc-step{ background:var(--card,#fff); border:1px solid rgba(28,30,36,.08); border-radius:14px;
  box-shadow:var(--fb-shadow); padding:28px 26px; }
.svc-step-ic{ display:flex; align-items:center; justify-content:center; width:46px; height:46px;
  border-radius:12px; background:var(--green-soft,#E4F4F1); color:var(--green-d,#1F7A6F); margin-bottom:18px; }
.svc-step-ic svg{ width:23px; height:23px; }
.svc-step h3{ font-family:'Satoshi',sans-serif; font-size:18px; font-weight:700;
  color:var(--ink,#1C1E24); margin:0 0 9px; line-height:1.25; }
.svc-step p{ color:var(--sub,#6E727B); font-size:14.5px; line-height:1.58; margin:0; }
@media (max-width:820px){ .svc-steps{ grid-template-columns:1fr; } }

/* ---------- AI ANALYST: ask-your-operation panel ----------- */
.svc-analyst{ max-width:760px; margin:42px auto 0; text-align:left; background:var(--card,#fff);
  border:1px solid rgba(28,30,36,.08); border-radius:18px; box-shadow:var(--fb-shadow-h); overflow:hidden; }
.svc-analyst-bar{ display:flex; align-items:center; gap:10px; padding:15px 22px;
  border-bottom:1px solid rgba(28,30,36,.07); }
.svc-analyst-badge{ display:inline-flex; align-items:center; gap:9px; font-weight:700;
  color:var(--ink,#1C1E24); }
.svc-analyst-star{ width:24px; height:24px; border-radius:7px; background:var(--green-soft,#E4F4F1);
  color:var(--green-d,#1F7A6F); display:flex; align-items:center; justify-content:center; font-size:13px; }
.svc-analyst-online{ margin-left:auto; display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; color:var(--sub,#6E727B); }
.svc-analyst-body{ padding:20px 22px 24px; }
.svc-ask{ display:flex; gap:11px; align-items:center; background:#F2F4F7; border-radius:12px;
  padding:13px 16px; color:var(--ink,#1C1E24); font-weight:600; font-size:15.5px; }
.svc-ask .qmark{ color:#9aa0a8; font-weight:800; }
.svc-answer{ margin-top:18px; display:flex; gap:14px; }
.svc-answer-av{ width:32px; height:32px; border-radius:9px; background:var(--green,#2B9E8F); color:#fff;
  flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; }
.svc-answer-tx{ font-size:15px; line-height:1.58; color:var(--ink,#1C1E24); }
.svc-answer-tx b{ color:var(--green-d,#1F7A6F); }
.svc-metrics{ display:flex; flex-wrap:wrap; gap:10px; margin-top:15px; }
.svc-metric{ background:var(--green-soft,#E4F4F1); color:var(--green-d,#1F7A6F); font-weight:700;
  font-size:13px; padding:7px 12px; border-radius:9px; }
@media (max-width:560px){ .svc-analyst-online{ display:none } }

/* ---------- AI: hero "automations running" console --------- */
.svc-hero-panel{ width:100%; max-width:430px; margin-left:auto; background:var(--card,#fff);
  border:1px solid rgba(28,30,36,.08); border-radius:16px; box-shadow:var(--fb-shadow-h);
  padding:18px 22px 8px; }
.svc-hero-panel .hp-h{ display:flex; align-items:center; gap:9px; font-weight:700;
  color:var(--ink,#1C1E24); font-size:14px; margin-bottom:6px; }
.svc-hero-row{ display:flex; align-items:center; gap:13px; padding:13px 0;
  border-top:1px solid rgba(28,30,36,.07); }
.svc-hero-row b{ flex:1; font-weight:600; color:var(--ink,#1C1E24); font-size:14.5px; }
.svc-hero-row small{ color:var(--sub,#6E727B); font-size:12.5px; white-space:nowrap; }
.svc-check{ width:24px; height:24px; border-radius:50%; background:var(--green-soft,#E4F4F1);
  color:var(--green-d,#1F7A6F); display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; flex:0 0 auto; }

/* ---------- CX: support conversation mockup ---------------- */
.svc-chat{ max-width:560px; margin:38px auto 0; padding:0 0 22px; }
.svc-chat-head{ display:flex; align-items:center; gap:12px; padding:16px 20px;
  border-bottom:1px solid rgba(28,30,36,.07); }
.svc-av{ width:38px; height:38px; border-radius:50%; background:var(--green,#2B9E8F); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; }
.svc-chat-who b{ display:block; color:var(--ink,#1C1E24); font-size:14.5px; line-height:1.2; }
.svc-chat-who small{ color:var(--sub,#6E727B); font-size:12.5px; }
.svc-chat-badge{ margin-left:auto; font-size:12px; font-weight:700; color:var(--green-d,#1F7A6F);
  background:var(--green-soft,#E4F4F1); padding:5px 11px; border-radius:999px; }
.svc-bubble{ max-width:80%; padding:12px 15px; margin:14px 20px 0; font-size:14.5px; line-height:1.45; border-radius:16px; }
.svc-in{ background:#EFF1F4; color:var(--ink,#1C1E24); border-bottom-left-radius:5px; }
.svc-out{ background:var(--green,#2B9E8F); color:#fff; margin-left:auto; border-bottom-right-radius:5px; }
.svc-typing{ color:var(--sub,#6E727B); font-size:13px; margin:14px 20px 0; font-style:italic; }

/* ============================================================
   VARIETY PATTERNS (adapted from 21st.dev feature blocks)
   ============================================================ */

/* ---- Feature + image (2-col) ---- */
.svc-feat{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
  max-width:1080px; margin:38px auto 0; }
.svc-feat.rev .svc-feat-media{ order:2; }
.svc-feat-media img{ width:100%; height:auto; display:block; }
.svc-feat-body{ text-align:left; }
.svc-feat-body .fb-head{ margin-bottom:0; }
.svc-feat-list{ list-style:none; margin:20px 0 26px; padding:0; display:grid; gap:13px; }
.svc-feat-list li{ display:flex; gap:11px; align-items:flex-start; color:var(--ink,#1C1E24);
  font-weight:500; font-size:15.5px; line-height:1.45; }
.svc-feat-list svg{ flex:0 0 auto; width:20px; height:20px; color:var(--green-d,#1F7A6F); margin-top:1px; }
@media (max-width:860px){ .svc-feat{ grid-template-columns:1fr; gap:30px; }
  .svc-feat.rev .svc-feat-media{ order:0; } }

/* ---- Alternating split rows ---- */
.svc-rows{ max-width:1000px; margin:38px auto 0; }
.svc-row{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center;
  padding:42px 0; border-top:1px solid rgba(28,30,36,.09); }
.svc-row:first-child{ border-top:0; padding-top:6px; }
.svc-row.rev .svc-row-media{ order:2; }
.svc-row-media{ display:flex; flex-direction:column; justify-content:center; }
.svc-row-body{ text-align:left; }
.svc-row-eyebrow{ font-family:'Satoshi',sans-serif; font-weight:700; font-size:12px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--green-d,#1F7A6F); }
.svc-row-body h3{ font-family:'Satoshi',sans-serif; font-size:24px; font-weight:700;
  color:var(--ink,#1C1E24); margin:10px 0 12px; line-height:1.2; }
.svc-row-body p{ color:var(--sub,#6E727B); font-size:16px; line-height:1.6; margin:0; }
@media (max-width:760px){ .svc-row{ grid-template-columns:1fr; gap:22px; padding:30px 0; }
  .svc-row.rev .svc-row-media{ order:0; } }

/* ---- Static 3-up testimonials (no marquee) ---- */
.svc-testi3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:1120px; margin:40px auto 0; }
.svc-testi3-card{ background:var(--card,#fff); border:1px solid rgba(28,30,36,.08); border-radius:16px;
  box-shadow:var(--fb-shadow); padding:30px 28px; display:flex; flex-direction:column; }
.svc-testi3-stars{ color:#F4A11E; letter-spacing:2px; font-size:15px; margin-bottom:14px; }
.svc-testi3-card blockquote{ margin:0 0 22px; color:var(--ink,#1C1E24); font-size:15.5px; line-height:1.62; flex:1; }
.svc-testi3-by{ display:flex; align-items:center; gap:12px; }
.svc-testi3-by img{ width:44px; height:44px; border-radius:50%; object-fit:cover; flex:0 0 auto; }
.svc-testi3-by b{ display:block; color:var(--ink,#1C1E24); font-size:14.5px; line-height:1.2; }
.svc-testi3-by small{ color:var(--sub,#6E727B); font-size:12.5px; }
@media (max-width:860px){ .svc-testi3{ grid-template-columns:1fr; } }

/* ---- Bento feature grid ---- */
.svc-bento{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:38px; }
.svc-bento-card{ background:var(--card,#fff); border:1px solid rgba(28,30,36,.08);
  border-radius:16px; box-shadow:var(--fb-shadow); padding:26px 26px; display:flex; flex-direction:column; text-align:left; }
.svc-bento-card.wide{ grid-column:span 2; }
.svc-bento-ic{ display:flex; align-items:center; justify-content:center; width:42px; height:42px;
  border-radius:11px; background:var(--green-soft,#E4F4F1); color:var(--green-d,#1F7A6F); margin-bottom:16px; }
.svc-bento-ic svg{ width:21px; height:21px; }
.svc-bento-card h3{ font-family:'Satoshi',sans-serif; font-size:17px; font-weight:700;
  color:var(--ink,#1C1E24); margin:0 0 8px; }
.svc-bento-card p{ color:var(--sub,#6E727B); font-size:14px; line-height:1.55; margin:0; }
.svc-bento-visual{ margin-top:auto; padding-top:20px; display:flex; flex-wrap:wrap; gap:9px; }
.svc-bento-visual .svc-metric{ background:var(--green-soft,#E4F4F1); color:var(--green-d,#1F7A6F);
  font-weight:700; font-size:12.5px; padding:7px 12px; border-radius:9px; }
@media (max-width:820px){ .svc-bento{ grid-template-columns:1fr; } .svc-bento-card.wide{ grid-column:auto; } }