@charset "UTF-8";

/*
 * Kays Medic — single stylesheet.
 *
 * Written with CSS logical properties throughout, so the same file serves the
 * Hebrew RTL front end and any LTR context without a separate rtl.css.
 */

/* ------------------------------------------------------------------ tokens */

:root {
	--km-ink: #0f1720;
	--km-muted: #5a6675;
	--km-navy: #0e2e4e;
	--km-navy-tint: #eaf1f8;
	--km-accent: #c4520f;      /* passes AA on white and behind white text */
	--km-accent-bright: #ee6b25; /* brand orange, decorative use only */
	--km-accent-tint: #fff1e8;
	--km-alert: #c1272d;
	--km-surface: #fff;
	--km-surface-alt: #f5f8fb;
	--km-line: #dce4ec;

	--km-font: "Segoe UI", "Assistant", "Rubik", "Heebo", "Noto Sans Hebrew",
		"Arial Hebrew", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

	--km-wrap: 72rem;
	--km-gutter: clamp(1rem, 4vw, 2.5rem);
	--km-section: clamp(3.5rem, 6vw, 6rem);

	--km-radius: 14px;
	--km-radius-lg: 22px;
	--km-shadow-sm: 0 1px 2px rgb(14 46 78 / 6%), 0 2px 8px rgb(14 46 78 / 6%);
	--km-shadow-md: 0 12px 28px rgb(14 46 78 / 10%);

	--km-focus: 3px solid var(--km-accent);
}

/* -------------------------------------------------------------------- base */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-block-start: 5rem;

	/* Full-bleed sections are sized in vw, which counts the scrollbar; clip
	   (not hidden) absorbs the few stray pixels without breaking sticky. */
	overflow-x: clip;
}

body {
	margin: 0;
	overflow-x: clip;
	background: var(--km-surface);
	color: var(--km-ink);
	font-family: var(--km-font);
	font-size: 1.0625rem;
	line-height: 1.7;
	text-rendering: optimizeLegibility;
}

img,
svg,
iframe,
video {
	max-width: 100%;
}

img {
	height: auto;
}

h1,
h2,
h3,
h4 {
	margin-block: 0 0.5em;
	line-height: 1.22;
	font-weight: 700;
	text-wrap: balance;
	color: var(--km-navy);
}

h1 { font-size: clamp(2rem, 3vw + 1.25rem, 3.25rem); }
h2 { font-size: clamp(1.6rem, 1.4vw + 1.25rem, 2.25rem); }
h3 { font-size: clamp(1.2rem, 0.6vw + 1.05rem, 1.5rem); }

p,
ul,
ol {
	margin-block: 0 1em;
}

a {
	color: var(--km-accent);
	text-underline-offset: 3px;
}

a:hover {
	text-decoration: none;
}

:focus-visible {
	outline: var(--km-focus);
	outline-offset: 2px;
	border-radius: 4px;
}

::selection {
	background: var(--km-accent-tint);
}

.km-icon {
	inline-size: 1.25em;
	block-size: 1.25em;
	flex: none;
	fill: none;
	stroke: currentcolor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.km-icon--facebook,
.km-icon--instagram,
.km-icon--whatsapp {
	stroke-width: 1.5;
}

.km-icon--facebook {
	fill: currentcolor;
	stroke: none;
}

/* Directional glyph: it must point the way the text flows. */
[dir="rtl"] .km-icon--arrow {
	scale: -1 1;
}

/* --------------------------------------------------------------- utilities */

.km-wrap {
	inline-size: min(100% - var(--km-gutter) * 2, var(--km-wrap));
	margin-inline: auto;
}

.km-narrow {
	max-inline-size: 46rem;
}

.km-content {
	inline-size: min(100% - var(--km-gutter) * 2, 48rem);
	margin-inline: auto;
	margin-block: var(--km-section);
}

/* Landing pages: the patterns carry their own vertical rhythm. */
.km-content--flush {
	margin-block: 0;
}

/* Breakouts: a wider child is centred on the column with negative margins. */
.km-content > .alignwide {
	--km-break: min(100vw - var(--km-gutter) * 2, var(--km-wrap));

	inline-size: var(--km-break);
	max-inline-size: none;
	margin-inline: calc((100% - var(--km-break)) / 2);
}

.km-content > .alignfull {
	inline-size: 100vw;
	max-inline-size: none;
	margin-inline: calc((100% - 100vw) / 2);
}

.km-content > * {
	margin-block: 0 1.15em;
}

.km-content > h2,
.km-content > h3 {
	margin-block-start: 1.8em;
}

.km-content ul:not([class]) {
	padding-inline-start: 1.2em;
}

.km-content ul:not([class]) li::marker {
	color: var(--km-accent-bright);
}

.km-content blockquote {
	margin-inline: 0;
	padding-inline-start: 1.25rem;
	border-inline-start: 4px solid var(--km-accent-bright);
	color: var(--km-muted);
	font-size: 1.1em;
}

.km-content figure {
	margin-inline: 0;
}

.km-content img {
	border-radius: var(--km-radius);
}

.screen-reader-text {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.km-skip {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	z-index: 100;
	padding: 0.75rem 1.25rem;
	background: var(--km-navy);
	color: #fff;
	translate: 0 -110%;
}

.km-skip:focus {
	translate: 0 0;
}

.km-link {
	font-weight: 600;
}

.km-note {
	color: var(--km-muted);
	font-size: 0.9375rem;
}

/* ----------------------------------------------------------------- buttons */

.km-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-block-size: 44px;
	padding: 0.6rem 1.25rem;
	border: 2px solid transparent;
	border-radius: 999px;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.km-btn--primary {
	background: var(--km-accent);
	border-color: var(--km-accent);
	color: #fff;
}

.km-btn--primary:hover {
	background: #a8450c;
	border-color: #a8450c;
}

.km-btn--ghost {
	background: transparent;
	border-color: var(--km-line);
	color: var(--km-navy);
}

.km-btn--ghost:hover {
	border-color: var(--km-navy);
	background: var(--km-navy-tint);
}

.km-btn--lg {
	min-block-size: 52px;
	padding-inline: 1.75rem;
	font-size: 1.0625rem;
}

.km-btnrow {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* ------------------------------------------------------------------ header */

.km-header {
	/* Nine menu items need more room than the reading column allows. */
	--km-wrap: 80rem;

	position: sticky;
	inset-block-start: 0;

	/* Above the mobile scrim: sticky creates a stacking context, so the drawer
	   and its close button inherit this value rather than their own. */
	z-index: 60;
	background: var(--km-surface);
	border-block-end: 1px solid var(--km-line);
}

.km-header__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-block: 0.75rem;
}

.km-brand {
	flex: none;
	margin: 0;
	font-size: 1.25rem;
}

.km-brand__link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: var(--km-navy);
}

.km-brand__logo {
	display: block;
	block-size: auto;
	max-block-size: 46px;
	inline-size: auto;
}

.km-brand__name {
	font-weight: 800;
	letter-spacing: -0.01em;
}

/* --------------------------------------------------------------- navigation */

.km-nav {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
}

.km-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.km-nav li {
	position: relative;
}

.km-nav a {
	display: block;
	padding: 0.4rem 0.1rem;
	color: var(--km-navy);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	border-block-end: 2px solid transparent;
}

.km-nav a:hover,
.km-nav .current-menu-item > a,
.km-nav .current_page_item > a,
.km-nav .current-menu-ancestor > a {
	color: var(--km-accent);
	border-block-end-color: var(--km-accent-bright);
}

.km-nav .sub-menu,
.km-nav .children {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 0;
	z-index: 5;
	display: grid;
	gap: 0;
	min-inline-size: 13rem;
	padding: 0.4rem;
	margin: 0;
	list-style: none;
	background: var(--km-surface);
	border: 1px solid var(--km-line);
	border-radius: var(--km-radius);
	box-shadow: var(--km-shadow-md);
	opacity: 0;
	visibility: hidden;
	translate: 0 6px;
	transition: opacity 0.15s, translate 0.15s;
}

.km-nav li:hover > .sub-menu,
.km-nav li:focus-within > .sub-menu,
.km-nav li:hover > .children,
.km-nav li:focus-within > .children {
	opacity: 1;
	visibility: visible;
	translate: 0 0;
}

.km-nav .sub-menu a {
	padding: 0.5rem 0.75rem;
	border: 0;
	border-radius: 8px;
}

.km-nav .sub-menu a:hover {
	background: var(--km-navy-tint);
}

.km-navtoggle {
	display: none;
	margin-inline-start: auto;
	align-items: center;
	justify-content: center;
	inline-size: 46px;
	block-size: 46px;
	padding: 0;
	background: var(--km-navy-tint);
	border: 0;
	border-radius: 12px;
	color: var(--km-navy);
	cursor: pointer;
}

.km-navtoggle .km-icon {
	inline-size: 24px;
	block-size: 24px;
	stroke-width: 2;
}

.km-navtoggle .km-icon--close,
.km-navtoggle[aria-expanded="true"] .km-icon--menu {
	display: none;
}

.km-navtoggle[aria-expanded="true"] .km-icon--close {
	display: block;
}

@media (max-width: 72rem) {
	.km-navtoggle {
		display: inline-flex;
	}

	.km-nav {
		position: fixed;
		inset-block: 0 0;
		inset-inline-end: 0;
		z-index: 60;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0.5rem;
		inline-size: min(20rem, 86vw);
		padding: 1.5rem var(--km-gutter) 2rem;
		overflow-y: auto;
		background: var(--km-surface);
		box-shadow: var(--km-shadow-md);
		visibility: hidden;
		transition: translate 0.25s ease, visibility 0.25s;
	}

	/*
	 * The drawer is anchored to the inline-end edge, so "off-canvas" is a
	 * different physical direction per writing mode. translate has no logical
	 * form, so both cases are spelled out.
	 */
	[dir="rtl"] .km-nav {
		translate: -100% 0;
	}

	[dir="ltr"] .km-nav {
		translate: 100% 0;
	}

	[dir] .km-nav.is-open {
		translate: 0 0;
		visibility: visible;
	}

	/* Keep the close button on top of the drawer it opened. */
	body.km-scrimmed .km-navtoggle {
		position: relative;
		z-index: 61;
		background: transparent;
	}

	.km-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin-block-start: 3rem;
	}

	.km-nav a {
		padding-block: 0.85rem;
		border-block-end: 1px solid var(--km-line);
	}

	.km-nav .sub-menu,
	.km-nav .children {
		position: static;
		opacity: 1;
		visibility: visible;
		translate: none;
		box-shadow: none;
		border: 0;
		padding-inline-start: 1rem;
	}

	body.km-scrimmed::after {
		content: "";
		position: fixed;
		inset: 0;
		z-index: 50;
		background: rgb(14 46 78 / 45%);
	}

	body.km-scrimmed {
		overflow: hidden;
	}
}

