/* =========================================================
   Ombelo — pages.css   (build-guide 08 §2–§6)
   About · Contact · FAQ · 404 · non-product search.
   Loaded on ombelo_is_utility_page() only.
   ========================================================= */

/* ---------- Shared: pastel value card ----------
   About's three values and the FAQ's group headings are the same object at
   two sizes, so the tone modifiers are declared once here. */
.om-vcard {
	padding: 26px 26px 28px;
	background: var(--om-pastel, var(--om-surface));
	border-radius: var(--om-radius);
}
.om-vcard--lav { --om-pastel: var(--om-lav); }
.om-vcard--mint { --om-pastel: var(--om-mint); }
.om-vcard--peach { --om-pastel: var(--om-peach); }
.om-vcard--cream { --om-pastel: var(--om-cream); }
.om-vcard__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 16px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.75);
	color: var(--om-ink);
}
.om-vcard__h {
	font-size: 1.15rem;
	font-weight: 600;
	margin: 0 0 8px;
}
.om-vcard__p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--om-ink-60);
}

/* Search boxes appear on three of these pages and are the same control. */
.om-404__search,
.om-search__form {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 30rem;
}
.om-404__search input[type="search"],
.om-search__form input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 14px 16px 14px 42px;
	border: 1px solid var(--om-line);
	border-radius: 14px;
	background: var(--om-white);
	font-family: var(--om-body);
	font-size: 0.98rem;
	color: var(--om-ink);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.om-404__search input[type="search"]:focus,
.om-search__form input[type="search"]:focus {
	outline: none;
	border-color: var(--om-indigo);
	box-shadow: 0 0 0 3px var(--om-indigo-wash);
}
.om-404__search-ico,
.om-search__ico {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	color: var(--om-ink-40);
	pointer-events: none;
}
.om-404__search .om-btn,
.om-search__form .om-btn {
	flex: none;
	padding: 14px 22px;
}

/* =========================================================
   About — §2
   ========================================================= */
.om-about__hero {
	padding-block: 56px 64px;
}
.om-about__hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 220px;
	align-items: center;
	gap: 48px;
}
.om-about__h {
	font-size: clamp(2.1rem, 4.4vw, 3.2rem);
	font-weight: 600;
	max-width: 18ch;
	margin: 0 0 20px;
}
.om-about__p {
	max-width: 64ch;
	margin: 0 0 16px;
	font-size: 1.06rem;
	line-height: 1.7;
	color: var(--om-ink-60);
}
.om-about__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 28px 0 0;
}
/* The scooped-O mark stands in for the team photo the guide rules out. */
.om-about__mark {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	background: var(--om-indigo-wash);
	border-radius: 50%;
}
/* Drawn rather than dropped in as logo-mark.png: that file carries a white
   background, which reads as a stray square sitting on the wash circle. Same
   construction as .om-auth__mark, sized for 220px instead of 42px. */
.om-about__o {
	position: relative;
	display: block;
	width: 96px;
	height: 96px;
	border: 17px solid var(--om-indigo);
	border-radius: 50%;
}
.om-about__o::after {
	content: "";
	position: absolute;
	right: -25px;
	bottom: -25px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--om-indigo-wash);
}

.om-about__sells {
	padding-block: 64px;
	background: var(--om-surface);
	--om-behind: var(--om-surface);
	border-block: 1px solid var(--om-line);
}
.om-about__h2 {
	font-size: clamp(1.6rem, 2.8vw, 2.15rem);
	font-weight: 600;
	margin: 0 0 8px;
}
.om-about__lede {
	max-width: 56ch;
	margin: 0 0 32px;
	color: var(--om-ink-60);
}
.om-about__chips {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}
.om-about__chip {
	display: grid;
	align-content: start;
	gap: 6px;
	padding: 20px 22px 22px;
	background: var(--om-pastel, var(--om-white));
	border-radius: var(--om-radius);
	text-decoration: none;
	color: var(--om-ink);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.om-about__chip:hover {
	transform: translateY(-3px);
	box-shadow: var(--om-shadow-lift);
}
.om-about__chip-ext {
	font-family: var(--om-mono);
	font-size: 0.76rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--om-indigo-deep);
}
.om-about__chip-name {
	font-family: var(--om-display);
	font-size: 1.06rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}
.om-about__chip-desc {
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--om-ink-60);
}

