/**
 * responsive.css — the breakpoint system. Work unit W8.1.
 *
 * 01-PLAN.md §5 option B, signed off by Pramod: desktop at >= 1240px is
 * PIXEL-LOCKED to the design, and below that the layout collapses by the
 * mechanical rules in 02-DESIGN-CONTRACT.md §4.1. No new visual language, no new
 * components beyond the nav drawer, no re-styling.
 *
 * EVERY RULE IN THIS FILE IS INSIDE A max-width MEDIA QUERY, and that is not a
 * stylistic preference — it is the only thing making the desktop guarantee
 * mechanical. The gates run at 1440 and 1280, both above 1240, so a rule that
 * escaped its media query would be caught by them; a rule that never escapes
 * cannot affect them at all.
 *
 * !important IS USED DELIBERATELY, AND ONLY HERE. The design styles everything
 * inline — it came from a design tool that emits style attributes — and an inline
 * declaration outranks any stylesheet selector. Collapsing a grid the design wrote
 * as `style="grid-template-columns:1.05fr 0.95fr"` is therefore impossible without
 * it. This is the one file where that is true, and the media query keeps the blast
 * radius to widths no gate measures.
 *
 * Breakpoints: 1240 · 1024 · 768 · 480 (§4.1).
 */

/* -------------------------------------------------------------------------
 * 1240 — the edge of the locked range
 * ---------------------------------------------------------------------- */

@media (max-width: 1239px) {
	/*
	 * §4.1 rule 4: a fixed pixel width wider than the viewport becomes fluid.
	 * Media elements first, since they are the ones that force a horizontal
	 * scrollbar on the whole document rather than just overflowing their box.
	 */
	img,
	svg,
	video,
	canvas {
		max-width: 100%;
	}

	/*
	 * NO GLOBAL `overflow-x: hidden` HERE, deliberately. It was in the first draft
	 * and it is the wrong tool: it hides a sideways scroll rather than removing its
	 * cause, it can break `position: sticky` in descendants, and it would have
	 * concealed the 111px header overflow found at 375px instead of surfacing it.
	 * Anything that genuinely needs to scroll sideways gets its own
	 * `overflow-x: auto` in its own unit, per §4.1 rule 5.
	 */
}

/* -------------------------------------------------------------------------
 * 1024 — tablet: columns collapse, padding tightens
 * ---------------------------------------------------------------------- */

@media (max-width: 1024px) {
	/*
	 * §4.1 rule 1: multi-column grids become one column IN SOURCE ORDER. Never
	 * reordered — the design's reading order is the content's argument, and a
	 * `direction` or `order` trick here would silently rearrange the reasoning on
	 * every page.
	 *
	 * COLLAPSED AT 1024 RATHER THAN 1239, deliberately. §4.1 lists four
	 * breakpoints without saying which one owns rule 1, and between 1240 and 1025
	 * a two-column grid still has room. Rule 3 says the design's own clamp()
	 * values are its responsive intent and they work — so that band is left to
	 * them, and the columns break where they would actually become cramped.
	 *
	 * EXCEPT THE STATEMENT SHEET. Its header and seven rows are ten-column grids
	 * that ARE the table; collapsing them stacks every cell into a 4,000px column
	 * of account numbers. It had been happening since W8.2 and went unnoticed
	 * while the sheet was scaled to a third of its size; once M3 let it scroll at
	 * full size it was the first thing on screen. Rule 5 says this construct
	 * scrolls, and a scrolling construct keeps its columns (Phase 1 QA
	 * remediation, M3). Complex :not() is fine here: every browser this project
	 * checks has had it since 2021.
	 */
	[style*="grid-template-columns"]:not([data-ref="stmt-sheet"] *) {
		/*
		 * minmax(0, 1fr) AND NOT 1fr, which is not a style preference — `1fr` is
		 * shorthand for minmax(auto, 1fr), and an `auto` minimum refuses to shrink
		 * below the item's min-content width. The homepage pathway diagram is
		 * authored at a fixed 880px, so a `1fr` track simply grew to 880px inside a
		 * 335px column and the diagram never scaled down at all.
		 *
		 * The design already knew this: every grid it writes uses minmax(0, ...)
		 * for precisely this reason. The blanket rule was throwing that away.
		 */
		grid-template-columns: minmax(0, 1fr) !important;
	}

	/* Row gaps stay; a collapsed grid keeps its rhythm from the design's own gap. */

	/*
	 * §4.1 rule 2: container padding 40px -> 32px. Matched on the design's own
	 * declaration so only the page containers move, not every padded box.
	 */
	[style*="padding:clamp(44px,5.5vh,64px) 40px"],
	[style*="padding:clamp(48px,6vh,76px) 40px"],
	[style*="padding:clamp(56px,7vh,84px) 40px"],
	[style*="padding: clamp(44px, 5.5vh, 64px) 40px"],
	[style*="padding: clamp(48px, 6vh, 76px) 40px"] {
		padding-left: 32px !important;
		padding-right: 32px !important;
	}

	/*
	 * §4.1 rule 8: sticky elements unstick. A sticky rail in a single-column
	 * layout follows the reader down an otherwise empty column, which is worse
	 * than not having it.
	 */
	[style*="position:sticky"],
	[style*="position: sticky"] {
		position: static !important;
	}
}

