/* Proactive Intelligence Alerts — 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 severity feed, the signals list, the
 * alert card, the role matrix, the preferences panel), a composition it invents
 * (the hero surface, the transform row, the rule rows, the FAQ list), or a
 * value genuinely tuned to this page.
 *
 * This page declares no shared partial. Its two panels — the role matrix and
 * the preferences panel — are close cousins of ui-role-visibility.css, and a
 * later pass may well find the shared component underneath them. That is a
 * decision for a pass that owns the shared files; until then everything lives
 * here, which costs nothing (a page's own body.css is downloaded only with the
 * page) and cannot break a sibling page mid-build.
 *
 * Surfaces, hairlines, metric strip, pulse dot, FAQ and closing statement are
 * deliberately the same values as the voice-to-text, knowledge base, client
 * reporting and internal reporting 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--proactive-intelligence-alerts, so
 * nothing leaks into any other page. The prefix is also what would keep this
 * page in control of any shared partial it later declares: deps.json styles are
 * emitted AFTER this file, so order would hand a bare rule back to the partial —
 * specificity is what wins, not order.
 *
 * COLOUR RULE that governs every graphic below. Severity is the only thing this
 * page differentiates by colour, so the ramp — terracotta, gold, blue, neutral —
 * belongs to .pa-sev and appears nowhere else. Exactly one row on any graphic is
 * ever at the hot end. Everything that is not a severity (scopes, channels,
 * roles, sources) stays on the neutral ramp, because tinting those would spend
 * the ramp on distinctions the page is not arguing about.
 *
 * DENSITY note that governs every graphic below. The theme sets line-height as
 * a LENGTH, which does not scale down, so an 11px 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--proactive-intelligence-alerts .pa-surface-soft {
    background: #FBFDFC;
}
.static-page--proactive-intelligence-alerts .pa-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 colour. Same construction as the sibling pages. The
   severity ramp is deliberately absent from the page furniture: the hot end
   appears only inside the feed, on one row. */
.static-page--proactive-intelligence-alerts .pa-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--proactive-intelligence-alerts .pa-pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sp-brand-teal);
    flex-shrink: 0;
    animation: paPulse 1.8s ease-in-out infinite;
}
@keyframes paPulse {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 1; }
}

/* ══ Severity chips ════════════════════════════════════════════════════════
   The page's one coloured vocabulary, defined once and used by three graphics
   (the hero feed, the alert card in the dark band, the preferences panel). That
   reuse is the point: it is what ties "the rating" to "the setting you choose"
   without a sentence explaining that they are the same four levels.

   Four steps with a genuine hot end. The brand palette stops at gold, which is
   correct for an accent but cannot carry a top severity — if Critical and High
   are both gold the graphic has three levels, not four. So a muted terracotta
   is defined locally, under the slug prefix, rather than added to shared.css:
   it is desaturated and near-white-grounded so it sits inside the brand rather
   than shouting over it, and no other page inherits it.

   The ink values are the dark end of each hue so they clear contrast on their
   own tint — the same reason shared.css keeps a separate --sp-brand-gold-ink. */
