/* Integrated Automated Client Reporting Made Easy — page-specific styles only.
 *
 * Everything reusable (type scale, cards, dark panel, badges, rule grids,
 * buttons, feature-icon discs) comes from shared.css. The two graphics come
 * from partials this page declares in deps.json: anim-client-report.css draws
 * the hero's animated report, ui-report-document.css draws the static branded
 * document that appears twice. What is left here is either a composition this
 * page invents — the hero surface, the updates card, the transform row, the
 * section index, the FAQ list — or a value genuinely tuned to this page.
 *
 * Surfaces, hairlines, metric strip, pulse dot, FAQ and closing statement are
 * deliberately the same values as the voice-to-text and knowledge base pages
 * rather than approximations of them: the three are siblings in one product
 * section, and a reader moving between them should not be able to see a seam.
 *
 * All selectors are scoped to
 * .static-page--integrated-automated-client-reporting-made-easy, so nothing
 * leaks into the home, integrations, voice or knowledge base pages. The prefix
 * is also what keeps this page in control of the two shared partials: deps.json
 * styles are emitted AFTER this file, so order would hand a bare `.rpt-doc`
 * rule back to the partial — specificity is what wins, not order.
 */

/* ── Surfaces ──────────────────────────────────────────────────────────────
   Off-white alternating with plain white down the page, a hairline at each
   change. A hair warmer than slate-50 so it reads as paper rather than grey. */
.static-page--integrated-automated-client-reporting-made-easy .cr-surface-soft {
    background: #FBFDFC;
}
.static-page--integrated-automated-client-reporting-made-easy .cr-hairline-top {
    border-top: 1px solid #EEF2F1;
}

/* ── Hero ──────────────────────────────────────────────────────────────────
   The same flat --sp-brand-dark surface as the "Your own systems" card further
   down, with .sp-on-dark on the section re-pointing the headline, lede and
   body copy to white and the on-dark text tokens. Flat rather than the
   .sp-panel-dark gradient, because the gradient belongs to the page's one
   dark band and the hero should not read as a second copy of it. */
.static-page--integrated-automated-client-reporting-made-easy .cr-hero {
    background: var(--sp-brand-dark);
    padding-bottom: var(--sp-space-6);
}

/* Secondary button on the dark hero: transparent with an on-dark outline, so
   it sits behind the white primary (.sp-btn--invert) instead of competing
   with it as a second white button. */
.static-page--integrated-automated-client-reporting-made-easy .cr-hero .sp-btn--ghost {
    background: transparent;
    color: #ffffff;
    border-color: rgba(195, 219, 215, 0.45);
}
.static-page--integrated-automated-client-reporting-made-easy .cr-hero .sp-btn--ghost:hover,
.static-page--integrated-automated-client-reporting-made-easy .cr-hero .sp-btn--ghost:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border-color: var(--sp-ink-on-dark-accent);
    box-shadow: none;
}

/* The report card is white on the dark ground; the heavy drop shadow is the
   one the dark band's cards use, so it reads as lifted off the surface. */
.static-page--integrated-automated-client-reporting-made-easy .cr-hero .crpt {
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7);
    border-color: transparent;
}

/* The hero report takes the brand's secondary blue where the shared .crpt
   component uses teal, so it stands apart from the dark green ground behind
   it. The label colour lives in anim-client-report.css, so it is overridden
   here; the logo and donut colours are SVG attributes in the markup. */
.static-page--integrated-automated-client-reporting-made-easy .cr-hero .crpt__label {
    color: var(--sp-brand-blue);
}

/* Metric strip hairlines, restated for the dark surface: the shared #E7EEEC
   rule would be a bright line here. Same translucent teal as .sp-glass-row. */
.static-page--integrated-automated-client-reporting-made-easy .cr-hero .sp-rule-grid,
.static-page--integrated-automated-client-reporting-made-easy .cr-hero .sp-rule-grid > * {
    border-color: rgba(134, 207, 196, 0.18);
}

.static-page--integrated-automated-client-reporting-made-easy .cr-pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sp-brand-teal);
    flex-shrink: 0;
    animation: crPulse 1.8s ease-in-out infinite;
}
@keyframes crPulse {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 1; }
}

