@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-display: swap;
	font-weight: 300 900;
	src: url(/fonts/figtree-latin-ext-wght-normal.woff2) format("woff2-variations");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-display: swap;
	font-weight: 300 900;
	src: url(/fonts/figtree-latin-wght-normal.woff2) format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--link: var(--apricot);
	--link-hover: var(--apricot-2);
	--cocoa-0: #120b07;
	--cocoa-1: #1c130e;
	--cocoa-2: #2a1c14;
	--cream: #fbf3e8;
	--cream-2: #f5e7d4;
	--ink: #2a1c14;
	--ink-2: #6b5646;
	--on-dark: #fbf3e8;
	--on-dark-2: #cdb9a5;
	--apricot: #f2a65a;
	--apricot-2: #f8b977;
	--tongue: #f08a9a;
	--app-0: #15171b;
	--app-1: #1c1f24;
	--app-2: #24272d;
	--app-3: #2e3239;
	--app-text: #e6e8ec;
	--app-muted: #98a0ab;
	--speaking: #3ba55d;
}

* {
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
}
body {
	margin: 0;
	background: var(--cocoa-1);
	color: var(--on-dark);
	font: 400 18px/1.6 "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img,
svg {
	display: block;
}
h1,
h2,
h3 {
	margin: 0;
	line-height: 1.05;
	/* lines of even length, never one word left on its own */
	text-wrap: balance;
}
p {
	margin: 0;
}
/* links are told apart by colour and weight, never underlined; their colour fades on hover */
a {
	color: inherit;
	text-decoration: none;
	transition:
		color 0.3s,
		opacity 0.3s,
		background-color 0.3s;
}
:where(p, li, dd, td, summary, figcaption, cite) a:not(.button) {
	color: var(--link);
	font-weight: 700;
}
:where(p, li, dd, td, summary, figcaption, cite) a:not(.button):hover {
	color: var(--link-hover);
}
[hidden] {
	display: none !important;
}
.sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}
.wrap {
	width: min(1180px, 100% - 40px);
	margin-inline: auto;
}
.narrow {
	width: min(800px, 100% - 40px);
}
.skip {
	position: absolute;
	left: -999px;
	top: 8px;
	z-index: 20;
	padding: 8px 14px;
	border-radius: 8px;
	background: var(--apricot);
	color: var(--ink);
}
.skip:focus {
	left: 8px;
}
:focus-visible {
	outline: 3px solid var(--apricot);
	outline-offset: 3px;
	border-radius: 8px;
}

/* a command's name and its option stay on one line (a line break after "-" reads as part of the command) */
.nowrap {
	white-space: nowrap;
}

/* ---------- buttons */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 20px;
	border: 0;
	border-radius: 999px;
	background: var(--apricot);
	color: var(--ink);
	font-family: inherit;
	font-weight: 800;
	font-size: 16px;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.button:hover {
	background: var(--apricot-2);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(242, 166, 90, 0.3);
}
.button.big {
	min-width: 150px;
	min-height: 60px;
	padding: 0 30px;
	font-size: 19px;
}
/* "Download Grumble" becomes "Download for Windows" (or Mac…) once site.js knows the device. The button is as wide as
   the longest label from the start, the hidden copy under it, so the swap doesn't move anything beside or below it */
.dl-label {
	display: inline-grid;
	justify-items: center;
}
.dl-label > * {
	grid-area: 1 / 1;
}
.dl-label > [aria-hidden] {
	visibility: hidden;
}
.button.ghost {
	background: rgba(251, 243, 232, 0.08);
	color: var(--on-dark);
	box-shadow: inset 0 0 0 2px rgba(251, 243, 232, 0.25);
}
.button.ghost:hover {
	background: rgba(251, 243, 232, 0.14);
	box-shadow: inset 0 0 0 2px rgba(251, 243, 232, 0.5);
}
.button.small {
	min-height: 40px;
	font-size: 15px;
}

/* ---------- header */
.top {
	position: absolute;
	inset: 0 0 auto;
	z-index: 10;
}
.top-row {
	display: flex;
	align-items: center;
	gap: 32px;
	height: 84px;
}
.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--on-dark);
	text-decoration: none;
	font-weight: 900;
	font-size: 24px;
	letter-spacing: -0.5px;
}
.nav {
	display: flex;
	gap: 28px;
	margin-left: auto;
}
.nav a {
	color: var(--on-dark);
	text-decoration: none;
	font-weight: 700;
	font-size: 16px;
	opacity: 0.85;
}
.nav a:hover {
	opacity: 1;
	color: var(--apricot);
}
/* phones and tablets: the links fold into a menu (site.js shows the button, which stays hidden without scripts) */
.menu-button {
	display: none;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-right: -8px;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: none;
	color: var(--on-dark);
	cursor: pointer;
	transition: background-color 0.3s ease;
}
.menu-button:hover {
	background-color: rgba(251, 243, 232, 0.1);
}
.menu-button path {
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	transform-box: view-box;
	transform-origin: 12px 12px;
	transition: transform 0.3s ease, opacity 0.3s ease;
}
.menu-open .menu-button path:nth-child(1) {
	transform: translateY(5px) rotate(45deg);
}
.menu-open .menu-button path:nth-child(2) {
	opacity: 0;
}
.menu-open .menu-button path:nth-child(3) {
	transform: translateY(-5px) rotate(-45deg);
}

/* ---------- hero */
.hero {
	position: relative;
	padding: 150px 0 0;
	overflow: hidden;
	background:
		radial-gradient(55% 60% at 75% 70%, rgba(242, 166, 90, 0.28), transparent 70%),
		radial-gradient(40% 40% at 15% 20%, rgba(240, 138, 154, 0.1), transparent 70%),
		linear-gradient(180deg, #1a100b 0%, #2b1911 60%, #3a2216 100%);
}
.hero-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: end;
}
.hero-copy {
	padding-bottom: 120px;
}
h1 {
	font-size: clamp(46px, 6.2vw, 86px);
	font-weight: 900;
	line-height: 0.95;
	letter-spacing: -1.5px;
	text-transform: uppercase;
}
h1 span {
	display: block;
	color: var(--apricot);
}
/* the home page's headline: one sentence to a line, sized so the longest ("Just your pack.", about 8.6em) fits the column */
.hero-copy {
	container-type: inline-size;
}
.hero h1 {
	font-size: clamp(28px, 11.5cqi, 86px);
	white-space: nowrap;
}
.hero h1 .line {
	color: inherit;
}
.lede {
	max-width: 540px;
	margin: 26px 0 34px;
	color: var(--on-dark-2);
	font-size: 20px;
}
.cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}
/* a little smaller in the hero beside the pugs, so "Download for Windows" and "Open in your browser" fit side by side
   in the 570px column */
@media (min-width: 961px) {
	.hero .cta-row .button.big {
		padding: 0 26px;
		font-size: 18px;
	}
}
.fine {
	margin-top: 18px;
	color: var(--on-dark-2);
	font-size: 14px;
	opacity: 0.85;
}
.fine a {
	color: var(--link);
	font-weight: 700;
}
/* under the hero's buttons: a tile for each platform, to its download; "Soon" on those still on the way */
.get-on {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 64px));
	gap: 10px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}
.get-on a {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	color: var(--on-dark-2);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
}
.get-on-icon {
	width: min(52px, 100%);
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	border-radius: 16px;
	background: rgba(251, 243, 232, 0.07);
	box-shadow: inset 0 0 0 1px rgba(251, 243, 232, 0.1);
	color: var(--on-dark);
	transition:
		background-color 0.3s,
		color 0.3s,
		box-shadow 0.3s;
}
.get-on-icon svg {
	width: 24px;
	height: 24px;
}
.get-on a:hover {
	color: var(--on-dark);
}
.get-on a:hover .get-on-icon {
	background: rgba(251, 243, 232, 0.13);
	box-shadow: inset 0 0 0 1px rgba(242, 166, 90, 0.5);
	color: var(--apricot);
}
.get-on-soon {
	position: absolute;
	top: -7px;
	right: -4px;
	padding: 1px 6px;
	border-radius: 999px;
	background: #3a2418;
	box-shadow: inset 0 0 0 1px rgba(242, 166, 90, 0.45);
	color: var(--apricot);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.3px;
	line-height: 1.5;
}
.get-on-soon[hidden] {
	display: none;
}
.hero-sky .deco {
	position: absolute;
	fill: var(--apricot);
	opacity: 0.5;
	animation: twinkle 4s ease-in-out infinite;
}
.deco.s1 {
	width: 22px;
	height: 22px;
	top: 18%;
	left: 46%;
}
.deco.s2 {
	width: 14px;
	height: 14px;
	top: 32%;
	left: 6%;
	animation-delay: 1.2s;
}
.deco.s3 {
	width: 18px;
	height: 18px;
	top: 12%;
	right: 8%;
	animation-delay: 2.1s;
	fill: var(--tongue);
}
.deco.p1 {
	width: 30px;
	height: 30px;
	bottom: 26%;
	left: 44%;
	opacity: 0.18;
	transform: rotate(-20deg);
	animation: none;
}
.deco.p2 {
	width: 22px;
	height: 22px;
	top: 26%;
	right: 30%;
	opacity: 0.16;
	transform: rotate(18deg);
	animation: none;
}
.deco.b1 {
	width: 56px;
	height: 24.5px;
	top: 60%;
	left: 2%;
	fill: var(--cream);
	opacity: 0.12;
	transform: rotate(-24deg);
	animation: none;
}
@keyframes twinkle {
	50% {
		opacity: 0.15;
		transform: scale(0.7) rotate(20deg);
	}
}

