/* ─────────────────────────────────────────────────────────────
 * CRREM Outlook — page-scoped styles
 * Loaded only on /pathways/development-outlook/ via inc/outlook-page.php
 * Spec: docs/superpowers/specs/2026-04-29-crrem-outlook-design.md
 * ───────────────────────────────────────────────────────────── */

.crrem-outlook {
	/* CRREM canonical primaries */
	--evergreen: #174A3B;
	--evergreen-deep: #103324;
	--slate: #213338;
	--slate-60: #66707A;
	--slate-40: #9AA3A8;
	--arctic: #2F6F85;
	--arctic-soft: rgba(47, 111, 133, 0.10);

	/* CRREM secondaries */
	--amber: #D6A24A;
	--amber-deep: #B28433;
	--amber-soft: rgba(214, 162, 74, 0.18);
	--sienna: #C15A2E;
	--sienna-soft: rgba(193, 90, 46, 0.12);
	--ember: #A63F3C;
	--ember-soft: rgba(166, 63, 60, 0.12);
	--fern: #477262;
	--fern-soft: rgba(71, 114, 98, 0.18);
	--sage: #7BA68A;

	/* CRREM section tints (the canonical band palette) */
	--tint-warm: #DCE8E2;
	--tint-off:  #F7F8F8;
	--tint-cool: #E0EAEE;
	--tint-grey: #F3F4F6;

	/* Hairlines + shadows */
	--hair: rgba(33, 51, 56, 0.08);
	--hair-strong: rgba(33, 51, 56, 0.16);
	--hair-warm: rgba(23, 74, 59, 0.12);
	--shadow-card: 0 2px 30px rgba(23, 74, 59, 0.06);
	--shadow-lift: 0 12px 36px rgba(23, 74, 59, 0.10);

	/* Motion — single source of cadence */
	--pulse-duration: 2s;
	--breath-duration: 3s;

	/* Base type */
	font-family: 'Lexend Deca', sans-serif;
	font-size: 16.5px;
	color: var(--slate);
	line-height: 1.6;
	background: #fff;
}

.crrem-outlook *,
.crrem-outlook *::before,
.crrem-outlook *::after { box-sizing: border-box; }

.crrem-outlook .material-symbols-rounded {
	font-family: 'Material Symbols Rounded';
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.crrem-outlook .container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 32px;
}

/* Reduced-motion baseline — overridden per-effect later */
@media (prefers-reduced-motion: reduce) {
	.crrem-outlook *,
	.crrem-outlook *::before,
	.crrem-outlook *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* Synced heart pulse — single keyframe used by all "live" indicators */
@keyframes crrem-outlook-pulse {
	0%, 100% { box-shadow: 0 0 0 3px rgba(71, 114, 98, 0.18); }
	50%      { box-shadow: 0 0 0 7px rgba(71, 114, 98, 0.04); }
}
@keyframes crrem-outlook-pulse-ring {
	0%, 100% { transform: scale(1); opacity: 0.7; }
	50%      { transform: scale(1.6); opacity: 0; }
}
@keyframes crrem-outlook-breath {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.85; }
}

/* ===== Top meta strip ===== */
.crrem-outlook-top {
	background: #fff;
	border-bottom: 1px solid var(--hair);
	position: sticky;
	top: 73px;
	z-index: 50;
	transition: background 200ms ease, box-shadow 200ms ease;
}
.crrem-outlook-top.is-stuck {
	background: rgba(255, 255, 255, 0.94);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	box-shadow: 0 1px 0 var(--hair), 0 8px 24px rgba(23, 74, 59, 0.06);
}
@media (max-width: 768px) { .crrem-outlook-top { top: 60px; } }
.crrem-outlook-top-row {
	display: flex; align-items: center; gap: 16px;
	padding: 14px 0; font-size: 12px; flex-wrap: wrap;
}
@media (max-width: 980px) {
	.crrem-outlook-top-row .crrem-outlook-pill { display: none; }
	.crrem-outlook-top-row .crrem-outlook-pill--version { display: inline-flex; }
}
.crrem-outlook-crumb { color: var(--slate-60); display: inline-flex; align-items: center; gap: 8px; }
.crrem-outlook-crumb .sep { color: var(--hair); }
.crrem-outlook-crumb a { color: var(--arctic); text-decoration: none; }
.crrem-outlook-crumb a:hover { color: var(--evergreen); }
.crrem-outlook-grow { flex: 1; }
.crrem-outlook-pill {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 4px 12px; border-radius: 999px;
	font-size: 11px; letter-spacing: 0.04em; color: var(--slate-60);
	background: var(--tint-off); font-variant-numeric: tabular-nums;
}
.crrem-outlook-pill .dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--fern);
	box-shadow: 0 0 0 3px rgba(71, 114, 98, 0.18);
	animation: crrem-outlook-pulse var(--pulse-duration) ease-in-out infinite;
}
.crrem-outlook-pill--version { background: rgba(23, 74, 59, 0.08); color: var(--evergreen); font-weight: 500; }
.crrem-outlook-pill--next { background: var(--arctic-soft); color: var(--arctic); font-weight: 500; }

