/* ══════════════════════════════════════════════════════════════════════════
   Automated Internal Reporting — version 2
   ══════════════════════════════════════════════════════════════════════════

   Page-local styles only. Everything general lives in shared.css; everything
   shared between pages lives in a ui-*.css / anim-*.css file declared in this
   page's deps.json. Nothing here edits either.

   Every selector carries the .static-page--automated-internal-reporting
   prefix. That is not decoration: the loader emits deps.json stylesheets AFTER
   this file, so at equal specificity a shared stylesheet would win on order.
   The slug prefix is what keeps this page in control of its own overrides.

   Colour comes from the --sp-* tokens in shared.css §2 and never from a
   literal, so a palette change lands here without an edit. The two exceptions
   are the four canonical hairline values (#E7EEEC container edge, #E6EDEB
   control edge, #EEF2F1 group divider, #F2F6F5 row divider) and the recessed
   surface #FBFDFC, none of which has a token yet.
   ══════════════════════════════════════════════════════════════════════════ */


/* ── Section surfaces ──────────────────────────────────────────────────────
   Light sections alternate white / recessed off-white, with a group-divider
   hairline drawn at each change so the boundary reads without a shadow. */

.static-page--automated-internal-reporting .ir2-surface-soft {
    background: #FBFDFC;
}

.static-page--automated-internal-reporting .ir2-hairline-top {
    border-top: 1px solid #EEF2F1;
}


/* ── Hero ────────────────────────────────────────────────────────────────── */

.static-page--automated-internal-reporting .ir2-hero {
    background:
        radial-gradient(1100px 520px at 12% -12%, #E8F3F1 0%, transparent 62%),
        radial-gradient(900px 460px at 92% 4%, var(--sp-brand-blue-tint) 0%, transparent 60%),
        #FBFDFC;
    /* The metric strip sits inside the hero so it shares this tinted ground
       and reads as the hero's closing line rather than as a new band. The
       hero grid above it closes at pb-0 and the section owns the bottom
       padding, which is what keeps the strip attached to the hero instead of
       floating between two surfaces. Carried over from version 1. */
    padding-bottom: var(--sp-space-6);
}

.static-page--automated-internal-reporting .ir2-hero-figure {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* The one moving element in the eyebrow: a single idea animated, not five. */
.static-page--automated-internal-reporting .ir2-pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sp-brand-teal);
    flex-shrink: 0;
    animation: ir2Pulse 1.8s ease-in-out infinite;
}

@keyframes ir2Pulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(0.8); }
}


/* ── In-copy links ─────────────────────────────────────────────────────────
   Teal underline rather than a button, because these sit inside sentences and
   a button mid-paragraph reads as an interruption. */

.static-page--automated-internal-reporting .ir2-link {
    color: var(--sp-brand-teal);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--sp-brand-teal-soft);
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.static-page--automated-internal-reporting .ir2-link:hover,
.static-page--automated-internal-reporting .ir2-link:focus-visible {
    color: var(--sp-brand-teal-dark);
    text-decoration-color: var(--sp-brand-teal);
}

.static-page--automated-internal-reporting .ir2-link--on-dark {
    color: var(--sp-ink-on-dark-accent);
    text-decoration-color: rgba(134, 207, 196, 0.5);
}

.static-page--automated-internal-reporting .ir2-link--on-dark:hover,
.static-page--automated-internal-reporting .ir2-link--on-dark:focus-visible {
    color: #ffffff;
    text-decoration-color: #ffffff;
}


/* ── Tick lists ────────────────────────────────────────────────────────────
   The live copy carries two bullet lists. They stay real <ul> markup so the
   text is a list to a screen reader; only the marker is replaced, by a tinted
   teal disc that matches the discs used elsewhere in the system. */

.static-page--automated-internal-reporting .ir2-lead-in {
    font-weight: 700;
    color: var(--sp-ink);
}

.static-page--automated-internal-reporting .ir2-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem 2rem;
    /* Only the sides this component has to zero. The bottom is left alone
       because `margin: 0` here outranks shared.css's .sp-mb-* utility on the
       same element — which is why the list sat flush against the paragraph
       below it even though the markup already asked for a gap. */
    margin-top: 0;
    margin-inline: 0;
    padding: 0;
    list-style: none;
}

/* A bottom margin only when the markup has not asked for one, so a list that
   ends a block still clears what follows and one carrying .sp-mb-md keeps the
   value that utility sets. */
.static-page--automated-internal-reporting .ir2-list:not([class*="sp-mb-"]) {
    margin-bottom: 0;
}

.static-page--automated-internal-reporting .ir2-list--stack {
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

/* A two-column grid rather than a flex row. The tick has a column of its own
   and the text has another, so a line that wraps starts at the text column's
   left edge instead of running back under the tick. The old flex row relied on
   the bare text node becoming an anonymous flex item, which is what let the
   wrap creep back under the disc; the text now sits in its own .ir2-list__text
   span so it is a real grid cell and cannot.

   align-items: start keeps the tick on the first line rather than centring it
   against a three-line item. The column is the disc's own width, so changing
   the disc size moves the text with it. */
.static-page--automated-internal-reporting .ir2-list > li {
    display: grid;
    grid-template-columns: 1.35rem minmax(0, 1fr);
    align-items: start;
    column-gap: 0.7rem;
    margin: 0;
    padding: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--sp-ink-soft);
}

.static-page--automated-internal-reporting .ir2-list__text {
    display: block;
    min-width: 0;
}

.static-page--automated-internal-reporting .ir2-list__tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: 0.18rem;
    border-radius: 50%;
    background: var(--sp-brand-teal-tint);
    color: var(--sp-brand-teal);
    font-size: 0.7rem;
    line-height: 1;
}

@media (max-width: 767px) {
    .static-page--automated-internal-reporting .ir2-list {
        grid-template-columns: 1fr;
    }
}


/* ── Report-structure column ───────────────────────────────────────────────
   Five name-and-description pairs beside the outline document. Separated by
   row-divider hairlines rather than cards, because they are sections of one
   document and five cards would claim five separate things. */

.static-page--automated-internal-reporting .ir2-structure__item + .ir2-structure__item {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #F2F6F5;
}