/* ── Hero figure ───────────────────────────────────────────────────────────
   Centres the shared .crpt report card (static-pages/anim-client-report.css)
   in the hero's right column. The animation keyframes stay in the shared
   file; the layout overrides below are the internal reporting page's, ported
   so both pages' hero cards have the same size, spacing and section count. */
.static-page--integrated-automated-client-reporting-made-easy .cr-hero-figure {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ══ 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. Ported from
   automated-internal-reporting/body.css so the two pages' hero cards share
   one layout; a change to one belongs in the other.

   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--integrated-automated-client-reporting-made-easy .cr-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--integrated-automated-client-reporting-made-easy .cr-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--integrated-automated-client-reporting-made-easy .cr-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 carries. 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--integrated-automated-client-reporting-made-easy .cr-hero-figure .crpt__section:nth-child(3) {
    margin-bottom: 10px;
}

.static-page--integrated-automated-client-reporting-made-easy .cr-hero-figure .crpt__section:nth-child(6) {
    animation: crptFadeDown 8s ease infinite;
    animation-delay: 0.9s;
}

.static-page--integrated-automated-client-reporting-made-easy .cr-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. Customer 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
   Customer 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--integrated-automated-client-reporting-made-easy .cr-hero-figure .crpt {
    line-height: 1.35;
    padding-top: 14px;
    padding-bottom: 14px;
}

.static-page--integrated-automated-client-reporting-made-easy .cr-hero-figure .crpt__logo,
.static-page--integrated-automated-client-reporting-made-easy .cr-hero-figure .crpt__hdr {
    margin-bottom: 10px;
}

.static-page--integrated-automated-client-reporting-made-easy .cr-hero-figure .crpt__section,
.static-page--integrated-automated-client-reporting-made-easy .cr-hero-figure .crpt__section:nth-child(3) {
    margin-bottom: 7px;
}

.static-page--integrated-automated-client-reporting-made-easy .cr-hero-figure .crpt__section-title {
    margin-bottom: 4px;
}


/* ── Wrapping the text around the donut ────────────────────────────────────
   Before this, the donut was a flex sibling of Customer 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 Customer 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--integrated-automated-client-reporting-made-easy .cr-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--integrated-automated-client-reporting-made-easy .cr-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 Customer Summary or Key Achievements
   cannot push a later section into the donut. */
.static-page--integrated-automated-client-reporting-made-easy .cr-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--integrated-automated-client-reporting-made-easy .cr-hero-figure .crpt__section + .crpt__section {
    margin-top: 10px;
}

/* ── Metric strip ──────────────────────────────────────────────────────────
   The values here are short phrases as often as numbers ("Scheduled", "No
   login"), so the size is a step below the sibling pages' numeric strip: at
   their clamp cap a two-word value wrapped while a one-digit value did not,
   and a strip where one cell is two lines tall reads as a mistake rather than
   as emphasis. */
.static-page--integrated-automated-client-reporting-made-easy .cr-metric__value {
    font-size: clamp(1.75rem, 2.6vw, 2.05rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--sp-ink-on-dark-accent);
    margin-bottom: 0.6rem;
}
.static-page--integrated-automated-client-reporting-made-easy .cr-metric__label {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--sp-ink-on-dark);
    max-width: 12rem;
}

/* ══ Tick list and route graphic (reports your clients will read) ═════════
   Ported from static-pages/automated-internal-reporting/body.css with the
   ir2- prefix renamed cr-: the tick list, then the three-stage route
   graphic. A change to one copy belongs in the other. */

.static-page--integrated-automated-client-reporting-made-easy .cr-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--integrated-automated-client-reporting-made-easy .cr-list:not([class*="sp-mb-"]) {
    margin-bottom: 0;
}

.static-page--integrated-automated-client-reporting-made-easy .cr-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 .cr-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--integrated-automated-client-reporting-made-easy .cr-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--integrated-automated-client-reporting-made-easy .cr-list__text {
    display: block;
    min-width: 0;
}

.static-page--integrated-automated-client-reporting-made-easy .cr-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--integrated-automated-client-reporting-made-easy .cr-list {
        grid-template-columns: 1fr;
    }
}