.om-about__values {
	padding-block: 64px;
}
.om-about__vgrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}
.om-about__extra {
	padding-bottom: 32px;
	max-width: 68ch;
	color: var(--om-ink-60);
}

.om-about__end {
	padding-bottom: 72px;
}
.om-about__endcard {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px;
	padding: 34px 38px;
	background: var(--om-ink);
	color: var(--om-canvas);
	border-radius: var(--om-radius);
}
.om-about__endcard h2 {
	margin: 0 0 6px;
	font-size: clamp(1.4rem, 2.4vw, 1.8rem);
	font-weight: 600;
}
.om-about__endcard p {
	margin: 0;
	max-width: 52ch;
	color: rgba(250, 249, 247, 0.7);
}
.om-about__endcard .om-btn--ink {
	background: var(--om-white);
	color: var(--om-ink);
}
.om-about__endcard .om-btn--ink:hover {
	background: var(--om-indigo);
	color: var(--om-white);
}
/* The strip is a full-bleed band; the wrapper must not leave canvas under it. */
.om-about .om-value {
	margin-top: 0;
}

/* =========================================================
   Contact — §3
   ========================================================= */
.om-contact {
	padding-top: 48px;
}
.om-contact__head,
.om-faq__head,
.om-search__head {
	margin-bottom: 32px;
}
.om-contact__h,
.om-faq__h {
	font-size: clamp(2rem, 3.8vw, 2.8rem);
	font-weight: 600;
	max-width: 20ch;
	margin: 0 0 10px;
}
.om-contact__sub,
.om-faq__sub {
	max-width: 62ch;
	margin: 0;
	font-size: 1.03rem;
	color: var(--om-ink-60);
}
.om-contact__grid {
	display: grid;
	grid-template-columns: 340px minmax(0, 1fr);
	align-items: start;
	gap: 28px;
	padding-bottom: 72px;
}
.om-contact__side {
	display: grid;
	gap: 16px;
}
.om-promise {
	padding: 26px;
	background: var(--om-mint);
	border-radius: var(--om-radius);
}
.om-promise__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 14px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.75);
	color: #1f6b52;
}
.om-promise__h {
	margin: 0 0 8px;
	font-size: 1.2rem;
	font-weight: 600;
}
.om-promise__p {
	margin: 0 0 16px;
	font-size: 0.94rem;
	line-height: 1.6;
	color: var(--om-ink-60);
}
.om-promise__chip {
	margin: 0;
}
.om-promise__chip .om-pill--mint {
	background: rgba(255, 255, 255, 0.8);
}
.om-contact__mail {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 20px;
	background: var(--om-white);
	border: 1px solid var(--om-line);
	border-radius: var(--om-radius);
	text-decoration: none;
	color: var(--om-ink);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.om-contact__mail:hover {
	border-color: transparent;
	box-shadow: var(--om-shadow);
}
.om-contact__mail-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--om-indigo-wash);
	color: var(--om-indigo-deep);
}
.om-contact__mail-lab {
	display: block;
	font-size: 0.8rem;
	color: var(--om-ink-40);
}
.om-contact__mail-addr {
	display: block;
	font-weight: 600;
	font-size: 0.95rem;
	word-break: break-all;
}
.om-contact__faq {
	padding: 24px;
	background: var(--om-lav);
	border-radius: var(--om-radius);
}
.om-contact__faq-h {
	margin: 0 0 6px;
	font-size: 1.1rem;
	font-weight: 600;
}
.om-contact__faq p {
	margin: 0 0 14px;
	font-size: 0.92rem;
	color: var(--om-ink-60);
}
.om-contact__faq ul {
	display: grid;
	gap: 8px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}
.om-contact__faq li a {
	font-size: 0.93rem;
	font-weight: 500;
	color: var(--om-ink);
	text-decoration: none;
	border-bottom: 1px solid rgba(23, 22, 28, 0.18);
}
.om-contact__faq li a:hover {
	color: var(--om-indigo-deep);
	border-color: currentColor;
}
.om-contact__faq .om-btn--ghost {
	background: rgba(255, 255, 255, 0.6);
	border-color: transparent;
}

