/* MCP Read API — 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 connection panel, the ask caption, the
 * answer card, the access 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 access panel is a close cousin of
 * ui-role-visibility.css and of the alerts page's role matrix, and a later pass
 * may well find the shared component underneath all three. 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, internal reporting, security and alerts 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--mcp-read-api, 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. Gold carries exactly one
 * meaning on this page — the read-only limit — and now appears in exactly ONE
 * place: .mra-readonly-chip in the hero chat mock's tool block. The band's
 * .mra-readonly strip was the second and was removed when the band was
 * simplified, so the dark band carries no gold at all. That limit is the one
 * thing a
 * reader would not have predicted, so it gets the one colour nothing else uses.
 * Teal stays the action colour, blue carries the transform arrow and the
 * feature discs shared.css supplies, and everything else sits on the neutral
 * ramp. No third accent is introduced.
 *
 * 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--mcp-read-api .mra-surface-soft{
    background: #FBFDFC;
}
.static-page--mcp-read-api .mra-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. */
.static-page--mcp-read-api .mra-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--mcp-read-api .mra-pulse-dot{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sp-brand-teal);
    flex-shrink: 0;
    animation: mraPulse 1.8s ease-in-out infinite;
}
@keyframes mraPulse {
    0%, 100%{ opacity: 0.35; }
    50%{ opacity: 1; }
}

/* ══ Read-only marks — the page's only gold ════════════════════════════════
   One element now, one meaning. The chip closes the hero chat mock's tool
   block, and it says the one thing about this connection a reader would not
   have assumed: it can look things up and it can do nothing else. Its placement
   is the argument — it sits directly under the two tool calls, which is the
   moment a reader watching an assistant reach into a company system wonders
   what else that reach could do. The band's matching gold strip was removed
   with the band's simplification, so this is the page's only gold; if a second
   one is ever added, it has to mean read-only too or the rule is gone.

   Gold-ink rather than gold, because --sp-brand-gold is a surface value and
   only --sp-brand-gold-ink clears contrast on its own tint. */
.static-page--mcp-read-api .mra-readonly-chip{
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex: none;
    padding: 0.2rem 0.5rem;
    border-radius: 7px;
    border: 1px solid rgba(248, 194, 108, 0.45);
    background: var(--sp-brand-gold-tint);
    font-family: var(--sp-font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.3;
    color: var(--sp-brand-gold-ink);
    white-space: nowrap;
}
.static-page--mcp-read-api .mra-readonly-chip i{
    font-size: 0.7rem;
    line-height: 1;
}

/* ══ Chat mock (hero graphic) ═══════════════════════════════════════════════
   The page's argument, drawn as the thing actually happening: a question typed
   into some other company's AI assistant, two BeSync'd calls underneath it, and
   a reply built from what those calls returned. The reader has not made this
   connection yet, so the graphic shows it being used rather than being
   configured — the mechanics. The finished, fully sourced answer is the payoff
   and belongs in the dark band.

   IDIOM, NOT IMITATION. Everything here is chosen so the mock reads as somebody
   else's chat window rather than as this site's own agent card: a right-aligned
   user bubble, tool rows collapsed to one line each, a reply with no bubble
   around it, and a composer pill at the bottom. Its chrome — the mark disc and
   the send button — is the neutral ink ramp rather than brand teal, because the
   window belongs to another product. The ONLY colour inside the mock is the
   teal on the two BeSync'd tool calls and the gold on the read-only chip, so
   the reader's eye lands on exactly the part BeSync'd supplies. No third-party
   name, logo, wordmark or brand hue appears.

   Capped at 26rem inside the hero's fixed 440px column, the same as the panel
   it replaced and for the same reason: between the one-column breakpoint and
   the desktop two-column layout the hero is full width, and an uncapped mock
   stretches these ~11px rows into thin sparse lines that stop reading as a
   product. Inside the cap the anatomy is 416px less 2 x --mra-pad (33.6px) =
   382.4px of content. */
.static-page--mcp-read-api .mra-hero-figure{
    display: flex;
    justify-content: center;
    align-items: center;
    container-type: inline-size;
}
.static-page--mcp-read-api .mra-chat{
    --mra-pad: 1.05rem;
    width: 100%;
    max-width: 26rem;
    background: #ffffff;
    border: 1px solid #E7EEEC;
    border-radius: 18px;
    padding: var(--mra-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);
}

/* The window's title bar. Same three-part anatomy as the dark band's answer
   head — mark, two-line identity, mono tag — because a reader moving down the
   page should recognise the second card as the same kind of object as the
   first. The identity line is what the band's "as Priya" corresponds to, and it
   is the one thing the replaced connection panel had that nothing else on the
   page restates. */
.static-page--mcp-read-api .mra-chat__head{
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid #EEF2F1;
}
/* Ink rather than teal, and filled rather than tinted: this is the other
   product's mark, and giving it the brand disc every BeSync'd card uses would
   quietly claim the window. */
.static-page--mcp-read-api .mra-chat__mark{
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--sp-ink);
    color: #ffffff;
    font-size: 0.85rem;
    line-height: 1;
}
.static-page--mcp-read-api .mra-chat__who{
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.static-page--mcp-read-api .mra-chat__name{
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: #0E223B;
}
.static-page--mcp-read-api .mra-chat__where{
    font-size: 0.64rem;
    line-height: 1.35;
    color: var(--sp-ink-faint);
}
/* Mono is reserved for genuine identifiers on these pages, and "MCP" is one —
   the same treatment the sibling panels give their tags. */
.static-page--mcp-read-api .mra-chat__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;
    flex: none;
}

