/*
 * Coffee C Futures dashboard styles.
 * All rules are scoped under .ccf-wrap so theme styles are untouched.
 * Color roles follow a validated data-viz palette (dark default, light option).
 */

.ccf-wrap {
	/* Bloomberg-terminal dark palette: black plane, gunmetal-gray panels,
	   amber accent, mono numerics. */
	--ccf-page: #000000;
	--ccf-surface: #0d0f12;
	--ccf-surface-2: #16191e;
	--ccf-ink: #e7e7e0;
	--ccf-ink-2: #aab0b8;
	--ccf-muted: #6f757e;
	--ccf-grid: #1b1e23;
	--ccf-baseline: #363b43;
	--ccf-border: #2a2e34;

	/* Terminal amber accent + monospace numerics */
	--ccf-accent: #f7a11a;
	--ccf-mono: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;

	/* Categorical series — slot 1 is the amber hero line; slot 4 shifted to
	   blue so it never sits next to amber. */
	--ccf-s1: #f7a11a;
	--ccf-s2: #35b06a;
	--ccf-s3: #d5568a;
	--ccf-s4: #3f92d6;
	--ccf-s5: #17a0a8;
	--ccf-s6: #e2683a;
	--ccf-s7: #9088d6;
	--ccf-s8: #e0564f;

	/* Status (fixed) */
	--ccf-good: #2fb865;
	--ccf-warn: #f7a11a;
	--ccf-serious: #ec835a;
	--ccf-crit: #ff4d43;

	/* Diverging poles (up green / down red) */
	--ccf-div-pos: #2fb865;
	--ccf-div-neg: #ff4d43;

	color-scheme: dark;
	background: var(--ccf-page);
	color: var(--ccf-ink-2);
	font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
	font-size: 13.5px;
	line-height: 1.5;
	padding: 16px;
	border-radius: 3px;
	box-sizing: border-box;
	max-width: 100%;
}

.ccf-wrap[data-ccf-theme="light"] {
	--ccf-page: #e8e9eb;
	--ccf-surface: #f6f7f8;
	--ccf-surface-2: #e8eaec;
	--ccf-ink: #14171a;
	--ccf-ink-2: #454b52;
	--ccf-muted: #767c84;
	--ccf-grid: #d7dade;
	--ccf-baseline: #b6bbc1;
	--ccf-border: #cbced3;
	--ccf-accent: #b26a00;
	--ccf-s1: #b26a00;
	--ccf-s2: #1a7f43;
	--ccf-s3: #c23e73;
	--ccf-s4: #2a6fb0;
	--ccf-s5: #10808a;
	--ccf-s6: #c2531f;
	--ccf-s7: #5a4fb0;
	--ccf-s8: #c62f28;
	--ccf-good: #1a7f43;
	--ccf-warn: #b26a00;
	--ccf-crit: #c62f28;
	--ccf-div-pos: #1a7f43;
	--ccf-div-neg: #c62f28;
	color-scheme: light;
}

.ccf-wrap *,
.ccf-wrap *::before,
.ccf-wrap *::after {
	box-sizing: border-box;
}

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

.ccf-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.ccf-header-title {
	display: flex;
	align-items: center;
	gap: 12px;
}

.ccf-logo {
	font-size: 30px;
	line-height: 1;
}

.ccf-wrap .ccf-h1 {
	margin: 0;
	font-size: 21px;
	font-weight: 700;
	color: var(--ccf-ink);
	line-height: 1.2;
}

.ccf-sym {
	font-size: 12px;
	font-weight: 600;
	color: var(--ccf-muted);
	letter-spacing: 0.06em;
	margin-left: 6px;
}

.ccf-wrap .ccf-sub {
	margin: 2px 0 0;
	font-size: 12.5px;
	color: var(--ccf-muted);
}

.ccf-header-right {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.ccf-cta {
	display: inline-block;
	font-family: var(--ccf-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ccf-accent);
	background: transparent;
	border: 1px solid var(--ccf-accent);
	border-radius: 2px;
	padding: 7px 16px;
	transition: background 0.15s ease, color 0.15s ease;
	white-space: nowrap;
}

.ccf-cta:hover {
	background: var(--ccf-accent);
	color: #000;
}

.ccf-cta-member {
	color: var(--ccf-good);
	border-color: var(--ccf-good);
	cursor: default;
}

.ccf-cta-member:hover { background: transparent; color: var(--ccf-good); }

.ccf-header-live {
	display: flex;
	align-items: center;
	gap: 7px;
	background: var(--ccf-surface);
	border: 1px solid var(--ccf-border);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 12px;
	font-weight: 600;
	color: var(--ccf-ink-2);
}

.ccf-live-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ccf-good);
	animation: ccf-pulse 1.6s ease-in-out infinite;
}

.ccf-live-dot.is-paused {
	background: var(--ccf-muted);
	animation: none;
}

@keyframes ccf-pulse {
	0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(12, 163, 12, 0.5); }
	50% { opacity: 0.6; box-shadow: 0 0 0 5px rgba(12, 163, 12, 0); }
}

.ccf-countdown {
	color: var(--ccf-muted);
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ */
/* Cards & layout                                                      */
/* ------------------------------------------------------------------ */

.ccf-card {
	background: var(--ccf-surface);
	border: 1px solid var(--ccf-border);
	border-radius: 10px;
	padding: 16px 18px;
	margin: 0 0 14px;
	min-width: 0;
	overflow: hidden;
}

.ccf-wrap {
	overflow-x: hidden;
}

.ccf-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	min-width: 0;
}

