/* ===========================================================================
   MOBILE (2026-10) — phones only.

   Linked from header.php AFTER cosmick-2026.css and cm-interior.css with
   media="(max-width: 767.98px)", so desktops download it at low priority and
   never apply it. Every rule here is also inside a max-width media query.

   The swipe-rail primitive itself (.cm-rail + assets/js/cm-rail.js) and the
   homepage rails live in the "MOBILE RAILS" block at the end of
   cosmick-2026.css; this sheet applies it to every other page family and
   carries each family's phone-only polish. One section per family, in the
   order below. Sheets printed in the body (cm-blog.css, business-card.css,
   cgap.css, kinsta-partner.css) come after this one, so rules aimed at them
   are written with enough specificity to win regardless of order.
   =========================================================================== */


/* ###########################################################################
   SERVICES
   ######################################################################## */

/* ---- Services (archive-service.php, single-service.php, inc/services-guides.php)
   Index: the six service panels, the three "handoff" cards on the dark band
   and the website write-ups swipe on phones. Service pages: the documented
   project's device showcase (phone first, the desktop frame cut by the screen
   edge), the working-approach steps, the planning-decision rows, the ACF card
   grids (included / benefits / awards / specialties / gallery / before-after)
   and the recent write-ups swipe.

   The "what is getting in the way?" rows swipe too: stacked they ran
   ~1,100px. Left as lists on purpose: each page's three signals and the
   chapter-02 planning diagrams (an ordered drawing, read top to bottom), the
   numbered "how the work runs" steps, the FAQs and the related-links nav.

   The services family draws square cards (1px rule, no radius); the rail
   cards keep that. Every rule restates the rail's own box properties at
   (0,2,0)+ because cm-interior.css sets margin/padding/display on several of
   these containers at (0,1,1).
   --------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	/* The legacy `h3 { padding-bottom: 27px }` left a blank line under every
	   card title in this family - a third of a phone screen across a card
	   stack. Prose headings keep their spacing. */
	.cm-svc-page :is(h3, h4):not(.cm-prose *) { padding-bottom: 0; }

	/* cm-interior.css loads after the rail primitive and its (0,1,0) grid
	   rules (.cm-svc-connected-chain, .cm-svc-proof-links, .cm-grid-2 ...)
	   would otherwise win on source order; restate the row here. */
	.cm-svc-page .cm-rail {
		display: flex;
		flex-wrap: nowrap;
		grid-template-columns: none;
		overflow-x: auto;
		overflow-y: hidden;
	}

	/* Class collision: archive-service.php's <main> carries .cm-svc-index,
	   which is also the "On this page" nav box (cm-interior.css), so the
	   whole index was boxed in a 20px pad + 1px border + coral top rule. On a
	   phone that cost 42px of a 390px screen and cut every rail 21px short of
	   the edge. Undone here for phones only; desktop is left as approved. */
	main.cm-svc-page.cm-svc-index {
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
	}

	/* A nowrap row's min-content is the sum of its cards; inside the
	   overview's one-column grid that widened the column past the gutter
	   (371px of a 350px wrap, clipped by the section). Let the track shrink. */
	.cm-svc-page .cm-svc-split > * { min-width: 0; }

	/* A lone card on any of these rails takes the full row. */
	.cm-svc-page .cm-rail > :only-child { flex-basis: 100%; }

	/* ---- Index 01: the six service panels ---- */
	.cm-svc-directory-list.cm-rail {
		--cm-rail-w: 86%;
		--cm-rail-gap: 12px;
		align-items: stretch;
	}

	.cm-svc-directory-list.cm-rail > .cm-svc-directory-panel {
		align-content: start;
		gap: 20px;
		padding: 22px 20px;
		border: 1px solid var(--cm-svc-rule);
		background: var(--cm26-card);
	}

	/* The panel is a grid; let its columns shrink to the card, not to the
	   longest word ("Development" ran past a 320px card). */
	.cm-svc-directory-list.cm-rail .cm-svc-directory-panel > * { min-width: 0; }

	.cm-svc-directory-list.cm-rail .cm-svc-directory-title > span { padding-top: 4px; }

	.cm-svc-directory-list.cm-rail .cm-svc-directory-panel h3 {
		font-size: clamp(19px, 5.6vw, 23px);
		overflow-wrap: anywhere;
	}

	/* Label over value: a 9ch label column left the price three words wide. */
	.cm-svc-directory-list.cm-rail .cm-svc-directory-meta > div {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
	}

	/* A stacked panel ran ~1,170px; a swipe card should fit one phone screen.
	   The tagline already says what the description says, and the planning
	   priorities open the service page itself, so both stay on desktop only;
	   the business conversation is clamped and the full text is one tap away. */
	.cm-svc-directory-list.cm-rail .cm-svc-directory-description,
	.cm-svc-directory-list.cm-rail .cm-svc-directory-mini { display: none; }

	.cm-svc-directory-list.cm-rail .cm-svc-directory-context p {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	.cm-svc-directory-list.cm-rail .cm-svc-directory-meta { margin-top: 16px; }
	.cm-svc-directory-list.cm-rail .cm-tlink { margin-top: 18px; }

	.cm-svc-directory-list.cm-rail .cm-svc-directory-context { padding: 16px; }

	/* The screenshot plate as a wide strip: the top of the page is the part
	   that identifies it (object-position: top is already set). */
	.cm-svc-directory-list.cm-rail .cm-svc-directory-media {
		margin-bottom: 16px;
		padding: 6px;
	}

	.cm-svc-directory-list.cm-rail .cm-svc-directory-media img { aspect-ratio: 16 / 7; }

	/* The context headline is set for a wide column; at card width it ran
	   four lines of 23px and pushed the card past a phone screen. */
	.cm-svc-directory-list.cm-rail .cm-svc-directory-context h4 {
		margin-top: 8px;
		font-size: 18px;
		line-height: 1.3;
	}

	/* ---- Index 02: "what is getting in the way?" rows -> cards ----
	   Each row is one link; the service name sits at the foot of every card. */
	.cm-svc-decision-rows.cm-rail {
		--cm-rail-w: 80%;
		--cm-rail-gap: 12px;
		align-items: stretch;
		border-top: 0;
	}

	.cm-svc-decision-rows.cm-rail > a {
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 22px 20px;
		border: 1px solid #c8b5a3;
		background: var(--cm26-card);
	}

	.cm-svc-decision-rows.cm-rail > a > em {
		margin-top: auto;
		padding-top: 6px;
	}

	/* ---- Index 03: the handoff chain, on the dark band ---- */
	.cm-svc-connected-chain.cm-rail {
		--cm-rail-w: 78%;
		--cm-rail-gap: 10px;
		align-items: stretch;
		margin-top: 28px;
	}

	.cm-svc-connected .cm-rail-ui { margin-bottom: 26px; }

	/* ---- Index 04: website write-ups ---- */
	.cm-svc-proof-links.cm-rail {
		--cm-rail-w: 84%;
		--cm-rail-gap: 14px;
		gap: var(--cm-rail-gap);
		align-items: stretch;
	}

	/* ---- Service 04: the documented project's device showcase ----
	   The stage bleeds to the screen edges, so the browser frame is cut by
	   the screen and not by a box inside it; the phone leads. */
	.cm-svc-proof .cm-svc-proof-stage {
		margin-inline: calc(-1 * var(--cm26-gutter));
		border-inline: 0;
	}

	.cm-svc-proof .cm-wk-devices { padding-inline: var(--cm26-gutter); }

	.cm-svc-proof .cm-wk-devices-grid.cm-rail {
		display: flex;
		align-items: center;
		gap: 16px;
		margin-inline: calc(-1 * var(--cm26-gutter));
		padding: 22px var(--cm26-gutter) 8px;
		scroll-padding-inline: var(--cm26-gutter);
	}

	.cm-svc-proof .cm-wk-devices-grid.cm-rail > .cm-wk-phone-group {
		order: -1;
		flex: 0 0 min(44%, 190px);
		width: auto;
		margin: 0;
	}

	.cm-svc-proof .cm-wk-devices-grid.cm-rail > .cm-wk-desktop {
		order: 0;
		flex: 0 0 94%;
	}

	/* The bezel, notch and top-anchored crop come from --wk-* tokens and a
	   .cm-wk-prefixed rule that only exist on the work gallery; without them
	   the phone was a bare, letterboxed screenshot. Same values, scoped here. */
	.cm-svc-proof .cm-wk-devices {
		--wk-phone: #302d2b;
		--wk-phone-ring: #74695e;
		--wk-screen: #d9cfc3;
	}

	.cm-svc-proof .cm-wk-devices-grid.cm-rail .cm-wk-phone-screen img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 50% 0;
	}

	/* The caption is one long host name under a narrow phone; the stage head
	   and the desktop meta line carry the same facts. Kept for screen readers,
	   as on the homepage hero and the work cover. */
	.cm-svc-proof .cm-wk-devices-grid.cm-rail .cm-wk-phone-caption {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* The showcase's narrow-screen rules shrink the browser bar to 6px type
	   for a frame squeezed beside the phone; on the rail the frame is nearly
	   full width again. The --wk-* tokens live on the work gallery only, so
	   the bar is given a ground here too. */
	.cm-svc-proof .cm-wk-devices-grid.cm-rail .cm-wk-browser { background: var(--wk-browser, var(--cm26-card)); }

	.cm-svc-proof .cm-wk-devices-grid.cm-rail .cm-wk-browser-bar {
		gap: 10px;
		padding: 9px 12px;
		font-size: 9px;
	}

	.cm-svc-proof .cm-wk-devices-grid.cm-rail .cm-wk-browser-dots { gap: 4px; }

	.cm-svc-proof .cm-wk-devices-grid.cm-rail .cm-wk-browser-dots i {
		width: 5px;
		height: 5px;
		background: var(--wk-dots, var(--cm26-line));
	}

	/* ---- Service 04 (no project): planning-decision rows -> cards ---- */
	.cm-svc-lab.cm-rail {
		--cm-rail-w: 82%;
		--cm-rail-gap: 12px;
		align-items: stretch;
		border-top: 0;
	}

	.cm-svc-lab.cm-rail > .cm-svc-lab-row {
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 22px 20px;
		border: 1px solid var(--cm-svc-rule);
		background: var(--cm26-card);
	}

	/* The label is the card's footnote; it sits at the bottom of every card. */
	.cm-svc-lab.cm-rail > .cm-svc-lab-row > span { margin-top: auto; }

	/* ---- Service 05: the working approach, dark band ---- */
	.cm-svc-process .cm-svc-process-steps.cm-rail {
		--cm-rail-w: 76%;
		--cm-rail-gap: 12px;
		display: flex;
		align-items: stretch;
		margin: 30px calc(-1 * var(--cm26-gutter)) 0;
		padding: 4px var(--cm26-gutter) 10px;
	}

	.cm-svc-process .cm-svc-process-steps.cm-rail > li {
		padding: 20px;
		border: 1px solid #726050;
	}

	.cm-svc-process .cm-svc-process-steps.cm-rail > li > span { font-size: 28px; }
	.cm-svc-process .cm-svc-process-steps.cm-rail h3 { margin-top: 14px; }

	/* ---- Service overview: the ACF card grids ---- */
	.cm-svc-item-grid.cm-rail {
		--cm-rail-w: 78%;
		--cm-rail-gap: 12px;
		gap: var(--cm-rail-gap);
		align-items: stretch;
	}

	/* Logos / specialties carry less text; more of the next one shows. */
	.cm-svc-item-grid.cm-rail[data-cm-rail="specialty"],
	.cm-svc-item-grid.cm-rail[data-cm-rail="award"] { --cm-rail-w: 64%; }

	.cm-svc-gallery-grid.cm-rail,
	.cm-svc-ba-grid.cm-rail {
		--cm-rail-w: 86%;
		--cm-rail-gap: 12px;
		gap: var(--cm-rail-gap);
	}

	/* ---- Recent project write-ups ---- */
	.cm-svc-projects-grid.cm-rail {
		--cm-rail-w: 84%;
		--cm-rail-gap: 14px;
		gap: var(--cm-rail-gap);
		align-items: stretch;
	}

	/* Cards stretch to the longest one; a three-line excerpt keeps a short
	   write-up from sitting on half a card of blank space. */
	.cm-svc-projects-grid.cm-rail .cm-pcard-excerpt {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	/* ---- Service hero: the primary button ----
	   cm_svc_hero_actions_html() passes an arrow icon, and every .cm-btn-primary
	   already draws its caret, so the button showed two arrows. */
	.cm-svc-page .cm-btn-primary > .cm-icon { display: none; }
}


/* ###########################################################################
   SOFTWARE
   ######################################################################## */

/* ---------------------------------------------------------------------------
   MOBILE RAILS: software (/software/ and single-software.php)

   Phones only. The /software/ product cards, MediaHub's partner benefits,
   and a record's screenshots, plans and testimonials become swipe rails
   (the shared .cm-rail primitive above). The cm-sw-* lists set their own
   display / margin / padding at (0,2,0), which outranks the primitive's
   (0,1,0) .cm-rail, so the rail geometry is restated here at (0,3,0).
   ------------------------------------------------------------------------ */

@media (max-width: 767.98px) {
	/* ---- /software/: product cards ---- */
	.cm-prod-grid.cm-rail { --cm-rail-w: 84%; gap: 14px; }

	/* ---- single: shared rail geometry for the cm-sw-* grids ---- */
	.cm-sw .cm-sw-partner-rows.cm-rail,
	.cm-sw .cm-sw-shots.cm-rail,
	.cm-sw .cm-sw-plan-grid.cm-rail,
	.cm-sw .cm-sw-quote-grid.cm-rail {
		display: flex;
		gap: var(--cm-rail-gap);
		margin-inline: calc(-1 * var(--cm26-gutter));
		padding-inline: var(--cm26-gutter);
	}

	/* A record with a single screen, plan or review: nothing to swipe to,
	   so the one card takes the full row instead of leaving a blank peek. */
	.cm-prod-grid.cm-rail > :only-child,
	.cm-sw .cm-sw-shots.cm-rail > :only-child,
	.cm-sw .cm-sw-plan-grid.cm-rail > :only-child,
	.cm-sw .cm-sw-quote-grid.cm-rail > :only-child { flex-basis: 100%; }

	/* MediaHub: hairline rows -> separate benefit cards. */
	.cm-sw .cm-sw-partner-rows.cm-rail { --cm-rail-w: 82%; border-top: 0; }

	.cm-sw .cm-sw-partner-rows.cm-rail > li {
		grid-template-columns: minmax(0, 1fr);
		align-content: start;
		gap: 12px;
		padding: 22px 20px;
		border: 1px solid var(--sw-edge);
		background: var(--sw-plate-2);
	}

	/* .cm-sw-partner's 28px row gap would push the strip off its cards. */
	.cm-sw .cm-sw-partner > .cm-rail-ui { margin-top: -18px; }

	/* Screens: big enough to read, the next one peeking. */
	.cm-sw .cm-sw-shots.cm-rail { --cm-rail-w: 86%; }

	/* Plans: equal-height cards; room underneath for the featured shadow. */
	.cm-sw .cm-sw-plan-grid.cm-rail {
		--cm-rail-w: 84%;
		align-items: stretch;
		padding-block: 4px 30px;
	}

	.cm-sw .cm-sw-plan-grid + .cm-rail-ui { margin-top: -10px; }
	.cm-sw .cm-sw-plan.cm-sw-plan { padding: 26px 22px; }

	/* Testimonials. */
	.cm-sw .cm-sw-quote-grid.cm-rail { --cm-rail-w: 86%; }
	.cm-sw .cm-sw-quote-grid.cm-rail .cm-sw-quote blockquote p { font-size: 16px; line-height: 1.7; }

	/* ---- product bar: one swipeable line instead of two wrapped rows ----
	   It bleeds to the screen edges so the clipped last name reads as "more
	   this way"; single-software.php scrolls the current product into view.
	   The wider end padding lets the last name scroll clear of the fade. */
	.cm-sw .cm-sw-bar .cm-sw-bar-list {
		flex-wrap: nowrap;
		align-self: stretch;
		width: auto;
		gap: 0 24px;
		margin-inline: calc(-1 * var(--cm26-gutter));
		padding-inline: var(--cm26-gutter) calc(var(--cm26-gutter) + 12px);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-padding-inline: var(--cm26-gutter);
		-webkit-overflow-scrolling: touch;
		-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
		mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
	}

	/* ---- tap targets ---- */
	.cm-sw .cm-sw-card-foot .cm-sw-card-orig { min-height: 44px; }
	.cm-sw .cm-sw-glance-links a { display: flex; align-items: center; min-height: 40px; }
	.cm-sw .cm-sw-glance-links.cm-sw-glance-links { gap: 0; }
}


/* ###########################################################################
   PORTFOLIO
   ######################################################################## */

/* ---------------------------------------------------------------------------
   MOBILE RAILS - portfolio family
   (template-parts/work-gallery.php, template-parts/work-devices.php,
   single-portfolio.php)

   Swipe rows below 768px:
     .cm-wk-devices-grid  the /portfolio/ cover: phone first, the desktop frame
                          cut by the showcase edge until swiped in (< 640px,
                          the homepage hero treatment)
     .cm-wk-stories       "The details make the difference" story cards
     .cm-pf-shot-devices  a project's hero frame, when it has a phone capture
     .cm-pf-metrics / .cm-pf-gallery / .cm-pf-ba-list / .cm-pf-list /
     .cm-pf-team / .cm-pf-related   the project page's card rows

   Deliberately NOT rails:
     .cm-wk-grid          the complete archive is the browse-everything index
                          (24 a page, filterable, paginated); it becomes a
                          compact two-column grid instead of one long stack.
     .cm-wk-industry-list a list of text links, not cards.
     the story showcases  they already sit inside a swipe row; a rail inside a
                          rail fights the finger, so phone and desktop overlap
                          in one static composition, desktop cut by the edge.

   cm-interior.css loads after cosmick-2026.css, and its (0,1,0) grid rules
   (.cm-pf-metrics, .cm-wk-devices-grid ...) beat the shared (0,1,0) .cm-rail
   base, so the rail layout is restated here at (0,2,0).
   --------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
	.cm-wk-stories.cm-rail,
	.cm-pf-metrics.cm-rail,
	.cm-pf-gallery.cm-rail,
	.cm-pf-ba-list.cm-rail,
	.cm-pf-list.cm-rail,
	.cm-pf-team.cm-rail,
	.cm-pf-related.cm-rail {
		display: flex;
		flex-wrap: nowrap;
		grid-template-columns: none;
		gap: var(--cm-rail-gap);
		margin-inline: calc(-1 * var(--cm26-gutter));
		padding-inline: var(--cm26-gutter);
		overflow-x: auto;
	}

	/* ---- /portfolio/: selected story cards ---- */
	.cm-wk-stories.cm-rail { --cm-rail-w: 86%; align-items: stretch; }

	.cm-wk-stories.cm-rail > .cm-wk-story {
		display: flex;
		flex-direction: column;
		margin-top: 0;
	}

	.cm-wk-stories.cm-rail .cm-wk-story-copy {
		flex: 1 1 auto;
		padding: 24px 20px 26px;
	}

	.cm-wk-stories.cm-rail .cm-wk-story-copy h3 {
		margin-block: 14px 16px;
		font-size: 26px;
	}

	/* Even card heights: the summary is clamped, the link sits on the floor. */
	.cm-wk-stories.cm-rail .cm-wk-story-copy > p:not(.cm-wk-label) {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 4;
		overflow: hidden;
	}

	.cm-wk-stories.cm-rail .cm-wk-read { margin-top: auto; padding-top: 18px; }
	.cm-wk-selected .cm-wk-stories + .cm-rail-ui { margin-top: 16px; }

	/* Story showcase: one composition, no nested swipe. The desktop frame sits
	   right and runs off the card edge (.cm-wk-devices clips it); the phone
	   stands in front of its left corner. Both share one grid cell. */
	.cm-wk-stories .cm-wk-devices { padding: 18px 16px 22px; }

	.cm-wk-stories .cm-wk-devices-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		padding-top: 22px;
	}

	.cm-wk-stories .cm-wk-devices-grid > * { grid-area: 1 / 1; }

	/* Same frame width with or without a phone, and the phone stands on the
	   frame's floor rather than hanging below it, so every card's art panel
	   is the same height and the labels under it line up across the row. */
	.cm-wk-stories .cm-wk-desktop {
		width: 108%;
		margin-left: 22%;
	}

	.cm-wk-stories .cm-wk-devices--solo .cm-wk-desktop { margin-left: 0; }

	.cm-wk-stories .cm-wk-phone-group {
		position: relative;
		z-index: 1;
		align-self: end;
		width: 34%;
		margin-top: 0;
	}

	.cm-wk-stories .cm-wk-phone {
		box-shadow:
			0 0 0 1px var(--wk-phone-ring),
			0 18px 30px -12px rgba(41, 39, 37, .55);
	}

	/* The head already says what is on screen and the card names the project;
	   the two small captions would only crowd the overlap. Kept for screen
	   readers. */
	.cm-wk-stories .cm-wk-phone-caption,
	.cm-wk-stories .cm-wk-desktop > p {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* ---- /portfolio/: the complete archive, compact two-up ---- */
	.cm-wk .cm-wk-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 26px 14px;
	}

	.cm-wk .cm-wk-card { padding-bottom: 16px; }

	.cm-wk .cm-wk-card-art {
		aspect-ratio: 1.5 / 1;
		padding: 10px;
	}

	.cm-wk .cm-wk-card-art .cm-wk-ph { font-size: 13px; }

	.cm-wk .cm-wk-card-topline {
		padding-block: 10px 6px;
		font-size: 9px;
	}

	/* "Project write-up /" does not fit a half-width card; ordinal + year do. */
	.cm-wk .cm-wk-card-kind { display: none; }

	.cm-wk .cm-wk-card h3 {
		font-size: 15.5px;
		line-height: 1.3;
		letter-spacing: -.02em;
	}

	/* The whole card is the link; the square arrow is decoration that would
	   take a third of the title's line. */
	.cm-wk .cm-wk-card-arrow { display: none; }

	.cm-wk .cm-wk-card-copy {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		margin-top: 6px;
		overflow: hidden;
		font-size: 12.5px;
		line-height: 1.55;
	}

	/* ---- project page: card rows ---- */

	/* cosmick-modern.css clips every <section> (`section { overflow: hidden }`),
	   so each chapter cut its rail at the column edge instead of the screen
	   edge. The outer .cm-section still clips, so the page cannot overflow. */
	.cm-pf-body .cm-pf-chapter { overflow: visible; }

	.cm-pf-metrics.cm-rail { --cm-rail-w: 66%; }
	.cm-pf-gallery.cm-rail { --cm-rail-w: 84%; }
	.cm-pf-ba-list.cm-rail { --cm-rail-w: 86%; }
	.cm-pf-list.cm-rail    { --cm-rail-w: 78%; }
	.cm-pf-team.cm-rail    { --cm-rail-w: 62%; }
	.cm-pf-related.cm-rail { --cm-rail-w: 82%; }

	/* Sparse records are common (one metric, one gallery screen): a lone card
	   has nothing to swipe to, so it takes the full width, not a peek width. */
	:is(.cm-pf-metrics, .cm-pf-gallery, .cm-pf-ba-list, .cm-pf-list, .cm-pf-team, .cm-pf-related).cm-rail > :only-child { flex-basis: 100%; }

	/* Cards in a row read as a set when they are the same height. */
	.cm-pf-gallery.cm-rail > li,
	.cm-pf-related.cm-rail > * { display: flex; }

	.cm-pf-gallery.cm-rail > li > .cm-pf-gallery-item,
	.cm-pf-related.cm-rail > * > .cm-card { flex: 1 1 auto; }

	.cm-pf-metrics.cm-rail + .cm-rail-ui { margin-top: -18px; margin-bottom: 28px; }

	/* The shared `.cm-aside-card ul { display: grid }` stretches every
	   technology / tag chip to the card's full width; they are chips. */
	.cm-split-aside .cm-aside-card .cm-pf-chiplist,
	.cm-split-aside .cm-aside-card .cm-pf-flags { display: flex; }

	/* The same (0,1,1) rule zeroes the flags' own 16px top margin, so the
	   "Case study" chips sat glued to the last fact; and the zero-margin
	   aside title left each list touching its heading. */
	.cm-split-aside .cm-aside-card .cm-pf-flags { margin-top: 18px; }

	.single-portfolio .cm-split-aside .cm-aside-title + :is(.cm-pf-facts, .cm-pf-chiplist) { margin-top: 14px; }
}