/* ══ .cr-flow — the source-to-report sequence ═════════════════════════════

   Built for the internal reporting 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--integrated-automated-client-reporting-made-easy .cr-flow {
    --cr-pad: 1.05rem;
    --cr-node: 2.1rem;
    --cr-gap: 1.1rem;

    width: 100%;
    max-width: 30rem;
    margin-inline: auto;
    padding: var(--cr-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--integrated-automated-client-reporting-made-easy .cr-flow__stages {
    display: flex;
    flex-direction: column;
    gap: var(--cr-gap);
}

.static-page--integrated-automated-client-reporting-made-easy .cr-stage {
    position: relative;
    display: grid;
    grid-template-columns: var(--cr-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--integrated-automated-client-reporting-made-easy .cr-stage:not(.cr-stage--end)::before {
    content: "";
    position: absolute;
    left: calc(var(--cr-node) / 2 - 1px);
    top: var(--cr-node);
    height: calc(100% - var(--cr-node) + var(--cr-gap));
    width: 2px;
    background: linear-gradient(180deg, var(--sp-brand-teal-soft), var(--sp-brand-teal-soft));
    border-radius: 2px;
}

.static-page--integrated-automated-client-reporting-made-easy .cr-stage__node {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--cr-node);
    height: var(--cr-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--integrated-automated-client-reporting-made-easy .cr-stage__node--solid {
    background: var(--sp-brand-teal);
    color: #ffffff;
    box-shadow: 0 6px 14px -8px rgba(32, 121, 111, 0.9);
}

.static-page--integrated-automated-client-reporting-made-easy .cr-stage__main {
    min-width: 0;
    padding-bottom: 0.15rem;
}

.static-page--integrated-automated-client-reporting-made-easy .cr-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--integrated-automated-client-reporting-made-easy .cr-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--integrated-automated-client-reporting-made-easy .cr-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.static-page--integrated-automated-client-reporting-made-easy .cr-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--integrated-automated-client-reporting-made-easy .cr-chip i {
    font-size: 0.72rem;
    color: var(--sp-ink-muted);
}

.static-page--integrated-automated-client-reporting-made-easy .cr-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--integrated-automated-client-reporting-made-easy .cr-rows {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid #E6EDEB;
    border-radius: 10px;
    background: #FBFDFC;
    overflow: hidden;
}

.static-page--integrated-automated-client-reporting-made-easy .cr-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--integrated-automated-client-reporting-made-easy .cr-rows > li + li {
    border-top: 1px solid #F2F6F5;
}

.static-page--integrated-automated-client-reporting-made-easy .cr-rows__label {
    font-weight: 500;
    color: var(--sp-ink-soft);
    min-width: 0;
}

.static-page--integrated-automated-client-reporting-made-easy .cr-rows__value {
    flex: none;
    font-weight: 600;
    color: var(--sp-ink-faint);
}

.static-page--integrated-automated-client-reporting-made-easy .cr-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--integrated-automated-client-reporting-made-easy .cr-stage__foot i {
    font-size: 0.85rem;
    color: var(--sp-brand-blue);
}

/* The foot carries two delivery options on one line; the second icon gets
   its own left gap so the pair reads as two items. Client page only. */
.static-page--integrated-automated-client-reporting-made-easy .cr-stage__foot-sep {
    margin-left: 0.6rem;
}

/* ══ Transform row (dark band) ═════════════════════════════════════════════
   Three columns — the updates that came in, an arrow, the document they became
   — because the whole claim of the section is that the one becomes the other.

   The columns are 1fr/56px/1fr, and each card hugs the arrow from its own side
   — the photo from the left, the document from the right — so the gap between
   them is exactly the arrow's 56px column and nothing else. Left to fill their
   columns at a 1200px container they would sit 232px apart, with the arrow
   floating in the middle of a gap rather than joining two things, and the pair
   would stop reading as one transformation.

   Hugging only works when both cards are the same width. The arrow column is
   dead centre of the band, so the pair is centred under the heading only if
   equal widths sit either side of it; a card 88px narrower than its partner
   pulls the group's centre 44px toward the wider side while the arrow stays
   put. That is why the caps below are equal in the row layout — see there.

   Below `lg` the arrow rotates to point down and the columns stack, which
   keeps the reading order (updates → report) on a phone. */
