/* Mailstack's site. Graphite & Signal: graphite ink on white and off-white, Fraunces over Geist, and green only ever
   means "passed" or "delivered". The Stack mark is the logo; the plane, the flock and the facet envelope illustrate. */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&family=Fraunces:opsz,wght@9..144,400;9..144,500&display=swap");

:root {
	--bg: #fafafa;
	--fg: #0a0a0a;
	--ink: #171717;
	--on-ink: #fafafa;
	--muted: #666666;
	--soft: #f1f1f1;
	--panel: #ffffff;
	--ink-panel: #171717;
	--on-ink-panel: #ededed;
	--on-ink-muted: #a3a3a3;
	--ring: rgb(0 0 0 / 0.08);
	--ring-strong: rgb(0 0 0 / 0.13);
	--good: #12996a;
	--good-on-ink: #56d298;
	--shadow: 0 0 0 1px var(--ring), 0 1px 2px rgb(0 0 0 / 0.04), 0 24px 48px -24px rgb(0 0 0 / 0.18);
	--radius: 14px;
	--measure: 38rem;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0e0e0e;
		--fg: #f5f5f5;
		--ink: #f5f5f5;
		--on-ink: #0e0e0e;
		--muted: #a3a3a3;
		--soft: #1a1a1a;
		--panel: #1c1c1c;
		--ink-panel: #050505;
		--ring: rgb(255 255 255 / 0.09);
		--ring-strong: rgb(255 255 255 / 0.15);
		--good: #2fc183;
		--shadow: 0 0 0 1px var(--ring), 0 24px 48px -24px rgb(0 0 0 / 0.6);
	}
}

* {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 80px;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font: 16px/1.6 "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
	-webkit-font-smoothing: antialiased;
}

a {
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--fg);
	outline-offset: 3px;
	border-radius: 6px;
}

h1,
h2 {
	font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
	font-weight: 400;
	text-wrap: balance;
}

.wrap {
	max-width: 72rem;
	margin: 0 auto;
	padding: 0 24px;
}

.fine {
	font-size: 12.5px;
	color: var(--muted);
}

.label {
	display: block;
	font-size: 12.5px;
	color: var(--muted);
	margin-bottom: 8px;
}

.kicker {
	margin: 0 0 12px;
	font: 500 12px "Geist Mono", ui-monospace, monospace;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}

/* Brand marks. Loops move whole shapes, so each animates around its own box. */
.mark {
	display: block;
	flex-shrink: 0;
	overflow: visible;
}

.mark * {
	transform-box: fill-box;
}

