/*
* Compliance Monitoring Clone — Test Page Stylesheet
* Cloned from risk-management-test (same structure, same shared engine:
* auto-rotating accordion, sticky+fade numbered cards, swipeable hover
* cards, mac-frame mockup, navy Success Portfolio). Hand-coded (no
* Elementor, no GSAP). Scoped under .cmt-page to avoid bleeding into the
* rest of the site, and to avoid site styles bleeding in.
*
* Content is real, extracted from /capabilities/compliance-monitoring/
* (post 7627) via _elementor_data + live computed-style measurement — not
* invented. Design tokens are shared with internal-auditing-test and
* risk-management-test since all three draw on the same site-wide
* Elementor global kit.
*
* MEASURED PER-PAGE DIFFERENCES FROM THE RISK-MANAGEMENT CLONE this file
* was copied from. Every one of these was read off the LIVE page, not
* assumed — the standing lesson from that build is that a prefix-rename
* clone transfers *behaviour* correctly but every hardcoded *value* has to
* be re-verified. Do NOT "fix" these back toward rmt-:
* - Overview media collage: SIX images (rmt had 4, iat 5), in a 776x484
* container (rmt's was 838x514).
* - Mac-frame mockup: FIVE panels (rmt had 3, iat 4), cluster 633x440.
* - Mac-frame mobile: the toolbar STAYS VISIBLE below 767px here. rmt
* carries hide_mobile on its .browser-top-img and therefore needed a
* border-top placeholder to close the card; this page must NOT have
* one.
* - Mac-frame mobile cluster GROWS 440 -> 500px. rmt shrinks 440 -> 367.
* - Sections 3 and 4 of the live page are a DESKTOP/TABLET vs MOBILE
* responsive pair, not the dead-code pair rmt had — both carry real
* content and neither may simply be dropped.
* - The SVG icon-gradient id is cmtIconGradient and the CSS below
* references #cmtIconGradient. On rmt these had drifted apart (SVG
* said rmt-, CSS still said #iatIconGradient from the original iat
* clone), silently killing the icon hover gradient on a live page.
* Keep the two in sync if this file is ever cloned again.
*/
body.page-id-15520 .rkch-spacer, body.page-id-7627 .rkch-spacer { display: none !important; height: 0 !important; }
.cmt-page {
--cmt-primary: #233963;
--cmt-text: #1E2E4C;
--cmt-white: #FFFFFF;
--cmt-neutral-9: #F4F6F9;
--cmt-neutral-8: #EBEEF2;
--cmt-neutral-7: #DADEE3;
--cmt-neutral-6: #A5ABB3;
--cmt-green: #2ECC71;
--cmt-gradient-teal-green: linear-gradient(90deg, #6AC2B7 0%, #8AD6C0 50%, #8ADBBB 75%, #86DCAF 87.5%, #84DDA5 93.75%, #95E091 96.88%, #9FDD5F 100%);
--cmt-gradient-primary-darker: linear-gradient(90deg, #47B0A3 0%, #4FB799 30.43%, #4CC86F 77.4%, #84BA4C 100%);
--cmt-mint-gradient: linear-gradient(28deg, #E3FFCC 0%, #D0FFF1 100%);
--cmt-card-shadow: 0 10px 35px 0 rgba(35, 57, 99, 0.12);
--cmt-radius: 24px;
position: relative;
font-family: "Public Sans", sans-serif;
color: var(--cmt-text);
background: #F6F9FB;
}
/* Site-wide subtle tiled background pattern, 64x64px tile at 50% opacity,
running the full height of the page (same asset/mechanism as the
financial-services clone — confirmed present in this page's Figma too). */
.cmt-page::before {
content: "";
position: absolute;
inset: 0;
background-image: url("../assets/global-pattern.png");
background-repeat: repeat;
background-size: 64px 64px;
opacity: 0.5;
pointer-events: none;
z-index: 0;
}
.cmt-page * { box-sizing: border-box; }
.cmt-page img { max-width: 100%; height: auto; display: block; }
.cmt-page section {
padding: 96px 4vw;
position: relative;
z-index: 1;
}
@media (max-width: 767px) {
.cmt-page section { padding: 56px 20px; }
}
.cmt-inner {
max-width: 1280px;
margin: 0 auto;
position: relative;
z-index: 1;
}
/* ---------- Typography ---------- */
/* --cmt-primary (#233963), NOT --cmt-text (#1E2E4C). Verified by walking
every visible heading on the live page: all 20+ on-light headings compute
to rgb(35,57,99); only the ones on the navy bands are white. The
risk-management clone this file came from uses --cmt-text here, which is a
different shade — exactly the "a colour that just inherits" trap that page
already got caught by once on its challenge-card titles. */
.cmt-page h1, .cmt-page h2, .cmt-page h3, .cmt-page h4 {
font-family: "Public Sans", sans-serif;
color: var(--cmt-primary);
font-weight: 700;
}
.cmt-page p { margin: 0; line-height: 1.55; }
.cmt-h2 {
font-size: 42px;
line-height: 1.15;
font-weight: 700;
margin-bottom: 20px;
}
@media (max-width: 767px) {
.cmt-h2 { font-size: 28px; line-height: 1.25; }
}
/* Two-column header row used by most sections: heading left, copy right */
.cmt-head-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 40px;
width: 100%;
}
.cmt-head-row p { color: var(--cmt-text); font-size: 16px; max-width: 529px; }
@media (max-width: 900px) {
.cmt-head-row { flex-direction: column; gap: 16px; }
.cmt-head-row p { max-width: 100%; }
}
/* ---------- Buttons ---------- */
.cmt-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 18px;
font-weight: 600;
font-size: 18px;
text-decoration: none;
cursor: pointer;
border-radius: 0;
}
.cmt-btn--outline {
background: var(--cmt-white);
border: 2px solid var(--cmt-primary);
color: var(--cmt-primary);
}
.cmt-btn--outline:hover { background: var(--cmt-primary); color: var(--cmt-white); }
.cmt-btn--small {
padding: 8px 12px;
font-size: 14px;
border: 2px solid #6AC2B7;
background: transparent;
color: var(--cmt-text);
}
/* ---------- Lead magnet CTA (.lm-cta-banner) — page-scope override ----------
.cmt-page section{padding:96px 4vw} otherwise beats the module's own
.lm-cta-banner padding on specificity — same fix already needed on
.eet-page and .fst-page, applied proactively here from the start.
Not actually used on THIS page (see section-8-lead-magnet.php — no lead
magnet exists for compliance-monitoring, so the real static banner is rendered
directly instead of via lead_magnet_render()) — kept for parity with the
other clone stylesheets in case a lead magnet is added here later. */
.cmt-page section.lm-cta-banner {
padding: 0 4vw;
}
@media (max-width: 900px) {
.cmt-page section.lm-cta-banner {
padding: 56px 20px !important;
}
}
/* ---------- "Ensure compliance at scale with confidence." statement banner ----------
Real live section: plain mint (#D2FFEC) two-column band, heading left /
copy right, no button. Matches the live page's own measured padding
(55px 80px 51px desktop, backdrop-filter:blur(2px) — kept as a harmless
progressive enhancement) and column split (~37% / ~44% of the row). */
.cmt-page section.cmt-statement {
background: #D2FFEC;
padding: 55px 80px 51px;
backdrop-filter: blur(2px);
}
.cmt-statement-grid {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 40px;
}
.cmt-statement-heading {
margin: 0;
font-size: 42px;
font-weight: 700;
line-height: 1.2;
color: var(--cmt-primary);
max-width: 480px;
flex: 0 1 auto;
}
.cmt-statement-text {
font-size: 16px;
line-height: 1.55;
color: var(--cmt-text);
max-width: 560px;
flex: 0 1 auto;
}
/* Inline body link. Same mechanic as the homepage clone's .home-faq-link
(navy, semibold, underline drawn as a background gradient so it can
thicken on hover) — but a SOLID --cmt-primary underline rather than the
brand teal->green gradient, because the only place this link appears is on
the mint #D2FFEC statement banner, where the gradient's light end
(#9FDD5F) all but disappears. Don't "restore" the gradient here without
re-checking contrast against that background. */
.cmt-link {
color: var(--cmt-primary);
font-weight: 600;
text-decoration: none;
padding-bottom: 1px;
background-image: linear-gradient(var(--cmt-primary), var(--cmt-primary));
background-repeat: no-repeat;
background-size: 100% 2px;
background-position: 0 100%;
transition: color 0.25s ease, background-size 0.25s ease;
}
.cmt-link:hover,
.cmt-link:focus-visible {
color: var(--cmt-text);
background-size: 100% 3px;
}
.cmt-link:focus-visible {
outline: 2px solid var(--cmt-primary);
outline-offset: 2px;
}
/* --head: the anchor sits INSIDE an . Inherit everything typographic from
the heading (font-size/weight/color/line-height) so the linked product name
reads as part of the heading rather than a differently-sized run of text,
and thin the underline proportionally — a 2px rule under 42px type reads as
a box, not an underline. */
.cmt-link--head {
font-size: inherit;
font-weight: inherit;
line-height: inherit;
color: inherit;
padding-bottom: 2px;
background-image: linear-gradient(currentColor, currentColor);
background-size: 100% 1px;
opacity: 0.98;
}
.cmt-link--head:hover,
.cmt-link--head:focus-visible {
color: inherit;
background-size: 100% 2px;
}
/* --onnavy: the navy #1E2E4C bands (sections 3 and 7). The default navy-on-
light treatment is invisible there. .cmt-portfolio-intro sets its own color
with !important, so the color here needs it too in order to apply to the
nested anchor. */
.cmt-link--onnavy,
.cmt-portfolio-intro .cmt-link--onnavy {
color: #fff !important;
background-image: linear-gradient(#fff, #fff);
}
.cmt-link--onnavy:hover,
.cmt-link--onnavy:focus-visible,
.cmt-portfolio-intro .cmt-link--onnavy:hover {
color: #fff !important;
}
.cmt-link--onnavy:focus-visible { outline-color: #fff; }
@media (max-width: 900px) {
.cmt-page section.cmt-statement { padding: 40px 20px; }
.cmt-statement-grid { flex-direction: column; align-items: flex-start; gap: 16px; }
.cmt-statement-heading { font-size: 30px; max-width: 100%; }
.cmt-statement-text { max-width: 100%; }
}
/* ---------- Hero ---------- */
.cmt-hero {
position: relative;
min-height: 100vh;
padding: 0 4vw !important;
display: flex;
align-items: center;
justify-content: center;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
}
.cmt-hero-inner { position: relative; z-index: 1; }
.cmt-hero-h1 {
color: #fff !important;
font-size: 100px;
line-height: 1.1;
font-weight: 600;
margin: 0;
}
@media (max-width: 900px) {
.cmt-hero-h1 { font-size: 44px; }
}
/* ---------- Transform / Overview (accordion + collage) ---------- */
/* 24px/400 measured live — NOT the risk-management clone's 32px/700. This is
an intro sub-headline on this page, not a section title. */
.cmt-page .cmt-h3 { font-size: 24px; line-height: 1.45; font-weight: 400; margin-bottom: 32px; max-width: 560px; }
/* Supporting line under the (now short) section-1 headline. The heading's own
32px bottom margin moves down here so the two read as one block. */
.cmt-transform-copy .cmt-h3 { margin-bottom: 14px; }
/* `.cmt-page p` (0,2,0) sets margin:0 on every paragraph, so a bare
`.cmt-transform-lede` (0,1,0) loses and the gap collapses to 0 — the tag
qualifier here is load-bearing, not noise. */
.cmt-page p.cmt-transform-lede {
font-size: 18px;
line-height: 1.55;
color: var(--cmt-text);
max-width: 560px;
margin-bottom: 32px;
}
@media (max-width: 767px) {
/* .cmt-page qualifier is load-bearing: the Elementor global kit ships
`.elementor-kit-6 h2 { font-size: 28px }` at this same breakpoint, and
(0,1,1) beats a bare `.cmt-h3` (0,1,0) — a plain rule here computes to
28px no matter what value it declares. 28px is also the value we want
(it's what .cmt-h2 uses on mobile), so this states it explicitly rather
than inheriting it by accident from a plugin stylesheet. */
.cmt-page .cmt-h3 { font-size: 28px; }
.cmt-page p.cmt-transform-lede { font-size: 16px; margin-bottom: 24px; }
}
.cmt-page section.cmt-transform {
background: #fff;
padding: 88px 0 88px 50px;
}
.cmt-transform .cmt-inner {
max-width: none;
margin: 0;
}
.cmt-transform-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
}
@media (max-width: 900px) {
.cmt-page section.cmt-transform { padding: 56px 20px; }
}
@media (max-width: 900px) {
.cmt-transform-grid { grid-template-columns: 1fr; }
}
/* Shared tabs component (reused by Overview + Audit Type We Support) */
.cmt-tabs { display: flex; flex-direction: column; }
.cmt-tab {
position: relative;
border-width: 1px 0;
border-style: solid;
border-color: #BDC4D1;
padding-top: 12px;
}
.cmt-tab-trigger {
all: unset;
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
padding: 8px 0 20px;
cursor: pointer;
font-family: "Public Sans", sans-serif;
font-weight: 700;
font-size: 16px;
color: var(--cmt-primary);
}
.cmt-tab.is-active .cmt-tab-trigger { color: var(--cmt-primary); }
/* Progress "status bar" — only ever shown on the active tab, painted
directly over the tab's own top border (which is never actually
hidden by CSS — the 2px opaque bar just visually occludes the thinner
1px border underneath it, matching the live page's own treatment). */
.cmt-tab-progress-track {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: #EDECEA;
z-index: 2;
}
.cmt-tab.is-active .cmt-tab-progress-track { display: block; }
.cmt-tab-progress-fill {
position: absolute;
inset: 0;
width: 0%;
background: var(--cmt-primary);
transition: width linear;
}
.cmt-tab-panel {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cmt-tab.is-active .cmt-tab-panel {
/* 148px, not internal-auditing's 120px: this page's real accordion copy is
3 short bullet lines per panel, not 1 sentence — 120px clipped the third
line. */
max-height: 148px;
opacity: 1;
transition: max-height 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cmt-tab-panel p { padding-bottom: 16px; font-size: 14px; font-weight: 300; line-height: 26px; color: var(--cmt-primary); }
/* Real content for this page's accordion panels is 3 short bullet lines
(Word-paste "- " dash lines in the source), not one sentence — rendered
as a proper list rather than reproducing the literal dash prefixes. */
.cmt-tab-bullets {
list-style: disc;
margin: 0;
padding: 0 0 16px 18px;
display: flex;
flex-direction: column;
gap: 4px;
}
.cmt-tab-bullets li { font-size: 15px; line-height: 1.5; color: var(--cmt-text); }
.cmt-transform-media {
position: relative;
/* Live .rk-right-container-wrapper measures 776x484 on this page (the
risk-management clone's was 838x514 — do NOT carry that value over). */
aspect-ratio: 776 / 484;
width: 100%;
}
.cmt-transform-img {
position: absolute;
/* background-* retained: harmless now the panels are inline SVG, and cheap
insurance if a slot is ever given an image again. */
background-repeat: no-repeat;
background-size: contain;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
}
/* Reproduces what background-size:contain did for the old PNGs — fill the slot,
never distort. preserveAspectRatio defaults to xMidYMid meet, so the graphic
letterboxes inside its slot exactly as the image used to. */
.cmt-transform-img .cmt-ig {
width: 100%;
height: 100%;
display: block;
/* Panels overlap by design; a drop shadow keeps the stacking readable the way
the PNGs' own baked-in shadows used to. */
filter: drop-shadow(0 6px 18px rgba(35, 57, 99, 0.10));
}
/* SIX images on this page — not the risk-management clone's 4, nor
internal-auditing's 5. Every left/top/width/height below is a measured
percentage of the live 776x484 container, read off
getBoundingClientRect() against that container's own rect (NOT against
the section or the frame — measuring against the wrong reference box is
what produced a wrong-looking mockup on the previous clone).
Plain background-image divs: no shadow, no radius on the live source. */
.cmt-transform-img--1 { left: 6.00%; top: 56.00%; width: 30.00%; height: 44.63%; z-index: 3; }
.cmt-transform-img--2 { left: 48.72%; top: 66.00%; width: 38.00%; height: 28.93%; z-index: 4; }
.cmt-transform-img--3 { left: 68.00%; top: 2.00%; width: 28.00%; height: 27.48%; z-index: 2; }
.cmt-transform-img--4 { left: 8.00%; top: 26.00%; width: 50.00%; height: 30.17%; z-index: 2; }
.cmt-transform-img--5 { left: 58.00%; top: 37.00%; width: 36.00%; height: 30.17%; z-index: 3; }
.cmt-transform-img--6 { left: 4.00%; top: 2.00%; width: 56.00%; height: 24.59%; z-index: 1; }
@media (max-width: 900px) {
.cmt-transform-media { margin-top: 24px; }
}
/* ---------- Common Audit Challenges ---------- */
.cmt-page section.cmt-challenges {
background: #F2F5F7;
padding: 60px 80px 160px;
min-height: 90vh;
display: flex;
align-items: center;
}
/* max-width: none is load-bearing, not decorative — `width: 100%` alone is
still capped by the base `.cmt-inner { max-width: 1280px }`, which
silently clamped every card in this grid to a narrower box than the real
page (measured 411px cards here vs 434px live). This section, like
Success Portfolio below, is genuinely edge-to-edge on the live page (no
centered max-width box at all — content is exactly viewport minus the
section's own 80px/side padding), matching the pattern already documented
for internal-auditing's Challenges/Portfolio sections. */
.cmt-challenges .cmt-inner { width: 100%; max-width: none; }
@media (max-width: 900px) {
.cmt-page section.cmt-challenges { padding: 56px 20px; min-height: 0; }
}
.cmt-challenges-head {
max-width: none;
margin-bottom: 48px;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
gap: 40px;
width: 100%;
}
.cmt-challenges-head h2 { flex: 0 1 auto; max-width: 640px; margin-bottom: 0; }
.cmt-challenges-head p { font-size: 16px; max-width: 480px; flex: 0 1 auto; }
@media (max-width: 900px) {
.cmt-challenges-head { flex-direction: column; gap: 16px; }
.cmt-challenges-head h2 { max-width: 100%; margin-bottom: 0; }
.cmt-challenges-head p { max-width: 100%; }
}
.cmt-challenges-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
/* NOT a copy of internal-auditing's card: confirmed live via DOM inspection
that this page's icon-list items are text-only — no
.elementor-icon-list-icon span at all, not even an empty/hidden one — so
the green check-circle internal-auditing carries does not exist here.
Simple padded block, no flex/icon layout. */
.cmt-challenge-card {
background: #fff;
padding: 24px;
}
/* Color/size/weight measured directly off the live page (rgb(35,57,99) /
20px / 700) — the internal-auditing clone's 18px/600 with no explicit
color was silently falling through to the wrong shade (--cmt-text
#1E2E4C instead of --cmt-primary #233963). */
.cmt-challenge-card h3 { font-size: 20px; font-weight: 700; color: var(--cmt-primary); margin-bottom: 8px; }
.cmt-challenge-card p { font-size: 16px; }
@media (max-width: 1100px) {
.cmt-challenges-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.cmt-challenges-grid { grid-template-columns: 1fr; }
}
/* ---------- Audit Features (swipeable hover cards) ----------
Hover mechanic ported from the live page's .mcard/.ccard/.general-bgstyle
(confirmed identical selectors/engine to inc/cta-banner/assets/cta-banner.css's
.ictab-outer/.ictab-card): gradient border-image reveal + 10px lift,
border reserved at full width from first paint (transparent) so hover
never changes box size/causes reflow — see cta-banner-component memory
for why. Icon fill/scale-on-hover is a NEW effect this component
doesn't have elsewhere. */
.cmt-page section.cmt-features {
background: #fff;
padding: 60px 60px 160px;
min-height: 90vh;
}
.cmt-features .cmt-inner { max-width: 1536px; }
.cmt-features-intro { font-size: 16px; margin-bottom: 32px; }
.cmt-features-track {
display: flex;
flex-wrap: nowrap;
gap: 20px;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 8px;
-webkit-overflow-scrolling: touch;
}
.cmt-audit-card {
flex: 0 0 355px;
box-sizing: border-box;
border-top: 16px solid transparent;
border-left: 16px solid transparent;
}
.cmt-audit-card:hover {
border-image: var(--cmt-gradient-teal-green) 1;
}
.cmt-audit-card-inner {
box-sizing: border-box;
height: 100%;
padding: 32px;
display: flex;
flex-direction: column;
gap: 16px;
border-right: 4px solid transparent;
border-bottom: 4px solid transparent;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.16);
transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-image 0.3s ease;
}
.cmt-audit-card:hover .cmt-audit-card-inner {
transform: translate(-10px, -10px);
border-image: var(--cmt-gradient-teal-green) 1;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.06);
background-color: #fff;
}
.cmt-audit-card-inner--pink { background-color: #FFF5F5; }
.cmt-audit-card-inner--lavender { background-color: #F7F9FF; }
.cmt-audit-card-inner--mint { background-color: #F7FFF7; }
.cmt-audit-card-inner--lilac { background-color: #FEFAFF; }
.cmt-audit-icon svg { display: block; transition: transform 0.8s ease; }
.cmt-audit-icon .cmt-icon-fill { fill: var(--cmt-primary); transition: fill 0.5s ease; }
.cmt-audit-icon .cmt-icon-stroke { fill: none; stroke: var(--cmt-primary); transition: stroke 0.5s ease; }
.cmt-audit-card:hover .cmt-audit-icon svg { transform: scale(0.9); }
.cmt-audit-card:hover .cmt-audit-icon .cmt-icon-fill { fill: url(#cmtIconGradient); }
.cmt-audit-card:hover .cmt-audit-icon .cmt-icon-stroke { stroke: url(#cmtIconGradient); }
.cmt-audit-card-inner h3 { font-size: 24px; font-weight: 600; line-height: 30px; color: var(--cmt-primary); }
.cmt-audit-card-inner p { font-size: 16px; font-weight: 400; color: var(--cmt-text); flex-grow: 1; }
.cmt-audit-badge {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 6px;
background: #fff;
border: 0.8px solid #000;
border-radius: 9999px;
padding: 6px 14px;
}
.cmt-audit-badge span { font-size: 14px; font-weight: 600; line-height: 16px; color: var(--cmt-primary); }
@media (max-width: 900px) {
.cmt-page section.cmt-features { padding: 56px 20px; min-height: 0; }
.cmt-audit-card { flex: 0 0 85vw; }
}
/* ---------- Audit Function (sticky heading + scroll-fade cards) ---------- */
.cmt-audit-function { background: var(--cmt-text); }
.cmt-audit-function-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: start;
}
.cmt-audit-function-sticky { position: sticky; top: 120px; }
.cmt-audit-function-sticky .cmt-audit-function-heading {
color: #fff;
font-size: 42px;
font-weight: 600;
}
.cmt-audit-function-cards { display: flex; flex-direction: column; gap: 24px; }
.cmt-fade-card {
background: var(--cmt-neutral-9);
padding: 25px;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.cmt-fade-card.is-visible { opacity: 1; transform: translateY(0); }
.cmt-fade-card-num {
display: block;
font-size: 64px;
font-weight: 800;
color: var(--cmt-neutral-6);
line-height: 1;
margin-bottom: 8px;
}
.cmt-fade-card h3 { font-size: 20px; font-weight: 700; color: var(--cmt-primary); margin-bottom: 8px; }
.cmt-fade-card p { font-size: 14px; color: #6D7580; line-height: 20px; }
/* Top only: the 10px side/bottom padding is deliberate — the mac-frame
mockup is meant to bleed close to the section edges like a real browser
window. But 10px above it too left it butting straight into the previous
section with no breathing room. */
.cmt-page section.cmt-audit-types { padding: 64px 10px 10px !important; }
@media (max-width: 900px) {
.cmt-page section.cmt-audit-types { padding: 40px 20px 20px !important; }
}
@media (max-width: 900px) {
.cmt-audit-function-grid { grid-template-columns: 1fr; }
.cmt-audit-function-sticky { position: static; margin-bottom: 24px; }
.cmt-fade-card { opacity: 1; transform: none; }
}
/* ---------- Audit Types We Support (Mac-frame variant) ---------- */
.cmt-mac-frame {
border-width: 0 4px 4px 4px;
border-style: solid;
border-color: #000;
border-radius: var(--cmt-radius);
overflow: hidden;
background: #fff;
}
.cmt-mac-toolbar img { width: 100%; display: block; }
.cmt-mac-head {
background: var(--cmt-neutral-9);
padding: 22px 32px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
}
.cmt-mac-head h2 { font-weight: 600; color: var(--cmt-primary); }
.cmt-mac-head p { font-size: 16px; max-width: 400px; }
.cmt-mac-content {
background: #FFFBF5;
display: flex;
/* stretch, not flex-start: live's list column measures the SAME 440px
height as the image cluster next to it (confirmed via
getBoundingClientRect on both), because the row's cross-axis stretches
both children to match the taller one. flex-start left the 3-item list
at its own short content height (170px) with nothing filling the
remaining ~270px beside the image cluster — the "so much empty space"
report. The whitespace doesn't disappear with this fix; it moves to
where live actually puts it, inside the bottom of the (now full-height)
list column, which is what the real page looks like. */
align-items: stretch;
gap: 0;
}
.cmt-plain-list {
list-style: disc;
padding: 30px 0 50px 30px;
margin: 0;
flex: 1 1 50%;
display: flex;
flex-direction: column;
gap: 16px;
font-size: 16px;
color: var(--cmt-text);
}
/* FIXED min-height, NOT aspect-ratio. Measured on live: the cluster is
633x440 at a 1536px viewport and 333x440 at 820px — the width tracks the
column while the height stays pinned at 440px, which an aspect-ratio can
never reproduce (it would shrink the height as the column narrows, and
that is what collapsed the whole composition on the previous clone).
Height GROWS to 500px below the 767px breakpoint on this page; see the
mobile block. No align-self — the row's align-items:stretch is what makes
the sibling list column match this height. */
.cmt-mockup-cluster {
position: relative;
flex: 1 1 50%;
min-height: 440px;
}
/* Confirmed live via getComputedStyle on all 5 of this page's real panels:
background-size:contain, border-radius:0, box-shadow:none. Do not
reintroduce `cover` (it crops these mockups — the "images are cutted"
report on the previous clone) or the borrowed radius/shadow. */
.cmt-mockup-panel {
position: absolute;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
box-shadow: none;
border-radius: 0;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.cmt-mockup-panel.is-visible { opacity: 1; transform: translateY(0); }
/* FIVE panels on this page (risk-management had 3, internal-auditing 4).
THESE PERCENTAGES ARE RELATIVE TO THE CLUSTER, NOT THE FRAME — measured
with getBoundingClientRect() against the cluster's own rect at a 1536px
viewport (cluster 633x440). Measuring against the whole
.screen-content-mock is what produced a wrong, too-tidy mockup on the
previous clone; the panels are MEANT to overflow the cluster (negative
tops, >100% widths) and layer into one collage, with the frame's own
overflow:hidden clipping the spill at the card edge. */
.cmt-mockup-panel--1 { left: 2%; top: 65.91%; width: 100%; height: 34.09%; transition-delay: 0ms; }
.cmt-mockup-panel--2 { left: 53%; top: 37.00%; width: 52%; height: 50.91%; transition-delay: 150ms; }
.cmt-mockup-panel--3 { left: 0%; top: -5.00%; width: 54%; height: 44.32%; transition-delay: 300ms; }
.cmt-mockup-panel--4 { left: 49%; top: -4.00%; width: 59%; height: 55.68%; transition-delay: 450ms; }
.cmt-mockup-panel--5 { left: -4%; top: 34.00%; width: 71%; height: 37.05%; transition-delay: 600ms; }
/* Tablet — live carries its own Elementor tablet values (measured at 820px:
cluster 333x440, so it stays 440 tall while the width collapses). */
@media (max-width: 1024px) {
.cmt-mockup-panel--1 { left: 2.00%; top: 65.91%; width: 90.18%; height: 34.09%; }
.cmt-mockup-panel--2 { left: 48.00%; top: -2.00%; width: 63.00%; height: 37.73%; }
.cmt-mockup-panel--3 { left: 4.00%; top: 18.00%; width: 85.00%; height: 47.73%; }
.cmt-mockup-panel--4 { left: 3.13%; top: -2.00%; width: 59.00%; height: 32.05%; }
.cmt-mockup-panel--5 { left: -2.00%; top: 46.00%; width: 100.00%; height: 37.05%; }
}
/* Mobile — 767px, bisected on the LIVE page rather than inherited: at 820px
the columns are still side by side, at 760px they have stacked.
TWO DELIBERATE DIFFERENCES FROM THE RISK-MANAGEMENT CLONE — both measured,
do not "fix" them to match that page:
1. The mac toolbar STAYS VISIBLE here. risk-management carries `hide_mobile`
on its .browser-top-img and so needed a border-top placeholder to close
the card; this page's toolbar is `display: block` at both 760px and
390px, so the image is still the frame's top edge and NO border-top
placeholder belongs here.
2. The cluster GROWS to 500px rather than shrinking — risk-management drops
440 -> 367, this page goes 440 -> 500 (confirmed `min-height: 500px` at
both 760px and 390px), because the stacked panels need more vertical
room. Straight proof that per-page values never transfer. */
@media (max-width: 767px) {
.cmt-mac-head { flex-direction: column; gap: 12px; }
.cmt-mac-head p { max-width: 100%; }
.cmt-mac-content { flex-direction: column; align-items: stretch; }
.cmt-plain-list { flex: none; padding: 20px; }
.cmt-mockup-cluster { width: 100%; min-height: 500px; flex: none; }
/* Panel 1 is a FIXED 500px wide here, not a percentage — measured 500px at
both a 715px and a 346px cluster, so it deliberately overflows on a
phone and is clipped by the frame. Panel 4 is RIGHT-anchored at a
constant 126px (its computed `right` held at 126px across both widths
while `left` swung from +124px to -5px). */
.cmt-mockup-panel--1 { left: 2%; top: 74.40%; width: 500px; height: 25.60%; }
.cmt-mockup-panel--2 { left: 49%; top: -2.00%; width: 62%; height: 34.60%; }
.cmt-mockup-panel--3 { left: -11%; top: 22.00%; width: 100%; height: 42.00%; }
.cmt-mockup-panel--4 { left: auto; right: 126px; top: 2.00%; width: 65%; height: 28.20%; }
.cmt-mockup-panel--5 { left: -2%; top: 50.00%; width: 100%; height: 34.00%; }
}
/* ---------- Success Portfolio ---------- */
.cmt-page section.cmt-portfolio {
background-color: var(--cmt-text);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
padding: 60px 80px;
min-height: 90vh;
display: flex;
align-items: center;
}
/* Same max-width: none fix as .cmt-challenges above, same root cause. */
.cmt-portfolio .cmt-inner { width: 100%; max-width: none; }
@media (max-width: 900px) {
.cmt-page section.cmt-portfolio { padding: 56px 20px; min-height: 0; }
}
.cmt-portfolio .cmt-portfolio-heading { color: #fff; }
.cmt-head-row p.cmt-portfolio-intro { color: #EDECEA !important; font-size: 14px; line-height: 20px; }
.cmt-portfolio-row {
display: grid;
gap: 24px;
margin-top: 32px;
}
.cmt-portfolio-row--wide { grid-template-columns: repeat(2, 1fr); }
.cmt-portfolio-row--narrow { grid-template-columns: repeat(3, 1fr); }
/* This page's second row is FOUR plain cards, not risk-management's three —
the --narrow variant above is kept for parity with the shared component
family but is unused here. */
.cmt-portfolio-row--narrow-4 { grid-template-columns: repeat(4, 1fr); }
.cmt-portfolio-card {
background: #fff;
border-radius: 8px;
padding: 25px;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
.cmt-portfolio-card h3 { font-size: 20px; font-weight: 700; color: var(--cmt-primary); margin-bottom: 8px; }
.cmt-portfolio-card p { font-size: 14px; }
.cmt-portfolio-stat-row {
display: flex;
justify-content: space-between;
font-size: 14px;
color: var(--cmt-text);
margin-top: 20px;
margin-bottom: 8px;
}
.cmt-portfolio-stat-pct { color: var(--cmt-green); font-weight: 400; }
.cmt-portfolio-bar {
height: 8px;
border-radius: 9999px;
background: var(--cmt-neutral-8);
overflow: hidden;
}
.cmt-portfolio-bar-fill {
height: 100%;
border-radius: 9999px;
background: var(--cmt-gradient-teal-green);
}
@media (max-width: 1200px) {
.cmt-portfolio-row--narrow-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1100px) {
.cmt-portfolio-row--wide, .cmt-portfolio-row--narrow { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
.cmt-portfolio-row--narrow-4 { grid-template-columns: 1fr; }
}
/* ---------- Related posts / CTA section wrappers ---------- */
.cmt-page section.cmt-related {
background: #fff;
padding: 100px 80px 51px;
}
/* pb:96px is NOT the sibling-page convention (audit-assurance/internal-auditing
both ship 0/0 here, banner butting straight into the footer) — this page's
CTA banner carries its own lead-in copy (via 'text_html', see
section-10-cta.php), and 0 bottom padding read as the mint card touching
the footer with no breathing room. Requested explicitly for this page;
not ported to the siblings. */
.cmt-page section.cmt-cta {
background: #fff;
padding: 0 4vw 96px !important;
overflow-x: hidden;
overflow-y: visible;
}
/* The shared banner's min-height:336px (inc/cta-banner/assets/cta-banner.css)
is sized for its usual heading+text+button+badges content. This page's
banner has no heading, so before the lead-in copy was moved INSIDE the
card (via 'text_html') the button+badges alone left ~90px of dead space
above and below them. Content now fills most of that naturally, but the
override is kept — it only removes the artificial floor, the card still
grows to fit whatever it contains. */
.cmt-page section.cmt-cta .ictab-card { min-height: 0; }
@media (max-width: 900px) {
.cmt-page section.cmt-related { padding: 56px 20px; }
.cmt-page section.cmt-cta { padding-bottom: 56px !important; }
}
/* ---------- CTA on-scroll pattern layer ----------
Same vanilla-JS-driven horizontal parallax ported for the
financial-services clone (.fst-cta-pattern) — this page's own
"Scale with Confidence" section uses the identical live image (697)
and .pattern-wrapper/pattern-hero-scroll.js mechanic. */
.cmt-cta-pattern {
position: absolute;
top: 0;
left: 0;
width: 170%;
height: 100%;
background-image: url("/wp-content/uploads/2025/07/54a768dcea5da5e17c5698fa431189da72b85889-scaled-1.png");
background-repeat: no-repeat;
background-position: 0% 0%;
background-size: cover;
z-index: 0;
pointer-events: none;
will-change: transform;
transform: translateX(0%);
}
/* ═══════════════════════════════════════════════════════════════════════════
CONTENT REVAMP 2026-09-09
Three new sections (Business Benefits, Designed For, FAQ) plus the framework
list upgrade and the CTA lead-in. Reuses the existing tokens and the
heading-left / copy-right head idiom from .cmt-challenges-head so the new
blocks sit in the page's established rhythm.
SQUARE CORNERS THROUGHOUT — brand rule, matching .cmt-challenge-card.
═══════════════════════════════════════════════════════════════════════════ */
/* ── Business Benefits ──────────────────────────────────────────────────── */
.cmt-page section.cmt-benefits { padding: 96px 40px; background: var(--cmt-neutral-9); }
.cmt-benefits-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 40px;
margin-bottom: 48px;
}
.cmt-benefits-head h2 { flex: 0 1 auto; max-width: 640px; margin-bottom: 0; }
.cmt-benefits-head p { flex: 0 1 auto; max-width: 480px; font-size: 16px; color: var(--cmt-text); }
.cmt-benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cmt-benefit-card { background: #fff; padding: 24px; box-shadow: var(--cmt-card-shadow); }
.cmt-benefit-card h3 {
font-size: 20px;
line-height: 1.3;
font-weight: 700;
color: var(--cmt-primary);
margin: 0 0 10px;
}
.cmt-benefit-card p { font-size: 15px; line-height: 1.6; color: var(--cmt-text); margin: 0; }
/* ── Framework list: plain
upgraded to title + description ─────────── */
.cmt-framework-list li { display: block; margin-bottom: 18px; }
.cmt-framework-list li:last-child { margin-bottom: 0; }
.cmt-framework-title {
display: block;
font-weight: 700;
color: var(--cmt-primary);
margin-bottom: 4px;
}
.cmt-framework-text { display: block; font-size: 15px; line-height: 1.55; color: var(--cmt-text); }
/* ── Designed For ─────────────────────────────────────────────────────────
REDESIGNED 2026-09-09. Was: a 760px stacked head + a 2-col grid of two bare
s (5 items / 9 items), on no background of its own — so it inherited
.cmt-page's #F6F9FB and dissolved into the --cmt-neutral-9 (#F4F6F9) FAQ
band immediately above, and the 5-vs-9 split left the left column ending
four rows early.
Now: own white ground, the page's .cmt-head-row split header, and TWO
STACKED FULL-WIDTH BANDS instead of two columns — stacking is what absorbs
the 5/9 asymmetry. Each band is opened by a full-width gradient rail above
its subhead (rail-opens-a-block device from the homepage "Why Choose"
section); members are flat square tiles in a 3-up grid (geometry from the
EagleEye365 product row's own narrow-viewport fallback).
NO JS, NO HOVER, NO IMAGES, no measured percentages — everything is static
layout, so there is nothing that can render blank.
SQUARE CORNERS THROUGHOUT — brand rule, matching .cmt-challenge-card.
─────────────────────────────────────────────────────────────────────────── */
.cmt-page section.cmt-designed {
padding: 96px 40px;
background: var(--cmt-white);
}
/* .cmt-head-row (css:125-138) already supplies flex / space-between /
align-items:flex-start / gap:40px, the 16px --cmt-text paragraph capped at
529px, and the 900px column collapse. Only these two overrides are new; the
h2 margin reset matches .cmt-benefits-head h2, since .cmt-h2 carries
margin-bottom:20px which would otherwise pad the flex row. */
.cmt-designed-head { margin-bottom: 40px; }
.cmt-designed-head h2 { max-width: 560px; margin-bottom: 0; }
.cmt-designed-band + .cmt-designed-band { margin-top: 40px; }
.cmt-designed-rail {
display: block;
width: 100%;
height: 3px;
background: var(--cmt-gradient-teal-green);
margin: 0 0 20px;
}
/* The .cmt-page prefix is load-bearing: .cmt-page h1,h2,h3,h4 (css:108-112) is
specificity (0,1,1) and sets colour + font-weight, so a bare
.cmt-designed-subhead at (0,1,0) would lose both. The previous rule carried
this latent bug and only looked correct because it happened to declare the
same --cmt-primary. */
.cmt-page .cmt-designed-subhead {
font-size: 22px;
line-height: 1.3;
font-weight: 700;
color: var(--cmt-primary);
margin: 0 0 20px;
}
/* minmax(0,1fr), NOT 1fr: "Global Enterprises Managing Multiple Regulatory
Frameworks" is 58 characters against a 13-26 character field, and a bare 1fr
track would let it widen its whole column. min-height equalises 1-line and
2-line tiles so that outlier needs no escape hatch. */
.cmt-designed-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.cmt-designed-item {
display: flex;
align-items: center;
min-height: 64px;
padding: 12px 16px;
background: var(--cmt-neutral-9);
border-radius: 0;
font-size: 16px;
line-height: 1.4;
color: var(--cmt-text);
overflow-wrap: break-word;
}
/* Check drawn from borders — no icon and no SVG, matching this page's own
precedent (.cmt-faq-q::after draws its chevron the same way). Stroke is
--cmt-primary, NOT --cmt-green: #2ECC71 on --cmt-neutral-9 is ~1.9:1, under
the 3:1 non-text minimum and visibly faint at a 2px stroke. As a flex item
it stays aligned when a label wraps. */
.cmt-designed-item::before {
content: "";
flex: 0 0 12px;
width: 12px;
height: 7px;
margin-right: 14px;
border-left: 2px solid var(--cmt-primary);
border-bottom: 2px solid var(--cmt-primary);
transform: rotate(-45deg);
}
.cmt-designed-label { min-width: 0; }
/* ── FAQ ────────────────────────────────────────────────────────────────────
REDESIGNED 2026-09-09, referencing the homepage FAQ
(includes/home-test/sections/section-10-faqs.php): two-column shell
(intro rail left: heading/rule/lede/CTA — accordion list right, numbered
chips + plus→cross icon + gradient top-rule on open) instead of the
original plain stacked list.
NOT ported from home-test: the ::details-content/allow-discrete smooth
height animation. That layer is a CONFIRMED BROKEN pattern on this site —
see the legal-pages-clone-tests memory: the DOM `open` attribute set
correctly but the revealed content stayed content-visibility:hidden (so
it looked open — icon rotated — while the answer text was actually
invisible to reading/find-in-page/screen readers). Native
open/close is used as-is (instant, unconditionally reliable); only the
REVEALED content gets a fade/rise-in keyframe, same as home's own Layer 1
fallback. Do not add the ::details-content layer here without a real
.click()-based verification per that memory's warning. */
.cmt-page section.cmt-faq { padding: 96px 40px; background: var(--cmt-neutral-9); }
.cmt-faq-inner {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 40px;
}
@media (min-width: 900.02px) {
.cmt-faq-inner {
grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
gap: 64px;
align-items: start;
}
}
.cmt-faq-intro {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.cmt-faq-intro .cmt-faq-title { margin-bottom: 0; }
.cmt-faq-rule {
width: 120px;
height: 4px;
flex: 0 0 auto;
background: var(--cmt-gradient-teal-green);
}
.cmt-faq-lede {
margin: 0;
font-size: 16px;
line-height: 1.65;
color: var(--cmt-text);
max-width: 42ch;
}
.cmt-faq-cta { margin-top: 4px; }
.cmt-faq-list { border-top: 1px solid var(--cmt-neutral-7); }
.cmt-faq-item {
position: relative;
/* isolate so ::before's z-index sits correctly above the section bg but
doesn't fight the row's own content stacking. */
isolation: isolate;
border-bottom: 1px solid var(--cmt-neutral-7);
background: transparent;
}
/* Open-state gradient rule, wiping left->right over the hairline above the
row — same device as the homepage FAQ. */
.cmt-faq-item::before {
content: "";
position: absolute;
top: -1px;
left: 0;
right: 0;
height: 2px;
background: var(--cmt-gradient-teal-green);
transform: scaleX(0);
transform-origin: left center;
transition: transform .45s cubic-bezier(.22, .61, .36, 1);
pointer-events: none;
z-index: 2;
}
.cmt-faq-item[open]::before { transform: scaleX(1); }
.cmt-faq-q {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 24px 0;
cursor: pointer;
list-style: none;
font-size: 18px;
line-height: 1.4;
font-weight: 700;
color: var(--cmt-primary);
transition: color .25s ease;
}
.cmt-faq-q::-webkit-details-marker { display: none; }
.cmt-faq-q::marker { content: ''; }
.cmt-faq-q-text { flex: 1 1 auto; min-width: 0; }
.cmt-faq-q:hover { color: var(--cmt-text); }
/* Numeric chip — square, no radius, per the page's brand rule. Closed:
hairline box, muted digits. Open: gradient fill, navy digits (NOT white —
white on the gradient's lime end is unreadable). */
.cmt-faq-num {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
margin-top: 1px;
font-size: 12px;
font-weight: 800;
letter-spacing: .04em;
color: var(--cmt-neutral-6);
background: transparent;
border: 1px solid var(--cmt-neutral-7);
transition: color .3s ease, border-color .3s ease, background .3s ease;
}
.cmt-faq-item[open] .cmt-faq-num {
color: var(--cmt-primary);
border-color: transparent;
background: var(--cmt-gradient-teal-green);
}
/* Plus -> cross: the vertical bar rotates onto the horizontal one. */
.cmt-faq-icon {
flex: 0 0 auto;
position: relative;
width: 30px;
height: 30px;
margin-top: 1px;
border: 1px solid var(--cmt-neutral-7);
transition: border-color .3s ease;
}
.cmt-faq-icon::before,
.cmt-faq-icon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: var(--cmt-gradient-teal-green);
transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
.cmt-faq-icon::before { width: 14px; height: 2px; transform: translate(-50%, -50%); }
.cmt-faq-icon::after { width: 2px; height: 14px; transform: translate(-50%, -50%); }
.cmt-faq-q:hover .cmt-faq-icon,
.cmt-faq-item[open] .cmt-faq-icon { border-color: #6AC2B7; }
.cmt-faq-item[open] .cmt-faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
/* 44px = 30px chip + 14px gap, so the answer hangs under the question text,
not under the number. */
.cmt-faq-a { padding: 0 30px 24px 44px; }
.cmt-faq-a p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--cmt-text); max-width: 66ch; }
/* Fade/rise on open — the one animation layer this site's native
supports reliably (see the block comment above `.cmt-page section.cmt-faq`). */
@keyframes cmt-faq-open {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
.cmt-faq-item[open] .cmt-faq-a { animation: cmt-faq-open .3s ease both; }
@media (prefers-reduced-motion: reduce) {
.cmt-faq-item::before,
.cmt-faq-q,
.cmt-faq-num,
.cmt-faq-icon,
.cmt-faq-icon::before,
.cmt-faq-icon::after { transition: none !important; }
.cmt-faq-item[open] .cmt-faq-a { animation: none !important; }
.cmt-faq-item[open]::before { transform: scaleX(1); }
}
/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
.cmt-benefits-grid { grid-template-columns: repeat(2, 1fr); }
.cmt-designed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
.cmt-page section.cmt-benefits,
.cmt-page section.cmt-designed,
.cmt-page section.cmt-faq { padding: 56px 20px; }
.cmt-benefits-head { flex-direction: column; gap: 16px; }
.cmt-benefits-head h2, .cmt-benefits-head p { max-width: none; }
/* Designed For head stacks via .cmt-head-row's own 900px rule (css:135-138) */
.cmt-designed-head { margin-bottom: 32px; }
.cmt-designed-head h2 { max-width: none; }
.cmt-designed-band + .cmt-designed-band { margin-top: 32px; }
.cmt-faq-inner { gap: 32px; }
.cmt-faq-lede { max-width: none; }
}
@media (max-width: 600px) {
.cmt-benefits-grid { grid-template-columns: 1fr; }
.cmt-designed-grid { grid-template-columns: minmax(0, 1fr); }
.cmt-designed-item { min-height: 56px; font-size: 15px; }
.cmt-page .cmt-designed-subhead { font-size: 20px; }
.cmt-faq-q { font-size: 16px; padding: 20px 0; gap: 10px; }
.cmt-faq-num, .cmt-faq-icon { width: 26px; height: 26px; }
.cmt-faq-num { font-size: 11px; }
.cmt-faq-icon::before { width: 12px; }
.cmt-faq-icon::after { height: 12px; }
.cmt-faq-a { padding: 0 0 20px 38px; }
}
@media (max-width: 420px) {
.cmt-faq-q { font-size: 15px; }
.cmt-faq-a { padding-left: 0; }
.cmt-faq-cta { align-self: stretch; text-align: center; }
}