.static-page--integrated-automated-client-reporting-made-easy .cr-transform {
    display: grid;
    grid-template-columns: 1fr 56px 1fr;
    align-items: center;
}
.static-page--integrated-automated-client-reporting-made-easy .cr-transform__arrow {
    display: flex;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--sp-brand-blue);
}
@media (max-width: 1023px) {
    .static-page--integrated-automated-client-reporting-made-easy .cr-transform {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .static-page--integrated-automated-client-reporting-made-easy .cr-transform__arrow {
        transform: rotate(90deg);
    }
    /* Stacked, there is no arrow column to hug — the cards are above and below
       it — so both recentre. */
    .static-page--integrated-automated-client-reporting-made-easy .cr-photo-card,
    .static-page--integrated-automated-client-reporting-made-easy .cr-doc-wrap {
        margin-inline: auto;
    }
}

/* width:100% is load-bearing next to the auto margin, not redundant. An auto
   margin on a grid item switches off the default justify-self:stretch, so the
   item falls back to fit-content — which would make each card's width depend
   on how long its longest line of text happened to be. Stating the width
   restores "fill the column, then cap".

   560 is the photo's cap: the photo is a 4:3 block whose height is a fixed
   fraction of whatever width it is given, and at 460 it is visibly the shorter
   half of the pair. Stacked, the document keeps its own drawn-for width of
   460 — alone in a column it is not being matched against anything.

   In the row layout it is, so there the document takes the photo's 560 too.
   Below that the shared cap is academic: from a 1176px container down, each
   1fr column is narrower than 560 and both cards simply fill their columns —
   which is the same symmetry arrived at by clamping rather than by capping.
   At 1728 the band is 1152 wide, so each column is (1152 − 56) / 2 = 548 and
   both cards sit at 548. */
.static-page--integrated-automated-client-reporting-made-easy .cr-photo-card,
.static-page--integrated-automated-client-reporting-made-easy .cr-doc-wrap {
    width: 100%;
}
.static-page--integrated-automated-client-reporting-made-easy .cr-photo-card {
    max-width: 560px;
    margin-left: auto;
}
.static-page--integrated-automated-client-reporting-made-easy .cr-doc-wrap {
    max-width: 460px;
    margin-right: auto;
}
@media (min-width: 1024px) {
    .static-page--integrated-automated-client-reporting-made-easy .cr-doc-wrap {
        max-width: 560px;
    }
}

/* Both cards are white inside the dark band, and the heavy drop shadow is what
   makes them read as lifted off the panel rather than as holes cut in it.
   The document brings its own white, radius and border from the shared
   partial, so only the shadow has to be restated for the dark background. */
.static-page--integrated-automated-client-reporting-made-easy .cr-photo-card,
.static-page--integrated-automated-client-reporting-made-easy .cr-doc-wrap .rpt-doc {
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7);
}

/* ── Photo card (dark band, input side) ───────────────────────────────────
   Same anatomy as the voice and knowledge base pages' photo cards: a white
   card carrying the photograph, then a hairline, then the input in words. */
.static-page--integrated-automated-client-reporting-made-easy .cr-photo-card {
    background: #ffffff;
    border: 1px solid #EFF4F3;
    border-radius: 20px;
    padding: 1.5rem;
    color: var(--sp-ink);
    line-height: 1.4;
    text-align: left;
}

/* The photograph carries its own near-white surroundings, so its outer edge
   blends into the card and only a small radius is needed to stop its corners
   fighting the card's. Same treatment both sibling pages give their photo. */
.static-page--integrated-automated-client-reporting-made-easy .cr-photo-card img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}

/* The input line, under the same hairline the sibling pages use. The marks sit
   inline with the words rather than above them so the pair reads as one
   statement — three sources, one week — at the arrow's own scale. */
.static-page--integrated-automated-client-reporting-made-easy .cr-photo-card__in {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 1.1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid #EEF2F1;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--sp-ink);
}
/* Overlapped by a third of a disc, with a white ring cut between them, so the
   three read as one grouped mark rather than as three separate buttons. */