/* Grid/flex tracks default to min-width:auto, which lets a wide canvas blow
   out the column. Force every grid child to be shrinkable. */
.ccf-grid-2 > * {
	min-width: 0;
}

.ccf-grid-2 > .ccf-card {
	margin-bottom: 0;
}

.ccf-grid-2 {
	margin-bottom: 14px;
}

.ccf-card .ccf-grid-2 {
	margin-bottom: 0;
	margin-top: 10px;
}

@media (max-width: 860px) {
	.ccf-grid-2 { grid-template-columns: 1fr; }
}

.ccf-card-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.ccf-wrap .ccf-card-title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--ccf-ink);
	letter-spacing: 0.01em;
}

.ccf-wrap .ccf-mini-title {
	margin: 12px 0 6px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ccf-ink-2);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.ccf-card-meta {
	font-size: 11.5px;
	color: var(--ccf-muted);
}

/* ------------------------------------------------------------------ */
/* Charts                                                              */
/* ------------------------------------------------------------------ */

.ccf-chart {
	position: relative;
	height: 260px;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
}

/* Chart.js sizes the canvas from its parent; clamp it so a canvas can never
   force its container (or a grid/flex track) wider than the viewport. */
.ccf-wrap canvas {
	max-width: 100%;
}

.ccf-chart-tall { height: 340px; }
.ccf-chart-short { height: 190px; }
.ccf-chart-vol { height: 90px; margin-top: 2px; }

/* ------------------------------------------------------------------ */
/* Range pills                                                         */
/* ------------------------------------------------------------------ */

.ccf-ranges {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}

.ccf-range-btn {
	background: var(--ccf-surface-2);
	border: 1px solid var(--ccf-border);
	color: var(--ccf-ink-2);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	padding: 4px 12px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.ccf-range-btn:hover { background: var(--ccf-baseline); }

.ccf-range-btn.is-active {
	background: var(--ccf-s1);
	border-color: var(--ccf-s1);
	color: #fff;
}

/* ------------------------------------------------------------------ */
/* Snapshot (ticker + tiles)                                           */
/* ------------------------------------------------------------------ */

.ccf-ticker {
	display: flex;
	align-items: flex-end;
	gap: 22px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.ccf-price-big {
	font-size: 44px;
	font-weight: 800;
	color: var(--ccf-ink);
	line-height: 1;
	letter-spacing: -0.01em;
}

.ccf-price-unit {
	font-size: 14px;
	font-weight: 600;
	color: var(--ccf-muted);
	margin-left: 4px;
}

.ccf-price-chg {
	font-size: 17px;
	font-weight: 700;
	padding-bottom: 4px;
}

.ccf-up { color: var(--ccf-good); }
.ccf-down { color: var(--ccf-crit); }
.ccf-flat { color: var(--ccf-muted); }

.ccf-contract-name {
	font-size: 12px;
	color: var(--ccf-muted);
	padding-bottom: 6px;
}

.ccf-rangebars {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin: 10px 0 14px;
}

@media (max-width: 640px) {
	.ccf-rangebars { grid-template-columns: 1fr; }
}

.ccf-rangebar-label {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	color: var(--ccf-muted);
	margin-bottom: 3px;
	font-variant-numeric: tabular-nums;
}

.ccf-rangebar {
	position: relative;
	height: 6px;
	border-radius: 3px;
	background: var(--ccf-surface-2);
}

.ccf-rangebar-dot {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--ccf-s1);
	border: 2px solid var(--ccf-surface);
}

.ccf-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
	gap: 8px;
}

.ccf-tile {
	background: var(--ccf-surface-2);
	border: 1px solid var(--ccf-border);
	border-radius: 8px;
	padding: 8px 10px;
}