.scene {
	position: relative;
	aspect-ratio: 560 / 470;
	width: 100%;
}
.scene .glow {
	position: absolute;
	inset: 20% 5% 0;
	background: radial-gradient(closest-side, rgba(242, 166, 90, 0.35), transparent);
}
.scene .rug {
	position: absolute;
	left: 4%;
	right: 4%;
	bottom: 2%;
	height: 20%;
	border-radius: 50%;
	background: radial-gradient(closest-side, #7a4526, #59311c 70%, #4a2817);
	box-shadow: 0 10px 0 #3a1f12;
}
.scene .pug {
	position: absolute;
	height: auto;
	filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.35));
	animation: bob 3.4s ease-in-out infinite;
	transform-origin: 50% 100%;
}
.p-main {
	width: 46%;
	left: 27%;
	bottom: 7%;
	z-index: 3;
}
.p-black {
	width: 36%;
	left: 1%;
	bottom: 10%;
	z-index: 2;
	animation-delay: -1.1s !important;
}
.p-pup {
	width: 27%;
	right: 3%;
	bottom: 9%;
	z-index: 2;
	animation-delay: -2s !important;
	animation-duration: 2.6s !important;
}
@keyframes bob {
	50% {
		transform: translateY(-8px) rotate(-1.5deg);
	}
}
.bubble {
	position: absolute;
	z-index: 4;
	padding: 10px 16px;
	border-radius: 18px;
	background: var(--cream);
	color: var(--ink);
	font-weight: 800;
	font-size: 15px;
	white-space: nowrap;
	box-shadow: 0 12px 26px rgba(0, 0, 0, 0.3);
	animation: float 5s ease-in-out infinite;
}
.bubble::after {
	content: "";
	position: absolute;
	bottom: -7px;
	left: 18px;
	width: 16px;
	height: 16px;
	background: inherit;
	transform: rotate(45deg);
	border-radius: 3px;
}
.b-gg {
	top: 14%;
	left: 46%;
}
.b-snack {
	top: 36%;
	right: -2%;
	background: var(--apricot);
	animation-delay: -2.5s;
}
.b-snack::after {
	left: auto;
	right: 30px;
}
@keyframes float {
	50% {
		transform: translateY(-10px);
	}
}
.pill {
	position: absolute;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px 8px 14px;
	border-radius: 999px;
	background: var(--app-1);
	color: var(--app-text);
	font-weight: 700;
	font-size: 14px;
	box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35);
}
.voice-pill {
	top: 3%;
	left: 4%;
	animation: float 6s ease-in-out infinite;
	animation-delay: -1s;
}
.pill .dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--speaking);
	box-shadow: 0 0 0 4px rgba(59, 165, 93, 0.25);
}
.mini-avs {
	display: flex;
}
.mini-avs svg {
	width: 28px;
	height: 28px;
	margin-left: -6px;
	padding: 2px;
	border-radius: 50%;
	background: #4a505b;
	box-shadow: 0 0 0 2px var(--app-1);
}
.hero-edge {
	position: relative;
	z-index: 2;
	height: 70px;
	margin-top: -40px;
	background: var(--cream);
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

/* ---------- bands */
.band {
	padding: 110px 0;
	/* decorative pugs may peek past the edge without making the page scroll sideways */
	overflow-x: clip;
}
.band.light {
	--link: #b4561f;
	--link-hover: #8a3c10;
	background: var(--cream);
	color: var(--ink);
}
.band.light.alt {
	background: var(--cream-2);
}
.band.dark {
	background:
		radial-gradient(50% 70% at 25% 50%, rgba(240, 138, 154, 0.12), transparent 70%),
		var(--cocoa-2);
	color: var(--on-dark);
}
.split {
	display: grid;
	grid-template-columns: 1.3fr 0.7fr;
	gap: 72px;
	align-items: center;
}
.split.flip {
	grid-template-columns: 0.7fr 1.3fr;
}
/* just wider than a tablet, 0.7 of the width leaves the words a 300px column (and the home page's "No ID" tags one to a
   line); more even there */
@media (min-width: 961px) and (max-width: 1099px) {
	.split {
		grid-template-columns: 1.1fr 0.9fr;
		gap: 48px;
	}
	.split.flip {
		grid-template-columns: 0.9fr 1.1fr;
	}
}
.split.flip .visual {
	order: 2;
}
.copy h2,
.faq h2,
.cta h2 {
	font-size: clamp(34px, 4.4vw, 56px);
	font-weight: 900;
	letter-spacing: -1px;
	margin-bottom: 22px;
}
.copy p {
	color: var(--ink-2);
	font-size: 19px;
}
.copy p + p {
	margin-top: 16px;
}
.dark .copy p {
	color: var(--on-dark-2);
}
.visual {
	position: relative;
	min-width: 0;
}
.split > *,
.hero-grid > * {
	min-width: 0;
}

/* ---------- recordings of the app */
.shot {
	position: relative;
	z-index: 1;
	margin: 0;
	aspect-ratio: 16 / 10;
	border-radius: 16px;
	overflow: hidden;
	background: #1c1f24;
	box-shadow: 0 40px 80px -20px rgba(42, 28, 20, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.shot video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.shot.dm-shot {
	aspect-ratio: 760 / 560;
	max-width: 600px;
	margin-inline: auto;
}
.dark .shot {
	box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.peek {
	position: absolute;
	z-index: 0;
	top: -96px;
	right: 56px;
	width: 150px;
	animation: peek 6s ease-in-out infinite;
}
@keyframes peek {
	0%,
	100% {
		transform: translateY(14px);
	}
	40%,
	70% {
		transform: translateY(0);
	}
}

.side-pug {
	position: absolute;
	z-index: 2;
	left: -130px;
	bottom: -60px;
	width: 170px;
	filter: drop-shadow(0 14px 20px rgba(42, 28, 20, 0.3));
	animation: bob 3.6s ease-in-out infinite;
}
.split.flip .side-pug {
	left: auto;
	right: -110px;
}
.split.flip .side-pug.cool {
	right: -20px;
	bottom: -50px;
}
.side-pug.cool {
	left: auto;
	right: -120px;
	bottom: -70px;
	width: 160px;
}

/* ---------- no id */
.no-id-visual {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	min-height: 380px;
}
.id-card {
	position: relative;
	width: 300px;
	padding: 18px;
	border-radius: 16px;
	background: #e9eef6;
	color: #33415c;
	transform: rotate(-8deg) translate(40px, -60px);
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}
.id-top {
	font-weight: 900;
	letter-spacing: 3px;
	font-size: 14px;
}
.id-body {
	display: flex;
	gap: 14px;
	margin-top: 14px;
}
.id-photo {
	width: 76px;
	height: 92px;
	border-radius: 8px;
	background: linear-gradient(180deg, #c5cfdd, #aab6c8);
}
.id-lines {
	display: grid;
	gap: 10px;
	flex: 1;
	align-content: start;
}
.id-lines i {
	height: 10px;
	border-radius: 5px;
	background: #c5cfdd;
}
.id-lines i:nth-child(2) {
	width: 70%;
}
.id-lines i:nth-child(3) {
	width: 45%;
}
.stamp {
	position: absolute;
	top: 34%;
	left: 22%;
	padding: 4px 16px;
	border: 5px solid #e2445c;
	border-radius: 10px;
	color: #e2445c;
	font-weight: 900;
	font-size: 44px;
	letter-spacing: 4px;
	transform: rotate(14deg);
	opacity: 0.92;
	mix-blend-mode: multiply;
}
.grumpy {
	position: relative;
	z-index: 1;
	width: 240px;
	margin-left: -70px;
	filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.4));
}
.bubble.grr {
	top: 14%;
	right: 12%;
	background: var(--tongue);
}
.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}
.chips li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px 9px 12px;
	border-radius: 999px;
	background: rgba(251, 243, 232, 0.08);
	box-shadow: inset 0 0 0 1px rgba(251, 243, 232, 0.14);
	font-weight: 700;
	font-size: 15px;
}
.chips li::before {
	content: "✕";
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba(240, 138, 154, 0.22);
	color: var(--tongue);
	font-size: 11px;
	font-weight: 900;
}
/* what Grumble does do, beside what it doesn't ask for */
.chips li.yes::before {
	content: "✓";
	background: rgba(127, 209, 166, 0.2);
	color: #7fd1a6;
}

/* ---------- move */
.move-visual {
	display: grid;
	place-items: center;
	min-height: 380px;
}
.boxed {
	width: 300px;
	filter: drop-shadow(0 20px 26px rgba(42, 28, 20, 0.25));
}
.moving span {
	position: absolute;
	padding: 8px 14px;
	border-radius: 10px;
	background: var(--app-1);
	color: var(--app-text);
	font-weight: 700;
	font-size: 14px;
	box-shadow: 0 14px 28px rgba(42, 28, 20, 0.25);
	animation: float 5s ease-in-out infinite;
}
.moving span:nth-child(1) {
	top: 4%;
	left: 6%;
}
.moving span:nth-child(2) {
	top: 0;
	right: 12%;
	animation-delay: -1.5s;
}
.moving span:nth-child(3) {
	top: 34%;
	left: 0;
	animation-delay: -3s;
	color: #9aa8ff;
}
.moving span:nth-child(4) {
	top: 30%;
	right: 2%;
	animation-delay: -2.2s;
}
.moving span:nth-child(5) {
	bottom: 6%;
	right: 4%;
	background: var(--apricot);
	color: var(--ink);
	animation-delay: -0.7s;
}

/* ---------- the pledge */
.eyebrow.ink {
	color: var(--ink);
	opacity: 0.6;
}
.promise .split {
	grid-template-columns: 0.85fr 1.15fr;
}
.pledge {
	position: relative;
	z-index: 1;
	padding: 34px 38px 30px;
	border-radius: 6px;
	background: #fffaf2;
	color: var(--ink);
	box-shadow: 0 30px 60px -20px rgba(42, 28, 20, 0.35), 0 0 0 1px rgba(42, 28, 20, 0.08);
	transform: rotate(1.2deg);
	background-image: repeating-linear-gradient(180deg, transparent 0 35px, rgba(42, 28, 20, 0.05) 35px 36px);
}
.pledge-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 14px;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--ink);
	font-weight: 900;
	font-size: 22px;
	letter-spacing: -0.3px;
}
.paw-seal {
	width: 46px;
	height: 46px;
	padding: 9px;
	border-radius: 50%;
	background: #e2445c;
	fill: #fffaf2;
	box-shadow: 0 0 0 4px rgba(226, 68, 92, 0.25);
	transform: rotate(-12deg);
}
.pledge ul {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.pledge li {
	position: relative;
	padding-left: 34px;
	color: var(--ink-2);
	font-size: 16.5px;
	line-height: 1.5;
}
.pledge li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2a65a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.pledge li b {
	display: block;
	color: var(--ink);
	font-weight: 800;
}
.pledge-sign {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
	margin-top: 22px;
	padding-top: 14px;
	border-top: 1px dashed rgba(42, 28, 20, 0.3);
}
.sig {
	color: var(--ink);
	font: italic 900 28px/1 "Figtree", system-ui, sans-serif;
	letter-spacing: -0.5px;
	transform: rotate(-3deg);
}
.sig-note {
	color: var(--ink-2);
	font-size: 13.5px;
	/* beside the signature where there's room, under it on the narrowest phones (where the pug sits over the end),
	   and never "over" on a line of its own */
	flex: 1 1 190px;
	text-wrap: balance;
}
.pledge-pug {
	position: absolute;
	z-index: 2;
	right: -60px;
	bottom: -70px;
	width: 150px;
	filter: drop-shadow(0 14px 20px rgba(42, 28, 20, 0.3));
	animation: bob 3.6s ease-in-out infinite;
}

/* ---------- safety: the pledge's card, on the other side */
.safety .split {
	grid-template-columns: 1.15fr 0.85fr;
}
.safety .pledge {
	transform: rotate(-1deg);
}
/* (the pug sits on the card's bottom corner, as on the pledge: the last point's words stop short of it) */
.safety .pledge li:last-child {
	padding-right: 110px;
}

/* ---------- beliefs */
.eyebrow {
	margin-bottom: 14px;
	color: var(--apricot);
	font-weight: 800;
	font-size: 14px;
	letter-spacing: 2px;
	text-transform: uppercase;
}
.eyebrow.dark {
	color: var(--ink);
	opacity: 0.75;
}
.beliefs {
	background:
		radial-gradient(45% 60% at 85% 10%, rgba(242, 166, 90, 0.16), transparent 70%),
		radial-gradient(40% 50% at 5% 90%, rgba(154, 168, 255, 0.1), transparent 70%),
		var(--cocoa-0);
	color: var(--on-dark);
}
.beliefs h2 {
	max-width: 900px;
	font-size: clamp(38px, 5.4vw, 72px);
	font-weight: 900;
	letter-spacing: -1.5px;
}
.beliefs-lead {
	max-width: 760px;
	margin: 26px 0 56px;
	color: var(--on-dark-2);
	font-size: 20px;
}
.rights {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}
.right {
	position: relative;
	padding: 32px 32px 28px;
	border-radius: 20px;
	background: rgba(251, 243, 232, 0.04);
	box-shadow: inset 0 0 0 1px rgba(251, 243, 232, 0.09);
}
.right-art {
	display: block;
	width: calc(100% + 64px);
	height: 170px;
	margin: -32px -32px 22px;
	padding: 14px 18px 0;
	border-radius: 20px 20px 0 0;
	background: radial-gradient(80% 90% at 30% 100%, rgba(242, 166, 90, 0.22), transparent 70%), rgba(251, 243, 232, 0.04);
	overflow: visible;
}
.right:nth-child(2) .right-art {
	background: radial-gradient(80% 90% at 70% 100%, rgba(240, 138, 154, 0.2), transparent 70%), rgba(251, 243, 232, 0.04);
}
.right:nth-child(3) .right-art {
	background: radial-gradient(80% 90% at 50% 100%, rgba(127, 209, 166, 0.18), transparent 70%), rgba(251, 243, 232, 0.04);
}
.right:nth-child(4) .right-art {
	background: radial-gradient(80% 90% at 40% 100%, rgba(154, 168, 255, 0.2), transparent 70%), rgba(251, 243, 232, 0.04);
}
.art-text {
	fill: var(--ink);
	font: 800 17px "Figtree", system-ui, sans-serif;
}
.right .num {
	display: block;
	margin-bottom: 14px;
	color: var(--apricot);
	font-weight: 900;
	font-size: 15px;
	letter-spacing: 2px;
}
.right h3 {
	margin-bottom: 12px;
	font-size: 26px;
	font-weight: 900;
	letter-spacing: -0.4px;
}
.right p {
	color: var(--on-dark-2);
}
.right cite {
	display: block;
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid rgba(251, 243, 232, 0.09);
	color: var(--apricot);
	font-style: normal;
	font-weight: 600;
	font-size: 13.5px;
	opacity: 0.9;
}
.beliefs-close {
	display: flex;
	align-items: center;
	gap: 28px;
	max-width: 860px;
	margin: 56px auto 0;
}
.beliefs-close svg {
	flex: none;
	width: 120px;
	animation: bob 3.4s ease-in-out infinite;
}
.beliefs-close p {
	font-size: clamp(19px, 2.2vw, 24px);
	font-weight: 700;
	line-height: 1.4;
}

/* ---------- speed */
.speed {
	padding: 110px 0;
	background: var(--apricot);
	color: var(--ink);
}
.speed h2 {
	font-size: clamp(38px, 5.4vw, 72px);
	font-weight: 900;
	letter-spacing: -1.5px;
	margin-bottom: 54px;
}
/* four numbers in a row, divided by thin rules, then the search video beside what it shows */
.stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 2px solid rgba(42, 28, 20, 0.2);
}
.stats li {
	padding: 26px 24px 0;
	border-left: 2px solid rgba(42, 28, 20, 0.2);
}
.stats li:first-child {
	padding-left: 0;
	border-left: 0;
}
.stats b {
	display: block;
	white-space: nowrap;
	font-size: clamp(40px, 4.2vw, 62px);
	font-weight: 900;
	letter-spacing: -2px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.stats span {
	display: block;
	margin-top: 12px;
	font-size: 17px;
	font-weight: 700;
	opacity: 0.85;
}
.footnote {
	margin-top: 28px;
	font-size: 13.5px;
	opacity: 0.75;
}
/* signing up, recorded: the card is nearly square, so it gets the narrower column */
.signup-row {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: 64px;
	align-items: center;
	margin-top: 90px;
}
.shot.signup-shot {
	aspect-ratio: 1000 / 1078;
	max-width: 500px;
}
.signup-copy h3 {
	margin-bottom: 14px;
	text-wrap: balance;
	font-size: clamp(30px, 3.4vw, 46px);
	font-weight: 900;
	letter-spacing: -1px;
	line-height: 1.05;
}
.signup-copy p {
	max-width: 520px;
	font-size: 19px;
	font-weight: 500;
	opacity: 0.9;
}
@media (max-width: 960px) {
	.stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.stats li:nth-child(3) {
		padding-left: 0;
		border-left: 0;
	}
	.stats li:nth-child(n + 3) {
		margin-top: 26px;
		border-top: 2px solid rgba(42, 28, 20, 0.2);
	}
	.signup-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
		margin-top: 60px;
	}
	.shot.signup-shot {
		width: 100%;
		margin-inline: auto;
	}
}

