/* =============================================================================
   The Platform pages (pages/platform.mjs).

   Page-level pieces on top of assets/site.css, built only from its tokens and
   classes. Every class here starts with pm-. The mockups follow site.css §23:
   pictures of the product inside .mock (role="img"), container queries on the
   .mock box, made-up sample data, no captions.

   Contents
    1  Layout helpers                 5  Forms, uploads, signatures, submissions
    2  The /platform hero diagram     6  Records, data checks
    3  Small mockup parts             7  AI, MCP
    4  Storage, PDFs, sign-in         8  Email, certificates
                                     10  Added after the layout QA
                                     11  Story line, steps, logo wall
   ========================================================================== */

/* 1 ------------------------------------------------------- Layout helpers */
.pm-hero .hero-visual > .mock-figure,
.pm-hero .hero-visual > .mock { max-width: 40rem; margin-inline: auto; }
.pm-links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin-top: 1.25rem; }
.pm-more { margin-top: 1.5rem; font-size: 0.9375rem; color: var(--c-muted); }

/* Feature cards with a short checklist (capCards): the link sits at the bottom. */
.pm-caps > .feature { height: 100%; }
.pm-caps-body { display: flex; flex-direction: column; flex: 1; }
.pm-caps-list { margin-top: 1rem; }
.pm-caps-body > .link-arrow { margin-top: auto; padding-top: 1.25rem; }

/* Two cards side by side (stacked on phones). */
.pm-two { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }

.pm-note-card {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: 1.5rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-xl);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
}
.pm-note-card--tall { height: 100%; }
.pm-note-card > div { min-width: 0; }
.pm-note-card h2, .pm-note-card h3 { margin-bottom: 0.5rem; color: var(--ink); }
.pm-note-card p { font-size: 0.9375rem; line-height: 1.6; color: var(--muted); }
.pm-note-card p + p { margin-top: 0.75rem; }

/* A stat in one column (records: "Keep the tools your team knows"). */

.pm-stats-col { grid-template-columns: minmax(0, 1fr); }
.pm-stats-col .stat-label { max-width: 26rem; }

/* Two pictures, one overlapping the other's corner (records and documents heroes). */
.pm-duo { position: relative; }
.pm-duo-front { position: relative; width: 88%; margin: -1.5rem 0 0 auto; }
.pm-frame--pdf { max-width: 22rem; margin-inline: auto; }

/* The sign-in page with an "Open" confirmation under it. */
.pm-pair { max-width: 22rem; margin-inline: auto; }
.pm-pair-note { position: relative; display: flex; justify-content: center; margin-top: -0.75rem; }
.pm-toast { max-width: 100%; }

/* Dashboards for each reader. */
.pm-dash > div { min-width: 0; }
.pm-dash-label { margin-top: 0.75rem; text-align: center; font-family: var(--font-display); font-size: 0.9375rem; font-weight: 500; color: var(--ink); }

@media (min-width: 40rem) {
	.pm-duo { padding: 0 3rem 5.5rem 0; }
	.pm-duo-front { position: absolute; right: 0; bottom: 0; width: min(58%, 19rem); margin: 0; }
	.pm-duo--docs .pm-duo-front { width: min(44%, 13.5rem); }
}
@media (min-width: 48rem) {
	.pm-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
}

