/* ==========================================================================
   Redesigned generic content page (2026-08)
   Three modes off one stylesheet: article (.rd-cp), section hub
   (.rd-cp--hub) and submission confirmation (.rd-cp--thanks).

   Deliberately modelled on the application-note / TabPage rules rather than
   inventing a parallel visual language — these are the plainest pages on the
   site and should read as the same system, not a variant of it.
   ========================================================================== */

:root {
	--rd-cp-shell: 1240px;
	--rd-cp-measure: 62em;
}

.rd-cp { background: var(--gm-bg, #fbfbfa); }

/* ---------- Header ---------- */

.rd-cp-head { background: var(--gm-surface, #fff); border-bottom: 1px solid var(--gm-border, #e6eaec); padding: 26px 40px 34px; }
.rd-cp-headmax { max-width: var(--rd-cp-shell); margin-inline: auto; }
.rd-cp-head .rd-breadcrumb { width: 100%; margin: 0 0 26px; }
.rd-cp-kicker { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gm-navy, #003e69); margin-bottom: 12px; }
.rd-cp-title { font-family: 'Space Grotesk', sans-serif; font-size: clamp(31px, 3.3vw, 44px); font-weight: 700; letter-spacing: -0.026em; line-height: 1.07; color: var(--gm-ink, #17242b); margin: 0; text-wrap: balance; }

/* ---------- Body layout ---------- */

.rd-cp-body { display: grid; grid-template-columns: 1fr; gap: 34px; max-width: var(--rd-cp-shell); margin-inline: auto; padding: 40px 40px 0; box-sizing: border-box; }
.rd-cp-main { min-width: 0; }

/* ---------- Prose ---------- */


/* ---------- Long unbroken tokens (2026-08-30) ----------

   Raw URLs and code identifiers pasted as visible text set the column's min-content width
   directly, and a grid track then sizes to it — a 48-character DOI link measured 404px inside a
   320px viewport. `overflow-wrap: anywhere`, NOT `break-word`: only `anywhere` affects intrinsic
   sizing, so break-word leaves the container exactly as wide. It breaks a word only when it would
   otherwise overflow, so ordinary prose is untouched.

   Found by a full 652-page sweep, not by the scan that preceded it — that scan looked for hard
   widths, so it could only ever find the causes already suspected. */
.rd-cp-prose { overflow-wrap: anywhere; }

.rd-cp-prose { max-width: var(--rd-cp-measure); }
.rd-cp-prose p { font-size: 17px; line-height: 1.72; color: var(--gm-body, #47535b); margin: 0 0 16px; }
.rd-cp-prose p:last-child { margin-bottom: 0; }
.rd-cp-prose p:empty { display: none; }
.rd-cp-prose a { color: var(--gm-navy, #003e69); font-weight: 500; }
.rd-cp-prose a:hover { color: var(--gm-navy-hover, #00567f); text-decoration: underline; }
.rd-cp-prose h1 { font-family: 'Space Grotesk', sans-serif; font-size: 25px; font-weight: 700; letter-spacing: -0.02em; color: var(--gm-ink, #17242b); margin: 30px 0 12px; }
.rd-cp-prose h2, .rd-cp-prose h3 { font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 600; letter-spacing: -0.012em; color: var(--gm-ink, #17242b); margin: 28px 0 10px; }
.rd-cp-prose h4, .rd-cp-prose h5, .rd-cp-prose h6 { font-family: 'Space Grotesk', sans-serif; font-size: 16.5px; font-weight: 600; color: var(--gm-ink, #17242b); margin: 22px 0 8px; }
.rd-cp-prose :is(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; }
.rd-cp-prose ul, .rd-cp-prose ol { font-size: 17px; line-height: 1.72; color: var(--gm-body, #47535b); margin: 0 0 16px; padding-left: 1.4em; }
.rd-cp-prose li { margin: 0 0 7px; }
.rd-cp-prose strong, .rd-cp-prose b { color: var(--gm-ink, #17242b); }
/* ...but NOT when the bold sits inside a link. Editors routinely bold a link in the CMS,
   which nests <strong> inside <a>; the rule above then repainted it ink and the link
   stopped looking like a link. On /leader-in-eis/ that left 8 of 10 application links
   rendering as black body text while the 2 unbolded ones stayed navy — the same list,
   two different colours. Inherit keeps the anchor's own colour, bold and all. */
.rd-cp-prose a strong, .rd-cp-prose a b { color: inherit; }
.rd-cp-prose sub, .rd-cp-prose sup { font-size: 0.7em; line-height: 0; }
.rd-cp-prose blockquote { margin: 20px 0; padding: 2px 0 2px 20px; border-left: 3px solid var(--gm-sky, #7bb8dd); color: var(--gm-muted, #5f6b72); }
.rd-cp-prose hr { border: 0; border-top: 1px solid var(--gm-border, #e6eaec); margin: 28px 0; }

/* Legacy bodies carry hardcoded width/height/align attributes and inline styles.
   These pages average one or two images; float them only when the author asked. */
.rd-cp-prose img { max-width: 100%; height: auto; border-radius: 12px; }
.rd-cp-prose img[align="left"], .rd-cp-prose img.left { float: left; margin: 4px 22px 12px 0; }
.rd-cp-prose img[align="right"], .rd-cp-prose img.right { float: right; margin: 4px 0 12px 22px; }
.rd-cp-prose iframe, .rd-cp-prose embed, .rd-cp-prose object { max-width: 100%; border: 0; border-radius: 12px; }
.rd-cp-prose iframe { aspect-ratio: 16 / 9; height: auto; }
.rd-cp-prose [width] { max-width: 100%; }
.rd-cp-prose::after { content: ""; display: table; clear: both; }

/* Figure card for a plot that is a piece of evidence rather than decoration —
   currently the Accuracy Contour Plot on /leader-in-eis/. Same white card, border,
   radius and mono caption as .rd-pd-acp-card on the product pages, so the ACP reads
   the same wherever it appears. The enlarge affordance is the shared overlay
   (css/components/image-zoom.css); GamryContentPage.js wraps the image in the
   trigger button, so with JS off this is still a properly captioned figure rather
   than a dead control.

   Authored in the CMS as: <figure class="rd-cp-acp"><img …><figcaption>…</figcaption></figure> */
.rd-cp-acp { background: #fff; border: 1px solid var(--gm-border, #e6eaec); border-radius: 16px; padding: 16px; margin: 24px 0; max-width: 620px; }
.rd-cp-acp img { width: 100%; height: auto; display: block; border-radius: 10px; }
.rd-cp-acp figcaption { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gm-muted, #5f6b72); margin-top: 12px; line-height: 1.4; }

/* Tables on these pages are small (a few rows of specs or contacts), but they still
   need their own scroll container so a wide one never pushes the page sideways. */
.rd-cp-prose table { width: 100%; max-width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 15.5px; display: block; overflow-x: auto; }
.rd-cp-prose table tbody { display: table; width: 100%; }
.rd-cp-prose th, .rd-cp-prose td { padding: 10px 14px; border-bottom: 1px solid var(--gm-border-row, #f4f6f7); text-align: left; vertical-align: top; }
.rd-cp-prose th { font-family: 'Space Grotesk', sans-serif; font-weight: 600; color: var(--gm-ink, #17242b); }
.rd-cp-prose td { color: var(--gm-body, #47535b); }

.rd-cp-empty { font-size: 16px; color: var(--gm-faint, #6c7981); font-style: italic; margin: 0; }

/* ---------- Third-party embed (SharpSpring forms, review widget) ---------- */

.rd-cp-embed { max-width: var(--rd-cp-measure); }
.rd-cp-embed--after { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--gm-border, #e6eaec); }
/* The injected markup is outside our control and ships its own widths — the same
   trap that produced 28px of horizontal overflow on the Applications pages. */
.rd-cp-embed, .rd-cp-embed * { max-width: 100%; box-sizing: border-box; }
.rd-cp-embed input, .rd-cp-embed select, .rd-cp-embed textarea { max-width: 100%; box-sizing: border-box; }
.rd-cp-embed .columnContainer, .rd-cp-embed .emptyContainer { width: auto !important; max-width: 100% !important; float: none !important; }

/* ---------- Widget rail ---------- */

.rd-cp-rail { min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.rd-cp-widget { background: var(--gm-surface, #fff); border: 1px solid var(--gm-border, #e6eaec); border-radius: 16px; padding: 22px; overflow: hidden; }
.rd-cp-widget h3, .rd-cp-widget h4 { font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 600; color: var(--gm-ink, #17242b); margin: 0 0 12px; }
.rd-cp-widget p { font-size: 14.5px; line-height: 1.6; color: var(--gm-body, #47535b); margin: 0 0 10px; }
.rd-cp-widget p:last-child { margin-bottom: 0; }
.rd-cp-widget a { color: var(--gm-navy, #003e69); font-weight: 500; }
.rd-cp-widget img { max-width: 100%; height: auto; border-radius: 10px; }
.rd-cp-widget, .rd-cp-widget * { max-width: 100%; box-sizing: border-box; }
.rd-cp-widget input, .rd-cp-widget select, .rd-cp-widget textarea { width: 100%; max-width: 100%; box-sizing: border-box; border: 1px solid var(--gm-border-ctl, #d5dcdf); border-radius: 9px; padding: 10px 12px; font-size: 15px; font-family: inherit; }
.rd-cp-widget input[type=submit], .rd-cp-widget button { width: 100%; background: var(--gm-navy, #003e69); color: #fff; font-weight: 600; border: 0; border-radius: 10px; padding: 12px 16px; cursor: pointer; }
.rd-cp-widget input[type=submit]:hover, .rd-cp-widget button:hover { background: var(--gm-navy-hover, #00567f); }
.rd-cp-widget input:focus, .rd-cp-widget select:focus, .rd-cp-widget textarea:focus { outline: none; border-color: var(--gm-sky, #7bb8dd); box-shadow: 0 0 0 3px rgba(123,184,221,.35); }
.rd-cp-widget label { display: block; font-size: 13px; font-weight: 500; color: var(--gm-muted, #5f6b72); margin-bottom: 4px; }
.rd-cp-widget .columnContainer, .rd-cp-widget .emptyContainer { width: auto !important; max-width: 100% !important; float: none !important; }

/* ---------- Back link + to-top ---------- */

.rd-cp-back { display: flex; justify-content: center; padding: 52px 40px 60px; }
.rd-cp-back a { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--gm-border-ctl, #d5dcdf); background: var(--gm-surface, #fff); color: var(--gm-navy, #003e69); font-weight: 600; font-size: 15px; padding: 13px 24px; border-radius: 999px; }
.rd-cp-back a:hover { border-color: var(--gm-navy, #003e69); background: var(--gm-tint, #f4f7fa); text-decoration: none; }
.rd-cp:not(.rd-cp--hub) .rd-cp-body:last-of-type { padding-bottom: 60px; }

.rd-cp-totop { position: fixed; right: 24px; bottom: 24px; z-index: 34; width: 46px; height: 46px; border-radius: 999px; background: var(--gm-navy, #003e69); color: #fff; display: flex; align-items: center; justify-content: center; border: 0; cursor: pointer; box-shadow: 0 4px 16px rgba(23,36,43,.24); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease, visibility .18s; }
.rd-cp-totop.show { opacity: 1; visibility: visible; transform: none; }
.rd-cp-totop:hover { background: var(--gm-navy-hover, #00567f); color: #fff; }
.rd-cp-totop:focus-visible { outline: 3px solid rgba(123,184,221,.55); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .rd-cp-totop { transition: none; } }

/* ==========================================================================
   Hub mode — Applications (7), Support (9), About Us (92)
   ========================================================================== */

.rd-cp-hub-headrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; }
.rd-cp-hub-headmain { min-width: 0; }
.rd-cp-intro { margin-top: 18px; max-width: 56em; display: flow-root; }
.rd-cp-intro p { font-size: 18px; line-height: 1.65; color: var(--gm-body, #47535b); margin: 0 0 12px; }
.rd-cp-intro p:last-child { margin-bottom: 0; }
.rd-cp-intro p:empty { display: none; }
.rd-cp-intro a { color: var(--gm-navy, #003e69); font-weight: 500; }
.rd-cp-intro img { float: left; width: 120px; height: auto; margin: 2px 22px 10px 0; border-radius: 10px; }

.rd-cp-hub-count { flex: 0 0 auto; text-align: right; }
.rd-cp-hub-count-n { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 40px; font-weight: 700; line-height: 1; color: var(--gm-navy, #003e69); font-variant-numeric: tabular-nums; }
.rd-cp-hub-count-l { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gm-faint, #6c7981); margin-top: 6px; }

.rd-cp-hub-gridwrap { padding: 40px 40px 0; }
.rd-cp-hub-gridmax { max-width: var(--rd-cp-shell); margin-inline: auto; }
.rd-cp-hub-grid { grid-template-columns: repeat(auto-fill, minmax(min(288px, 100%), 1fr)); }
.rd-cp-hub-card { display: flex; }
.rd-cp-hub-card-body { display: flex; flex-direction: column; padding: 20px; width: 100%; }
.rd-cp-hub-card-title { display: block; }
.rd-cp-hub-card-desc { display: block; flex: 1 1 auto; }
.rd-cp-hub-card-link { display: block; margin-top: auto; }
.rd-cp-hub-card:hover { border-color: var(--gm-navy, #003e69); box-shadow: 0 18px 40px rgba(23,36,43,0.12); transform: translateY(-3px); text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .rd-cp-hub-card { transition: none; } .rd-cp-hub-card:hover { transform: none; } }

.rd-cp-hub-embedwrap { padding: 40px 40px 0; max-width: var(--rd-cp-shell); margin-inline: auto; box-sizing: border-box; }
.rd-cp-hub-promos { padding: 44px 40px 0; }
.rd-cp-hub-promos-inner { max-width: var(--rd-cp-shell); margin-inline: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 22px; }
.rd-cp--hub { padding-bottom: 64px; }

/* ==========================================================================
   Confirmation mode — 16 post-submission pages
   ========================================================================== */

.rd-cp--thanks { display: flex; align-items: flex-start; justify-content: center; padding: 64px 24px 88px; min-height: 46vh; box-sizing: border-box; }
.rd-cp-thanks-wrap { width: 100%; max-width: 660px; }
.rd-cp-thanks-panel { background: var(--gm-surface, #fff); border: 1px solid var(--gm-border, #e6eaec); border-radius: 20px; padding: 44px 44px 40px; text-align: center; }
.rd-cp-thanks-mark { width: 52px; height: 52px; border-radius: 999px; background: var(--gm-tint, #f4f7fa); color: var(--gm-navy, #003e69); display: flex; align-items: center; justify-content: center; margin: 0 auto 22px; }
.rd-cp-thanks-title { font-family: 'Space Grotesk', sans-serif; font-size: clamp(26px, 2.6vw, 33px); font-weight: 700; letter-spacing: -0.022em; line-height: 1.12; color: var(--gm-ink, #17242b); margin: 0; text-wrap: balance; }
.rd-cp-thanks-prose { margin-top: 16px; }
.rd-cp-thanks-prose p { font-size: 16.5px; line-height: 1.7; color: var(--gm-body, #47535b); margin: 0 0 12px; }
.rd-cp-thanks-prose p:last-child { margin-bottom: 0; }
.rd-cp-thanks-prose p:empty { display: none; }
.rd-cp-thanks-prose a { color: var(--gm-navy, #003e69); font-weight: 500; }
.rd-cp-thanks-prose a:hover { color: var(--gm-navy-hover, #00567f); text-decoration: underline; }
.rd-cp-thanks-prose ul, .rd-cp-thanks-prose ol { display: inline-block; text-align: left; font-size: 16px; line-height: 1.7; color: var(--gm-body, #47535b); margin: 4px 0 12px; padding-left: 1.3em; }
.rd-cp-thanks-prose img { max-width: 100%; height: auto; border-radius: 10px; }
/* Its own scroll box, like .rd-cp-prose table above. One of these pages carries a 450px authored
   table, which is wider than a 320px viewport whatever the type size. (2026-08-30) */
.rd-cp-thanks-prose table { margin-inline: auto; border-collapse: collapse; font-size: 15.5px; display: block; max-width: 100%; overflow-x: auto; }
.rd-cp-thanks-prose table tbody { display: table; width: 100%; }
.rd-cp-thanks-prose th, .rd-cp-thanks-prose td { padding: 8px 12px; text-align: left; }

/* The embedded preferences form is a real interaction, so it is left-aligned inside
   the centred panel — centred labels and inputs read as decoration. */
.rd-cp-embed--thanks { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--gm-border, #e6eaec); text-align: left; }

.rd-cp-thanks-actions { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; }
.rd-cp-thanks-btn { display: inline-flex; align-items: center; background: var(--gm-navy, #003e69); color: #fff; font-weight: 600; font-size: 15px; padding: 13px 26px; border-radius: 10px; }
.rd-cp-thanks-btn:hover { background: var(--gm-navy-hover, #00567f); color: #fff; text-decoration: none; }
.rd-cp-thanks-link { font-size: 15px; font-weight: 500; color: var(--gm-navy, #003e69); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (min-width: 1000px) {
	.rd-cp-body { grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; }
	.rd-cp-main { grid-column: 1; }
	.rd-cp-rail { grid-column: 2; position: sticky; top: 24px; }
}

@media (max-width: 999px) {
	.rd-cp-body { padding: 32px 24px 0; gap: 28px; }
	.rd-cp-head { padding: 22px 24px 28px; }
	.rd-cp-hub-gridwrap, .rd-cp-hub-embedwrap, .rd-cp-hub-promos { padding-left: 24px; padding-right: 24px; }
	.rd-cp-back { padding: 40px 24px 52px; }
}

@media (max-width: 720px) {
	.rd-cp-head { padding: 18px 18px 24px; }
	.rd-cp-head .rd-breadcrumb { margin-bottom: 18px; }
	.rd-cp-title { font-size: 28px; }
	.rd-cp-body { padding: 26px 18px 0; }
	.rd-cp-prose p, .rd-cp-prose ul, .rd-cp-prose ol { font-size: 16.5px; }
	/* Floated inline images collapse to full width — a 120px float beside 16px text
	   leaves an unreadable ~150px column on a phone. */
	.rd-cp-prose img[align], .rd-cp-prose img.left, .rd-cp-prose img.right,
	.rd-cp-intro img { float: none; width: auto; max-width: 100%; margin: 0 0 16px; }
	.rd-cp-hub-headrow { flex-direction: column; gap: 20px; }
	.rd-cp-hub-count { text-align: left; }
	.rd-cp-hub-count-n { font-size: 32px; }
	.rd-cp-hub-gridwrap, .rd-cp-hub-embedwrap, .rd-cp-hub-promos { padding-left: 18px; padding-right: 18px; }
	.rd-cp-hub-grid { grid-template-columns: 1fr; }
	.rd-cp--thanks { padding: 40px 16px 64px; }
	.rd-cp-thanks-panel { padding: 32px 22px 30px; border-radius: 16px; }
	.rd-cp-back { padding: 34px 18px 46px; }
	.rd-cp-totop { right: 16px; bottom: 16px; }
}

/* No widget rail -> single column, so the prose is not squeezed beside an empty 320px gap.
   (.rd-cp-prose keeps its own 62em measure, so the line length stays readable.) */
@media (min-width: 1000px) {
	.rd-cp-body--norail { grid-template-columns: minmax(0, 1fr); }
}