.ccf-tile-label {
	font-size: 10.5px;
	color: var(--ccf-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.ccf-tile-value {
	font-size: 16px;
	font-weight: 700;
	color: var(--ccf-ink);
	font-variant-numeric: tabular-nums;
}

.ccf-tile-value.ccf-up { color: var(--ccf-good); }
.ccf-tile-value.ccf-down { color: var(--ccf-crit); }

/* ------------------------------------------------------------------ */
/* Tables                                                              */
/* ------------------------------------------------------------------ */

.ccf-wrap .ccf-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12.5px;
	margin: 8px 0;
}

.ccf-wrap .ccf-table th,
.ccf-wrap .ccf-table td {
	text-align: left;
	padding: 6px 8px;
	border-bottom: 1px solid var(--ccf-grid);
	color: var(--ccf-ink-2);
	font-variant-numeric: tabular-nums;
	background: transparent;
}

.ccf-wrap .ccf-table th {
	color: var(--ccf-muted);
	font-weight: 600;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.ccf-wrap .ccf-table td:first-child { color: var(--ccf-ink); }

.ccf-table-scroll { overflow-x: auto; }

/* ------------------------------------------------------------------ */
/* Insights, notes, badges, chips                                      */
/* ------------------------------------------------------------------ */

.ccf-wrap .ccf-insights {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.ccf-wrap .ccf-insights li {
	background: var(--ccf-surface-2);
	border: 1px solid var(--ccf-border);
	border-radius: 6px;
	padding: 5px 10px;
	font-size: 12px;
	color: var(--ccf-ink-2);
	margin: 0;
}

.ccf-wrap .ccf-insights li::before {
	content: "▸ ";
	color: var(--ccf-s1);
}

.ccf-note {
	font-size: 12px;
	color: var(--ccf-muted);
	margin: 8px 0 0;
}

.ccf-badge {
	display: inline-block;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	padding: 3px 11px;
	letter-spacing: 0.03em;
}

.ccf-badge-good { background: rgba(12, 163, 12, 0.16); color: var(--ccf-good); }
.ccf-badge-crit { background: rgba(208, 59, 59, 0.16); color: #ff8a8a; }
.ccf-badge-warn { background: rgba(250, 178, 25, 0.14); color: var(--ccf-warn); }
.ccf-badge-muted { background: var(--ccf-surface-2); color: var(--ccf-ink-2); }

.ccf-wrap[data-ccf-theme="light"] .ccf-badge-crit { color: var(--ccf-crit); }

.ccf-ai-chip {
	display: block;
	margin-top: 8px;
	font-size: 12px;
	color: var(--ccf-ink-2);
	background: rgba(144, 133, 233, 0.10);
	border-left: 3px solid var(--ccf-s7);
	border-radius: 0 6px 6px 0;
	padding: 6px 10px;
}

.ccf-ai-chip strong { color: var(--ccf-s7); }

/* ------------------------------------------------------------------ */
/* AI card                                                             */
/* ------------------------------------------------------------------ */

.ccf-card-ai {
	border-color: rgba(144, 133, 233, 0.35);
	background:
		radial-gradient(1200px 200px at 10% 0%, rgba(144, 133, 233, 0.08), transparent 60%),
		var(--ccf-surface);
}

.ccf-ai-spark { color: var(--ccf-s7); }

.ccf-ai-top {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}

.ccf-ai-headline {
	font-size: 17px;
	font-weight: 700;
	color: var(--ccf-ink);
	margin: 0;
}

.ccf-ai-confidence {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 11.5px;
	color: var(--ccf-muted);
}

.ccf-ai-meter {
	width: 90px;
	height: 5px;
	background: var(--ccf-surface-2);
	border-radius: 3px;
	overflow: hidden;
}

.ccf-ai-meter span {
	display: block;
	height: 100%;
	background: var(--ccf-s7);
	border-radius: 3px;
}

.ccf-ai-outlook p {
	margin: 0 0 10px;
	font-size: 13.5px;
	color: var(--ccf-ink-2);
}

.ccf-ai-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px;
	margin-top: 6px;
}

.ccf-ai-col h5 {
	margin: 0 0 5px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ccf-muted);
}

.ccf-ai-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ccf-ai-col li {
	font-size: 12.5px;
	color: var(--ccf-ink-2);
	padding: 3px 0 3px 14px;
	position: relative;
	margin: 0;
}

.ccf-ai-col li::before {
	content: "•";
	position: absolute;
	left: 2px;
	color: var(--ccf-s7);
}

.ccf-ai-setup {
	font-size: 13px;
	color: var(--ccf-ink-2);
}

.ccf-btn {
	background: var(--ccf-s1);
	color: #fff;
	border: 0;
	border-radius: 6px;
	font-size: 12.5px;
	font-weight: 600;
	padding: 7px 14px;
	cursor: pointer;
}

.ccf-btn:hover { filter: brightness(1.1); }
.ccf-btn[disabled] { opacity: 0.55; cursor: wait; }

.ccf-btn-ghost {
	background: var(--ccf-surface-2);
	color: var(--ccf-ink-2);
	border: 1px solid var(--ccf-border);
}

/* ------------------------------------------------------------------ */
/* Weather                                                             */
/* ------------------------------------------------------------------ */

.ccf-frost-banner {
	background: rgba(208, 59, 59, 0.14);
	border: 1px solid rgba(208, 59, 59, 0.45);
	color: #ff9d9d;
	border-radius: 8px;
	padding: 9px 13px;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 10px;
}

.ccf-wrap[data-ccf-theme="light"] .ccf-frost-banner { color: var(--ccf-crit); }

.ccf-wx-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 8px;
	margin-bottom: 12px;
}

.ccf-wx-card {
	background: var(--ccf-surface-2);
	border: 1px solid var(--ccf-border);
	border-radius: 8px;
	padding: 9px 11px;
	font-size: 11.5px;
	color: var(--ccf-muted);
}

.ccf-wx-card .ccf-wx-name {
	font-size: 12px;
	font-weight: 700;
	color: var(--ccf-ink);
	margin-bottom: 1px;
}

.ccf-wx-row {
	display: flex;
	justify-content: space-between;
	font-variant-numeric: tabular-nums;
	margin-top: 2px;
}

.ccf-wx-row b { color: var(--ccf-ink-2); font-weight: 600; }

.ccf-wx-card.is-frost { border-color: rgba(208, 59, 59, 0.55); }

/* ------------------------------------------------------------------ */
/* Related markets sparkline grid                                      */
/* ------------------------------------------------------------------ */

.ccf-spark-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
	gap: 8px;
}

.ccf-spark-card {
	background: var(--ccf-surface-2);
	border: 1px solid var(--ccf-border);
	border-radius: 8px;
	padding: 9px 11px;
}

.ccf-spark-label {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--ccf-ink-2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ccf-spark-group {
	font-size: 9.5px;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--ccf-muted);
}

.ccf-spark-price {
	font-size: 15px;
	font-weight: 700;
	color: var(--ccf-ink);
	font-variant-numeric: tabular-nums;
	margin-top: 2px;
}

