/* MyTimePlan Help Center - static pages written by `npm run docs:html`.
   Tokens, type scale, breakpoints and component looks are copied from company-website
   (src/styles/base/_root.scss, abstracts/_variables.scss, components/*) so the pages read as part of the
   site. Every class is prefixed `help-` (BEM) - when the pages move into company-website this file maps
   onto one SCSS partial and the "standalone page" block below is dropped in favour of the site's base.
   The language switcher keeps the site's own `lang-switcher` classes (the same component). */

/* ---------------------------------------------------------------- fonts (self-hosted, like the site) */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/montserrat-400.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/montserrat-500.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/montserrat-600.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/montserrat-700.woff2') format('woff2'); }

/* ---------------------------------------------------------------- tokens (company-website _root.scss) */
:root {
	color-scheme: light;
	--color-bg: #fff;
	--color-surface: #f5f5f5;
	--color-surface-2: #ebebed;
	--color-text: #1b1a23;
	--color-text-muted: #47464e;
	--color-text-subtle: #a2a2aa;
	--color-border: #dbdadd;
	--color-primary: #2d64ef;
	--color-primary-hover: #2455d6;
	--color-primary-contrast: #fff;
	--color-focus: #2d64ef;
	--color-success: #76c81e;
	--color-info: #b8d2fa;
	--color-info-soft: #e2edfd;
	--color-tint-green: #e1f7ca;
	--color-tint-yellow: #faedbb;
	--radius-sm: 0.375rem;
	--radius: 0.625rem;
	--radius-lg: 1rem;
	--radius-xl: 2rem;
	--radius-pill: 999px;
	--shadow-sm: 0 1px 2px rgb(15 23 42 / 6%);
	--shadow: 0 6px 20px rgb(15 23 42 / 8%);
	--shadow-lg: 0 18px 40px rgb(15 23 42 / 12%);
	--transition: 150ms ease;
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;
	--measure-prose: 65ch;
	--font-sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
	--help-container: 78rem;
	--help-gutter: 1.25rem;
	--help-header-height: 4rem;
	--help-shot-width: 17rem;
}

/* ---------------------------------------------------------------- standalone page (dropped when embedded) */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--help-header-height) + 1rem); }
body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.5rem;
	letter-spacing: 0.015625rem;
	color: var(--color-text);
	background-color: var(--color-bg);
	-webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { line-height: 1.2; font-weight: 500; text-wrap: balance; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

.help-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.help-skip {
	position: absolute;
	inset-inline-start: var(--help-gutter);
	inset-block-start: -10rem;
	z-index: 100;
	padding: 0.5rem 1rem;
	font-weight: 600;
	color: var(--color-primary-contrast);
	background-color: var(--color-primary);
	border-radius: var(--radius-pill);
}
.help-skip:focus { inset-block-start: 0.75rem; }

.help-container {
	width: 100%;
	max-width: calc(var(--help-container) + 2 * var(--help-gutter));
	padding-inline: var(--help-gutter);
	margin-inline: auto;
}

/* ---------------------------------------------------------------- language guard (assets/lang.js) */
/* A page of another language than the visitor's stored one is replaced before it paints - nothing flashes. */
.help-lang-pending body { visibility: hidden; }

/* ---------------------------------------------------------------- header / footer (site-header look) */
.help-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 50;
	background-color: var(--color-bg);
	border-block-end: 1px solid var(--color-border);
}
@supports (backdrop-filter: blur(20px)) {
	.help-header { background-color: rgb(255 255 255 / 70%); backdrop-filter: blur(20px); }
}
/* the site's header height: a 44px logo with 10px above and below, 14px from 64rem (below) */
.help-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: var(--help-header-height);
	padding-block: 0.625rem;
}
.help-header__brand { display: inline-flex; align-items: center; gap: 0.875rem; color: var(--color-text); }
.help-header__logo { width: auto; height: 2.75rem; }
/* phones show logo + menu button only, like the site; the title comes back where it fits */
.help-header__divider, .help-header__title { display: none; }
.help-header__divider { width: 1px; height: 1.75rem; background-color: var(--color-border); }
.help-header__title { font-size: 1.125rem; line-height: 1.5rem; font-weight: 500; letter-spacing: 0.009375rem; white-space: nowrap; }

