/* ============================================================================
   .p-reporting-optimization - /reporting-optimization
   REGENERATED (cycle 6): the page consumes the shared component layer
   (components.css) for the hero, the section heads, the five tracked-signal
   rows (c-steps), the foot line and the closing CTA. Nothing here re-declares
   a component's grid/gap/measure/alignment.

   What remains: per-page deltas, plus the page's two genuine one-offs -
   the hero ring and the radial loop diagram, which no component covers.

   CYCLE 10 (ledger execution): hero band trimmed ~120px with the keyword chain
   pulled up to the buttons; the loop ring shrunk to ~380px, named in its centre
   and given body-size node labels; the closing guarantee centred at 62ch on the
   page axis after the second closing paragraph was removed; the mobile block's
   !important flags dropped (same specificity, later in source).
   ========================================================================== */

/* ---- delta: the hero headline now carries the page's promise, so it wants a
       slightly wider measure than the old category label did ---- */
.p-reporting-optimization .c-hero__title{ max-width:26ch; }
/* the mono keyword chain sits close under the buttons so the band closes */
.p-reporting-optimization .c-hero__note{ margin-top:var(--s-3); }

/* ================= ONE-OFF: hero ring ================= */
/* cycle-10 ledger: the band ran under-filled at full --sec-y; trim ~120px */
.p-reporting-optimization .p-rpt__hero{
  position:relative; overflow:hidden;
  padding-block:calc(var(--sec-y) - clamp(16px,3vw,60px));
}
.p-reporting-optimization .p-rpt__hero-wrap{ position:relative; }
.p-reporting-optimization .p-rpt__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;
}
/* lift the copy above the ring without disturbing the ring's own positioning */
.p-reporting-optimization .p-rpt__hero-wrap > :not(svg){ position:relative; z-index:1; }

/* ================= TRACKED (blue) ================= */
/* the role line is a page addition inside c-steps__body - c-steps has no
   equivalent slot; it inherits the body's flex gap for spacing */
.p-reporting-optimization .p-rpt__row-role{
  font-size:var(--t-label); letter-spacing:.12em; text-transform:uppercase; color:var(--lime);
}
/* on-blue token repoint for the step rows (c-steps ships black-section colors;
   base's .section--blue rules are :where(), so they cannot reach them) */

/* ================= ONE-OFF: radial loop diagram ================= */
/* a plain stroked ring (echoes the round Q logo, no arrow tail = never the
   banned "male sign" shape) with a small lime dot gliding around it on a slow,
   always-on SMIL loop, and four real <li> steps placed at the compass points
   via CSS transforms so reading order stays linear for assistive tech.
   Below 768px the ring hides and the same four steps stack as a plain list. */
/* cycle-10 ledger: the ring was ~645px with four 10px labels on its perimeter and
   nothing inside it. the ring is now ~380px, the cycle is named in its centre, and
   the node labels read at body size in the room the smaller ring frees up. */
.p-reporting-optimization .p-rpt__diagram{
  position:relative;
  width:min(880px,94vw); height:clamp(520px,68vw,680px);
  margin:clamp(56px,7vw,88px) auto 0;
}
.p-reporting-optimization .p-rpt__diagram-ring{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:clamp(300px,34vw,380px); height:clamp(300px,34vw,380px);
}
.p-reporting-optimization .p-rpt__diagram-ring circle:first-child{
  fill:none; stroke:rgba(245,245,245,.18); stroke-width:1.25;
}
.p-reporting-optimization .p-rpt__diagram-dot{ fill:var(--lime); }

/* the centre of the ring names the cycle instead of holding a void */
.p-reporting-optimization .p-rpt__diagram-center{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:12ch; text-align:center;
  font-size:var(--t-eyebrow); letter-spacing:.12em; text-transform:uppercase;
  line-height:1.5; color:var(--paper-muted);
}

.p-reporting-optimization .p-rpt__diagram-steps{ position:absolute; inset:0; }
.p-reporting-optimization .p-rpt__diagram-step{
  position:absolute;
  display:flex; flex-direction:column; gap:6px;
  width:clamp(180px,24%,224px);
}
.p-reporting-optimization .p-rpt__diagram-num{
  font-size:var(--t-label); letter-spacing:.1em; color:var(--lime); opacity:.85;
}
.p-reporting-optimization .p-rpt__diagram-name{
  font-family:var(--f-display); font-weight:650; font-size:var(--t-h4); color:var(--paper-full);
  text-transform:lowercase;
}
.p-reporting-optimization .p-rpt__diagram-line{
  font-size:var(--t-body); line-height:1.5; color:var(--paper-muted);
}
.p-reporting-optimization .p-rpt__diagram-step--1{ top:0; left:50%; transform:translateX(-50%); text-align:center; align-items:center; }
.p-reporting-optimization .p-rpt__diagram-step--2{ top:50%; right:0; transform:translateY(-50%); text-align:left; align-items:flex-start; }
.p-reporting-optimization .p-rpt__diagram-step--3{ bottom:0; left:50%; transform:translateX(-50%); text-align:center; align-items:center; }
.p-reporting-optimization .p-rpt__diagram-step--4{ top:50%; left:0; transform:translateY(-50%); text-align:right; align-items:flex-end; }

/* ================= ONE-OFF: closing guarantee statement =================
   the section now closes on ONE line (the second closing paragraph is gone).
   the guarantee text itself is untouched; it is centred on the page axis so it
   stops reading as a left-aligned orphan under a centred head. */
.p-reporting-optimization .p-rpt__quote{
  margin:clamp(64px,8vw,96px) auto 0;
  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);
  max-width:62ch; text-align:center;
}

/* ================= FINAL CTA (lime) ================= */
/* the CTA headline reveals as two masked lines */
.p-reporting-optimization .c-cta__title .reveal-mask{ display:block; margin-bottom:.06em; }
.p-reporting-optimization .c-cta__title .reveal-mask:last-child{ margin-bottom:0; }
/* the actions block only carries the stagger + its top offset; the button row
   and the note are laid out by c-btn-row / c-cta__note */
.p-reporting-optimization .p-rpt__final-actions{ margin-top:clamp(32px,5vw,44px); }

/* ================= RESPONSIVE ================= */
@media (max-width:1023px){
  .p-reporting-optimization .p-rpt__diagram{ height:clamp(460px,64vw,600px); }
  .p-reporting-optimization .p-rpt__diagram-step{ width:clamp(150px,26%,190px); }
  .p-reporting-optimization .p-rpt__diagram-line{ font-size:var(--t-note); }
}

@media (max-width:767px){
  .p-reporting-optimization .p-rpt__ring{ display:none; }
  .p-reporting-optimization .p-rpt__diagram-center{ display:none; }

  /* collapse the radial diagram to a plain stacked list - same four <li>,
     no transforms, ring hidden, reading order already linear */
  .p-reporting-optimization .p-rpt__diagram{
    width:100%; height:auto; margin-top:clamp(40px,8vw,56px);
  }
  .p-reporting-optimization .p-rpt__diagram-ring{ display:none; }
  .p-reporting-optimization .p-rpt__diagram-steps{
    position:static; display:flex; flex-direction:column; gap:var(--s-5);
  }
  .p-reporting-optimization .p-rpt__diagram-step{
    /* same specificity as the --1..--4 compass rules and later in source, so no !important */
    position:static; transform:none; width:auto; text-align:left; align-items:flex-start;
    padding-top:var(--s-4); border-top:1px solid rgba(255,255,255,.14);
  }
}