/* ---------------------------------------------------------------- contacts */

.km-contact {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.km-contact a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--km-navy);
	text-decoration: none;
	font-weight: 600;
}

.km-contact a:hover {
	color: var(--km-accent);
}

.km-social {
	display: flex;
	gap: 0.5rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.km-social a {
	display: grid;
	place-items: center;
	inline-size: 42px;
	block-size: 42px;
	border-radius: 50%;
	border: 1px solid currentcolor;
	color: inherit;
	opacity: 0.85;
}

.km-social a:hover {
	opacity: 1;
	background: rgb(255 255 255 / 12%);
}

/* --------------------------------------------------------------- page head */

.km-pagehead {
	padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 4vw, 3.5rem);
	background: linear-gradient(180deg, var(--km-navy-tint), var(--km-surface));
	border-block-end: 1px solid var(--km-line);
	text-align: center;
}

.km-pagehead__title {
	margin: 0;
}

.km-pagehead__sub {
	max-inline-size: 46rem;
	margin: 0.75rem auto 0;
	color: var(--km-muted);
	font-size: 1.125rem;
}

/* -------------------------------------------------------------- post meta */

.km-meta {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	color: var(--km-muted);
	font-size: 0.875rem;
}

.km-feature img {
	inline-size: 100%;
	border-radius: var(--km-radius-lg);
}

/* -------------------------------------------------------------- pagination */

.km-pagination {
	margin-block: 0 var(--km-section);
}

.km-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
}

.km-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-inline-size: 44px;
	min-block-size: 44px;
	padding-inline: 0.75rem;
	border: 1px solid var(--km-line);
	border-radius: 10px;
	color: var(--km-navy);
	text-decoration: none;
	font-weight: 600;
}

.km-pagination .page-numbers:hover {
	border-color: var(--km-navy);
}

.km-pagination .page-numbers.current {
	background: var(--km-navy);
	border-color: var(--km-navy);
	color: #fff;
}

.km-postnav {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.km-postnav__link {
	display: grid;
	gap: 0.25rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--km-line);
	border-radius: var(--km-radius);
	text-decoration: none;
	color: var(--km-navy);
}

.km-postnav__link:hover {
	border-color: var(--km-navy);
	background: var(--km-surface-alt);
}

.km-postnav__link span {
	color: var(--km-muted);
	font-size: 0.875rem;
}

/* ------------------------------------------------------------------- forms */

.km-form-wrap {
	scroll-margin-block-start: 6rem;
}

/* The line under the submit button saying what the details are used for. */
.km-form__privacy {
	margin: 0.9rem 0 0;
	color: var(--km-muted);
	font-size: 0.875rem;
}

.km-form__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: 1rem;
	margin-block-end: 1.5rem;
}

.km-field {
	display: grid;
	gap: 0.35rem;
	margin: 0;
}

.km-field--wide {
	grid-column: 1 / -1;
}

.km-field label {
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--km-navy);
}

.km-field__req {
	color: var(--km-alert);
	margin-inline-start: 0.15em;
}

.km-field input,
.km-field select,
.km-field textarea,
.km-search input {
	inline-size: 100%;
	min-block-size: 46px;
	padding: 0.55rem 0.85rem;
	font: inherit;
	color: inherit;
	background: var(--km-surface);
	border: 1px solid var(--km-line);
	border-radius: 10px;
}

.km-field textarea {
	min-block-size: 8rem;
	resize: vertical;
}

.km-field input:focus-visible,
.km-field select:focus-visible,
.km-field textarea:focus-visible {
	outline: var(--km-focus);
	outline-offset: 0;
	border-color: var(--km-accent);
}

.km-field.is-invalid input,
.km-field.is-invalid select,
.km-field.is-invalid textarea {
	border-color: var(--km-alert);
}

.km-hp {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/*
 * Cloudflare draws its own 300x65 iframe here. The box is reserved before the
 * script arrives so the submit button does not jump down the page when it does,
 * and it collapses to nothing when Turnstile is not configured and the div is
 * never printed.
 */
.km-turnstile {
	margin-block: 1.25rem;
	min-block-size: 65px;
}

.km-notice {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	padding: 0.9rem 1.1rem;
	margin-block-end: 1.25rem;
	border-radius: var(--km-radius);
	border-inline-start: 4px solid;
	font-weight: 600;
}

.km-notice p {
	margin: 0;
}

.km-notice ul {
	margin: 0.4rem 0 0;
	padding-inline-start: 1.2em;
	font-weight: 500;
}

.km-notice--ok {
	background: #edf7ee;
	border-color: #2e7d32;
	color: #1b5e20;
}

.km-notice--warn {
	background: var(--km-accent-tint);
	border-color: var(--km-accent);
	color: #7a3208;
}

.km-notice--error {
	display: block;
	background: #fdecec;
	border-color: var(--km-alert);
	color: #8c1c21;
}

.km-search {
	display: flex;
	gap: 0.5rem;
	max-inline-size: 26rem;
	margin-block-end: 1.5rem;
}

.km-search button {
	display: grid;
	place-items: center;
	inline-size: 46px;
	block-size: 46px;
	flex: none;
	background: var(--km-navy);
	border: 0;
	border-radius: 10px;
	color: #fff;
	cursor: pointer;
}

/* --------------------------------------------------------- contact / embed */

.km-contactgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: clamp(1.5rem, 4vw, 3rem);
	margin-block: var(--km-section);
	align-items: start;
}

.km-details {
	margin: 0 0 1.5rem;
}

.km-details__row {
	display: grid;
	grid-template-columns: minmax(6.5rem, auto) 1fr;
	gap: 0.25rem 1rem;
	align-items: baseline;
	padding-block: 0.6rem;
	border-block-end: 1px solid var(--km-line);
}

.km-details__row:last-child {
	border-block-end: 0;
}

.km-details dt {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--km-muted);
	font-size: 0.875rem;
}

.km-details dd {
	margin: 0;
	color: var(--km-navy);
	font-weight: 600;
}

.km-details dd a {
	color: inherit;
	text-decoration: none;
}

.km-details dd a:hover {
	color: var(--km-accent);
	text-decoration: underline;
}

.km-details dd em {
	display: block;
	margin-block-start: 0.15rem;
	color: var(--km-muted);
	font-style: normal;
	font-weight: 400;
	font-size: 0.9375rem;
}

.km-about__cta {
	margin-block-start: 2rem;
}

.km-contactgrid__form {
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--km-surface-alt);
	border: 1px solid var(--km-line);
	border-radius: var(--km-radius-lg);
}

.km-contactgrid__form .km-field input,
.km-contactgrid__form .km-field select,
.km-contactgrid__form .km-field textarea {
	background: var(--km-surface);
}

/* Until it is asked for, the map is a note and two buttons; site.js swaps the
   note and the "show" button for the iframe. */
.km-map {
	margin: 1.5rem 0 0;
	overflow: hidden;
	border-radius: var(--km-radius);
	border: 1px solid var(--km-line);
	display: grid;
	gap: 0.75rem;
	padding: 1.25rem;
	background: var(--km-surface-alt);
}

.km-map__note {
	margin: 0;
	color: var(--km-muted);
	font-size: 0.9375rem;
}

.km-map__actions {
	margin: 0;
}

/* .km-btn sets a display of its own, which would otherwise outrank [hidden]. */
.km-map [hidden] {
	display: none;
}

.km-map.is-loaded {
	padding: 0;
	gap: 0;
}

.km-map.is-loaded .km-map__actions {
	padding: 0.75rem 1.25rem;
}

.km-map iframe {
	display: block;
	inline-size: 100%;
	block-size: 320px;
	border: 0;
}


/* ------------------------------------------------------------------ footer */

.km-footer {
	margin-block-start: var(--km-section);
	background: var(--km-navy);
	color: #e7eef5;
	text-align: center;
	font-size: 0.9375rem;
}

.km-footer a {
	color: #e7eef5;
}

.km-footer__inner {
	display: grid;
	justify-items: center;
	gap: 0.6rem;
	padding-block: clamp(1.75rem, 4vw, 2.25rem) clamp(1.25rem, 3vw, 1.75rem);
}

.km-footer__name {
	margin: 0;
	color: #fff;
	font-size: 1.15rem;
	font-weight: 800;
}

.km-footer__lede,
.km-footer__place {
	margin: 0;
	color: #b9c9d8;
}

/* Horizontal in the footer; the contact page keeps the stacked version. */
.km-footer .km-contact {
	flex-flow: row wrap;
	justify-content: center;
	gap: 0.35rem 1.5rem;
}

.km-footer .km-contact a {
	color: #e7eef5;
}

.km-footer .km-contact a:hover {
	color: #fff;
	text-decoration: underline;
}

.km-footer__place {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.35rem 1rem;
}

.km-footer__menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.35rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.km-footer__menu a {
	/* A block box is as tall as its line (25px); an inline one is only as tall
	   as its glyphs, which falls short of the 24px tap-target minimum. */
	display: inline-block;
	text-decoration: none;
}

.km-footer__menu a:hover {
	text-decoration: underline;
}

.km-footer .km-social {
	margin: 0.25rem 0 0;
}

.km-emergency {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.6rem var(--km-gutter);
	margin: 0;
	background: var(--km-alert);
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 600;
	text-align: center;
}

.km-footer__bar {
	background: #0a2338;
	font-size: 0.8125rem;
}

.km-footer__barinner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.2rem 1.25rem;
	padding-block: 0.7rem;
	color: #9fb3c6;
}

