/* ==========================================================================
   Tasarruf Finans design system
   One stylesheet, one component vocabulary, no legacy selector overrides.
   ========================================================================== */

:root {
	--tf-primary-950: #071d32;
	--tf-primary-900: #0b2947;
	--tf-primary-800: #123b61;
	--tf-primary-700: #1e5b8f;
	--tf-primary-100: #dbe9f3;
	--tf-primary-50: #eef5f9;
	--tf-accent-700: #0e725a;
	--tf-accent-600: #128064;
	--tf-accent-500: #199a77;
	--tf-accent-100: #ddf1ea;
	--tf-accent-50: #eff8f5;
	--tf-gold-600: #a9771d;
	--tf-gold-100: #f3e8ce;
	--tf-ink: #142231;
	--tf-text: #314251;
	--tf-muted: #5c6b78;
	--tf-subtle: #7b8994;
	--tf-canvas: #f5f7f6;
	--tf-surface: #ffffff;
	--tf-surface-alt: #eef3f1;
	--tf-border: #dce3e0;
	--tf-border-strong: #bdc9c5;
	--tf-success: #147a55;
	--tf-success-soft: #e5f5ee;
	--tf-warning: #9a6811;
	--tf-warning-soft: #fff5df;
	--tf-error: #b33939;
	--tf-error-soft: #fff0f0;
	--tf-focus: #1976bd;
	--tf-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
	--tf-font-serif: "Iowan Old Style", Baskerville, "Times New Roman", serif;
	--tf-text-xs: 0.75rem;
	--tf-text-sm: 0.875rem;
	--tf-text-base: 1rem;
	--tf-text-md: 1.125rem;
	--tf-text-lg: 1.25rem;
	--tf-text-xl: clamp(1.5rem, 2.3vw, 2rem);
	--tf-text-2xl: clamp(2rem, 4vw, 3.25rem);
	--tf-display: clamp(2.5rem, 6vw, 5rem);
	--tf-leading-tight: 1.08;
	--tf-leading-heading: 1.18;
	--tf-leading-body: 1.68;
	--tf-space-1: 0.25rem;
	--tf-space-2: 0.5rem;
	--tf-space-3: 0.75rem;
	--tf-space-4: 1rem;
	--tf-space-5: 1.25rem;
	--tf-space-6: 1.5rem;
	--tf-space-8: 2rem;
	--tf-space-10: 2.5rem;
	--tf-space-12: 3rem;
	--tf-space-16: 4rem;
	--tf-space-20: 5rem;
	--tf-space-24: 6rem;
	--tf-container: 74rem;
	--tf-reading: 47.5rem;
	--tf-article: 50rem;
	--tf-gutter: clamp(1rem, 4vw, 2.25rem);
	--tf-radius-sm: 0.5rem;
	--tf-radius-md: 0.875rem;
	--tf-radius-lg: 1.25rem;
	--tf-radius-xl: 1.75rem;
	--tf-shadow-sm: 0 4px 18px rgba(11, 41, 71, 0.07);
	--tf-shadow-md: 0 18px 55px rgba(11, 41, 71, 0.11);
	--tf-shadow-focus: 0 0 0 3px rgba(25, 118, 189, 0.3);
	--tf-header-height: 4.75rem;
	--tf-admin-bar-height: 0rem;
	--tf-duration: 180ms;
	--tf-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--tf-z-header: 30;
	--tf-z-menu: 35;
	--tf-z-modal: 50;
}

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--tf-header-height) + 1.5rem);
}