.ccf-spark-chg {
	font-size: 11.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.ccf-spark-canvas {
	height: 34px;
	margin-top: 5px;
	position: relative;
}

/* ------------------------------------------------------------------ */
/* News                                                                */
/* ------------------------------------------------------------------ */

.ccf-wrap .ccf-news-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ccf-wrap .ccf-news-list li {
	padding: 8px 0;
	border-bottom: 1px solid var(--ccf-grid);
	margin: 0;
}

.ccf-wrap .ccf-news-list li:last-child { border-bottom: 0; }

.ccf-wrap .ccf-news-list a {
	color: var(--ccf-ink);
	text-decoration: none;
	font-size: 13.5px;
	font-weight: 600;
}

.ccf-wrap .ccf-news-list a:hover { color: var(--ccf-s1); text-decoration: underline; }

.ccf-news-meta {
	display: block;
	font-size: 11px;
	color: var(--ccf-muted);
	margin-top: 1px;
}

/* ------------------------------------------------------------------ */
/* Lists / glossary / education                                        */
/* ------------------------------------------------------------------ */

.ccf-wrap .ccf-list {
	margin: 0;
	padding: 0 0 0 16px;
	font-size: 13px;
	color: var(--ccf-ink-2);
}

.ccf-wrap .ccf-list li { margin: 0 0 7px; }

.ccf-glossary p {
	font-size: 12.5px;
	color: var(--ccf-muted);
	margin: 0 0 6px;
}

.ccf-glossary strong { color: var(--ccf-ink-2); }

/* ------------------------------------------------------------------ */
/* States: skeleton, error                                             */
/* ------------------------------------------------------------------ */

.ccf-skeleton {
	border-radius: 8px;
	background: linear-gradient(100deg, var(--ccf-surface-2) 40%, var(--ccf-baseline) 50%, var(--ccf-surface-2) 60%);
	background-size: 200% 100%;
	animation: ccf-shimmer 1.4s ease-in-out infinite;
}

@keyframes ccf-shimmer {
	0% { background-position: 120% 0; }
	100% { background-position: -80% 0; }
}

.ccf-error {
	background: var(--ccf-surface-2);
	border: 1px dashed var(--ccf-baseline);
	border-radius: 8px;
	color: var(--ccf-muted);
	font-size: 13px;
	padding: 18px;
	text-align: center;
}

.ccf-error button { margin-left: 8px; }

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */

.ccf-footer {
	margin-top: 4px;
	font-size: 11.5px;
	color: var(--ccf-muted);
}

.ccf-disclaimer {
	border-top: 1px solid var(--ccf-grid);
	padding-top: 10px;
	margin: 0 0 4px;
}

.ccf-sources { margin: 0; }

@media (max-width: 640px) {
	.ccf-wrap { padding: 12px; }
	.ccf-price-big { font-size: 34px; }
	.ccf-chart { height: 220px; }
	.ccf-chart-tall { height: 260px; }
}

/* ------------------------------------------------------------------ */
/* Display modes                                                       */
/* ------------------------------------------------------------------ */

/* Full-width breakout: escapes any theme content column via the 100vw
   trick. Applied when display mode = "Full width" in settings.         */
.ccf-wrap.ccf-bleed {
	width: 100vw;
	max-width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	border-radius: 0;
	padding-left: clamp(12px, 2.5vw, 32px);
	padding-right: clamp(12px, 2.5vw, 32px);
}

/* Full takeover canvas (templates/ccf-canvas.php): the plugin owns the
   whole page — dark viewport, slim top bar, wide centered main column. */
body.ccf-canvas {
	background: #000000;
	margin: 0;
	min-height: 100vh;
	font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

.ccf-canvas-bar {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 9px clamp(14px, 2.5vw, 32px);
	border-bottom: 1px solid #2a2e34;
	background: #0d0f12;
}

.ccf-canvas-bar .ccf-canvas-home {
	color: #aab0b8;
	text-decoration: none;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.ccf-canvas-bar .ccf-canvas-home:hover { color: #f7a11a; }

.ccf-canvas-bar .ccf-canvas-title {
	color: #6f757e;
	font-size: 12.5px;
	font-family: "SFMono-Regular", "Consolas", "Menlo", monospace;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ccf-canvas-main {
	max-width: 1720px;
	margin: 0 auto;
	padding: clamp(10px, 1.5vw, 22px) clamp(10px, 2vw, 28px) 48px;
}

body.ccf-canvas .ccf-wrap {
	padding: clamp(12px, 1.5vw, 22px);
}

/* The guide article on the dark canvas: constrain to a readable column
   and restyle for dark, since no theme typography exists here.          */
body.ccf-canvas .ccf-guide {
	max-width: 880px;
	margin: 3em auto 0;
	color: #c3c2b7;
	font-size: 16px;
}

body.ccf-canvas .ccf-guide h2,
body.ccf-canvas .ccf-guide h3,
body.ccf-canvas .ccf-guide h4,
body.ccf-canvas .ccf-guide strong,
body.ccf-canvas .ccf-guide th {
	color: #ffffff;
}

body.ccf-canvas .ccf-guide a {
	color: #3987e5;
}

body.ccf-canvas .ccf-guide table th,
body.ccf-canvas .ccf-guide table td,
body.ccf-canvas .ccf-guide-toc,
body.ccf-canvas .ccf-guide-disclaimer {
	border-color: #2c2c2a;
}

/* ------------------------------------------------------------------ */
/* Evergreen guide ([coffee-c-futures-guide])                          */
/* Deliberately theme-neutral: inherits the site's fonts and colors    */
/* so the article reads as native page content below the dashboard.    */
/* ------------------------------------------------------------------ */

.ccf-guide {
	margin-top: 2em;
	line-height: 1.7;
	max-width: 100%;
}

.ccf-guide h2 {
	margin: 1.2em 0 0.6em;
	line-height: 1.25;
}

.ccf-guide h3 {
	margin: 1.6em 0 0.5em;
	line-height: 1.3;
}

.ccf-guide h4 {
	margin: 1.2em 0 0.3em;
}

.ccf-guide p {
	margin: 0 0 1em;
}

.ccf-guide ul {
	margin: 0 0 1.2em 1.4em;
	padding: 0;
}

.ccf-guide li {
	margin: 0 0 0.5em;
}

.ccf-guide table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.4em;
}

.ccf-guide table th,
.ccf-guide table td {
	text-align: left;
	padding: 8px 12px;
	border: 1px solid rgba(128, 128, 128, 0.28);
	vertical-align: top;
}

.ccf-guide table th[scope="row"] {
	white-space: nowrap;
	width: 1%;
}

.ccf-guide-toc {
	border: 1px solid rgba(128, 128, 128, 0.28);
	border-radius: 8px;
	padding: 14px 18px;
	margin: 0 0 1.6em;
}

.ccf-guide-toc ul {
	margin: 0.5em 0 0 1.2em;
	columns: 2;
	column-gap: 2em;
}

@media (max-width: 640px) {
	.ccf-guide-toc ul { columns: 1; }
}

.ccf-guide-faq h4 {
	margin-top: 1.4em;
}

.ccf-guide-disclaimer {
	margin-top: 2em;
	padding-top: 1em;
	border-top: 1px solid rgba(128, 128, 128, 0.28);
	font-size: 0.9em;
	opacity: 0.85;
}

/* ------------------------------------------------------------------ */
/* Trending pick strip (top of AI card)                                */
/* ------------------------------------------------------------------ */

.ccf-trendpick {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	background: var(--ccf-surface-2);
	border: 1px solid var(--ccf-border);
	border-radius: 8px;
	padding: 8px 12px;
	margin: 4px 0 12px;
}

.ccf-trendpick-label {
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ccf-muted);
	font-weight: 700;
}

.ccf-trendpick-pick {
	font-size: 15px;
	font-weight: 800;
}

.ccf-trendpick-meta {
	font-size: 12px;
	color: var(--ccf-ink-2);
	font-variant-numeric: tabular-nums;
}

.ccf-trendpick-spark {
	position: relative;
	height: 30px;
	width: 120px;
	margin-left: auto;
}

/* ------------------------------------------------------------------ */
/* Money flow — heatmap, tiles, facts                                  */
/* ------------------------------------------------------------------ */

.ccf-money-sub {
	font-size: 10.5px;
	color: var(--ccf-muted);
	font-variant-numeric: tabular-nums;
	margin-top: 1px;
}

/* Cost build-up strip (C + differential + landing = delivered) */
.ccf-costbuild {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	background: var(--ccf-surface-2);
	border: 1px solid var(--ccf-border);
	border-radius: 2px;
	padding: 10px 14px;
	margin: 4px 0 12px;
	font-family: var(--ccf-mono);
	font-size: 13px;
	color: var(--ccf-ink-2);
}

.ccf-costbuild b { color: var(--ccf-ink); font-weight: 700; }
.ccf-costop { color: var(--ccf-muted); font-weight: 700; }

.ccf-costtotal {
	color: var(--ccf-accent);
	font-weight: 700;
	margin-left: auto;
	white-space: nowrap;
}

.ccf-heat-table td { vertical-align: middle; }
.ccf-heat-name { font-weight: 600; color: var(--ccf-ink); white-space: nowrap; }
.ccf-heat-bars { width: 60%; }

.ccf-heat-row {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 2px 0;
}

.ccf-heat-tag {
	font-size: 9.5px;
	font-weight: 700;
	color: var(--ccf-muted);
	width: 10px;
}

.ccf-heat-track {
	flex: 1;
	height: 10px;
	background: var(--ccf-surface);
	border-radius: 3px;
	overflow: hidden;
	min-width: 40px;
}

.ccf-heat-fill { display: block; height: 100%; border-radius: 3px; }
.ccf-heat-long { background: var(--ccf-good); }
.ccf-heat-short { background: var(--ccf-crit); }

.ccf-heat-val {
	font-size: 11px;
	color: var(--ccf-ink-2);
	font-variant-numeric: tabular-nums;
	width: 52px;
	text-align: right;
}

.ccf-facts { margin-top: 6px; }

.ccf-fact {
	border: 1px solid var(--ccf-border);
	border-radius: 6px;
	padding: 8px 12px;
	margin-bottom: 6px;
	background: var(--ccf-surface-2);
}

.ccf-fact summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--ccf-ink);
	font-size: 13px;
	list-style: revert;
}

.ccf-fact[open] summary { margin-bottom: 6px; }

.ccf-fact p {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--ccf-ink-2);
}