/* Legal link: brighter than the bar's text, because it is the one thing in
   the bar that is meant to be clicked. */
.km-footer__legal {
	/* A box of its own, so the tap target is taller than the line of small
	   text it sits on: 32px at the default size, above the 24px minimum. */
	display: inline-flex;
	align-items: center;
	min-block-size: 2rem;
	font-weight: 600;
	text-decoration: none;
}

.km-footer__legal:hover {
	color: #fff;
	text-decoration: underline;
}

/* ------------------------------------------------- sticky mobile call bar */

.km-actionbar {
	position: fixed;
	inset-block-end: 0;
	inset-inline: 0;
	z-index: 45;
	display: none;
	gap: 1px;
	background: var(--km-line);
	padding-block-end: env(safe-area-inset-bottom);
	box-shadow: 0 -4px 16px rgb(14 46 78 / 14%);
}

.km-actionbar__btn {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-block-size: 54px;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

.km-actionbar__btn--call {
	background: var(--km-accent);
}

.km-actionbar__btn--wa {
	background: #1f7a4d;
}

@media (max-width: 48rem) {
	.km-actionbar {
		display: flex;
	}

	body {
		padding-block-end: 54px;
	}

}

/* --------------------------------------------------------- page sections */

.km-section {
	padding-block: var(--km-section);
	padding-inline: var(--km-gutter);
}

.km-section--tint {
	background: var(--km-surface-alt);
}

.km-section--navy {
	background: var(--km-navy);
	color: #fff;
}

.km-section--navy :is(h1, h2, h3) {
	color: #fff;
}

.km-section__title {
	margin-block: 0 0.5rem;
}

.km-section__lede,
.km-lede {
	max-inline-size: 46rem;
	color: var(--km-muted);
	font-size: clamp(1.02rem, 0.4vw + 0.95rem, 1.15rem);
}

.km-section__lede {
	margin-block: 0 clamp(1.5rem, 3vw, 2.25rem);
}

.km-section--navy .km-lede {
	color: #c3d3e2;
}

/* ------------------------------------------------------------------- hero */

/*
 * The photographs are 2:1 with the people on the left and a plain wall on the
 * right 40%, which is where the text goes. The hero keeps the photos' shape
 * (a little shorter on short screens, trimming wall and floor, never people).
 * One even, semi-transparent navy shade covers the whole section; the photo
 * stays clearly visible through it and the white text reads over it.
 * Below 60rem the photo still fills the section, centred on the people;
 * below 40rem it switches to the portrait photos, text above the people.
 *
 * The text column is the hero's inline-start side, which is the right in
 * Hebrew; that is the side the photos keep clear.
 */
.km-hero {
	--km-hero-fade: 1.4s;
	--km-hero-shade: 10 30 52;
	--km-hero-shade-alpha: 50%;

	position: relative;
	isolation: isolate;
	display: grid;
	align-items: center;

	/* A minimum, not a height: a narrow text column or enlarged text grows the
	   hero instead of spilling into the next section. */
	min-block-size: max(28rem, min(50vw, 100svh - 4.5rem));
	padding-block: clamp(3.5rem, 6vw, 5rem);
	background: var(--km-navy);
	color: #fff;
}

.km-hero__slides {
	position: absolute;
	z-index: -1;
	inset: 0;
	overflow: hidden;
}

/* The shade, edge to edge over the whole section. */
.km-hero::before {
	position: absolute;
	z-index: 0;
	inset: 0;
	background: rgb(var(--km-hero-shade) / var(--km-hero-shade-alpha));
	content: "";
	pointer-events: none;
}

.km-hero__slide {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;

	/* Any trimming comes off the wall side, never the people. */
	object-position: 25% 50%;
	opacity: 0;
	transition: opacity var(--km-hero-fade) ease;
}

/* The outgoing photo stays fully opaque under the incoming one, so the fade
 * always runs photo-over-photo and never shows the background. */
.km-hero__slide.is-prev {
	z-index: 1;
	opacity: 1;
}

.km-hero__slide.is-active {
	z-index: 2;
	opacity: 1;
}

/* The text column: the photos' empty wall. */
.km-hero > .km-wrap {
	position: relative;
	z-index: 1;
	inline-size: max(40%, 24rem);
	margin-inline: 0;
	padding-inline: clamp(1.5rem, 3.5vw, 4rem);
}

.km-hero__inner {
	min-inline-size: 0;
	max-inline-size: 32rem;
	margin-inline: auto;
	text-shadow: 0 1px 3px rgb(0 0 0 / 40%), 0 2px 18px rgb(0 0 0 / 35%);
}

/* The carousel's own pause button, in the corner over the people. Revealed by
   site.js only when there is more than one photo to cycle. */
.km-hero__pause {
	position: absolute;
	z-index: 1;
	inset-block-end: 0.75rem;
	inset-inline-end: 0.75rem;
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border: 1px solid rgb(255 255 255 / 60%);
	border-radius: 999px;
	background: rgb(10 30 52 / 55%);
	color: #fff;
	cursor: pointer;
}

.km-hero__pause[hidden] {
	display: none;
}

.km-hero__pause:hover,
.km-hero__pause[aria-pressed="true"] {
	background: #fff;
	color: var(--km-navy);
}

@media (max-width: 60rem) {
	/* The photo fills the whole section behind the text, as on desktop. The
	   screen is narrower than the photo, so it is centred on the people and
	   the trimming comes off the room's sides. The shade is a touch deeper
	   here because the text runs over the people. */
	.km-hero {
		--km-hero-shade-alpha: 58%;

		display: grid;
		align-content: center;
		block-size: auto;
		min-block-size: min(66.667vw, 36rem); /* tablets: room for the photo */
		padding-block: clamp(2.25rem, 8vw, 3.5rem);
	}

	.km-hero__slide {
		object-position: 26% 50%;
	}

	.km-hero > .km-wrap {
		inline-size: min(100% - var(--km-gutter) * 2, 38rem);
		margin-inline: auto;
		padding-inline: 0;
	}

	.km-hero__inner {
		max-inline-size: none;
	}
}

/* Phones get the 9:16 portrait photos: plain wall in the upper 55% for the
 * text, the people in the lower 45%. The hero reserves that lower band
 * (a little over 45% of the photo's full-width height, 177.78vw) below the text, so the
 * text always ends above the people however it wraps. The photo is always
 * exactly full width and anchored to the bottom, never scaled up to cover:
 * a shorter hero trims the wall off the top, and a taller one (the usual
 * case, and more so with long or enlarged text) continues the wall upward —
 * the slide area is painted the wall's own colour and the photo's top edge
 * eases into it — instead of growing the people band up under the text. */
@media (max-width: 40rem) {
	.km-hero {
		align-content: start;
		min-block-size: 0;
		padding-block-end: 86vw;
	}

	.km-hero__slides {
		background: #eee5e1; /* the photos' wall, sampled along their top edge */
	}

	.km-hero__slide {
		inset: auto 0 0;
		block-size: auto;
		-webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%);
		mask-image: linear-gradient(to bottom, transparent, #000 12%);
	}

	.km-hero__actions,
	.km-hero__creds {
		margin-block-start: 1.25rem;
	}
}

html.km-a11y-contrast .km-hero::before {
	background: rgb(0 0 0 / 78%);
}

.km-hero__title {
	margin-block: 0 0.6rem;
	color: #fff;
	font-size: clamp(2rem, 2.5vw + 0.6rem, 3.25rem);
	letter-spacing: -0.015em;
}

.km-hero__lede {
	margin: 0;
	max-inline-size: 42rem;
	color: #e6eef6;
	font-size: clamp(1.05rem, 0.5vw + 0.95rem, 1.25rem);
}

.km-eyebrow {
	display: inline-flex;
	align-items: center;
	padding: 0.3rem 0.85rem;
	margin-block: 0 1.1rem;
	background: rgb(255 255 255 / 10%);
	border: 1px solid rgb(255 255 255 / 20%);
	border-radius: 999px;
	color: #ffd7bd;
	font-size: 0.8125rem;
	font-weight: 600;
}

.km-hero .km-eyebrow {
	background: rgb(10 30 52 / 45%);
	border-color: rgb(255 255 255 / 30%);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	text-shadow: none;
}

.km-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-block-start: 1.75rem;
	text-shadow: none;
}

.km-hero .km-btn--ghost {
	border-color: rgb(255 255 255 / 85%);
	background: rgb(10 30 52 / 25%);
	color: #fff;
}

.km-hero .km-btn--ghost:hover {
	background: #fff;
	color: var(--km-navy);
}

.km-hero__creds {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.35rem;
	margin-block: 2rem 0;
	padding: 0;
	list-style: none;
	color: #d5e1ec;
	font-size: 0.8125rem;
}

