/* ============================================================================
   .p-ai-automation - /ai-automation
   REGENERATED (cycle 6): the page consumes the shared component layer
   (components.css) for the hero, the section heads, the five capability rows
   (c-steps), the closing statement
   (c-lede) and the consultation band (c-cta). Nothing here re-declares a
   component property - no grid-template-columns, gap, max-width or
   text-align lands on a c-* element. What remains is the genuine one-off
   material: the stroked hero ring (Q logo echo, DESIGN-LANGUAGE.md), the
   "how it runs" sequence strip with its always-on lime pulse (the single
   live diagram on this page, FEEL.md), the mono role line under each
   capability name, and the full-width summary row (05).
   Every selector scoped under .p-ai-automation.
   ========================================================================== */

/* ================= HERO - the ring only (c-hero owns the layout) ================= */
.p-ai-automation .p-ai__hero{ position:relative; overflow:hidden; }
.p-ai-automation .p-ai__hero-wrap{ position:relative; }
/* the ring is decoration behind the copy; everything else stacks above it */
.p-ai-automation .p-ai__hero-wrap > :not(.p-ai__ring){ position:relative; z-index:1; }
/* the ring reads as a motif only when it closes inside the band - pulled off the
   viewport edge so it is no longer clipped into a rendering artifact */
.p-ai-automation .p-ai__ring{
  position:absolute; top:50%; right:0; transform:translateY(-50%);
  width:clamp(280px,32vw,460px); height:clamp(280px,32vw,460px);
  fill:none; stroke:var(--royal); stroke-width:1.5; opacity:.35;
  pointer-events:none; z-index:0;
}

/* ================= CAPABILITIES (blue) ================= */
/* the mono role line sits between c-steps__name and c-steps__copy; the
   component set has no equivalent slot, so it stays page-scoped */
.p-ai-automation .p-ai__row-role{
  font-size:var(--t-label); letter-spacing:.12em; text-transform:uppercase; color:var(--lime);
}
/* five rows in a 2-up grid orphan row 05 with an empty right quadrant; 05 is the
   summary of the other four, so it takes the last row whole and reads a step up */
@media (min-width:768px){
  .p-ai-automation .p-ai__row-summary{ grid-column:1 / -1; }
  .p-ai-automation .p-ai__row-summary .c-steps__name{ font-size:var(--t-h3); }
}

/* ================= HOW IT RUNS (black) ================= */
/* ---- the sequence strip (the one live diagram on this page) ---- */
.p-ai-automation .p-ai__flow{
  margin-top:clamp(52px,6.5vw,84px);
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:0;
  position:relative;
}
.p-ai-automation .p-ai__flow-track{
  position:absolute; left:0; right:0; top:6px; height:1px;
  background:rgba(245,245,245,.16); overflow:hidden;
}
.p-ai-automation .p-ai__flow-pulse{
  position:absolute; top:50%; left:0; width:46px; height:2px;
  transform:translateY(-50%);
  background:linear-gradient(90deg, transparent, var(--lime) 60%, var(--lime));
  border-radius:2px;
  animation:p-ai-flow-glide 3.6s var(--ease-flow, ease-in-out) infinite;
}
@keyframes p-ai-flow-glide{
  0%{ left:-46px; opacity:0; }
  8%{ opacity:1; }
  92%{ opacity:1; }
  100%{ left:100%; opacity:0; }
}
.p-ai-automation .p-ai__flow-step{
  flex:1 1 auto; min-width:104px;
  padding-top:22px; padding-right:var(--s-4);
  font-family:var(--f-mono, monospace); font-size:var(--t-label); letter-spacing:.06em;
  text-transform:uppercase; color:var(--paper-muted);
}
.p-ai-automation .p-ai__flow-step::before{
  content:""; display:block; width:9px; height:9px; border-radius:50%;
  background:var(--paper-muted); opacity:.6; margin-bottom:14px;
}
.p-ai-automation .p-ai__flow-step--lime{ color:var(--lime); }
.p-ai-automation .p-ai__flow-step--lime::before{ background:var(--lime); opacity:1; }

/* ---- the closing statement sits further from the diagram than a c-body stack ---- */
.p-ai-automation .p-ai__close{ margin-top:clamp(56px,7vw,88px); }

/* ================= FINAL CTA (lime) ================= */
/* the headline is set as two masked lines; give them their own leading */
.p-ai-automation .c-cta__title .reveal-mask{ margin-bottom:.06em; }
.p-ai-automation .c-cta__title .reveal-mask:last-child{ margin-bottom:0; }

/* ================= RESPONSIVE ================= */
@media (max-width:767px){
  .p-ai-automation .p-ai__ring{ display:none; }
  .p-ai-automation .p-ai__flow{ flex-direction:column; gap:18px; }
  .p-ai-automation .p-ai__flow-track{ display:none; }
  .p-ai-automation .p-ai__flow-step{ padding-top:0; }
}