/* ---------- faq */
.center {
	text-align: center;
}
.faq h2 {
	margin-bottom: 36px;
}
.faq details {
	margin-bottom: 12px;
	border-radius: 16px;
	background: var(--cream-2);
	transition: background 0.15s ease;
}
.faq details[open] {
	background: #f1dfc7;
}
.faq summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 20px 24px;
	cursor: pointer;
	list-style: none;
	font-weight: 800;
	font-size: 19px;
}
.faq summary::-webkit-details-marker {
	display: none;
}
.faq summary::after {
	content: "";
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background:
		linear-gradient(var(--cream), var(--cream)) center / 14px 2.5px no-repeat,
		linear-gradient(var(--cream), var(--cream)) center / 2.5px 14px no-repeat,
		var(--ink);
	transition: transform 0.2s ease;
}
.faq details[open] summary::after {
	transform: rotate(45deg);
}
.faq details p {
	padding: 0 24px 22px;
	color: var(--ink-2);
}
/* the Help Centre's steps */
.help-page details ol {
	margin: 0;
	padding: 0 24px 18px 48px;
	display: grid;
	gap: 6px;
}
.help-page details ol + p {
	padding-top: 0;
}

/* ---------- cta */
.cta {
	position: relative;
	padding: 120px 0 0;
	overflow: hidden;
	background:
		radial-gradient(60% 70% at 50% 100%, rgba(242, 166, 90, 0.32), transparent 70%),
		var(--cocoa-1);
	text-align: center;
}
.cta-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
}
.cta h2 {
	text-transform: uppercase;
	font-size: clamp(42px, 6vw, 80px);
	margin-bottom: 14px;
	text-wrap: balance;
}
.cta p {
	margin-bottom: 30px;
	color: var(--on-dark-2);
	font-size: 20px;
	text-wrap: balance;
}
.pack {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	margin-top: 60px;
}
.pack svg {
	width: 150px;
	margin: 0 -14px;
	filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.35));
	animation: bob 3.4s ease-in-out infinite;
}
.pack svg:nth-child(2) {
	animation-delay: -0.8s;
}
.pack svg:nth-child(3) {
	animation-delay: -1.6s;
}
.pack svg:nth-child(4) {
	animation-delay: -2.4s;
}
.pack svg.big {
	position: relative;
	z-index: 1;
	width: 200px;
}
.pack svg.sleepy {
	width: 210px;
	margin-left: 10px;
	animation: breathe 4s ease-in-out infinite;
	transform-origin: 50% 100%;
}
@keyframes breathe {
	50% {
		transform: scaleY(1.04);
	}
}

/* ---------- footer */
.foot {
	padding: 70px 0 0;
	background: var(--cocoa-0);
	color: var(--on-dark-2);
	overflow: hidden;
}
.foot-grid {
	display: grid;
	grid-template-columns: 1.6fr repeat(4, 1fr);
	gap: 36px;
}
.foot-brand p {
	max-width: 320px;
	margin-top: 14px;
}
.foot nav {
	display: grid;
	align-content: start;
	gap: 10px;
}
.foot h3 {
	margin-bottom: 6px;
	color: var(--apricot);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.foot nav a {
	color: var(--on-dark);
	text-decoration: none;
	opacity: 0.8;
}
.foot nav a:hover {
	opacity: 1;
	color: var(--apricot);
}
.foot-base {
	margin-top: 56px;
	padding-bottom: 24px;
	border-top: 1px solid rgba(251, 243, 232, 0.1);
}
.wordmark {
	margin: 10px 0 -0.2em;
	color: var(--cocoa-2);
	font-weight: 900;
	font-size: clamp(80px, 19vw, 260px);
	line-height: 1;
	letter-spacing: -0.04em;
	text-align: center;
	user-select: none;
}
.foot-base p {
	position: relative;
	text-align: center;
	font-size: 14px;
}
.foot-base p a {
	color: var(--link);
	font-weight: 600;
}
.foot-base .foot-small {
	margin-top: 6px;
	font-size: 12px;
	opacity: 0.7;
	text-wrap: pretty;
}

/* ---------- inner pages */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.page-hero {
	position: relative;
	padding: 140px 0 70px;
	overflow: hidden;
	background:
		radial-gradient(50% 70% at 85% 80%, rgba(242, 166, 90, 0.26), transparent 70%),
		linear-gradient(180deg, #1a100b, #2b1911);
}
.page-hero-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 40px;
	align-items: end;
}
.page-hero h1 {
	font-size: clamp(40px, 5.6vw, 72px);
	text-transform: none;
	letter-spacing: -1.5px;
	line-height: 1;
}
.page-hero .lede {
	margin-bottom: 0;
}
.page-hero .lede a {
	color: var(--apricot);
}
.page-hero .lede + .cta-row {
	margin-top: 30px;
}
.page-hero-pug {
	width: 220px;
	margin-bottom: -76px;
	filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.4));
	animation: bob 3.4s ease-in-out infinite;
}
.faq-more-top {
	margin: -20px 0 30px;
	color: var(--ink-2);
}
.faq-more-top a,
.faq-page a,
.feedback-aside a {
	color: var(--link);
	font-weight: 700;
}

/* faq page */
.faq-search {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 520px;
	margin-top: 30px;
	padding: 0 18px;
	border-radius: 999px;
	background: rgba(251, 243, 232, 0.1);
	box-shadow: inset 0 0 0 2px rgba(251, 243, 232, 0.18);
}
.faq-search:focus-within {
	box-shadow: inset 0 0 0 2px var(--apricot);
}
.faq-search svg {
	flex: none;
	width: 22px;
	height: 22px;
	fill: none;
	stroke: var(--on-dark-2);
	stroke-width: 2;
	stroke-linecap: round;
}
.faq-search input {
	flex: 1;
	min-width: 0;
	height: 56px;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--on-dark);
	font: inherit;
	font-size: 18px;
}
.faq-search input::placeholder {
	color: var(--on-dark-2);
}
.faq-layout {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 56px;
	align-items: start;
}
.faq-layout > *,
.feedback-layout > * {
	min-width: 0;
}
.faq-toc {
	position: sticky;
	top: 30px;
	display: grid;
	gap: 4px;
}
.faq-toc a {
	padding: 9px 14px;
	border-radius: 10px;
	color: var(--ink-2);
	font-weight: 700;
	text-decoration: none;
}
.faq-toc a:hover {
	background: var(--cream-2);
	color: var(--ink);
}
.faq-group {
	scroll-margin-top: 30px;
}
.faq-group + .faq-group {
	margin-top: 48px;
}
.faq-group h2 {
	margin-bottom: 18px;
	font-size: 30px;
	font-weight: 900;
	letter-spacing: -0.5px;
}
.faq-page details code {
	padding: 1px 6px;
	border-radius: 6px;
	background: rgba(42, 28, 20, 0.08);
	font-size: 0.92em;
}
.faq-empty {
	padding: 20px 24px;
	border-radius: 16px;
	background: var(--cream-2);
	color: var(--ink-2);
}
.faq-ask {
	display: flex;
	align-items: center;
	gap: 26px;
	margin-top: 56px;
	padding: 28px 32px;
	border-radius: 22px;
	background: var(--cocoa-2);
	color: var(--on-dark);
}
.faq-ask svg {
	flex: none;
	width: 110px;
}
.faq-ask h3 {
	font-size: 24px;
	font-weight: 900;
}
.faq-ask p {
	margin: 6px 0 16px;
	color: var(--on-dark-2);
}