.km-hero__creds li {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.km-hero__creds .km-icon {
	inline-size: 0.95rem;
	block-size: 0.95rem;
	stroke-width: 2.6;
	color: var(--km-accent-bright);
}

@media (max-width: 30rem) {
	.km-hero__title {
		font-size: clamp(1.8rem, 8vw, 2rem);
	}

	.km-hero__actions .km-btn {
		padding-inline: 1rem;
		font-size: 1rem;
	}
}

/* ------------------------------------------------------ what we offer */

/*
 * Three columns, so the nine courses fill three full rows; two on a phone,
 * where the ninth is stretched across the last row.
 */
.km-offers {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: 0.75rem;
}

.km-offer {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 0.4rem;
	padding: 1rem 1.1rem 1.1rem;
	background: var(--km-surface);
	border: 1px solid var(--km-line);
	border-radius: var(--km-radius);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

a.km-offer:hover {
	border-color: var(--km-accent-bright);
	box-shadow: var(--km-shadow-sm);
	transform: translateY(-2px);
}

.km-offer__scope {
	color: var(--km-navy);
	font-size: 1.2rem;
	font-weight: 800;
	line-height: 1.2;
}

a.km-offer:hover .km-offer__scope {
	color: var(--km-accent);
}

.km-offer__group {
	color: var(--km-muted);
	font-size: 0.8125rem;
}

/* Two columns on a phone: an odd last course takes the whole row. */
@media (max-width: 36rem) {
	.km-offers {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.km-offer:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

/* --------------------------------------------------------- trust strip */

.km-trust {
	padding-block: clamp(2.5rem, 4.5vw, 3.75rem);
	padding-inline: var(--km-gutter);
	background: var(--km-navy-tint);
}

.km-trust__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: center;
}

.km-trust__text p {
	margin: 0;
	color: var(--km-ink);
}

.km-trust__inner--figures {
	grid-template-columns: 1fr;
}

.km-trust__figures {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
	gap: 1rem;
	margin: 0;
}

.km-figure {
	text-align: center;
}

.km-figure dt {
	color: var(--km-accent);
	font-size: clamp(1.6rem, 2.4vw, 2.25rem);
	font-weight: 800;
	line-height: 1.1;
}

.km-figure dd {
	margin: 0.15rem 0 0;
	color: var(--km-muted);
	font-size: 0.875rem;
}

/* Card style registered for core/group and core/column. */
.is-style-km-card {
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	background: var(--km-surface);
	border: 1px solid var(--km-line);
	border-radius: var(--km-radius-lg);
	box-shadow: var(--km-shadow-sm);
}

.km-section--navy .is-style-km-card {
	background: rgb(255 255 255 / 6%);
	border-color: rgb(255 255 255 / 14%);
	box-shadow: none;
}

/* Checklist used by the audience and certification patterns. */
.km-checklist ul,
ul.km-checklist {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
	gap: 0.5rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.km-checklist--stack ul,
ul.km-checklist--stack {
	grid-template-columns: 1fr;
	gap: 0.65rem;
}

.km-checklist li {
	position: relative;
	padding-inline-start: 1.75rem;
}

.km-checklist li::before {
	content: "";
	position: absolute;
	inset-block-start: 0.5em;
	inset-inline-start: 0.15rem;

	/* Physical borders: a tick is the same shape in both writing directions. */
	width: 0.85rem;
	height: 0.45rem;
	border: 2px solid var(--km-accent-bright);
	border-top: 0;
	border-right: 0;
	rotate: -45deg;
}

.km-cta {
	display: grid;
	gap: 1.5rem;
	align-items: center;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

/* --------------------------------------------------- lifesaving tips page */

/*
 * template-tips.php: an emergency strip, the first-aid cards, then the CPR
 * flow. Everything is readable with no script; tips.js only adds the pacer,
 * the search box and the filter, and switches the illustrations' motion on.
 */
.km-aid {
	--km-alert-tint: color-mix(in srgb, var(--km-alert) 8%, var(--km-surface));
}

.km-aid__wrap {
	inline-size: min(100% - var(--km-gutter) * 2, 58rem);
	margin-inline: auto;
}

.km-aid__section {
	padding-block: var(--km-section);
}

.km-aid__section--tint {
	background: var(--km-surface-alt);
	border-block: 1px solid var(--km-line);
}

/* Straight under the strip, whose own rule already draws the line between them. */
.km-aid__bar + .km-aid__section--tint {
	border-block-start: 0;
}

.km-aid__head {
	max-inline-size: 42rem;
	margin-block-end: 2rem;
}

.km-aid__eyebrow {
	margin: 0 0 0.5rem;
	color: var(--km-accent);
	font-size: 0.875rem;
	font-weight: 700;
}

.km-aid__lede {
	margin: 0;
	color: var(--km-muted);
	font-size: 1.125rem;
}

/* Emergency strip: the one thing on the page that must not need scrolling. */
.km-aid__bar {
	padding-block: 0.75rem;
	background: var(--km-surface);
	border-block-end: 1px solid var(--km-line);
}

.km-aid__barinner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.25rem;
}

.km-aid__sos {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-block-size: 48px;
	padding: 0.5rem 1.4rem;
	border-radius: 999px;
	background: var(--km-alert);
	color: #fff;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.15s;
}

.km-aid__sos:hover {
	background: #a01f25;
}

.km-aid__sos b {
	font-size: 1.3em;
	font-weight: 800;
}

.km-aid__jump,
.km-aid__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.km-aid__jump a,
.km-chip,
.km-pacer__sound {
	display: inline-flex;
	align-items: center;
	min-block-size: 40px;
	padding: 0.35rem 1rem;
	background: var(--km-surface);
	border: 1px solid var(--km-line);
	border-radius: 999px;
	color: var(--km-navy);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.km-aid__jump a:hover,
.km-chip:hover,
.km-pacer__sound:hover {
	border-color: var(--km-navy);
}

.km-chip[aria-pressed="true"],
.km-pacer__sound[aria-pressed="true"] {
	background: var(--km-navy);
	border-color: var(--km-navy);
	color: var(--km-surface);
}

/* Step illustrations. Colours are tokens, so they follow the contrast palette. */
.km-art {
	--km-art-ink: var(--km-navy);
	--km-art-soft: var(--km-navy-tint);
	--km-art-fill: var(--km-surface);

	display: block;
	inline-size: 100%;
	max-inline-size: 7.5rem;
	block-size: auto;
	overflow: visible;
	fill: none;
	stroke: var(--km-art-ink);
	stroke-width: 3.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.km-art .is-soft {
	fill: var(--km-art-soft);
}

.km-art .is-fill {
	fill: var(--km-art-fill);
}

.km-art .is-accent {
	stroke: var(--km-accent-bright);
}

.km-art .is-alert {
	fill: var(--km-art-fill);
	stroke: var(--km-alert);
}

.km-art__num {
	fill: var(--km-art-ink);
	stroke: none;
	font: 800 22px var(--km-font);

	/* "×2" and "30:2" read the same way round in either writing direction. */
	direction: ltr;
	unicode-bidi: isolate;
}

.km-art__tilt {
	transform-origin: 40px 86px;
}

.km-art__spin {
	transform-origin: 60px 60px;
}

.km-art__rise {
	transform-box: fill-box;
	transform-origin: 50% 100%;
}

.km-art__flow path {
	stroke-dasharray: 9 9;
}

/*
 * The drawings move only once tips.js has added .is-animated — the same script
 * that provides the button to stop them (WCAG 2.2.2). The compressions keep
 * the real pace: 110 a minute.
 */
@media (prefers-reduced-motion: no-preference) {
	.is-animated .km-art__ping path {
		animation: km-art-ping 1.6s ease-in-out infinite;
	}

	.is-animated .km-art__ping path:nth-child(2) {
		animation-delay: 0.2s;
	}

	.is-animated .km-art__ping path:nth-child(3) {
		animation-delay: 0.4s;
	}

	.is-animated .km-art__blink {
		animation: km-art-ping 1.2s ease-in-out infinite;
	}

	.is-animated .km-art__push {
		animation: km-art-push 0.2727s ease-in-out infinite alternate;
	}

	.is-animated .km-art__tilt {
		animation: km-art-tilt 1.8s ease-in-out infinite alternate;
	}

	.is-animated .km-art__rise {
		animation: km-art-rise 1.8s ease-in-out infinite alternate;
	}

	.is-animated .km-art__flow path {
		animation: km-art-flow 0.9s linear infinite;
	}

	.is-animated .km-art__spin {
		animation: km-art-spin 9s linear infinite;
	}

	/* Each step settles into place as it scrolls into view. */
	@supports (animation-timeline: view()) {
		.km-flow__card {
			animation: km-art-enter linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 55%;
		}
	}
}

@keyframes km-art-ping {
	0%,
	100% { opacity: 0.2; }
	40% { opacity: 1; }
}

@keyframes km-art-push {
	to { translate: 0 9px; }
}

@keyframes km-art-tilt {
	to { rotate: -24deg; }
}

@keyframes km-art-rise {
	to { scale: 1 1.14; }
}

@keyframes km-art-flow {
	to { stroke-dashoffset: -18; }
}

@keyframes km-art-spin {
	to { rotate: 360deg; }
}

@keyframes km-art-enter {
	from {
		opacity: 0;
		translate: 0 1.75rem;
	}
}

.km-cpr__motion {
	margin-block-end: 1rem;
}

.km-cpr__motion[hidden] {
	display: none;
}

/* MDA's three steps, as one glance before the detail. */
.km-chain {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 0 0 2.5rem;
	padding: 0;
	list-style: none;
	counter-reset: km-chain;
}

.km-chain__item {
	position: relative;
	display: grid;
	justify-items: center;
	align-content: start;
	gap: 0.25rem;
	padding: 1.5rem 1rem 1.25rem;
	background: var(--km-navy);
	border-radius: var(--km-radius-lg);
	color: #fff;
	text-align: center;
	counter-increment: km-chain;
}

.km-chain__item::before {
	content: counter(km-chain);
	position: absolute;
	inset-block-start: 0.75rem;
	inset-inline-start: 0.75rem;
	display: grid;
	place-items: center;
	inline-size: 1.9rem;
	block-size: 1.9rem;
	border-radius: 50%;
	background: var(--km-accent-bright);
	color: #0e2e4e;
	font-weight: 800;
	line-height: 1;
}

.km-chain .km-art {
	--km-art-ink: #fff;
	--km-art-soft: rgb(255 255 255 / 14%);
	--km-art-fill: #0e2e4e;

	max-inline-size: 5.5rem;
}

.km-chain__title {
	font-size: 1.125rem;
	line-height: 1.3;
}

.km-chain__text {
	color: rgb(255 255 255 / 82%);
	font-size: 0.9375rem;
	line-height: 1.5;
}

/* The flow: numbered steps down a line. */
.km-flow {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: km-flow;
}

.km-flow__step {
	position: relative;
	padding-inline-start: 3.75rem;
	counter-increment: km-flow;
}

.km-flow__step::before {
	content: counter(km-flow);
	position: absolute;
	inset-block-start: 1.1rem;
	inset-inline-start: 0;
	z-index: 1;
	display: grid;
	place-items: center;
	inline-size: 2.6rem;
	block-size: 2.6rem;
	border-radius: 50%;
	background: var(--km-navy);
	color: var(--km-surface);
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1;
}

.km-flow__step::after {
	content: "";
	position: absolute;
	inset-block: 3.7rem -1rem;
	inset-inline-start: calc(1.3rem - 1px);
	inline-size: 2px;
	background: var(--km-line);
}

.km-flow__step:last-child::after {
	display: none;
}

.km-flow__card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 7.5rem;
	gap: 1rem 1.5rem;
	align-items: center;
	padding: 1.25rem 1.5rem;
	background: var(--km-surface);
	border: 1px solid var(--km-line);
	border-radius: var(--km-radius-lg);
	box-shadow: var(--km-shadow-sm);
}

.km-flow__art {
	grid-area: 1 / 2;
}

.km-flow__body {
	grid-area: 1 / 1;
}

.km-flow__extra {
	grid-column: 1 / -1;
}

.km-flow__body > :last-child {
	margin-block-end: 0;
}

.km-flow__title {
	margin-block-end: 0.35em;
	font-size: clamp(1.15rem, 0.5vw + 1.05rem, 1.35rem);
}

.km-flow__points {
	padding-inline-start: 1.2em;
}

.km-flow__points li::marker {
	color: var(--km-accent-bright);
}

.km-flow__aside {
	padding: 0.65rem 0.9rem;
	background: var(--km-accent-tint);
	border-inline-start: 4px solid var(--km-accent-bright);
	border-radius: 8px;
	color: var(--km-navy);
	font-weight: 600;
	line-height: 1.5;
}

/* Compression pacer: a beat to press to. */
.km-pacer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	margin-block-end: 1rem;
	padding: 1rem 1.25rem;
	background: var(--km-navy-tint);
	border-radius: var(--km-radius);
}

.km-pacer[hidden] {
	display: none;
}

.km-pacer__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-block-size: 48px;
	padding: 0.5rem 1.4rem;
	background: var(--km-alert);
	border: 0;
	border-radius: 999px;
	color: #fff;
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}

.km-pacer__heart {
	display: grid;
}

.km-pacer__heart .km-icon {
	inline-size: 1.5rem;
	block-size: 1.5rem;
	fill: currentcolor;
	stroke: none;
	transition: scale 0.12s ease-out;
}

.km-pacer.is-beat .km-pacer__heart .km-icon {
	scale: 1.4;
}

.km-pacer__count {
	min-inline-size: 2.5ch;
	color: var(--km-navy);
	font-size: 2.25rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	text-align: center;
	opacity: 0.3;
}

.km-pacer.is-on .km-pacer__count {
	opacity: 1;
}

.km-pacer__sound {
	margin-inline-start: auto;
}

.km-pacer__hint {
	flex-basis: 100%;
	margin: 0;
	color: var(--km-muted);
	font-size: 0.9375rem;
}

/* Adult / child / infant, side by side. */
.km-ages {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.km-ages__item {
	display: grid;
	justify-items: center;
	align-content: start;
	gap: 0.15rem;
	padding: 1rem 0.75rem;
	background: var(--km-surface-alt);
	border: 1px solid var(--km-line);
	border-radius: var(--km-radius);
	font-size: 0.9375rem;
	line-height: 1.45;
	text-align: center;
}

.km-ages .km-art {
	max-inline-size: 4rem;
}

.km-ages__who {
	color: var(--km-navy);
	font-size: 1.125rem;
}

.km-ages__age {
	margin-block-end: 0.4rem;
	color: var(--km-muted);
	font-size: 0.8125rem;
}

/* The defibrillator card. */
.km-aedcard {
	display: grid;
	grid-template-columns: 8rem minmax(0, 1fr);
	gap: 1rem 2rem;
	align-items: center;
	margin-block-start: 2rem;
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--km-navy-tint);
	border-radius: var(--km-radius-lg);
	scroll-margin-block-start: 6rem;
}

.km-aedcard__body > :last-child {
	margin-block-end: 0;
}

.km-aedcard__steps,
.km-tip__block--steps .km-tip__list {
	display: grid;
	gap: 0.5rem;
	padding: 0;
	list-style: none;
	counter-reset: km-step;
}

.km-aedcard__steps li,
.km-tip__block--steps li {
	position: relative;
	padding-inline-start: 2.25rem;
	counter-increment: km-step;
}

.km-aedcard__steps li::before,
.km-tip__block--steps li::before {
	content: counter(km-step);
	position: absolute;
	inset-block-start: 0.15em;
	inset-inline-start: 0;
	display: grid;
	place-items: center;
	inline-size: 1.6rem;
	block-size: 1.6rem;
	border-radius: 50%;
	background: var(--km-navy);
	color: var(--km-surface);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1;
}

/* First-aid cards: search, filter, then native <details>. */
.km-aid__tools {
	display: grid;
	gap: 0.75rem;
	margin-block-end: 0.5rem;
}

.km-aid__tools[hidden] {
	display: none;
}

.km-aid__search {
	position: relative;
	color: var(--km-muted);
}

.km-aid__search .km-icon {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 1rem;
	translate: 0 -50%;
	pointer-events: none;
}

.km-aid__search input {
	inline-size: 100%;
	min-block-size: 52px;
	padding-block: 0.6rem;
	padding-inline: 2.9rem 1rem;
	background: var(--km-surface);
	border: 1px solid var(--km-line);
	border-radius: 999px;
	color: var(--km-ink);
	font: inherit;
}

.km-aid__search input:focus-visible {
	outline: var(--km-focus);
	outline-offset: 1px;
	border-color: var(--km-accent);
}

.km-aid__status {
	margin: 1rem 0 0;
	color: var(--km-muted);
}

.km-aid__status:empty {
	display: none;
}

.km-tipgroup {
	margin-block-start: 2rem;
}

.km-tipgroup[hidden] {
	display: none;
}

.km-tipgroup__title {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-block-end: 0.75rem;
	font-size: 1.125rem;
}

.km-tipgroup__title::after {
	content: "";
	flex: 1;
	block-size: 1px;
	background: var(--km-line);
}

.km-tip {
	margin-block-end: 0.6rem;
	background: var(--km-surface);
	border: 1px solid var(--km-line);
	border-radius: var(--km-radius);
	scroll-margin-block-start: 6rem;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.km-tip[hidden] {
	display: none;
}

.km-tip:hover {
	border-color: var(--km-navy);
}

.km-tip[open] {
	border-color: var(--km-accent-bright);
	box-shadow: var(--km-shadow-sm);
}

.km-tip__summary {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	grid-template-areas:
		"icon title badge chevron"
		"icon lede  badge chevron";
	align-items: center;
	column-gap: 0.9rem;
	padding: 0.85rem 1.1rem;
	border-radius: var(--km-radius);
	list-style: none;
	cursor: pointer;
}

.km-tip__summary::-webkit-details-marker {
	display: none;
}

/* Physical borders: a chevron is the same shape in both writing directions. */
.km-tip__summary::after {
	content: "";
	grid-area: chevron;
	width: 0.6rem;
	height: 0.6rem;
	margin-inline: 0.25rem;
	border: 2px solid var(--km-muted);
	border-top: 0;
	border-left: 0;
	rotate: 45deg;
	translate: 0 -2px;
	transition: rotate 0.2s;
}

.km-tip[open] > .km-tip__summary::after {
	rotate: -135deg;
	translate: 0 2px;
}

.km-tip__icon {
	grid-area: icon;
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: 12px;
	background: var(--km-navy-tint);
	color: var(--km-navy);
}

.km-tip--urgent .km-tip__icon {
	background: var(--km-alert-tint);
	color: var(--km-alert);
}

.km-tip__title {
	grid-area: title;
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.35;
}

.km-tip__lede {
	grid-area: lede;
	color: var(--km-muted);
	font-size: 0.9rem;
	line-height: 1.45;
}

.km-tip__badge {
	grid-area: badge;
	padding: 0.25rem 0.65rem;
	border-radius: 999px;
	background: var(--km-alert);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
}

/* Where the browser can animate to an intrinsic height, the card eases open. */
@supports (interpolate-size: allow-keywords) {
	.km-tip {
		interpolate-size: allow-keywords;
	}

	.km-tip::details-content {
		block-size: 0;
		overflow: clip;
		transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete;
	}

	.km-tip[open]::details-content {
		block-size: auto;
	}
}

.km-tip__body {
	display: grid;
	gap: 1rem;
	padding: 1.1rem;
	border-block-start: 1px solid var(--km-line);
}

.km-tip__body > *,
.km-tip__list {
	margin: 0;
}

.km-tip__label {
	margin: 0 0 0.45rem;
	color: var(--km-navy);
	font-size: 0.9375rem;
	font-weight: 700;
}

.km-tip__block--signs .km-tip__list {
	display: grid;
	gap: 0.25rem;
	padding-inline-start: 1.2em;
}

.km-tip__block--signs li::marker {
	color: var(--km-accent-bright);
}

.km-tip__block--dont {
	padding: 0.85rem 1rem;
	background: var(--km-alert-tint);
	border-radius: 10px;
}

.km-tip__block--dont .km-tip__label {
	color: var(--km-alert);
}

.km-tip__block--dont .km-tip__list {
	display: grid;
	gap: 0.3rem;
	padding: 0;
	list-style: none;
}

.km-tip__block--dont li {
	position: relative;
	padding-inline-start: 1.6rem;
}

.km-tip__block--dont li::before {
	content: "✕";
	position: absolute;
	inset-inline-start: 0.15rem;
	color: var(--km-alert);
	font-weight: 700;
}

.km-tip__call {
	display: flex;
	gap: 0.65rem;
	padding: 0.8rem 1rem;
	border: 1px solid var(--km-alert);
	border-radius: 10px;
	color: var(--km-ink);
	font-weight: 600;
	line-height: 1.55;
}

.km-tip__call .km-icon {
	margin-block-start: 0.15em;
	color: var(--km-alert);
}

.km-tip__note {
	padding: 0.75rem 1rem;
	background: var(--km-surface-alt);
	border-radius: 10px;
	font-size: 0.9375rem;
}

.km-tip__note strong {
	color: var(--km-navy);
}

/* Closing: the course, and the small print. */
.km-aid__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem 2rem;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	background: var(--km-navy);
	border-radius: var(--km-radius-lg);
	color: rgb(255 255 255 / 88%);
}

.km-aid__cta > div {
	flex: 1 1 22rem;
}

.km-aid__cta h2 {
	color: #fff;
	font-size: clamp(1.35rem, 1vw + 1.1rem, 1.75rem);
}

.km-aid__cta p {
	margin: 0;
}

.km-aid__legal {
	max-inline-size: 46rem;
	margin: 1.5rem auto 0;
	text-align: center;
}

@media (max-width: 40rem) {
	.km-aid__sos {
		flex: 1 1 100%;
		justify-content: center;
	}

	.km-chain {
		grid-template-columns: 1fr;
	}

	.km-chain__item {
		grid-template-columns: 4rem minmax(0, 1fr);
		justify-items: start;
		column-gap: 1rem;
		padding: 1rem 1rem 1rem 1.25rem;
		text-align: start;
	}

	.km-chain .km-art {
		grid-row: 1 / 3;
		align-self: center;
	}

	.km-chain__item::before {
		inset-block-start: 0.5rem;
		inset-inline-start: 0.5rem;
		inline-size: 1.5rem;
		block-size: 1.5rem;
		font-size: 0.8125rem;
	}

	/* No room for a rail beside the cards: the number sits on the card's corner. */
	.km-flow__step {
		padding-inline-start: 0;
	}

	.km-flow__step::before {
		inset-block-start: -0.5rem;
		inset-inline-start: -0.4rem;
		inline-size: 2.1rem;
		block-size: 2.1rem;
		font-size: 1rem;
	}

	.km-flow__step::after {
		display: none;
	}

	.km-flow__card {
		grid-template-columns: minmax(0, 1fr) 4.5rem;
		align-items: start;
		gap: 0.75rem 1rem;
		padding: 1.25rem 1.1rem 1.1rem;
	}

	.km-ages {
		grid-template-columns: 1fr;
	}

	.km-ages__item {
		grid-template-columns: 3.25rem minmax(0, 1fr);
		justify-items: start;
		column-gap: 0.9rem;
		text-align: start;
	}

	.km-ages .km-art {
		grid-row: 1 / 5;
		align-self: center;
	}

	.km-ages__age {
		margin-block-end: 0;
	}

	.km-aedcard {
		grid-template-columns: 1fr;
	}

	.km-aedcard__art .km-art {
		max-inline-size: 5.5rem;
	}

	.km-tip__summary {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas:
			"icon title chevron"
			"icon lede  chevron"
			"icon badge chevron";
		column-gap: 0.75rem;
		padding-inline: 0.85rem;
	}

	.km-tip__badge {
		justify-self: start;
		margin-block-start: 0.35rem;
	}
}

/* The components above that paint their own colours, in high contrast. */
html.km-a11y-contrast :is(.km-aid__sos, .km-chain__item, .km-aid__cta, .km-tip__badge, .km-tip__block--dont, .km-pacer) {
	background: #000 !important;
	border: 2px solid #fff;
	color: #fff !important;
}

html.km-a11y-contrast .km-chain .km-art {
	--km-art-fill: #000;
}

html.km-a11y-contrast :is(.km-chip, .km-pacer__sound)[aria-pressed="true"] {
	background: #ffdd33 !important;
	color: #000 !important;
}

html.km-a11y-contrast :is(.km-flow__step, .km-aedcard__steps li, .km-tip__block--steps li)::before {
	background: #ffdd33;
	color: #000;
}


/* ------------------------------------------------- course report gallery */

.km-listing {
	margin-block: var(--km-section);
}

/*
 * Two per row, always — an explicit track count rather than auto-fill, so the
 * columns cannot re-flow into a different width per page and every card in the
 * gallery is the same size. minmax(0, 1fr) lets a long unbroken word shrink
 * its column instead of pushing the grid wider than its container.
 *
 * grid-auto-rows: 1fr makes every row as tall as the tallest card in the grid,
 * so all cards end up identical without capping the title — nothing is clipped
 * and nothing overlaps, however long a Hebrew headline runs.
 */
.km-gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: clamp(1rem, 2.5vw, 1.75rem);
}

/* Two columns below this leave the photo narrower than a phone screen. */
@media (max-width: 48rem) {
	.km-gallery {
		grid-template-columns: minmax(0, 1fr);
	}
}

.km-tile {
	display: grid;
	margin: 0;
	min-inline-size: 0;
}

.km-tile__link {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--km-surface);
	border: 1px solid var(--km-line);
	border-radius: var(--km-radius-lg);
	box-shadow: var(--km-shadow-sm);
	color: inherit;
	text-decoration: none;
	transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}

.km-tile__link:hover {
	border-color: var(--km-accent-bright);
	box-shadow: var(--km-shadow-md);
	transform: translateY(-3px);
}

.km-tile__link:focus-visible {
	outline: var(--km-focus);
	outline-offset: 3px;
}

/*
 * Fixed 4/3 ratio: every card's image occupies exactly the same box, and a
 * phone's own landscape photos fill it edge to edge with nothing to spare.
 *
 * The photo is contained rather than covered, so the whole frame is visible —
 * a portrait shot is no longer cut off at the top and bottom. Whatever the
 * ratio leaves over is filled by a blurred, scaled copy of the same photo
 * (--km-tile-photo, set per tile in km_course_gallery()), which reads as a
 * deliberate backdrop instead of an empty letterbox. Cards with no photo fall
 * back to the flat tint, since the custom property is simply absent.
 */
.km-tile__media {
	position: relative;
	display: block;
	flex: none;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--km-navy-tint);
}