/* menu button (site-header__toggle): phones only, and only with JS - without JS the menu is simply open */
.help-header__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--radius-sm);
	color: var(--color-text);
}
.help-js .help-header__toggle { display: inline-flex; }
.help-header__toggle-icon { position: relative; display: block; width: 1.25rem; height: 2px; background-color: currentcolor; transition: background-color var(--transition); }
.help-header__toggle-icon::before, .help-header__toggle-icon::after { content: ''; position: absolute; inset-inline: 0; height: 2px; background-color: currentcolor; transition: transform var(--transition); }
.help-header__toggle-icon::before { inset-block-start: -6px; }
.help-header__toggle-icon::after { inset-block-start: 6px; }
.help-header__toggle[aria-expanded='true'] .help-header__toggle-icon { background-color: transparent; }
.help-header__toggle[aria-expanded='true'] .help-header__toggle-icon::before { transform: translateY(6px) rotate(45deg); }
.help-header__toggle[aria-expanded='true'] .help-header__toggle-icon::after { transform: translateY(-6px) rotate(-45deg); }

/* "Back to website" + language switcher: a panel under the bar on phones (site-nav look), inline from 48rem */
.help-header__menu { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.help-js .help-header__menu {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 100%;
	display: none;
	flex-direction: column;
	align-items: stretch;
	padding: 1rem var(--help-gutter) 1.5rem;
	background-color: var(--color-bg);
	border-block-end: 1px solid var(--color-border);
	box-shadow: var(--shadow);
}
.help-js .help-header__menu.is-open { display: flex; }
.help-header__site {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	font-weight: 500;
	line-height: 1.5rem;
	color: var(--color-text);
	white-space: nowrap;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	transition: background-color var(--transition);
}
.help-header__site:hover { background-color: var(--color-surface-2); }
.help-header__site-icon { flex: 0 0 auto; width: 1.125rem; height: 1.125rem; }

/* language switcher - company-website's (layout/_language-switcher.scss): an accordion in the phone panel,
   a compact pill with a floating card in the bar. Same classes and data-* hooks as the site. */
.lang-switcher__toggle {
	display: none;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.625rem 0.75rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-text);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	transition: color var(--transition), background-color var(--transition), border-color var(--transition);
}
.help-js .lang-switcher__toggle { display: inline-flex; }
.lang-switcher__toggle:hover { background-color: var(--color-surface-2); }
.lang-switcher__flag { flex: 0 0 auto; width: 1.125rem; height: 1.125rem; border-radius: 50%; box-shadow: 0 0 0 1px rgb(0 0 0 / 10%); }
.lang-switcher__code { font-weight: 700; letter-spacing: 0.02em; }
.lang-switcher__chevron { width: 0.5rem; height: 0.5rem; margin-inline-start: auto; border-inline-end: 2px solid currentcolor; border-block-end: 2px solid currentcolor; rotate: 45deg; transition: rotate var(--transition); }
.lang-switcher__toggle[aria-expanded='true'] .lang-switcher__chevron { rotate: -135deg; }
/* without JS the languages are a plain row of links */
.lang-switcher__menu { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0; margin: 0; list-style: none; }
.help-js .lang-switcher__menu { display: none; flex-direction: column; gap: 0; padding: 0.25rem 0 0; }
.help-js .lang-switcher.is-open .lang-switcher__menu { display: flex; }
.lang-switcher__option {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.5rem 0.75rem;
	font-size: 0.9375rem;
	color: var(--color-text-muted);
	border-radius: var(--radius-sm);
	transition: color var(--transition), background-color var(--transition);
}
.lang-switcher__option:hover { color: var(--color-text); background-color: var(--color-surface-2); }
.lang-switcher__option.is-current { font-weight: 700; color: var(--color-primary); }
.lang-switcher__name { flex: 1; }