/* ── The thread ───────────────────────────────────────────────────────────
   Four beats in one column: what was asked, what was called, what the calls
   were allowed to do, what came back. The gap is the same between all of them,
   so nothing in the sequence reads as an aside. */
.static-page--mcp-read-api .mra-chat__thread{
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-top: 0.85rem;
}
.static-page--mcp-read-api .mra-msg{
    margin: 0;
}
/* The user's turn: right-aligned, filled, with the corner nearest the sender
   squared off. That asymmetry is the whole reason this reads as a chat rather
   than as a list of statements, and it costs one radius value. */
.static-page--mcp-read-api .mra-msg--user{
    align-self: flex-end;
    max-width: 92%;
    padding: 0.5rem 0.75rem;
    border-radius: 14px 14px 4px 14px;
    background: #F1F5F4;
    border: 1px solid #E8EEEC;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--sp-ink);
}
/* The assistant's turn carries no bubble, which is what current assistants do
   and what keeps the reply reading as the substance rather than as another
   exchange. It is also the largest run of text in the mock, because it is the
   only part a reader has to actually take in. */
.static-page--mcp-read-api .mra-msg--reply{
    font-size: 0.8rem;
    line-height: 1.65;
    color: var(--sp-ink);
}

/* ── Tool calls ───────────────────────────────────────────────────────────
   The graphic's payload. Each row is one call: a finished-state disc, what was
   called, what it was called for, and a done marker. Recessed on the soft
   surface so it reads as machine work between two human turns rather than as a
   third turn.

   Both rows name "BeSync'd MCP" in full rather than leaning on the card's
   header, because the row is the thing a reader will screenshot and quote, and
   a row reading only "fetch work updates" would not say whose. */
.static-page--mcp-read-api .mra-tools{
    border: 1px solid #E6EDEB;
    border-radius: 12px;
    background: #FBFDFC;
    padding: 0.6rem 0.7rem;
}
.static-page--mcp-read-api .mra-tools__label{
    display: block;
    margin-bottom: 0.4rem;
    font-family: var(--sp-font-mono);
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--sp-ink-faint);
}
.static-page--mcp-read-api .mra-tool{
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.32rem 0;
}
.static-page--mcp-read-api .mra-tool + .mra-tool{
    border-top: 1px solid #EDF3F1;
}
/* Teal, and a check rather than a spinner: the calls have returned. A mock that
   showed work in progress would be claiming a speed nobody measured. */