/* ===== Sticky mini-board ===== */
.crrem-outlook-nav {
	background: rgba(255, 255, 255, 0.94);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--hair);
	position: sticky;
	z-index: 49;
	top: var(--pdo-nav-offset, 114px);
}
.crrem-outlook-nav-inner {
	display: flex; align-items: center; gap: 14px;
	min-height: 48px; position: relative; flex-wrap: wrap;
}
.crrem-outlook-nav-inner::before {
	content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
	background: linear-gradient(to right, var(--evergreen), var(--arctic) 50%, var(--amber));
	opacity: 0.45;
}
.crrem-outlook-nav-slug {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10.5px; letter-spacing: 0.10em;
	color: var(--slate-60); text-transform: uppercase;
}
.crrem-outlook-nav-tiles {
	display: flex; gap: 4px; list-style: none; margin: 0; padding: 0;
	overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.crrem-outlook-nav-tiles::-webkit-scrollbar { display: none; }
.crrem-outlook-nav-tile {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 9px 14px; border-radius: 8px;
	font-family: 'Lexend Deca', sans-serif;
	font-size: 12.5px; font-weight: 500;
	color: var(--slate-60); text-decoration: none;
	white-space: nowrap; transition: color 180ms ease, background 180ms ease;
}
.crrem-outlook-nav-tile .lbl {
	font-size: 10.5px; letter-spacing: 0.08em;
	text-transform: uppercase; font-weight: 600;
}
.crrem-outlook-nav-tile .count {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
}
.crrem-outlook-nav-tile:hover { background: var(--tint-off); color: var(--evergreen); }
.crrem-outlook-nav-tile.is-active { background: var(--tint-off); font-weight: 600; }

.crrem-outlook-nav-tile.is-released:hover .count,
.crrem-outlook-nav-tile.is-released.is-active .count,
.crrem-outlook-nav-tile.is-released .mark { color: var(--fern); }
.crrem-outlook-nav-tile.is-building:hover .count,
.crrem-outlook-nav-tile.is-building.is-active .count,
.crrem-outlook-nav-tile.is-building .mark { color: var(--amber-deep); }
.crrem-outlook-nav-tile.is-scoping:hover .count,
.crrem-outlook-nav-tile.is-scoping.is-active .count,
.crrem-outlook-nav-tile.is-scoping .mark { color: var(--arctic); }
.crrem-outlook-nav-tile.is-horizon:hover .count,
.crrem-outlook-nav-tile.is-horizon.is-active .count,
.crrem-outlook-nav-tile.is-horizon .mark { color: var(--slate); }

.crrem-outlook-nav-countdown {
	margin-left: auto; padding: 6px 12px;
	border-left: 1px solid var(--hair);
	display: inline-flex; align-items: baseline; gap: 6px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10.5px; letter-spacing: 0.06em;
	color: var(--slate-60); text-transform: uppercase;
	white-space: nowrap;
}
.crrem-outlook-nav-countdown strong { color: var(--evergreen); font-weight: 600; }
.crrem-outlook-nav-countdown .d {
	color: var(--arctic); background: var(--arctic-soft);
	padding: 2px 7px; border-radius: 4px; font-weight: 600;
}
@media (max-width: 720px) { .crrem-outlook-nav-countdown { display: none; } }

.crrem-outlook-nav-watching {
	background: var(--tint-grey); border: 0; padding: 4px 12px;
	border-radius: 999px; cursor: pointer;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10px; letter-spacing: 0.06em;
	color: var(--slate-60); display: inline-flex; align-items: center; gap: 6px;
	text-transform: uppercase; transition: background 180ms;
}
.crrem-outlook-nav-watching:hover { background: var(--amber-soft); color: var(--amber-deep); }
.crrem-outlook-nav-watching .watching-count { font-weight: 600; }

.crrem-outlook-nav-progress {
	position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
	pointer-events: none;
}
.crrem-outlook-nav-progress .bar {
	display: block; height: 100%; width: 0;
	background: linear-gradient(to right, var(--arctic), var(--evergreen));
	transition: width 120ms linear;
}

/* ===== Masthead ===== */
.crrem-outlook-masthead {
	position: relative;
	padding: 88px 0 72px;
	isolation: isolate;
	overflow: hidden;
	background: #fff;
}
.crrem-outlook-masthead::before {
	content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px;
	background: linear-gradient(to right, var(--evergreen), var(--arctic) 38%, var(--amber) 78%, var(--evergreen));
	opacity: 0.55; z-index: 1;
}
.crrem-outlook-masthead::after {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background:
		radial-gradient(ellipse 1100px 600px at 88% -10%, rgba(47, 111, 133, 0.10), transparent 60%),
		radial-gradient(ellipse 800px 500px at -5% 110%, rgba(214, 162, 74, 0.08), transparent 60%),
		linear-gradient(180deg, #FBFAF6 0%, #fff 100%);
}
.crrem-outlook-masthead-grid-bg {
	position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background-image:
		linear-gradient(to right,  rgba(15, 44, 40, 0.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(15, 44, 40, 0.05) 1px, transparent 1px);
	background-size: 80px 80px;
	mask-image: radial-gradient(ellipse 900px 600px at 50% 30%, #000 35%, transparent 78%);
	-webkit-mask-image: radial-gradient(ellipse 900px 600px at 50% 30%, #000 35%, transparent 78%);
	opacity: 0.55;
}
.crrem-outlook-masthead-grid {
	position: relative; z-index: 2;
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 64px;
	align-items: center;
}
@media (max-width: 980px) {
	.crrem-outlook-masthead { padding: 56px 0 44px; }
	.crrem-outlook-masthead-grid { grid-template-columns: 1fr; gap: 36px; }
}
.crrem-outlook-masthead-slug {
	display: inline-block;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 11px; letter-spacing: 0.10em;
	color: var(--slate-60); text-transform: uppercase;
	margin-bottom: 22px;
}
.crrem-outlook-masthead h1 {
	font-family: 'Lexend Deca', sans-serif;
	font-weight: 600;
	font-size: clamp(40px, 5.6vw, 64px);
	line-height: 1.04;
	letter-spacing: -0.025em;
	color: var(--evergreen);
	margin: 0 0 22px;
}
.crrem-outlook-masthead h1 .em { color: var(--arctic); }

.crrem-outlook-masthead-anchors {
	display: flex; gap: 18px; flex-wrap: wrap;
	font-size: 13px;
}
.crrem-outlook-masthead-anchors a {
	color: var(--slate); text-decoration: none;
	border-bottom: 1px solid var(--hair-strong);
	padding-bottom: 2px;
	transition: color 180ms, border-color 180ms;
}
.crrem-outlook-masthead-anchors a:hover { color: var(--evergreen); border-color: var(--arctic); }
.crrem-outlook-masthead-anchors .sep { color: var(--hair-strong); border: 0; }

/* Quadrant tiles */
.crrem-outlook-quadrant {
	display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.crrem-outlook-q-tile {
	padding: 22px 22px 18px;
	border-radius: 12px;
	border: 1px solid var(--hair);
	display: flex; flex-direction: column; gap: 12px;
	text-decoration: none; color: inherit;
	transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.crrem-outlook-q-tile:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-lift);
	border-color: var(--hair-warm);
}
.crrem-outlook-q-tile.is-released { background: var(--tint-warm); }
.crrem-outlook-q-tile.is-building { background: var(--tint-off); }
.crrem-outlook-q-tile.is-scoping  { background: var(--tint-cool); }
.crrem-outlook-q-tile.is-horizon  { background: var(--tint-grey); }
.crrem-outlook-q-tile .head {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10px; font-weight: 600;
	letter-spacing: 0.10em; text-transform: uppercase;
}
.crrem-outlook-q-tile.is-released .head,
.crrem-outlook-q-tile.is-released .num { color: var(--fern); }
.crrem-outlook-q-tile.is-building .head,
.crrem-outlook-q-tile.is-building .num { color: var(--amber-deep); }
.crrem-outlook-q-tile.is-scoping  .head,
.crrem-outlook-q-tile.is-scoping  .num { color: var(--arctic); }
.crrem-outlook-q-tile.is-horizon  .head,
.crrem-outlook-q-tile.is-horizon  .num { color: var(--slate); }
.crrem-outlook-q-tile .num {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 44px; font-weight: 600;
	letter-spacing: -0.03em; line-height: 1;
	font-variant-numeric: tabular-nums;
}
.crrem-outlook-q-tile .lbl { font-size: 12px; color: var(--slate-60); }

/* Reveal-on-scroll baseline */
.crrem-outlook [data-reveal] {
	opacity: 0; transform: translateY(16px);
	transition: opacity 600ms ease, transform 600ms ease;
}
.crrem-outlook [data-reveal].is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.crrem-outlook [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ===== Shelf primitives ===== */
.crrem-outlook-shelf { padding: 64px 0; border-top: 1px solid var(--hair); }
.crrem-outlook-shelf-head {
	display: flex; justify-content: space-between; align-items: flex-start;
	gap: 24px; margin-bottom: 28px; flex-wrap: wrap;
}
.crrem-outlook-shelf-eyebrow {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10.5px; font-weight: 600;
	letter-spacing: 0.12em; text-transform: uppercase;
	margin-bottom: 10px;
}
.crrem-outlook-shelf-eyebrow .num {
	background: rgba(0,0,0,0.04); padding: 3px 8px; border-radius: 4px;
}
.crrem-outlook-shelf-h2 {
	font-family: 'Lexend Deca', sans-serif;
	font-weight: 600; font-size: clamp(24px, 3vw, 32px);
	letter-spacing: -0.02em; line-height: 1.2;
	color: var(--evergreen); margin: 0;
	max-width: 720px;
}
.crrem-outlook-shelf-action {
	font-family: 'Lexend Deca', sans-serif;
	font-size: 13px; font-weight: 500;
	display: inline-flex; align-items: center; gap: 6px;
	color: var(--slate); text-decoration: none;
	padding: 8px 0; transition: color 180ms;
}
.crrem-outlook-shelf-action .material-symbols-rounded { font-size: 18px; transition: transform 200ms ease; }
.crrem-outlook-shelf-action:hover .material-symbols-rounded { transform: translateX(3px); }

/* ===== Released shelf ===== */
.crrem-outlook-shelf--released {
	background: var(--tint-warm);
	border-top: 0;
}
.crrem-outlook-shelf--released .crrem-outlook-shelf-eyebrow { color: var(--fern); }
.crrem-outlook-shelf--released .crrem-outlook-shelf-action { color: var(--fern); }
.crrem-outlook-shelf--released .crrem-outlook-shelf-action:hover { color: var(--evergreen); }

.crrem-outlook-released-stats {
	background: #fff;
	border: 1px solid var(--hair);
	border-radius: 14px;
	padding: 28px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
}
@media (max-width: 720px) { .crrem-outlook-released-stats { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
.crrem-outlook-released-stats .stat {
	display: flex; flex-direction: column; gap: 6px;
	border-left: 2px solid var(--fern);
	padding-left: 16px;
}
.crrem-outlook-released-stats .num {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 38px; font-weight: 600;
	color: var(--fern);
	letter-spacing: -0.03em; line-height: 1;
	font-variant-numeric: tabular-nums;
}
.crrem-outlook-released-stats .stat .num:not(:only-child):where([data-long="true"]),
.crrem-outlook-released-stats .stat .num { /* Date strings get smaller */ }
.crrem-outlook-released-stats .lbl { font-size: 12.5px; color: var(--slate); font-weight: 500; }
.crrem-outlook-released-stats .sub {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10.5px; color: var(--slate-60); letter-spacing: 0.04em;
}

/* Just shipped chip (Burnt Sienna) */
.chip-just-shipped {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 3px 10px; border-radius: 999px;
	background: var(--sienna-soft); color: var(--sienna);
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10px; font-weight: 600;
	letter-spacing: 0.08em; text-transform: uppercase;
	width: fit-content;
}
.chip-just-shipped::before {
	content: ''; width: 6px; height: 6px;
	background: var(--sienna); border-radius: 50%;
}

/* Date stats — auto-shrink number column when value is long (e.g., "29 Apr 2026") */
.crrem-outlook-released-stats .stat .num { font-size: clamp(22px, 2.4vw, 38px); }

/* ===== Building shelf ===== */
.crrem-outlook-shelf--building { background: var(--tint-off); }
.crrem-outlook-shelf--building .crrem-outlook-shelf-eyebrow { color: var(--amber-deep); }

.crrem-outlook-build-grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
@media (max-width: 980px) { .crrem-outlook-build-grid { grid-template-columns: 1fr; } }
.crrem-outlook-build-card {
	background: #fff; border: 1px solid var(--hair); border-radius: 14px;
	padding: 22px 22px 20px;
	display: flex; flex-direction: column; gap: 12px;
	position: relative;
	transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.crrem-outlook-build-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-lift);
	border-color: var(--amber-deep);
}
.crrem-outlook-build-card.is-reslated { border-color: rgba(166, 63, 60, 0.25); }
.crrem-outlook-build-card .head {
	display: flex; justify-content: space-between; align-items: flex-start;
	gap: 12px;
}
.crrem-outlook-build-card h3 {
	font-family: 'Lexend Deca', sans-serif;
	font-weight: 600; font-size: 17px;
	color: var(--evergreen); letter-spacing: -0.01em;
	line-height: 1.25; margin: 0;
}
.crrem-outlook-build-card .desc {
	font-size: 13px; color: var(--slate); line-height: 1.55; margin: 0;
}

/* ===== Pin / Track button =====
   High-specificity resets neutralize the WP theme's global <button> rules
   (arctic-blue fill leak — same fix as the watching pill upstream).
   Visual identity:
     • Idle  — circular ghost, hair border, slate-40 outline icon
     • Hover — evergreen-tinted halo, evergreen icon, lifts 1px
     • Pinned — filled evergreen disc, white filled-bookmark icon, with a
                soft pulse ring to communicate "watching" without shouting */
.crrem-outlook button.pin-btn,
.crrem-outlook .pin-btn {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 22px !important;
	height: 22px !important;
	min-height: 0 !important;
	padding: 0 !important;
	border-radius: 50% !important;
	border: 1px solid var(--hair) !important;
	background: transparent !important;
	color: var(--slate-40) !important;
	box-shadow: none !important;
	cursor: pointer;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0;
	position: relative;
	transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.crrem-outlook .pin-btn .material-symbols-rounded {
	font-size: 13px !important;
	line-height: 1 !important;
	color: inherit !important;
	background: transparent !important;
	transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.crrem-outlook .pin-btn:hover {
	color: var(--evergreen) !important;
	background: rgba(23, 74, 59, 0.06) !important;
	border-color: rgba(23, 74, 59, 0.22) !important;
	transform: translateY(-1px);
}
.crrem-outlook .pin-btn:hover .material-symbols-rounded {
	transform: scale(1.10);
}
.crrem-outlook .pin-btn:focus-visible {
	outline: 2px solid var(--arctic) !important;
	outline-offset: 2px;
}
.crrem-outlook .pin-btn.is-pinned {
	color: #FFFFFF !important;
	background: var(--evergreen) !important;
	border-color: var(--evergreen) !important;
	box-shadow: 0 4px 10px -4px rgba(23, 74, 59, 0.45) !important;
}
.crrem-outlook .pin-btn.is-pinned .material-symbols-rounded {
	font-variation-settings: 'FILL' 1;
	transform: scale(1);
}
.crrem-outlook .pin-btn.is-pinned::after {
	/* Soft pulse ring — fires once when pinned, gentle ambient pulse after */
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	background: var(--evergreen);
	opacity: 0.22;
	z-index: -1;
	animation: crrem-outlook-pin-pulse 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes crrem-outlook-pin-pulse {
	0%   { transform: scale(0.85); opacity: 0.30; }
	60%  { transform: scale(1.55); opacity: 0; }
	100% { transform: scale(1.55); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.crrem-outlook .pin-btn.is-pinned::after { animation: none; opacity: 0; }
	.crrem-outlook .pin-btn { transition: none; }
}

/* Phase tape */
.phase-tape {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
	margin: 4px 0 2px;
}
.phase-seg {
	height: 5px; border-radius: 3px;
	background: var(--hair); position: relative; overflow: hidden;
}
.phase-seg.is-done { background: var(--amber-deep); }
.phase-seg.is-active { background: rgba(178, 132, 51, 0.20); }
.phase-seg.is-active::before {
	content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 50%;
	background: var(--amber); border-radius: 3px;
	animation: crrem-outlook-breath var(--breath-duration) ease-in-out infinite;
}
.phase-tape-labels {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 9px; letter-spacing: 0.06em;
	text-transform: uppercase; color: var(--slate-40);
	margin-top: 4px;
}
.phase-tape-labels span.is-active { color: var(--amber-deep); font-weight: 600; }
.phase-tape-labels span.is-done   { color: var(--amber-deep); }

/* Meta + milestone + CTA */
.crrem-outlook-build-card .meta {
	display: flex; justify-content: space-between; align-items: baseline;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10.5px; letter-spacing: 0.06em;
	color: var(--slate-60); text-transform: uppercase;
	border-top: 1px dashed var(--hair-strong); padding-top: 10px;
}
.crrem-outlook-build-card .next-up { color: var(--amber-deep); font-weight: 600; }
.crrem-outlook-build-card .milestone {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 18px; font-weight: 600; color: var(--amber-deep);
	letter-spacing: -0.01em; margin: 2px 0 0;
}
.crrem-outlook-build-card .milestone.is-reslated { color: var(--ember); }

.crrem-outlook-build-card .cta {
	font-size: 12px; color: var(--amber-deep); font-weight: 500;
	text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
	margin-top: auto;
}
.crrem-outlook-build-card .cta::after {
	content: '→'; font-family: 'JetBrains Mono', monospace;
	transition: transform 200ms ease;
}
.crrem-outlook-build-card:hover .cta::after { transform: translateX(3px); }

/* Reslated chip (Ember Red) */
.chip-reslated {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 2px 9px; border-radius: 999px;
	background: var(--ember-soft); color: var(--ember);
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 9px; font-weight: 600;
	letter-spacing: 0.08em; text-transform: uppercase;
}
.chip-reslated::before {
	content: ''; width: 5px; height: 5px;
	background: var(--ember); border-radius: 50%;
}

/* ===== Returning-visitor greeting ===== */
.crrem-outlook-greeting { padding: 24px 0 0; background: #fff; }
.crrem-outlook-greeting .greeting-card {
	background: var(--tint-warm);
	border: 1px solid rgba(71, 114, 98, 0.18);
	border-radius: 14px;
	padding: 16px 22px;
	display: flex; align-items: center; gap: 16px;
	font-size: 13px; color: var(--slate);
	position: relative;
}
.crrem-outlook-greeting .greeting-card::before {
	content: ''; width: 3px;
	height: calc(100% - 24px);
	background: var(--fern);
	position: absolute; left: 0; top: 12px;
	border-radius: 2px;
}
.crrem-outlook-greeting .greeting-icon {
	width: 32px; height: 32px;
	background: rgba(71, 114, 98, 0.16);
	border-radius: 8px; color: var(--fern);
	display: inline-flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}
.crrem-outlook-greeting .greeting-text { flex: 1; line-height: 1.55; }
.crrem-outlook-greeting .greeting-text strong { color: var(--evergreen); font-weight: 600; }
.crrem-outlook-greeting .greeting-text .since {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 11px; color: var(--fern);
	letter-spacing: 0.06em; text-transform: uppercase;
	margin-right: 6px;
}
.crrem-outlook-greeting .greeting-text ul {
	list-style: none; padding: 0; margin: 4px 0 0;
	font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 14px;
}
.crrem-outlook-greeting .greeting-text ul li { padding: 0; }
.crrem-outlook-greeting .greeting-text ul li::before { content: '· '; color: var(--fern); margin-right: 6px; }
.crrem-outlook-greeting .greeting-text ul li:first-child::before { content: ''; margin-right: 0; }
.crrem-outlook-greeting .greeting-dismiss {
	background: transparent; border: 0; cursor: pointer;
	color: var(--slate-40);
	width: 28px; height: 28px; border-radius: 6px;
	display: flex; align-items: center; justify-content: center;
}
.crrem-outlook-greeting .greeting-dismiss:hover { color: var(--evergreen); background: rgba(0,0,0,0.04); }
.crrem-outlook-greeting .greeting-dismiss .material-symbols-rounded { font-size: 18px; }

/* ===== Scoping shelf ===== */
.crrem-outlook-shelf--scoping { background: var(--tint-cool); }
.crrem-outlook-shelf--scoping .crrem-outlook-shelf-eyebrow { color: var(--arctic); }

.crrem-outlook-scoping-note {
	font-size: 13px; color: var(--slate-60); margin: -16px 0 24px;
	max-width: 720px;
}

.crrem-outlook-scoping-group {
	margin-top: 28px;
}
.crrem-outlook-scoping-group:first-of-type {
	margin-top: 0;
}
.crrem-outlook-scoping-group-head {
	display: flex; align-items: baseline; gap: 14px;
	margin-bottom: 14px;
}
.crrem-outlook-scoping-group-label {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 11px; font-weight: 500;
	letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--slate); margin: 0;
	display: inline-flex; align-items: baseline; gap: 8px;
	flex: 0 0 auto;
}
.crrem-outlook-scoping-group-count {
	font-size: inherit;
	color: var(--slate-60);
	letter-spacing: inherit;
	font-weight: 400;
}
.crrem-outlook-scoping-group-count::before {
	content: '/ ';
	color: var(--hair-strong);
	margin-right: 1px;
}
.crrem-outlook-scoping-group-rule {
	flex: 1 1 auto; height: 1px; align-self: center;
	background: linear-gradient(to right, var(--hair-strong) 0%, var(--hair) 35%, transparent 100%);
}
.crrem-outlook-scoping-grid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
@media (max-width: 980px) { .crrem-outlook-scoping-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .crrem-outlook-scoping-grid { grid-template-columns: 1fr; } }

.crrem-outlook-scoping-card {
	background: #fff; border: 1px solid var(--hair); border-radius: 12px;
	border-left: 3px solid var(--arctic);
	padding: 18px 18px 16px;
	display: flex; flex-direction: column; gap: 6px;
	transition: transform 220ms ease, box-shadow 220ms ease;
}
.crrem-outlook-scoping-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-card);
}
.crrem-outlook-scoping-card .head {
	display: flex; justify-content: space-between; align-items: center;
}
.crrem-outlook-scoping-card .icon {
	width: 28px; height: 28px;
	background: var(--arctic-soft); border-radius: 6px;
	color: var(--arctic);
	display: inline-flex; align-items: center; justify-content: center;
}
.crrem-outlook-scoping-card .icon .material-symbols-rounded { font-size: 18px; }
.crrem-outlook-scoping-card .icon--flag {
	background: transparent;
	font-size: 20px;
	line-height: 1;
	color: inherit;
}
.crrem-outlook-scoping-card h4 {
	font-family: 'Lexend Deca', sans-serif;
	font-weight: 600; font-size: 14.5px;
	color: var(--evergreen); margin: 4px 0 0;
	letter-spacing: -0.005em; line-height: 1.25;
}
.crrem-outlook-scoping-card .sub {
	font-size: 11px; color: var(--slate-60);
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.crrem-outlook-scoping-card .desc {
	font-size: 12.5px; color: var(--slate); line-height: 1.5; margin: 4px 0 0;
}
.crrem-outlook-scoping-card .cta {
	margin-top: auto; padding-top: 10px;
	border-top: 1px dashed var(--hair-strong);
	font-family: 'JetBrains Mono', monospace; font-size: 11px;
	color: var(--arctic); letter-spacing: 0.04em; text-decoration: none;
}
.crrem-outlook-scoping-card .cta::after { content: ' →'; }

/* ===== Horizon shelf ===== */
.crrem-outlook-shelf--horizon { background: var(--tint-grey); }
.crrem-outlook-shelf--horizon .crrem-outlook-shelf-eyebrow { color: var(--slate); }

/* ===== Horizon list — watch-tower aesthetic =====
   Each row is a self-contained card with a radar-blip mark in the
   top-left corner, title + why stacked center, signal badge top-right,
   and pin + CTA aligned together at the bottom — so the bookmark
   doesn't sit orphaned in an empty column. */
.crrem-outlook-horizon-list {
	display: grid;
	gap: 14px;
}
.crrem-outlook-horizon-row {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto;
	column-gap: 20px;
	row-gap: 12px;
	padding: 22px 26px;
	align-items: start;
	background: #fff;
	border: 1px solid var(--hair);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(23, 74, 59, 0.03);
	transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
	position: relative;
}
.crrem-outlook-horizon-row:hover {
	border-color: rgba(47, 111, 133, 0.28);
	box-shadow: 0 10px 24px -12px rgba(23, 74, 59, 0.14);
	transform: translateY(-1px);
}

/* Radar-blip mark — a circle within a circle, with an ambient ping on hover */
.crrem-outlook-horizon-row .mark {
	grid-column: 1;
	grid-row: 1 / span 2;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, rgba(47, 111, 133, 0.10) 0%, rgba(47, 111, 133, 0.02) 70%);
	color: var(--arctic);
	position: relative;
	flex-shrink: 0;
}
.crrem-outlook-horizon-row .mark svg {
	width: 22px;
	height: 22px;
	color: inherit;
}
.crrem-outlook-horizon-row .mark::after {
	/* Soft "watching" ping ring — only animates on hover, ambient otherwise */
	content: '';
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	border: 1px solid rgba(47, 111, 133, 0.30);
	opacity: 0;
	transition: opacity 220ms ease;
}
.crrem-outlook-horizon-row:hover .mark::after {
	opacity: 1;
	animation: crrem-outlook-horizon-ping 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes crrem-outlook-horizon-ping {
	0%   { transform: scale(0.95); opacity: 0.55; }
	70%  { transform: scale(1.6); opacity: 0; }
	100% { transform: scale(1.6); opacity: 0; }
}

/* Content block — title + why stacked */
.crrem-outlook-horizon-row > div {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
.crrem-outlook-horizon-row h4 {
	font-family: 'Lexend Deca', sans-serif;
	font-weight: 600;
	font-size: 17px;
	line-height: 1.25;
	color: var(--evergreen);
	margin: 0;
	letter-spacing: -0.008em;
}
.crrem-outlook-horizon-row .why {
	font-size: 14px;
	line-height: 1.55;
	color: var(--slate-60);
}

/* Signal badge — top-right */
.crrem-outlook-horizon-row .signal {
	grid-column: 3;
	grid-row: 1;
	justify-self: end;
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	font-weight: 600;
	color: var(--arctic);
	background: rgba(47, 111, 133, 0.08);
	border: 1px solid rgba(47, 111, 133, 0.18);
	padding: 4px 10px;
	border-radius: 999px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Footer row — pin + CTA side-by-side under the content */
.crrem-outlook-horizon-row .pin-btn {
	grid-column: 2;
	grid-row: 2;
	justify-self: start;
	align-self: center;
}
.crrem-outlook-horizon-row .cta {
	grid-column: 3;
	grid-row: 2;
	justify-self: end;
	align-self: center;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: 'Lexend Deca', sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--arctic);
	letter-spacing: 0;
	text-decoration: none;
	transition: color 180ms ease, gap 220ms ease;
}
.crrem-outlook-horizon-row .cta:hover {
	color: var(--evergreen);
	gap: 10px;
}

@media (max-width: 720px) {
	.crrem-outlook-horizon-row {
		grid-template-columns: 36px 1fr;
		padding: 18px 18px;
		column-gap: 14px;
		row-gap: 8px;
	}
	.crrem-outlook-horizon-row .mark { width: 36px; height: 36px; grid-row: 1; }
	.crrem-outlook-horizon-row .mark svg { width: 18px; height: 18px; }
	.crrem-outlook-horizon-row > div { grid-column: 2; }
	.crrem-outlook-horizon-row .signal { grid-column: 2; grid-row: 2; justify-self: start; }
	.crrem-outlook-horizon-row .pin-btn { grid-column: 1; grid-row: 3; }
	.crrem-outlook-horizon-row .cta { grid-column: 2; grid-row: 3; justify-self: start; }
}

/* ===== Contribute ===== */
.crrem-outlook-shelf--contribute { background: #fff; }
.crrem-outlook-shelf--contribute .crrem-outlook-shelf-eyebrow { color: var(--arctic); }

.crrem-outlook-channels {
	display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
}
@media (max-width: 1100px) { .crrem-outlook-channels { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .crrem-outlook-channels { grid-template-columns: 1fr; } }
.crrem-outlook-channel {
	display: flex; flex-direction: column;
	background: #fff; border: 1px solid var(--hair); border-radius: 14px;
	padding: 22px 22px 20px; color: inherit;
}
.crrem-outlook-channel .num {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 10.5px; font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--arctic); margin-bottom: 16px;
}
.crrem-outlook-channel .num::before {
	content: ''; width: 8px; height: 1.5px;
	background: var(--arctic); display: inline-block;
}
.crrem-outlook-channel h4 {
	font-family: 'Lexend Deca', sans-serif;
	font-weight: 600; font-size: 17px;
	color: var(--evergreen); margin: 0 0 8px;
	letter-spacing: -0.01em; line-height: 1.25;
}
.crrem-outlook-channel p {
	font-size: 13px; color: var(--slate); line-height: 1.55;
	margin: 0 0 14px; flex: 1;
}
.crrem-outlook-channel .cta {
	font-size: 11px; color: var(--arctic); font-weight: 600;
	letter-spacing: 0.06em; text-transform: uppercase;
	margin-top: auto;
}

.crrem-outlook-channels-cta {
	margin: 28px 0 0;
	padding: 22px 28px;
	background: var(--tint-warm, #DCE8E2);
	border-radius: 14px;
	font-size: 16px;
	line-height: 1.55;
	color: var(--evergreen);
	text-align: center;
}
.crrem-outlook-channels-cta a {
	color: var(--evergreen);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
	transition: color 180ms ease;
}
.crrem-outlook-channels-cta a:hover {
	color: var(--arctic);
}

/* ===== Stay ===== */
.crrem-outlook-shelf--stay { background: var(--tint-warm); }
.crrem-outlook-shelf--stay .crrem-outlook-shelf-eyebrow { color: var(--fern); }

.crrem-outlook-stay-lede {
	font-size: 15px; line-height: 1.6;
	color: var(--slate); margin: 12px 0 0; max-width: 640px;
}

.crrem-outlook-stay-grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
@media (max-width: 980px) { .crrem-outlook-stay-grid { grid-template-columns: 1fr; } }
.crrem-outlook-stay-card {
	background: #fff; border: 1px solid var(--hair); border-radius: 14px;
	padding: 28px 28px 26px;
	display: flex; flex-direction: column; gap: 14px;
	transition: transform 220ms ease, box-shadow 220ms ease;
}
.crrem-outlook-stay-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.crrem-outlook-stay-card .label {
	font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em;
	text-transform: uppercase; color: var(--arctic);
	display: flex; align-items: center; gap: 8px;
}
.crrem-outlook-stay-card .label .n {
	font-family: 'JetBrains Mono', monospace; font-size: 10px;
	color: var(--arctic); background: var(--arctic-soft);
	padding: 2px 7px; border-radius: 4px;
}
.crrem-outlook-stay-card h3 {
	font-family: 'Lexend Deca', sans-serif;
	font-weight: 600; font-size: 18px;
	color: var(--evergreen); letter-spacing: -0.01em;
	margin: 0; line-height: 1.25;
}
.crrem-outlook-stay-card p { font-size: 14px; color: var(--slate); line-height: 1.6; margin: 0; }
.crrem-outlook-stay-card .form-row { display: flex; gap: 8px; }
.crrem-outlook-stay-card .form-row input {
	flex: 1; min-width: 0; padding: 14px 16px;
	border: 1px solid var(--hair-strong); background: var(--tint-off);
	border-radius: 6px; font-family: 'Lexend Deca', sans-serif;
	font-size: 15px; color: var(--slate);
}
.crrem-outlook-stay-card .form-row input:focus { outline: none; border-color: var(--arctic); background: #fff; }
/* Canonical site primary button — matches `.btn-primary` in style.css. */
.crrem-outlook-stay-card .form-row button,
.crrem-outlook-stay-card .btn-primary {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 14px 32px;
	background: var(--arctic);
	color: #fff;
	border: 0; border-radius: 6px;
	font-family: 'Lexend Deca', sans-serif;
	font-size: 15px; font-weight: 600;
	text-decoration: none; white-space: nowrap; cursor: pointer;
	transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.crrem-outlook-stay-card .form-row button:hover,
.crrem-outlook-stay-card .btn-primary:hover {
	background: var(--evergreen);
	transform: translateY(-2px);
	box-shadow: 0 2px 8px rgba(23, 74, 59, 0.06);
}
.crrem-outlook-stay-card .btn-primary { align-self: flex-start; }
.crrem-outlook-stay-card .btn-primary .material-symbols-rounded { font-size: 18px; }
.crrem-outlook-stay-card .form-note { font-size: 11.5px; color: var(--slate-60); }
.crrem-outlook-stay-card .meta-list {
	margin: 4px 0 0; padding: 0; list-style: none;
	border-top: 1px dashed var(--hair-strong);
}
.crrem-outlook-stay-card .meta-list li {
	display: grid; grid-template-columns: 92px 1fr; gap: 12px;
	padding: 9px 0; font-size: 12.5px; align-items: baseline;
	border-bottom: 1px dashed var(--hair-strong);
}
.crrem-outlook-stay-card .meta-list li:last-child { border-bottom: 0; }
.crrem-outlook-stay-card .meta-list .k {
	font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
	color: var(--slate-60); letter-spacing: 0.06em; text-transform: uppercase;
}
.crrem-outlook-stay-card .meta-list .v { color: var(--evergreen); font-weight: 500; }
.crrem-outlook-stay-card .citation {
	font-family: 'JetBrains Mono', monospace; font-size: 12px;
	line-height: 1.55; color: var(--slate);
	background: var(--tint-off);
	padding: 12px 14px; border-radius: 8px; border: 1px solid var(--hair);
}

/* ===== Watching panel ===== */
.crrem-outlook-watching-panel {
	position: fixed;
	top: calc(var(--pdo-nav-offset, 114px) + 50px);
	right: 24px;
	width: 360px; max-width: calc(100vw - 32px);
	background: #fff;
	border: 1px solid var(--hair);
	border-radius: 14px;
	box-shadow: var(--shadow-lift);
	z-index: 60;
	overflow: hidden;
}
.crrem-outlook-watching-panel .head {
	padding: 12px 16px;
	border-bottom: 1px solid var(--hair);
	display: flex; align-items: center; gap: 8px;
	font-family: 'Lexend Deca', sans-serif;
	font-size: 12px; font-weight: 600;
	color: var(--evergreen); background: var(--tint-off);
}
.crrem-outlook-watching-panel .head .count {
	font-family: 'JetBrains Mono', monospace;
	background: var(--amber-soft); color: var(--amber-deep);
	padding: 2px 8px; border-radius: 999px;
	font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
	margin-left: auto;
}
.crrem-outlook-watching-panel .head .close {
	background: transparent; border: 0; cursor: pointer;
	color: var(--slate-40); padding: 0;
	width: 24px; height: 24px; border-radius: 4px;
	display: flex; align-items: center; justify-content: center;
}
.crrem-outlook-watching-panel .head .close:hover { color: var(--evergreen); background: rgba(0,0,0,0.04); }
.crrem-outlook-watching-panel .head .close .material-symbols-rounded { font-size: 16px; }
.crrem-outlook-watching-panel .rows { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow-y: auto; }
.crrem-outlook-watching-panel .rows li {
	display: grid; grid-template-columns: 22px 1fr auto;
	gap: 12px; padding: 12px 16px;
	border-bottom: 1px solid var(--hair); align-items: center;
}
.crrem-outlook-watching-panel .rows li:last-child { border-bottom: 0; }
.crrem-outlook-watching-panel .rows .name { font-size: 12.5px; color: var(--evergreen); font-weight: 500; }
.crrem-outlook-watching-panel .rows .where {
	font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
	letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--slate-60); margin-top: 2px;
}
.crrem-outlook-watching-panel .rows .where.released { color: var(--fern); }
.crrem-outlook-watching-panel .rows .where.building { color: var(--amber-deep); }
.crrem-outlook-watching-panel .rows .where.scoping  { color: var(--arctic); }
.crrem-outlook-watching-panel .rows .where.horizon  { color: var(--slate); }
.crrem-outlook-watching-panel .rows .unpin {
	background: transparent; border: 0; cursor: pointer;
	color: var(--slate-40); padding: 4px;
}
.crrem-outlook-watching-panel .rows .unpin:hover { color: var(--ember); }
.crrem-outlook-watching-panel .rows .unpin .material-symbols-rounded { font-size: 14px; }
.crrem-outlook-watching-panel .empty { padding: 22px 18px; font-size: 12.5px; color: var(--slate-60); margin: 0; }

/* ===== State graduation cascade ===== */
@keyframes crrem-outlook-grad-fill {
	from { width: 50%; }
	to   { width: 100%; }
}
@keyframes crrem-outlook-grad-tint {
	from { background: var(--tint-off); }
	to   { background: var(--tint-warm); }
}
@keyframes crrem-outlook-grad-mark {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.4); opacity: 0.5; }
}

.crrem-outlook-build-card.is-graduating .phase-seg.is-active::before {
	animation: crrem-outlook-grad-fill 600ms ease-out forwards;
}
.crrem-outlook-build-card.is-graduating {
	animation: crrem-outlook-grad-tint 400ms ease 600ms forwards;
}
.crrem-outlook-build-card.is-graduating::before {
	content: '';
	position: absolute; inset: 0;
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(214, 162, 74, 0.12), rgba(71, 114, 98, 0.12));
	opacity: 0;
	animation: crrem-outlook-grad-mark 1000ms ease 1200ms forwards;
}

.crrem-outlook-grad-line {
	position: fixed; top: 0; left: 0;
	height: 2px; pointer-events: none; z-index: 100;
	background: linear-gradient(to right, var(--amber), var(--fern));
	transform-origin: left center;
	animation: crrem-outlook-grad-line-travel 800ms ease 1600ms forwards;
}
@keyframes crrem-outlook-grad-line-travel {
	from { opacity: 0; transform: translateX(-50%) scaleX(0); }
	30%  { opacity: 1; }
	to   { opacity: 0; transform: translateX(0%) scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
	.crrem-outlook-build-card.is-graduating { animation: none; background: var(--tint-warm); }
	.crrem-outlook-build-card.is-graduating .phase-seg.is-active::before { animation: none; width: 100%; }
	.crrem-outlook-build-card.is-graduating::before { animation: none; }
	.crrem-outlook-grad-line { display: none; }
}

/* ===== Dependency lines (Building shelf) ===== */
.crrem-outlook-deps {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}
.crrem-outlook-deps line {
	stroke: var(--arctic);
	stroke-width: 1.2;
	stroke-dasharray: 3 4;
	opacity: 0;
	transition: opacity 200ms ease;
}
.crrem-outlook-deps.is-visible line { opacity: 0.55; }
.crrem-outlook-shelf--building .container { position: relative; }

@media (prefers-reduced-motion: reduce) {
	.crrem-outlook-deps line { transition: none; }
}

.crrem-outlook-q-tile {
	transition: transform 280ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
@media (max-width: 980px), (prefers-reduced-motion: reduce) {
	.crrem-outlook-q-tile { transform: none !important; }
}

.crrem-outlook-released-stats .curve-link {
	display: block; margin-top: 8px;
	border-radius: 6px;
	transition: background 180ms;
}
.crrem-outlook-released-stats .curve-link:hover {
	background: rgba(71, 114, 98, 0.06);
}
.crrem-outlook-released-stats .curve-link svg { display: block; }

/* ===== Scroll signature — masthead quadrant ↔ mini-board ===== */
.crrem-outlook-quadrant {
	transition:
		transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
		opacity 240ms ease;
	transform-origin: top right;
	will-change: transform, opacity;
}
.crrem-outlook-quadrant.is-handed-off {
	transform: scale(0.9);
	opacity: 0.4;
}
.crrem-outlook-nav-tile {
	transition: opacity 240ms ease, transform 240ms ease, color 180ms ease, background 180ms ease;
}
.crrem-outlook-nav.is-pre-handoff .crrem-outlook-nav-tile {
	opacity: 0;
	transform: translateY(-4px);
}
.crrem-outlook-nav.is-handed-off .crrem-outlook-nav-tile {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.crrem-outlook-quadrant,
	.crrem-outlook-nav-tile { transition: none !important; }
	.crrem-outlook-nav.is-pre-handoff .crrem-outlook-nav-tile { opacity: 1; transform: none; }
}

/* Phase tape shimmer — fires once via .has-shimmered */
.phase-seg.is-active.has-shimmered::after {
	content: '';
	position: absolute; top: 0; bottom: 0;
	width: 30%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
	animation: crrem-outlook-shimmer 800ms ease-out forwards;
}
@keyframes crrem-outlook-shimmer {
	from { transform: translateX(-100%); }
	to   { transform: translateX(400%); }
}
@media (prefers-reduced-motion: reduce) {
	.phase-seg.is-active.has-shimmered::after { display: none; }
}

/* ===== Redux: tighten the sticky chrome (one bar, not two) ===== */
/* Drop top-strip dependency: nav sticks directly under the site header. */
.crrem-outlook-nav {
	top: var(--pdo-nav-offset, 73px);
}
.crrem-outlook-nav-inner {
	min-height: 56px;
	gap: 18px;
	padding: 6px 0;
	flex-wrap: nowrap;
}

/* Compact back-link replaces the redundant "CRREM Outlook · v1.0" slug
   (the masthead already carries the canonical sub-brand identity). */
.crrem-outlook-nav-back {
	display: inline-flex; align-items: center; gap: 6px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10.5px; letter-spacing: 0.10em;
	color: var(--slate-60); text-transform: uppercase;
	text-decoration: none; padding: 4px 8px 4px 4px;
	border-radius: 6px;
	transition: color 180ms ease, background 180ms ease, transform 180ms ease;
	white-space: nowrap; flex-shrink: 0;
}
.crrem-outlook-nav-back svg { transition: transform 200ms ease; }
.crrem-outlook-nav-back:hover { color: var(--evergreen); background: var(--tint-off); }
.crrem-outlook-nav-back:hover svg { transform: translateX(-2px); }
@media (max-width: 720px) { .crrem-outlook-nav-back span { display: none; } }

/* Tiles: always visible; the scroll-signature only animates the masthead
   quadrant compressing — tiles do NOT fade in/out. */
.crrem-outlook-nav.is-pre-handoff .crrem-outlook-nav-tile,
.crrem-outlook-nav.is-handed-off .crrem-outlook-nav-tile {
	opacity: 1 !important; transform: none !important;
}

/* Live pulse dot inside the countdown — folds the old "Last updated" pill
   and "Next milestone" pill into one freshness signal. */
.crrem-outlook-nav-countdown {
	border-left: 0; padding: 6px 14px;
	background: var(--tint-off);
	border-radius: 999px;
}
.crrem-outlook-nav-countdown .dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--fern);
	box-shadow: 0 0 0 3px rgba(71, 114, 98, 0.18);
	animation: crrem-outlook-pulse var(--pulse-duration) ease-in-out infinite;
	display: inline-block; flex-shrink: 0;
}
.crrem-outlook-nav-countdown .k { color: var(--slate-60); font-weight: 500; }
.crrem-outlook-nav-countdown strong { color: var(--evergreen); }
.crrem-outlook-nav-countdown .d { color: var(--arctic); background: transparent; padding: 0; font-size: 10px; }

/* Mini-board gradient rule sits on the bar's TOP edge again. */
.crrem-outlook-nav-inner::before { top: -6px; }

/* ===== Building shelf: 2-up grid for richer cards ===== */
.crrem-outlook-build-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
	max-width: 980px; /* keep cards compact, page legible */
	margin: 0 auto;
}
@media (max-width: 720px) { .crrem-outlook-build-grid { grid-template-columns: 1fr; } }

/* ===== Released live mini-widgets ===== */
/* Re-shape the stat tile so the widget area sits below a fixed-height head. */
.crrem-outlook-released-stats .stat {
	min-height: 168px;
	min-width: 0; /* prevent inner overflow content from blowing out the grid track */
	display: flex; flex-direction: column;
}
.crrem-outlook-released-stats .stat .stat-head {
	display: flex; flex-direction: column; gap: 4px;
	padding-bottom: 12px;
	margin-bottom: 12px;
	border-bottom: 1px dashed var(--hair-strong);
}
/* Override the early flat layout so head + body stack tidily. */
.crrem-outlook-released-stats .num,
.crrem-outlook-released-stats .lbl,
.crrem-outlook-released-stats .sub { padding-left: 0; }

/* --- Widget: countries (horizontal scroll-strip with edge fades) --- */
.widget--countries {
	position: relative;
	margin-top: auto;
}
.widget--countries .track {
	display: flex; gap: 6px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 4px 24px 6px 0;
	scroll-snap-type: x proximity;
	mask-image: linear-gradient(to right, #000 88%, transparent 100%);
	-webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
}
.widget--countries .track::-webkit-scrollbar { display: none; }
.widget--countries .track:focus { outline: 2px solid var(--arctic); outline-offset: 4px; border-radius: 6px; }
.widget--countries .chip {
	flex-shrink: 0;
	padding: 4px 10px;
	background: var(--tint-warm);
	color: var(--evergreen);
	border: 1px solid rgba(71, 114, 98, 0.18);
	border-radius: 999px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10.5px; font-weight: 500;
	letter-spacing: 0.04em;
	scroll-snap-align: start;
	transition: background 180ms ease, transform 180ms ease;
}
.widget--countries .chip:hover { background: rgba(71, 114, 98, 0.22); transform: translateY(-1px); }
.widget--countries .fade { display: none; } /* mask handles it */

/* --- Widget: breakdown (single horizontal bar + legend) --- */
.widget--breakdown { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.widget--breakdown .bars {
	display: flex;
	height: 8px; border-radius: 4px;
	overflow: hidden;
	background: var(--hair);
}
.widget--breakdown .bar-seg {
	width: var(--w, 0);
	background: var(--c, var(--fern));
	transition: filter 180ms ease;
}
.widget--breakdown .bar-seg:hover { filter: brightness(1.08); }
.widget--breakdown .legend {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: 1fr; gap: 6px;
}
.widget--breakdown .legend li {
	display: grid; grid-template-columns: 10px 1fr auto; gap: 8px;
	align-items: center;
	font-size: 11.5px;
}
.widget--breakdown .legend .dot {
	width: 8px; height: 8px; border-radius: 50%;
}
.widget--breakdown .legend .n { color: var(--slate); }
.widget--breakdown .legend .v {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-weight: 600; color: var(--evergreen);
	font-variant-numeric: tabular-nums;
}

/* --- Widget: updates feed (vertical scroll, ~3 rows visible) --- */
.widget--updates {
	position: relative; margin-top: auto;
	max-height: 92px;
	overflow: hidden;
}
.widget--updates .feed {
	list-style: none; margin: 0; padding: 0 8px 0 0;
	max-height: 92px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--hair-strong) transparent;
}
.widget--updates .feed:focus { outline: 2px solid var(--arctic); outline-offset: 4px; border-radius: 6px; }
.widget--updates .feed::-webkit-scrollbar { width: 4px; }
.widget--updates .feed::-webkit-scrollbar-thumb { background: var(--hair-strong); border-radius: 4px; }
.widget--updates .entry {
	display: grid; grid-template-columns: 48px 1fr; gap: 10px;
	padding: 6px 0;
	font-size: 11.5px;
	border-bottom: 1px dashed var(--hair);
}
.widget--updates .entry:last-child { border-bottom: 0; }
.widget--updates .entry .d {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10px; color: var(--fern); font-weight: 600;
	letter-spacing: 0.04em; text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}
.widget--updates .entry .t { color: var(--slate); line-height: 1.35; }
.widget--updates .entry[data-tag="release"] .d { color: var(--sienna); }
.widget--updates .entry[data-tag="data"]    .d { color: var(--arctic); }
.widget--updates .entry[data-tag="pathway"] .d { color: var(--evergreen); }
.widget--updates .entry[data-tag="doc"]     .d { color: var(--slate-60); }
.widget--updates .fade-b {
	position: absolute; left: 0; right: 0; bottom: 0;
	height: 24px; pointer-events: none;
	background: linear-gradient(to top, #fff, transparent);
}

/* --- Recent stat (kept) — give it a min-body for visual parity --- */
.crrem-outlook-released-stats .stat.is-recent .curve-link { margin-top: auto; }

/* --- Stack widgets to one column under 720px (already 2-col grid there) --- */
@media (max-width: 720px) {
	.crrem-outlook-released-stats .stat { min-height: 140px; }
	.widget--updates, .widget--updates .feed { max-height: 80px; }
}

/* ===== Watching pill — quiet ghost-style status whisper =====
   High-specificity overrides + explicit resets to neutralize the WP
   theme's global <button> rules (arctic-blue fill leak). The pill is a
   passive status indicator — when count is 0 it stays out of the way;
   when you have pins it warms to amber, matching the bookmark icon's
   pinned state on cards. No transform on hover, no clash with arctic. */
.crrem-outlook nav.crrem-outlook-nav button.crrem-outlook-nav-watching,
.crrem-outlook .crrem-outlook-nav-watching {
	-webkit-appearance: none; appearance: none;
	background: transparent !important;
	color: var(--slate-60) !important;
	border: 1px solid var(--hair) !important;
	box-shadow: none !important;
	padding: 5px 12px 5px 10px !important;
	height: 28px;
	min-height: 0;
	border-radius: 999px !important;
	cursor: pointer;
	font-family: 'JetBrains Mono', ui-monospace, monospace !important;
	font-size: 10px !important;
	font-weight: 500 !important;
	letter-spacing: 0.10em !important;
	text-transform: uppercase !important;
	line-height: 1 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
	white-space: nowrap;
	transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
	flex-shrink: 0;
}
.crrem-outlook .crrem-outlook-nav-watching svg {
	width: 11px !important; height: 11px !important;
	color: var(--slate-40);
	transition: color 180ms ease, transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
	flex-shrink: 0;
}
.crrem-outlook .crrem-outlook-nav-watching .watching-count {
	font-weight: 600 !important;
	font-variant-numeric: tabular-nums;
	color: inherit !important;
	background: transparent !important;
	padding: 0 !important;
}

/* Active state — count > 0, set by JS via .is-active class */
.crrem-outlook .crrem-outlook-nav-watching.is-active {
	background: var(--amber-soft) !important;
	border-color: rgba(178, 132, 51, 0.28) !important;
	color: var(--amber-deep) !important;
}
.crrem-outlook .crrem-outlook-nav-watching.is-active svg {
	color: var(--amber-deep);
}

/* Hover — gentle warmth, no transform, no clash */
.crrem-outlook .crrem-outlook-nav-watching:hover {
	background: rgba(178, 132, 51, 0.10) !important;
	border-color: rgba(178, 132, 51, 0.32) !important;
	color: var(--amber-deep) !important;
}
.crrem-outlook .crrem-outlook-nav-watching:hover svg {
	color: var(--amber-deep);
	transform: scale(1.08);
}

/* Open / panel-expanded state */
.crrem-outlook .crrem-outlook-nav-watching[aria-expanded="true"] {
	background: var(--amber-soft) !important;
	border-color: rgba(178, 132, 51, 0.45) !important;
	color: var(--amber-deep) !important;
}

/* Focus visibility */
.crrem-outlook .crrem-outlook-nav-watching:focus-visible {
	outline: 2px solid var(--arctic) !important;
	outline-offset: 2px;
}

/* ===== Hero aurora — ambient mesh + cursor parallax =====
   Three soft blobs (arctic / evergreen / amber) heavy-blurred and slowly
   drifting on independent 64/96/80s cycles. Each blob lives inside a
   parallax shell that's gently pulled toward the cursor at a different
   depth, so the whole mesh feels like liquid reacting to where you look.
   Pure CSS animations, GPU transforms only. Cursor parallax via two CSS
   variables --mx, --my (range -0.5 .. 0.5) set by rAF-throttled JS. */
.crrem-outlook-aurora {
	position: absolute; inset: 0;
	z-index: 2;
	pointer-events: none;
	overflow: hidden;
	/* SVG fog displacement + heavy blur — the displacement scale is driven by
	   cursor velocity in JS so the field warps when you sweep through it. */
	filter: url(#crrem-outlook-fog) blur(48px) saturate(1.05);
	opacity: 0.88;
	-webkit-mask-image: radial-gradient(ellipse 115% 110% at 50% 50%, #000 55%, transparent 96%);
	        mask-image: radial-gradient(ellipse 115% 110% at 50% 50%, #000 55%, transparent 96%);
}
.crrem-outlook-aurora-defs { position: absolute; width: 0; height: 0; }
/* Parallax shell — receives a cursor-driven transform; inner blob runs keyframes */
.crrem-outlook-aurora .px {
	position: absolute; inset: 0;
	transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform;
}
.crrem-outlook-aurora .px-arctic { transform: translate3d(calc(var(--mx, 0) *  60px), calc(var(--my, 0) *  44px), 0); }
.crrem-outlook-aurora .px-amber  { transform: translate3d(calc(var(--mx, 0) * -82px), calc(var(--my, 0) * -56px), 0); }

.crrem-outlook-aurora .blob {
	position: absolute;
	width: 55%;
	aspect-ratio: 1;
	border-radius: 50%;
	will-change: transform;
	mix-blend-mode: multiply;
}
.crrem-outlook-aurora .blob-arctic {
	background: radial-gradient(circle, rgba(47, 111, 133, 0.30), rgba(47, 111, 133, 0) 65%);
	top: -22%; left: 8%;
	width: 65%;
	animation: aurora-arctic 34s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
.crrem-outlook-aurora .blob-amber {
	background: radial-gradient(circle, rgba(214, 162, 74, 0.24), rgba(214, 162, 74, 0) 65%);
	bottom: -28%; right: 4%;
	width: 65%;
	animation: aurora-amber 42s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
	animation-delay: -16s;
}

@keyframes aurora-arctic {
	0%   { transform: translate3d(0, 0, 0) scale(1); }
	33%  { transform: translate3d(22%, 28%, 0) scale(1.20); }
	66%  { transform: translate3d(40%, 10%, 0) scale(0.92); }
	100% { transform: translate3d(12%, 36%, 0) scale(1.08); }
}
@keyframes aurora-amber {
	0%   { transform: translate3d(0, 0, 0) scale(1); }
	35%  { transform: translate3d(-26%, -34%, 0) scale(1.18); }
	70%  { transform: translate3d(-50%, -14%, 0) scale(0.94); }
	100% { transform: translate3d(-22%, -40%, 0) scale(1.12); }
}

/* Z-index stacking */
.crrem-outlook-masthead .container { position: relative; z-index: 3; }
.crrem-outlook-masthead-grid-bg { z-index: 1; }
.crrem-outlook-masthead::after { opacity: 0.6; }

/* Reduced motion — colors stay, all motion stops */
@media (prefers-reduced-motion: reduce) {
	.crrem-outlook-aurora .blob,
	.crrem-outlook-aurora .px { animation: none !important; transition: none !important; transform: none !important; }
}

/* Mobile — disable cursor parallax (no cursor anyway) and let the mesh drift naturally */
@media (max-width: 980px) {
	.crrem-outlook-aurora .px { transform: none !important; }
}

/* ===== Preview banner — only renders on /pathways/development-outlook-preview/ ===== */
.crrem-outlook-preview-banner {
	background: rgba(214, 162, 74, 0.10);
	border-bottom: 1px solid rgba(178, 132, 51, 0.20);
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 11.5px;
	color: var(--amber-deep);
	letter-spacing: 0.02em;
}
.crrem-outlook-preview-banner .container {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 32px;
	flex-wrap: wrap;
}
.crrem-outlook-preview-banner .dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--amber-deep);
	box-shadow: 0 0 0 3px rgba(178, 132, 51, 0.16);
	flex-shrink: 0;
}
.crrem-outlook-preview-banner .lbl {
	font-weight: 600;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	font-size: 10.5px;
	background: rgba(178, 132, 51, 0.14);
	padding: 2px 8px;
	border-radius: 4px;
}
.crrem-outlook-preview-banner .msg {
	color: var(--slate);
	font-family: 'Lexend Deca', sans-serif;
	font-size: 12.5px;
	letter-spacing: 0;
}

/* ===== Building shelf — phase-cycle legend below the H2 ===== */
.crrem-outlook-shelf-legend {
	font-size: 13px;
	color: var(--slate-60);
	margin: 12px 0 0;
	max-width: 640px;
	line-height: 1.55;
}
.crrem-outlook-shelf-legend .crrem-outlook-cycle {
	color: var(--amber-deep);
	font-weight: 600;
	letter-spacing: 0.01em;
}

/* ===== Reslated chip — replace ::before dot with the inline SVG icon ===== */
.chip-reslated::before { display: none; }
.chip-reslated {
	gap: 5px;
	padding: 3px 9px 3px 7px;
}
.chip-reslated svg {
	flex-shrink: 0;
}

/* ===== Countdown chip — hover-reveal next-milestone description ===== */
.crrem-outlook-nav-countdown {
	overflow: hidden;
	max-width: 240px;
	transition: max-width 360ms cubic-bezier(0.16, 1, 0.3, 1), background 240ms ease;
	cursor: default;
}
.crrem-outlook-nav-countdown .msg {
	max-width: 0;
	opacity: 0;
	overflow: hidden;
	white-space: nowrap;
	color: var(--slate);
	font-family: 'Lexend Deca', sans-serif;
	font-size: 11px;
	letter-spacing: 0;
	text-transform: none;
	font-weight: 400;
	margin-left: 0;
	transition: max-width 360ms cubic-bezier(0.16, 1, 0.3, 1),
	            opacity 220ms ease,
	            margin-left 360ms cubic-bezier(0.16, 1, 0.3, 1);
}
.crrem-outlook-nav-countdown:hover,
.crrem-outlook-nav-countdown:focus-visible {
	max-width: 720px;
	background: rgba(47, 111, 133, 0.08);
}
.crrem-outlook-nav-countdown:hover .msg,
.crrem-outlook-nav-countdown:focus-visible .msg {
	max-width: 520px;
	opacity: 0.85;
	margin-left: 6px;
}
.crrem-outlook-nav-countdown:focus-visible {
	outline: 2px solid var(--arctic);
	outline-offset: 2px;
}
@media (max-width: 980px) {
	/* Mobile: hide the .msg expand entirely (no hover); show the chip compact */
	.crrem-outlook-nav-countdown .msg { display: none; }
	.crrem-outlook-nav-countdown:hover { max-width: 240px; background: var(--tint-off); }
}
@media (prefers-reduced-motion: reduce) {
	.crrem-outlook-nav-countdown,
	.crrem-outlook-nav-countdown .msg { transition: none; }
}

/* ===== Released "Open the Library" — primary CTA, not a quiet text link ===== */
.crrem-outlook-shelf-action--primary {
	background: var(--arctic);
	color: #fff !important;
	padding: 12px 22px 12px 26px;
	border-radius: 6px;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.005em;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
	transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.crrem-outlook-shelf-action--primary:hover {
	background: var(--evergreen) !important;
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(23, 74, 59, 0.16);
}
.crrem-outlook-shelf-action--primary .material-symbols-rounded {
	font-size: 18px;
}
.crrem-outlook-shelf-action--primary:hover .material-symbols-rounded {
	transform: translateX(4px);
}
/* Override the warm-tint shelf's text-color rule for the primary variant */
.crrem-outlook-shelf--released .crrem-outlook-shelf-action--primary { color: #fff; }
.crrem-outlook-shelf--released .crrem-outlook-shelf-action--primary:hover { color: #fff; }

/* When the preview banner is present, drop the gradient rule on the mini-board
   so there's no double divider beneath the warning strip. */
.crrem-outlook-preview-banner + nav.crrem-outlook-nav .crrem-outlook-nav-inner::before {
	display: none;
}

/* Preview banner dismiss button */
.crrem-outlook-preview-banner .dismiss {
	margin-left: auto;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: var(--amber-deep);
	padding: 0;
	width: 26px; height: 26px;
	border-radius: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 180ms ease, color 180ms ease;
}
.crrem-outlook-preview-banner .dismiss:hover {
	background: rgba(178, 132, 51, 0.14);
	color: var(--evergreen);
}
.crrem-outlook-preview-banner .dismiss:focus-visible {
	outline: 2px solid var(--arctic);
	outline-offset: 2px;
}

/* ===== Building shelf — Task Force callout (cross-cutting standardization) ===== */
.crrem-outlook-taskforce-callout {
	margin: 28px 0 36px;
	padding: 22px 26px;
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 18px;
	align-items: start;
	background: #fff;
	border: 1px solid var(--hair);
	border-left: 3px solid var(--arctic);
	border-radius: 12px;
	box-shadow: var(--shadow-card);
}
.crrem-outlook-taskforce-callout-icon {
	color: var(--arctic);
	font-size: 28px !important;
	line-height: 1;
	margin-top: 2px;
}
.crrem-outlook-taskforce-callout h3 {
	font-family: 'Lexend Deca', sans-serif;
	font-weight: 600;
	font-size: 17px;
	color: var(--evergreen);
	margin: 0 0 8px;
	line-height: 1.3;
	letter-spacing: -0.01em;
}
.crrem-outlook-taskforce-callout p {
	font-size: 14px;
	color: var(--slate);
	line-height: 1.6;
	margin: 0 0 12px;
	max-width: 720px;
}
.crrem-outlook-taskforce-callout-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--arctic);
	text-decoration: none;
	transition: color 180ms ease, gap 180ms ease;
}
.crrem-outlook-taskforce-callout-link:hover {
	color: var(--evergreen);
	gap: 9px;
}
.crrem-outlook-taskforce-callout-link .material-symbols-rounded {
	font-size: 16px;
}
@media (max-width: 720px) {
	.crrem-outlook-taskforce-callout {
		grid-template-columns: 1fr;
		gap: 12px;
		padding: 20px 22px;
	}
	.crrem-outlook-taskforce-callout-icon {
		font-size: 24px !important;
	}
}
.crrem-outlook-preview-banner.is-dismissed { display: none; }

/* ───────────────────────────────────────────────────────────────
   Delivery timeline (Gantt) — sits below Building shelf.
   Hybrid: editorial bars + consultation-window band + delivery pills.
   ─────────────────────────────────────────────────────────────── */
.crrem-outlook-gantt {
	background: #FFFFFF;
	padding: 56px 0 64px;
	border-top: 1px solid var(--hair);
	border-bottom: 1px solid var(--hair);
}
.crrem-outlook-gantt-head {
	margin-bottom: 28px;
}
.crrem-outlook-gantt-h3 {
	font-family: 'Lexend Deca', sans-serif;
	font-weight: 600;
	font-size: 24px;
	color: var(--evergreen);
	letter-spacing: -0.008em;
	margin: 10px 0 0;
	line-height: 1.2;
}
.crrem-outlook-gantt-chart {
	--gantt-rail: 240px;
	--gantt-gap: 20px;
	position: relative;
}
.crrem-outlook-gantt-axis {
	display: grid;
	grid-template-columns: var(--gantt-rail) 1fr;
	gap: var(--gantt-gap);
	margin-bottom: 10px;
}
.crrem-outlook-gantt-axis-track {
	position: relative;
	height: 26px;
	border-bottom: 1px solid var(--hair-strong);
}
.crrem-outlook-gantt-tick {
	position: absolute; top: 0; bottom: 0;
	border-left: 1px solid var(--hair);
}
.crrem-outlook-gantt-tick:first-child { border-left-color: var(--hair-strong); }
.crrem-outlook-gantt-tick-label {
	position: absolute;
	bottom: 6px;
	left: 6px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--slate-60);
	white-space: nowrap;
}
.crrem-outlook-gantt-body {
	position: relative;
	padding-top: 12px;
}
.crrem-outlook-gantt-overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--gantt-rail) + var(--gantt-gap));
	right: 0;
	pointer-events: none;
	z-index: 0;
}
.crrem-outlook-gantt-grid-rule {
	position: absolute; top: 0; bottom: 0;
	border-left: 1px dashed var(--hair);
}
.crrem-outlook-gantt-grid-rule:first-child { border-left-color: var(--hair-strong); }
.crrem-outlook-gantt-consult {
	position: absolute;
	top: 0;
	bottom: 0;
	background: rgba(214, 162, 74, 0.08);
	border-left: 1px dashed rgba(214, 162, 74, 0.55);
	border-right: 1px dashed rgba(214, 162, 74, 0.55);
}
.crrem-outlook-gantt-consult-label {
	position: absolute;
	top: 6px;
	left: 10px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #A07626;
	background: #FFFFFF;
	padding: 2px 6px;
	border-radius: 3px;
}
.crrem-outlook-gantt-today {
	position: absolute; top: 0; bottom: 0;
	width: 0;
	border-left: 1.5px solid var(--amber);
	z-index: 2;
}
.crrem-outlook-gantt-today-label {
	/* Center the pill ON the vertical line — line passes through middle of the box */
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(-50%, -50%);
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 9.5px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--amber);
	background: #FFFFFF;
	padding: 3px 8px;
	border: 1px solid var(--amber);
	border-radius: 999px;
	white-space: nowrap;
	z-index: 3;
	box-shadow: 0 1px 3px rgba(178, 132, 51, 0.12);
}
.crrem-outlook-gantt-row {
	display: grid;
	grid-template-columns: var(--gantt-rail) 1fr;
	gap: var(--gantt-gap);
	align-items: center;
	margin-top: 26px;
	position: relative;
	z-index: 1;
}
.crrem-outlook-gantt-row:first-of-type { margin-top: 16px; }
.crrem-outlook-gantt-stream {
	display: block;
	font-family: 'Lexend Deca', sans-serif;
	font-weight: 500;
	font-size: 13.5px;
	color: var(--evergreen);
	line-height: 1.25;
	letter-spacing: -0.003em;
}
.crrem-outlook-gantt-stream-sub {
	display: block;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10px;
	font-weight: 400;
	color: var(--slate-60);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-top: 4px;
}
.crrem-outlook-gantt-track {
	position: relative;
	height: 14px;
}
.crrem-outlook-gantt-bar {
	position: absolute;
	top: 0;
	height: 14px;
	display: flex;
	border-radius: 2px;
	overflow: hidden;
	box-shadow: 0 1px 0 rgba(33, 51, 56, 0.04);
}
.crrem-outlook-gantt-seg { flex-shrink: 0; height: 100%; }
.crrem-outlook-gantt-seg--1 { background: #C7DDE3; }
.crrem-outlook-gantt-seg--2 { background: #89B0BD; }
.crrem-outlook-gantt-seg--3 { background: #4F7884; }
.crrem-outlook-gantt-seg--4 { background: var(--evergreen); }
.crrem-outlook-gantt-pill {
	position: absolute;
	top: 50%;
	transform: translate(10px, -50%);
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--evergreen);
	background: #FFFFFF;
	border: 1px solid var(--evergreen);
	padding: 3px 8px;
	border-radius: 999px;
	white-space: nowrap;
}
.crrem-outlook-gantt-legend {
	margin-top: 36px;
	padding-top: 18px;
	border-top: 1px solid var(--hair);
	display: flex;
	gap: 22px;
	flex-wrap: wrap;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--slate-60);
}
.crrem-outlook-gantt-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.crrem-outlook-gantt-legend-swatch {
	display: inline-block;
	width: 20px; height: 9px;
	border-radius: 1px;
}
.crrem-outlook-gantt-legend-swatch--consult {
	background: rgba(214, 162, 74, 0.18);
	border: 1px dashed rgba(214, 162, 74, 0.65);
	height: 11px;
}
.crrem-outlook-gantt-legend-item--today { margin-left: auto; }
.crrem-outlook-gantt-legend-line {
	display: inline-block;
	width: 20px;
	height: 0;
	border-top: 1.5px solid var(--amber);
}

@media (max-width: 880px) {
	.crrem-outlook-gantt-chart { --gantt-rail: 160px; --gantt-gap: 14px; }
	.crrem-outlook-gantt-tick-label { font-size: 9.5px; }
	.crrem-outlook-gantt-pill { display: none; }
}
@media (max-width: 620px) {
	.crrem-outlook-gantt-chart { --gantt-rail: 120px; }
	.crrem-outlook-gantt-stream { font-size: 12px; }
	.crrem-outlook-gantt-stream-sub { font-size: 9px; }
}

/* ─────────────────────────────────────────────────────────────────
 * EDITORIAL OVERRIDES — Andrea Palmer feedback pass, May 2026.
 *
 * Reframes the Outlook page from product-dashboard into editorial
 * document. Neutralizes HUD chrome (counters, watching pin, amber
 * accents), introduces a calm arctic-blue accent system, and houses
 * the new How-to-read and Track 2 → Track 1 progression sections.
 * Loaded after the legacy block so it wins specificity ties cleanly.
 * ───────────────────────────────────────────────────────────────── */

.crrem-outlook--editorial { --editorial-rhythm: 96px; }

/* ===== Shared editorial primitives ===== */

.crrem-outlook .crrem-outlook-eyebrow {
	display: inline-block;
	font-family: 'Lexend Deca', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--arctic);
	margin: 0 0 18px;
	font-style: normal;
}

.crrem-outlook-shelf-head--editorial {
	max-width: 760px;
	margin-bottom: 56px;
}
.crrem-outlook-shelf-head--editorial > div { display: contents; }
.crrem-outlook-shelf-eyebrow-editorial {
	display: inline-block !important;
	background: transparent !important;
	padding: 0 !important;
}
.crrem-outlook-shelf-h2--editorial {
	font-family: 'Lexend Deca', sans-serif;
	font-size: clamp(28px, 3.2vw, 38px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.012em;
	color: var(--evergreen);
	margin: 0 0 18px;
	font-style: normal;
}
.crrem-outlook-shelf-lede {
	font-size: 18px;
	line-height: 1.65;
	color: var(--slate);
	margin: 0 0 16px;
	max-width: 720px;
}
.crrem-outlook-shelf-lede strong {
	color: var(--evergreen);
	font-weight: 600;
}
.crrem-outlook-shelf-lede--bridge {
	font-size: 16px;
	color: var(--slate-60);
	margin-top: 12px;
}

/* ===== Editorial nav (mini-board) ===== */

.crrem-outlook-nav--editorial {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(140%) blur(10px);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid var(--hair);
}
.crrem-outlook-nav--editorial .crrem-outlook-nav-inner {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 12px 0;
}
.crrem-outlook-nav--editorial .crrem-outlook-nav-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--slate-60);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: color 200ms ease;
}
.crrem-outlook-nav--editorial .crrem-outlook-nav-back:hover { color: var(--arctic); }
.crrem-outlook-nav--editorial .crrem-outlook-nav-tiles {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 4px;
	flex: 1 1 auto;
}
.crrem-outlook-nav--editorial .crrem-outlook-nav-tile {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	color: var(--slate);
	text-decoration: none;
	transition: background 180ms ease, color 180ms ease;
	border: 1px solid transparent;
}
.crrem-outlook-nav--editorial .crrem-outlook-nav-tile:hover {
	background: var(--arctic-soft);
	color: var(--arctic);
}
.crrem-outlook-nav--editorial .crrem-outlook-nav-tile.is-active {
	background: var(--arctic-soft);
	color: var(--arctic);
	border-color: rgba(47, 111, 133, 0.22);
}
.crrem-outlook-nav--editorial .crrem-outlook-nav-tile .count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: rgba(33, 51, 56, 0.08);
	color: var(--slate);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0;
}
.crrem-outlook-nav--editorial .crrem-outlook-nav-progress {
	height: 2px;
	background: transparent;
}
.crrem-outlook-nav--editorial .crrem-outlook-nav-progress .bar {
	display: block;
	height: 100%;
	background: linear-gradient(to right, var(--arctic), var(--evergreen));
	width: 0%;
	transition: width 100ms linear;
}

@media (max-width: 900px) {
	.crrem-outlook-nav--editorial .crrem-outlook-nav-inner {
		flex-wrap: wrap;
		gap: 8px 16px;
	}
	.crrem-outlook-nav--editorial .crrem-outlook-nav-tiles {
		order: 2;
		width: 100%;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 4px;
	}
	.crrem-outlook-nav--editorial .crrem-outlook-nav-tiles::-webkit-scrollbar { display: none; }
	.crrem-outlook-nav--editorial .crrem-outlook-nav-tile {
		white-space: nowrap;
		flex: 0 0 auto;
	}
}

/* ===== Editorial masthead ===== */

.crrem-outlook-masthead--editorial {
	position: relative;
	background: #fff;
	padding: 80px 0 56px;
	overflow: visible;
}
.crrem-outlook-masthead--editorial .crrem-outlook-masthead-grid-bg,
.crrem-outlook-masthead--editorial .crrem-outlook-aurora { display: none !important; }
.crrem-outlook-masthead--editorial .crrem-outlook-masthead-grid { display: block !important; }
.crrem-outlook-masthead--editorial .crrem-outlook-quadrant { display: none !important; }
.crrem-outlook-masthead--editorial .crrem-outlook-masthead-statement,
.crrem-outlook-masthead--editorial .crrem-outlook-masthead-anchors,
.crrem-outlook-masthead--editorial .crrem-outlook-masthead-slug { display: none !important; }

.crrem-outlook-masthead--editorial .crrem-outlook-masthead-inner {
	max-width: 860px;
}
.crrem-outlook-masthead-eyebrow { color: var(--arctic); }
.crrem-outlook-masthead-h1 {
	font-family: 'Lexend Deca', sans-serif;
	font-size: clamp(38px, 4.6vw, 56px);
	line-height: 1.06;
	font-weight: 600;
	letter-spacing: -0.022em;
	color: var(--evergreen);
	margin: 0 0 24px;
}
.crrem-outlook-masthead-h1-accent {
	color: var(--arctic);
	position: relative;
	white-space: nowrap;
	font-style: normal;
}
.crrem-outlook-masthead-h1-accent::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0.06em;
	height: 0.18em;
	background: rgba(47, 111, 133, 0.18);
	border-radius: 2px;
	z-index: -1;
}
.crrem-outlook-masthead-lede {
	font-size: clamp(18px, 1.55vw, 21px);
	line-height: 1.55;
	color: var(--slate);
	max-width: 680px;
	margin: 0 0 36px;
	font-weight: 400;
}
.crrem-outlook-masthead-meta {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px 32px;
	margin: 32px 0 0;
	padding-top: 28px;
	border-top: 1px solid var(--hair);
	max-width: 880px;
}
.crrem-outlook-masthead-meta-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
}
.crrem-outlook-masthead-meta-item dt {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--arctic);
}
.crrem-outlook-masthead-meta-item dd {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--slate);
}
@media (max-width: 760px) {
	.crrem-outlook-masthead--editorial { padding: 56px 0 40px; }
	.crrem-outlook-masthead-meta { grid-template-columns: 1fr; gap: 18px; }
}

/* ===== How to read this outlook ===== */

.crrem-outlook-howto {
	background: #fff;
	padding: var(--editorial-rhythm) 0;
}
.crrem-outlook-howto-head { margin-bottom: 48px; max-width: 760px; }
.crrem-outlook-howto-title {
	font-family: 'Lexend Deca', sans-serif;
	font-size: clamp(28px, 3.2vw, 38px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.012em;
	color: var(--evergreen);
	margin: 0;
}
.crrem-outlook-howto-video {
	margin: 0 0 48px;
}
.crrem-outlook-howto-video.is-placeholder {
	border: 1px solid var(--hair);
	border-radius: 16px;
	background: linear-gradient(135deg, rgba(47, 111, 133, 0.05), rgba(23, 74, 59, 0.04));
	overflow: hidden;
}
.crrem-outlook-howto-video-placeholder {
	aspect-ratio: 16 / 9;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	text-align: center;
	padding: 32px;
	color: var(--arctic);
}
.crrem-outlook-howto-video-glyph {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.7);
	color: var(--arctic);
}
.crrem-outlook-howto-video-eyebrow {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--arctic);
}
.crrem-outlook-howto-video-caption {
	font-size: 14px;
	color: var(--slate-60);
	max-width: 360px;
	margin: 0;
}
.crrem-outlook-howto-video-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 16px;
	overflow: hidden;
}
.crrem-outlook-howto-video-frame iframe,
.crrem-outlook-howto-video-media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.crrem-outlook-howto-prose {
	display: grid;
	gap: 18px;
	max-width: 780px;
	margin: 0 0 64px;
}
.crrem-outlook-howto-lede {
	font-size: 21px;
	line-height: 1.55;
	font-weight: 500;
	color: var(--evergreen);
	margin: 0;
	letter-spacing: -0.005em;
}
.crrem-outlook-howto-prose p:not(.crrem-outlook-howto-lede) {
	font-size: 17px;
	line-height: 1.7;
	color: var(--slate);
	margin: 0;
}

.crrem-outlook-howto-tracks {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	margin: 0 0 56px;
}
.crrem-outlook-howto-track {
	padding-top: 32px;
	border-top: 1px solid var(--hair-strong);
}
.crrem-outlook-howto-track-eyebrow {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--arctic);
	margin-bottom: 16px;
}
.crrem-outlook-howto-track--two .crrem-outlook-howto-track-eyebrow { color: var(--fern); }
.crrem-outlook-howto-track--two { border-top-color: rgba(71, 114, 98, 0.28); }
.crrem-outlook-howto-track--one { border-top-color: rgba(47, 111, 133, 0.28); }
.crrem-outlook-howto-track-title {
	font-family: 'Lexend Deca', sans-serif;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.005em;
	color: var(--evergreen);
	margin: 0 0 14px;
}
.crrem-outlook-howto-track-body {
	font-size: 16px;
	line-height: 1.65;
	color: var(--slate);
	margin: 0 0 16px;
}
.crrem-outlook-howto-track-body strong {
	color: var(--evergreen);
	font-weight: 600;
}
.crrem-outlook-howto-track-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--arctic);
	text-decoration: none;
	transition: color 180ms ease;
}
.crrem-outlook-howto-track-link:hover { color: var(--evergreen); }
.crrem-outlook-howto-track--two .crrem-outlook-howto-track-link { color: var(--fern); }
.crrem-outlook-howto-track--two .crrem-outlook-howto-track-link:hover { color: var(--evergreen); }