/* entry page (index.html): where JS is off, the three languages */
.help-entry { display: grid; place-items: center; flex: 1; padding-block: 4rem; }
.help-entry__inner { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; text-align: center; }
.help-entry__logo { width: auto; height: 2.25rem; }
.help-entry__title { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); color: var(--color-text); }
.help-entry__list { display: flex; flex-direction: column; gap: 0.25rem; min-width: 14rem; text-align: start; }

.help-footer {
	margin-block-start: auto;
	background-color: var(--color-surface);
	border-block-start: 1px solid var(--color-border);
}
.help-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	padding-block: 2.5rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--color-text-muted);
}
.help-footer__logo { width: auto; height: 1.75rem; }

/* ---------------------------------------------------------------- hero (page-hero look) */
.help-hero {
	padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
	background-color: var(--color-surface);
	border-block-end: 1px solid var(--color-border);
}
.help-hero__eyebrow {
	margin-block-end: 0.75rem;
	font-size: 1.375rem;
	line-height: 1.75rem;
	font-weight: 500;
	color: var(--color-primary);
}
.help-hero__title {
	max-width: 22ch;
	font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
	letter-spacing: -0.01em;
	color: var(--color-text);
}
.help-hero__lead {
	max-width: 60ch;
	margin-block-start: 1rem;
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	line-height: 1.6;
	color: var(--color-text-muted);
}
.help-hero .help-crumbs { margin-block-end: 1.5rem; }

/* ---------------------------------------------------------------- breadcrumbs */
.help-crumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--color-text-muted); }
.help-crumbs__item { display: inline-flex; align-items: center; gap: 0.5rem; }
.help-crumbs__item + .help-crumbs__item::before { content: '›'; color: var(--color-text-subtle); }
.help-crumbs__link { color: var(--color-primary); }
.help-crumbs__link:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- sections + card grid (overview-card look) */
.help-section { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.help-section + .help-section { padding-block-start: 0; }
.help-section__title { margin-block-end: 1.5rem; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); color: var(--color-text); }

.help-grid { display: grid; gap: 1.5rem; }

.help-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.75rem;
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition), transform var(--transition);
}
.help-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.help-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin-block-end: 1rem;
	color: var(--color-primary);
	background-color: var(--color-info-soft);
	border-radius: var(--radius);
}
.help-card__icon svg { width: 1.5rem; height: 1.5rem; }
.help-card__title { margin-block-end: 0.5rem; font-size: 1.25rem; line-height: 1.75rem; color: var(--color-text); }
.help-card__title a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.help-card__text { margin-block-end: 1.25rem; color: var(--color-text-muted); }
.help-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-block-start: auto; }
.help-card__link { font-weight: 600; color: var(--color-primary); }
.help-card__link::after { content: ' →'; }
.help-card__count { font-size: 0.875rem; color: var(--color-text-muted); }

/* category page: one block per topic with its article list (help.figma.com category layout) */
.help-topics { display: grid; gap: 2.5rem 3rem; }
.help-topic { padding-block-start: 1.5rem; border-block-start: 1px solid var(--color-border); }
.help-topic__title { margin-block-end: 0.5rem; font-size: 1.375rem; line-height: 1.75rem; color: var(--color-text); }
.help-topic__title a:hover { color: var(--color-primary); }
.help-topic__text { margin-block-end: 1rem; color: var(--color-text-muted); }
.help-topic__list { display: flex; flex-direction: column; gap: 0.625rem; }
.help-topic__link { color: var(--color-primary); }
.help-topic__link:hover { text-decoration: underline; }
.help-topic__more { display: inline-block; margin-block-start: 1rem; font-weight: 600; color: var(--color-text); }
.help-topic__more::after { content: ' →'; }
.help-topic__more:hover { color: var(--color-primary); }