.static-page--mcp-read-api .mra-tool__state{
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.12rem;
    border-radius: 50%;
    background: var(--sp-brand-teal-tint);
    color: var(--sp-brand-teal);
    font-size: 0.6rem;
    line-height: 1;
}
.static-page--mcp-read-api .mra-tool__main{
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.static-page--mcp-read-api .mra-tool__name{
    font-size: 0.71rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--sp-ink);
}
/* The scope, in the words the replaced connection panel used. This second line
   is why the rows are two-line rather than chips: "fetch work updates" alone
   would drop the page's claim that a call is bounded by the asker's access
   before it runs. */
.static-page--mcp-read-api .mra-tool__meta{
    font-size: 0.62rem;
    line-height: 1.3;
    color: var(--sp-ink-faint);
}
.static-page--mcp-read-api .mra-tool__done{
    flex: none;
    margin-top: 0.15rem;
    font-family: var(--sp-font-mono);
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--sp-brand-teal);
    white-space: nowrap;
}
.static-page--mcp-read-api .mra-tools__foot{
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.45rem;
    padding-top: 0.5rem;
    border-top: 1px solid #EDF3F1;
}
.static-page--mcp-read-api .mra-tools__foot-text{
    font-size: 0.62rem;
    line-height: 1.4;
    color: var(--sp-ink-faint);
}

/* ── Composer ─────────────────────────────────────────────────────────────
   A message box the reader will never type in, kept because it is the single
   cheapest signal that this window is a chat client rather than a card this
   site drew. Its send disc takes the same ink as the mark disc, so the two
   pieces of borrowed chrome match each other and neither matches BeSync'd. */
.static-page--mcp-read-api .mra-composer{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: 0.85rem;
    padding: 0.32rem 0.32rem 0.32rem 0.85rem;
    border: 1px solid #E7EEEC;
    border-radius: 999px;
    background: #FBFDFC;
}
.static-page--mcp-read-api .mra-composer__text{
    min-width: 0;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--sp-ink-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.static-page--mcp-read-api .mra-composer__send{
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--sp-ink);
    color: #ffffff;
    font-size: 0.75rem;
    line-height: 1;
}

/* 386px is derived from measured ink, not rounded down from an estimate, and
   the container it is asked of is .mra-hero-figure — the mock's width is set by
   the column it sits in (440px beside the copy, viewport-minus-48 once the hero
   stacks), never by the viewport.

   The binding item is NOT the longest string in the mock. It is the longer of
   the two tool names, "BeSync'd MCP · search connected data sources", because
   it is the only line that has to share its row with something else. Rendered
   at 0.71rem/600 it measures 269.5px of ink. Its row's fixed anatomy inside a
   container of width C is: the mock's 2 x 1px border and 2 x --mra-pad
   (35.6px), the tool block's own 2 x 1px border and 2 x 0.7rem padding
   (24.4px), the 1.1rem state disc (17.6px), two 0.5rem gaps (16px) and the
   "Done" marker (24.72px) — so the name gets C − 118.32px.
   269.5 + 118.32 = 386.14px, which is why 387px still holds the name whole and
   386px does not.

   At or below that width the "Done" marker is dropped rather than the name
   being squeezed: the teal check disc already says the call finished, and the
   mock's own role="img" label says it in words either way, so nothing is lost
   that a reader could not still get. That buys the name a single line down to
   355px of container (the same sum without the marker and its gap). Below 355px
   — a 403px viewport and narrower — the name wraps onto a second line, which is
   left alone deliberately: it is a label wrapping, which every real assistant's
   tool rows also do, and the alternative is shortening the one string on this
   page that shows what an MCP call is actually called.

   WHERE THOSE WRAPS LAND is not left to chance, and that is a markup decision
   rather than a CSS one. Three strings in this mock wrap on a phone, and each
   was measured breaking badly first: the tool name split "data / sources", the
   identity line split "Marketing / Director" by 0.9px of ink, and the read-only
   sentence left "nothing" alone on line two. Each now carries a non-breaking
   space at the pair that must not come apart, so at 390px and 360px they break
   as "search connected / data sources", "Connected as Priya Raman / Marketing
   Director" and "It looked things up it / changed nothing" instead. A width
   rule cannot fix a bad break; only the text can. */
@container (max-width: 386px) {
    .static-page--mcp-read-api .mra-tool__done{
        display: none;
    }
}

