/* Role-Based On-Demand Summaries — page-specific styles only.
 *
 * Everything reusable (type scale, cards, dark panel, badges, rule grids,
 * buttons, feature-icon discs) comes from shared.css. What is left here is
 * either a graphic this page owns (the hero's summary-pages screen, the band's
 * briefing card, the two-version comparison, the source chips), a composition
 * it invents (the hero surface, the transform row, the rule rows, the FAQ
 * list), or a value genuinely tuned to this page.
 *
 * NO SHARED PARTIAL IS DECLARED, and deps.json is empty on purpose. Two
 * existing partials were considered:
 *
 *   • ui-role-visibility.css — the cross-role visibility matrix. It answers
 *     "who can see whose updates", which is permission MECHANICS: the argument
 *     /secure-ai-for-business-intelligence/ owns and this page deliberately
 *     spends only one pillar on. It is also already the knowledge base page's
 *     graphic, so reusing it here would make two sibling pages open with the
 *     same picture of a different claim.
 *   • ui-report-document.css — the paginated report document. That artifact is
 *     what /automated-internal-reporting/ argues: the scheduled report that
 *     compiles itself. Drawing one here would say "the same thing again", which
 *     is the single mistake this page exists not to make.
 *
 * The home page's own "Role-Based On-Demand Summaries" graphic (.obs) was the
 * third candidate and is rejected for the same reason plus a mechanical one:
 * its SUBJECT is the Daily Notifications dropdown being animated from Off to
 * "Summaries: Midday, EOD" — the scheduled claim — and its rules live inside
 * home/body.css rather than in a shared partial, so reusing it would mean
 * editing the home page to extract them. The hero screen here draws the same
 * control, because the real summary page has it in that corner, but draws it
 * inert: neutral grey, no menu, no cursor, no motion. Present as furniture,
 * never as the argument.
 *
 * Surfaces, hairlines, metric strip, pulse dot, rule rows, FAQ and closing
 * statement are deliberately the same values as the voice-to-text, knowledge
 * base, client reporting, internal reporting, security, alerts, MCP Read API
 * and AI assistant pages rather than approximations of them: they 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--role-based-on-demand-summaries, so
 * nothing leaks into any other page.
 *
 * COLOR RULE that governs every graphic below. Teal is the briefing and the
 * action. Blue carries the transform arrow and the comparison section's kicker.
 * No third accent is introduced, and nothing on this page is gold. Gold used to
 * mark .rbs-version__row--out, a row naming the part of the week a role is not
 * shown, and that row was removed rather than restyled: material outside a
 * reader's access is filtered before retrieval, so a briefing never holds the
 * excluded set and cannot name it. What replaced it is .rbs-version__scope, a
 * quiet footer on each column stating the scope that version was written
 * inside — the same reassurance, drawn from a fact the generator does hold.
 *
 * DENSITY note that governs every graphic below. The theme sets line-height as a
 * LENGTH, which does not scale down, so a 12px label inside .static-page
 * inherits ~30px of leading and a 33px row silently becomes a 50px one. Every
 * graphic root here therefore restates line-height as a unitless ratio. It is
 * the first thing to check if one of them ever looks oversized.
 */

/* ── 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--role-based-on-demand-summaries .rbs-surface-soft {
    background: #FBFDFC;
}
.static-page--role-based-on-demand-summaries .rbs-hairline-top {
    border-top: 1px solid #EEF2F1;
}

/* ── Hero ──────────────────────────────────────────────────────────────────
   Two very soft radial washes — teal from the top-left, blue from the
   top-right — over the warm off-white, fading out above the metric strip so the
   strip sits on flat color. Same construction as the sibling pages. */
.static-page--role-based-on-demand-summaries .rbs-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;
    padding-bottom: var(--sp-space-6);
}

.static-page--role-based-on-demand-summaries .rbs-pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sp-brand-teal);
    flex-shrink: 0;
    animation: rbsPulse 1.8s ease-in-out infinite;
}
@keyframes rbsPulse {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 1; }
}

/* ══ Summary pages screen (hero graphic) ═══════════════════════════════════
   The request, drawn: a briefing page named, a period picked, and the briefing
   written on the spot.

   NO RAIL. The screen used to carry a four-item sidebar naming the four
   briefing pages, with the open one highlighted. It is gone, and the page it is
   showing is named by the title instead. The sidebar was spending ~190px of a
   460px column to say which page is open, and once the panel carried the
   briefing's real prose that was the wrong trade: the same fact fits in one
   heading and the width goes to the text, which is the part worth reading. The
   loss is real and accepted — a reader can no longer see that there are four
   pages — so the "four pages, always there" claim is carried by the metric strip
   below the hero and by the pillars, both of which state it in words.

   The wrapper carries the width and the container-type; the screen fills it. An
   element cannot query the container it establishes, so the two have to be
   separate boxes.

   SIZE — two levers, and they do different jobs. The NOMINAL width buys space
   between elements; ZOOM buys ink. Every dimension inside this component is a
   fixed pixel or rem value, so zoom scales layout as well as paint: one number
   moves the whole screen and it stays sharp, but nothing inside it gets any
   roomier. Only raising the nominal width does that.

   Both were raised, and by different amounts, because the screen needed both
   things. It was 366 x 1.35 = 457.5px in a 460px column while it was type only;
   it is now 384 x 1.30 = 499px in the 500px column the hero gives it at xl and
   above. The column paid 40px for it, taking the copy beside it from 628px to
   588px, which still holds the h1 at three lines. So the screen is ~9% bigger,
   the ink ~4% bigger, and the gaps between elements ~5% wider — the notifications
   control and the tab strip both arrived after the width was set, and at 366
   nominal they fitted without anything having air around it.

   Raising nominal width alone is the trap: it buys the space but shrinks the ink
   against the bigger box, and the screen starts reading as a document held at
   arm's length. The two levers move together or the balance moves.

   The binding row is the HEAD: the title beside the notifications control, the
   one row on the screen holding two fixed-width things side by side. It needs
   about 265px of ink inside the panel's 33.6px of padding and 2px of border —
   roughly 300px of nominal need against a 384px cap. The period row is next at
   about 252px, and both wrap rather than overflow, so neither can clip; every
   other row is prose that reflows.

   The zoom ceiling above is taste rather than arithmetic — past about 1.5 the
   type stops reading as a product screen and starts reading as a document.

   WHERE THE ZOOM COMES OFF. The component needs a container of at least 496px to
   hold its zoomed self, so below that both the zoom and the nominal cap are
   released together and the screen simply fills what it is given. Releasing them
   together matters: dropping zoom while keeping max-width:400px would leave a
   400px screen sitting in a 495px container. */
.static-page--role-based-on-demand-summaries .rbs-hero-figure {
    display: flex;
    justify-content: center;
    align-items: center;
}
.static-page--role-based-on-demand-summaries .rbs-pages-wrap {
    width: 100%;
    max-width: 500px;
    container-type: inline-size;
}
.static-page--role-based-on-demand-summaries .rbs-pages {
    display: block;
    width: 100%;
    max-width: 384px;
    margin-inline: auto;
    zoom: 1.3;
    /* The screen's own ground is the recessed surface, not white: the briefing
       card below the tabs is the white thing, and the two-tone is what makes the
       card read as the document the page produced rather than as more chrome. */
    background: #FBFDFC;
    border: 1px solid #E7EEEC;
    border-radius: 16px;
    overflow: hidden;
    line-height: 1.35;
    letter-spacing: -0.005em;
    text-align: left;
    color: var(--sp-ink);
    box-shadow: 0 1px 2px rgba(21, 41, 39, 0.05),
                0 22px 46px -28px rgba(21, 41, 39, 0.45);
}