.crrem-outlook-howto-bridge {
	max-width: 820px;
	font-size: 17px;
	line-height: 1.7;
	color: var(--slate);
	padding: 28px 32px;
	background: var(--tint-cool);
	border-radius: 12px;
	margin: 0;
}

@media (max-width: 760px) {
	.crrem-outlook-howto { padding: 64px 0; }
	.crrem-outlook-howto-tracks { grid-template-columns: 1fr; gap: 32px; }
	.crrem-outlook-howto-bridge { padding: 24px; font-size: 16px; }
}

/* ===== Track 2 → Track 1 progression ===== */

.crrem-outlook-progression {
	background: #fff;
	padding: var(--editorial-rhythm) 0;
	border-top: 1px solid var(--hair);
}
.crrem-outlook-progression-head { margin-bottom: 48px; max-width: 760px; }
.crrem-outlook-progression-title {
	font-family: 'Lexend Deca', sans-serif;
	font-size: clamp(28px, 3.2vw, 38px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.012em;
	color: var(--evergreen);
	margin: 0;
}
.crrem-outlook-progression-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
	gap: 64px;
	align-items: start;
}
.crrem-outlook-progression-lede {
	font-size: 20px;
	line-height: 1.55;
	font-weight: 500;
	color: var(--evergreen);
	margin: 0 0 18px;
}
.crrem-outlook-progression-prose p:not(.crrem-outlook-progression-lede) {
	font-size: 16px;
	line-height: 1.7;
	color: var(--slate);
	margin: 0 0 24px;
}
.crrem-outlook-progression-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: 999px;
	background: var(--arctic);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.crrem-outlook-progression-link:hover {
	background: var(--evergreen);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(23, 74, 59, 0.18);
}
.crrem-outlook-progression-link .material-symbols-rounded { font-size: 18px; }