/* scale() past the edges so the blur has pixels to sample and never fades. */
.km-tile__media::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--km-tile-photo, none);
	background-position: center;
	background-size: cover;
	filter: blur(20px) saturate(1.15);
	transform: scale(1.2);
}

.km-tile__media img {
	position: relative;
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
}

.km-tile__placeholder {
	position: relative;
	display: grid;
	place-items: center;
	block-size: 100%;
	background: linear-gradient(135deg, var(--km-navy), var(--km-navy-tint));
	color: #fff;
	opacity: 0.85;
}

/* The frame is much larger now, so the fallback mark scales with it. */
.km-tile__placeholder .km-icon {
	inline-size: clamp(2.5rem, 6vw, 4rem);
	block-size: clamp(2.5rem, 6vw, 4rem);
}

/* Padding grows with the card so the wider frame does not look under-filled. */
.km-tile__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.4rem;
	padding: clamp(1rem, 1.6vw, 1.35rem) clamp(1.15rem, 1.8vw, 1.5rem);
	min-inline-size: 0;
}

.km-tile__date {
	color: var(--km-muted);
	font-size: 0.8125rem;
}

/* Fills the leftover height so "קרא עוד" sits on the card's bottom edge. */
.km-tile__title {
	flex: 1;
	color: var(--km-navy);
	font-size: clamp(1.05rem, 1.5vw, 1.25rem);
	font-weight: 700;
	line-height: 1.35;
	text-wrap: pretty;
	overflow-wrap: anywhere;
}