/* suggestions page */
.feedback-layout {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 56px;
	align-items: start;
}
.feedback-form,
.feedback-sent {
	padding: 36px;
	border-radius: 22px;
	background: #fffaf2;
	box-shadow: 0 30px 60px -24px rgba(42, 28, 20, 0.3), 0 0 0 1px rgba(42, 28, 20, 0.07);
}
.kinds {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 24px;
	padding: 0;
	border: 0;
}
.kinds legend {
	margin-bottom: 12px;
	padding: 0;
	font-weight: 800;
}
.kinds label {
	cursor: pointer;
}
.kinds input {
	position: absolute;
	opacity: 0;
}
.kinds span {
	display: inline-block;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--cream-2);
	font-weight: 700;
	transition: background 0.15s ease, box-shadow 0.15s ease;
}
.kinds input:checked + span {
	background: var(--ink);
	color: var(--cream);
}
.kinds input:focus-visible + span {
	outline: 3px solid var(--apricot);
	outline-offset: 2px;
}
.feedback-form .field {
	display: grid;
	gap: 8px;
	margin-bottom: 20px;
	font-weight: 800;
}
.feedback-form .field em {
	color: var(--ink-2);
	font-style: normal;
	font-weight: 600;
}
.feedback-form input:not([type="radio"]):not([type="checkbox"]),
.feedback-form textarea {
	width: 100%;
	padding: 14px 16px;
	border: 0;
	border-radius: 12px;
	background: var(--cream);
	box-shadow: inset 0 0 0 2px rgba(42, 28, 20, 0.12);
	color: var(--ink);
	font: inherit;
	font-weight: 500;
	resize: vertical;
}
.feedback-form input:focus,
.feedback-form textarea:focus {
	outline: 0;
	box-shadow: inset 0 0 0 2px var(--apricot);
}
.form-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	margin-top: 6px;
}
.form-foot .button[disabled] {
	opacity: 0.6;
	cursor: progress;
}
.form-status {
	color: var(--ink-2);
	font-weight: 700;
}
.form-status.error {
	color: #c23a52;
}
.form-privacy {
	margin-top: 22px;
	color: var(--ink-2);
	font-size: 14px;
}
.feedback-sent {
	display: grid;
	justify-items: center;
	gap: 14px;
	text-align: center;
}
.feedback-sent svg {
	width: 150px;
	animation: bob 3.4s ease-in-out infinite;
}
.feedback-sent h2 {
	font-size: 34px;
	font-weight: 900;
}
.feedback-sent p {
	max-width: 440px;
	color: var(--ink-2);
}
.feedback-aside h3 {
	margin: 0 0 10px;
	font-size: 18px;
	font-weight: 900;
}
.feedback-aside ul {
	margin: 0 0 28px;
	padding-left: 20px;
	color: var(--ink-2);
}
.feedback-aside li + li {
	margin-top: 6px;
}

/* developers page */
.dev-hero-cta {
	margin-top: 30px;
}
.dev-h2 {
	max-width: 820px;
	margin-bottom: 16px;
	font-size: clamp(34px, 4.6vw, 58px);
	font-weight: 900;
	letter-spacing: -1px;
}
.dev-lede {
	max-width: 720px;
	margin-bottom: 40px;
	color: var(--ink-2);
	font-size: 19px;
}
.code-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
}
.code {
	display: grid;
	grid-template-rows: auto 1fr auto;
	margin: 0;
	border-radius: 18px;
	overflow: hidden;
	background: #1c1f24;
	color: #d4d8de;
	box-shadow: 0 30px 60px -24px rgba(42, 28, 20, 0.45);
}
.code figcaption {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 18px;
	background: #15171b;
	font-weight: 800;
	font-size: 14px;
}
.code figcaption em {
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(242, 166, 90, 0.16);
	color: var(--apricot);
	font-style: normal;
	font-size: 12px;
}
.code pre {
	margin: 0;
	padding: 18px;
	overflow-x: auto;
	font: 500 13.5px/1.6 ui-monospace, "Cascadia Code", Consolas, monospace;
}
.code mark {
	display: block;
	margin: 0 -18px;
	padding: 0 18px;
	background: rgba(242, 166, 90, 0.16);
	box-shadow: inset 3px 0 0 var(--apricot);
	color: inherit;
}
.code .k {
	color: #c792ea;
}
.code .s {
	color: #a5d6a7;
}
.code .f {
	color: #82aaff;
}
.code .d {
	color: #f2a65a;
}
.code-note {
	padding: 14px 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	color: #aeb4bd;
	font-size: 14.5px;
}
.code-note b {
	color: #fff;
}
.dev-tested {
	margin-top: 22px;
	color: var(--ink-2);
	font-size: 15px;
}
.steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
}
.steps li {
	padding: 28px;
	border-radius: 20px;
	background: #fffaf2;
	box-shadow: 0 0 0 1px rgba(42, 28, 20, 0.07);
}
.step-n {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	margin-bottom: 16px;
	border-radius: 50%;
	background: var(--ink);
	color: var(--apricot);
	font-weight: 900;
	font-size: 19px;
}
.steps h3,
.build-grid h3 {
	margin-bottom: 8px;
	font-size: 21px;
	font-weight: 900;
}
.steps p,
.build-grid p {
	color: var(--ink-2);
}
.build-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 40px;
}
.build-grid article {
	padding: 26px;
	border-radius: 20px;
	background: var(--cream-2);
}
/* (on the darker band, the lighter cream, so the cards still show) */
.alt .build-grid article {
	background: var(--cream);
}
.build-grid code,
.api-facts code,
.steps code {
	padding: 1px 6px;
	border-radius: 6px;
	background: rgba(42, 28, 20, 0.08);
	font-size: 0.9em;
}
.api-facts {
	margin-top: 40px;
	padding: 32px;
	border-radius: 22px;
	background: #fffaf2;
	box-shadow: 0 0 0 1px rgba(42, 28, 20, 0.07);
}
.api-facts h3 {
	margin-bottom: 14px;
	font-size: 22px;
	font-weight: 900;
}
.api-facts dl {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 10px 22px;
	margin: 0 0 30px;
}
.api-facts dt {
	font-weight: 800;
}
.api-facts dd {
	margin: 0;
	color: var(--ink-2);
	overflow-wrap: anywhere;
}
.api-facts ul {
	display: grid;
	gap: 10px;
	margin: 0;
	padding-left: 20px;
	color: var(--ink-2);
}
.api-facts li b {
	color: var(--ink);
}
/* what a move brings and leaves (the Moving from Discord page) */
.carry {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin-top: 40px;
}
.carry article {
	padding: 28px;
	border-radius: 20px;
	background: #fffaf2;
	box-shadow: 0 0 0 1px rgba(42, 28, 20, 0.07);
}
.carry h3 {
	margin-bottom: 14px;
	font-size: 21px;
	font-weight: 900;
}
.carry ul {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--ink-2);
}
.carry li {
	position: relative;
	padding-left: 32px;
}
.carry li::before {
	content: "";
	position: absolute;
	top: 1px;
	left: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: center / 14px no-repeat;
}
.carry-yes li::before {
	background-color: var(--ink);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2a65a' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.carry-no li::before {
	background-color: rgba(42, 28, 20, 0.08);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b5a4e' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E");
}
.carry a {
	color: var(--link);
	font-weight: 700;
}

/* ---------- scroll reveal (where supported) */
@supports (animation-timeline: view()) {
	.reveal {
		animation: rise linear both;
		animation-timeline: view();
		animation-range: entry 0% cover 28%;
	}
}
@keyframes rise {
	from {
		opacity: 0;
		transform: translateY(48px);
	}
}

/* ---------- smaller screens */
/* between the tablet layout and a window wide enough for them to sit in the margin, the pugs beside pictures peek
   over the picture's top (as on tablets), and the pledge's pug stays inside the window */
@media (min-width: 961px) and (max-width: 1340px) {
	.side-pug,
	.side-pug.cool,
	.split.flip .side-pug,
	.split.flip .side-pug.cool {
		z-index: 0;
		width: 120px;
		left: auto;
		right: 24px;
		top: -76px;
		bottom: auto;
	}
}
@media (max-width: 1340px) {
	.pledge-pug {
		right: -8px;
	}
	.safety .pledge li:last-child {
		padding-right: 140px;
	}
}