/* 2 ------------------------------------------- The /platform hero diagram */
.pm-iso-wrap { max-width: 36rem; margin-inline: auto; }
.pm-iso { display: block; width: 100%; height: auto; overflow: visible; }
.pm-iso text { font-family: var(--font); }
.pm-iso-face { font-size: 11.5px; font-weight: 600; letter-spacing: 1.3px; fill: #0F172A; }
.pm-iso-tag text { font-size: 14px; font-weight: 600; fill: #0F172A; }
.pm-iso-flow path { stroke-dasharray: 7 7; animation: pm-flow 1.4s linear infinite; }
/* With mockups.js: the blocks drop onto the base in turn, the tags follow, an order travels the
   line, and a block (with its tag) rises under the pointer or a tap. */
.pm-iso [data-b] { cursor: pointer; transition: transform 0.35s var(--ease-out); }
.pm-iso [data-b].is-up { transform: translateY(-10px); }
.mx-iso .pm-iso-block { animation: pm-drop 0.8s cubic-bezier(0.34, 1.3, 0.5, 1) backwards; animation-delay: calc(var(--i, 0) * 0.14s + 0.2s); }
@keyframes pm-drop { from { opacity: 0; transform: translateY(-46px); } }
.mx-iso .pm-iso-tag { animation: pm-tag 0.45s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 0.08s + 1s); }
@keyframes pm-tag { from { opacity: 0; transform: translateY(-8px); } }
.mx-iso .pm-iso-flow { animation: pm-fade 0.6s ease 1.45s backwards; }
@keyframes pm-fade { from { opacity: 0; } }
.pm-iso-dot { fill: #FF7A00; stroke: #FFFFFF; stroke-width: 2; }
@keyframes pm-flow { to { stroke-dashoffset: -14; } }

/* 3 --------------------------------------------------- Small mockup parts */
.mock .pm-btn-xs { gap: 0.25rem; height: 1.625rem; padding: 0 0.5rem; font-size: 0.6875rem; }
.mock .pm-btn-xs svg { width: 0.75rem; height: 0.75rem; }
.mock .pm-pad { margin-top: 0.875rem; padding-inline: 1rem; }
.mock .pm-pad-b { padding-bottom: 1rem; }
.pm-inline { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.6875rem; font-weight: 600; color: var(--text); white-space: nowrap; }
.pm-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-top: 1px solid var(--line); background: #FAFBFC; }
.pm-foot--split { justify-content: space-between; }
.pm-foot .mock-sub { display: inline-flex; align-items: center; gap: 0.375rem; }
.pm-foot .mock-sub svg { flex: none; width: 0.875rem; height: 0.875rem; color: var(--orange-ink); }
.pm-mask { min-width: 0; overflow: hidden; font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.04em; color: var(--muted); white-space: nowrap; }

.pm-count { display: inline-grid; place-items: center; min-width: 1.375rem; height: 1.375rem; padding: 0 0.3125rem; border-radius: 0.375rem; background: var(--danger-soft); color: var(--danger); font-size: 0.6875rem; font-weight: 700; }

.pm-checks { display: grid; gap: 0.4375rem; padding: 0.875rem 1rem; }
.pm-checks li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; line-height: 1.35; color: var(--ink); }
.pm-fields { display: grid; gap: 0.5rem; padding: 0.875rem 1rem 0; }
.pm-fields > div { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-width: 0; }
.pm-fields dt { font-size: 0.6875rem; color: var(--muted); white-space: nowrap; }
.pm-fields dd { display: flex; align-items: center; justify-content: flex-end; gap: 0.375rem; min-width: 0; font-size: 0.75rem; font-weight: 600; color: var(--ink); text-align: right; }
.pm-fields--2 > div { display: grid; justify-content: stretch; gap: 0.125rem; }
.pm-fields--2 dd { justify-content: flex-start; text-align: left; }
@container (min-width: 26rem) {
	.pm-fields--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
}

/* 4 ------------------------------------------- Storage, PDFs, sign-in */
/* PDF page */
.pm-pdf { position: relative; max-width: 22rem; margin-inline: auto; padding: 0 0.75rem 0.75rem 0; }
.pm-pdf-page {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	aspect-ratio: 8.5 / 11;
	padding: 8% 8% 6%;
	border: 1px solid rgba(15, 23, 42, 0.1);
	border-radius: 0.375rem;
	background: #FFFFFF;
	box-shadow: var(--shadow-xl);
	font-size: 0.625rem;
	line-height: 1.35;
	color: var(--text);
}
.pm-pdf-head { display: flex; align-items: center; gap: 0.5rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--ink); }
.pm-pdf-head b { overflow: hidden; font-family: var(--font-display); font-size: 0.75rem; font-weight: 600; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
.pm-pdf-head .m-min0 > span { font-size: 0.5625rem; color: var(--muted); }
.pm-pdf-logo { display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 0.25rem; background: var(--ink); color: #FFFFFF; font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.02em; }
.pm-pdf-ref { margin-left: auto; font-size: 0.5625rem; color: var(--muted); white-space: nowrap; }
.pm-pdf-h { margin-top: 0.125rem; font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.pm-pdf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.375rem 0.5rem; }
.pm-pdf-field { display: grid; gap: 0.0625rem; min-width: 0; padding: 0.25rem 0.375rem; border: 1px solid var(--line); border-radius: 0.1875rem; }
.pm-pdf-field span { font-size: 0.5rem; color: var(--muted); }
.pm-pdf-field b { overflow: hidden; font-size: 0.625rem; font-weight: 600; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
.pm-pdf-lines { display: grid; gap: 0.3rem; }
.pm-pdf-lines i { display: block; width: 100%; height: 0.3rem; border-radius: 1px; background: var(--line); }
.pm-pdf-sign { display: grid; justify-items: start; gap: 0.125rem; margin-top: auto; padding-top: 0.25rem; }
.pm-pdf-sign svg { width: 5.5rem; height: auto; }
.pm-pdf-sign span { min-width: 8rem; padding-top: 0.125rem; border-top: 1px solid var(--line-strong); font-size: 0.5rem; color: var(--muted); }
.pm-pdf-foot { display: flex; justify-content: space-between; gap: 0.5rem; padding-top: 0.25rem; border-top: 1px solid var(--line-soft); font-size: 0.5rem; color: var(--muted); }
.pm-pdf-badge { position: absolute; right: 0; bottom: 2rem; padding: 0.25rem 0.5rem; border-radius: 0.375rem; background: var(--danger); color: #FFFFFF; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; box-shadow: var(--shadow); }
.pm-pdf--compact { max-width: 13rem; }
.pm-pdf--compact .pm-pdf-page { gap: 0.45rem; aspect-ratio: 8.5 / 10; box-shadow: var(--shadow-lg); }
.pm-pdf--compact .pm-pdf-badge { bottom: 1.25rem; }

/* White-label sign-in: the client's own color, never OLODESK's. */
.pm-signin { display: grid; gap: 0.875rem; max-width: 20rem; margin-inline: auto; padding: 1.5rem 1.25rem; }
.pm-signin-brand { display: flex; align-items: center; gap: 0.625rem; min-width: 0; }
.pm-signin-logo { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 0.625rem; background: #0E7490; color: #FFFFFF; font-family: var(--font-display); font-size: 0.8125rem; font-weight: 600; }
.pm-signin-name { font-family: var(--font-display); font-size: 1rem; font-weight: 600; line-height: 1.25; color: var(--ink); }
.pm-signin-title { font-size: 0.8125rem; color: var(--muted); }
.pm-signin-fields { display: grid; gap: 0.625rem; }
.pm-muted-input { color: var(--muted); font-style: italic; }
.pm-signin-btn { display: flex; align-items: center; justify-content: center; height: 2.125rem; border-radius: 0.4375rem; background: #0E7490; color: #FFFFFF; font-family: var(--font-display); font-size: 0.8125rem; font-weight: 500; }
.pm-signin-foot { text-align: center; font-size: 0.75rem; color: #0E7490; }
.pm-signin--compact { gap: 0.625rem; max-width: 16rem; padding: 1rem; }
.pm-signin--compact .pm-signin-title { display: none; }

/* 5 --------------------------- Forms, uploads, signatures, submissions */
.pm-form-body { display: grid; grid-template-columns: minmax(0, 1fr); }
.pm-form-steps { display: none; }
.pm-form-steps li { display: flex; align-items: center; gap: 0.4375rem; padding: 0.3125rem 0.5rem; border-radius: 0.4375rem; font-size: 0.71875rem; color: var(--muted); white-space: nowrap; }
.pm-form-steps li > svg, .pm-form-steps li > span { flex: none; width: 0.875rem; height: 0.875rem; }
.pm-form-steps li > span { border: 1.5px solid var(--line-strong); border-radius: 50%; }
.pm-form-steps li.is-done { color: var(--text); }
.pm-form-steps li.is-done > svg { color: var(--success); stroke-width: 2.5; }
.pm-form-steps li.is-current { background: var(--orange-soft); color: var(--orange-ink-deep); font-weight: 600; }
.pm-form-steps li.is-current > span { border-color: var(--orange); background: var(--orange); }
.pm-form-cond { padding: 0.625rem 0.75rem; border-radius: 0.625rem; background: var(--surface-warm); box-shadow: inset 0 0 0 1px rgba(255, 122, 0, 0.22); }
.pm-form-why { display: flex; align-items: center; gap: 0.3125rem; margin-top: 0.375rem; font-size: 0.6875rem; color: var(--orange-ink); }
.pm-form-why svg { flex: none; width: 0.75rem; height: 0.75rem; }
.pm-form-hint { margin-top: 0.3125rem; font-size: 0.6875rem; color: var(--muted); }
.pm-form-hint b { font-weight: 600; color: var(--orange-ink); }
@container (min-width: 30rem) {
	.pm-form-body { grid-template-columns: 9.5rem minmax(0, 1fr); }
	.pm-form-steps { display: grid; align-content: start; gap: 0.25rem; padding: 1rem 0.625rem; border-right: 1px solid var(--line); background: #FAFBFC; }
}

/* Signature pad */
.pm-sig { margin: 0.75rem 1rem 1rem; }
.pm-sig-pad { display: grid; place-items: center; height: 4.5rem; border: 1px dashed var(--line-strong); border-radius: 0.625rem; background: #FCFCFD; }
.pm-sig-pad svg { width: 70%; max-width: 13rem; height: auto; }
.pm-sig-foot { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 0.375rem; font-size: 0.6875rem; color: var(--muted); }

/* Submissions */
.pm-sub { display: grid; gap: 0.375rem; padding: 0.75rem 1rem; border-top: 1px solid var(--line-soft); }
.pm-sub:first-child { border-top: 0; }
.pm-sub-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.pm-sub-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.6875rem; color: var(--muted); }
.pm-sub-actions { display: flex; flex-wrap: wrap; gap: 0.375rem; }

/* 6 ---------------------------------------------- Records, data checks */
.pm-rtabs { display: flex; gap: 0.25rem; overflow: hidden; padding: 0.375rem 0.75rem 0; border-bottom: 1px solid var(--line); }
.pm-rtabs span { padding: 0.375rem 0.5rem; border-bottom: 2px solid transparent; font-size: 0.71875rem; font-weight: 500; color: var(--muted); white-space: nowrap; }
.pm-rtabs .is-on { border-color: var(--orange); color: var(--ink); }
.pm-history { display: grid; gap: 0.125rem; padding: 0.75rem 1rem 1rem; }
.pm-history li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.625rem; padding: 0.3125rem 0; }
.mock .pm-history .tile { --tile: 1.75rem; }
.pm-history-t { font-size: 0.75rem; font-weight: 500; line-height: 1.35; color: var(--ink); }

/* 7 ------------------------------------------------------------ AI, MCP */
.pm-approve { margin: 0 1rem 1rem; padding: 0.875rem; border: 1px solid rgba(255, 122, 0, 0.3); border-radius: 0.75rem; background: var(--orange-soft); }
.pm-approve > p:not(.mock-label) { font-size: 0.78rem; line-height: 1.5; color: var(--ink); }
.pm-approve-actions { display: flex; justify-content: flex-end; margin-top: 0.75rem; }

/* 8 ----------------------------------------------- Email, certificates */
.pm-email-head { display: grid; gap: 0.25rem; padding: 0.875rem 1rem; border-bottom: 1px solid var(--line); }
.pm-email-row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.5rem; font-size: 0.75rem; color: var(--text); }
.pm-email-row > span:first-child { color: var(--muted); }
.pm-email-subject { margin-top: 0.375rem; font-family: var(--font-display); font-size: 0.9375rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.pm-email-body { display: grid; gap: 0.375rem; padding: 0.875rem 1rem; font-size: 0.78rem; line-height: 1.5; color: var(--text); }
.pm-email-body b { margin-right: 0.25rem; font-weight: 600; color: var(--ink); }
.pm-email-att { padding: 0 1rem 1rem; }
.pm-att { display: inline-flex; align-items: center; gap: 0.625rem; max-width: 100%; padding: 0.5rem 0.75rem 0.5rem 0.5rem; border: 1px solid var(--line); border-radius: 0.625rem; background: #FAFBFC; }
.pm-att > svg { flex: none; width: 1.75rem; height: 1.75rem; padding: 0.3125rem; border-radius: 0.375rem; background: var(--danger-soft); color: var(--danger); }
.pm-att b { overflow: hidden; font-size: 0.75rem; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
.pm-att .m-min0 > span { font-size: 0.6875rem; color: var(--muted); }
.pm-certs { position: relative; height: 8.25rem; margin: 1rem 1rem 0.5rem; }
.pm-cert {
	position: absolute;
	left: 50%;
	top: 0.25rem;
	display: grid;
	align-content: center;
	justify-items: center;
	gap: 0.25rem;
	width: min(11rem, 74%);
	aspect-ratio: 1.414;
	padding: 0.5rem;
	border-radius: 0.375rem;
	background: #FFFFFF;
	box-shadow: inset 0 0 0 4px #FFFFFF, inset 0 0 0 5px #F3D3A9, 0 0 0 1px rgba(15, 23, 42, 0.08), var(--shadow);
	text-align: center;
	transform: translateX(-50%);
}
.pm-cert:nth-child(1) { transform: translateX(-64%) rotate(-6deg); }
.pm-cert:nth-child(2) { transform: translateX(-36%) rotate(5deg); }
.pm-cert i { display: block; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFB066, var(--orange)); }
.pm-cert b { font-size: 0.5rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange-ink-deep); }
.pm-cert span { font-family: var(--font-display); font-size: 0.8125rem; font-weight: 600; color: var(--ink); }

/* 10 ------------------------------------------- Added after the layout QA */
/* The portal window on wider screens, its phone version on phones. */
.pm-only-wide { display: none; }
@media (min-width: 40rem) {
	.pm-only-wide { display: block; }
	.pm-only-narrow { display: none; }
}

/* What ChatGPT can do with a system (the MCP server mockup). */
.pm-tools { display: grid; gap: 0.375rem; padding-inline: 1rem; }
.pm-tools li { display: flex; align-items: center; gap: 0.5rem; padding: 0.4375rem 0.625rem; border: 1px solid var(--line); border-radius: 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--ink); }
.pm-tools li > svg { flex: none; width: 0.875rem; height: 0.875rem; color: var(--orange-ink); }
.pm-tool-kind { margin-left: auto; padding: 0 0.375rem; border-radius: 0.3125rem; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); font-size: 0.65625rem; font-weight: 600; color: var(--muted); white-space: nowrap; }

/* A Word document's first page, in lines. */
.pm-doc { display: grid; gap: 0.375rem; padding: 0.875rem 1rem 1rem; }
.pm-doc p { margin-top: 0.25rem; font-family: var(--font-display); font-size: 0.75rem; font-weight: 600; color: var(--ink); }
.pm-doc i { display: block; width: 100%; height: 0.375rem; border-radius: 2px; background: var(--line); }

/* Gentler overlaps for the two-picture heroes. */
@media (min-width: 40rem) {
	.pm-duo { padding: 0 0 4.5rem; }
	.pm-duo > .mock:first-child { width: 84%; }
	.pm-duo-front { width: min(46%, 17rem); }
	.pm-duo--docs { padding-bottom: 3rem; }
	.pm-duo--docs > .mock:first-child { width: 70%; }
	.pm-duo--docs .pm-duo-front { width: min(36%, 13rem); }
}

/* A report card's change chip wraps under its number when the card is narrow. */
.pm-duo-front .rc-top { flex-wrap: wrap; }

/* An app on its own domain. */
.pm-domain { display: flex; align-items: center; gap: 0.75rem; }
.pm-domain b { font-family: var(--font-display); font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.pm-domain .mock-btn { margin-left: auto; }
.pm-domain .pw-org-mark { width: 2rem; height: 2rem; font-size: 0.6875rem; }

/* 11 ---------------------------- Story line, steps, logo wall, centering */
/* One customer story per page, as a single linked line under a section. */
.pm-story {
	display: grid;
	gap: 0.375rem;
	max-width: 52rem;
	margin: 2rem auto 0;
	padding: 1.125rem 1.25rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-xl);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
	color: var(--ink);
	text-decoration: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.pm-story:hover { border-color: rgba(255, 122, 0, 0.45); box-shadow: var(--shadow); transform: translateY(-1px); }
/* The site's focus color: plain orange is 2.6:1 on white. */
.pm-story:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.pm-story-label { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--orange-ink); }
.pm-story-label svg { flex: none; width: 0.875rem; height: 0.875rem; }
.pm-story-title { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
.pm-story .link-arrow { justify-self: start; }
.section--dark .pm-story, .section--soft .pm-story { background: var(--surface); }
@media (min-width: 48rem) {
	.pm-story { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 1.5rem; padding: 1.25rem 1.5rem; }
	.pm-story-label { grid-column: 1 / -1; }
	.pm-story .link-arrow { justify-self: end; white-space: nowrap; }
}

/* Centered link lines. */
.pm-center { margin-top: 1.5rem; text-align: center; }
.pm-center .link-arrow { justify-content: center; }
.pm-center.pm-request { margin-top: 0.75rem; font-size: 0.9375rem; color: var(--muted); }

/* Logo rows that come out even (no orphan tile, no row stopping short under a centered heading):
   six logos sit 2 or 3 to a row, or 6 in a row on wide screens; the integrations page's twelve 2, 3, 4 or 6. */
.pm-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 22.5rem) {
	.pm-logos, .split .pm-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 48rem) {
	.pm-logos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* The integrations page's logo wall: a few popular apps, centered, never the whole list. */
.pm-logos--wall { max-width: 60rem; margin-inline: auto; }
@media (min-width: 40rem) and (max-width: 63.99rem) {
	.pm-logos--wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}