body {
	background: var(--tf-surface);
	color: var(--tf-text);
	font-family: var(--tf-font-sans);
	font-size: var(--tf-text-base);
	line-height: var(--tf-leading-body);
	margin: 0;
	min-width: 20rem;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

body.admin-bar {
	--tf-admin-bar-height: 2rem;
}

@media (max-width: 782px) {
	body.admin-bar {
		--tf-admin-bar-height: 2.875rem;
	}
}

body.nav-open {
	overflow: hidden;
}

::selection {
	background: var(--tf-accent-100);
	color: var(--tf-primary-950);
}

img,
svg,
video {
	display: block;
	height: auto;
	max-width: 100%;
}

iframe {
	border: 0;
	max-width: 100%;
}

button,
input,
select,
textarea {
	font: inherit;
}

button,
[type="button"],
[type="submit"] {
	cursor: pointer;
}

a {
	color: var(--tf-accent-700);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

a:hover {
	color: var(--tf-primary-700);
}

:where(a, button, input, select, textarea, summary):focus-visible {
	border-radius: var(--tf-radius-sm);
	box-shadow: var(--tf-shadow-focus);
	outline: 2px solid var(--tf-focus);
	outline-offset: 2px;
}

:where(h1, h2, h3, h4, h5, h6) {
	color: var(--tf-ink);
	font-weight: 750;
	letter-spacing: -0.03em;
	line-height: var(--tf-leading-heading);
	margin-block: 0 0.75em;
	overflow-wrap: break-word;
}

h1 {
	font-size: var(--tf-display);
}

h2 {
	font-size: var(--tf-text-2xl);
}

h3 {
	font-size: var(--tf-text-xl);
}

h4 {
	font-size: var(--tf-text-lg);
}

p,
ul,
ol,
blockquote,
figure {
	margin-block: 0 1.5rem;
}

ul,
ol {
	padding-inline-start: 1.3rem;
}

strong {
	color: var(--tf-ink);
	font-weight: 720;
}

hr {
	border: 0;
	border-top: 1px solid var(--tf-border);
	margin-block: var(--tf-space-12);
}

[hidden] {
	display: none;
}

.screen-reader-text {
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.screen-reader-text:focus {
	background: var(--tf-surface);
	clip-path: none;
	color: var(--tf-primary-900);
	height: auto;
	left: 1rem;
	padding: 0.75rem 1rem;
	top: 1rem;
	width: auto;
	z-index: calc(var(--tf-z-modal) + 1);
}

.skip-link:focus {
	position: fixed;
}

.container {
	margin-inline: auto;
	max-width: calc(var(--tf-container) + (2 * var(--tf-gutter)));
	padding-inline: var(--tf-gutter);
	width: 100%;
}

.container--reading {
	max-width: calc(var(--tf-reading) + (2 * var(--tf-gutter)));
}

.container--article {
	max-width: calc(var(--tf-article) + (2 * var(--tf-gutter)));
}

.container--wide {
	max-width: calc(78rem + (2 * var(--tf-gutter)));
}

.section {
	padding-block: clamp(4.5rem, 9vw, 7.5rem);
}

.eyebrow {
	align-items: center;
	color: var(--tf-accent-700);
	display: flex;
	font-size: var(--tf-text-xs);
	font-weight: 800;
	gap: 0.65rem;
	letter-spacing: 0.14em;
	line-height: 1.3;
	margin-bottom: var(--tf-space-5);
	text-transform: uppercase;
}

.eyebrow::before {
	background: currentColor;
	content: "";
	height: 2px;
	width: 1.75rem;
}

.eyebrow--light {
	color: #95dfca;
}

.section-heading {
	max-width: 48rem;
}

.section-heading h2 {
	margin-bottom: 0;
}

.section-heading--split {
	align-items: end;
	display: grid;
	gap: var(--tf-space-12);
	grid-template-columns: minmax(0, 1.4fr) minmax(17rem, 0.6fr);
	margin-bottom: clamp(2.5rem, 6vw, 4rem);
	max-width: none;
}

.section-heading--split > p {
	color: var(--tf-muted);
	font-size: var(--tf-text-md);
	margin: 0;
}

.section-heading--center {
	margin-inline: auto;
	margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
	text-align: center;
}

.section-heading--center .eyebrow {
	justify-content: center;
}

.section-heading--compact {
	margin-bottom: var(--tf-space-10);
}

.button-group {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.button-group--center {
	justify-content: center;
}

.button,
:where(.entry-content, .comment-respond) .wp-element-button,
:where(.entry-content, .comment-respond) input[type="submit"] {
	align-items: center;
	background: var(--tf-primary-900);
	border: 1px solid var(--tf-primary-900);
	border-radius: 0.625rem;
	color: var(--tf-surface);
	display: inline-flex;
	font-size: 0.9375rem;
	font-weight: 740;
	gap: 0.65rem;
	justify-content: center;
	line-height: 1;
	min-height: 3.125rem;
	padding: 0.9rem 1.25rem;
	text-decoration: none;
	transition:
		background-color var(--tf-duration) var(--tf-ease),
		border-color var(--tf-duration) var(--tf-ease),
		color var(--tf-duration) var(--tf-ease),
		transform var(--tf-duration) var(--tf-ease);
}

.button svg {
	transition: transform var(--tf-duration) var(--tf-ease);
}

.button:hover,
:where(.entry-content, .comment-respond) .wp-element-button:hover,
:where(.entry-content, .comment-respond) input[type="submit"]:hover {
	background: var(--tf-primary-800);
	border-color: var(--tf-primary-800);
	color: var(--tf-surface);
	transform: translateY(-1px);
}

.button:hover svg {
	transform: translateX(0.2rem);
}

.button--compact {
	min-height: 2.75rem;
	padding: 0.7rem 1rem;
}

.button--accent {
	background: #6ed8b9;
	border-color: #6ed8b9;
	color: var(--tf-primary-950);
}

.button--accent:hover {
	background: #8be3c8;
	border-color: #8be3c8;
	color: var(--tf-primary-950);
}

.button--secondary {
	background: transparent;
	border-color: var(--tf-border-strong);
	color: var(--tf-primary-900);
}

.button--secondary:hover {
	background: var(--tf-primary-50);
	border-color: var(--tf-primary-900);
	color: var(--tf-primary-900);
}

.button--light {
	background: var(--tf-surface);
	border-color: var(--tf-surface);
	color: var(--tf-primary-950);
}

.button--light:hover {
	background: var(--tf-accent-100);
	border-color: var(--tf-accent-100);
	color: var(--tf-primary-950);
}

.button--ghost-light {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.42);
	color: var(--tf-surface);
}

.button--ghost-light:hover {
	background: rgba(255, 255, 255, 0.09);
	border-color: rgba(255, 255, 255, 0.7);
	color: var(--tf-surface);
}

.button[disabled],
.button[aria-disabled="true"],
:where(input, button, select, textarea):disabled {
	cursor: not-allowed;
	opacity: 0.55;
	transform: none;
}

.text-link {
	align-items: center;
	color: inherit;
	display: inline-flex;
	font-size: var(--tf-text-sm);
	font-weight: 720;
	gap: 0.5rem;
	text-decoration: none;
}

.text-link svg {
	transition: transform var(--tf-duration) var(--tf-ease);
}

.text-link:hover {
	color: var(--tf-accent-700);
}

.text-link:hover svg {
	transform: translateX(0.25rem);
}

.text-link--strong {
	color: var(--tf-primary-900);
	font-size: var(--tf-text-base);
}

/* Header and one responsive navigation tree
   ========================================================================== */

.site-header {
	background: rgba(255, 255, 255, 0.97);
	border-bottom: 1px solid var(--tf-border);
	min-height: var(--tf-header-height);
	position: sticky;
	top: var(--tf-admin-bar-height);
	z-index: var(--tf-z-header);
}

.site-header__inner {
	align-items: center;
	display: flex;
	gap: var(--tf-space-8);
	justify-content: space-between;
	min-height: var(--tf-header-height);
}

.site-brand {
	align-items: center;
	color: var(--tf-primary-900);
	display: inline-flex;
	flex: 0 0 auto;
	gap: 0.65rem;
	text-decoration: none;
}

.site-brand:hover {
	color: var(--tf-primary-900);
}

.site-brand__mark {
	align-items: center;
	background: var(--tf-primary-900);
	border-radius: 0.55rem;
	color: var(--tf-surface);
	display: inline-flex;
	font-size: 0.8rem;
	font-weight: 850;
	height: 2.25rem;
	justify-content: center;
	letter-spacing: -0.03em;
	width: 2.25rem;
}

.site-brand__name {
	font-size: 1.22rem;
	font-weight: 800;
	letter-spacing: -0.045em;
}

.site-brand__name span {
	color: var(--tf-accent-700);
}

.site-brand__image {
	display: block;
	height: auto;
	max-height: 3.25rem;
	max-width: 11.5rem;
	object-fit: contain;
	width: auto;
}

.site-navigation {
	align-items: center;
	display: flex;
	flex: 1 1 auto;
	gap: var(--tf-space-8);
	justify-content: flex-end;
}

.menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.menu--primary {
	align-items: center;
	display: flex;
	gap: 0.15rem;
}

.menu--primary > .menu-item {
	align-items: center;
	display: flex;
	position: relative;
}

.menu--primary a {
	border-radius: var(--tf-radius-sm);
	color: var(--tf-text);
	font-size: 0.875rem;
	font-weight: 650;
	padding: 0.75rem 0.62rem;
	text-decoration: none;
	white-space: nowrap;
}

.menu--primary a:hover,
.menu--primary a[aria-current="page"],
.menu--primary .current-menu-ancestor > a {
	color: var(--tf-accent-700);
}

.menu--primary > .menu-item > a[aria-current="page"]::after,
.menu--primary > .current-menu-ancestor > a::after {
	background: var(--tf-accent-600);
	bottom: 0.2rem;
	content: "";
	height: 2px;
	left: 0.62rem;
	position: absolute;
	right: 0.62rem;
}

.submenu-toggle {
	align-items: center;
	background: transparent;
	border: 0;
	color: var(--tf-muted);
	display: inline-flex;
	height: 2rem;
	justify-content: center;
	padding: 0;
	width: 1.75rem;
}

.submenu-toggle svg {
	transition: transform var(--tf-duration) var(--tf-ease);
}

.sub-menu {
	background: var(--tf-surface);
	border: 1px solid var(--tf-border);
	border-radius: var(--tf-radius-md);
	box-shadow: var(--tf-shadow-md);
	display: grid;
	gap: 0.1rem;
	left: 0;
	list-style: none;
	margin: 0;
	min-width: 14rem;
	opacity: 0;
	padding: 0.5rem;
	position: absolute;
	top: calc(100% + 0.5rem);
	transform: translateY(-0.25rem);
	transition:
		opacity var(--tf-duration) var(--tf-ease),
		transform var(--tf-duration) var(--tf-ease),
		visibility var(--tf-duration) var(--tf-ease);
	visibility: hidden;
	z-index: var(--tf-z-menu);
}

.menu--primary > .menu-item:nth-last-child(-n + 2) > .sub-menu {
	left: auto;
	right: 0;
}

.sub-menu .menu-item {
	display: block;
}

.sub-menu a {
	display: block;
	line-height: 1.35;
	padding: 0.7rem 0.8rem;
	white-space: normal;
}

.sub-menu a:hover {
	background: var(--tf-accent-50);
}

.menu-item:hover > .sub-menu,
.menu-item:focus-within > .sub-menu {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
}

.menu-item:hover > .submenu-toggle svg,
.menu-item:focus-within > .submenu-toggle svg {
	transform: rotate(180deg);
}

.site-navigation__actions {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	gap: var(--tf-space-4);
}

.header-login {
	color: var(--tf-primary-900);
	font-size: 0.875rem;
	font-weight: 700;
	text-decoration: none;
}

.nav-toggle {
	align-items: center;
	background: transparent;
	border: 1px solid var(--tf-border-strong);
	border-radius: var(--tf-radius-sm);
	color: var(--tf-primary-900);
	display: none;
	gap: 0.65rem;
	min-height: 2.75rem;
	padding: 0.65rem 0.8rem;
}

.nav-toggle__label {
	font-size: var(--tf-text-sm);
	font-weight: 700;
}

.nav-toggle__icon {
	display: grid;
	gap: 0.22rem;
	width: 1.1rem;
}

.nav-toggle__icon span {
	background: currentColor;
	height: 2px;
	transition:
		opacity var(--tf-duration) var(--tf-ease),
		transform var(--tf-duration) var(--tf-ease);
	width: 100%;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:first-child {
	transform: translateY(0.35rem) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:nth-child(2) {
	opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:last-child {
	transform: translateY(-0.35rem) rotate(-45deg);
}

.navigation-scrim {
	background: rgba(7, 29, 50, 0.56);
	border: 0;
	inset: calc(var(--tf-admin-bar-height) + var(--tf-header-height)) 0 0;
	padding: 0;
	position: fixed;
	width: 100%;
	z-index: calc(var(--tf-z-menu) - 1);
}

/* Home
   ========================================================================== */

.home-hero {
	background: var(--tf-primary-950);
	color: rgba(255, 255, 255, 0.78);
	isolation: isolate;
	overflow: clip;
	position: relative;
}

.home-hero::before,
.home-hero::after {
	border: 1px solid rgba(110, 216, 185, 0.15);
	border-radius: 50%;
	content: "";
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

.home-hero::before {
	height: 32rem;
	right: -16rem;
	top: -15rem;
	width: 32rem;
}

.home-hero::after {
	bottom: -12rem;
	height: 24rem;
	left: -14rem;
	width: 24rem;
}

.home-hero__grid {
	align-items: center;
	display: grid;
	gap: clamp(3rem, 7vw, 7rem);
	grid-template-columns: minmax(0, 1.05fr) minmax(24rem, 0.8fr);
	min-height: min(46rem, calc(100svh - var(--tf-header-height)));
	padding-block: clamp(5rem, 9vw, 8rem);
}

.home-hero__content {
	max-width: 44rem;
}

.home-hero h1 {
	color: var(--tf-surface);
	font-size: clamp(2.75rem, 6.4vw, 5.5rem);
	letter-spacing: -0.055em;
	margin-bottom: var(--tf-space-6);
	max-width: 12ch;
}

.home-hero__lead {
	font-size: clamp(1.05rem, 2vw, 1.28rem);
	line-height: 1.65;
	margin-bottom: var(--tf-space-8);
	max-width: 38rem;
}

.hero-assurances {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	list-style: none;
	margin: var(--tf-space-8) 0 0;
	padding: 0;
}

.hero-assurances li {
	align-items: center;
	display: inline-flex;
	font-size: var(--tf-text-sm);
	gap: 0.5rem;
}

.hero-assurances svg {
	color: #6ed8b9;
	height: 1.1rem;
	width: 1.1rem;
}

.decision-panel {
	background: #102f4d;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--tf-radius-xl);
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
	padding: clamp(1.5rem, 4vw, 2.25rem);
}

.decision-panel__header {
	align-items: start;
	display: flex;
	gap: var(--tf-space-4);
	justify-content: space-between;
}

.decision-panel__header div {
	display: grid;
	gap: 0.2rem;
}

.decision-panel__header div span {
	color: #8fb0c9;
	font-size: var(--tf-text-xs);
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.decision-panel__header strong {
	color: var(--tf-surface);
	font-size: var(--tf-text-lg);
}

.status-dot {
	align-items: center;
	background: rgba(110, 216, 185, 0.12);
	border-radius: 2rem;
	color: #86e1c6;
	display: inline-flex;
	font-size: 0.7rem;
	font-weight: 750;
	gap: 0.4rem;
	padding: 0.35rem 0.55rem;
}

.status-dot::before {
	background: #6ed8b9;
	border-radius: 50%;
	content: "";
	height: 0.4rem;
	width: 0.4rem;
}

.decision-panel__chart {
	align-items: end;
	border-bottom: 1px solid rgba(255, 255, 255, 0.13);
	display: grid;
	gap: 0.65rem;
	grid-template-columns: repeat(6, 1fr);
	height: 12rem;
	margin-block: var(--tf-space-8);
	padding-inline: 0.25rem;
}

.decision-panel__chart span {
	background: #6ed8b9;
	border-radius: 0.35rem 0.35rem 0 0;
	height: var(--bar-size);
	opacity: 0.42;
}

.decision-panel__chart span:nth-child(4),
.decision-panel__chart span:nth-child(6) {
	opacity: 1;
}

.decision-panel__steps {
	display: grid;
	gap: 0.65rem;
}

.decision-panel__steps > div {
	align-items: center;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	display: grid;
	gap: 1rem;
	grid-template-columns: 2rem 1fr;
	padding-block: 0.65rem;
}

.decision-panel__steps > div:last-child {
	border-bottom: 0;
}

.decision-panel__steps span {
	color: #6ed8b9;
	font-family: var(--tf-font-serif);
	font-size: 1.1rem;
}

.decision-panel__steps p {
	color: rgba(255, 255, 255, 0.82);
	font-size: var(--tf-text-sm);
	margin: 0;
}

.trust-strip {
	background: var(--tf-surface);
	border-bottom: 1px solid var(--tf-border);
}

.trust-strip__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.trust-strip p {
	display: grid;
	gap: 0.15rem;
	margin: 0;
	padding: 1.6rem clamp(1rem, 3vw, 2rem);
}

.trust-strip p + p {
	border-left: 1px solid var(--tf-border);
}

.trust-strip strong {
	font-size: var(--tf-text-sm);
}

.trust-strip span {
	color: var(--tf-muted);
	font-size: var(--tf-text-xs);
}

.section--services {
	background: var(--tf-canvas);
}

.service-grid {
	display: grid;
	gap: var(--tf-space-5);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.service-card {
	border: 1px solid transparent;
	border-radius: var(--tf-radius-lg);
	color: var(--tf-text);
	display: grid;
	grid-template-rows: auto auto auto 1fr auto;
	min-height: 22rem;
	padding: clamp(1.5rem, 4vw, 2.25rem);
	text-decoration: none;
	transition:
		border-color var(--tf-duration) var(--tf-ease),
		box-shadow var(--tf-duration) var(--tf-ease),
		transform var(--tf-duration) var(--tf-ease);
}

.service-card:hover {
	border-color: rgba(11, 41, 71, 0.16);
	box-shadow: var(--tf-shadow-sm);
	color: var(--tf-text);
	transform: translateY(-0.25rem);
}

.service-card--navy {
	background: var(--tf-primary-900);
	color: rgba(255, 255, 255, 0.76);
}

.service-card--navy:hover {
	color: rgba(255, 255, 255, 0.84);
}

.service-card--mint {
	background: var(--tf-accent-100);
}

.service-card--sand {
	background: var(--tf-gold-100);
}

.service-card--blue {
	background: var(--tf-primary-100);
}

.service-card__icon {
	align-items: center;
	background: rgba(255, 255, 255, 0.5);
	border-radius: var(--tf-radius-sm);
	color: var(--tf-primary-900);
	display: inline-flex;
	height: 3rem;
	justify-content: center;
	margin-bottom: var(--tf-space-10);
	width: 3rem;
}

.service-card--navy .service-card__icon {
	background: rgba(255, 255, 255, 0.1);
	color: #6ed8b9;
}

.service-card__label {
	color: var(--tf-accent-700);
	font-size: var(--tf-text-xs);
	font-weight: 780;
	letter-spacing: 0.11em;
	margin-bottom: 0.55rem;
	text-transform: uppercase;
}

.service-card--navy .service-card__label {
	color: #8ce0c8;
}

.service-card h3 {
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	margin-bottom: var(--tf-space-4);
}

.service-card--navy h3,
.service-card--navy .text-link {
	color: var(--tf-surface);
}

.service-card p {
	font-size: var(--tf-text-base);
	margin-bottom: var(--tf-space-8);
	max-width: 34rem;
}

.insight-section {
	background: var(--tf-surface);
}

.insight-section__grid {
	align-items: center;
	display: grid;
	gap: clamp(3rem, 8vw, 8rem);
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
}

.insight-visual {
	background: var(--tf-primary-50);
	border: 1px solid var(--tf-primary-100);
	border-radius: var(--tf-radius-xl);
	padding: clamp(1.5rem, 4vw, 2.5rem);
}

.insight-visual__label {
	display: grid;
	gap: 0.15rem;
	margin-bottom: var(--tf-space-10);
}

.insight-visual__label span {
	color: var(--tf-muted);
	font-size: var(--tf-text-xs);
	text-transform: uppercase;
}

.insight-visual__label strong {
	font-size: var(--tf-text-lg);
}

.comparison-row {
	align-items: center;
	display: grid;
	gap: 0.75rem;
	grid-template-columns: 1.5rem 1fr 2.5rem;
	margin-bottom: var(--tf-space-5);
}

.comparison-row > span,
.comparison-row > em {
	color: var(--tf-muted);
	font-size: var(--tf-text-sm);
	font-style: normal;
	font-weight: 700;
}

.comparison-row i {
	background: var(--tf-surface);
	border-radius: 2rem;
	display: block;
	height: 0.75rem;
	overflow: hidden;
}

.comparison-row b {
	background: var(--tf-accent-600);
	border-radius: inherit;
	display: block;
	height: 100%;
	width: var(--value);
}

.insight-visual > p {
	color: var(--tf-subtle);
	font-size: var(--tf-text-xs);
	margin: var(--tf-space-8) 0 0;
}

.insight-copy > p:not(.eyebrow) {
	color: var(--tf-muted);
	font-size: var(--tf-text-md);
	max-width: 38rem;
}

.feature-list {
	display: grid;
	gap: var(--tf-space-5);
	list-style: none;
	margin-block: var(--tf-space-8);
	padding: 0;
}

.feature-list li {
	align-items: start;
	display: grid;
	gap: var(--tf-space-4);
	grid-template-columns: 2rem 1fr;
}

.feature-list > li > svg {
	color: var(--tf-accent-700);
	margin-top: 0.2rem;
}

.feature-list span {
	color: var(--tf-muted);
	display: grid;
	font-size: var(--tf-text-sm);
	gap: 0.1rem;
}

.process-section {
	background: var(--tf-primary-950);
	color: rgba(255, 255, 255, 0.72);
}

.process-section h2,
.process-section h3 {
	color: var(--tf-surface);
}

.process-list {
	counter-reset: steps;
	display: grid;
	gap: 0;
	grid-template-columns: repeat(3, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

.process-list li {
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	display: grid;
	gap: var(--tf-space-8);
	grid-template-columns: 2.5rem 1fr;
	padding: var(--tf-space-8) var(--tf-space-8) 0 0;
}

.process-list li + li {
	border-left: 1px solid rgba(255, 255, 255, 0.18);
	padding-left: var(--tf-space-8);
}

.process-list > li > span {
	color: #6ed8b9;
	font-family: var(--tf-font-serif);
	font-size: var(--tf-text-lg);
}

.process-list h3 {
	font-size: var(--tf-text-lg);
	margin-bottom: 0.5rem;
}

.process-list p {
	font-size: var(--tf-text-sm);
	margin: 0;
}

.latest-section {
	background: var(--tf-canvas);
}

/* Expert profile
   ========================================================================== */

.expert-section {
	background: var(--tf-surface);
}

.expert-section__grid {
	align-items: stretch;
	display: grid;
	gap: clamp(1.25rem, 4vw, 3rem);
	grid-template-columns: minmax(0, 0.85fr) minmax(24rem, 1.15fr);
}

.expert-section__copy {
	align-self: center;
}

.expert-section__copy h2 {
	font-size: clamp(2.25rem, 4.8vw, 4rem);
	margin-bottom: var(--tf-space-6);
}

.expert-section__copy > p:not(.eyebrow) {
	color: var(--tf-muted);
	font-size: var(--tf-text-md);
}

.expert-section__notice {
	border-left: 3px solid var(--tf-accent-600);
	font-size: var(--tf-text-sm);
	margin-top: var(--tf-space-8);
	padding: 0.25rem 0 0.25rem var(--tf-space-5);
}

.expert-profile {
	background: var(--tf-primary-950);
	border-radius: var(--tf-radius-lg);
	color: #d8e5f1;
	display: grid;
	gap: var(--tf-space-6);
	grid-template-columns: 4.5rem minmax(0, 1fr);
	padding: clamp(1.5rem, 4vw, 2.75rem);
}

.expert-profile__avatar {
	align-items: center;
	background: var(--tf-accent-600);
	border-radius: var(--tf-radius-md);
	color: var(--tf-primary-950);
	display: flex;
	font-family: var(--tf-font-serif);
	font-size: 2rem;
	font-weight: 750;
	height: 4.5rem;
	justify-content: center;
	width: 4.5rem;
}

.expert-profile__role {
	color: #6ed8b9;
	display: block;
	font-size: var(--tf-text-xs);
	font-weight: 760;
	letter-spacing: 0.12em;
	margin-bottom: 0.55rem;
	text-transform: uppercase;
}

.expert-profile h3 {
	color: var(--tf-surface);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	margin-bottom: var(--tf-space-3);
}

.expert-profile p {
	color: #c4d3df;
	font-size: var(--tf-text-sm);
	margin: 0;
}

.expert-profile__skills {
	display: grid;
	gap: var(--tf-space-3);
	grid-column: 1 / -1;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.expert-profile__skills li {
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	color: var(--tf-surface);
	font-size: var(--tf-text-sm);
	padding: var(--tf-space-4) 0 0 1.15rem;
	position: relative;
}

.expert-profile__skills li::before {
	background: #6ed8b9;
	border-radius: 50%;
	content: "";
	height: 0.45rem;
	left: 0;
	position: absolute;
	top: 1.35rem;
	width: 0.45rem;
}

.expert-profile .button-group {
	align-items: center;
	grid-column: 1 / -1;
}

.expert-profile__link {
	color: var(--tf-surface);
}

/* Premium calculation studio and canonical tool host
   ========================================================================== */

.tools-page,
.calculator-page {
	background: var(--tf-canvas);
	overflow: clip;
}

.tools-hero,
.calculator-hero {
	background:
		radial-gradient(circle at 88% 10%, rgba(110, 216, 185, 0.18), transparent 28rem),
		radial-gradient(circle at 5% 95%, rgba(30, 91, 143, 0.34), transparent 34rem),
		linear-gradient(142deg, #061a2d 0%, var(--tf-primary-950) 48%, #0b2a43 100%);
	color: var(--tf-surface);
	isolation: isolate;
	min-height: clamp(38rem, 74vh, 48rem);
	padding-block: clamp(2rem, 4vw, 3.5rem) clamp(4.75rem, 9vw, 7.5rem);
	position: relative;
}

.tools-hero::before,
.calculator-hero::before {
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
	background-size: 4rem 4rem;
	content: "";
	inset: 0;
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.78), transparent 92%);
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

.tools-hero .breadcrumbs,
.calculator-hero .breadcrumbs {
	margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.tools-hero .breadcrumbs li,
.tools-hero .breadcrumbs a,
.calculator-hero .breadcrumbs li,
.calculator-hero .breadcrumbs a {
	color: #b8cad5;
}

.tools-hero .breadcrumbs li + li::before,
.calculator-hero .breadcrumbs li + li::before {
	color: rgba(255, 255, 255, 0.32);
}

.tools-hero .breadcrumbs li[aria-current="page"],
.calculator-hero .breadcrumbs li[aria-current="page"] {
	color: #f0f7f8;
}

.tools-hero__grid,
.calculator-hero__grid {
	align-items: center;
	display: grid;
	gap: clamp(3rem, 8vw, 7rem);
	grid-template-columns: minmax(0, 1.08fr) minmax(24rem, 0.92fr);
}

.tools-hero__copy,
.calculator-hero__copy {
	max-width: 44rem;
}

.tools-hero .eyebrow,
.calculator-hero .eyebrow {
	color: #7ce1c3;
}

.tools-hero h1,
.calculator-hero h1 {
	color: var(--tf-surface);
	font-size: clamp(3rem, 6.2vw, 5.7rem);
	letter-spacing: -0.055em;
	line-height: 0.98;
	margin-bottom: clamp(1.5rem, 3vw, 2rem);
	max-width: 12ch;
}

.calculator-hero h1 {
	font-size: clamp(2.8rem, 5.5vw, 5.1rem);
	max-width: 13ch;
}

.tools-hero__copy > p:not(.eyebrow),
.calculator-hero__lead {
	color: #c3d3dc;
	font-size: clamp(1.05rem, 1.7vw, 1.25rem);
	line-height: 1.7;
	margin-bottom: 0;
	max-width: 39rem;
}

.tools-hero__actions,
.calculator-hero__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem;
	margin-top: clamp(1.75rem, 4vw, 2.75rem);
}

.tools-hero__actions .button,
.calculator-hero__actions .button {
	min-height: 3.45rem;
	padding-inline: 1.4rem;
}

.tools-hero__index-link {
	align-items: center;
	color: #e6f2f3;
	display: inline-flex;
	font-size: 0.9rem;
	font-weight: 750;
	gap: 0.6rem;
	text-decoration: none;
}

.tools-hero__index-link:hover {
	color: #8be3c8;
}

.tools-hero__index-link svg {
	width: 1.05rem;
}

.calculator-hero__all-tools {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.3);
	color: var(--tf-surface);
}

.calculator-hero__all-tools:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.6);
	color: var(--tf-surface);
}

.tools-hero__facts {
	display: flex;
	gap: clamp(1.3rem, 4vw, 2.5rem);
	list-style: none;
	margin: clamp(2.5rem, 6vw, 4rem) 0 0;
	padding: 0;
}

.tools-hero__facts li {
	border-left: 1px solid rgba(255, 255, 255, 0.2);
	display: grid;
	gap: 0.2rem;
	padding-left: 1rem;
}

.tools-hero__facts strong {
	color: var(--tf-surface);
	font-size: clamp(1.45rem, 3vw, 2rem);
	line-height: 1;
}

.tools-hero__facts span {
	color: #9fb5c1;
	font-size: 0.75rem;
	font-weight: 700;
}

.tools-hero__board,
.calculator-hero__panel {
	backdrop-filter: blur(18px);
	background:
		linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.055));
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: clamp(1.5rem, 3vw, 2.25rem);
	box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.24);
	padding: clamp(1.25rem, 3vw, 2rem);
	position: relative;
}

.tools-hero__board::after,
.calculator-hero__panel::after {
	border: 1px solid rgba(124, 225, 195, 0.3);
	border-radius: inherit;
	content: "";
	inset: 0.55rem;
	pointer-events: none;
	position: absolute;
}

.tools-hero__board > *,
.calculator-hero__panel > * {
	position: relative;
	z-index: 1;
}

.tools-hero__board-head {
	align-items: flex-start;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	margin-bottom: 1.25rem;
}

.tools-hero__board-head > div {
	display: grid;
	gap: 0.25rem;
}

.tools-hero__board-head > div span {
	color: #8de4cb;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.tools-hero__board-head strong {
	color: var(--tf-surface);
	font-size: 1rem;
}

.tools-hero__board-status {
	align-items: center;
	background: rgba(110, 216, 185, 0.12);
	border: 1px solid rgba(110, 216, 185, 0.2);
	border-radius: 999px;
	color: #bff4e4;
	display: inline-flex;
	font-size: 0.69rem;
	font-weight: 800;
	gap: 0.45rem;
	padding: 0.45rem 0.65rem;
}

.tools-hero__board-status i {
	background: #6ed8b9;
	border-radius: 50%;
	box-shadow: 0 0 0 0.25rem rgba(110, 216, 185, 0.12);
	height: 0.4rem;
	width: 0.4rem;
}

.tools-hero__board-grid {
	display: grid;
	gap: 0.65rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tools-hero__board-grid a {
	align-items: center;
	background: rgba(4, 22, 37, 0.58);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 1rem;
	color: var(--tf-surface);
	display: flex;
	gap: 0.75rem;
	min-height: 5rem;
	padding: 0.85rem;
	text-decoration: none;
	transition: background-color var(--tf-duration) var(--tf-ease), border-color var(--tf-duration) var(--tf-ease), transform var(--tf-duration) var(--tf-ease);
}

.tools-hero__board-grid a:hover {
	background: rgba(14, 114, 90, 0.42);
	border-color: rgba(124, 225, 195, 0.48);
	color: var(--tf-surface);
	transform: translateY(-2px);
}

.tools-hero__board-grid a > span {
	background: #6ed8b9;
	border-radius: 0.75rem;
	color: var(--tf-primary-950);
	display: grid;
	flex: 0 0 2.4rem;
	font-size: 0.85rem;
	font-weight: 850;
	height: 2.4rem;
	place-items: center;
}

.tools-hero__board-grid div {
	display: grid;
	gap: 0.15rem;
	min-width: 0;
}

.tools-hero__board-grid strong {
	color: inherit;
	font-size: 0.79rem;
	line-height: 1.25;
}

.tools-hero__board-grid small {
	color: #9fb6c2;
	font-size: 0.68rem;
}

.tools-hero__board > p {
	align-items: center;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	color: #a8bdc8;
	display: flex;
	font-size: 0.73rem;
	gap: 0.6rem;
	line-height: 1.5;
	margin: 1.2rem 0 0;
	padding: 1rem 0 0;
}

.tools-hero__board > p span {
	color: #73ddbe;
	font-size: 1.1rem;
}

.calculator-hero__panel-head {
	align-items: center;
	display: flex;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.calculator-hero__monogram {
	background: linear-gradient(145deg, #7ce1c3, #4ec9a5);
	border-radius: 1rem;
	box-shadow: 0 0.75rem 2rem rgba(69, 201, 164, 0.2);
	color: var(--tf-primary-950);
	display: grid;
	flex: 0 0 3.6rem;
	font-size: 0.95rem;
	font-weight: 900;
	height: 3.6rem;
	letter-spacing: -0.04em;
	place-items: center;
}

.calculator-hero__panel-head > div {
	display: grid;
	gap: 0.2rem;
}

.calculator-hero__panel-head span:not(.calculator-hero__monogram) {
	color: #8de4cb;
	font-size: 0.67rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.calculator-hero__panel-head strong {
	color: var(--tf-surface);
	font-size: 0.91rem;
}

.calculator-hero__steps {
	display: grid;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.calculator-hero__steps li {
	align-items: flex-start;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	display: grid;
	gap: 1rem;
	grid-template-columns: 2.3rem minmax(0, 1fr);
	padding-block: 1rem;
}

.calculator-hero__steps li > span {
	color: #75ddbf;
	font-size: 0.7rem;
	font-weight: 850;
	padding-top: 0.15rem;
}

.calculator-hero__steps li > div {
	display: grid;
	gap: 0.2rem;
}

.calculator-hero__steps strong {
	color: var(--tf-surface);
	font-size: 0.88rem;
}

.calculator-hero__steps small {
	color: #a9bdc8;
	font-size: 0.76rem;
	line-height: 1.45;
}

.calculator-hero__privacy {
	align-items: center;
	background: rgba(4, 22, 37, 0.52);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 0.9rem;
	color: #a9bdc8;
	display: flex;
	font-size: 0.7rem;
	gap: 0.65rem;
	margin: 0;
	padding: 0.75rem 0.85rem;
}

.calculator-hero__privacy span {
	background: #6ed8b9;
	border-radius: 50%;
	box-shadow: 0 0 0 0.22rem rgba(110, 216, 185, 0.12);
	flex: 0 0 0.4rem;
	height: 0.4rem;
}

.calculator-hero__assurances {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem 1.2rem;
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
}

.calculator-hero__assurances li {
	align-items: center;
	color: #afc3cd;
	display: flex;
	font-size: 0.75rem;
	font-weight: 700;
	gap: 0.5rem;
}

.calculator-hero__assurances li::before {
	background: #70dbbc;
	border-radius: 50%;
	content: "";
	height: 0.4rem;
	width: 0.4rem;
}

.tools-directory {
	background: var(--tf-canvas);
	padding-block: clamp(4.75rem, 9vw, 7.5rem);
	scroll-margin-top: calc(var(--tf-header-height) + 1rem);
}

.tools-directory__heading {
	align-items: end;
	display: grid;
	gap: 2rem;
	grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.65fr);
	margin-bottom: clamp(2.25rem, 5vw, 3.5rem);
}

.tools-directory__heading h2 {
	margin: 0;
}

.tools-directory__heading > p {
	color: var(--tf-muted);
	font-size: 1.05rem;
	margin: 0;
}

.tools-directory__controls {
	align-items: end;
	background: var(--tf-surface);
	border: 1px solid var(--tf-border);
	border-radius: 1.5rem;
	box-shadow: var(--tf-shadow-sm);
	display: grid;
	gap: 1.15rem 1.5rem;
	grid-template-columns: minmax(17rem, 0.9fr) minmax(24rem, 1.1fr) auto;
	margin-bottom: 1.5rem;
	padding: clamp(1rem, 2.5vw, 1.4rem);
}

.tools-search > label,
.tools-directory__filter-label {
	color: var(--tf-primary-900);
	display: block;
	font-size: 0.71rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	margin-bottom: 0.55rem;
	text-transform: uppercase;
}

.tools-search__field {
	position: relative;
}

.tools-search__field svg {
	fill: none;
	height: 1.1rem;
	left: 1rem;
	position: absolute;
	stroke: var(--tf-muted);
	stroke-linecap: round;
	stroke-width: 1.8;
	top: 50%;
	transform: translateY(-50%);
	width: 1.1rem;
}

.tools-search__field input {
	background: var(--tf-canvas);
	border: 1px solid var(--tf-border);
	border-radius: 0.9rem;
	color: var(--tf-ink);
	font-size: 0.92rem;
	height: 3.25rem;
	padding: 0 5.25rem 0 2.75rem;
	width: 100%;
}

.tools-search__field input:focus {
	background: var(--tf-surface);
	border-color: var(--tf-accent-600);
	box-shadow: 0 0 0 3px rgba(18, 128, 100, 0.12);
	outline: 0;
}

.tools-search__field button {
	background: transparent;
	border: 0;
	color: var(--tf-accent-700);
	font-size: 0.71rem;
	font-weight: 800;
	padding: 0.5rem;
	position: absolute;
	right: 0.55rem;
	top: 50%;
	transform: translateY(-50%);
}

.tools-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.tools-filters button {
	background: var(--tf-canvas);
	border: 1px solid var(--tf-border);
	border-radius: 999px;
	color: var(--tf-text);
	font-size: 0.71rem;
	font-weight: 760;
	min-height: 2.65rem;
	padding: 0.55rem 0.82rem;
	transition: background-color var(--tf-duration) var(--tf-ease), border-color var(--tf-duration) var(--tf-ease), color var(--tf-duration) var(--tf-ease);
}

.tools-filters button:hover {
	border-color: var(--tf-accent-600);
	color: var(--tf-accent-700);
}

.tools-filters button[aria-pressed="true"] {
	background: var(--tf-primary-950);
	border-color: var(--tf-primary-950);
	color: var(--tf-surface);
}

.tools-directory__count {
	display: grid;
	gap: 0.1rem;
	justify-items: end;
	margin: 0 0 0.25rem;
	white-space: nowrap;
}

.tools-directory__count strong {
	color: var(--tf-accent-700);
	font-size: 1.4rem;
	line-height: 1;
}

.tools-directory__count span {
	color: var(--tf-muted);
	font-size: 0.68rem;
	font-weight: 700;
}

.tools-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tool-card {
	background:
		linear-gradient(var(--tf-surface), var(--tf-surface)) padding-box,
		linear-gradient(145deg, var(--tf-border), rgba(18, 128, 100, 0.4)) border-box;
	border: 1px solid transparent;
	border-radius: 1.35rem;
	color: var(--tf-text);
	display: flex;
	flex-direction: column;
	min-height: 21rem;
	padding: clamp(1.25rem, 2.6vw, 1.75rem);
	text-decoration: none;
	transition: box-shadow var(--tf-duration) var(--tf-ease), transform var(--tf-duration) var(--tf-ease);
}

.tool-card:hover {
	box-shadow: 0 1.5rem 3.5rem rgba(7, 29, 50, 0.12);
	color: var(--tf-text);
	transform: translateY(-0.32rem);
}

.tool-card[hidden] {
	display: none;
}

.tool-card__topline {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.tool-card__code {
	background: var(--tf-accent-50);
	border: 1px solid #cde9df;
	border-radius: 0.8rem;
	color: var(--tf-accent-700);
	display: grid;
	font-size: 0.71rem;
	font-weight: 900;
	height: 2.6rem;
	letter-spacing: -0.02em;
	place-items: center;
	width: 2.6rem;
}

.tool-card__group {
	color: var(--tf-muted);
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.tool-card h3 {
	font-size: clamp(1.2rem, 2vw, 1.42rem);
	line-height: 1.2;
	margin-bottom: 0.85rem;
}

.tool-card p {
	color: var(--tf-muted);
	font-size: 0.84rem;
	line-height: 1.65;
	margin-bottom: 2rem;
}

.tool-card__action {
	align-items: center;
	border-top: 1px solid var(--tf-border);
	color: var(--tf-primary-900);
	display: flex;
	font-size: 0.76rem;
	font-weight: 800;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 1rem;
}

.tool-card__arrow {
	background: var(--tf-primary-950);
	border-radius: 50%;
	color: var(--tf-surface);
	display: grid;
	height: 2rem;
	place-items: center;
	transition: background-color var(--tf-duration) var(--tf-ease), transform var(--tf-duration) var(--tf-ease);
	width: 2rem;
}

.tool-card:hover .tool-card__arrow {
	background: var(--tf-accent-600);
	transform: translateX(0.2rem);
}

.tool-card__arrow svg {
	width: 0.85rem;
}

.tools-directory__empty {
	background: var(--tf-surface);
	border: 1px dashed var(--tf-border-strong);
	border-radius: 1.35rem;
	margin-top: 1rem;
	padding: 3rem var(--tf-gutter);
	text-align: center;
}

.tools-directory__empty > span {
	color: var(--tf-accent-600);
	display: block;
	font-family: var(--tf-font-serif);
	font-size: 3rem;
	line-height: 1;
}

.tools-directory__empty h3 {
	font-size: 1.2rem;
	margin: 0.85rem 0 0.4rem;
}

.tools-directory__empty p {
	color: var(--tf-muted);
	margin: 0;
}

.tools-method {
	background:
		radial-gradient(circle at 92% 12%, rgba(110, 216, 185, 0.16), transparent 20rem),
		var(--tf-primary-950);
	border-radius: clamp(1.5rem, 3vw, 2.25rem);
	display: grid;
	gap: clamp(2.5rem, 6vw, 5rem);
	grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
	margin-top: clamp(3rem, 7vw, 5.5rem);
	overflow: hidden;
	padding: clamp(1.5rem, 5vw, 4rem);
}

.tools-method__intro .eyebrow {
	color: #7ce1c3;
}

.tools-method__intro h2 {
	color: var(--tf-surface);
	font-size: clamp(2rem, 4vw, 3.3rem);
	margin-bottom: 1.25rem;
}

.tools-method__intro > p:not(.eyebrow) {
	color: #aac0cb;
	font-size: 0.95rem;
	margin: 0;
}

.tools-method__steps {
	display: grid;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tools-method__steps li {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	display: grid;
	gap: 0.4rem 1rem;
	grid-template-columns: 2.75rem minmax(0, 1fr);
	padding-block: 1.2rem;
}

.tools-method__steps li > span {
	color: #75ddbf;
	font-size: 0.72rem;
	font-weight: 850;
	grid-row: 1 / span 2;
}

.tools-method__steps strong {
	color: var(--tf-surface);
	font-size: 0.93rem;
}

.tools-method__steps p {
	color: #9fb5c1;
	font-size: 0.78rem;
	margin: 0;
}

.tool-workspace {
	background:
		linear-gradient(180deg, #eef3f1 0%, var(--tf-canvas) 22rem);
	padding-block: clamp(4.5rem, 8vw, 7rem) clamp(3.5rem, 7vw, 6rem);
	scroll-margin-top: calc(var(--tf-header-height) + 1rem);
}

.tool-workspace__heading {
	align-items: end;
	display: flex;
	gap: 2rem;
	justify-content: space-between;
	margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

.tool-workspace__heading h2 {
	font-size: clamp(1.8rem, 3.5vw, 2.8rem);
	margin: 0;
}

.tool-workspace__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	justify-content: flex-end;
}

.tool-workspace__badges span {
	background: var(--tf-surface);
	border: 1px solid var(--tf-border);
	border-radius: 999px;
	color: var(--tf-muted);
	font-size: 0.68rem;
	font-weight: 750;
	padding: 0.48rem 0.7rem;
}

.calculator-page .tool-workspace__badges > .tf-ral-save-button {
	background: var(--tf-primary-950) !important;
	border: 1px solid var(--tf-primary-950) !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	color: var(--tf-surface) !important;
	font-size: 0.68rem !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	margin: 0 !important;
	min-height: 2.15rem !important;
	padding: 0.55rem 0.85rem !important;
	position: static !important;
	transform: none !important;
	width: auto !important;
}

.calculator-page .tool-workspace__badges > .tf-ral-save-button:hover {
	background: var(--tf-accent-700) !important;
	border-color: var(--tf-accent-700) !important;
}

.tool-workspace .tf-tools-core {
	max-width: 100%;
	min-width: 0;
}

.calculator-note {
	background: var(--tf-surface);
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.calculator-note__inner {
	align-items: center;
	background: var(--tf-primary-50);
	border: 1px solid #d4e5ea;
	border-radius: 1.25rem;
	display: grid;
	gap: 1.25rem;
	grid-template-columns: auto minmax(0, 1fr) auto;
	padding: clamp(1.15rem, 3vw, 1.75rem);
}

.calculator-note__mark {
	background: var(--tf-primary-950);
	border-radius: 50%;
	color: var(--tf-surface);
	display: grid;
	font-family: var(--tf-font-serif);
	font-size: 1.1rem;
	height: 2.6rem;
	place-items: center;
	width: 2.6rem;
}

.calculator-note h2 {
	font-size: 1rem;
	margin: 0 0 0.25rem;
}

.calculator-note p {
	color: var(--tf-muted);
	font-size: 0.78rem;
	line-height: 1.55;
	margin: 0;
}

.calculator-note .text-link {
	color: var(--tf-accent-700);
	font-size: 0.76rem;
	font-weight: 800;
	white-space: nowrap;
}

.system-notice {
	background: var(--tf-surface);
	border: 1px solid var(--tf-border);
	border-left: 4px solid var(--tf-accent-600);
	border-radius: var(--tf-radius-md);
	max-width: 48rem;
	padding: clamp(1.5rem, 4vw, 2.5rem);
}

.system-notice h2 {
	font-size: var(--tf-text-xl);
	margin-bottom: var(--tf-space-4);
}

.system-notice p {
	color: var(--tf-muted);
}

.page-application,
.page-context {
	min-width: 0;
}

.page-context {
	margin-bottom: var(--tf-space-8);
}

/* Protected index login state. The account plugin continues to own the
   authentication markup; the theme owns only these three presentation hooks. */

.page-application:has(.tf-endeks-lock-clean) {
	background: var(--tf-primary-950);
	min-height: clamp(34rem, 70vh, 48rem);
	padding: clamp(2rem, 6vw, 4.5rem) var(--tf-gutter);
}

.page-application .tf-endeks-lock-clean {
	background: var(--tf-accent-500);
	border-radius: var(--tf-radius-xl);
	box-shadow: var(--tf-shadow-md);
	margin: 0 auto;
	max-width: 60rem;
	padding: 1px;
	width: 100%;
}

.tf-endeks-lock-clean .tf-profile-card-clean {
	background: var(--tf-primary-900);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: calc(var(--tf-radius-xl) - 1px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
	color: var(--tf-surface);
	margin: 0;
	min-height: 16rem;
	overflow: hidden;
	padding: clamp(1.5rem, 5vw, 3rem);
	position: relative;
	width: 100%;
}

.tf-endeks-lock-clean .tf-profile-card-clean::after {
	background: rgba(25, 154, 119, 0.14);
	border-radius: 50%;
	bottom: -8rem;
	content: "";
	height: 22rem;
	pointer-events: none;
	position: absolute;
	right: -6rem;
	width: 22rem;
}

.tf-endeks-lock-clean .tf-profile-card-clean > * {
	position: relative;
	z-index: 1;
}

.tf-endeks-lock-clean .tf-profile-card-clean > span,
.tf-endeks-lock-clean .tf-profile-card-clean .tf-kicker,
.tf-endeks-lock-clean .tf-profile-card-clean [class*="kicker"] {
	color: #6ed8b9;
	font-size: var(--tf-text-xs);
	font-weight: 760;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.tf-endeks-lock-clean .tf-profile-card-clean :where(h1, h2, h3) {
	color: var(--tf-surface);
	font-size: clamp(2.15rem, 5vw, 3.75rem);
	line-height: var(--tf-leading-tight);
	max-width: 17ch;
}

.tf-endeks-lock-clean .tf-profile-card-clean p {
	color: #c9d8e3;
	font-size: var(--tf-text-base);
	max-width: 44rem;
}

.tf-endeks-lock-clean .tf-profile-actions-clean {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tf-space-3);
	margin-top: var(--tf-space-8);
}

.tf-endeks-lock-clean .tf-profile-actions-clean :where(a, button) {
	align-items: center;
	background: var(--tf-accent-600);
	border: 1px solid transparent;
	border-radius: 999px;
	box-shadow: var(--tf-shadow-sm);
	color: var(--tf-surface);
	display: inline-flex;
	font-size: var(--tf-text-sm);
	font-weight: 720;
	justify-content: center;
	min-height: 2.875rem;
	padding: 0.7rem 1.35rem;
	text-align: center;
	text-decoration: none;
}

.tf-endeks-lock-clean .tf-profile-actions-clean :where(a, button):hover {
	background: var(--tf-accent-500);
	color: var(--tf-surface);
}

.tf-endeks-lock-clean .tf-profile-actions-clean :where(a, button):not(:first-child) {
	background: rgba(255, 255, 255, 0.09);
	border-color: rgba(255, 255, 255, 0.2);
}

.tf-endeks-lock-clean .tf-profile-actions-clean :where(a, button):not(:first-child):hover {
	background: rgba(255, 255, 255, 0.16);
}

/* Premium Endeks access state
   ========================================================================== */

.index-gate {
	background: var(--tf-surface);
	overflow: clip;
}

.index-gate__hero {
	background:
		radial-gradient(circle at 82% 14%, rgba(110, 216, 185, 0.18), transparent 25rem),
		radial-gradient(circle at 5% 100%, rgba(30, 91, 143, 0.38), transparent 32rem),
		var(--tf-primary-950);
	color: rgba(255, 255, 255, 0.76);
	overflow: hidden;
	padding-block: clamp(2rem, 4vw, 3rem) clamp(4.5rem, 9vw, 7.5rem);
	position: relative;
}

.index-gate__hero::after {
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 50%;
	content: "";
	height: clamp(21rem, 40vw, 38rem);
	pointer-events: none;
	position: absolute;
	right: clamp(-16rem, -12vw, -6rem);
	top: clamp(-15rem, -11vw, -5rem);
	width: clamp(21rem, 40vw, 38rem);
}

.index-gate__hero > .container {
	position: relative;
	z-index: 1;
}

.index-gate__hero .breadcrumbs {
	margin-bottom: clamp(3rem, 7vw, 5.25rem);
}

.index-gate__hero .breadcrumbs li,
.index-gate__hero .breadcrumbs a {
	color: rgba(255, 255, 255, 0.62);
}

.index-gate__hero .breadcrumbs li + li::before {
	color: rgba(255, 255, 255, 0.26);
}

.index-gate__hero .breadcrumbs li[aria-current="page"] {
	color: #a4e6d3;
}

.index-gate__grid {
	align-items: center;
	display: grid;
	gap: clamp(3rem, 8vw, 7rem);
	grid-template-columns: minmax(0, 1.04fr) minmax(23rem, 0.96fr);
}

.index-gate__content h1 {
	color: var(--tf-surface);
	font-size: clamp(2.85rem, 6.1vw, 5.6rem);
	letter-spacing: -0.055em;
	line-height: 0.98;
	margin-bottom: var(--tf-space-6);
	max-width: 10.5ch;
	text-wrap: balance;
}

.index-gate__lead {
	color: rgba(255, 255, 255, 0.75);
	font-size: clamp(1.05rem, 1.65vw, 1.22rem);
	margin-bottom: var(--tf-space-6);
	max-width: 42rem;
}

.index-gate__assurances {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem 1.1rem;
	list-style: none;
	margin: var(--tf-space-6) 0 var(--tf-space-4);
	padding: 0;
}

.index-gate__assurances li {
	align-items: center;
	color: rgba(255, 255, 255, 0.76);
	display: inline-flex;
	font-size: var(--tf-text-sm);
	font-weight: 650;
	gap: 0.55rem;
}

.index-gate__assurances li::before {
	background: #6ed8b9;
	border-radius: 50%;
	box-shadow: 0 0 0 0.28rem rgba(110, 216, 185, 0.12);
	content: "";
	height: 0.45rem;
	width: 0.45rem;
}

.index-gate__access-note {
	color: rgba(255, 255, 255, 0.52);
	font-size: var(--tf-text-xs);
	margin: var(--tf-space-4) 0 0;
	max-width: 38rem;
}

.index-gate__preview {
	backdrop-filter: blur(1.3rem);
	background: rgba(255, 255, 255, 0.075);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--tf-radius-xl);
	box-shadow: 0 1.75rem 5rem rgba(0, 0, 0, 0.22);
	overflow: hidden;
}

.index-gate__preview-head {
	align-items: center;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	display: flex;
	gap: var(--tf-space-4);
	justify-content: space-between;
	padding: var(--tf-space-6) clamp(1.35rem, 3vw, 2rem);
}

.index-gate__preview-head > div {
	display: grid;
	gap: 0.15rem;
}

.index-gate__preview-head > div span {
	color: #8ce0c8;
	font-size: var(--tf-text-xs);
	font-weight: 780;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.index-gate__preview-head strong {
	color: var(--tf-surface);
	font-size: var(--tf-text-lg);
}

.index-gate__member-badge {
	background: rgba(110, 216, 185, 0.13);
	border: 1px solid rgba(140, 224, 200, 0.28);
	border-radius: 999px;
	color: #a4e6d3;
	font-size: var(--tf-text-xs);
	font-weight: 750;
	padding: 0.45rem 0.7rem;
	white-space: nowrap;
}

.index-gate__gauge {
	background: rgba(255, 255, 255, 0.045);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	padding: clamp(1.35rem, 3vw, 2rem);
}

.index-gate__gauge-copy {
	display: grid;
	gap: 0.15rem;
}

.index-gate__gauge-copy span {
	color: rgba(255, 255, 255, 0.74);
	font-size: var(--tf-text-xs);
	font-weight: 720;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.index-gate__gauge-copy strong {
	color: var(--tf-surface);
	font-size: clamp(1.35rem, 2.8vw, 1.9rem);
}

.index-gate__gauge-line {
	background: linear-gradient(90deg, #56c7a7, #d9bc72 50%, #d98c63);
	border-radius: 999px;
	height: 0.5rem;
	margin-top: var(--tf-space-6);
	position: relative;
}

.index-gate__gauge-line span {
	background: var(--tf-surface);
	border: 0.3rem solid var(--tf-primary-900);
	border-radius: 50%;
	box-shadow: 0 0.45rem 1.3rem rgba(0, 0, 0, 0.3);
	height: 1.45rem;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 1.45rem;
}

.index-gate__gauge-labels {
	color: rgba(255, 255, 255, 0.7);
	display: flex;
	font-size: 0.65rem;
	font-weight: 700;
	justify-content: space-between;
	letter-spacing: 0.04em;
	margin-top: var(--tf-space-3);
	text-transform: uppercase;
}

.index-gate__preview-list {
	list-style: none;
	margin: 0;
	padding: 0.35rem clamp(1.35rem, 3vw, 2rem);
}

.index-gate__preview-list li {
	align-items: center;
	display: grid;
	gap: var(--tf-space-4);
	grid-template-columns: 2.2rem minmax(0, 1fr);
	padding-block: var(--tf-space-4);
}

.index-gate__preview-list li + li {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.index-gate__preview-list span {
	align-items: center;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 50%;
	color: #8ce0c8;
	display: inline-flex;
	font-size: 0.68rem;
	font-weight: 800;
	height: 2.2rem;
	justify-content: center;
	width: 2.2rem;
}

.index-gate__preview-list strong {
	color: rgba(255, 255, 255, 0.88);
	font-size: var(--tf-text-sm);
}

.index-gate__features {
	background: var(--tf-canvas);
}

.index-gate__heading {
	align-items: end;
	display: grid;
	gap: var(--tf-space-12);
	grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.65fr);
	margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.index-gate__heading h2 {
	margin-bottom: 0;
	max-width: 18ch;
}

.index-gate__heading > p {
	color: var(--tf-muted);
	font-size: var(--tf-text-md);
	margin: 0;
}

.index-gate__feature-grid {
	display: grid;
	gap: var(--tf-space-5);
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.index-gate__feature-grid article {
	background: var(--tf-surface);
	border: 1px solid var(--tf-border);
	border-radius: var(--tf-radius-lg);
	box-shadow: var(--tf-shadow-sm);
	min-width: 0;
	padding: clamp(1.35rem, 3vw, 2rem);
}

.index-gate__feature-grid article > span {
	align-items: center;
	background: var(--tf-accent-100);
	border-radius: 50%;
	color: var(--tf-accent-700);
	display: inline-flex;
	font-size: var(--tf-text-xs);
	font-weight: 800;
	height: 2.5rem;
	justify-content: center;
	margin-bottom: var(--tf-space-8);
	width: 2.5rem;
}

.index-gate__feature-grid h3 {
	font-size: var(--tf-text-lg);
	margin-bottom: var(--tf-space-3);
}

.index-gate__feature-grid p {
	color: var(--tf-muted);
	font-size: var(--tf-text-sm);
	margin: 0;
}

@media (max-width: 62rem) {
	.index-gate__grid {
		grid-template-columns: 1fr;
	}

	.index-gate__content {
		max-width: 48rem;
	}

	.index-gate__preview {
		max-width: 42rem;
	}

	.index-gate__feature-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 44rem) {
	.index-gate__hero {
		padding-bottom: 4rem;
	}

	.index-gate__hero .breadcrumbs {
		margin-bottom: 2.5rem;
	}

	.index-gate__content h1 {
		font-size: clamp(2.55rem, 13vw, 4rem);
	}

	.index-gate__preview-head {
		align-items: flex-start;
		flex-direction: column;
	}

	.index-gate__gauge-labels {
		font-size: 0.56rem;
		letter-spacing: 0;
	}

	.index-gate__heading,
	.index-gate__feature-grid {
		grid-template-columns: 1fr;
	}

	.index-gate__heading {
		gap: var(--tf-space-5);
	}
}

/* Premium Endeks application
   ========================================================================== */

.index-app {
	background: var(--tf-surface);
	overflow: clip;
}

.index-hero {
	background:
		radial-gradient(circle at 82% 8%, rgba(110, 216, 185, 0.18), transparent 25rem),
		radial-gradient(circle at 4% 100%, rgba(30, 91, 143, 0.38), transparent 34rem),
		var(--tf-primary-950);
	color: rgba(255, 255, 255, 0.76);
	overflow: hidden;
	padding-block: clamp(2rem, 4vw, 3rem) clamp(4.75rem, 9vw, 7.75rem);
	position: relative;
}

.index-hero::after {
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 50%;
	content: "";
	height: clamp(22rem, 42vw, 40rem);
	pointer-events: none;
	position: absolute;
	right: clamp(-17rem, -12vw, -6rem);
	top: clamp(-16rem, -11vw, -5rem);
	width: clamp(22rem, 42vw, 40rem);
}

.index-hero > .container {
	position: relative;
	z-index: 1;
}

.index-hero .breadcrumbs {
	margin-bottom: clamp(1.75rem, 4vw, 3rem);
}

.index-hero .breadcrumbs li,
.index-hero .breadcrumbs a {
	color: rgba(255, 255, 255, 0.62);
}

.index-hero .breadcrumbs li + li::before {
	color: rgba(255, 255, 255, 0.26);
}

.index-hero .breadcrumbs li[aria-current="page"] {
	color: #a4e6d3;
}

html body .index-app .index-metals-bar {
	display: flex !important;
	gap: var(--tf-space-2) !important;
	justify-content: flex-end !important;
	margin: 0 0 clamp(2.5rem, 6vw, 4.5rem) !important;
	padding: 0 !important;
	width: auto !important;
}

html body .index-app .index-metals-bar a {
	align-items: center;
	backdrop-filter: blur(0.8rem);
	background: rgba(255, 255, 255, 0.075);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	box-shadow: none;
	color: rgba(255, 255, 255, 0.8);
	display: inline-flex;
	font-size: var(--tf-text-xs);
	font-weight: 680;
	gap: 0.45rem;
	min-height: 2.75rem;
	padding: 0.55rem 0.85rem;
	text-decoration: none;
	transition:
		background-color var(--tf-duration) var(--tf-ease),
		border-color var(--tf-duration) var(--tf-ease),
		transform var(--tf-duration) var(--tf-ease);
}

html body .index-app .index-metals-bar a:hover {
	background: rgba(255, 255, 255, 0.13);
	border-color: rgba(140, 224, 200, 0.42);
	color: var(--tf-surface);
	transform: translateY(-1px);
}

html body .index-app .index-metals-bar strong {
	color: #8ce0c8;
	font-size: var(--tf-text-sm);
}

.index-hero__grid {
	align-items: center;
	display: grid;
	gap: clamp(3rem, 8vw, 7rem);
	grid-template-columns: minmax(0, 1.03fr) minmax(24rem, 0.97fr);
}

.index-hero__content h1 {
	color: var(--tf-surface);
	font-size: clamp(2.9rem, 6.2vw, 5.7rem);
	letter-spacing: -0.055em;
	line-height: 0.98;
	margin-bottom: var(--tf-space-6);
	max-width: 10.5ch;
	text-wrap: balance;
}

.index-hero__lead {
	color: rgba(255, 255, 255, 0.74);
	font-size: clamp(1.05rem, 1.65vw, 1.22rem);
	margin-bottom: var(--tf-space-8);
	max-width: 42rem;
}

.index-score {
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid rgba(255, 255, 255, 0.72);
	border-radius: var(--tf-radius-xl);
	box-shadow: 0 1.8rem 5rem rgba(0, 0, 0, 0.23);
	color: var(--tf-text);
	overflow: hidden;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	position: relative;
}

.index-score::before {
	background: linear-gradient(90deg, #61cfb0, #b4dfd2);
	content: "";
	height: 0.3rem;
	inset: 0 0 auto;
	position: absolute;
}

.index-score__head {
	align-items: end;
	display: flex;
	gap: var(--tf-space-6);
	justify-content: space-between;
	margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.index-score__head > div {
	min-width: 0;
}

.index-score__head span {
	color: var(--tf-accent-700);
	display: block;
	font-size: var(--tf-text-xs);
	font-weight: 780;
	letter-spacing: 0.11em;
	margin-bottom: var(--tf-space-2);
	text-transform: uppercase;
}

.index-score__head h2 {
	font-size: clamp(1.2rem, 2vw, 1.55rem);
	margin: 0;
}

.index-score__pill {
	background: var(--tf-accent-50);
	border: 1px solid var(--tf-accent-100);
	border-radius: 999px;
	color: var(--tf-accent-700);
	display: inline-flex;
	font-size: var(--tf-text-xs);
	font-weight: 720;
	margin-top: var(--tf-space-3);
	padding: 0.35rem 0.6rem;
}

.index-score__value {
	align-items: flex-end;
	display: grid;
	justify-items: end;
}

.index-score__value > strong {
	color: var(--tf-primary-950);
	font-size: clamp(3.4rem, 7vw, 5.6rem);
	font-weight: 790;
	letter-spacing: -0.07em;
	line-height: 0.8;
	white-space: nowrap;
}

.index-score__meter {
	background: linear-gradient(90deg, #58c8a8, #d7bd72 50%, #d98a63);
	border-radius: 999px;
	height: 0.7rem;
	position: relative;
}

.index-score__dot {
	background: var(--tf-surface);
	border: 0.38rem solid var(--tf-primary-900);
	border-radius: 50%;
	box-shadow: 0 0.55rem 1.4rem rgba(11, 41, 71, 0.24);
	height: 1.85rem;
	left: clamp(0%, var(--index-position), 100%);
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 1.85rem;
}

.index-score__scale {
	color: var(--tf-muted);
	display: grid;
	font-size: 0.65rem;
	font-weight: 760;
	gap: var(--tf-space-2);
	grid-template-columns: 1fr 1fr 1fr;
	letter-spacing: 0.045em;
	margin-top: var(--tf-space-4);
	text-transform: uppercase;
}

.index-score__scale span:nth-child(2) {
	text-align: center;
}

.index-score__scale span:last-child {
	text-align: right;
}

.index-score > p {
	border-top: 1px solid var(--tf-border);
	color: var(--tf-muted);
	font-size: var(--tf-text-xs);
	margin: var(--tf-space-6) 0 0;
	padding-top: var(--tf-space-5);
}

.index-truth {
	background: var(--tf-surface);
	border-bottom: 1px solid var(--tf-border);
}

.index-truth__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: var(--tf-space-5) 0;
}

.index-truth__list li {
	align-items: center;
	display: grid;
	gap: var(--tf-space-3);
	grid-template-columns: 2.75rem minmax(0, 1fr);
	min-width: 0;
	padding: var(--tf-space-4) clamp(1rem, 3vw, 2.25rem);
}

.index-truth__list li + li {
	border-left: 1px solid var(--tf-border);
}

.index-truth__list svg {
	background: var(--tf-accent-100);
	border-radius: 50%;
	color: var(--tf-accent-700);
	height: 2.75rem;
	padding: 0.7rem;
	width: 2.75rem;
}

.index-truth__list strong,
.index-truth__list span {
	display: block;
}

.index-truth__list strong {
	font-size: var(--tf-text-sm);
	margin-bottom: 0.12rem;
}

.index-truth__list span {
	color: var(--tf-muted);
	font-size: var(--tf-text-xs);
	line-height: 1.45;
}

.index-heading {
	align-items: end;
	display: grid;
	gap: var(--tf-space-12);
	grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.65fr);
	margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.index-heading h2 {
	margin-bottom: 0;
	max-width: 19ch;
	text-wrap: balance;
}

.index-heading > p {
	color: var(--tf-muted);
	font-size: var(--tf-text-md);
	margin: 0;
}

.index-heading--center {
	display: block;
	margin-inline: auto;
	max-width: 48rem;
	text-align: center;
}

.index-heading--center .eyebrow {
	justify-content: center;
}

.index-heading--center h2 {
	margin-inline: auto;
	max-width: 20ch;
}

.index-metrics {
	background: var(--tf-canvas);
}

.index-metrics__grid {
	display: grid;
	gap: var(--tf-space-4);
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.index-metric {
	background: var(--tf-surface);
	border: 1px solid var(--tf-border);
	border-radius: var(--tf-radius-lg);
	box-shadow: var(--tf-shadow-sm);
	min-width: 0;
	padding: clamp(1.35rem, 3vw, 2rem);
	position: relative;
}

.index-metric::before {
	background: var(--tf-accent-500);
	border-radius: 999px;
	content: "";
	height: 0.28rem;
	left: clamp(1.35rem, 3vw, 2rem);
	position: absolute;
	top: 0;
	width: 2.5rem;
}

.index-metric > span {
	color: var(--tf-accent-700);
	display: block;
	font-size: var(--tf-text-xs);
	font-weight: 780;
	letter-spacing: 0.1em;
	margin-bottom: var(--tf-space-6);
	text-transform: uppercase;
}

.index-metric > strong {
	color: var(--tf-primary-950);
	display: block;
	font-size: clamp(1.75rem, 3vw, 2.35rem);
	letter-spacing: -0.045em;
	line-height: 1;
	overflow-wrap: anywhere;
}

.index-metric h3 {
	color: var(--tf-muted);
	font-size: var(--tf-text-sm);
	letter-spacing: 0;
	margin: var(--tf-space-3) 0 0;
}

.index-market {
	background: var(--tf-surface);
}

.index-market__grid {
	display: grid;
	gap: var(--tf-space-4);
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.index-market-card {
	background: var(--tf-surface);
	border: 1px solid var(--tf-border);
	border-radius: var(--tf-radius-lg);
	box-shadow: var(--tf-shadow-sm);
	color: var(--tf-text);
	display: grid;
	grid-template-rows: auto auto auto 1fr;
	min-height: 14.25rem;
	min-width: 0;
	overflow: hidden;
	padding: clamp(1.25rem, 2.6vw, 1.75rem);
	position: relative;
	text-decoration: none;
	transition:
		border-color var(--tf-duration) var(--tf-ease),
		box-shadow var(--tf-duration) var(--tf-ease),
		transform var(--tf-duration) var(--tf-ease);
}

.index-market-card::before {
	background: var(--tf-border-strong);
	content: "";
	height: 0.25rem;
	inset: 0 0 auto;
	position: absolute;
}

.index-market-card--up::before {
	background: var(--tf-accent-500);
}

.index-market-card--down::before {
	background: #bd6262;
}

.index-market-card:hover {
	border-color: var(--tf-border-strong);
	box-shadow: var(--tf-shadow-md);
	color: var(--tf-text);
	transform: translateY(-0.2rem);
}

.index-market-card > span:first-child {
	color: var(--tf-muted);
	font-size: var(--tf-text-xs);
	font-weight: 780;
	letter-spacing: 0.1em;
	overflow: hidden;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

.index-market-card > strong {
	color: var(--tf-primary-950);
	font-size: clamp(1.75rem, 3vw, 2.35rem);
	letter-spacing: -0.045em;
	line-height: 1;
	margin-top: var(--tf-space-5);
	overflow-wrap: anywhere;
}

.index-market-card > small {
	align-items: center;
	background: var(--tf-surface-alt);
	border-radius: 999px;
	color: var(--tf-muted);
	display: inline-flex;
	font-size: var(--tf-text-xs);
	font-weight: 760;
	justify-self: start;
	margin-top: var(--tf-space-3);
	padding: 0.35rem 0.55rem;
}

.index-market-card--up > small {
	background: var(--tf-success-soft);
	color: var(--tf-success);
}

.index-market-card--down > small {
	background: var(--tf-error-soft);
	color: var(--tf-error);
}

.index-market-card__link {
	align-items: end;
	color: var(--tf-accent-700);
	display: flex;
	font-size: var(--tf-text-sm);
	font-weight: 720;
	gap: 0.45rem;
	margin-top: var(--tf-space-8);
}

.index-market-card__link svg {
	height: 1rem;
	width: 1rem;
}

.index-method {
	background:
		linear-gradient(rgba(25, 154, 119, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(25, 154, 119, 0.045) 1px, transparent 1px),
		var(--tf-accent-50);
	background-size: 2.25rem 2.25rem;
	border-block: 1px solid var(--tf-border);
}

.index-method__steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.index-method__steps li {
	display: grid;
	gap: var(--tf-space-5);
	grid-template-columns: 2.75rem minmax(0, 1fr);
	min-width: 0;
	padding: var(--tf-space-5) clamp(1rem, 3vw, 2.25rem);
}

.index-method__steps li + li {
	border-left: 1px solid var(--tf-border);
}

.index-method__steps > li > span {
	align-items: center;
	background: var(--tf-primary-900);
	border-radius: 50%;
	color: var(--tf-surface);
	display: inline-flex;
	font-size: var(--tf-text-xs);
	font-weight: 800;
	height: 2.75rem;
	justify-content: center;
	width: 2.75rem;
}

.index-method__steps h3 {
	font-size: var(--tf-text-lg);
	margin-bottom: var(--tf-space-3);
}

.index-method__steps p {
	color: var(--tf-muted);
	font-size: var(--tf-text-sm);
	margin: 0;
}

.index-stock-summary {
	background:
		radial-gradient(circle at 85% 12%, rgba(110, 216, 185, 0.16), transparent 25rem),
		var(--tf-primary-950);
	color: rgba(255, 255, 255, 0.72);
}

.index-stock-summary .eyebrow {
	color: #8ce0c8;
}

.index-stock-summary .index-heading h2 {
	color: var(--tf-surface);
}

.index-stock-summary .index-heading > .text-link {
	align-items: center;
	color: #a4e6d3;
	display: inline-flex;
	justify-self: end;
	min-height: 2.75rem;
	padding-block: 0.4rem;
}

.index-stock-summary__grid {
	display: grid;
	gap: var(--tf-space-3);
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.index-stock-card {
	background: rgba(255, 255, 255, 0.075);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--tf-radius-md);
	color: var(--tf-surface);
	display: grid;
	min-height: 9rem;
	min-width: 0;
	padding: var(--tf-space-5);
	text-decoration: none;
	transition:
		background-color var(--tf-duration) var(--tf-ease),
		border-color var(--tf-duration) var(--tf-ease),
		transform var(--tf-duration) var(--tf-ease);
}

.index-stock-card:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(140, 224, 200, 0.42);
	color: var(--tf-surface);
	transform: translateY(-0.15rem);
}

.index-stock-card > span {
	color: #a4e6d3;
	font-size: var(--tf-text-xs);
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.index-stock-card > strong {
	color: var(--tf-surface);
	font-size: clamp(1.5rem, 3vw, 2rem);
	letter-spacing: -0.04em;
	line-height: 1;
	margin-top: var(--tf-space-4);
}

.index-stock-card > small {
	color: rgba(255, 255, 255, 0.65);
	font-size: var(--tf-text-xs);
	font-weight: 760;
	margin-top: var(--tf-space-3);
}

.index-stock-card--up > small {
	color: #8ce0c8;
}

.index-stock-card--down > small {
	color: #f0abab;
}

.index-atlas {
	background: var(--tf-surface);
}

.index-atlas [hidden] {
	display: none !important;
}

.index-atlas__toolbar {
	align-items: end;
	background: var(--tf-canvas);
	border: 1px solid var(--tf-border);
	border-radius: var(--tf-radius-lg);
	display: grid;
	gap: var(--tf-space-6);
	grid-template-columns: minmax(0, 1fr) auto;
	margin-bottom: var(--tf-space-6);
	padding: var(--tf-space-5);
}

.index-atlas__search {
	color: var(--tf-ink);
	display: grid;
	font-size: var(--tf-text-sm);
	font-weight: 720;
	gap: var(--tf-space-2);
	margin: 0;
	min-width: 0;
	width: 100%;
}

.index-atlas__search-field {
	display: block;
	min-width: 0;
	position: relative;
	width: 100%;
}

.index-atlas__search-field > svg {
	color: var(--tf-muted);
	height: 1.15rem;
	left: 1rem;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 1.15rem;
	z-index: 1;
}

.index-atlas__search input {
	background: var(--tf-surface);
	border: 1px solid var(--tf-border-strong);
	border-radius: var(--tf-radius-sm);
	color: var(--tf-ink);
	font-size: 1rem;
	min-height: 3.25rem;
	min-width: 0;
	padding: 0.8rem 3.5rem 0.8rem 3rem;
	width: 100%;
}

.index-atlas__search input:focus {
	border-color: var(--tf-focus);
	box-shadow: var(--tf-shadow-focus);
	outline: 0;
}

.index-atlas__input-clear {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 999px;
	color: var(--tf-primary-800);
	display: inline-flex;
	font-size: 1.45rem;
	height: 2.35rem;
	justify-content: center;
	line-height: 1;
	padding: 0;
	position: absolute;
	right: 0.5rem;
	top: 50%;
	transform: translateY(-50%);
	width: 2.35rem;
}

.index-atlas__input-clear:hover {
	background: var(--tf-primary-50);
	color: var(--tf-primary-950);
}

.index-atlas__input-clear:focus-visible {
	box-shadow: var(--tf-shadow-focus);
	outline: 0;
}

.index-atlas__search > small {
	color: var(--tf-muted);
	font-size: var(--tf-text-xs);
	font-weight: 520;
}

.index-atlas__status {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--tf-space-4);
	justify-content: flex-end;
}

.index-atlas__status p {
	color: var(--tf-muted);
	font-size: var(--tf-text-sm);
	margin: 0;
}

.index-atlas__grid {
	display: grid;
	gap: var(--tf-space-3);
	grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}

.index-atlas-card {
	background: var(--tf-surface);
	border: 1px solid var(--tf-border);
	border-radius: var(--tf-radius-md);
	box-shadow: var(--tf-shadow-sm);
	color: var(--tf-text);
	display: grid;
	min-height: 10.5rem;
	min-width: 0;
	padding: var(--tf-space-5);
	text-decoration: none;
	transition:
		border-color var(--tf-duration) var(--tf-ease),
		box-shadow var(--tf-duration) var(--tf-ease),
		transform var(--tf-duration) var(--tf-ease);
}

.index-atlas-card:hover {
	border-color: var(--tf-border-strong);
	box-shadow: var(--tf-shadow-md);
	color: var(--tf-text);
	transform: translateY(-0.15rem);
}

.index-atlas-card > span {
	color: var(--tf-accent-700);
	font-size: var(--tf-text-xs);
	font-weight: 800;
	letter-spacing: 0.09em;
	overflow: hidden;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

.index-atlas-card > strong {
	color: var(--tf-primary-950);
	font-size: clamp(1.4rem, 2.4vw, 1.75rem);
	letter-spacing: -0.035em;
	line-height: 1;
	margin-top: var(--tf-space-4);
	overflow-wrap: anywhere;
}

.index-atlas-card > small {
	color: var(--tf-muted);
	font-size: var(--tf-text-xs);
	font-weight: 760;
	margin-top: var(--tf-space-3);
}

.index-atlas-card--up > small {
	color: var(--tf-success);
}

.index-atlas-card--down > small {
	color: var(--tf-error);
}

.index-atlas-card > em {
	align-items: end;
	align-self: end;
	color: var(--tf-accent-700);
	display: flex;
	font-size: var(--tf-text-xs);
	font-style: normal;
	font-weight: 720;
	gap: 0.35rem;
	margin-top: var(--tf-space-6);
}

.index-atlas-card > em svg {
	height: 0.9rem;
	width: 0.9rem;
}

.index-atlas__toggle {
	background: var(--tf-surface);
	border: 1px solid var(--tf-primary-900);
	border-radius: var(--tf-radius-sm);
	color: var(--tf-primary-900);
	display: block;
	font-size: var(--tf-text-sm);
	font-weight: 740;
	margin: var(--tf-space-8) auto 0;
	min-height: 3rem;
	padding: 0.75rem 1.2rem;
}

.index-atlas__toggle:hover {
	background: var(--tf-primary-50);
}

.index-atlas__empty,
.index-atlas__empty-state {
	background: var(--tf-canvas);
	border: 1px dashed var(--tf-border-strong);
	border-radius: var(--tf-radius-lg);
	color: var(--tf-muted);
	margin: var(--tf-space-6) 0 0;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	text-align: center;
}

.index-atlas__empty-state h3 {
	font-size: var(--tf-text-lg);
}

.index-atlas__empty-state p {
	margin: 0;
}

.index-disclosure {
	background:
		radial-gradient(circle at 82% 10%, rgba(110, 216, 185, 0.16), transparent 26rem),
		var(--tf-primary-950);
	color: rgba(255, 255, 255, 0.72);
}

.index-disclosure__grid {
	align-items: start;
	display: grid;
	gap: clamp(3rem, 8vw, 7rem);
	grid-template-columns: minmax(0, 0.86fr) minmax(22rem, 1.14fr);
}

.index-disclosure h2 {
	color: var(--tf-surface);
	margin: 0;
	max-width: 13ch;
}

.index-disclosure__content {
	border-left: 1px solid rgba(255, 255, 255, 0.16);
	padding-left: clamp(1.5rem, 4vw, 3rem);
}

.index-disclosure__content p {
	color: rgba(255, 255, 255, 0.7);
}

.index-disclosure__content .button-group {
	margin-top: var(--tf-space-8);
}

@media (max-width: 62rem) {
	.index-hero__grid,
	.index-disclosure__grid {
		grid-template-columns: 1fr;
	}

	.index-hero__content {
		max-width: 48rem;
	}

	.index-score {
		max-width: 44rem;
	}

	.index-metrics__grid,
	.index-market__grid,
	.index-stock-summary__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.index-disclosure__content {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.16);
		padding-left: 0;
		padding-top: var(--tf-space-8);
	}
}

@media (max-width: 52rem) {
	.index-truth__list,
	.index-method__steps {
		grid-template-columns: 1fr;
	}

	.index-truth__list li,
	.index-method__steps li {
		padding-inline: 0;
	}

	.index-truth__list li + li,
	.index-method__steps li + li {
		border-left: 0;
		border-top: 1px solid var(--tf-border);
	}

	.index-heading {
		align-items: start;
		gap: var(--tf-space-5);
		grid-template-columns: 1fr;
	}

	.index-stock-summary .index-heading > .text-link {
		justify-self: start;
	}

	.index-atlas__toolbar {
		align-items: stretch;
		grid-template-columns: 1fr;
	}

	.index-atlas__status {
		justify-content: space-between;
	}
}

@media (max-width: 44rem) {
	html body .index-app .index-metals-bar {
		justify-content: flex-start !important;
		margin-bottom: 2.5rem !important;
		overflow-x: auto;
		padding: 0.25rem 0.2rem 0.45rem !important;
	}

	html body .index-app .index-metals-bar a {
		flex: 0 0 auto;
	}

	.index-hero {
		padding-bottom: 4rem;
	}

	.index-hero__content h1 {
		font-size: clamp(2.55rem, 13vw, 4rem);
	}

	.index-score {
		padding: 1.35rem;
	}

	.index-score__head {
		align-items: start;
		flex-direction: column;
		gap: var(--tf-space-5);
	}

	.index-score__value {
		justify-items: start;
	}

	.index-score__value > strong {
		font-size: clamp(3.2rem, 20vw, 4.8rem);
	}

	.index-score__scale {
		font-size: 0.56rem;
		letter-spacing: 0;
	}

	.index-metrics__grid,
	.index-market__grid {
		grid-template-columns: 1fr;
	}

	.index-stock-summary__grid,
	.index-atlas__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.index-market-card {
		min-height: 12.5rem;
	}

	.index-atlas-card {
		min-height: 9.75rem;
		padding: var(--tf-space-4);
	}
}

@media (max-width: 23.5rem) {
	.index-stock-summary__grid,
	.index-atlas__grid {
		grid-template-columns: 1fr;
	}
}

/* Premium About page
   ========================================================================== */

.about-page {
	background: var(--tf-surface);
	overflow: clip;
}

.about-hero {
	background:
		radial-gradient(circle at 82% 8%, rgba(110, 216, 185, 0.17), transparent 25rem),
		radial-gradient(circle at 8% 100%, rgba(30, 91, 143, 0.34), transparent 31rem),
		var(--tf-primary-950);
	color: rgba(255, 255, 255, 0.76);
	overflow: hidden;
	padding-block: clamp(2rem, 4vw, 3rem) clamp(4.5rem, 9vw, 7.5rem);
	position: relative;
}

.about-hero::after {
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 50%;
	content: "";
	height: clamp(18rem, 38vw, 36rem);
	pointer-events: none;
	position: absolute;
	right: clamp(-14rem, -11vw, -5rem);
	top: clamp(-13rem, -10vw, -4rem);
	width: clamp(18rem, 38vw, 36rem);
}

.about-hero > .container {
	position: relative;
	z-index: 1;
}

.about-hero .breadcrumbs {
	margin-bottom: clamp(3rem, 7vw, 5.5rem);
}

.about-hero .breadcrumbs li,
.about-hero .breadcrumbs a {
	color: rgba(255, 255, 255, 0.62);
}

.about-hero .breadcrumbs li + li::before {
	color: rgba(255, 255, 255, 0.26);
}

.about-hero .breadcrumbs li[aria-current="page"] {
	color: #a4e6d3;
}

.about-hero__grid {
	align-items: center;
	display: grid;
	gap: clamp(3rem, 8vw, 7rem);
	grid-template-columns: minmax(0, 1.08fr) minmax(22rem, 0.92fr);
}

.about-hero__content h1 {
	color: var(--tf-surface);
	font-size: clamp(2.85rem, 6.3vw, 5.75rem);
	letter-spacing: -0.055em;
	line-height: 0.98;
	margin-bottom: var(--tf-space-6);
	max-width: 10.5ch;
	text-wrap: balance;
}

.about-hero__lead {
	color: rgba(255, 255, 255, 0.74);
	font-size: clamp(1.05rem, 1.7vw, 1.25rem);
	margin-bottom: var(--tf-space-8);
	max-width: 42rem;
}

.about-hero__panel {
	backdrop-filter: blur(1.2rem);
	background: rgba(255, 255, 255, 0.075);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: var(--tf-radius-xl);
	box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.2);
	overflow: hidden;
}

.about-hero__panel-head {
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	display: grid;
	gap: 0.2rem;
	padding: var(--tf-space-6) clamp(1.35rem, 3vw, 2rem);
}

.about-hero__panel-head span {
	color: #8ce0c8;
	font-size: var(--tf-text-xs);
	font-weight: 780;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.about-hero__panel-head strong {
	color: var(--tf-surface);
	font-size: var(--tf-text-lg);
}

.about-hero__steps {
	list-style: none;
	margin: 0;
	padding: 0 clamp(1.35rem, 3vw, 2rem);
}

.about-hero__steps li {
	align-items: start;
	display: grid;
	gap: var(--tf-space-5);
	grid-template-columns: 2.5rem minmax(0, 1fr);
	padding-block: var(--tf-space-6);
}

.about-hero__steps li + li {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.about-hero__steps > li > span {
	color: #6ed8b9;
	font-family: var(--tf-font-serif);
	font-size: var(--tf-text-lg);
	line-height: 1.2;
}

.about-hero__steps strong {
	color: var(--tf-surface);
	display: block;
	font-size: var(--tf-text-base);
	margin-bottom: 0.25rem;
}

.about-hero__steps p {
	color: rgba(255, 255, 255, 0.66);
	font-size: var(--tf-text-sm);
	margin: 0;
}

.about-trust {
	background: var(--tf-surface);
	border-bottom: 1px solid var(--tf-border);
}

.about-trust__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.about-trust__list li {
	align-items: center;
	display: grid;
	gap: var(--tf-space-4);
	grid-template-columns: 2.75rem minmax(0, 1fr);
	padding: var(--tf-space-6) clamp(1rem, 3vw, 2rem);
}

.about-trust__list li + li {
	border-left: 1px solid var(--tf-border);
}

.about-trust__list > li > svg {
	color: var(--tf-accent-700);
	height: 1.65rem;
	width: 1.65rem;
}

.about-trust__list span {
	color: var(--tf-muted);
	display: grid;
	font-size: var(--tf-text-xs);
	gap: 0.05rem;
	line-height: 1.45;
}

.about-trust__list strong {
	font-size: var(--tf-text-sm);
}

.about-purpose {
	background: var(--tf-surface);
}

.about-purpose__grid {
	align-items: center;
	display: grid;
	gap: clamp(3rem, 8vw, 7rem);
	grid-template-columns: minmax(0, 0.8fr) minmax(28rem, 1.2fr);
}

.about-purpose__copy h2 {
	font-size: clamp(2.35rem, 4.7vw, 4.25rem);
	margin-bottom: var(--tf-space-6);
}

.about-purpose__copy > p:not(.eyebrow) {
	color: var(--tf-muted);
	font-size: var(--tf-text-md);
}

.about-definition {
	background:
		radial-gradient(circle at 100% 0%, rgba(18, 128, 100, 0.12), transparent 18rem),
		var(--tf-primary-50);
	border: 1px solid var(--tf-primary-100);
	border-radius: var(--tf-radius-xl);
	box-shadow: var(--tf-shadow-sm);
	padding: clamp(1.5rem, 4vw, 3rem);
}

.about-definition__label {
	color: var(--tf-accent-700);
	font-size: var(--tf-text-xs);
	font-weight: 800;
	letter-spacing: 0.13em;
	margin-bottom: var(--tf-space-3);
	text-transform: uppercase;
}

.about-definition > h2 {
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	margin-bottom: var(--tf-space-8);
}

.about-definition__columns {
	display: grid;
	gap: var(--tf-space-8);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.about-definition__columns > div {
	border-top: 1px solid var(--tf-border-strong);
	padding-top: var(--tf-space-5);
}

.about-definition__columns h3 {
	font-size: var(--tf-text-base);
	margin-bottom: var(--tf-space-4);
}

.about-definition__columns ul {
	display: grid;
	gap: var(--tf-space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.about-definition__columns li {
	color: var(--tf-muted);
	font-size: var(--tf-text-sm);
	padding-left: 1.15rem;
	position: relative;
}

.about-definition__columns li::before {
	background: var(--tf-accent-600);
	border-radius: 50%;
	content: "";
	height: 0.4rem;
	left: 0;
	position: absolute;
	top: 0.65rem;
	width: 0.4rem;
}

.about-definition__columns > div:last-child li::before {
	background: var(--tf-gold-600);
}

.about-method {
	background: var(--tf-canvas);
}

.about-heading {
	align-items: end;
	display: grid;
	gap: var(--tf-space-12);
	grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
	margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.about-heading h2 {
	margin-bottom: 0;
	max-width: 48rem;
}

.about-heading > p {
	color: var(--tf-muted);
	font-size: var(--tf-text-md);
	margin: 0;
}

.about-method__grid {
	display: grid;
	gap: var(--tf-space-5);
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.about-method__card {
	background: var(--tf-surface);
	border: 1px solid var(--tf-border);
	border-radius: var(--tf-radius-lg);
	display: flex;
	flex-direction: column;
	min-height: 24rem;
	padding: clamp(1.35rem, 3vw, 2rem);
	position: relative;
	transition:
		border-color var(--tf-duration) var(--tf-ease),
		box-shadow var(--tf-duration) var(--tf-ease),
		transform var(--tf-duration) var(--tf-ease);
}

.about-method__card:hover {
	border-color: var(--tf-border-strong);
	box-shadow: var(--tf-shadow-sm);
	transform: translateY(-0.2rem);
}

.about-method__icon {
	align-items: center;
	background: var(--tf-accent-100);
	border-radius: var(--tf-radius-sm);
	color: var(--tf-accent-700);
	display: inline-flex;
	height: 3rem;
	justify-content: center;
	margin-bottom: auto;
	width: 3rem;
}

.about-method__number {
	color: var(--tf-subtle);
	font-family: var(--tf-font-serif);
	font-size: var(--tf-text-sm);
	margin: var(--tf-space-12) 0 var(--tf-space-3);
}

.about-method__card h3 {
	font-size: clamp(1.3rem, 2vw, 1.65rem);
	margin-bottom: var(--tf-space-4);
}

.about-method__card > p:last-child {
	color: var(--tf-muted);
	font-size: var(--tf-text-sm);
	margin: 0;
}

.about-page .page-video-feature {
	background: var(--tf-surface);
	padding-block: clamp(4rem, 8vw, 7rem);
}

.about-page .page-video-feature__inner {
	background:
		radial-gradient(circle at 100% 0%, rgba(110, 216, 185, 0.14), transparent 22rem),
		var(--tf-primary-950);
	border-color: transparent;
}

.about-page .page-video-feature__copy h2 {
	color: var(--tf-surface);
}

.about-page .page-video-feature__copy > p:last-child {
	color: rgba(255, 255, 255, 0.68);
}

.about-page .page-video-feature .eyebrow {
	color: #8ce0c8;
}

.about-sources {
	background: var(--tf-primary-50);
	border-block: 1px solid var(--tf-primary-100);
}

.about-sources__grid {
	align-items: start;
	display: grid;
	gap: clamp(3rem, 8vw, 7rem);
	grid-template-columns: minmax(0, 0.82fr) minmax(28rem, 1.18fr);
}

.about-sources__intro {
	position: sticky;
	top: calc(var(--tf-admin-bar-height) + var(--tf-header-height) + 2rem);
}

.about-sources__intro h2 {
	font-size: clamp(2.25rem, 4.4vw, 3.9rem);
}

.about-sources__intro > p:not(.eyebrow, .about-sources__note) {
	color: var(--tf-muted);
	font-size: var(--tf-text-md);
}

.about-sources__note {
	align-items: start;
	background: var(--tf-surface);
	border: 1px solid var(--tf-border);
	border-radius: var(--tf-radius-md);
	color: var(--tf-muted);
	display: grid;
	font-size: var(--tf-text-sm);
	gap: var(--tf-space-3);
	grid-template-columns: 1.5rem minmax(0, 1fr);
	margin: var(--tf-space-8) 0 0;
	padding: var(--tf-space-5);
}

.about-sources__note svg {
	color: var(--tf-accent-700);
}

.about-source-list {
	background: var(--tf-surface);
	border: 1px solid var(--tf-border);
	border-radius: var(--tf-radius-xl);
	box-shadow: var(--tf-shadow-sm);
	list-style: none;
	margin: 0;
	padding: 0 clamp(1.5rem, 4vw, 2.5rem);
}

.about-source-list li {
	align-items: start;
	display: grid;
	gap: var(--tf-space-6);
	grid-template-columns: 2.5rem minmax(0, 1fr);
	padding-block: clamp(1.5rem, 4vw, 2.25rem);
}

.about-source-list li + li {
	border-top: 1px solid var(--tf-border);
}

.about-source-list > li > span {
	color: var(--tf-accent-700);
	font-family: var(--tf-font-serif);
	font-size: var(--tf-text-lg);
	line-height: 1.2;
}

.about-source-list h3 {
	font-size: var(--tf-text-lg);
	margin-bottom: 0.35rem;
}

.about-source-list p {
	color: var(--tf-muted);
	font-size: var(--tf-text-sm);
	margin: 0;
}

.about-independence {
	background:
		radial-gradient(circle at 0 100%, rgba(30, 91, 143, 0.3), transparent 30rem),
		var(--tf-primary-950);
	color: rgba(255, 255, 255, 0.7);
}

.about-independence__grid {
	align-items: start;
	display: grid;
	gap: clamp(3rem, 8vw, 7rem);
	grid-template-columns: minmax(0, 0.9fr) minmax(28rem, 1.1fr);
}

.about-independence h2 {
	color: var(--tf-surface);
	font-size: clamp(2.5rem, 5.4vw, 4.75rem);
	margin: 0;
	max-width: 11ch;
}

.about-independence__content > p {
	color: rgba(255, 255, 255, 0.74);
	font-size: var(--tf-text-md);
}

.about-independence__content ul {
	display: grid;
	gap: 0;
	list-style: none;
	margin: var(--tf-space-8) 0 0;
	padding: 0;
}

.about-independence__content li {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	color: rgba(255, 255, 255, 0.84);
	font-size: var(--tf-text-sm);
	padding: var(--tf-space-5) 0 var(--tf-space-5) 1.5rem;
	position: relative;
}

.about-independence__content li::before {
	background: #6ed8b9;
	border-radius: 50%;
	content: "";
	height: 0.45rem;
	left: 0;
	position: absolute;
	top: 1.75rem;
	width: 0.45rem;
}

.about-faq {
	background: var(--tf-surface);
}

.about-faq__grid {
	align-items: start;
	display: grid;
	gap: clamp(3rem, 8vw, 7rem);
	grid-template-columns: minmax(16rem, 0.65fr) minmax(28rem, 1.35fr);
}

.about-faq__intro {
	position: sticky;
	top: calc(var(--tf-admin-bar-height) + var(--tf-header-height) + 2rem);
}

.about-faq__intro h2 {
	margin-bottom: var(--tf-space-4);
}

.about-faq__intro > p:last-child {
	color: var(--tf-muted);
}

.about-faq__items {
	border-top: 1px solid var(--tf-border-strong);
}

.about-faq__items details {
	border-bottom: 1px solid var(--tf-border);
}

.about-faq__items summary {
	align-items: center;
	color: var(--tf-ink);
	display: flex;
	font-size: clamp(1.05rem, 2vw, 1.25rem);
	font-weight: 730;
	gap: var(--tf-space-5);
	justify-content: space-between;
	list-style: none;
	padding-block: var(--tf-space-6);
}

.about-faq__items summary::-webkit-details-marker {
	display: none;
}

.about-faq__items summary::after {
	align-items: center;
	border: 1px solid var(--tf-border-strong);
	border-radius: 50%;
	color: var(--tf-accent-700);
	content: "+";
	display: flex;
	flex: 0 0 2rem;
	font-size: 1.35rem;
	font-weight: 500;
	height: 2rem;
	justify-content: center;
	line-height: 1;
	transition:
		background-color var(--tf-duration) var(--tf-ease),
		color var(--tf-duration) var(--tf-ease),
		transform var(--tf-duration) var(--tf-ease);
}

.about-faq__items details[open] summary::after {
	background: var(--tf-accent-700);
	border-color: var(--tf-accent-700);
	color: var(--tf-surface);
	transform: rotate(45deg);
}

.about-faq__items details > p {
	color: var(--tf-muted);
	margin: -0.25rem 3.5rem var(--tf-space-6) 0;
	max-width: 42rem;
}

.about-contact {
	background: var(--tf-canvas);
	padding-block: 0 clamp(4.5rem, 9vw, 7.5rem);
}

.about-contact__inner {
	align-items: center;
	background:
		radial-gradient(circle at 92% 18%, rgba(110, 216, 185, 0.18), transparent 20rem),
		var(--tf-primary-900);
	border-radius: var(--tf-radius-xl);
	box-shadow: var(--tf-shadow-md);
	color: rgba(255, 255, 255, 0.72);
	display: grid;
	gap: clamp(2rem, 6vw, 5rem);
	grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
	padding: clamp(2rem, 6vw, 4.5rem);
}

.about-contact__inner h2 {
	color: var(--tf-surface);
	font-size: clamp(2rem, 4vw, 3.5rem);
	margin-bottom: var(--tf-space-4);
}

.about-contact__inner > div:first-child > p:last-child {
	margin: 0;
	max-width: 42rem;
}

.about-contact__actions {
	align-items: start;
	display: flex;
	flex-direction: column;
	gap: var(--tf-space-5);
}

.about-contact__actions .text-link {
	color: var(--tf-surface);
}

.about-contact__actions .text-link:hover {
	color: #8ce0c8;
}

@media (max-width: 68rem) {
	.about-hero__grid,
	.about-purpose__grid,
	.about-sources__grid,
	.about-independence__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.about-hero__content {
		max-width: 52rem;
	}

	.about-hero__panel {
		max-width: 46rem;
	}

	.about-purpose__copy,
	.about-sources__intro {
		max-width: 48rem;
	}

	.about-method__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.about-method__card {
		min-height: 21rem;
	}

	.about-sources__intro {
		position: static;
	}

	.about-independence h2 {
		max-width: 14ch;
	}
}

@media (max-width: 52rem) {
	.about-trust__list {
		grid-template-columns: minmax(0, 1fr);
		padding-block: var(--tf-space-2);
	}

	.about-trust__list li {
		padding-inline: 0;
	}

	.about-trust__list li + li {
		border-left: 0;
		border-top: 1px solid var(--tf-border);
	}

	.about-heading,
	.about-faq__grid,
	.about-contact__inner {
		align-items: start;
		grid-template-columns: minmax(0, 1fr);
	}

	.about-heading {
		gap: var(--tf-space-5);
	}

	.about-faq__intro {
		position: static;
	}
}

@media (max-width: 44rem) {
	.about-hero {
		padding-bottom: 4rem;
	}

	.about-hero .breadcrumbs {
		margin-bottom: var(--tf-space-12);
	}

	.about-hero__grid {
		gap: var(--tf-space-12);
	}

	.about-hero__content h1 {
		font-size: clamp(2.55rem, 13vw, 4.15rem);
		max-width: none;
	}

	.about-definition__columns,
	.about-method__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.about-method__card {
		min-height: 0;
	}

	.about-method__icon {
		margin-bottom: var(--tf-space-12);
	}

	.about-method__number {
		margin-top: 0;
	}

	.about-source-list {
		padding-inline: 1.25rem;
	}

	.about-contact__inner {
		border-radius: var(--tf-radius-lg);
	}
}

@media (max-width: 40rem) {
	.about-hero__panel-head,
	.about-hero__steps {
		padding-inline: 1.15rem;
	}

	.about-hero__steps li {
		gap: var(--tf-space-3);
		grid-template-columns: 2rem minmax(0, 1fr);
	}

	.about-source-list li {
		gap: var(--tf-space-4);
		grid-template-columns: 2rem minmax(0, 1fr);
	}

	.about-faq__items details > p {
		margin-right: 0;
	}

	.about-contact__actions,
	.about-contact__actions .button {
		width: 100%;
	}
}

/* Page and archive headers
   ========================================================================== */

.page-hero,
.archive-hero,
.article-hero {
	background: var(--tf-primary-50);
	border-bottom: 1px solid var(--tf-primary-100);
	padding-block: clamp(3rem, 7vw, 5.5rem);
}

.page-hero h1,
.archive-hero h1 {
	font-size: clamp(2.35rem, 5.4vw, 4.75rem);
	margin-bottom: 0;
}

.page-hero p {
	color: var(--tf-muted);
	font-size: var(--tf-text-md);
	margin: var(--tf-space-5) 0 0;
	max-width: 42rem;
}

.archive-hero__grid {
	align-items: end;
	display: grid;
	gap: var(--tf-space-12);
	grid-template-columns: minmax(0, 1.3fr) minmax(18rem, 0.7fr);
}

.archive-hero__grid > p,
.archive-description {
	color: var(--tf-muted);
	font-size: var(--tf-text-md);
	margin: 0;
}

.archive-description > :last-child {
	margin-bottom: 0;
}

.page-video-feature {
	padding-block: clamp(1.5rem, 4vw, 3.5rem);
}

.page-video-feature__inner {
	align-items: center;
	background:
		radial-gradient(circle at 100% 0%, rgba(30, 91, 143, 0.14), transparent 42%),
		var(--tf-surface);
	border: 1px solid var(--tf-border);
	border-radius: var(--tf-radius-xl);
	box-shadow: var(--tf-shadow-md);
	display: grid;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	grid-template-columns: minmax(0, 0.72fr) minmax(20rem, 1.28fr);
	padding: clamp(1.5rem, 4vw, 3.5rem);
}

.page-video-feature__copy h2 {
	margin-bottom: var(--tf-space-4);
}

.page-video-feature__copy > p:last-child {
	color: var(--tf-muted);
	margin-bottom: 0;
}

.page-video-feature__media {
	aspect-ratio: 16 / 9;
	background: var(--tf-primary-950);
	border-radius: var(--tf-radius-lg);
	box-shadow: var(--tf-shadow-md);
	overflow: hidden;
}

.page-video-feature__media video {
	background: var(--tf-primary-950);
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

@media (max-width: 760px) {
	.page-video-feature__inner {
		grid-template-columns: minmax(0, 1fr);
	}
}

.breadcrumbs {
	margin-bottom: clamp(1.75rem, 4vw, 3rem);
}

.breadcrumbs ol {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.breadcrumbs li {
	align-items: center;
	color: var(--tf-muted);
	display: inline-flex;
	font-size: var(--tf-text-xs);
	gap: 0.45rem;
}

.breadcrumbs li + li::before {
	color: var(--tf-border-strong);
	content: "/";
}

.breadcrumbs a {
	color: var(--tf-muted);
	text-decoration: none;
}

.breadcrumbs a:hover {
	color: var(--tf-accent-700);
}

.page-content {
	background: var(--tf-surface);
}

/* Editorial content and plugin-owned shortcode content
   ========================================================================== */

.entry-content {
	color: var(--tf-text);
	font-size: clamp(1rem, 1.4vw, 1.075rem);
	min-width: 0;
}

.entry-content > * {
	max-width: 100%;
}

.entry-content > :first-child {
	margin-top: 0;
}

.entry-content > :last-child {
	margin-bottom: 0;
}

.entry-content :where(h2, h3, h4) {
	margin-top: 1.8em;
}

.entry-content h2 {
	font-size: clamp(1.75rem, 3.5vw, 2.65rem);
}

.entry-content h3 {
	font-size: clamp(1.35rem, 2.4vw, 1.8rem);
}

.entry-content p,
.entry-content li {
	overflow-wrap: break-word;
}

.entry-content a:not(.button):not(.wp-element-button) {
	font-weight: 620;
}

.entry-content ul,
.entry-content ol {
	padding-inline-start: 1.4rem;
}

.entry-content li + li {
	margin-top: 0.45rem;
}

.entry-content blockquote {
	border-left: 3px solid var(--tf-accent-600);
	color: var(--tf-muted);
	font-family: var(--tf-font-serif);
	font-size: clamp(1.25rem, 2.4vw, 1.65rem);
	margin-block: var(--tf-space-10);
	padding: 0.5rem 0 0.5rem var(--tf-space-6);
}

.entry-content blockquote cite {
	color: var(--tf-text);
	display: block;
	font-family: var(--tf-font-sans);
	font-size: var(--tf-text-sm);
	font-style: normal;
	margin-top: var(--tf-space-4);
}

.entry-content figure {
	margin-block: var(--tf-space-10);
}

.entry-content figcaption,
.wp-caption-text {
	color: var(--tf-muted);
	font-size: var(--tf-text-sm);
	margin-top: 0.65rem;
	text-align: center;
}

.entry-content pre,
.entry-content code,
.entry-content kbd {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.entry-content pre {
	background: var(--tf-primary-950);
	border-radius: var(--tf-radius-md);
	color: #e8f0f4;
	overflow-x: auto;
	padding: var(--tf-space-6);
}

.entry-content code {
	background: var(--tf-primary-50);
	border-radius: 0.25rem;
	font-size: 0.9em;
	padding: 0.15em 0.35em;
}

.entry-content pre code {
	background: transparent;
	padding: 0;
}

.entry-content table {
	border-collapse: collapse;
	display: block;
	font-size: var(--tf-text-sm);
	margin-block: var(--tf-space-8);
	max-width: 100%;
	overflow-x: auto;
	width: 100%;
}

.entry-content :where(th, td) {
	border-bottom: 1px solid var(--tf-border);
	min-width: 8rem;
	padding: 0.9rem 1rem;
	text-align: left;
	vertical-align: top;
}

.entry-content th {
	background: var(--tf-surface-alt);
	color: var(--tf-primary-900);
	font-weight: 750;
}

.entry-content tr:hover td {
	background: var(--tf-accent-50);
}

.entry-content--tool {
	font-size: var(--tf-text-base);
}

.alignwide {
	max-width: var(--tf-container);
}

.wp-block-image img,
.wp-block-cover,
.wp-block-media-text {
	border-radius: var(--tf-radius-md);
}

.page-links {
	align-items: center;
	display: flex;
	gap: 0.35rem;
	margin-top: var(--tf-space-10);
}

.page-links a,
.page-links > span {
	align-items: center;
	border: 1px solid var(--tf-border);
	border-radius: var(--tf-radius-sm);
	display: inline-flex;
	height: 2.5rem;
	justify-content: center;
	min-width: 2.5rem;
	text-decoration: none;
}

/* Forms, state feedback and interactive plugin content
   ========================================================================== */

:where(.entry-content, .search-form, .comment-form) label {
	color: var(--tf-ink);
	display: block;
	font-size: var(--tf-text-sm);
	font-weight: 700;
	margin-bottom: 0.45rem;
}

:where(.entry-content, .search-form, .comment-form) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), select, textarea) {
	background: var(--tf-surface);
	border: 1px solid var(--tf-border-strong);
	border-radius: 0.625rem;
	color: var(--tf-ink);
	min-height: 3.125rem;
	padding: 0.75rem 0.9rem;
	transition:
		border-color var(--tf-duration) var(--tf-ease),
		box-shadow var(--tf-duration) var(--tf-ease);
	width: 100%;
}

:where(.entry-content, .search-form, .comment-form) textarea {
	min-height: 9rem;
	resize: vertical;
}

:where(.entry-content, .search-form, .comment-form) :where(input, select, textarea)::placeholder {
	color: var(--tf-subtle);
}

:where(.entry-content, .search-form, .comment-form) :where(input, select, textarea):focus {
	border-color: var(--tf-focus);
	box-shadow: 0 0 0 3px rgba(25, 118, 189, 0.14);
	outline: 0;
}

:where(.entry-content, .comment-form) :where(input[type="checkbox"], input[type="radio"]) {
	accent-color: var(--tf-accent-700);
	height: 1.2rem;
	margin: 0;
	vertical-align: middle;
	width: 1.2rem;
}

:where(.entry-content, .comment-form) .required {
	color: var(--tf-error);
}

:where(.entry-content, .comment-form) :where(.field-error, [aria-invalid="true"]) {
	border-color: var(--tf-error);
}

.form-message,
.alert {
	border: 1px solid var(--tf-border);
	border-radius: var(--tf-radius-md);
	display: grid;
	gap: 0.25rem;
	padding: var(--tf-space-4) var(--tf-space-5);
}

.form-message--success,
.alert--success {
	background: var(--tf-success-soft);
	border-color: #9acdb7;
	color: var(--tf-success);
}

.form-message--warning,
.alert--warning {
	background: var(--tf-warning-soft);
	border-color: #e7c77b;
	color: var(--tf-warning);
}

.form-message--error,
.alert--error {
	background: var(--tf-error-soft);
	border-color: #e4aaaa;
	color: var(--tf-error);
}

.is-loading {
	color: transparent;
	pointer-events: none;
	position: relative;
}

.is-loading::after {
	animation: tf-spin 700ms linear infinite;
	border: 2px solid rgba(255, 255, 255, 0.45);
	border-radius: 50%;
	border-top-color: currentColor;
	content: "";
	height: 1.1rem;
	left: 50%;
	position: absolute;
	top: 50%;
	width: 1.1rem;
}

@keyframes tf-spin {
	to {
		transform: rotate(360deg);
	}
}

.search-form {
	max-width: 34rem;
}

.search-form__row {
	align-items: stretch;
	display: flex;
	gap: 0.5rem;
}

.search-form__row input {
	min-width: 0;
}

.search-form__row button {
	align-items: center;
	background: var(--tf-primary-900);
	border: 1px solid var(--tf-primary-900);
	border-radius: 0.625rem;
	color: var(--tf-surface);
	display: inline-flex;
	font-weight: 700;
	gap: 0.45rem;
	justify-content: center;
	min-height: 3.125rem;
	padding-inline: 1rem;
}

.search-form__row button:hover {
	background: var(--tf-primary-800);
}

.tf-modal,
[role="dialog"].tf-dialog {
	background: var(--tf-surface);
	border: 1px solid var(--tf-border);
	border-radius: var(--tf-radius-lg);
	box-shadow: var(--tf-shadow-md);
	inset: 50% auto auto 50%;
	max-height: calc(100dvh - 2rem);
	max-width: min(38rem, calc(100vw - 2rem));
	overflow-y: auto;
	padding: clamp(1.25rem, 4vw, 2rem);
	position: fixed;
	transform: translate(-50%, -50%);
	width: 100%;
	z-index: var(--tf-z-modal);
}

.tf-tooltip {
	background: var(--tf-primary-950);
	border-radius: 0.35rem;
	color: var(--tf-surface);
	font-size: var(--tf-text-xs);
	max-width: 18rem;
	padding: 0.45rem 0.6rem;
}

/* Post cards, article and pagination
   ========================================================================== */

.post-grid {
	display: grid;
	gap: var(--tf-space-6);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.post-grid--archive {
	row-gap: var(--tf-space-10);
}

.post-card {
	background: var(--tf-surface);
	border: 1px solid var(--tf-border);
	border-radius: var(--tf-radius-lg);
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: clip;
	transition:
		box-shadow var(--tf-duration) var(--tf-ease),
		transform var(--tf-duration) var(--tf-ease);
}

.post-card:hover {
	box-shadow: var(--tf-shadow-sm);
	transform: translateY(-0.2rem);
}

.post-card__image {
	aspect-ratio: 16 / 10;
	background: var(--tf-primary-100);
	display: block;
	overflow: clip;
	position: relative;
}

.post-card__image img {
	height: 100%;
	object-fit: cover;
	transition: transform 400ms var(--tf-ease);
	width: 100%;
}

.post-card:hover .post-card__image img {
	transform: scale(1.025);
}

.post-card__placeholder {
	align-items: center;
	color: var(--tf-primary-700);
	display: flex;
	height: 100%;
	justify-content: center;
}

.post-card__placeholder svg {
	height: 3rem;
	width: 3rem;
}

.post-card--members .post-card__image,
.journal-card--members .journal-card__media,
.editorial-related__item--members .editorial-related__media {
	background:
		radial-gradient(circle at 82% 16%, rgba(115, 223, 193, 0.28), transparent 35%),
		linear-gradient(145deg, #092b47, #061b30);
}

.post-card--members .post-card__placeholder,
.journal-card--members .journal-card__media > span:not(.journal-card__topic):not(.blog-access-badge),
.editorial-related__item--members .editorial-related__media > span:not(.blog-access-badge) {
	color: #f5cf70;
}

.blog-access-badge {
	align-items: center;
	backdrop-filter: blur(0.7rem);
	background: rgba(6, 27, 48, 0.9);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	color: #fff;
	display: inline-flex;
	font-size: 0.66rem;
	font-weight: 790;
	gap: 0.38rem;
	letter-spacing: 0.04em;
	line-height: 1;
	min-height: 2rem;
	padding: 0.45rem 0.7rem;
	text-transform: uppercase;
}

.blog-access-badge svg {
	flex: 0 0 auto;
	height: 0.85rem;
	width: 0.85rem;
}

.blog-access-badge--media {
	position: absolute;
	right: 0.8rem;
	top: 0.8rem;
	z-index: 2;
}

.post-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: var(--tf-space-6);
}

.post-card__meta {
	align-items: center;
	color: var(--tf-muted);
	display: flex;
	font-size: var(--tf-text-xs);
	gap: var(--tf-space-3);
	justify-content: space-between;
	margin-bottom: var(--tf-space-4);
}

.post-card__meta span {
	color: var(--tf-accent-700);
	font-weight: 750;
}

.post-card h3 {
	font-size: clamp(1.2rem, 2vw, 1.5rem);
	margin-bottom: var(--tf-space-3);
}

.post-card h3 a {
	color: var(--tf-ink);
	text-decoration: none;
}

.post-card h3 a:hover {
	color: var(--tf-accent-700);
}

.post-card p {
	color: var(--tf-muted);
	font-size: var(--tf-text-sm);
	margin-bottom: var(--tf-space-6);
}

.post-card .text-link {
	color: var(--tf-primary-900);
	margin-top: auto;
}

.navigation.pagination {
	margin-top: var(--tf-space-12);
}

.nav-links {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	justify-content: center;
}

.page-numbers {
	align-items: center;
	border: 1px solid var(--tf-border);
	border-radius: var(--tf-radius-sm);
	color: var(--tf-primary-900);
	display: inline-flex;
	font-size: var(--tf-text-sm);
	font-weight: 680;
	justify-content: center;
	min-height: 2.75rem;
	min-width: 2.75rem;
	padding: 0.5rem 0.75rem;
	text-decoration: none;
}

.page-numbers.current {
	background: var(--tf-primary-900);
	border-color: var(--tf-primary-900);
	color: var(--tf-surface);
}

.page-numbers:hover {
	background: var(--tf-primary-50);
	color: var(--tf-primary-900);
}

.article-hero {
	padding-bottom: clamp(4rem, 8vw, 7rem);
}

.article-hero h1 {
	font-size: clamp(2.4rem, 5.8vw, 4.8rem);
	margin-bottom: var(--tf-space-6);
}

.category-link {
	color: var(--tf-accent-700);
	display: inline-block;
	font-size: var(--tf-text-xs);
	font-weight: 800;
	letter-spacing: 0.12em;
	margin-bottom: var(--tf-space-4);
	text-decoration: none;
	text-transform: uppercase;
}

.article-hero__lead {
	color: var(--tf-muted);
	font-family: var(--tf-font-serif);
	font-size: clamp(1.25rem, 2.4vw, 1.65rem);
	line-height: 1.5;
	margin-bottom: var(--tf-space-6);
}

.post-meta {
	align-items: center;
	color: var(--tf-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--tf-text-sm);
	gap: 0.55rem;
}

.article-featured {
	margin-top: clamp(2rem, 5vw, 4rem);
}

.article-featured img {
	aspect-ratio: 16 / 9;
	border-radius: var(--tf-radius-lg);
	object-fit: cover;
	width: 100%;
}

.article-body {
	padding-top: clamp(3.5rem, 7vw, 6rem);
}

.article-tags {
	border-top: 1px solid var(--tf-border);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: var(--tf-space-12);
	padding-top: var(--tf-space-6);
}

.article-tags a {
	background: var(--tf-surface-alt);
	border-radius: 2rem;
	color: var(--tf-primary-900);
	font-size: var(--tf-text-xs);
	font-weight: 680;
	padding: 0.4rem 0.7rem;
	text-decoration: none;
}

.post-navigation {
	border-block: 1px solid var(--tf-border);
	display: grid;
	gap: var(--tf-space-8);
	grid-template-columns: 1fr 1fr;
	margin-top: var(--tf-space-12);
	padding-block: var(--tf-space-8);
}

.post-navigation > div:last-child {
	text-align: right;
}

.post-navigation a {
	color: var(--tf-ink);
	display: grid;
	font-weight: 700;
	text-decoration: none;
}

.post-navigation a span {
	color: var(--tf-muted);
	font-size: var(--tf-text-xs);
	font-weight: 600;
}

.comments-area {
	margin-top: var(--tf-space-16);
}

.comments-title,
.comment-reply-title {
	font-size: var(--tf-text-xl);
}

.comment-list {
	list-style: none;
	padding: 0;
}

.comment-list .children {
	list-style: none;
	padding-left: var(--tf-space-8);
}

.comment-body {
	border-bottom: 1px solid var(--tf-border);
	padding-block: var(--tf-space-6);
}

.comment-meta {
	font-size: var(--tf-text-sm);
}

.comment-author {
	align-items: center;
	display: flex;
	gap: var(--tf-space-3);
}

.comment-author img {
	border-radius: 50%;
}

.comment-form {
	display: grid;
	gap: var(--tf-space-4);
}

.comment-form > p {
	margin: 0;
}

.empty-state {
	background: var(--tf-canvas);
	border: 1px solid var(--tf-border);
	border-radius: var(--tf-radius-lg);
	grid-column: 1 / -1;
	margin-inline: auto;
	max-width: 44rem;
	padding: clamp(2rem, 6vw, 4rem);
	text-align: center;
}

.empty-state__icon {
	align-items: center;
	background: var(--tf-accent-100);
	border-radius: 50%;
	color: var(--tf-accent-700);
	display: inline-flex;
	height: 4rem;
	justify-content: center;
	margin-bottom: var(--tf-space-5);
	width: 4rem;
}

.empty-state h2 {
	font-size: var(--tf-text-xl);
}

.empty-state .search-form {
	margin-inline: auto;
	text-align: left;
}

.not-found-page {
	background: var(--tf-primary-50);
}

.not-found {
	min-height: calc(100svh - var(--tf-header-height));
	text-align: center;
}

.not-found__code {
	color: var(--tf-primary-100);
	font-size: clamp(6rem, 20vw, 13rem);
	font-weight: 850;
	letter-spacing: -0.08em;
	line-height: 0.8;
	margin-bottom: var(--tf-space-8);
}

.not-found .eyebrow {
	justify-content: center;
}

.not-found h1 {
	font-size: var(--tf-text-2xl);
}

.not-found > .container > p:not(.eyebrow, .not-found__code) {
	color: var(--tf-muted);
	font-size: var(--tf-text-md);
}

.not-found .search-form {
	margin: var(--tf-space-8) auto;
	text-align: left;
}

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

.site-footer {
	background: var(--tf-primary-950);
	color: rgba(255, 255, 255, 0.66);
	padding-top: clamp(4rem, 8vw, 7rem);
}

.footer-cta {
	align-items: center;
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
	display: grid;
	gap: var(--tf-space-12);
	grid-template-columns: minmax(0, 1fr) auto;
	padding-bottom: clamp(3rem, 7vw, 5rem);
}

.footer-cta h2 {
	color: var(--tf-surface);
	font-size: clamp(2rem, 4.5vw, 3.75rem);
	margin: 0;
	max-width: 17ch;
}

.footer-grid {
	display: grid;
	gap: clamp(2rem, 5vw, 4.5rem);
	grid-template-columns: minmax(16rem, 1.5fr) repeat(3, minmax(8rem, 0.65fr));
	padding-block: clamp(3rem, 7vw, 5rem);
}

.site-brand--footer {
	background: var(--tf-surface);
	border-radius: 0.65rem;
	color: var(--tf-surface);
	margin-bottom: var(--tf-space-5);
	padding: 0.45rem 0.65rem;
}

.site-brand--footer:hover {
	color: var(--tf-surface);
}

.site-brand--footer .site-brand__image {
	max-width: 10.5rem;
}

.site-brand--footer .site-brand__mark {
	background: #6ed8b9;
	color: var(--tf-primary-950);
}

.site-brand--footer .site-brand__name span {
	color: #6ed8b9;
}

.footer-brand p {
	font-size: var(--tf-text-sm);
	margin: 0;
	max-width: 26rem;
}

.footer-social {
	margin-top: var(--tf-space-6);
}

.footer-social__title {
	color: rgba(255, 255, 255, 0.58);
	display: block;
	font-size: var(--tf-text-xs);
	font-weight: 750;
	letter-spacing: 0.08em;
	margin-bottom: var(--tf-space-3);
	text-transform: uppercase;
}

.footer-social__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tf-space-2);
}

.footer-social__links a {
	align-items: center;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 50%;
	color: var(--tf-surface);
	display: inline-flex;
	font-size: 0.625rem;
	font-weight: 800;
	height: 2.25rem;
	justify-content: center;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition:
		background-color var(--tf-duration) var(--tf-ease),
		border-color var(--tf-duration) var(--tf-ease),
		transform var(--tf-duration) var(--tf-ease);
	width: 2.25rem;
}

.footer-social__links a:hover {
	background: var(--tf-accent-700);
	border-color: #8ce0c8;
	color: var(--tf-surface);
	transform: translateY(-1px);
}

.footer-heading {
	color: var(--tf-surface);
	font-size: var(--tf-text-sm);
	letter-spacing: 0;
	margin-bottom: var(--tf-space-5);
}

.footer-menu,
.legal-menu {
	display: grid;
	gap: 0.55rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-menu a,
.legal-menu a {
	color: rgba(255, 255, 255, 0.67);
	font-size: var(--tf-text-sm);
	text-decoration: none;
}

.footer-menu a:hover,
.legal-menu a:hover {
	color: #8ce0c8;
}

.footer-bottom {
	align-items: center;
	border-top: 1px solid rgba(255, 255, 255, 0.13);
	display: flex;
	gap: var(--tf-space-8);
	justify-content: space-between;
	padding-block: var(--tf-space-6);
}

.footer-bottom p {
	font-size: var(--tf-text-xs);
	margin: 0;
}

.footer-bottom .legal-menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tf-space-5);
}

.footer-bottom .legal-menu a {
	font-size: var(--tf-text-xs);
}

/* Responsive structure
   ========================================================================== */

@media (max-width: 76rem) {
	.nav-toggle {
		display: inline-flex;
		margin-left: auto;
		position: relative;
		z-index: calc(var(--tf-z-menu) + 1);
	}

	.site-navigation {
		align-items: stretch;
		background: var(--tf-surface);
		bottom: 0;
		display: flex;
		flex-direction: column;
		gap: 0;
		justify-content: flex-start;
		opacity: 0;
		overflow-y: auto;
		padding: var(--tf-space-4) var(--tf-gutter) var(--tf-space-8);
		pointer-events: none;
		position: fixed;
		right: 0;
		top: calc(var(--tf-admin-bar-height) + var(--tf-header-height));
		transform: translateX(1rem);
		transition:
			opacity var(--tf-duration) var(--tf-ease),
			transform var(--tf-duration) var(--tf-ease),
			visibility var(--tf-duration) var(--tf-ease);
		visibility: hidden;
		width: min(28rem, 100%);
		z-index: var(--tf-z-menu);
	}

	.nav-open .site-navigation {
		opacity: 1;
		pointer-events: auto;
		transform: translateX(0);
		visibility: visible;
	}

	.menu--primary {
		align-items: stretch;
		display: grid;
		width: 100%;
	}

	.menu--primary > .menu-item {
		border-bottom: 1px solid var(--tf-border);
		display: grid;
		grid-template-columns: minmax(0, 1fr) 3rem;
	}

	.menu--primary > .menu-item > a {
		font-size: var(--tf-text-base);
		padding: 1rem 0.25rem;
		white-space: normal;
	}

	.menu--primary > .menu-item:not(.menu-item-has-children) > a {
		grid-column: 1 / -1;
	}

	.menu--primary > .menu-item > a[aria-current="page"]::after,
	.menu--primary > .current-menu-ancestor > a::after {
		bottom: 0.55rem;
		left: 0.25rem;
		right: auto;
		width: 2rem;
	}

	.submenu-toggle {
		height: auto;
		width: 3rem;
	}

	.submenu-toggle[aria-expanded="true"] svg {
		transform: rotate(180deg);
	}

	.sub-menu {
		border: 0;
		border-radius: 0;
		box-shadow: none;
		display: none;
		grid-column: 1 / -1;
		margin-bottom: 0.75rem;
		min-width: 0;
		opacity: 1;
		padding: 0 0 0.5rem 0.75rem;
		position: static;
		transform: none;
		visibility: visible;
	}

	.is-submenu-open > .sub-menu {
		display: grid;
	}

	.sub-menu a {
		padding: 0.65rem 0.5rem;
	}

	.site-navigation__actions {
		align-items: stretch;
		display: grid;
		gap: var(--tf-space-3);
		margin-top: var(--tf-space-8);
	}

	.header-login {
		align-items: center;
		border: 1px solid var(--tf-border);
		border-radius: var(--tf-radius-sm);
		display: flex;
		justify-content: center;
		min-height: 3rem;
	}

	.site-navigation__actions .button {
		width: 100%;
	}
}

@media (max-width: 62rem) {
	.home-hero__grid {
		gap: var(--tf-space-16);
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.home-hero__content {
		max-width: 48rem;
	}

	.home-hero h1 {
		max-width: 11ch;
	}

	.decision-panel {
		max-width: 42rem;
		width: 100%;
	}

	.insight-section__grid {
		gap: var(--tf-space-16);
		grid-template-columns: 1fr;
	}

	.insight-visual {
		max-width: 42rem;
		order: 2;
		width: 100%;
	}

	.insight-copy {
		max-width: 44rem;
	}

	.post-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.post-grid > :last-child:nth-child(odd) {
		grid-column: 1 / -1;
		max-width: calc(50% - (var(--tf-space-6) / 2));
	}

	.footer-grid {
		grid-template-columns: 1.5fr repeat(2, 1fr);
	}

	.footer-brand {
		grid-column: 1 / -1;
	}

	.expert-section__grid {
		grid-template-columns: 1fr;
	}

	.tools-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 52rem) {
	.section-heading--split,
	.archive-hero__grid {
		align-items: start;
		gap: var(--tf-space-5);
		grid-template-columns: 1fr;
	}

	.trust-strip__grid {
		grid-template-columns: 1fr;
		padding-block: 0.4rem;
	}

	.trust-strip p {
		padding-inline: 0;
	}

	.trust-strip p + p {
		border-left: 0;
		border-top: 1px solid var(--tf-border);
	}

	.process-list {
		grid-template-columns: 1fr;
	}

	.process-list li {
		grid-template-columns: 2.5rem 1fr;
		padding: var(--tf-space-6) 0;
	}

	.process-list li + li {
		border-left: 0;
		padding-left: 0;
	}

	.footer-cta {
		align-items: start;
		grid-template-columns: 1fr;
	}
}

@media (max-width: 44rem) {
	:root {
		--tf-gutter: clamp(1rem, 5vw, 1.35rem);
	}

	.section {
		padding-block: clamp(3.75rem, 13vw, 5rem);
	}

	.service-grid,
	.post-grid,
	.tools-grid {
		grid-template-columns: 1fr;
	}

	.service-card {
		min-height: 0;
	}

	.post-grid > :last-child:nth-child(odd) {
		grid-column: auto;
		max-width: none;
	}

	.footer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.footer-brand {
		grid-column: 1 / -1;
	}

	.footer-bottom {
		align-items: start;
		flex-direction: column;
	}

	.post-navigation {
		grid-template-columns: 1fr;
	}

	.post-navigation > div:last-child {
		text-align: left;
	}

	.page-application:has(.tf-endeks-lock-clean) {
		padding-block: var(--tf-space-6);
	}

	.page-application .tf-endeks-lock-clean {
		border-radius: var(--tf-radius-lg);
	}

	.tf-endeks-lock-clean .tf-profile-card-clean {
		border-radius: calc(var(--tf-radius-lg) - 1px);
		min-height: 0;
		padding: var(--tf-space-6);
	}

	.tf-endeks-lock-clean .tf-profile-actions-clean {
		display: grid;
		grid-template-columns: 1fr;
	}

	.tf-endeks-lock-clean .tf-profile-actions-clean :where(a, button) {
		width: 100%;
	}
}

@media (max-width: 40rem) {
	:root {
		--tf-header-height: 4.25rem;
	}

	.site-header__inner {
		gap: var(--tf-space-3);
	}

	.site-brand__mark {
		height: 2rem;
		width: 2rem;
	}

	.site-brand__name {
		font-size: 1.08rem;
	}

	.site-brand__image {
		max-width: 9.5rem;
	}

	.nav-toggle {
		min-height: 2.5rem;
	}

	.home-hero__grid {
		gap: var(--tf-space-12);
		padding-block: 4rem;
	}

	.home-hero h1 {
		font-size: clamp(2.5rem, 13vw, 4rem);
	}

	.button-group {
		align-items: stretch;
		flex-direction: column;
	}

	.button-group .button {
		width: 100%;
	}

	.hero-assurances {
		align-items: flex-start;
		flex-direction: column;
	}

	.decision-panel__chart {
		height: 9rem;
	}

	.service-card__icon {
		margin-bottom: var(--tf-space-8);
	}

	.search-form__row {
		align-items: stretch;
		flex-direction: column;
	}

	.footer-grid {
		grid-template-columns: 1fr;
	}

	.expert-profile {
		grid-template-columns: 3.5rem minmax(0, 1fr);
		padding: 1.35rem;
	}

	.expert-profile__avatar {
		font-size: 1.5rem;
		height: 3.5rem;
		width: 3.5rem;
	}

	.expert-profile__skills {
		grid-template-columns: 1fr;
	}

	.footer-brand {
		grid-column: auto;
	}

	.comment-list .children {
		padding-left: var(--tf-space-4);
	}
}

@media (max-width: 70rem) {
	.tools-hero,
	.calculator-hero {
		min-height: 0;
	}

	.tools-hero__grid,
	.calculator-hero__grid {
		align-items: start;
		grid-template-columns: minmax(0, 1fr);
	}

	.tools-hero__copy,
	.calculator-hero__copy {
		max-width: 48rem;
	}

	.tools-hero__board,
	.calculator-hero__panel {
		max-width: 46rem;
		width: 100%;
	}

	.tools-directory__controls {
		grid-template-columns: minmax(17rem, 0.9fr) minmax(23rem, 1.1fr);
	}

	.tools-directory__count {
		grid-column: 1 / -1;
		grid-template-columns: auto auto;
		justify-content: end;
		justify-items: start;
	}
}

@media (max-width: 52rem) {
	.tools-directory__heading,
	.tools-method {
		align-items: start;
		grid-template-columns: minmax(0, 1fr);
	}

	.tools-directory__controls {
		align-items: stretch;
		grid-template-columns: minmax(0, 1fr);
	}

	.tools-directory__count {
		grid-column: auto;
		justify-content: start;
	}

	.tool-workspace__heading {
		align-items: flex-start;
		flex-direction: column;
	}

	.tool-workspace__badges {
		justify-content: flex-start;
	}

	.calculator-note__inner {
		align-items: start;
		grid-template-columns: auto minmax(0, 1fr);
	}

	.calculator-note .text-link {
		grid-column: 2;
	}
}

@media (max-width: 44rem) {
	.tools-hero,
	.calculator-hero {
		padding-block: 1.5rem 4.5rem;
	}

	.tools-hero .breadcrumbs,
	.calculator-hero .breadcrumbs {
		margin-bottom: 2.5rem;
	}

	.tools-hero h1,
	.calculator-hero h1 {
		font-size: clamp(2.55rem, 12.5vw, 4rem);
		line-height: 1.01;
	}

	.tools-hero__grid,
	.calculator-hero__grid {
		gap: 3rem;
	}

	.tools-hero__actions,
	.calculator-hero__actions {
		align-items: stretch;
		flex-direction: column;
	}

	.tools-hero__actions .button,
	.calculator-hero__actions .button {
		width: 100%;
	}

	.tools-hero__index-link {
		justify-content: center;
		min-height: 2.75rem;
	}

	.tools-hero__facts {
		display: grid;
		gap: 1rem;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.tools-hero__facts li {
		padding-left: 0.75rem;
	}

	.tools-hero__facts span {
		line-height: 1.3;
	}

	.tools-hero__board,
	.calculator-hero__panel {
		padding: 1.15rem;
	}

	.tools-hero__board-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.tools-hero__board-grid a {
		min-height: 4.5rem;
	}

	.calculator-hero__assurances {
		align-items: flex-start;
		flex-direction: column;
	}

	.tools-directory {
		padding-block: 4rem;
	}

	.tools-directory__heading {
		gap: 1rem;
	}

	.tools-directory__controls {
		border-radius: 1.1rem;
		padding: 0.9rem;
	}

	.tools-filters {
		flex-wrap: nowrap;
		margin-inline: -0.9rem;
		overflow-x: auto;
		padding: 0 0.9rem 0.35rem;
		scrollbar-width: thin;
	}

	.tools-filters button {
		flex: 0 0 auto;
	}

	.tool-card {
		min-height: 19rem;
	}

	.tool-card__topline {
		margin-bottom: 2.5rem;
	}

	.tools-method {
		padding: 1.4rem;
	}

	.tool-workspace {
		padding-block: 4rem;
	}

	.calculator-note__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.calculator-note__mark {
		height: 2.3rem;
		width: 2.3rem;
	}

	.calculator-note .text-link {
		grid-column: auto;
		white-space: normal;
	}
}

@media (max-width: 23.5rem) {
	.nav-toggle__label {
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}

	.site-brand__name {
		font-size: 1rem;
	}

	.site-brand__image {
		max-width: 8.25rem;
	}

	.expert-profile .button-group {
		align-items: stretch;
	}

	.expert-profile__link {
		justify-content: center;
	}

	.decision-panel {
		padding: 1.2rem;
	}

	.decision-panel__header {
		align-items: start;
		flex-direction: column;
	}

	.comparison-row {
		grid-template-columns: 1.25rem 1fr 2.25rem;
	}
}

/* ==========================================================================
   Altın & BTC decision studio
   ========================================================================== */

.metals-app {
	--metal-gold: #d7a52f;
	--metal-gold-bright: #f3cd72;
	--metal-gold-soft: #fff4d6;
	--metal-gold-ink: #5b3c03;
	--metal-bitcoin: #f7931a;
	--metal-bitcoin-bright: #ffbd69;
	--metal-bitcoin-soft: #fff1df;
	--metal-bitcoin-ink: #542700;
	--metal-night: #061827;
	--metal-night-soft: #0b2538;
	background: #f5f7f6;
	color: var(--tf-text);
	overflow: clip;
}

.metals-app :where(a, button) {
	-webkit-tap-highlight-color: transparent;
}

.metals-breadcrumbs {
	align-items: center;
	color: rgba(255, 255, 255, 0.62);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.78rem;
	font-weight: 680;
	gap: 0.6rem;
	letter-spacing: 0.03em;
	margin-bottom: clamp(2.25rem, 5vw, 4rem);
}

.metals-breadcrumbs a {
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
	transition: color var(--tf-duration) var(--tf-ease);
}

.metals-breadcrumbs a:hover {
	color: #fff;
}

.metals-breadcrumbs [aria-current="page"] {
	color: #fff;
}

.metals-hero {
	background:
		radial-gradient(circle at 83% 10%, rgba(215, 165, 47, 0.2), transparent 26rem),
		radial-gradient(circle at 68% 85%, rgba(247, 147, 26, 0.16), transparent 27rem),
		linear-gradient(145deg, #051521 0%, #092338 57%, #061a2a 100%);
	color: #fff;
	padding: clamp(1.25rem, 2vw, 2rem) 0 clamp(5rem, 9vw, 8.25rem);
	position: relative;
}

.metals-hero::before,
.metals-hero::after {
	content: "";
	pointer-events: none;
	position: absolute;
}

.metals-hero::before {
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
	background-size: 4rem 4rem;
	inset: 0;
	mask-image: linear-gradient(to bottom, #000 0%, transparent 86%);
}

.metals-hero::after {
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 50%;
	height: 38rem;
	right: -20rem;
	top: -16rem;
	width: 38rem;
}

.metals-hero .container {
	position: relative;
	z-index: 1;
}

.metals-hero__grid {
	align-items: center;
	display: grid;
	gap: clamp(2.5rem, 6vw, 6.5rem);
	grid-template-columns: minmax(0, 1.02fr) minmax(25rem, 0.98fr);
	min-height: 36rem;
}

.metals-hero__content {
	max-width: 43rem;
}

.metals-hero__content h1 {
	color: #fff;
	font-size: clamp(3.2rem, 6.4vw, 6rem);
	font-weight: 780;
	letter-spacing: -0.065em;
	line-height: 0.96;
	margin-bottom: 1.65rem;
	text-wrap: balance;
}

.metals-hero__lead {
	color: rgba(237, 244, 248, 0.76);
	font-size: clamp(1.02rem, 1.6vw, 1.22rem);
	font-weight: 510;
	line-height: 1.75;
	margin-bottom: 2rem;
	max-width: 39rem;
}

.metals-hero__actions,
.metal-lock__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.metals-button {
	border: 1px solid transparent;
	gap: 0.65rem;
	min-height: 3.25rem;
	padding-inline: 1.3rem;
	text-decoration: none;
}

.metals-button svg,
.metal-path__link svg,
.metals-method__intro > a svg,
.metal-detail__back svg,
.metal-next__shell > a svg {
	flex: 0 0 auto;
	transition: transform var(--tf-duration) var(--tf-ease);
}

.metals-button:hover svg,
.metal-path__link:hover svg,
.metals-method__intro > a:hover svg,
.metal-detail__back:hover svg,
.metal-next__shell > a:hover svg {
	transform: translateX(0.25rem);
}

.metals-button--gold {
	background: linear-gradient(135deg, #f0cb70, #c99019);
	box-shadow: 0 1rem 2.5rem rgba(200, 143, 23, 0.24);
	color: #2e2108;
}

.metals-button--gold:hover {
	background: linear-gradient(135deg, #f7d986, #d9a932);
	color: #211706;
	transform: translateY(-2px);
}

.metals-button--bitcoin {
	background: rgba(247, 147, 26, 0.13);
	border-color: rgba(255, 189, 105, 0.46);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
	color: #ffe1b9;
}

.metals-button--bitcoin:hover {
	background: rgba(247, 147, 26, 0.21);
	border-color: rgba(255, 205, 140, 0.7);
	color: #fff;
	transform: translateY(-2px);
}

.metals-button--outline:hover {
	background: rgba(235, 241, 246, 0.16);
	border-color: rgba(255, 255, 255, 0.5);
	color: #fff;
	transform: translateY(-2px);
}

.metals-button--outline {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.25);
	color: #fff;
}

.metals-hero__facts {
	display: grid;
	gap: 0;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: clamp(2.75rem, 6vw, 4.5rem) 0 0;
	padding: 0;
}

.metals-hero__facts li {
	border-left: 1px solid rgba(255, 255, 255, 0.14);
	display: grid;
	gap: 0.3rem;
	padding: 0 1.25rem;
}

.metals-hero__facts li:first-child {
	border-left: 0;
	padding-left: 0;
}

.metals-hero__facts strong {
	color: #fff;
	font-family: var(--tf-font-serif);
	font-size: 1.75rem;
	font-weight: 680;
	line-height: 1;
}

.metals-hero__facts span {
	color: rgba(226, 236, 243, 0.6);
	font-size: 0.73rem;
	font-weight: 650;
	line-height: 1.35;
}

.metals-hero__stage {
	aspect-ratio: 1 / 0.9;
	background:
		linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)),
		#071b2d;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 2.1rem;
	box-shadow: 0 2.5rem 7rem rgba(0, 0, 0, 0.35);
	display: flex;
	flex-direction: column;
	isolation: isolate;
	justify-content: space-between;
	min-height: 31rem;
	overflow: hidden;
	padding: clamp(1.35rem, 3vw, 2.25rem);
	position: relative;
}

.metals-hero__texture {
	height: 100%;
	inset: 0;
	object-fit: cover;
	opacity: 0.16;
	position: absolute;
	width: 100%;
	z-index: -2;
}

.metals-hero__stage::after {
	background: linear-gradient(180deg, rgba(5, 20, 33, 0.42), rgba(5, 20, 33, 0.92));
	content: "";
	inset: 0;
	position: absolute;
	z-index: -1;
}

.metals-hero__glow {
	background: radial-gradient(circle, rgba(226, 180, 69, 0.32), transparent 67%);
	height: 26rem;
	left: 50%;
	position: absolute;
	top: 46%;
	transform: translate(-50%, -50%);
	width: 26rem;
	z-index: -1;
}

.metals-hero__stage-label {
	align-items: center;
	color: rgba(237, 244, 248, 0.68);
	display: flex;
	font-size: 0.7rem;
	font-weight: 760;
	gap: 0.65rem;
	letter-spacing: 0.16em;
	margin: 0;
	text-transform: uppercase;
}

.metals-hero__stage-label::before {
	background: var(--metal-gold-bright);
	border-radius: 50%;
	box-shadow: 0 0 0 0.3rem rgba(243, 205, 114, 0.12);
	content: "";
	height: 0.45rem;
	width: 0.45rem;
}

.metals-hero__tokens {
	align-items: center;
	display: grid;
	gap: 0.8rem;
	grid-template-columns: 1fr 3rem 1fr;
	margin-block: auto;
	padding-block: 2.25rem;
}

.metal-token {
	align-items: center;
	aspect-ratio: 1;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: auto;
	max-width: 12.5rem;
	position: relative;
	text-decoration: none;
	transition:
		transform 240ms var(--tf-ease),
		box-shadow 240ms var(--tf-ease);
	width: 100%;
}

.metal-token::before,
.metal-token::after {
	border: 1px solid currentColor;
	border-radius: inherit;
	content: "";
	inset: 0.52rem;
	opacity: 0.34;
	position: absolute;
}

.metal-token::after {
	inset: 0.9rem;
	opacity: 0.18;
}

.metal-token:hover {
	transform: translateY(-0.4rem) rotate(-1deg);
}

.metal-token > span {
	font-size: 0.62rem;
	font-weight: 730;
	left: 50%;
	letter-spacing: 0.08em;
	position: absolute;
	top: 1.75rem;
	transform: translateX(-50%);
}

.metal-token strong {
	color: currentColor;
	font-family: var(--tf-font-serif);
	font-size: clamp(3.3rem, 5vw, 5.25rem);
	font-weight: 600;
	letter-spacing: -0.06em;
	line-height: 0.9;
}

.metal-token small {
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.22em;
	margin-top: 0.65rem;
}

.metal-token--gold {
	background:
		radial-gradient(circle at 32% 26%, #fff1bd, transparent 15%),
		linear-gradient(145deg, #f1ce77, #b8780d 78%);
	border: 1px solid #ffe29a;
	box-shadow:
		inset 0 0 2.5rem rgba(93, 53, 0, 0.25),
		0 1.6rem 3.5rem rgba(193, 129, 9, 0.23);
	color: #5a3c06;
}

.metal-token--gold:hover {
	box-shadow:
		inset 0 0 2.5rem rgba(93, 53, 0, 0.2),
		0 2rem 4.5rem rgba(212, 156, 37, 0.34);
	color: #4b3104;
}

.metal-token--bitcoin {
	background:
		radial-gradient(circle at 32% 26%, #ffe3b7, transparent 15%),
		linear-gradient(145deg, #ffb34f, #d56700 78%);
	border: 1px solid #ffc978;
	box-shadow:
		inset 0 0 2.5rem rgba(91, 39, 0, 0.23),
		0 1.6rem 3.5rem rgba(247, 147, 26, 0.25);
	color: #4b2200;
}

.metal-token--bitcoin:hover {
	box-shadow:
		inset 0 0 2.5rem rgba(91, 39, 0, 0.17),
		0 2rem 4.5rem rgba(247, 147, 26, 0.36);
	color: #351700;
}

.metals-hero__axis {
	align-items: center;
	display: flex;
	justify-content: center;
}

.metals-hero__axis span {
	background: rgba(255, 255, 255, 0.22);
	height: 1px;
	width: 0.8rem;
}

.metals-hero__axis i {
	background: #fff;
	border: 0.35rem solid rgba(255, 255, 255, 0.12);
	background-clip: padding-box;
	border-radius: 50%;
	height: 1rem;
	margin-inline: 0.2rem;
	width: 1rem;
}

.metals-hero__signals {
	display: grid;
	gap: 0.65rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.metals-hero__signals span {
	align-items: center;
	background: rgba(255, 255, 255, 0.055);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 999px;
	color: rgba(236, 243, 248, 0.7);
	display: flex;
	font-size: 0.68rem;
	font-weight: 670;
	gap: 0.5rem;
	min-height: 2rem;
	padding-inline: 0.7rem;
}

.metals-hero__signals i {
	background: #52d3a4;
	border-radius: 50%;
	box-shadow: 0 0 0 0.22rem rgba(82, 211, 164, 0.11);
	height: 0.35rem;
	width: 0.35rem;
}

.metals-principles {
	background: #fff;
	border-bottom: 1px solid var(--tf-border);
	box-shadow: var(--tf-shadow-sm);
}

.metals-principles__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.metals-principles__list li {
	align-items: flex-start;
	border-left: 1px solid var(--tf-border);
	display: grid;
	gap: 1rem;
	grid-template-columns: auto 1fr;
	padding: 1.45rem clamp(1rem, 3vw, 2rem);
}

.metals-principles__list li:first-child {
	border-left: 0;
	padding-left: 0;
}

.metals-principles__list li:last-child {
	padding-right: 0;
}

.metals-principles__list li > span {
	color: var(--tf-accent-600);
	font-family: var(--tf-font-serif);
	font-size: 1.35rem;
	font-weight: 680;
	line-height: 1;
}

.metals-principles__list div {
	display: grid;
	gap: 0.2rem;
}

.metals-principles__list strong {
	font-size: 0.85rem;
}

.metals-principles__list small {
	color: var(--tf-muted);
	font-size: 0.74rem;
	line-height: 1.5;
}

.metal-paths {
	background:
		radial-gradient(circle at 4% 9%, rgba(216, 169, 58, 0.09), transparent 20rem),
		#f5f7f6;
	padding-block: clamp(5rem, 9vw, 8.5rem);
}

.metal-paths__heading,
.metal-signals__heading,
.metal-analysis__heading {
	align-items: end;
	display: grid;
	gap: 2rem;
	grid-template-columns: minmax(0, 1.2fr) minmax(17rem, 0.8fr);
	margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.metal-paths__heading h2,
.metal-signals__heading h2,
.metal-analysis__heading h2 {
	font-size: clamp(2.15rem, 4.4vw, 4.4rem);
	font-weight: 760;
	letter-spacing: -0.055em;
	line-height: 1.02;
	margin-bottom: 0;
	max-width: 50rem;
	text-wrap: balance;
}

.metal-paths__heading > p,
.metal-signals__heading > p {
	color: var(--tf-muted);
	font-size: 0.96rem;
	line-height: 1.7;
	margin: 0;
}

.metal-paths__grid {
	display: grid;
	gap: clamp(1rem, 3vw, 1.75rem);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.metal-path {
	border: 1px solid var(--tf-border);
	border-radius: 1.8rem;
	box-shadow: var(--tf-shadow-sm);
	display: flex;
	flex-direction: column;
	min-height: 34rem;
	overflow: hidden;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	position: relative;
	transition:
		border-color var(--tf-duration) var(--tf-ease),
		box-shadow var(--tf-duration) var(--tf-ease),
		transform var(--tf-duration) var(--tf-ease);
}

.metal-path::before {
	content: "";
	height: 0.25rem;
	inset: 0 0 auto;
	position: absolute;
}

.metal-path:hover {
	box-shadow: var(--tf-shadow-md);
	transform: translateY(-0.35rem);
}

.metal-path--gold {
	background:
		radial-gradient(circle at 94% 6%, rgba(226, 184, 82, 0.23), transparent 15rem),
		linear-gradient(155deg, #fff 20%, #fffaf0 100%);
}

.metal-path--gold::before {
	background: linear-gradient(90deg, #c28a1c, #f0cc72);
}

.metal-path--gold:hover {
	border-color: rgba(184, 130, 22, 0.42);
}

.metal-path--bitcoin {
	background:
		radial-gradient(circle at 94% 6%, rgba(247, 147, 26, 0.2), transparent 15rem),
		linear-gradient(155deg, #fff 20%, #fff6eb 100%);
}

.metal-path--bitcoin::before {
	background: linear-gradient(90deg, #dc7307, #ffc06f);
}

.metal-path--bitcoin:hover {
	border-color: rgba(220, 115, 7, 0.42);
}

.metal-path__top {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: clamp(3rem, 7vw, 5.5rem);
}

.metal-path__symbol {
	align-items: center;
	background: var(--metal-night);
	border-radius: 50%;
	color: #fff;
	display: inline-flex;
	font-family: var(--tf-font-serif);
	font-size: 1.55rem;
	height: 4rem;
	justify-content: center;
	line-height: 1;
	width: 4rem;
}

.metal-path--gold .metal-path__symbol {
	background: linear-gradient(145deg, #e8bd59, #a66c08);
	color: #382402;
}

.metal-path--bitcoin .metal-path__symbol {
	background: linear-gradient(145deg, #ffb24b, #d56700);
	box-shadow: 0 0.9rem 2rem rgba(247, 147, 26, 0.18);
	color: #421e00;
}

.metal-path__status {
	align-items: center;
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid var(--tf-border);
	border-radius: 999px;
	color: var(--tf-muted);
	display: inline-flex;
	font-size: 0.68rem;
	font-weight: 720;
	gap: 0.5rem;
	min-height: 2rem;
	padding-inline: 0.75rem;
}

.metal-path__status i {
	background: var(--tf-success);
	border-radius: 50%;
	height: 0.4rem;
	width: 0.4rem;
}

.metal-path__eyebrow {
	color: var(--tf-subtle);
	font-size: 0.72rem;
	font-weight: 760;
	letter-spacing: 0.16em;
	margin-bottom: 0.75rem;
	text-transform: uppercase;
}

.metal-path h3 {
	font-size: clamp(2rem, 3.6vw, 3.5rem);
	font-weight: 760;
	letter-spacing: -0.055em;
	line-height: 1.02;
	margin-bottom: 1.1rem;
	max-width: 31rem;
}

.metal-path > p:not(.metal-path__eyebrow) {
	color: var(--tf-muted);
	line-height: 1.7;
	max-width: 34rem;
}

.metal-path__factors {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
}

.metal-path__factors li {
	background: rgba(255, 255, 255, 0.76);
	border: 1px solid var(--tf-border);
	border-radius: 999px;
	color: var(--tf-text);
	font-size: 0.68rem;
	font-weight: 680;
	padding: 0.35rem 0.65rem;
}

.metal-path__link {
	align-items: center;
	border-top: 1px solid var(--tf-border);
	color: var(--tf-ink);
	display: flex;
	font-size: 0.88rem;
	font-weight: 750;
	gap: 0.6rem;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 1.3rem;
	text-decoration: none;
}

.metal-path--gold .metal-path__link:hover {
	color: #8a5c08;
}

.metal-path--bitcoin .metal-path__link:hover {
	color: #bd5e00;
}

.metals-method {
	background: #f5f7f6;
	padding: 0 0 clamp(5rem, 9vw, 8.5rem);
}

.metals-method__shell {
	background:
		radial-gradient(circle at 8% 15%, rgba(215, 165, 47, 0.16), transparent 20rem),
		linear-gradient(145deg, #061827, #0b2b40);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 2rem;
	box-shadow: 0 2rem 5rem rgba(5, 24, 39, 0.18);
	color: #fff;
	display: grid;
	gap: clamp(2.5rem, 6vw, 6rem);
	grid-template-columns: minmax(0, 0.9fr) minmax(24rem, 1.1fr);
	overflow: hidden;
	padding: clamp(2rem, 6vw, 5rem);
	position: relative;
}

.metals-method__intro h2 {
	color: #fff;
	font-size: clamp(2.15rem, 4vw, 4rem);
	font-weight: 750;
	letter-spacing: -0.055em;
	line-height: 1.03;
	margin-bottom: 2rem;
	text-wrap: balance;
}

.metals-method__intro > a {
	align-items: center;
	color: var(--metal-gold-bright);
	display: inline-flex;
	font-size: 0.82rem;
	font-weight: 720;
	gap: 0.55rem;
	min-height: 2.75rem;
	text-decoration: none;
}

.metals-method__steps {
	display: grid;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.metals-method__steps li {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	display: grid;
	gap: 1.1rem;
	grid-template-columns: 2.2rem 1fr;
	padding: 1.5rem 0;
}

.metals-method__steps li:first-child {
	border-top: 0;
	padding-top: 0;
}

.metals-method__steps > li > span {
	color: var(--metal-gold-bright);
	font-family: var(--tf-font-serif);
	font-size: 1.25rem;
	line-height: 1.1;
}

.metals-method__steps strong {
	color: #fff;
	display: block;
	font-size: 0.98rem;
	margin-bottom: 0.3rem;
}

.metals-method__steps p {
	color: rgba(228, 237, 243, 0.66);
	font-size: 0.82rem;
	line-height: 1.6;
	margin: 0;
}

/* Metal detail and membership states. */

.metal-detail__hero,
.metal-lock__section {
	background:
		radial-gradient(circle at 78% 12%, var(--metal-hero-glow, rgba(215, 165, 47, 0.18)), transparent 28rem),
		linear-gradient(145deg, #051521, #0a2a40);
	color: #fff;
	padding: clamp(1.25rem, 2vw, 2rem) 0 clamp(4.5rem, 8vw, 7.25rem);
	position: relative;
}

.metal-detail--btc,
.metal-lock--btc {
	--metal-hero-glow: rgba(247, 147, 26, 0.2);
}

.metal-detail__hero-grid {
	align-items: center;
	display: grid;
	gap: clamp(2.5rem, 7vw, 7rem);
	grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr);
	min-height: 29rem;
}

.metal-detail__hero-content h1,
.metal-lock__content h1 {
	color: #fff;
	font-size: clamp(3rem, 6vw, 5.75rem);
	font-weight: 770;
	letter-spacing: -0.065em;
	line-height: 0.98;
	margin-bottom: 1.5rem;
	max-width: 47rem;
	text-wrap: balance;
}

.metal-detail__hero-content > p:not(.eyebrow),
.metal-lock__content > p:not(.eyebrow, .metal-lock__privacy) {
	color: rgba(231, 240, 246, 0.72);
	font-size: clamp(1rem, 1.6vw, 1.18rem);
	line-height: 1.75;
	max-width: 44rem;
}

.metal-detail__hero-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem;
	margin-top: 2rem;
}

.metal-detail__back {
	align-items: center;
	color: rgba(239, 245, 249, 0.78);
	display: inline-flex;
	font-size: 0.8rem;
	font-weight: 680;
	gap: 0.5rem;
	min-height: 2.75rem;
	text-decoration: none;
}

.metal-detail__back:hover {
	color: #fff;
}

.metal-detail__score {
	background:
		linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035));
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 1.75rem;
	box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.25);
	padding: clamp(1.35rem, 3vw, 2rem);
}

.metal-detail__score-head {
	align-items: center;
	display: flex;
	gap: 1rem;
	margin-bottom: 2.5rem;
}

.metal-detail__symbol,
.metal-lock__symbol,
.metal-next__symbol {
	align-items: center;
	background: linear-gradient(145deg, #efca70, #af770d);
	border: 1px solid rgba(255, 231, 164, 0.8);
	border-radius: 50%;
	box-shadow:
		inset 0 0 1.5rem rgba(80, 47, 0, 0.2),
		0 1rem 2.25rem rgba(188, 127, 12, 0.2);
	color: #3d2904;
	display: inline-flex;
	flex: 0 0 auto;
	font-family: var(--tf-font-serif);
	font-size: 1.75rem;
	height: 4.75rem;
	justify-content: center;
	line-height: 1;
	width: 4.75rem;
}

.metal-detail--btc .metal-detail__symbol,
.metal-lock--btc .metal-lock__symbol {
	background: linear-gradient(145deg, #ffb24b, #d56700);
	border-color: rgba(255, 203, 135, 0.9);
	box-shadow:
		inset 0 0 1.5rem rgba(91, 39, 0, 0.2),
		0 1rem 2.25rem rgba(247, 147, 26, 0.22);
	color: #421e00;
}

.metal-detail__score-head div {
	display: grid;
}

.metal-detail__score-head small {
	color: rgba(230, 239, 245, 0.58);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.metal-detail__score-head strong {
	color: #fff;
	font-family: var(--tf-font-serif);
	font-size: 1.65rem;
}

.metal-detail__score-grid {
	display: grid;
	gap: 0.5rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.metal-detail__score-grid > div {
	background: rgba(255, 255, 255, 0.055);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 1rem;
	display: grid;
	gap: 0.2rem;
	min-width: 0;
	padding: 0.85rem;
}

.metal-detail__score-grid strong {
	color: #fff;
	font-size: 1.6rem;
	line-height: 1;
}

.metal-detail__score-grid small {
	color: rgba(230, 239, 245, 0.56);
	font-size: 0.64rem;
}

.signal-dot {
	border-radius: 50%;
	height: 0.42rem;
	margin-bottom: 0.45rem;
	width: 0.42rem;
}

.signal-dot--up {
	background: #4ed49f;
	box-shadow: 0 0 0 0.25rem rgba(78, 212, 159, 0.1);
}

.signal-dot--down {
	background: #ff7b75;
	box-shadow: 0 0 0 0.25rem rgba(255, 123, 117, 0.1);
}

.signal-dot--flat {
	background: #b4c2cf;
	box-shadow: 0 0 0 0.25rem rgba(180, 194, 207, 0.1);
}

.metal-detail__score > p {
	align-items: center;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	color: rgba(230, 239, 245, 0.52);
	display: flex;
	font-size: 0.67rem;
	gap: 0.55rem;
	margin: 1rem 0 0;
	padding-top: 1rem;
}

.metal-detail__score > p > span {
	background: #4ed49f;
	border-radius: 50%;
	height: 0.4rem;
	width: 0.4rem;
}

.metal-detail__truth {
	background: #fff;
	border-bottom: 1px solid var(--tf-border);
	box-shadow: var(--tf-shadow-sm);
}

.metal-detail__truth ul {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.metal-detail__truth li {
	align-items: baseline;
	border-left: 1px solid var(--tf-border);
	display: flex;
	gap: 0.7rem;
	padding: 1.25rem clamp(1rem, 3vw, 2rem);
}

.metal-detail__truth li:first-child {
	border-left: 0;
	padding-left: 0;
}

.metal-detail__truth li:last-child {
	padding-right: 0;
}

.metal-detail__truth strong {
	font-family: var(--tf-font-serif);
	font-size: 1.4rem;
}

.metal-detail__truth span {
	color: var(--tf-muted);
	font-size: 0.7rem;
	font-weight: 650;
	line-height: 1.35;
}

.metal-signals {
	background:
		radial-gradient(circle at 95% 4%, rgba(215, 165, 47, 0.08), transparent 22rem),
		#f5f7f6;
	padding-block: clamp(5rem, 9vw, 8rem);
}

.metal-detail--btc .metal-signals {
	background:
		radial-gradient(circle at 95% 4%, rgba(247, 147, 26, 0.13), transparent 22rem),
		#f5f7f6;
}

.metal-signals__grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.metal-signal {
	--signal-color: var(--tf-subtle);
	background: #fff;
	border: 1px solid var(--tf-border);
	border-radius: 1.35rem;
	box-shadow: var(--tf-shadow-sm);
	display: flex;
	flex-direction: column;
	min-height: 18.5rem;
	overflow: hidden;
	padding: 1.35rem;
	position: relative;
	transition:
		border-color var(--tf-duration) var(--tf-ease),
		box-shadow var(--tf-duration) var(--tf-ease),
		transform var(--tf-duration) var(--tf-ease);
}

.metal-signal::before {
	background: var(--signal-color);
	content: "";
	height: 0.2rem;
	inset: 0 0 auto;
	opacity: 0.75;
	position: absolute;
}

.metal-signal:hover {
	border-color: color-mix(in srgb, var(--signal-color), #fff 65%);
	box-shadow: var(--tf-shadow-md);
	transform: translateY(-0.25rem);
}

.metal-signal--up {
	--signal-color: var(--tf-success);
}

.metal-signal--down {
	--signal-color: var(--tf-error);
}

.metal-signal__head {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 2rem;
}

.metal-signal__index {
	color: var(--tf-subtle);
	font-family: var(--tf-font-serif);
	font-size: 0.86rem;
}

.metal-signal__status {
	align-items: center;
	background: color-mix(in srgb, var(--signal-color), #fff 91%);
	border: 1px solid color-mix(in srgb, var(--signal-color), #fff 76%);
	border-radius: 999px;
	color: var(--signal-color);
	display: inline-flex;
	font-size: 0.64rem;
	font-weight: 730;
	gap: 0.4rem;
	min-height: 1.8rem;
	padding-inline: 0.65rem;
}

.metal-signal__status i {
	background: currentColor;
	border-radius: 50%;
	height: 0.35rem;
	width: 0.35rem;
}

.metal-signal h3 {
	font-size: clamp(1.15rem, 2vw, 1.45rem);
	font-weight: 730;
	line-height: 1.18;
	margin-bottom: 1rem;
}

.metal-signal__value {
	color: var(--tf-ink);
	font-family: var(--tf-font-serif);
	font-size: clamp(2.05rem, 3.5vw, 3rem);
	font-weight: 680;
	letter-spacing: -0.04em;
	line-height: 1;
	margin-bottom: 1.1rem;
}

.metal-signal > p {
	border-top: 1px solid var(--tf-border);
	color: var(--tf-muted);
	font-size: 0.76rem;
	line-height: 1.55;
	margin: auto 0 0;
	padding-top: 1rem;
}

.metal-analysis {
	background: #fff;
	border-top: 1px solid var(--tf-border);
	padding-block: clamp(5rem, 9vw, 8rem);
}

.metal-analysis__heading {
	align-items: center;
}

.metal-analysis__heading > span {
	align-items: center;
	background: var(--tf-accent-50);
	border: 1px solid var(--tf-accent-100);
	border-radius: 999px;
	color: var(--tf-accent-700);
	display: inline-flex;
	font-size: 0.68rem;
	font-weight: 720;
	gap: 0.5rem;
	justify-self: end;
	min-height: 2rem;
	padding-inline: 0.75rem;
}

.metal-analysis__heading > span i {
	background: var(--tf-accent-600);
	border-radius: 50%;
	height: 0.38rem;
	width: 0.38rem;
}

.metal-analysis__shell {
	background: #fff;
	border: 1px solid var(--tf-border);
	border-radius: 1.75rem;
	box-shadow: var(--tf-shadow-md);
	display: grid;
	grid-template-columns: 5.25rem minmax(0, 1fr);
	margin: 0;
	overflow: hidden;
}

.metal-analysis__rail {
	align-items: flex-start;
	background:
		radial-gradient(circle at 50% 8%, rgba(215, 165, 47, 0.22), transparent 8rem),
		var(--metal-night);
	display: flex;
	justify-content: center;
	padding-top: 2rem;
}

.metal-detail--btc .metal-analysis__rail {
	background:
		radial-gradient(circle at 50% 8%, rgba(247, 147, 26, 0.32), transparent 8rem),
		var(--metal-night);
}

.metal-analysis__rail span {
	align-items: center;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 50%;
	color: #fff;
	display: inline-flex;
	font-family: var(--tf-font-serif);
	font-size: 1.3rem;
	height: 3rem;
	justify-content: center;
	width: 3rem;
}

.metal-analysis__content {
	color: var(--tf-text);
	font-family: var(--tf-font-sans) !important;
	font-size: 0.94rem;
	line-height: 1.7;
	min-width: 0;
	overflow-x: auto;
	padding: clamp(1.25rem, 4vw, 3.25rem);
}

.metal-analysis__content > * {
	max-width: none !important;
}

.metal-analysis__content > :first-child {
	margin-top: 0 !important;
}

.metal-analysis__content > :last-child {
	margin-bottom: 0 !important;
}

.metal-analysis__content :where(h2, h3, h4) {
	color: var(--tf-ink) !important;
	font-family: var(--tf-font-sans) !important;
	height: auto !important;
	line-height: 1.2 !important;
	max-width: none !important;
}

.metal-analysis__content h2 {
	font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
}

.metal-analysis__content h3 {
	font-size: clamp(1.25rem, 2vw, 1.65rem) !important;
}

.metal-analysis__content :where(p, li, td, th, div) {
	font-family: var(--tf-font-sans) !important;
	max-width: none !important;
}

.metal-analysis__content img {
	background: var(--tf-surface-alt);
	border: 1px solid var(--tf-border);
	border-radius: 1rem;
	display: block;
	height: auto !important;
	margin-block: 1.25rem;
	max-width: 100% !important;
	object-fit: contain;
	width: 100% !important;
}

.metal-analysis__content table {
	border-collapse: separate !important;
	border-spacing: 0 !important;
	margin-block: 1.25rem;
	min-width: 38rem;
	width: 100% !important;
}

.metal-analysis__content th {
	background: var(--tf-primary-50) !important;
	border-bottom: 1px solid var(--tf-border) !important;
	color: var(--tf-ink) !important;
	font-size: 0.72rem !important;
	font-weight: 740 !important;
	letter-spacing: 0.05em;
	padding: 0.85rem !important;
	text-transform: uppercase;
}

.metal-analysis__content td {
	border-bottom: 1px solid var(--tf-border) !important;
	color: var(--tf-text) !important;
	padding: 0.85rem !important;
}

.metal-analysis__content blockquote {
	background: var(--tf-primary-50);
	border-left: 0.25rem solid var(--tf-primary-700);
	border-radius: 0 0.8rem 0.8rem 0;
	margin-inline: 0;
	padding: 1rem 1.2rem;
}

/* Structured Bitcoin bulletin published from the premium model editor. */

.tf-btc-report {
	--btc-accent: #f7931a;
	--btc-accent-deep: #c96200;
	--btc-ink: #071d2e;
	display: grid;
	gap: clamp(1rem, 2.4vw, 1.5rem);
	min-width: 0;
}

.tf-btc-report__header {
	background:
		radial-gradient(circle at 88% 18%, rgba(247, 147, 26, 0.3), transparent 17rem),
		linear-gradient(140deg, #061827, #0d3148);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 1.5rem;
	box-shadow: 0 1.4rem 3.5rem rgba(7, 29, 46, 0.16);
	color: #fff;
	overflow: hidden;
	padding: clamp(1.5rem, 4vw, 3rem);
	position: relative;
}

.tf-btc-report__header::after {
	color: rgba(255, 255, 255, 0.055);
	content: "₿";
	font-family: var(--tf-font-serif);
	font-size: clamp(8rem, 20vw, 15rem);
	font-weight: 700;
	line-height: 0.8;
	pointer-events: none;
	position: absolute;
	right: -0.5rem;
	top: 0.25rem;
}

.tf-btc-report__header > * {
	position: relative;
	z-index: 1;
}

.tf-btc-report__kicker {
	align-items: center;
	background: rgba(247, 147, 26, 0.14);
	border: 1px solid rgba(255, 185, 98, 0.28);
	border-radius: 999px;
	color: #ffd5a2 !important;
	display: inline-flex;
	font-size: 0.67rem !important;
	font-weight: 760;
	letter-spacing: 0.1em;
	margin: 0 !important;
	min-height: 2rem;
	padding: 0.35rem 0.75rem;
	text-transform: uppercase;
}

.tf-btc-report__header h2 {
	color: #fff !important;
	font-size: clamp(1.85rem, 4vw, 3.3rem) !important;
	letter-spacing: -0.045em;
	line-height: 1.05 !important;
	margin: 1rem 0 !important;
	max-width: 48rem !important;
	text-wrap: balance;
}

.tf-btc-report__header > p:last-child {
	color: rgba(231, 240, 246, 0.74);
	font-size: 0.92rem;
	line-height: 1.72;
	margin: 0;
	max-width: 49rem !important;
}

.tf-btc-report__themes,
.tf-btc-report__drivers {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tf-btc-report__themes article {
	background:
		radial-gradient(circle at 100% 0%, rgba(247, 147, 26, 0.09), transparent 10rem),
		#f9fbfc;
	border: 1px solid var(--tf-border);
	border-radius: 1.15rem;
	box-shadow: 0 0.75rem 2rem rgba(7, 29, 46, 0.055);
	min-width: 0;
	overflow: hidden;
	padding: clamp(1.15rem, 2.5vw, 1.55rem);
	position: relative;
}

.tf-btc-report__themes article::before {
	background: linear-gradient(90deg, var(--btc-accent), #ffc87e);
	content: "";
	height: 0.2rem;
	inset: 0 0 auto;
	position: absolute;
}

.tf-btc-report__themes span,
.tf-btc-report__driver > span {
	color: var(--btc-accent-deep);
	display: block;
	font-size: 0.64rem;
	font-weight: 780;
	letter-spacing: 0.11em;
	margin-bottom: 0.65rem;
	text-transform: uppercase;
}

.tf-btc-report__themes h3,
.tf-btc-report__driver h3,
.tf-btc-report__outlook h3 {
	color: var(--btc-ink) !important;
	font-size: clamp(1.05rem, 2vw, 1.3rem) !important;
	letter-spacing: -0.02em;
	line-height: 1.2 !important;
	margin: 0 0 0.65rem !important;
}

.tf-btc-report__themes p,
.tf-btc-report__driver p,
.tf-btc-report__outlook p {
	color: var(--tf-muted);
	font-size: 0.8rem;
	line-height: 1.65;
	margin: 0;
}

.tf-btc-report__driver {
	--btc-driver: var(--tf-accent-600);
	--btc-driver-soft: var(--tf-accent-50);
	background: var(--btc-driver-soft);
	border: 1px solid color-mix(in srgb, var(--btc-driver), #fff 75%);
	border-left: 0.28rem solid var(--btc-driver);
	border-radius: 1rem;
	min-width: 0;
	padding: clamp(1.15rem, 2.5vw, 1.55rem);
}

.tf-btc-report__driver--support {
	--btc-driver: #168a65;
	--btc-driver-soft: #effaf6;
}

.tf-btc-report__driver--pressure {
	--btc-driver: #c64f49;
	--btc-driver-soft: #fff4f2;
}

.tf-btc-report__driver > span {
	color: var(--btc-driver);
}

.tf-btc-report__outlook {
	background:
		linear-gradient(90deg, rgba(247, 147, 26, 0.1), transparent 55%),
		#fffaf4;
	border: 1px solid #f4d7b4;
	border-radius: 1.15rem;
	padding: clamp(1.25rem, 3vw, 1.85rem);
}

.tf-btc-report__disclaimer {
	background: #f4f7f8;
	border: 1px solid var(--tf-border);
	border-radius: 0.9rem;
	color: var(--tf-muted);
	font-size: 0.72rem;
	line-height: 1.6;
	margin: 0;
	padding: 1rem 1.1rem;
}

.tf-btc-report__disclaimer strong {
	color: var(--tf-ink);
}

.metal-analysis__empty {
	background: var(--tf-primary-50);
	border: 1px dashed var(--tf-border-strong);
	border-radius: 1rem;
	padding: 1.25rem;
}

.metal-analysis__empty h3 {
	margin-bottom: 0.4rem;
}

.metal-analysis__empty p {
	margin: 0;
}

.metal-next {
	background: #fff;
	padding: 0 0 clamp(5rem, 9vw, 8rem);
}

.metal-next__shell {
	align-items: center;
	background:
		radial-gradient(circle at 8% 50%, rgba(215, 165, 47, 0.14), transparent 14rem),
		var(--metal-night);
	border-radius: 1.5rem;
	color: #fff;
	display: grid;
	gap: 1.25rem;
	grid-template-columns: auto minmax(0, 1fr) auto;
	padding: clamp(1.35rem, 4vw, 2.25rem);
}

.metal-detail--aurum .metal-next__symbol {
	background: linear-gradient(145deg, #ffb24b, #d56700);
	border-color: rgba(255, 203, 135, 0.9);
	color: #421e00;
}

.metal-next__shell > div {
	display: grid;
}

.metal-next__shell small {
	color: rgba(230, 239, 245, 0.56);
	font-size: 0.66rem;
	font-weight: 680;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.metal-next__shell strong {
	color: #fff;
	font-size: clamp(1.05rem, 2vw, 1.4rem);
}

.metal-next__shell > a {
	align-items: center;
	color: var(--metal-gold-bright);
	display: inline-flex;
	font-size: 0.78rem;
	font-weight: 720;
	gap: 0.5rem;
	min-height: 2.75rem;
	text-decoration: none;
}

.metal-lock__section {
	min-height: 70vh;
}

.metal-lock__shell {
	align-items: stretch;
	display: grid;
	gap: 1rem;
	grid-template-columns: minmax(0, 1.2fr) minmax(19rem, 0.8fr);
	min-height: 29rem;
}

.metal-lock__content,
.metal-lock__preview {
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: 1.75rem;
	padding: clamp(1.5rem, 5vw, 3.25rem);
}

.metal-lock__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.metal-lock__actions {
	margin-top: 2rem;
}

.metal-lock__privacy {
	align-items: center;
	border-top: 1px solid rgba(255, 255, 255, 0.11);
	color: rgba(230, 239, 245, 0.52);
	display: flex;
	font-size: 0.68rem;
	gap: 0.55rem;
	margin: 2.25rem 0 0;
	padding-top: 1.1rem;
}

.metal-lock__privacy span {
	background: #4ed49f;
	border-radius: 50%;
	height: 0.38rem;
	width: 0.38rem;
}

.metal-lock__preview {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

.metal-lock__preview > div > p {
	color: rgba(230, 239, 245, 0.54);
	font-size: 0.7rem;
	font-weight: 690;
	letter-spacing: 0.12em;
	margin: 1.5rem 0 0.8rem;
	text-transform: uppercase;
}

.metal-lock__preview ul {
	color: #fff;
	display: grid;
	gap: 0.65rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.metal-lock__preview li {
	align-items: center;
	display: flex;
	font-size: 0.82rem;
	gap: 0.5rem;
	justify-content: center;
}

.metal-lock__preview li::before {
	color: var(--metal-gold-bright);
	content: "✓";
	font-weight: 800;
}

@media (max-width: 64rem) {
	.metals-hero__grid,
	.metal-detail__hero-grid {
		gap: 3.5rem;
		grid-template-columns: minmax(0, 1fr);
	}

	.metals-hero__content,
	.metal-detail__hero-content {
		max-width: 50rem;
	}

	.metals-hero__stage {
		justify-self: center;
		max-width: 38rem;
		width: 100%;
	}

	.metals-principles__list li {
		padding-inline: 1rem;
	}

	.metals-method__shell {
		grid-template-columns: minmax(0, 1fr);
	}

	.metal-signals__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 48rem) {
	.metals-breadcrumbs {
		margin-bottom: 2rem;
	}

	.metals-hero {
		padding-bottom: 4rem;
	}

	.metals-hero__content h1,
	.metal-detail__hero-content h1,
	.metal-lock__content h1 {
		font-size: clamp(2.65rem, 13vw, 4.5rem);
	}

	.metals-principles__list,
	.metal-detail__truth ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.metals-principles__list li:nth-child(3),
	.metal-detail__truth li:nth-child(3) {
		border-left: 0;
	}

	.metals-principles__list li:nth-child(n + 3),
	.metal-detail__truth li:nth-child(n + 3) {
		border-top: 1px solid var(--tf-border);
	}

	.metals-principles__list li:first-child,
	.metals-principles__list li:last-child,
	.metal-detail__truth li:first-child,
	.metal-detail__truth li:last-child {
		padding-inline: 1rem;
	}

	.metal-paths__heading,
	.metal-signals__heading,
	.metal-analysis__heading {
		align-items: start;
		grid-template-columns: minmax(0, 1fr);
	}

	.metal-analysis__heading > span {
		justify-self: start;
	}

	.metal-paths__grid,
	.metal-lock__shell {
		grid-template-columns: minmax(0, 1fr);
	}

	.metal-path {
		min-height: 31rem;
	}

	.metal-lock__preview {
		min-height: 18rem;
	}

	.metal-analysis__shell {
		grid-template-columns: minmax(0, 1fr);
	}

	.tf-btc-report__themes,
	.tf-btc-report__drivers {
		grid-template-columns: minmax(0, 1fr);
	}

	.tf-btc-report__header::after {
		right: -1rem;
		top: 1rem;
	}

	.metal-analysis__rail {
		align-items: center;
		justify-content: flex-start;
		min-height: 4.5rem;
		padding: 0 1.25rem;
	}

	.metal-analysis__rail span {
		height: 2.75rem;
		width: 2.75rem;
	}

	.metal-next__shell {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.metal-next__shell > a {
		grid-column: 1 / -1;
		padding-top: 0.5rem;
	}
}

@media (max-width: 37.5rem) {
	.metals-hero__actions,
	.metal-lock__actions {
		align-items: stretch;
		flex-direction: column;
	}

	.metals-button {
		justify-content: center;
		width: 100%;
	}

	.metals-hero__facts {
		grid-template-columns: minmax(0, 1fr);
	}

	.metals-hero__facts li,
	.metals-hero__facts li:first-child {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
		grid-template-columns: 3.25rem 1fr;
		padding: 0.8rem 0;
	}

	.metals-hero__facts li:first-child {
		border-top: 0;
	}

	.metals-hero__stage {
		aspect-ratio: auto;
		border-radius: 1.5rem;
		min-height: 28rem;
	}

	.metals-hero__tokens {
		gap: 0.4rem;
		grid-template-columns: 1fr 1.8rem 1fr;
	}

	.metal-token {
		max-width: 8.2rem;
	}

	.metal-token > span {
		top: 1.1rem;
	}

	.metal-token strong {
		font-size: clamp(2.5rem, 14vw, 3.7rem);
	}

	.metals-hero__signals {
		grid-template-columns: minmax(0, 1fr);
	}

	.metals-principles__list,
	.metal-detail__truth ul {
		grid-template-columns: minmax(0, 1fr);
	}

	.metals-principles__list li,
	.metals-principles__list li:first-child,
	.metals-principles__list li:last-child,
	.metal-detail__truth li,
	.metal-detail__truth li:first-child,
	.metal-detail__truth li:last-child {
		border-left: 0;
		border-top: 1px solid var(--tf-border);
		padding: 1rem 0;
	}

	.metals-principles__list li:first-child,
	.metal-detail__truth li:first-child {
		border-top: 0;
	}

	.metal-path {
		border-radius: 1.4rem;
		min-height: 0;
		padding: 1.25rem;
	}

	.metal-path__top {
		margin-bottom: 3rem;
	}

	.metal-path__symbol {
		height: 3.5rem;
		width: 3.5rem;
	}

	.metal-path h3 {
		font-size: clamp(1.85rem, 10vw, 2.65rem);
	}

	.metals-method__shell {
		border-radius: 1.45rem;
		padding: 1.35rem;
	}

	.metal-signals__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.metal-signal {
		min-height: 16.5rem;
	}

	.metal-detail__score-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.metal-detail__score-grid > div {
		padding: 0.7rem;
	}

	.metal-detail__score-grid strong {
		font-size: 1.4rem;
	}

	.metal-detail__score-grid small {
		font-size: 0.57rem;
	}

	.metal-analysis__content {
		padding: 1rem;
	}

	.tf-btc-report__header {
		border-radius: 1.2rem;
		padding: 1.25rem;
	}

	.tf-btc-report__header::after {
		font-size: 8rem;
		right: -1.5rem;
		top: 1.5rem;
	}

	.tf-btc-report__themes article,
	.tf-btc-report__outlook {
		border-radius: 1rem;
	}

	.metal-next__shell {
		grid-template-columns: minmax(0, 1fr);
		text-align: left;
	}

	.metal-next__symbol {
		height: 3.75rem;
		width: 3.75rem;
	}

	.metal-next__shell > a {
		grid-column: auto;
	}
}

/* Premium editorial journal and single-article experience
   ========================================================================== */

.journal-hub {
	--journal-gold: #e8bc4a;
	--journal-gold-deep: #c88b18;
	--journal-mint: #73dfc1;
	--journal-paper: #f2f4f1;
	--journal-night: #061c31;
	background: var(--journal-paper);
	color: var(--tf-text);
	overflow: clip;
}

.journal-hero {
	background:
		radial-gradient(circle at 82% 8%, rgba(232, 188, 74, 0.13), transparent 29rem),
		radial-gradient(circle at 8% 100%, rgba(115, 223, 193, 0.09), transparent 28rem),
		linear-gradient(135deg, #061a2d 0%, #08253d 55%, #0b304b 100%);
	color: rgba(255, 255, 255, 0.72);
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

.journal-hero::before,
.journal-hero::after {
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 50%;
	content: "";
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

.journal-hero::before {
	height: 40rem;
	right: -18rem;
	top: -22rem;
	width: 40rem;
}

.journal-hero::after {
	bottom: -20rem;
	height: 34rem;
	left: -14rem;
	width: 34rem;
}

.journal-hero__inner {
	padding-block: clamp(2rem, 4vw, 3.25rem) clamp(3.5rem, 7vw, 6rem);
}

.journal-hero .breadcrumbs {
	margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.journal-hero .breadcrumbs li,
.journal-hero .breadcrumbs a {
	color: rgba(255, 255, 255, 0.62);
}

.journal-hero .breadcrumbs li + li::before {
	color: rgba(255, 255, 255, 0.3);
}

.journal-hero .breadcrumbs li[aria-current="page"] {
	color: rgba(255, 255, 255, 0.9);
}

.journal-hero__grid {
	align-items: center;
	display: grid;
	gap: clamp(2.5rem, 6vw, 6rem);
	grid-template-columns: minmax(0, 0.9fr) minmax(28rem, 1.1fr);
}

.journal-hero__copy {
	max-width: 42rem;
}

.journal-kicker {
	align-items: center;
	color: var(--journal-mint, #73dfc1);
	display: flex;
	font-size: 0.72rem;
	font-weight: 800;
	gap: 0.7rem;
	letter-spacing: 0.18em;
	margin: 0 0 var(--tf-space-6);
	text-transform: uppercase;
}

.journal-kicker > span {
	background: currentColor;
	display: inline-block;
	height: 1px;
	width: 1.75rem;
}

.journal-kicker--dark {
	color: var(--tf-accent-700);
}

.journal-hero h1 {
	color: #fff;
	font-size: clamp(3.35rem, 6.8vw, 6.5rem);
	letter-spacing: -0.068em;
	line-height: 0.91;
	margin: 0;
	max-width: 9.7ch;
}

.journal-hero__lead {
	color: rgba(255, 255, 255, 0.69);
	font-size: clamp(1rem, 1.6vw, 1.2rem);
	line-height: 1.72;
	margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
	max-width: 38rem;
}

.journal-principles {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem 1.25rem;
	list-style: none;
	margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
	padding: 0;
}

.journal-principles li {
	align-items: center;
	color: rgba(255, 255, 255, 0.74);
	display: inline-flex;
	font-size: var(--tf-text-xs);
	font-weight: 700;
	gap: 0.5rem;
}

.journal-principles li > span {
	background: var(--journal-mint);
	border-radius: 50%;
	box-shadow: 0 0 0 0.28rem rgba(115, 223, 193, 0.11);
	height: 0.38rem;
	width: 0.38rem;
}

.journal-feature {
	background: rgba(4, 21, 37, 0.58);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 1.8rem;
	box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.26);
	min-width: 0;
	overflow: hidden;
}

.journal-feature__media {
	aspect-ratio: 16 / 9;
	background: rgba(255, 255, 255, 0.08);
	display: block;
	overflow: hidden;
	position: relative;
}

.journal-feature--members .journal-feature__media {
	background:
		radial-gradient(circle at 78% 18%, rgba(115, 223, 193, 0.17), transparent 35%),
		linear-gradient(145deg, #092b47, #04182b);
}

.journal-feature--members .journal-feature__placeholder {
	color: #f5cf70;
}

.journal-feature__media::after {
	background: linear-gradient(180deg, transparent 48%, rgba(4, 20, 34, 0.34));
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.journal-feature__media img {
	height: 100%;
	object-fit: cover;
	transition: transform 600ms var(--tf-ease);
	width: 100%;
}

.journal-feature:hover .journal-feature__media img {
	transform: scale(1.025);
}

.journal-feature__placeholder {
	align-items: center;
	color: rgba(255, 255, 255, 0.64);
	display: flex;
	height: 100%;
	justify-content: center;
}

.journal-feature__placeholder svg {
	height: 4rem;
	width: 4rem;
}

.journal-feature__body {
	padding: clamp(1.35rem, 3vw, 2rem);
}

.journal-feature__topline {
	align-items: center;
	color: rgba(255, 255, 255, 0.5);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.68rem;
	font-weight: 750;
	gap: 0.65rem;
	justify-content: space-between;
	letter-spacing: 0.08em;
	margin-bottom: var(--tf-space-4);
	text-transform: uppercase;
}

.journal-topic {
	align-items: center;
	background: rgba(232, 188, 74, 0.14);
	border: 1px solid rgba(232, 188, 74, 0.35);
	border-radius: 2rem;
	color: #f5cf70;
	display: inline-flex;
	min-height: 1.9rem;
	padding: 0.35rem 0.7rem;
}

.journal-feature h2 {
	font-size: clamp(1.65rem, 3vw, 2.5rem);
	line-height: 1.06;
	margin: 0;
}

.journal-feature h2 a {
	color: #fff;
	text-decoration: none;
}

.journal-feature h2 a:hover {
	color: #f5cf70;
}

.journal-feature__body > p {
	color: rgba(255, 255, 255, 0.62);
	font-size: var(--tf-text-sm);
	line-height: 1.7;
	margin: var(--tf-space-4) 0 0;
}

.journal-feature__footer {
	align-items: center;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	display: flex;
	gap: var(--tf-space-4);
	justify-content: space-between;
	margin-top: var(--tf-space-6);
	padding-top: var(--tf-space-5);
}

.journal-feature__footer > div {
	align-items: center;
	color: rgba(255, 255, 255, 0.54);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.72rem;
	gap: 0.45rem;
}

.journal-feature__footer > a {
	align-items: center;
	color: #fff;
	display: inline-flex;
	font-size: var(--tf-text-sm);
	font-weight: 760;
	gap: 0.55rem;
	min-height: 2.75rem;
	text-decoration: none;
}

.journal-feature__footer > a:hover {
	color: #f5cf70;
}

.journal-feature__footer > a svg {
	transition: transform var(--tf-duration) var(--tf-ease);
}

.journal-feature__footer > a:hover svg {
	transform: translateX(0.2rem);
}

.journal-hero__edition {
	background:
		linear-gradient(rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)),
		repeating-linear-gradient(90deg, transparent 0 3rem, rgba(255, 255, 255, 0.04) 3rem calc(3rem + 1px));
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--tf-radius-xl);
	display: grid;
	min-height: 24rem;
	padding: clamp(2rem, 5vw, 4rem);
	place-content: center;
	text-align: center;
}

.journal-hero__edition > span {
	color: var(--journal-mint);
	font-size: var(--tf-text-xs);
	font-weight: 800;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.journal-hero__edition strong {
	color: #fff;
	font-family: var(--tf-font-serif);
	font-size: clamp(2.5rem, 5vw, 4.5rem);
	font-weight: 500;
	margin-top: var(--tf-space-5);
}

.journal-hero__edition p {
	color: rgba(255, 255, 255, 0.62);
	margin: var(--tf-space-4) auto 0;
	max-width: 30rem;
}

.journal-metrics {
	border-top: 1px solid rgba(255, 255, 255, 0.13);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: clamp(2.75rem, 6vw, 5rem);
}

.journal-metrics > div {
	align-items: center;
	display: grid;
	gap: 0.2rem 0.85rem;
	grid-template-columns: auto minmax(0, 1fr);
	padding: 1.45rem 1.5rem 0 0;
}

.journal-metrics > div + div {
	border-left: 1px solid rgba(255, 255, 255, 0.13);
	padding-left: 1.5rem;
}

.journal-metrics strong {
	color: #fff;
	font-family: var(--tf-font-serif);
	font-size: clamp(1.8rem, 3vw, 2.35rem);
	font-weight: 500;
	line-height: 1;
}

.journal-metrics span {
	color: rgba(255, 255, 255, 0.5);
	font-size: var(--tf-text-xs);
	font-weight: 650;
	line-height: 1.35;
	max-width: 12rem;
}

.journal-directory {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.72), transparent 13rem),
		var(--journal-paper);
	padding-block: clamp(4.5rem, 9vw, 8.5rem);
}

.journal-directory__heading {
	align-items: end;
	display: grid;
	gap: clamp(2rem, 5vw, 5rem);
	grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.65fr);
}

.journal-directory__heading h2 {
	font-size: clamp(2.6rem, 5.7vw, 5.4rem);
	letter-spacing: -0.06em;
	line-height: 0.98;
	margin: 0;
	max-width: 12ch;
}

.journal-directory__heading > p {
	color: var(--tf-muted);
	font-size: var(--tf-text-md);
	line-height: 1.72;
	margin: 0 0 0.45rem;
}

.journal-controls {
	align-items: end;
	background: rgba(255, 255, 255, 0.8);
	border: 1px solid var(--tf-border);
	border-radius: var(--tf-radius-xl);
	box-shadow: 0 1.25rem 4rem rgba(11, 41, 71, 0.06);
	display: grid;
	gap: clamp(1rem, 3vw, 2rem);
	grid-template-columns: minmax(16rem, 0.85fr) minmax(20rem, 1.25fr) auto;
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding: clamp(1rem, 2.5vw, 1.5rem);
}

.journal-search label,
.journal-filter-wrap > span {
	color: var(--tf-ink);
	display: block;
	font-size: 0.72rem;
	font-weight: 760;
	letter-spacing: 0.08em;
	margin-bottom: 0.55rem;
	text-transform: uppercase;
}

.journal-search__field {
	align-items: center;
	background: #fff;
	border: 1px solid var(--tf-border-strong);
	border-radius: 0.85rem;
	display: grid;
	gap: 0.6rem;
	grid-template-columns: auto minmax(0, 1fr) auto;
	min-height: 3.15rem;
	padding-inline: 0.85rem 0.45rem;
	transition:
		border-color var(--tf-duration) var(--tf-ease),
		box-shadow var(--tf-duration) var(--tf-ease);
}

.journal-search__field:focus-within {
	border-color: var(--tf-focus);
	box-shadow: 0 0 0 3px rgba(25, 118, 189, 0.13);
}

.journal-search__field svg {
	color: var(--tf-muted);
	height: 1.15rem;
	width: 1.15rem;
}

.journal-search__field input {
	background: transparent;
	border: 0;
	color: var(--tf-ink);
	min-height: 3rem;
	min-width: 0;
	outline: 0;
	padding: 0;
	width: 100%;
}

.journal-search__field button {
	background: var(--tf-primary-50);
	border: 0;
	border-radius: 0.6rem;
	color: var(--tf-primary-900);
	font-size: var(--tf-text-xs);
	font-weight: 700;
	min-height: 2.75rem;
	padding-inline: 0.75rem;
}

.journal-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.journal-filters button {
	background: #fff;
	border: 1px solid var(--tf-border);
	border-radius: 2rem;
	color: var(--tf-text);
	font-size: var(--tf-text-xs);
	font-weight: 720;
	min-height: 2.75rem;
	padding: 0.55rem 0.9rem;
	transition:
		background-color var(--tf-duration) var(--tf-ease),
		border-color var(--tf-duration) var(--tf-ease),
		color var(--tf-duration) var(--tf-ease);
}

.journal-filters button:hover {
	border-color: var(--tf-accent-600);
	color: var(--tf-accent-700);
}

.journal-filters button[aria-pressed="true"] {
	background: var(--tf-primary-900);
	border-color: var(--tf-primary-900);
	color: #fff;
}

.journal-count {
	align-items: baseline;
	color: var(--tf-muted);
	display: flex;
	font-size: var(--tf-text-xs);
	gap: 0.35rem;
	margin: 0 0 0.7rem;
	white-space: nowrap;
}

.journal-count strong {
	color: var(--tf-primary-900);
	font-family: var(--tf-font-serif);
	font-size: 1.7rem;
	font-weight: 500;
}

.journal-grid {
	display: grid;
	gap: clamp(1rem, 2.5vw, 1.5rem);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: clamp(2rem, 4vw, 3rem);
}

.journal-card {
	background: rgba(255, 255, 255, 0.88);
	border: 1px solid var(--tf-border);
	border-radius: 1.35rem;
	box-shadow: 0 1rem 2.8rem rgba(11, 41, 71, 0.055);
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	transition:
		border-color var(--tf-duration) var(--tf-ease),
		box-shadow var(--tf-duration) var(--tf-ease),
		transform var(--tf-duration) var(--tf-ease);
}

.journal-card:hover {
	border-color: #b8c9c3;
	box-shadow: 0 1.5rem 3.5rem rgba(11, 41, 71, 0.1);
	transform: translateY(-0.25rem);
}

.journal-card__media {
	aspect-ratio: 16 / 10;
	background:
		radial-gradient(circle at 80% 15%, rgba(115, 223, 193, 0.24), transparent 36%),
		var(--tf-primary-100);
	display: block;
	overflow: hidden;
	position: relative;
}

.journal-card__media > img {
	height: 100%;
	object-fit: cover;
	transition: transform 520ms var(--tf-ease);
	width: 100%;
}

.journal-card:hover .journal-card__media > img {
	transform: scale(1.03);
}

.journal-card__media > span:not(.journal-card__topic):not(.blog-access-badge) {
	align-items: center;
	color: var(--tf-primary-700);
	display: flex;
	height: 100%;
	justify-content: center;
}

.journal-card__media > span:not(.journal-card__topic):not(.blog-access-badge) svg {
	height: 3rem;
	width: 3rem;
}

.journal-card__topic {
	backdrop-filter: blur(0.75rem);
	background: rgba(7, 29, 50, 0.82);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 2rem;
	bottom: 0.85rem;
	color: #fff;
	font-size: 0.66rem;
	font-weight: 760;
	left: 0.85rem;
	letter-spacing: 0.06em;
	padding: 0.42rem 0.68rem;
	position: absolute;
	text-transform: uppercase;
}

.journal-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: clamp(1.15rem, 2.5vw, 1.55rem);
}

.journal-card__meta {
	align-items: center;
	color: var(--tf-subtle);
	display: flex;
	font-size: 0.7rem;
	font-weight: 680;
	gap: 0.75rem;
	justify-content: space-between;
	margin-bottom: var(--tf-space-4);
}

.journal-card__meta span {
	align-items: center;
	display: inline-flex;
	gap: 0.4rem;
}

.journal-card__meta span::before {
	background: var(--tf-accent-500);
	border-radius: 50%;
	content: "";
	height: 0.35rem;
	width: 0.35rem;
}

.journal-card h2 {
	font-size: clamp(1.35rem, 2.3vw, 1.8rem);
	line-height: 1.12;
	margin: 0;
}

.journal-card h2 a {
	color: var(--tf-ink);
	text-decoration: none;
}

.journal-card h2 a:hover {
	color: var(--tf-accent-700);
}

.journal-card__body > p {
	color: var(--tf-muted);
	font-size: var(--tf-text-sm);
	line-height: 1.7;
	margin: var(--tf-space-4) 0 var(--tf-space-6);
}

.journal-card__link {
	align-items: center;
	border-top: 1px solid var(--tf-border);
	color: var(--tf-primary-900);
	display: flex;
	font-size: var(--tf-text-sm);
	font-weight: 760;
	gap: 0.5rem;
	justify-content: space-between;
	margin-top: auto;
	min-height: 3rem;
	padding-top: var(--tf-space-4);
	text-decoration: none;
}

.journal-card__link svg {
	transition: transform var(--tf-duration) var(--tf-ease);
}

.journal-card__link:hover {
	color: var(--tf-accent-700);
}

.journal-card__link:hover svg {
	transform: translateX(0.2rem);
}

.journal-empty {
	background: #fff;
	border: 1px solid var(--tf-border);
	border-radius: var(--tf-radius-xl);
	margin-top: var(--tf-space-8);
	padding: clamp(2rem, 6vw, 4rem);
	text-align: center;
}

.journal-empty > span {
	color: var(--tf-primary-100);
	display: block;
	font-family: var(--tf-font-serif);
	font-size: 4rem;
	line-height: 1;
}

.journal-empty h2,
.journal-empty h3 {
	margin: var(--tf-space-4) 0 var(--tf-space-2);
}

.journal-empty p {
	color: var(--tf-muted);
	margin: 0 auto;
	max-width: 36rem;
}

.journal-directory .navigation.pagination {
	margin-top: clamp(2rem, 5vw, 4rem);
}

.journal-directory .page-numbers {
	background: rgba(255, 255, 255, 0.78);
	border-radius: 0.75rem;
	min-height: 2.75rem;
	min-width: 2.75rem;
}

.journal-directory .page-numbers.current {
	background: var(--tf-primary-900);
}

.journal-standard {
	background:
		radial-gradient(circle at 5% 10%, rgba(115, 223, 193, 0.12), transparent 23rem),
		linear-gradient(135deg, #071d32, #0a2e49);
	border-radius: clamp(1.5rem, 4vw, 2.25rem);
	color: rgba(255, 255, 255, 0.68);
	display: grid;
	gap: clamp(2.5rem, 6vw, 6rem);
	grid-template-columns: minmax(0, 0.9fr) minmax(26rem, 1.1fr);
	margin-top: clamp(4rem, 9vw, 8rem);
	overflow: hidden;
	padding: clamp(2rem, 6vw, 5rem);
}

.journal-standard__intro h2 {
	color: #fff;
	font-size: clamp(2.35rem, 4.7vw, 4.6rem);
	line-height: 0.99;
	margin: 0;
	max-width: 11ch;
}

.journal-standard__intro > p:not(.journal-kicker) {
	line-height: 1.72;
	margin: var(--tf-space-6) 0 0;
	max-width: 37rem;
}

.journal-standard__intro > a {
	align-items: center;
	color: #f5cf70;
	display: inline-flex;
	font-size: var(--tf-text-sm);
	font-weight: 760;
	gap: 0.55rem;
	margin-top: var(--tf-space-8);
	min-height: 2.75rem;
	text-decoration: none;
}

.journal-standard > ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.journal-standard > ol li {
	align-items: start;
	display: grid;
	gap: var(--tf-space-6);
	grid-template-columns: 2.25rem minmax(0, 1fr);
	padding-block: 1.35rem;
}

.journal-standard > ol li + li {
	border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.journal-standard > ol li > span {
	color: #f5cf70;
	font-family: var(--tf-font-serif);
	font-size: 1.45rem;
}

.journal-standard > ol strong {
	color: #fff;
	display: block;
	font-size: var(--tf-text-base);
	margin-bottom: 0.35rem;
}

.journal-standard > ol p {
	color: rgba(255, 255, 255, 0.55);
	font-size: var(--tf-text-sm);
	margin: 0;
}

/* Single editorial article */

.editorial-article {
	--journal-gold: #e8bc4a;
	--journal-mint: #73dfc1;
	--journal-night: #061c31;
	background: #f4f5f2;
	overflow: clip;
}

.article-progress {
	background: rgba(255, 255, 255, 0.18);
	height: 3px;
	left: 0;
	pointer-events: none;
	position: fixed;
	right: 0;
	top: calc(var(--tf-admin-bar-height) + var(--tf-header-height));
	z-index: calc(var(--tf-z-header) - 1);
}

.article-progress span {
	background: linear-gradient(90deg, var(--tf-accent-500), var(--journal-gold));
	display: block;
	height: 100%;
	transform: scaleX(0);
	transform-origin: left center;
	width: 100%;
}

.editorial-hero {
	background:
		radial-gradient(circle at 88% 10%, rgba(232, 188, 74, 0.13), transparent 26rem),
		linear-gradient(135deg, #061a2d, #092a45 72%, #0b3552);
	color: rgba(255, 255, 255, 0.68);
	overflow: hidden;
	padding-block: clamp(2rem, 4vw, 3rem) clamp(6rem, 11vw, 10rem);
	position: relative;
}

.editorial-hero::after {
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 50%;
	content: "";
	height: 36rem;
	position: absolute;
	right: -17rem;
	top: -19rem;
	width: 36rem;
}

.editorial-hero .breadcrumbs {
	margin-bottom: clamp(2.5rem, 6vw, 5rem);
	position: relative;
	z-index: 1;
}

.editorial-hero .breadcrumbs li,
.editorial-hero .breadcrumbs a {
	color: rgba(255, 255, 255, 0.57);
}

.editorial-hero .breadcrumbs li + li::before {
	color: rgba(255, 255, 255, 0.28);
}

.editorial-hero .breadcrumbs li[aria-current="page"] {
	color: rgba(255, 255, 255, 0.86);
}

.editorial-hero__grid {
	align-items: end;
	display: grid;
	gap: clamp(2.5rem, 7vw, 7rem);
	grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.33fr);
	position: relative;
	z-index: 1;
}

.editorial-hero__copy {
	max-width: 60rem;
}

.editorial-hero h1 {
	color: #fff;
	font-size: clamp(3rem, 7vw, 6.75rem);
	letter-spacing: -0.065em;
	line-height: 0.94;
	margin: 0;
	max-width: 15ch;
}

.editorial-hero__lead {
	color: rgba(255, 255, 255, 0.68);
	font-family: var(--tf-font-serif);
	font-size: clamp(1.15rem, 2.2vw, 1.55rem);
	line-height: 1.55;
	margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
	max-width: 48rem;
}

.editorial-hero__facts {
	background: rgba(4, 20, 34, 0.4);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 1.25rem;
	padding: 1.35rem;
}

.editorial-hero__facts > p:first-child {
	color: var(--journal-mint);
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	margin: 0 0 var(--tf-space-4);
	text-transform: uppercase;
}

.editorial-hero__facts dl {
	margin: 0;
}

.editorial-hero__facts dl > div {
	align-items: baseline;
	display: flex;
	gap: var(--tf-space-4);
	justify-content: space-between;
	padding-block: 0.7rem;
}

.editorial-hero__facts dl > div + div {
	border-top: 1px solid rgba(255, 255, 255, 0.11);
}

.editorial-hero__facts dt {
	color: rgba(255, 255, 255, 0.48);
	font-size: 0.72rem;
}

.editorial-hero__facts dd {
	color: #fff;
	font-size: var(--tf-text-sm);
	font-weight: 680;
	margin: 0;
	text-align: right;
}

.editorial-hero__updated {
	border-top: 1px solid rgba(255, 255, 255, 0.11);
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.68rem;
	margin: var(--tf-space-3) 0 0;
	padding-top: var(--tf-space-4);
}

.editorial-featured {
	margin-top: clamp(-6rem, -7vw, -4rem);
	position: relative;
	z-index: 2;
}

.editorial-featured img {
	aspect-ratio: 16 / 7.8;
	background: var(--tf-primary-100);
	border: 0.55rem solid #f4f5f2;
	border-radius: clamp(1.35rem, 3vw, 2.25rem);
	box-shadow: 0 2.2rem 5rem rgba(7, 29, 50, 0.19);
	object-fit: cover;
	width: 100%;
}

.editorial-body {
	padding-block: clamp(4rem, 9vw, 8.5rem);
}

.editorial-body__grid {
	align-items: start;
	display: grid;
	gap: clamp(2.5rem, 6vw, 6rem);
	grid-template-columns: minmax(12rem, 15rem) minmax(0, 50rem);
	justify-content: center;
}

.editorial-rail__sticky {
	display: grid;
	gap: var(--tf-space-6);
	position: sticky;
	top: calc(var(--tf-admin-bar-height) + var(--tf-header-height) + 2rem);
}

.editorial-toc,
.editorial-share {
	background: rgba(255, 255, 255, 0.75);
	border: 1px solid var(--tf-border);
	border-radius: 1rem;
	padding: 1rem;
}

.editorial-toc > p,
.editorial-share > p {
	color: var(--tf-ink);
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	margin: 0 0 0.75rem;
	text-transform: uppercase;
}

.editorial-toc ol {
	display: grid;
	gap: 0.15rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.editorial-toc li {
	color: var(--tf-subtle);
	font-size: 0.75rem;
	line-height: 1.45;
}

.editorial-toc a {
	align-items: center;
	border-left: 2px solid transparent;
	color: var(--tf-muted);
	display: flex;
	min-height: 2.75rem;
	padding: 0.42rem 0.55rem;
	text-decoration: none;
}

.editorial-toc a:hover,
.editorial-toc a.is-active {
	border-left-color: var(--tf-accent-600);
	color: var(--tf-accent-700);
}

.editorial-share > div {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.editorial-share a,
.editorial-share button {
	align-items: center;
	background: var(--tf-primary-50);
	border: 1px solid var(--tf-border);
	border-radius: 50%;
	color: var(--tf-primary-900);
	display: inline-flex;
	font-size: 0.67rem;
	font-weight: 800;
	height: 2.75rem;
	justify-content: center;
	padding: 0;
	text-decoration: none;
	width: 2.75rem;
}

.editorial-share a:hover,
.editorial-share button:hover {
	background: var(--tf-primary-900);
	border-color: var(--tf-primary-900);
	color: #fff;
}

.editorial-share > span {
	color: var(--tf-accent-700);
	display: block;
	font-size: 0.7rem;
	margin-top: 0.55rem;
	min-height: 1.1rem;
}

.editorial-column {
	min-width: 0;
}

.editorial-entry {
	color: #293c4c;
	font-size: clamp(1.05rem, 1.55vw, 1.16rem);
	line-height: 1.88;
}

.editorial-entry > p:first-of-type {
	color: var(--tf-ink);
	font-family: var(--tf-font-serif);
	font-size: clamp(1.25rem, 2.4vw, 1.55rem);
	line-height: 1.65;
}

.editorial-entry :where(h2, h3) {
	scroll-margin-top: calc(var(--tf-admin-bar-height) + var(--tf-header-height) + 2rem);
}

.editorial-entry h2 {
	font-size: clamp(2rem, 4vw, 3.1rem);
	letter-spacing: -0.045em;
	line-height: 1.08;
	margin-top: 2.15em;
}

.editorial-entry h3 {
	font-size: clamp(1.4rem, 2.6vw, 1.95rem);
	letter-spacing: -0.025em;
	line-height: 1.18;
	margin-top: 1.8em;
}

.editorial-entry p,
.editorial-entry li {
	line-height: 1.88;
}

.editorial-entry ul,
.editorial-entry ol {
	display: grid;
	gap: 0.45rem;
	margin-block: var(--tf-space-6);
	padding-left: 1.35rem;
}

.editorial-entry blockquote {
	background: linear-gradient(135deg, #eef8f5, #f8fbfa);
	border: 1px solid #cfe7df;
	border-left: 4px solid var(--tf-accent-600);
	border-radius: 0 1rem 1rem 0;
	color: var(--tf-primary-900);
	font-family: var(--tf-font-serif);
	margin-block: clamp(2rem, 5vw, 3.5rem);
	padding: clamp(1.25rem, 3vw, 2rem);
}

.editorial-entry figure {
	margin: clamp(2rem, 5vw, 3.5rem) 0;
}

.editorial-entry figure img,
.editorial-entry > img {
	border-radius: 1rem;
	box-shadow: 0 1rem 2.5rem rgba(11, 41, 71, 0.1);
}

.editorial-entry table {
	background: #fff;
	border: 1px solid var(--tf-border);
	border-radius: 0.8rem;
	box-shadow: 0 0.75rem 2rem rgba(11, 41, 71, 0.05);
}

.editorial-entry th {
	background: var(--tf-primary-900);
	color: #fff;
}

.editorial-disclaimer {
	align-items: start;
	background: #fff9e9;
	border: 1px solid #eadcb7;
	border-radius: 1rem;
	display: grid;
	gap: var(--tf-space-4);
	grid-template-columns: 1.5rem minmax(0, 1fr);
	margin-top: clamp(2.5rem, 6vw, 4.5rem);
	padding: 1.25rem;
}

.editorial-disclaimer > svg {
	color: var(--tf-gold-600);
	margin-top: 0.1rem;
}

.editorial-disclaimer strong {
	color: var(--tf-ink);
	display: block;
	margin-bottom: 0.3rem;
}

.editorial-disclaimer p {
	color: var(--tf-muted);
	font-size: var(--tf-text-sm);
	line-height: 1.65;
	margin: 0;
}

.editorial-author {
	align-items: start;
	background:
		radial-gradient(circle at 100% 0%, rgba(115, 223, 193, 0.11), transparent 17rem),
		var(--tf-primary-950);
	border-radius: 1.25rem;
	color: rgba(255, 255, 255, 0.63);
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 4.25rem minmax(0, 1fr);
	margin-top: var(--tf-space-6);
	padding: clamp(1.35rem, 3vw, 2rem);
}

.editorial-author__avatar {
	align-items: center;
	background: linear-gradient(135deg, var(--tf-accent-500), #6ed8b9);
	border-radius: 1rem;
	color: var(--tf-primary-950);
	display: inline-flex;
	font-family: var(--tf-font-serif);
	font-size: 2rem;
	height: 4.25rem;
	justify-content: center;
	width: 4.25rem;
}

.editorial-author > div > p:first-child {
	color: var(--journal-mint);
	font-size: 0.67rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	margin: 0 0 0.35rem;
	text-transform: uppercase;
}

.editorial-author h2 {
	color: #fff;
	font-size: 1.55rem;
	margin: 0;
}

.editorial-author h2 + p {
	font-size: var(--tf-text-sm);
	line-height: 1.65;
	margin: 0.7rem 0 0;
}

.editorial-author a {
	align-items: center;
	color: #f5cf70;
	display: inline-flex;
	font-size: var(--tf-text-sm);
	font-weight: 760;
	gap: 0.5rem;
	margin-top: 0.8rem;
	min-height: 2.75rem;
	text-decoration: none;
}

.editorial-column .article-tags {
	margin-top: var(--tf-space-8);
}

.editorial-column .article-tags a {
	border: 1px solid var(--tf-border);
	min-height: 2.75rem;
	padding: 0.55rem 0.8rem;
}

/* The one retained post-ID engagement backend receives the new visual shell. */
.editorial-column > .tf-blr-single {
	margin: clamp(2.5rem, 6vw, 4rem) 0 0;
}

.editorial-column .tf-blr-single-card {
	background: #fff;
	border: 1px solid var(--tf-border);
	border-radius: 1.2rem;
	box-shadow: 0 1.25rem 3rem rgba(11, 41, 71, 0.07);
	padding: clamp(1.25rem, 3vw, 1.8rem);
}

.editorial-column .tf-blr-single-card h2 {
	font-size: clamp(1.55rem, 3vw, 2.1rem);
	margin: 0 0 var(--tf-space-4);
}

.editorial-column .tf-blr-social {
	color: var(--tf-muted);
	font-size: var(--tf-text-sm);
	margin-top: 0;
	padding-top: var(--tf-space-4);
}

.editorial-column .tf-blr-actions {
	display: grid;
	gap: 0.65rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: var(--tf-space-4);
}

.editorial-column .tf-blr-actions a {
	background: var(--tf-primary-50);
	border: 1px solid var(--tf-border);
	border-radius: 0.75rem;
	color: var(--tf-primary-900);
	min-height: 2.75rem;
}

.editorial-column .tf-blr-actions a:hover,
.editorial-column .tf-blr-actions a.is-liked {
	background: var(--tf-primary-900);
	border-color: var(--tf-primary-900);
	color: #fff;
}

.editorial-column .tf-blr-comments {
	border-color: var(--tf-border);
	border-radius: 1rem;
	box-shadow: none;
}

.editorial-column .tf-blr-comments textarea,
.editorial-column .tf-blr-comments input {
	background: #fff;
	border-color: var(--tf-border-strong);
	min-height: 2.75rem;
}

.editorial-column .tf-blr-comment-actions button {
	background: var(--tf-primary-900);
	border-radius: 0.75rem;
	min-height: 2.75rem;
}

.editorial-related {
	background: #fff;
	border-top: 1px solid var(--tf-border);
	padding-block: clamp(4.5rem, 9vw, 8rem);
}

.editorial-related__heading {
	align-items: end;
	display: flex;
	gap: var(--tf-space-8);
	justify-content: space-between;
	margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.editorial-related__heading h2 {
	font-size: clamp(2.35rem, 5vw, 4.5rem);
	line-height: 1;
	margin: 0;
	max-width: 12ch;
}

.editorial-related__heading > a {
	align-items: center;
	color: var(--tf-primary-900);
	display: inline-flex;
	font-size: var(--tf-text-sm);
	font-weight: 760;
	gap: 0.5rem;
	min-height: 2.75rem;
	text-decoration: none;
}

.editorial-related__grid {
	display: grid;
	gap: var(--tf-space-6);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.editorial-related__grid article {
	background: var(--journal-paper, #f2f4f1);
	border: 1px solid var(--tf-border);
	border-radius: 1.15rem;
	overflow: hidden;
}

.editorial-related__media {
	aspect-ratio: 16 / 9;
	background: var(--tf-primary-100);
	display: block;
	overflow: hidden;
	position: relative;
}

.editorial-related__media img {
	height: 100%;
	object-fit: cover;
	transition: transform 420ms var(--tf-ease);
	width: 100%;
}

.editorial-related__grid article:hover .editorial-related__media img {
	transform: scale(1.025);
}

.editorial-related__media > span:not(.blog-access-badge) {
	align-items: center;
	color: var(--tf-primary-700);
	display: flex;
	height: 100%;
	justify-content: center;
}

.editorial-related__grid article > div {
	padding: 1.2rem;
}

.editorial-related__grid article > div > span {
	color: var(--tf-accent-700);
	display: block;
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	margin-bottom: 0.6rem;
	text-transform: uppercase;
}

.editorial-related__grid h3 {
	font-size: clamp(1.25rem, 2.2vw, 1.6rem);
	line-height: 1.14;
	margin: 0;
}

.editorial-related__grid h3 a {
	color: var(--tf-ink);
	text-decoration: none;
}

.editorial-related__link {
	align-items: center;
	border-top: 1px solid var(--tf-border);
	color: var(--tf-primary-900);
	display: flex;
	font-size: var(--tf-text-sm);
	font-weight: 760;
	gap: 0.5rem;
	justify-content: space-between;
	margin-top: var(--tf-space-6);
	min-height: 2.75rem;
	padding-top: var(--tf-space-4);
	text-decoration: none;
}

.editorial-navigation {
	background: var(--tf-primary-950);
	color: #fff;
}

.editorial-navigation > .container {
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.editorial-navigation > .container > div {
	min-width: 0;
}

.editorial-navigation > .container > div + div {
	border-left: 1px solid rgba(255, 255, 255, 0.13);
	text-align: right;
}

.editorial-navigation a {
	color: #fff;
	display: grid;
	font-size: clamp(1.05rem, 2vw, 1.35rem);
	font-weight: 720;
	line-height: 1.35;
	min-height: 9rem;
	padding: clamp(1.5rem, 4vw, 2.75rem);
	text-decoration: none;
}

.editorial-navigation a span {
	color: var(--journal-mint);
	font-size: 0.67rem;
	letter-spacing: 0.12em;
	margin-bottom: 0.45rem;
	text-transform: uppercase;
}

@media (max-width: 70rem) {
	.journal-hero__grid,
	.journal-standard,
	.editorial-hero__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.journal-hero__copy {
		max-width: 52rem;
	}

	.journal-hero h1 {
		max-width: 10.5ch;
	}

	.journal-feature {
		max-width: 52rem;
	}

	.journal-controls {
		align-items: start;
		grid-template-columns: minmax(16rem, 0.9fr) minmax(20rem, 1.1fr);
	}

	.journal-count {
		grid-column: 1 / -1;
		margin: 0;
	}

	.journal-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.editorial-hero__facts {
		max-width: 38rem;
	}

	.editorial-body__grid {
		gap: var(--tf-space-8);
		grid-template-columns: minmax(0, 50rem);
	}

	.editorial-rail__sticky {
		align-items: start;
		grid-template-columns: minmax(0, 1fr) auto;
		position: static;
	}

	.editorial-toc ol {
		column-gap: var(--tf-space-6);
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.editorial-share {
		min-width: 12rem;
	}
}

@media (max-width: 48rem) {
	.journal-hero__inner {
		padding-bottom: 4rem;
	}

	.journal-hero h1 {
		font-size: clamp(3rem, 14vw, 4.7rem);
	}

	.journal-feature {
		border-radius: 1.35rem;
	}

	.journal-feature__footer {
		align-items: start;
		flex-direction: column;
	}

	.journal-metrics {
		grid-template-columns: minmax(0, 1fr);
	}

	.journal-metrics > div {
		padding: 1rem 0;
	}

	.journal-metrics > div + div {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.13);
		padding-left: 0;
	}

	.journal-directory__heading,
	.journal-controls {
		grid-template-columns: minmax(0, 1fr);
	}

	.journal-directory__heading h2 {
		font-size: clamp(2.5rem, 11vw, 4rem);
	}

	.journal-count {
		grid-column: auto;
	}

	.journal-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.journal-card {
		border-radius: 1.15rem;
	}

	.journal-standard {
		border-radius: 1.4rem;
		grid-template-columns: minmax(0, 1fr);
	}

	.editorial-hero {
		padding-bottom: 6.5rem;
	}

	.editorial-hero h1 {
		font-size: clamp(2.75rem, 12vw, 4.4rem);
	}

	.editorial-featured {
		margin-top: -4.5rem;
	}

	.editorial-featured img {
		aspect-ratio: 16 / 10;
		border-width: 0.35rem;
	}

	.editorial-rail__sticky {
		grid-template-columns: minmax(0, 1fr);
	}

	.editorial-toc ol {
		grid-template-columns: minmax(0, 1fr);
	}

	.editorial-share {
		min-width: 0;
	}

	.editorial-author {
		grid-template-columns: 3.5rem minmax(0, 1fr);
	}

	.editorial-author__avatar {
		font-size: 1.6rem;
		height: 3.5rem;
		width: 3.5rem;
	}

	.editorial-related__heading {
		align-items: start;
		flex-direction: column;
	}

	.editorial-related__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.editorial-navigation > .container {
		grid-template-columns: minmax(0, 1fr);
	}

	.editorial-navigation > .container > div + div {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.13);
		text-align: left;
	}
}

@media (max-width: 37.5rem) {
	.journal-hero .breadcrumbs,
	.editorial-hero .breadcrumbs {
		margin-bottom: 2rem;
	}

	.journal-hero__grid {
		gap: 2rem;
	}

	.journal-hero__lead,
	.editorial-hero__lead {
		font-size: 1rem;
	}

	.journal-principles {
		align-items: start;
		flex-direction: column;
	}

	.journal-feature__body {
		padding: 1.15rem;
	}

	.journal-feature h2 {
		font-size: 1.55rem;
	}

	.journal-controls {
		border-radius: 1.15rem;
		padding: 0.85rem;
	}

	.journal-filters {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.journal-filters button {
		padding-inline: 0.7rem;
		width: 100%;
	}

	.journal-card__body {
		padding: 1.05rem;
	}

	.journal-standard {
		padding: 1.35rem;
	}

	.journal-standard__intro h2 {
		font-size: 2.3rem;
	}

	.editorial-hero__facts {
		padding: 1rem;
	}

	.editorial-featured {
		padding-inline: 0.75rem;
	}

	.editorial-body {
		padding-top: 3.5rem;
	}

	.editorial-toc,
	.editorial-share {
		padding: 0.9rem;
	}

	.editorial-entry {
		font-size: 1rem;
		line-height: 1.78;
	}

	.editorial-entry p,
	.editorial-entry li {
		line-height: 1.78;
	}

	.editorial-disclaimer {
		grid-template-columns: minmax(0, 1fr);
	}

	.editorial-author {
		grid-template-columns: minmax(0, 1fr);
	}

	.editorial-column .tf-blr-actions {
		grid-template-columns: minmax(0, 1fr);
	}

	.editorial-column .tf-blr-comment-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.editorial-column .tf-blr-comment-actions button {
		width: 100%;
	}
}

@media (min-width: 90rem) {
	:root {
		--tf-container: 78rem;
	}

	.home-hero__grid {
		min-height: 47rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms;
		animation-iteration-count: 1;
		scroll-behavior: auto;
		transition-duration: 0.01ms;
	}
}

@media print {
	.site-header,
	.site-footer,
	.breadcrumbs,
	.button,
	.post-navigation,
	.comments-area,
	.article-progress,
	.editorial-rail,
	.editorial-related,
	.editorial-navigation,
	.tf-blr-single {
		display: none;
	}

	body {
		color: #000;
		font-size: 11pt;
	}

	a {
		color: #000;
		text-decoration: underline;
	}

	.page-hero,
	.archive-hero,
	.article-hero,
	.editorial-hero {
		background: transparent;
		border: 0;
		padding-block: 1rem;
	}

	.editorial-hero h1,
	.editorial-hero__lead,
	.editorial-hero__facts dd {
		color: #000;
	}

	.editorial-featured {
		margin-top: 0;
	}

	.editorial-body {
		padding-block: 1rem;
	}

	.editorial-body__grid {
		display: block;
	}
}

/* ==========================================================================
   Premium account experience
   Dedicated classes deliberately avoid every legacy auth/profile selector.
   ========================================================================== */

.tf-site--account {
	background: #f3f6fa;
}

.tf-site--account .site-footer {
	margin-top: 0;
}

.header-account {
	align-items: center;
	background: #f0f6f4;
	border: 1px solid #d6e6e0;
	border-radius: 999px;
	color: var(--tf-primary-950);
	display: inline-flex;
	gap: 0.58rem;
	min-height: 2.75rem;
	padding: 0.28rem 0.8rem 0.28rem 0.3rem;
	text-decoration: none;
	transition:
		background var(--tf-duration) var(--tf-ease),
		border-color var(--tf-duration) var(--tf-ease),
		transform var(--tf-duration) var(--tf-ease);
}

.header-account:hover,
.header-account.is-current {
	background: #e5f4ef;
	border-color: #b7dacf;
	color: var(--tf-primary-950);
	transform: translateY(-1px);
}

.header-account__avatar {
	align-items: center;
	background: linear-gradient(145deg, #1d8068, #0b2947);
	border: 2px solid rgba(255, 255, 255, 0.82);
	border-radius: 50%;
	box-shadow: 0 5px 12px rgba(7, 29, 50, 0.16);
	color: #fff;
	display: inline-flex;
	font-size: 0.76rem;
	font-weight: 850;
	height: 2.05rem;
	justify-content: center;
	width: 2.05rem;
}

.header-account__copy {
	display: grid;
	line-height: 1.05;
}

.header-account__copy small {
	color: #688078;
	font-size: 0.58rem;
	font-weight: 750;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.header-account__copy strong {
	color: inherit;
	font-size: 0.78rem;
	font-weight: 800;
	margin-top: 0.18rem;
}

.header-login.is-current {
	color: var(--tf-accent-700);
}

/* Authentication */

.account-auth-page {
	background:
		radial-gradient(circle at 15% 0%, rgba(36, 184, 143, 0.18), transparent 28rem),
		radial-gradient(circle at 92% 16%, rgba(49, 112, 184, 0.2), transparent 32rem),
		#071a2d;
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

.account-auth-page::before {
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
	background-size: 3.5rem 3.5rem;
	content: "";
	inset: 0;
	mask-image: linear-gradient(to bottom, #000, transparent 85%);
	pointer-events: none;
	position: absolute;
}

.account-auth {
	padding: clamp(2rem, 5vw, 4.8rem) 0;
	position: relative;
	z-index: 1;
}

.account-auth__shell {
	background: #fff;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 2.25rem;
	box-shadow: 0 2.5rem 7rem rgba(0, 7, 20, 0.38);
	display: grid;
	grid-template-columns: minmax(0, 1.03fr) minmax(26rem, 0.97fr);
	margin-inline: auto;
	max-width: 74rem;
	min-height: 46rem;
	overflow: hidden;
}

.account-auth__story {
	background:
		linear-gradient(145deg, rgba(10, 48, 76, 0.28), rgba(4, 17, 34, 0.78)),
		linear-gradient(150deg, #0c3958 0%, #071a31 58%, #051426 100%);
	color: rgba(255, 255, 255, 0.75);
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	padding: clamp(2.25rem, 5vw, 4.25rem);
	position: relative;
}

.account-auth__story::before {
	border: 1px solid rgba(139, 224, 195, 0.16);
	border-radius: 50%;
	content: "";
	height: 29rem;
	position: absolute;
	right: -13rem;
	top: -12rem;
	width: 29rem;
}

.account-auth__story::after {
	background: radial-gradient(circle, rgba(90, 219, 175, 0.52) 0 2px, transparent 3px);
	background-size: 1.55rem 1.55rem;
	bottom: -2rem;
	content: "";
	height: 15rem;
	opacity: 0.17;
	position: absolute;
	right: -1rem;
	transform: rotate(-8deg);
	width: 19rem;
}

.account-auth__story-glow {
	background: #17aa80;
	border-radius: 50%;
	filter: blur(5rem);
	height: 14rem;
	opacity: 0.18;
	pointer-events: none;
	position: absolute;
	right: -3rem;
	top: 13rem;
	width: 14rem;
}

.account-auth__signal {
	align-items: center;
	color: #b8dacd;
	display: flex;
	font-size: 0.68rem;
	font-weight: 800;
	gap: 0.55rem;
	letter-spacing: 0.13em;
	margin: 0 0 clamp(3rem, 8vh, 5.5rem);
	position: relative;
	text-transform: uppercase;
	z-index: 1;
}

.account-auth__signal span {
	background: #4ee0aa;
	border-radius: 50%;
	box-shadow: 0 0 0 0.3rem rgba(78, 224, 170, 0.12);
	height: 0.46rem;
	width: 0.46rem;
}

.account-auth__story-copy {
	max-width: 31rem;
	position: relative;
	z-index: 1;
}

.account-auth__story-copy h2 {
	color: #fff;
	font-family: var(--tf-font-serif);
	font-size: clamp(2.35rem, 4vw, 4.4rem);
	font-weight: 500;
	letter-spacing: -0.045em;
	line-height: 0.98;
	margin-bottom: 1.35rem;
	text-wrap: balance;
}

.account-auth__story-copy > p:last-child {
	color: #b8c9d5;
	font-size: 1.02rem;
	line-height: 1.72;
	margin: 0;
	max-width: 31rem;
}

.account-auth__benefits {
	display: grid;
	gap: 0.85rem;
	list-style: none;
	margin: 2.4rem 0 2.2rem;
	padding: 0;
	position: relative;
	z-index: 1;
}

.account-auth__benefits li {
	align-items: center;
	backdrop-filter: blur(0.8rem);
	background: rgba(255, 255, 255, 0.055);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 1rem;
	display: grid;
	gap: 0.85rem;
	grid-template-columns: 2.65rem minmax(0, 1fr);
	padding: 0.8rem 0.9rem;
}

.account-auth__benefits li > span {
	align-items: center;
	background: rgba(76, 221, 171, 0.12);
	border: 1px solid rgba(76, 221, 171, 0.16);
	border-radius: 0.8rem;
	color: #71e3bb;
	display: flex;
	height: 2.65rem;
	justify-content: center;
	width: 2.65rem;
}

.account-auth__benefits svg {
	height: 1.2rem;
	width: 1.2rem;
}

.account-auth__benefits div {
	display: grid;
}

.account-auth__benefits strong {
	color: #f7fbfd;
	font-size: 0.82rem;
	font-weight: 750;
}

.account-auth__benefits small {
	color: #91a9b9;
	font-size: 0.7rem;
	line-height: 1.45;
	margin-top: 0.1rem;
}

.account-auth__journey {
	backdrop-filter: blur(1rem);
	background: rgba(4, 19, 36, 0.54);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 1.25rem;
	margin-top: auto;
	padding: 1rem 1.15rem;
	position: relative;
	z-index: 1;
}

.account-auth__journey-head {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.account-auth__journey-head span {
	color: #8da6b6;
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.account-auth__journey-head strong {
	align-items: center;
	color: #67deb4;
	display: flex;
	font-size: 0.62rem;
	gap: 0.35rem;
	text-transform: uppercase;
}

.account-auth__journey-head strong::before {
	background: currentColor;
	border-radius: 50%;
	content: "";
	height: 0.34rem;
	width: 0.34rem;
}

.account-auth__journey ol {
	display: grid;
	gap: 0;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 0.9rem 0 0;
	padding: 0;
}

.account-auth__journey li {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	color: #8298a8;
	display: grid;
	font-size: 0.62rem;
	font-weight: 650;
	gap: 0.45rem;
	line-height: 1.4;
	padding: 0.8rem 0.55rem 0 0;
	position: relative;
}

.account-auth__journey li::before {
	background: #496274;
	border: 0.22rem solid #09223a;
	border-radius: 50%;
	content: "";
	height: 0.72rem;
	position: absolute;
	top: -0.36rem;
	width: 0.72rem;
}

.account-auth__journey li.is-complete {
	border-color: rgba(93, 225, 180, 0.6);
	color: #d9f7ec;
}

.account-auth__journey li.is-complete::before {
	background: #52dba9;
}

.account-auth__journey li span {
	color: #5ddfb2;
	font-size: 0.56rem;
	font-weight: 850;
	letter-spacing: 0.1em;
}

.account-auth__panel {
	align-self: start;
	background:
		radial-gradient(circle at 100% 0%, rgba(26, 151, 117, 0.07), transparent 19rem),
		#fff;
	min-width: 0;
	padding: clamp(2.1rem, 5vw, 4.25rem);
}

.account-auth__back,
.account-settings-hero__back {
	align-items: center;
	color: #647482;
	display: inline-flex;
	font-size: 0.76rem;
	font-weight: 700;
	gap: 0.45rem;
	margin-bottom: 2.1rem;
	text-decoration: none;
}

.account-auth__back svg,
.account-settings-hero__back svg {
	height: 1rem;
	transform: rotate(180deg);
	width: 1rem;
}

.account-auth__back:hover,
.account-settings-hero__back:hover {
	color: var(--tf-accent-700);
}

.account-auth__tabs {
	background: #f0f4f5;
	border: 1px solid #e2e9e8;
	border-radius: 0.8rem;
	display: grid;
	gap: 0.25rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-bottom: 2rem;
	padding: 0.25rem;
}

.account-auth__tabs a {
	align-items: center;
	border-radius: 0.6rem;
	color: #60717c;
	display: flex;
	font-size: 0.8rem;
	font-weight: 750;
	justify-content: center;
	min-height: 2.75rem;
	text-decoration: none;
}

.account-auth__tabs a[aria-current="page"] {
	background: #fff;
	box-shadow: 0 0.2rem 0.8rem rgba(10, 39, 66, 0.08);
	color: var(--tf-primary-950);
}

.account-auth__heading {
	margin-bottom: 1.35rem;
}

.account-auth__overline {
	color: var(--tf-accent-700);
	font-size: 0.67rem;
	font-weight: 850;
	letter-spacing: 0.14em;
	margin: 0 0 0.5rem;
	text-transform: uppercase;
}

.account-auth__heading h1,
.account-auth__signed-in h1 {
	color: var(--tf-primary-950);
	font-family: var(--tf-font-serif);
	font-size: clamp(2.35rem, 4.5vw, 3.65rem);
	font-weight: 550;
	letter-spacing: -0.045em;
	line-height: 1.02;
	margin: 0 0 0.8rem;
	text-wrap: balance;
}

.account-auth__heading > p:last-child,
.account-auth__signed-in > p {
	color: #63737f;
	font-size: 0.92rem;
	line-height: 1.65;
	margin: 0;
}

.account-auth__destination {
	align-items: center;
	background: linear-gradient(90deg, #f0f8f5, #f6faf9);
	border: 1px solid #d9ebe5;
	border-radius: 0.9rem;
	display: grid;
	gap: 0.75rem;
	grid-template-columns: 2.2rem minmax(0, 1fr);
	margin: 1.25rem 0;
	padding: 0.72rem 0.8rem;
}

.account-auth__destination > span {
	align-items: center;
	background: #dff3ec;
	border-radius: 0.65rem;
	color: #158066;
	display: flex;
	height: 2.2rem;
	justify-content: center;
	width: 2.2rem;
}

.account-auth__destination svg {
	height: 1rem;
	width: 1rem;
}

.account-auth__destination div {
	display: grid;
	line-height: 1.35;
}

.account-auth__destination small {
	color: #739086;
	font-size: 0.58rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.account-auth__destination strong {
	color: #25463d;
	font-size: 0.72rem;
	font-weight: 750;
	margin-top: 0.12rem;
}

.account-alert {
	align-items: flex-start;
	border: 1px solid;
	border-radius: 0.9rem;
	display: grid;
	font-size: 0.8rem;
	gap: 0.7rem;
	grid-template-columns: 1.6rem minmax(0, 1fr);
	line-height: 1.5;
	margin: 1rem 0;
	padding: 0.75rem 0.85rem;
}

.account-alert > span {
	align-items: center;
	border-radius: 50%;
	display: flex;
	font-size: 0.7rem;
	font-weight: 900;
	height: 1.6rem;
	justify-content: center;
	width: 1.6rem;
}

.account-alert p {
	margin: 0.12rem 0 0;
}

.account-alert--error {
	background: #fff6f5;
	border-color: #f2cbc7;
	color: #8d3029;
}

.account-alert--error > span {
	background: #f9d9d5;
	color: #9d3028;
}

.account-alert--success {
	background: #effaf6;
	border-color: #bee8d8;
	color: #23634f;
}

.account-alert--success > span {
	background: #ccefe2;
	color: #137354;
}

.account-form {
	display: grid;
	gap: 1rem;
	margin-top: 1.2rem;
}

.account-field {
	display: grid;
	gap: 0.4rem;
	min-width: 0;
}

.account-field > label,
.account-field__label-row label,
.account-contact-options > legend {
	color: #1d3547;
	font-size: 0.77rem;
	font-weight: 780;
}

.account-field__label-row {
	align-items: center;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
}

.account-field__label-row a {
	color: var(--tf-accent-700);
	font-size: 0.72rem;
	font-weight: 750;
	text-decoration: none;
}

.account-field__control {
	align-items: center;
	background: #fbfcfc;
	border: 1px solid #cedbd8;
	border-radius: 0.78rem;
	display: flex;
	min-height: 3.35rem;
	overflow: hidden;
	transition:
		background var(--tf-duration) var(--tf-ease),
		border-color var(--tf-duration) var(--tf-ease),
		box-shadow var(--tf-duration) var(--tf-ease);
}

.account-field__control:focus-within {
	background: #fff;
	border-color: #279176;
	box-shadow: 0 0 0 0.22rem rgba(24, 145, 113, 0.12);
}

.account-field__control input,
.account-field__control textarea {
	background: transparent;
	border: 0;
	color: var(--tf-primary-950);
	flex: 1;
	font-size: 1rem;
	font-weight: 600;
	min-height: 3.2rem;
	min-width: 0;
	outline: 0;
	padding: 0.68rem 0.9rem;
	width: 100%;
}

.account-field__control input::placeholder,
.account-field__control textarea::placeholder {
	color: #98a5ad;
	font-weight: 450;
	opacity: 1;
}

.account-field__control input:disabled {
	color: #677985;
	cursor: not-allowed;
}

.account-field__icon {
	align-items: center;
	border-right: 1px solid #e1e8e6;
	color: #7b8f8a;
	display: flex;
	font-size: 0.73rem;
	font-weight: 850;
	height: 1.65rem;
	justify-content: center;
	margin-left: 0.8rem;
	padding-right: 0.75rem;
	width: 2rem;
}

.account-field__toggle {
	align-items: center;
	align-self: stretch;
	background: transparent;
	border: 0;
	color: #537168;
	display: flex;
	font-size: 0.7rem;
	font-weight: 800;
	justify-content: center;
	min-width: 4.2rem;
	padding: 0.5rem;
}

.account-field__toggle:hover {
	background: #edf6f3;
	color: #126f58;
}

.account-field > small,
.account-field__caps {
	color: #788891;
	font-size: 0.68rem;
	line-height: 1.45;
}

.account-field__caps:not(:empty) {
	color: #94620d;
	font-weight: 750;
}

.account-check {
	align-items: flex-start;
	color: #425764;
	cursor: pointer;
	display: grid;
	font-size: 0.75rem;
	gap: 0.65rem;
	grid-template-columns: 1.25rem minmax(0, 1fr);
	line-height: 1.45;
	position: relative;
}

.account-check input {
	height: 1.25rem;
	margin: 0;
	opacity: 0;
	position: absolute;
	width: 1.25rem;
}

.account-check__box {
	background: #fff;
	border: 1px solid #aebfbb;
	border-radius: 0.32rem;
	display: block;
	height: 1.25rem;
	margin-top: 0.04rem;
	position: relative;
	width: 1.25rem;
}

.account-check input:focus-visible + .account-check__box {
	box-shadow: var(--tf-shadow-focus);
	outline: 2px solid var(--tf-focus);
	outline-offset: 2px;
}

.account-check input:checked + .account-check__box {
	background: var(--tf-accent-600);
	border-color: var(--tf-accent-600);
}

.account-check input:checked + .account-check__box::after {
	border: solid #fff;
	border-width: 0 0.12rem 0.12rem 0;
	content: "";
	height: 0.54rem;
	left: 0.4rem;
	position: absolute;
	top: 0.2rem;
	transform: rotate(45deg);
	width: 0.28rem;
}

.account-check a {
	font-weight: 750;
}

.account-check--remember {
	margin: 0.1rem 0;
}

.account-consents {
	background: #f6f9f8;
	border: 1px solid #dce7e4;
	border-radius: 1rem;
	display: grid;
	gap: 0.75rem;
	margin: 0.2rem 0;
	padding: 1rem;
}

.account-consents legend {
	color: var(--tf-primary-950);
	font-size: 0.82rem;
	font-weight: 800;
	padding: 0 0.3rem;
}

.account-consents > p {
	color: #677982;
	font-size: 0.7rem;
	line-height: 1.5;
	margin: -0.1rem 0 0;
}

.account-form__submit {
	align-items: center;
	background: linear-gradient(110deg, #0d765d, #0b354b);
	border: 0;
	border-radius: 0.8rem;
	box-shadow: 0 0.8rem 1.7rem rgba(12, 70, 63, 0.2);
	color: #fff;
	display: flex;
	font-size: 0.82rem;
	font-weight: 800;
	gap: 0.55rem;
	justify-content: center;
	min-height: 3.35rem;
	padding: 0.75rem 1.1rem;
	transition:
		box-shadow var(--tf-duration) var(--tf-ease),
		transform var(--tf-duration) var(--tf-ease);
	width: 100%;
}

.account-form__submit:hover {
	box-shadow: 0 1rem 2.2rem rgba(12, 70, 63, 0.28);
	transform: translateY(-2px);
}

.account-form__submit svg {
	height: 1rem;
	width: 1rem;
}

.account-auth__switch {
	color: #788790;
	font-size: 0.76rem;
	margin: 1.15rem 0 0;
	text-align: center;
}

.account-auth__switch a {
	font-weight: 800;
	text-decoration: none;
}

.account-auth__privacy {
	align-items: flex-start;
	border-top: 1px solid #e7edeb;
	color: #7d8a91;
	display: flex;
	font-size: 0.65rem;
	gap: 0.5rem;
	line-height: 1.5;
	margin: 1.4rem 0 0;
	padding-top: 1rem;
}

.account-auth__privacy svg {
	color: #438b77;
	flex: 0 0 auto;
	height: 1rem;
	margin-top: 0.1rem;
	width: 1rem;
}

.account-auth__signed-in {
	display: grid;
	justify-items: start;
	padding-top: clamp(3rem, 11vh, 7rem);
}

.account-auth__signed-avatar {
	align-items: center;
	background:
		linear-gradient(145deg, rgba(255, 255, 255, 0.22), transparent),
		linear-gradient(145deg, #209774, #0a3150);
	border: 0.35rem solid #e8f4f0;
	border-radius: 1.45rem;
	box-shadow: 0 1rem 2.3rem rgba(7, 45, 57, 0.18);
	color: #fff;
	display: flex;
	font-size: 2rem;
	font-weight: 800;
	height: 5.6rem;
	justify-content: center;
	margin-bottom: 1.8rem;
	transform: rotate(-3deg);
	width: 5.6rem;
}

.account-auth__signed-meta {
	margin: 1.35rem 0 0;
}

.account-auth__signed-meta span {
	align-items: center;
	background: #f0f7f4;
	border: 1px solid #dbe9e4;
	border-radius: 999px;
	color: #48675d;
	display: inline-flex;
	font-size: 0.72rem;
	font-weight: 700;
	gap: 0.45rem;
	padding: 0.5rem 0.75rem;
}

.account-auth__signed-meta svg {
	height: 1rem;
	width: 1rem;
}

.account-auth__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	margin-top: 1.8rem;
}

.button--soft {
	background: #edf4f2;
	border: 1px solid #d7e5e1;
	color: #22483e;
}

.button--soft:hover {
	background: #e3f0ec;
	color: #143c31;
}

.account-auth__logout {
	color: #8c5c59;
	font-size: 0.72rem;
	font-weight: 700;
	margin-top: 1.4rem;
}

/* Account gate */

.account-gate {
	background:
		radial-gradient(circle at 10% 0, rgba(40, 165, 127, 0.14), transparent 30rem),
		#edf3f6;
	min-height: 39rem;
	padding: clamp(3rem, 8vw, 7rem) 0;
}

.account-gate__shell {
	align-items: center;
	background: #fff;
	border: 1px solid #dbe5e8;
	border-radius: 2rem;
	box-shadow: 0 2rem 5rem rgba(12, 39, 61, 0.12);
	display: grid;
	gap: clamp(2rem, 7vw, 6rem);
	grid-template-columns: minmax(16rem, 0.75fr) minmax(0, 1.25fr);
	margin: 0 auto;
	max-width: 65rem;
	overflow: hidden;
	padding: clamp(2rem, 6vw, 4.5rem);
}

.account-gate__visual {
	aspect-ratio: 1;
	background:
		radial-gradient(circle at 50% 35%, rgba(57, 221, 170, 0.18), transparent 36%),
		linear-gradient(145deg, #0d3c59, #06182c);
	border-radius: 1.8rem;
	box-shadow: 0 1.6rem 3.5rem rgba(4, 27, 45, 0.24);
	display: grid;
	place-items: center;
	position: relative;
}

.account-gate__visual > span {
	align-items: center;
	background: rgba(82, 222, 174, 0.13);
	border: 1px solid rgba(102, 230, 186, 0.25);
	border-radius: 50%;
	color: #73e8c1;
	display: flex;
	height: 5rem;
	justify-content: center;
	width: 5rem;
}

.account-gate__visual > span svg {
	height: 2.2rem;
	width: 2.2rem;
}

.account-gate__visual > div {
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 50%;
	inset: 12%;
	position: absolute;
}

.account-gate__visual > div:nth-of-type(2) {
	inset: 24%;
}

.account-gate__visual > div:nth-of-type(3) {
	background: radial-gradient(circle, #55dfb1 0 2px, transparent 3px);
	background-size: 1.8rem 1.8rem;
	border: 0;
	inset: 0;
	opacity: 0.1;
}

.account-gate__copy h1 {
	color: var(--tf-primary-950);
	font-family: var(--tf-font-serif);
	font-size: clamp(2.6rem, 5vw, 4.5rem);
	font-weight: 520;
	letter-spacing: -0.05em;
	line-height: 1;
	margin-bottom: 1rem;
}

.account-gate__copy > p:not(.eyebrow) {
	color: #61727e;
	font-size: 1rem;
	line-height: 1.7;
	max-width: 37rem;
}

.account-gate__copy .button-group {
	margin-top: 1.8rem;
}

/* Dashboard hero */

.account-dashboard-hero {
	background:
		radial-gradient(circle at 84% 10%, rgba(58, 210, 162, 0.2), transparent 24rem),
		radial-gradient(circle at 15% 100%, rgba(47, 105, 164, 0.22), transparent 28rem),
		linear-gradient(135deg, #071d33, #092b44 58%, #073a43);
	color: #fff;
	overflow: hidden;
	padding: clamp(2.5rem, 5vw, 4.7rem) 0 0;
	position: relative;
}

.account-dashboard-hero::before,
.account-settings-hero::before {
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
	background-size: 3.4rem 3.4rem;
	content: "";
	inset: 0;
	mask-image: linear-gradient(to bottom, #000, transparent);
	pointer-events: none;
	position: absolute;
}

.account-dashboard-hero__shell {
	display: grid;
	gap: 2rem;
	grid-template-columns: minmax(0, 1fr) auto;
	position: relative;
	z-index: 1;
}

.account-dashboard-hero__ambient {
	border: 1px solid rgba(125, 228, 194, 0.12);
	border-radius: 50%;
	height: 28rem;
	pointer-events: none;
	position: absolute;
	right: -10rem;
	top: -13rem;
	width: 28rem;
}

.account-dashboard-hero__identity {
	align-items: center;
	display: grid;
	gap: 1.35rem;
	grid-template-columns: 5.5rem minmax(0, 1fr);
	min-width: 0;
}

.account-dashboard-hero__avatar {
	align-items: center;
	background:
		linear-gradient(145deg, rgba(255, 255, 255, 0.2), transparent),
		linear-gradient(145deg, #28a982, #0c3854);
	border: 0.3rem solid rgba(255, 255, 255, 0.14);
	border-radius: 1.65rem;
	box-shadow: 0 1.2rem 2.8rem rgba(0, 9, 23, 0.26);
	color: #fff;
	display: flex;
	font-size: 2.2rem;
	font-weight: 850;
	height: 5.5rem;
	justify-content: center;
	width: 5.5rem;
}

.account-dashboard-hero__status {
	align-items: center;
	color: #82d9bd;
	display: flex;
	font-size: 0.63rem;
	font-weight: 850;
	gap: 0.45rem;
	letter-spacing: 0.12em;
	margin: 0 0 0.45rem;
	text-transform: uppercase;
}

.account-dashboard-hero__status span {
	background: #56dcae;
	border-radius: 50%;
	box-shadow: 0 0 0 0.25rem rgba(86, 220, 174, 0.1);
	height: 0.42rem;
	width: 0.42rem;
}

.account-dashboard-hero__identity h1 {
	color: #fff;
	font-family: var(--tf-font-serif);
	font-size: clamp(2.4rem, 5vw, 4.4rem);
	font-weight: 520;
	letter-spacing: -0.045em;
	line-height: 1;
	margin: 0 0 0.35rem;
}

.account-dashboard-hero__identity > div > p:last-child {
	color: #a7bac7;
	font-size: 0.84rem;
	margin: 0;
}

.account-dashboard-hero__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: flex-end;
}

.account-dashboard-hero__logout {
	color: #bac8d1;
	font-size: 0.74rem;
	font-weight: 750;
}

.account-dashboard-hero__logout:hover {
	color: #fff;
}

.account-dashboard-hero__meta {
	align-items: center;
	backdrop-filter: blur(1rem);
	background: rgba(255, 255, 255, 0.055);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-bottom: 0;
	border-radius: 1.5rem 1.5rem 0 0;
	display: grid;
	gap: 0;
	grid-column: 1 / -1;
	grid-template-columns: 0.75fr 0.55fr 1.35fr;
	margin-top: 1rem;
	min-height: 6.5rem;
	padding: 0 1.5rem;
}

.account-dashboard-hero__meta > div {
	display: grid;
	padding: 0.5rem 1.4rem;
}

.account-dashboard-hero__meta > div + div {
	border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.account-dashboard-hero__meta small,
.account-dashboard-hero__progress small {
	color: #8fa5b4;
	font-size: 0.6rem;
	font-weight: 780;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.account-dashboard-hero__meta strong,
.account-dashboard-hero__progress strong {
	color: #fff;
	font-size: 0.9rem;
	font-weight: 750;
	margin-top: 0.18rem;
}

.account-dashboard-hero__progress {
	align-items: center;
	display: grid !important;
	gap: 0.8rem;
	grid-template-columns: 3.65rem minmax(0, 1fr);
}

.account-progress-ring {
	align-items: center;
	background:
		radial-gradient(circle, #12364c 57%, transparent 59%),
		conic-gradient(#56dcae var(--account-progress), rgba(255, 255, 255, 0.12) 0);
	border-radius: 50%;
	display: flex;
	height: 3.65rem;
	justify-content: center;
	width: 3.65rem;
}

.account-progress-ring strong {
	font-size: 0.66rem;
	margin: 0;
}

/* Dashboard layout */

.account-dashboard,
.account-settings {
	background:
		radial-gradient(circle at 92% 0, rgba(29, 145, 111, 0.07), transparent 28rem),
		#f3f6fa;
	padding: clamp(2.25rem, 5vw, 4.5rem) 0 clamp(4rem, 8vw, 7rem);
}

.account-dashboard__layout,
.account-settings__layout {
	align-items: start;
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	grid-template-columns: 14.5rem minmax(0, 1fr);
}

.account-sidebar {
	position: sticky;
	top: calc(var(--tf-header-height) + var(--tf-admin-bar-height) + 1.5rem);
}

.account-sidebar > p {
	color: #83919a;
	font-size: 0.6rem;
	font-weight: 850;
	letter-spacing: 0.12em;
	margin: 0 0 0.7rem 0.8rem;
	text-transform: uppercase;
}

.account-sidebar nav {
	display: grid;
	gap: 0.3rem;
}

.account-sidebar nav a {
	align-items: center;
	border: 1px solid transparent;
	border-radius: 0.85rem;
	color: #536775;
	display: grid;
	font-size: 0.76rem;
	font-weight: 720;
	gap: 0.68rem;
	grid-template-columns: 2rem minmax(0, 1fr);
	min-height: 3.25rem;
	padding: 0.45rem 0.65rem;
	text-decoration: none;
	transition:
		background var(--tf-duration) var(--tf-ease),
		border-color var(--tf-duration) var(--tf-ease),
		color var(--tf-duration) var(--tf-ease);
}

.account-sidebar nav a:hover {
	background: rgba(255, 255, 255, 0.75);
	color: var(--tf-primary-900);
}

.account-sidebar nav a.is-current {
	background: #fff;
	border-color: #dce6e7;
	box-shadow: 0 0.5rem 1.6rem rgba(9, 38, 61, 0.07);
	color: var(--tf-primary-950);
}

.account-sidebar nav a > span {
	align-items: center;
	background: #e9f1f0;
	border-radius: 0.55rem;
	color: #4a766a;
	display: flex;
	height: 2rem;
	justify-content: center;
	width: 2rem;
}

.account-sidebar nav a.is-current > span {
	background: #dcf2ea;
	color: #117359;
}

.account-sidebar nav svg {
	height: 1.05rem;
	width: 1.05rem;
}

.account-sidebar__help {
	background: linear-gradient(145deg, #0d3450, #09253d);
	border-radius: 1rem;
	color: #a9bdc8;
	margin-top: 1.5rem;
	overflow: hidden;
	padding: 1.15rem;
	position: relative;
}

.account-sidebar__help::after {
	background: #3fd19f;
	border-radius: 50%;
	content: "";
	filter: blur(2.2rem);
	height: 4.5rem;
	opacity: 0.17;
	position: absolute;
	right: -1rem;
	top: -1rem;
	width: 4.5rem;
}

.account-sidebar__help > span {
	color: #67ddba;
	display: block;
	margin-bottom: 0.7rem;
}

.account-sidebar__help svg {
	height: 1.25rem;
	width: 1.25rem;
}

.account-sidebar__help strong {
	color: #fff;
	display: block;
	font-size: 0.76rem;
	position: relative;
}

.account-sidebar__help p {
	font-size: 0.65rem;
	line-height: 1.55;
	margin: 0.35rem 0 0;
	position: relative;
}

.account-dashboard__content,
.account-settings__content {
	display: grid;
	gap: 1.35rem;
	min-width: 0;
}

.account-welcome {
	align-items: center;
	display: flex;
	gap: 2rem;
	justify-content: space-between;
}

.account-welcome h2 {
	color: var(--tf-primary-950);
	font-family: var(--tf-font-serif);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 540;
	letter-spacing: -0.04em;
	line-height: 1.03;
	margin: 0 0 0.55rem;
}

.account-welcome > div > p:last-child {
	color: #697984;
	font-size: 0.83rem;
	line-height: 1.6;
	margin: 0;
}

.account-launchpad {
	display: grid;
	gap: 0.85rem;
	grid-template-columns: 1.15fr repeat(2, minmax(0, 1fr));
}

.account-launch-card {
	background:
		radial-gradient(circle at 100% 0, rgba(34, 159, 123, 0.08), transparent 10rem),
		#fff;
	border: 1px solid #dce6e8;
	border-radius: 1.1rem;
	box-shadow: 0 0.7rem 2rem rgba(9, 36, 58, 0.055);
	color: var(--tf-primary-950);
	display: grid;
	min-height: 11.25rem;
	overflow: hidden;
	padding: 1.15rem;
	position: relative;
	text-decoration: none;
	transition:
		border-color var(--tf-duration) var(--tf-ease),
		box-shadow var(--tf-duration) var(--tf-ease),
		transform var(--tf-duration) var(--tf-ease);
}

.account-launch-card:hover {
	border-color: #bad9d0;
	box-shadow: 0 1.2rem 2.8rem rgba(9, 36, 58, 0.11);
	color: var(--tf-primary-950);
	transform: translateY(-0.2rem);
}

.account-launch-card > span {
	align-items: center;
	background: #e7f3ef;
	border-radius: 0.7rem;
	color: #19795f;
	display: flex;
	height: 2.6rem;
	justify-content: center;
	margin-bottom: auto;
	width: 2.6rem;
}

.account-launch-card > span svg {
	height: 1.25rem;
	width: 1.25rem;
}

.account-launch-card small {
	color: #809099;
	font-size: 0.56rem;
	font-weight: 820;
	letter-spacing: 0.1em;
	margin-top: 1rem;
	text-transform: uppercase;
}

.account-launch-card strong {
	font-family: var(--tf-font-serif);
	font-size: 1.35rem;
	font-weight: 620;
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin-top: 0.2rem;
}

.account-launch-card em {
	align-items: center;
	color: #397163;
	display: flex;
	font-size: 0.65rem;
	font-style: normal;
	font-weight: 780;
	gap: 0.3rem;
	margin-top: 0.8rem;
}

.account-launch-card em svg {
	height: 0.9rem;
	width: 0.9rem;
}

.account-launch-card--primary {
	background:
		radial-gradient(circle at 100% 0, rgba(70, 223, 170, 0.19), transparent 12rem),
		linear-gradient(145deg, #0a3a53, #08243d);
	border-color: #123e54;
	color: #fff;
}

.account-launch-card--primary:hover {
	border-color: #2f8f78;
	color: #fff;
}

.account-launch-card--primary > span {
	background: rgba(91, 224, 180, 0.13);
	border: 1px solid rgba(91, 224, 180, 0.15);
	color: #6ce5bd;
}

.account-launch-card--primary small {
	color: #86a5b3;
}

.account-launch-card--primary strong {
	color: #fff;
}

.account-launch-card--primary em {
	color: #76dfbb;
}

.account-dashboard__grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: minmax(0, 1.18fr) minmax(18rem, 0.82fr);
}

.account-card {
	background: #fff;
	border: 1px solid #dce6e8;
	border-radius: 1.25rem;
	box-shadow: 0 0.8rem 2.2rem rgba(9, 36, 58, 0.055);
	min-width: 0;
	overflow: hidden;
	padding: 1.35rem;
}

.account-card__header {
	align-items: flex-start;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
}

.account-card__header h2 {
	color: var(--tf-primary-950);
	font-family: var(--tf-font-serif);
	font-size: 1.65rem;
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 1.1;
	margin: 0;
}

.account-card__header > a {
	align-items: center;
	color: #28725e;
	display: flex;
	font-size: 0.65rem;
	font-weight: 800;
	gap: 0.3rem;
	text-decoration: none;
	white-space: nowrap;
}

.account-card__header > a svg {
	height: 0.9rem;
	width: 0.9rem;
}

.account-activity-list {
	display: grid;
	list-style: none;
	margin: 1rem -0.35rem -0.35rem;
	padding: 0;
}

.account-activity-list li + li {
	border-top: 1px solid #e7edee;
}

.account-activity-list a {
	align-items: center;
	border-radius: 0.75rem;
	color: var(--tf-primary-950);
	display: grid;
	gap: 0.8rem;
	grid-template-columns: 2.55rem minmax(0, 1fr) 1rem;
	padding: 0.8rem 0.35rem;
	text-decoration: none;
}

.account-activity-list a:hover {
	background: #f6f9f8;
}

.account-activity-list__icon {
	align-items: center;
	background: #e9f4f0;
	border-radius: 0.68rem;
	color: #278169;
	display: flex;
	height: 2.55rem;
	justify-content: center;
	width: 2.55rem;
}

.account-activity-list__icon svg {
	height: 1.15rem;
	width: 1.15rem;
}

.account-activity-list a > span:nth-child(2) {
	display: grid;
	min-width: 0;
}

.account-activity-list small {
	color: #839199;
	font-size: 0.55rem;
	font-weight: 820;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.account-activity-list strong {
	font-size: 0.75rem;
	font-weight: 760;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.account-activity-list em {
	color: #8a989f;
	font-size: 0.61rem;
	font-style: normal;
}

.account-activity-list a > svg {
	color: #77908a;
	height: 0.9rem;
	width: 0.9rem;
}

.account-empty-state {
	align-items: center;
	background: #f6f9f8;
	border: 1px dashed #cdddda;
	border-radius: 1rem;
	display: flex;
	flex-direction: column;
	margin-top: 1rem;
	padding: 1.6rem 1.2rem;
	text-align: center;
}

.account-empty-state > span {
	align-items: center;
	background: #e5f3ee;
	border-radius: 50%;
	color: #2b816b;
	display: flex;
	height: 3rem;
	justify-content: center;
	width: 3rem;
}

.account-empty-state > span svg {
	height: 1.3rem;
	width: 1.3rem;
}

.account-empty-state h3 {
	font-size: 0.9rem;
	margin: 0.85rem 0 0.25rem;
}

.account-empty-state p {
	color: #76858d;
	font-size: 0.7rem;
	line-height: 1.55;
	margin: 0;
	max-width: 24rem;
}

.account-empty-state a {
	align-items: center;
	display: flex;
	font-size: 0.68rem;
	font-weight: 800;
	gap: 0.3rem;
	margin-top: 0.8rem;
	text-decoration: none;
}

.account-empty-state a svg {
	height: 0.85rem;
	width: 0.85rem;
}

.account-profile-summary {
	display: grid;
	gap: 1rem;
	margin-top: 1.1rem;
}

.account-profile-summary small {
	color: #829199;
	display: block;
	font-size: 0.57rem;
	font-weight: 820;
	letter-spacing: 0.09em;
	margin-bottom: 0.5rem;
	text-transform: uppercase;
}

.account-profile-summary p {
	color: #62737e;
	font-size: 0.72rem;
	line-height: 1.58;
	margin: 0;
}

.account-interest-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.account-interest-chips li {
	background: #eaf5f1;
	border: 1px solid #d0e9e0;
	border-radius: 999px;
	color: #226c58;
	font-size: 0.61rem;
	font-weight: 760;
	padding: 0.34rem 0.56rem;
}

.account-profile-summary__goal {
	background: #f7f9f8;
	border: 1px solid #e1e9e7;
	border-radius: 0.8rem;
	padding: 0.75rem;
}

.account-profile-summary dl {
	border-top: 1px solid #e4ebeb;
	display: grid;
	gap: 0.55rem;
	margin: 0;
	padding-top: 0.9rem;
}

.account-profile-summary dl > div {
	align-items: center;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
}

.account-profile-summary dt {
	color: #75858e;
	font-size: 0.63rem;
}

.account-profile-summary dd {
	color: #213b4c;
	font-size: 0.65rem;
	font-weight: 760;
	margin: 0;
	text-align: right;
}

.account-advisor {
	align-items: center;
	background:
		radial-gradient(circle at 86% 10%, rgba(91, 225, 180, 0.18), transparent 15rem),
		linear-gradient(135deg, #0b334d, #071e35);
	border-radius: 1.25rem;
	color: #aebfca;
	display: grid;
	gap: 1.2rem;
	grid-template-columns: 4.5rem minmax(0, 1fr) auto;
	overflow: hidden;
	padding: 1.5rem;
	position: relative;
}

.account-advisor__mark {
	align-items: center;
	background: linear-gradient(145deg, #1f9471, #0d3c57);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 1.2rem;
	color: #fff;
	display: flex;
	font-family: var(--tf-font-serif);
	font-size: 2rem;
	height: 4.5rem;
	justify-content: center;
	width: 4.5rem;
}

.account-advisor h2 {
	color: #fff;
	font-family: var(--tf-font-serif);
	font-size: 1.6rem;
	font-weight: 550;
	letter-spacing: -0.03em;
	margin: 0 0 0.25rem;
}

.account-advisor p:not(.eyebrow) {
	font-size: 0.72rem;
	line-height: 1.55;
	margin: 0;
}

/* Profile settings */

.account-settings-hero {
	background:
		radial-gradient(circle at 86% 10%, rgba(59, 214, 165, 0.2), transparent 23rem),
		linear-gradient(135deg, #071d33, #0a334d 66%, #0a464b);
	color: #fff;
	overflow: hidden;
	padding: clamp(2rem, 5vw, 4rem) 0 clamp(2.7rem, 5vw, 4.5rem);
	position: relative;
}

.account-settings-hero__back {
	color: #afc1cb;
	margin-bottom: 2rem;
	position: relative;
	z-index: 1;
}

.account-settings-hero__back:hover {
	color: #fff;
}

.account-settings-hero__grid {
	align-items: end;
	display: grid;
	gap: 3rem;
	grid-template-columns: minmax(0, 1fr) auto;
	position: relative;
	z-index: 1;
}

.account-settings-hero h1 {
	color: #fff;
	font-family: var(--tf-font-serif);
	font-size: clamp(2.6rem, 5vw, 4.6rem);
	font-weight: 520;
	letter-spacing: -0.05em;
	line-height: 0.98;
	margin: 0 0 0.9rem;
	max-width: 14ch;
	text-wrap: balance;
}

.account-settings-hero__grid > div > p:last-child {
	color: #b3c3cc;
	font-size: 0.88rem;
	line-height: 1.65;
	margin: 0;
	max-width: 42rem;
}

.account-settings-hero__preview {
	align-items: center;
	backdrop-filter: blur(1rem);
	background: rgba(255, 255, 255, 0.075);
	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: 1.15rem;
	display: grid;
	gap: 0.9rem;
	grid-template-columns: 3.4rem minmax(0, 1fr);
	max-width: 22rem;
	min-width: 19rem;
	padding: 0.85rem;
}

.account-settings-hero__avatar {
	align-items: center;
	background: linear-gradient(145deg, #27a47e, #0c3854);
	border: 2px solid rgba(255, 255, 255, 0.18);
	border-radius: 0.95rem;
	color: #fff;
	display: flex;
	font-size: 1.25rem;
	font-weight: 850;
	height: 3.4rem;
	justify-content: center;
	width: 3.4rem;
}

.account-settings-hero__preview > div:last-child {
	display: grid;
	min-width: 0;
}

.account-settings-hero__preview small {
	color: #82d8bc;
	font-size: 0.54rem;
	font-weight: 850;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.account-settings-hero__preview strong {
	color: #fff;
	font-size: 0.78rem;
	margin-top: 0.15rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.account-settings-hero__preview span {
	color: #aebfc9;
	font-size: 0.62rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.account-settings__alert {
	margin: 0;
}

.account-settings-form {
	display: grid;
	gap: 1rem;
}

.account-settings-card {
	background: #fff;
	border: 1px solid #dce6e8;
	border-radius: 1.3rem;
	box-shadow: 0 0.8rem 2.3rem rgba(9, 36, 58, 0.05);
	padding: clamp(1.3rem, 3vw, 2rem);
}

.account-settings-card > header {
	display: grid;
	gap: 1rem;
	grid-template-columns: 2.6rem minmax(0, 1fr);
	margin-bottom: 1.5rem;
}

.account-settings-card > header > span {
	align-items: center;
	background: #e5f3ee;
	border-radius: 0.75rem;
	color: #1a775f;
	display: flex;
	font-size: 0.62rem;
	font-weight: 850;
	height: 2.6rem;
	justify-content: center;
	letter-spacing: 0.06em;
	width: 2.6rem;
}

.account-settings-card h2 {
	color: var(--tf-primary-950);
	font-family: var(--tf-font-serif);
	font-size: clamp(1.65rem, 3vw, 2.25rem);
	font-weight: 590;
	letter-spacing: -0.035em;
	line-height: 1.08;
	margin: 0 0 0.4rem;
}

.account-settings-card header div > p:last-child {
	color: #74838c;
	font-size: 0.72rem;
	line-height: 1.55;
	margin: 0;
	max-width: 42rem;
}

.account-settings-form__grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.account-field--wide {
	grid-column: 1 / -1;
}

.account-field--locked .account-field__control {
	background: #f1f4f4;
	border-style: dashed;
}

.account-interest-options {
	border: 0;
	display: grid;
	gap: 0.7rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	padding: 0;
}

.account-interest-options label {
	align-items: center;
	background: #f8faf9;
	border: 1px solid #dbe5e3;
	border-radius: 0.85rem;
	color: #536873;
	cursor: pointer;
	display: grid;
	font-size: 0.74rem;
	font-weight: 700;
	gap: 0.7rem;
	grid-template-columns: 1.65rem minmax(0, 1fr);
	min-height: 3.5rem;
	padding: 0.55rem 0.75rem;
	transition:
		background var(--tf-duration) var(--tf-ease),
		border-color var(--tf-duration) var(--tf-ease),
		color var(--tf-duration) var(--tf-ease);
}

.account-interest-options label:hover {
	border-color: #add6c9;
}

.account-interest-options label:has(input:checked) {
	background: #ebf7f2;
	border-color: #98d1bf;
	color: #175e4c;
}

.account-interest-options input {
	height: 1px;
	opacity: 0;
	position: absolute;
	width: 1px;
}

.account-interest-options__check {
	align-items: center;
	background: #fff;
	border: 1px solid #b8c8c4;
	border-radius: 0.5rem;
	color: transparent;
	display: flex;
	font-size: 0.7rem;
	height: 1.65rem;
	justify-content: center;
	width: 1.65rem;
}

.account-interest-options input:focus-visible + .account-interest-options__check {
	box-shadow: var(--tf-shadow-focus);
	outline: 2px solid var(--tf-focus);
	outline-offset: 2px;
}

.account-interest-options input:checked + .account-interest-options__check {
	background: var(--tf-accent-600);
	border-color: var(--tf-accent-600);
	color: #fff;
}

.account-field__control--textarea {
	align-items: stretch;
}

.account-field__control textarea {
	line-height: 1.6;
	min-height: 7.5rem;
	resize: vertical;
}

.account-contact-options {
	border: 0;
	margin: 0;
	padding: 0;
}

.account-contact-options > p {
	color: #788891;
	font-size: 0.68rem;
	margin: 0.25rem 0 0.7rem;
}

.account-contact-options > div {
	display: grid;
	gap: 0.6rem;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.account-contact-options label {
	align-items: center;
	background: #f8faf9;
	border: 1px solid #dbe5e3;
	border-radius: 0.8rem;
	color: #5b6e79;
	cursor: pointer;
	display: flex;
	font-size: 0.7rem;
	font-weight: 720;
	gap: 0.55rem;
	min-height: 3.1rem;
	padding: 0.55rem 0.7rem;
}

.account-contact-options label:has(input:checked) {
	background: #ebf7f2;
	border-color: #98d1bf;
	color: #175e4c;
}

.account-contact-options input {
	height: 1px;
	opacity: 0;
	position: absolute;
	width: 1px;
}

.account-contact-options label > span {
	background: #fff;
	border: 1px solid #adbfba;
	border-radius: 50%;
	display: block;
	height: 1rem;
	position: relative;
	width: 1rem;
}

.account-contact-options input:focus-visible + span {
	box-shadow: var(--tf-shadow-focus);
	outline: 2px solid var(--tf-focus);
	outline-offset: 2px;
}

.account-contact-options input:checked + span {
	border-color: var(--tf-accent-600);
	box-shadow: inset 0 0 0 0.22rem #fff;
	background: var(--tf-accent-600);
}

.account-settings-form__bar {
	align-items: center;
	background: #fff;
	border: 1px solid #d7e3e4;
	border-radius: 1.05rem;
	box-shadow: 0 1rem 2.5rem rgba(8, 35, 56, 0.1);
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	padding: 0.85rem 1rem;
	position: sticky;
	bottom: 1rem;
	z-index: 5;
}

.account-settings-form__bar > div {
	align-items: center;
	display: flex;
	gap: 0.65rem;
}

.account-settings-form__bar > div:first-child > svg {
	color: #278268;
	height: 1.3rem;
	width: 1.3rem;
}

.account-settings-form__bar > div:first-child span {
	display: grid;
}

.account-settings-form__bar strong {
	color: var(--tf-primary-950);
	font-size: 0.7rem;
}

.account-settings-form__bar small {
	color: #7b8a92;
	font-size: 0.6rem;
}

.account-settings-form__bar a {
	color: #667881;
	font-size: 0.72rem;
	font-weight: 750;
	padding: 0.7rem;
	text-decoration: none;
}

.account-settings-form__bar button {
	align-items: center;
	background: linear-gradient(110deg, #0f7a61, #0a394f);
	border: 0;
	border-radius: 0.75rem;
	color: #fff;
	display: flex;
	font-size: 0.72rem;
	font-weight: 800;
	gap: 0.45rem;
	justify-content: center;
	min-height: 2.9rem;
	padding: 0.65rem 1rem;
}

.account-settings-form__bar button svg {
	height: 0.95rem;
	width: 0.95rem;
}

@keyframes tf-account-rise {
	from {
		opacity: 0;
		transform: translateY(0.7rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.account-auth__shell,
.account-dashboard-hero__shell,
.account-settings-hero__grid,
.account-gate__shell {
	animation: tf-account-rise 620ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@media (max-width: 70rem) {
	.account-auth__shell {
		grid-template-columns: minmax(0, 0.9fr) minmax(25rem, 1.1fr);
	}

	.account-auth__story {
		padding: 2.5rem;
	}

	.account-dashboard__layout,
	.account-settings__layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.account-sidebar {
		position: static;
	}

	.account-sidebar > p,
	.account-sidebar__help {
		display: none;
	}

	.account-sidebar nav {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.account-sidebar nav a {
		grid-template-columns: 1.8rem minmax(0, 1fr);
		min-height: 3rem;
	}

	.account-sidebar nav a > span {
		height: 1.8rem;
		width: 1.8rem;
	}

	.account-dashboard__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 60rem) {
	.account-auth__shell {
		grid-template-columns: minmax(0, 1fr);
		max-width: 40rem;
	}

	.account-auth__story {
		min-height: 25rem;
	}

	.account-auth__signal {
		margin-bottom: 2rem;
	}

	.account-auth__story-copy h2 {
		font-size: clamp(2.2rem, 7vw, 3.5rem);
		max-width: 13ch;
	}

	.account-auth__benefits {
		display: none;
	}

	.account-auth__journey {
		margin-top: 2rem;
	}

	.account-dashboard-hero__shell {
		grid-template-columns: minmax(0, 1fr);
	}

	.account-dashboard-hero__actions {
		justify-content: flex-start;
	}

	.account-dashboard-hero__meta {
		margin-top: 0;
	}

	.account-launchpad {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.account-launch-card--primary {
		grid-column: 1 / -1;
	}

	.account-settings-hero__grid {
		align-items: start;
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 48rem) {
	.header-account {
		border-radius: var(--tf-radius-sm);
		justify-content: center;
		min-height: 3.25rem;
		width: 100%;
	}

	.header-account__copy {
		display: flex;
		gap: 0.45rem;
	}

	.header-account__copy small {
		align-self: center;
	}

	.account-auth {
		padding: 1.1rem 0 2rem;
	}

	.account-auth__shell {
		border-radius: 1.45rem;
	}

	.account-auth__story {
		min-height: 20rem;
		padding: 1.7rem;
	}

	.account-auth__story-copy > p:last-child {
		font-size: 0.88rem;
	}

	.account-auth__journey {
		display: none;
	}

	.account-auth__panel {
		padding: 1.7rem;
	}

	.account-auth__back {
		margin-bottom: 1.35rem;
	}

	.account-auth__heading h1,
	.account-auth__signed-in h1 {
		font-size: clamp(2.25rem, 11vw, 3.2rem);
	}

	.account-consents {
		padding: 0.85rem;
	}

	.account-gate__shell {
		gap: 1.8rem;
		grid-template-columns: minmax(0, 1fr);
	}

	.account-gate__visual {
		aspect-ratio: auto;
		min-height: 15rem;
	}

	.account-dashboard-hero {
		padding-top: 2rem;
	}

	.account-dashboard-hero__identity {
		grid-template-columns: 4.4rem minmax(0, 1fr);
	}

	.account-dashboard-hero__avatar {
		border-radius: 1.25rem;
		font-size: 1.7rem;
		height: 4.4rem;
		width: 4.4rem;
	}

	.account-dashboard-hero__identity h1 {
		font-size: clamp(2.2rem, 10vw, 3.3rem);
	}

	.account-dashboard-hero__meta {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding: 0.7rem;
	}

	.account-dashboard-hero__meta > div {
		padding: 0.7rem;
	}

	.account-dashboard-hero__meta > div + div {
		border-left: 0;
	}

	.account-dashboard-hero__progress {
		border-top: 1px solid rgba(255, 255, 255, 0.1);
		grid-column: 1 / -1;
	}

	.account-sidebar {
		overflow-x: auto;
		padding-bottom: 0.2rem;
		scrollbar-width: none;
	}

	.account-sidebar::-webkit-scrollbar {
		display: none;
	}

	.account-sidebar nav {
		display: flex;
		min-width: max-content;
	}

	.account-sidebar nav a {
		grid-template-columns: 1.8rem auto;
		padding-right: 0.9rem;
	}

	.account-welcome {
		align-items: flex-start;
		flex-direction: column;
		gap: 1rem;
	}

	.account-launchpad {
		grid-template-columns: minmax(0, 1fr);
	}

	.account-launch-card--primary {
		grid-column: auto;
	}

	.account-launch-card {
		min-height: 10.5rem;
	}

	.account-advisor {
		align-items: start;
		grid-template-columns: 3.75rem minmax(0, 1fr);
	}

	.account-advisor__mark {
		border-radius: 1rem;
		height: 3.75rem;
		width: 3.75rem;
	}

	.account-advisor .button {
		grid-column: 1 / -1;
		width: 100%;
	}

	.account-settings-hero__preview {
		max-width: none;
		min-width: 0;
		width: 100%;
	}

	.account-settings-form__grid,
	.account-interest-options {
		grid-template-columns: minmax(0, 1fr);
	}

	.account-contact-options > div {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.account-settings-form__bar {
		align-items: stretch;
		flex-direction: column;
		position: static;
	}

	.account-settings-form__bar > div:last-child {
		display: grid;
		grid-template-columns: 0.75fr 1.25fr;
	}
}

@media (max-width: 37.5rem) {
	.account-auth-page .container,
	.account-dashboard-hero .container,
	.account-dashboard .container,
	.account-settings-hero .container,
	.account-settings .container,
	.account-gate .container {
		padding-inline: 0.75rem;
	}

	.account-auth__shell {
		border-radius: 1.2rem;
	}

	.account-auth__story {
		border-radius: 1.1rem 1.1rem 0 0;
		min-height: 17.5rem;
		padding: 1.35rem;
	}

	.account-auth__signal {
		margin-bottom: 1.35rem;
	}

	.account-auth__story-copy h2 {
		font-size: clamp(2rem, 10vw, 2.8rem);
	}

	.account-auth__story-copy > p:last-child {
		font-size: 0.8rem;
		line-height: 1.6;
	}

	.account-auth__panel {
		padding: 1.35rem 1rem 1.5rem;
	}

	.account-auth__tabs a {
		font-size: 0.74rem;
	}

	.account-auth__destination {
		grid-template-columns: 2rem minmax(0, 1fr);
	}

	.account-auth__destination > span {
		height: 2rem;
		width: 2rem;
	}

	.account-auth__actions {
		display: grid;
		width: 100%;
	}

	.account-auth__actions .button {
		width: 100%;
	}

	.account-gate {
		padding: 1.5rem 0 3rem;
	}

	.account-gate__shell {
		border-radius: 1.25rem;
		padding: 1.25rem;
	}

	.account-gate__visual {
		border-radius: 1.1rem;
		min-height: 11.5rem;
	}

	.account-gate__copy h1 {
		font-size: clamp(2.3rem, 11vw, 3rem);
	}

	.account-gate__copy .button-group {
		display: grid;
	}

	.account-dashboard-hero__identity {
		align-items: start;
		gap: 0.85rem;
		grid-template-columns: 3.55rem minmax(0, 1fr);
	}

	.account-dashboard-hero__avatar {
		border-radius: 1rem;
		font-size: 1.4rem;
		height: 3.55rem;
		width: 3.55rem;
	}

	.account-dashboard-hero__identity h1 {
		font-size: clamp(1.95rem, 10vw, 2.7rem);
	}

	.account-dashboard-hero__identity > div > p:last-child {
		font-size: 0.7rem;
		overflow-wrap: anywhere;
	}

	.account-dashboard-hero__actions {
		display: grid;
		width: 100%;
	}

	.account-dashboard-hero__actions .button {
		width: 100%;
	}

	.account-dashboard-hero__logout {
		text-align: center;
	}

	.account-dashboard-hero__meta {
		border-radius: 1rem 1rem 0 0;
	}

	.account-dashboard,
	.account-settings {
		padding-top: 1.5rem;
	}

	.account-card,
	.account-settings-card {
		border-radius: 1rem;
		padding: 1rem;
	}

	.account-card__header {
		align-items: flex-start;
	}

	.account-launch-card {
		border-radius: 1rem;
	}

	.account-advisor {
		padding: 1rem;
	}

	.account-settings-hero {
		padding-bottom: 2rem;
	}

	.account-settings-hero h1 {
		font-size: clamp(2.25rem, 11vw, 3rem);
	}

	.account-settings-card > header {
		gap: 0.75rem;
		grid-template-columns: 2.2rem minmax(0, 1fr);
	}

	.account-settings-card > header > span {
		height: 2.2rem;
		width: 2.2rem;
	}

	.account-contact-options > div {
		grid-template-columns: minmax(0, 1fr);
	}

	.account-settings-form__bar > div:first-child {
		display: none;
	}

	.account-settings-form__bar > div:last-child {
		grid-template-columns: minmax(0, 1fr);
	}

	.account-settings-form__bar a {
		text-align: center;
	}
}

@media print {
	.account-sidebar,
	.account-dashboard-hero__actions,
	.account-settings-form__bar,
	.account-advisor,
	.account-auth__story {
		display: none;
	}

	.account-auth-page,
	.account-dashboard-hero,
	.account-settings-hero,
	.account-dashboard,
	.account-settings {
		background: #fff;
		color: #000;
	}

	.account-auth__shell,
	.account-dashboard__layout,
	.account-settings__layout {
		box-shadow: none;
		display: block;
	}
}