/* ------------------------------------------------------------------ */
/* Trend Extensions (locked projection)                                */
/* ------------------------------------------------------------------ */

.ccf-card-trend {
	border-color: rgba(41, 120, 214, 0.35);
	background:
		radial-gradient(1200px 200px at 90% 0%, rgba(41, 120, 214, 0.08), transparent 60%),
		var(--ccf-surface);
}

.ccf-trend-locked {
	text-align: center;
	padding: 20px 16px;
	max-width: 620px;
	margin: 0 auto;
}

.ccf-lock-big { font-size: 34px; line-height: 1; }

.ccf-trend-locked h4 {
	margin: 8px 0 4px;
	color: var(--ccf-ink);
	font-size: 18px;
	letter-spacing: 0.01em;
}

.ccf-trend-locked p {
	color: var(--ccf-ink-2);
	font-size: 13px;
	max-width: 520px;
	margin: 4px auto 12px;
}

.ccf-lock-lead { color: var(--ccf-ink-2); font-size: 13.5px; }

/* Blurred forecast teaser */
.ccf-lock-preview {
	position: relative;
	height: 130px;
	margin: 6px auto 14px;
	max-width: 520px;
	border: 1px solid var(--ccf-border);
	border-radius: 3px;
	background: var(--ccf-surface-2);
	overflow: hidden;
}