.crrem-outlook-progression-conditions {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 18px;
}
.crrem-outlook-progression-condition {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 20px;
	padding: 24px;
	border: 1px solid var(--hair);
	border-radius: 14px;
	background: #fff;
	transition: border-color 200ms ease, box-shadow 200ms ease;
}
.crrem-outlook-progression-condition:hover {
	border-color: rgba(47, 111, 133, 0.28);
	box-shadow: var(--shadow-card);
}
.crrem-outlook-progression-condition-num {
	font-family: 'Lexend Deca', sans-serif;
	font-size: 32px;
	font-weight: 600;
	color: var(--arctic);
	line-height: 1;
}
.crrem-outlook-progression-condition-title {
	font-family: 'Lexend Deca', sans-serif;
	font-size: 17px;
	font-weight: 600;
	color: var(--evergreen);
	margin: 0 0 6px;
}
.crrem-outlook-progression-condition-body {
	font-size: 15px;
	line-height: 1.6;
	color: var(--slate);
	margin: 0;
}
@media (max-width: 900px) {
	.crrem-outlook-progression { padding: 64px 0; }
	.crrem-outlook-progression-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ===== Track 1 · Priority — editorial polish ===== */

.crrem-outlook-shelf--track1 { background: var(--tint-off); padding: var(--editorial-rhythm) 0; border-top: 1px solid var(--hair); }
.crrem-outlook-shelf--track1 .crrem-outlook-shelf-eyebrow-editorial { color: var(--arctic); }
.crrem-outlook-shelf--track1 .crrem-outlook-taskforce-callout { margin: 0 0 48px; }

.crrem-outlook-build-grid--editorial {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
}
.crrem-outlook-build-card--editorial {
	background: #fff;
	border: 1px solid var(--hair);
	border-radius: 16px;
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.crrem-outlook-build-card--editorial:hover {
	border-color: rgba(47, 111, 133, 0.28);
	transform: translateY(-3px);
	box-shadow: var(--shadow-lift);
}
.crrem-outlook-build-card--editorial .head {
	display: block;
}
.crrem-outlook-build-card--editorial .head h3 {
	font-family: 'Lexend Deca', sans-serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--evergreen);
	margin: 0;
}
.crrem-outlook-build-card--editorial .desc {
	font-size: 15px;
	line-height: 1.65;
	color: var(--slate);
	margin: 0;
}
.crrem-outlook-build-card--editorial .pin-btn { display: none !important; }

.crrem-outlook-build-types {
	list-style: none;
	margin: 0;
	padding: 18px 20px;
	background: rgba(47, 111, 133, 0.05);
	border-radius: 10px;
	display: grid;
	gap: 10px;
}
.crrem-outlook-build-type {
	display: grid;
	grid-template-columns: minmax(140px, max-content) 1fr;
	gap: 14px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--slate);
}
.crrem-outlook-build-type-name { font-weight: 600; color: var(--evergreen); }
.crrem-outlook-build-type-note { color: var(--slate-60); }
@media (max-width: 560px) {
	.crrem-outlook-build-type { grid-template-columns: 1fr; gap: 2px; }
}

/* Recolor the legacy phase tape from amber → arctic/evergreen tints */
.crrem-outlook-shelf--track1 .phase-tape {
	display: flex;
	gap: 6px;
	margin-top: 4px;
}
.crrem-outlook-shelf--track1 .phase-seg {
	flex: 1;
	height: 6px;
	border-radius: 999px;
	background: rgba(33, 51, 56, 0.08);
}
.crrem-outlook-shelf--track1 .phase-seg.is-done { background: var(--arctic); }
.crrem-outlook-shelf--track1 .phase-seg.is-active {
	background: var(--evergreen);
	box-shadow: 0 0 0 2px rgba(23, 74, 59, 0.14);
}
.crrem-outlook-shelf--track1 .phase-tape-labels {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
	margin-top: 8px;
}
.crrem-outlook-shelf--track1 .phase-tape-labels span {
	font-size: 11px;
	font-weight: 500;
	color: var(--slate-60);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.crrem-outlook-shelf--track1 .phase-tape-labels span.is-done { color: var(--arctic); font-weight: 600; }
.crrem-outlook-shelf--track1 .phase-tape-labels span.is-active { color: var(--evergreen); font-weight: 700; }

.crrem-outlook-build-card--editorial .meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding-top: 12px;
	border-top: 1px solid var(--hair);
	margin-top: 4px;
}
.crrem-outlook-build-card--editorial .meta-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--slate-60);
}
.crrem-outlook-build-card--editorial .meta-value {
	font-family: 'Lexend Deca', sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: var(--evergreen);
}
.crrem-outlook-build-card--editorial .cta {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: 999px;
	background: var(--arctic);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.crrem-outlook-build-card--editorial .cta:hover {
	background: var(--evergreen);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(23, 74, 59, 0.18);
}
.crrem-outlook-build-card--editorial .cta .material-symbols-rounded { font-size: 18px; }

@media (max-width: 760px) {
	.crrem-outlook-shelf--track1 { padding: 64px 0; }
	.crrem-outlook-build-grid--editorial { grid-template-columns: 1fr; gap: 20px; }
	.crrem-outlook-build-card--editorial { padding: 24px; }
}

/* ===== Track 2a · Active Scoping — list layout ===== */

.crrem-outlook-shelf--track2 { background: #fff; padding: var(--editorial-rhythm) 0; border-top: 1px solid var(--hair); }
.crrem-outlook--editorial .crrem-outlook-shelf--scoping .crrem-outlook-scoping-grid { display: none !important; }
.crrem-outlook-scoping-list {
	display: grid;
	gap: 56px;
}
.crrem-outlook-scoping-group--list {
	display: grid;
	gap: 12px;
}
.crrem-outlook-scoping-group--list .crrem-outlook-scoping-group-head {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin-bottom: 4px;
}
.crrem-outlook-scoping-group--list .crrem-outlook-scoping-group-label {
	font-family: 'Lexend Deca', sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--arctic);
	margin: 0;
}
.crrem-outlook-scoping-group--list .crrem-outlook-scoping-group-rule {
	flex: 1;
	height: 1px;
	background: var(--hair);
}
.crrem-outlook-scoping-group--list .crrem-outlook-scoping-group-count {
	font-size: 12px;
	font-weight: 500;
	color: var(--slate-60);
	letter-spacing: 0.06em;
}
.crrem-outlook-scoping-rows {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 4px;
}
.crrem-outlook-scoping-row {
	display: grid;
	grid-template-columns: minmax(220px, 280px) 1fr auto;
	gap: 28px;
	align-items: baseline;
	padding: 18px 4px;
	border-bottom: 1px solid var(--hair);
	transition: background 180ms ease;
}
.crrem-outlook-scoping-row:hover {
	background: rgba(47, 111, 133, 0.025);
}
.crrem-outlook-scoping-row-title {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}
.crrem-outlook-scoping-row-flag {
	font-size: 18px;
	line-height: 1;
}
.crrem-outlook-scoping-row-name {
	font-family: 'Lexend Deca', sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: var(--evergreen);
	letter-spacing: -0.005em;
}
.crrem-outlook-scoping-row-sub {
	font-size: 12px;
	font-weight: 500;
	color: var(--slate-60);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.crrem-outlook-scoping-row-desc {
	font-size: 15px;
	line-height: 1.55;
	color: var(--slate);
	margin: 0;
}
.crrem-outlook-scoping-row-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--arctic);
	text-decoration: none;
	transition: color 180ms ease, transform 180ms ease;
	white-space: nowrap;
}
.crrem-outlook-scoping-row-cta:hover { color: var(--evergreen); transform: translateX(2px); }
.crrem-outlook-scoping-row-cta .material-symbols-rounded { font-size: 16px; }

@media (max-width: 880px) {
	.crrem-outlook-shelf--track2 { padding: 64px 0; }
	.crrem-outlook-scoping-row {
		grid-template-columns: 1fr;
		gap: 8px;
		padding: 20px 0;
	}
	.crrem-outlook-scoping-row-cta { justify-self: start; }
}

/* ===== Track 2b · Horizon — calm row layout ===== */

