and exists to NAME equipment in a photo ("Instant
Systems 600 Quad"). A study attribution isn't naming an image, it's
attributing a claim in body copy, so it gets its own sibling class and its
own semantic element: , which HTML5 defines for side comments and
attribution text ("fine print"), used here inside a since is
inline-only. Same 13px / ink-soft "fine print" treatment as
.svc-media-caption for one consistent small-print language across the
site, but more top margin (24px vs. 10px): a caption sits directly under
one image it belongs to, while this follows a multi-paragraph stack and
needs enough separation to read as detached from it, not as one more
paragraph in the stack. */
.svc-source{
margin-top:24px;
font-size:13px;
color:var(--ink-soft);
}
/* ---------- Partner block (portable: copy above a product-image grid) ----------
Drops onto any service page that carries a supplier story. Carries no
page-specific selector, so the only per-page edit is the copy inside
.svc-partner-body and the cells inside .svc-partner-grid.
Always stacked, text above and the grid running full container width
below, at every viewport. Not a responsive two-column layout: a grid
of small cells reads as a wall of thumbnails if it's squeezed into a
partial-width column next to text, so the grid always gets the full
contained width to work with. */
.svc-partner{display:flex;flex-direction:column;gap:28px}
/* Heading + attribution logo. Mobile-first: stacked and left-aligned by
default, since a wide logo beside a heading has nowhere to go on a
narrow column. Above 560px there's reliably enough width in this
component's text column (it runs the full contained width, same as
the grid below) for the two to sit on one line with room to spare, so
they move to a row. The logo never gets a fixed pixel size beyond its
height: width:auto plus its own intrinsic aspect ratio keeps it from
ever distorting, and flex-shrink:0 keeps a long heading from
squeezing it before flex-wrap has a chance to drop it to its own
line. */
.svc-partner-heading-row{
display:flex;flex-direction:column;align-items:flex-start;gap:14px;
}
@media(min-width:560px){
.svc-partner-heading-row{
flex-direction:row;align-items:center;flex-wrap:wrap;gap:32px;
}
}
.svc-partner-heading-row h2{margin-bottom:0}
/* Secondary to the heading by design: sized near the heading's cap
height, never equal to its full point size. width:auto preserves the
source 1000:636 ratio off a single height constraint. */
.svc-partner-logo{
display:block;height:40px;width:auto;flex-shrink:0;
}
@media(min-width:560px){
.svc-partner-logo{height:46px}
}
/* Grid of individual product images, never a pre-composited strip.
auto-fit + minmax means a variable image count degrades without a
rebuild: when there are fewer images than the container could hold,
the empty tracks COLLAPSE and the images stretch to fill the row
instead of leaving a hole at the end.
The min column width is re-declared per breakpoint rather than set
once, because no single min yields 6 / 3 / 2 across at the three
container widths this component runs at (full .wrap width at each).
min(100%,...) keeps a single cell from overflowing a container
narrower than the min. */
.svc-partner-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr));
gap:10px;
}
@media(min-width:560px){
.svc-partner-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
}
@media(min-width:820px){
.svc-partner-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
}
/* Square cells so every row aligns top and bottom at any count or width.
Radius is smaller than var(--radius): 16px reads as a squircle on a
cell this size. */
.svc-partner-cell{position:relative;overflow:hidden;border-radius:12px;aspect-ratio:1 / 1}
.svc-partner-img{display:block;width:100%;height:100%;object-fit:cover}
/* Placeholder treatment. Remove .is-stub with the label text when the
real photography lands; nothing else about the cell changes. */
.svc-partner-cell.is-stub{
display:flex;align-items:center;justify-content:center;text-align:center;
padding:6px;border:1px dashed var(--gray);background:var(--sage-tint);
font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
color:var(--sage-deep);line-height:1.25;
}
/* ---------- Vending: comparison block (Section 8) ----------
Portable across service pages. The active card is resolved entirely
in CSS by matching the section's data-current against each card's
data-service, so changing data-current on the wrapper moves the
active state with no other edits and no JS.
The current-page card stays a plain, non-interactive container: no
hover lift, no link affordance. The other two cards are real links
(see .svc-compare-card--link below) out to their service pages. */
.svc-compare-cards{display:grid;grid-template-columns:1fr;grid-auto-rows:1fr;gap:20px;margin-top:32px}
@media(min-width:680px){.svc-compare-cards{grid-template-columns:repeat(3,1fr)}}
/* Base card matches the .svc-step convention already used on this page. */
.svc-compare-card{
background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
padding:24px;box-shadow:var(--shadow);
}
.svc-compare-card h3{font-size:16px;margin-bottom:8px}
/* margin-bottom is a floor, not a fixed gap: .svc-compare-cta's margin-top:auto
(below) still absorbs whatever space is left in the row-height-equalized
card, so shorter-copy cards get more than this. Without the floor, a card
whose copy is long enough to leave zero leftover space collapses the
copy-to-button gap to 0, crowding the button against the last line of text.
24px matches the card's own padding, so the gap reads at least as open as
the button-to-bottom-edge space. */
.svc-compare-card p{font-size:14px;color:var(--ink-soft);margin:0 0 24px}
/* Clickable variant: the whole card is the link (not just the button inside
it). The card itself never moves or shifts on hover, by design: only the
button responds (see .svc-compare-card--link:hover .svc-compare-cta
below), so the card's own :hover carries no rules at all. cursor:pointer
is explicit so the full card still reads as clickable even though the
card itself is visually static. Focus stays on the card (not the inert
button) via a plain outline, unrelated to hover and unaffected by
removing the old lift. */
.svc-compare-card--link{
display:flex;flex-direction:column;text-decoration:none;color:inherit;
cursor:pointer;
}
.svc-compare-card--link:focus-visible{outline:2px solid var(--sage-deep);outline-offset:3px}
/* Inert variant: for a service page that doesn't exist yet. Plain ,
same base card look, deliberately carries no href, no button, no hover
lift, and no focus ring, so it reads as informational only. cursor:default
overrides nothing else, since the base card is already non-interactive;
it just documents the intent. Not currently applied anywhere: all three
service pages have shipped, so all non-active cards use the
.svc-compare-card--link
pattern instead. Kept in reserve for the next
service page that ships before its siblings. */
.svc-compare-card--inert{cursor:default}
/* Visual-only button: an aria-hidden span, not a real nested link/button,
since the card itself is the interactive element. margin-top:auto keeps
it flush to the bottom of the card and aligned across cards of uneven
body-copy length: body copy stays top-aligned, the gap above the button
absorbs the difference, so buttons line up horizontally across the row
regardless of how long each card's paragraph is.
Hover feedback lives here, not on the card: since the card no longer
moves on hover, the button is the only element that visibly responds.
Background + border shift to on-palette sage tones, no new color. */
.svc-compare-cta{margin-top:auto;align-self:flex-start}
.svc-compare-card--link:hover .svc-compare-cta{background:var(--sage-tint);border-color:var(--sage)}
/* Active card: sage border plus sage-tint fill. Quiet, on-palette, and
reads as "current" without a badge, ribbon, or extra label. */
.svc-compare[data-current="vending"] .svc-compare-card[data-service="vending"],
.svc-compare[data-current="smart-stores"] .svc-compare-card[data-service="smart-stores"],
.svc-compare[data-current="micromarkets"] .svc-compare-card[data-service="micromarkets"]{
background:var(--sage-tint);border-color:var(--sage);
}
.svc-compare[data-current="vending"] .svc-compare-card[data-service="vending"] h3,
.svc-compare[data-current="smart-stores"] .svc-compare-card[data-service="smart-stores"] h3,
.svc-compare[data-current="micromarkets"] .svc-compare-card[data-service="micromarkets"] h3{
color:var(--sage-deep);
}
/* Screen-reader-only current-page announcement. Hidden by default; revealed
only on the active card (matching data-current). Uses .sr-only for visual
hiding while keeping it audible to assistive tech. Swapping data-current
moves the announcement with no other edits. Note: absolute positioning
(from .sr-only) computes display as block. */
.svc-compare-current{display:none}
.svc-compare[data-current="vending"] .svc-compare-card[data-service="vending"] .svc-compare-current,
.svc-compare[data-current="smart-stores"] .svc-compare-card[data-service="smart-stores"] .svc-compare-current,
.svc-compare[data-current="micromarkets"] .svc-compare-card[data-service="micromarkets"] .svc-compare-current{
display:block;
}
/* ===========================================================
Contact modal (contact-modal.js)
A native