/* ── Shared graphic wrappers ───────────────────────────────────────────────
   .rpt-doc-wrap is the shared report component's own container element.
   Capping its width here is what stops a document mock stretching into thin
   sparse rows at wide viewports and ceasing to read as a product. */

/* Resting-card elevation: one tight shadow to hold the edge against the
   section, one wide one to lift. A single shadow doing both is either too
   hard at the edge or too weak underneath. */
/* ══ .ir2-flow — the source-to-report sequence ═════════════════════════════

   The one graphic built for this page. Three stages threaded on a single teal
   rail, because the section beside it argues that one route runs from an
   integrated source to a finished report, not that three separate features
   exist.

   The rail is drawn per stage rather than as one element spanning the list,
   because the stages are not equal heights: a single element could only be
   inset by a fixed amount at the bottom and would overshoot past the last
   node. Each stage draws the segment below its own node instead, so the
   geometry derives from the node size and the list gap and stays exact at any
   row height.

   line-height is set unitless on the root. The theme specifies line-height as
   a LENGTH, and lengths do not scale down: left inherited, an 11px label here
   would compute to roughly 2.6x leading and the panel would read as a diagram
   rather than as a product. This one declaration is the first thing to check
   if the graphic ever looks oversized.
   ═══════════════════════════════════════════════════════════════════════════ */

.static-page--automated-internal-reporting .ir2-flow {
    --ir2-pad: 1.05rem;
    --ir2-node: 2.1rem;
    --ir2-gap: 1.1rem;

    width: 100%;
    max-width: 30rem;
    margin-inline: auto;
    padding: var(--ir2-pad);
    background: #ffffff;
    border: 1px solid #E7EEEC;
    border-radius: 16px;
    box-shadow:
        0 1px 2px rgba(21, 41, 39, 0.05),
        0 18px 40px -26px rgba(21, 41, 39, 0.45);
    line-height: 1.35;
    letter-spacing: -0.005em;
}

.static-page--automated-internal-reporting .ir2-flow__stages {
    display: flex;
    flex-direction: column;
    gap: var(--ir2-gap);
}

.static-page--automated-internal-reporting .ir2-stage {
    position: relative;
    display: grid;
    grid-template-columns: var(--ir2-node) 1fr;
    gap: 0.9rem;
    align-items: start;
}

/* The rail segment below this stage's node. Height spans the remaining rows
   plus the flex gap, so it meets the next node exactly. */
.static-page--automated-internal-reporting .ir2-stage:not(.ir2-stage--end)::before {
    content: "";
    position: absolute;
    left: calc(var(--ir2-node) / 2 - 1px);
    top: var(--ir2-node);
    height: calc(100% - var(--ir2-node) + var(--ir2-gap));
    width: 2px;
    background: linear-gradient(180deg, var(--sp-brand-teal-soft), var(--sp-brand-teal-soft));
    border-radius: 2px;
}

.static-page--automated-internal-reporting .ir2-stage__node {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ir2-node);
    height: var(--ir2-node);
    border-radius: 50%;
    background: var(--sp-brand-teal-tint);
    color: var(--sp-brand-teal);
    font-size: 0.95rem;
    line-height: 1;
}

/* The last node is solid, because stage three is the outcome the section is
   arguing for — the one place the accent is spent. */
.static-page--automated-internal-reporting .ir2-stage__node--solid {
    background: var(--sp-brand-teal);
    color: #ffffff;
    box-shadow: 0 6px 14px -8px rgba(32, 121, 111, 0.9);
}

.static-page--automated-internal-reporting .ir2-stage__main {
    min-width: 0;
    padding-bottom: 0.15rem;
}

.static-page--automated-internal-reporting .ir2-stage__num {
    display: block;
    font-family: var(--sp-font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sp-ink-faint);
    margin-bottom: 0.15rem;
}

.static-page--automated-internal-reporting .ir2-stage__name {
    display: block;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--sp-ink);
    margin-bottom: 0.5rem;
}

/* Chips: source tags on stage one, report contents on stage three. */
.static-page--automated-internal-reporting .ir2-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.static-page--automated-internal-reporting .ir2-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.45rem;
    border: 1px solid #E6EDEB;
    border-radius: 7px;
    background: #FBFDFC;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--sp-ink-soft);
}

.static-page--automated-internal-reporting .ir2-chip i {
    font-size: 0.72rem;
    color: var(--sp-ink-muted);
}

.static-page--automated-internal-reporting .ir2-chip--on {
    border-color: var(--sp-brand-teal-soft);
    background: var(--sp-brand-teal-tint);
    color: var(--sp-brand-teal);
}

/* Stage two's rows. Label left, value right, faintest hairline between —
   the row divider, not the container edge, because these are rows inside one
   group rather than separate cards. */
.static-page--automated-internal-reporting .ir2-rows {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid #E6EDEB;
    border-radius: 10px;
    background: #FBFDFC;
    overflow: hidden;
}

.static-page--automated-internal-reporting .ir2-rows > li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    margin: 0;
    padding: 0.4rem 0.55rem;
    font-size: 0.72rem;
}

.static-page--automated-internal-reporting .ir2-rows > li + li {
    border-top: 1px solid #F2F6F5;
}

.static-page--automated-internal-reporting .ir2-rows__label {
    font-weight: 500;
    color: var(--sp-ink-soft);
    min-width: 0;
}

.static-page--automated-internal-reporting .ir2-rows__value {
    flex: none;
    font-weight: 600;
    color: var(--sp-ink-faint);
}

.static-page--automated-internal-reporting .ir2-stage__foot {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.55rem;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--sp-ink-muted);
}

.static-page--automated-internal-reporting .ir2-stage__foot i {
    font-size: 0.85rem;
    color: var(--sp-brand-blue);
}


/* ── Closing statement ─────────────────────────────────────────────────────
   The page's quietest moment, set in the display face on plain white. */

.static-page--automated-internal-reporting .ir2-statement {
    font-family: var(--sp-font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.6rem, 3vw, 2.35rem);
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--sp-ink);
    max-width: 54rem;
    margin: 0 auto;
    text-wrap: pretty;
}


/* ── Reduced motion ────────────────────────────────────────────────────────
   Freeze every animation at its RESOLVED end state, not at its start. A guard
   that leaves the report's skeleton bars at scaleX(0) would show an empty card
   to exactly the people who asked for less movement. */

