/* Trust Center (/trust): warm hero, a bento of verified protections, a navy reliability band with a live status read-out,
   then plain link columns. Same Manrope / navy / peach language as the homepage. Root font-size on this theme is 20px, so type is set in px. */

.trust-page {
	font-family: Manrope, sans-serif;
	color: #191e3a;
}

.trust-page :where(h1, h2, h3, p, ul) {
	margin: 0;
	padding: 0;
}

.trust-page :where(h1, h2, h3) {
	color: inherit; /* the theme gives headings its own slate; keep navy on light bands and white on the navy one */
}

.trust-page a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.trust-wrap {
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 20px;
}

/* hero: peach wash with two slow blobs in the bento tints */
.trust-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 96px 0 88px;
	background: #fdf2e7; /* same as the navbar's bg-soft-primary so there's no seam */
}

.trust-hero::before,
.trust-hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	width: 720px;
	height: 720px;
	border-radius: 50%;
	pointer-events: none;
}

.trust-hero::before {
	top: 0; /* kept below the navbar edge: radius fades out before the top of the hero */
	right: -200px;
	background: radial-gradient(closest-side, #e8e0fa, rgba(232, 224, 250, 0));
}

.trust-hero::after {
	bottom: -320px;
	left: -200px;
	background: radial-gradient(closest-side, #fde0c9, rgba(253, 224, 201, 0));
}

@media (prefers-reduced-motion: no-preference) {
	.trust-hero::before { animation: trust-drift 22s ease-in-out infinite alternate; }
	.trust-hero::after { animation: trust-drift 26s ease-in-out -9s infinite alternate-reverse; }
}

@keyframes trust-drift {
	to { transform: translate(40px, 30px); }
}

.trust-title {
	max-width: 14ch;
	font-size: clamp(44px, 6.4vw, 84px);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.02em;
}

.trust-lede {
	max-width: 34em;
	margin-top: 24px;
	font-size: 20px;
	line-height: 1.55;
	color: #343f52;
}

/* section headings */
.trust-section {
	padding: 96px 0 0;
}

.trust-h2 {
	max-width: 20ch;
	font-size: clamp(30px, 3.4vw, 44px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.trust-sub {
	max-width: 36em;
	margin-top: 14px;
	font-size: 17px;
	line-height: 1.6;
	color: #343f52;
}

/* bento: tiles of different widths, not a row of identical cards */
.trust-bento {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 16px;
	margin-top: 40px;
}

.trust-tile {
	display: flex;
	flex-direction: column;
	gap: 12px;
	grid-column: span 6;
	padding: 32px;
	border-radius: 24px;
	background: var(--tile, #fde0c9);
}

.trust-tile--peach { --tile: #fde0c9; }
.trust-tile--lilac { --tile: #e8e0fa; }
.trust-tile--sky { --tile: #dcedf6; }
.trust-tile--mint { --tile: #dff1e3; }

.trust-icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.72);
	font-size: 28px;
	line-height: 1;
}

.trust-tile h3 {
	margin-top: 8px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.trust-tile p {
	font-size: 16px;
	line-height: 1.6;
}

.trust-where {
	margin-top: auto;
	padding-top: 8px;
	font-size: 14px;
	font-weight: 700;
	color: #2a3150;
}

@media (min-width: 900px) {
	.trust-tile--wide { grid-column: span 4; }
	.trust-tile--narrow { grid-column: span 2; }
	.trust-tile--wide h3 { font-size: 30px; }
	.trust-tile { min-height: 280px; }
}

/* money: peach band, facts on the left, a two-step flow on the right */
.trust-money {
	margin-top: 96px;
	padding: 88px 0;
	background: #fdf2e7;
}

.trust-money-grid {
	display: grid;
	gap: 48px;
	align-items: center;
}

@media (min-width: 900px) {
	.trust-money-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}

.trust-facts {
	display: grid;
	gap: 24px;
	margin-top: 32px;
	list-style: none;
}

.trust-facts li {
	padding-left: 20px;
	border-left: 3px solid #ed8134;
}

.trust-facts h3 {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

.trust-facts p {
	margin-top: 6px;
	font-size: 16px;
	line-height: 1.6;
	color: #343f52;
}

.trust-flow {
	display: grid;
	justify-items: center;
	gap: 12px;
	padding: 32px;
	border-radius: 24px;
	background: #fff;
}

.trust-flow-step {
	display: grid;
	gap: 4px;
	width: 100%;
	padding: 20px 24px;
	border: 1px solid #efe4da;
	border-radius: 16px;
	text-align: center;
}

.trust-flow-step--you {
	border-color: #191e3a;
	background: #191e3a;
	color: #fff;
}

.trust-flow-label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #5f6577;
}

.trust-flow-step--you .trust-flow-label { color: #e0e6ed; }

.trust-flow-value {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
}

.trust-flow-arrow {
	font-size: 28px;
	line-height: 1;
	color: #be672a;
}

.trust-flow-fee {
	margin-top: 4px;
	font-size: 15px;
	font-weight: 600;
	color: #343f52;
}

/* access tiles: a permission per row, state as a small pill on the right */
@media (min-width: 900px) {
	.trust-tile--half { grid-column: span 3; }
}

.trust-tile--full { grid-column: 1 / -1; min-height: 0; }

.trust-perms {
	margin-top: 8px;
	list-style: none;
}

.trust-perms li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 12px 0;
	border-top: 1px solid rgba(25, 30, 58, 0.12);
	font-size: 16px;
	line-height: 1.5;
}

.trust-state {
	flex: none;
	padding: 2px 12px;
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.72);
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}

.trust-state--always { background: #fff; color: #1d6b45; }
.trust-state--never { background: #191e3a; color: #fff; }

/* under the hood: two columns of short lines inside one wide tile */
.trust-basics {
	display: grid;
	gap: 0 40px;
	margin-top: 4px;
	list-style: none;
}

@media (min-width: 900px) {
	.trust-basics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.trust-basics li {
	padding: 12px 0;
	border-top: 1px solid rgba(25, 30, 58, 0.12);
	font-size: 16px;
	line-height: 1.5;
}

/* reliability band: navy, with the one orange action on the page */
.trust-band {
	margin-top: 96px;
	padding: 88px 0;
	background: #191e3a;
	color: #fff;
}

.trust-band-grid {
	display: grid;
	gap: 48px;
	align-items: center;
}

@media (min-width: 900px) {
	.trust-band-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}

.trust-band .trust-sub { color: #e0e6ed; }

.trust-btn {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	margin-top: 32px;
	padding: 12px 22px;
	border-radius: 6px;
	background: #ed8134;
	color: #191e3a;
	font-weight: 700;
	text-decoration: none;
}

.trust-page a.trust-btn { text-decoration: none; }
.trust-btn:hover { background: #d9661a; }

.trust-page a:focus-visible,
.trust-btn:focus-visible {
	outline: 3px solid #fad9c2;
	outline-offset: 3px;
}

.trust-band a { color: #fff; }
.trust-band a.trust-btn { color: #191e3a; }

.trust-band-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin-top: 20px;
	font-size: 15px;
}

/* status read-out: same chips, bars and colours as status.e2c.store, so it reads as a piece of that page */
.trust-status {
	padding: 24px;
	border-radius: 8px;
	background: #fff;
	color: #191e3a;
}

.trust-status-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 16px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: #343f52;
}

.trust-dot {
	flex: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #e3e7ed;
}

[data-state="up"] .trust-dot { background: #3f9b6e; }
[data-state="degraded"] .trust-dot { background: #e0b23c; }
[data-state="down"] .trust-dot { background: #c2372b; }
[data-state="maintenance"] .trust-dot { background: #2b4f8c; }

.trust-status-list {
	list-style: none;
}

.trust-status-list li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px 12px;
	padding: 14px 0;
	border-top: 1px solid #e0e6ed;
}

.trust-status-name {
	font-size: 15px;
	font-weight: 700;
	color: #343f52;
}

.trust-chip {
	padding: 3px 10px;
	border-radius: 100px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
}

.trust-chip[data-s="up"] { background: #e3f3ea; color: #1d6b45; }
.trust-chip[data-s="degraded"] { background: #fcf0d4; color: #8a5a00; }
.trust-chip[data-s="down"] { background: #fbe4e1; color: #a12a20; }
.trust-chip[data-s="maintenance"] { background: #e5edf9; color: #2b4f8c; }
.trust-chip[data-s="unknown"] { background: #eceef1; color: #5f6577; }

.trust-bars {
	display: flex;
	grid-column: 1 / -1;
	gap: 2px;
	height: 20px;
}

.trust-bars:empty { display: none; }

.trust-bars span {
	flex: 1;
	min-width: 2px;
	border-radius: 1px;
	background: #e3e7ed;
}

.trust-bars .b-up { background: #3f9b6e; }
.trust-bars .b-slow { background: #e0b23c; }
.trust-bars .b-partial { background: #d97b2b; }
.trust-bars .b-down { background: #c2372b; }

.trust-status-note {
	padding-top: 14px;
	border-top: 1px solid #e0e6ed;
	font-size: 13px;
	color: #5f6577;
}

/* everything else: plain columns divided by hairlines */
.trust-cols {
	display: grid;
	gap: 40px;
	margin-top: 40px;
}

@media (min-width: 900px) {
	.trust-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
	.trust-col { padding: 0 32px; border-left: 1px solid #ebedf2; }
	.trust-col:first-child { padding-left: 0; border-left: 0; }
}

.trust-col h3 {
	font-size: 20px;
	font-weight: 700;
}

.trust-col ul {
	display: grid;
	gap: 10px;
	margin-top: 16px;
	list-style: none;
}

.trust-col li { font-size: 16px; line-height: 1.5; }

.trust-foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px 32px;
	margin-top: 72px;
	padding: 28px 0 96px;
	border-top: 1px solid #ebedf2;
	font-size: 15px;
	color: #343f52;
}