/* Project facts: seven short label/value pairs were a 700px stack on a phone;
   two-up halves it. Rules sit on top of each pair now (the first row has
   none), so a half-filled last row never leaves a stray divider. Not below
   360px, where a 120px column would wrap every date and place name. */
@media (min-width: 360px) and (max-width: 767.98px) {
	.cm-split-aside .cm-pf-facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px 20px;
	}

	.cm-split-aside .cm-pf-facts > div {
		align-content: start;
		padding: 14px 0 0;
		border-top: 1px solid var(--cm26-line);
		border-bottom: 0;
	}

	.cm-split-aside .cm-pf-facts > div:nth-child(-n+2) {
		padding-top: 0;
		border-top: 0;
	}
}

/* ---- the two device benches, phone-first swipe (< 640px) ---- */
@media (max-width: 639.98px) {
	/* /portfolio/ cover. The showcase pads 16px a side here; the rail undoes
	   that so the desktop frame is cut by the showcase edge, not the column. */
	.cm-wk-cover-media .cm-wk-devices-grid.cm-rail {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 14px;
		margin-inline: -16px;
		padding: 22px 16px 14px;
		scroll-padding-inline: 16px;
		overflow-x: auto;
	}

	.cm-wk-cover-media .cm-wk-devices-grid.cm-rail > .cm-wk-phone-group {
		flex-basis: 42%;
		margin-top: 0;
	}

	.cm-wk-cover-media .cm-wk-devices-grid.cm-rail > .cm-wk-desktop { flex-basis: 94%; }

	/* The caption is one long host name in a 10px column; the head and the
	   desktop meta line carry the same facts. Kept for screen readers. */
	.cm-wk-cover-media .cm-wk-devices-grid.cm-rail .cm-wk-phone-caption {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* Project page hero with a phone capture: the drafting-paper mount goes
	   edge to edge, so the desktop frame is cut by the screen edge. */
	.single-portfolio .cm-pf-shot.cm-pf-shot--devices {
		margin-inline: calc(-1 * var(--cm26-gutter));
		padding: 0 0 18px;
		border-inline: 0;
		border-radius: 0;
	}

	.cm-pf-shot--devices .cm-pf-shot-devices.cm-rail {
		align-items: center;
		gap: 14px;
		margin-inline: 0;
		padding: 22px var(--cm26-gutter) 10px;
	}

	.cm-pf-shot--devices .cm-pf-shot-devices.cm-rail > .cm-pf-shot-phone { flex-basis: 40%; }
	.cm-pf-shot--devices .cm-pf-shot-devices.cm-rail > .cm-pf-shot-inner { flex-basis: 94%; }

	.cm-pf-shot--devices .cm-rail-ui,
	.cm-pf-shot--devices .cm-pf-shot-caption { padding-inline: var(--cm26-gutter); }

	/* Both benches sit on a light paper: ink controls, not the card style. */
	:is(.cm-wk-cover-media, .cm-pf-shot--devices) .cm-rail-ui { margin-top: 4px; }
	:is(.cm-wk-cover-media, .cm-pf-shot--devices) .cm-rail-track { background: rgba(41, 39, 37, .18); }
	:is(.cm-wk-cover-media, .cm-pf-shot--devices) .cm-rail-thumb { background: #292725; }
	:is(.cm-wk-cover-media, .cm-pf-shot--devices) .cm-rail-btn {
		border-color: rgba(41, 39, 37, .35);
		background: rgba(251, 248, 245, .9);
	}
}

/* 640-767: both devices fit side by side again; undo the swipe there. */
@media (min-width: 640px) and (max-width: 767.98px) {
	.cm-wk-cover-media .cm-wk-devices-grid.cm-rail {
		margin-inline: 0;
		padding-inline: 0;
		overflow: visible;
	}

	.cm-pf-shot--devices .cm-pf-shot-devices.cm-rail {
		display: grid;
		grid-template-columns: minmax(0, .3fr) minmax(0, 1fr);
		align-items: center;
		gap: 18px;
		margin-inline: 0;
		padding: 0;
		overflow: visible;
	}

	:is(.cm-wk-cover-media, .cm-pf-shot--devices) .cm-rail-ui { display: none; }
}

/* The project page's phone bezel borrows the gallery's .cm-wk-phone classes,
   whose tokens and image rule are scoped to .cm-wk; restated for this frame. */
@media (max-width: 767.98px) {
	.cm-pf-shot-phone {
		--wk-phone: #302d2b;
		--wk-phone-ring: #74695e;
		--wk-screen: #d9cfc3;
		min-width: 0;
	}

	.cm-pf-shot-phone .cm-wk-phone-screen img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 50% 0;
	}
}


/* ###########################################################################
   TEAM
   ######################################################################## */

/* ---------------------------------------------------------------------------
   MOBILE RAILS - team family (single-team.php)

   Two card rows on a team profile swipe sideways below 768px:
     .cm-team-more      "More of the team" portraits (was a 2-up grid of 5,
                        three rows tall with an orphan)
     .cm-team-projects  "Projects <name> worked on" cards (was one tall stack)

   Deliberately NOT rails:
     .cm-team-roster    /team/ is the browse-everything index of the whole
                        team; it stays a compact two-column grid so every face
                        is reachable by scrolling, not by swiping 15 times.
     .cm-tg             the photo wall keeps its own count-driven layout and
                        swipeable lightbox (assets/css/cm-team-gallery.css).
   --------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
	/* cm-interior.css loads after cosmick-2026.css and its (0,1,0)
	   `.cm-team-more { display: grid }` beats the shared (0,1,0) `.cm-rail`
	   base, so the rail's layout is restated here at (0,2,0). */
	.cm-team-more.cm-rail,
	.cm-team-projects.cm-rail {
		display: flex;
		flex-wrap: nowrap;
		grid-template-columns: none;
		margin-inline: calc(-1 * var(--cm26-gutter));
		padding-inline: var(--cm26-gutter);
		overflow-x: auto;
	}

	/* Portraits: about two and a half visible, so the third peeks in. */
	.cm-team-more.cm-rail {
		--cm-rail-w: 44%;
		--cm-rail-gap: 14px;
		gap: var(--cm-rail-gap);
	}

	.cm-team-more.cm-rail .cm-team-name {
		margin-top: 12px;
		font-size: 16px;
	}

	/* The projects rail sits in the profile's .cm-split reading column, a
	   grid item whose min-width:auto would grow to the rail's full scroll
	   width and push the whole column off the screen. */
	.cm-split > :has(> .cm-team-block > .cm-team-projects) { min-width: 0; }

	/* Project cards: one card wide, the next one's edge visible. */
	.cm-team-projects.cm-rail {
		--cm-rail-w: 86%;
		--cm-rail-gap: 14px;
		gap: var(--cm-rail-gap);
		align-items: stretch;
	}

	.cm-team-projects.cm-rail > .cm-pcard {
		display: flex;
		flex-direction: column;
	}

	/* A single project has nothing to swipe to: let it fill the column. */
	.cm-team-projects.cm-rail > .cm-pcard:only-child { flex-basis: 100%; }

	/* Even card heights on the row: the summary is clamped to three lines. */
	.cm-team-projects.cm-rail .cm-pcard-excerpt {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}
}