@media (prefers-reduced-motion: reduce) {
    .static-page--automated-internal-reporting .ir2-pulse-dot {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .static-page--automated-internal-reporting .crpt,
    .static-page--automated-internal-reporting .crpt * {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .static-page--automated-internal-reporting .ir2-link {
        transition: none;
    }
}


/* ══ Questions → briefing — the ported version 1 dark band ═════════════════

   Carried over from automated-internal-reporting/body.css unchanged except
   for the ir- → ir2- prefix. The values are version 1's, deliberately: this
   section is a port, so retuning it here would make the two pages' one shared
   graphic drift apart.

   Two light cards either side of an arrow, on the dark band. Both sides being
   white is what makes the arrow read as a transformation rather than as a
   change of medium: these questions become this document. The arrow is the one
   place --sp-brand-blue earns its place, because it carries relationship
   rather than action.
   ═══════════════════════════════════════════════════════════════════════════ */

.static-page--automated-internal-reporting .ir2-transform {
    display: grid;
    grid-template-columns: 1fr 56px 1fr;
    align-items: center;
}

.static-page--automated-internal-reporting .ir2-transform__arrow {
    display: flex;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--sp-brand-blue);
}

.static-page--automated-internal-reporting .ir2-photo-card,
.static-page--automated-internal-reporting .ir2-doc-wrap {
    width: 100%;
    max-width: 520px;
}

.static-page--automated-internal-reporting .ir2-photo-card {
    margin-left: auto;
}

.static-page--automated-internal-reporting .ir2-doc-wrap {
    margin-right: auto;
}

/* Card on a dark ground: a single deep shadow, because there is no white
   behind it for a tight edge shadow to hold against. */
.static-page--automated-internal-reporting .ir2-photo-card,
.static-page--automated-internal-reporting .ir2-doc-wrap .rpt-doc {
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7);
}

.static-page--automated-internal-reporting .ir2-photo-card {
    background: #ffffff;
    border: 1px solid #EFF4F3;
    border-radius: 20px;
    padding: 1.5rem;
    color: var(--sp-ink);
    line-height: 1.35;
    letter-spacing: -0.005em;
    text-align: left;
}

.static-page--automated-internal-reporting .ir2-photo-card img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}

/* The four questions, as the caption to the photograph. */
.static-page--automated-internal-reporting .ir2-asks {
    margin-top: 1rem;
}

.static-page--automated-internal-reporting .ir2-asks__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid #EFF4F3;
}

.static-page--automated-internal-reporting .ir2-asks__title {
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
    color: #0E223B;
}

.static-page--automated-internal-reporting .ir2-asks__when {
    font-family: var(--sp-font-mono);
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sp-ink-faint);
}

.static-page--automated-internal-reporting .ir2-ask {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 0;
}

.static-page--automated-internal-reporting .ir2-ask + .ir2-ask {
    border-top: 1px solid #F4F8F7;
}

/* A role is named in words as well as marked with a glyph: a role has many
   people, so an avatar would misrepresent it. */
.static-page--automated-internal-reporting .ir2-ask__who {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: #FBFDFC;
    border: 1px solid #E6EDEB;
    color: var(--sp-ink-muted);
    font-size: 0.72rem;
    line-height: 1;
}

.static-page--automated-internal-reporting .ir2-ask__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.static-page--automated-internal-reporting .ir2-ask__text {
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--sp-ink);
}

.static-page--automated-internal-reporting .ir2-ask__meta {
    margin-top: 0.1rem;
    font-size: 0.65rem;
    line-height: 1.35;
    color: var(--sp-ink-faint);
}

/* Below the desktop two-column layout the arrow rotates 90 degrees and the
   cards stack, so reading order is preserved rather than reversed. */
@media (max-width: 1023px) {
    .static-page--automated-internal-reporting .ir2-transform {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .static-page--automated-internal-reporting .ir2-transform__arrow {
        transform: rotate(90deg);
    }

    .static-page--automated-internal-reporting .ir2-photo-card,
    .static-page--automated-internal-reporting .ir2-doc-wrap {
        margin-inline: auto;
    }
}


/* ══ Layouts borrowed from version 1 ═══════════════════════════════════════

   Three shapes carried over so version 2 does not read as two layouts
   repeated. Each keeps version 1's values; only the prefix and the scope
   changed. Where a rule here sits on top of a shared.css primitive
   (.sp-rule-grid, .sp-card--dark), it adds what the primitive does not cover
   and nothing else.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── Icon plate on a dark card ─────────────────────────────────────────────
   The tinted-blue .sp-feature-icon disappears on .sp-card--dark, so the dark
   card gets a translucent white plate instead, at the same 2.75rem box so the
   three cards' icons sit on one line. */

.static-page--automated-internal-reporting .ir2-icon-dark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--sp-radius);
    background: rgba(255, 255, 255, 0.10);
    color: var(--sp-ink-on-dark-accent);
    font-size: 1.4rem;
    line-height: 1;
}


/* ── Hero metric strip ─────────────────────────────────────────────────────
   Four values on the vertical rules of .sp-rule-grid. Every value is a
   structural fact about the product (how many levels it writes at, what
   rhythm it runs on, what it removes, how it arrives) rather than a
   performance statistic, so the strip claims nothing the page's prose does
   not also say. The value carries the weight and the label is muted and
   capped, so it wraps predictably instead of running the cell wide. Carried
   over from version 1. */

.static-page--automated-internal-reporting .ir2-metric__value {
    font-size: clamp(1.5rem, 2.3vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--sp-brand-teal);
    margin-bottom: 0.6rem;
}

.static-page--automated-internal-reporting .ir2-metric__label {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--sp-ink-muted);
    max-width: 12rem;
}


/* ══ Hero figure — sizing the shared .crpt report card ═════════════════════

   .crpt ships every internal dimension as a fixed pixel value (9px to 13px
   type, an 8px skeleton bar, a 95px donut), so widening its box alone would
   leave all of that at its original size and turn a small document into a wide
   panel with tiny text in it. zoom scales layout as well as paint, so one
   number moves the whole component and it stays sharp. The client reporting
   page reached the same conclusion and uses the same mechanism; this is that
   decision applied to a wider column, not a second approach.

   1.5 is chosen against the hero grid rather than picked: the right column is
   520px, the card's own cap is 340px, and 340 x 1.5 = 510px, the largest round
   step that still clears the column. At 1024px, the narrowest viewport where
   the two-column hero applies, the container is 976px wide, so the 520px
   column and the 64px gap leave 392px for the text, which wraps rather than
   overflows. At 1280px the text column is 568px.
   ═══════════════════════════════════════════════════════════════════════════ */