/* -------------------------------------------------------------------------
 * 640 — wide constructs scroll rather than reflow (§4.1 rule 5)
 * ---------------------------------------------------------------------- */

@media (max-width: 639px) {
	/*
	 * §4.1 rule 5: "Horizontally-scrolling constructs ... get overflow-x: auto with
	 * momentum scrolling, NOT reflow."
	 *
	 * THE HOMEPAGE PATHWAY DIAGRAM IS NOT DECORATIVE, which is why it is here and
	 * not with the canvases above. Its waypoints ARE the six services —
	 * Credentialing, Eligibility, Coding, Claims, Denials, Payment Posting — with
	 * their descriptions. It is the only place on the page they appear.
	 *
	 * _jwResize scales the 880px artwork to fit its container, which is right down
	 * to about 640px and wrong below it: at 375px the scale lands at 0.38 and six
	 * service names render at roughly a third of their size, which is present but
	 * unreadable. Undoing the transform and letting the strip scroll keeps them at
	 * full size and costs a swipe.
	 */
	[data-ref="jw-wrap"] {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		height: auto !important;
	}

	[data-ref="jw-canvas"] {
		transform: none !important;
	}

	/*
	 * The six consulting panels are a flex strip, not a grid, so rule 1 never
	 * touched them: at 375px they were 35 to 66px wide apiece with vertical text —
	 * six unreadable slivers. A min-width restores each to a usable size and the
	 * strip scrolls, which keeps the component exactly as designed rather than
	 * restyling it into something else.
	 */
	/*
	 * BOTH NEED !important, and the first attempt without it changed nothing at
	 * all: the design sets `overflow: hidden` on the strip and `min-width: 0` on
	 * every panel INLINE, and an inline declaration outranks any selector. The
	 * computed values still read `hidden` and `0px` while the stylesheet said
	 * otherwise — which looks like a rule that did not load rather than one that
	 * lost, and is worth checking with getComputedStyle rather than by eye.
	 */
	[data-ca-root] {
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
	}

	[data-ca-root] > [data-ca] {
		min-width: 260px !important;
	}
}

/* -------------------------------------------------------------------------
 * 640 — the decorative canvases come out (§4.1 rule 6)
 * ---------------------------------------------------------------------- */