/* ---------------------------------------------------------------- chips */
.help-chip {
	display: inline-flex;
	align-items: center;
	padding: 0.125rem 0.625rem;
	font-size: 0.75rem;
	line-height: 1.25rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--color-text-muted);
	white-space: nowrap;
	background-color: var(--color-surface-2);
	border-radius: var(--radius-pill);
}
.help-chip--audience { color: #1d4ed8; background-color: var(--color-info-soft); }
.help-chip--status { color: #7a5b00; background-color: var(--color-tint-yellow); }
.help-chip--optional { font-weight: 500; }

/* ---------------------------------------------------------------- article page layout */
.help-page { padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(3rem, 2rem + 4vw, 5rem); }
.help-page__grid { display: grid; gap: 3rem; grid-template-areas: 'main' 'aside'; }
.help-page__main { grid-area: main; min-width: 0; }
.help-page__aside { grid-area: aside; }
.help-page .help-crumbs { margin-block-end: 1.5rem; }

.help-aside__block + .help-aside__block { margin-block-start: 2rem; }
.help-aside__title { margin-block-end: 0.75rem; font-size: 0.8125rem; line-height: 1.25rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.help-aside__list { display: flex; flex-direction: column; gap: 0.125rem; border-inline-start: 2px solid var(--color-border); }
.help-aside__link {
	display: block;
	padding: 0.375rem 0 0.375rem 1rem;
	margin-inline-start: -2px;
	font-size: 0.9375rem;
	line-height: 1.375rem;
	color: var(--color-text-muted);
	border-inline-start: 2px solid transparent;
	transition: color var(--transition), border-color var(--transition);
}
.help-aside__link:hover { color: var(--color-text); }
.help-aside__link[aria-current='page'], .help-aside__link.is-active { font-weight: 600; color: var(--color-primary); border-inline-start-color: var(--color-primary); }

/* ---------------------------------------------------------------- article */
.help-article__title { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); letter-spacing: -0.01em; color: var(--color-text); }
.help-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-block-start: 1rem; font-size: 0.875rem; color: var(--color-text-muted); }
.help-article__lead { max-width: var(--measure-prose); margin-block-start: 1.25rem; font-size: 1.1875rem; line-height: 1.75rem; color: var(--color-text-muted); }
.help-article__lead strong { color: var(--color-text); }
.help-article__h2 { margin-block: 3rem 1.25rem; font-size: 1.625rem; line-height: 2rem; color: var(--color-text); }

/* prose inside generated blocks (.prose of the site + the gaps it leaves: ol, code) */
.help-prose { max-width: var(--measure-prose); color: var(--color-text-muted); line-height: 1.625rem; }
.help-prose > * + * { margin-block-start: 0.875rem; }
.help-prose strong { font-weight: 600; color: var(--color-text); }
.help-prose a { color: var(--color-primary); text-decoration: underline; }
.help-prose ul { padding-inline-start: 1.25rem; list-style: disc; }
.help-prose ol { padding-inline-start: 1.25rem; list-style: decimal; }
.help-prose li + li { margin-block-start: 0.4rem; }
.help-prose code { padding: 0.0625rem 0.375rem; font-size: 0.875em; background-color: var(--color-surface-2); border-radius: var(--radius-sm); }
.help-prose blockquote { padding-inline-start: 1rem; border-inline-start: 3px solid var(--color-border); }

/* callouts ("Before you start", tips) */
.help-callout {
	max-width: calc(var(--measure-prose) + 3rem);
	margin-block-start: 2rem;
	padding: 1.25rem 1.5rem;
	background-color: var(--color-info-soft);
	border-radius: var(--radius-lg);
}
.help-callout__title { margin-block-end: 0.5rem; font-size: 1rem; line-height: 1.5rem; font-weight: 600; color: var(--color-text); }
.help-callout .help-prose { color: var(--color-text); }
.help-callout--result { background-color: var(--color-tint-green); }

.help-block { margin-block-start: 3rem; }
.help-block__title { margin-block-end: 1rem; font-size: 1.625rem; line-height: 2rem; color: var(--color-text); }

/* ---------------------------------------------------------------- steps */
.help-steps { display: flex; flex-direction: column; gap: 2.5rem; counter-reset: none; }
.help-step {
	display: grid;
	gap: 1.25rem 2.5rem;
	padding-block-start: 2.5rem;
	border-block-start: 1px solid var(--color-border);
}
.help-step:first-child { padding-block-start: 0; border-block-start: 0; }
.help-step__head { display: flex; align-items: flex-start; gap: 0.875rem; }
.help-step__num {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-primary-contrast);
	background-color: var(--color-primary);
	border-radius: 50%;
}
.help-step__title { padding-block-start: 0.25rem; font-size: 1.25rem; line-height: 1.75rem; color: var(--color-text); }
.help-step__title .help-chip { margin-inline-start: 0.5rem; vertical-align: 0.15em; }
.help-step__body { margin-block-start: 0.875rem; padding-inline-start: 3.125rem; }
.help-step__tips { display: flex; flex-direction: column; gap: 0.75rem; margin-block-start: 1.25rem; padding-inline-start: 3.125rem; }
.help-tip {
	max-width: var(--measure-prose);
	padding: 0.875rem 1.125rem;
	font-size: 0.9375rem;
	line-height: 1.5rem;
	color: var(--color-text);
	background-color: var(--color-surface);
	border-inline-start: 3px solid var(--color-primary);
	border-radius: 0 var(--radius) var(--radius) 0;
}
.help-tip__label { font-weight: 600; }