.ccf-lock-preview svg {
	width: 100%;
	height: 100%;
	display: block;
	filter: blur(3px);
	opacity: 0.85;
}

.ccf-lock-preview-tag {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: var(--ccf-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.22em;
	color: var(--ccf-ink);
	background: rgba(0, 0, 0, 0.45);
	border: 1px solid var(--ccf-border);
	border-radius: 2px;
	padding: 5px 12px;
	white-space: nowrap;
}

.ccf-wrap[data-ccf-theme="light"] .ccf-lock-preview-tag {
	color: #14171a;
	background: rgba(255, 255, 255, 0.6);
}

/* "What you unlock" feature list */
.ccf-lock-feats {
	list-style: none;
	margin: 0 auto 16px;
	padding: 0;
	max-width: 520px;
	text-align: left;
}

.ccf-lock-feats li {
	position: relative;
	padding: 5px 0 5px 24px;
	font-size: 13px;
	color: var(--ccf-ink-2);
	border-bottom: 1px solid var(--ccf-grid);
}

.ccf-lock-feats li:last-child { border-bottom: 0; }

.ccf-lock-feats li::before {
	content: "\2713";
	position: absolute;
	left: 2px;
	top: 5px;
	color: var(--ccf-accent);
	font-weight: 700;
}

.ccf-lock-hint { font-size: 11.5px; color: var(--ccf-muted); margin: 8px 0 0; }

.ccf-unlock-row {
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
}

.ccf-unlock-input {
	background: var(--ccf-surface-2);
	border: 1px solid var(--ccf-baseline);
	color: var(--ccf-ink);
	border-radius: 6px;
	padding: 8px 12px;
	font-size: 14px;
	min-width: 180px;
}

.ccf-unlock-err { color: #ff8a8a; font-size: 12px; }
.ccf-wrap[data-ccf-theme="light"] .ccf-unlock-err { color: var(--ccf-crit); }

.ccf-trend-targets {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin: 12px 0;
}

.ccf-tt {
	border: 1px solid var(--ccf-border);
	border-radius: 8px;
	padding: 10px;
	text-align: center;
	background: var(--ccf-surface-2);
}

.ccf-tt-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ccf-muted); }
.ccf-tt-val { font-size: 20px; font-weight: 800; color: var(--ccf-ink); font-variant-numeric: tabular-nums; }
.ccf-tt-bull { border-color: rgba(12, 163, 12, 0.4); }
.ccf-tt-bear { border-color: rgba(208, 59, 59, 0.4); }
.ccf-tt-base { border-color: rgba(41, 120, 214, 0.45); }

.ccf-trend-reasons ul { list-style: none; margin: 4px 0 0; padding: 0; }

.ccf-trend-reasons li {
	font-size: 12.5px;
	color: var(--ccf-ink-2);
	padding: 3px 0;
	display: flex;
	gap: 7px;
	align-items: flex-start;
}

.ccf-reason-mk { font-weight: 800; width: 12px; flex: none; text-align: center; }
.ccf-reason-up .ccf-reason-mk { color: var(--ccf-good); }
.ccf-reason-down .ccf-reason-mk { color: var(--ccf-crit); }
.ccf-reason-flat .ccf-reason-mk { color: var(--ccf-muted); }

.ccf-unlock-getgold { font-size: 12px; color: var(--ccf-muted); margin-top: 10px; }
.ccf-unlock-getgold a { color: #d0a24c; font-weight: 600; text-decoration: none; }
.ccf-unlock-getgold a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ */
/* Coffee C Futures Gold                                                */
/* ------------------------------------------------------------------ */

.ccf-card-gold {
	border-color: rgba(208, 162, 76, 0.45);
	background:
		radial-gradient(900px 180px at 0% 0%, rgba(208, 162, 76, 0.12), transparent 60%),
		var(--ccf-surface);
}

.ccf-gold-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	color: #1a1400;
	background: linear-gradient(180deg, #f0d074, #d0a24c);
	border-radius: 999px;
	padding: 3px 12px;
}

.ccf-wrap .ccf-gold-title {
	margin: 8px 0 4px;
	font-size: 19px;
	font-weight: 800;
	color: var(--ccf-ink);
}

.ccf-gold-sub {
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--ccf-ink-2);
	max-width: 720px;
	line-height: 1.6;
}

.ccf-gold-form {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	max-width: 480px;
}

.ccf-gold-email {
	flex: 1;
	min-width: 200px;
	background: var(--ccf-surface-2);
	border: 1px solid var(--ccf-baseline);
	color: var(--ccf-ink);
	border-radius: 6px;
	padding: 10px 12px;
	font-size: 14px;
}