.crrem-outlook--editorial .crrem-outlook-shelf--horizon { background: var(--tint-off); padding: var(--editorial-rhythm) 0; border-top: 1px solid var(--hair); }
.crrem-outlook--editorial .crrem-outlook-shelf--horizon .crrem-outlook-horizon-list { display: none !important; }
.crrem-outlook--editorial .crrem-outlook-horizon-rows {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 18px;
}
.crrem-outlook--editorial .crrem-outlook-horizon-row {
	display: grid;
	grid-template-columns: minmax(220px, 280px) 1fr auto;
	gap: 28px;
	align-items: baseline;
	padding: 22px 24px;
	background: #fff;
	border: 1px solid var(--hair);
	border-radius: 12px;
	transition: border-color 200ms ease, box-shadow 200ms ease;
}
.crrem-outlook--editorial .crrem-outlook-horizon-row:hover {
	border-color: rgba(71, 114, 98, 0.28);
	box-shadow: var(--shadow-card);
}
.crrem-outlook--editorial .crrem-outlook-horizon-row-meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.crrem-outlook--editorial .crrem-outlook-horizon-row-title {
	font-family: 'Lexend Deca', sans-serif;
	font-size: 17px;
	font-weight: 600;
	color: var(--evergreen);
	margin: 0;
}
.crrem-outlook--editorial .crrem-outlook-horizon-row-signal {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fern);
}
.crrem-outlook--editorial .crrem-outlook-horizon-row-why {
	font-size: 15px;
	line-height: 1.55;
	color: var(--slate);
	margin: 0;
}
.crrem-outlook--editorial .crrem-outlook-horizon-row-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--fern);
	text-decoration: none;
	transition: color 180ms ease, transform 180ms ease;
	white-space: nowrap;
}
.crrem-outlook--editorial .crrem-outlook-horizon-row-cta:hover { color: var(--evergreen); transform: translateX(2px); }
.crrem-outlook--editorial .crrem-outlook-horizon-row-cta .material-symbols-rounded { font-size: 16px; }

@media (max-width: 880px) {
	.crrem-outlook-horizon-row { grid-template-columns: 1fr; gap: 10px; padding: 18px; }
	.crrem-outlook-horizon-row-cta { justify-self: start; }
}

/* ===== Get involved — warmer cards ===== */

.crrem-outlook-shelf--invite { background: #fff; padding: var(--editorial-rhythm) 0; border-top: 1px solid var(--hair); }
.crrem-outlook-shelf--contribute.crrem-outlook-shelf--invite .crrem-outlook-shelf-head--editorial { max-width: 820px; }

.crrem-outlook-channels--editorial {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
	margin-bottom: 48px;
}
.crrem-outlook-channel--editorial {
	background: var(--tint-off);
	border: 1px solid var(--hair);
	border-radius: 16px;
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: border-color 200ms ease, transform 200ms ease, background 200ms ease;
}
.crrem-outlook-channel--editorial:hover {
	background: #fff;
	border-color: rgba(47, 111, 133, 0.28);
	transform: translateY(-3px);
	box-shadow: var(--shadow-card);
}
.crrem-outlook-channel-num {
	font-family: 'Lexend Deca', sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.16em;
	color: var(--arctic);
}
.crrem-outlook-channel-title {
	font-family: 'Lexend Deca', sans-serif;
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.005em;
	color: var(--evergreen);
	margin: 0;
}
.crrem-outlook-channel-body {
	font-size: 15px;
	line-height: 1.6;
	color: var(--slate);
	margin: 0;
	flex: 1 1 auto;
}
.crrem-outlook-channel-cta {
	display: inline-block;
	margin-top: 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--arctic);
	letter-spacing: 0.02em;
}

.crrem-outlook-channels-invite {
	max-width: 720px;
	padding: 26px 30px;
	border-radius: 14px;
	background: var(--tint-warm);
	border: 1px solid rgba(23, 74, 59, 0.10);
}
.crrem-outlook-channels-invite p {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--slate);
}
.crrem-outlook-channels-mail {
	color: var(--arctic);
	text-decoration: none;
	font-weight: 600;
	border-bottom: 1px solid rgba(47, 111, 133, 0.3);
	transition: color 180ms ease, border-color 180ms ease;
}
.crrem-outlook-channels-mail:hover { color: var(--evergreen); border-bottom-color: var(--evergreen); }

@media (max-width: 760px) {
	.crrem-outlook-shelf--invite { padding: 64px 0; }
	.crrem-outlook-channels-invite { padding: 22px; }
}

/* ===== Stay close — editorial polish ===== */

.crrem-outlook--editorial .crrem-outlook-shelf--stay { background: var(--tint-cool); padding: var(--editorial-rhythm) 0; border-top: 1px solid var(--hair); }
.crrem-outlook--editorial .crrem-outlook-shelf--stay.crrem-outlook-shelf--invite { background: var(--tint-cool); }

.crrem-outlook-stay-grid--editorial {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
	margin-bottom: 48px;
}
.crrem-outlook-stay-card--editorial {
	background: #fff;
	border: 1px solid var(--hair);
	border-radius: 16px;
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.crrem-outlook-stay-card-eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--arctic);
}
.crrem-outlook-stay-card-title {
	font-family: 'Lexend Deca', sans-serif;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.005em;
	color: var(--evergreen);
	margin: 0;
}
.crrem-outlook-stay-card-body {
	font-size: 15px;
	line-height: 1.65;
	color: var(--slate);
	margin: 0;
	flex: 1 1 auto;
}
.crrem-outlook-stay-form {
	display: flex;
	gap: 8px;
	margin-top: 6px;
}
.crrem-outlook-stay-input {
	flex: 1;
	padding: 10px 14px;
	border: 1px solid var(--hair-strong);
	border-radius: 8px;
	font-size: 14px;
	color: var(--slate);
	background: #fff;
	transition: border-color 180ms ease;
}
.crrem-outlook-stay-input:focus {
	outline: none;
	border-color: var(--arctic);
	box-shadow: 0 0 0 3px rgba(47, 111, 133, 0.14);
}
.crrem-outlook-stay-trigger {
	padding: 10px 18px;
	border-radius: 8px;
	border: 0;
	background: var(--arctic);
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background 180ms ease;
}
.crrem-outlook-stay-trigger:hover { background: var(--evergreen); }
.crrem-outlook-stay-note {
	font-size: 12px;
	color: var(--slate-60);
	margin: 0;
}
.crrem-outlook-stay-mail {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	font-weight: 600;
	color: var(--arctic);
	text-decoration: none;
	transition: color 180ms ease;
}
.crrem-outlook-stay-mail:hover { color: var(--evergreen); }
.crrem-outlook-stay-mail .material-symbols-rounded { font-size: 18px; }

.crrem-outlook-stay-cite {
	margin-top: 8px;
	padding: 28px 32px;
	background: #fff;
	border: 1px solid var(--hair);
	border-radius: 14px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	gap: 32px;
	align-items: center;
}
.crrem-outlook-stay-cite-eyebrow {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--arctic);
	margin-bottom: 12px;
}
.crrem-outlook-stay-cite-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 14px;
	margin: 0;
}
.crrem-outlook-stay-cite-list > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.crrem-outlook-stay-cite-list dt {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--slate-60);
}
.crrem-outlook-stay-cite-list dd {
	margin: 0;
	font-size: 13.5px;
	color: var(--slate);
	font-weight: 500;
}
.crrem-outlook-stay-citation {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	color: var(--slate);
	padding-left: 28px;
	border-left: 2px solid var(--hair-strong);
}
.crrem-outlook-stay-citation-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--arctic);
	margin-bottom: 6px;
}
.crrem-outlook-stay-citation-title {
	font-weight: 600;
	color: var(--evergreen);
	font-style: normal;
}

@media (max-width: 760px) {
	.crrem-outlook-shelf--stay { padding: 64px 0; }
	.crrem-outlook-stay-card--editorial { padding: 24px; }
	.crrem-outlook-stay-cite { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
	.crrem-outlook-stay-citation { padding-left: 0; border-left: 0; padding-top: 18px; border-top: 1px solid var(--hair); }
}

/* ===== Gantt — soften today marker and brand discipline ===== */

.crrem-outlook--editorial .crrem-outlook-gantt { padding: 64px 0; background: #fff; border-top: 1px solid var(--hair); }
.crrem-outlook--editorial .crrem-outlook-gantt-head { max-width: 720px; margin-bottom: 32px; }
.crrem-outlook--editorial .crrem-outlook-gantt-h3 {
	font-family: 'Lexend Deca', sans-serif;
	font-size: 26px;
	font-weight: 600;
	color: var(--evergreen);
	margin: 0 0 12px;
}
.crrem-outlook--editorial .crrem-outlook-gantt-lede {
	font-size: 16px;
	line-height: 1.65;
	color: var(--slate-60);
	margin: 0;
	max-width: 680px;
}
.crrem-outlook--editorial .crrem-outlook-gantt-today { background: rgba(33, 51, 56, 0.55); }
.crrem-outlook--editorial .crrem-outlook-gantt-today-label { color: var(--slate); background: #fff; border: 1px solid var(--hair-strong); }
.crrem-outlook--editorial .crrem-outlook-gantt-consult { background: rgba(214, 162, 74, 0.10); }

/* ===== Task force callout — clean evergreen tint ===== */

.crrem-outlook-shelf--track1 .crrem-outlook-taskforce-callout {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 22px;
	padding: 28px 32px;
	background: var(--tint-warm);
	border: 1px solid rgba(23, 74, 59, 0.10);
	border-radius: 14px;
	align-items: start;
}
.crrem-outlook-shelf--track1 .crrem-outlook-taskforce-callout-icon {
	color: var(--evergreen);
	font-size: 28px;
}
.crrem-outlook-shelf--track1 .crrem-outlook-taskforce-callout h3 {
	font-family: 'Lexend Deca', sans-serif;
	font-size: 17px;
	font-weight: 600;
	color: var(--evergreen);
	margin: 0 0 10px;
}
.crrem-outlook-shelf--track1 .crrem-outlook-taskforce-callout p {
	font-size: 15px;
	line-height: 1.65;
	color: var(--slate);
	margin: 0 0 12px;
}
.crrem-outlook-shelf--track1 .crrem-outlook-taskforce-callout-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--arctic);
	text-decoration: none;
	transition: color 180ms ease, transform 180ms ease;
}
.crrem-outlook-shelf--track1 .crrem-outlook-taskforce-callout-link:hover { color: var(--evergreen); transform: translateX(2px); }
.crrem-outlook-shelf--track1 .crrem-outlook-taskforce-callout-link .material-symbols-rounded { font-size: 16px; }

/* ===== Watching panel + pin buttons — hide (no longer rendered) ===== */
.crrem-outlook--editorial .crrem-outlook-watching-panel,
.crrem-outlook--editorial .crrem-outlook-greeting,
.crrem-outlook--editorial .pin-btn { display: none !important; }

/* ─────────────────────────────────────────────────────────────────
 * LIVELY v1 — light Andrea Palmer pass (May 2026)
 *
 * Restores the factory-at-work visual energy of the original Outlook
 * page while accommodating Andrea's structural feedback:
 *  - Released shelf removed → 3-tile quadrant + nav layout
 *  - Compact "How to read" intro between masthead and Building
 *  - Compact "From Track 2 to Track 1" callout between Horizon and
 *    Contribute
 * Visual vocabulary matches the lively page — band tints, eyebrows,
 * card grids, hover-lift micro-motion. Scoped to `.crrem-outlook--lively`
 * so the editorial v2 page is unaffected.
 * ───────────────────────────────────────────────────────────────── */

/* 3-tile quadrant for the lively page (Released removed) */
.crrem-outlook-quadrant--triad {
	grid-template-columns: 1fr 1fr 1fr !important;
}
@media (max-width: 980px) {
	.crrem-outlook-quadrant--triad { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 620px) {
	.crrem-outlook-quadrant--triad { grid-template-columns: 1fr !important; }
}

/* 3-tile mini-board nav (Released removed) */
.crrem-outlook-nav-tiles--triad {
	/* Keep the same flex/grid behavior as the 4-tile layout; nothing to override
	   structurally because the original uses inline-flex/auto-flow. The class
	   exists as a hook in case we need to balance widths in the future. */
}

/* ===== Compact How-to-read intro (between masthead and Building) =====
 * Atmospheric arctic-blue tint at the top, fading to white before the
 * Building shelf takes over with its off-white band. Two stream-coded
 * cards with chip badges, status dots, and hover-lift micro-motion. */

.crrem-outlook-shelf--howto {
	position: relative;
	background:
		radial-gradient(ellipse 90% 70% at 20% 0%, rgba(47, 111, 133, 0.08), transparent 60%),
		radial-gradient(ellipse 60% 60% at 95% 30%, rgba(71, 114, 98, 0.06), transparent 65%),
		linear-gradient(180deg, var(--tint-cool) 0%, #fff 100%);
	padding: 72px 0 64px;
	overflow: hidden;
}
.crrem-outlook-shelf--howto::before {
	/* Subtle dot-grid texture, anchored top-right — institutional */
	content: '';
	position: absolute;
	top: 24px; right: -40px;
	width: 240px; height: 160px;
	background-image: radial-gradient(circle, rgba(47, 111, 133, 0.18) 1px, transparent 1.4px);
	background-size: 14px 14px;
	opacity: 0.5;
	pointer-events: none;
	mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.crrem-outlook-shelf--howto .crrem-outlook-shelf-eyebrow {
	color: var(--arctic);
}
.crrem-outlook-howto-compact-lede {
	font-size: 18px;
	line-height: 1.65;
	color: var(--slate);
	max-width: 720px;
	margin: 14px 0 0;
}
.crrem-outlook-howto-compact-lede em {
	font-style: normal;
	font-weight: 600;
	color: var(--evergreen);
	background: linear-gradient(180deg, transparent 65%, rgba(47, 111, 133, 0.18) 65%);
	padding: 0 3px;
}
.crrem-outlook-howto-compact-tracks {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 40px;
	position: relative;
}
.crrem-outlook-howto-compact-track {
	background: #fff;
	border: 1px solid var(--hair);
	border-radius: 16px;
	padding: 26px 28px 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	position: relative;
	overflow: hidden;
	transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
	            box-shadow 220ms cubic-bezier(0.4, 0, 0.2, 1),
	            border-color 220ms ease;
}
.crrem-outlook-howto-compact-track::before {
	/* Stream-color accent bar on the left */
	content: '';
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 4px;
}
.crrem-outlook-howto-compact-track.is-track-1::before { background: var(--arctic); }
.crrem-outlook-howto-compact-track.is-track-2::before { background: var(--fern); }
.crrem-outlook-howto-compact-track::after {
	/* Soft stream-tinted glow in the top-right corner — feels alive */
	content: '';
	position: absolute;
	top: -40px; right: -40px;
	width: 180px; height: 180px;
	border-radius: 50%;
	opacity: 0.10;
	pointer-events: none;
	transition: opacity 280ms ease;
}
.crrem-outlook-howto-compact-track.is-track-1::after { background: radial-gradient(circle, var(--arctic) 0%, transparent 70%); }
.crrem-outlook-howto-compact-track.is-track-2::after { background: radial-gradient(circle, var(--fern) 0%, transparent 70%); }
.crrem-outlook-howto-compact-track:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-lift);
	border-color: var(--hair-warm);
}
.crrem-outlook-howto-compact-track:hover::after { opacity: 0.18; }
.crrem-outlook-howto-compact-track header {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.crrem-outlook-howto-compact-track-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px 4px 4px;
	border-radius: 999px;
	background: var(--tint-off);
	border: 1px solid var(--hair);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--slate);
}
.is-track-1 .crrem-outlook-howto-compact-track-chip {
	background: rgba(47, 111, 133, 0.08);
	border-color: rgba(47, 111, 133, 0.20);
	color: var(--arctic);
}
.is-track-2 .crrem-outlook-howto-compact-track-chip {
	background: rgba(71, 114, 98, 0.10);
	border-color: rgba(71, 114, 98, 0.22);
	color: var(--fern);
}
.crrem-outlook-howto-compact-track-chip-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: #fff;
	color: inherit;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: -0.02em;
	box-shadow: 0 1px 4px rgba(23, 74, 59, 0.06);
}
.crrem-outlook-howto-compact-track-chip-label {
	text-transform: uppercase;
	letter-spacing: 0.12em;
}
.crrem-outlook-howto-compact-track-title {
	font-family: 'Lexend Deca', sans-serif;
	font-size: 21px;
	font-weight: 600;
	letter-spacing: -0.008em;
	color: var(--evergreen);
	margin: 0;
	flex: 1 1 100%;
	line-height: 1.25;
}
.crrem-outlook-howto-compact-track-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--slate-60);
	text-transform: uppercase;
	margin-top: -4px;
}
.crrem-outlook-howto-compact-track-status .dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--arctic);
	position: relative;
}
.is-track-2 .crrem-outlook-howto-compact-track-status .dot { background: var(--amber-deep); }
.crrem-outlook-howto-compact-track-status .dot.is-pulse::before {
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	background: inherit;
	opacity: 0.35;
	animation: crrem-outlook-howto-pulse 2.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes crrem-outlook-howto-pulse {
	0%   { transform: scale(0.7); opacity: 0.55; }
	60%  { transform: scale(1.8); opacity: 0; }
	100% { transform: scale(1.8); opacity: 0; }
}
.crrem-outlook-howto-compact-track p {
	font-size: 15px;
	line-height: 1.65;
	color: var(--slate);
	margin: 0;
}
.crrem-outlook-howto-compact-track p strong {
	color: var(--evergreen);
	font-weight: 600;
}
.crrem-outlook-howto-compact-track-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--arctic);
	text-decoration: none;
	transition: color 180ms ease, gap 220ms ease;
	align-self: flex-start;
}
.is-track-2 .crrem-outlook-howto-compact-track-link { color: var(--fern); }
.crrem-outlook-howto-compact-track-link:hover {
	color: var(--evergreen);
	gap: 10px;
}

@media (max-width: 760px) {
	.crrem-outlook-shelf--howto { padding: 56px 0 48px; }
	.crrem-outlook-howto-compact-tracks { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
	.crrem-outlook-howto-compact-track { padding: 22px 22px 20px; }
	.crrem-outlook-howto-compact-track-title { font-size: 19px; }
}

/* ===== Compact "From Track 2 to Track 1" callout =====
 * Single panel between Horizon and Contribute. Warm tint band reads as
 * a strategic moment between two visually loud shelves. Three numbered
 * conditions connected by an animated arctic-blue path that draws on
 * scroll-reveal. */

.crrem-outlook-shelf--progression {
	background: linear-gradient(180deg, #fff 0%, var(--tint-warm) 60%, var(--tint-warm) 100%);
	padding: 64px 0;
	position: relative;
	overflow: hidden;
}
.crrem-outlook-shelf--progression::before {
	/* Soft, slow ambient sphere behind the card */
	content: '';
	position: absolute;
	top: 30%; left: 50%;
	transform: translate(-50%, -50%);
	width: 720px; height: 360px;
	background: radial-gradient(ellipse, rgba(71, 114, 98, 0.08), transparent 65%);
	pointer-events: none;
	filter: blur(20px);
}
.crrem-outlook-progression-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
	gap: 44px;
	align-items: start;
	padding: 40px 44px;
	background: #fff;
	border: 1px solid var(--hair);
	border-radius: 20px;
	position: relative;
	box-shadow: 0 24px 48px -28px rgba(23, 74, 59, 0.16),
	            0 4px 16px -8px rgba(23, 74, 59, 0.08);
}
.crrem-outlook-progression-card-head {
	position: relative;
}
.crrem-outlook-progression-card-head .crrem-outlook-shelf-eyebrow {
	color: var(--fern);
	margin-bottom: 16px;
}
.crrem-outlook-progression-card-h3 {
	font-family: 'Lexend Deca', sans-serif;
	font-size: clamp(22px, 2.4vw, 28px);
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -0.012em;
	color: var(--evergreen);
	margin: 0 0 14px;
}
.crrem-outlook-progression-card-lede {
	font-size: 16px;
	line-height: 1.65;
	color: var(--slate);
	margin: 0 0 22px;
}

/* CRREM canonical primary button:
   - Arctic-blue background (var(--arctic) #2F6F85), white text
   - Hover: transitions to dark evergreen background, white text stays
   !important resets neutralize WP theme's global <a>/<button> bleed
   that otherwise washes the white text down to arctic-blue. */
.crrem-outlook a.crrem-outlook-progression-card-cta,
.crrem-outlook .crrem-outlook-progression-card-cta {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	padding: 12px 22px !important;
	background: var(--arctic) !important;
	color: #FFFFFF !important;
	border: 1px solid var(--arctic) !important;
	border-radius: 999px !important;
	font-family: 'Lexend Deca', sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-decoration: none !important;
	box-shadow: 0 8px 20px -8px rgba(47, 111, 133, 0.40) !important;
	transition: background 200ms ease, border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease, gap 220ms ease;
}
.crrem-outlook .crrem-outlook-progression-card-cta:hover {
	background: var(--evergreen) !important;
	border-color: var(--evergreen) !important;
	color: #FFFFFF !important;
	transform: translateY(-2px);
	gap: 12px;
	box-shadow: 0 14px 28px -8px rgba(23, 74, 59, 0.36) !important;
}
.crrem-outlook .crrem-outlook-progression-card-cta svg { flex-shrink: 0; }

/* The three conditions stack vertically with a thin connecting line */
.crrem-outlook-progression-card-conditions {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
	position: relative;
}
.crrem-outlook-progression-card-conditions::before {
	/* Connecting line down the left edge of the icon glyphs.
	   Sits behind the glyph cards (z-index 0); the glyphs have an opaque
	   background so the line is properly hidden behind each one and only
	   visible in the gaps between them. */
	content: '';
	position: absolute;
	left: 27px;
	top: 38px;
	bottom: 38px;
	width: 1px;
	background: repeating-linear-gradient(
		to bottom,
		rgba(47, 111, 133, 0.32) 0,
		rgba(47, 111, 133, 0.32) 4px,
		transparent 4px,
		transparent 8px
	);
	z-index: 0;
	pointer-events: none;
}
.crrem-outlook-progression-card-condition {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 16px;
	padding: 14px 18px 14px 0;
	background: transparent;
	border-radius: 12px;
	position: relative;
	z-index: 1;
	transition: transform 200ms ease;
}
.crrem-outlook-progression-card-condition:hover { transform: translateX(2px); }
.crrem-outlook-progression-card-condition-glyph {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: #FFFFFF;
	border: 1px solid rgba(47, 111, 133, 0.22);
	color: var(--arctic);
	position: relative;
	flex-shrink: 0;
	z-index: 2;
	transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background 220ms ease;
}
.crrem-outlook-progression-card-condition-glyph::before {
	/* Soft inner tint — visual interest without exposing the line behind */
	content: '';
	position: absolute;
	inset: 1px;
	border-radius: 13px;
	background: radial-gradient(circle at 30% 25%, rgba(47, 111, 133, 0.10), rgba(47, 111, 133, 0.02) 70%);
	pointer-events: none;
}
.crrem-outlook-progression-card-condition:hover .crrem-outlook-progression-card-condition-glyph {
	transform: scale(1.05);
	border-color: rgba(47, 111, 133, 0.35);
	box-shadow: 0 6px 16px -6px rgba(47, 111, 133, 0.30);
}
.crrem-outlook-progression-card-condition-glyph .material-symbols-rounded {
	font-size: 26px;
}
.crrem-outlook-progression-card-condition-step {
	display: inline-block;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--arctic);
	margin: 4px 0 4px;
}
.crrem-outlook-progression-card-condition h4 {
	font-family: 'Lexend Deca', sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: var(--evergreen);
	margin: 0 0 4px;
	letter-spacing: -0.006em;
}
.crrem-outlook-progression-card-condition p {
	font-size: 14px;
	line-height: 1.55;
	color: var(--slate-60);
	margin: 0;
}