.static-page--automated-internal-reporting .ir2-hero-figure .crpt {
    zoom: 1.5;
}

/* The zoom has to come off before the card outgrows the screen. zoom scales
   the resolved width, so max-width:340px resolves first and is then multiplied
   to 510px whatever the container is. The container is the viewport less the
   2 x 1.5rem of .sp-container padding, so it clears 510px only from a 558px
   viewport up; below that the card would push the page sideways. */
@media (max-width: 557px) {
    .static-page--automated-internal-reporting .ir2-hero-figure .crpt {
        zoom: 1;
    }
}

/* ── Stop the bottom crop ──────────────────────────────────────────────────
   The markup carries Tailwind's `aspect-square`, which forces the card's
   height to equal its width. .crpt is `overflow: hidden`, so any content past
   that square is simply cut, which is what sliced the last section off.

   The fix is to let the card size to its own content instead of to a shape:
   with height:auto the box always contains its sections and its own 20px
   bottom padding, so it can never end mid-section and never looks sliced. The
   old square becomes a floor rather than a ceiling, so a short card still
   reads as a document rather than as a strip.

   Nothing in the animation depends on this. All three keyframe sets
   (crptFadeDown, crptLineGrow, crptDonutIn) animate only opacity and
   transform — translateY, scaleX, scale and rotate. None references height,
   so there is no height at which the animation stops working and no largest
   safe value to pick. */
.static-page--automated-internal-reporting .ir2-hero-figure .crpt {
    aspect-ratio: auto;
    height: auto;
}

/* ── Make the fourth section visible ───────────────────────────────────────
   anim-client-report.css animates .crpt__section:nth-child(3), (4) and (5) —
   three sections, which is what the home page and the client reporting page
   carry. This page carries four, so the fourth (Challenges and Risks, at
   nth-child(6)) inherited `opacity: 0` with no animation to bring it back and
   was reserving space it never used. It now runs the same cycle one step
   behind the third.

   nth-child(3) is given margin-bottom:0 upstream because it is the LAST
   section on a three-section card. Here it is the first of four, so the gap
   after it is restored to the same 10px every other section uses. */
.static-page--automated-internal-reporting .ir2-hero-figure .crpt__section:nth-child(3) {
    margin-bottom: 10px;
}

.static-page--automated-internal-reporting .ir2-hero-figure .crpt__section:nth-child(6) {
    animation: crptFadeDown 8s ease infinite;
    animation-delay: 0.9s;
}

.static-page--automated-internal-reporting .ir2-hero-figure .crpt__section:nth-child(6) .crpt__line {
    animation: crptLineGrow 8s ease infinite;
    animation-delay: 0.9s;
}


/* ── Condensing the hero card ──────────────────────────────────────────────
   The card kept its width and lost its height. Four changes, in the order
   they matter.

   1. A unitless line-height. .crpt sets none, so it inherits the theme's,
      which is specified as a LENGTH and therefore does not scale down: every
      text row in the card resolved to about 30.6px whatever its font-size, so
      a 9px section title occupied the same vertical space as a 23px heading.
      Seven text rows at 30.6px was 214px of the card's 538px, which is why no
      combination of the other three levers could reach the target on its own.
      1.35 is the ratio every other graphic on this page already uses.

   2. Two skeleton bars per section instead of three or five. The bars stand in
      for prose nobody is meant to read, so a row of them past the second is
      filling space rather than saying anything. Executive Summary keeps three
      because its row is governed by the 95px donut beside it, not by the bars.

   3. Tighter margins and padding, each cut by at most a third so the card
      still reads as a document with air in it rather than as a list: card
      padding 20 to 14, logo and header margins 14 to 10, section margin 10 to
      7, section title margin 6 to 4.

   4. The donut is untouched and the zoom stays at 1.5, because the first three
      levers reached the target without them.

   Arithmetic, unzoomed, as the card stands after the donut was floated and
   the section gaps opened up: 14 padding + 48.15 logo + 42.05 header + 50.15
   Executive Summary + 50.15 + 50.15 + 50.15 sections + 3 x 10 gaps + 7
   trailing + 14 padding = 355.8px. At zoom 1.5 that is 534px against a 510px
   card. The card sits at its content height with no floor under it. */

.static-page--automated-internal-reporting .ir2-hero-figure .crpt {
    line-height: 1.35;
    padding-top: 14px;
    padding-bottom: 14px;
}

.static-page--automated-internal-reporting .ir2-hero-figure .crpt__logo,
.static-page--automated-internal-reporting .ir2-hero-figure .crpt__hdr {
    margin-bottom: 10px;
}

.static-page--automated-internal-reporting .ir2-hero-figure .crpt__section,
.static-page--automated-internal-reporting .ir2-hero-figure .crpt__section:nth-child(3) {
    margin-bottom: 7px;
}

.static-page--automated-internal-reporting .ir2-hero-figure .crpt__section-title {
    margin-bottom: 4px;
}


/* ── Wrapping the text around the donut ────────────────────────────────────
   Before this, the donut was a flex sibling of Executive Summary's skeleton
   bars, so that one row was 95px tall to hold a 34px stack of bars and the
   next section could not start until the donut had finished. That left roughly
   55px of empty card under the bars.

   Making the donut a float fixes it, but a float can only wrap content inside
   its own block formatting context, and `float` is ignored outright on a flex
   item. .crpt ships as `display: flex; flex-direction: column`, which makes
   every section its own flex item, so a float inside Executive Summary could
   never reach Key Achievements. Switching .crpt to `display: block` is
   therefore the load-bearing change here, not a tidy-up.

   Nothing depends on .crpt being a flex container: its children are full-width
   either way (a column flex container stretches them, a block container fills
   them), and the two rules that are flex-specific, `.crpt__lines { flex: 1 }`
   and `.crpt__donut { flex-shrink: 0 }`, belong to .crpt__section-body, which
   stays flex. The nth-child indices the animations key off are untouched
   because no element was added to or removed from .crpt. */