@media (max-width: 960px) {
	.nav {
		display: none;
	}
	.top-row {
		gap: 12px;
	}
	.top .button {
		margin-left: auto;
	}
	.menu-button:not([hidden]) {
		display: inline-grid;
	}
	/* its place is kept until site.js shows it, so the Download button beside it doesn't jump left (past the
	   [hidden] rule at the top, which is !important) */
	.menu-button[hidden] {
		display: inline-grid !important;
		visibility: hidden;
	}
	.top.menu-open .nav {
		position: absolute;
		top: calc(100% - 6px);
		right: 12px;
		left: 12px;
		display: flex;
		flex-direction: column;
		gap: 2px;
		margin: 0;
		padding: 8px;
		border-radius: 20px;
		background: #1d130d;
		box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(251, 243, 232, 0.08);
		animation: menu-in 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
	}
	.top.menu-open .nav a {
		padding: 14px 16px;
		border-radius: 14px;
		font-size: 18px;
		opacity: 1;
		transition: background-color 0.3s ease, color 0.3s ease;
	}
	.top.menu-open .nav a:hover {
		background-color: rgba(251, 243, 232, 0.07);
	}
	.hero {
		padding-top: 110px;
	}
	.hero-grid,
	.split,
	.split.flip {
		grid-template-columns: 1fr;
		gap: 48px;
	}
	.hero-copy {
		padding-bottom: 0;
	}
	.scene {
		max-width: 560px;
		margin-inline: auto;
	}
	.split.flip .visual {
		order: 0;
	}
	.band {
		padding: 80px 0;
	}
	/* the closing pack fits a tablet's width */
	.pack svg {
		width: 120px;
		margin: 0 -12px;
	}
	.pack svg.big {
		width: 160px;
	}
	.pack svg.sleepy {
		width: 170px;
	}
	.side-pug,
	.side-pug.cool,
	.split.flip .side-pug,
	.split.flip .side-pug.cool {
		z-index: 0;
		width: 104px;
		left: auto;
		right: 18px;
		top: -64px;
		bottom: auto;
	}
	.rights,
	.promise .split,
	.faq-layout,
	.feedback-layout,
	.page-hero-row,
	.code-pair,
	.steps,
	.build-grid,
	.carry {
		grid-template-columns: minmax(0, 1fr);
	}
	.api-facts {
		padding: 22px;
	}
	.api-facts dl {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
	}
	.api-facts dd {
		margin-bottom: 10px;
	}
	.faq-toc {
		position: static;
		display: flex;
		flex-wrap: wrap;
	}
	.page-hero-pug {
		display: none;
	}
	.feedback-form,
	.feedback-sent {
		padding: 24px 20px;
	}
	.faq-ask {
		flex-direction: column;
		text-align: center;
		padding: 26px 22px;
	}
	.faq-ask .button {
		white-space: normal;
	}
	.pledge {
		padding: 26px 22px 22px;
		transform: none;
	}
	.safety .split {
		grid-template-columns: minmax(0, 1fr);
	}
	.safety .pledge {
		transform: none;
	}
	.safety .pledge li:last-child {
		padding-right: 96px;
	}
	.pledge-pug {
		width: 100px;
		right: 6px;
		bottom: -56px;
	}
	/* the signature's words stop short of the pug peeking over the card's corner */
	.pledge-sign {
		padding-right: 96px;
	}
	.speed {
		padding: 80px 0;
	}
	.bubble.grr {
		right: 4%;
	}
	.foot-grid {
		grid-template-columns: 1fr 1fr;
	}
	.foot-brand {
		grid-column: 1 / -1;
	}
}
@media (max-width: 620px) {
	body {
		font-size: 17px;
	}
	.deco.s2,
	.deco.p1,
	.deco.p2,
	.deco.b1 {
		display: none;
	}
	.beliefs-close {
		flex-direction: column;
		text-align: center;
	}
	.right {
		padding: 26px 22px 22px;
	}
	.right-art {
		width: calc(100% + 44px);
		height: 150px;
		margin: -26px -22px 18px;
	}
	.peek {
		right: 20px;
		width: 120px;
		top: -78px;
	}
	.cta-row .button {
		width: 100%;
	}
	.pack svg {
		width: 92px;
		margin: 0 -10px;
	}
	.pack svg.big {
		width: 120px;
	}
	.pack svg.sleepy {
		display: none;
	}
	.id-card {
		width: 230px;
		transform: rotate(-8deg) translate(30px, -40px);
	}
	.stamp {
		font-size: 32px;
	}
	.grumpy {
		width: 180px;
	}
	.bubble {
		font-size: 13px;
		padding: 8px 12px;
	}
	.b-snack {
		right: 0;
	}
}
/* the smallest phones (320 to 400 wide): big buttons fit their text, the stats fit two to a row, the pack fits */
@media (max-width: 620px) {
	.stats li {
		padding: 20px 16px 0;
	}
	.stats b {
		font-size: clamp(30px, 9.6vw, 40px);
		letter-spacing: -1px;
	}
}
/* the narrowest phones: the header keeps the logo, the Download button and the menu, without the wordmark */
@media (max-width: 359px) {
	.top .brand span {
		display: none;
	}
	.top .button {
		flex-shrink: 0;
	}
}
@media (max-width: 400px) {
	.button.big {
		padding: 0 18px;
		font-size: 17px;
		white-space: normal;
		text-align: center;
	}
	.pack svg {
		width: 76px;
		margin: 0 -8px;
	}
	.pack svg.big {
		width: 100px;
	}
}
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
	html {
		scroll-behavior: auto;
	}
}

/* ---------- long reads: safety, rules, terms, privacy */
.band.legal-band {
	padding: 72px 0 100px;
}
/* a column narrow enough to read, lined up with the page's heading (the left edge of .wrap) rather than centred under
   it; What's new uses it too */
.legal,
.changes-wrap {
	max-width: 780px;
	margin-left: max(20px, (100% - 1180px) / 2);
}
.legal-meta {
	margin-bottom: 28px;
	color: var(--ink-2);
	font-size: 14px;
}
/* a legal page's coming change (site/legal/notices.json), and a previous version's note */
.legal-changes,
.legal-previous {
	margin-bottom: 28px;
	padding: 16px 20px;
	border: 1px solid rgb(242 166 90 / 0.45);
	border-radius: 12px;
	background: rgb(242 166 90 / 0.1);
	color: var(--ink);
	font-size: 15px;
}
.legal .legal-changes h2 {
	margin: 0 0 8px;
	font-size: 18px;
}
.legal-changes ul {
	margin: 8px 0 0;
}
.legal h2 {
	margin: 44px 0 14px;
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -0.4px;
	line-height: 1.15;
	text-transform: none;
	color: var(--ink);
}
.legal h2:first-of-type {
	margin-top: 0;
}
.legal h3 {
	margin: 26px 0 8px;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.25;
	color: var(--ink);
}
.legal p,
.legal li,
.legal dd {
	color: var(--ink-2);
	font-size: 17px;
	line-height: 1.65;
	text-wrap: pretty;
}
.legal p + p {
	margin-top: 12px;
}
.legal ul,
.legal ol {
	margin: 10px 0 0;
	padding-left: 22px;
	display: grid;
	gap: 6px;
}
.legal b,
.legal strong {
	color: var(--ink);
}
.legal a {
	color: var(--link);
}
/* (a button among the words keeps a button's ink) */
.legal a.button {
	color: var(--ink);
	text-decoration: none;
}
.legal dl {
	margin: 10px 0 0;
}
.legal dt {
	margin-top: 14px;
	font-weight: 800;
	color: var(--ink);
}
.legal dd {
	margin: 2px 0 0;
}
.legal-callout {
	margin-top: 18px;
	padding: 18px 20px;
	border-radius: 16px;
	background: var(--cream-2);
	border: 1px solid rgba(42, 28, 20, 0.08);
}
.legal-callout p {
	margin: 0;
}
.legal-toc {
	margin: 0 0 36px;
	padding: 18px 22px;
	border-radius: 16px;
	background: var(--cream-2);
}
.legal-toc h2 {
	margin: 0 0 8px;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.legal-toc ol {
	margin: 0;
}
.legal-toc li {
	font-size: 15px;
}
.legal table {
	width: 100%;
	margin-top: 12px;
	border-collapse: collapse;
	font-size: 15px;
}
.legal th,
.legal td {
	padding: 10px 12px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid rgba(42, 28, 20, 0.12);
	color: var(--ink-2);
}
.legal th {
	color: var(--ink);
	font-weight: 800;
}
.legal-table-wrap {
	overflow-x: auto;
}
.helplines {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
	margin-top: 14px;
}
.helplines div {
	padding: 14px 16px;
	border-radius: 14px;
	background: var(--cream-2);
}
.helplines b {
	display: block;
	font-size: 15px;
}
.helplines span {
	display: block;
	margin-top: 2px;
	font-size: 22px;
	font-weight: 900;
	color: var(--ink);
}
.helplines small {
	display: block;
	color: var(--ink-2);
	font-size: 13px;
}
@media (max-width: 640px) {
	.legal h2 {
		font-size: 24px;
	}
	.legal p,
	.legal li,
	.legal dd {
		font-size: 16px;
	}
}
.legal .legal-callout + h2 {
	margin-top: 36px;
}
.legal ul + p,
.legal ol + p,
.legal dl + p,
.legal .legal-table-wrap + p {
	margin-top: 14px;
}
/* the privacy table reads as cards on phones */
@media (max-width: 640px) {
	.legal .privacy-table,
	.legal .privacy-table tbody,
	.legal .privacy-table tr,
	.legal .privacy-table td {
		display: block;
	}
	.legal .privacy-table thead {
		display: none;
	}
	.legal .privacy-table tr {
		padding: 14px 0;
		border-bottom: 1px solid rgba(42, 28, 20, 0.12);
	}
	.legal .privacy-table td {
		padding: 2px 0;
		border: 0;
	}
	.legal .privacy-table td:first-child {
		margin-bottom: 4px;
		font-weight: 800;
		color: var(--ink);
	}
	.legal .privacy-table td:nth-child(2)::before {
		content: "Why: ";
		font-weight: 800;
		color: var(--ink);
	}
	.legal .privacy-table td:nth-child(3)::before {
		content: "Kept: ";
		font-weight: 800;
		color: var(--ink);
	}
}

/* ---------- developer docs */
.docs code {
	padding: 1px 6px;
	border-radius: 6px;
	background: var(--cream-2);
	color: var(--ink);
	font-size: 0.88em;
	overflow-wrap: anywhere;
}
.docs .docs-code {
	margin: 12px 0 0;
	padding: 14px 16px;
	border-radius: 12px;
	background: var(--cocoa-1);
	overflow-x: auto;
}
.docs .docs-code code {
	padding: 0;
	background: none;
	color: var(--on-dark);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
/* bot libraries (site/developers/libraries, scripts/site-libraries.mjs) */
.docs .code {
	margin-top: 14px;
}
/* (not the docs' inline code pill on each line of a code block) */
.docs .code code {
	padding: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font-size: inherit;
	overflow-wrap: normal;
}
.lib-results th span {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: var(--ink-2);
}
.lib-results td,
.lib-steps td {
	white-space: nowrap;
}
.lib-tally span {
	display: block;
	font-size: 13px;
	color: var(--ink-2);
}
.lib-steps th[scope="row"] {
	font-weight: 600;
	color: var(--ink-2);
}
.lib-steps td {
	width: 1%;
	text-align: center;
}
.lib-group th {
	padding-top: 22px;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.lib-ok {
	color: #23854f;
	font-weight: 800;
}
.lib-fail {
	color: #c4362f;
	font-weight: 800;
}
.lib-skip {
	color: var(--ink-2);
}
.lib-key {
	font-size: 14px;
	color: var(--ink-2);
}
.api-table td {
	padding: 7px 12px;
}
.api-table .api-methods {
	width: 1%;
	white-space: nowrap;
}
.api-m {
	display: inline-block;
	min-width: 52px;
	padding: 1px 6px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 800;
	text-align: center;
	color: #fff;
}
.api-m.get {
	background: #3b7f5a;
}
.api-m.post {
	background: #b4561f;
}
.api-m.put {
	background: #5b4a8f;
}
.api-m.patch {
	background: #3b5a8f;
}
.api-m.delete {
	background: #a33a4a;
}
.api-ours {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--apricot);
	color: var(--ink);
	font-size: 12px;
	font-weight: 800;
	vertical-align: middle;
}
@media (max-width: 640px) {
	.api-table tr {
		display: block;
		padding: 8px 0;
	}
	.api-table td {
		display: block;
		padding: 2px 0;
	}
	.api-table td:nth-child(2)::before,
	.api-table td:nth-child(3)::before {
		content: none;
	}
	.api-table .api-methods {
		width: auto;
		white-space: normal;
	}
}
.intents-table td:nth-child(2) {
	white-space: nowrap;
}
/* endpoint paths wrap only after a slash (api-reference.mjs puts a <wbr> there) */
.api-table code {
	overflow-wrap: break-word;
}
/* the intents table on phones: each intent with its bit, and what it's for underneath */
@media (max-width: 640px) {
	.legal .intents-table,
	.legal .intents-table tbody {
		display: block;
	}
	.legal .intents-table thead {
		display: none;
	}
	.legal .intents-table tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 2px 12px;
		padding: 12px 0;
		border-bottom: 1px solid rgba(42, 28, 20, 0.12);
	}
	.legal .intents-table td {
		padding: 0;
		border: 0;
	}
	.legal .intents-table td:first-child {
		font-weight: 800;
		color: var(--ink);
	}
	.legal .intents-table td:nth-child(3) {
		grid-column: 1 / -1;
	}
}

/* ---------- what the law asks where you are */
.regions-head {
	max-width: 760px;
	margin: 0 auto 32px;
	text-align: center;
}
.regions-head h2 {
	text-wrap: balance;
}
.regions-head .regions-stance {
	margin-top: 16px;
	color: var(--ink);
	font-weight: 700;
}
/* each tab as wide as its name, wrapping onto another line at the width of the box below */
.region-tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	max-width: 1040px;
	margin: 0 auto;
}

