/*
 * CR Process page — "Change Requests · How it works"
 * Scoped styles — only enqueued on page-cr-process.php (see functions.php).
 *
 * Faithful rebuild of the Claude Design export "Change Requests.dc.html".
 * The PHP template carries the export's structure; this file holds the
 * design tokens, layout, the keyframes/hover the export expressed through
 * `style-hover`, and the stateful styling the JS toggles with classes
 * (is-active / is-on / is-open / is-done / is-current).
 */

/* ------------------------------------------------------------------
   Scope + tokens
   ------------------------------------------------------------------ */
#crproc-page.crp {
	--ff-display: 'Raleway', sans-serif;
	--ff-body: 'Open Sans', sans-serif;
	--mc-orange-gradient: linear-gradient(79.07deg, #FF5C00 2.07%, #F90 97.77%);
	--mc-gradient-rule: linear-gradient(to right, #FF9900, #007AA4, #28B7B7);
	--crp-chip-grad: radial-gradient(120% 100% at 100% 0%, rgba(124,217,217,.40) 0%, rgba(124,217,217,0) 50%), linear-gradient(135deg,#1497BA 0%,#007AA4 55%,#005774 100%);
	background: #F6F8F9;
	font-family: var(--ff-body);
	color: #002F3F;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
#crproc-page.crp *,
#crproc-page.crp *::before,
#crproc-page.crp *::after { box-sizing: border-box; }
#crproc-page.crp a { color: #007AA4; text-decoration: none; }
#crproc-page.crp a:hover { color: #005774; }
#crproc-page.crp button { font-family: inherit; }
#crproc-page.crp ::selection { background: #B0D6E3; }
/* The hidden attribute must always win over component display rules
   (.crp-doc-panel / .crp-answer-panel / .crp-mock-att etc. set display:flex). */
#crproc-page.crp [hidden] { display: none !important; }

/* This is a light-only design. The theme darkens headings globally with
   `h1..h6:is(.dark *){ color: var(--light) }` (specificity 0,1,1), which would
   wash out our headings when the site chrome is in dark mode. Re-assert the
   design colours with an id-scoped selector so they always win. */
#crproc-page.crp .crp-h1,
#crproc-page.crp .crp-doc-h3,
#crproc-page.crp .crp-det-title,
#crproc-page.crp .crp-appcard-h { color: #002F3F; }
#crproc-page.crp .crp-h2 { color: #007AA4; }
#crproc-page.crp .crp-cta-text strong { color: #fff; }

/* The base `#crproc-page.crp a` colour above (needed for in-content links)
   out-specifies the plain .crp-btn--* / .crp-chip colour classes, so the
   orange/teal CTA buttons and the active chip would inherit #007AA4 instead
   of white. These are <a> elements — re-assert their text colour at a higher
   specificity so they match the design (buttons white, outline teal). */
#crproc-page.crp a.crp-btn--orange,
#crproc-page.crp a.crp-btn--orange:hover,
#crproc-page.crp a.crp-btn--teal,
#crproc-page.crp a.crp-btn--teal:hover { color: #fff; }
#crproc-page.crp a.crp-btn--outline,
#crproc-page.crp a.crp-btn--outline:hover { color: #007AA4; }
#crproc-page.crp a.crp-chip { color: #3A5560; }
#crproc-page.crp a.crp-chip:hover { color: #005774; }
#crproc-page.crp a.crp-chip.is-on,
#crproc-page.crp a.crp-chip.is-on:hover { color: #fff; }

@keyframes crPulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.1); opacity: 0; } }

/* ------------------------------------------------------------------
   Shell / layout
   ------------------------------------------------------------------ */
.crp-shell {
	max-width: 1120px;
	margin: 0 auto;
	padding-left: clamp(16px, 4vw, 56px);
	padding-right: clamp(16px, 4vw, 56px);
}
.crp > .crp-shell:first-child { padding-top: 40px; }
.crp-main { padding-bottom: calc(clamp(40px, 6vw, 80px) + 3rem); }
/* The site footer (mt-[5%]) and the top announcement bar (mb-[5%] / lg:mb-6)
   both carry a MARGIN that reveals the white #client-hub background as a blank
   band ("bela površina"). Zero both — scoped to this page (this stylesheet is
   enqueued only here) — and let the gray breathing room come from the content's
   own padding instead. */
.page-template-page-cr-process footer,
.page-template-page-change-management-testing footer { margin-top: 0 !important; }
.page-template-page-cr-process [class*="mb-[5%]"],
.page-template-page-change-management-testing [class*="mb-[5%]"] { margin-bottom: 0 !important; }

/* ------------------------------------------------------------------
   Announcement
   ------------------------------------------------------------------ */