.cut {
	fill: none;
	stroke: var(--surface, var(--bg));
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.wordmark:hover .bob,
.layer:hover .bob {
	animation: bob 0.9s ease-in-out;
}

.wordmark:hover .bob.late,
.layer:hover .bob.late {
	animation-delay: 0.1s;
}

@keyframes bob {
	0%,
	60%,
	100% {
		transform: translateY(0);
	}
	30% {
		transform: translateY(-3.5px);
	}
}

.ping-badge {
	fill: var(--good);
	stroke: var(--surface, var(--bg));
	stroke-width: 3;
}

.ping-ring {
	fill: none;
	stroke: var(--good);
	stroke-width: 2;
	transform-origin: 50% 50%;
	animation: ping 1.8s ease-out infinite;
}

@keyframes ping {
	0% {
		transform: scale(1);
		opacity: 0.8;
	}
	80%,
	100% {
		transform: scale(2.4);
		opacity: 0;
	}
}

.symbol {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: var(--panel);
	box-shadow: 0 0 0 1px var(--ring);
	overflow: hidden;
	color: var(--ink);
	--surface: var(--panel);
}

/* Header: the home page's runs full width and sticks; the legal pages' sits in their column. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 64px;
	background: color-mix(in srgb, var(--bg) 86%, transparent);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.site-header > .bar {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.wordmark {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-weight: 600;
	font-size: 17px;
	letter-spacing: -0.015em;
	text-decoration: none;
	color: var(--ink);
}

.site-nav {
	display: flex;
	align-items: center;
	gap: 22px;
	font-size: 14px;
}

.site-nav a {
	color: var(--muted);
	text-decoration: none;
}

.site-nav a:hover {
	color: var(--fg);
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px;
	padding: 0 16px;
	border-radius: 10px;
	background: var(--ink);
	color: var(--on-ink);
	font-weight: 500;
	font-size: 14.5px;
	text-decoration: none;
	transition: transform 0.15s ease;
}

.button:active {
	transform: scale(0.97);
}

.button.large {
	height: 46px;
	padding: 0 20px;
	font-size: 15px;
	border-radius: 12px;
}

.button.wide {
	width: 100%;
}

.site-nav .button {
	height: 34px;
	padding: 0 12px;
	font-size: 13.5px;
	color: var(--on-ink);
}

.button.quiet {
	background: var(--panel);
	color: var(--fg);
	box-shadow: 0 0 0 1px var(--ring-strong);
}

/* Hero: copy on the left, three fanned panels on the right, like the logo's layers. */
.hero {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	gap: 56px;
	align-items: center;
	padding-top: 64px;
	padding-bottom: 88px;
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 24px;
	padding: 6px 12px 6px 10px;
	border-radius: 999px;
	background: var(--panel);
	box-shadow: 0 0 0 1px var(--ring-strong);
	font-size: 13px;
	color: var(--muted);
	--surface: var(--panel);
}

.eyebrow .mark {
	color: var(--ink);
}

.hero h1 {
	font-size: clamp(2.4rem, 4.2vw, 3.4rem);
	line-height: 1.03;
	letter-spacing: -0.035em;
	margin: 0;
}

.hero .lead {
	margin: 22px 0 0;
	max-width: 30rem;
	font-size: 18px;
	color: var(--muted);
	text-wrap: pretty;
}

.hero .actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 30px;
}

.saving {
	margin: 22px 0 0;
	font-size: 14px;
	color: var(--muted);
}

.saving s {
	margin-right: 2px;
}

.saving strong {
	color: var(--good);
	font-weight: 600;
}

.saving a {
	margin-left: 4px;
	color: var(--fg);
}

/* The hero's bills: the two you pay today, struck through, under the one Mailstack replaces them with. */
.hero h1 mark {
	background: linear-gradient(transparent 62%, color-mix(in srgb, var(--fg) 12%, transparent) 62%);
	color: inherit;
}

.bills {
	position: relative;
	height: 540px;
	font-size: 13.5px;
}

.bill {
	position: absolute;
	padding: 20px 22px;
	border-radius: 16px;
	background: var(--panel);
	box-shadow: var(--shadow);
	animation: deal 0.8s cubic-bezier(0.2, 0.75, 0.2, 1) both;
}

.bill.one {
	top: 0;
	left: 0;
	width: 49%;
	rotate: -3deg;
	animation-delay: 0.05s;
}

.bill.two {
	top: 48px;
	right: 0;
	width: 48%;
	rotate: 3deg;
	animation-delay: 0.2s;
}

.bill.ours {
	bottom: 0;
	left: 10%;
	width: 80%;
	background: var(--ink-panel);
	color: var(--on-ink-panel);
	animation-delay: 0.5s;
	--surface: var(--ink-panel);
}

@keyframes deal {
	from {
		opacity: 0;
		translate: 0 28px;
	}
}

.bill-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
	font-size: 15px;
	font-weight: 600;
}

.bill-head em {
	font: 500 11.5px "Geist Mono", ui-monospace, monospace;
	font-style: normal;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}

.ours .bill-head em {
	color: var(--on-ink-muted);
}

.bill-brand {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.bill-row,
.bill-total {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 9px 0;
	box-shadow: inset 0 1px 0 var(--ring);
}

.ours .bill-row,
.ours .bill-total {
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.09);
}

.old .bill-row,
.bill-total span {
	color: var(--muted);
}

.ours .bill-total span {
	color: var(--on-ink-muted);
}

.incl {
	color: var(--good-on-ink);
}

