/* ============================================================
   OUTMATE — GTM page v2: reordered + new section designs
   Loads AFTER outmate.css + vid.css + gtm.css
   ============================================================ */

/* ===== PROBLEM → light scenario cards ===== */
.problem-light .sec-title{ max-width:18ch; }
.scards{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.scard{
  padding:clamp(24px,2.6vw,40px); border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:18px; min-height:clamp(240px,20vw,300px);
}
.scard:last-child{ border-right:0; }
.scard .sig{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:8px; }
.scard .desc{ font-family:var(--body); font-size:clamp(15px,1.35vw,18px); line-height:1.45; color:var(--ink); margin:0; }
.scard .desc b{ font-weight:700; }
.scard .missed{ margin-top:auto; font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--muted); display:flex; align-items:center; gap:9px; text-transform:uppercase; }
.scard .missed .x{ color:#c4c4c4; font-size:13px; }
/* light stat row */
.statrow-light{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.statrow-light .stat{ border-color:var(--line); }
.statrow-light .stat .l{ color:var(--muted); }

/* ===== AGENTS → dark orchestration flow ===== */
.agentflow{ display:flex; flex-wrap:wrap; align-items:stretch; gap:14px; padding:clamp(24px,3vw,46px) clamp(20px,4vw,72px) clamp(10px,1.5vw,20px); }
.achip{
  display:flex; align-items:center; gap:13px;
  background:#15151b; border:1px solid rgba(255,255,255,.12); border-radius:13px;
  padding:14px 18px; transition:border-color .25s, box-shadow .25s, transform .25s;
}
.achip:hover{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), 0 10px 30px -10px rgba(80,70,230,.5); transform:translateY(-2px); }
.achip .ai{ width:34px; height:34px; border-radius:8px; background:#23232b; color:#fff; display:grid; place-items:center; font-family:var(--mono); font-size:14px; flex:0 0 auto; }
.achip.lead .ai{ background:var(--accent); box-shadow:0 0 18px rgba(80,70,230,.6); }
.achip .txt{ display:flex; flex-direction:column; }
.achip .txt .n{ font-family:var(--sans); font-weight:700; font-size:15px; letter-spacing:-.01em; color:#fff; line-height:1.1; }
.achip .txt .r{ font-family:var(--mono); font-size:10px; letter-spacing:.03em; color:#8a8a92; text-transform:uppercase; margin-top:3px; }
.aflow-arrow{ display:flex; align-items:center; color:var(--accent); font-family:var(--mono); font-size:16px; }
.achip.more{ background:transparent; border-style:dashed; }
.achip.more .ai{ background:transparent; border:1px solid rgba(255,255,255,.2); }

/* ===== WHAT YOU GET → alternating feature rows ===== */
.frows{ border-top:1px solid var(--line); }
.frow{ display:grid; grid-template-columns:1.05fr 1fr; border-bottom:1px solid var(--line); }
.frow:last-child{ border-bottom:0; }
.frow-txt{ padding:clamp(28px,3.2vw,56px) clamp(22px,3vw,52px); display:flex; flex-direction:column; justify-content:center; gap:16px; }
.frow-num{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--accent); }
.frow-txt h3{ margin:0; font-family:var(--sans); font-weight:700; letter-spacing:-.02em; line-height:1.0; font-size:clamp(24px,2.6vw,40px); }
.frow-txt p{ margin:0; font-family:var(--body); color:var(--muted); font-size:clamp(15px,1.35vw,18px); line-height:1.5; max-width:44ch; }
.frow-vis{
  position:relative; background:var(--paper-2); border-left:1px solid var(--line);
  min-height:clamp(240px,22vw,320px); display:grid; place-items:center; overflow:hidden; padding:28px;
}
/* alternate: visual on the left for even rows */
.frow:nth-child(even) .frow-vis{ border-left:0; border-right:1px solid var(--line); order:-1; }

/* --- mini visuals --- */
.mini-toggles{ display:grid; grid-template-columns:1fr 1fr; gap:14px 26px; }
.tg{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:11px; letter-spacing:.02em; color:var(--muted); }
.tg .sw{ width:32px; height:18px; border-radius:20px; background:#c7c7c7; position:relative; flex:0 0 auto; transition:background .25s; }
.tg .sw::after{ content:""; position:absolute; width:14px; height:14px; border-radius:50%; background:#fff; top:2px; left:2px; box-shadow:0 1px 2px rgba(0,0,0,.3); transition:left .25s; }
.tg.on .sw{ background:var(--accent); }
.tg.on .sw::after{ left:16px; }
.tg.on{ color:var(--ink); }

.mini-stack{ display:flex; flex-direction:column; gap:10px; width:min(280px,100%); }
.mst{ display:flex; align-items:center; gap:11px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px 13px; }
.mst .d{ width:26px; height:26px; border-radius:7px; background:var(--ink); color:#fff; display:grid; place-items:center; font-family:var(--mono); font-size:12px; }
.mst.lead .d{ background:var(--accent); }
.mst .nm{ font-family:var(--sans); font-weight:700; font-size:13px; }
.mst .ar{ margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--accent); }

.mini-logos{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; width:min(300px,100%); }
.mlogo{ aspect-ratio:1.5/1; border:1px solid var(--line); border-radius:10px; background:#fff; display:grid; place-items:center; font-family:var(--sans); font-weight:700; font-size:13px; letter-spacing:-.01em; color:var(--ink); }
.mlogo .gl{ color:var(--accent); font-family:var(--mono); }

.mini-builder{ width:min(300px,100%); display:flex; flex-direction:column; gap:0; }
.mb-node{ display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:11px 14px; position:relative; }
.mb-node + .mb-node{ margin-top:22px; }
.mb-node + .mb-node::before{ content:""; position:absolute; left:25px; top:-22px; height:22px; width:2px; background:var(--accent); }
.mb-node .ic{ width:24px; height:24px; border-radius:6px; background:var(--paper-2); border:1px solid var(--line); display:grid; place-items:center; font-family:var(--mono); font-size:11px; color:var(--accent); }
.mb-node .lb{ font-family:var(--mono); font-size:11px; color:var(--ink); letter-spacing:.02em; }
.mb-node.accent{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }

/* ===== responsive ===== */
@media (max-width:860px){
  .scards{ grid-template-columns:1fr; }
  .scard{ border-right:0; border-bottom:1px solid var(--line); min-height:0; }
  .scard:last-child{ border-bottom:0; }
  .statrow-light{ grid-template-columns:1fr; }
  .statrow-light .stat{ border-right:0; border-bottom:1px solid var(--line); }
  .frow{ grid-template-columns:1fr; }
  .frow-vis,.frow:nth-child(even) .frow-vis{ border-left:0; border-right:0; border-top:1px solid var(--line); order:0; min-height:200px; }
}
@media (max-width:520px){
  .agentflow{ flex-direction:column; align-items:stretch; }
  .aflow-arrow{ transform:rotate(90deg); justify-content:center; }
  .achip{ width:100%; }
}