.km-tile__link:hover .km-tile__title {
	color: var(--km-accent);
}

.km-tile__more {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-block-start: 0.6rem;
	color: var(--km-accent);
	font-size: 0.875rem;
	font-weight: 700;
}

.km-tile__more .km-icon {
	transition: translate 0.2s;
}

.km-tile__link:hover .km-tile__more .km-icon {
	translate: -0.2rem 0;
}

[dir="ltr"] .km-tile__link:hover .km-tile__more .km-icon {
	translate: 0.2rem 0;
}

.km-gallery__more,
.km-loadmore {
	display: flex;
	justify-content: center;
	margin-block: 2.25rem 0;
}

.km-loadmore a[aria-busy="true"] {
	opacity: 0.6;
	pointer-events: none;
}

/* ------------------------------------------------------- course catalogue */

.km-bookingpage > section + section {
	margin-block-start: var(--km-section);
}

.km-courses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: 1rem;
	margin-block: 1.5rem 0;
}

.km-courses__group {
	padding: 1.15rem 1.35rem 1.35rem;
	background: var(--km-surface-alt);
	border: 1px solid var(--km-line);
	border-radius: var(--km-radius-lg);
}

.km-courses__title {
	margin-block: 0 0.75rem;
	font-size: 1.05rem;
}

.km-courses__items {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.km-courses__items li {
	padding: 0.3rem 0.85rem;
	background: var(--km-surface);
	border: 1px solid var(--km-line);
	border-radius: 999px;
	color: var(--km-navy);
	font-size: 0.9375rem;
	font-weight: 600;
}

/* ------------------------------------------------- signed-in header links */

/*
 * Rendered as a second list beside the menu, so it works whether the header is
 * showing an assigned menu or the page-list fallback. Absent entirely for
 * anyone who is not signed in.
 */
.km-menu--manage a {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--km-accent);
}

.km-menu--manage a:hover {
	color: var(--km-navy);
}

@media (min-width: 72.001rem) {
	.km-menu--manage {
		padding-inline-start: 1.25rem;
		border-inline-start: 1px solid var(--km-line);
	}
}

@media (max-width: 72rem) {
	/* In the drawer it follows the menu directly; only the first list needs the gap. */
	.km-menu--manage {
		margin-block-start: 0;
	}
}

/* ------------------------------------------------------- button modifiers */

.km-btn--sm {
	min-block-size: 38px;
	padding: 0.35rem 0.85rem;
	font-size: 0.9375rem;
}

.km-btn--danger {
	color: var(--km-alert);
}

.km-btn--danger:hover {
	border-color: var(--km-alert);
	background: #fdf0f0;
}

/* -------------------------------------------------------------------- login */

.km-login {
	max-inline-size: 28rem;
	margin-block: var(--km-section);
}

.km-login__form {
	padding: clamp(1.5rem, 4vw, 2.25rem);
	border: 1px solid var(--km-line);
	border-radius: var(--km-radius-lg);
	background: var(--km-surface);
	box-shadow: var(--km-shadow-sm);
}

.km-login__remember {
	margin-block: 0 1.25rem;
}

.km-login__remember label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
}

/* The password checklist: each rule turns green, and gains a tick, once met. */
.km-passrules {
	font-size: 0.9375rem;
	color: var(--km-muted);
}

.km-passrules__title {
	margin: 0 0 0.35rem;
	font-weight: 600;
	color: var(--km-navy);
}