.static-page--automated-internal-reporting .ir2-hero-figure .crpt {
    display: block;
}

/* The float runs past the bottom of its own section and keeps pushing the line
   boxes of the sections after it, which is exactly the wrap that was wanted.
   10px is the horizontal gap .crpt__section-body already used between the bars
   and the donut, so the spacing is the component's own value rather than a new
   one. */
.static-page--automated-internal-reporting .ir2-hero-figure .crpt__donut {
    float: right;
    margin-left: 10px;
}

/* .crpt__section-body is `display: flex`, so it is a block formatting context
   root and narrows to avoid the float rather than sliding under it. That is
   what puts the bars beside the donut instead of behind it, and it needs no
   rule of its own. */

/* Team Insights, the third section, starts at full width again. On the current
   content the float has already ended by then so this adds no space; it is
   here so that an edit which lengthens Executive Summary or Key Achievements
   cannot push a later section into the donut. */
.static-page--automated-internal-reporting .ir2-hero-figure .crpt__section:nth-child(5) {
    clear: right;
}


/* ── Air above each section heading ────────────────────────────────────────
   10px above every section title from the second section onward. .crpt is
   display: block on this page, so this margin-top collapses with the previous
   section's 7px margin-bottom and the larger of the two wins — the gap is
   exactly 10px, not 17px. Written as an adjacent-sibling rule so the first
   section is untouched and its title keeps its existing distance from the
   header row, and so the trailing margin under the last section stays at 7px
   rather than doubling the card's bottom padding. The 4px title-to-bars gap
   inside each section is unchanged. */

.static-page--automated-internal-reporting .ir2-hero-figure .crpt__section + .crpt__section {
    margin-top: 10px;
}



/* ══ .ir2-stagger — the five report sections, all on screen ════════════════

   A two-column grid in row order: cards fill left to right, so row one holds
   1 and 2, row two holds 3 and 4, and 5 opens row three. DOM order is 1 to 5
   and the grid never reorders, so reading order, the accessibility tree and
   the copy extraction all match what is on screen.

   The stagger is a top offset on the right-hand card of each row, applied to
   the even-numbered items. `align-items: start` is what makes it a stagger
   rather than a stretch: each card takes its own content height instead of
   filling the row, so the offset card sits lower and ends lower rather than
   being squashed to the row's bottom edge.

   This replaced a CSS multi-column layout, which filled 1, 2, 3 down the left
   column and 4, 5 down the right. The reason that was chosen originally, that
   a grid row grows to hold its tallest card, is handled here by offsetting
   with margin and letting each card size itself. */

.static-page--automated-internal-reporting .ir2-stagger {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
    margin: 0;
    padding: 0;
    list-style: none;
}

.static-page--automated-internal-reporting .ir2-stagger__item {
    margin: 0;
    padding: 0;
}

@media (min-width: 640px) {
    .static-page--automated-internal-reporting .ir2-stagger {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }

    /* The right-hand card of every row, dropped so the pair reads as a
       stagger. The margin lives on the item, so the card below it in the same
       column starts from the offset position and the vertical gap between
       them stays the grid gap. */
    .static-page--automated-internal-reporting .ir2-stagger__item:nth-child(even) {
        margin-top: 1rem;
    }
}

@media (min-width: 1024px) {
    .static-page--automated-internal-reporting .ir2-stagger {
        gap: 1.5rem;
    }

    .static-page--automated-internal-reporting .ir2-stagger__item:nth-child(even) {
        margin-top: 2rem;
    }
}

/* ── Scroll box ────────────────────────────────────────────────────────────
   The height is capped on this wrapper, never on the <ol>: a multi-column
   list given a height spills into extra columns sideways instead of
   scrolling. body.js writes --ir2-stagger-h so the cut lands three quarters
   of the way down card 3, the first card of the second row; 22rem is the fallback until it runs.

   The scrollbar is hidden in every engine (scrollbar-width for Firefox and
   current Chromium, -ms-overflow-style for legacy Edge, the ::-webkit-
   scrollbar rule for Safari and older Chromium). The faded bottom edge is
   the only cue that more cards sit below.

   The padding gives the hover lift and the card shadows room inside the
   clipping edge, and the matching negative margin keeps the cards where they
   were. The mask fades the bottom 6rem to transparent, and drops once the
   reader has scrolled to the end so the last card is not left half faded. */
.static-page--automated-internal-reporting .ir2-stagger-scroll {
    position: relative;
    max-height: var(--ir2-stagger-h, 22rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 1rem 1.25rem 0;
    margin: -1rem -1.25rem 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 6rem), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 6rem), transparent);
}

/* Below 1024px the scroll box is capped at half the viewport height, whatever
   body.js computes. The box sets overscroll-behavior: contain, so a touch that
   starts inside it scrolls only the box; if the box fills most of a phone
   screen, the reader has almost nowhere to put a thumb to scroll the page
   itself. Half the viewport always leaves the other half free. svh measures
   the viewport with the browser toolbar shown, so the cap does not grow when
   the toolbar collapses; the vh line is the fallback for older engines. */
@media (max-width: 1023px) {
    .static-page--automated-internal-reporting .ir2-stagger-scroll {
        max-height: min(var(--ir2-stagger-h, 22rem), 50vh);
        max-height: min(var(--ir2-stagger-h, 22rem), 50svh);
    }
}

.static-page--automated-internal-reporting .ir2-stagger-scroll::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.static-page--automated-internal-reporting .ir2-stagger-scroll.is-at-end {
    -webkit-mask-image: none;
    mask-image: none;
}

.static-page--automated-internal-reporting .ir2-stagger-scroll:focus-visible {
    outline: 2px solid var(--sp-brand-dark);
    outline-offset: 2px;
}