.ccf-gold-btn {
	background: linear-gradient(180deg, #e0b968, #cf9f45);
	color: #1a1400;
	font-weight: 700;
	border: 0;
}

.ccf-gold-btn:hover { filter: brightness(1.05); }

.ccf-gold-msg { font-size: 12.5px; margin: 8px 0 0; min-height: 1em; }
.ccf-gold-msg-err { color: #ff8a8a; }
.ccf-wrap[data-ccf-theme="light"] .ccf-gold-msg-err { color: var(--ccf-crit); }

.ccf-gold-welcome {
	background: rgba(12, 163, 12, 0.14);
	border: 1px solid rgba(12, 163, 12, 0.4);
	color: #7ddb7d;
	border-radius: 6px;
	padding: 8px 12px;
	font-size: 13px;
	font-weight: 600;
	margin: 0 0 12px;
}

.ccf-wrap[data-ccf-theme="light"] .ccf-gold-welcome { color: #0a7f2e; }

.ccf-gold-me {
	display: flex;
	gap: 26px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.ccf-gold-label {
	display: block;
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ccf-muted);
	margin-bottom: 2px;
}

.ccf-gold-email-show { font-size: 15px; font-weight: 700; color: var(--ccf-ink); font-family: var(--ccf-mono); }
.ccf-gold-mecol div:not(.ccf-gold-label) { font-size: 13px; color: var(--ccf-ink-2); }
.ccf-gold-actions { margin-top: 4px; }

/* ================================================================== */
/* Bloomberg-terminal chrome overrides                                 */
/* Loaded last so these win. Sharp corners, amber uppercase section    */
/* headers, monospace numerics, gunmetal panel accents, no emoji.      */
/* ================================================================== */

/* Sharp, boxy corners everywhere */
.ccf-card,
.ccf-header-live,
.ccf-range-btn,
.ccf-badge,
.ccf-tile,
.ccf-btn,
.ccf-spark-card,
.ccf-wx-card,
.ccf-fact,
.ccf-tt,
.ccf-trendpick,
.ccf-gold-badge,
.ccf-gold-email,
.ccf-unlock-input,
.ccf-frost-banner,
.ccf-gold-welcome,
.ccf-ai-chip {
	border-radius: 2px;
}

/* Denser panels with a hairline header rule */
.ccf-card { padding: 12px 14px; }

.ccf-card-head {
	border-bottom: 1px solid var(--ccf-border);
	padding-bottom: 8px;
	margin-bottom: 12px;
}

/* Amber uppercase terminal section headers */
.ccf-wrap .ccf-card-title {
	color: var(--ccf-accent);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-size: 12px;
	font-weight: 700;
}

/* Key panels get an amber top rail instead of the old coloured glow */
.ccf-card-ai,
.ccf-card-trend,
.ccf-card-gold {
	background: var(--ccf-surface);
	border-color: var(--ccf-border);
	border-top: 2px solid var(--ccf-accent);
}

/* Header ticker chip + title */
.ccf-ticker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ccf-mono);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.04em;
	color: #000;
	background: var(--ccf-accent);
	padding: 5px 9px;
	border-radius: 2px;
}

.ccf-wrap .ccf-h1 {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--ccf-ink);
}

.ccf-sym { font-family: var(--ccf-mono); color: var(--ccf-accent); }

.ccf-live-label { color: var(--ccf-accent); font-family: var(--ccf-mono); letter-spacing: 0.14em; }
.ccf-countdown { font-family: var(--ccf-mono); }

/* Monospace numerics — the terminal signature */
.ccf-price-big,
.ccf-price-unit,
.ccf-price-chg,
.ccf-contract-name,
.ccf-tile-value,
.ccf-tile-label,
.ccf-rangebar-label,
.ccf-wrap .ccf-table td,
.ccf-wrap .ccf-table th,
.ccf-spark-price,
.ccf-spark-chg,
.ccf-tt-val,
.ccf-tt-label,
.ccf-heat-val,
.ccf-heat-tag,
.ccf-wx-row,
.ccf-money-sub,
.ccf-trendpick-meta,
.ccf-trendpick-pick,
.ccf-badge {
	font-family: var(--ccf-mono);
}

/* Keep long text labels in the humanist sans */
.ccf-heat-name,
.ccf-wrap .ccf-table td:first-child { font-family: "Segoe UI", system-ui, sans-serif; }

.ccf-badge { text-transform: uppercase; letter-spacing: 0.05em; }
.ccf-range-btn { font-family: var(--ccf-mono); }

/* Amber-ise the former violet/blue accents */
.ccf-ai-chip { border-left-color: var(--ccf-accent); background: rgba(247, 161, 26, 0.07); }
.ccf-ai-chip strong { color: var(--ccf-accent); }
.ccf-ai-col li::before { color: var(--ccf-accent); }
.ccf-ai-meter span { background: var(--ccf-accent); }
.ccf-insights li::before { color: var(--ccf-accent); }

