/* ============================================================================
   .p-outbound-operations - /outbound-operations
   REGENERATED (cycle 6): the page consumes the shared component layer
   (components.css c-hero/c-center+c-head/c-steps/c-foot/c-prose/c-cta/
   c-btn-row) directly. Nothing here re-declares a component's layout - no grid-template-columns, gap, max-width, or text-align on a c-* element.
   What remains: the hero-ring treatment, the ONE signature diagram on this
   page (the daily-rhythm relay chain, FEEL.md's one-diagram motion budget),
   and the few typographic deltas the components do not express.
   ========================================================================== */

/* ================= HERO RING (page-unique ornament) =================
   the ring is absolutely positioned inside the centered hero wrap, so the
   wrap becomes the containing block and its content stacks above it. */
.p-outbound-operations .p-oo__hero{ position:relative; overflow:hidden; }
.p-outbound-operations .p-oo__hero-wrap{ position:relative; }
.p-outbound-operations .p-oo__hero-wrap > *{ position:relative; z-index:1; }
.p-outbound-operations .p-oo__ring{
  position:absolute; top:50%; right:-120px; 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;
}
@media (max-width:767px){
  .p-outbound-operations .p-oo__ring{ display:none; }
}

/* ================= WHAT'S INSIDE (blue) - deltas on c-steps =================
   this is the only c-steps instance on a royal field: base.css's on-blue text
   rule outranks .numeral, so the lime numeral is restored here, and the mono
   role line is an extra body element the component does not carry. */
.p-outbound-operations .c-steps__num{ color:var(--lime); }
.p-outbound-operations .p-oo__row-role{
  font-size:var(--t-label); letter-spacing:.12em; text-transform:uppercase; color:var(--lime);
}

/* ================= DAILY RHYTHM - the one signature diagram =================
   relay-pulse chain: a curved SVG path lights once when the block enters view
   (.reveal.is-in), never a continuous ambient loop. Genuinely page-scoped. */
.p-outbound-operations .p-oo__chain{
  position:relative; margin-top:clamp(48px,6vw,72px);
  margin-inline:auto; max-width:960px;
}
.p-outbound-operations .p-oo__chain-line{ display:none; }

.p-outbound-operations .p-oo__chain-nodes{
  position:relative;
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:0;
}
/* mobile connector: the stack is still a chain, so a vertical rule runs through
   the dot column (dot is 9px wide at the row's left edge, so its centre is 4.5px). */
.p-outbound-operations .p-oo__chain-nodes::before{
  content:""; position:absolute; left:4px; top:14px; bottom:14px;
  width:1px; background:var(--ink-40);
}
.p-outbound-operations .p-oo__chain-nodes li{
  display:flex; align-items:center; gap:var(--s-4); padding:14px 0;
  font-size:var(--t-eyebrow); letter-spacing:.08em; text-transform:uppercase; color:var(--paper);
  border-bottom:1px solid var(--ink-40);
}
.p-outbound-operations .p-oo__chain-nodes li:first-child{ border-top:1px solid var(--ink-40); }
.p-outbound-operations .p-oo__chain-dot{
  width:9px; height:9px; border-radius:50%; background:var(--ink-50); flex:none;
  transition:background var(--dur-slow) var(--ease-smooth);
}
.p-outbound-operations .p-oo__chain-last{ color:var(--lime); font-weight:600; }
.p-outbound-operations .p-oo__chain-last .p-oo__chain-dot{ background:var(--lime); }

/* the pulse: once the chain enters view, light each node's dot in relay,
   left to right / top to bottom - pure CSS, no JS, fires once. */