@media (max-width: 639px) {
	/*
	 * §4.1 rule 6: "if the container is under 640px the canvas is hidden and the
	 * underlying step content stacks. The canvas is decorative and carries no
	 * information."
	 *
	 * That last clause is what makes this legitimate rather than a shortcut, and it
	 * was checked rather than taken on trust: the flow diagram draws lines between
	 * the EHR names and the reporting tools, and both are real text in the DOM; the
	 * workflow canvas draws particles behind the three numbered steps, which are
	 * also real text. Nothing is lost by removing them — at 375px the flow canvas
	 * had already compressed to a 335px smudge of overlapping dots.
	 *
	 * aria-hidden already keeps them out of the accessibility tree (§4.2), so this
	 * only changes what is painted.
	 */
	canvas[data-ref="flow-canvas"],
	canvas[data-ref="bp-canvas"] {
		display: none !important;
	}

	/*
	 * The canvases are absolutely positioned inside sections that reserve height for
	 * them. With the canvas gone that reserved height is empty space, so the
	 * containers fall back to their content.
	 */
	[data-ref="flow-canvas"] ~ *,
	[data-ref="bp-canvas"] ~ * {
		position: relative;
	}
}

/* -------------------------------------------------------------------------
 * 900 — the nav drawer takes over (§4.1 rule 7)
 * ---------------------------------------------------------------------- */

@media (max-width: 900px) {
	/*
	 * Header becomes logo + phone + hamburger. The desktop nav and the CTA are
	 * hidden rather than removed: they are the same links the drawer renders, and
	 * a screen reader would otherwise meet the menu twice.
	 */
	[data-rcm-desktop-nav] {
		display: none !important;
	}

	[data-rcm-hamburger] {
		display: inline-flex !important;
	}

	/* The header stops sticking with everything else (§4.1 rule 8). */
	[data-ref="header"] {
		position: absolute !important;
	}

	/*
	 * §4.1 rule 7 says the mobile header is "logo + phone icon + hamburger" — so
	 * the LinkedIn icon and the Let's Talk button come out. Leaving them in is what
	 * pushed 111px of the header past the right edge of a 375px screen on EVERY
	 * page, which is the sort of fault that reads as "the site is broken on phones"
	 * regardless of how good the rest of it is.
	 *
	 * Neither link is lost: the drawer carries the CTA and the phone number, and
	 * the phone icon stays in the header because a tap-to-call is the single most
	 * useful control on a phone.
	 */
	[data-h="header-cta"],
	[data-h="header-cta-accent"],
	[data-h="header-linkedin"] {
		display: none !important;
	}
}

/* The drawer itself. Hidden at every width until JS opens it, and hidden
 * unconditionally above 900px so it can never appear on desktop. */
[data-rcm-drawer] {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: none;
	background: rgba(12, 29, 24, 0.44);
}

[data-rcm-drawer][data-open="true"] {
	display: block;
}

@media (min-width: 901px) {
	[data-rcm-drawer],
	[data-rcm-hamburger] {
		display: none !important;
	}
}