.om-contact__panel {
	padding: 32px;
	background: var(--om-white);
	border: 1px solid var(--om-line);
	border-radius: var(--om-radius);
	box-shadow: var(--om-shadow);
}
.om-cform__h {
	margin: 0 0 22px;
	font-size: 1.3rem;
	font-weight: 600;
}
.om-cform__opt {
	font-weight: 400;
	color: var(--om-ink-40);
}
/* Honeypot: out of sight, out of the a11y tree, out of the tab order — but
   still a real, fillable input, which is the whole point. */
.om-cform__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.om-cform__err {
	margin: 18px 0 0;
	padding: 12px 16px;
	background: #fdf2f4;
	border: 1px solid #f3ccd6;
	border-radius: var(--om-radius-sm);
	font-size: 0.92rem;
	color: #b3244a;
}
.om-cform__err[hidden] {
	display: none;
}
.om-cform__legal {
	font-size: 0.85rem;
	color: var(--om-ink-40);
}
.om-cform__go[aria-busy="true"] {
	opacity: 0.6;
	pointer-events: none;
}
.om-cform__done {
	display: grid;
	justify-items: start;
	gap: 4px;
}
.om-cform__done[hidden] {
	display: none;
}
.om-cform__done-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 10px;
	border-radius: 50%;
	background: var(--om-mint);
	color: #1f6b52;
}
.om-cform__done h2 {
	margin: 0;
	font-size: 1.35rem;
	font-weight: 600;
	max-width: 22ch;
}
.om-cform__done p {
	margin: 0;
	max-width: 52ch;
	color: var(--om-ink-60);
}
.om-cform__done .om-btn {
	margin-top: 18px;
}

/* ---------- Contact form fields ----------
   Same skin as the account and checkout forms; those stylesheets never load
   here, so the rules are restated rather than shared. */
.om-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 16px;
}
.om-form__grid > .form-row {
	grid-column: 1 / -1;
	margin: 0;
	padding: 0;
}
.om-form__grid > .form-row-first {
	grid-column: 1 / 2;
}
.om-form__grid > .form-row-last {
	grid-column: 2 / 3;
}
.om-form label {
	display: block;
	margin: 0 0 6px;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--om-ink-60);
}
.om-form .required {
	color: var(--om-indigo);
	border: 0;
	text-decoration: none;
}
.om-form .input-text,
.om-form select,
.om-form textarea {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid var(--om-line);
	border-radius: 12px;
	background: var(--om-canvas);
	font-family: var(--om-body);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--om-ink);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.om-form textarea {
	resize: vertical;
}
.om-form .input-text:focus,
.om-form select:focus,
.om-form textarea:focus {
	outline: none;
	background: var(--om-white);
	border-color: var(--om-indigo);
	box-shadow: 0 0 0 3px var(--om-indigo-wash);
}
/* Marked by the AJAX handler's reply, not by the browser. */
.om-form .input-text.is-invalid,
.om-form textarea.is-invalid {
	border-color: #d4405f;
	background: #fdf2f4;
}
.om-form__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin: 24px 0 0;
}

/* =========================================================
   FAQ — §4
   ========================================================= */
