/* Pillars — V0.1 What We Build (62:1776, 62:1797, 62:1835).
   Heading at x450 (text column) 122 below the section top; tags at x48, 12 apart, their
   top on the heading's cap line (the V0.1 number above them is gone, review B3);
   subhead 73 under the heading; ~160 between pillars. */
.pillar + .pillar { margin-top: var(--space-160); }
.pillar:last-child { margin-bottom: var(--space-120); } /* V0.1: ~257 of air before the footer */

.pillar__tags { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-12); margin-top: var(--space-20); } /* pill top on the heading's cap line (Ekstra 64 at 1.1) */
.pillar__tags .tag { min-height: 27px; padding: 0 18px var(--lift); letter-spacing: -0.06em; }

.pillar__heading { max-width: 610px; letter-spacing: -0.06em; }
.pillar__subhead {
  letter-spacing: -0.05em; /* V0.1 */
  display: flex; align-items: center; gap: 14px;
  margin-top: calc(var(--space-64) + var(--space-8));
}
.pillar__dot { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: currentColor; }
.pillar__copy { max-width: 590px; margin-top: var(--space-32); letter-spacing: -0.05em; } /* V0.1: -5% tracking; 590 reproduces the comp's line breaks */
.pillar__copy > * + * { margin-top: 1.44em; }

/* ---------- Platform logo slot: one spot, hard cut (pillars.js steps .is-on) ---------- */
.pillar__logos { position: relative; width: 28px; height: 28px; margin-top: 49px; }
.pillar__logo { position: absolute; inset: 0; opacity: 0; }
.pillar__logo.is-on { opacity: 1; }
.pillar__logo svg { width: 100%; height: 100%; fill: currentColor; }

/* ---------- The live engine ---------- */
/* Dot: a heartbeat and a ping ring, staggered per pillar so the page ticks over.
   The ring peaks at 1.6× the dot, 70% of its first size (review B3). */
.pillar__dot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: currentColor; opacity: 0;
}

.block--pillars.is-live .pillar__dot { animation: pillar-beat 2.8s ease-in-out infinite; animation-delay: calc(var(--i) * 0.93s); }
.block--pillars.is-live .pillar__dot::after { animation: pillar-ping 2.8s var(--ease-out) infinite; animation-delay: calc(var(--i) * 0.93s); }

@keyframes pillar-beat { 0%, 30%, 100% { transform: scale(1); } 12% { transform: scale(0.84); } }
@keyframes pillar-ping { 0% { transform: scale(1); opacity: 0.3; } 75%, 100% { transform: scale(1.6); opacity: 0; } }

@media (max-width: 1023px) {
  .pillar { row-gap: var(--space-32); }
  .pillar__meta { display: contents; }
  .pillar__meta > * { grid-column: content; }
  .pillar__body { order: -1; }
  .pillar__tags { flex-direction: row; flex-wrap: wrap; gap: var(--space-8); margin-top: 0; }
  .pillar__logos { margin-top: 0; }
}

@media (max-width: 767px) {
  .pillar + .pillar { margin-top: 96px; } /* the pillars ran together on a phone (Nick 09-30); the phone mode's largest step is 64 (--space-160), so a plain value */
  .pillar { row-gap: var(--space-24); }
  .pillar__subhead { margin-top: var(--space-32); gap: 12px; }
  .pillar__dot { width: 22px; height: 22px; }
  .pillar__copy { margin-top: var(--space-20); }
  /* The tags are one swipeable line, the rail (base.css), led by the logo slot, instead of
     a wrapped heap of pills (mobile experience, 2026-09-30). display: contents above
     outranks the primitive's flex, and the pills are the rail's grandchildren, so both
     are restated here. */
  .pillar__meta { display: flex; --rail-align: center; --rail-gap: var(--space-8); }
  .pillar__meta:not(:has(*)) { display: none; } /* no tags, no logos: no empty row after the body */
  .pillar__tags { display: contents; }
  .pillar__tags > li { flex: none; scroll-snap-align: start; }
  .pillar__logos { order: -1; }
}

@media (prefers-reduced-motion: reduce) {
  .block--pillars.is-live .pillar__dot,
  .block--pillars.is-live .pillar__dot::after { animation: none; }
}