/* The lower half of the page: reliability stats, API, audiences, changelog and the dark CTA. */

/* ── Stats: copy + mono counters on the left, a live event stream on the right ── */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 96px 80px; align-items: center; }
.stats .sub { margin-top: 8px; max-width: 304px; }
.counters { display: flex; flex-direction: column; gap: 32px; margin-top: 40px; }
.counters span { display: block; font-size: 14px; line-height: 20px; text-transform: uppercase; color: var(--n-500); }
.counters b { display: block; margin-top: 8px; font: 500 24px/32px var(--font-mono); color: var(--publish); }
.orb { position: relative; height: 420px; }
.orb-dots {
  position: absolute; inset: 0; margin: auto; width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(var(--n-400) 1.2px, transparent 1.4px) 0 0 / 9px 9px;
  -webkit-mask-image: radial-gradient(circle at 35% 35%, #000 20%, transparent 70%); mask-image: radial-gradient(circle at 35% 35%, #000 20%, transparent 70%);
  box-shadow: inset -30px -30px 80px #fff; animation: spin 90s linear infinite;
}
.orb::before { content: ""; position: absolute; inset: 0; margin: auto; width: 380px; height: 380px; border-radius: 50%; box-shadow: 0 0 0 1px var(--n-100), 0 30px 60px -30px rgb(0 0 0 / .15); }
@keyframes spin { to { transform: rotate(1turn); } }
.stream { position: absolute; right: 0; top: 0; bottom: 0; width: 260px; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent); }
.stream-track { display: grid; gap: 10px; animation: rise-y 24s linear infinite; }
.event { padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--n-200); box-shadow: 0 2px 6px -2px rgb(0 0 0 / .08); font-size: 11px; line-height: 14px; }
.event header { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12px; }
.event code { display: block; margin-top: 6px; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--n-100); font: 11px/14px var(--font-mono); color: var(--n-600); }
@keyframes rise-y { to { transform: translateY(-50%); } }