/* ── Skeleton to text ──────────────────────────────────────────────────────
   body.js adds .is-armed to the list only when it can run the reveal
   (IntersectionObserver present, reduced motion not requested), so without
   the script, or for a reader who asked for less motion, the text is simply
   there.

   While a card waits, its text is transparent and each .ir2-skel inline span
   paints a bar behind every line it occupies. box-decoration-break: clone
   gives each wrapped line its own bar at that line's real width, so the
   skeleton has the exact shape of the text it stands for and the reveal
   moves nothing.

   The bar is an SVG rounded rectangle rather than a linear-gradient band,
   because border-radius rounds the whole line box, which is taller than the
   bar, so the bar's own corners stayed square. The SVG has no viewBox: it
   is drawn at the size of each line's background area, so the 4px corner
   radius holds at any width, including while the reveal shrinks it.

   Reveal (.is-revealed): the bars shrink away towards the right edge while
   the text fades in just behind them. When it finishes, body.js adds
   .is-done, which drops every rule here so the hover colour change is not
   slowed by the reveal's transition. */
.static-page--automated-internal-reporting .ir2-stagger.is-armed .ir2-stagger__card:not(.is-done) .ir2-skel {
    --ir2-skel-bar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='16%25' width='100%25' height='64%25' rx='4' fill='%23E6EDEB'/%3E%3C/svg%3E");
    background-image: var(--ir2-skel-bar);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 100% 100%;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.static-page--automated-internal-reporting .ir2-stagger.is-armed .ir2-stagger__card:not(.is-revealed) .ir2-skel {
    color: transparent;
}

.static-page--automated-internal-reporting .ir2-stagger.is-armed .ir2-stagger__card:not(.is-revealed):hover .ir2-skel {
    --ir2-skel-bar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='16%25' width='100%25' height='64%25' rx='4' fill='white' fill-opacity='0.14'/%3E%3C/svg%3E");
}

.static-page--automated-internal-reporting .ir2-stagger.is-armed .ir2-stagger__card.is-revealed:not(.is-done) .ir2-skel {
    background-size: 0% 100%;
    transition:
        background-size 560ms cubic-bezier(0.4, 0, 0.2, 1),
        color 420ms ease-out 140ms;
}

/* The paragraph starts a beat after the heading, so each card reads as
   title first, then body. */
.static-page--automated-internal-reporting .ir2-stagger.is-armed .ir2-stagger__card.is-revealed:not(.is-done) .sp-body .ir2-skel {
    transition-delay: 160ms, 300ms;
}

/* ── Cards ─────────────────────────────────────────────────────────────────
   One treatment: .sp-card's white surface and #E7EEEC container edge, plus the
   resting-card shadow pair this page also puts under the dark band's report
   document — one tight shadow to hold the edge against the white section, one
   wide one to lift. On a white surface a hairline alone reads flat.

   The dark state is now something the reader causes rather than something that
   happens to them: the walking highlight and its four keyframe sets are gone,
   and the same dark treatment arrives on hover and on focus-within. That also
   removes the 2.2.2 "Pause, Stop, Hide" exposure a permanent colour cycle
   carried, since nothing moves on its own any more.

   Title, body and numeral each declare their own colour, so each needs its own
   transition; a transition on the card alone would not reach them. */

.static-page--automated-internal-reporting .ir2-stagger__card {
    position: relative;
    height: 100%;
    background-color: #ffffff;
    border-color: #E7EEEC;
    box-shadow:
        0 1px 2px rgba(21, 41, 39, 0.05),
        0 18px 40px -26px rgba(21, 41, 39, 0.45);
    transition:
        background-color 200ms ease-out,
        border-color 200ms ease-out,
        transform 200ms ease-out,
        box-shadow 200ms ease-out;
}

.static-page--automated-internal-reporting .ir2-stagger__card .sp-h3 {
    color: var(--sp-ink);
    transition: color 200ms ease-out;
}

.static-page--automated-internal-reporting .ir2-stagger__card .sp-body {
    color: var(--sp-ink-soft);
    transition: color 200ms ease-out;
}

/* ── Hover and focus ──────────────────────────────────────────────────────
   The card goes to the page's own dark-card treatment — --sp-brand-dark with
   the on-dark text tokens .sp-card--dark and .sp-on-dark give the icon trio's
   third card — and lifts 4px, the wide half of its shadow deepening from the
   resting role to the raised one. The two shadow roles differ only in that
   second value, so the card reads as rising rather than as swapping.

   The border takes the dark value rather than .sp-card--dark's own
   `border-color: transparent`, which against this white section would leave a
   1px white ring around an otherwise solid block. */

.static-page--automated-internal-reporting .ir2-stagger__card:hover,
.static-page--automated-internal-reporting .ir2-stagger__card:focus-within {
    background-color: var(--sp-brand-dark);
    border-color: var(--sp-brand-dark);
    transform: translateY(-4px);
    box-shadow:
        0 1px 2px rgba(21, 41, 39, 0.06),
        0 26px 54px -24px rgba(21, 41, 39, 0.5);
}

.static-page--automated-internal-reporting .ir2-stagger__card:hover .sp-h3,
.static-page--automated-internal-reporting .ir2-stagger__card:focus-within .sp-h3 {
    color: #ffffff;
}

.static-page--automated-internal-reporting .ir2-stagger__card:hover .sp-body,
.static-page--automated-internal-reporting .ir2-stagger__card:focus-within .sp-body {
    color: var(--sp-ink-on-dark);
}

.static-page--automated-internal-reporting .ir2-stagger__card:hover .ir2-stagger__num,
.static-page--automated-internal-reporting .ir2-stagger__card:focus-within .ir2-stagger__num {
    color: var(--sp-ink-on-dark-accent);
}

/* The colours still change, because a change of colour is not motion in the
   sense the setting is about; the movement is what goes. */
@media (prefers-reduced-motion: reduce) {
    .static-page--automated-internal-reporting .ir2-stagger__card:hover,
    .static-page--automated-internal-reporting .ir2-stagger__card:focus-within {
        transform: none;
    }
}

/* The numeral, in the page's kicker treatment: same mono face, same tracking,
   same uppercase micro-label role. Teal, because it is the one thing in the
   card that orders rather than says. */
.static-page--automated-internal-reporting .ir2-stagger__num {
    display: block;
    margin-bottom: 0.9rem;
    font-family: var(--sp-font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1;
    color: var(--sp-brand-teal);
    transition: color 200ms ease-out;
}


/* ══ .irpt — the stack of report pages ═════════════════════════════════════

   Ported verbatim from static-pages/home/body.css, re-scoped under this
   page's slug. Values are the home page's, unchanged: this is one graphic
   shown on two pages, and retuning a copy of it here is how the two would
   drift apart.

   The keyframe names stay global. irptPage1, irptPage2 and irptPage3 appear
   in none of the five stylesheets this page loads (shared.css, this file,
   anim-client-report.css, ui-report-document.css, ui-decision-tree.css), so
   there is nothing for them to collide with, and scoping a keyframe name buys
   nothing anyway since @keyframes has no selector to qualify.

   One declaration is NOT from the home page: line-height on the root. The
   home rules never set one, and this theme specifies line-height as a LENGTH,
   which does not scale down, so the report pages' 8px to 11px labels would
   each occupy roughly 30px of leading and the stacked pages would burst. The
   same fix .crpt and .ir2-flow already carry on this page. */

.static-page--automated-internal-reporting .irpt {
    line-height: 1.35;
}

.static-page--automated-internal-reporting .irpt {
    position: relative; overflow: visible; display: flex; align-items: center; justify-content: center;
}

.static-page--automated-internal-reporting .irpt__page {
    position: absolute;
    width: 85%; height: 92%;
    background: #fff; border: 1px solid #E2E8F0;
    box-shadow: 0 4px 16px rgba(15,23,42,.08);
    padding: 14px 14px;
    display: flex; flex-direction: column;
    font-family: var(--bodyfontfamily, system-ui, sans-serif);
    overflow: hidden;
    transform-origin: bottom left;
}

.static-page--automated-internal-reporting .irpt__page:nth-child(1) {
    z-index: 1; animation: irptPage1 10s ease-in-out infinite;
}

.static-page--automated-internal-reporting .irpt__page:nth-child(2) {
    z-index: 2; animation: irptPage2 10s ease-in-out infinite;
}

.static-page--automated-internal-reporting .irpt__page:nth-child(3) {
    z-index: 3; animation: irptPage3 10s ease-in-out infinite;
}

@keyframes irptPage1 {
            0%, 8%   { transform: rotate(0deg); opacity: 1; }
            18%      { transform: rotate(-18deg); opacity: 1; }
            78%      { transform: rotate(-18deg); opacity: 1; }
            84%      { transform: rotate(-18deg); opacity: 1; }
            90%      { transform: rotate(-18deg); opacity: 0; }
            91%      { transform: rotate(0deg); opacity: 0; }
            100%     { transform: rotate(0deg); opacity: 0; }
            }

@keyframes irptPage2 {
            0%, 8%   { transform: rotate(0deg); opacity: 1; }
            18%      { transform: rotate(0deg); opacity: 1; }
            68%      { transform: rotate(0deg); opacity: 1; }
            74%      { transform: rotate(0deg); opacity: 1; }
            80%      { transform: rotate(0deg); opacity: 0; }
            81%      { transform: rotate(0deg); opacity: 0; }
            100%     { transform: rotate(0deg); opacity: 0; }
            }

@keyframes irptPage3 {
            0%, 8%   { transform: rotate(0deg); opacity: 1; }
            18%      { transform: rotate(14deg); opacity: 1; }
            58%      { transform: rotate(14deg); opacity: 1; }
            64%      { transform: rotate(14deg); opacity: 1; }
            70%      { transform: rotate(14deg); opacity: 0; }
            71%      { transform: rotate(0deg); opacity: 0; }
            100%     { transform: rotate(0deg); opacity: 0; }
            }

.static-page--automated-internal-reporting .irpt__logo {
    display: flex; flex-direction: column; align-items: center; gap: 1px; margin-bottom: 8px;
}

.static-page--automated-internal-reporting .irpt__logo-name {
    font-size: 8px; font-weight: 700; color: #0F172A;
}

.static-page--automated-internal-reporting .irpt__hdr {
    display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px;
}

.static-page--automated-internal-reporting .irpt__label {
    font-size: 9px; font-weight: 700; color: #20796F;
}

.static-page--automated-internal-reporting .irpt__company {
    font-size: 11px; font-weight: 800; color: #0F172A; font-family: var(--headingsfontfamily, sans-serif); margin-top: 1px;
}

.static-page--automated-internal-reporting .irpt__date {
    font-size: 8px; font-weight: 600; color: #64748B;
}

.static-page--automated-internal-reporting .irpt__sect {
    margin-bottom: 7px;
}

.static-page--automated-internal-reporting .irpt__sect-title {
    font-size: 8px; font-weight: 700; color: #0F172A; margin-bottom: 4px;
}

.static-page--automated-internal-reporting .irpt__sect-body {
    display: flex; gap: 8px; align-items: flex-start;
}

.static-page--automated-internal-reporting .irpt__lines {
    display: flex; flex-direction: column; gap: 4px; flex: 1;
}

.static-page--automated-internal-reporting .irpt__line {
    height: 7px; border-radius: 2px; background: #E2E8F0;
}

.static-page--automated-internal-reporting .irpt__donut {
    width: 60px; height: 60px; flex-shrink: 0; margin-top: -4px;
}


/* ── Report-pages figure column ────────────────────────────────────────────
   The graphic is bounded at 340px while the text column beside it runs a
   kicker, a heading, a paragraph, a lead-in, four ticked items and a button,
   so left alone it sits against the top-left corner of a much taller column.
   A flex container as the grid child centres it on both axes instead.

   align-self: stretch is what gives that container the full row height to
   centre within. The section's grid carries items-start, which sets
   align-items: start on the container and therefore the DEFAULT align-self
   for every child; a child's own align-self always wins over the parent's
   align-items, so this overrides items-start for this one item and leaves the
   grid classes untouched, exactly as the sibling section still has them.
   Stretch then resolves to the row height, which is the height of the taller
   item in the row: the text column.

   The stretch is confined to lg and up, because below 1024px the grid is a
   single column and every item is alone in its row, where stretch would
   resolve to the item's own content height anyway. Down there the container
   only centres horizontally and the grid's gap-12 supplies the space between
   the text and the graphic. */

.static-page--automated-internal-reporting .ir2-irpt-figure {
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width: 1024px) {
    .static-page--automated-internal-reporting .ir2-irpt-figure {
        align-self: stretch;
    }
}


/* ── Scaling the report-pages stack ────────────────────────────────────────
   .irpt ships every internal dimension as a fixed pixel value (8px to 11px
   type, 7px skeleton bars, a 60px donut, 8 to 10px margins), so widening its
   box alone would leave all of that at its original size and turn a small
   document into a wide panel with tiny text in it. zoom scales layout as well
   as paint, so one number moves the whole component and it stays sharp. It is
   the same mechanism the hero .crpt uses above, applied to a second graphic
   rather than a second approach.

   zoom also scales the element's USED size, not just its painted pixels, so
   the flex container around it still sees a 442px-wide item and still centres
   it on both axes. A transform would not: it would leave a 340px box in the
   layout with a larger picture drawn over it, and the centring would be wrong
   by half the difference.

   1.3 against the grid: the graphic's own cap is 340px, and 340 x 1.3 = 442px.
   At 1024px, the narrowest viewport where the two-column layout applies, the
   container is 976px inside its padding, so the 64px lg:gap-16 leaves two
   456px columns and the 442px graphic clears its column by 14px. At a full
   1200px container the columns are 544px and it clears by 102px. */

/* The zoom applies only from 1024px, where the two-column layout exists. The
   1.3 is sized to fill a desktop column; below 1024px the graphic stacks in a
   single column under the text, and there the enlargement only made a phone
   or tablet scroll past an oversized picture, so the graphic renders at its
   own 340px cap instead. */
@media (min-width: 1024px) {
    .static-page--automated-internal-reporting .ir2-irpt-figure .irpt {
        zoom: 1.3;
    }
}


/* ══ FAQ ═══════════════════════════════════════════════════════════════════
   Native <details>/<summary>. The browser supplies the open/close behaviour,
   the keyboard handling and the correct expanded/collapsed announcement, so
   there is no script and no plugin stylesheet involved — and every answer is
   in the page's text whether or not it has been opened.

The default disclosure triangle is removed on both the standard and the
   WebKit-prefixed pseudo-element and replaced by a caret on the right, which
   is where this site's other disclosure controls put it. Removing only one of
   the two leaves a stray marker in Safari. */
.static-page--automated-internal-reporting .ir2-faq {
    max-width: 52rem;
    margin-inline: auto;
}

.static-page--automated-internal-reporting .ir2-faq__item {
    background: #ffffff;
    border: 1px solid #E9EFEE;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(21, 41, 39, 0.04);
}

.static-page--automated-internal-reporting .ir2-faq__item + .ir2-faq__item {
    margin-top: 0.7rem;
}

.static-page--automated-internal-reporting .ir2-faq__item[open] {
    border-color: var(--sp-brand-teal-soft);
    box-shadow: 0 1px 2px rgba(21, 41, 39, 0.05),
                0 14px 32px -22px rgba(21, 41, 39, 0.45);
}

.static-page--automated-internal-reporting .ir2-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.05rem 1.3rem;
    cursor: pointer;
    list-style: none;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.45;
    color: var(--sp-ink);
}

.static-page--automated-internal-reporting .ir2-faq__q::-webkit-details-marker { display: none; }

.static-page--automated-internal-reporting .ir2-faq__q::marker { content: ""; }

.static-page--automated-internal-reporting .ir2-faq__item[open] .ir2-faq__q {
    color: var(--sp-brand-teal-dark);
}

/* Focus is drawn on the summary itself rather than being left to the UA: the
   summary is the control, and a keyboard user needs to see where they are. */
.static-page--automated-internal-reporting .ir2-faq__q:focus-visible {
    outline: 2px solid var(--sp-brand-teal);
    outline-offset: -2px;
    border-radius: 14px;
}

/* A tinted disc that fills solid when open, so the control reads as a control
   at a glance. It rotates rather than swapping glyph, which is one rule
   instead of two and keeps open and closed obviously the same button. */
.static-page--automated-internal-reporting .ir2-faq__caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: var(--sp-brand-teal-tint);
    font-size: 0.8rem;
    color: var(--sp-brand-teal);
    transition: transform 0.2s ease, background 0.2s ease;
}