.static-page--proactive-intelligence-alerts {
    --pa-sev-critical-ink: #A33A2A;
    --pa-sev-critical-tint: #FBEEEA;
    --pa-sev-critical-edge: rgba(163, 58, 42, 0.24);
}
.static-page--proactive-intelligence-alerts .pa-sev {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    padding: 0.18rem 0.5rem;
    border-radius: 7px;
    border: 1px solid transparent;
    font-family: var(--sp-font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.3;
    white-space: nowrap;
}
.static-page--proactive-intelligence-alerts .pa-sev--critical {
    background: var(--pa-sev-critical-tint);
    border-color: var(--pa-sev-critical-edge);
    color: var(--pa-sev-critical-ink);
}
.static-page--proactive-intelligence-alerts .pa-sev--high {
    background: var(--sp-brand-gold-tint);
    border-color: rgba(248, 194, 108, 0.45);
    color: var(--sp-brand-gold-ink);
}
.static-page--proactive-intelligence-alerts .pa-sev--medium {
    background: var(--sp-brand-blue-tint);
    border-color: rgba(40, 127, 171, 0.28);
    color: var(--sp-brand-blue);
}
/* One idea animated, not four: a slow breath on the single critical chip, which
   is the page's claim (something needs attention now) and nothing else. Pure CSS
   on an infinite loop — no script, and nothing gated behind an
   IntersectionObserver, so it runs wherever the markup lands rather than only
   where a callback fires. It animates the ring rather than the chip's own fill,
   so the label's contrast never moves. */
.static-page--proactive-intelligence-alerts .pa-sev--live {
    position: relative;
}
.static-page--proactive-intelligence-alerts .pa-sev--live::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 9px;
    border: 2px solid var(--pa-sev-critical-ink);
    opacity: 0;
    animation: paSevPing 3.6s ease-out infinite;
}
@keyframes paSevPing {
    0%   { opacity: 0;    transform: scale(0.94); }
    10%  { opacity: 0.55; transform: scale(1); }
    34%  { opacity: 0;    transform: scale(1.12); }
    100% { opacity: 0;    transform: scale(1.12); }
}

/* ══ Severity feed (hero graphic) ══════════════════════════════════════════
   The page's argument drawn once: four observations, one per severity level, in
   order. The ordering is the graphic's whole job — it shows what a rating is
   FOR (deciding what deserves an interruption) and teaches the four levels
   without a legend to read.

   Capped at 26rem inside the hero's fixed 440px column. Between the one-column
   breakpoint and the desktop two-column layout the hero is full width, and an
   uncapped panel stretches these rows into thin sparse lines that stop reading
   as a product. Inside the cap the anatomy is: 416px less 2 x --pa-pad (33.6px)
   less the 4.6rem severity column (73.6px) less the 0.6rem gap (9.6px) = 299px
   for the observation text, which at 0.78rem sets the longest of the four to
   two lines. */
.static-page--proactive-intelligence-alerts .pa-hero-figure {
    display: flex;
    justify-content: center;
    align-items: center;
}
.static-page--proactive-intelligence-alerts .pa-feed {
    --pa-pad: 1.05rem;
    width: 100%;
    max-width: 26rem;
    background: #ffffff;
    border: 1px solid #E7EEEC;
    border-radius: 16px;
    padding: var(--pa-pad);
    line-height: 1.35;
    letter-spacing: -0.005em;
    text-align: left;
    box-shadow: 0 1px 2px rgba(21, 41, 39, 0.05),
                0 18px 40px -26px rgba(21, 41, 39, 0.45);
}
.static-page--proactive-intelligence-alerts .pa-feed__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid #EEF2F1;
}
.static-page--proactive-intelligence-alerts .pa-feed__title {
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: #0E223B;
}
/* Mono is reserved for genuine identifiers on these pages, and a period label is
   one — the same treatment the sibling pages give their "This week". */
.static-page--proactive-intelligence-alerts .pa-feed__tag {
    font-family: var(--sp-font-mono);
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sp-ink-faint);
    white-space: nowrap;
}
/* Rows are full-bleed: the row list cancels the panel's padding and each row
   adds exactly the same amount back inside, so a divider reaches both panel
   edges while the text still lines up with the header above it. Both halves
   derive from --pa-pad, so retuning the panel moves them together. */