.bill-total {
	align-items: baseline;
	margin-top: 4px;
	padding-top: 12px;
}

.bill-total s,
.bill-total strong {
	position: relative;
	font: 400 34px/1 "Fraunces", Georgia, serif;
	letter-spacing: -0.03em;
	text-decoration: none;
}

.bill-total strong {
	font-size: 46px;
	color: #fafafa;
}

/* Once the bills are down, the old totals get crossed out and fade. */
.bill-total s::after {
	content: "";
	position: absolute;
	left: -6px;
	right: -6px;
	top: 52%;
	height: 2.5px;
	border-radius: 2px;
	background: var(--fg);
	transform-origin: left;
	animation: strike 0.45s ease-out both;
}

.one .bill-total s::after {
	animation-delay: 1.3s;
}

.two .bill-total s::after {
	animation-delay: 1.6s;
}

@keyframes strike {
	from {
		transform: scaleX(0);
	}
}

.bill.old {
	animation: deal 0.8s cubic-bezier(0.2, 0.75, 0.2, 1) both, recede 0.6s ease 1.9s forwards;
}

.bill.two {
	animation-delay: 0.2s, 1.9s;
}

@keyframes recede {
	to {
		opacity: 0.55;
	}
}

.bill-save {
	display: inline-block;
	margin-top: 12px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgb(86 210 152 / 0.14);
	color: var(--good-on-ink);
	font-size: 13px;
	font-weight: 500;
}

.code {
	margin: 0;
	padding: 18px 20px;
	border-radius: 12px;
	background: var(--ink-panel);
	color: var(--on-ink-panel);
	font: 12.5px/1.75 "Geist Mono", ui-monospace, Menlo, monospace;
	overflow-x: auto;
}

/* Sections */
.section {
	padding-top: 96px;
	padding-bottom: 32px;
	box-shadow: inset 0 1px 0 var(--ring);
}

.section-head {
	max-width: var(--measure);
	margin-bottom: 48px;
}

.section-head h2 {
	font-size: clamp(2rem, 3.8vw, 2.9rem);
	line-height: 1.08;
	letter-spacing: -0.03em;
	margin: 0 0 14px;
}

.section-head p {
	margin: 0;
	color: var(--muted);
	font-size: 17px;
	text-wrap: pretty;
}