.static-page--integrated-automated-client-reporting-made-easy .cr-photo-card__marks {
    display: inline-flex;
    flex: none;
    align-items: center;
}
.static-page--integrated-automated-client-reporting-made-easy .cr-photo-card__marks .cr-update__src + .cr-update__src {
    margin-left: -0.5rem;
    box-shadow: 0 0 0 2px #ffffff;
}

/* The channel, as an icon in a tinted disc — one tint per channel, so the
   three sources are told apart by colour before any of them is read. The pairing
   is the one the other product pages already use: teal is the brand's action
   colour and voice is the primary source, blue is the colour the palette
   assigns to connected data, and gold is the accent the API takes. All three
   tints are pale enough to sit under a full-colour brand mark without fighting
   it, which is what lets the Slack lattice go straight into one of them. */
.static-page--integrated-automated-client-reporting-made-easy .cr-update__src {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    font-size: 0.75rem;
    line-height: 1;
}
.static-page--integrated-automated-client-reporting-made-easy .cr-update__src--voice {
    background: var(--sp-brand-teal-tint);
    color: var(--sp-brand-teal);
}
.static-page--integrated-automated-client-reporting-made-easy .cr-update__src--slack {
    background: var(--sp-brand-blue-tint);
}
.static-page--integrated-automated-client-reporting-made-easy .cr-update__src--api {
    background: var(--sp-brand-gold-tint);
    color: var(--sp-brand-gold-ink);
}
/* 15px inside a 24px disc keeps the same optical margin the Phosphor glyphs
   beside it sit at. */
.static-page--integrated-automated-client-reporting-made-easy .cr-update__src svg {
    display: block;
    width: 15px;
    height: 15px;
}
/* Ported from static-pages/automated-internal-reporting/body.css, re-scoped
   under this page's slug with the ir2- prefix renamed cr-. The two pages show
   the same five report sections in the same staggered-card format, so a change
   to one block belongs in the other. */

