/* ==========================================================================
   /reliability/ — load-balanced delivery and automatic failover.
   A new page (no WordPress baseline). Builds on the ui-* components in
   site.css; js/reliability.js plays the hero diagram and the reveals.
   Breakpoints match site.css: 1024 / 860 / 767.
   ========================================================================== */

/* ------------------------------------------------------------------ hero */
.rl-hero .ui-hero__inner { padding-bottom: 56px; }
.rl-hero .ui-hero__title { max-width: 820px; margin-left: auto; margin-right: auto; }
.rl-hero .ui-hero__lead { max-width: 660px; }
.rl-hero > .container:last-child { padding-bottom: 32px; }

/* --------------------------------------------------------------- diagram */
.rl-flow { margin: 0; }
.rl-flow__stage {
	position: relative;
	padding: 64px 56px 56px;
	border-radius: 36px;
	/* a quiet dot grid on the brand tint: the "network" the messages cross */
	background:
		radial-gradient(circle at 1px 1px, rgba(15, 120, 176, .13) 1px, transparent 1.4px) 0 0 / 22px 22px,
		radial-gradient(60% 80% at 50% 50%, #f3f9fd 0%, rgba(243, 249, 253, 0) 100%),
		#e8f2fa;
	overflow: hidden;
}
.rl-flow__svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font); }
.rl-flow__svg--tall { display: none; max-width: 380px; margin: 0 auto; }