/* TWO STEPS DOWN, and they are different kinds of step.

   The first is the lg-to-xl column. The hero gives the screen 460px there rather
   than 500 (see the note in body.html: at those container widths the h1 needs the
   pixels more than the screen does), so the zoom drops to the largest value that
   still fits — 384 x 1.19 = 457px in 460. Same nominal width, so nothing inside
   reflows and nothing moves; only the ink gets 8% smaller. That is what makes the
   column step invisible.

   The second is the phone. Below 457px of container there is no zoom left to
   trim, so the zoom and the nominal cap are released together and the screen
   simply fills what it is given. Releasing them together matters: dropping zoom
   while keeping max-width:384px would strand a 384px screen in a 456px
   container. */
@container (max-width: 498px) {
    .static-page--role-based-on-demand-summaries .rbs-pages {
        zoom: 1.19;
    }
}
@container (max-width: 456px) {
    .static-page--role-based-on-demand-summaries .rbs-pages {
        max-width: none;
        zoom: 1;
    }
}

.static-page--role-based-on-demand-summaries .rbs-pages__panel {
    padding: 1.05rem;
    min-width: 0;
}

/* ── Heading row ───────────────────────────────────────────────────────────
   Title and resolved period on the left, the notifications control on the
   right. It wraps rather than compresses: the control is a fixed object, so at
   any width that cannot hold both it drops below the title instead of squeezing
   the title's tracking. */
.static-page--role-based-on-demand-summaries .rbs-pages__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.45rem 0.65rem;
    margin-bottom: 0.85rem;
}
.static-page--role-based-on-demand-summaries .rbs-pages__head-main {
    min-width: 0;
}

/* The title names the page the screen is showing. It carries real heading weight
   because it replaced a sidebar: with no highlighted row to say which of the four
   briefings is open, the title is the only thing that says it, and a row-label
   sized title would leave the screen looking unheaded. */
.static-page--role-based-on-demand-summaries .rbs-pages__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: #0E223B;
}
/* The date is the PERIOD BUTTON RESOLVED — the week is picked below, so this
   reads 4–8 August. It is the one line tying the two rows together, which is why
   it sits under the title rather than beside the source line inside the card. */
.static-page--role-based-on-demand-summaries .rbs-pages__date {
    margin-top: 0.2rem;
    font-size: 0.6rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--sp-ink-muted);
}

/* Daily Notifications: the real screen's control, drawn inert. Every value here
   is from the neutral ramp — no teal, no fill, no shadow — because a colored or
   lifted control would read as the thing the graphic is arguing, and what it
   argues is the schedule that /automated-internal-reporting/ owns. */
.static-page--role-based-on-demand-summaries .rbs-pages__notif {
    flex: none;
}
.static-page--role-based-on-demand-summaries .rbs-pages__notif-label {
    margin-bottom: 0.3rem;
    font-size: 0.52rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--sp-ink-muted);
}
.static-page--role-based-on-demand-summaries .rbs-pages__select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.3rem 0.45rem;
    background: #ffffff;
    border: 1px solid #E6EDEB;
    border-radius: 7px;
    font-size: 0.58rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--sp-ink-soft);
    white-space: nowrap;
}
.static-page--role-based-on-demand-summaries .rbs-pages__select i {
    font-size: 0.55rem;
    line-height: 1;
    color: #CBD8D5;
}

/* Period buttons: day, week, month, with the week chosen. The carets are what
   say these are pickers rather than filter chips — each opens onto other days,
   other weeks, other months, which is the "period you picked" claim drawn rather
   than asserted. Teal marks the chosen one, and it is the only teal fill on the
   screen. */
.static-page--role-based-on-demand-summaries .rbs-pages__periods {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.9rem;
}
.static-page--role-based-on-demand-summaries .rbs-pages__period {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.5rem;
    background: #ffffff;
    border: 1px solid #E6EDEB;
    border-radius: 999px;
    font-size: 0.56rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--sp-ink-muted);
    white-space: nowrap;
}
.static-page--role-based-on-demand-summaries .rbs-pages__period i {
    font-size: 0.5rem;
    line-height: 1;
    color: #CBD8D5;
}
.static-page--role-based-on-demand-summaries .rbs-pages__period.is-on {
    background: var(--sp-brand-teal);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 6px 14px -8px rgba(32, 121, 111, 0.9);
}
.static-page--role-based-on-demand-summaries .rbs-pages__period.is-on i {
    color: rgba(255, 255, 255, 0.75);
}

/* ── Tab strip and briefing card ───────────────────────────────────────────
   The strip is a sibling of the card, not a child of it, and sits ON the card's
   top border: the first tab is flush with the card's left edge so the two left
   borders are one continuous line, the row is pulled down 1px so the chosen
   tab's border meets the card's, and a 1px white bar under that tab erases the
   card border beneath it. The result is a notch in the top edge — the tab and
   the briefing under it are one sheet.

   FLUSH LEFT MEANS THE CARD GIVES UP ITS TOP-LEFT CORNER. Two rounded corners
   stacked a pixel apart read as a misprint, so the card's top-left is squared
   and the tab's own 8px corner is the one you see — the tab keeps the tab
   radius, not the card's larger one, because it is a tab. Below that corner the
   two left borders run as one straight line into the card's 12px bottom-left.
   This is only correct while the chosen tab is the FIRST one; if this mock ever
   selects a different tab, give the card its top-left radius back or the
   silhouette breaks.

   Why not inside the card: a tab strip within the card's padding reads as a
   control the document contains, and the document is what the tab selects. The
   card must therefore be the thing that changes when the tab changes, which only
   looks true if the tab is attached to its edge.

   Ink on white rather than teal: the period button above is already the argued
   choice, and a second teal selection would leave the screen looking as though
   it had two answers. */
.static-page--role-based-on-demand-summaries .rbs-pages__tabs {
    display: flex;
    align-items: flex-end;
    gap: 0.15rem;
    margin-bottom: -1px;
    position: relative;
    z-index: 1;
}
.static-page--role-based-on-demand-summaries .rbs-pages__tab {
    position: relative;
    padding: 0.35rem 0.6rem;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    font-size: 0.62rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--sp-ink-faint);
    white-space: nowrap;
}
.static-page--role-based-on-demand-summaries .rbs-pages__tab.is-on {
    background: #ffffff;
    border-color: #E7EEEC;
    font-weight: 700;
    color: var(--sp-ink);
}
/* The bar that erases the card's top border under the chosen tab. Without it the
   card reads as a box with a tab resting on it rather than as one sheet. */
.static-page--role-based-on-demand-summaries .rbs-pages__tab.is-on::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: #ffffff;
}

.static-page--role-based-on-demand-summaries .rbs-pages__card {
    padding: 0.9rem;
    background: #ffffff;
    border: 1px solid #E7EEEC;
    border-radius: 0 12px 12px 12px;
    box-shadow: 0 1px 2px rgba(21, 41, 39, 0.04);
}

/* Stamp and source on one wrapping row under the tabs — the briefing's byline.
   Both are meta about the same act, when it was written and what from, so they
   belong on one line; flex-wrap means neither has to fit beside the other at
   narrow widths. */
.static-page--role-based-on-demand-summaries .rbs-pages__meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.2rem 0.5rem;
    margin-bottom: 0.65rem;
}

/* "Written just now" is the hero in three words, so it is the one thing in the
   panel that is colored rather than weighted. */
.static-page--role-based-on-demand-summaries .rbs-pages__stamp {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex: none;
    font-family: var(--sp-font-mono);
    font-size: 0.53rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--sp-brand-teal);
    white-space: nowrap;
}
.static-page--role-based-on-demand-summaries .rbs-pages__stamp i {
    font-size: 0.62rem;
    line-height: 1;
}
.static-page--role-based-on-demand-summaries .rbs-pages__source {
    font-size: 0.62rem;
    line-height: 1.4;
    color: var(--sp-ink-faint);
}