.om-faq {
	padding-block: 48px 80px;
}
.om-faq__jump {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 44px;
}
.om-faq__jump-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 16px 18px;
	background: var(--om-pastel, var(--om-surface));
	border-radius: var(--om-radius-sm);
	font-family: var(--om-display);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--om-ink);
	text-decoration: none;
	transition: transform 0.15s ease;
}
.om-faq__jump-item:hover {
	transform: translateY(-2px);
}
.om-faq__jump-item span {
	font-family: var(--om-mono);
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--om-ink-60);
}
.om-faq__group {
	margin-bottom: 40px;
	/* Anchor jumps must clear the sticky header. */
	scroll-margin-top: 96px;
}
.om-faq__group-h {
	display: inline-block;
	margin: 0 0 16px;
	padding: 8px 18px;
	background: var(--om-pastel, var(--om-surface));
	border-radius: 999px;
	font-size: 1.05rem;
	font-weight: 600;
}
.om-acc {
	display: grid;
	gap: 10px;
}
.om-acc__item {
	background: var(--om-white);
	border: 1px solid var(--om-line);
	border-radius: var(--om-radius-sm);
	overflow: hidden;
}
.om-acc__item[open] {
	border-color: transparent;
	box-shadow: var(--om-shadow);
}
.om-acc__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 18px 22px;
	cursor: pointer;
	font-family: var(--om-display);
	font-size: 1.02rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	list-style: none;
}
/* Safari draws its own disclosure triangle unless this is switched off. */
.om-acc__q::-webkit-details-marker {
	display: none;
}
.om-acc__q:hover {
	color: var(--om-indigo-deep);
}
.om-acc__q:focus-visible {
	outline: 2px solid var(--om-indigo);
	outline-offset: -2px;
}
/* A plus that becomes a minus — two bars, one of which rotates away. */
.om-acc__mark {
	position: relative;
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--om-indigo-wash);
}
.om-acc__mark::before,
.om-acc__mark::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 10px;
	height: 2px;
	margin: -1px 0 0 -5px;
	border-radius: 1px;
	background: var(--om-indigo-deep);
	transition: transform 0.2s ease;
}
.om-acc__mark::after {
	transform: rotate(90deg);
}
.om-acc__item[open] .om-acc__mark::after {
	transform: rotate(0deg);
}
.om-acc__a {
	padding: 0 22px 20px;
}
.om-acc__a p {
	max-width: 76ch;
	margin: 0;
	line-height: 1.7;
	color: var(--om-ink-60);
}
.om-faq__extra {
	margin-bottom: 40px;
	max-width: 68ch;
	color: var(--om-ink-60);
}
.om-faq__end {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px;
	padding: 30px 34px;
	background: var(--om-indigo-wash);
	border-radius: var(--om-radius);
}
.om-faq__end h2 {
	margin: 0 0 4px;
	font-size: 1.4rem;
	font-weight: 600;
}
.om-faq__end p {
	margin: 0;
	color: var(--om-ink-60);
}

/* =========================================================
   404 — §5
   ========================================================= */