/* ###########################################################################
   AREAS
   ######################################################################## */

/* ---- Areas (single-area.php, archive-area.php) ------------------------------
   Area pages: hero stats, featured services, nearby communities, why-choose
   benefits and local reviews swipe on phones (single-area.php only adds the
   rail when a section has two or more cards). The /areas-we-serve/ index is a
   paginated browse list of every record, so it stays a list.
   --------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	/* Stats: .cm-area-stats is an auto-fit grid; on the rail each stat takes
	   under half the row so two-and-a-bit show and the third peeks in. */
	.cm-area-stats.cm-rail { --cm-rail-w: 46%; }

	/* Services / communities / benefits: big cards, equal height on the row. */
	.cm-area-grid.cm-rail {
		--cm-rail-w: 84%;
		--cm-rail-gap: 14px;
		gap: var(--cm-rail-gap);
		align-items: stretch;
	}

	/* Community cards carry a name, a distance and one line or two of copy,
	   so they are narrower and more of the next one shows. */
	.cm-area-grid.cm-rail[data-cm-rail="community"] { --cm-rail-w: 72%; }

	.cm-area-grid.cm-rail > .cm-area-card { padding: 22px; }

	/* Reviews: the shared .cm-rev-grid.cm-rail width; cards keep their surface
	   but drop to the homepage's tighter padding on a ~300px card. */
	.cm-area-reviews.cm-rail { --cm-rail-w: 86%; gap: 14px; align-items: stretch; }
	.cm-area-reviews.cm-rail > .cm-rev { padding: 24px 22px; }

	/* .cm-card's shadow falls ~20px below the card; the rail clips at its own
	   padding box (overflow-x: auto), so give the shadow room and pull the
	   control strip back up by the same amount. */
	.cm-area-grid.cm-rail,
	.cm-area-reviews.cm-rail { padding-block: 4px 24px; }

	.cm-area-grid.cm-rail + .cm-rail-ui,
	.cm-area-reviews.cm-rail + .cm-rail-ui { margin-top: -6px; }

	/* Index rows: the whole row is the link; a roomier tap area on phones. */
	.cm-arow-list .cm-arow { min-height: 64px; }
}