.static-page--proactive-intelligence-alerts .pa-feed__rows {
    margin-inline: calc(-1 * var(--pa-pad));
}
.static-page--proactive-intelligence-alerts .pa-alert {
    display: grid;
    grid-template-columns: 5.6rem 1fr;
    align-items: start;
    gap: 0.6rem;
    padding: 0.6rem var(--pa-pad);
}
.static-page--proactive-intelligence-alerts .pa-alert + .pa-alert {
    border-top: 1px solid #F2F6F5;
}
/* The chip is stretched to the column rather than left at its own width, so the
   labels form a straight edge and the eye reads the ramp as a scale rather than
   as unrelated tags.

   The column is 5.6rem because the longest level name sets it: "Recommended" is
   eleven characters at 0.6rem mono with 0.04em tracking (~68px) inside 0.5rem of
   chip padding either side, so it needs ~86px. Sized to "Critical" the chip
   would spill over the observation text beside it. */
.static-page--proactive-intelligence-alerts .pa-alert .pa-sev {
    width: 100%;
}
.static-page--proactive-intelligence-alerts .pa-alert__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.static-page--proactive-intelligence-alerts .pa-alert__text {
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--sp-ink);
}
/* The one-line reason under each alert, as the real card shows its rationale. */
.static-page--proactive-intelligence-alerts .pa-alert__why {
    margin-top: 0.2rem;
    font-size: 0.7rem;
    line-height: 1.4;
    color: var(--sp-ink-muted);
}
.static-page--proactive-intelligence-alerts .pa-feed__foot {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid #EEF2F1;
    font-size: 0.66rem;
    line-height: 1.45;
    color: var(--sp-ink-faint);
}
.static-page--proactive-intelligence-alerts .pa-feed__foot i {
    font-size: 0.8rem;
    color: var(--sp-brand-teal);
    flex: none;
}

/* ── Metric strip ──────────────────────────────────────────────────────────
   The values here are short phrases as often as numbers ("Every source", "Your
   work day"), 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 page
   settled on, for the same reason. */
.static-page--proactive-intelligence-alerts .pa-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--proactive-intelligence-alerts .pa-metric__label {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--sp-ink-muted);
    max-width: 12rem;
}

/* ══ Transform row (dark band) ═════════════════════════════════════════════
   Three columns — the updates nobody flagged, an arrow, the alert they add up
   to — because the whole claim of the section is that the one becomes 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 (updates → alert) on a phone. */
/* The photo card sits in the right column of a two-column split. Its width is
   capped so the photograph and its caption stay the size of a card rather than
   stretching to the column; stacked, the shared split rules place it under the
   heading and it recentres. */
.static-page--proactive-intelligence-alerts .pa-photo-card {
    width: 100%;
    max-width: 520px;
    margin-left: auto;
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7);
}
@media (max-width: 1023.98px) {
    .static-page--proactive-intelligence-alerts .pa-photo-card {
        margin-inline: auto;
    }
}

/* The three steps on the left of the dark band, the same rule rows the
   summaries page uses in its dark band. */
.static-page--proactive-intelligence-alerts .pa-band-rule {
    padding-left: 1rem;
    border-left: 2px solid rgba(134, 207, 196, 0.45);
}
.static-page--proactive-intelligence-alerts .pa-band-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--proactive-intelligence-alerts .pa-band-rule__text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--sp-ink-on-dark);
    margin: 0;
}

/* ── Photo card (dark band, input side) ────────────────────────────────────
   A photograph with the four updates written underneath it. The card chrome —
   white, radius, padding, shadow — lives here rather than on the list inside it,
   so the photo and the caption are one object and not two stacked cards. Same
   anatomy as the sibling pages' band photo cards, which is the same move: a
   human moment on the input side, the machine's finished judgement on the
   other. */
.static-page--proactive-intelligence-alerts .pa-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;
}

/* 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 the sibling pages give their band photos.

   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 if it ever 404s. */
.static-page--proactive-intelligence-alerts .pa-photo-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1100 / 821;
    object-fit: cover;
    border-radius: 6px;
}