/* Sections are flat prose under a heading, not boxed wells. The wells were
   drawn when each section carried a label and a count and needed an edge to hold
   them apart; now that a section IS a paragraph, a border around every one of
   them fights the card border it sits inside and makes two sentences look like a
   table. The heading and the spacing separate them, which is what separates them
   on the real screen. */
.static-page--role-based-on-demand-summaries .rbs-pages__sects {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.static-page--role-based-on-demand-summaries .rbs-pages__sect-text {
    margin: 0.15rem 0 0;
    font-size: 0.62rem;
    line-height: 1.55;
    color: var(--sp-ink-soft);
}
/* The briefing's opening line, between the byline and the sections. It is what
   makes the card read as written text rather than as a table of contents with
   headings in it. */
.static-page--role-based-on-demand-summaries .rbs-pages__lede {
    margin: 0 0 0.7rem;
    font-size: 0.65rem;
    line-height: 1.55;
    color: var(--sp-ink-soft);
}
/* Teal headings, as the real briefing renders them. This is the teal-ink tier —
   colored text on white — so it does not compete with the one teal FILL on the
   screen, the chosen period button. */
.static-page--role-based-on-demand-summaries .rbs-pages__sect-name {
    margin: 0;
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--sp-brand-teal);
    min-width: 0;
}
/* Clients and projects, bolded in ink the way the product writes them. Ink
   rather than a color: they are the nouns the briefing is about, and there are
   four of them in six lines — coloring them would leave the card looking
   highlighted rather than written. */
.static-page--role-based-on-demand-summaries .rbs-pages__ent {
    font-weight: 700;
    color: #0E223B;
}

.static-page--role-based-on-demand-summaries .rbs-pages__foot {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.85rem;
    padding-top: 0.7rem;
    border-top: 1px solid #F2F6F5;
    font-size: 0.58rem;
    line-height: 1.4;
    color: var(--sp-ink-faint);
}
.static-page--role-based-on-demand-summaries .rbs-pages__foot i {
    font-size: 0.78rem;
    flex: none;
    color: var(--sp-brand-teal);
}

/* ── Metric strip ──────────────────────────────────────────────────────────
   The values here are short phrases rather than numbers ("On demand", "Per
   role"), so the size is a step below the numeric strips on the voice and
   knowledge base pages: 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. Same value the internal reporting,
   security, alerts, MCP and assistant pages settled on, for the same reason. */
.static-page--role-based-on-demand-summaries .rbs-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--role-based-on-demand-summaries .rbs-metric__label {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--sp-ink-muted);
    max-width: 12rem;
}

/* ── Inline cross-link (pillar card) ───────────────────────────────────────
   The scoping pillar is the page's single permission section, and it hands the
   argument to the page that owns it rather than making it again here. The link
   is on its own line so it reads as the next thing to do rather than as a phrase
   inside a sentence. */
.static-page--role-based-on-demand-summaries .rbs-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--sp-brand-teal);
    text-decoration: none;
}
.static-page--role-based-on-demand-summaries .rbs-inline-link:hover,
.static-page--role-based-on-demand-summaries .rbs-inline-link:focus-visible {
    color: var(--sp-brand-teal-dark);
    text-decoration: underline;
}
.static-page--role-based-on-demand-summaries .rbs-inline-link i {
    font-size: 0.85rem;
}

/* ══ Transform row (dark band) ═════════════════════════════════════════════
   Three columns — the person the briefing was written for, an arrow, the
   briefing — because the whole claim of the section is that the one produces the
   other.

   The columns are 1fr/56px/1fr, but neither card fills its column: each caps at
   520px and hugs the arrow from its own side. 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.

   Below `lg` the arrow rotates to point down and the columns stack, which keeps
   the reading order (reader → briefing) on a phone. */
.static-page--role-based-on-demand-summaries .rbs-transform {
    display: grid;
    grid-template-columns: 1fr 56px 1fr;
    align-items: center;
}
.static-page--role-based-on-demand-summaries .rbs-transform__arrow {
    display: flex;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--sp-brand-blue);
}
@media (max-width: 1023px) {
    .static-page--role-based-on-demand-summaries .rbs-transform {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .static-page--role-based-on-demand-summaries .rbs-transform__arrow {
        transform: rotate(90deg);
    }
    /* Stacked, there is no arrow column to hug — the cards are above and below
       it — so both recenter. */
    .static-page--role-based-on-demand-summaries .rbs-photo-card,
    .static-page--role-based-on-demand-summaries .rbs-brief-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".

   The cap is the same on both sides, so the pair is symmetric about the arrow
   and the group's center is the band's center.

   The right side is a wrapper rather than the briefing card itself because the
   card's internal fallbacks are container queries, and an element cannot query
   the container it establishes. */
.static-page--role-based-on-demand-summaries .rbs-photo-card,
.static-page--role-based-on-demand-summaries .rbs-brief-wrap {
    width: 100%;
    max-width: 520px;
}
.static-page--role-based-on-demand-summaries .rbs-photo-card {
    margin-left: auto;
}
.static-page--role-based-on-demand-summaries .rbs-brief-wrap {
    margin-right: auto;
    container-type: inline-size;
}

/* ── Photo card (dark band, reader side) ───────────────────────────────────
   A photograph with a compact identity line written underneath it. The card
   chrome — white, radius, padding, shadow — lives here rather than on the parts
   inside it, so the photo and its caption are one object and not two stacked
   cards. Same anatomy as the sibling pages' band photo cards.

   The caption is deliberately light: an identity row and one line of context,
   which is the touch the MCP Read API band settled on. This is the side already
   spending ~352px on a photograph, so it is the side that stays compact if the
   pair is to end up near the same height. */
.static-page--role-based-on-demand-summaries .rbs-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;
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7);
}

/* 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.

   aspect-ratio holds the slot at exactly the declared 1100x821 while the JPEG
   decodes, so the band's proportions are correct before it paints and stay
   correct while the file is still being generated by the parallel agent. The
   background is what keeps that state a quiet neutral block rather than a
   broken-image glyph. */
.static-page--role-based-on-demand-summaries .rbs-photo-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1100 / 821;
    object-fit: cover;
    border-radius: 6px;
    background: #EEF2F1;
}

/* Identity row: who this is, and the one piece of context that makes the
   briefing opposite legible. Not a quote, not a restatement of the lede — the
   band's argument is that this briefing was written for THIS role, so the role
   is the caption. */
.static-page--role-based-on-demand-summaries .rbs-who {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.95rem;
}
.static-page--role-based-on-demand-summaries .rbs-who__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    background: var(--sp-brand-teal-tint);
    color: var(--sp-brand-teal);
    font-size: 1.05rem;
    line-height: 1;
}
.static-page--role-based-on-demand-summaries .rbs-who__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.static-page--role-based-on-demand-summaries .rbs-who__role {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: #0E223B;
}
.static-page--role-based-on-demand-summaries .rbs-who__meta {
    font-size: 0.66rem;
    line-height: 1.35;
    color: var(--sp-ink-faint);
}
.static-page--role-based-on-demand-summaries .rbs-photo-card__line {
    margin: 0.6rem 0 0;
    font-size: 0.76rem;
    line-height: 1.6;
    color: var(--sp-ink-soft);
}

