/* ============================================================
   "What AtlasGTM is" — positioning pieces
   1. .hero-tag      — the "MCP application" pill above the H1
   2. .works-with    — logo strip under the hero CTAs
   3. .flow          — the three-step "your AI tool → AtlasGTM →
                       Google Cloud" diagram section

   Third-party marks (Antigravity, Claude, Cursor) are real files
   in this site: logo-*.svg, each wrapping a small PNG. Heights
   below are tuned per mark so the three read at the same optical
   weight — the files have different internal proportions, so
   change them individually, not together.
   ============================================================ */

/* ---------- 1. hero tag ---------- */
.hero-tag{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#1e3a8a;background:rgba(82,160,255,.12);
  border:1px solid rgba(82,160,255,.28);
  padding:6px 12px;border-radius:999px;margin-bottom:16px;
}
.hero-tag::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:linear-gradient(135deg,var(--brand-primary,#52a0ff),var(--brand-secondary,#a672f7));
}

/* ---------- 2. works-with strip ---------- */
.works-with{
  display:flex;align-items:center;flex-wrap:wrap;gap:12px 22px;
  margin-top:22px;padding-top:18px;
  border-top:1px solid var(--brand-border,#e5e7eb);
}
.works-with .ww-label{
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brand-muted,#64748b);
}
.works-with img{width:auto;display:block;opacity:.92;transition:opacity .18s ease;}
.works-with img:hover{opacity:1;}
.works-with .ww-antigravity{height:21px;}
.works-with .ww-claude{height:22px;}
.works-with .ww-cursor{height:19px;}
.works-with .ww-more{font-size:13px;color:var(--brand-muted,#64748b);white-space:nowrap;}

/* ---------- 3. flow diagram ---------- */
.flow{
  display:grid;
  grid-template-columns:1fr 36px 1.15fr 36px 1fr;
  align-items:stretch;
}
.flow-arrow{
  display:flex;align-items:center;justify-content:center;
  color:#94a3b8;font-size:22px;font-weight:300;
}
.flow-card{
  background:#fff;border:1px solid var(--brand-border,#e5e7eb);
  border-radius:var(--brand-radius-lg,16px);padding:22px 22px 24px;
  display:flex;flex-direction:column;gap:12px;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.flow-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(15,23,42,.08);border-color:#dbeafe;}
.flow-card .step-k{
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brand-muted,#64748b);
}
.flow-card h3{font-size:18px;line-height:1.3;}
.flow-card .flow-body{font-size:14.5px;color:#475569;line-height:1.6;}
.flow-card .flow-body ul{margin:0;padding:0;list-style:none;}
.flow-card .flow-body li{position:relative;padding:4px 0 4px 20px;}
.flow-card .flow-body li::before{
  content:"";position:absolute;left:2px;top:12px;width:7px;height:7px;border-radius:50%;
  background:#cbd5e1;
}
.flow-card .mark{min-height:34px;display:flex;align-items:center;}

/* the middle card is the product — give it the brand gradient edge */
.flow-card.core{
  position:relative;border-color:transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg,var(--brand-primary,#52a0ff),var(--brand-secondary,#a672f7)) border-box;
  border:2px solid transparent;
  box-shadow:0 10px 30px rgba(82,160,255,.14);
}
.flow-card.core .step-k{color:var(--brand-secondary,#a672f7);}
.flow-card.core .flow-body li::before{
  background:linear-gradient(135deg,var(--brand-primary,#52a0ff),var(--brand-secondary,#a672f7));
}
.flow-card.core img.atlas{height:40px;width:auto;}

/* the Google Cloud end of the flow */
.flow-card.gc .flow-body li::before{
  background:linear-gradient(90deg,var(--g-blue) 0 25%,var(--g-red) 25% 50%,var(--g-yellow) 50% 75%,var(--g-green) 75% 100%);
}
.flow .gc-lockup .gc-img{height:20px;}
.flow .gc-lockup[data-gc="type"]{font-size:16px;}

/* tool chips in the first card */
.chips{display:flex;flex-wrap:wrap;gap:7px;}
.chips span{
  font-size:12.5px;font-weight:600;color:#334155;
  background:#f1f5f9;border:1px solid var(--brand-border,#e5e7eb);
  padding:4px 10px;border-radius:999px;
}
.chips span.more{font-weight:500;color:var(--brand-muted,#64748b);background:#fff;}

@media(max-width:900px){
  .flow{grid-template-columns:1fr;gap:0;}
  .flow-arrow{height:34px;transform:rotate(90deg);}
}