/* ══ .cr-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--integrated-automated-client-reporting-made-easy .cr-stagger {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
    margin: 0;
    padding: 0;
    list-style: none;
}

.static-page--integrated-automated-client-reporting-made-easy .cr-stagger__item {
    margin: 0;
    padding: 0;
}

@media (min-width: 640px) {
    .static-page--integrated-automated-client-reporting-made-easy .cr-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--integrated-automated-client-reporting-made-easy .cr-stagger__item:nth-child(even) {
        margin-top: 1rem;
    }
}

@media (min-width: 1024px) {
    .static-page--integrated-automated-client-reporting-made-easy .cr-stagger {
        gap: 1.5rem;
    }

    .static-page--integrated-automated-client-reporting-made-easy .cr-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 --cr-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--integrated-automated-client-reporting-made-easy .cr-stagger-scroll {
    position: relative;
    max-height: var(--cr-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--integrated-automated-client-reporting-made-easy .cr-stagger-scroll {
        max-height: min(var(--cr-stagger-h, 22rem), 50vh);
        max-height: min(var(--cr-stagger-h, 22rem), 50svh);
    }
}

.static-page--integrated-automated-client-reporting-made-easy .cr-stagger-scroll::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.static-page--integrated-automated-client-reporting-made-easy .cr-stagger-scroll.is-at-end {
    -webkit-mask-image: none;
    mask-image: none;
}

.static-page--integrated-automated-client-reporting-made-easy .cr-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 .cr-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--integrated-automated-client-reporting-made-easy .cr-stagger.is-armed .cr-stagger__card:not(.is-done) .cr-skel {
    --cr-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(--cr-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--integrated-automated-client-reporting-made-easy .cr-stagger.is-armed .cr-stagger__card:not(.is-revealed) .cr-skel {
    color: transparent;
}

.static-page--integrated-automated-client-reporting-made-easy .cr-stagger.is-armed .cr-stagger__card:not(.is-revealed):hover .cr-skel {
    --cr-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--integrated-automated-client-reporting-made-easy .cr-stagger.is-armed .cr-stagger__card.is-revealed:not(.is-done) .cr-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--integrated-automated-client-reporting-made-easy .cr-stagger.is-armed .cr-stagger__card.is-revealed:not(.is-done) .sp-body .cr-skel {
    transition-delay: 160ms, 300ms;
}

/* ── Cards ─────────────────────────────────────────────────────────────────
   One treatment: .sp-card's white surface and #E7EEEC container edge, plus a
   resting-card shadow pair: 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--integrated-automated-client-reporting-made-easy .cr-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--integrated-automated-client-reporting-made-easy .cr-stagger__card .sp-h3 {
    color: var(--sp-ink);
    transition: color 200ms ease-out;
}

.static-page--integrated-automated-client-reporting-made-easy .cr-stagger__card .sp-body {
    color: var(--sp-ink-soft);
    transition: color 200ms ease-out;
}

/* ── Hover and focus ──────────────────────────────────────────────────────
   The card goes to the shared dark-card treatment, --sp-brand-dark with the
   on-dark text tokens .sp-card--dark and .sp-on-dark provide, 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--integrated-automated-client-reporting-made-easy .cr-stagger__card:hover,
.static-page--integrated-automated-client-reporting-made-easy .cr-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--integrated-automated-client-reporting-made-easy .cr-stagger__card:hover .sp-h3,
.static-page--integrated-automated-client-reporting-made-easy .cr-stagger__card:focus-within .sp-h3 {
    color: #ffffff;
}

.static-page--integrated-automated-client-reporting-made-easy .cr-stagger__card:hover .sp-body,
.static-page--integrated-automated-client-reporting-made-easy .cr-stagger__card:focus-within .sp-body {
    color: var(--sp-ink-on-dark);
}

.static-page--integrated-automated-client-reporting-made-easy .cr-stagger__card:hover .cr-stagger__num,
.static-page--integrated-automated-client-reporting-made-easy .cr-stagger__card:focus-within .cr-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--integrated-automated-client-reporting-made-easy .cr-stagger__card:hover,
    .static-page--integrated-automated-client-reporting-made-easy .cr-stagger__card:focus-within {
        transform: none;
    }
}

/* The numeral, in the shared 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--integrated-automated-client-reporting-made-easy .cr-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;
}

/* ── Channel chips (where the updates come from) ───────────────────────────
   A fixed square per card holding one channel's mark, tinted to the channel.
   The square is what makes three very different marks — a Phosphor glyph, the
   Slack lattice, another glyph — read as one set: loose they would show three
   different apparent sizes. */
.static-page--integrated-automated-client-reporting-made-easy .cr-chan {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--sp-radius);
    font-size: 1.4rem;
    line-height: 1;
}
.static-page--integrated-automated-client-reporting-made-easy .cr-chan--voice {
    background: var(--sp-brand-teal-tint);
    color: var(--sp-brand-teal);
}
.static-page--integrated-automated-client-reporting-made-easy .cr-chan--slack {
    background: var(--sp-brand-blue-tint);
}
/* On the dark card the pale gold tint would punch a flat hole in the gradient,
   so the API chip takes a translucent white fill and carries its channel
   colour in the glyph instead — the same substitution the knowledge base
   page's connected-source chips make. */
.static-page--integrated-automated-client-reporting-made-easy .cr-chan--api {
    background: rgba(248, 194, 108, 0.16);
    color: var(--sp-brand-gold);
}
/* 22px inside a 44px chip: the same 11px optical margin .sp-feature-icon uses,
   so the two icon treatments on this page share one ratio. */
.static-page--integrated-automated-client-reporting-made-easy .cr-chan svg {
    display: block;
    width: 22px;
    height: 22px;
}
/* Channel cards: each card is a flex column whose body paragraph takes the
   spare height, so a card's button sits on the card's bottom edge and the
   buttons in the row line up whatever each paragraph's length. The button's
   own 1.5rem top margin (.sp-learn-more, .cr-dark-link) is the only gap above
   it; the paragraph carries no bottom margin, so the two never stack. */
.static-page--integrated-automated-client-reporting-made-easy .cr-chan-cards > .sp-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.static-page--integrated-automated-client-reporting-made-easy .cr-chan-cards > .sp-card > .sp-body {
    flex-grow: 1;
}
/* The dark card's link is a footer to the card, so it needs its own top gap;
   .sp-btn has no margin of its own by design. */