/* ── Metric strip ──────────────────────────────────────────────────────────
   The values here are short phrases rather than numbers ("Added once", "Your
   access"), 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 and alerts pages settled on, for the same reason. */
.static-page--mcp-read-api .mra-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--mcp-read-api .mra-metric__label{
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--sp-ink-muted);
    max-width: 12rem;
}

@media (max-width: 1023px) {

    /* Stacked, there is no arrow column to hug — the cards are above and below
       it — so both recentre. */
    .static-page--mcp-read-api .mra-photo-card {
        margin-inline: auto;
    }
}

/* ── Dark band: copy left, photo card right ───────────────────────────────
   The photo card sits in the right column of a two-column split, capped at
   520px so the photograph stays card-sized; stacked, the shared split rules
   place it under the heading and it recentres. The heavy drop shadow lifts the
   white card off the dark panel. */
.static-page--mcp-read-api .mra-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--mcp-read-api .mra-photo-card {
        margin-inline: auto;
    }
}

/* The three steps on the left of the dark band, the same rule rows the alerts
   and summaries pages use in theirs. */
.static-page--mcp-read-api .mra-band-rule {
    padding-left: 1rem;
    border-left: 2px solid rgba(134, 207, 196, 0.45);
}
.static-page--mcp-read-api .mra-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--mcp-read-api .mra-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) ────────────────────────────────────
   The photograph, with a two-line caption under it. The white card chrome —
   radius, padding, shadow — is what makes this a card rather than a picture
   pasted onto a dark panel, and the band's whole shape is two white cards
   in the right column. 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 work on the other.

   The caption that used to live here — a quoted question and four scope rows —
   was removed because the steps on the left state the question and the
   sources itself. What replaced it says only what that card cannot: who the
   person is, and how an outside assistant came to be reading this company. */
.static-page--mcp-read-api .mra-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 — which is the state the page ships in until the
   generation pass lands the file. The background is what keeps that state a
   quiet neutral block rather than a broken-image glyph. */
.static-page--mcp-read-api .mra-photo-card img{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1100 / 821;
    object-fit: cover;
    border-radius: 6px;
    background: #EEF2F1;
}

/* ── Caption under the photograph ──────────────────────────────────────────
   Two rows, and the anatomy is the argument: an identity, then the connection
   that identity holds. Either alone leaves the card opposite unexplained — the
   role without the connection does not say how a question typed into an outside
   assistant reached this company's work, and the connection without the name
   does not say whose access it carries.

   Initials rather than a glyph in the disc. A generic user icon reads as a user
   record; two letters read as a person, which is the whole reason this side of
   the band is a photograph. Teal tint, matching the avatar in the chat card
   across the arrow, so the two sides are visibly the same cast.

   Nothing here is gold. A read-only chip would fit and would restore the page's
   two-place gold system, but this caption's claim is identity and connection;
   read-only is a different claim, it was deliberately taken out of this band,
   and a chip would compete with the connection line for the single piece of
   attention a caption gets. The hero's chip stays the page's only gold. */