.region-tabs button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 18px 10px 12px;
	border: 2px solid transparent;
	border-radius: 999px;
	background: var(--cream);
	color: var(--ink);
	font: inherit;
	font-size: 16px;
	font-weight: 800;
	cursor: pointer;
}
.region-tabs button:hover {
	border-color: rgba(42, 28, 20, 0.2);
}
.region-tabs button[aria-selected="true"] {
	border-color: var(--ink);
	background: #fff;
}
.region-tabs button:focus-visible {
	outline: 3px solid var(--apricot);
	outline-offset: 2px;
}
/* every tab's flag is drawn 3:2 (the 2:1 ones redrawn), so they're all one size side by side; the big flag beside the
   text keeps its country's real shape */
.region-tabs .flag {
	width: 34px;
	height: auto;
	aspect-ratio: 3 / 2;
	border-radius: 3px;
	box-shadow: 0 0 0 1px rgba(42, 28, 20, 0.15);
}
/* phones: a little smaller, so more fit on each line */
@media (max-width: 760px) {
	.region-tabs {
		gap: 8px;
	}
	.region-tabs button {
		gap: 8px;
		padding: 8px 14px 8px 10px;
		font-size: 14px;
	}
	.region-tabs .flag {
		width: 26px;
	}
}
.region-found {
	margin-top: 14px;
	text-align: center;
	color: var(--ink-2);
	font-size: 15px;
}
.region-panel {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: 48px;
	/* the flag and pug at the top, so they stay where they are whichever country's text is beside them */
	align-items: start;
	max-width: 1040px;
	margin: 28px auto 0;
	padding: 44px;
	border-radius: 28px;
	background: var(--cream);
	box-shadow: 0 24px 60px rgba(42, 28, 20, 0.1);
}
.region-panel[hidden] {
	display: none;
}
/* switching tabs: the box grows or shrinks to the new content (site.js), and the content fades in */
.region-panel.resizing {
	overflow: hidden;
	transition: height 0.38s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.region-panel.entering > * {
	animation: region-in 0.32s ease-out both;
}
@keyframes region-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
}
@media (prefers-reduced-motion: reduce) {
	.region-panel.resizing {
		transition: none;
	}
	.region-panel.entering > * {
		animation: none;
	}
}
.region-art {
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
.region-art .flag {
	width: 64%;
	max-width: 240px;
	height: auto;
	border-radius: 6px;
	box-shadow: 0 18px 40px rgba(42, 28, 20, 0.25);
	transform: rotate(-5deg) translateY(-30px);
}
.region-art .region-pug {
	width: 44%;
	max-width: 160px;
	margin-left: -10%;
	filter: drop-shadow(0 12px 18px rgba(42, 28, 20, 0.25));
}
.region-copy h3 {
	margin-bottom: 14px;
	font-size: clamp(26px, 3vw, 34px);
	font-weight: 900;
	letter-spacing: -0.5px;
	text-wrap: balance;
}
.region-copy p,
.region-copy ul {
	color: var(--ink-2);
	font-size: 18px;
}
.region-copy p + p,
.region-copy p + ul,
.region-copy ul + p {
	margin-top: 14px;
}
.region-copy ul {
	display: grid;
	gap: 6px;
	padding-left: 22px;
	font-size: 17px;
}
/* the reasons a place is closed, when there are several */
.region-copy ol.region-reasons {
	display: grid;
	gap: 10px;
	margin-top: 10px;
	padding-left: 24px;
	color: var(--ink-2);
	font-size: 17px;
}
.region-copy ol.region-reasons b {
	display: block;
	color: var(--ink);
}
.region-copy ol.region-reasons + p {
	margin-top: 14px;
}
.region-copy .region-view {
	padding: 14px 18px;
	border-left: 5px solid var(--tongue);
	border-radius: 0 14px 14px 0;
	background: #fff;
	color: var(--ink);
	font-weight: 700;
}
.region-copy a {
	color: var(--link);
	font-weight: 800;
}
@media (max-width: 820px) {
	.region-panel {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		padding: 28px 20px;
	}
	.region-art .flag {
		width: 50%;
	}
	.region-art .region-pug {
		width: 32%;
	}
}
.chips a {
	color: var(--link);
}

/* downloads page */
.dl-yours {
	margin-top: 18px;
	color: var(--on-dark-2);
	transition: opacity 0.3s ease;
}
/* its line is kept until site.js fills it in, and it fades in there, so nothing below it moves */
.dl-yours[hidden] {
	display: block !important;
	visibility: hidden;
	opacity: 0;
}
.dl-yours a {
	color: var(--apricot);
	font-weight: 700;
}
.dl-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
	gap: 22px;
}
.dl-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 28px;
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 1px 0 rgba(42, 28, 20, 0.06), 0 12px 30px rgba(42, 28, 20, 0.08);
	/* clear of the sticky header when a link jumps to it */
	scroll-margin-top: 100px;
}
.dl-card.yours,
.dl-card:target {
	box-shadow: inset 0 0 0 3px var(--apricot), 0 12px 30px rgba(42, 28, 20, 0.12);
}
/* come from a platform's tile on the home page: only that card is marked */
.dl-grid:has(.dl-card:target) .dl-card.yours:not(:target) {
	box-shadow: 0 1px 0 rgba(42, 28, 20, 0.06), 0 12px 30px rgba(42, 28, 20, 0.08);
}
.dl-card h2 {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: 28px;
}
.dl-icon {
	flex: none;
	width: 30px;
	height: 30px;
	color: #b4612a;
}
.dl-credit {
	margin-top: 28px;
	font-size: 12px;
}
.dl-card p {
	margin: 0;
	font-size: 16px;
	color: var(--ink-2);
}
.dl-card .button {
	margin: 12px 0 2px;
}
.dl-needs {
	font-weight: 700;
}
.dl-file {
	font-size: 13px !important;
	overflow-wrap: anywhere;
}
.dl-aside {
	padding-top: 10px;
	border-top: 1px solid rgba(42, 28, 20, 0.1);
	font-size: 14px !important;
}
.dl-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0 10px;
}
.dl-card code,
.dl-check code {
	padding: 1px 6px;
	border-radius: 6px;
	background: rgba(42, 28, 20, 0.08);
	font-size: 0.88em;
	overflow-wrap: anywhere;
}
.button.ghost-light {
	background: transparent;
	color: var(--ink);
	box-shadow: inset 0 0 0 2px rgba(42, 28, 20, 0.25);
}
.button.ghost-light:hover {
	background: rgba(42, 28, 20, 0.05);
	box-shadow: inset 0 0 0 2px rgba(42, 28, 20, 0.5);
}
.button.disabled {
	background: rgba(42, 28, 20, 0.08);
	color: var(--ink-2);
	cursor: default;
}
.button.disabled:hover {
	transform: none;
	box-shadow: none;
}
/* a download, or a note that it's on the way (scripts/site-downloads.mjs shows one or the other); their parts sit
   in the card's column as if they were its own */
.dl-ready,
.dl-soon {
	display: contents;
}
.dl-ready[hidden],
.dl-soon[hidden] {
	display: none;
}
.dl-extra {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 22px;
	padding: 20px 26px;
	border-radius: 22px;
	background: var(--cream-2);
	color: var(--ink-2);
	font-size: 16px;
	text-decoration: none;
	transition: background-color 0.3s;
}
.dl-extra:hover {
	background: #efdcc4;
}
.dl-extra b {
	color: var(--ink);
}
.dl-extra .dl-icon {
	flex: none;
}
.dl-extra em {
	flex: none;
	margin-left: auto;
	color: var(--ink);
	font-style: normal;
	font-weight: 800;
}
@media (max-width: 700px) {
	.dl-extra {
		flex-wrap: wrap;
	}
	.dl-extra em {
		margin-left: 0;
	}
}
.dl-check {
	max-width: 860px;
	margin-top: 64px;
}
.dl-check p {
	color: var(--ink-2);
}
.dl-hashes {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 8px 18px;
	font-size: 14px;
}
.dl-hashes dt {
	font-weight: 700;
}
.dl-hashes dd {
	margin: 0;
}
@media (max-width: 700px) {
	.dl-hashes {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
	}
	.dl-hashes dd {
		margin-bottom: 10px;
	}
	.dl-card {
		padding: 22px 20px;
	}
}

/* contact page */
.feedback-form select {
	width: 100%;
	padding: 14px 16px;
	border: 0;
	border-radius: 12px;
	background: var(--cream);
	box-shadow: inset 0 0 0 2px rgba(42, 28, 20, 0.12);
	color: var(--ink);
	font: inherit;
	font-weight: 600;
}
.feedback-form select:focus {
	outline: 0;
	box-shadow: inset 0 0 0 2px var(--apricot);
}
/* a dropdown whose choices are longer than a phone is wide ("Intimate images of me shared without my consent"): the
   choice is shown in a box that wraps, and the real dropdown lies over it unseen, so a tap or click still opens the
   device's own list. site.js keeps the box's words in step */
.select-box {
	position: relative;
	display: block;
}
.feedback-form .select-box > select {
	position: absolute;
	inset: 0;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}
.select-shown {
	display: block;
	padding: 14px 46px 14px 16px;
	border-radius: 12px;
	background: var(--cream)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a1c14' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
		no-repeat right 16px center / 16px;
	box-shadow: inset 0 0 0 2px rgba(42, 28, 20, 0.12);
	color: var(--ink);
	font-weight: 600;
	line-height: 1.45;
	transition: box-shadow 0.15s ease;
}
.select-box:hover > .select-shown {
	box-shadow: inset 0 0 0 2px rgba(42, 28, 20, 0.25);
}
.select-box:focus-within > .select-shown {
	box-shadow: inset 0 0 0 2px var(--apricot);
}
.contact-form [hidden] {
	display: none !important;
}
.contact-hint {
	margin: -8px 0 20px;
	padding: 12px 16px;
	border-radius: 12px;
	background: var(--cream-2);
	color: var(--ink);
	font-size: 15px;
}
.contact-check {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 0 0 22px;
	font-weight: 600;
	cursor: pointer;
}
.contact-check input {
	width: 20px;
	height: 20px;
	margin-top: 3px;
	accent-color: #b4612a;
	flex: none;
}
.contact-aside p,
.contact-aside li {
	font-size: 15px;
}

/* a plain-language summary inside a legal page */
.plain-box {
	margin: 0 0 18px;
	padding: 16px 20px;
	border-radius: 16px;
	background: var(--cream-2);
	box-shadow: inset 4px 0 0 var(--apricot);
}
.plain-box p {
	margin: 0;
}
.contact-aside h3 {
	margin-top: 28px;
}
.contact-aside h3:first-child {
	margin-top: 0;
}

/* ---------- everything's included (index.html #included): illustrated cards, each with a little scene of pugs and
   the app, drawn inline from pugs.svg; the features page uses the same cards and scenes */