/* ══ Briefing card (dark band, artifact side) ══════════════════════════════
   The briefing, headed by who it was prepared for.

   A card rather than a document. /automated-internal-reporting/ owns the
   paginated report document — the scheduled thing that arrives — and drawing one
   here would say "the same thing again, on a different page". What this artifact
   has that a document does not is a header naming its READER and a footer saying
   another reader gets something else; those two lines are the entire section.

   HEIGHT PEERAGE with the photo card opposite. Measured at a 1280px viewport,
   where both sides are capped at 520px: the photo card is 495.8px — 48px of
   padding, 350.8px of photograph at 1100/821 inside 470px, and ~97px of caption.
   This side has to land within 100px of that, i.e. at 396px or taller.

   It first measured 382.1px (delta 113.7px, a fail) because all three sections
   wrapped to exactly two lines and the gap was 0.7rem. Both documented levers
   were used: --rbs-sect-gap went 0.7rem -> 0.95rem (+4px above each of three
   sections, +12px) and the Capacity paragraph was written long enough to take a
   third line at the 478px of content this card has at 520px (+20px, one line at
   0.78rem/1.6). It now measures 414.1px, a delta of 81.7px.

   Those two are still the levers if either side is ever edited. Section prose is
   the coarse one — a line is 20px and it changes the copy; --rbs-sect-gap is the
   fine one at 4px per 0.25rem and changes nothing but air. Re-measure both cards
   at 1280 after any edit rather than trusting the arithmetic: the photograph's
   reserved height comes from the width/height attributes, so it moves whenever
   the cap does. */
.static-page--role-based-on-demand-summaries .rbs-brief {
    --rbs-sect-gap: 0.95rem;
    background: #ffffff;
    border: 1px solid #EFF4F3;
    border-radius: 18px;
    padding: 1.25rem;
    color: var(--sp-ink);
    line-height: 1.35;
    letter-spacing: -0.005em;
    text-align: left;
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7);
}

/* The "prepared for" band is tinted and sits at the very top, above even the
   briefing's own name, because it is the one thing that makes this artifact
   different from every other document on the site. */
.static-page--role-based-on-demand-summaries .rbs-brief__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.15rem 0.5rem;
    padding: 0.5rem 0.65rem;
    border-radius: 10px;
    background: var(--sp-brand-teal-tint);
}
.static-page--role-based-on-demand-summaries .rbs-brief__label {
    font-family: var(--sp-font-mono);
    font-size: 0.53rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--sp-brand-teal);
}
.static-page--role-based-on-demand-summaries .rbs-brief__for {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.35;
    color: var(--sp-brand-teal-dark);
}

.static-page--role-based-on-demand-summaries .rbs-brief__title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.85rem 0 0.7rem;
    margin-bottom: 0.15rem;
    border-bottom: 1px solid #EEF2F1;
}
.static-page--role-based-on-demand-summaries .rbs-brief__name {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: #0E223B;
}
.static-page--role-based-on-demand-summaries .rbs-brief__stamp {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex: none;
    font-family: var(--sp-font-mono);
    font-size: 0.53rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--sp-brand-teal);
    white-space: nowrap;
}
.static-page--role-based-on-demand-summaries .rbs-brief__stamp i {
    font-size: 0.62rem;
    line-height: 1;
}

.static-page--role-based-on-demand-summaries .rbs-brief__sect {
    padding-top: var(--rbs-sect-gap);
}
.static-page--role-based-on-demand-summaries .rbs-brief__sect-name {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.35;
    color: var(--sp-ink-muted);
}
.static-page--role-based-on-demand-summaries .rbs-brief__sect-name i {
    font-size: 0.75rem;
    line-height: 1;
    color: var(--sp-brand-teal);
}
.static-page--role-based-on-demand-summaries .rbs-brief__sect-text {
    margin: 0.28rem 0 0;
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--sp-ink-soft);
}

/* The footer is the hinge into the next section: it says another role's version
   of this same week reads differently, and the two-version comparison further
   down is that sentence drawn. Two chips rather than a sentence, because a
   sentence here would read as more briefing. */
.static-page--role-based-on-demand-summaries .rbs-brief__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.95rem;
    padding-top: 0.8rem;
    border-top: 1px solid #EEF2F1;
}
.static-page--role-based-on-demand-summaries .rbs-brief__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.5rem;
    border: 1px solid #E7EEEC;
    border-radius: 999px;
    background: #FBFDFC;
    font-size: 0.6rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--sp-ink-muted);
}
.static-page--role-based-on-demand-summaries .rbs-brief__chip i {
    font-size: 0.7rem;
    line-height: 1;
    color: var(--sp-brand-teal);
}
/* The chip that names the other role's version is blue rather than teal: teal is
   this briefing, and this chip points away from it at a different one. Blue is
   already the transform arrow's color, which is the same idea. */
.static-page--role-based-on-demand-summaries .rbs-brief__chip--alt {
    border-color: rgba(40, 127, 171, 0.25);
    background: var(--sp-brand-blue-tint);
    color: var(--sp-brand-blue);
}
.static-page--role-based-on-demand-summaries .rbs-brief__chip--alt i {
    color: var(--sp-brand-blue);
}

/* Below 380px of card the head row cannot hold "Prepared for" and "Head of
   Delivery · this morning" on one line even wrapped comfortably, and the two
   chips are each wider than half the card, so everything steps down one notch
   rather than being allowed to squeeze. The chips already wrap by default. */
@container (max-width: 380px) {
    .static-page--role-based-on-demand-summaries .rbs-brief {
        padding: 0.95rem;
        --rbs-sect-gap: 0.8rem;
    }
    .static-page--role-based-on-demand-summaries .rbs-brief__for {
        font-size: 0.74rem;
    }
    .static-page--role-based-on-demand-summaries .rbs-brief__name {
        font-size: 0.84rem;
    }
    .static-page--role-based-on-demand-summaries .rbs-brief__sect-text {
        font-size: 0.74rem;
    }
}

/* ── Rule rows (comparison copy column) ────────────────────────────────────
   The three facts this section settles, as bars: the fact's name, and in the
   mono column its answer. Same bar as the alerts page's rule rows, the MCP
   page's and the assistant page's, because it is the same move — a short fixed
   list where every row has exactly one value. */
.static-page--role-based-on-demand-summaries .rbs-rule-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #FBFDFC;
    border: 1px solid #E7EEEC;
    border-radius: 12px;
    padding: 0.9rem 1.1rem;
}
.static-page--role-based-on-demand-summaries .rbs-rule-row__what {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--sp-ink);
}
.static-page--role-based-on-demand-summaries .rbs-rule-row__value {
    font-family: var(--sp-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--sp-brand-teal);
    text-align: right;
    flex: none;
}
/* Below the width where a name and its value cannot share a line, the value
   drops under the name rather than squeezing it to two or three words. */
@media (max-width: 400px) {
    .static-page--role-based-on-demand-summaries .rbs-rule-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }
    .static-page--role-based-on-demand-summaries .rbs-rule-row__value {
        text-align: left;
    }
}

/* ══ Two versions of one week (two-column mock) ════════════════════════════
   Two briefings of the same week, side by side, sharing a strip that names the
   material both were written from.

   The shared strip at the top is load-bearing, not decoration. Without it the
   two columns read as two different reports about two different things, which is
   the opposite of what the section claims; with it they read as one week seen
   twice. It is why the strip spans both columns and carries the word "both".

   Section titles and one line each, not full prose: what a reader has to notice
   is which sections each side HAS, and paragraphs would bury that under reading.

   Width comes from the column this is dropped into, not from the viewport —
   roughly 620px beside the copy on desktop and full width when the section
   stacks — so the stacking fallback is asked of a container query. */
.static-page--role-based-on-demand-summaries .rbs-versions-wrap {
    width: 100%;
    max-width: 40rem;
    container-type: inline-size;
}
.static-page--role-based-on-demand-summaries .rbs-versions {
    background: #ffffff;
    border: 1px solid #E7EEEC;
    border-radius: 16px;
    padding: 0.85rem;
    line-height: 1.35;
    letter-spacing: -0.005em;
    text-align: left;
    color: var(--sp-ink);
    box-shadow: 0 1px 2px rgba(21, 41, 39, 0.05),
                0 18px 40px -26px rgba(21, 41, 39, 0.45);
}