.static-page--mcp-read-api .mra-who{
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.85rem;
}
.static-page--mcp-read-api .mra-who__avatar{
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.95rem;
    height: 1.95rem;
    border-radius: 50%;
    background: var(--sp-brand-teal-tint);
    color: var(--sp-brand-teal);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
}
.static-page--mcp-read-api .mra-who__ident{
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.static-page--mcp-read-api .mra-who__name{
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: #0E223B;
}
.static-page--mcp-read-api .mra-who__role{
    font-size: 0.7rem;
    line-height: 1.3;
    color: var(--sp-ink-faint);
}

/* The connection line, separated by a hairline rather than by space alone: the
   identity is a fact about the photograph and the connection is a fact about
   the identity, so the rule marks the step between them. align-items:flex-start
   so the plug glyph stays on the first line when the text wraps on a phone. */
.static-page--mcp-read-api .mra-link{
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0.7rem 0 0;
    padding-top: 0.7rem;
    border-top: 1px solid #EFF4F3;
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--sp-ink-soft);
}
/* THE CLAUDE SPARK, and the one colour on this page that is not the page's.
   The geometry is the official mark — Simple Icons' claude.svg, a single 24x24
   path, inlined into body.html rather than hotlinked so the page stays
   self-contained and makes no third-party request. #D97757 is the brand colour
   Simple Icons records for it.
   #D97757 is Anthropic's terracotta. It is here because it belongs to the mark
   being drawn, exactly as the Slack lattice on the integrations page carries
   Slack's colours — it is NOT a page accent and must never be reused as one.
   The page's palette is unchanged: teal is the action colour, blue carries the
   transform arrow, gold means read-only, and the neutral ramp does the rest. If
   any future element on this page wants orange, the answer is no unless it is
   also the Claude mark.

   Set as `color` with fill="currentColor" on the SVG so the hue is declared
   once, here, next to the rule that governs it — rather than buried as a fill
   attribute in markup where nobody reviewing the palette would find it.

   Sized to 0.95rem to sit a hair above the 0.88rem Phosphor glyph it replaced:
   the spark is a radial burst, so its optical weight is lower than a solid
   glyph at the same box size. The box is unchanged from the hand-drawn version
   this replaced, so nothing in the caption's wrap arithmetic moves. margin-top nudges its centre onto the first line's baseline
   band; align-items:flex-start on the row keeps it there when the line wraps. */
.static-page--mcp-read-api .mra-link__spark{
    flex: none;
    width: 0.95rem;
    height: 0.95rem;
    margin-top: 0.12rem;
    color: #D97757;
}

/* WHERE THE CONNECTION LINE BREAKS, which is a markup-and-containment problem
   rather than a width problem. The line is 466.8px of ink and the caption is
   447.6px wide at the band's 520px card, so it wraps at every viewport — the
   only question is where. Left alone the greedy break puts "permissions" alone
   on line two at 1280 and splits "Marketing Director" at other widths, both of
   which read as mistakes.

   The middot is the one legitimate place to breathe, so everything after it is
   held together and the break is forced there. The middot itself is bound to
   that phrase by a non-breaking space in body.html, so it opens line two rather
   than dangling at the end of line one:

       Claude chat connected to BeSync'd
       · reading with Marketing Director permissions

   (The bound middot and its space add about 6px to the phrase below, which
   moves the crossing from 293.1px to about 299px of content; the 340px release
   still sits inside the bracket, so the release arithmetic is unchanged.)

   That bound phrase is 270.7px of ink and cannot itself wrap, so below the
   container width that holds it the nowrap has to come off or it would spill
   out of the card.

   A CONTAINER QUERY MEASURES THE CONTENT BOX, not the border box, and getting
   that wrong is what a first attempt here did: a 400px threshold read as "wider
   than a 432px card" but actually matched, because that card's content box is
   382px. The photo card's content width is its border-box width less 2 x 1.5rem
   of padding and 2 x 1px of border — 50px — and the phrase then gets that less
   the 0.95rem spark (15.2px) and the 0.45rem gap (7.2px). So the phrase gets
   content − 22.4px, and 270.7 + 22.4 = 293.1px of content is the crossing.

   The release is set at 340px of content rather than at 291px, and the real
   layout ladder is what decides that: the only content widths this page
   produces either side of the crossing are 382px (a 480px viewport — fits with
   89px to spare) and 292px (a 390px viewport — 1.1px short, so it genuinely
   does not fit). Any threshold in [293, 381] therefore behaves identically at
   every width the page can be seen at; 340 sits near the middle of that bracket
   rather than on either edge of it. Note that swapping the Phosphor glyph for
   the wider Claude spark moved this crossing by 1.1px — small, but it is what
   turned the 390px case from a 0.0px hairline fit into a clear miss.

   Below the release the phrase wraps normally, and "Marketing Director" stays
   bound by its own non-breaking space, so the role name never splits — which is
   the failure this page has already been caught by once. */
.static-page--mcp-read-api .mra-photo-card{
    container-type: inline-size;
}
.static-page--mcp-read-api .mra-link__scope{
    white-space: nowrap;
}
@container (max-width: 340px) {
    .static-page--mcp-read-api .mra-link__scope{
        white-space: normal;
    }
}