.crp-ann {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
	padding: 10px 12px 10px 10px;
	background: #fff; border: 1px solid #EAEEF0; border-radius: 14px;
	box-shadow: 0 1px 2px rgba(0,47,63,.04);
}
.crp-ann-tag {
	display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
	border-radius: 999px; background: var(--mc-orange-gradient); color: #fff;
	font-size: 11px; font-weight: 800; letter-spacing: .08em;
}
.crp-ann-copy { flex: 1 1 260px; font-size: 14px; font-weight: 600; color: #002F3F; }
.crp-ann-link {
	display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px;
	border-radius: 999px; background: #E6F2F6; color: #007AA4;
	font-size: 13px; font-weight: 700; transition: background .2s, color .2s;
}
.crp-ann-link:hover { background: #007AA4; color: #fff; }

/* ------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------ */
.crp-hero {
	position: relative; overflow: hidden; margin-top: 16px;
	padding: clamp(36px,6vw,72px) clamp(24px,4.5vw,56px);
	background:
		radial-gradient(1100px 560px at 88% -10%, rgba(124,217,217,.45) 0%, rgba(124,217,217,0) 60%),
		radial-gradient(800px 460px at -10% 110%, rgba(255,146,84,.16) 0%, rgba(255,146,84,0) 55%),
		linear-gradient(180deg,#F4FAFC,#FFFFFF);
	border: 1px solid #E1ECF0; border-radius: 28px;
	box-shadow: 0 2px 4px rgba(0,47,63,.05), 0 4px 8px rgba(0,47,63,.04);
}
.crp-hero-grid { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(28px,4vw,56px); }
.crp-hero-text { flex: 3 1 420px; min-width: 0; }
.crp-eyebrow {
	display: inline-flex; align-items: center; gap: 10px; margin: 0;
	font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #007AA4;
}
.crp-eyebrow-rule { width: 22px; height: 2px; border-radius: 2px; background: linear-gradient(90deg,#28B7B7,#007AA4); }
.crp-h1 {
	margin: 22px 0 0; font-family: var(--ff-display); font-weight: 900;
	font-size: clamp(34px,4.6vw,58px); line-height: 1.08; letter-spacing: -0.02em;
	color: #002F3F; text-wrap: balance;
}
.crp-grad { background: linear-gradient(90deg,#28B7B7,#007AA4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.crp-lede { margin: clamp(16px,2vw,22px) 0 0; max-width: 640px; font-size: clamp(16px,1.6vw,18px); line-height: 1.65; color: #3A5560; text-wrap: pretty; }
.crp-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.crp-hero-aside { flex: 2 1 300px; min-width: 0; }

.crp-phases {
	position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px;
	background: rgba(255,255,255,.78); border: 1px solid #E1ECF0; border-radius: 22px;
	box-shadow: 0 1px 0 #fff inset, 0 18px 40px -22px rgba(0,47,63,.35);
}
.crp-phases-rail { position: absolute; left: 41px; top: 44px; bottom: 44px; width: 2px; background: #E1ECF0; border-radius: 2px; }
.crp-hero-phase {
	position: relative; display: flex; align-items: center; gap: 14px; width: 100%;
	padding: 10px 12px; border: 0; border-radius: 14px; background: transparent; cursor: pointer;
	text-align: left; transition: background .35s;
}
.crp-hero-phase:hover { background: #F1F8FB; }
.crp-hero-phase.is-on { background: #E6F2F6; }
.crp-hero-dot {
	position: relative; flex: none; width: 24px; height: 24px; border-radius: 50%;
	display: grid; place-items: center; background: #fff; border: 2px solid #C9DCE3;
	transition: background .35s, border-color .35s;
}
.crp-hero-phase.is-past .crp-hero-dot { background: #B0D6E3; border-color: #B0D6E3; }
.crp-hero-phase.is-on .crp-hero-dot { background: #007AA4; border-color: #007AA4; }
.crp-hero-pulse { position: absolute; inset: -2px; border-radius: 50%; border: 2px solid #28B7B7; opacity: 0; }
.crp-hero-phase.is-on .crp-hero-pulse { opacity: 1; animation: crPulse 1.6s ease-out infinite; }
.crp-hero-phase-name { flex: 1 1 auto; min-width: 0; font-family: var(--ff-display); font-size: 16px; font-weight: 700; color: #3A5560; transition: color .35s; }
.crp-hero-phase.is-on .crp-hero-phase-name { color: #002F3F; }
.crp-hero-phase-range { flex: none; font-size: 13px; font-weight: 600; color: #5A6F78; }

/* ------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------ */
.crp-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	border: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
	font-family: var(--ff-display); transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s, background .2s, color .2s;
}
.crp-btn--orange, .crp-btn--outline, .crp-btn--teal {
	height: 48px; padding: 0 22px; border-radius: 999px;
	font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.crp-btn--orange { background: var(--mc-orange-gradient); color: #fff; box-shadow: 0 8px 20px -8px rgba(255,92,0,.55); }
.crp-btn--orange:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px -8px rgba(255,92,0,.6); }
.crp-btn--outline { background: transparent; border: 1.5px solid #007AA4; color: #007AA4; }
.crp-btn--outline:hover { background: rgba(0,122,164,.07); color: #007AA4; }
.crp-btn--teal { background: linear-gradient(135deg,#28B7B7,#007AA4); color: #fff; box-shadow: 0 6px 16px -8px rgba(0,122,164,.6); }
.crp-btn--teal:hover { color: #fff; transform: translateY(-1px); }
.crp-btn--sm { height: 40px; padding: 0 18px; border-radius: 999px; font-size: 13px; }
.crp-btn--pillsm { height: 42px; padding: 0 18px; border-radius: 999px; font-family: var(--ff-body); font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.crp-btn[disabled] { opacity: .4; pointer-events: none; cursor: default; }

/* ------------------------------------------------------------------
   Sticky chip nav + scroll progress
   ------------------------------------------------------------------ */
.crp-chipbar {
	position: sticky; top: 0; z-index: 30; margin-top: 24px;
	background: rgba(246,248,249,.97);
	backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid #EAEEF0;
}
.crp-chipnav { display: flex; align-items: center; gap: 4px; height: 60px; overflow-x: auto; scrollbar-width: none; }
.crp-chipnav::-webkit-scrollbar { display: none; }
.crp-chip {
	flex: none; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px;
	border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap;
	background: transparent; color: #3A5560; transition: background .2s, color .2s;
}
.crp-chip:hover { color: #005774; }
.crp-chip.is-on { background: var(--crp-chip-grad); color: #fff; }
.crp-chip.is-on:hover { color: #fff; }
.crp-chip-n { font-size: 12px; font-weight: 700; opacity: .7; }
.crp-progress-track { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; }
.crp-progress { display: block; height: 100%; width: 100%; background: var(--mc-gradient-rule); transform-origin: left; transform: scaleX(0); }

/* ------------------------------------------------------------------
   Section scaffolding
   ------------------------------------------------------------------ */
.crp-sec { padding-top: clamp(64px, 8vw, 96px); scroll-margin-top: 64px; }
.crp-kicker { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: #FF5C00; }
.crp-knum { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #FF5C00; color: #fff; font-size: 13px; }
.crp-h2 { margin: 12px 0 0; font-family: var(--ff-display); font-weight: 400; font-size: clamp(28px,3.2vw,38px); line-height: 1.15; letter-spacing: -0.02em; color: #007AA4; text-wrap: balance; }
.crp-h2--route { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.crp-intro { margin: 14px 0 0; max-width: 780px; font-size: 17px; line-height: 1.65; color: #3A5560; text-wrap: pretty; }
.crp-ink { color: #002F3F; }
.crp-smalllink { font-size: 14px; font-weight: 600; }

/* ------------------------------------------------------------------
   1 · Route — Yes/No verdict pill + cards + answer
   ------------------------------------------------------------------ */
.crp-vd { display: inline-grid; font-family: var(--ff-body); letter-spacing: 0; }
.crp-vd-pill {
	grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px 0 6px;
	border-radius: 999px; font-size: 19px; font-weight: 700; transform-origin: left center;
	transition: opacity .3s, transform .45s cubic-bezier(.34,1.56,.64,1);
}
.crp-vd-ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.crp-vd-yes { background: #E6F6EE; border: 1.5px solid #9FD9B8; color: #137A45; box-shadow: 0 8px 20px -10px rgba(30,158,90,.55); }
.crp-vd-yes .crp-vd-ico { background: #1E9E5A; }
.crp-vd-no { background: #FDECEA; border: 1.5px solid #F4B4AE; color: #A51A12; box-shadow: 0 8px 20px -10px rgba(215,38,30,.5); }
.crp-vd-no .crp-vd-ico { background: #D7261E; }
.crp-vd[data-on="cr"] .crp-vd-yes { opacity: 1; transform: scale(1); }
.crp-vd[data-on="cr"] .crp-vd-no { opacity: 0; transform: scale(.6); }
.crp-vd:not([data-on="cr"]) .crp-vd-yes { opacity: 0; transform: scale(.6); }
.crp-vd:not([data-on="cr"]) .crp-vd-no { opacity: 1; transform: scale(1); }

.crp-route-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,250px),1fr)); gap: 14px; margin-top: 26px; }
.crp-route {
	display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0;
	padding: 20px; text-align: left; cursor: pointer; background: #fff;
	border: 1.5px solid #EAEEF0; border-radius: 20px;
	box-shadow: 0 2px 4px rgba(0,47,63,.05), 0 4px 8px rgba(0,47,63,.04);
	transition: transform .25s, box-shadow .25s, border-color .25s;
}
.crp-route:hover { transform: translateY(-2px); border-color: #007AA4; }
.crp-route.is-active[data-kind="yes"] { border-color: #1E9E5A; box-shadow: 0 0 0 4px rgba(30,158,90,.12), 0 14px 28px -12px rgba(30,158,90,.35); }
.crp-route.is-active[data-kind="no"] { border-color: #D7261E; box-shadow: 0 0 0 4px rgba(215,38,30,.10), 0 14px 28px -12px rgba(215,38,30,.30); }
.crp-route-head { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.crp-route-tile { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #E6F2F6; color: #007AA4; transition: background .25s, color .25s; }
.crp-route.is-active .crp-route-tile { background: linear-gradient(135deg,#28B7B7,#007AA4); color: #fff; }
.crp-route-radio { position: relative; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #C9D6DB; background: #fff; display: grid; place-items: center; color: #fff; transition: border-color .25s, background .25s; }
.crp-route.is-active[data-kind="yes"] .crp-route-radio { border-color: #1E9E5A; background: #1E9E5A; }
.crp-route.is-active[data-kind="no"] .crp-route-radio { border-color: #D7261E; background: #D7261E; }
.crp-route-radio-yes, .crp-route-radio-no { grid-area: 1 / 1; display: grid; place-items: center; opacity: 0; transform: scale(0); transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .2s; }
.crp-route-radio-yes { position: relative; }
.crp-route-radio-no { position: absolute; inset: 0; }
.crp-route.is-active[data-kind="yes"] .crp-route-radio-yes { opacity: 1; transform: scale(1); }
.crp-route.is-active[data-kind="no"] .crp-route-radio-no { opacity: 1; transform: scale(1); }
.crp-route-q { margin-top: 6px; font-family: var(--ff-display); font-size: 17px; font-weight: 700; line-height: 1.3; }
.crp-route-e { font-size: 14px; line-height: 1.5; color: #5A6F78; }

.crp-answer { margin-top: 14px; display: flex; padding: 22px 24px; background: linear-gradient(135deg,#EEF7FB,#F7FBFC); border: 1px solid #DCEBF1; border-radius: 20px; }
.crp-answer-panel { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 20px; width: 100%; }
.crp-answer-badge { flex: none; display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 999px; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.crp-answer-badge--cr { background: linear-gradient(135deg,#28B7B7,#007AA4); }
.crp-answer-badge--plain { background: #002F3F; }
.crp-answer-body { flex: 1 1 320px; min-width: 0; }
.crp-answer-body p { margin: 0; font-size: 16px; line-height: 1.6; color: #002F3F; }
.crp-answer-sub { margin: 8px 0 0 !important; font-size: 14px !important; color: #5A6F78 !important; }

/* ------------------------------------------------------------------
   2 · Ticket guide
   ------------------------------------------------------------------ */
.crp-type-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.crp-type {
	display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px;
	border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 600;
	background: #fff; color: #002F3F; border: 1px solid #DCE3E6;
	transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.crp-type:hover { border-color: #007AA4; }
.crp-type.is-active { background: linear-gradient(135deg,#28B7B7,#007AA4); color: #fff; border-color: transparent; box-shadow: 0 6px 16px -8px rgba(0,122,164,.6); }

.crp-ticket-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,360px),1fr)); gap: 18px; margin-top: 18px; align-items: stretch; }
.crp-ticket-info { min-width: 0; padding: 24px; background: #fff; border: 1px solid #EAEEF0; border-radius: 20px; box-shadow: 0 2px 4px rgba(0,47,63,.05), 0 4px 8px rgba(0,47,63,.04); }

.crp-must { margin-bottom: 20px; padding: 14px 16px; border-radius: 14px; background: #FFF3EB; border: 1px solid #FFD9C2; }
.crp-must-head { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; color: #002F3F; }
.crp-must-head strong { color: #B54100; }
.crp-must-list { margin: 8px 0 0; padding-left: 46px; font-size: 14px; line-height: 1.6; color: #002F3F; }
.crp-must-list li { margin-bottom: 3px; }

.crp-field-label { margin: 22px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #007AA4; }
.crp-type-panel > .crp-field-label:first-child { margin-top: 0; }
.crp-must + .crp-field-label { margin-top: 0; }

.crp-checklist, .crp-dotlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.crp-checklist li, .crp-dotlist li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.55; color: #002F3F; }
.crp-checklist--teal li::before { content: "✓"; flex: none; color: #28B7B7; font-weight: 800; line-height: 1.4; }
.crp-dotlist li::before { content: ""; flex: none; width: 6px; height: 6px; margin: 8px 6px 0 0; border-radius: 50%; background: #007AA4; }

.crp-tip { display: flex; gap: 12px; align-items: flex-start; margin: 22px 0 0; padding: 14px 16px; border-radius: 14px; background: #E6F2F6; font-size: 14px; line-height: 1.6; color: #002F3F; }

.crp-ticket-mockwrap { min-width: 0; display: flex; flex-direction: column; }
.crp-mock { flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid #EAEEF0; border-radius: 20px; box-shadow: 0 2px 4px rgba(0,47,63,.05), 0 18px 40px -24px rgba(0,47,63,.35); }
.crp-mock-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; background: #002F3F; color: #fff; }
.crp-mock-head-l { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; }
.crp-mock-head-r { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.75); }
.crp-mock-dots { display: flex; gap: 5px; }
.crp-mock-dots i { width: 9px; height: 9px; border-radius: 50%; }
.crp-mock-dots i:nth-child(1) { background: #FF5C00; }
.crp-mock-dots i:nth-child(2) { background: #FF9900; }
.crp-mock-dots i:nth-child(3) { background: #28B7B7; }
.crp-mock-dl { margin: 0; flex: 1 1 auto; }
.crp-mock-row { display: grid; grid-template-columns: 108px minmax(0,1fr); gap: 4px 12px; padding: 12px 18px; }
.crp-mock-row + .crp-mock-row { border-top: 1px solid #EEF2F4; }
.crp-mock-row dt { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #5A6F78; padding-top: 3px; }
.crp-mock-row dd { margin: 0; font-size: 14px; line-height: 1.5; color: #002F3F; }
.crp-mock-tag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 8px; background: #E6F2F6; color: #007AA4; font-size: 12.5px; font-weight: 700; }
.crp-mock-subj { font-weight: 600; }
.crp-mock-ol { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.55; color: #002F3F; }
.crp-mock-ol li { margin-bottom: 3px; }
.crp-mock-att { display: flex; flex-wrap: wrap; gap: 6px; }
.crp-mock-file { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 10px; border-radius: 8px; background: #F6F8F9; border: 1px solid #E1E8EB; font-size: 13px; font-weight: 600; }
.crp-mock-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-top: 1px solid #EEF2F4; background: #F6F9FA; }
.crp-mock-foot p { margin: 0; font-size: 13.5px; color: #5A6F78; }
.crp-mock-note { display: flex; align-items: center; gap: 14px; margin: 14px 0 0; padding: 14px 18px; background: #fff; border: 1px solid #EAEEF0; border-radius: 16px; box-shadow: 0 1px 2px rgba(0,47,63,.04); font-size: 14.5px; line-height: 1.55; color: #3A5560; }
.crp-mock-note-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #FDECEA; color: #D7261E; }
.crp-mock-note strong { color: #002F3F; }
.crp-warn { color: #A51A12 !important; }

/* ------------------------------------------------------------------
   3 · CR document
   ------------------------------------------------------------------ */
.crp-doc-card { margin-top: 26px; overflow: hidden; background: #fff; border: 1px solid #EAEEF0; border-radius: 24px; box-shadow: 0 2px 4px rgba(0,47,63,.05), 0 18px 40px -26px rgba(0,47,63,.3); }
.crp-doc-filehead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 22px; background: linear-gradient(160deg,#EEF7FB 0%,#DCEEF5 100%); border-bottom: 1px solid #D3E6EE; }
.crp-doc-fileicon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #fff; box-shadow: 0 1px 2px rgba(0,47,63,.08); }
.crp-doc-filename { flex: 1 1 200px; min-width: 0; font-size: 14px; font-weight: 700; color: #002F3F; overflow-wrap: anywhere; }
.crp-doc-filelegend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; font-weight: 600; color: #3A5560; }
.crp-doc-filelegend span { display: inline-flex; align-items: center; gap: 6px; }
.crp-doc-filelegend i { width: 10px; height: 10px; border-radius: 50%; }

.crp-doc-tabs { display: grid; grid-template-columns: repeat(7, minmax(112px,1fr)); gap: 4px; padding: 14px 12px; border-bottom: 1px solid #EEF2F4; background: #FBFDFD; overflow-x: auto; scrollbar-width: none; }
.crp-doc-tabs::-webkit-scrollbar { display: none; }
.crp-doc-tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; min-width: 0; padding: 10px 6px 12px; border: 0; border-radius: 14px; background: transparent; cursor: pointer; text-align: center; transition: background .25s, box-shadow .25s; }
.crp-doc-tab:hover { background: #F1F7FA; }
.crp-doc-tab.is-active { background: #fff; }
.crp-doc-tab--you.is-active { box-shadow: 0 1px 2px rgba(0,47,63,.06), 0 10px 22px -12px rgba(0,47,63,.25), inset 0 0 0 1px rgba(255,92,0,.2); }
.crp-doc-tab--us.is-active { box-shadow: 0 1px 2px rgba(0,47,63,.06), 0 10px 22px -12px rgba(0,47,63,.25), inset 0 0 0 1px rgba(0,122,164,.2); }
.crp-doc-line { position: absolute; top: 27px; width: calc(50% - 16px); height: 2px; background: #E1E8EB; transition: background .3s; }
.crp-doc-line--l { left: -2px; }
.crp-doc-line--r { right: -2px; }
.crp-doc-tab:first-child .crp-doc-line--l,
.crp-doc-tab:last-child .crp-doc-line--r { display: none; }
.crp-doc-tab.is-done .crp-doc-line--l, .crp-doc-tab.is-active .crp-doc-line--l { background: #28B7B7; }
.crp-doc-tab.is-done .crp-doc-line--r { background: #28B7B7; }
.crp-doc-circle { position: relative; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 2px solid; font-size: 14px; font-weight: 700; background: #fff; transition: background .25s, color .25s, box-shadow .25s; }
.crp-doc-tab--you .crp-doc-circle { border-color: #FF5C00; color: #FF5C00; }
.crp-doc-tab--us .crp-doc-circle { border-color: #007AA4; color: #007AA4; }
.crp-doc-tab--you.is-done .crp-doc-circle { background: #FFEFE6; }
.crp-doc-tab--us.is-done .crp-doc-circle { background: #E6F2F6; }
.crp-doc-tab--you.is-active .crp-doc-circle { background: #FF5C00; color: #fff; box-shadow: 0 0 0 6px rgba(255,92,0,.14); }
.crp-doc-tab--us.is-active .crp-doc-circle { background: #007AA4; color: #fff; box-shadow: 0 0 0 6px rgba(0,122,164,.14); }
.crp-doc-name { font-family: var(--ff-display); font-size: 13.5px; font-weight: 700; line-height: 1.3; color: #3A5560; text-wrap: balance; transition: color .2s; }
.crp-doc-tab.is-active .crp-doc-name { color: #002F3F; }

.crp-doc-body { display: grid; grid-template-columns: minmax(200px,250px) minmax(0,1fr); gap: clamp(20px,3vw,36px); padding: clamp(20px,2.6vw,30px); }
.crp-paper { align-self: start; position: relative; padding: 18px 16px 16px; background: #fff; border: 1px solid #E1ECF0; border-radius: 14px; box-shadow: 0 1px 0 #fff inset, 0 20px 36px -24px rgba(0,47,63,.35), 6px 6px 0 -1px #F1F6F8, 6px 6px 0 0 #E1ECF0; }
.crp-paper-top { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 1px dashed #E1ECF0; }
.crp-paper-chip { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg,#28B7B7,#007AA4); }
.crp-paper-lines { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.crp-paper-lines i { display: block; height: 6px; border-radius: 3px; background: #C9DCE3; }
.crp-paper-lines i:last-child { height: 5px; background: #E1ECF0; }
.crp-paper-row { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 10px; align-items: center; padding: 7px 8px; margin-top: 4px; border-radius: 8px; background: transparent; cursor: pointer; transition: background .25s; }
.crp-paper-row.is-active { background: #E6F2F6; }
.crp-paper-n { font-size: 11px; font-weight: 700; color: #9AAAB0; text-align: center; }
.crp-paper-row.is-active .crp-paper-n { color: #007AA4; }
.crp-paper-bars { display: flex; flex-direction: column; gap: 4px; }
.crp-paper-bars i { display: block; height: 6px; border-radius: 3px; background: #DCE6EA; transition: background .25s; }
.crp-paper-bars i:last-child { height: 5px; background: #EEF2F4; }
.crp-paper-row.is-active .crp-paper-bars i { background: #007AA4; }
.crp-paper-row.is-active .crp-paper-bars i:last-child { background: rgba(0,122,164,.4); }

.crp-doc-panelwrap { min-width: 0; }
.crp-doc-panel { display: flex; flex-direction: column; min-width: 0; }
.crp-doc-panel-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.crp-doc-sectionno { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #5A6F78; }
.crp-doc-src { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.crp-doc-src i { width: 7px; height: 7px; border-radius: 50%; }
.crp-doc-src--you { background: #FFEFE6; color: #B54100; }
.crp-doc-src--you i { background: #FF5C00; }
.crp-doc-src--us { background: #E6F2F6; color: #005774; }
.crp-doc-src--us i { background: #007AA4; }
.crp-doc-h3 { margin: 8px 0 0; font-family: var(--ff-display); font-weight: 700; font-size: clamp(21px,2.3vw,26px); line-height: 1.25; color: #002F3F; }
.crp-doc-items { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid #EEF2F4; }
.crp-doc-items li { display: flex; gap: 14px; align-items: flex-start; padding: 13px 2px; border-bottom: 1px solid #EEF2F4; font-size: 15px; line-height: 1.55; color: #002F3F; }
.crp-doc-check { flex: none; width: 24px; height: 24px; margin-top: -1px; border-radius: 50%; display: grid; place-items: center; background: #E3F6F6; color: #1A9E9E; }
.crp-doc-panel-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; margin-top: auto; padding-top: 20px; }
.crp-doc-panel-foot p { flex: 1 1 280px; margin: 0; font-size: 13.5px; line-height: 1.6; color: #5A6F78; }
.crp-doc-navbtns { display: flex; gap: 8px; margin-left: auto; }
.crp-circ-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; transition: background .2s, transform .2s; }
.crp-circ-btn--ghost { border: 1.5px solid #007AA4; background: #fff; color: #007AA4; }
.crp-circ-btn--ghost:hover { background: rgba(0,122,164,.07); }
.crp-circ-btn--solid { border: 0; background: linear-gradient(135deg,#28B7B7,#007AA4); color: #fff; box-shadow: 0 6px 16px -8px rgba(0,122,164,.6); }
.crp-circ-btn[disabled] { opacity: .35; pointer-events: none; cursor: default; }

/* ------------------------------------------------------------------
   4 · The 14-step process
   ------------------------------------------------------------------ */
.crp-proc { margin-top: 26px; padding: clamp(14px,2.4vw,26px); background: linear-gradient(180deg,#EEF6F9,#F6FAFB); border: 1px solid #E1ECF0; border-radius: 24px; }
.crp-proc-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.crp-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; font-weight: 600; color: #3A5560; }
.crp-legend span { display: inline-flex; align-items: center; gap: 8px; }
.crp-legend i { width: 12px; height: 12px; border-radius: 50%; }
.crp-proc-count { font-size: 13px; font-weight: 700; color: #007AA4; }
.crp-proc-bar { height: 6px; margin: 14px 0 18px; border-radius: 999px; background: #DCE8ED; overflow: hidden; }
.crp-proc-bar-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg,#28B7B7,#007AA4); transition: width .35s cubic-bezier(.22,1,.36,1); }
.crp-proc-body { display: flex; gap: 18px; align-items: stretch; }

.crp-rail { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 14px clamp(10px,1.6vw,16px); flex: 0 0 clamp(280px,36%,360px); min-width: 0; background: #fff; border: 1px solid #EAEEF0; border-radius: 20px; box-shadow: 0 2px 4px rgba(0,47,63,.05), 0 4px 8px rgba(0,47,63,.04); }
.crp-ph { display: flex; flex-direction: column; background: transparent; border-radius: 0; transition: background .3s; }
.crp-ph:not(.is-open):not(:last-child) { border-bottom: 1px solid #EEF2F4; }
.crp-ph.is-open { background: #F1F7FA; border-radius: 14px; }
.crp-ph-head { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 0 10px 0 0; border: 0; border-radius: 12px; background: transparent; text-align: left; cursor: pointer; transition: background .2s; }
.crp-ph-head:hover { background: #F6F9FA; }
.crp-ph-marker { position: relative; align-self: stretch; min-height: 60px; display: flex; align-items: center; justify-content: center; }
.crp-ph-line { position: absolute; left: 19px; width: 2px; background: #E1E8EB; transition: background .3s; }
.crp-ph-line--t { top: 0; height: 50%; }
.crp-ph-line--b { top: 50%; bottom: 0; }
.crp-ph:first-child .crp-ph-line--t { background: transparent; }
.crp-ph.is-done .crp-ph-line--t, .crp-ph.is-done .crp-ph-line--b, .crp-ph.is-open .crp-ph-line--t { background: #28B7B7; }
.crp-ph-diamond { position: relative; width: 12px; height: 12px; border-radius: 3px; transform: rotate(45deg); background: #C9DCE3; box-shadow: 0 0 0 4px #fff; transition: background .3s; }
.crp-ph.is-done .crp-ph-diamond, .crp-ph.is-open .crp-ph-diamond { background: #007AA4; }
.crp-ph-label { display: flex; align-items: baseline; gap: 10px; min-width: 0; padding: 20px 0; }
.crp-ph-name { font-family: var(--ff-display); font-size: 14px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #3A5560; }
.crp-ph.is-open .crp-ph-name { color: #007AA4; }
.crp-ph-range { font-size: 12.5px; font-weight: 700; color: #5A6F78; }
.crp-ph-chev { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; align-items: center; justify-content: center; background: #F1F4F5; color: #5A6F78; transition: background .25s, color .25s; }
.crp-ph-chev svg { transition: transform .3s cubic-bezier(.22,1,.36,1); }
.crp-ph.is-open .crp-ph-chev { background: #E6F2F6; color: #007AA4; }
.crp-ph.is-open .crp-ph-chev svg { transform: rotate(180deg); }
.crp-ph-steps { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(.22,1,.36,1); }
.crp-ph.is-open .crp-ph-steps { grid-template-rows: 1fr; }
.crp-ph-steps-inner { list-style: none; margin: 0; padding: 0; min-height: 0; overflow: hidden; opacity: 0; transition: opacity .3s; }
.crp-ph.is-open .crp-ph-steps-inner { opacity: 1; }

.crp-step { list-style: none; padding: 0 6px; }
/* margin-left:-6px cancels the .crp-step padding so the step markers/line sit
   on the SAME vertical axis as the parent phase diamond (otherwise the child
   line is indented 6px to the right). */
.crp-step-btn { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; gap: 12px; align-items: center; width: calc(100% + 6px); margin-left: -6px; padding: 0 10px 0 0; border: 0; border-radius: 12px; text-align: left; cursor: pointer; background: transparent; transition: background .2s, box-shadow .2s; }
.crp-step-btn:hover { background: #F1F7FA; }
.crp-step.is-current .crp-step-btn { background: #fff; box-shadow: 0 1px 2px rgba(0,47,63,.08), 0 6px 16px -8px rgba(0,47,63,.18); }
.crp-step-marker { position: relative; align-self: stretch; min-height: 56px; display: flex; align-items: center; justify-content: center; }
.crp-step-line { position: absolute; left: 19px; width: 2px; background: #E1E8EB; transition: background .3s; }
.crp-step-line--t { top: 0; height: 50%; }
.crp-step-line--b { top: 50%; bottom: 0; }
.crp-step.is-done .crp-step-line--t, .crp-step.is-done .crp-step-line--b, .crp-step.is-current .crp-step-line--t { background: #28B7B7; }
.crp-step-dot { position: relative; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 2px solid #007AA4; background: #fff; color: #007AA4; font-size: 13px; font-weight: 700; transition: background .25s, color .25s, box-shadow .25s; }
.crp-step[data-who="you"] .crp-step-dot { border-color: #FF5C00; color: #FF5C00; }
.crp-step[data-who="joint"] .crp-step-dot { border-color: #002F3F; color: #002F3F; }
.crp-step.is-done[data-who="you"] .crp-step-dot { background: #FFEFE6; }
.crp-step.is-done[data-who="us"] .crp-step-dot { background: #E6F2F6; }
.crp-step.is-done[data-who="joint"] .crp-step-dot { background: #E9EEF0; }
.crp-step.is-current[data-who="you"] .crp-step-dot { background: #FF5C00; color: #fff; box-shadow: 0 0 0 5px rgba(255,92,0,.16); }
.crp-step.is-current[data-who="us"] .crp-step-dot { background: #007AA4; color: #fff; box-shadow: 0 0 0 5px rgba(0,122,164,.16); }
.crp-step.is-current[data-who="joint"] .crp-step-dot { background: #002F3F; color: #fff; box-shadow: 0 0 0 5px rgba(0,47,63,.14); }
.crp-step-text { min-width: 0; padding: 8px 0; }
.crp-step-name { display: block; font-family: var(--ff-display); font-size: 14.5px; font-weight: 700; line-height: 1.3; color: #002F3F; }
.crp-step-who { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: #5A6F78; }
.crp-step.is-current[data-who="you"] .crp-step-who { color: #B54100; }
.crp-step.is-current[data-who="us"] .crp-step-who { color: #005774; }
.crp-step.is-current[data-who="joint"] .crp-step-who { color: #002F3F; }
.crp-step-chev { display: none; color: #007AA4; }
.crp-step[data-who="you"] .crp-step-chev { color: #FF5C00; }
.crp-step[data-who="joint"] .crp-step-chev { color: #002F3F; }
.crp-step.is-current .crp-step-chev { display: inline-flex; }

.crp-det-wrap { flex: 1 1 auto; min-width: 0; position: relative; display: flex; }
.crp-det { flex: 1 1 auto; display: flex; flex-direction: column; position: relative; overflow: hidden; padding: clamp(18px,2.4vw,26px); background: #fff; border: 1px solid #EAEEF0; border-radius: 20px; box-shadow: 0 2px 4px rgba(0,47,63,.05), 0 18px 40px -26px rgba(0,47,63,.3); }
.crp-det[hidden] { display: none; }
.crp-det-bar { position: absolute; left: 0; right: 0; top: 0; height: 4px; }
.crp-det-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.crp-det-head-l { display: flex; align-items: center; gap: 14px; min-width: 0; }
.crp-det-num { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff; font-size: 17px; font-weight: 700; box-shadow: 0 8px 18px -8px rgba(0,47,63,.4); }
.crp-det-phase { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #5A6F78; }
.crp-det-title { margin: 2px 0 0; font-family: var(--ff-display); font-weight: 700; font-size: clamp(19px,2vw,22px); line-height: 1.25; color: #002F3F; }
.crp-det-owner { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.crp-det-time { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 8px 12px; border-radius: 10px; background: #E6F2F6; font-size: 13.5px; font-weight: 600; color: #005774; align-self: flex-start; }
.crp-det-rows { margin: 22px 0; display: flex; flex-direction: column; }
.crp-det-row { position: relative; display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 14px; }
.crp-det-row:not(:last-child)::before { content: ""; position: absolute; left: 19px; top: 46px; bottom: -6px; width: 2px; border-radius: 2px; background: linear-gradient(180deg,#007AA455,#E1E8EB); }
.crp-det-ico { position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; }
.crp-det-ico--blue { background: #E6F2F6; color: #007AA4; }
.crp-det-ico--orange { background: #FFEFE6; color: #B54100; }
.crp-det-ico--teal { background: #E3F6F6; color: #0E6E6E; }
.crp-det-col { min-width: 0; padding: 8px 0 20px; }
.crp-det-row:last-child .crp-det-col { padding-bottom: 0; }
.crp-det-collabel { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.crp-det-collabel--blue { color: #007AA4; }
.crp-det-collabel--orange { color: #B54100; }
.crp-det-collabel--teal { color: #0E6E6E; }
.crp-det-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.crp-det-list li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.6; color: #002F3F; }
.crp-det-list li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 9px; border-radius: 50%; }
.crp-det-list--blue li::before { background: #007AA4; }
.crp-det-list--orange li::before { background: #B54100; }
.crp-det-list--teal li::before { background: #0E6E6E; }
.crp-det-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid #EEF2F4; }
.crp-det-count { font-size: 13px; font-weight: 600; color: #5A6F78; }

/* ------------------------------------------------------------------
   5 · Approvals
   ------------------------------------------------------------------ */
.crp-chain { list-style: none; margin: 26px 0 0; padding: 0; display: flex; align-items: stretch; gap: 0; }
.crp-chain-item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 16px; background: #fff; border: 1.5px solid #DCE8ED; border-radius: 16px; transition: opacity .25s, background .25s, border-color .25s; }
.crp-chain-item[data-skip] { background: transparent; border: 1.5px dashed #B6C8CF; opacity: .6; }
.crp-chain-item--you { background: #FFF3EB; border-color: #FF9254; }
.crp-chain-tag { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #007AA4; }
.crp-chain-tag--you { color: #B54100; }
.crp-chain-s { font-family: var(--ff-display); font-size: 15px; font-weight: 700; line-height: 1.3; color: #002F3F; }
.crp-chain-d { font-size: 13.5px; line-height: 1.55; color: #3A5560; }
.crp-chain-arrow { flex: none; display: grid; place-items: center; width: 26px; color: #007AA4; }

.crp-appcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,280px),1fr)); gap: 16px; margin-top: 18px; }
.crp-appcard { min-width: 0; padding: 22px; background: #fff; border: 1px solid #EAEEF0; border-radius: 20px; box-shadow: 0 2px 4px rgba(0,47,63,.05), 0 4px 8px rgba(0,47,63,.04); }
.crp-appcard--warm { border-color: #FFD9C2; }
.crp-appcard-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; }
.crp-appcard-h { margin: 14px 0 0; font-family: var(--ff-display); font-weight: 700; font-size: 17px; color: #002F3F; }
.crp-bullets { margin: 10px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.6; color: #3A5560; }
.crp-bullets li { margin-bottom: 6px; }
.crp-bullets li:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------
   6 · Timings + ground rules
   ------------------------------------------------------------------ */
.crp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,220px),1fr)); gap: 14px; margin-top: 26px; }
.crp-stat { min-width: 0; padding: 22px; background: #fff; border: 1px solid #EAEEF0; border-radius: 20px; box-shadow: 0 2px 4px rgba(0,47,63,.05), 0 4px 8px rgba(0,47,63,.04); }
.crp-stat--warm { border-color: #FFD9C2; }
.crp-stat-num { font-family: var(--ff-display); font-size: 26px; font-weight: 800; line-height: 1.1; color: #007AA4; }
.crp-stat-num--orange { color: #E85400; }
.crp-stat-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 10px; }
.crp-stat-tag { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 8px; font-size: 12.5px; font-weight: 700; }
.crp-stat-tag i { width: 7px; height: 7px; border-radius: 50%; }
.crp-stat-tag--amber { background: #FFF6D9; color: #7A5A00; }
.crp-stat-tag--amber i { background: #F2B705; }
.crp-stat-tag--blue { background: #E6F2F6; color: #005774; }
.crp-stat-tag--blue i { background: #007AA4; }
.crp-stat-tag--gray { background: #EEF2F4; color: #3A5560; }
.crp-stat-tag--gray i { background: #8A979D; }
.crp-stat p, .crp-stat-p { margin: 0; font-size: 14px; line-height: 1.55; color: #5A6F78; }
.crp-stat-p { margin-top: 12px; }

.crp-rules { list-style: none; margin: 16px 0 0; padding: 8px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,340px),1fr)); column-gap: 32px; background: #fff; border: 1px solid #EAEEF0; border-radius: 20px; box-shadow: 0 2px 4px rgba(0,47,63,.05), 0 4px 8px rgba(0,47,63,.04); }
.crp-rule { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid #EEF2F4; font-size: 14.5px; line-height: 1.55; color: #3A5560; }
.crp-rule-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #E6F2F6; }

.crp-cta { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 28px; padding: clamp(22px,3vw,32px); border-radius: 24px; background: radial-gradient(120% 100% at 100% 0%, rgba(124,217,217,.30) 0%, rgba(124,217,217,0) 55%), #002F3F; color: #fff; }
.crp-cta-orb { position: absolute; right: -90px; bottom: -140px; width: 280px; height: 280px; border-radius: 50%; background: #3395B6; opacity: .25; }
.crp-cta-text { position: relative; min-width: 0; }
.crp-cta-text strong { display: block; font-family: var(--ff-display); font-size: clamp(19px,2vw,22px); font-weight: 700; color: #fff; }
.crp-cta-text p { margin: 6px 0 0; font-size: 15px; color: #E8EEF1; }
.crp-cta .crp-btn { position: relative; }

/* ------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------ */
@media (max-width: 860px) {
	.crp-proc-body { flex-direction: column; }
	.crp-rail { flex: 1 1 auto; }
	.crp-chain { flex-direction: column; }
	.crp-chain-arrow { width: 100%; height: 26px; }
	.crp-chain-arrow svg { transform: rotate(90deg); }
}
@media (max-width: 760px) {
	.crp-doc-body { grid-template-columns: 1fr; }
	.crp-paper { display: none; }
}
@media (max-width: 560px) {
	.crp-mock-row { grid-template-columns: minmax(0,1fr); }
	.crp-mock-row dt { padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
	#crproc-page.crp *,
	#crproc-page.crp *::before,
	#crproc-page.crp *::after { animation: none !important; transition: none !important; }
}