.static-page--role-based-on-demand-summaries .rbs-versions__source {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    padding: 0.5rem 0.65rem;
    margin-bottom: 0.7rem;
    border-radius: 10px;
    background: #F5FAF9;
    border: 1px solid #E6EFED;
}
.static-page--role-based-on-demand-summaries .rbs-versions__source i {
    font-size: 0.85rem;
    line-height: 1;
    flex: none;
    color: var(--sp-brand-teal);
}
.static-page--role-based-on-demand-summaries .rbs-versions__source-main {
    flex: 1;
    min-width: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.4;
    color: #0E223B;
}
.static-page--role-based-on-demand-summaries .rbs-versions__source-tag {
    flex: none;
    font-family: var(--sp-font-mono);
    font-size: 0.53rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.35;
    color: var(--sp-ink-faint);
    white-space: nowrap;
}

.static-page--role-based-on-demand-summaries .rbs-versions__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
}
/* Flex column so .rbs-version__scope can be pushed to the foot with an auto top
   margin. The two columns hold a different number of rows — four sections
   against three, which is the section's whole point — and the grid stretches
   them to equal height, so without the auto margin the shorter column's scope
   line would float mid-box above dead space. */
.static-page--role-based-on-demand-summaries .rbs-version {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0.8rem;
    border: 1px solid #EEF2F1;
    border-radius: 12px;
    background: #FBFDFC;
}
.static-page--role-based-on-demand-summaries .rbs-version__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding-bottom: 0.55rem;
    margin-bottom: 0.55rem;
    border-bottom: 1px solid #EAF0EF;
}
.static-page--role-based-on-demand-summaries .rbs-version__role {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: var(--sp-brand-teal-dark);
}
.static-page--role-based-on-demand-summaries .rbs-version__tag {
    flex: none;
    font-family: var(--sp-font-mono);
    font-size: 0.53rem;
    line-height: 1.35;
    color: var(--sp-ink-faint);
    white-space: nowrap;
}
.static-page--role-based-on-demand-summaries .rbs-version__row + .rbs-version__row {
    margin-top: 0.45rem;
}
.static-page--role-based-on-demand-summaries .rbs-version__name {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--sp-ink);
}
.static-page--role-based-on-demand-summaries .rbs-version__name i {
    font-size: 0.72rem;
    line-height: 1;
    flex: none;
}
.static-page--role-based-on-demand-summaries .rbs-version__note {
    display: block;
    font-size: 0.63rem;
    line-height: 1.45;
    color: var(--sp-ink-faint);
}
/* The scope footer that closes each column. Deliberately the quietest thing in
   the mock: it is a boundary statement, not a section, and drawing it as an
   accented block would read as another finding. Hairline above it, faint ink,
   teal only on the icon — the same weight as .rbs-versions__foot, because the
   two lines are doing the same kind of work at different scopes. */
.static-page--role-based-on-demand-summaries .rbs-version__scope {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    margin-top: auto;
    padding-top: 0.55rem;
    border-top: 1px solid #EAF0EF;
    font-size: 0.6rem;
    line-height: 1.45;
    color: var(--sp-ink-faint);
}
.static-page--role-based-on-demand-summaries .rbs-version__scope i {
    flex: none;
    margin-top: 0.12rem;
    font-size: 0.68rem;
    line-height: 1;
    color: var(--sp-brand-teal);
}

.static-page--role-based-on-demand-summaries .rbs-versions__foot {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.8rem;
    padding-top: 0.7rem;
    border-top: 1px solid #EEF2F1;
    font-size: 0.66rem;
    line-height: 1.45;
    color: var(--sp-ink-faint);
}
.static-page--role-based-on-demand-summaries .rbs-versions__foot i {
    font-size: 0.8rem;
    flex: none;
    color: var(--sp-brand-teal);
}

/* 480px is derived from what one column has to hold, not rounded down from a
   breakpoint. Two corrections to the arithmetic that first produced it, both
   from measuring rather than estimating:

   FIRST, the query is asked of .rbs-versions-wrap but it decides the layout of
   .rbs-versions__cols, which sits one level in — inside the mock's 2 x 0.85rem
   of padding (27.2px) and its 2px border. So the number the query sees is 29.2px
   LARGER than the grid it governs, and every column figure has to be carried
   back out through that 29.2px before it can be compared to the threshold.
   (The wrap itself has no padding or border, so there is no second correction
   between the wrap's border box and the content box the query measures.)

   SECOND, there are two floors, and the lower one does not bind. The HEAD row is
   the only row required to keep two pieces of ink on one line: "Head of
   Delivery" is 102.7px at 0.8rem bold, the 0.5rem gap is 8px, "4 sections" is
   50.1px at 0.53rem mono — 160.8px. A column spends 2 x 0.8rem of padding
   (25.6px) and 2px of border, so it needs 188.4px; two of them plus the 0.7rem
   gap (11.2px) is 388px of grid, which is 417.2px of query width. That is the
   hard floor — below it the head wraps.

   But a head that merely fits is not the point. What makes the two sides
   comparable at a glance is every NOTE holding one line, and the longest,
   "Scope change waiting on a signature", is 186.6px of ink at 0.63rem. That
   wants 214.2px of column, 439.6px of grid, 468.8px of query width. 480px keeps
   ~11px spare above that, so the crossing stands — the notes set it, not the
   heads, and it sits 62.8px above the head floor on purpose. Measured at 481px
   every note and every section name is one line; at 430px the longest note is
   two.

   Stacked, the two versions read top-to-bottom in the same order, and the shared
   strip above them still says they came from one week. */
@container (max-width: 480px) {
    .static-page--role-based-on-demand-summaries .rbs-versions__cols {
        grid-template-columns: 1fr;
    }
}

/* ── Icon chip on the dark card ────────────────────────────────────────────
   The pale teal tint .sp-feature-icon uses would punch a flat hole in the dark
   gradient, so the chip on that card takes a translucent white fill and its
   accent from the on-dark ramp — the same substitution the sibling pages make
   for their dark cards. */
.static-page--role-based-on-demand-summaries .rbs-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;
}
/* 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--role-based-on-demand-summaries .rbs-dark-link {
    margin-top: 1.5rem;
}

/* ── Connected-source chips (sources section) ──────────────────────────────
   One fixed 34px square per service, holding that service's own brand mark.
   The square is what makes a three-logo row read as one set: the marks have
   very different aspect ratios and visual weights — Slack's lattice is airy,
   Trello's is a solid filled tile — so loose in a flex row they would show
   three different apparent sizes.

   Same 34px square and same 18px mark as the knowledge base page's chips, but
   filled white over a hairline instead of translucent white: those sit on a
   dark card and these sit on the page's tint card, where a translucent fill
   would disappear into the tint. The hairline is the page's own #EEF2F1, so the
   chip edge matches every other hairline on the page. */
.static-page--role-based-on-demand-summaries .rbs-source-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #FFFFFF;
    border: 1px solid #EEF2F1;
    color: var(--sp-ink-soft);
}
/* 18px inside a 34px chip: the same 8px optical margin .sp-feature-icon uses,
   so the two icon treatments in this section share one ratio. */
.static-page--role-based-on-demand-summaries .rbs-source-chip svg {
    display: block;
    width: 18px;
    height: 18px;
}
/* Trello's mark is a filled tile that reaches its own edges, where Slack and
   GitHub are open shapes with built-in breathing room. Left at 18px it reads a
   size larger than the other two, so it is trimmed to match by eye. */
.static-page--role-based-on-demand-summaries .rbs-source-chip[title="Trello"] svg {
    width: 16px;
    height: 16px;
}