[data-rcm-drawer-panel] {
	position: absolute;
	inset: 0 0 0 auto;
	/*
	 * BORDER-BOX, or the panel is wider than it says. The theme does not set a
	 * global box-sizing, so this was content-box: 330px of width plus 48px of
	 * padding and a 1px border measured 379px on a 375px screen and covered the
	 * viewport edge to edge. The drawer still looked right — it just left no
	 * backdrop to tap, so the only ways out were Escape or a link, and on a phone
	 * there is no Escape key.
	 */
	box-sizing: border-box;
	width: min(88vw, 380px);
	height: 100%;
	background: #FAFAF7;
	border-left: 1px solid rgba(12, 29, 24, 0.1);
	box-shadow: -30px 0 80px -40px rgba(12, 29, 24, 0.5);
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 22px 24px calc(24px + env(safe-area-inset-bottom));
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	font-family: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

[data-rcm-drawer-head] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

[data-rcm-drawer] a,
[data-rcm-drawer] button {
	font-family: inherit;
}

/*
 * §4.1 rule 9: every control here is at least 44x44. The design's desktop nav is
 * a row of 13px text links, which is a fine mouse target and a poor thumb one.
 */
[data-rcm-drawer-link] {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 4px 6px;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: #0C1D18;
	text-decoration: none;
	border-bottom: 1px solid rgba(12, 29, 24, 0.08);
}

[data-rcm-drawer-link][aria-current="page"] {
	color: var(--rcm-accent, #39598C);
}

[data-rcm-drawer-cta] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	margin-top: 16px;
	padding: 14px 24px;
	border-radius: 99px;
	background: var(--rcm-accent, #39598C);
	color: #FFFFFF;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-decoration: none;
}

[data-rcm-drawer-secondary] {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	margin-top: 4px;
	font-size: 15px;
	font-weight: 600;
	color: #566862;
	text-decoration: none;
}

[data-rcm-drawer-close],
[data-rcm-hamburger] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(12, 29, 24, 0.12);
	border-radius: 10px;
	background: transparent;
	color: #0C1D18;
	cursor: pointer;
}

[data-rcm-hamburger] {
	display: none;
}

[data-rcm-drawer-close]:focus-visible,
[data-rcm-hamburger]:focus-visible,
[data-rcm-drawer-link]:focus-visible,
[data-rcm-drawer-cta]:focus-visible,
[data-rcm-drawer-secondary]:focus-visible {
	outline: 2px solid var(--rcm-accent, #39598C);
	outline-offset: 3px;
}

/* The design honours prefers-reduced-motion; the drawer does too (§4.1). */
@media (prefers-reduced-motion: no-preference) {
	[data-rcm-drawer-panel] {
		animation: rcmDrawerIn 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	@keyframes rcmDrawerIn {
		from {
			transform: translateX(14px);
			opacity: 0;
		}
	}
}

/* -------------------------------------------------------------------------
 * 768 and 480 — per-page rules live in W8.2 onward; these are the shared ones
 * ---------------------------------------------------------------------- */

@media (max-width: 480px) {
	/* §4.1 rule 2: 32px -> 20px at the narrowest. */
	[style*="40px"][style*="padding"],
	[style*="32px"][style*="padding"] {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}

/* =========================================================================
 * Phase 1 QA remediation — 2026-09-17. Each block names the finding it closes;
 * the reasoning and the alternatives tried are in DECISIONS.md D50–D51 and the
 * remediation report. Every rule is inside a max-width query below 1240px, so the
 * desktop gates cannot see any of it — that is still the whole guarantee.
 * ====================================================================== */

/* -------------------------------------------------------------------------
 * 1024 — "How It Works" (M1)
 * ---------------------------------------------------------------------- */

@media (max-width: 1024px) {
	/*
	 * The section is `height:100vh` and its steps sit in a `flex:1; min-height:0`
	 * box that CENTRES them. Once rule 1 stacks the three steps into one column
	 * they are taller than the viewport, the box cannot grow, and the trust row
	 * beneath it painted straight over step 03. Releasing the height is the fix;
	 * min-height:100vh still holds, so nothing gets shorter.
	 */
	[data-ref="hiw-section"] {
		height: auto !important;
	}

	/* The trust chips are `flex-wrap:nowrap` and about 1,030px end to end. They
	 * wrap here, and the 1px dividers between them go — a divider makes no sense
	 * between rows. */
	[data-ref="hiw-trust"] {
		flex-wrap: wrap !important;
		row-gap: 12px;
	}

	[data-ref="hiw-trust"] > span {
		display: none !important;
	}

	[data-ref="hiw-trust"] > div {
		white-space: normal !important;
	}
}

/* -------------------------------------------------------------------------
 * 900 — header row, statement sheet, touch targets (H4, M3, L6)
 * ---------------------------------------------------------------------- */

@media (max-width: 900px) {
	/*
	 * H4. With the desktop nav (the row's only flex:1 item) hidden, nothing
	 * pushed the phone-and-hamburger group to the right edge. The group now owns
	 * that job. Above 900px the nav is back and this rule is inert.
	 */
	[data-ref="header-right"] {
		margin-left: auto;
	}

	/*
	 * M3. The solutions statement sheet is a fixed 1,062px table that site.js
	 * scales to its wrapper; at 768px that is 0.66 and its 10px mono type becomes
	 * 7px. 02 §4.1 rule 5 asked for the wide construct to SCROLL, not shrink:
	 * the transform comes off and the wrapper scrolls sideways at full size.
	 * Same shape as the pathway diagram at 640px above. The JS still writes a
	 * transform and a height on resize; !important is what makes them lose here.
	 */
	[data-ref="stmt-wrap"] {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		height: auto !important;
		padding-bottom: 8px;
	}

	[data-ref="stmt-sheet"] {
		transform: none !important;
	}

	/*
	 * L6. Touch targets. The design's text links are 18–20px tall, a fine mouse
	 * target and a poor thumb one. Padding grows the hit area and an equal
	 * negative margin gives the space back, so the rendered layout — and the gap
	 * between neighbouring links — is untouched; only the area that answers a
	 * tap changes. The share buttons are 34px circles whose look is the design's,
	 * so they grow a transparent ::before instead of a bigger circle.
	 */
	[data-h="footer-link"],
	[data-h="footer-legal"],
	[data-h="footer-legal-active"] {
		padding: 6px 0;
		margin: -6px 0;
	}

	[data-h="header-phone"] {
		padding: 12px 8px;
		margin: -12px -8px;
	}

	[data-h="home-blog-more"] {
		padding: 10px 8px;
		margin: -10px -8px;
	}

	[data-h="article-crumb"] {
		padding: 8px 0;
		margin: -8px 0;
	}

	[data-h="article-share"] {
		position: relative;
	}

	[data-h="article-share"]::before {
		content: "";
		position: absolute;
		inset: -5px;
	}
}

/* -------------------------------------------------------------------------
 * 640 — the honeycomb stacks, the flow diagram becomes a list (H5, M2)
 * ---------------------------------------------------------------------- */

@media (max-width: 639px) {
	/*
	 * H5. Four 250px hexagons are absolutely positioned two abreast in a 500px
	 * wrapper; a phone column is 350px, so the right pair was cut off. Scaling the
	 * cluster to fit was tried and rejected: at 390px it is 0.70 and the 13px body
	 * copy becomes 9px. Stacking keeps every hexagon at its designed size, the
	 * copy at its designed size, and the interlocking points (the -22px overlap is
	 * the hexagon's own tip). The background hex-network SVG is drawn for the
	 * two-column layout and is hidden with it.
	 */
	[data-ref="op-cluster"] {
		width: 100% !important;
		max-width: none !important;
		height: auto !important;
		margin-left: 0 !important;
		justify-self: stretch !important;
	}

	[data-ref="op-cluster"] > svg {
		display: none !important;
	}

	[data-ref="op-cluster"] > [data-h="home-hex"] {
		position: relative !important;
		left: auto !important;
		top: auto !important;
		margin: -22px auto 0 !important;
	}

	[data-ref="op-cluster"] > [data-h="home-hex"]:first-of-type {
		margin-top: 0 !important;
	}

	/*
	 * M2. Every node in the "Systems We Work In" diagram is placed by percentage
	 * inside a fixed-height box, and at 350px "Power BI" and "Tableau" landed past
	 * its right edge. The canvas is already gone at this width (rule 6), so the
	 * diagram has no lines left to draw between anything; it becomes what it is —
	 * a list of the seven systems, then the two reporting tools — in source order.
	 * The tool rows' trailing gradient line pointed at the hub and is dropped.
	 */
	[data-ref="flow-diagram"] {
		height: auto !important;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 14px 22px;
	}

	[data-ref="flow-diagram"] > * {
		position: static !important;
		transform: none !important;
	}

	[data-ref="flow-label"] {
		flex-basis: 100%;
		text-align: left !important;
	}

	[data-ref="flow-tool"] > span:last-child {
		display: none !important;
	}
}