/* Meet MOLI, by Perdix Software: layout and components on top of the generic public stylesheet (moli-hyperbase
   static/website/website.css), which owns the tokens, the header/footer, forms, cards and the blog. Same contrast rules. */

.eyebrow { color: var(--ink-muted); font-weight: 700; margin-bottom: 0.5rem; }
.eyebrow a { color: var(--perdix-blue); }
.small { font-size: 0.9rem; }
.two-col { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); align-items: start; }
.two-col figure { margin: 0; }
.two-col figure img { border-radius: var(--radius); width: 100%; }
.two-col > * > :first-child { margin-top: 0; }	/* each column starts level with the one beside it */

/* Home hero */
.hero--home { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); align-items: center; padding-block: 3rem; }
.hero--home__figure { margin: 0; }
.hero--home__figure img { width: 100%; height: auto; }	/* a transparent product cut-out: no frame, no shadow */
.hero--home .hero__title { font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
@media (min-width: 900px) { .hero--home { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.topology { margin: 2rem 0 0; }
.topology img { width: 100%; height: auto; }
.topology figcaption { color: var(--ink-muted); margin-top: 0.5rem; font-size: 0.95rem; }

/* Card grids */
.cards--three { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.cards--four { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.role-card { border-top: 4px solid var(--perdix-gold); }
.feature-card__title { font-size: 1.15rem; margin-top: 0; }
.integration-card__logo { display: block; max-height: 40px; width: auto; margin-bottom: 0.75rem; }

/* Logo strips */
.logo-strip { list-style: none; padding: 0; margin: 1rem 0; display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; }
.logo-strip img { max-height: 48px; width: auto; }
.logo-strip--small img { max-height: 32px; }
.logo-strip a { display: inline-block; min-height: 44px; display: inline-flex; align-items: center; }

/* Stats chips (from the sheets) */
.chips { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.chip { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 0.6rem 1rem; }
.chip strong { color: var(--perdix-blue); }
.chips--stats .chip { background: var(--perdix-blue); border-color: var(--perdix-blue); color: #fff; min-width: 12rem; }
.chips--stats .chip strong { display: block; color: var(--perdix-gold); font-size: 2rem; line-height: 1.1; }
.chips--stats .chip span { color: #fff; }

/* Sheets rendered as pages */
.sheet { margin-bottom: 2rem; }
.sheet__subtitle { color: var(--ink-muted); font-size: 1.15rem; margin-top: -0.25rem; }
.sheet-banner { background: var(--paper-blue); border-left: 4px solid var(--moli-blue); padding: 0.75rem 1rem; border-radius: 0 var(--radius) var(--radius) 0; }
.sheet-hero { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; margin: 1.5rem 0; }
.sheet-hero--right { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.sheet-hero--right img { order: 2; }
.sheet-hero img { width: 100%; height: auto; border-radius: var(--radius); }	/* Literature hero images are cropped tight: no frame */
.sheet-hero img.sheet-hero__screenshot { border: 1px solid var(--line); background: #fff; }	/* a white application screen needs an edge */
.sheet-hero__headline { font-size: 1.35rem; font-weight: 800; color: var(--perdix-blue); line-height: 1.3; }
@media (max-width: 799.98px) { .sheet-hero, .sheet-hero--right { grid-template-columns: 1fr; } .sheet-hero--right img { order: 0; } }
.sheet-section { margin: 1.5rem 0; }
.sheet-section h2 { font-size: 1.5rem; }
.sheet-section h3 { font-size: 1.2rem; }
.sheet-section h4 { font-size: 1.05rem; margin-top: 1em; }
/* A section's picture sits beside its text, as on the printed sheet: at its printed size when the sheet gives one,
   else a fifth of the column. A picture with no text beside it is centered. On a phone, all but a small logo stack. */
.sheet-section { display: flow-root; }
.sheet-figure { margin: 0.25rem 0 1rem; }
.sheet-figure img { display: block; }
.sheet-figure:not(.sheet-figure--sized) img { width: 100%; }
.sheet-figure--beside { float: right; margin-left: 1.5rem; }
.sheet-figure--beside:not(.sheet-figure--sized) { width: 21%; }
.sheet-figure--alone img { margin-inline: auto; }
@media (max-width: 40rem) {
	.sheet-figure--beside:not(.sheet-figure--small) { float: none; margin-left: 0; }
	.sheet-figure--beside:not(.sheet-figure--sized) { width: auto; }
}
.sheet__downloads { margin-top: 1.5rem; }
.checklist { list-style: none; padding-left: 0; }
.checklist li { position: relative; padding-left: 1.6rem; margin-bottom: 0.5rem; }
.checklist li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--perdix-blue); font-weight: 900; }
.steps { padding-left: 1.5rem; }
.steps li { margin-bottom: 0.5rem; }
.steps--big { list-style: none; padding: 0; display: grid; gap: 1.5rem; }
.steps--big > li { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.steps--big h2 { margin-top: 0; font-size: 1.35rem; }
.callout { background: var(--paper-tint); border: 1px solid var(--line); border-left: 6px solid var(--perdix-gold); border-radius: var(--radius); padding: 1rem 1.25rem; margin: 1.5rem 0; }
.callout__title { font-weight: 800; color: var(--perdix-blue); margin-bottom: 0.25rem; }
.sheet-raw table { display: block; overflow-x: auto; }
.sheet-raw .literature-icon-row { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.75rem; }	/* a small logo beside its line, as on the printed sheet */
.sheet-raw .literature-icon-row > img { flex: none; }

/* Why MOLI role pages */
.role-layout { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr) 16rem; align-items: start; padding-block: 1rem 2rem; }
.role-article h2 { font-size: 1.5rem; margin-top: 2rem; }
.role-article h2:first-child { margin-top: 0; }
.role-aside { position: sticky; top: 1rem; background: var(--paper-tint); border-radius: var(--radius); padding: 1.25rem; }
.role-aside ul { list-style: none; padding: 0; margin: 0 0 1rem; }
@media (max-width: 899.98px) { .role-layout { grid-template-columns: 1fr; } .role-aside { position: static; } }
.industries { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.industries dt { font-weight: 800; color: var(--perdix-blue); }
.industries dd { margin: 0; color: var(--ink-muted); }
.pills { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pill { display: inline-flex; align-items: center; min-height: 36px; padding: 0.25rem 0.9rem; border-radius: 999px; background: var(--paper-blue); color: var(--perdix-blue); text-decoration: none; font-weight: 700; }
.pill:hover { background: var(--perdix-blue); color: #fff; }

/* Proof, CTA, facts */
.proof__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.proof__quote { margin: 0; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--perdix-gold); border-radius: var(--radius); padding: 1.25rem; color: var(--ink); }
.proof__quote p { font-size: 1.1rem; font-weight: 600; }
.proof__quote footer { color: var(--ink-muted); }
.cta { padding-block: 2.5rem; margin-top: 2rem; }
.cta__row { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between; }
.cta__title { margin-top: 0; }
/* "Did you know?": one fact at a time (website/facts.js), edged in the page's role color when it has one */
.facts { margin-block: 2rem; }
.facts__card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.5rem 1.25rem; align-items: center; background: var(--paper-tint); border-left: 4px solid var(--role, var(--perdix-gold)); border-radius: var(--radius); padding: 1rem 1.25rem; }
.facts__heading { margin: 0; font-size: 1rem; white-space: nowrap; color: var(--role-ink, var(--perdix-blue)); }
.facts__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.facts__item { font-size: 1.05rem; }
.facts__controls { display: flex; align-items: center; gap: 0.35rem; }
.facts__controls[hidden] { display: none; }
.facts__button { min-width: 44px; min-height: 44px; padding: 0 0.75rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--perdix-blue); font: inherit; font-weight: 800; cursor: pointer; }
.facts__button:hover { border-color: var(--perdix-blue); }
.facts__button span[aria-hidden] { font-size: 1.4rem; line-height: 1; }
.facts__count { min-width: 4.5em; text-align: center; font-size: 0.9rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 699.98px) { .facts__card { grid-template-columns: minmax(0, 1fr); } .facts__list { align-items: flex-start; } }
.star, .letter .fa-star { color: var(--moli-pink); }	/* a graphic beside words that say "starred": 4.2:1 on white, 3.8:1 on tints (3:1 is the bar) */

/* Devices */
.table--devices code { white-space: nowrap; }
.device-layout { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; padding-block: 1rem; }
.device-photo { margin: 0; background: var(--paper-tint); border-radius: var(--radius); padding: 1rem; }
.device-photo img { width: 100%; height: auto; }
@media (max-width: 799.98px) { .device-layout { grid-template-columns: 1fr; } }
.specs { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.specs dt { font-weight: 800; color: var(--perdix-blue); }
.specs dd { margin: 0; }
.facts-list dt { font-weight: 800; color: var(--perdix-blue); }
.facts-list dd { margin: 0 0 0.75rem; }
/* The logo floats at the upper right and the name, tagline, and (when the header is short) the body text wrap around it.
   Logos share one height, their width following each mark's own shape; wide wordmarks are capped and scaled to fit. */
.integration-hero__logo { float: right; height: clamp(40px, 6vw, 72px); width: auto; max-width: clamp(120px, 28%, 300px); object-fit: contain; object-position: right center; margin: 0.35rem 0 1rem 2rem; }

/* Gallery, videos, social, letter, visit banner */
.gallery--strip { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.gallery img { aspect-ratio: 4 / 3; object-fit: cover; }
/* The Photos page: masonry (CSS columns keep each photo's own shape; reading order stays newest first) */
.gallery--masonry { display: block; columns: 17rem; column-gap: 1rem; list-style: none; padding: 0; }
.gallery--masonry > li { break-inside: avoid; margin: 0 0 1rem; }
.gallery--masonry figure { margin: 0; }
.gallery--masonry img { aspect-ratio: auto; height: auto; width: 100%; object-fit: initial; }
.gallery--masonry a { display: block; border-radius: var(--radius); }
.video-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.social-wall iframe { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); }
/* Three across at most: embedded posts need the width (LinkedIn lays its posts out for about 500px) */
.social-wall { grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); }
.social-wall > .card { padding: 1rem; }
.letter { margin-block: 1rem 2rem; }
.letter__body { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; box-shadow: 0 6px 20px rgba(35, 56, 93, 0.08); }
.letter__signature { display: flex; align-items: flex-start; gap: 1rem; }
.letter__signature p { margin: 0; }
/* the photo is as tall as the lines beside it (name, title, email, …), which the template counts into --signature-lines */
.letter__photo { flex: none; object-fit: cover; width: calc(var(--signature-lines, 3) * 1.6em); height: calc(var(--signature-lines, 3) * 1.6em); width: calc(var(--signature-lines, 3) * 1lh); height: calc(var(--signature-lines, 3) * 1lh); }
.letter__postscript { margin: 1.5rem 0 0; }
.visit-banner { background: var(--perdix-gold); color: var(--ink); }
.visit-banner__row { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; align-items: center; justify-content: space-between; padding-block: 0.5rem; }
.visit-banner p { margin: 0; }
.visit-banner a { color: var(--ink); font-weight: 700; }

/* Feature icons (Font Awesome, from each feature's DataType); decorative, so aria-hidden in the markup */
.feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin-right: 0.6rem; border-radius: 8px; background: var(--paper-blue); color: var(--perdix-blue); font-size: 1rem; vertical-align: middle; flex: none; }
.feature-icon--large { width: 3.25rem; height: 3.25rem; font-size: 1.6rem; border-radius: 12px; margin: 0 0 0.75rem; }
/* A sheet's icon sits to the left of its title; the subtitle and banner run full width beneath */
.sheet__header--icon { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; align-items: center; }
.sheet__header--icon > .feature-icon, .sheet__header--icon > .sheet__mark { grid-column: 1; grid-row: 1; margin: 0; }
.sheet__mark { display: block; width: 3.25rem; height: auto; }
.sheet-hero--text { grid-template-columns: minmax(0, 1fr); }
.sheet__header--icon > h1, .sheet__header--icon > h2 { grid-column: 2; grid-row: 1; margin: 0; }
.sheet__header--icon > :not(.feature-icon):not(.sheet__mark):not(h1):not(h2) { grid-column: 1 / -1; }
.sheet__header--icon > h1 + * , .sheet__header--icon > h2 + * { margin-top: 0.75rem; }
@media (max-width: 479.98px) { .sheet__header--icon > .feature-icon { width: 2.5rem; height: 2.5rem; font-size: 1.25rem; } }
.feature-card__title { display: flex; align-items: center; flex-wrap: nowrap; gap: 0.6rem; }
.feature-card__title > .feature-icon { margin-right: 0; }
.feature-card__title > a { min-width: 0; }

.feature-link .fa-fw { color: var(--perdix-blue); margin-right: 0.3rem; }
.library-icon { color: var(--perdix-blue); }

/* A page hero with an image in its upper right (e.g. the Integrations page and the MOLI Broker icon). DOM order is title,
   text, image, so the image never interrupts reading; the grid puts it top right, beside the title on phones. */
.hero--split { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title figure" "body figure"; column-gap: 3rem; align-items: start; }
.hero--split__title { grid-area: title; }
.hero--split__body { grid-area: body; }
.hero--split__figure { grid-area: figure; margin: 0; justify-self: end; }
.hero--split__figure img { display: block; width: clamp(96px, 20vw, 240px); height: auto; }
@media (max-width: 699.98px) { .hero--split { grid-template-areas: "title figure" "body body"; column-gap: 1rem; align-items: center; } }
.callout--section { margin-block: 2rem; padding: 1.5rem; }
.callout--section h2.callout__title { font-size: 1.35rem; margin: 0 0 0.5rem; }
.callout__lead { font-weight: 800; color: var(--perdix-blue); }

/* Policies (/policies/): cards on the index and the Company page, the policy text, and the list of the others. */
.policy-card__title { margin-top: 0; font-size: 1.25rem; }
.policy__revised { margin-top: 2rem; }
.policy-nav { padding-top: 0; }
.policy-nav__heading { font-size: 1.25rem; }
.policy-nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.policy-nav a[aria-current="page"] { font-weight: 800; color: var(--ink); text-decoration: none; }

/* The Why page's hero: the text beside the same floor before and after MOLI */
.hero--compare { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 900px) { .hero--compare { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.before-after__item { margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
/* Both sides share one shape (the photos' 840x500), so the 16:9 video neither shrinks nor grows when it starts playing */
.before-after__item img, .before-after__item video { display: block; width: 100%; height: auto; aspect-ratio: 840 / 500; object-fit: cover; border-radius: var(--radius); background: var(--paper-tint); }
.before-after__item figcaption { font-size: 0.95rem; line-height: 1.4; }
.before-after__label { display: block; font-weight: 800; color: var(--perdix-blue); font-variant: small-caps; font-size: 1.15rem; letter-spacing: 0.02em; }
.before-after__credit { grid-column: 1 / -1; margin: 0; font-size: 0.85rem; color: var(--ink-muted); }
@media (max-width: 479.98px) { .before-after { grid-template-columns: 1fr; } }

/* The Company page's NAICS codes, inside the facts list */
.naics-list { list-style: none; padding: 0; margin: 0; }
.naics-list li { margin-bottom: 0.25rem; }

/* Home hero: words only; the three measures stack, one per line, and the belief sits in ink under the lead */
.hero--home .hero__title { text-wrap: balance; }
.hero__measure { display: block; }
.hero--home--text { display: block; }
.hero--home--text .hero--home__text { max-width: 46rem; }
@media (min-width: 40.01rem) { .hero--home--text .hero__title { font-size: clamp(1.9rem, 4vw, 3.25rem); } }
.hero__belief { color: var(--ink); }
@media (max-width: 40rem) { .hero--home { padding-block: 1.5rem 2rem; } .hero--home .hero__actions { margin-top: 1rem; } }
@media (max-width: 40rem) and (max-height: 600px) { .hero--home { padding-block: 1rem 2rem; } .hero--home .hero__title { font-size: 1.6rem; } .hero--home .hero__lead { font-size: 1.05rem; } }
.eyebrow + h2 { margin-top: 0; }
.results__frame { font-weight: 700; margin: 0 0 0.5rem; }
.principles__bridge { font-weight: 700; }
.contact-next { margin-bottom: 1.5rem; }
.contact-next h2 { font-size: 1.25rem; }
.contact-next .steps { max-width: 70ch; }
.thanks-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.measure, .measure-children > p, .measure-children > ul { max-width: var(--measure); }
/* Before and after: captions of different lengths still leave the two pictures side by side, top-aligned */
@supports (grid-template-rows: subgrid) {
	.before-after__item { display: grid; grid-row: span 2; grid-template-rows: subgrid; gap: 0.5rem; }
}
/* A device page carries its maker's partner badge beside the title, as the old catalog did */
.hero--partner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.partner-badge { flex: none; display: block; }
.partner-badge img { display: block; height: 72px; width: auto; }
@media (max-width: 599.98px) { .partner-badge img { height: 48px; } }
/* A hero with a picture beside the words (the Certified Devices group shot); compact keeps a photo from outweighing the lead (Getting Started) */
.hero--figure { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .hero--figure { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.hero__figure { margin: 0; }
.hero__figure img { display: block; width: 100%; height: auto; }
@media (min-width: 900px) { .hero--figure-compact { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); } }
.site-footer__credit { font-size: 0.85rem; }
/* A flag beside a line in another language (Company: "Nous ne sommes pas perdus!"); the hairline keeps a white band visible on a tint */
img.flag { display: inline-block; height: 1em; width: auto; margin-right: 0.3em; vertical-align: -0.125em; border-radius: 2px; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.15); }
/* Why: "Keepers of the Promise" beside a photo of a trainer and an operator at the saw */
.promise-layout { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .promise-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem; } }
.promise-layout__figure { margin: 0; }
.promise-layout__figure img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
/* Features: the MOLI seal beside the title and lead; the group pills run full width beneath */
.hero--seal { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 2rem; align-items: center; }
.hero--seal > .hero__nav { grid-column: 1 / -1; }
.hero__seal { width: clamp(88px, 18vw, 240px); height: auto; }

/* The role thread (data.ROLES, data.FEATURE_ROLES): each reader's role has a color that follows them, from the role
   cards to their role page, the quotes from people in their seat, the contact page they reach from it, and every
   feature that mainly serves them. MOLI UI supplemental colors (escutcheon ui-colors.html), none a brand color and each
   clear of the others; -ink is the shade for text on the -tint (AA, 5:1), the plain color is for borders and icons. */
:root {
	--role-owners: #6300BA; --role-owners-ink: #6300BA; --role-owners-tint: #F3EBF9;				/* purple, Perdix gold's complement */
	--role-operations: #C44F00; --role-operations-ink: #B04700; --role-operations-tint: #FAF1EB;	/* orange, the floor in motion */
	--role-quality: #0061F2; --role-quality-ink: #005DE8; --role-quality-tint: #EBF2FE;			/* blue, the blue ribbon */
	--role-ehs: #00784A; --role-ehs-ink: #007649; --role-ehs-tint: #EBF4F1;						/* green, safety green */
}
.role--owners { --role: var(--role-owners); --role-ink: var(--role-owners-ink); --role-tint: var(--role-owners-tint); }
.role--operations { --role: var(--role-operations); --role-ink: var(--role-operations-ink); --role-tint: var(--role-operations-tint); }
.role--quality { --role: var(--role-quality); --role-ink: var(--role-quality-ink); --role-tint: var(--role-quality-tint); }
.role--ehs { --role: var(--role-ehs); --role-ink: var(--role-ehs-ink); --role-tint: var(--role-ehs-tint); }

/* "for Owners" (home) and "MOLI for Owners" (Why) cards */
.role-card[class*="role--"] { border-top-color: var(--role); background: var(--role-tint); }
.role-card[class*="role--"] .card__link { color: var(--role-ink); }
/* the role page and the contact page reached from it: a bar under the title */
.hero--role .hero__title::after { content: ""; display: block; width: 2.54em; height: 6px; margin-top: 0.75rem; border-radius: 3px; background: var(--role); }	/* as long as "MOLI" in the title font */
.role-article[class*="role--"] h2::before { content: ""; display: inline-block; width: 0.45em; height: 0.45em; margin-right: 0.45em; border-radius: 50%; background: var(--role); vertical-align: 0.12em; }	/* the sidebar's dot, by each heading */
.role-aside .site-footer__links + .site-footer__heading { margin-top: 2rem; }
.role-article[class*="role--"] .checklist li::before { color: var(--role); }
.role-dot a::before { content: ""; display: inline-block; width: 0.6rem; height: 0.6rem; margin-right: 0.5rem; border-radius: 50%; background: var(--role); vertical-align: 0.05em; }
/* quotes, by the speaker's seat */
.proof__list > [class*="role--"] .proof__quote { border-left-color: var(--role); background: var(--role-tint); }
/* features, by the role each mainly serves: card edge, icon tile, and the icon in feature links */
.feature-card[class*="role--"] { border-top: 3px solid var(--role); }
[class*="role--"] .feature-icon { background: var(--role-tint); color: var(--role-ink); }
.feature-link[class*="role--"] .fa-fw { color: var(--role-ink); }
/* A count on a button ("See all 37 features"): MOLI pink, heavy and a size up so it reads as large text (3:1; pink is
   4.15:1 on white); on the button's blue hover it takes the label's white */
.button .count { color: var(--moli-pink); font-weight: 900; font-size: 1.2em; line-height: 1; }
.button:hover .count { color: inherit; }
/* An outlined companion to the solid buttons: a MOLI blue edge around Perdix blue words; filled MOLI blue on hover */
.button--outline-moli { background: #fff; color: var(--perdix-blue); border-color: var(--moli-blue); }
.button--outline-moli:hover { background: var(--moli-blue); color: var(--ink); border-color: var(--moli-blue); }
/* A sheet hero with buttons: the words column stretches to the picture's height and the buttons settle at its foot */
.sheet-hero--actions { align-items: stretch; }
.sheet-hero--actions > img { align-self: start; }
.sheet-hero--actions .sheet-hero__text { display: flex; flex-direction: column; }
.sheet-hero--actions .sheet-hero__text > .hero__actions { margin-top: auto; margin-bottom: 0; padding-top: 0.5rem; }
/* Sheet galleries show their pictures whole (screenshots keep every pixel, in a frame like the integration screens) */
.gallery--sheet figure { margin: 0; }
.gallery--sheet img { aspect-ratio: auto; height: auto; object-fit: contain; border: 1px solid var(--line); background: #fff; }
.logo-strip--sheet { margin-block: 1rem; }
.logo-strip--sheet img { height: 48px; width: auto; }
/* A button to a role page wears that role's color (the closing call to action's "For owners") */
.button--role { background: var(--role-ink); border-color: var(--role-ink); color: #fff; }
.button--role:hover { background: #fff; border-color: var(--role-ink); color: var(--role-ink); }
/* A one-sentence lead that would otherwise break just short of the reading measure (the Library's) */
.hero__lead--wide { max-width: none; }
/* Partner badges, large enough to read their status ("Elite Partner", "Registered Reseller") */
.logo-strip--large { gap: 1.5rem 3rem; }
.logo-strip--large img { width: auto; height: auto; max-height: 110px; max-width: 220px; }	/* one box for tall badges and wide wordmarks alike */
@media (max-width: 599.98px) { .logo-strip--large img { max-height: 72px; max-width: 150px; } }