/* ══ FAQ ═══════════════════════════════════════════════════════════════════
   Native <details>/<summary>. The browser supplies the open/close behavior, 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--role-based-on-demand-summaries .rbs-faq {
    max-width: 52rem;
    margin-inline: auto;
}
.static-page--role-based-on-demand-summaries .rbs-faq__item {
    background: #ffffff;
    border: 1px solid #E9EFEE;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(21, 41, 39, 0.04);
}
.static-page--role-based-on-demand-summaries .rbs-faq__item + .rbs-faq__item {
    margin-top: 0.7rem;
}
.static-page--role-based-on-demand-summaries .rbs-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--role-based-on-demand-summaries .rbs-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--role-based-on-demand-summaries .rbs-faq__q::-webkit-details-marker { display: none; }
.static-page--role-based-on-demand-summaries .rbs-faq__q::marker { content: ""; }
.static-page--role-based-on-demand-summaries .rbs-faq__item[open] .rbs-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--role-based-on-demand-summaries .rbs-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--role-based-on-demand-summaries .rbs-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--role-based-on-demand-summaries .rbs-faq__item[open] .rbs-faq__caret {
    transform: rotate(180deg);
    background: var(--sp-brand-teal);
    color: #ffffff;
}
.static-page--role-based-on-demand-summaries .rbs-faq__a {
    padding: 0 1.3rem 1.2rem;
}
.static-page--role-based-on-demand-summaries .rbs-faq__a p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--sp-ink-soft);
}
/* The two answers that carry a cross-link put it on its own line, so it reads as
   the next thing to do rather than as a phrase inside a sentence. */
.static-page--role-based-on-demand-summaries .rbs-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--role-based-on-demand-summaries .rbs-faq__link:hover,
.static-page--role-based-on-demand-summaries .rbs-faq__link:focus-visible {
    color: var(--sp-brand-teal-dark);
    text-decoration: underline;
}
.static-page--role-based-on-demand-summaries .rbs-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--role-based-on-demand-summaries .rbs-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 color shift. */
.static-page--role-based-on-demand-summaries .rbs-statement .sp-accent {
    font-size: inherit;
}

/* The page's only motion is the hero's eyebrow dot and the FAQ caret, and both
   resolve to a state that says exactly what they say while moving. Nothing else
   on this page animates: every graphic is a still screen. */
@media (prefers-reduced-motion: reduce) {
    .static-page--role-based-on-demand-summaries .rbs-pulse-dot {
        animation: none;
        opacity: 1;
    }
    .static-page--role-based-on-demand-summaries .rbs-faq__caret {
        transition: none;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   REBUILD 2026-09-20. Components added for the eight-section rebuild:
   the tinted mid-page surface, card tab chips, the Member Activity use list,
   the dark band's rule rows, the Member Activity screen mock, the Insights
   tab-strip mock, and the daily notification mock. Every value comes from the
   foundations in the besyncd-product-graphics skill: unitless line-height on
   every graphic root, the four hairline roles, the five shadow roles, the
   radius steps and the six-step spacing ladder.
   ══════════════════════════════════════════════════════════════════════════ */

/* Third surface, so no two adjacent sections share a ground once the daily
   notifications section is inserted. Same two washes as the hero, flattened. */
.static-page--role-based-on-demand-summaries .rbs-surface-tint {
    background:
        radial-gradient(900px 440px at 8% -20%, #E8F3F1 0%, transparent 60%),
        radial-gradient(780px 400px at 94% -6%, var(--sp-brand-blue-tint) 0%, transparent 58%),
        #FBFDFC;
}

/* Figure column wrapper, matching .rbs-hero-figure for the body sections. */
.static-page--role-based-on-demand-summaries .rbs-figure {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
}

/* The week picker beside the day/week/month toggle. Neutral, never teal: the
   toggle already carries the one selection, and a second teal control would
   read as two answers. */
.static-page--role-based-on-demand-summaries .rbs-pages__period--picker {
    margin-left: auto;
    background: #FBFDFC;
    border-style: dashed;
}

/* ── Tab chips inside the four briefing-page cards ─────────────────────── */
.static-page--role-based-on-demand-summaries .rbs-tabchips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    line-height: 1.35;
}
.static-page--role-based-on-demand-summaries .rbs-tabchip {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border: 1px solid #E6EDEB;
    border-radius: 7px;
    background: #ffffff;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    line-height: 1.35;
    color: var(--sp-ink-muted);
    white-space: nowrap;
}
.static-page--role-based-on-demand-summaries .rbs-tabchip.is-on {
    background: var(--sp-brand-teal-tint);
    border-color: var(--sp-brand-teal-soft);
    color: var(--sp-brand-teal-dark);
}

/* ── Member Activity use list ──────────────────────────────────────────── */
.static-page--role-based-on-demand-summaries .rbs-uses {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.static-page--role-based-on-demand-summaries .rbs-uses li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}
.static-page--role-based-on-demand-summaries .rbs-uses li > i {
    flex: none;
    margin-top: 0.2rem;
    width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--sp-brand-teal-tint);
    color: var(--sp-brand-teal);
    font-size: 0.7rem;
    line-height: 1;
}
.static-page--role-based-on-demand-summaries .rbs-uses__name {
    font-family: var(--sp-font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.35;
    color: var(--sp-ink);
    margin: 0 0 0.15rem;
}
.static-page--role-based-on-demand-summaries .rbs-uses__text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--sp-ink-muted);
    margin: 0;
}
.static-page--role-based-on-demand-summaries .rbs-access {
    padding-top: 1rem;
    border-top: 1px solid #EEF2F1;
}

/* ── Dark band rule rows ───────────────────────────────────────────────── */
.static-page--role-based-on-demand-summaries .rbs-rule {
    padding-left: 1rem;
    border-left: 2px solid rgba(134, 207, 196, 0.45);
}
.static-page--role-based-on-demand-summaries .rbs-rule__name {
    font-family: var(--sp-font-display);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.35;
    color: #ffffff;
    margin: 0 0 0.3rem;
}
.static-page--role-based-on-demand-summaries .rbs-rule__text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--sp-ink-on-dark);
    margin: 0;
}

/* ── Member Activity screen mock ───────────────────────────────────────────
   Reuses the .rbs-pages shell (panel, head, period toggle, card) so the two
   screens on this page are recognisably the same product. What is new is the
   department chip row, the member dropdown, and the entries list under the
   summary card. */