.static-page--automated-internal-reporting .ir2-faq__item[open] .ir2-faq__caret {
    transform: rotate(180deg);
    background: var(--sp-brand-teal);
    color: #ffffff;
}

.static-page--automated-internal-reporting .ir2-faq__a {
    padding: 0 1.3rem 1.2rem;
}

.static-page--automated-internal-reporting .ir2-faq__a p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--sp-ink-soft);
}

/* The one answer that carries a cross-link puts it on its own line, so it
   reads as the next thing to do rather than as a phrase inside a sentence. */
.static-page--automated-internal-reporting .ir2-faq__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.7rem;
    font-weight: 600;
    color: var(--sp-brand-teal);
    text-decoration: none;
}

.static-page--automated-internal-reporting .ir2-faq__link:hover,
.static-page--automated-internal-reporting .ir2-faq__link:focus-visible {
    color: var(--sp-brand-teal-dark);
    text-decoration: underline;
}

.static-page--automated-internal-reporting .ir2-faq__link i {
    font-size: 0.85rem;
}

@media (prefers-reduced-motion: reduce) {
    .static-page--automated-internal-reporting .ir2-faq__caret {         transition: none;     }
}

/* ── The report fan on phones ──────────────────────────────────────────────
   The fan leans left: the back page swings -18deg and the top page +14deg,
   so at the stack's 340px size the text spans about 395px and the page
   corners about 453px, centred 13px left of the stack. A 390px screen has
   358px between its 16px gutters, so "Department Report" and "Sales" started
   past the left edge and "June 2025" crossed the right gutter. A shift alone
   cannot fix both sides, and smaller angles would tuck the back page's
   header under the middle page, so below 500px the whole stack zooms to 0.85
   (the same zoom mechanism the desktop 1.3 uses above) and the figure's 24px
   left padding moves its centre 12px right to balance the lean. The angles,
   timing and composition stay exactly as on desktop. Below 380px the zoom
   drops to 0.8 so 360 to 375px phones fit as well. */
@media (max-width: 499px) {
    .static-page--automated-internal-reporting .ir2-irpt-figure {
        padding-left: 24px;
    }
    .static-page--automated-internal-reporting .ir2-irpt-figure .irpt {
        zoom: 0.85;
    }
}
@media (max-width: 379px) {
    .static-page--automated-internal-reporting .ir2-irpt-figure .irpt {
        zoom: 0.8;
    }
}