.km-passrules ul {
	display: grid;
	gap: 0.3rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.km-passrules li {
	padding: 0.3rem 0.6rem;
	border-radius: 8px;
	transition: background-color 0.15s, color 0.15s;
}

/* The tick carries the state for anyone who cannot tell it by colour. */
.km-passrules li::before {
	content: "○";
	display: inline-block;
	inline-size: 1.4em;
	font-weight: 700;
}

.km-passrules li.is-met {
	background: #edf7ee;
	color: #1b5e20;
	font-weight: 600;
}

.km-passrules li.is-met::before {
	content: "✓";
}

@media (prefers-reduced-motion: reduce) {
	.km-passrules li {
		transition: none;
	}
}

.km-login__help {
	margin-block: 1.25rem 0;
	font-size: 0.9375rem;
}

/* ------------------------------------------------------- report photo grid */

/*
 * The layout a social post uses: one photo fills the width, two sit side by
 * side, three become one tall and two stacked, four make a square, and beyond
 * four the last tile carries the overflow count. The class on the container
 * says which of those five cases applies, so the grid never has to guess.
 */
.km-photos {
	position: relative;
	display: grid;
	gap: 4px;
	margin-block: 2rem;
	border-radius: var(--km-radius);
	overflow: hidden;
}

.km-photos--2,
.km-photos--3,
.km-photos--4,
.km-photos--5 {
	grid-template-columns: 1fr 1fr;
}

.km-photos__item {
	position: relative;
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--km-surface-alt);
}

.km-photos--1 .km-photos__item {
	aspect-ratio: 16 / 10;
}

.km-photos--2 .km-photos__item {
	aspect-ratio: 3 / 4;
}

/* The tall one on the left of a three-photo set takes both rows. */
.km-photos--3 .km-photos__item:first-child {
	grid-row: span 2;
	aspect-ratio: auto;
}

.km-photos__item img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s;
}

.km-photos__item:hover img {
	transform: scale(1.03);
}

.km-photos__item:focus-visible {
	outline: var(--km-focus);
	outline-offset: -3px;
}

.km-photos__item--more::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(15 23 32 / 55%);
}

.km-photos__count {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: grid;
	place-items: center;
	color: #fff;
	font-size: clamp(1.5rem, 4vw, 2.25rem);
	font-weight: 700;
}

/*
 * Photos past the fourth are links with no image: reachable by keyboard and
 * by a crawler, but never requested until the lightbox asks for them.
 */
.km-photos__spare {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --------------------------------------------------------------- lightbox */

.km-lightbox {
	inline-size: 100vw;
	max-inline-size: 100vw;
	block-size: 100dvh;
	max-block-size: 100dvh;
	padding: 0;
	border: 0;
	background: transparent;
}

.km-lightbox[open] {
	display: grid;
	place-items: center;
}

.km-lightbox::backdrop {
	background: rgb(15 23 32 / 88%);
}

.km-lightbox__figure {
	margin: 0;
	padding: clamp(1rem, 4vw, 3rem);
}

.km-lightbox__img {
	display: block;
	max-inline-size: 100%;
	max-block-size: 82dvh;
	margin-inline: auto;
	border-radius: var(--km-radius);
	background: var(--km-surface-alt);
}

.km-lightbox__close,
.km-lightbox__nav {
	position: absolute;
	display: grid;
	place-items: center;
	inline-size: 48px;
	block-size: 48px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgb(255 255 255 / 12%);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.15s;
}

.km-lightbox__close:hover,
.km-lightbox__nav:hover {
	background: rgb(255 255 255 / 26%);
}

.km-lightbox__close:focus-visible,
.km-lightbox__nav:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

.km-lightbox__close {
	inset-block-start: 1rem;
	inset-inline-end: 1rem;
}

.km-lightbox__nav {
	inset-block-start: 50%;
	translate: 0 -50%;
}

.km-lightbox__nav--prev {
	inset-inline-start: 1rem;
}

.km-lightbox__nav--next {
	inset-inline-end: 1rem;
}

/* The arrow points the way the reader is going, in either direction. */
.km-lightbox__nav--prev .km-icon {
	transform: scaleX(-1);
}

[dir="rtl"] .km-lightbox__nav--prev .km-icon {
	transform: none;
}

[dir="rtl"] .km-lightbox__nav--next .km-icon {
	transform: scaleX(-1);
}

.km-lightbox__counter {
	position: absolute;
	inset-block-end: 1rem;
	inset-inline: 0;
	margin: 0;
	text-align: center;
	color: #fff;
	font-size: 0.9375rem;
}

@media (max-width: 30rem) {
	.km-lightbox__nav {
		inset-block-start: auto;
		inset-block-end: 3.25rem;
		translate: none;
	}
}

/* ------------------------------------------------------- terms / legal page */

/*
 * The document is long and read in one go, so the column stays the reading
 * width the rest of the site uses and everything else is tuned for scanning:
 * a jump list at the top, numbered anchors that survive a browser jump, and
 * clause numbers in their own gutter so the prose keeps a straight edge.
 */
.km-legal {
	font-size: 1rem;
}

.km-legal__updated {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.4rem 0.9rem;
	margin-block: 0 1.75rem;
	background: var(--km-surface-alt);
	border: 1px solid var(--km-line);
	border-radius: 999px;
	color: var(--km-muted);
	font-size: 0.875rem;
}

.km-legal__updated .km-icon {
	color: var(--km-accent);
}

/* -- table of contents -- */

.km-legal__toc {
	padding: clamp(1.25rem, 3vw, 1.75rem);
	margin-block-end: 2.5rem;
	background: var(--km-navy-tint);
	border-radius: var(--km-radius-lg);
}

.km-legal__toctitle {
	margin-block: 0 0.85rem;
	font-size: 1.15rem;
}

/*
 * Multi-column rather than a grid: a grid flows 1, 2 across and 3, 4 on the
 * next row, so the eye running down one column reads 1, 3, 5. Columns fill
 * top to bottom, which is the order a numbered list is read in. The inline
 * padding sits on the item, not on the list, so the markers of the second
 * column are not left hanging outside it.
 */
.km-legal__toclist {
	columns: 2 15rem;
	column-gap: 1.75rem;
	margin: 0;
	padding-inline-start: 0;
}

.km-legal__toclist li {
	margin: 0;
	padding-inline-start: 1.6em;
	color: var(--km-muted);
	font-size: 0.9375rem;
	break-inside: avoid;
}

.km-legal__toclist li::marker {
	color: var(--km-navy);
	font-weight: 700;
}

.km-legal__toclist a {
	color: var(--km-navy);
	text-decoration: none;
}

.km-legal__toclist a:hover,
.km-legal__toclist a:focus-visible {
	color: var(--km-accent);
	text-decoration: underline;
}

/* -- sections -- */

.km-legal__section {
	padding-block-start: 1.75rem;
	margin-block-end: 0;
	border-block-start: 1px solid var(--km-line);

	/* Clears the sticky header when a table-of-contents link jumps here. */
	scroll-margin-block-start: 6rem;
}

.km-legal__section:first-of-type {
	border-block-start: 0;
	padding-block-start: 0;
}

.km-legal__title {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin-block: 0 0.9rem;
	font-size: clamp(1.25rem, 0.8vw + 1.1rem, 1.5rem);
}

/*
 * The number is its own LTR box: "12." in an RTL line would otherwise have
 * the full stop reordered to the wrong side of the digits.
 */
.km-legal__num {
	flex: none;
	color: var(--km-accent);
	font-variant-numeric: tabular-nums;
}

.km-legal__lead {
	margin-block: 0 1.1rem;
	color: var(--km-muted);
}

.km-legal__details {
	margin-block: 0 1.25rem;
}

/* -- clauses -- */

.km-legal__clauses {
	margin: 0;
	padding: 0;
	list-style: none;
}

.km-legal__clause {
	display: flex;
	gap: 0.65rem;
	margin-block-end: 0.85rem;
}

.km-legal__cnum {
	flex: none;
	min-inline-size: 2.6rem;
	color: var(--km-navy);
	font-size: 0.9375rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.75;
}

.km-legal__ctext {
	min-inline-size: 0;
}

.km-legal__ctext > p {
	margin: 0;
	text-wrap: pretty;
}

.km-legal__sub {
	margin-block: 0.5rem 0;
	padding-inline-start: 1.15em;
	list-style: none;
}

.km-legal__sub li {
	position: relative;
	margin-block-end: 0.35rem;
	color: var(--km-muted);
	font-size: 0.9375rem;
}

.km-legal__sub li::before {
	position: absolute;
	inset-inline-start: -1.15em;
	content: "";
	inline-size: 0.5rem;
	block-size: 2px;
	margin-block-start: 0.85em;
	background: var(--km-accent-bright);
	border-radius: 2px;
}

/* -- highlighted note -- */

.km-legal__note {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	padding: 0.9rem 1.1rem;
	margin-block: 1.25rem 0;
	background: var(--km-accent-tint);
	border-inline-start: 4px solid var(--km-accent-bright);
	border-radius: var(--km-radius);
	color: var(--km-ink);
	font-size: 0.9375rem;
	font-weight: 600;
}

.km-legal__note .km-icon {
	flex: none;
	margin-block-start: 0.15em;
	color: var(--km-accent);
}

.km-legal__foot {
	padding-block-start: 1.75rem;
	margin-block-end: 1.25rem;
	border-block-start: 1px solid var(--km-line);
}

@media (max-width: 30rem) {
	/*
	 * The gutter narrows on a phone but stays: dropping the number onto its
	 * own line would cost a line of scroll on each of 172 clauses, and the
	 * straight edge down the text is what makes the document scannable.
	 */
	.km-legal__clause {
		gap: 0.5rem;
	}

	.km-legal__cnum {
		min-inline-size: 2.25rem;
		font-size: 0.875rem;
	}

	.km-legal__title {
		gap: 0.4rem;
	}
}

/* --------------------------------------------------- accessibility toolbar */

/* The toolbar is sized in px, not rem: it is the control panel for the text
   size, so it must not grow along with the text it is changing. */

.km-a11y {
	position: fixed;
	inset-block-end: 16px;
	inset-inline-end: 16px;

	/* Above the tint layer, so the panel stays true-colour while greyscale or
	   inverted contrast is on — you have to be able to see the switch in order
	   to turn it back off. */
	z-index: 80;
}

.km-a11y__toggle {
	display: flex;
	align-items: center;
	gap: 7px;
	min-block-size: 44px;
	padding: 0 16px;
	border: 1px solid rgb(255 255 255 / 25%);
	border-radius: 999px;
	background: var(--km-navy);
	color: #fff;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: var(--km-shadow-md);

	/* A double tap on a phone should open the panel, not select the label. */
	user-select: none;
}

.km-a11y__toggle:hover {
	background: #14406b;
}

.km-a11y__toggle .km-icon {
	inline-size: 22px;
	block-size: 22px;
}

/* -- panel -- */

.km-a11y__panel {
	position: absolute;
	inset-block-end: calc(100% + 10px);
	inset-inline-end: 0;
	inline-size: 300px;
	max-inline-size: calc(100vw - 32px);
	padding: 14px;
	border: 1px solid var(--km-line);
	border-radius: var(--km-radius-lg);
	background: var(--km-surface);
	box-shadow: var(--km-shadow-md);
	font-size: 15px;
}

.km-a11y__panel[hidden] {
	display: none;
}

.km-a11y__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-block-end: 12px;
}