/* ###########################################################################
   COMPANY
   ######################################################################## */

/* ===========================================================================
   MOBILE RAILS — company pages (2026-10)
   /our-history/, /careers/, /customer-support/, /reviews/

   Phones only (below 768px); desktop is untouched. Builds on the shared
   .cm-rail primitive (MOBILE RAILS block above): short groups of like cards
   become swipe rows. Long sequences stay vertical on purpose: the history
   timeline is a story read top to bottom with its own sticky decade bar, the
   application and ticket forms are forms, and /reviews/ is a filterable index
   of every published review (66 on production) — a rail of 66 is a chore.
   =========================================================================== */

@media (max-width: 767.98px) {

	/* ---- History: "Our values" — six numbered tiles ----------------------
	   The list's own rule is (0,3,1) and resets margin/padding, so the rail's
	   display, bleed and padding are restated here. */
	body.page-template-page-history .cm-hx .cm-hx-values-list.cm-rail {
		--cm-rail-w: max(52%, 172px); /* "communication" needs ~140px of text */
		--cm-rail-gap: 12px;
		display: flex;
		gap: var(--cm-rail-gap);
		margin-inline: calc(-1 * var(--cm26-gutter));
		padding: 4px var(--cm26-gutter) 10px;
	}

	/* Number on top, name below: a tile reads better than a row this narrow. */
	body.page-template-page-history .cm-hx .cm-hx-values-list.cm-rail > li.cm-hx-value {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		min-height: 0;
		padding: 20px 18px;
	}

	/* The strip lands in .cm-hx-values-grid, whose 28px row gap would push it
	   away from the tiles it controls. */
	.cm-hx-values-grid > .cm-rail-ui { margin-top: -16px; }

	/* ---- Careers: 15+ / 27+ / Thousands ------------------------------------
	   Ruled rows become a stat strip, like the homepage facts. The section's
	   (0,2,0) rules set display and margin, so those are restated here. */
	.cm-cr .cm-cr-facts.cm-rail {
		--cm-rail-w: 46%;
		--cm-rail-gap: 0px;
		display: flex;
		gap: 0;
		margin-block-start: 18px;
		margin-inline: calc(-1 * var(--cm26-gutter));
		padding: 4px var(--cm26-gutter) 10px;
		border-top: 0;
	}

	/* "Thousands" is wider than a 46% tile on a 320px phone: let a tile grow
	   to fit its figure rather than spill into the next one. */
	.cm-cr .cm-cr-facts.cm-rail > .cm-cr-fact {
		flex: 0 0 auto;
		min-width: var(--cm-rail-w);
		flex-direction: column-reverse;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 6px;
		padding: 16px 18px;
		border-bottom: 0;
		border-left: 1px solid var(--cm26-line);
	}

	/* The blocks are <section>s, and cosmick-modern.css clips every section;
	   that would cut both rails at the column edge instead of the screen's. */
	.cm-cr .cm-cr-rail > .cm-cr-block { overflow: visible; }

	.cm-cr .cm-cr-facts.cm-rail > .cm-cr-fact:first-child { padding-left: 0; border-left: 0; }
	.cm-cr .cm-cr-facts.cm-rail .cm-cr-fact dd { min-width: 0; font-size: 28px; }
	.cm-cr .cm-cr-facts.cm-rail .cm-cr-fact dt { font-size: 14px; line-height: 1.4; }

	/* ---- Careers: "Why join" — icon rows become cards ---------------------- */
	.cm-cr .cm-cr-benefits.cm-rail {
		--cm-rail-w: 80%;
		--cm-rail-gap: 12px;
		display: flex;
		gap: var(--cm-rail-gap);
		margin-block-start: 22px;
		margin-inline: calc(-1 * var(--cm26-gutter));
		padding: 4px var(--cm26-gutter) 10px;
	}

	.cm-cr .cm-cr-benefits.cm-rail > .cm-cr-benefit {
		grid-template-columns: minmax(0, 1fr);
		align-content: start;
		gap: 14px;
		padding: 22px 20px;
		border: 1px solid var(--cm26-line);
		border-radius: var(--cm26-radius-card);
		background: var(--cm26-card);
	}

	/* ---- Customer support: "How can we help" option cards ------------------
	   The list's own (0,2,1) rule zeroes margin and padding; restate the bleed. */
	main.cm-sp .cm-sp-options.cm-rail {
		--cm-rail-w: 80%;
		--cm-rail-gap: 12px;
		display: flex;
		gap: var(--cm-rail-gap);
		margin-inline: calc(-1 * var(--cm26-gutter));
		padding: 4px var(--cm26-gutter) 10px;
	}

	main.cm-sp .cm-sp-options.cm-rail > .cm-sp-option { padding: 24px 22px 22px; }

	/* "Services impacted": four one-word checkboxes sit two to a row where the
	   words fit on one line (a 390px phone), one to a row on narrower ones. */
	main.cm-sp .cm-ticket .cm-multi-select-group {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr));
		gap: 10px;
	}

	main.cm-sp .cm-ticket .cm-multi-select-group > .cm-multi-select-option {
		gap: 8px;
		margin: 0;
		padding-inline: 10px;
	}

	main.cm-sp .cm-ticket .cm-multi-select-option > label { font-size: 15px; white-space: nowrap; }

	/* The submit row's 30px padding is an inline style, so cm-support.css's
	   override never applies; it squeezed the full-width button to two lines. */
	main.cm-sp .cm-ticket form > div[style] { padding: 12px 0 4px !important; }

	/* ---- Reviews: a phone-sized index ------------------------------------
	   A legacy mobile rule (mobile-adjustments.css, for the old header) pads
	   #primary 100px at the top, leaving a blank band above the page head. */
	body.page-template-page-reviews main#primary.cm-main { padding-top: 0 !important; }

	/* Slightly tighter cards and leading so the full list scrolls less. */
	body.page-template-page-reviews .cm-pages-revgrid { gap: 14px; }
	body.page-template-page-reviews .cm-pages-revgrid > .cm-pages-rev { padding: 22px 20px; }
	body.page-template-page-reviews .cm-pages-rev .cm-rev-quote { line-height: 1.7; }

	/* Filter chips and "Add your review" are the page's main controls: give
	   them a full 44px finger target. */
	body.page-template-page-reviews .cm-pages-filters .cm-btn,
	body.page-template-page-reviews .cm-pages-toolbar .cm-btn { min-height: 44px; }

	/* The permalink is a 21px text link; pad its hit area without moving it. */
	body.page-template-page-reviews .cm-pages-rev .cm-rev-by a {
		display: inline-block;
		margin-block: -12px;
		padding-block: 12px;
	}
}