.p-outbound-operations .p-oo__chain.is-in .p-oo__chain-dot{ animation:oo-dot-light 900ms var(--ease-smooth) forwards; }
.p-outbound-operations .p-oo__chain.is-in .p-oo__chain-nodes li:nth-child(1) .p-oo__chain-dot{ animation-delay:0ms; }
.p-outbound-operations .p-oo__chain.is-in .p-oo__chain-nodes li:nth-child(2) .p-oo__chain-dot{ animation-delay:180ms; }
.p-outbound-operations .p-oo__chain.is-in .p-oo__chain-nodes li:nth-child(3) .p-oo__chain-dot{ animation-delay:360ms; }
.p-outbound-operations .p-oo__chain.is-in .p-oo__chain-nodes li:nth-child(4) .p-oo__chain-dot{ animation-delay:540ms; }
.p-outbound-operations .p-oo__chain.is-in .p-oo__chain-nodes li:nth-child(5) .p-oo__chain-dot{ animation-delay:720ms; }
@keyframes oo-dot-light{
  0%{ background:var(--ink-50); }
  40%{ background:var(--lime); }
  100%{ background:var(--lime); }
}
.p-outbound-operations .p-oo__chain-nodes li:last-child .p-oo__chain-dot{ animation-name:none; }

@media (min-width:768px){
  /* the path's x extents (5 -> 821 of the 1000-unit box, preserveAspectRatio:none
     over the 960px chain) land on the first and last dot centres, so the chain
     terminates ON the outer dots instead of stopping short of both ends. */
  .p-outbound-operations .p-oo__chain-line{ display:block; width:100%; height:20px; margin-bottom:var(--s-2); }
  .p-outbound-operations .p-oo__chain-path{ fill:none; stroke:var(--ink-40); stroke-width:2; }
  .p-outbound-operations .p-oo__chain-pulse{
    fill:none; stroke:var(--lime); stroke-width:2; stroke-linecap:round;
    stroke-dasharray:70 1200; stroke-dashoffset:70; opacity:0;
  }
  .p-outbound-operations .p-oo__chain.is-in .p-oo__chain-pulse{ animation:oo-chain-travel 1.1s var(--ease-flow) 120ms forwards; }
  @keyframes oo-chain-travel{
    0%{ stroke-dashoffset:70; opacity:1; }
    92%{ opacity:1; }
    100%{ stroke-dashoffset:-900; opacity:0; }
  }

  .p-outbound-operations .p-oo__chain-nodes{ flex-direction:row; }
  .p-outbound-operations .p-oo__chain-nodes::before{ content:none; }
  .p-outbound-operations .p-oo__chain-nodes li{
    flex:1; flex-direction:column; align-items:flex-start; gap:10px;
    border-bottom:0; border-left:1px solid var(--ink-40); padding:0 0 0 var(--s-4);
  }
  .p-outbound-operations .p-oo__chain-nodes li:first-child{ border-top:0; border-left:0; padding-left:0; }
}

@media (prefers-reduced-motion:reduce){
  .p-outbound-operations .p-oo__chain.is-in .p-oo__chain-dot{ animation-duration:1ms; animation-delay:0ms !important; }
  .p-outbound-operations .p-oo__chain.is-in .p-oo__chain-pulse{ animation-duration:1ms; }
}

/* the small print under the diagram: c-prose/c-center own its measure and
   alignment; only the meta typography and the inline link are page-level. */
.p-outbound-operations .p-oo__rhythm-note{
  margin-top:clamp(28px,4vw,40px); font-size:var(--t-small); line-height:1.6;
  color:var(--paper-muted);
}
.p-outbound-operations .p-oo__rhythm-note a{ color:var(--lime); text-decoration:underline; text-underline-offset:2px; }

/* the boundary statement: c-center owns the measure and centering, this sets
   the display face it is spoken in. */
.p-outbound-operations .p-oo__close{
  margin-top:clamp(40px,5vw,56px);
  font-family:var(--f-display); font-size:var(--t-h3); line-height:var(--lh-h3);
  font-weight:600; letter-spacing:var(--track-h3); color:var(--paper-full);
}

/* ================= FINAL CTA (lime) =================
   c-cta carries the whole band now (title / deck / btn-row / one c-cta__note),
   so the page owns exactly one delta: the emphasis mark in the headline.
   It replaces c-cta__chip, whose filled ink-0 field read as a redaction bar
   mid-headline on the lime band. An underline in the title's own colour marks
   the phrase without punching a black box through the line. */
.p-outbound-operations .c-cta__title .p-oo__cta-mark{
  font-weight:700;
  text-decoration:underline;
  text-decoration-thickness:3px;
  /* the title's lines are .reveal-mask (overflow:hidden at line-height 1.05),
     so the rule has to stay inside the descender band or it gets clipped. */
  text-underline-offset:6px;
}