/* Enterprise Security and Data Control — page-specific styles only.
*
* Everything reusable (type scale, cards, dark panel, badges, rule grids,
* buttons, feature-icon discs) comes from shared.css. The cross-role
* visibility matrix comes from the partial this page declares in deps.json,
* ui-role-visibility.css, which the knowledge base page also loads — so the
* two pages show one screen rather than two drawings of it. What is left here
* is either a graphic this page owns (the boundary panel, the access scope,
* the scoped answer), a composition it invents (the hero surface, the
* transform row, the rule rows, the FAQ list), or a value genuinely tuned to
* this page.
*
* Surfaces, hairlines, metric strip, pulse dot, FAQ and closing statement are
* deliberately the same values as the voice-to-text, knowledge base and the
* two 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--secure-ai-for-business-intelligence,
* so nothing leaks into the home, integrations or sibling product pages. The
* prefix is also what keeps this page in control of the shared partial:
* deps.json styles are emitted AFTER this file, so order would hand a bare
* `.kb-roles` rule back to the partial — specificity is what wins, not order.
* (This page does not currently override the partial, and should not need to.)
*
* Color discipline, which this page needs more than its siblings. Teal is the
* only action color and marks what is allowed; blue carries the one
* relationship on the page, the transform arrow; gold appears exactly once, on
* the scope row closing the dark band's source list, because that single row
* is the thing the reader must notice. Nothing else on the page is gold. A
* second gold element would cost the first one its meaning.
*
* 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--secure-ai-for-business-intelligence .sai-surface-soft {
background: #FBFDFC;
}
.static-page--secure-ai-for-business-intelligence .sai-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--secure-ai-for-business-intelligence .sai-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--secure-ai-for-business-intelligence .sai-pulse-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--sp-brand-teal);
flex-shrink: 0;
animation: saiPulse 1.8s ease-in-out infinite;
}
@keyframes saiPulse {
0%, 100% { opacity: 0.35; }
50% { opacity: 1; }
}
/* ── Metric strip ──────────────────────────────────────────────────────────
Values in the display face and the brand teal, labels muted and capped so
they wrap predictably rather than at whatever width the grid cell happens to
be. Same values as the sibling pages. */
.static-page--secure-ai-for-business-intelligence .sai-metric__value {
font-family: var(--sp-font-display);
font-size: clamp(1.5rem, 2.4vw, 1.85rem);
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.15;
color: var(--sp-brand-teal);
margin-bottom: 0.45rem;
}
.static-page--secure-ai-for-business-intelligence .sai-metric__label {
font-size: 0.8rem;
line-height: 1.5;
color: var(--sp-ink-muted);
max-width: 14rem;
}
/* ══ The boundary (hero graphic) ═══════════════════════════════════════════
The page's argument drawn once: there is a line, your data is inside it, and
these two things never cross it.
The composition is an enclosure rather than a row of cards, because an
enclosure is the only shape that can say "inside". The enclosure's edge is
the graphic's single teal element — it IS the claim — so the three rows held
within it stay entirely on the neutral ramp. Tinting them would differentiate
three things the graphic is not arguing about and spend the accent before the
edge has been noticed.
The two "never crosses" rows sit visually outside the enclosure, below its
bottom edge, because that is literally where they are. They are drawn in the
faint ramp with prohibition glyphs rather than in a warning color: this is a
statement about the product's design, not an alert, and coloring it red
would import an alarm the section does not mean.
Capped at 26rem inside a 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. */
.static-page--secure-ai-for-business-intelligence .sai-hero-figure {
display: flex;
justify-content: center;
align-items: center;
}
.static-page--secure-ai-for-business-intelligence .sai-boundary {
--sai-pad: 1.05rem;
width: 100%;
max-width: 26rem;
background: #ffffff;
border: 1px solid #E7EEEC;
border-radius: 16px;
padding: var(--sai-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--secure-ai-for-business-intelligence .sai-boundary__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
padding-bottom: 0.9rem;
margin-bottom: 0.95rem;
border-bottom: 1px solid #EEF2F1;
}
.static-page--secure-ai-for-business-intelligence .sai-boundary__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 state tag is
one — the same treatment the sibling pages give their "This week". */
.static-page--secure-ai-for-business-intelligence .sai-boundary__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);
}
/* The enclosure itself. Teal edge on the pale teal surface, and the edge label
sits on the top border rather than inside the box — a boundary is more
convincing when its own name is written on the line. */
.static-page--secure-ai-for-business-intelligence .sai-boundary__inner {
position: relative;
background: var(--sp-brand-teal-tint);
border: 1px solid var(--sp-brand-teal-soft);
border-radius: 12px;
padding: 1.15rem 0.9rem 0.9rem;
}
.static-page--secure-ai-for-business-intelligence .sai-boundary__edge-label {
position: absolute;
top: 0;
left: 0.9rem;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.15rem 0.45rem;
border-radius: 999px;
background: #ffffff;
border: 1px solid var(--sp-brand-teal-soft);
font-size: 0.56rem;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.3;
color: var(--sp-brand-teal-dark);
white-space: nowrap;
}
.static-page--secure-ai-for-business-intelligence .sai-boundary__edge-label i {
font-size: 0.62rem;
}
/* What the boundary holds. White rows on the tint, so they read as objects
sitting inside a container rather than as list items printed on it. */
.static-page--secure-ai-for-business-intelligence .sai-hold {
display: flex;
align-items: center;
gap: 0.55rem;
background: #ffffff;
border: 1px solid #E6EDEB;
border-radius: 10px;
padding: 0.5rem 0.6rem;
}
.static-page--secure-ai-for-business-intelligence .sai-hold + .sai-hold {
margin-top: 0.4rem;
}
.static-page--secure-ai-for-business-intelligence .sai-hold__icon {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 1.55rem;
height: 1.55rem;
border-radius: 50%;
background: var(--sp-brand-teal-tint);
color: var(--sp-brand-teal);
font-size: 0.8rem;
line-height: 1;
}
.static-page--secure-ai-for-business-intelligence .sai-hold__main {
display: flex;
flex-direction: column;
min-width: 0;
}
.static-page--secure-ai-for-business-intelligence .sai-hold__name {
font-size: 0.74rem;
font-weight: 700;
line-height: 1.35;
color: var(--sp-ink);
}
.static-page--secure-ai-for-business-intelligence .sai-hold__desc {
font-size: 0.64rem;
line-height: 1.4;
color: var(--sp-ink-muted);
}
/* The residency choice, on the inside of the boundary because that is what the
choice is *about*: both options are inside your line, they differ only in
whose machine draws it. */
.static-page--secure-ai-for-business-intelligence .sai-boundary__where {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0.45rem;
margin-top: 0.75rem;
padding-top: 0.7rem;
border-top: 1px solid var(--sp-brand-teal-soft);
}
.static-page--secure-ai-for-business-intelligence .sai-boundary__where-opt {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.22rem 0.5rem;
border-radius: 7px;
background: #ffffff;
border: 1px solid var(--sp-brand-teal-soft);
font-size: 0.64rem;
font-weight: 700;
line-height: 1.35;
color: var(--sp-brand-teal-dark);
}
.static-page--secure-ai-for-business-intelligence .sai-boundary__where-opt i {
font-size: 0.72rem;
}
/* Outside the line. Faint ramp, no warning color: this is how the product is
built, not an alert the reader has to act on. */
.static-page--secure-ai-for-business-intelligence .sai-boundary__out {
margin-top: 0.95rem;
padding-top: 0.85rem;
border-top: 1px solid #EEF2F1;
}
.static-page--secure-ai-for-business-intelligence .sai-boundary__out-title {
display: block;
margin-bottom: 0.5rem;
font-family: var(--sp-font-mono);
font-size: 0.55rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--sp-ink-faint);
}
.static-page--secure-ai-for-business-intelligence .sai-never {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.34rem 0;
}
.static-page--secure-ai-for-business-intelligence .sai-never + .sai-never {
border-top: 1px solid #F2F6F5;
}
.static-page--secure-ai-for-business-intelligence .sai-never__icon {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 1.35rem;
height: 1.35rem;
border-radius: 50%;
background: #FBFDFC;
border: 1px solid #E6EDEB;
color: var(--sp-ink-faint);
font-size: 0.66rem;
line-height: 1;
}
/* The strike is what makes these rows read as "not this" without a red. */
.static-page--secure-ai-for-business-intelligence .sai-never__text {
font-size: 0.7rem;
line-height: 1.4;
color: var(--sp-ink-muted);
text-decoration: line-through;
text-decoration-color: #CBD8D5;
text-decoration-thickness: 1px;
}
/* ══ 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--secure-ai-for-business-intelligence .sai-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--secure-ai-for-business-intelligence .sai-photo-card {
margin-inline: auto;
}
}
/* The three steps on the left of the dark band, the same rule rows the alerts,
summaries and MCP pages use in theirs. */
.static-page--secure-ai-for-business-intelligence .sai-band-rule {
padding-left: 1rem;
border-left: 2px solid rgba(134, 207, 196, 0.45);
}
.static-page--secure-ai-for-business-intelligence .sai-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--secure-ai-for-business-intelligence .sai-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 asker's access written underneath it. The card chrome
— white, radius, padding, shadow — lives here rather than on the scope list
inside it, so the photo and the caption are one object and not two stacked
cards. Same anatomy as the sibling pages' photo cards. */
.static-page--secure-ai-for-business-intelligence .sai-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.
aspect-ratio and the flat ground are deliberate and outlive the photo's
arrival: until the asset is generated the slot renders as a quiet neutral
block of exactly the right height rather than as a collapsed row or a broken
image glyph, and once it lands they cost nothing. */
.static-page--secure-ai-for-business-intelligence .sai-photo-card img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1100 / 821;
object-fit: cover;
background: #EEF2F1;
border-radius: 6px;
}
/* ── Access scope (under the photograph) ───────────────────────────────────
Four rows, each matching a step in the copy beside the card.
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. The four rows are four parts of one thing, one
person's access, so coloring them apart would differentiate something the
graphic is not arguing about. */
.static-page--secure-ai-for-business-intelligence .sai-scope {
margin-top: 0.95rem;
}
.static-page--secure-ai-for-business-intelligence .sai-scope__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
padding-bottom: 0.65rem;
border-bottom: 1px solid #EFF4F3;
}
.static-page--secure-ai-for-business-intelligence .sai-scope__title {
font-size: 0.82rem;
font-weight: 700;
line-height: 1.35;
color: #0E223B;
}
.static-page--secure-ai-for-business-intelligence .sai-scope__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);
}
/* Row rhythm is set against the source rows opposite (0.42rem), not chosen for
its own sake: the two lists sit either side of the arrow at the same scale,
so the scope rows run a hair looser than the sources because their type is a
step larger, and no looser than that. The earlier 0.8rem made the left card
217px taller than the right one at 1280 — a caption outgrowing the artifact
it captions. Nothing is dropped to close that; the whitespace pays for it. */
.static-page--secure-ai-for-business-intelligence .sai-scope-row {
display: flex;
align-items: flex-start;
gap: 0.6rem;
padding: 0.45rem 0;
}
.static-page--secure-ai-for-business-intelligence .sai-scope-row + .sai-scope-row {
border-top: 1px solid #F4F8F7;
}
.static-page--secure-ai-for-business-intelligence .sai-scope-row__icon {
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--secure-ai-for-business-intelligence .sai-scope-row__main {
display: flex;
flex-direction: column;
min-width: 0;
}
.static-page--secure-ai-for-business-intelligence .sai-scope-row__text {
font-size: 0.78rem;
line-height: 1.4;
color: var(--sp-ink);
}
/* Carries the rule in words as well as in a glyph, so the thing the disc shows
is also stated for anyone who cannot see it. Roles are named, never drawn: a
role has many people, so an avatar would misrepresent it. */
.static-page--secure-ai-for-business-intelligence .sai-scope-row__meta {
margin-top: 0.08rem;
font-size: 0.65rem;
line-height: 1.35;
color: var(--sp-ink-faint);
}
/* ── Rule rows (who can reach what) ────────────────────────────────────────
One bar per kind of work, with the rule that decides who can reach it in the
mono column. Same bar as the sibling pages' rule and covers rows. */
.static-page--secure-ai-for-business-intelligence .sai-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--secure-ai-for-business-intelligence .sai-rule-row__what {
font-size: 0.95rem;
font-weight: 700;
line-height: 1.35;
color: var(--sp-ink);
}
.static-page--secure-ai-for-business-intelligence .sai-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--secure-ai-for-business-intelligence .sai-rule-row {
flex-direction: column;
align-items: flex-start;
gap: 0.35rem;
}
.static-page--secure-ai-for-business-intelligence .sai-rule-row__value {
text-align: left;
}
}
/* ── Dark card bits (the third card in the residency set) ──────────────────
The feature-icon disc from shared.css is built for a light surface, so the
dark card gets its own: a translucent white disc with the accent ink, which
is the same relationship to its ground as the light one has to its own. */
.static-page--secure-ai-for-business-intelligence .sai-icon-dark {
box-sizing: border-box;
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;
}
.static-page--secure-ai-for-business-intelligence .sai-dark-link {
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.static-page--secure-ai-for-business-intelligence .sai-dark-link i {
font-size: 0.85rem;
}
/* ── FAQ ───────────────────────────────────────────────────────────────────
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--secure-ai-for-business-intelligence .sai-faq {
max-width: 52rem;
margin-inline: auto;
}
.static-page--secure-ai-for-business-intelligence .sai-faq__item {
background: #ffffff;
border: 1px solid #E9EFEE;
border-radius: 14px;
box-shadow: 0 1px 2px rgba(21, 41, 39, 0.04);
}
.static-page--secure-ai-for-business-intelligence .sai-faq__item + .sai-faq__item {
margin-top: 0.7rem;
}
.static-page--secure-ai-for-business-intelligence .sai-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--secure-ai-for-business-intelligence .sai-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--secure-ai-for-business-intelligence .sai-faq__q::-webkit-details-marker { display: none; }
.static-page--secure-ai-for-business-intelligence .sai-faq__q::marker { content: ""; }
.static-page--secure-ai-for-business-intelligence .sai-faq__item[open] .sai-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--secure-ai-for-business-intelligence .sai-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--secure-ai-for-business-intelligence .sai-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--secure-ai-for-business-intelligence .sai-faq__item[open] .sai-faq__caret {
transform: rotate(180deg);
background: var(--sp-brand-teal);
color: #ffffff;
}
.static-page--secure-ai-for-business-intelligence .sai-faq__a {
padding: 0 1.3rem 1.2rem;
}
.static-page--secure-ai-for-business-intelligence .sai-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--secure-ai-for-business-intelligence .sai-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--secure-ai-for-business-intelligence .sai-faq__link:hover,
.static-page--secure-ai-for-business-intelligence .sai-faq__link:focus-visible {
color: var(--sp-brand-teal-dark);
text-decoration: underline;
}
.static-page--secure-ai-for-business-intelligence .sai-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 : making
it an
would put a heading in the document outline that no section hangs
off. */
.static-page--secure-ai-for-business-intelligence .sai-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--secure-ai-for-business-intelligence .sai-statement .sp-accent {
font-size: inherit;
}
/* ── Reduced motion ────────────────────────────────────────────────────────
The page has exactly two moving parts, and both resolve to a fully drawn
state: the eyebrow dot is frozen at full opacity rather than at its dim
phase, and the FAQ caret simply stops easing. Stopping a loop must never
leave a graphic saying less than it says when the loop finishes. */
@media (prefers-reduced-motion: reduce) {
.static-page--secure-ai-for-business-intelligence .sai-pulse-dot {
animation: none;
opacity: 1;
}
.static-page--secure-ai-for-business-intelligence .sai-faq__caret {
transition: none;
}
}
/* ── Where Your Data Lives: the four storage cards ─────────────────────────
Four across only from 1280px (xl: in body.html). 1024-1279px gets two,
because at a quarter of 1024 the headings broke a word per line and the dark
card's button wrapped. At four across the headings still differ in line count
("Dedicated Deployment" and the dark card's heading take two lines at 1440px,
the other two take one), so every heading reserves two lines (2 x its 1.3
line-height) and every paragraph starts at the same height. Two lines is the
most any of the four takes at 1280px and up, where the cards hold at 270px; a
heading rewritten to three lines would need this raised. A subgrid of shared
rows was tried first and rejected: it aligned any line count but made every
card about 29px taller and pushed the dark card's button away from its text,
because each card then takes the tallest paragraph plus the button's row. */
@media (min-width: 1280px) {
.static-page--secure-ai-for-business-intelligence .sai-where-grid .sp-h3 {
min-height: 2.6em;
}
}