.km-a11y__heading {
	margin: 0;
	font-size: 17px;
}

.km-a11y__close {
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: var(--km-surface-alt);
	color: var(--km-navy);
	cursor: pointer;
}

.km-a11y__close:hover {
	background: var(--km-navy-tint);
}

.km-a11y__block + .km-a11y__block {
	margin-block-start: 12px;
}

.km-a11y__label {
	margin: 0 0 6px;
	color: var(--km-muted);
	font-size: 13px;
	font-weight: 700;
}

/* -- text size -- */

.km-a11y__stepper {
	display: grid;
	grid-template-columns: 44px 1fr 44px;
	align-items: center;
	gap: 6px;
	padding: 4px;
	border: 1px solid var(--km-line);
	border-radius: 12px;
	background: var(--km-surface-alt);
}

.km-a11y__step {
	display: grid;
	place-items: center;
	block-size: 44px;
	padding: 0;
	border: 1px solid var(--km-line);
	border-radius: 9px;
	background: var(--km-surface);
	color: var(--km-navy);
	cursor: pointer;
}

.km-a11y__step:hover {
	border-color: var(--km-navy);
}

.km-a11y__reading {
	text-align: center;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* -- display options -- */

.km-a11y__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
}

.km-a11y__opt {
	display: grid;
	justify-items: center;
	align-content: center;
	gap: 4px;
	min-block-size: 72px;
	padding: 8px 4px;
	border: 1px solid var(--km-line);
	border-radius: 12px;
	background: var(--km-surface);
	color: var(--km-navy);
	font: inherit;
	font-size: 12.5px;
	line-height: 1.25;
	text-align: center;
	cursor: pointer;
}

.km-a11y__opt:hover {
	border-color: var(--km-navy);
	background: var(--km-surface-alt);
}

/* Pressed state is border, fill and weight together — never colour alone. */
.km-a11y__opt[aria-pressed="true"] {
	border-color: var(--km-accent);
	background: var(--km-accent-tint);
	color: var(--km-accent);
	font-weight: 700;
}

.km-a11y__opt .km-icon {
	inline-size: 22px;
	block-size: 22px;
}

/* -- reset and statement -- */

.km-a11y__reset {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	inline-size: 100%;
	min-block-size: 44px;
	margin-block-start: 12px;
	border: 1px solid var(--km-line);
	border-radius: 12px;
	background: var(--km-surface-alt);
	color: var(--km-navy);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

.km-a11y__reset:hover {
	border-color: var(--km-navy);
}

.km-a11y__reset .km-icon {
	inline-size: 18px;
	block-size: 18px;
}

.km-a11y__statement {
	display: block;
	margin-block-start: 10px;
	font-size: 13px;
	text-align: center;
}

/* The open mobile drawer shares the toolbar's corner; step out of its way
   rather than float over its last items. */
body.km-scrimmed .km-a11y {
	visibility: hidden;
}

/* The mobile call bar owns the bottom of the screen; sit above it. */
@media (max-width: 48rem) {
	.km-a11y {
		inset-block-end: calc(54px + env(safe-area-inset-bottom) + 12px);
		inset-inline-end: 12px;
	}
}

/* ---------------------------------------------- the adjustments themselves */

/* Text size. Everything in the theme is sized in rem, so moving the root size
   moves the whole page with it — headings, spacing and all. */
html[data-km-text="1"] { font-size: 110%; }
html[data-km-text="2"] { font-size: 125%; }
html[data-km-text="3"] { font-size: 140%; }
html[data-km-text="4"] { font-size: 150%; }

/* Greyscale and inverted contrast. See inc/accessibility.php: filtering an
   ancestor would make it the containing block for every fixed element on the
   page, so a fixed overlay filters its own backdrop instead. */
.km-a11y__tint {
	position: fixed;
	inset: 0;
	z-index: 70;
	display: none;
	pointer-events: none;
}

html.km-a11y-gray .km-a11y__tint {
	display: block;
	backdrop-filter: grayscale(1);
}

html.km-a11y-invert .km-a11y__tint {
	display: block;
	backdrop-filter: invert(1) hue-rotate(180deg);
}

/* Both on: one backdrop-filter, so the two have to be combined here. */
html.km-a11y-gray.km-a11y-invert .km-a11y__tint {
	backdrop-filter: grayscale(1) invert(1) hue-rotate(180deg);
}

/* High contrast: the palette is token-driven, so most of it is one block of
   variables. The rules below are for the components that paint their own
   colours and would otherwise stay light. */
html.km-a11y-contrast {
	--km-ink: #fff;
	--km-muted: #e9e9e9;
	--km-navy: #fff;
	--km-navy-tint: #000;
	--km-accent: #ffdd33;
	--km-accent-bright: #ffdd33;
	--km-accent-tint: #000;
	--km-alert: #ff6b6b;
	--km-surface: #000;
	--km-surface-alt: #000;
	--km-line: #fff;
	--km-shadow-sm: none;
	--km-shadow-md: none;
	--km-focus: 3px solid #ffdd33;
}

html.km-a11y-contrast body,
html.km-a11y-contrast :is(.km-header, .km-footer, .km-footer__bar, .km-emergency, .km-nav, .km-note, section, article, aside, form, dialog) {
	background: #000 !important;
	color: #fff !important;
}

html.km-a11y-contrast :is(h1, h2, h3, h4, p, li, dt, dd, td, th, label, time, figcaption, strong, em) {
	color: #fff !important;
}

html.km-a11y-contrast a {
	color: #ffdd33 !important;
}

html.km-a11y-contrast :is(.km-btn, .km-actionbar__btn, button, input, textarea, select) {
	background: #000 !important;
	color: #ffdd33 !important;
	border: 2px solid #ffdd33 !important;
}

html.km-a11y-contrast .km-a11y__opt[aria-pressed="true"] {
	background: #ffdd33 !important;
	color: #000 !important;
}

html.km-a11y-contrast :is(.km-header, .km-footer__bar) {
	border-block-color: #fff !important;
}

/* Readable font: one token, because body is the only place the theme sets a
   font-family. */
html.km-a11y-font {
	--km-font: Arial, "Segoe UI", "Noto Sans Hebrew", sans-serif;

	letter-spacing: 0.01em;
	word-spacing: 0.05em;
}

html.km-a11y-font :is(p, li, dd) {
	line-height: 1.85;
}

/* Links, made findable without relying on colour. */
html.km-a11y-links :is(main, .km-footer) a:not(.km-btn, .km-actionbar__btn) {
	text-decoration: underline !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 3px;
	font-weight: 700;
}

/* Stop animation — the same shape as the prefers-reduced-motion block, but
   chosen here rather than inherited from the device. */
html.km-a11y-motion {
	scroll-behavior: auto !important;
}

html.km-a11y-motion *,
html.km-a11y-motion *::before,
html.km-a11y-motion *::after {
	animation: none !important;
	transition: none !important;
}

/* Larger pointer. The SVG is inline so it costs no request, and the keyword
   after the comma keeps the cursor sane if it ever fails to parse. */
html.km-a11y-cursor,
html.km-a11y-cursor * {
	cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24"><path d="M5 2.5 19.5 12.4l-7 1-2.7 7.3Z" fill="white" stroke="black" stroke-width="1.4"/></svg>') 4 2, auto !important;
}

html.km-a11y-cursor :is(a, button, [role="button"], summary, label, input, select, textarea),
html.km-a11y-cursor :is(a, button) * {
	cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="white" stroke="black" stroke-width="1.4"/><circle cx="12" cy="12" r="3.4" fill="black"/></svg>') 12 12, pointer !important;
}

/* Reading guide: a band that follows the pointer, so a line can be held onto
   without losing the place. The script creates it only while it is on. */
.km-a11y__guide {
	position: fixed;
	inset-inline: 0;
	z-index: 75;
	block-size: 44px;

	/* Dark rule with a white one beside it: the guide sits above the greyscale
	   and inverted layers, so it has to stay visible on a light page and on a
	   dark one. */
	border-block: 2px solid var(--km-navy);
	box-shadow: inset 0 2px 0 #fff, inset 0 -2px 0 #fff;
	background: rgb(255 221 51 / 16%);
	pointer-events: none;
}

/* ------------------------------------------------------- motion and print */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

@media print {
	.km-header,
	.km-footer,
	.km-actionbar,
	.km-skip,
	.km-form-wrap,
	.km-aid__bar,
	.km-aid__tools,
	.km-pacer,
	.km-cpr__motion,
	.km-aid__cta {
		display: none !important;
	}

	.km-flow__card {
		animation: none;
		break-inside: avoid;
	}

	/* A search or filter on screen must not drop cards from the printout;
	   tips.js opens them all for it. */
	.km-tip[hidden],
	.km-tipgroup[hidden] {
		display: block !important;
	}

	body {
		padding: 0;
		font-size: 12pt;
	}
}