.static-page--integrated-automated-client-reporting-made-easy .cr-dark-link {
    margin-top: 1.5rem;
}

/* ══ 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--integrated-automated-client-reporting-made-easy .cr-faq {
    max-width: 52rem;
    margin-inline: auto;
}
.static-page--integrated-automated-client-reporting-made-easy .cr-faq__item {
    background: #ffffff;
    border: 1px solid #E9EFEE;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(21, 41, 39, 0.04);
}
.static-page--integrated-automated-client-reporting-made-easy .cr-faq__item + .cr-faq__item {
    margin-top: 0.7rem;
}
.static-page--integrated-automated-client-reporting-made-easy .cr-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--integrated-automated-client-reporting-made-easy .cr-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--integrated-automated-client-reporting-made-easy .cr-faq__q::-webkit-details-marker { display: none; }
.static-page--integrated-automated-client-reporting-made-easy .cr-faq__q::marker { content: ""; }
.static-page--integrated-automated-client-reporting-made-easy .cr-faq__item[open] .cr-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--integrated-automated-client-reporting-made-easy .cr-faq__q:focus-visible {
    outline: 2px solid var(--sp-brand-teal);
    outline-offset: -2px;
    border-radius: 14px;
}
/* A solid teal disc, 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 the
   open and closed states obviously the same button. */
.static-page--integrated-automated-client-reporting-made-easy .cr-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--integrated-automated-client-reporting-made-easy .cr-faq__item[open] .cr-faq__caret {
    transform: rotate(180deg);
    background: var(--sp-brand-teal);
    color: #ffffff;
}
.static-page--integrated-automated-client-reporting-made-easy .cr-faq__a {
    padding: 0 1.3rem 1.2rem;
}
.static-page--integrated-automated-client-reporting-made-easy .cr-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--integrated-automated-client-reporting-made-easy .cr-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--integrated-automated-client-reporting-made-easy .cr-faq__link:hover,
.static-page--integrated-automated-client-reporting-made-easy .cr-faq__link:focus-visible {
    color: var(--sp-brand-teal-dark);
    text-decoration: underline;
}
.static-page--integrated-automated-client-reporting-made-easy .cr-faq__link i {
    font-size: 0.85rem;
}

/* ── Closing statement ─────────────────────────────────────────────────────
   The one place on the page set entirely in the italic display face. It is a
   statement of position rather than a section heading, so it is a <p>: making
   it an <h2> would put a heading in the document outline that no section hangs
   off. */
.static-page--integrated-automated-client-reporting-made-easy .cr-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 1.75rem;
    text-wrap: pretty;
}
/* .sp-accent already sets the italic display face; inside the statement it
   only needs to contribute the colour shift. */
.static-page--integrated-automated-client-reporting-made-easy .cr-statement .sp-accent {
    font-size: inherit;
}

@media (prefers-reduced-motion: reduce) {
    .static-page--integrated-automated-client-reporting-made-easy .cr-pulse-dot {
        animation: none;
        opacity: 1;
    }
    .static-page--integrated-automated-client-reporting-made-easy .cr-faq__caret {
        transition: none;
    }
    /* The hero report is a pure CSS infinite loop with no script gating it, so
       this is the only place it can be stopped for a reader who has asked for
       less motion. Stopping it on its last frame rather than its first is
       deliberate: the finished report is the page's claim, and a blank card
       would be the one state that says nothing. */
    .static-page--integrated-automated-client-reporting-made-easy .cr-hero-figure .crpt__logo,
    .static-page--integrated-automated-client-reporting-made-easy .cr-hero-figure .crpt__hdr,
    .static-page--integrated-automated-client-reporting-made-easy .cr-hero-figure .crpt__section,
    .static-page--integrated-automated-client-reporting-made-easy .cr-hero-figure .crpt__donut,
    .static-page--integrated-automated-client-reporting-made-easy .cr-hero-figure .crpt__section:nth-child(6) {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .static-page--integrated-automated-client-reporting-made-easy .cr-hero-figure .crpt__line,
    .static-page--integrated-automated-client-reporting-made-easy .cr-hero-figure .crpt__section:nth-child(6) .crpt__line {
        animation: none;
        transform: scaleX(1);
    }
}