/* ── Signals list (under the photograph) ───────────────────────────────────
   Four rows at the scale of the alert opposite, so the pair reads as one object
   either side of the arrow rather than as two unrelated graphics.

   No hairline above the head: the head already carries one beneath it, and a
   second rule immediately above would box the caption off from the photograph it
   belongs to. Space does the separating instead.

   Nothing here is tinted, and that is a decision rather than an omission. The
   four rows are four instances of one thing — an update nobody thought was
   urgent — so colouring them apart would differentiate something the graphic is
   not arguing about, and would spend the severity ramp before the payoff. All of
   the section's colour is on the right, where the judgement is. Each team disc
   therefore takes the neutral control treatment: recessed surface, control edge,
   muted glyph.

   The rows are set tight — 0.28rem of vertical padding, 1.3 on the quote and 1.25
   on the team line, with the team line sitting straight under the quote — because
   the two halves of the band are peers and height is what says so. Airy rows here
   would make this card taller than the alert opposite, at which point the alert
   stops reading as the answer to these updates and starts reading as an ornament
   beside them. The number to tighten to is the rhythm of the rows these face
   across the arrow: four quoted updates on the left, four named sources on the
   right, close enough in pace that the eye pairs them off. */
.static-page--proactive-intelligence-alerts .pa-signals {
    margin-top: 0.8rem;
}
.static-page--proactive-intelligence-alerts .pa-signals__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #EFF4F3;
}
.static-page--proactive-intelligence-alerts .pa-signals__title {
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
    color: #0E223B;
}
.static-page--proactive-intelligence-alerts .pa-signals__when {
    font-family: var(--sp-font-mono);
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sp-ink-faint);
    white-space: nowrap;
}
.static-page--proactive-intelligence-alerts .pa-signal {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.28rem 0;
}
.static-page--proactive-intelligence-alerts .pa-signal + .pa-signal {
    border-top: 1px solid #F4F8F7;
}
.static-page--proactive-intelligence-alerts .pa-signal__who {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: #FBFDFC;
    border: 1px solid #E6EDEB;
    color: var(--sp-ink-muted);
    font-size: 0.72rem;
    line-height: 1;
}
.static-page--proactive-intelligence-alerts .pa-signal__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.static-page--proactive-intelligence-alerts .pa-signal__text {
    font-size: 0.78rem;
    line-height: 1.3;
    color: var(--sp-ink);
}
/* Carries the team in words as well as in a glyph, so the thing the disc shows
   is also stated for anyone who cannot see it. Teams are named, never drawn: a
   team has many people, so an avatar would misrepresent it. */
.static-page--proactive-intelligence-alerts .pa-signal__meta {
    font-size: 0.65rem;
    line-height: 1.25;
    color: var(--sp-ink-faint);
}



/* ── Rule rows (permissions copy column) ───────────────────────────────────
   The four decisions an owner actually makes, as bars: the decision's name, and
   in the mono column its answer. Same bar as the internal reporting page's
   covers rows and the knowledge base page's permission rules, because it is the
   same move — a short fixed list where every row has exactly one value. */
.static-page--proactive-intelligence-alerts .pa-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--proactive-intelligence-alerts .pa-rule-row__what {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--sp-ink);
}
.static-page--proactive-intelligence-alerts .pa-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;
}
/* The bar's fill is the soft surface colour, which is what makes it read as a
   raised row on the white sections. On a soft section — the sources section
   uses the same component — that fill and the section ground are the same
   value, so the row would flatten to an outline. White inverts the same
   relationship and keeps the row reading as a bar rather than as a box drawn
   around some text. */
