/*
 * CF Access — Compute Forecast subscription UI.
 * Light editorial style: Bebas Neue headings, DM Mono labels, Barlow body, blue accents.
 *
 * Every rule is scoped to .cfa-ui and marked !important on typography and colour, because
 * page builders (Elementor, Astra) style p / h2 / button globally and would otherwise win.
 * Re-theme by overriding the tokens, e.g.  .cfa-ui { --cfa-blue: #28A0EA; }
 */

.cfa-ui {
	--cfa-ink: #000000;
	--cfa-paper: #F5F5F3;
	--cfa-card: #FFFFFF;
	--cfa-line: #E2E2DF;
	--cfa-blue: #509EE4;
	--cfa-blue-hover: #3B8AD3;
	--cfa-muted: #5A5A56;
	--cfa-muted-on-dark: #9CA4AC;
	--cfa-ok: #1E7B45;
	--cfa-err: #C0392B;
	--cfa-display: 'CFA Bebas Neue', 'Bebas Neue', 'Oswald', Impact, 'Arial Narrow', sans-serif;
	--cfa-mono: 'CFA DM Mono', 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--cfa-body: 'CFA Barlow', 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- Reset inside the component ---------- */

.cfa-ui,
.cfa-ui *,
.cfa-ui *::before,
.cfa-ui *::after { box-sizing: border-box !important; }

.cfa-ui {
	font-family: var(--cfa-body) !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
	color: var(--cfa-ink) !important;
	text-align: left !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	-webkit-font-smoothing: antialiased;
}

.cfa-ui h2,
.cfa-ui h3,
.cfa-ui p,
.cfa-ui ul,
.cfa-ui li,
.cfa-ui label,
.cfa-ui span,
.cfa-ui strong,
.cfa-ui small {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	text-transform: inherit !important;
	letter-spacing: inherit !important;
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	font-style: normal !important;
	line-height: inherit !important;
	color: inherit !important;
	text-align: inherit !important;
}

.cfa-ui h2::before, .cfa-ui h2::after,
.cfa-ui h3::before, .cfa-ui h3::after { content: none !important; display: none !important; }

.cfa-ui strong { font-weight: 600 !important; }

.cfa-ui a { color: var(--cfa-blue) !important; text-decoration: underline !important; text-underline-offset: 3px !important; text-decoration-thickness: 1px !important; background: none !important; box-shadow: none !important; }
.cfa-ui a:hover { color: var(--cfa-ink) !important; }

.cfa-ui .cfa-ico { display: inline-block !important; flex: none; vertical-align: -1px; width: 12px !important; height: 12px !important; fill: currentColor; }

/* ---------- Section heading row (matches "SUBSCRIPTIONS ……… BILLED ANNUALLY") ---------- */

.cfa-ui .cfa-head {
	display: flex !important;
	flex-wrap: wrap;
	align-items: flex-end !important;
	justify-content: space-between !important;
	gap: 12px 24px;
	padding: 0 0 14px !important;
	margin: 0 0 32px !important;
	border-bottom: 2px solid var(--cfa-ink) !important;
}

.cfa-ui .cfa-head-intro { flex: 1 1 320px; min-width: 0; }
.cfa-ui .cfa-head-meta { flex: 0 0 auto; padding-bottom: 6px; }

.cfa-ui .cfa-eyebrow {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px !important;
	font-family: var(--cfa-mono) !important;
	font-size: 11px !important;
	font-weight: 400 !important;
	letter-spacing: 0.25em !important;
	text-transform: uppercase !important;
	color: var(--cfa-blue) !important;
	line-height: 1.4 !important;
}

.cfa-ui .cfa-heading {
	font-family: var(--cfa-display) !important;
	font-weight: 700 !important;
	font-size: clamp(34px, 5.2cqi, 56px) !important;
	line-height: 0.95 !important;
	letter-spacing: 0.005em !important;
	text-transform: uppercase !important;
	color: var(--cfa-ink) !important;
	margin: 0 !important;
}

.cfa-ui .cfa-sub {
	margin: 12px 0 0 !important;
	font-family: var(--cfa-body) !important;
	font-size: 17px !important;
	line-height: 1.45 !important;
	color: var(--cfa-muted) !important;
	max-width: 62ch;
}

.cfa-ui .cfa-billed,
.cfa-ui .cfa-toggle button {
	font-family: var(--cfa-mono) !important;
	font-size: 11px !important;
	letter-spacing: 0.3em !important;
	text-transform: uppercase !important;
	color: var(--cfa-muted) !important;
	line-height: 1.4 !important;
}

.cfa-ui .cfa-toggle { display: inline-flex !important; gap: 18px; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }

.cfa-ui .cfa-toggle button {
	appearance: none !important;
	background: none !important;
	border: 0 !important;
	border-bottom: 2px solid transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 4px 0 !important;
	margin: 0 !important;
	min-height: 0 !important;
	width: auto !important;
	cursor: pointer;
}

.cfa-ui .cfa-toggle button[aria-pressed="true"] { color: var(--cfa-ink) !important; border-bottom-color: var(--cfa-blue) !important; }
.cfa-ui .cfa-toggle button:hover { color: var(--cfa-ink) !important; }

/* ---------- Plans ---------- */

.cfa-ui.cfa-pricing,
.cfa-ui .cfa-pricing { container-type: inline-size; container-name: cfapricing; margin: 0 0 8px !important; padding: 0 !important; background: none !important; }

.cfa-ui .cfa-plans {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 !important;
	padding: 1px 0 0 1px !important; /* adjoining cards share one border line */
	margin: 0 !important;
}

@container cfapricing (min-width: 600px) {
	.cfa-ui .cfa-cols-2, .cfa-ui .cfa-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cfa-ui .cfa-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container cfapricing (min-width: 900px) {
	.cfa-ui .cfa-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.cfa-ui .cfa-plan {
	display: flex !important;
	flex-direction: column;
	min-width: 0;
	margin: -1px 0 0 -1px !important;
	padding: clamp(22px, 2.6cqi, 36px) clamp(18px, 2.4cqi, 38px) clamp(24px, 2.8cqi, 40px) !important;
	background: var(--cfa-card) !important;
	border: 1px solid var(--cfa-line) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--cfa-ink) !important;
	position: relative;
}

.cfa-ui .cfa-plan.is-highlight {
	background: var(--cfa-ink) !important;
	border-color: var(--cfa-ink) !important;
	color: #FFFFFF !important;
	z-index: 1;
}

.cfa-ui .cfa-plan-badge {
	font-family: var(--cfa-mono) !important;
	font-size: 11px !important;
	letter-spacing: 0.25em !important;
	text-transform: uppercase !important;
	color: var(--cfa-blue) !important;
	line-height: 1.4 !important;
	margin: 0 0 14px !important;
}

.cfa-ui .cfa-plan-name {
	font-family: var(--cfa-display) !important;
	font-weight: 700 !important;
	font-size: clamp(30px, 3.6cqi, 46px) !important;
	line-height: 1 !important;
	letter-spacing: 0.005em !important;
	text-transform: uppercase !important;
	color: inherit !important;
	margin: 0 0 14px !important;
	overflow-wrap: anywhere;
}

.cfa-ui .cfa-price {
	display: flex !important;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	margin: 0 0 22px !important;
	min-height: 1em;
}

.cfa-ui .cfa-price-amt {
	font-family: var(--cfa-display) !important;
	font-weight: 700 !important;
	font-size: clamp(36px, 4.4cqi, 56px) !important;
	line-height: 1 !important;
	letter-spacing: 0.005em !important;
	text-transform: uppercase !important;
	color: inherit !important;
}

.cfa-ui .cfa-price-per {
	font-family: var(--cfa-mono) !important;
	font-size: 13px !important;
	letter-spacing: 0.08em !important;
	color: var(--cfa-muted) !important;
	line-height: 1.2 !important;
}

.cfa-ui .cfa-plan.is-highlight .cfa-price-per { color: var(--cfa-muted-on-dark) !important; }

.cfa-ui .cfa-pricing[data-cfa-interval="monthly"] .cfa-price[data-cfa-show="annual"],
.cfa-ui .cfa-pricing[data-cfa-interval="annual"] .cfa-price[data-cfa-show="monthly"],
.cfa-ui.cfa-pricing[data-cfa-interval="monthly"] .cfa-price[data-cfa-show="annual"],
.cfa-ui.cfa-pricing[data-cfa-interval="annual"] .cfa-price[data-cfa-show="monthly"] { display: none !important; }

.cfa-ui .cfa-plan-tag {
	font-family: var(--cfa-body) !important;
	font-size: 15px !important;
	line-height: 1.45 !important;
	color: var(--cfa-muted) !important;
	margin: -8px 0 20px !important;
}

.cfa-ui .cfa-plan.is-highlight .cfa-plan-tag { color: var(--cfa-muted-on-dark) !important; }

.cfa-ui .cfa-features { list-style: none !important; margin: 0 0 28px !important; padding: 0 !important; }

.cfa-ui .cfa-features li {
	list-style: none !important;
	position: relative !important;
	padding: 0 0 0 28px !important;
	margin: 0 0 14px !important;
	font-family: var(--cfa-body) !important;
	font-size: clamp(16px, 1.6cqi, 18px) !important;
	line-height: 1.35 !important;
	color: inherit !important;
}

.cfa-ui .cfa-features li::before {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	left: 0 !important;
	top: 0.62em !important;
	width: 14px !important;
	height: 3px !important;
	background: var(--cfa-blue) !important;
	border: 0 !important;
	border-radius: 0 !important;
	transform: none !important;
}

.cfa-ui .cfa-plan-action { margin-top: auto !important; display: flex !important; flex-direction: column; gap: 10px; }

.cfa-ui .cfa-plan-contact {
	font-family: var(--cfa-mono) !important;
	font-size: 11px !important;
	letter-spacing: 0.2em !important;
	text-transform: uppercase !important;
	text-align: center !important;
	color: var(--cfa-muted) !important;
}

.cfa-ui .cfa-plan.is-highlight .cfa-plan-contact { color: var(--cfa-muted-on-dark) !important; }
.cfa-ui .cfa-plan-contact.is-empty { visibility: hidden !important; text-decoration: none !important; }

/* ---------- Buttons ---------- */

.cfa-ui .cfa-btn,
.cfa-ui .login-submit input[type="submit"] {
	appearance: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px;
	width: auto;
	min-height: 52px !important;
	height: auto !important;
	padding: 14px 24px !important;
	margin: 0 !important;
	border: 1px solid var(--cfa-blue) !important;
	border-radius: 0 !important;
	background: var(--cfa-blue) !important;
	color: #FFFFFF !important;
	box-shadow: none !important;
	text-shadow: none !important;
	font-family: var(--cfa-mono) !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	letter-spacing: 0.25em !important;
	line-height: 1.2 !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	text-align: center !important;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.cfa-ui .cfa-btn:hover,
.cfa-ui .login-submit input[type="submit"]:hover { background: var(--cfa-blue-hover) !important; border-color: var(--cfa-blue-hover) !important; color: #FFFFFF !important; }

.cfa-ui .cfa-btn:focus-visible,
.cfa-ui .cfa-method:focus-visible,
.cfa-ui .cfa-toggle button:focus-visible,
.cfa-ui input:focus-visible { outline: 2px solid var(--cfa-blue) !important; outline-offset: 2px !important; }

.cfa-ui .cfa-plan-action .cfa-btn,
.cfa-ui .cfa-btn-block { width: 100% !important; }

.cfa-ui .cfa-btn-outline,
.cfa-ui .cfa-btn-ghost { background: transparent !important; border-color: var(--cfa-ink) !important; color: var(--cfa-ink) !important; }
.cfa-ui .cfa-btn-outline:hover,
.cfa-ui .cfa-btn-ghost:hover { background: var(--cfa-ink) !important; border-color: var(--cfa-ink) !important; color: #FFFFFF !important; }

.cfa-ui .cfa-plan.is-highlight .cfa-btn-outline { border-color: #FFFFFF !important; color: #FFFFFF !important; }
.cfa-ui .cfa-plan.is-highlight .cfa-btn-outline:hover { background: #FFFFFF !important; color: var(--cfa-ink) !important; }

.cfa-ui .cfa-btn.is-disabled,
.cfa-ui .cfa-btn:disabled { opacity: 0.45 !important; cursor: default !important; pointer-events: none; }

.cfa-ui .cfa-btn-link {
	min-height: 0 !important;
	padding: 8px 2px !important;
	border: 0 !important;
	background: none !important;
	color: var(--cfa-muted) !important;
	font-family: var(--cfa-body) !important;
	font-size: 15px !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
}
.cfa-ui .cfa-btn-link:hover { background: none !important; color: var(--cfa-ink) !important; }

.cfa-ui .cfa-actions { display: flex !important; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 20px 0 0 !important; }

/* ---------- Paywall ---------- */

.cfa-teaser {
	-webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
}

.cfa-ui.cfa-paywall {
	display: block !important;
	container-type: inline-size;
	margin: 12px 0 40px !important;
	padding: clamp(22px, 4vw, 44px) clamp(16px, 3.6vw, 40px) clamp(22px, 4vw, 40px) !important;
	background: var(--cfa-paper) !important;
	border: 0 !important;
	border-top: 2px solid var(--cfa-ink) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	clear: both;
}

.cfa-ui .cfa-paywall-body { max-width: 720px; }

.cfa-ui .cfa-links {
	margin: 22px 0 0 !important;
	font-family: var(--cfa-body) !important;
	font-size: 15px !important;
	color: var(--cfa-muted) !important;
}

.cfa-ui .cfa-dot { margin: 0 10px !important; opacity: .6; }

/* ---------- Forms ---------- */

.cfa-ui .cfa-form { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
.cfa-ui .cfa-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; margin: 0 0 4px !important; }
.cfa-ui .cfa-field { display: flex !important; flex-direction: column; gap: 8px; margin: 0 0 16px !important; }
.cfa-ui .cfa-grid .cfa-field { margin: 0 !important; }

.cfa-ui .cfa-field label,
.cfa-ui .login-username label,
.cfa-ui .login-password label {
	display: block !important;
	font-family: var(--cfa-mono) !important;
	font-size: 11px !important;
	letter-spacing: 0.2em !important;
	text-transform: uppercase !important;
	color: var(--cfa-muted) !important;
	line-height: 1.3 !important;
	margin: 0 !important;
}

.cfa-ui .cfa-req { color: var(--cfa-blue) !important; }

.cfa-ui .cfa-field input,
.cfa-ui .cfa-field textarea,
.cfa-ui .login-username input,
.cfa-ui .login-password input {
	display: block !important;
	width: 100% !important;
	min-height: 50px !important;
	height: auto !important;
	margin: 0 !important;
	padding: 12px 14px !important;
	background: #FFFFFF !important;
	border: 1px solid #CFCFCB !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--cfa-ink) !important;
	font-family: var(--cfa-body) !important;
	font-size: 16px !important;
	line-height: 1.3 !important;
	outline: none !important;
}

.cfa-ui .cfa-field input:focus,
.cfa-ui .cfa-field textarea:focus,
.cfa-ui .login-username input:focus,
.cfa-ui .login-password input:focus { border-color: var(--cfa-ink) !important; box-shadow: 0 0 0 1px var(--cfa-ink) !important; }

.cfa-ui .cfa-field input:disabled { background: var(--cfa-paper) !important; color: var(--cfa-muted) !important; }
.cfa-ui .cfa-field input::placeholder { color: #9A9A95 !important; }

.cfa-ui .cfa-check {
	display: flex !important;
	gap: 12px;
	align-items: flex-start;
	margin: 18px 0 !important;
	font-family: var(--cfa-body) !important;
	font-size: 14px !important;
	line-height: 1.45 !important;
	color: var(--cfa-muted) !important;
	cursor: pointer;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

.cfa-ui .cfa-check input[type="checkbox"] {
	appearance: auto !important;
	-webkit-appearance: checkbox !important;
	flex: none;
	width: 18px !important;
	height: 18px !important;
	min-height: 0 !important;
	margin: 1px 0 0 !important;
	padding: 0 !important;
	accent-color: var(--cfa-ink);
}

.cfa-ui .cfa-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

.cfa-ui .cfa-msg { margin: 10px 0 !important; font-family: var(--cfa-body) !important; font-size: 15px !important; }
.cfa-ui .cfa-msg:empty { display: none !important; }
.cfa-ui .cfa-msg.is-err { color: var(--cfa-err) !important; }
.cfa-ui .cfa-msg.is-ok { color: var(--cfa-ok) !important; }

.cfa-ui .login-username,
.cfa-ui .login-password { margin: 0 0 16px !important; }
.cfa-ui .login-remember { margin: 0 0 16px !important; font-size: 14px !important; color: var(--cfa-muted) !important; }
.cfa-ui .login-remember label { font-family: var(--cfa-body) !important; font-size: 14px !important; letter-spacing: 0 !important; text-transform: none !important; }

/* ---------- Boxes: account, sign-up page, download card ---------- */

.cfa-ui.cfa-box,
.cfa-ui .cfa-box,
.cfa-ui.cfa-download {
	display: block;
	container-type: inline-size;
	margin: 0 0 24px !important;
	padding: clamp(22px, 3vw, 36px) clamp(18px, 3vw, 36px) !important;
	background: var(--cfa-card) !important;
	border: 1px solid var(--cfa-line) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.cfa-ui .cfa-box .cfa-heading { font-size: clamp(32px, 5cqi, 48px) !important; margin: 0 0 4px !important; }
.cfa-ui .cfa-box .cfa-sub { margin-top: 6px !important; }

.cfa-ui.cfa-account { max-width: 780px; }

.cfa-ui .cfa-meta { margin: 10px 0 0 !important; font-family: var(--cfa-mono) !important; font-size: 12px !important; letter-spacing: 0.06em !important; color: var(--cfa-muted) !important; }

.cfa-ui .cfa-list { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.cfa-ui .cfa-list li { position: relative !important; padding: 0 0 0 26px !important; margin: 0 0 10px !important; font-size: 16px !important; color: var(--cfa-muted) !important; }
.cfa-ui .cfa-list li::before { content: "" !important; position: absolute !important; left: 0 !important; top: 0.65em !important; width: 14px !important; height: 3px !important; background: var(--cfa-blue) !important; }
.cfa-ui .cfa-list strong { color: var(--cfa-ink) !important; }

.cfa-ui.cfa-download { display: flex !important; gap: 28px; align-items: flex-start; margin: 32px 0 !important; }
.cfa-ui .cfa-dl-cover { flex: 0 0 150px; }
.cfa-ui .cfa-dl-cover img { display: block !important; width: 100% !important; height: auto !important; border: 1px solid var(--cfa-line) !important; border-radius: 0 !important; margin: 0 !important; }
.cfa-ui .cfa-dl-body { flex: 1 1 auto; min-width: 0; }
.cfa-ui .cfa-dl-title {
	font-family: var(--cfa-display) !important;
	font-weight: 700 !important;
	font-size: clamp(28px, 4cqi, 40px) !important;
	line-height: 1 !important;
	text-transform: uppercase !important;
	color: var(--cfa-ink) !important;
	margin: 0 0 6px !important;
}
.cfa-ui.cfa-download .cfa-sub { margin: 4px 0 22px !important; }
.cfa-ui.cfa-download > .cfa-dl-body > .cfa-btn { min-width: 220px; }

/* ---------- In-article notices ---------- */

.cfa-ui.cfa-note {
	display: block !important;
	margin: 0 0 24px !important;
	padding: 12px 16px !important;
	background: var(--cfa-paper) !important;
	border: 0 !important;
	border-left: 3px solid var(--cfa-blue) !important;
	border-radius: 0 !important;
	font-family: var(--cfa-body) !important;
	font-size: 15px !important;
	line-height: 1.45 !important;
	color: var(--cfa-ink) !important;
}

.cfa-ui.cfa-note a { color: var(--cfa-ink) !important; font-weight: 600 !important; }
.cfa-ui.cfa-note-editor { border-left-color: #E3A008 !important; }

.cfa-lock-line a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.cfa-lock-line .cfa-ico { width: 12px; height: 12px; }

.cfa-ui.cfa-inline-lock {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 18px;
	margin: 28px 0 !important;
	padding: 20px 22px !important;
	background: var(--cfa-paper) !important;
	border: 1px solid var(--cfa-line) !important;
	border-left: 3px solid var(--cfa-blue) !important;
	border-radius: 0 !important;
}

.cfa-ui.cfa-inline-lock .cfa-ico { color: var(--cfa-blue) !important; }
.cfa-ui .cfa-inline-text { flex: 1 1 240px; font-family: var(--cfa-body) !important; font-size: 17px !important; color: var(--cfa-ink) !important; }

/* ---------- Payment method chooser + modal ---------- */

.cfa-ui.cfa-modal { position: fixed !important; inset: 0 !important; z-index: 100000 !important; display: flex !important; align-items: center; justify-content: center; padding: 16px !important; margin: 0 !important; background: none !important; }
.cfa-ui.cfa-modal[hidden] { display: none !important; }
.cfa-ui .cfa-modal-backdrop { position: absolute !important; inset: 0 !important; background: rgba(0, 0, 0, 0.55) !important; }

.cfa-ui .cfa-modal-card {
	position: relative !important;
	container-type: inline-size;
	width: 100% !important;
	max-width: 580px !important;
	max-height: calc(100vh - 32px) !important;
	overflow-y: auto !important;
	margin: 0 !important;
	padding: 34px clamp(18px, 4vw, 36px) 28px !important;
	background: var(--cfa-card) !important;
	border: 0 !important;
	border-top: 2px solid var(--cfa-ink) !important;
	border-radius: 0 !important;
	box-shadow: 0 30px 80px -24px rgba(0, 0, 0, 0.45) !important;
	color: var(--cfa-ink) !important;
}

.cfa-ui .cfa-modal-card .cfa-head { margin-bottom: 24px !important; padding-right: 32px !important; }
.cfa-ui .cfa-modal-card .cfa-heading { font-size: clamp(32px, 8cqi, 46px) !important; }
.cfa-ui .cfa-modal-card .cfa-toggle { margin: 0 0 18px !important; }
.cfa-ui .cfa-modal-body > .cfa-sub,
.cfa-ui .cfa-modal-body > div > .cfa-sub { margin: 10px 0 22px !important; }

.cfa-ui .cfa-modal-x {
	position: absolute !important;
	top: 10px !important;
	right: 10px !important;
	width: 40px !important;
	height: 40px !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: var(--cfa-ink) !important;
	font-family: var(--cfa-body) !important;
	font-size: 28px !important;
	line-height: 1 !important;
	cursor: pointer;
}
.cfa-ui .cfa-modal-x:hover { background: var(--cfa-paper) !important; }

.cfa-ui .cfa-methods { display: flex !important; flex-direction: column; gap: 0; margin: 0 0 8px !important; padding: 1px 0 0 !important; }

.cfa-ui .cfa-method {
	appearance: none !important;
	display: flex !important;
	flex-direction: column;
	align-items: flex-start !important;
	gap: 6px;
	width: 100% !important;
	min-height: 0 !important;
	margin: -1px 0 0 !important;
	padding: 18px 20px 18px 22px !important;
	text-align: left !important;
	background: var(--cfa-card) !important;
	border: 1px solid var(--cfa-line) !important;
	border-left: 3px solid var(--cfa-blue) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--cfa-ink) !important;
	cursor: pointer;
	text-transform: none !important;
	letter-spacing: 0 !important;
	transition: background-color .15s ease;
}

.cfa-ui .cfa-method:hover { background: var(--cfa-paper) !important; position: relative; z-index: 1; }
.cfa-ui .cfa-method:disabled { opacity: .55 !important; cursor: progress !important; }

.cfa-ui .cfa-method-label { display: block !important; font-family: var(--cfa-body) !important; font-weight: 600 !important; font-size: 17px !important; line-height: 1.3 !important; color: var(--cfa-ink) !important; }
.cfa-ui .cfa-method-note { display: block !important; font-family: var(--cfa-mono) !important; font-size: 11px !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; line-height: 1.4 !important; color: var(--cfa-muted) !important; }

html.cfa-modal-open { overflow: hidden; }

/* ---------- Toast ---------- */

.cfa-ui.cfa-toast {
	position: fixed !important;
	left: 50% !important;
	bottom: 24px !important;
	z-index: 100001 !important;
	max-width: min(92vw, 540px) !important;
	margin: 0 !important;
	padding: 14px 20px !important;
	background: var(--cfa-ink) !important;
	color: #FFFFFF !important;
	border: 0 !important;
	border-left: 3px solid var(--cfa-blue) !important;
	border-radius: 0 !important;
	font-family: var(--cfa-body) !important;
	font-size: 15px !important;
	line-height: 1.4 !important;
	box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.5) !important;
	transform: translate(-50%, 20px);
	opacity: 0;
	transition: opacity .3s ease, transform .3s ease;
}

.cfa-ui.cfa-toast.is-err { border-left-color: var(--cfa-err) !important; }
.cfa-ui.cfa-toast.is-in { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Small screens ---------- */

@media (max-width: 640px) {
	.cfa-ui .cfa-grid { grid-template-columns: minmax(0, 1fr); }
	.cfa-ui.cfa-download { flex-direction: column; }
	.cfa-ui .cfa-dl-cover { flex-basis: auto; max-width: 160px; }
	.cfa-ui .cfa-head-meta { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.cfa-ui.cfa-toast, .cfa-ui .cfa-btn, .cfa-ui .cfa-method { transition: none !important; }
}