@media (max-width: 900px) {
	.crrem-outlook-progression-card { grid-template-columns: 1fr; gap: 28px; padding: 32px; }
}
@media (max-width: 560px) {
	.crrem-outlook-shelf--progression { padding: 48px 0; }
	.crrem-outlook-progression-card { padding: 24px 22px; border-radius: 16px; }
	.crrem-outlook-progression-card-condition { grid-template-columns: 48px 1fr; gap: 12px; padding: 10px 0; }
	.crrem-outlook-progression-card-condition-glyph { width: 48px; height: 48px; }
	.crrem-outlook-progression-card-condition-glyph .material-symbols-rounded { font-size: 22px; }
	.crrem-outlook-progression-card-conditions::before { left: 23px; }
}

/* ─────────────────────────────────────────────────────────────────
 * INSTITUTIONAL MOVES (Phase 1) — May 2026
 *
 * Two additions that give the playful elements institutional weight
 * to play against:
 *   1. Working-group byline at the bottom of each Track 1 card
 *      (Variant B — scientific-paper credit)
 *   2. Recent decisions strip between Building and Gantt
 * Match the lively page's vocabulary (hair borders, JetBrains Mono
 * labels, evergreen accents) so they sit naturally alongside the
 * aurora masthead, watching panel, countdown, and phase tape.
 * ───────────────────────────────────────────────────────────────── */

/* ===== Working-group byline (Variant B · footer credit) ===== */

.crrem-outlook-build-card-byline {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid var(--hair);
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.crrem-outlook-build-card-byline .byline-label {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--slate-60);
}
.crrem-outlook-build-card-byline .byline-meta {
	font-size: 12.5px;
	color: var(--slate);
	line-height: 1.5;
}
.crrem-outlook-build-card-byline .byline-meta strong {
	color: var(--evergreen);
	font-weight: 600;
}
.crrem-outlook-build-card-byline .byline-meta .chair-pending {
	color: var(--slate-60);
	font-weight: 500;
}
.crrem-outlook-build-card-byline .byline-when {
	color: var(--slate-60);
	margin-left: 6px;
}

/* ===== Recent decisions strip ===== */

.crrem-outlook-shelf--decisions {
	background: #fff;
	padding: 56px 0 64px;
	border-top: 1px solid var(--hair);
}
.crrem-outlook-decisions {
	background: linear-gradient(180deg, #fff 0%, var(--tint-off) 100%);
	border: 1px solid var(--hair);
	border-radius: 16px;
	padding: 26px 30px;
	box-shadow: 0 1px 2px rgba(23, 74, 59, 0.03);
}
.crrem-outlook-decisions-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}
.crrem-outlook-decisions-title {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.crrem-outlook-decisions-title h3 {
	font-family: 'Lexend Deca', sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: var(--evergreen);
	margin: 0;
	letter-spacing: -0.005em;
}
.crrem-outlook-decisions-sample {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 9px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--slate-60);
	background: rgba(33, 51, 56, 0.04);
	border: 1px solid var(--hair);
	border-radius: 999px;
	white-space: nowrap;
}
.crrem-outlook-decisions-sample .dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--slate-40);
}
.crrem-outlook-decisions-feed {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--arctic);
}
.crrem-outlook-decisions-feed a {
	color: inherit;
	text-decoration: none;
	transition: color 180ms ease;
}
.crrem-outlook-decisions-feed a:hover { color: var(--evergreen); }
.crrem-outlook-decisions-feed.is-disabled { color: var(--slate-60); }
.crrem-outlook-decisions-feed .dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--fern);
	box-shadow: 0 0 0 3px rgba(71, 114, 98, 0.22);
	flex-shrink: 0;
	animation: crrem-outlook-decisions-pulse 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.crrem-outlook-decisions-feed.is-disabled .dot {
	background: var(--slate-40);
	box-shadow: 0 0 0 3px rgba(154, 163, 168, 0.20);
	animation: none;
}
@keyframes crrem-outlook-decisions-pulse {
	0%, 100% { box-shadow: 0 0 0 3px rgba(71, 114, 98, 0.22); }
	50%      { box-shadow: 0 0 0 6px rgba(71, 114, 98, 0.04); }
}
@media (prefers-reduced-motion: reduce) {
	.crrem-outlook-decisions-feed .dot { animation: none; }
}

.crrem-outlook-decisions-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.crrem-outlook-decisions-entry {
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr) auto;
	gap: 18px;
	padding: 14px 0;
	border-top: 1px solid var(--hair);
	align-items: baseline;
	transition: background 180ms ease;
}
.crrem-outlook-decisions-entry:first-child { border-top: 1px solid var(--hair-strong); }
.crrem-outlook-decisions-date {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 11px;
	font-weight: 500;
	color: var(--slate-60);
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.crrem-outlook-decisions-body {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--slate);
	margin: 0;
}
.crrem-outlook-decisions-body strong {
	color: var(--evergreen);
	font-weight: 600;
	margin-right: 4px;
}
.crrem-outlook-decisions-tag {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--arctic);
	background: rgba(47, 111, 133, 0.08);
	border: 1px solid rgba(47, 111, 133, 0.18);
	padding: 3px 9px;
	border-radius: 999px;
	white-space: nowrap;
	align-self: center;
}
.crrem-outlook-decisions-tag--scope,
.crrem-outlook-decisions-tag--governance {
	color: var(--fern);
	background: rgba(71, 114, 98, 0.08);
	border-color: rgba(71, 114, 98, 0.18);
}
.crrem-outlook-decisions-tag--carbon {
	color: var(--amber-deep);
	background: rgba(214, 162, 74, 0.10);
	border-color: rgba(178, 132, 51, 0.22);
}

.crrem-outlook-decisions-empty {
	margin: 0;
	padding: 12px 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--slate-60);
}

.crrem-outlook-decisions-foot {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px dashed var(--hair);
	display: flex;
	justify-content: flex-end;
}
.crrem-outlook-decisions-archive {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: 'Lexend Deca', sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--arctic);
	text-decoration: none;
	transition: color 180ms ease, gap 220ms ease;
}
.crrem-outlook-decisions-archive:hover {
	color: var(--evergreen);
	gap: 10px;
}
.crrem-outlook-decisions-archive.is-disabled {
	color: var(--slate-40);
	pointer-events: none;
}

@media (max-width: 720px) {
	.crrem-outlook-decisions { padding: 22px 22px; }
	.crrem-outlook-decisions-entry {
		grid-template-columns: 1fr;
		gap: 6px;
		padding: 16px 0;
	}
	.crrem-outlook-decisions-tag { justify-self: start; align-self: start; }
}

/* ─────────────────────────────────────────────────────────────────
 * INSTITUTIONAL MOVES (Phase 2) — readiness signals on Track 2a
 *
 * Each Scoping card carries three readiness signals (data, market,
 * capacity) scored weak / partial / strong. Rendered as a 3-bar
 * group at the bottom of every card. Same visual rhythm as the
 * Track 1 phase tape so the page reads as one design system.
 *
 * A one-line legend at the section head teaches the reader to read
 * the dots in five seconds; a small "Sample · For preview" badge
 * (when preview surface) keeps the team honest until the methodology
 * team scores using their own criteria.
 * ───────────────────────────────────────────────────────────────── */

/* ===== Legend ===== */

.crrem-outlook-readiness-legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	padding: 14px 18px;
	margin: 0 0 28px;
	background: var(--tint-off);
	border: 1px solid var(--hair);
	border-radius: 12px;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--slate);
}
.crrem-outlook-readiness-legend-eyebrow {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--arctic);
	flex-shrink: 0;
}
.crrem-outlook-readiness-legend-body {
	flex: 1 1 300px;
}
.crrem-outlook-readiness-legend-body strong {
	color: var(--evergreen);
	font-weight: 600;
}

/* Inline mini-chip embedded in the legend prose */
.crrem-outlook-readiness-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 9px 3px 6px;
	margin: 0 2px;
	background: #fff;
	border: 1px solid var(--hair);
	border-radius: 999px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--slate);
	vertical-align: 1px;
}
.crrem-outlook-readiness-chip > span {
	width: 6px;
	height: 6px;
	border-radius: 1.5px;
	background: rgba(33, 51, 56, 0.16);
	flex-shrink: 0;
}
.crrem-outlook-readiness-chip[data-state="weak"] > span.is-on,
.crrem-outlook-readiness-chip[data-state="weak"] > span:first-of-type { background: var(--amber); }
.crrem-outlook-readiness-chip[data-state="partial"] > span.is-on { background: var(--arctic); }
.crrem-outlook-readiness-chip[data-state="strong"] > span.is-on { background: var(--fern); }

.crrem-outlook-readiness-legend-sample {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 9px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--slate-60);
	background: rgba(33, 51, 56, 0.04);
	border: 1px solid var(--hair);
	border-radius: 999px;
	white-space: nowrap;
	margin-left: auto;
}
.crrem-outlook-readiness-legend-sample .dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--slate-40);
}

/* ===== Per-card readiness footer ===== */

.crrem-outlook-readiness {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 12px;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--hair);
}
.crrem-outlook-readiness-item {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}
.crrem-outlook-readiness-label {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--slate-60);
}
.crrem-outlook-readiness-bar {
	display: flex;
	gap: 3px;
}
.crrem-outlook-readiness-bar > span {
	flex: 1;
	height: 4px;
	border-radius: 2px;
	background: rgba(33, 51, 56, 0.08);
	transition: background 220ms ease;
}

/* Color the filled segments by item state */
.crrem-outlook-readiness-item[data-state="weak"]    .crrem-outlook-readiness-bar > span.is-on { background: var(--amber); }
.crrem-outlook-readiness-item[data-state="partial"] .crrem-outlook-readiness-bar > span.is-on { background: var(--arctic); }
.crrem-outlook-readiness-item[data-state="strong"]  .crrem-outlook-readiness-bar > span.is-on { background: var(--fern); }

/* Match label color subtly to the state so the eye reads even faster */
.crrem-outlook-readiness-item[data-state="strong"] .crrem-outlook-readiness-label { color: var(--fern); }
.crrem-outlook-readiness-item[data-state="partial"] .crrem-outlook-readiness-label { color: var(--arctic); }

/* Ensure the scoping card lays out as a flex column so the readiness
   footer pushes to the bottom of equal-height cards */
.crrem-outlook-scoping-card {
	display: flex;
	flex-direction: column;
}
.crrem-outlook-scoping-card .desc { flex: 0 0 auto; }
.crrem-outlook-scoping-card .cta { margin-bottom: 6px; }

@media (max-width: 540px) {
	.crrem-outlook-readiness { gap: 10px; }
	.crrem-outlook-readiness-label { font-size: 8.5px; letter-spacing: 0.10em; }
	.crrem-outlook-readiness-legend { flex-direction: column; align-items: flex-start; }
	.crrem-outlook-readiness-legend-sample { margin-left: 0; }
}

/* ─────────────────────────────────────────────────────────────────
 * V3 — CHARLOTTE / SCANNABLE
 *
 * The "make-it-make-sense" variant. All selectors scoped to
 * `.crrem-outlook--v3` so they can't bleed into v1 or v2.
 * Visual language: spare typography, soft static aurora, restrained
 * arctic-blue accents, deliberate whitespace, brand-correct CTA.
 * ───────────────────────────────────────────────────────────────── */

.crrem-outlook--v3 {
	background: #FFFFFF;
}
.crrem-outlook--v3 .crrem-outlook-v3.container {
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 48px;
}
@media (max-width: 860px) {
	.crrem-outlook--v3 .crrem-outlook-v3.container { padding: 0 24px; }
}

/* Hide chrome inherited from base outlook system — v3 doesn't use them */
.crrem-outlook--v3 .crrem-outlook-watching-panel,
.crrem-outlook--v3 .crrem-outlook-greeting,
.crrem-outlook--v3 .pin-btn { display: none !important; }

/* ===== Masthead ===== */

.crrem-outlook-v3-masthead {
	position: relative;
	padding: 88px 0 56px;
	overflow: hidden;
}
.crrem-outlook-v3-masthead-bg {
	position: absolute;
	inset: -10% -10% auto -10%;
	height: 420px;
	z-index: 0;
	background:
		radial-gradient(ellipse 600px 320px at 20% 30%, rgba(47, 111, 133, 0.10), transparent 70%),
		radial-gradient(ellipse 700px 400px at 80% 10%, rgba(71, 114, 98, 0.08), transparent 65%),
		radial-gradient(ellipse 500px 300px at 50% 100%, rgba(214, 162, 74, 0.05), transparent 70%);
	pointer-events: none;
	filter: blur(20px);
	opacity: 0.85;
}
.crrem-outlook-v3-masthead-inner { position: relative; z-index: 1; max-width: 780px; }

.crrem-outlook-v3-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--arctic);
	margin: 0 0 22px;
}
.crrem-outlook-v3-eyebrow::before {
	content: '';
	width: 32px;
	height: 1px;
	background: var(--arctic);
	opacity: 0.55;
}
.crrem-outlook-v3-h1 {
	font-family: 'Lexend Deca', sans-serif;
	font-size: clamp(22px, 3.4vw, 44px);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.020em;
	color: var(--evergreen);
	margin: 0 0 18px;
	white-space: nowrap;
}
.crrem-outlook-v3-h1-accent {
	color: var(--arctic);
	font-style: normal;
	position: relative;
	white-space: nowrap;
}
.crrem-outlook-v3-h1-accent::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0.06em;
	height: 0.16em;
	background: rgba(47, 111, 133, 0.16);
	border-radius: 2px;
	z-index: -1;
}
.crrem-outlook-v3-lede {
	font-size: 18px;
	line-height: 1.6;
	color: var(--slate);
	margin: 0;
	max-width: 660px;
	font-weight: 400;
}
.crrem-outlook-v3-meta-line {
	margin: 24px 0 0;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--slate-60);
}
.crrem-outlook-v3-meta-sep {
	margin: 0 10px;
	color: var(--slate-60);
	opacity: 0.6;
}
.crrem-outlook-v3-version-strip {
	margin: 28px 0 0;
	padding-top: 22px;
	border-top: 1px solid var(--hair);
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	max-width: 780px;
}
.crrem-outlook-v3-version-strip > div { margin: 0; }
.crrem-outlook-v3-version-strip dt {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--slate-60);
	margin: 0;
}
.crrem-outlook-v3-version-strip dd {
	margin: 4px 0 0;
	font-family: 'Lexend Deca', sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--slate);
	letter-spacing: 0;
}

/* ===== How to read ===== */

.crrem-outlook-v3-howto {
	padding: 56px 0 32px;
}
.crrem-outlook-v3-howto-eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 24px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--slate-60);
}
.crrem-outlook-v3-howto-eyebrow::before {
	content: '';
	width: 32px;
	height: 1px;
	background: var(--hair-strong);
}
.crrem-outlook-v3-howto-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	counter-reset: howto;
}
.crrem-outlook-v3-howto-card {
	position: relative;
	background: #FFFFFF;
	border: 1px solid var(--hair);
	border-radius: 14px;
	padding: 22px 22px 20px;
	counter-increment: howto;
	transition: border-color 220ms ease, transform 220ms ease;
}
.crrem-outlook-v3-howto-card:hover {
	border-color: rgba(47, 111, 133, 0.22);
	transform: translateY(-1px);
}
.crrem-outlook-v3-howto-card::before {
	content: counter(howto, decimal-leading-zero);
	position: absolute;
	top: 18px; right: 22px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10px;
	font-weight: 600;
	color: var(--slate-40);
	letter-spacing: 0.06em;
}
.crrem-outlook-v3-howto-card h3 {
	font-family: 'Lexend Deca', sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: var(--evergreen);
	margin: 0 0 8px;
	letter-spacing: -0.005em;
	padding-right: 28px;
}
.crrem-outlook-v3-howto-card p {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--slate-60);
}
.crrem-outlook-v3-howto-card p strong {
	color: var(--slate);
	font-weight: 500;
}

/* ===== Cycle — two cards ===== */

.crrem-outlook-v3-cycle {
	padding: 32px 0 80px;
	position: relative;
}
.crrem-outlook-v3-cycle-eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 0 0 32px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--slate-60);
}
.crrem-outlook-v3-cycle-eyebrow::before,
.crrem-outlook-v3-cycle-eyebrow::after {
	content: '';
	width: 48px;
	height: 1px;
	background: var(--hair-strong);
}
.crrem-outlook-v3-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	position: relative;
}
.crrem-outlook-v3-cards::before { content: none; }
.crrem-outlook-v3-card {
	position: relative;
	background: #FFFFFF;
	border: 1px solid var(--hair);
	border-radius: 20px;
	padding: 32px 32px 28px;
	transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}
.crrem-outlook-v3-card-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0 0 18px;
}
.crrem-outlook-v3-card-status-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	position: relative;
}
.crrem-outlook-v3-card-title {
	font-family: 'Lexend Deca', sans-serif;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.014em;
	margin: 0 0 14px;
}
.crrem-outlook-v3-card-summary {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--slate);
	margin: 0 0 24px;
	min-height: 70px;
}
.crrem-outlook-v3-card-rail {
	margin: 0;
	padding: 18px 0 0;
	list-style: none;
	border-top: 1px solid var(--hair);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 24px;
}
.crrem-outlook-v3-card-rail > div { margin: 0; }
.crrem-outlook-v3-card-rail dt {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--slate-60);
	margin: 0 0 4px;
}
.crrem-outlook-v3-card-rail dd {
	margin: 0;
	font-size: 14px;
	color: var(--slate);
	line-height: 1.4;
}
.crrem-outlook-v3-card-rail dd strong {
	font-family: 'Lexend Deca', sans-serif;
	font-size: 17px;
	font-weight: 600;
	color: var(--evergreen);
	letter-spacing: -0.01em;
	display: block;
}

/* Active state — EUI */
.crrem-outlook-v3-card.is-active {
	border-color: rgba(47, 111, 133, 0.25);
	box-shadow:
		0 0 0 4px rgba(47, 111, 133, 0.06),
		0 18px 40px -22px rgba(47, 111, 133, 0.28),
		0 4px 10px -4px rgba(23, 74, 59, 0.08);
}
.crrem-outlook-v3-card.is-active::before {
	content: '';
	position: absolute;
	top: 0; right: 0;
	width: 140px;
	height: 140px;
	background: radial-gradient(circle at top right, rgba(47, 111, 133, 0.12), transparent 70%);
	border-radius: 0 20px 0 60%;
	pointer-events: none;
}
.crrem-outlook-v3-card.is-active .crrem-outlook-v3-card-status { color: var(--arctic); }
.crrem-outlook-v3-card.is-active .crrem-outlook-v3-card-status-dot {
	background: var(--arctic);
	box-shadow: 0 0 0 4px rgba(47, 111, 133, 0.16);
	animation: crrem-outlook-v3-pulse 2.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.crrem-outlook-v3-card.is-active .crrem-outlook-v3-card-title { color: var(--evergreen); }
.crrem-outlook-v3-card.is-active .crrem-outlook-v3-card-rail dd strong { color: var(--arctic); }
@keyframes crrem-outlook-v3-pulse {
	0%, 100% { box-shadow: 0 0 0 4px rgba(47, 111, 133, 0.16); }
	50%      { box-shadow: 0 0 0 8px rgba(47, 111, 133, 0.04); }
}
@media (prefers-reduced-motion: reduce) {
	.crrem-outlook-v3-card.is-active .crrem-outlook-v3-card-status-dot { animation: none; }
}

/* Dormant state — Carbon */
.crrem-outlook-v3-card.is-dormant {
	background: var(--tint-off);
	border-color: var(--hair);
}
.crrem-outlook-v3-card.is-dormant .crrem-outlook-v3-card-status { color: var(--slate-60); }
.crrem-outlook-v3-card.is-dormant .crrem-outlook-v3-card-status-dot { background: var(--slate-40); }
.crrem-outlook-v3-card.is-dormant .crrem-outlook-v3-card-title { color: var(--slate); }
.crrem-outlook-v3-card.is-dormant .crrem-outlook-v3-card-summary { color: var(--slate-60); }
.crrem-outlook-v3-card.is-dormant .crrem-outlook-v3-card-rail dd strong { color: var(--slate); }

/* ===== Tabs ===== */

.crrem-outlook-v3-tabs-section {
	background: var(--tint-off);
	border-top: 1px solid var(--hair);
	border-bottom: 1px solid var(--hair);
	padding: 72px 0;
}
.crrem-outlook-v3-tabs-head {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0 0 48px;
}
.crrem-outlook-v3-tabs-title {
	font-family: 'Lexend Deca', sans-serif;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.014em;
	color: var(--evergreen);
	margin: 0;
	max-width: 640px;
}
.crrem-outlook--v3 .crrem-outlook-v3-tabs {
	display: inline-flex;
	gap: 4px;
	background: #FFFFFF;
	border: 1px solid var(--hair);
	padding: 5px;
	border-radius: 999px;
	align-self: flex-start;
}
.crrem-outlook--v3 .crrem-outlook-v3-tab {
	appearance: none !important;
	-webkit-appearance: none !important;
	border: 0 !important;
	background: transparent !important;
	padding: 10px 22px !important;
	border-radius: 999px !important;
	font-family: 'Lexend Deca', sans-serif !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	color: var(--slate-60) !important;
	cursor: pointer;
	letter-spacing: -0.005em !important;
	box-shadow: none !important;
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	transition: background 200ms ease, color 200ms ease;
	line-height: 1 !important;
	height: auto !important;
}
.crrem-outlook--v3 .crrem-outlook-v3-tab:hover {
	color: var(--slate) !important;
	background: transparent !important;
}
.crrem-outlook--v3 .crrem-outlook-v3-tab.is-active {
	background: var(--evergreen) !important;
	color: #FFFFFF !important;
}
.crrem-outlook-v3-tab-count {
	padding: 1px 8px;
	border-radius: 999px;
	background: rgba(33, 51, 56, 0.08);
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10px;
	font-weight: 600;
}
.crrem-outlook--v3 .crrem-outlook-v3-tab.is-active .crrem-outlook-v3-tab-count {
	background: rgba(255, 255, 255, 0.18);
	color: #FFFFFF;
}

/* Panels and columns */
.crrem-outlook-v3-panel { display: none; }
.crrem-outlook-v3-panel.is-active { display: block; }
.crrem-outlook-v3-columns {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 48px;
}
.crrem-outlook-v3-col { display: flex; flex-direction: column; gap: 12px; }
.crrem-outlook-v3-col-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--hair-strong);
	margin-bottom: 8px;
}
.crrem-outlook-v3-col-eyebrow {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--arctic);
	margin: 0;
}
.crrem-outlook-v3-col-count {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 11px;
	color: var(--slate-40);
	letter-spacing: 0.04em;
}

/* Exploring tab uses fern accent across its column eyebrows + bullets */
.crrem-outlook-v3-panel[data-accent="fern"] .crrem-outlook-v3-col-eyebrow { color: var(--fern); }
.crrem-outlook-v3-panel[data-accent="fern"] .crrem-outlook-v3-item-bullet { background: var(--fern); }

