/* How to use Nexivo, web-link/help/index.html.
It loads assets/site.css first — the canvas, the aurora, the glass card,
the steps, the rail and the one typeface — and adds only what a guide
needs on top of that: the jump row under the headline, the three goal
cards, the row of devices that becomes tabs, the task cards with their
little drawings, the safety tiles and the two accordions.
Every colour is a site token (there is no hex literal in this file,
test/help-page.test.mjs), the same rule home.css keeps. What is written
out is white or black at an alpha, the way site.css writes hairlines.
The drawings in the task cards are HTML and CSS rather than pictures:
the CSP allows no image but the site's own, and a drawing made of the
site's own tokens stays in step with the site when a colour changes. They
are decoration — each one is aria-hidden, and the numbered steps beside
it say everything it shows.
Motion is small and answers nothing but attention: the headline rises
once, and the button a drawing is about breathes a ring. Under
prefers-reduced-motion site.css's reduce block ends both on their still
frame, which is the finished state. */
body[data-page="help"] {
overflow-x: clip;
overflow-wrap: break-word;
}
body[data-page="help"] .sheet {
max-width: calc(1040px + 2 * var(--gutter));
padding-top: clamp(20px, 5vh, 48px);
padding-bottom: calc(env(safe-area-inset-bottom) + 56px);
}
body[data-page="help"] .rail-inner {
max-width: calc(1040px + 2 * var(--gutter));
}
/* The sprite of shared glyphs: in the page so