.om-404 {
	padding-block: 48px 80px;
}
.om-404__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	align-items: center;
	gap: 48px;
	margin-bottom: 64px;
}
.om-404__code {
	font-family: var(--om-mono);
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--om-indigo-deep);
	margin: 0 0 14px;
}
.om-404__h {
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	font-weight: 600;
	margin: 0 0 14px;
}
.om-404__sub {
	max-width: 54ch;
	margin: 0 0 26px;
	font-size: 1.03rem;
	color: var(--om-ink-60);
}
.om-404__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 20px 0 0;
	font-size: 0.92rem;
	font-weight: 600;
}
.om-404__links a {
	color: var(--om-indigo-deep);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
.om-404__links a:hover {
	border-color: currentColor;
}

/* The torn file card: a clipped corner on the card, and a folded triangle
   sitting in the notch it leaves behind. Pure CSS, no image request. */
.om-404__art {
	display: grid;
	place-items: center;
}
.om-404__file {
	position: relative;
	width: 100%;
	max-width: 236px;
	aspect-ratio: 3 / 4;
	padding: 28px 26px;
	background: var(--om-white);
	border-radius: var(--om-radius) 0 var(--om-radius) var(--om-radius);
	box-shadow: var(--om-shadow-lift);
	clip-path: polygon(0 0, calc(100% - 54px) 0, 100% 54px, 100% 100%, 0 100%);
	transform: rotate(-3deg);
}
.om-404__fold {
	position: absolute;
	right: 0;
	top: 0;
	width: 54px;
	height: 54px;
	background: var(--om-lav);
	clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.om-404__ext {
	display: inline-block;
	font-family: var(--om-mono);
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--om-indigo-deep);
	background: var(--om-indigo-wash);
	border-radius: 8px;
	padding: 5px 12px;
}
.om-404__lines {
	display: grid;
	gap: 12px;
	margin-top: 26px;
}
.om-404__lines i {
	display: block;
	height: 9px;
	border-radius: 5px;
	background: var(--om-surface);
}
.om-404__lines i:nth-child(2) {
	width: 80%;
}
.om-404__lines i:nth-child(3) {
	width: 55%;
}

.om-404__rail,
.om-search__rail {
	margin-bottom: 56px;
}
.om-404__h2,
.om-search__h2 {
	font-size: 1.3rem;
	font-weight: 600;
	margin: 0 0 20px;
}

/* =========================================================
   Search — §6
   ========================================================= */
.om-search {
	padding-block: 48px 80px;
}
.om-search__h {
	font-size: clamp(1.9rem, 3.6vw, 2.6rem);
	font-weight: 600;
	margin: 0 0 8px;
	/* A pasted query can be one very long word. */
	overflow-wrap: anywhere;
}
.om-search__sub {
	margin: 0 0 22px;
	color: var(--om-ink-60);
}
.om-results {
	display: grid;
	gap: 12px;
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
}
.om-results__link {
	display: grid;
	gap: 4px;
	padding: 20px 24px;
	background: var(--om-white);
	border: 1px solid var(--om-line);
	border-radius: var(--om-radius-sm);
	text-decoration: none;
	color: var(--om-ink);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.om-results__link:hover {
	border-color: transparent;
	box-shadow: var(--om-shadow);
}
.om-results__kind {
	font-family: var(--om-mono);
	font-size: 0.72rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--om-ink-40);
}
.om-results__title {
	font-family: var(--om-display);
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}
.om-results__link:hover .om-results__title {
	color: var(--om-indigo-deep);
}
.om-results__excerpt {
	font-size: 0.94rem;
	line-height: 1.6;
	color: var(--om-ink-60);
}
.om-pager {
	margin-bottom: 48px;
}
.om-pager .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.om-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding-inline: 14px;
	border: 1px solid var(--om-line);
	border-radius: 12px;
	background: var(--om-white);
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--om-ink);
	text-decoration: none;
}
.om-pager .page-numbers:hover {
	border-color: var(--om-ink);
}
.om-pager .page-numbers.current {
	background: var(--om-indigo);
	border-color: var(--om-indigo);
	color: var(--om-white);
}
.om-pager .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	color: var(--om-ink-40);
}
.om-search .om-empty--tile,
.om-404 .om-empty--tile {
	margin-bottom: 56px;
	background: var(--om-white);
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1000px) {
	.om-about__hero-grid {
		grid-template-columns: minmax(0, 1fr) 170px;
		gap: 32px;
	}
	.om-about__chips {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.om-about__vgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.om-contact__grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.om-faq__jump {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.om-404__top {
		grid-template-columns: minmax(0, 1fr) 220px;
		gap: 32px;
	}
}

@media (max-width: 760px) {
	.om-about__hero {
		padding-block: 36px 44px;
	}
	/* The mark leads on mobile, where it is decoration rather than balance. */
	.om-about__hero-grid {
		grid-template-columns: minmax(0, 1fr);
		justify-items: start;
		gap: 28px;
	}
	.om-about__mark {
		order: -1;
		width: 108px;
	}
	.om-about__o {
		width: 46px;
		height: 46px;
		border-width: 9px;
	}
	.om-about__o::after {
		right: -13px;
		bottom: -13px;
		width: 26px;
		height: 26px;
	}
	.om-about__vgrid {
		grid-template-columns: minmax(0, 1fr);
	}
	.om-about__endcard {
		padding: 26px;
	}
	.om-404__top {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
		margin-bottom: 48px;
	}
	.om-404__art {
		justify-items: start;
	}
	.om-404__file {
		max-width: 190px;
	}
	.om-contact__panel {
		padding: 22px;
	}
	.om-form__grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.om-form__grid > .form-row-first,
	.om-form__grid > .form-row-last {
		grid-column: 1 / -1;
	}
	.om-form__actions .om-btn {
		width: 100%;
	}
	.om-faq__end,
	.om-about__endcard {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 560px) {
	.om-about__chips {
		grid-template-columns: minmax(0, 1fr);
	}
	.om-faq__jump {
		grid-template-columns: minmax(0, 1fr);
	}
	.om-acc__q {
		padding: 16px 18px;
		font-size: 0.98rem;
	}
	.om-acc__a {
		padding: 0 18px 18px;
	}
	.om-404__search,
	.om-search__form {
		flex-wrap: wrap;
	}
	.om-404__search input[type="search"],
	.om-search__form input[type="search"] {
		flex-basis: 100%;
	}
	.om-404__search .om-btn,
	.om-search__form .om-btn {
		width: 100%;
	}
	/* The button drops onto its own row here, so the form is twice as tall and
	   the icon's top:50% lands in the gap between the two — a stray magnifier
	   floating under the field. Pin it to the input's first text line instead:
	   14px is the input's own padding-top, so this tracks it. */
	.om-404__search-ico,
	.om-search__ico {
		top: 14px;
		transform: none;
	}
	.om-404 .om-products,
	.om-search .om-products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}
}