.static-page--role-based-on-demand-summaries .rbs-member__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.static-page--role-based-on-demand-summaries .rbs-member__chip {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.45rem;
    border: 1px solid #E6EDEB;
    border-radius: 7px;
    background: #ffffff;
    font-size: 0.55rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--sp-ink-muted);
    white-space: nowrap;
}
.static-page--role-based-on-demand-summaries .rbs-member__chip.is-on {
    background: var(--sp-brand-dark);
    border-color: transparent;
    color: #ffffff;
}
.static-page--role-based-on-demand-summaries .rbs-member__entries {
    margin-top: 0.9rem;
}
.static-page--role-based-on-demand-summaries .rbs-member__entries-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.4rem;
}
.static-page--role-based-on-demand-summaries .rbs-member__entries-name {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.35;
    color: var(--sp-ink);
}
.static-page--role-based-on-demand-summaries .rbs-member__toggle {
    display: inline-flex;
    gap: 0.15rem;
    padding: 0.1rem;
    border-radius: 7px;
    background: #ffffff;
    border: 1px solid #E6EDEB;
}
.static-page--role-based-on-demand-summaries .rbs-member__toggle-item {
    padding: 0.1rem 0.35rem;
    border-radius: 5px;
    font-size: 0.5rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--sp-ink-faint);
}
.static-page--role-based-on-demand-summaries .rbs-member__toggle-item.is-on {
    background: var(--sp-brand-teal-tint);
    color: var(--sp-brand-teal-dark);
}
.static-page--role-based-on-demand-summaries .rbs-member__entry {
    padding: 0.45rem 0.55rem;
    border: 1px solid #F2F6F5;
    border-radius: 10px;
    background: #ffffff;
}
.static-page--role-based-on-demand-summaries .rbs-member__entry + .rbs-member__entry {
    margin-top: 0.25rem;
}
.static-page--role-based-on-demand-summaries .rbs-member__entry-top {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.2rem;
}
.static-page--role-based-on-demand-summaries .rbs-member__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    flex: 1;
    min-width: 0;
}
.static-page--role-based-on-demand-summaries .rbs-member__tag {
    font-family: var(--sp-font-mono);
    font-size: 0.5rem;
    line-height: 1.35;
    color: var(--sp-ink-faint);
    white-space: nowrap;
}
.static-page--role-based-on-demand-summaries .rbs-member__tag--cust {
    color: var(--sp-brand-blue);
}
.static-page--role-based-on-demand-summaries .rbs-member__hours {
    flex: none;
    font-size: 0.5rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--sp-ink-muted);
}
.static-page--role-based-on-demand-summaries .rbs-impact {
    flex: none;
    padding: 0.08rem 0.3rem;
    border-radius: 999px;
    font-size: 0.46rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.4;
    white-space: nowrap;
}
.static-page--role-based-on-demand-summaries .rbs-impact--critical { background: var(--sp-brand-gold-tint); color: var(--sp-brand-gold-ink); }
.static-page--role-based-on-demand-summaries .rbs-impact--medium   { background: var(--sp-brand-blue-tint); color: #1F6389; }
.static-page--role-based-on-demand-summaries .rbs-impact--low      { background: #F1F5F4; color: var(--sp-ink-muted); }
.static-page--role-based-on-demand-summaries .rbs-member__text {
    margin: 0;
    font-size: 0.55rem;
    line-height: 1.5;
    color: var(--sp-ink-soft);
}

.static-page--role-based-on-demand-summaries .rbs-quote {
    font-weight: 700;
    color: var(--sp-brand-teal-dark);
}

/* ── Daily briefing inbox mock ─────────────────────────────────────────────
   An ordinary inbox with the scheduled briefing emails among other mail. The
   subject follows the real email title ("Department, Midday Summary" and
   "End-of-Day Summary"), and the preview is the briefing's own opening line,
   because the scheduled email carries the briefing text itself. */
.static-page--role-based-on-demand-summaries .rbs-inbox {
    position: relative;
    background: #ffffff;
    /* Visible so the bell can sit over the corner; the bar and the last row
       carry the rounding the shell's overflow clip used to provide. */
    overflow: visible;
}
.static-page--role-based-on-demand-summaries .rbs-inbox__list > .rbs-inbox__row:last-child {
    border-radius: 0 0 15px 15px;
}
.static-page--role-based-on-demand-summaries .rbs-inbox__lights {
    display: inline-flex;
    gap: 0.28rem;
    margin-right: 0.6rem;
}
.static-page--role-based-on-demand-summaries .rbs-inbox__light {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}
.static-page--role-based-on-demand-summaries .rbs-inbox__light--close { background: #FF5F57; }
.static-page--role-based-on-demand-summaries .rbs-inbox__light--min   { background: #FEBC2E; }
.static-page--role-based-on-demand-summaries .rbs-inbox__light--max   { background: #28C840; }
.static-page--role-based-on-demand-summaries .rbs-inbox__av--brand img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
}
/* The bell swings from its top, like a hand bell: a short ring, then a rest,
   so the motion reads as an arrival rather than as a loop. */
.static-page--role-based-on-demand-summaries .rbs-inbox__bell {
    position: absolute;
    top: -1.05rem;
    right: -0.85rem;
    z-index: 2;
    display: inline-flex;
    color: var(--sp-brand-teal);
    font-size: 2.1rem;
    line-height: 1;
    /* No disc behind the bell: a white halo and a soft shadow keep the glyph
       legible where it crosses the window's edge. */
    filter: drop-shadow(0 0 1.5px #ffffff) drop-shadow(0 0 1.5px #ffffff)
            drop-shadow(0 6px 10px rgba(21, 41, 39, 0.28));
}
.static-page--role-based-on-demand-summaries .rbs-inbox__bell i {
    display: inline-block; /* transforms do not apply to inline boxes */
    transform-origin: 50% 8%;
    animation: rbs-bell-ring 2.8s ease-in-out infinite;
}
@keyframes rbs-bell-ring {
    0%, 38%, 100% { transform: rotate(0); }
    4%  { transform: rotate(16deg); }
    10% { transform: rotate(-14deg); }
    16% { transform: rotate(10deg); }
    22% { transform: rotate(-7deg); }
    28% { transform: rotate(4deg); }
    33% { transform: rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) {
    .static-page--role-based-on-demand-summaries .rbs-inbox__bell i { animation: none; }
}
.static-page--role-based-on-demand-summaries .rbs-inbox__bar {
    display: flex;
    align-items: center;
    border-radius: 15px 15px 0 0;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #EEF2F1;
    background: #FBFDFC;
}
.static-page--role-based-on-demand-summaries .rbs-inbox__title {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--sp-ink);
}
.static-page--role-based-on-demand-summaries .rbs-inbox__count {
    margin-left: auto;
    /* Clears the bell that overlaps the window's top right corner. */
    margin-right: 1.35rem;
    font-size: 0.5rem;
    color: var(--sp-ink-faint);
}
.static-page--role-based-on-demand-summaries .rbs-inbox__row {
    display: flex;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid #F2F6F5;
    border-left: 2px solid transparent;
}
.static-page--role-based-on-demand-summaries .rbs-inbox__row:last-child {
    border-bottom: 0;
}
.static-page--role-based-on-demand-summaries .rbs-inbox__row.is-besyncd {
    background: #F6FBFA;
}
.static-page--role-based-on-demand-summaries .rbs-inbox__row.is-unread {
    border-left-color: var(--sp-brand-teal);
}
.static-page--role-based-on-demand-summaries .rbs-inbox__av {
    flex: none;
    width: 1.35rem;
    height: 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #EEF2F1;
    color: var(--sp-ink-muted);
    font-size: 0.55rem;
    font-weight: 700;
    line-height: 1;
}
.static-page--role-based-on-demand-summaries .rbs-inbox__av--brand {
    background: var(--sp-brand-teal);
    color: #ffffff;
}
.static-page--role-based-on-demand-summaries .rbs-inbox__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
}
.static-page--role-based-on-demand-summaries .rbs-inbox__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}
.static-page--role-based-on-demand-summaries .rbs-inbox__from {
    font-size: 0.6rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--sp-ink-soft);
}
.static-page--role-based-on-demand-summaries .rbs-inbox__time {
    flex: none;
    font-family: var(--sp-font-mono);
    font-size: 0.48rem;
    color: var(--sp-ink-faint);
}
.static-page--role-based-on-demand-summaries .rbs-inbox__subj {
    font-size: 0.58rem;
    line-height: 1.35;
    color: var(--sp-ink-soft);
}
.static-page--role-based-on-demand-summaries .rbs-inbox__prev {
    font-size: 0.52rem;
    line-height: 1.45;
    color: var(--sp-ink-faint);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.static-page--role-based-on-demand-summaries .rbs-inbox__row.is-unread .rbs-inbox__from,
.static-page--role-based-on-demand-summaries .rbs-inbox__row.is-unread .rbs-inbox__subj {
    font-weight: 700;
    color: var(--sp-ink);
}
.static-page--role-based-on-demand-summaries .rbs-inbox__row.is-unread .rbs-inbox__time {
    color: var(--sp-brand-teal-dark);
}


/* ── Member Activity: the two panels the real page splits into ─────────────
   A narrow member list on the left and the member's own panel on the right,
   in the same proportion the app uses. Both are white cards on the screen's
   recessed ground, so the split reads as two panels rather than as one card
   with a rule down it. */
.static-page--role-based-on-demand-summaries .rbs-member__chips {
    margin-bottom: 0.7rem;
}
.static-page--role-based-on-demand-summaries .rbs-member__cols {
    display: grid;
    grid-template-columns: 104px 1fr;
    gap: 0.45rem;
    align-items: start;
}
.static-page--role-based-on-demand-summaries .rbs-member__list,
.static-page--role-based-on-demand-summaries .rbs-member__main {
    min-width: 0;
    padding: 0.6rem 0.5rem;
    border: 1px solid #E7EEEC;
    border-radius: 12px;
    background: #ffffff;
}
.static-page--role-based-on-demand-summaries .rbs-member__list-head {
    margin-bottom: 0.4rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.35;
    color: var(--sp-ink);
}
.static-page--role-based-on-demand-summaries .rbs-member__list-item {
    display: block;
    padding: 0.26rem 0.35rem;
    border-radius: 7px;
    font-size: 0.55rem;
    line-height: 1.4;
    color: var(--sp-ink-soft);
}
/* The open member sits on a pale row rather than a teal one: the app marks it
   as the current selection, not as an action. */
.static-page--role-based-on-demand-summaries .rbs-member__list-item.is-on {
    background: #F1F5F4;
    font-weight: 700;
    color: var(--sp-ink);
}

.static-page--role-based-on-demand-summaries .rbs-member__person {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}
.static-page--role-based-on-demand-summaries .rbs-member__photo {
    flex: none;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    object-fit: cover;
    background: #EEF2F1;
}
.static-page--role-based-on-demand-summaries .rbs-member__person-lines {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.static-page--role-based-on-demand-summaries .rbs-member__person-name {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.35;
    color: var(--sp-brand-teal);
}
.static-page--role-based-on-demand-summaries .rbs-member__person-dept {
    font-size: 0.62rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--sp-ink-soft);
}
.static-page--role-based-on-demand-summaries .rbs-member__person-role {
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--sp-ink);
}

.static-page--role-based-on-demand-summaries .rbs-member__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.7rem;
}
.static-page--role-based-on-demand-summaries .rbs-member__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.16rem 0.34rem;
    border: 1px solid #E6EDEB;
    border-radius: 999px;
    background: #ffffff;
    font-size: 0.48rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--sp-ink-muted);
    white-space: nowrap;
}
.static-page--role-based-on-demand-summaries .rbs-member__pill i {
    font-size: 0.42rem;
    line-height: 1;
    color: #CBD8D5;
}
.static-page--role-based-on-demand-summaries .rbs-member__pill.is-on {
    background: var(--sp-brand-dark);
    border-color: transparent;
    color: #ffffff;
}
.static-page--role-based-on-demand-summaries .rbs-member__pill.is-on i {
    color: rgba(255, 255, 255, 0.7);
}