.crrem-outlook-v3-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.crrem-outlook-v3-item {
	display: grid;
	grid-template-columns: 14px 1fr;
	gap: 12px;
	padding: 11px 0;
	border-bottom: 1px solid var(--hair);
	align-items: baseline;
}
.crrem-outlook-v3-item:last-child { border-bottom: 0; }
.crrem-outlook-v3-item-bullet {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--arctic);
	margin-top: 7px;
	transition: transform 180ms ease;
}
.crrem-outlook-v3-item-text {
	font-family: 'Lexend Deca', sans-serif;
	font-size: 14.5px;
	color: var(--slate);
	line-height: 1.4;
}
.crrem-outlook-v3-item-sub {
	display: block;
	font-size: 12px;
	color: var(--slate-60);
	margin-top: 2px;
}
.crrem-outlook-v3-item:hover .crrem-outlook-v3-item-bullet { transform: scale(1.4); }

.crrem-outlook-v3-col-empty {
	font-size: 13px;
	color: var(--slate-60);
	line-height: 1.6;
	padding: 14px 16px;
	background: rgba(33, 51, 56, 0.03);
	border-radius: 8px;
	border: 1px dashed var(--hair-strong);
}
.crrem-outlook-v3-col-empty strong {
	display: block;
	color: var(--evergreen);
	font-weight: 600;
	margin-bottom: 4px;
	font-size: 13.5px;
}

/* ===== Gantt — calmer, scoped ===== */

.crrem-outlook-v3-gantt { padding: 80px 0; }
.crrem-outlook-v3-gantt-head { margin: 0 0 32px; max-width: 680px; }
.crrem-outlook-v3-gantt-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--arctic);
	margin: 0 0 14px;
}
.crrem-outlook-v3-gantt-eyebrow::before {
	content: '';
	width: 28px;
	height: 1px;
	background: var(--arctic);
	opacity: 0.55;
}
.crrem-outlook-v3-gantt-h2 {
	font-family: 'Lexend Deca', sans-serif;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -0.014em;
	color: var(--evergreen);
	margin: 0 0 10px;
}
.crrem-outlook-v3-gantt-lede {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--slate-60);
	margin: 0;
}
.crrem-outlook-v3-gantt-chart {
	background: #FFFFFF;
	border: 1px solid var(--hair);
	border-radius: 16px;
	padding: 26px 28px 22px;
	overflow: visible;
}
.crrem-outlook-v3-gantt-axis {
	display: grid;
	grid-template-columns: 200px 1fr;
	align-items: end;
	gap: 24px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--hair);
	margin-bottom: 18px;
}
.crrem-outlook-v3-gantt-axis-rail {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--slate-60);
}
.crrem-outlook-v3-gantt-axis-track {
	position: relative;
	height: 18px;
}
.crrem-outlook-v3-gantt-tick {
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--slate-60);
	white-space: nowrap;
}
.crrem-outlook-v3-gantt-body { position: relative; }
/* Overlay positioned over the track column only (rail width 200px + 24px gap),
   so today line, grid rules, and consult band align with the axis ticks. */
.crrem-outlook-v3-gantt-overlay {
	position: absolute;
	top: 0; bottom: 0;
	left: calc(200px + 24px);
	right: 0;
	pointer-events: none;
}
@media (max-width: 860px) {
	.crrem-outlook-v3-gantt-overlay { left: calc(130px + 14px); }
}
.crrem-outlook-v3-gantt-grid-rule {
	position: absolute;
	top: 0; bottom: 0;
	width: 1px;
	background: var(--hair);
}
.crrem-outlook-v3-gantt-consult {
	position: absolute;
	top: 0; bottom: 0;
	background: rgba(214, 162, 74, 0.10);
	border-left: 1px dashed rgba(214, 162, 74, 0.45);
	border-right: 1px dashed rgba(214, 162, 74, 0.45);
}
.crrem-outlook-v3-gantt-today {
	position: absolute;
	top: -6px; bottom: -6px;
	width: 0;
	border-left: 1.5px solid var(--amber);
	z-index: 2;
}
.crrem-outlook-v3-gantt-today-label {
	position: absolute;
	top: 0; left: 0;
	transform: translate(-50%, -50%);
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 9px;
	font-weight: 600;
	color: var(--amber-deep);
	background: #FFFFFF;
	border: 1px solid var(--amber);
	padding: 3px 8px;
	border-radius: 999px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	box-shadow: 0 1px 3px rgba(178, 132, 51, 0.10);
	z-index: 3;
	white-space: nowrap;
}
.crrem-outlook-v3-gantt-row {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 24px;
	align-items: center;
	padding: 12px 0;
	position: relative;
	z-index: 1;
}
.crrem-outlook-v3-gantt-row + .crrem-outlook-v3-gantt-row { border-top: 1px solid var(--hair); }
.crrem-outlook-v3-gantt-rail {
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.crrem-outlook-v3-gantt-stream {
	font-family: 'Lexend Deca', sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--evergreen);
	letter-spacing: -0.005em;
	line-height: 1.3;
}
.crrem-outlook-v3-gantt-stream-sub {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 9.5px;
	font-weight: 500;
	color: var(--slate-60);
	letter-spacing: 0.10em;
	text-transform: uppercase;
}
.crrem-outlook-v3-gantt-track { position: relative; height: 14px; }
.crrem-outlook-v3-gantt-bar {
	position: absolute;
	top: 0;
	height: 14px;
	border-radius: 7px;
	overflow: hidden;
	display: flex;
}
.crrem-outlook-v3-gantt-seg { height: 100%; }
.crrem-outlook-v3-gantt-seg--1,
.crrem-outlook-v3-gantt-seg--2,
.crrem-outlook-v3-gantt-seg--3,
.crrem-outlook-v3-gantt-seg--4 { background: var(--arctic); }
.crrem-outlook-v3-gantt-pill {
	position: absolute;
	top: 50%;
	transform: translate(8px, -50%);
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 9.5px;
	font-weight: 600;
	color: var(--evergreen);
	background: #FFFFFF;
	border: 1px solid var(--hair-strong);
	padding: 3px 8px;
	border-radius: 999px;
	letter-spacing: 0.06em;
	white-space: nowrap;
}
.crrem-outlook-v3-gantt-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 18px 24px;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--hair);
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10px;
	letter-spacing: 0.08em;
	color: var(--slate-60);
}
.crrem-outlook-v3-gantt-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	text-transform: uppercase;
}
.crrem-outlook-v3-gantt-legend-swatch {
	width: 16px;
	height: 6px;
	border-radius: 3px;
}
.crrem-outlook-v3-gantt-legend-swatch--consult {
	background: rgba(214, 162, 74, 0.18);
	border: 1px dashed rgba(214, 162, 74, 0.50);
	height: 8px;
}
.crrem-outlook-v3-gantt-legend-line {
	width: 2px;
	height: 14px;
	background: var(--amber);
}

/* ===== Footer ===== */

.crrem-outlook-v3-footer {
	padding: 72px 0;
	text-align: center;
}
.crrem-outlook-v3-footer-eyebrow {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--arctic);
	margin: 0 0 18px;
}
.crrem-outlook-v3-footer-q {
	font-family: 'Lexend Deca', sans-serif;
	font-size: 26px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.012em;
	color: var(--evergreen);
	margin: 0 0 26px;
}
.crrem-outlook--v3 a.crrem-outlook-v3-footer-mail,
.crrem-outlook--v3 .crrem-outlook-v3-footer-mail {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	padding: 14px 28px !important;
	background: var(--arctic) !important;
	color: #FFFFFF !important;
	border: 1px solid var(--arctic) !important;
	border-radius: 999px !important;
	font-family: 'Lexend Deca', sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-decoration: none !important;
	box-shadow: 0 10px 28px -10px rgba(47, 111, 133, 0.45) !important;
	transition: background 200ms ease, border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease, gap 220ms ease;
}
.crrem-outlook--v3 .crrem-outlook-v3-footer-mail:hover {
	background: var(--evergreen) !important;
	border-color: var(--evergreen) !important;
	color: #FFFFFF !important;
	transform: translateY(-2px);
	gap: 14px;
	box-shadow: 0 14px 32px -10px rgba(23, 74, 59, 0.40) !important;
}
.crrem-outlook-v3-footer-mail svg { flex-shrink: 0; }
.crrem-outlook-v3-footer-aside {
	margin-top: 28px;
	font-size: 13px;
	color: var(--slate-60);
}
.crrem-outlook-v3-footer-aside a {
	color: var(--arctic);
	text-decoration: none;
	border-bottom: 1px solid rgba(47, 111, 133, 0.3);
	transition: color 180ms ease, border-color 180ms ease;
}
.crrem-outlook-v3-footer-aside a:hover { color: var(--evergreen); border-bottom-color: var(--evergreen); }

/* Reveal-on-scroll baseline */
.crrem-outlook--v3 [data-reveal] {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 600ms ease, transform 600ms ease;
}
.crrem-outlook--v3 [data-reveal].is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.crrem-outlook--v3 [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Responsive */
@media (max-width: 860px) {
	.crrem-outlook-v3-howto-cards { grid-template-columns: 1fr; }
	.crrem-outlook-v3-cards { grid-template-columns: 1fr; }
	.crrem-outlook-v3-cards::before { display: none; }
	.crrem-outlook-v3-columns { grid-template-columns: 1fr; gap: 36px; }
	.crrem-outlook-v3-gantt-axis,
	.crrem-outlook-v3-gantt-row { grid-template-columns: 130px 1fr; gap: 14px; }
}
@media (max-width: 560px) {
	.crrem-outlook-v3-masthead { padding: 56px 0 40px; }
	.crrem-outlook-v3-version-strip { gap: 18px; }
	.crrem-outlook-v3-cycle { padding: 24px 0 56px; }
	.crrem-outlook-v3-card { padding: 24px 22px 22px; }
	.crrem-outlook-v3-tabs-section { padding: 56px 0; }
	.crrem-outlook-v3-gantt { padding: 56px 0; }
	.crrem-outlook-v3-footer { padding: 56px 0; }
}

/* ─────────────────────────────────────────────────────────────────
 * V3 — Country flags on Geography column items
 * ───────────────────────────────────────────────────────────────── */

.crrem-outlook-v3-item.has-flag {
	grid-template-columns: 22px 1fr;
	gap: 14px;
}
.crrem-outlook-v3-item-flag {
	font-size: 18px;
	line-height: 1;
	margin-top: 2px;
	display: inline-block;
	filter: saturate(1.05);
}

/* ─────────────────────────────────────────────────────────────────
 * V3 — Five ways to contribute
 *
 * Five numbered cards in a single row, each with a mono "— 01"
 * kicker, evergreen title, slate body, arctic CTA label.
 * Below them: warm-tint CTA band with centered prompt to email
 * info@crrem.org. Polished spacing throughout.
 * ───────────────────────────────────────────────────────────────── */

.crrem-outlook-v3-contribute {
	padding: 80px 0 88px;
	background: #FFFFFF;
	border-top: 1px solid var(--hair);
}
.crrem-outlook-v3-contribute-head {
	max-width: 720px;
	margin: 0 0 48px;
}
.crrem-outlook-v3-contribute-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--arctic);
	margin: 0 0 14px;
}
.crrem-outlook-v3-contribute-eyebrow::before {
	content: '';
	width: 28px;
	height: 1px;
	background: var(--arctic);
	opacity: 0.55;
}
.crrem-outlook-v3-contribute-h2 {
	font-family: 'Lexend Deca', sans-serif;
	font-size: clamp(28px, 3.2vw, 36px);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.018em;
	color: var(--evergreen);
	margin: 0 0 14px;
}
.crrem-outlook-v3-contribute-lede {
	font-size: 16px;
	line-height: 1.65;
	color: var(--slate);
	margin: 0;
	max-width: 640px;
}

.crrem-outlook--v3 ol.crrem-outlook-v3-contribute-grid,
.crrem-outlook--v3 .crrem-outlook-v3-contribute-grid {
	list-style: none !important;
	margin: 0 0 36px !important;
	padding: 0 !important;
	display: grid !important;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
	counter-reset: none;
}
.crrem-outlook--v3 .crrem-outlook-v3-contribute-grid > li {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.crrem-outlook--v3 .crrem-outlook-v3-contribute-grid > li::before,
.crrem-outlook--v3 .crrem-outlook-v3-contribute-grid > li::marker {
	content: none !important;
	display: none !important;
}
.crrem-outlook--v3 li.crrem-outlook-v3-contribute-card,
.crrem-outlook--v3 .crrem-outlook-v3-contribute-card {
	display: flex !important;
	flex-direction: column;
	gap: 12px;
	padding: 26px 24px 24px !important;
	background: #FFFFFF !important;
	border: 1px solid var(--hair) !important;
	border-radius: 14px !important;
	transition: border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
	list-style: none !important;
}
.crrem-outlook-v3-contribute-card:hover {
	border-color: rgba(47, 111, 133, 0.30);
	transform: translateY(-2px);
	box-shadow: 0 18px 36px -20px rgba(47, 111, 133, 0.22),
	            0 4px 10px -4px rgba(23, 74, 59, 0.06);
}
.crrem-outlook-v3-contribute-num {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: var(--arctic);
}
.crrem-outlook-v3-contribute-title {
	font-family: 'Lexend Deca', sans-serif;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.008em;
	color: var(--evergreen);
	margin: 0;
}
.crrem-outlook-v3-contribute-body {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--slate);
	margin: 0;
	flex: 1 1 auto;
}
.crrem-outlook-v3-contribute-cta {
	display: inline-block;
	margin-top: 6px;
	padding-top: 14px;
	border-top: 1px solid var(--hair);
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--arctic);
	transition: color 180ms ease;
}
.crrem-outlook-v3-contribute-card:hover .crrem-outlook-v3-contribute-cta {
	color: var(--evergreen);
}

.crrem-outlook-v3-contribute-band {
	padding: 22px 32px;
	background: var(--tint-warm);
	border: 1px solid rgba(23, 74, 59, 0.08);
	border-radius: 14px;
	text-align: center;
}
.crrem-outlook-v3-contribute-band p {
	margin: 0;
	font-size: 16px;
	line-height: 1.55;
	color: var(--slate);
}
.crrem-outlook--v3 a.crrem-outlook-v3-contribute-mail,
.crrem-outlook--v3 .crrem-outlook-v3-contribute-mail {
	color: var(--arctic) !important;
	font-weight: 600;
	text-decoration: none !important;
	border-bottom: 1px solid rgba(47, 111, 133, 0.35);
	padding-bottom: 1px;
	transition: color 180ms ease, border-color 180ms ease;
}
.crrem-outlook--v3 .crrem-outlook-v3-contribute-mail:hover {
	color: var(--evergreen) !important;
	border-bottom-color: var(--evergreen);
}

@media (max-width: 1100px) {
	.crrem-outlook-v3-contribute-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 18px;
	}
}
@media (max-width: 560px) {
	.crrem-outlook-v3-contribute { padding: 56px 0 64px; }
	.crrem-outlook-v3-contribute-grid { grid-template-columns: 1fr; }
	.crrem-outlook-v3-contribute-card { padding: 22px 22px 20px; }
	.crrem-outlook-v3-contribute-band { padding: 20px 22px; }
}

/* ─────────────────────────────────────────────────────────────────
 * V3 — Polish pass (May 2026)
 *
 * Tighten section rhythm, refine card hovers, soften the gantt
 * legend, and make the footer aside feel quieter.
 * ───────────────────────────────────────────────────────────────── */

/* Cycle cards lift slightly on hover for warmth */
.crrem-outlook-v3-card.is-dormant:hover {
	border-color: rgba(33, 51, 56, 0.15);
	transform: translateY(-1px);
	transition: border-color 220ms ease, transform 220ms ease;
}
.crrem-outlook-v3-card.is-active:hover {
	transform: translateY(-2px);
	box-shadow:
		0 0 0 4px rgba(47, 111, 133, 0.08),
		0 22px 48px -22px rgba(47, 111, 133, 0.34),
		0 6px 14px -4px rgba(23, 74, 59, 0.10);
}

/* Tabs section breathes more on desktop */
@media (min-width: 1024px) {
	.crrem-outlook-v3-tabs-section { padding: 80px 0; }
	.crrem-outlook-v3-gantt { padding: 88px 0; }
}

/* Gantt legend chips spacing */
.crrem-outlook-v3-gantt-legend-item { padding: 2px 0; }

/* Tab hover state warmer */
.crrem-outlook--v3 .crrem-outlook-v3-tab:hover:not(.is-active) {
	background: rgba(33, 51, 56, 0.04) !important;
}
/* ============================================================
 * OUTLOOK v4 — Pathway Development Outlook (light & warm invitation)
 * Approved direction 2026-05-22. Light warm ground dominant, slate
 * headings, evergreen + warm hues as small accents (color as punctuation).
 * All selectors scoped under .crrem-outlook--v4. Lexend Deca / Lexend.
 * ============================================================ */
.crrem-outlook--v4{
  --v4-ink:#213338; --v4-ink-soft:#566460; --v4-evergreen:#174A3B; --v4-arctic:#2F6F85;
  --v4-paper:#FBFAF6; --v4-cool:#EAF1F2; --v4-warm:#E4EDE7;
  --v4-border:#ECE7DD; --v4-border-cool:#E2E8E6; --v4-line:#E7E2D7;
  --v4-amber:#C98A2B; --v4-amber-ink:#8A6516; --v4-amber-bg:#F7EDD8;
  --v4-sienna:#BC5A30; --v4-fern:#4E7A66;
  --v4-shadow-card:0 1px 2px rgba(33,51,56,.04),0 14px 40px -18px rgba(33,51,56,.22);
  --v4-shadow-soft:0 1px 2px rgba(33,51,56,.04),0 4px 16px rgba(33,51,56,.05);
  background:var(--v4-paper); color:var(--v4-ink); font-family:'Lexend',sans-serif;
  font-size:16px; line-height:1.65;
}
.crrem-outlook--v4 .crrem-outlook-v4-container{max-width:1120px;margin:0 auto;padding:0 52px}
.crrem-outlook--v4 svg{stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.crrem-outlook--v4 .crrem-outlook-v4-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:'Lexend',sans-serif;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--v4-arctic)}
.crrem-outlook--v4 .crrem-outlook-v4-eyebrow::before{content:"";width:22px;height:1.5px;background:var(--v4-arctic);opacity:.5}
.crrem-outlook--v4 .crrem-outlook-v4-h2{font-family:'Lexend Deca',sans-serif;font-weight:600;font-size:clamp(27px,3vw,33px);line-height:1.18;letter-spacing:-.015em;color:var(--v4-ink);margin:12px 0 0}
.crrem-outlook--v4 .crrem-outlook-v4-lede{font-size:18px;line-height:1.6;color:var(--v4-ink-soft);max-width:640px;margin:14px 0 0}
.crrem-outlook--v4 .crrem-outlook-v4-btn{display:inline-flex;align-items:center;gap:9px;height:48px;padding:0 24px;border-radius:9px;font-family:'Lexend',sans-serif;font-size:15px;font-weight:600;cursor:pointer;border:1px solid transparent;text-decoration:none;transition:.18s}
.crrem-outlook--v4 .crrem-outlook-v4-btn svg{width:17px;height:17px}
.crrem-outlook--v4 .crrem-outlook-v4-btn--primary{background:var(--v4-arctic);color:#fff}
.crrem-outlook--v4 .crrem-outlook-v4-btn--primary:hover{background:var(--v4-evergreen);color:#fff !important;transform:translateY(-2px)}
.crrem-outlook--v4 .crrem-outlook-v4-btn--ghost{background:#fff;border-color:#D9D2C5;color:var(--v4-ink)}
.crrem-outlook--v4 .crrem-outlook-v4-btn--ghost:hover{border-color:var(--v4-arctic);color:var(--v4-arctic)}

/* hero (light) */
.crrem-outlook--v4 .crrem-outlook-v4-hero{position:relative;background:var(--v4-paper);overflow:hidden}
.crrem-outlook--v4 .crrem-outlook-v4-hero::before{content:"";position:absolute;top:-25%;right:-12%;width:55%;height:130%;background:radial-gradient(closest-side,rgba(47,111,133,.10),transparent);pointer-events:none}
.crrem-outlook--v4 .crrem-outlook-v4-hero::after{content:"";position:absolute;top:-30%;left:-15%;width:45%;height:120%;background:radial-gradient(closest-side,rgba(201,138,43,.08),transparent);pointer-events:none}
.crrem-outlook--v4 .crrem-outlook-v4-hero .crrem-outlook-v4-container{position:relative;padding-top:26px;padding-bottom:70px}
.crrem-outlook--v4 .crrem-outlook-v4-crumb{font-size:12.5px;color:var(--v4-ink-soft);padding:10px 0 26px;border-bottom:1px solid var(--v4-line);margin-bottom:46px}
.crrem-outlook--v4 .crrem-outlook-v4-crumb b{color:var(--v4-ink);font-weight:500}
.crrem-outlook--v4 .crrem-outlook-v4-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.crrem-outlook--v4 .crrem-outlook-v4-h1{font-family:'Lexend Deca',sans-serif;font-weight:600;font-size:clamp(34px,4.4vw,53px);line-height:1.05;letter-spacing:-.025em;margin:20px 0 0;color:var(--v4-ink);max-width:13ch}
.crrem-outlook--v4 .crrem-outlook-v4-h1 .ac{color:var(--v4-arctic)}
.crrem-outlook--v4 .crrem-outlook-v4-hero-sub{font-size:18.5px;line-height:1.6;color:var(--v4-ink-soft);max-width:30em;margin:22px 0 0}
.crrem-outlook--v4 .crrem-outlook-v4-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 0}
.crrem-outlook--v4 .crrem-outlook-v4-pill{display:inline-flex;align-items:center;gap:9px;margin:26px 0 0;font-size:13px;font-weight:500;color:var(--v4-ink);background:#fff;border:1px solid var(--v4-border-cool);border-radius:999px;padding:8px 16px;box-shadow:var(--v4-shadow-soft)}
.crrem-outlook--v4 .crrem-outlook-v4-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--v4-arctic);box-shadow:0 0 0 4px rgba(47,111,133,.14)}
/* preview card */
.crrem-outlook--v4 .crrem-outlook-v4-gcard{background:#fff;border:1px solid var(--v4-border-cool);border-radius:18px;box-shadow:var(--v4-shadow-card);overflow:hidden}
.crrem-outlook--v4 .crrem-outlook-v4-gcard-h{display:flex;align-items:center;justify-content:space-between;padding:17px 22px;border-bottom:1px solid var(--v4-border-cool)}
.crrem-outlook--v4 .crrem-outlook-v4-gcard-h .lbl{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--v4-ink-soft)}
.crrem-outlook--v4 .crrem-outlook-v4-gcard-h .yr{font-size:11px;font-weight:600;color:var(--v4-arctic)}
.crrem-outlook--v4 .crrem-outlook-v4-gblock{padding:16px 22px}
.crrem-outlook--v4 .crrem-outlook-v4-gblock + .crrem-outlook-v4-gblock{border-top:1px solid var(--v4-border-cool)}
.crrem-outlook--v4 .crrem-outlook-v4-gt{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;color:var(--v4-ink);margin-bottom:11px}
.crrem-outlook--v4 .crrem-outlook-v4-gt .dot{width:9px;height:9px;border-radius:50%}
.crrem-outlook--v4 .crrem-outlook-v4-grow{display:flex;align-items:baseline;justify-content:space-between;font-size:13.5px;padding:5px 0;color:var(--v4-ink)}
.crrem-outlook--v4 .crrem-outlook-v4-gchip{font-size:10.5px;font-weight:600;color:var(--v4-evergreen);background:var(--v4-warm);border-radius:6px;padding:2px 7px}
.crrem-outlook--v4 .crrem-outlook-v4-gneed{font-size:9.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--v4-amber-ink);background:var(--v4-amber-bg);border-radius:999px;padding:1px 7px}
.crrem-outlook--v4 .crrem-outlook-v4-gcard-f{padding:13px 22px;background:var(--v4-paper);font-size:12.5px;color:var(--v4-ink-soft);display:flex;align-items:center;justify-content:space-between}
.crrem-outlook--v4 .crrem-outlook-v4-gcard-f a{color:var(--v4-arctic);font-weight:600;text-decoration:none}