.included {
	background:
		radial-gradient(45% 55% at 80% 15%, rgba(242, 166, 90, 0.14), transparent 70%),
		radial-gradient(40% 50% at 10% 85%, rgba(240, 138, 154, 0.1), transparent 70%),
		var(--cocoa-1);
}
.included h2 {
	max-width: 900px;
	margin-bottom: 48px;
	font-size: clamp(34px, 4.6vw, 60px);
	font-weight: 900;
	letter-spacing: -1px;
	line-height: 1.05;
}
.included h2 span {
	color: var(--apricot);
}
.fx-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}
.fx {
	--tint: rgba(242, 166, 90, 0.24);
	padding: 0 26px 28px;
	border-radius: 22px;
	background: rgba(251, 243, 232, 0.04);
	box-shadow: inset 0 0 0 1px rgba(251, 243, 232, 0.09);
	overflow: hidden;
	transition:
		transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
		box-shadow 0.35s;
}
.fx:nth-child(3n + 2) {
	--tint: rgba(240, 138, 154, 0.22);
}
.fx:nth-child(3n + 3) {
	--tint: rgba(154, 168, 255, 0.22);
}
.fx:nth-child(4) {
	--tint: rgba(127, 209, 166, 0.2);
}
.fx:hover {
	transform: translateY(-4px);
	box-shadow:
		inset 0 0 0 1px rgba(242, 166, 90, 0.35),
		0 24px 48px rgba(0, 0, 0, 0.35);
}
.fx-art,
.perk-art,
.collect-art {
	display: block;
	width: calc(100% + 52px);
	height: auto;
	aspect-ratio: 360 / 150;
	margin: 0 -26px 22px;
	padding: 10px 6px 0;
	background:
		radial-gradient(75% 95% at 50% 100%, var(--tint, rgba(242, 166, 90, 0.24)), transparent 70%),
		rgba(251, 243, 232, 0.05);
	overflow: visible;
}
.fx h3 {
	margin-bottom: 8px;
	font-size: 22px;
	font-weight: 900;
	letter-spacing: -0.3px;
}
.fx p {
	color: var(--on-dark-2);
	font-size: 16.5px;
	line-height: 1.55;
}
.fx-more {
	margin-top: 40px;
	text-align: center;
}
@supports (animation-timeline: view()) {
	.fx:nth-child(3n + 2) {
		animation-range: entry 6% cover 32%;
	}
	.fx:nth-child(3n + 3) {
		animation-range: entry 12% cover 36%;
	}
}
@media (max-width: 960px) {
	.fx-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 620px) {
	.fx-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* a list of features, each with its line icon (the features page's sections) */
.fx-list {
	display: grid;
	gap: 22px;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}
.fx-list li {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr);
	column-gap: 16px;
	align-items: start;
}
.fx-icon {
	grid-row: span 2;
	width: 46px;
	height: 46px;
	padding: 11px;
	border-radius: 14px;
	background: rgba(242, 166, 90, 0.2);
	fill: none;
	stroke: #b4561f;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.dark .fx-icon {
	background: rgba(242, 166, 90, 0.13);
	stroke: var(--apricot);
}
.fx-list h3 {
	margin: 1px 0 3px;
	font-size: 18px;
	font-weight: 900;
}
.copy .fx-list p,
.fx-list p {
	margin: 0;
	color: var(--ink-2);
	font-size: 16px;
	line-height: 1.5;
}
.dark .copy .fx-list p,
.dark .fx-list p {
	color: var(--on-dark-2);
}
.fx-list p + p {
	margin-top: 0;
}
/* the features page's sections: the heading beside the picture, and the features in a grid across the width under them.
   Three to a row, or four when there are seven or more (from 1200px; below that the seventh sits in the middle of a
   row of its own), two on tablets (an odd one out centred), one on phones */
.fx-band .fx-list {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px 40px;
	margin-top: 64px;
}
.fx-band .fx-list li {
	align-content: start;
}
.fx-band .fx-list > li:nth-child(7):last-child {
	grid-column: 2;
}
@media (min-width: 1200px) {
	.fx-band .fx-list:has(> li:nth-child(7)) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: 32px;
	}
	.fx-band .fx-list > li:nth-child(7):last-child {
		grid-column: auto;
	}
}
/* tablets and phones: the picture first, then the heading right over its features, as close as it always was */
@media (max-width: 960px) {
	.fx-band .fx-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: 8px;
	}
	.fx-band .fx-list > li:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc(50% - 20px);
	}
}
@media (max-width: 620px) {
	.fx-band .fx-list {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}
	.fx-band .fx-list > li:last-child:nth-child(odd) {
		grid-column: auto;
		width: auto;
	}
}

/* ---------- a light sweeps across the main buttons on hover */
.button:not(.ghost) {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.button:not(.ghost)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%);
	transform: translateX(-120%);
	transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.button:not(.ghost):hover::after {
	transform: translateX(120%);
}