/* phone screenshot on a tinted panel (product-stages__media / __img look) */
.help-step__media {
	display: grid;
	place-items: center;
	align-self: start;
	padding: clamp(1rem, 0.75rem + 1.5vw, 1.75rem);
	background-color: var(--color-info-soft);
	border-radius: var(--radius-xl);
}
.help-shot { display: block; width: 100%; max-width: var(--help-shot-width); border-radius: 1.5rem; cursor: zoom-in; }
.help-shot__img {
	width: 100%;
	height: auto;
	background-color: #fff;
	border: 1px solid var(--color-border);
	border-radius: 1.5rem;
	box-shadow: var(--shadow-lg);
}
.help-shot:focus-visible { outline-offset: 4px; }

/* desktop screenshot (web app): under the text at full width, on the same tinted panel, with a window-like corner */
.help-step--wide .help-shot { max-width: none; border-radius: var(--radius); }
.help-step--wide .help-shot__img { border-radius: var(--radius); box-shadow: var(--shadow); }

/* ---------------------------------------------------------------- good to know / FAQ / related / pager */
.help-list { display: flex; flex-direction: column; gap: 0.75rem; max-width: var(--measure-prose); }
.help-list__item { position: relative; padding-inline-start: 1.75rem; color: var(--color-text-muted); line-height: 1.625rem; }
.help-list__item::before {
	content: '';
	position: absolute;
	inset-inline-start: 0.25rem;
	inset-block-start: 0.5rem;
	width: 0.625rem;
	height: 0.625rem;
	border: 2px solid var(--color-primary);
	border-radius: 50%;
}
.help-list__item strong { color: var(--color-text); }

.help-faq { max-width: calc(var(--measure-prose) + 3rem); border-block-end: 1px solid var(--color-border); }
.help-faq:first-of-type { border-block-start: 1px solid var(--color-border); }
.help-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; font-weight: 500; color: var(--color-text); cursor: pointer; list-style: none; }
.help-faq__q::-webkit-details-marker { display: none; }
/* one flex item for the question, so its **labels** wrap with the text instead of becoming items of their own */
.help-faq__text { min-width: 0; }
.help-faq__q::after { content: '+'; flex: 0 0 auto; font-size: 1.5rem; line-height: 1; color: var(--color-primary); transition: transform var(--transition); }
.help-faq[open] .help-faq__q::after { transform: rotate(45deg); }
.help-faq__a { padding-block-end: 1rem; }

.help-related__list { display: flex; flex-direction: column; gap: 0.625rem; }
.help-related__link { color: var(--color-primary); }
.help-related__link:hover { text-decoration: underline; }

.help-pager { display: grid; gap: 1rem; margin-block-start: 3.5rem; }
.help-pager__link {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	transition: border-color var(--transition), box-shadow var(--transition);
}
.help-pager__link:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.help-pager__link--next { text-align: end; }
.help-pager__label { font-size: 0.8125rem; color: var(--color-text-muted); }
.help-pager__title { font-weight: 600; color: var(--color-primary); }