/* wires: the routes a message can take */
.rl-wire { fill: none; stroke: #bcd6e8; stroke-width: 2; stroke-linecap: round; transition: stroke .5s, stroke-width .5s, opacity .5s; }
.rl-flow[data-phase="down"] .rl-wire[data-fails] { stroke: #eab3ab; stroke-dasharray: 2 7; }
.rl-flow[data-phase="down"] .rl-wire:not([data-fails]) { stroke: #86c3e6; stroke-width: 2.6; }

/* messages */
.rl-dot { fill: var(--ui-blue); stroke: #fff; stroke-width: 2.5; transition: opacity .25s; }
.rl-dot.is-gone { opacity: 0; }

/* nodes */
.rl-card { fill: #fff; }
.rl-label { font-size: 16px; font-weight: 700; fill: var(--ui-ink); letter-spacing: -.01em; }
.rl-label--sm { font-size: 13.5px; }
.rl-sub { font-size: 12.5px; font-weight: 600; fill: var(--ui-muted); }
.rl-app__icon { fill: var(--ui-tint); }
.rl-app__glyph { fill: none; stroke: var(--ui-blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rl-core__name { font-size: 22px; font-weight: 700; fill: #fff; letter-spacing: -.02em; }
.rl-core__sub { font-size: 12.5px; font-weight: 600; fill: #bfe1f5; }
.rl-flow__svg--tall .rl-core__name { font-size: 20px; }
.rl-flow__svg--tall .rl-core__sub { font-size: 12px; }

/* providers: healthy (green), down (red), back online (green, then blue again) */
.rl-provider__card { transition: fill .5s; }
.rl-provider__dot { fill: var(--ui-green); transition: fill .4s; }
.rl-provider__halo { fill: var(--ui-green); opacity: .18; transition: fill .4s; }
.rl-state { display: none; font-size: 12.5px; font-weight: 600; fill: var(--ui-muted); }
.rl-state--up { display: inline; }
.rl-flow__svg--tall .rl-state { font-size: 11.5px; }

.rl-flow[data-phase="down"] .rl-provider[data-fails] .rl-provider__card { fill: #fff6f5; }
.rl-flow[data-phase="down"] .rl-provider[data-fails] .rl-provider__dot,
.rl-flow[data-phase="down"] .rl-provider[data-fails] .rl-provider__halo { fill: #d93a2b; }
.rl-flow[data-phase="down"] .rl-provider[data-fails] .rl-state--up { display: none; }
.rl-flow[data-phase="down"] .rl-provider[data-fails] .rl-state--down { display: inline; fill: #b42318; }
.rl-flow[data-phase="down"] .rl-provider:not([data-fails]) .rl-state--up { display: none; }
.rl-flow[data-phase="down"] .rl-provider:not([data-fails]) .rl-state--busy { display: inline; fill: var(--ui-blue-dark); }
.rl-flow[data-phase="back"] .rl-provider[data-fails] .rl-state--up { display: none; }
.rl-flow[data-phase="back"] .rl-provider[data-fails] .rl-state--back { display: inline; fill: #17804a; }
/* the failing provider's halo breathes while it is down */
.rl-flow[data-phase="down"] .rl-provider[data-fails] .rl-provider__halo { animation: rl-breathe 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes rl-breathe { 0%, 100% { opacity: .14; transform: scale(1); } 50% { opacity: .3; transform: scale(1.35); } }

/* the customer's phone; the ping and bubble light up as a message lands */
.rl-phone__body { fill: #1c2a35; }
.rl-phone__screen { fill: #fff; }
.rl-phone__island { fill: #1c2a35; }
.rl-phone__bubble { fill: #dcedf8; }
.rl-phone__line { fill: #e6ecf0; }
.rl-phone__ping { fill: none; stroke: var(--ui-blue); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }

/* pause / play, as on Apple's hero films */
.rl-flow__toggle {
	position: absolute;
	right: 20px;
	bottom: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .78);
	box-shadow: 0 1px 2px rgba(16, 40, 60, .1), 0 6px 16px -6px rgba(16, 40, 60, .25);
	color: var(--ui-ink);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: background-color .2s, transform .2s var(--ui-ease);
}
.rl-flow__toggle[hidden] { display: none; }
.rl-flow__toggle:hover { background: #fff; transform: scale(1.06); }
.rl-flow__toggle:focus-visible { outline: 3px solid #7cc4ea; outline-offset: 2px; }
.rl-flow__toggle svg { width: 16px; height: 16px; }
.rl-flow__play { display: none; }
.rl-flow.is-paused .rl-flow__pause { display: none; }
.rl-flow.is-paused .rl-flow__play { display: block; margin-left: 2px; }

/* the three phases under the diagram; the bar fills while its phase plays */
.rl-phases {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
	margin: 36px 0 0;
	padding: 0 8px;
	list-style: none;
}
.rl-phase__btn { display: block; width: 100%; padding: 0; border-radius: 6px; text-align: left; cursor: default; }
.rl-phase__btn:focus-visible { outline: 3px solid #7cc4ea; outline-offset: 6px; }
.rl-phase__bar { display: block; height: 3px; margin-bottom: 20px; border-radius: 3px; background: #d5e2eb; overflow: hidden; }
.rl-phase__bar i { display: block; height: 100%; border-radius: 3px; background: var(--ui-blue); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.rl-phase__title { display: block; margin-bottom: 6px; font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--ui-ink); transition: color .4s; }
.rl-phase__text { display: block; font-size: 15.5px; line-height: 1.55; color: var(--ui-body); transition: color .4s; }
/* once the diagram plays, the phase that isn't playing steps back */
.rl-flow.is-live .rl-phase__btn { cursor: pointer; }
.rl-flow.is-live .rl-phase:not([aria-current]) .rl-phase__title { color: var(--ui-muted); }
.rl-flow.is-live .rl-phase:not([aria-current]) .rl-phase__text { color: #6b7782; }
.rl-flow.is-live .rl-phase:not([aria-current]) .rl-phase__btn:hover .rl-phase__title { color: var(--ui-ink); }

/* ------------------------------------------------------------- the bento */
.rl-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.rl-card {
	display: flex;
	flex-direction: column;
	grid-column: span 6;
	min-width: 0;
	padding: 44px 44px 0;
	border-radius: 30px;
	background: #fff;
	overflow: hidden;
}
.rl-card--wide { grid-column: span 7; }
.rl-card--narrow { grid-column: span 5; }
.rl-card__label { margin: 0 0 10px; font-size: 15px; font-weight: 600; color: var(--ui-blue); }
.rl-card__title { max-width: 460px; margin: 0 0 14px; font-size: 30px; font-weight: 700; line-height: 1.12; letter-spacing: -.022em; color: var(--ui-ink); text-wrap: balance; }
.rl-card__text { max-width: 470px; margin: 0 0 36px; font-size: 17px; line-height: 1.55; color: var(--ui-body); text-wrap: pretty; }
.rl-card__visual { margin-top: auto; padding-bottom: 44px; }

/* load-balanced: one tile per message, coloured by the provider it took */
.rl-tiles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; }
.rl-tile { display: block; aspect-ratio: 1; border-radius: 7px; }
.rl-tile--a { background: var(--ui-blue); }
.rl-tile--b { background: #4aa8da; }
.rl-tile--c { background: #a9d6ef; }
.rl-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 20px 0 0; font-size: 14px; font-weight: 600; color: var(--ui-muted); }
.rl-legend__item { display: inline-flex; align-items: center; gap: 8px; }
.rl-legend .rl-tile { width: 12px; height: 12px; border-radius: 4px; }

/* same Sender ID: two notifications from the same name, different routes */
.rl-notes { display: flex; flex-direction: column; gap: 12px; }
.rl-note {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr);
	column-gap: 12px;
	padding: 14px 16px;
	border-radius: 20px;
	background: #f4f7f9;
	color: var(--ui-ink);
}
.rl-note + .rl-note { margin-left: 22px; }
.rl-note__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: linear-gradient(145deg, #1a8fcc, #0f6a9c);
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
}
.rl-note__body { display: flex; flex-direction: column; min-width: 0; }
.rl-note__head { display: flex; justify-content: space-between; gap: 10px; }
.rl-note__from { font-size: 14px; font-weight: 700; }
.rl-note__time { font-size: 12px; color: var(--ui-muted); white-space: nowrap; }
.rl-note__text { font-size: 14px; line-height: 1.4; color: var(--ui-body); }
.rl-note__via {
	grid-column: 2;
	justify-self: start;
	margin-top: 10px;
	padding: 2px 9px;
	border-radius: 999px;
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--ui-line);
	font-size: 12px;
	font-weight: 700;
	color: var(--ui-blue-dark);
}

/* the platform: the dark card */
.rl-card--dark {
	background:
		radial-gradient(70% 90% at 100% 0%, rgba(37, 211, 102, .14) 0%, rgba(37, 211, 102, 0) 60%),
		var(--ui-navy);
	color: #cfe0ea;
}
.rl-card--dark .rl-card__label { color: #9fd6f3; }
.rl-card--dark .rl-card__title { color: #fff; }
.rl-card--dark .rl-card__text { color: #cfe0ea; }
.rl-specs { display: grid; gap: 18px; margin: 0 0 30px; padding: 0; list-style: none; }
.rl-specs li { display: flex; align-items: center; gap: 16px; font-size: 15px; line-height: 1.45; color: #a9bfcd; }
.rl-specs strong { display: block; font-size: 16px; color: #fff; }
.rl-specs__icon { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px; background: rgba(255, 255, 255, .08); color: #9fd6f3; }
.rl-specs__icon svg { width: 22px; height: 22px; }
.rl-card__link { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: #9fd6f3; }
.rl-card__link svg { width: 16px; height: 16px; transition: transform .3s var(--ui-ease); }
.rl-card__link:hover, .rl-card__link:focus { color: #fff; }
.rl-card__link:hover svg { transform: translate(2px, -2px); }

/* ------------------------------------------------------------ developers */
.rl-dev__split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.rl-dev__list { margin-top: 28px; }
.rl-dev__actions { margin-top: 32px; }
.rl-code {
	margin: 0;
	min-width: 0;
	border-radius: 22px;
	background: #14202a;
	box-shadow: var(--ui-shadow), 0 50px 80px -40px rgba(14, 44, 66, .35);
	overflow: hidden;
}
.rl-code__bar { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid rgba(255, 255, 255, .06); background: rgba(255, 255, 255, .03); }
.rl-code__lights { display: flex; gap: 7px; }
.rl-code__lights i { width: 11px; height: 11px; border-radius: 50%; background: #3a4855; }
.rl-code__title { font-size: 13px; font-weight: 600; color: #8ea2b1; }
.rl-code__pre {
	margin: 0;
	padding: 24px 26px 28px;
	color: #e3ebf1;
	font-family: var(--mono);
	font-size: 13.5px;
	line-height: 1.75;
	overflow-x: auto;
	white-space: pre;
	overflow-wrap: normal;
}
.rl-code__c { color: #7f95a5; }

/* ------------------------------------------------------------------- FAQ */
.rl-faq__list { margin-top: 40px; }
.rl-faq__more { margin: 0; text-align: center; font-size: 16px; color: var(--ui-body); }

/* CTA: the bolt keeps its own width */
.ui-cta .btn__text { white-space: normal; }

/* ---------------------------------------------------------------- reveal */
/* Only when js/reliability.js runs (it sets .rl-reveal): content is visible
   without JavaScript, and for reduced motion the script never sets it. */
.rl-reveal [data-reveal] {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .9s var(--ui-ease), transform .9s var(--ui-ease);
	transition-delay: calc(var(--d, 0) * 120ms);
}
.rl-reveal [data-reveal].is-in { opacity: 1; transform: none; }
.rl-reveal [data-reveal] .rl-tile { opacity: 0; transform: scale(.4); transition: opacity .5s var(--ui-ease), transform .5s var(--ui-ease); transition-delay: calc(250ms + var(--i, 0) * 22ms); }
.rl-reveal [data-reveal].is-in .rl-tile { opacity: 1; transform: none; }
/* the routes card starts with an even split and moves B's share to A and C */
.rl-reveal [data-reveal]:not(.is-in) .ui-route__load i { width: 33.3%; }
.rl-reveal [data-reveal] .ui-route__load i { transition-delay: .7s; }

/* ---------------------------------------------------------- breakpoints */
@media (max-width: 1024px) {
	.rl-flow__stage { padding: 48px 32px 40px; }
	.rl-phases { gap: 24px; }
	.rl-card { padding: 36px 32px 0; }
	.rl-card__visual { padding-bottom: 32px; }
	.rl-card__title { font-size: 26px; }
	.rl-card--wide, .rl-card--narrow { grid-column: span 6; }
	.rl-tiles { gap: 6px; }
	.rl-tile { border-radius: 5px; }
	.rl-dev__split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 860px) {
	.rl-card--wide, .rl-card--narrow { grid-column: 1 / -1; }
	.rl-dev__split { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
	.rl-hero .ui-hero__inner { padding-bottom: 36px; }
	.rl-hero > .container:last-child { padding-bottom: 16px; }
	.rl-flow__stage { padding: 28px 16px 24px; border-radius: 26px; }
	.rl-flow__svg--wide { display: none; }
	.rl-flow__svg--tall { display: block; }
	.rl-flow__toggle { right: 14px; bottom: 14px; width: 36px; height: 36px; }

	/* phones: the three bars in a row, and only the playing phase's words below */
	.rl-phases { gap: 8px; margin-top: 24px; padding: 0; }
	.rl-phase__bar { margin-bottom: 14px; }
	.rl-phase__title { font-size: 16px; }
	.rl-phase__text { font-size: 15px; }
	.rl-flow:not(.is-live) .rl-phases { grid-template-columns: 1fr; gap: 20px; }
	.rl-flow.is-live .rl-phases { position: relative; min-height: 132px; }
	.rl-flow.is-live .rl-phase__title, .rl-flow.is-live .rl-phase__text { display: none; }
	.rl-flow.is-live .rl-phase[aria-current] .rl-phase__title,
	.rl-flow.is-live .rl-phase[aria-current] .rl-phase__text { display: block; position: absolute; left: 0; right: 0; }
	.rl-flow.is-live .rl-phase[aria-current] .rl-phase__title { top: 17px; }
	.rl-flow.is-live .rl-phase[aria-current] .rl-phase__text { top: 45px; }

	.rl-bento { gap: 14px; }
	.rl-card { padding: 30px 22px 0; border-radius: 24px; }
	.rl-card__title { font-size: 24px; }
	.rl-card__text { margin-bottom: 28px; font-size: 16px; }
	.rl-card__visual { padding-bottom: 26px; }
	.rl-tiles { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 5px; }
	.rl-tile:nth-child(n+28) { display: none; }
	.rl-legend { gap: 6px 16px; font-size: 13px; }
	.rl-note + .rl-note { margin-left: 12px; }
	.rl-specs li { font-size: 14px; }
	.rl-code { border-radius: 18px; }
	.rl-code__pre { padding: 20px; font-size: 12px; }
	.rl-dev .ui-actions .ui-btn { width: 100%; }
}