/* ###########################################################################
   CONTACT
   ######################################################################## */

/* ===========================================================================
   MOBILE RAILS - contact family (2026-10)

   Pages: /contact/ (page-contact.php), /business-card/, /bundled-marketing/ and
   /cgap-terms/ (page-cgap.php), /kinsta-agency-elite-partner/, /thank-you/,
   and the generic page.php pages (legal, /newsletter/ ...).

   Card rows on these pages become swipe rails below 768px (see the MOBILE
   RAILS block in cosmick-2026.css for the primitive). Everything here sits in
   a max-width query, so desktop is untouched.

   The three legacy landing pages wrap content in Bootstrap's .container, not
   .cm-wrap; its side padding equals --cm26-gutter at every phone width
   (20px at 320, 30.4px at 760), so the primitive's bleed lines up as-is.
   =========================================================================== */

@media (max-width: 767.98px) {

	/* The landing pages' own sheets (business-card.css, cgap.css,
	   kinsta-partner.css) are <link>s in the template body, so they print
	   after this file and their equal-specificity grid rules would win; the
	   rail's layout is restated here at (0,2,0). */
	.bc-services-grid.cm-rail,
	.bc-portfolio-grid.cm-rail,
	.cgap-results-grid.cm-rail,
	.kinsta-elite-grid.cm-rail,
	.kinsta-results-grid.cm-rail,
	.kinsta-features-grid.cm-rail,
	.kinsta-plans-grid.cm-rail {
		display: flex;
		gap: var(--cm-rail-gap);
		margin-inline: calc(-1 * var(--cm26-gutter));
		padding-inline: var(--cm26-gutter);
		overflow-x: auto;
	}

	/* ---- Contact: "Other ways to reach us" -------------------------------
	   Call us + one card per location + Already a client?. (0,5,2) beats
	   cm-contact.css's card-stack margin (0,4,2). */
	.cm-ct-rail.cm-rail { --cm-rail-w: 86%; --cm-rail-gap: 12px; }

	body.page-template-page-contact main .cm-split-aside.cm-rail > .cm-aside-card { padding: 22px; }

	body.page-template-page-contact main .cm-split-aside.cm-rail > .cm-aside-card + .cm-aside-card { margin-top: 0; }

	/* The dark Call us card is shorter than the address cards it now sits
	   beside; centre its two lines instead of leaving them at the top. */
	body.page-template-page-contact main .cm-split-aside.cm-rail > .cm-aside-card:first-child {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	/* The strip is a grid item of .cm-split; take back its row gap. */
	.cm-ct .cm-split > .cm-rail-ui { margin-top: -30px; }

	/* ---- Contact: "Our locations" map cards ----
	   cm-contact.css's (0,2,0) grid rule also sets display, margin and padding,
	   so the rail's own values are restated at (0,3,0). */
	.cm-ct-maps .cm-ct-map-grid.cm-rail {
		--cm-rail-w: 84%;
		--cm-rail-gap: 14px;
		display: flex;
		margin: 24px calc(-1 * var(--cm26-gutter)) 0;
		padding: 4px var(--cm26-gutter) 10px;
	}

	/* The map cards' h3 still carried style.css's h3 margins (a 60px hole
	   under the city), and the kind label had no style outside the rail. */
	.cm-ct-maps .cm-ct-map-body .cm-ct-card-title {
		margin: 0;
		padding: 0;
		font-size: 19px;
		line-height: 1.4;
		letter-spacing: -.015em;
		text-transform: none;
	}

	.cm-ct-maps .cm-ct-map-body .cm-ct-card-kind {
		margin: 4px 0 0;
		font-family: var(--cm26-font-display);
		font-size: 12px;
		font-weight: 700;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: var(--cm26-brand-ink);
	}

	/* ---- Contact: "What happens next" (ruled steps, like the facts strip) ---- */
	.cm-ct .cm-pages-steps.cm-rail {
		--cm-rail-w: 66%;
		--cm-rail-gap: 20px;
		margin-inline: calc(-1 * var(--cm26-gutter));
		padding: 4px var(--cm26-gutter) 10px;
	}

	.cm-ct .cm-pages-steps.cm-rail > li {
		margin: 0;
		padding: 18px 0 4px;
		border-bottom: 0;
	}

	/* ---- Business card ------------------------------------------------- */

	/* Two or three figures sit side by side instead of a 300px stack. */
	.bc-stats .bc-stats-grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.bc-stats .bc-stat-item { padding: 0 4px; }
	.bc-stats .bc-stat-label { font-size: .75rem; letter-spacing: .06em; }

	.bc-services-grid.cm-rail { --cm-rail-w: 84%; --cm-rail-gap: 14px; }
	.bc-portfolio-grid.cm-rail { --cm-rail-w: 84%; --cm-rail-gap: 14px; padding-block: 4px 18px; }

	/* Cards lift on hover; on a rail that lift would be clipped. */
	.bc-services-grid.cm-rail > .bc-service-card:hover,
	.bc-portfolio-grid.cm-rail > .bc-portfolio-item:hover { transform: none; }

	/* style.css's h3 { padding-bottom: 27px } leaks into the card titles. */
	.business-card-page .bc-service-title,
	.business-card-page .bc-portfolio-title { padding-bottom: 0; }

	/* Review dots: 12px targets get a 44px-tall hit area, same dot. */
	.bc-testimonial .bc-carousel-dots { gap: 14px; }
	.bc-testimonial .bc-carousel-dot { position: relative; }

	.bc-testimonial .bc-carousel-dot::after {
		content: "";
		position: absolute;
		inset: -16px -7px;
	}

	/* 180px of empty band under the closing buttons. */
	.business-card-page .bc-final-cta { padding: 64px 0 72px; }

	/* ---- CGAP (bundled marketing) --------------------------------------
	   Four of these rows already scrolled sideways through
	   mobile-adjustments.css, with !important on every property and no
	   gutter bleed, peek or controls. They now use the shared rail; the
	   !important below only answers that file's own !important and can go
	   once its "4. CGAP PAGE" carousel blocks are deleted. */
	.cgap-page-wrapper .cm-rail {
		gap: var(--cm-rail-gap) !important;
		margin-inline: calc(-1 * var(--cm26-gutter)) !important;
		padding: 18px var(--cm26-gutter) 22px !important;
	}

	.cgap-page-wrapper .cm-rail > * {
		flex: 0 0 var(--cm-rail-w) !important;
		min-width: 0 !important;
		scroll-snap-align: start !important;
	}

	/* The cards' 0 10px 30px shadow reaches 40px below them; the rail clips
	   at its 22px bottom padding, which drew a hard grey edge under the row. */
	.cgap-page-wrapper .cm-rail .cgap-pillar-card,
	.cgap-page-wrapper .cm-rail .pricing-tier,
	.cgap-page-wrapper .cm-rail .step-content { box-shadow: 0 6px 14px rgba(0, 0, 0, .08); }

	/* Hover lifts and the featured tier's scale would be clipped by the rail. */
	.cgap-page-wrapper .cm-rail > *:hover,
	.cgap-page-wrapper .cm-rail .cgap-comparison-card:hover { transform: none; }

	/* Old way / Cosmick way: Bootstrap columns become the two cards. */
	.cgap-comparison-grid .row.cm-rail { --cm-rail-w: 86%; --cm-rail-gap: 14px; }
	.cgap-comparison-grid .row.cm-rail > * { padding-inline: 0; }

	.cgap-comparison-grid .row.cm-rail .cgap-comparison-card {
		height: 100%;
		margin-bottom: 0;
		padding: 28px 22px;
	}

	.cgap-pillars-grid.cm-rail { --cm-rail-w: 86%; --cm-rail-gap: 14px; margin-top: 32px; }

	.cgap-social-stats .row.cm-rail { --cm-rail-w: 72%; --cm-rail-gap: 14px; }
	.cgap-social-stats .row.cm-rail > * { padding-inline: 0; }
	.cgap-social-stats .row.cm-rail .social-stat-card { height: 100%; padding: 28px 20px; }

	.cgap-journey-timeline.cm-rail { --cm-rail-w: 78%; --cm-rail-gap: 14px; }

	/* The steps' cards sat 60px under their icons (cgap.css, !important). */
	.cgap-page-wrapper .cm-rail .step-content { margin: 18px 0 0 !important; }
	.cgap-journey-timeline.cm-rail .journey-step { margin-bottom: 0; }

	.cgap-pricing-table.cm-rail { --cm-rail-w: 84%; --cm-rail-gap: 14px; margin-top: 32px; }

	/* Room for the "Most Popular" flag, which sits 15px above its card. */
	.cgap-page-wrapper .cgap-pricing-table.cm-rail { padding-top: 26px !important; }

	.cgap-process-steps.cm-rail { --cm-rail-w: 72%; --cm-rail-gap: 14px; }
	.cgap-process-steps.cm-rail .process-step { min-height: 0; }

	.cgap-results-grid.cm-rail { --cm-rail-w: 78%; --cm-rail-gap: 14px; margin-top: 32px; }

	/* style.css's h3 { padding-bottom: 27px; margin-bottom: 35px } leaked into
	   every card title on this page. */
	.cgap-page-wrapper h3 { padding-bottom: 0; }
	.cgap-page-wrapper .mediahub-feature h3 { margin-bottom: 6px; }

	/* ---- Kinsta Elite partner ------------------------------------------ */

	/* Hero figures: one row of three instead of two-plus-one. */
	.kinsta-hero-text .kinsta-hero-stats {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 10px;
	}

	.kinsta-hero-stats .kinsta-stat-item { padding-left: 10px; }
	.kinsta-hero-stats .kinsta-stat-item .stat-label { font-size: .72rem; line-height: 1.35; }

	/* Tier ladder: the three tiers side by side, as a ladder reads. */
	.kinsta-elite-section .kinsta-tier-ladder {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
		max-width: none;
		margin-bottom: 40px;
	}

	.kinsta-elite-section .kinsta-tier-ladder .kinsta-tier-step {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 16px 6px;
		border-radius: 14px;
	}

	.kinsta-elite-section .kinsta-tier-ladder .kinsta-tier-name { margin: 0 0 2px; font-size: 1.05rem; }
	.kinsta-elite-section .kinsta-tier-ladder .kinsta-tier-meta { font-size: .75rem; line-height: 1.3; }

	.kinsta-elite-grid.cm-rail { --cm-rail-w: 80%; --cm-rail-gap: 14px; padding-block: 4px 22px; }
	.kinsta-features-grid.cm-rail { --cm-rail-w: 82%; --cm-rail-gap: 14px; padding-block: 4px 22px; }

	.kinsta-results-grid.cm-rail { --cm-rail-w: 46%; --cm-rail-gap: 12px; }
	.kinsta-results-grid.cm-rail > .kinsta-result-card { padding: 24px 14px; }
	.kinsta-results-grid.cm-rail .kinsta-result-value { font-size: 2rem; }
	.kinsta-results-grid.cm-rail .kinsta-result-label { font-size: .78rem; }

	/* Plans: room above for the "What we run" flag; no scale on the rail. */
	.kinsta-plans-grid.cm-rail { --cm-rail-w: 86%; --cm-rail-gap: 14px; padding-block: 26px 22px; }
	.kinsta-plans-grid.cm-rail > .kinsta-plan-card.is-featured { transform: none; }

	/* Same clipped-shadow edge as on the CGAP rails: keep it inside the
	   rail's 22px bottom padding. */
	.kinsta-elite-grid.cm-rail > *,
	.kinsta-features-grid.cm-rail > *,
	.kinsta-plans-grid.cm-rail > * { box-shadow: 0 6px 14px rgba(0, 0, 0, .08); }

	.kinsta-elite-grid.cm-rail > *:hover,
	.kinsta-features-grid.cm-rail > *:hover,
	.kinsta-results-grid.cm-rail > *:hover,
	.kinsta-plans-grid.cm-rail > *:hover { transform: none; }

	/* "Talk to us about migrating" sat flush under step 03. */
	.kinsta-managed-text .kinsta-managed-steps + .kinsta-hero-actions { margin-top: 28px; }

	/* ---- Generic pages and Thank you ------------------------------------
	   style.css's h3 { padding-bottom: 27px; margin-bottom: 35px } opened a
	   62px hole under every h3 in the stored body; .cm-prose spaces by
	   margin-top, so the bottom is zeroed. Wide tables scroll in place. */
	.cm-pages-article .cm-prose h3,
	.cm-pages-confirm .cm-prose h3 {
		margin-bottom: 0;
		padding-bottom: 0;
	}

	/* (0,4,2): cm-interior.css sets width: 100% at (0,4,1) (its :is() counts as a class). */
	body.page .cm-main .cm-pages-article .cm-prose table,
	body.page .cm-main .cm-pages-confirm .cm-prose table {
		display: block;
		width: max-content; /* the block hugs its cells, so no empty table ground beside them */
		max-width: 100%;
		overflow-x: auto;
	}

	/* The card's first heading kept its 45px top margin under the check. */
	.cm-pages-confirm .cm-prose > :first-child { margin-top: 0; }

	/* Thank you: the three onward links as one even, full-width stack, in a
	   card whose 32px inset left "Back to the homepage" wrapping at 320. */
	.cm-main .cm-pages-confirm { padding: 24px 20px; }

	.cm-pages-confirm .cm-row > .cm-btn {
		width: 100%;
		justify-content: center;
		padding-inline: 16px;
	}
}


/* ###########################################################################
   BLOG
   ######################################################################## */

/* ---------------------------------------------------------------------------
   MOBILE RAILS - blog family (home.php / page-blog.php, single.php,
   archive.php, search.php, 404.php)

   One card row swipes sideways below 768px:
     .cm-bl-related-grid  "More from the blog" under an article (was three
                          full-width boxed cards stacked ~1,900px tall)

   Deliberately NOT rails (indexes and navigation), made phone-friendly instead:
     .cm-bl-list          the blog index / category archive is the
                          browse-everything list; on phones each story becomes
                          a compact row (thumbnail beside meta + title, two-line
                          excerpt under both), so nine stories fit in about
                          two screens instead of seven.
     search results       same compact row treatment for .cm-pcard results.
     404 destinations     a link list; rows are re-centred and shortened.

   Also: share tags, the contents toggle and pagination reach 44px tap
   targets, and the search band's field and button share one row.
   --------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
	/* ---- Related articles: one card wide, the next card's edge in view. */
	/* display restated: cm-blog.css sets grid at (0,1,0) and prints after
	   cosmick-2026.css, so the base .cm-rail flex would lose to it. */
	.cm-bl-related-grid.cm-rail {
		display: flex;
		--cm-rail-w: 82%;
		--cm-rail-gap: 14px;
		gap: var(--cm-rail-gap);
	}

	.cm-bl-related-grid.cm-rail > .cm-bl-card { display: flex; flex-direction: column; }

	/* The section head stacks its link under the title on phones; tighten
	   the gap to the rail it introduces. */
	.cm-bl-related .cm-section-head { margin-bottom: 20px; }

	/* ---- Story list: compact rows instead of full-width cards. ----------
	   The body's children join the card's grid (display: contents) so the
	   excerpt can run under the thumbnail as well as the title. The stretched
	   title link still covers the whole row. */
	.cm-bl-page .cm-bl-list { gap: 0; }

	.cm-bl-page .cm-bl-list > .cm-bl-card {
		display: grid;
		grid-template-columns: 112px minmax(0, 1fr);
		grid-template-rows: auto auto 1fr;
		column-gap: 14px;
		align-content: start;
		padding: 18px 0;
	}

	.cm-bl-page .cm-bl-list > .cm-bl-card:first-child { padding-top: 0; }

	.cm-bl-page .cm-bl-list > .cm-bl-card > .cm-bl-frame {
		grid-column: 1;
		grid-row: 1 / span 3;
		align-self: start;
		aspect-ratio: 4 / 3;
		border-radius: 4px;
	}

	/* The placeholder's rings are drawn in px for a full card; redraw them
	   at thumbnail scale. */
	.cm-bl-page .cm-bl-list .cm-bl-frame-ph {
		aspect-ratio: 4 / 3;
		background:
			radial-gradient(circle at 50% 50%, var(--cm-bl-brand) 0 5px, transparent 5.5px),
			radial-gradient(circle at 50% 50%, transparent 0 19px, rgba(184, 53, 43, .32) 19.5px 20.5px, transparent 21px),
			radial-gradient(circle at 50% 50%, transparent 0 35px, rgba(184, 53, 43, .18) 35.5px 36.5px, transparent 37px),
			linear-gradient(135deg, #f3ede7 0%, #eadcd0 100%);
	}

	.cm-bl-page .cm-bl-list .cm-bl-frame-ph-mark { width: 7px; height: 7px; margin: -22px 0 0 11px; }

	.cm-bl-page .cm-bl-list .cm-bl-card-body { display: contents; }

	.cm-bl-page .cm-bl-list .cm-bl-meta { grid-column: 2; grid-row: 1; line-height: 1.4; }

	/* (0,4,0): cm-blog.css's archive title rule is (0,3,0) and prints later. */
	.cm-bl-page .cm-bl-list > .cm-bl-card .cm-bl-card-title {
		grid-column: 2;
		grid-row: 2;
		margin-top: 4px;
		font-size: 17px;
		line-height: 1.3;
		letter-spacing: -.02em;
	}

	.cm-bl-page .cm-bl-list .cm-bl-excerpt {
		grid-column: 1 / -1;
		grid-row: 4;
		margin-top: 10px;
		font-size: 14px;
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}

	/* Archive cards set the body to a plain block; the row needs contents. */
	.cm-bl-page .cm-bl-archive .cm-bl-list .cm-bl-card-body { display: contents; }

	.cm-bl-page .cm-bl-lead { margin-bottom: 26px; }
	.cm-bl-page .cm-bl-lead-body { padding: 22px 20px 24px; }
	.cm-bl-page .cm-bl-pagination { margin-top: 32px; }

	/* ---- Tap targets ---------------------------------------------------- */
	/* Each one prefixed once over cm-blog.css, which prints after this. */
	.cm-bl-page .cm-bl-pagination .page-numbers { min-width: 44px; height: 44px; }
	.cm-bl-page .cm-bl-pagination .page-numbers.prev,
	.cm-bl-page .cm-bl-pagination .page-numbers.next { min-height: 44px; }

	.cm-bl-post .cm-bl-share { gap: 10px; }
	.cm-bl-post .cm-bl-share .cm-bl-share-tag { height: 44px; padding: 0 16px; font-size: 13.5px; }

	/* Padding, not flex: the summary keeps display:list-item and its marker. */
	.cm-bl-post .cm-bl-toc summary { min-height: 44px; padding-block: 14px; box-sizing: border-box; }
	.cm-bl-post .cm-bl-toc { padding-block: 8px; }

	/* ---- Search results: compact rows, like the story list. ------------- */
	body.search .cm-section .cm-grid-2 { gap: 12px; }

	body.search .cm-grid-2 > .cm-pcard {
		display: grid;
		grid-template-columns: 104px minmax(0, 1fr);
		column-gap: 14px;
		align-items: start;
		padding: 12px;
	}

	body.search .cm-grid-2 > .cm-pcard .cm-pcard-media { padding: 0; }
	body.search .cm-grid-2 > .cm-pcard .cm-media-frame { aspect-ratio: 4 / 3; border-radius: 6px; }
	body.search .cm-grid-2 > .cm-pcard .cm-pcard-placeholder { padding: 8px; font-size: 11px; }
	body.search .cm-grid-2 > .cm-pcard .cm-pcard-body { padding: 0; }
	body.search .cm-grid-2 > .cm-pcard .cm-pcard-body::before { display: none; }
	body.search .cm-grid-2 > .cm-pcard .cm-pmeta { margin: 0; font-size: 12px; }
	body.search .cm-grid-2 > .cm-pcard .cm-pcard-title { margin-top: 2px; font-size: 16px; line-height: 1.3; }

	body.search .cm-grid-2 > .cm-pcard .cm-pcard-excerpt {
		display: -webkit-box;
		margin-top: 6px;
		overflow: hidden;
		font-size: 13.5px;
		line-height: 1.55;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}

	/* Field and button on one line: the field's 240px basis wrapped the
	   button onto its own row on every phone. */
	body.search .cm-searchbar { flex-wrap: nowrap; }
	body.search .cm-searchbar .cm-input { flex: 1 1 0; }
	body.search .cm-searchbar .cm-btn { padding-inline: 18px; }

	/* ---- 404 ------------------------------------------------------------ */
	/* The lede sat flush under the H1. */
	.error404 .cm-404-grid .cm-lede { margin-top: 16px; }

	/* The rows were display:block from the aside-card list rule, so each
	   label sat at the top of a 66px box with the chevron beside it. */
	.error404 .cm-aside-card .cm-linkrows a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 54px;
		padding: 4px 0;
	}

	.error404 .cm-aside-card .cm-aside-title { margin-bottom: 4px; }
}

/* Small phones: a narrower thumbnail keeps the title's measure readable. */
@media (max-width: 359.98px) {
	.cm-bl-page .cm-bl-list > .cm-bl-card { grid-template-columns: 92px minmax(0, 1fr); column-gap: 12px; }
	.cm-bl-page .cm-bl-list > .cm-bl-card .cm-bl-card-title { font-size: 16px; }
	body.search .cm-grid-2 > .cm-pcard { grid-template-columns: 84px minmax(0, 1fr); }
	body.search .cm-searchbar .cm-btn { padding-inline: 14px; }
	.cm-bl-related-grid.cm-rail { --cm-rail-w: 86%; }

	/* The 33px clamp floor set long headlines six lines deep at 320. */
	.cm-bl-post .cm-bl-post-head .cm-bl-post-title { font-size: 29px; }
}

/* Below ~380px "Share" plus three 44px tags no longer fit on one line and
   Email wrapped alone; give the label its own line, the tags an even row. */
@media (max-width: 379.98px) {
	.cm-bl-post .cm-bl-share .cm-bl-share-label { flex: 0 0 100%; }
	.cm-bl-post .cm-bl-share .cm-bl-share-tag { flex: 1 1 0; justify-content: center; padding: 0 8px; }
}