/* ---------------------------------------------------------------- lightbox (help.js) */
.help-lightbox { width: min(100vw, 40rem); max-width: 100vw; max-height: 100vh; margin: auto; padding: 0; overflow: visible; color: #fff; background: transparent; border: 0; }
.help-lightbox::backdrop { background-color: rgb(27 26 35 / 85%); }
.help-lightbox__figure { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 1rem; }
.help-lightbox__img { width: auto; max-width: 100%; max-height: calc(100vh - 7rem); border-radius: 1.25rem; background-color: #fff; }
/* desktop screenshot (web app): up to its own 1280 px, smaller only where the window is */
.help-lightbox--wide { width: min(100vw, 82rem); }
.help-lightbox--wide .help-lightbox__img { border-radius: var(--radius); }
.help-lightbox__caption { max-width: 32rem; font-size: 0.9375rem; line-height: 1.375rem; text-align: center; }
.help-lightbox__bar { display: flex; gap: 0.5rem; }
.help-lightbox__btn { padding: 0.5rem 1rem; font-weight: 600; color: var(--color-text); background-color: #fff; border-radius: var(--radius-pill); }
.help-lightbox__btn:hover { background-color: var(--color-surface-2); }

/* ---------------------------------------------------------------- breakpoints (sm 36 / md 48 / lg 64 / xl 80 rem) */
@media (min-width: 26rem) {
	.help-header__divider { display: block; }
	.help-header__title { display: inline; }
}
@media (min-width: 36rem) {
	.help-grid { grid-template-columns: repeat(2, 1fr); }
	.help-pager { grid-template-columns: 1fr 1fr; }
	.help-pager__link--next:only-child { grid-column: 2; }
}
@media (min-width: 48rem) {
	/* the bar holds everything: no menu button, the menu inline */
	.help-header__inner { flex-wrap: nowrap; }
	.help-js .help-header__toggle { display: none; }
	.help-header__menu, .help-js .help-header__menu {
		position: static;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		gap: 0.5rem;
		padding: 0;
		background-color: transparent;
		border: 0;
		box-shadow: none;
	}
	.help-header__site { padding: 0.5rem 1.25rem; }
	.lang-switcher { position: relative; }
	.lang-switcher__toggle { width: auto; gap: 0.3125rem; padding: 0.25rem 0.375rem; font-size: 0.8125rem; border-color: transparent; }
	.lang-switcher__toggle:hover { border-color: var(--color-border); }
	.lang-switcher__toggle .lang-switcher__flag { width: 1rem; height: 1rem; }
	.lang-switcher__chevron { width: 0.4rem; height: 0.4rem; margin-inline-start: 0.0625rem; }
	.help-js .lang-switcher__menu {
		position: absolute;
		inset-block-start: 100%;
		inset-inline-end: 0;
		z-index: 60;
		min-width: 12rem;
		padding: 0.5rem;
		background-color: var(--color-bg);
		border: 1px solid var(--color-border);
		border-radius: var(--radius);
		box-shadow: var(--shadow-lg);
	}
	.help-topics { grid-template-columns: repeat(2, 1fr); }
	.help-step { grid-template-columns: minmax(0, 1fr) calc(var(--help-shot-width) + 3.5rem); }
	.help-step--wide { grid-template-columns: minmax(0, 1fr); }
	.help-step__media { padding: 1.75rem; }
}
@media (min-width: 64rem) {
	/* the site's desktop bar: 14px above and below the 44px logo (the 42px buttons fit inside) = 72px + border */
	:root { --help-header-height: 4.5rem; }
	.help-header__inner { padding-block: 0.875rem; }
	.help-grid { grid-template-columns: repeat(3, 1fr); }
	.help-page__grid { grid-template-columns: 15rem minmax(0, 1fr); grid-template-areas: 'aside main'; gap: 4rem; }
	.help-page__aside { position: sticky; inset-block-start: calc(var(--help-header-height) + 2rem); align-self: start; max-height: calc(100vh - var(--help-header-height) - 3rem); overflow-y: auto; }
}
@media (min-width: 80rem) {
	.help-topics { grid-template-columns: repeat(3, 1fr); }
}

@media print {
	.help-header, .help-footer, .help-page__aside, .help-pager, .help-skip { display: none; }
	.help-lang-pending body { visibility: visible; }
	.help-step { break-inside: avoid; }
	.help-shot { max-width: 12rem; }
}