/* ── API: code card with language tabs, beside a webhook flow ── */
.api-visual { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; height: 100%; padding: 0 48px; }
.code { border-radius: 16px 16px 0 0; border: 1px solid rgb(0 0 0 / .2); border-bottom: 0; background: #fff; box-shadow: 0 0 0 4px rgb(0 0 0 / .1); align-self: end; height: 360px; display: flex; flex-direction: column; }
.code-tabs { display: flex; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--n-100); overflow-x: auto; }
.code-tabs button { padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; color: var(--n-500); white-space: nowrap; }
.code-tabs button[aria-selected="true"] { background: var(--n-100); color: var(--n-900); }
.code pre { margin: 0; padding: 20px; font: 12px/19px var(--font-mono); color: #24292e; white-space: pre-wrap; overflow-wrap: anywhere; overflow: hidden; }
.code pre[hidden] { display: none; }
.tk-k { color: #d32f2f; } .tk-s { color: #22863a; } .tk-f { color: #6f42c1; } .tk-c { color: #6a737d; } .tk-n { color: #1976d2; }
.flow { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0; }
.flow-src { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 16px; background: var(--n-900); color: #fff; font: 700 17px/1 var(--font-display); letter-spacing: -.05em; box-shadow: 0 0 0 4px var(--n-200); }
.flow-line { position: relative; height: 1px; background: #93c5fd; margin: 0 8px; }
.flow-line::after { content: ""; position: absolute; top: -3px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: #3b82f6; animation: travel 2.4s linear infinite; }
@keyframes travel { to { left: calc(100% - 7px); } }
.flow-ev { position: absolute; left: 50%; top: -52px; transform: translateX(-50%); text-align: center; }
.flow-ev .tag { display: inline-block; padding: 2px 8px; border-radius: 6px; background: #dcfce7; color: #15803d; font: 500 11px/16px var(--font-mono); }
.flow-ev .card { margin-top: 6px; padding: 6px 10px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.flow-dst { display: grid; gap: 10px; }
.flow-dst .card { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 12px; font-weight: 500; white-space: nowrap; }

/* ── Audiences: dub's customer grid, re-cast as who TrackMedia is for ── */
.aud-head { padding: 80px 48px 48px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.aud-head .sub { margin-top: 12px; max-width: 576px; }
/* 1px gaps over a grey backdrop draw the cell borders, whatever the spans. */
.aud { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--grid-border); border-top: 1px solid var(--grid-border); }
.aud > * { background: #fff; min-height: 200px; }
.aud-cell { display: grid; place-items: center; font: 700 22px/1 var(--font-display); letter-spacing: -.03em; color: var(--n-800); gap: 10px; align-content: center; }
.aud-cell .mark { width: 28px; height: 28px; }
.aud-cell small { font: 500 12px/16px var(--font-sans); letter-spacing: 0; color: var(--n-500); }
.aud-card { grid-column: span 2; padding: 32px; display: flex; flex-direction: column; }
.aud-card h3 { display: flex; align-items: center; gap: 10px; font: 700 20px/1 var(--font-display); letter-spacing: -.03em; }
.aud-card p { margin-top: 20px; font-size: 14px; line-height: 22px; color: var(--n-600); }
.aud-card p strong { color: var(--n-900); font-weight: 600; }
.aud-card footer { margin-top: auto; padding-top: 20px; display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--n-600); }
.aud-card footer span { display: inline-flex; align-items: center; gap: 6px; }

/* ── Changelog timeline ── */
.ship { display: grid; grid-template-columns: 1fr 1fr; }
.ship-copy { padding: 80px 48px; }
.ship-copy .sub { margin-top: 8px; }
.ship-copy .btn { margin-top: 24px; }
.timeline { position: relative; padding: 56px 48px 56px 24px; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.timeline::before { content: ""; position: absolute; left: 44px; top: 56px; bottom: 0; width: 1px; background: var(--n-200); }
.timeline li { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: center; min-height: 88px; }
.timeline .dot { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--n-200); background: #fff; color: var(--n-500); }
.timeline .dot svg { width: 14px; height: 14px; }
.timeline b { display: block; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--n-900); }
.timeline time { font-size: 14px; line-height: 20px; color: var(--n-500); }

/* ── Dark CTA with the conic glow ── */
.cta { position: relative; background: var(--n-900); padding: 0 16px; overflow: hidden; }
.cta-glow { position: absolute; inset: 0; overflow: hidden; opacity: .3; mix-blend-mode: overlay; pointer-events: none; }
.cta-glow::before { content: ""; position: absolute; inset: -40px; filter: blur(30px);
  background: conic-gradient(from -81deg, #3a8bfd -72deg, #855afc 33deg, #f00 70deg, #eab308 136deg, #5cff80 214deg, #00fff9 259deg, #3a8bfd 288deg, #855afc 393deg); }
.cta .rail { border-inline-color: rgb(255 255 255 / .05); }
.cta .grid-bg { background-image: linear-gradient(to right, rgb(255 255 255 / .15) 1px, transparent 1px), linear-gradient(to bottom, rgb(255 255 255 / .15) 1px, transparent 1px);
  -webkit-mask-image: linear-gradient(#000, transparent), radial-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }
.cta .notch { color: #fff; }
.cta-copy { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 96px 16px 128px; }
.cta-copy .display { color: var(--n-50); max-width: 512px; text-wrap: balance; }
.cta-copy p { margin-top: 24px; max-width: 560px; font-size: 20px; line-height: 28px; font-weight: 500; color: var(--n-400); }
.cta-copy .row { display: flex; gap: 16px; margin-top: 40px; }
.cta-copy .btn { height: 40px; }
.cta-copy .btn-ghost { background: rgb(255 255 255 / .2); border-color: transparent; color: #fff; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.cta-copy .btn-ghost:hover { box-shadow: 0 0 0 4px rgb(255 255 255 / .1); }
.cta-copy .btn:not(.btn-ghost):hover { box-shadow: 0 0 0 4px rgb(255 255 255 / .2); }
.cta-foot { margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; font-size: 13px; color: var(--n-400); }
.cta-foot span { display: inline-flex; align-items: center; gap: 6px; }
.cta-foot svg { width: 14px; height: 14px; color: var(--n-300); }

@media (max-width: 1023px) {
  .stats { grid-template-columns: 1fr; padding: 64px 32px; }
  .api-visual { grid-template-columns: 1fr; padding: 24px; } .flow { display: none; }
  .aud { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .orb { height: 320px; } .orb-dots, .orb::before { width: 260px; height: 260px; } .stream { width: 200px; }
  .aud { grid-template-columns: 1fr; } .aud-card { grid-column: auto; padding: 24px 20px; } .aud-cell { min-height: 120px; }
  .aud-head { padding: 48px 20px 32px; }
  .ship { grid-template-columns: 1fr; } .ship-copy { padding: 48px 20px 0; } .timeline { padding: 32px 20px; } .timeline::before { left: 40px; top: 32px; }
  .cta-copy { padding: 72px 8px 96px; } .cta-copy .row { flex-direction: column; width: 100%; max-width: 280px; }
}