/* Below the narrowest container step the two panels stack: 104px of member
   list beside a panel holding a photo, pills and prose stops being legible
   long before the page does. */
@container (max-width: 380px) {
    .static-page--role-based-on-demand-summaries .rbs-member__cols {
        grid-template-columns: 1fr;
    }
}


/* ── Member Activity mock: its own height budget ───────────────────────────
   The section is two columns and the mock is the taller of the two, which
   leaves the copy column floating in white space. So this mock carries its own
   zoom step and its own internal padding rather than the shared .rbs-pages
   values: the hero and the Insights mocks keep theirs untouched, because their
   columns have different budgets. The container steps mirror the shared ones
   so the lg-to-xl column change stays invisible here too. */
.static-page--role-based-on-demand-summaries .rbs-pages--member {
    zoom: 1.2;
}
@container (max-width: 498px) {
    .static-page--role-based-on-demand-summaries .rbs-pages--member { zoom: 1.12; }
}
@container (max-width: 456px) {
    .static-page--role-based-on-demand-summaries .rbs-pages--member { max-width: none; zoom: 1; }
}
.static-page--role-based-on-demand-summaries .rbs-pages--member .rbs-pages__panel {
    padding: 0.8rem;
}
.static-page--role-based-on-demand-summaries .rbs-pages--member .rbs-pages__head {
    margin-bottom: 0.6rem;
}
.static-page--role-based-on-demand-summaries .rbs-pages--member .rbs-member__chips {
    margin-bottom: 0.5rem;
}
.static-page--role-based-on-demand-summaries .rbs-pages--member .rbs-member__list,
.static-page--role-based-on-demand-summaries .rbs-pages--member .rbs-member__main {
    padding: 0.5rem 0.45rem;
}
.static-page--role-based-on-demand-summaries .rbs-pages--member .rbs-member__person {
    margin-bottom: 0.45rem;
}
.static-page--role-based-on-demand-summaries .rbs-pages--member .rbs-member__pills {
    margin-bottom: 0.5rem;
}
.static-page--role-based-on-demand-summaries .rbs-pages--member .rbs-member__entries {
    margin-top: 0.6rem;
}

/* ── Tab cards (Insights and Alerts) ───────────────────────────────────────
   Ported from the client reporting page's channel cards, page-scoped and
   renamed to rbs-. A fixed square per card holds that tab's glyph, tinted to
   the tab: the square is what makes two different glyphs read as one set. */
.static-page--role-based-on-demand-summaries .rbs-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--role-based-on-demand-summaries .rbs-chan--insight {
    background: var(--sp-brand-teal-tint);
    color: var(--sp-brand-teal);
}
/* On the dark card a pale gold tint would punch a flat hole in the gradient,
   so the Alerts chip takes a translucent white fill and carries its colour in
   the glyph instead. */
.static-page--role-based-on-demand-summaries .rbs-chan--alert {
    background: rgba(248, 194, 108, 0.16);
    color: var(--sp-brand-gold);
}
/* Each card is a flex column whose body paragraph takes the spare height, so
   the two cards end level and the dark card's button sits on its bottom edge
   whatever each paragraph's length. The button's own 1.5rem top margin
   (.rbs-dark-link) is the only gap above it, so the paragraph carries no
   bottom margin and the two never stack. */
.static-page--role-based-on-demand-summaries .rbs-chan-cards > .sp-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.static-page--role-based-on-demand-summaries .rbs-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--role-based-on-demand-summaries .rbs-dark-link {
    margin-top: 1.5rem;
}

/* ── Heading, then graphic, below the lg breakpoint ────────────────────────
   Where a section's grid stacks into one column (below Tailwind's lg, 1024px),
   the kicker and H2 come first, the graphic next, and the rest of the copy
   after it. The copy column dissolves into the grid (display: contents) so its
   children can be ordered around the graphic; the grid's row gap is dropped
   because each child already carries its own bottom margin. At lg and up none
   of this applies and the two-column desktop layout is unchanged. */
@media (max-width: 1023.98px) {
    .static-page--role-based-on-demand-summaries .rbs-split {
        row-gap: 0;
    }
    .static-page--role-based-on-demand-summaries .rbs-split > .rbs-copy {
        display: contents;
    }
    .static-page--role-based-on-demand-summaries .rbs-split > .rbs-copy > .sp-kicker {
        order: -3;
        justify-self: start;
    }
    .static-page--role-based-on-demand-summaries .rbs-split > .rbs-copy > h2 {
        order: -2;
    }
    .static-page--role-based-on-demand-summaries .rbs-split > .rbs-figure {
        order: -1;
        margin-top: 0.75rem;
        margin-bottom: 2.5rem;
    }
}

/* ── Sources grid at two columns ───────────────────────────────────────────
   "Briefings Built from Every Source of Work" has three sources. Between
   640px and 1023px the shared .sp-rule-grid drops to two columns, which left
   the third source alone in the left half of row 2. There, an odd last item
   spans both columns. Three columns (1024px up) and one column (below 640px)
   are untouched. */
@media (min-width: 640px) and (max-width: 1023px) {
    .static-page--role-based-on-demand-summaries .rbs-sources-grid > *:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}