.static-page--proactive-intelligence-alerts .pa-surface-soft .pa-rule-row {
    background: #FFFFFF;
}
/* 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--proactive-intelligence-alerts .pa-rule-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }
    .static-page--proactive-intelligence-alerts .pa-rule-row__value {
        text-align: left;
    }
}

/* ══ 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--proactive-intelligence-alerts .pa-faq {
    max-width: 52rem;
    margin-inline: auto;
}
.static-page--proactive-intelligence-alerts .pa-faq__item {
    background: #ffffff;
    border: 1px solid #E9EFEE;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(21, 41, 39, 0.04);
}
.static-page--proactive-intelligence-alerts .pa-faq__item + .pa-faq__item {
    margin-top: 0.7rem;
}
.static-page--proactive-intelligence-alerts .pa-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--proactive-intelligence-alerts .pa-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--proactive-intelligence-alerts .pa-faq__q::-webkit-details-marker { display: none; }
.static-page--proactive-intelligence-alerts .pa-faq__q::marker { content: ""; }
.static-page--proactive-intelligence-alerts .pa-faq__item[open] .pa-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--proactive-intelligence-alerts .pa-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--proactive-intelligence-alerts .pa-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--proactive-intelligence-alerts .pa-faq__item[open] .pa-faq__caret {
    transform: rotate(180deg);
    background: var(--sp-brand-teal);
    color: #ffffff;
}
.static-page--proactive-intelligence-alerts .pa-faq__a {
    padding: 0 1.3rem 1.2rem;
}
.static-page--proactive-intelligence-alerts .pa-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--proactive-intelligence-alerts .pa-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--proactive-intelligence-alerts .pa-faq__link:hover,
.static-page--proactive-intelligence-alerts .pa-faq__link:focus-visible {
    color: var(--sp-brand-teal-dark);
    text-decoration: underline;
}
.static-page--proactive-intelligence-alerts .pa-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--proactive-intelligence-alerts .pa-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--proactive-intelligence-alerts .pa-statement .sp-accent {
    font-size: inherit;
}

@media (prefers-reduced-motion: reduce) {
    .static-page--proactive-intelligence-alerts .pa-pulse-dot {
        animation: none;
        opacity: 1;
    }
    .static-page--proactive-intelligence-alerts .pa-faq__caret {
        transition: none;
    }
    /* The severity ping is the only looping graphic on the page, and its resolved
       end state is a ring that has already faded out. Freezing it there means
       hiding it, and that costs the graphic nothing: the claim is carried by the
       four chips and their ordering, which are static and fully drawn. This is
       what the guard is for — stopping a loop must never leave a graphic saying
       less than it says when the loop finishes. */
    .static-page--proactive-intelligence-alerts .pa-sev--live::after {
        animation: none;
        opacity: 0;
    }
}


/* ══ Where alerts show up: the alert email ═════════════════════════════════
   Drawn from the real alert email template: a header count, one card per alert
   with a severity-coloured left edge on the severity tint, and a totals link
   whose counts carry their severity colour. Every text element sets its own
   line-height (see the density note at the top of this file). */