/* ---------- once you scroll, the header comes back as a slim frosted bar (site.js adds .stuck) */
.top.stuck {
	position: fixed;
	background: rgba(18, 11, 7, 0.72);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	backdrop-filter: blur(14px) saturate(1.4);
	box-shadow: 0 1px 0 rgba(251, 243, 232, 0.08);
	animation: header-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.top.stuck .top-row {
	height: 64px;
}
@keyframes menu-in {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
}
@keyframes header-in {
	from {
		transform: translateY(-100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.scene .pug,
	.scene .bubble,
	.scene .pill,
	.scene .glow {
		translate: none !important;
	}
	.fx,
	.top.stuck {
		animation: none;
		transition: none;
	}
}

/* ---------- Grumble for OBS (/obs/): a sketch of OBS with two friends from a call in it */
.obs-mock {
	margin: 0;
	padding: 14px;
	border-radius: 22px;
	background: var(--app-0);
	box-shadow: 0 30px 60px rgba(42, 28, 20, 0.25);
	color: var(--app-text);
	font-size: 13px;
}
.obs-preview {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	overflow: hidden;
	background:
		radial-gradient(circle at 70% 30%, rgba(242, 166, 90, 0.35), transparent 55%),
		linear-gradient(160deg, #2b3a55, #18202f 60%, #2a1c14);
}
.obs-live {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 2px 9px;
	border-radius: 6px;
	background: #e5484d;
	color: #fff;
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.5px;
}
.obs-cam {
	position: absolute;
	bottom: 12px;
	display: grid;
	place-items: center;
	width: 30%;
	aspect-ratio: 4 / 3;
	border-radius: 10px;
	background: var(--app-2);
	box-shadow: 0 0 0 2px var(--speaking);
}
.obs-cam.one {
	right: 12px;
}
.obs-cam.two {
	right: calc(30% + 22px);
	box-shadow: none;
}
.obs-cam svg {
	width: 58%;
	height: auto;
}
.obs-cam span {
	position: absolute;
	left: 6px;
	bottom: 5px;
	padding: 0 6px;
	border-radius: 5px;
	background: rgba(0, 0, 0, 0.55);
	font-size: 11px;
	font-weight: 700;
}
.obs-docks {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 10px;
}
.obs-dock {
	display: grid;
	align-content: start;
	gap: 6px;
	padding: 10px 12px;
	border-radius: 10px;
	background: var(--app-1);
}
.obs-dock b {
	color: var(--app-muted);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}
.obs-row {
	padding: 4px 8px;
	border-radius: 6px;
	background: var(--app-2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.obs-row.dim {
	color: var(--app-muted);
}
.obs-meter {
	display: grid;
	grid-template-columns: 38px 1fr;
	align-items: center;
	gap: 8px;
}
.obs-meter i {
	font-style: normal;
	color: var(--app-muted);
}
.obs-meter em {
	height: 6px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--speaking) 0 var(--level), var(--app-3) var(--level));
}
@media (max-width: 620px) {
	.obs-docks {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- features (/features/): the hero's pack, what's free that others charge for (three illustrated cards of
   rows, and the Shop's best), then a section for each part of the app */
.features-hero .eyebrow {
	margin-bottom: 18px;
}
.features-hero .hero-edge {
	background: var(--cocoa-2);
}
.included h2.dev-h2 {
	margin-bottom: 16px;
}
.perks-lede {
	max-width: 720px;
	margin: -28px 0 44px;
	color: var(--on-dark-2);
	font-size: 19px;
}
.perks {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	align-items: start;
}
.perk-group {
	--tint: rgba(242, 166, 90, 0.24);
	padding: 0 26px 12px;
	border-radius: 22px;
	background: rgba(251, 243, 232, 0.04);
	box-shadow: inset 0 0 0 1px rgba(251, 243, 232, 0.09);
	overflow: hidden;
}
.perk-group:nth-child(2) {
	--tint: rgba(240, 138, 154, 0.22);
}
.perk-group:nth-child(3) {
	--tint: rgba(154, 168, 255, 0.24);
}
.perk-group h3,
.collect h3 {
	margin: 0 0 4px;
	color: var(--apricot);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 2px;
	text-transform: uppercase;
}
.perk-group dl {
	margin: 0;
}
.perk {
	display: grid;
	gap: 2px;
	padding: 14px 0;
	border-top: 1px solid rgba(251, 243, 232, 0.08);
}
.perk:first-child {
	border-top: 0;
}
.perk dt {
	color: var(--on-dark);
	font-weight: 800;
}
.perk dd {
	margin: 0;
	color: var(--on-dark-2);
	font-size: 15.5px;
	line-height: 1.5;
}
.collect {
	margin-top: 20px;
	padding: 26px 26px 30px;
	border-radius: 22px;
	background: rgba(251, 243, 232, 0.04);
	box-shadow: inset 0 0 0 1px rgba(251, 243, 232, 0.09);
}
.collect h3 {
	margin: 0 0 18px;
}
.collect-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}
.collect-art {
	width: 100%;
	margin: 0 0 16px;
	border-radius: 16px;
}
.collect-item:nth-child(2) .collect-art {
	--tint: rgba(240, 138, 154, 0.22);
}
.collect-item:nth-child(3) .collect-art {
	--tint: rgba(154, 168, 255, 0.24);
}
.collect-item h4 {
	margin: 0 0 6px;
	font-size: 19px;
	font-weight: 900;
}
.collect-item p {
	color: var(--on-dark-2);
	font-size: 15.5px;
}
.perks-note {
	max-width: 860px;
	margin-top: 26px;
	color: var(--on-dark-2);
	font-size: 13px;
}

/* the servers section's sketch: a role list, AutoMod's rules and an event, with a pug announcing it all */
.mod-visual {
	position: relative;
	min-height: 440px;
}
.mod-card {
	position: absolute;
	display: grid;
	gap: 10px;
	padding: 18px 20px;
	border-radius: 18px;
	background: var(--app-1);
	color: var(--app-text);
	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
	font-size: 15px;
	animation: float 6s ease-in-out infinite;
}
.mod-card b {
	color: var(--app-muted);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 1.2px;
	text-transform: uppercase;
}
.mod-card span {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
}
.mod-roles {
	top: 0;
	left: 0;
	width: 50%;
}
.mod-roles i {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--c);
}
.mod-roles em {
	margin-left: auto;
	color: var(--app-muted);
	font-style: normal;
	font-weight: 600;
}
.mod-auto {
	top: 22%;
	right: 0;
	width: 52%;
	animation-delay: -2s;
}
.mod-auto span {
	justify-content: space-between;
}
.mod-auto .on {
	position: relative;
	flex: none;
	width: 36px;
	height: 20px;
	border-radius: 999px;
	background: var(--speaking);
}
.mod-auto .on::after {
	content: "";
	position: absolute;
	top: 3px;
	right: 3px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #fff;
}
.mod-event {
	top: 56%;
	left: 6%;
	width: 46%;
	animation-delay: -4s;
}
.mod-event span {
	color: var(--app-muted);
	font-weight: 600;
}
.mod-pug {
	position: absolute;
	z-index: 2;
	right: 2%;
	bottom: -4%;
	width: 30%;
	filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.45));
	animation: bob 3.6s ease-in-out infinite;
}

/* the apps section's pack of three, and the platforms underneath */
.apps-scene {
	position: relative;
	aspect-ratio: 560 / 300;
	background: radial-gradient(closest-side, rgba(242, 166, 90, 0.35), transparent);
}
.apps-pug {
	position: absolute;
	bottom: 0;
	filter: drop-shadow(0 14px 20px rgba(42, 28, 20, 0.28));
	animation: bob 3.6s ease-in-out infinite;
}
.apps-pug.a1 {
	left: 4%;
	width: 30%;
	animation-delay: -1.2s;
}
.apps-pug.a2 {
	left: 33%;
	width: 36%;
	z-index: 1;
}
.apps-pug.a3 {
	right: 4%;
	width: 26%;
	animation-delay: -2.2s;
}
/* three to a row (two on phones), so none is left on a line of its own */
.platforms {
	display: grid;
	grid-template-columns: repeat(3, auto);
	justify-content: center;
	gap: 10px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}
@media (max-width: 560px) {
	.platforms {
		grid-template-columns: repeat(2, auto);
	}
}
@media (max-width: 360px) {
	.platforms a {
		padding: 8px 12px 8px 10px;
		font-size: 14px;
	}
}
/* each one to its download (or the web app); site-downloads.mjs marks those still on the way */
.platforms a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 9px 16px 9px 12px;
	border-radius: 999px;
	background: #fff;
	color: var(--ink);
	font-weight: 800;
	font-size: 15px;
	text-decoration: none;
	box-shadow: 0 1px 0 rgba(42, 28, 20, 0.06), 0 10px 24px rgba(42, 28, 20, 0.08);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.platforms a:hover {
	transform: translateY(-2px);
	box-shadow: 0 1px 0 rgba(42, 28, 20, 0.06), 0 14px 28px rgba(42, 28, 20, 0.14);
}
.platforms a:focus-visible {
	outline: 3px solid var(--apricot);
	outline-offset: 2px;
}
.platforms small {
	font-size: inherit;
}
.platforms svg {
	width: 18px;
	height: 18px;
	color: #b4561f;
}
.platforms .soon {
	background: transparent;
	color: var(--ink-2);
	box-shadow: inset 0 0 0 2px rgba(42, 28, 20, 0.15);
}
.platforms .soon:hover {
	background-color: rgba(42, 28, 20, 0.04);
	box-shadow: inset 0 0 0 2px rgba(42, 28, 20, 0.3);
}

@media (max-width: 960px) {
	.perks,
	.collect-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}
/* tablets: one card to a row, so a picture as wide as the card would be drawn twice the size; it keeps its height and
   the drawing sits in the middle of it */
@media (min-width: 621px) and (max-width: 960px) {
	.perk-art {
		height: 190px;
		aspect-ratio: auto;
	}
	.collect-art {
		height: 170px;
		aspect-ratio: auto;
	}
}
/* narrow: the sketch's cards stack instead of overlapping */
@media (max-width: 620px) {
	.mod-visual {
		display: grid;
		gap: 14px;
		min-height: 0;
		padding-bottom: 20px;
	}
	.mod-card {
		position: relative;
		inset: auto;
		width: auto;
		animation: none;
	}
	.mod-auto {
		margin-left: 12%;
	}
	.mod-event {
		margin-right: 34%;
	}
	.mod-pug {
		width: 32%;
		right: 0;
		bottom: 0;
	}
}
.build-grid a {
	color: var(--link);
	font-weight: 700;
	white-space: nowrap;
}
@media (max-width: 960px) {
	.perks {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---- What's new (changelog/, written by scripts/site-changelog.mjs) */
.changes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.change {
	position: relative;
	padding: 0 0 32px 28px;
	border-left: 2px solid rgba(42, 28, 20, 0.12);
}
.change:last-child {
	border-left-color: transparent;
	padding-bottom: 0;
}
/* a dot on the line for each release */
.change::before {
	content: "";
	position: absolute;
	left: -7px;
	top: 4px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--cream);
	border: 2px solid #b4561f;
}
.change:first-child::before {
	background: #b4561f;
}
.change-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin-bottom: 6px;
}
.change-version {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.3px;
}
.change-meta time {
	color: var(--ink-2);
	font-size: 14px;
}
.change-latest {
	padding: 2px 10px;
	border-radius: 999px;
	background: #b4561f;
	color: var(--cream);
	font-size: 12px;
	font-weight: 700;
}
.change p {
	margin: 0;
	max-width: 68ch;
	line-height: 1.6;
}

/* ---- the funding page (site/funding, written by scripts/site-funding.mjs) */
.fund-top {
	padding-top: 70px;
}
.fund-bar {
	height: 14px;
	margin-top: 44px;
	border-radius: 999px;
	background: rgba(42, 28, 20, 0.12);
	overflow: hidden;
}
.fund-bar span {
	display: block;
	height: 100%;
	min-width: 6px;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--apricot), var(--tongue));
}
.fund-bar-label {
	margin: 12px 0 0;
	font-weight: 700;
}
#give h2,
#costs h2,
#thanks h2,
.fund-faq h2 {
	margin: 0 0 14px;
	font-size: clamp(32px, 3.4vw, 46px);
	letter-spacing: -1px;
}
.give-lede {
	max-width: 640px;
	margin: 0 0 36px;
	color: var(--on-dark-2);
	font-size: 19px;
}
.give-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 22px;
}
.give-group {
	margin: 34px 0 14px;
	font-size: 15px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--apricot);
}
/* (a crypto card's address sits just under its words: the cards differ too much in height to line them up) */
.give-address {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	width: 100%;
	margin-top: 4px;
}
.give-addresses {
	display: grid;
	gap: 14px;
	width: 100%;
}
.give-address + .give-address {
	padding-top: 14px;
	border-top: 1px solid rgba(251, 243, 232, 0.12);
}
/* wide screens: the stablecoins' two addresses side by side, in a card twice as wide */
@media (min-width: 961px) {
	.give-stablecoins {
		grid-column: span 2;
	}
	.give-addresses {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}
	.give-address + .give-address {
		padding-top: 0;
		border-top: 0;
	}
}
.give-net {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--on-dark);
}
.give-address .give-id {
	margin: 0 !important;
}
.give-address code {
	font-size: 13px;
	line-height: 1.45;
}
/* (on white, as scanners expect) */
.give-qr {
	display: block;
	width: 120px;
	padding: 6px;
	border-radius: 10px;
	background: #fff;
}
.give-qr svg {
	display: block;
	width: 100%;
	height: auto;
}
.give-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 26px;
	border-radius: 18px;
	background: rgba(251, 243, 232, 0.06);
	border: 1px solid rgba(251, 243, 232, 0.12);
}
.give-card h3 {
	margin: 0;
	font-size: 24px;
}
.give-card p {
	margin: 0;
	color: var(--on-dark-2);
}
.give-card .button {
	margin-top: auto;
}
.give-id {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: auto !important;
}
.give-id code {
	padding: 8px 12px;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.28);
	color: var(--on-dark);
	font-size: 15px;
	overflow-wrap: anywhere;
}
.give-note {
	font-size: 14px;
}
.give-soon {
	margin-top: auto !important;
	padding: 8px 12px;
	border-radius: 10px;
	border: 1px dashed rgba(251, 243, 232, 0.25);
	font-weight: 700;
}
.give-fine {
	margin: 30px 0 0;
	font-size: 14.5px;
	color: var(--on-dark-2);
}
/* where the money goes: a bar for a month and one for everything so far, each company's part in its colour with its
   logo and its share underneath, split by thin gaps of the page's cream; the companies named below */
.cost-split {
	margin: 26px 0 0;
}
.cost-split figcaption {
	margin-bottom: 14px;
	font-weight: 800;
}
.cost-row + .cost-row {
	margin-top: 16px;
}
.cost-row-label {
	margin: 0 0 8px;
	font-size: 15px;
}
.cost-row-label b {
	margin-right: 4px;
}
.cost-bar {
	display: flex;
	gap: 2px;
}
.cost-bar > span {
	display: flex;
	flex-direction: column;
	min-width: 4px;
}
.cost-bar i {
	display: grid;
	place-items: center;
	height: 38px;
	background: var(--c);
	color: var(--ink);
}
.cost-bar > span:first-child i {
	border-radius: 6px 0 0 6px;
}
.cost-bar > span:last-child i {
	border-radius: 0 6px 6px 0;
}
.cost-bar .logo {
	width: 20px;
	height: 20px;
	fill: currentColor;
}
.cost-bar small {
	min-height: 18px;
	margin-top: 5px;
	padding-left: 2px;
	font-size: 13.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	opacity: 0.75;
}
.cost-key {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}
.cost-key li {
	display: flex;
	align-items: center;
	gap: 8px;
}
.cost-key span {
	font-size: 14px;
	opacity: 0.7;
}
@media (max-width: 620px) {
	.cost-key {
		flex-direction: column;
	}
}
/* a company's colour and logo, beside its costs and in the list under the bars */
.vendor {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 6px;
	background: var(--c);
	color: var(--ink);
}
.vendor .logo {
	width: 14px;
	height: 14px;
	fill: currentColor;
}
.logo-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}
.ledger .who {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
/* on a phone the names keep their room: a smaller chip, and an amount may take two lines */
@media (max-width: 620px) {
	.ledger .who {
		gap: 10px;
	}
	.ledger .vendor {
		width: 20px;
		height: 20px;
		border-radius: 5px;
	}
	.ledger .vendor .logo {
		width: 12px;
		height: 12px;
	}
	table.ledger td {
		white-space: normal;
		min-width: 6.5em;
	}
}
.free-logo {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 8px;
	vertical-align: -2px;
	fill: currentColor;
	opacity: 0.85;
}
.cost-cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
	margin: 30px 0 46px;
}
#costs h3 {
	margin: 0 0 12px;
	font-size: 20px;
}
.ledger {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}
.ledger th,
.ledger td {
	padding: 14px 0;
	border-top: 2px solid rgba(42, 28, 20, 0.12);
	vertical-align: top;
	text-align: left;
}
.ledger td {
	padding-left: 16px;
	text-align: right;
	font-weight: 800;
	white-space: nowrap;
}
.ledger th span,
.ledger td span {
	display: block;
	margin-top: 3px;
	font-size: 14px;
	font-weight: 500;
	opacity: 0.7;
}
.ledger th time {
	display: block;
	margin-bottom: 2px;
	font-size: 13.5px;
	font-weight: 600;
	opacity: 0.65;
}
.ledger tfoot th,
.ledger tfoot td {
	border-top-color: rgba(42, 28, 20, 0.35);
	font-weight: 900;
}
.free-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.free-list b {
	margin-right: 4px;
}
.thanks {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}
.thanks li {
	padding: 12px 16px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 8px 20px rgba(42, 28, 20, 0.08);
}
.thanks b {
	display: block;
}
.thanks span {
	font-size: 14px;
	opacity: 0.7;
}
.fund-faq details {
	max-width: 780px;
}
.thanks-empty,
.thanks-more {
	margin: 18px 0 0;
	font-size: 18px;
}
@media (max-width: 960px) {
	.cost-cols {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 620px) {
	.free-list {
		grid-template-columns: 1fr;
	}
}