/* The stack: a sticky index of the three layers beside the layers themselves. */
.layers {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

.layer-index {
	position: sticky;
	top: 112px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.layer-index a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 12px;
	text-decoration: none;
	font-weight: 500;
	color: var(--muted);
	background: var(--soft);
	transition: background 0.25s, color 0.25s, transform 0.25s;
}

/* Like the logo: the layer in front is solid, the others recede. */
.layer-index a:nth-child(1) { margin: 0 24px; }
.layer-index a:nth-child(2) { margin: 0 12px; }

.layer-index a.on {
	background: var(--ink);
	color: var(--on-ink);
}

.layer-index .n {
	font: 500 11.5px "Geist Mono", ui-monospace, monospace;
	opacity: 0.7;
}

.layer-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.layer {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 32px;
	align-items: center;
	padding: 32px;
	border-radius: 24px;
	background: var(--soft);
	box-shadow: inset 0 0 0 1px var(--ring);
	scroll-margin-top: 96px;
}

.layer-title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.layer h3 {
	margin: 0;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.layer-copy > p {
	margin: 0 0 16px;
	color: var(--muted);
	font-size: 15.5px;
}

.facts {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14.5px;
}

.facts li {
	padding: 7px 0 7px 22px;
	box-shadow: inset 0 1px 0 var(--ring);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312996a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") 0 12px / 13px no-repeat;
}

.layer-visual {
	min-width: 0;
}

.tools {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 18px;
	border-radius: 16px;
	background: var(--ink-panel);
}

.tools code {
	padding: 5px 9px;
	border-radius: 8px;
	background: rgb(255 255 255 / 0.07);
	color: var(--on-ink-panel);
	font: 12px "Geist Mono", ui-monospace, monospace;
}

.tools .more {
	background: none;
	color: var(--good-on-ink);
}

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

.flow .step {
	padding: 12px;
	border-radius: 12px;
	background: var(--panel);
	box-shadow: 0 0 0 1px var(--ring);
	font-size: 12.5px;
}

.flow .step strong {
	display: block;
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: 500;
}

.flow .field {
	height: 28px;
	margin-bottom: 6px;
	padding: 0 8px;
	display: flex;
	align-items: center;
	border-radius: 7px;
	box-shadow: inset 0 0 0 1px var(--ring-strong);
	color: var(--muted);
	overflow: hidden;
	white-space: nowrap;
}

.flow .pill {
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 7px;
	background: var(--ink);
	color: var(--on-ink);
	font-weight: 500;
	white-space: nowrap;
}

.flow .line {
	height: 7px;
	margin-bottom: 7px;
	border-radius: 4px;
	background: var(--soft);
}

.flow .line.short {
	width: 60%;
}

/* On hover a layer's mark plays: the flock launches one plane after another, the plane takes off past its streaks. */
.layer:hover .launch {
	animation: launch 1.6s cubic-bezier(0.5, 0, 0.3, 1) infinite;
}

.layer:hover .launch.k1 {
	animation-delay: 0.1s;
}

.layer:hover .launch.k2 {
	animation-delay: 0.2s;
}

@keyframes launch {
	0%,
	10% {
		transform: translate(0, 0);
		opacity: 1;
	}
	40% {
		transform: translate(30px, -26px);
		opacity: 0;
	}
	41% {
		transform: translate(-30px, 26px);
		opacity: 0;
	}
	75%,
	100% {
		transform: translate(0, 0);
		opacity: 1;
	}
}

.layer:hover .zip {
	animation: zip 1.8s cubic-bezier(0.5, 0, 0.3, 1) infinite;
}

@keyframes zip {
	0%,
	8% {
		transform: translate(0, 0);
		opacity: 1;
	}
	35% {
		transform: translate(40px, -27px);
		opacity: 0;
	}
	36% {
		transform: translate(-40px, 27px);
		opacity: 0;
	}
	70%,
	100% {
		transform: translate(0, 0);
		opacity: 1;
	}
}

.streak {
	transform-origin: 100% 50%;
}

.layer:hover .streak {
	animation: streak 1.8s cubic-bezier(0.5, 0, 0.3, 1) infinite;
}

@keyframes streak {
	0%,
	8% {
		transform: scaleX(1);
		opacity: 1;
	}
	20% {
		transform: scaleX(1.8);
	}
	32%,
	55% {
		transform: scaleX(0);
		opacity: 0;
	}
	75%,
	100% {
		transform: scaleX(1);
		opacity: 1;
	}
}

/* Cost calculator */
.calc {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	border-radius: 24px;
	background: var(--panel);
	box-shadow: var(--shadow);
	overflow: hidden;
}

.calc-controls {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 28px;
	background: var(--soft);
	box-shadow: inset -1px 0 0 var(--ring);
}

.seg {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 2px;
	padding: 3px;
	border-radius: 12px;
	background: var(--panel);
	box-shadow: 0 0 0 1px var(--ring);
}

.seg button {
	min-height: 34px;
	min-width: 48px;
	padding: 0 12px;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: var(--muted);
	font: 500 14px "Geist", sans-serif;
	cursor: pointer;
}

.seg button[aria-checked="true"] {
	background: var(--ink);
	color: var(--on-ink);
}

.verdict {
	margin-top: auto;
	padding-top: 20px;
	box-shadow: inset 0 1px 0 var(--ring);
}

.verdict strong {
	font: 400 56px/1 "Fraunces", Georgia, serif;
	letter-spacing: -0.03em;
}

.per-month {
	color: var(--muted);
	margin-left: 4px;
}

.verdict p {
	margin: 10px 0 0;
	font-weight: 500;
	color: var(--good);
}

.calc-rows {
	margin: 0;
	padding: 20px 28px;
	list-style: none;
}

.calc-rows li {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 72px;
	align-items: center;
	gap: 16px;
	padding: 9px 0;
}

.calc-rows li + li {
	box-shadow: inset 0 1px 0 var(--ring);
}

.who b {
	display: block;
	font-size: 14.5px;
	font-weight: 500;
}

.who em {
	font-style: normal;
	font-size: 12.5px;
	color: var(--muted);
}

.track {
	height: 8px;
	border-radius: 9px;
	background: var(--soft);
	overflow: hidden;
}

.track span {
	display: block;
	height: 100%;
	border-radius: 9px;
	background: color-mix(in srgb, var(--fg) 22%, var(--bg));
	transition: width 0.35s ease;
}

.total {
	text-align: right;
	font-variant-numeric: tabular-nums;
	font-weight: 500;
}

.calc-rows .us b,
.calc-rows .us .total {
	font-weight: 700;
}

.calc-rows .us .track span {
	background: var(--good);
}

.source {
	max-width: 52rem;
	margin-top: 16px;
}

/* Agents: the one dark band. */
.agents {
	margin: 96px 24px 0;
	padding: 88px 0;
	border-radius: 32px;
	background: var(--ink-panel) radial-gradient(rgb(255 255 255 / 0.08) 1px, transparent 1px) 0 0 / 22px 22px;
	color: var(--on-ink-panel);
}

.agents-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 56px;
	align-items: center;
}

.kicker.on-dark {
	color: var(--on-ink-muted);
}

.agents h2 {
	font-size: clamp(2rem, 3.8vw, 2.9rem);
	line-height: 1.08;
	letter-spacing: -0.03em;
	margin: 0 0 16px;
	color: #fafafa;
}

.agents-lead {
	margin: 0 0 24px;
	color: var(--on-ink-muted);
	font-size: 16.5px;
}

.code.light {
	background: rgb(255 255 255 / 0.06);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
}

.agents-links {
	display: flex;
	gap: 24px;
	margin-top: 20px;
	font-size: 14.5px;
	font-weight: 500;
}

.agents-links a {
	text-decoration: none;
	color: #fafafa;
}

.asks {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.asks li {
	padding: 16px 18px;
	border-radius: 14px;
	background: rgb(255 255 255 / 0.05);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
}

.asks q {
	display: block;
	margin-bottom: 10px;
	font: 400 19px/1.35 "Fraunces", Georgia, serif;
	color: #fafafa;
	quotes: "\201C" "\201D";
}

.asks code {
	display: inline-block;
	margin-right: 6px;
	padding: 2px 8px;
	border-radius: 6px;
	background: rgb(255 255 255 / 0.08);
	font: 11.5px "Geist Mono", ui-monospace, monospace;
	color: var(--good-on-ink);
}

/* Pricing */
.plans {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}

.plans table {
	width: 100%;
	border-collapse: collapse;
	border-radius: 20px;
	background: var(--panel);
	box-shadow: var(--shadow);
	overflow: hidden;
	font-variant-numeric: tabular-nums;
}

.plans th,
.plans td {
	padding: 18px 20px;
	text-align: left;
	font-size: 15px;
}

.plans thead th {
	padding-top: 14px;
	padding-bottom: 14px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--muted);
	background: var(--soft);
}

.plans tbody tr + tr {
	box-shadow: inset 0 1px 0 var(--ring);
}

.plans tbody th {
	font-weight: 600;
}

.plans td:last-child,
.plans th:last-child {
	text-align: right;
}

.plans td:last-child {
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.plans td span {
	font-size: 13px;
	font-weight: 400;
	color: var(--muted);
}

.addon {
	padding: 28px;
	border-radius: 20px;
	background: var(--soft);
	box-shadow: inset 0 0 0 1px var(--ring);
}

.addon h3 {
	margin: 16px 0 4px;
	font-size: 19px;
	font-weight: 600;
}

.addon-price {
	margin: 0 0 8px;
	color: var(--muted);
}

.addon-price strong {
	font-size: 40px;
	font-weight: 600;
	letter-spacing: -0.03em;
	color: var(--fg);
}

.addon > p:not(.addon-price):not(.fine) {
	margin: 0 0 22px;
	color: var(--muted);
	font-size: 14.5px;
}

.addon .fine {
	margin: 12px 0 0;
	text-align: center;
}

/* Safety rails */
.rules {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

.checklist {
	border-radius: var(--radius);
	background: var(--panel);
	box-shadow: var(--shadow);
	padding: 8px 0;
	--surface: var(--panel);
}

.checklist .head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px 10px;
	font-size: 13px;
	font-weight: 500;
}

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

.checklist li {
	display: grid;
	grid-template-columns: 22px 1fr;
	gap: 12px;
	padding: 12px 20px;
	box-shadow: inset 0 1px 0 var(--ring);
	font-size: 14.5px;
}

.tick {
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-top: 3px;
	border-radius: 50%;
	background: var(--good)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
		center / 11px no-repeat;
}

.checklist li span:last-child {
	color: var(--muted);
}

.checklist li strong {
	display: block;
	color: var(--fg);
	font-weight: 500;
}

.limits h3 {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 600;
}

.limits > p {
	margin: 0 0 20px;
	color: var(--muted);
	font-size: 15px;
}

.limits table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14.5px;
	font-variant-numeric: tabular-nums;
}

.limits th,
.limits td {
	text-align: left;
	padding: 12px 0;
	box-shadow: inset 0 -1px 0 var(--ring);
}

.limits th {
	font-weight: 500;
	color: var(--muted);
	font-size: 13px;
}

.limits .policy {
	margin-top: 24px;
	font-size: 14.5px;
	color: var(--muted);
}

/* FAQ: two columns of short answers. */
.faq-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.faq-grid details {
	padding: 0 20px;
	border-radius: 14px;
	background: var(--soft);
	box-shadow: inset 0 0 0 1px var(--ring);
	align-self: start;
}

.faq-grid summary {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 0;
	font-weight: 500;
	cursor: pointer;
	list-style: none;
}

.faq-grid summary::-webkit-details-marker {
	display: none;
}

.faq-grid summary::after {
	content: "+";
	color: var(--muted);
	transition: transform 0.2s;
}

.faq-grid details[open] summary::after {
	transform: rotate(45deg);
}

.faq-grid p {
	margin: -4px 0 18px;
	color: var(--muted);
	font-size: 15px;
}

/* Closing: the logo sending, and a plane looping off. */
.closing {
	position: relative;
	padding-top: 112px;
	padding-bottom: 120px;
	text-align: center;
	box-shadow: inset 0 1px 0 var(--ring);
}

.closing h2 {
	font-size: clamp(2.2rem, 4.4vw, 3.2rem);
	line-height: 1.05;
	letter-spacing: -0.035em;
	margin: 0 auto 14px;
	max-width: 20ch;
}

.closing p {
	margin: 0 auto 28px;
	color: var(--muted);
	max-width: 32rem;
}

.send-mark {
	margin: 0 auto 28px;
	color: var(--ink);
}

.send-mark .sheet {
	fill: var(--bg);
	stroke: currentColor;
	stroke-width: 2;
}

.send-mark .ln {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

.send-mark .open {
	transform-origin: 50% 100%;
	animation: flap-open 4.4s ease-in-out infinite;
}

.send-mark .closed {
	animation: flap-shut 4.4s ease-in-out infinite;
}

.send-mark .letter {
	animation: letter-out 4.4s cubic-bezier(0.45, 0, 0.3, 1) infinite;
}

@keyframes flap-open {
	0%,
	10% {
		transform: scaleY(0);
		opacity: 0;
	}
	16%,
	58% {
		transform: scaleY(1);
		opacity: 0.5;
	}
	66%,
	100% {
		transform: scaleY(0);
		opacity: 0;
	}
}

@keyframes flap-shut {
	0%,
	8% {
		opacity: 1;
	}
	11%,
	64% {
		opacity: 0;
	}
	69%,
	100% {
		opacity: 1;
	}
}

@keyframes letter-out {
	0%,
	16% {
		transform: translate(0, 10px);
		opacity: 1;
	}
	27%,
	34% {
		transform: translate(0, -9px) rotate(0);
	}
	50% {
		transform: translate(48px, -44px) rotate(20deg);
		opacity: 0;
	}
	51%,
	100% {
		transform: translate(0, 10px);
		opacity: 0;
	}
}

.flight {
	position: absolute;
	left: 24px;
	bottom: 24px;
	width: 220px;
	height: 130px;
	color: var(--muted);
}

.flight .dash {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-dasharray: 1 7;
	opacity: 0.5;
}

.flight .flyer {
	position: absolute;
	top: 0;
	left: 0;
	color: var(--ink);
	offset-path: path("M 6 100 C 50 100, 90 100, 115 75 C 135 52, 132 22, 110 22 C 86 22, 80 55, 100 78 C 120 100, 165 100, 214 100");
	offset-rotate: auto;
	animation: loop 4.2s cubic-bezier(0.5, 0, 0.5, 1) 0.9s infinite both;
}

@keyframes loop {
	0% {
		offset-distance: 0%;
		opacity: 0;
	}
	6%,
	74% {
		opacity: 1;
	}
	80%,
	100% {
		offset-distance: 100%;
		opacity: 0;
	}
}

/* Footer */
.site-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 32px 0 48px;
	box-shadow: inset 0 1px 0 var(--ring);
	font-size: 13.5px;
	color: var(--muted);
}

.wrap.site-footer {
	padding-left: 24px;
	padding-right: 24px;
}

.site-footer .brand {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.site-footer nav {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.site-footer a {
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--fg);
}

/* Legal pages */
.legal {
	max-width: 40rem;
	padding: 56px 0 80px;
}

.legal h1 {
	font-size: clamp(2.4rem, 5vw, 3.2rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
	margin: 0 0 8px;
}

.legal .updated {
	margin: 0 0 32px;
	color: var(--muted);
	font-size: 14px;
}

.legal h2 {
	margin: 36px 0 8px;
	font: 600 18px/1.4 "Geist", sans-serif;
	letter-spacing: -0.015em;
}

.legal p,
.legal li {
	color: color-mix(in oklab, var(--fg) 78%, var(--bg));
	line-height: 1.7;
}

/* Small screens */
@media (max-width: 960px) {
	.hero,
	.layer,
	.calc,
	.agents-grid,
	.plans,
	.rules {
		grid-template-columns: 1fr;
	}
	.hero {
		gap: 48px;
		padding-top: 40px;
	}
	.layers {
		grid-template-columns: 1fr;
	}
	.layer-index {
		display: none;
	}
	.calc-controls {
		box-shadow: inset 0 -1px 0 var(--ring);
	}
}

@media (max-width: 600px) {
	.site-nav a.optional {
		display: none;
	}
	.bills {
		height: 560px;
	}
	.bill.one {
		left: 0;
		width: 78%;
	}
	.bill.two {
		top: 120px;
		width: 78%;
	}
	.bill.ours {
		left: 0;
		width: 100%;
	}
	.layer,
	.calc-controls,
	.addon {
		padding: 22px;
	}
	.calc-rows {
		padding: 12px 18px;
	}
	.calc-rows li {
		grid-template-columns: minmax(0, 1fr) 64px;
	}
	.calc-rows .track {
		display: none;
	}
	.flow {
		grid-template-columns: 1fr;
	}
	.faq-grid {
		grid-template-columns: 1fr;
	}
	.plans th,
	.plans td {
		padding: 14px 12px;
		font-size: 14px;
	}
	.plans th:nth-child(3),
	.plans td:nth-child(3),
	.plans th:nth-child(4),
	.plans td:nth-child(4) {
		display: none;
	}
	.agents {
		margin: 72px 12px 0;
		padding: 64px 0;
	}
	.flight {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	.mark *,
	.bill,
	.bill-total s::after {
		animation: none !important;
	}
	.flight {
		display: none;
	}
}