/* Below the width that holds the zoomed card, the zoom comes off and the cap
   with it, so the card simply fills the wrap it is given. Dropping the cap as
   well as the zoom is deliberate: the wrap is already capped at 520px, and a
   card that stopped at 440 inside a 460px wrap would leave the right side of
   the band 20px narrower than the left and slide the whole pair off centre —
   the one thing this band cannot afford, since it is a matched pair either side
   of an arrow. The cost is a slightly sparser card between 440 and 519 of
   container; the alternative was a visibly lopsided band at those widths. */

/* ── 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--mcp-read-api .mra-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--mcp-read-api .mra-dark-link{
    margin-top: 1.5rem;
}

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

   The default disclosure triangle is removed on both the standard and the
   WebKit-prefixed pseudo-element and replaced by a caret on the right, which is
   where this site's other disclosure controls put it. Removing only one of the
   two leaves a stray marker in Safari. */
.static-page--mcp-read-api .mra-faq{
    max-width: 52rem;
    margin-inline: auto;
}
.static-page--mcp-read-api .mra-faq__item{
    background: #ffffff;
    border: 1px solid #E9EFEE;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(21, 41, 39, 0.04);
}
.static-page--mcp-read-api .mra-faq__item + .mra-faq__item{
    margin-top: 0.7rem;
}
.static-page--mcp-read-api .mra-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--mcp-read-api .mra-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--mcp-read-api .mra-faq__q::-webkit-details-marker{ display: none; }
.static-page--mcp-read-api .mra-faq__q::marker{ content: ""; }
.static-page--mcp-read-api .mra-faq__item[open] .mra-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--mcp-read-api .mra-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--mcp-read-api .mra-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--mcp-read-api .mra-faq__item[open] .mra-faq__caret{
    transform: rotate(180deg);
    background: var(--sp-brand-teal);
    color: #ffffff;
}
.static-page--mcp-read-api .mra-faq__a{
    padding: 0 1.3rem 1.2rem;
}
.static-page--mcp-read-api .mra-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. Block-level
   flex is what holds it there: as inline-flex it joined the answer's last line
   whenever it fit (at 768px, for one), and its margin-top then widened the gap
   above that shared line instead of setting the link apart. fit-content keeps
   the hover underline and the click target to the link's own width. */
.static-page--mcp-read-api .mra-faq__link{
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.7rem;
    font-weight: 600;
    color: var(--sp-brand-teal);
    text-decoration: none;
}
.static-page--mcp-read-api .mra-faq__link:hover,
.static-page--mcp-read-api .mra-faq__link:focus-visible{
    color: var(--sp-brand-teal-dark);
    text-decoration: underline;
}
.static-page--mcp-read-api .mra-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--mcp-read-api .mra-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--mcp-read-api .mra-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. */
@media (prefers-reduced-motion: reduce) {
    .static-page--mcp-read-api .mra-pulse-dot{
        animation: none;
        opacity: 1;
    }
    .static-page--mcp-read-api .mra-faq__caret{
        transition: none;
    }
}

/* The reach section has three sources, so its rule grid runs three columns
   from 1024px up, and one column below that at every width. Three cells across
   a 768px tablet were about 240px each, too narrow for their headings and
   paragraphs, and the shared two-column tablet step would leave the third
   source alone on a row. Below 1024px the cells take the shared phone
   treatment (a hairline between rows, no side padding), which the shared
   stylesheet already applies under 640px, so 640-1023px now matches it. */
.static-page--mcp-read-api .sp-rule-grid.mra-reach-grid {
    --sp-rule-cols: 3;
}
@media (max-width: 1023px) {
    .static-page--mcp-read-api .sp-rule-grid.mra-reach-grid {
        grid-template-columns: 1fr;
    }
    .static-page--mcp-read-api .sp-rule-grid.mra-reach-grid > *:nth-child(n) {
        padding: 1.5rem 0;
        border-right: 0;
        border-bottom: 1px solid #E7EEEC;
    }
    .static-page--mcp-read-api .sp-rule-grid.mra-reach-grid > *:last-child {
        border-bottom: 0;
    }
}