/* photo ribbon */
.crrem-outlook--v4 .crrem-outlook-v4-ribbon{height:200px;background:linear-gradient(90deg,rgba(23,74,59,.18),rgba(23,74,59,0) 45%),url('../img/hero-pathways.webp') center 60%/cover}

/* facts */
.crrem-outlook--v4 .crrem-outlook-v4-facts{background:#fff;border-top:1px solid var(--v4-line);border-bottom:1px solid var(--v4-line)}
.crrem-outlook--v4 .crrem-outlook-v4-facts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding:38px 0}
.crrem-outlook--v4 .crrem-outlook-v4-fact{display:flex;flex-direction:column;gap:3px;position:relative;padding-left:16px}
.crrem-outlook--v4 .crrem-outlook-v4-fact::before{content:"";position:absolute;left:0;top:4px;width:3px;height:40px;border-radius:2px;background:var(--v4-arctic)}
.crrem-outlook--v4 .crrem-outlook-v4-fact.c2::before{background:var(--v4-amber)}
.crrem-outlook--v4 .crrem-outlook-v4-fact.c3::before{background:var(--v4-sienna)}
.crrem-outlook--v4 .crrem-outlook-v4-fact.c4::before{background:var(--v4-fern)}
.crrem-outlook--v4 .crrem-outlook-v4-fact .n{font-family:'Lexend Deca',sans-serif;font-weight:700;font-size:38px;line-height:1;letter-spacing:-.02em;color:var(--v4-ink)}
.crrem-outlook--v4 .crrem-outlook-v4-fact .l{font-size:13.5px;color:var(--v4-ink-soft);font-weight:500;margin-top:4px}

/* two tracks */
.crrem-outlook--v4 .crrem-outlook-v4-tracks{padding:88px 0;background:var(--v4-paper)}
.crrem-outlook--v4 .crrem-outlook-v4-tracks-head{max-width:680px;margin-bottom:36px}
.crrem-outlook--v4 .crrem-outlook-v4-tg{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.crrem-outlook--v4 .crrem-outlook-v4-track{position:relative;border:1px solid var(--v4-border-cool);border-radius:18px;padding:32px;background:#fff;box-shadow:var(--v4-shadow-soft)}
.crrem-outlook--v4 .crrem-outlook-v4-track .ic{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:18px;border:1.5px solid}
.crrem-outlook--v4 .crrem-outlook-v4-track .ic svg{width:21px;height:21px}
.crrem-outlook--v4 .crrem-outlook-v4-track.pri .ic{border-color:var(--v4-evergreen);color:var(--v4-evergreen)}
.crrem-outlook--v4 .crrem-outlook-v4-track.exp .ic{border-color:var(--v4-amber);color:var(--v4-amber)}
.crrem-outlook--v4 .crrem-outlook-v4-track h3{font-family:'Lexend Deca',sans-serif;font-weight:600;font-size:20px;color:var(--v4-ink);margin-bottom:10px}
.crrem-outlook--v4 .crrem-outlook-v4-track h3 .pdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:9px;vertical-align:middle}
.crrem-outlook--v4 .crrem-outlook-v4-track.pri .pdot{background:var(--v4-evergreen)}
.crrem-outlook--v4 .crrem-outlook-v4-track.exp .pdot{background:var(--v4-amber)}
.crrem-outlook--v4 .crrem-outlook-v4-track p{font-size:15.5px;line-height:1.6;color:var(--v4-ink-soft)}
.crrem-outlook--v4 .crrem-outlook-v4-track .foot{margin-top:18px;padding-top:16px;border-top:1px solid var(--v4-line);font-size:14px;font-weight:500;color:var(--v4-ink);display:flex;align-items:center;gap:8px}
.crrem-outlook--v4 .crrem-outlook-v4-track .foot svg{color:var(--v4-arctic);width:16px;height:16px}

/* how it moves */
.crrem-outlook--v4 .crrem-outlook-v4-moves{background:var(--v4-warm);padding:78px 0}
.crrem-outlook--v4 .crrem-outlook-v4-moves-head{text-align:center;max-width:640px;margin:0 auto 40px}
.crrem-outlook--v4 .crrem-outlook-v4-moves-head .crrem-outlook-v4-eyebrow{justify-content:center}
.crrem-outlook--v4 .crrem-outlook-v4-flow{display:flex;align-items:stretch;justify-content:center;gap:14px;flex-wrap:wrap}
.crrem-outlook--v4 .crrem-outlook-v4-fnode{display:flex;flex-direction:column;justify-content:center;text-align:center;background:#fff;border-radius:16px;padding:22px 26px;min-width:160px;box-shadow:var(--v4-shadow-soft);border-top:3px solid}
.crrem-outlook--v4 .crrem-outlook-v4-fnode.exp{border-color:var(--v4-sienna)}
.crrem-outlook--v4 .crrem-outlook-v4-fnode.pri{border-color:var(--v4-evergreen)}
.crrem-outlook--v4 .crrem-outlook-v4-fnode small{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--v4-ink-soft)}
.crrem-outlook--v4 .crrem-outlook-v4-fnode b{font-family:'Lexend Deca',sans-serif;font-weight:600;font-size:18px;margin-top:3px;color:var(--v4-ink)}
.crrem-outlook--v4 .crrem-outlook-v4-farrow{display:flex;align-items:center;color:var(--v4-ink-soft);font-size:24px}
.crrem-outlook--v4 .crrem-outlook-v4-fmid{background:#fff;border:1px solid var(--v4-border-cool);border-radius:16px;padding:16px 20px 18px;display:flex;flex-direction:column;align-items:center;gap:11px;box-shadow:var(--v4-shadow-soft)}
.crrem-outlook--v4 .crrem-outlook-v4-fmid .ttl{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--v4-ink-soft);font-weight:600}
.crrem-outlook--v4 .crrem-outlook-v4-fchips{display:flex;gap:16px}
.crrem-outlook--v4 .crrem-outlook-v4-fchip{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--v4-ink)}
.crrem-outlook--v4 .crrem-outlook-v4-fchip .d{width:9px;height:9px;border-radius:50%}
.crrem-outlook--v4 .crrem-outlook-v4-fchip.data .d{background:var(--v4-arctic)}
.crrem-outlook--v4 .crrem-outlook-v4-fchip.res .d{background:var(--v4-fern)}
.crrem-outlook--v4 .crrem-outlook-v4-fchip.exp2 .d{background:var(--v4-amber)}
.crrem-outlook--v4 .crrem-outlook-v4-move-note{text-align:center;color:var(--v4-ink-soft);font-size:16px;margin:30px auto 0;max-width:600px}
.crrem-outlook--v4 .crrem-outlook-v4-move-note b{color:var(--v4-ink);font-weight:600}

/* pipeline */
.crrem-outlook--v4 .crrem-outlook-v4-pipe{padding:88px 0;background:var(--v4-paper)}
.crrem-outlook--v4 .crrem-outlook-v4-pipe-head{max-width:680px;margin-bottom:30px}
.crrem-outlook--v4 .crrem-outlook-v4-ptable{background:#fff;border:1px solid var(--v4-border-cool);border-radius:18px;box-shadow:var(--v4-shadow-card);overflow:hidden}
.crrem-outlook--v4 .crrem-outlook-v4-ptable-h{display:grid;grid-template-columns:230px 1fr 1fr;padding:15px 30px;border-bottom:1px solid var(--v4-border-cool);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--v4-ink-soft)}
.crrem-outlook--v4 .crrem-outlook-v4-prow{display:grid;grid-template-columns:230px 1fr 1fr;padding:22px 30px}
.crrem-outlook--v4 .crrem-outlook-v4-prow + .crrem-outlook-v4-prow{border-top:1px solid var(--v4-line)}
.crrem-outlook--v4 .crrem-outlook-v4-pcat{display:flex;align-items:center;gap:11px;font-family:'Lexend Deca',sans-serif;font-weight:600;font-size:16px;color:var(--v4-ink);padding-right:20px}
.crrem-outlook--v4 .crrem-outlook-v4-pcat .cd{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:var(--v4-arctic)}
.crrem-outlook--v4 .crrem-outlook-v4-prow.r2 .cd{background:var(--v4-amber)}
.crrem-outlook--v4 .crrem-outlook-v4-prow.r3 .cd{background:var(--v4-sienna)}
.crrem-outlook--v4 .crrem-outlook-v4-prow.r4 .cd{background:var(--v4-fern)}
.crrem-outlook--v4 .crrem-outlook-v4-pcell{padding-right:26px}
.crrem-outlook--v4 .crrem-outlook-v4-pcell.exp{padding-left:26px;border-left:1px solid var(--v4-line)}
.crrem-outlook--v4 .crrem-outlook-v4-pcell .it{font-size:14.5px;line-height:1.5;color:var(--v4-ink);margin-bottom:10px}
.crrem-outlook--v4 .crrem-outlook-v4-pcell .chip{font-size:11px;font-weight:600;color:var(--v4-evergreen);background:var(--v4-warm);border-radius:7px;padding:3px 9px;margin-right:6px;white-space:nowrap}
.crrem-outlook--v4 .crrem-outlook-v4-pcell .need{font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--v4-amber-ink);background:var(--v4-amber-bg);border-radius:999px;padding:2px 9px;margin-right:6px}
.crrem-outlook--v4 .crrem-outlook-v4-flags{font-size:16px;letter-spacing:2px;margin-bottom:8px}
.crrem-outlook--v4 .crrem-outlook-v4-pcell .clink{display:inline-flex;align-items:center;gap:5px;color:var(--v4-arctic);font-size:13px;font-weight:600;text-decoration:none;margin-top:12px}
.crrem-outlook--v4 .crrem-outlook-v4-pcell .clink svg{width:14px;height:14px}
.crrem-outlook--v4 .crrem-outlook-v4-pcell .none{font-size:13.5px;color:#a7b0ac}

/* get involved */
.crrem-outlook--v4 .crrem-outlook-v4-gi{padding:88px 0;background:var(--v4-paper)}
.crrem-outlook--v4 .crrem-outlook-v4-gi-head{max-width:680px;margin-bottom:36px}
.crrem-outlook--v4 .crrem-outlook-v4-gi-head p{font-size:17px;line-height:1.6;color:var(--v4-ink-soft);margin-top:14px}
.crrem-outlook--v4 .crrem-outlook-v4-gi-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin-bottom:36px}
.crrem-outlook--v4 .crrem-outlook-v4-gi-card{flex:1 1 300px;max-width:380px;border:1px solid var(--v4-border-cool);border-radius:16px;padding:26px;background:#fff;box-shadow:var(--v4-shadow-soft);transition:transform .2s ease,box-shadow .2s ease}
.crrem-outlook--v4 .crrem-outlook-v4-gi-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(23,74,59,.12)}
.crrem-outlook--v4 .crrem-outlook-v4-gi-card .ic{width:42px;height:42px;border-radius:11px;background:var(--v4-cool);color:var(--v4-arctic);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.crrem-outlook--v4 .crrem-outlook-v4-gi-card .ic svg{width:21px;height:21px}
.crrem-outlook--v4 .crrem-outlook-v4-gi-card h4{font-family:'Lexend Deca',sans-serif;font-weight:600;font-size:17px;color:var(--v4-ink);margin-bottom:7px}
.crrem-outlook--v4 .crrem-outlook-v4-gi-card p{font-size:14px;line-height:1.55;color:var(--v4-ink-soft);margin-bottom:14px}
.crrem-outlook--v4 .crrem-outlook-v4-gi-card a{display:inline-flex;align-items:center;gap:6px;color:var(--v4-arctic);font-size:13px;font-weight:600;text-decoration:none}
.crrem-outlook--v4 .crrem-outlook-v4-gi-card a svg{width:14px;height:14px}

/* interest form (light) */
.crrem-outlook--v4 .crrem-outlook-v4-interest{background:#fff;border:1px solid var(--v4-border-cool);border-radius:20px;padding:40px;max-width:680px;box-shadow:var(--v4-shadow-soft);margin:8px auto 0}
.crrem-outlook--v4 .crrem-outlook-v4-interest-h3{font-family:'Lexend Deca',sans-serif;font-weight:600;font-size:21px;color:var(--v4-ink);margin:0 0 22px}
.crrem-outlook--v4 .crrem-outlook-v4-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.crrem-outlook--v4 .crrem-outlook-v4-field{margin:0 0 18px}
.crrem-outlook--v4 .crrem-outlook-v4-field label,.crrem-outlook--v4 .crrem-outlook-v4-field legend{display:block;font-size:13px;font-weight:600;color:var(--v4-ink);margin:0 0 7px}
.crrem-outlook--v4 .crrem-outlook-v4-field input[type=text],.crrem-outlook--v4 .crrem-outlook-v4-field input[type=email],.crrem-outlook--v4 .crrem-outlook-v4-field select,.crrem-outlook--v4 .crrem-outlook-v4-field textarea{width:100%;border:1px solid #D9D2C5;border-radius:8px;padding:11px 13px;font-family:'Lexend',sans-serif;font-size:15px;color:var(--v4-ink);background:#fff;transition:border-color .15s,box-shadow .15s}
.crrem-outlook--v4 .crrem-outlook-v4-field input:focus,.crrem-outlook--v4 .crrem-outlook-v4-field select:focus,.crrem-outlook--v4 .crrem-outlook-v4-field textarea:focus{outline:none;border-color:var(--v4-arctic);box-shadow:0 0 0 3px rgba(47,111,133,.14)}
.crrem-outlook--v4 .crrem-outlook-v4-field--checks{border:none;padding:0;margin:0 0 22px}
.crrem-outlook--v4 .crrem-outlook-v4-field--checks label{display:inline-flex;align-items:center;gap:7px;font-weight:400;margin:0 18px 8px 0;font-size:14px;color:var(--v4-ink)}
.crrem-outlook--v4 .crrem-outlook-v4-submit{display:inline-flex;align-items:center;gap:8px;background:var(--v4-arctic);color:#fff;border:1px solid transparent;border-radius:9px;padding:0 28px;height:48px;font-family:'Lexend',sans-serif;font-weight:600;font-size:15px;cursor:pointer;transition:.18s}
.crrem-outlook--v4 .crrem-outlook-v4-submit svg{width:16px;height:16px}
.crrem-outlook--v4 .crrem-outlook-v4-submit:hover{background:var(--v4-evergreen);transform:translateY(-2px)}
.crrem-outlook--v4 .crrem-outlook-v4-submit[disabled]{opacity:.55;cursor:default;transform:none}
.crrem-outlook--v4 .crrem-outlook-v4-form-status{font-size:14px;margin:14px 0 0;min-height:1.2em}
.crrem-outlook--v4 .crrem-outlook-v4-form-status.is-ok{color:var(--v4-evergreen);font-weight:600}
.crrem-outlook--v4 .crrem-outlook-v4-form-status.is-err{color:#A63F3C;font-weight:600}
.crrem-outlook--v4 .crrem-outlook-v4-interest-fallback{font-size:14px;color:var(--v4-ink-soft);margin:16px 0 0}
.crrem-outlook--v4 .crrem-outlook-v4-interest-fallback a{color:var(--v4-arctic);font-weight:600}

/* process accordion */
.crrem-outlook--v4 .crrem-outlook-v4-process{padding:8px 0 88px;background:var(--v4-paper)}
.crrem-outlook--v4 .crrem-outlook-v4-process-details{border:1px solid var(--v4-border-cool);border-radius:18px;background:#fff;overflow:hidden;box-shadow:var(--v4-shadow-soft)}
.crrem-outlook--v4 .crrem-outlook-v4-process-summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:28px 32px;list-style:none;gap:20px}
.crrem-outlook--v4 .crrem-outlook-v4-process-summary::-webkit-details-marker{display:none}
.crrem-outlook--v4 .crrem-outlook-v4-process-h2{font-family:'Lexend Deca',sans-serif;font-weight:600;font-size:clamp(20px,2.4vw,25px);color:var(--v4-ink);margin:0;letter-spacing:-.01em}
.crrem-outlook--v4 .crrem-outlook-v4-process-chevron{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--v4-warm);color:var(--v4-evergreen);display:flex;align-items:center;justify-content:center;line-height:1;transition:transform .25s}
.crrem-outlook--v4 .crrem-outlook-v4-process-chevron svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.crrem-outlook--v4 .crrem-outlook-v4-process-details[open] .crrem-outlook-v4-process-chevron{transform:rotate(180deg)}
.crrem-outlook--v4 .crrem-outlook-v4-process-body{padding:0 32px 32px}
.crrem-outlook--v4 .crrem-outlook-v4-process-intro{font-size:16px;line-height:1.65;color:var(--v4-ink-soft);margin:0 0 26px;max-width:760px}
.crrem-outlook--v4 .crrem-outlook-v4-process-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:22px 36px}
.crrem-outlook--v4 .crrem-outlook-v4-process-step{display:flex;gap:14px}
.crrem-outlook--v4 .crrem-outlook-v4-process-num{font-family:'Lexend Deca',sans-serif;font-weight:700;font-size:13px;color:#fff;background:var(--v4-evergreen);width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.crrem-outlook--v4 .crrem-outlook-v4-process-step-title{font-family:'Lexend',sans-serif;font-weight:600;font-size:15px;color:var(--v4-ink);margin:2px 0 4px}
.crrem-outlook--v4 .crrem-outlook-v4-process-step-body{font-size:14px;line-height:1.55;color:var(--v4-ink-soft);margin:0}
.crrem-outlook--v4 .crrem-outlook-v4-process-gov{font-size:14px;line-height:1.6;color:var(--v4-ink-soft);margin:28px 0 0;padding-top:22px;border-top:1px solid var(--v4-line)}
.crrem-outlook--v4 .crrem-outlook-v4-process-link{display:inline-flex;align-items:center;gap:7px;margin:18px 0 0;font-family:'Lexend',sans-serif;font-weight:600;font-size:15px;color:var(--v4-arctic);text-decoration:none}
.crrem-outlook--v4 .crrem-outlook-v4-process-link:hover{color:var(--v4-evergreen);text-decoration:underline}

/* footer strip */
.crrem-outlook--v4 .crrem-outlook-v4-footer{padding:0 0 88px;background:var(--v4-paper);text-align:center}
.crrem-outlook--v4 .crrem-outlook-v4-footer-note{font-size:16px;line-height:1.6;color:var(--v4-ink-soft);margin:0 auto 14px;max-width:620px}
.crrem-outlook--v4 .crrem-outlook-v4-footer-cta{font-family:'Lexend',sans-serif;font-weight:600;font-size:15px;color:var(--v4-evergreen);text-decoration:none}
.crrem-outlook--v4 .crrem-outlook-v4-footer-cta:hover{color:var(--v4-arctic);text-decoration:underline}

/* Per-cell mobile labels (default hidden; revealed in mobile media query below) */
.crrem-outlook--v4 .crrem-outlook-v4-pcell .plabel{display:none}

/* responsive */
@media(max-width:880px){
  .crrem-outlook--v4 .crrem-outlook-v4-container{padding:0 28px}
  .crrem-outlook--v4 .crrem-outlook-v4-hero-grid,
  .crrem-outlook--v4 .crrem-outlook-v4-tg,
  .crrem-outlook--v4 .crrem-outlook-v4-facts-grid,
  .crrem-outlook--v4 .crrem-outlook-v4-gi-cards,
  .crrem-outlook--v4 .crrem-outlook-v4-prow{grid-template-columns:1fr}

  /* Hide the desktop column header on mobile — per-cell labels take over */
  .crrem-outlook--v4 .crrem-outlook-v4-ptable-h{display:none}

  /* Stacked cells get a colored left rule + per-cell label (Option C) */
  .crrem-outlook--v4 .crrem-outlook-v4-pcell{padding-right:0;padding-left:14px;border-left:3px solid var(--v4-evergreen);margin-top:18px}
  .crrem-outlook--v4 .crrem-outlook-v4-pcell.exp{border-left:3px solid var(--v4-sienna);border-top:none;padding-top:0;margin-top:18px}
  .crrem-outlook--v4 .crrem-outlook-v4-pcell .plabel{display:block;font-family:'Lexend Deca',sans-serif;font-weight:600;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--v4-evergreen);margin-bottom:10px}
  .crrem-outlook--v4 .crrem-outlook-v4-pcell.exp .plabel{color:var(--v4-sienna)}
  .crrem-outlook--v4 .crrem-outlook-v4-pcell .plabel em{font-style:normal;font-weight:400;color:var(--v4-ink-soft);text-transform:none;letter-spacing:normal;margin-left:6px}

  .crrem-outlook--v4 .crrem-outlook-v4-process-steps{grid-template-columns:1fr}
  .crrem-outlook--v4 .crrem-outlook-v4-facts-grid{gap:22px}
}

/* Comment-period banner at top of at-a-glance card (Charlotte C4) */
.crrem-outlook--v4 .crrem-outlook-v4-gcard-banner{display:flex;align-items:center;gap:9px;padding:13px 18px;border-bottom:1px solid var(--v4-border-cool);background:var(--v4-warm);font-size:13px;font-weight:500;color:var(--v4-ink)}
.crrem-outlook--v4 .crrem-outlook-v4-gcard-banner .dot{width:8px;height:8px;border-radius:50%;background:var(--v4-arctic);box-shadow:0 0 0 4px rgba(47,111,133,.14);flex:0 0 auto}

/* Column header qualifier — keep meaning, lower visual weight (Charlotte C12/13 nudge) */
.crrem-outlook--v4 .crrem-outlook-v4-ptable-h .qual{font-weight:400;letter-spacing:.04em;color:var(--v4-ink-soft);font-style:normal;text-transform:lowercase;opacity:.85;margin-left:2px}

/* Pipeline orange-tag legend (Charlotte C14/18 guess) */
.crrem-outlook--v4 .crrem-outlook-v4-pipe-key{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin:0 0 18px;font-size:13px;color:var(--v4-ink-soft)}
.crrem-outlook--v4 .crrem-outlook-v4-pipe-key .lbl{margin-right:2px}
.crrem-outlook--v4 .crrem-outlook-v4-pipe-key .need{font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--v4-amber-ink);background:var(--v4-amber-bg);border-radius:999px;padding:2px 9px}

/* Change-type chip on pipeline priority items (Andrea round 2: align with Change & Update Protocol) */
.crrem-outlook--v4 .crrem-outlook-v4-pcell .ctype{display:inline-block;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;border-radius:5px;padding:2px 8px;margin-right:6px;margin-bottom:6px;vertical-align:middle}
.crrem-outlook--v4 .crrem-outlook-v4-pcell .ctype.revision{color:var(--v4-ink);background:rgba(33,51,56,.10)}
.crrem-outlook--v4 .crrem-outlook-v4-pcell .ctype.update{color:var(--v4-arctic);background:rgba(47,111,133,.12)}