.static-page--proactive-intelligence-alerts .pa-where {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: start;
}
.static-page--proactive-intelligence-alerts .pa-mail-wrap {
    display: flex;
    justify-content: center;
}
.static-page--proactive-intelligence-alerts .pa-mail {
    width: 100%;
    max-width: 440px;
    background: #ffffff;
    border: 1px solid #E7EEEC;
    border-radius: 16px;
    line-height: 1.35;
    text-align: left;
    box-shadow: 0 1px 2px rgba(21, 41, 39, 0.05),
                0 18px 40px -26px rgba(21, 41, 39, 0.45);
}
.static-page--proactive-intelligence-alerts .pa-mail__bar {
    display: flex;
    align-items: center;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #EEF2F1;
    border-radius: 15px 15px 0 0;
    background: #FBFDFC;
}
.static-page--proactive-intelligence-alerts .pa-mail__lights {
    display: inline-flex;
    gap: 0.28rem;
}
.static-page--proactive-intelligence-alerts .pa-mail__light {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}
.static-page--proactive-intelligence-alerts .pa-mail__light--close { background: #FF5F57; }
.static-page--proactive-intelligence-alerts .pa-mail__light--min   { background: #FEBC2E; }
.static-page--proactive-intelligence-alerts .pa-mail__light--max   { background: #28C840; }
.static-page--proactive-intelligence-alerts .pa-mail__from {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.05rem 0.75rem;
    border-bottom: 1px solid #F2F6F5;
}
.static-page--proactive-intelligence-alerts .pa-mail__av {
    width: 1.9rem;
    height: 1.9rem;
    flex: none;
}
.static-page--proactive-intelligence-alerts .pa-mail__av img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
}
.static-page--proactive-intelligence-alerts .pa-mail__who {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.static-page--proactive-intelligence-alerts .pa-mail__name {
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.3;
    color: #0E223B;
}
.static-page--proactive-intelligence-alerts .pa-mail__to {
    font-size: 0.66rem;
    line-height: 1.3;
    color: var(--sp-ink-faint);
}
.static-page--proactive-intelligence-alerts .pa-mail__time {
    margin-left: auto;
    font-size: 0.66rem;
    line-height: 1.3;
    color: var(--sp-ink-faint);
    white-space: nowrap;
}
.static-page--proactive-intelligence-alerts .pa-mail__body {
    padding: 0.95rem 1.05rem 1.1rem;
}
.static-page--proactive-intelligence-alerts .pa-mail__count {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: #0E223B;
}
.static-page--proactive-intelligence-alerts .pa-mail__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    margin-bottom: 0.55rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid #EEF2F1;
    border-left-width: 3px;
    border-radius: 8px;
}
.static-page--proactive-intelligence-alerts .pa-mail__card--critical {
    background: var(--pa-sev-critical-tint);
    border-left-color: var(--pa-sev-critical-ink);
}
.static-page--proactive-intelligence-alerts .pa-mail__card--high {
    background: var(--sp-brand-gold-tint);
    border-left-color: #E0A443;
}
.static-page--proactive-intelligence-alerts .pa-mail__card .pa-sev {
    background: #ffffff;
}
.static-page--proactive-intelligence-alerts .pa-mail__text {
    font-size: 0.76rem;
    line-height: 1.4;
    color: var(--sp-ink);
}
.static-page--proactive-intelligence-alerts .pa-mail__cta {
    margin: 0.9rem 0 0;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.6;
}
.static-page--proactive-intelligence-alerts .pa-mail__cta-lead {
    color: var(--sp-brand-teal);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.static-page--proactive-intelligence-alerts .pa-mail__cta-sep {
    color: #9CA3AF;
    margin-inline: 0.2rem;
}
.static-page--proactive-intelligence-alerts .pa-mail__cta-n--critical { color: var(--pa-sev-critical-ink); }
.static-page--proactive-intelligence-alerts .pa-mail__cta-n--high     { color: var(--sp-brand-gold-ink); }
.static-page--proactive-intelligence-alerts .pa-mail__cta-n--medium   { color: var(--sp-brand-blue); }
.static-page--proactive-intelligence-alerts .pa-mail__cta-lead,
.static-page--proactive-intelligence-alerts .pa-mail__cta-n {
    white-space: nowrap;
}
.static-page--proactive-intelligence-alerts .pa-mail__subject {
    margin: 0;
    padding: 0.85rem 1.05rem 0;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: #0E223B;
}
.static-page--proactive-intelligence-alerts .pa-mail__subject + .pa-mail__from {
    padding-top: 0.6rem;
}


/* ══ Choose what reaches you: the settings panel ═══════════════════════════
   One panel joining the two real settings screens: the follow grid (scope by
   cadence) and the email rows (cadence, minimum level, email switch). */
.static-page--proactive-intelligence-alerts .pa-subs-wrap {
    display: flex;
    justify-content: center;
}
.static-page--proactive-intelligence-alerts .pa-subs {
    --pa-pad: 1.05rem;
    width: 100%;
    max-width: 440px;
    background: #ffffff;
    border: 1px solid #E7EEEC;
    border-radius: 16px;
    padding: var(--pa-pad);
    line-height: 1.35;
    text-align: left;
    box-shadow: 0 1px 2px rgba(21, 41, 39, 0.05),
                0 18px 40px -26px rgba(21, 41, 39, 0.45);
}
.static-page--proactive-intelligence-alerts .pa-subs__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid #EEF2F1;
}
.static-page--proactive-intelligence-alerts .pa-subs__title {
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: #0E223B;
}
.static-page--proactive-intelligence-alerts .pa-subs__tag,
.static-page--proactive-intelligence-alerts .pa-subs__label {
    font-family: var(--sp-font-mono);
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--sp-ink-faint);
    white-space: nowrap;
}
.static-page--proactive-intelligence-alerts .pa-subs__block {
    padding-top: 0.9rem;
}
.static-page--proactive-intelligence-alerts .pa-subs__label {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--sp-brand-teal);
}
.static-page--proactive-intelligence-alerts .pa-subs__row {
    display: grid;
    grid-template-columns: 1fr repeat(3, 3.6rem);
    align-items: center;
    justify-items: center;
    padding: 0.42rem 0;
    border-top: 1px solid #F2F6F5;
}
.static-page--proactive-intelligence-alerts .pa-subs__row--head {
    border-top: none;
    padding-top: 0;
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--sp-ink-muted);
}
.static-page--proactive-intelligence-alerts .pa-subs__scope {
    justify-self: start;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--sp-ink);
}
.static-page--proactive-intelligence-alerts .pa-subs__box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.95rem;
    height: 0.95rem;
    border: 1.5px solid #CBD8D5;
    border-radius: 4px;
    font-size: 0.62rem;
    line-height: 1;
    color: #ffffff;
}
.static-page--proactive-intelligence-alerts .pa-subs__box--on {
    background: var(--sp-brand-teal);
    border-color: var(--sp-brand-teal);
}
.static-page--proactive-intelligence-alerts .pa-subs__email {
    display: grid;
    grid-template-columns: 1fr 6rem 2.6rem;
    align-items: center;
    gap: 0.6rem;
    padding: 0.42rem 0;
    border-top: 1px solid #F2F6F5;
}
.static-page--proactive-intelligence-alerts .pa-subs__email--head {
    border-top: none;
    padding-top: 0;
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--sp-ink-muted);
}
.static-page--proactive-intelligence-alerts .pa-subs__email .pa-sev {
    width: 100%;
}
.static-page--proactive-intelligence-alerts .pa-subs__cad {
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--sp-ink);
}
.static-page--proactive-intelligence-alerts .pa-subs__switch {
    justify-self: end;
    position: relative;
    width: 1.75rem;
    height: 1rem;
    border-radius: 999px;
    background: #D9E3E1;
}
.static-page--proactive-intelligence-alerts .pa-subs__switch span {
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(21, 41, 39, 0.25);
}
.static-page--proactive-intelligence-alerts .pa-subs__switch--on {
    background: var(--sp-brand-teal);
}
.static-page--proactive-intelligence-alerts .pa-subs__switch--on span {
    left: auto;
    right: 0.125rem;
}
.static-page--proactive-intelligence-alerts .pa-subs__foot {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid #EEF2F1;
    font-size: 0.66rem;
    line-height: 1.45;
    color: var(--sp-ink-faint);
}
.static-page--proactive-intelligence-alerts .pa-subs__foot i {
    font-size: 0.8rem;
    color: var(--sp-brand-teal);
    flex: none;
}

/* ── Signal list type on phones ────────────────────────────────────────────
   The "Mon-Thu" range label (0.55rem, 8.8px) and each signal's team and day
   line (0.65rem, 10.4px) are raised to 11px below 768px. The card has the
   room: the header row still fits on one line and each meta line stays one
   line at 390px. Tablet and desktop sizes are unchanged. */
@media (max-width: 767px) {
    .static-page--proactive-intelligence-alerts .pa-signals__when,
    .static-page--proactive-intelligence-alerts .pa-signal__meta {
        font-size: 0.6875rem;
    }
}