/* Locked-state tag replacing the padlock emoji */
.ccf-lock-tag {
	display: inline-block;
	font-family: var(--ccf-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: var(--ccf-accent);
	border: 1px solid var(--ccf-accent);
	border-radius: 2px;
	padding: 3px 10px;
	margin-bottom: 12px;
}

.ccf-gold-badge { font-family: var(--ccf-mono); letter-spacing: 0.14em; }

/* Honeypot — visually hidden, off-screen, not announced */
.ccf-hp {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Subscribe module (CowCart product embed) — v1.12                    */
/* ------------------------------------------------------------------ */

.ccf-card-subscribe {
	border-color: rgba(208, 162, 76, 0.45);
	background:
		radial-gradient(900px 180px at 0% 0%, rgba(208, 162, 76, 0.12), transparent 60%),
		var(--ccf-surface);
}

.ccf-sub-intro { margin-bottom: 14px; }

.ccf-wrap .ccf-sub-title {
	margin: 8px 0 4px;
	font-size: 19px;
	font-weight: 800;
	color: var(--ccf-ink);
}

.ccf-sub-lead {
	margin: 0;
	font-size: 13px;
	color: var(--ccf-ink-2);
	max-width: 760px;
	line-height: 1.6;
}

/* v1.13: no embedded checkout — one big, unmistakable CTA linking to the
   product page, reused by the locked subscriber sections. */
.ccf-sub-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 14px;
}

.ccf-sub-btn {
	display: inline-block;
	background: linear-gradient(180deg, #f0d074, #d0a24c);
	color: #1a1400 !important;
	font-weight: 800;
	font-size: 15px;
	letter-spacing: 0.01em;
	padding: 13px 30px;
	border-radius: 999px;
	text-decoration: none !important;
	box-shadow: 0 4px 14px rgba(208, 162, 76, 0.35);
	transition: transform 0.12s ease, filter 0.12s ease;
	white-space: nowrap;
}

.ccf-sub-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }

.ccf-sub-note {
	font-size: 12.5px;
	color: var(--ccf-ink-2);
	max-width: 360px;
	line-height: 1.5;
}

.ccf-sub-locked-cta { margin: 14px 0 6px; }

@media (max-width: 640px) {
	.ccf-sub-btn { width: 100%; text-align: center; white-space: normal; }
	.ccf-sub-note { max-width: 100%; }
}

/* ================================================================== */
/* AI Analysis — free/premium split, scenarios, catalysts, edge, teaser*/
/* ================================================================== */

.ccf-ai-divider {
	height: 1px;
	background: var(--ccf-border);
	margin: 16px 0 14px;
}

.ccf-ai-mod { margin: 0 0 14px; }

.ccf-wrap .ccf-ai-modhead {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--ccf-accent);
}

/* Scenarios */
.ccf-scn-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

@media (max-width: 720px) { .ccf-scn-grid { grid-template-columns: 1fr; } }

.ccf-scn {
	border: 1px solid var(--ccf-border);
	border-left-width: 3px;
	border-radius: 2px;
	padding: 9px 11px;
	background: var(--ccf-surface-2);
}

.ccf-scn-bull { border-left-color: var(--ccf-good); }
.ccf-scn-base { border-left-color: var(--ccf-accent); }
.ccf-scn-bear { border-left-color: var(--ccf-crit); }

.ccf-scn-label {
	font-family: var(--ccf-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin-bottom: 3px;
}
.ccf-scn-bull .ccf-scn-label { color: var(--ccf-good); }
.ccf-scn-base .ccf-scn-label { color: var(--ccf-accent); }
.ccf-scn-bear .ccf-scn-label { color: var(--ccf-crit); }

.ccf-scn-txt { font-size: 12.5px; line-height: 1.5; color: var(--ccf-ink-2); }

/* Catalyst calendar */
.ccf-ai-catalysts ul { list-style: none; margin: 0; padding: 0; }
.ccf-ai-catalysts li {
	font-size: 12.5px;
	color: var(--ccf-ink-2);
	padding: 5px 0 5px 16px;
	border-bottom: 1px solid var(--ccf-grid);
	position: relative;
	font-variant-numeric: tabular-nums;
}
.ccf-ai-catalysts li:last-child { border-bottom: 0; }
.ccf-ai-catalysts li::before {
	content: "\25B8";
	position: absolute;
	left: 0;
	color: var(--ccf-accent);
}

/* The Edge callout */
.ccf-ai-edge {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	background: rgba(247, 161, 26, 0.08);
	border: 1px solid rgba(247, 161, 26, 0.35);
	border-radius: 2px;
	padding: 11px 14px;
	margin-top: 4px;
}
.ccf-edge-label {
	font-family: var(--ccf-mono);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--ccf-accent);
	flex: none;
}
.ccf-edge-txt { font-size: 13px; color: var(--ccf-ink); line-height: 1.5; }

/* Locked teaser */
.ccf-ai-teaser-head { text-align: center; margin-bottom: 14px; }
.ccf-ai-teaser-head h4 { margin: 8px 0 4px; color: var(--ccf-ink); font-size: 17px; }
.ccf-ai-teaser-head p { margin: 0; color: var(--ccf-ink-2); font-size: 13px; }

.ccf-ai-teaser-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	margin-bottom: 16px;
}
@media (max-width: 640px) { .ccf-ai-teaser-grid { grid-template-columns: 1fr; } }

.ccf-ai-teaser-mod {
	border: 1px solid var(--ccf-border);
	border-radius: 2px;
	padding: 12px 14px;
	background: var(--ccf-surface-2);
}
.ccf-wrap .ccf-ai-teaser-mod h6 {
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 700;
	color: var(--ccf-ink);
}
.ccf-ai-teaser-mod p { margin: 0 0 9px; font-size: 12px; color: var(--ccf-ink-2); }

.ccf-blurline {
	display: block;
	height: 8px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--ccf-baseline), var(--ccf-surface));
	filter: blur(2px);
	opacity: 0.7;
	margin-top: 5px;
}
.ccf-blurline.short { width: 60%; }

.ccf-ai-teaser-cta { text-align: center; }