rather than JS: it is keyboard accessible, findable with
the browser's own in-page search when open, and degrades to plain visible
text with styles off - which matters because a crawler reading this page
should see the answers, not an empty shell. */
.faq {
display: grid;
gap: 0;
margin-top: 32px;
border-top: 1px solid var(--border);
}
.faq details {
border-bottom: 1px solid var(--border);
}
.faq summary {
cursor: pointer;
list-style: none;
padding: 20px 44px 20px 0;
position: relative;
font-size: 1.02rem;
font-weight: 560;
letter-spacing: -0.011em;
color: var(--text-primary);
transition: color 0.15s ease;
}
.faq summary::-webkit-details-marker {
display: none;
}
.faq summary:hover {
color: var(--accent, var(--text-primary));
}
.faq summary:focus-visible {
outline: 2px solid var(--accent, #2a78d6);
outline-offset: 3px;
border-radius: var(--radius-sm);
}
/* A rotating chevron drawn in CSS - no icon font, no extra request. */
.faq summary::after {
content: '';
position: absolute;
right: 10px;
top: 50%;
width: 8px;
height: 8px;
border-right: 1.8px solid var(--text-muted);
border-bottom: 1.8px solid var(--text-muted);
transform: translateY(-70%) rotate(45deg);
transition: transform 0.2s ease;
}
.faq details[open] summary::after {
transform: translateY(-30%) rotate(-135deg);
}
.faq details p {
margin: 0;
padding: 0 clamp(0px, 6vw, 72px) 24px 0;
color: var(--text-secondary);
line-height: 1.62;
max-width: 68ch;
}
@media (prefers-reduced-motion: reduce) {
.faq summary,
.faq summary::after {
transition: none;
}
}
/* Footer legal
Small and quiet, but present on every page view - the disclaimer is worth
nothing if it only exists in a file nobody opens. */
.footer-legal {
flex-basis: 100%;
margin: 18px 0 0;
max-width: 78ch;
font-size: 0.78rem;
line-height: 1.55;
color: var(--text-muted);
}
.footer-legal a {
color: var(--text-muted);
text-decoration: underline;
text-underline-offset: 2px;
}
.footer-legal a:hover {
color: var(--text-secondary);
}
/* ==========================================================================
Guardrail additions
Extends the shared AgentObs tokens above so the two product pages read as
one system. Only what Guardrail's page needs beyond the base sheet.
========================================================================== */
/* Verdict colouring in terminal transcripts. Colour is never the only signal -
the words BLOCK / ASK / allow carry the meaning on their own, so the page
stays readable in monochrome and to colour-blind readers. */
.terminal .t-block {
color: var(--status-critical);
font-weight: 680;
}
.terminal .t-ask {
/* Amber reads as "attention" in both themes without competing with the
critical red; defined inline rather than as a token because this is the
only place a caution colour appears. */
color: #b26a00;
font-weight: 680;
}
.terminal .t-allow {
color: var(--series-3);
font-weight: 620;
}
.terminal .t-add {
color: var(--series-1);
font-weight: 660;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) .terminal .t-ask {
color: #e2a03f;
}
}
:root[data-theme='dark'] .terminal .t-ask {
color: #e2a03f;
}
/* The base sheet styles `.cards article`; Guardrail's cards are plain divs so
the same treatment is extended to them, and the grid is allowed to reflow to
two columns rather than being locked at three - these cards hold more text. */
.cards > div {
padding: 20px 22px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
}
.cards {
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.cards > div > h3 {
margin: 0 0 8px;
font-size: 15px;
font-weight: 640;
}
.cards ul {
margin: 0;
padding-left: 18px;
color: var(--text-secondary);
font-size: 14px;
line-height: 1.65;
}
.cards li {
margin-bottom: 4px;
}
/* A terminal nested inside a card is an illustration, not the page's main
exhibit: it drops the shadow and the large bottom margin so it sits as part
of the card rather than floating over it. */
.cards .terminal {
box-shadow: none;
margin: 12px 0 0;
font-size: 12.5px;
border: 1px solid var(--border);
}
/* Wide content must scroll inside its own box; the page body never scrolls
sideways. */
.terminal {
overflow-x: auto;
}
/* The hero centres its text, which a nested would otherwise inherit -
centred code is unreadable. AgentObs's hero holds a screenshot, so this only
arises on Guardrail's page, where the exhibit is a terminal transcript. */
.terminal,
.terminal code {
text-align: left;
}
/* The install command sits alone in the hero on this page rather than beside a
Copy button in a bordered row, so it needs its own centring. */
.hero .install {
justify-content: center;
}
/* Four cards in an auto-fit grid wrap 3 + 1, leaving an orphan on its own
row. Capping this group at two columns balances it 2x2 at desktop width
while still collapsing to one column on a phone. */
#poisoning .cards {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
max-width: 860px;
}