:root {
	/* Hedge — deep garden green, the primary accent */
	--clr-accent-100: #E5E9DA;
	--clr-accent-400: #3B4A34;
	--clr-accent-800: #212A1C;

	--clr-accent-contrast-100: #212A1C;
	--clr-accent-contrast-400: #F8F3E7;
	--clr-accent-contrast-800: #F8F3E7;

	/* Parchment — warm ivory stationery background */
	--clr-background-400: #F6F0E3;

	/* Brass — antique gold, the secondary accent for ornament and labels */
	--clr-rust-400: #A07F2E;
	--clr-line-400: #E2D8C2;
	--clr-fog-400: #6D6455;
	--clr-flash-400: #C8A032;
	--clr-flash-ink-400: #2B2109;

	--ff-display:
		"Fraunces",
		Georgia,
		"Iowan Old Style",
		"Times New Roman",
		serif;

	--border-radius: 12px;
}

@layer components {
	.skip-nav-link {
		position: absolute;
		top: 0;
		left: 0;
		padding: 1rem;
		background: var(--clr-white-400);
		transform: translateY(-150%);
		transition: transform 300ms ease-in;
	}

	.skip-nav-link:focus {
		transform: translateY(0);
	}

	.site-title {
		margin: 0;
		padding-block: 0.6rem;
		font-weight: bold;
		font-size: 1.5rem;
		text-align: center;
	}

	.brand {
		display: inline-flex;
		align-items: center;
		text-decoration: none;
	}

	.brand-logo {
		display: block;
		width: auto;
		height: 2rem;
	}

	.main,
	.footer {
		max-width: 1280px;
		margin-inline: auto;
	}

	/* The bar spans the viewport; `.header-bar` holds its contents to the
	   same measure as `.main`, escaping the 1rem padding on `body`. */

	.header {
		margin-inline: -1rem;
		position: sticky;
		top: 0;
		z-index: 40;
		background: color-mix(in srgb, var(--clr-background-400) 92%, transparent);
		backdrop-filter: blur(10px);
		border-bottom: 1px solid color-mix(in srgb, var(--clr-line-400) 80%, transparent);
	}

	.header::before {
		content: "";
		display: block;
		height: 2px;
		background: linear-gradient(90deg, transparent, var(--clr-rust-400) 15%, var(--clr-rust-400) 85%, transparent);
		opacity: 0.55;
	}

	.header-bar {
		position: relative;
		width: 100%;
		max-width: calc(1280px + 2rem);
		margin-inline: auto;
		display: flex;
		align-items: center;
		gap: 0.75rem;
		padding-block: 0.4rem;
		padding-inline: 1rem;
	}

	.main {
		padding-block: 2.5rem 3rem;
	}

	.main h1 {
		letter-spacing: -0.02em;
	}

	.center h1 {
		font-family: var(--ff-display);
		font-size: 1.9rem;
		font-weight: 600;
		letter-spacing: -0.01em;
	}

	.center form {
		position: relative;
		overflow: hidden;
		background: var(--clr-white-400);
		border: 1px solid var(--clr-line-400);
		border-radius: calc(var(--border-radius) * 2);
		padding: 2rem;
		box-shadow: 0 24px 48px -32px rgba(21, 24, 26, 0.18);
	}

	.center form::before {
		content: "";
		position: absolute;
		inset-inline: 0;
		top: 0;
		height: 3px;
		background: linear-gradient(90deg, var(--clr-accent-400), var(--clr-rust-400));
	}

	.center a:not(.btn) {
		color: var(--clr-accent-400);
		font-weight: 600;
		text-underline-offset: 2px;
	}

	.center a:not(.btn):hover {
		color: var(--clr-accent-800);
	}

	.center .sign-in-alt {
		margin-block-start: 1.5rem;
	}

	.center .sign-in-alt__title {
		font-family: var(--ff-code);
		font-size: 0.72rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		color: var(--clr-fog-400);
	}

	.center .sign-in-alt__title::before,
	.center .sign-in-alt__title::after {
		border-bottom-color: var(--clr-line-400);
	}

	.page-error .main {
		display: grid;
		place-items: center;
		min-height: clamp(30rem, 68vh, 44rem);
	}

	.error-page {
		width: 100%;
		max-width: 42rem;
		padding-block: 1rem;
	}

	.error-page__card {
		position: relative;
		overflow: hidden;
		padding: clamp(2rem, 7vw, 4.25rem);
		background:
			radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--clr-accent-100) 72%, transparent), transparent 42%),
			var(--clr-white-400);
		border: 1px solid var(--clr-line-400);
		border-radius: calc(var(--border-radius) * 2);
		box-shadow: 0 30px 70px -42px rgba(33, 42, 28, 0.48);
		text-align: center;
	}

	.error-page__card::before {
		content: "";
		position: absolute;
		inset: 0 0 auto;
		height: 3px;
		background: linear-gradient(90deg, var(--clr-accent-400), var(--clr-rust-400));
	}

	.error-page__icon {
		display: grid;
		place-items: center;
		width: 4.5rem;
		height: 4.5rem;
		margin: 0 auto 1.35rem;
		background: var(--clr-accent-100);
		color: var(--clr-accent-800);
		border: 1px solid color-mix(in srgb, var(--clr-accent-400) 24%, transparent);
		border-radius: 50%;
	}

	.error-page__status {
		margin: 0 0 0.65rem;
		font-size: 0.74rem;
		font-weight: 700;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--clr-rust-400);
	}

	.error-page h1 {
		margin: 0;
		font-family: var(--ff-display);
		font-size: clamp(2rem, 7vw, 3.15rem);
		font-weight: 600;
		line-height: 1.06;
		letter-spacing: -0.035em;
	}

	.error-page__message {
		max-width: 32rem;
		margin: 1rem auto 0;
		font-size: 1.02rem;
		line-height: 1.6;
		color: var(--clr-fog-400);
	}

	.error-page__actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 1rem 1.25rem;
		margin-block-start: 1.8rem;
	}

	.error-page__actions .btn {
		min-width: 12rem;
	}

	.error-page__support {
		font-weight: 600;
		color: var(--clr-accent-400);
		text-underline-offset: 3px;
	}

	@media (max-width: 480px) {
		.page-error .main {
			min-height: auto;
			padding-block: 1.5rem 2.5rem;
		}

		.error-page__card {
			padding-inline: 1.35rem;
		}

		.error-page__actions {
			flex-direction: column;
		}

		.error-page__actions .btn {
			width: 100%;
		}
	}

	.footer {
		padding-block: 3.5rem 2rem;
		border-top: 1px solid var(--clr-line-400);
	}

	.footer a {
		color: inherit;
		text-underline-offset: 2px;
	}

	.footer-inner {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 2.5rem;
		padding-block-end: 2.5rem;
	}

	.footer-brand {
		max-width: 280px;
	}

	.footer-brand .brand {
		margin-block-end: 0.85rem;
	}

	.footer-brand .brand-logo {
		height: 2.6rem;
	}

	.footer-tagline {
		margin: 0 0 1.1rem;
		font-size: 0.9rem;
		line-height: 1.5;
		color: var(--clr-fog-400);
	}

	.footer-cols {
		display: flex;
		flex-wrap: wrap;
		gap: 2.5rem 3.5rem;
	}

	.footer-col-title {
		margin: 0 0 0.9rem;
		font-size: 0.74rem;
		font-weight: 700;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--clr-black-400);
	}

	.footer-col ul {
		display: flex;
		flex-direction: column;
		gap: 0.65rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.footer-col a {
		font-size: 0.9rem;
		color: var(--clr-fog-400);
		text-decoration: none;
	}

	.footer-col a:hover {
		color: var(--clr-black-400);
		text-decoration: underline;
	}

	.footer-social {
		display: inline-flex;
		align-items: center;
		gap: 0.45rem;
	}

	.footer-social__icon {
		flex: none;
	}

	.footer-bottom {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 0.5rem 1.5rem;
		padding-block-start: 1.75rem;
		border-top: 1px solid var(--clr-line-400);
		font-size: 0.82rem;
		color: var(--clr-fog-400);
	}

	.footer-bottom p {
		margin: 0;
	}

	@media (max-width: 640px) {
		.footer-inner {
			flex-direction: column;
			gap: 2rem;
		}

		.footer-brand {
			max-width: none;
		}

		.footer-cols {
			gap: 2rem;
		}

		.footer-bottom {
			flex-direction: column;
			gap: 0.5rem;
		}
	}

	.cookie-consent__banner {
		position: fixed;
		inset-inline: 1rem;
		bottom: 1rem;
		z-index: 100;
		max-width: 760px;
		margin-inline: auto;
		padding: 1.25rem;
		background: var(--clr-background-400);
		border: 1px solid var(--clr-line-400);
		border-top: 3px solid var(--clr-rust-400);
		border-radius: var(--border-radius);
		box-shadow: 0 20px 60px rgba(21, 24, 26, 0.24);
	}

	.cookie-consent__banner h2 {
		margin: 0 0 0.4rem;
		font-family: var(--ff-display);
		font-size: 1.35rem;
	}

	.cookie-consent__banner p {
		margin: 0;
		line-height: 1.55;
	}

	.cookie-consent__actions {
		display: flex;
		flex-wrap: wrap;
		gap: 0.75rem;
		margin-block-start: 1rem;
	}

	.cookie-consent__settings {
		position: fixed;
		left: 1rem;
		bottom: 1rem;
		z-index: 38;
		padding: 0.5rem 0.75rem;
		color: var(--clr-black-400);
		background: var(--clr-background-400);
		border: 1px solid var(--clr-line-400);
		border-radius: 999px;
		box-shadow: 0 4px 18px rgba(21, 24, 26, 0.14);
		font: inherit;
		font-size: 0.8rem;
		cursor: pointer;
	}

	.cookie-consent__settings:hover {
		border-color: var(--clr-rust-400);
	}

	html.nav-scroll-lock {
		overflow: hidden;
	}

	.nav-backdrop {
		position: fixed;
		inset: 0;
		z-index: 39;
		background: color-mix(in srgb, var(--clr-black-400) 45%, transparent);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.25s ease;
	}

	.nav-backdrop.is-open {
		opacity: 1;
		pointer-events: auto;
	}

	.nav-toggle {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		height: 2.75rem;
		padding: 0;
		flex: none;
		background: transparent;
		border-radius: 999px;
		transition: transform 0.15s ease;
	}

	.nav-toggle:hover,
	.nav-toggle:focus-visible {
		filter: none;
		background: color-mix(in srgb, var(--clr-black-400) 6%, transparent);
	}

	.nav-toggle:active {
		transform: scale(0.92);
	}

	.nav-toggle::before {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 999px;
		background: var(--clr-flash-400);
		opacity: 0;
		transform: scale(0.4);
		pointer-events: none;
	}

	.nav-toggle[aria-expanded="true"]::before {
		animation: nav-toggle-flash 0.5s ease-out;
	}

	.nav-toggle-bars,
	.nav-toggle-bars::before,
	.nav-toggle-bars::after {
		content: "";
		display: block;
		width: 18px;
		height: 2px;
		border-radius: 2px;
		background: var(--clr-black-400);
		transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease;
	}

	.nav-toggle-bars {
		position: relative;
	}

	.nav-toggle-bars::before,
	.nav-toggle-bars::after {
		position: absolute;
		left: 0;
	}

	.nav-toggle-bars::before {
		top: -6px;
	}

	.nav-toggle-bars::after {
		top: 6px;
	}

	.nav-toggle[aria-expanded="true"] .nav-toggle-bars {
		background: transparent;
	}

	.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before {
		top: 0;
		transform: rotate(45deg);
	}

	.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after {
		top: 0;
		transform: rotate(-45deg);
	}

	.nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		transform-origin: top center;
		transform: scaleY(0.96) translateY(-6px);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		background: var(--clr-background-400);
		border-bottom: 1px solid var(--clr-line-400);
		border-radius: 0 0 16px 16px;
		box-shadow: 0 20px 40px -20px rgba(23, 20, 15, 0.4);
		overflow: hidden;
		transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease, visibility 0s linear 0.3s;
	}

	.nav::before {
		content: "";
		display: block;
		height: 3px;
		background: var(--clr-flash-400);
	}

	.nav.is-open {
		transform: scaleY(1) translateY(0);
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
	}

	.nav-links {
		display: flex;
		flex-direction: column;
		margin: 0;
		padding: 0.4rem 0.9rem 1.1rem;
		list-style: none;
	}

	.nav-links li {
		display: flex;
		opacity: 0;
		transform: translateY(-4px);
	}

	.nav-links li + li {
		border-top: 1px solid color-mix(in srgb, var(--clr-black-400) 6%, transparent);
	}

	.nav.is-open .nav-links li {
		animation: nav-item-in 0.32s ease forwards;
	}

	.nav.is-open .nav-links li:nth-child(1) { animation-delay: 0.03s; }
	.nav.is-open .nav-links li:nth-child(2) { animation-delay: 0.08s; }
	.nav.is-open .nav-links li:nth-child(3) { animation-delay: 0.13s; }
	.nav.is-open .nav-links li:nth-child(4) { animation-delay: 0.18s; }
	.nav.is-open .nav-links li:nth-child(5) { animation-delay: 0.23s; }
	.nav.is-open .nav-links li:nth-child(6) { animation-delay: 0.28s; }

	.nav-mobile-actions {
		display: flex;
		flex-direction: column;
		gap: 0.6rem;
		padding: 0.9rem 0.9rem 1.1rem;
		border-top: 1px solid color-mix(in srgb, var(--clr-black-400) 6%, transparent);
		opacity: 0;
		transform: translateY(-4px);
	}

	.nav.is-open .nav-mobile-actions {
		animation: nav-item-in 0.32s ease forwards;
		animation-delay: 0.3s;
	}

	.nav-mobile-actions .btn {
		width: 100%;
		justify-content: center;
	}

	.nav-actions {
		display: flex;
		align-items: center;
		gap: 0.15rem;
		margin-inline-start: auto;
	}

	.nav-actions .nav-signin {
		display: none;
	}

	/* The CTA is already offered inside the mobile dropdown via
	   `.nav-mobile-actions`, so hiding it here avoids crowding the bar
	   next to the brand and the toggle. */
	.nav-actions .nav-cta,
	.nav-actions .nav-mobile-primary {
		display: none;
	}

	.nav-links a,
	.nav-links button {
		position: relative;
		display: block;
		width: 100%;
		padding-block: 0.85rem;
		padding-inline: 1.35rem 0.85rem;
		border-radius: 10px;
		color: var(--clr-fog-400);
		text-decoration: none;
		font-weight: 600;
		font-size: 1rem;
		text-align: left;
		transition: color 0.15s ease, background-color 0.15s ease;
	}

	.nav-links a::before,
	.nav-links button::before {
		content: "";
		position: absolute;
		left: 0.35rem;
		top: 50%;
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: var(--clr-flash-400);
		transform: translateY(-50%) scale(0);
		transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
	}

	.nav-links a:hover,
	.nav-links a:focus-visible,
	.nav-links button:hover,
	.nav-links button:focus-visible {
		color: var(--clr-black-400);
		background: color-mix(in srgb, var(--clr-black-400) 6%, transparent);
	}

	.nav-links a:hover::before,
	.nav-links a:focus-visible::before,
	.nav-links button:hover::before,
	.nav-links button:focus-visible::before {
		transform: translateY(-50%) scale(1);
	}

	.nav-actions a,
	.nav-actions button:not(.nav-toggle) {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding-block: 0.6rem;
		padding-inline: 0.85rem;
		border-radius: 999px;
		color: var(--clr-fog-400);
		text-decoration: none;
		font-weight: 600;
		font-size: 0.92rem;
		transition: color 0.15s ease, background-color 0.15s ease;
	}

	.nav-actions a:hover,
	.nav-actions a:focus-visible {
		color: var(--clr-black-400);
		background: color-mix(in srgb, var(--clr-black-400) 6%, transparent);
	}

	/* Needs to outrank `.nav-actions a`, which sets the muted link colour. */

	a.nav-cta,
	a.nav-mobile-primary {
		padding-inline: 1.15rem;
		background: var(--clr-accent-400);
		color: var(--clr-accent-contrast-400);
		font-weight: 700;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
		transition: transform 0.15s ease, filter 0.15s ease;
	}

	a.nav-cta:hover,
	a.nav-cta:focus-visible,
	a.nav-mobile-primary:hover,
	a.nav-mobile-primary:focus-visible {
		background: var(--clr-accent-400);
		color: var(--clr-accent-contrast-400);
		transform: translateY(-1px);
		filter: brightness(1.08);
	}

	@keyframes nav-toggle-flash {
		0% { opacity: 0.55; transform: scale(0.4); }
		100% { opacity: 0; transform: scale(1.35); }
	}

	@keyframes nav-item-in {
		to { opacity: 1; transform: translateY(0); }
	}

	.cols-33,
	.cols-50 {
		display: grid;
		gap: 1rem;
	}

	details .warning-box {
		margin-block-start: 1rem;
	}

	details fieldset {
		margin-block-start: 0.5rem;
	}

	.top-bar ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		list-style: none;
		gap: 1rem;
	}

	.data-table {
		width: 100%;
		margin-block-start: 1rem;
	}

	.data-table__sep-top {
		border-top: 1px solid var(--clr-black-100);
	}

	.data-table__sep-bottom {
		border-bottom: 1px solid var(--clr-black-100);
	}

	.data-table__sep-left {
		border-left: 1px solid var(--clr-black-100);
	}

	.data-table__sep-right {
		border-right: 1px solid var(--clr-black-100);
	}

	.data-table tr:hover {
		background: var(--clr-accent-100);
	}

	.data-table tbody tr:hover,
	.data-table tbody tr:hover a,
	.data-table tbody tr:hover button {
		color: var(--clr-accent-contrast-100);
	}

	.data-table thead th {
		border-bottom: 1px solid var(--clr-black-100);
	}

	.data-table tfoot th {
		border-top: 1px solid var(--clr-black-100);
	}

	.data-table td td {
		padding: 0.1rem 0.5rem;
	}

	.data-table td td:first-child {
		padding-inline-start: 0;
	}

	.data-table td tr:first-child td {
		padding-block-start: 0;
	}

	.data-table td td:last-child {
		padding-inline-end: 0;
	}

	.data-table td tr:last-child td {
		padding-block-end: 0;
	}

	.data-table .data-table__empty td {
		text-align: center;
		font-style: italic;
	}

	.data-table .data-table__highlight {
		background: var(--clr-highlight-100);
	}

	.data-table .data-table__highlight:hover {
		background: var(--clr-highlight-400);
	}

	.data-table__sort {
		display: inline-block;
		padding-inline-start: 0.3rem;
		font-size: 0.8rem;
		text-decoration: none;
		color: var(--clr-black-100);
	}

	.data-table__sort--active {
		color: var(--clr-accent-400);
	}

	.metrics td {
		padding: 0.1rem 0.3rem;
	}

	.totp__qrcode {
		font-family: monospace;
		font-size: 1.2rem;
		text-align: center;
	}

	.totp__qrcode img {
		display: inline-block;
	}

	.ob-shell {
		max-width: 920px;
		margin-inline: auto;
	}

	.ob-eyebrow {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		font-family: var(--ff-code);
		font-size: 0.72rem;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--clr-accent-400);
		background: var(--clr-accent-100);
		padding: 0.3rem 0.6rem;
		border-radius: 5px;
		margin-block-end: 1rem;
	}

	.ob-eyebrow::before {
		content: "●";
		font-size: 0.55rem;
	}

	.ob-head h1 {
		font-size: clamp(1.6rem, 3vw, 2.1rem);
		letter-spacing: -0.02em;
		margin: 0 0 0.5rem;
	}

	.ob-head p {
		color: var(--clr-fog-400);
		max-width: 52ch;
		margin: 0;
	}

	.ob-stepper {
		display: flex;
		align-items: center;
		gap: 0.6rem;
		margin-block-end: 2rem;
		font-family: var(--ff-code);
		font-size: 0.75rem;
		letter-spacing: 0.04em;
		color: var(--clr-fog-400);
	}

	.ob-stepper__step {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		flex: none;
	}

	.ob-stepper__num {
		width: 1.5rem;
		height: 1.5rem;
		border-radius: 50%;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border: 1px solid var(--clr-line-400);
		background: var(--clr-white-400);
		font-size: 0.7rem;
	}

	.ob-stepper__step--active,
	.ob-stepper__step--done {
		color: var(--clr-black-400);
	}

	.ob-stepper__step--active .ob-stepper__num,
	.ob-stepper__step--done .ob-stepper__num {
		background: var(--clr-accent-400);
		color: var(--clr-accent-contrast-400);
		border-color: var(--clr-accent-400);
	}

	.ob-stepper__line {
		flex: 1 1 auto;
		min-width: 1.5rem;
		height: 1px;
		background: var(--clr-line-400);
	}

	.ob-card {
		background: var(--clr-white-400);
		border: 1px solid var(--clr-line-400);
		border-radius: calc(var(--border-radius) * 2);
		box-shadow: 0 24px 48px -32px rgba(0, 0, 0, 0.18);
		overflow: hidden;
		margin-block-start: 1.75rem;
	}

	.ob-card__tab {
		display: flex;
		align-items: center;
		gap: 0.4rem;
		font-family: var(--ff-code);
		font-size: 0.7rem;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		color: var(--clr-fog-400);
		background: var(--clr-background-400);
		border-bottom: 1px dashed var(--clr-line-400);
		padding: 0.65rem 1.5rem;
	}

	.ob-card__tab::before {
		content: "";
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: var(--clr-accent-400);
		flex: none;
	}

	.ob-card__body {
		padding: 1.75rem;
	}

	.ob-card__body form {
		gap: 1.1rem;
	}

	.ob-grid-2 {
		display: grid;
		gap: 1.1rem;
		align-items: start;
	}

	.ob-grid-2 label {
		display: block;
		margin-block-end: 0.3rem;
	}

	.ob-grid-2 select {
		display: block;
		width: 100%;
	}

	.ob-actions {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		flex-wrap: wrap;
		margin-block-start: 0.5rem;
	}

	.ob-sources {
		display: grid;
		gap: 1.1rem;
	}

	.ob-source {
		display: flex;
		gap: 1rem;
		align-items: flex-start;
		padding: 1.25rem;
		border: 1px solid var(--clr-line-400);
		border-radius: calc(var(--border-radius) * 1.5);
		background: var(--clr-white-400);
		transition: border-color 200ms, background 200ms;
	}

	.ob-source[data-connected] {
		border-color: var(--clr-accent-400);
		background: color-mix(in srgb, var(--clr-accent-100) 55%, var(--clr-white-400));
	}

	.ob-source__mark {
		width: 2.75rem;
		height: 2.75rem;
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: none;
	}

	.ob-source__mark--stripe {
		background: color-mix(in srgb, var(--clr-rust-400) 16%, var(--clr-white-400));
		color: var(--clr-rust-400);
	}

	.ob-source__mark--github {
		background: var(--clr-accent-100);
		color: var(--clr-accent-400);
	}

	.ob-source__body {
		flex: 1 1 auto;
		min-width: 0;
	}

	.ob-source__name {
		font-weight: 700;
		margin: 0 0 0.2rem;
	}

	.ob-source__desc {
		color: var(--clr-fog-400);
		font-size: 0.9rem;
		margin: 0 0 0.9rem;
	}

	.ob-source__status {
		display: none;
		align-items: center;
		gap: 0.4rem;
		font-family: var(--ff-code);
		font-size: 0.75rem;
		font-weight: 700;
		color: var(--clr-accent-400);
	}

	.ob-source[data-connected] .ob-source__status {
		display: inline-flex;
	}

	.ob-source[data-connected] .ob-source__connect {
		display: none;
	}

	.ob-ledger {
		border: 1px solid var(--clr-line-400);
		border-radius: calc(var(--border-radius) * 1.5);
		overflow: hidden;
		background: var(--clr-white-400);
	}

	.ob-ledger__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0.75rem 1rem;
		border-bottom: 1px solid var(--clr-line-400);
		font-family: var(--ff-code);
		font-size: 0.7rem;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--clr-fog-400);
	}

	.ob-ledger__dot {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: var(--clr-accent-400);
		display: inline-block;
		margin-inline-end: 0.4rem;
		animation: ob-pulse 2.2s ease-in-out infinite;
	}

	@keyframes ob-pulse {
		0%, 100% { opacity: 1; }
		50% { opacity: 0.35; }
	}

	.ob-ledger__body {
		min-height: 240px;
		padding-block: 0.3rem;
	}

	.ob-ledger__empty {
		padding: 2.5rem 1.25rem;
		text-align: center;
		color: var(--clr-fog-400);
		font-size: 0.85rem;
	}

	.ob-ledger__row {
		display: grid;
		grid-template-columns: 46px 1fr;
		gap: 0.6rem;
		align-items: baseline;
		padding: 0.6rem 1rem;
		font-family: var(--ff-code);
		font-size: 0.8rem;
		border-bottom: 1px dashed var(--clr-line-400);
		animation: ob-row-in 0.4s ease both;
	}

	.ob-ledger__row--full-date {
		grid-template-columns: 260px 1fr;
	}

	.ob-ledger__row--full-date > span:first-child {
		white-space: nowrap;
		font-size: 0.72rem;
		color: var(--clr-fog-400);
	}

	@keyframes ob-row-in {
		from { opacity: 0; transform: translateY(-4px); }
		to { opacity: 1; transform: translateY(0); }
	}

	.ob-ledger__tag {
		font-weight: 700;
		font-size: 0.65rem;
		padding: 0.1rem 0.35rem;
		border-radius: 4px;
		text-transform: uppercase;
		justify-self: start;
	}

	.ob-ledger__tag--stripe {
		background: color-mix(in srgb, var(--clr-rust-400) 16%, var(--clr-white-400));
		color: var(--clr-rust-400);
	}

	.ob-ledger__tag--github {
		background: var(--clr-accent-100);
		color: var(--clr-accent-400);
	}

	.ob-ledger__icon {
		display: inline-block;
		margin-inline-end: 0.15rem;
	}

	.ob-ledger__icon--commit::before { content: "📝"; }
	.ob-ledger__icon--pull_request::before { content: "🔀"; }
	.ob-ledger__icon--release::before { content: "🚀"; }
	.ob-ledger__icon--payment::before { content: "💰"; }
	.ob-ledger__icon--refund::before { content: "↩️"; }
	.ob-ledger__icon--customer_created::before { content: "👤"; }
	.ob-ledger__icon--subscription_created::before { content: "📦"; }
	.ob-ledger__icon--subscription_canceled::before { content: "⛔"; }

	.ob-ledger__meta {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		margin-top: 0.15rem;
		font-size: 0.72rem;
		color: var(--clr-fog-400);
	}

	@media (prefers-reduced-motion: reduce) {
		.ob-ledger__dot {
			animation: none;
		}

		.ob-ledger__row {
			animation: none;
		}

		.dash-stat__dot {
			animation: none;
		}

		.dash-stat--link {
			transition: none;
		}

		.dash-stat--link:hover {
			transform: none;
		}
	}

	/* Go live (event onboarding) */

	.golive-shell {
		max-width: 640px;
		margin-inline: auto;
	}

	.golive-eyebrow {
		display: inline-flex;
		align-items: center;
		gap: 0.55rem;
		font-family: var(--ff-primary);
		font-size: 0.72rem;
		font-weight: 600;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--clr-rust-400);
		margin-block-end: 1.1rem;
	}

	.golive-eyebrow::before {
		content: "";
		width: 16px;
		height: 1px;
		background: var(--clr-rust-400);
	}

	.golive-head h1 {
		font-family: var(--ff-display);
		font-size: clamp(1.8rem, 3.4vw, 2.4rem);
		font-weight: 600;
		letter-spacing: -0.01em;
		margin: 0 0 0.5rem;
	}

	.golive-head p {
		color: var(--clr-fog-400);
		max-width: 48ch;
		margin: 0;
		font-size: 1.02rem;
		line-height: 1.5;
	}

	.golive-perks {
		list-style: none;
		margin: 1.6rem 0 0;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem 1.4rem;
	}

	.golive-perks li {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		font-size: 0.88rem;
		color: var(--clr-black-400);
	}

	.golive-perks svg {
		width: 16px;
		height: 16px;
		flex-shrink: 0;
		color: var(--clr-accent-400);
	}

	.golive-ticket {
		background: var(--clr-white-400);
		border: 1px solid var(--clr-line-400);
		border-radius: 4px;
		box-shadow: 0 24px 48px -32px rgba(33, 27, 18, 0.25);
		margin-block-start: 2rem;
		overflow: hidden;
		animation: golive-rise 500ms ease both;
	}

	@keyframes golive-rise {
		from {
			opacity: 0;
			transform: translateY(10px);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.golive-ticket {
			animation: none;
		}
	}

	.golive-ticket__code {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		font-family: var(--ff-display);
		font-style: italic;
		font-size: 0.92rem;
		letter-spacing: 0.01em;
		padding: 0.85rem 1.5rem;
		background: var(--clr-black-400);
		color: var(--clr-flash-400);
		text-align: center;
		word-break: break-all;
	}

	.golive-ticket__code--pending {
		color: color-mix(in srgb, var(--clr-white-400) 55%, transparent);
		letter-spacing: 0.12em;
	}

	.golive-ticket__body {
		padding: 1.85rem 1.75rem 0.5rem;
	}

	.golive-ticket__body form {
		gap: 1.15rem;
	}

	.golive-form-title,
	.golive-mobile-progress {
		display: none;
	}

	.golive-perf {
		position: relative;
		height: 0;
		border-top: 1.5px dashed var(--clr-line-400);
		margin: 1.6rem 0 0;
	}

	.golive-perf::before,
	.golive-perf::after {
		content: "";
		position: absolute;
		top: 50%;
		width: 22px;
		height: 22px;
		background: var(--clr-background-400);
		border-radius: 50%;
		transform: translateY(-50%);
	}

	.golive-perf::before {
		left: -11px;
	}

	.golive-perf::after {
		right: -11px;
	}

	.golive-stub {
		padding: 1.5rem 1.75rem 1.85rem;
	}

	.golive-currency {
		display: flex;
		gap: 0.5rem;
		margin-block-end: 1rem;
	}

	.golive-currency__option {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.4rem;
		padding: 0.5rem 0.75rem;
		border: 1px solid var(--clr-line-400);
		border-radius: 999px;
		font-size: 0.85rem;
		color: var(--clr-fog-400);
		cursor: pointer;
		transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
	}

	.golive-currency__option:has(input:checked) {
		border-color: var(--clr-accent-400);
		color: var(--clr-accent-400);
		background: var(--clr-accent-100);
	}

	.golive-currency__option input {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}

	.golive-stub__price {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 1rem;
		margin-block-end: 1rem;
		font-size: 0.85rem;
		color: var(--clr-fog-400);
	}

	.golive-stub__price strong {
		color: var(--clr-black-400);
		font-size: 1rem;
	}

	.golive-cta {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: center;
		padding-block: 0.85rem;
		border-radius: 999px;
		font-size: 1rem;
		font-weight: 600;
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
		transition: transform 0.15s ease;
	}

	.golive-cta:active {
		transform: scale(0.98);
	}

	.golive-stub__note {
		margin: 0.85rem 0 0;
		text-align: center;
		font-size: 0.8rem;
		color: var(--clr-fog-400);
	}

	.golive-form-note {
		margin: 0.4rem 0 0;
		font-size: 0.82rem;
		line-height: 1.5;
		color: var(--clr-fog-400);
	}

	.golive-mobile-bar {
		display: none;
	}

	.retention-notice {
		margin: 0.9rem 0 0;
		font-size: 0.84rem;
		line-height: 1.55;
		color: var(--clr-fog-400);
	}

	.retention-notice--inverse {
		color: color-mix(in srgb, var(--clr-background-400) 78%, transparent);
	}

	.retention-banner {
		margin-block: 0 1.5rem;
		padding: 1rem 1.15rem;
		border: 1px solid color-mix(in srgb, var(--clr-rust-400) 48%, var(--clr-line-400));
		border-radius: var(--border-radius);
		background: color-mix(in srgb, var(--clr-flash-400) 9%, var(--clr-background-400));
	}

	.retention-banner strong {
		display: block;
		margin-block-end: 0.25rem;
		font-family: var(--ff-display);
	}

	.retention-banner p {
		margin: 0;
		color: var(--clr-fog-400);
	}

	.retention-banner a {
		color: var(--clr-accent-400);
		font-weight: 600;
	}

	.retention-banner--expired {
		border-color: color-mix(in srgb, var(--clr-rust-400) 68%, var(--clr-line-400));
		background: color-mix(in srgb, var(--clr-rust-400) 11%, var(--clr-background-400));
	}

	.retention-banner--expired strong {
		color: var(--clr-rust-400);
	}

	.terms-page {
		max-width: 760px;
		margin-inline: auto;
		padding-inline: 1rem;
	}

	.terms-page__head {
		padding-block-end: 1.5rem;
		border-bottom: 1px solid var(--clr-line-400);
	}

	.terms-page__eyebrow {
		margin: 0 0 0.5rem;
		color: var(--clr-rust-400);
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}

	.terms-page h1,
	.terms-page h2 {
		font-family: var(--ff-display);
	}

	.terms-page h1 {
		margin: 0;
		font-size: clamp(2.2rem, 5vw, 3.4rem);
	}

	.terms-page__head > p:last-child {
		margin-block-end: 0;
		color: var(--clr-fog-400);
	}

	.terms-page section {
		padding-block: 1.25rem;
		border-bottom: 1px solid var(--clr-line-400);
	}

	.terms-page section h2 {
		margin-block-start: 0;
	}

	.terms-page section p {
		line-height: 1.7;
	}

	.terms-page code {
		font-size: 0.9em;
	}

	.terms-page__retention {
		margin-inline: -1rem;
		padding-inline: 1rem;
		background: color-mix(in srgb, var(--clr-flash-400) 8%, transparent);
		border-top: 2px solid var(--clr-rust-400);
	}

	.golive-live {
		background: var(--clr-accent-800);
		color: var(--clr-background-400);
		border-radius: 4px;
		padding: 2.2rem 1.85rem;
		margin-block-start: 2rem;
		text-align: center;
	}

	.golive-live__eyebrow {
		display: inline-flex;
		align-items: center;
		gap: 0.55rem;
		font-size: 0.72rem;
		font-weight: 600;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--clr-flash-400);
	}

	.golive-live__eyebrow::before {
		content: "";
		width: 16px;
		height: 1px;
		background: var(--clr-flash-400);
	}

	.golive-live h2 {
		font-family: var(--ff-display);
		font-size: 1.5rem;
		font-weight: 600;
		letter-spacing: -0.01em;
		margin: 0.7rem 0 1.4rem;
		color: var(--clr-white-400);
	}

	.golive-live__link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		background: color-mix(in srgb, var(--clr-white-400) 10%, transparent);
		border: 1px solid color-mix(in srgb, var(--clr-white-400) 18%, transparent);
		border-radius: var(--border-radius);
		padding: 0.75rem 1rem;
		font-family: var(--ff-display);
		font-style: italic;
		font-size: 0.88rem;
	}

	.golive-live__link a {
		color: var(--clr-flash-400);
		text-decoration: none;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.golive-live__link a:hover {
		text-decoration: underline;
	}

	.golive-live__copy {
		flex-shrink: 0;
		background: var(--clr-white-400);
		color: var(--clr-black-400);
		font-size: 0.76rem;
		padding-block: 0.35rem;
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
		transition: transform 0.15s ease;
	}

	.golive-live__copy:active {
		transform: scale(0.94);
	}

	.golive-live__public-gallery {
		margin-block-start: 1.5rem;
	}

	.golive-live__public-gallery .golive-live__eyebrow {
		margin-block-end: 0.65rem;
	}

	@media (max-width: 560px) {
		body.golive-body {
			padding-inline: 0;
			background: var(--clr-background-400);
		}

		.golive-body .header {
			margin-inline: 0;
			background: color-mix(in srgb, var(--clr-white-400) 96%, transparent);
			border-bottom-color: color-mix(in srgb, var(--clr-line-400) 72%, transparent);
		}

		.golive-body .header::before {
			display: none;
		}

		.golive-body .header-bar {
			min-height: 3.75rem;
			padding: 0.35rem 0.875rem;
		}

		.golive-body .site-title {
			padding-block: 0;
		}

		.golive-body .brand-logo {
			height: 1.55rem;
		}

		.golive-body .nav-actions {
			gap: 0.25rem;
		}

		.golive-body .nav-actions form button {
			min-height: 2.75rem;
			padding-inline: 0.65rem;
			font-size: 0.82rem;
		}

		.golive-body .main {
			max-width: none;
			padding-block: 0;
		}

		.golive-body .footer {
			display: none;
		}

		.golive-shell {
			max-width: none;
			padding: 1rem 1rem calc(env(safe-area-inset-bottom, 0px) + 6.75rem);
		}

		.golive-mobile-progress {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 0.35rem;
			margin: 0 0 1.15rem;
		}

		.golive-mobile-progress span {
			height: 4px;
			border-radius: 999px;
			background: var(--clr-accent-400);
		}

		.golive-head {
			padding-inline: 0.15rem;
		}

		.golive-eyebrow {
			margin-block-end: 0.55rem;
			font-size: 0.65rem;
			letter-spacing: 0.12em;
		}

		.golive-head h1 {
			margin-block-end: 0.35rem;
			font-size: 1.9rem;
			line-height: 1.12;
		}

		.golive-head p {
			font-size: 0.92rem;
			line-height: 1.45;
		}

		.golive-perks {
			display: none;
		}

		/* Keep the fixed checkout action anchored to the viewport. */
		.golive-ticket {
			margin-block-start: 1.25rem;
			border: 0;
			border-radius: 20px;
			box-shadow: 0 1px 2px rgba(21, 24, 26, 0.06), 0 14px 34px -28px rgba(21, 24, 26, 0.38);
			animation: none;
		}

		.golive-ticket__code {
			justify-content: flex-start;
			padding: 0.8rem 1rem;
			font-family: var(--ff-primary);
			font-style: normal;
			font-size: 0.75rem;
			font-weight: 600;
			letter-spacing: 0.02em;
			text-align: left;
			background: var(--clr-accent-100);
			color: var(--clr-accent-400);
		}

		.golive-ticket__code::before {
			content: "";
			width: 7px;
			height: 7px;
			flex: none;
			border-radius: 50%;
			background: var(--clr-accent-400);
			box-shadow: 0 0 0 4px color-mix(in srgb, var(--clr-accent-400) 12%, transparent);
		}

		.golive-ticket__code--pending {
			color: var(--clr-accent-400);
			letter-spacing: 0.02em;
		}

		.golive-ticket__body {
			padding: 1.2rem 1rem 0.25rem;
		}

		.golive-form-title {
			display: block;
			margin: 0 0 1rem;
			font-size: 0.72rem;
			font-weight: 700;
			letter-spacing: 0.1em;
			text-transform: uppercase;
			color: var(--clr-fog-400);
		}

		.golive-ticket__body form {
			gap: 0.75rem;
		}

		.golive-ticket__body label {
			font-size: 0.9rem;
			font-weight: 600;
		}

		.golive-ticket__body label.required {
			display: grid;
			grid-template-columns: max-content 1fr;
			align-items: center;
			column-gap: 0.2rem;
		}

		.golive-ticket__body label.required::after {
			grid-column: 2;
			grid-row: 1;
			margin-inline-start: 0;
		}

		.golive-ticket__body label small {
			display: block;
			grid-column: 1 / -1;
			grid-row: 2;
			margin-block-start: 0.2rem;
			font-size: 0.74rem;
			font-weight: 400;
			line-height: 1.35;
			color: var(--clr-fog-400);
		}

		.golive-ticket__body label[for="form__event-message"]::after {
			content: "Optional";
			float: right;
			padding: 0.15rem 0.45rem;
			border-radius: 999px;
			background: #f1efe8;
			font-size: 0.66rem;
			font-weight: 600;
			letter-spacing: 0.04em;
			text-transform: uppercase;
			color: var(--clr-fog-400);
		}

		.golive-ticket__body input:not([type="hidden"]),
		.golive-ticket__body textarea {
			min-height: 3.4rem;
			padding-inline: 0.95rem;
			border-color: color-mix(in srgb, var(--clr-line-400) 88%, var(--clr-black-400));
			border-radius: 14px;
			background: #faf9f6;
			font-size: 1rem;
		}

		.golive-ticket__body textarea {
			padding-block: 0.85rem;
			line-height: 1.45;
		}

		.golive-ticket__body input:not([type="hidden"]):focus,
		.golive-ticket__body textarea:focus {
			background: var(--clr-white-400);
			box-shadow: 0 0 0 3px color-mix(in srgb, var(--clr-accent-400) 12%, transparent);
		}

		.golive-ticket__body .bag:has(.error:empty):not(:has([data-char-count-for])) {
			display: none;
		}

		.golive-ticket__body [data-char-count-for] {
			font-size: 0.7rem;
			color: var(--clr-fog-400);
		}

		.golive-form-note {
			margin-block-start: 0.35rem;
			padding: 0.7rem 0.85rem;
			border-radius: 12px;
			background: #faf9f6;
			font-size: 0.78rem;
			line-height: 1.45;
		}

		.golive-perf {
			display: none;
		}

		.golive-stub {
			margin: 0.75rem -1rem -0.25rem;
			padding: 1.15rem 1rem 1.35rem;
			border-top: 8px solid var(--clr-background-400);
			background: var(--clr-white-400);
		}

		.golive-stub__price {
			margin-block-end: 0;
			padding: 0.85rem 0.9rem;
			border: 1px solid var(--clr-line-400);
			border-radius: 14px;
			background: #faf9f6;
		}

		.golive-stub__price strong {
			font-size: 1.1rem;
		}

		.golive-cta {
			display: none;
		}

		.golive-stub__note {
			margin-block-start: 0.75rem;
			font-size: 0.74rem;
			line-height: 1.45;
		}

		.golive-stub .retention-notice {
			margin-block-start: 0.9rem;
			padding: 0.8rem 0.9rem;
			border-radius: 12px;
			background: color-mix(in srgb, var(--clr-flash-400) 8%, var(--clr-background-400));
			font-size: 0.74rem;
			line-height: 1.45;
		}

		.golive-mobile-bar {
			position: fixed;
			z-index: 60;
			inset-inline: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 1rem;
			padding: 0.7rem max(0.875rem, env(safe-area-inset-right, 0px)) calc(0.7rem + env(safe-area-inset-bottom, 0px)) max(0.875rem, env(safe-area-inset-left, 0px));
			background: color-mix(in srgb, var(--clr-white-400) 97%, transparent);
			border-top: 1px solid var(--clr-line-400);
			box-shadow: 0 -8px 24px -18px rgba(21, 24, 26, 0.45);
			backdrop-filter: blur(16px);
		}

		.golive-mobile-bar__price {
			display: flex;
			flex-direction: column;
			line-height: 1.1;
		}

		.golive-mobile-bar__price strong {
			font-family: var(--ff-display);
			font-size: 1.05rem;
			color: var(--clr-black-400);
		}

		.golive-mobile-bar__price small {
			margin-block-start: 0.15rem;
			font-size: 0.72rem;
			color: var(--clr-fog-400);
		}

		.golive-mobile-bar button {
			margin: 0;
			min-height: 3rem;
			padding: 0.72rem 1.15rem;
			border-radius: 999px;
			font-size: 0.9rem;
			font-weight: 700;
			white-space: nowrap;
		}
	}

	.event-settings {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
		max-width: 32rem;
	}

	.event-settings__panel {
		background: var(--clr-white-400);
		border: 1px solid var(--clr-line-400);
		border-radius: calc(var(--border-radius) * 1.5);
		padding: 1.5rem;
	}

	.event-settings__panel form {
		gap: 1.1rem;
	}

	.event-settings__pause p {
		color: var(--clr-fog-400);
		margin: 0.5rem 0 0;
	}

	.event-settings__pause-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
	}

	.event-settings__passcode-value {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 1rem;
		width: 100%;
		margin: 0.5rem 0 0;
		padding: 0;
		background: none;
		text-align: left;
		cursor: pointer;
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
	}

	.event-settings__passcode-value > span:first-child {
		font-family: monospace;
		font-size: 1.5rem;
		letter-spacing: 0.15em;
		color: var(--clr-black-400);
	}

	.event-settings__passcode-indicator {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		flex-shrink: 0;
		font-family: var(--ff-code);
		font-size: 0.7rem;
		letter-spacing: 0.03em;
		text-transform: uppercase;
		color: var(--clr-fog-400);
	}

	.event-settings__passcode-indicator-icon {
		flex-shrink: 0;
	}

	.event-settings__passcode-indicator-icon--check {
		display: none;
	}

	.event-settings__passcode-value.is-copied .event-settings__passcode-indicator-icon--copy {
		display: none;
	}

	.event-settings__passcode-value.is-copied .event-settings__passcode-indicator-icon--check {
		display: inline-flex;
	}

	.event-settings__passcode-value.is-copied .event-settings__passcode-indicator {
		color: var(--clr-accent-400);
	}

	.event-toggle {
		display: inline-flex;
		flex-shrink: 0;
		padding: 0;
		background: none;
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
	}

	.event-toggle:active {
		transform: scale(0.96);
	}

	.event-toggle__track {
		position: relative;
		width: 46px;
		height: 27px;
		border-radius: 999px;
		background: var(--clr-line-400);
		transition: background 0.15s ease;
	}

	.event-toggle--live .event-toggle__track {
		background: var(--clr-accent-400);
	}

	.event-toggle__thumb {
		position: absolute;
		top: 2px;
		left: 2px;
		width: 23px;
		height: 23px;
		border-radius: 50%;
		background: var(--clr-white-400);
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
		transition: transform 0.15s ease;
	}

	.event-toggle--live .event-toggle__thumb {
		transform: translateX(19px);
	}

	.event-settings__save-bar {
		display: none;
	}

	.event-settings__status {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		font-size: 0.72rem;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		padding: 0.3rem 0.6rem;
		border-radius: var(--border-radius);
	}

	.event-settings__status::before {
		content: "";
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: currentColor;
	}

	.event-settings__status--live {
		background: var(--clr-info-100);
		color: var(--clr-info-400);
	}

	.event-settings__status--paused {
		background: var(--clr-warning-100);
		color: var(--clr-rust-400);
	}

	/* On phones the three cards read as one native grouped settings list, and
	   Save moves to a thumb-reachable bar fixed to the bottom of the screen
	   instead of the end of a form that may be scrolled out of view. */
	@media screen and (max-width: 779px) {
		.event-settings {
			width: 100%;
			max-width: none;
			gap: 0;
			padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 5.5rem);
		}

		.event-settings__panel {
			width: 100%;
			border-radius: 0;
			border-block-end: none;
		}

		.event-settings__panel:first-child {
			border-start-start-radius: 14px;
			border-start-end-radius: 14px;
		}

		.event-settings__panel:last-child {
			border-block-end: 1px solid var(--clr-line-400);
			border-end-start-radius: 14px;
			border-end-end-radius: 14px;
		}

		.event-settings__save-button {
			display: none;
		}

		.event-settings__save-bar {
			position: fixed;
			inset-inline: 0;
			bottom: 0;
			z-index: 30;
			display: flex;
			background: color-mix(in srgb, var(--clr-background-400) 97%, transparent);
			backdrop-filter: blur(10px);
			border-top: 1px solid var(--clr-line-400);
			padding: 0.85rem 1.25rem calc(env(safe-area-inset-bottom, 0px) + 0.85rem);
			box-shadow: 0 -16px 30px -20px rgba(33, 27, 18, 0.3);
		}

		.event-settings__save-bar .btn {
			width: 100%;
			justify-content: center;
			padding-block: 0.85rem;
			border-radius: 999px;
			font-size: 1rem;
			font-weight: 600;
			touch-action: manipulation;
			-webkit-tap-highlight-color: transparent;
			transition: transform 0.15s ease;
		}

		.event-settings__save-bar .btn:active {
			transform: scale(0.98);
		}
	}

	body.app-shell {
		--app-bottom-nav-height: calc(4.5rem + env(safe-area-inset-bottom, 0px));
		padding-inline: 0;
	}

	.app-shell__frame {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}

	.app-topbar {
		position: sticky;
		top: 0;
		z-index: 38;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		padding: 0.85rem 1rem;
		padding-top: calc(env(safe-area-inset-top, 0px) + 0.85rem);
		background: color-mix(in srgb, var(--clr-background-400) 92%, transparent);
		backdrop-filter: blur(10px);
		border-bottom: 1px solid var(--clr-line-400);
	}

	.app-topbar__brand {
		font-size: 1rem;
	}

	.app-bottom-nav {
		display: none;
	}

	/* The toggle escapes the topbar's stacking context so it stays tappable
	   and on top even once the full-screen sheet below covers the topbar. */
	.app-topbar .nav-toggle {
		position: fixed;
		top: calc(env(safe-area-inset-top, 0px) + 0.6rem);
		right: 1rem;
		z-index: 41;
		width: 3rem;
		height: 3rem;
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
	}

	.app-topbar .nav-toggle[aria-expanded="true"]:hover,
	.app-topbar .nav-toggle[aria-expanded="true"]:focus-visible {
		background: color-mix(in srgb, var(--clr-accent-contrast-400) 12%, transparent);
	}

	.app-topbar .nav-toggle[aria-expanded="true"] .nav-toggle-bars,
	.app-topbar .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before,
	.app-topbar .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after {
		background: var(--clr-accent-contrast-400);
	}

	.app-sidebar {
		position: fixed;
		inset: 0;
		z-index: 40;
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
		width: 100%;
		height: 100vh;
		height: 100dvh;
		padding: 1.5rem 1.25rem;
		background: var(--clr-white-400);
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		transform: translateY(100%);
		transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
	}

	.app-sidebar.is-open {
		transform: translateY(0);
	}

	.app-sidebar__brand {
		padding-block: 0;
	}

	.app-sidebar__nav {
		display: flex;
		flex-direction: column;
		gap: 1.1rem;
	}

	.app-sidebar__nav ul {
		display: flex;
		flex-direction: column;
		gap: 0.15rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.app-sidebar__group {
		display: flex;
		flex-direction: column;
		gap: 0.35rem;
	}

	.app-sidebar__group-label {
		padding-inline: 0.7rem;
		font-size: 0.7rem;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--clr-fog-400);
		opacity: 0.75;
	}

	.app-sidebar__link {
		display: flex;
		align-items: center;
		gap: 0.7rem;
		padding: 0.55rem 0.7rem;
		border-radius: var(--border-radius);
		color: var(--clr-fog-400);
		font-weight: 600;
		font-size: 0.92rem;
		text-decoration: none;
		transition: background 0.15s ease, color 0.15s ease;
	}

	.app-sidebar__link svg {
		flex: none;
		opacity: 0.8;
	}

	.app-sidebar__link-copy {
		display: flex;
		flex-direction: column;
	}

	.app-sidebar__link-description {
		display: none;
	}

	.app-sidebar__link:hover {
		background: var(--clr-background-400);
		color: var(--clr-black-400);
	}

	.app-sidebar__link--active {
		background: var(--clr-accent-100);
		color: var(--clr-accent-400);
	}

	.app-sidebar__link--active svg {
		opacity: 1;
	}

	.app-sidebar__link--active:hover {
		background: var(--clr-accent-100);
		color: var(--clr-accent-400);
	}

	.app-sidebar__footer {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 0.5rem 1rem;
		padding-top: 1rem;
		border-top: 1px solid var(--clr-line-400);
	}

	.app-sidebar__support {
		flex-basis: 100%;
		font-size: 0.85rem;
	}

	.app-sidebar__business {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		min-width: 0;
		font-family: var(--ff-code);
		font-size: 0.78rem;
		color: var(--clr-fog-400);
	}

	.app-sidebar__business-mark {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: var(--clr-accent-400);
		flex: none;
	}

	.app-sidebar__business-name {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		min-width: 0;
	}

	.app-sidebar__signout {
		display: block;
		font-size: 0.8rem;
		color: var(--clr-fog-400);
		text-decoration: none;
		flex: none;
		white-space: nowrap;
	}

	.app-sidebar__signout:hover {
		color: var(--clr-black-400);
	}

	.app-main {
		padding: 1.75rem 1rem calc(env(safe-area-inset-bottom, 0px) + 3rem);
		max-width: 1100px;
		margin-inline: auto;
		width: 100%;
	}

	.dash-head {
		margin-block-end: 1.75rem;
	}

	.dash-head h1 {
		font-size: clamp(1.5rem, 3vw, 1.9rem);
		letter-spacing: -0.02em;
		margin: 0 0 0.4rem;
	}

	.dash-head .dash-head__eyebrow {
		margin-block-end: 0.35rem;
		font-family: var(--ff-code);
		font-size: 0.68rem;
		font-weight: 600;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	.dash-head p {
		color: var(--clr-fog-400);
		margin: 0;
	}

	.dash-head__status {
		display: flex;
		flex-wrap: wrap;
		gap: 0.45rem;
		margin-block-start: 0.8rem;
	}

	.dash-status {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		padding: 0.25rem 0.55rem;
		border-radius: 999px;
		background: var(--clr-accent-100);
		color: var(--clr-accent-800);
		font-family: var(--ff-code);
		font-size: 0.66rem;
		font-weight: 600;
		letter-spacing: 0.035em;
		text-transform: uppercase;
	}

	a.dash-status {
		text-decoration: none;
	}

	a.dash-status:hover {
		text-decoration: underline;
	}

	.dash-status::before {
		content: "";
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background: currentColor;
	}

	.dash-status--private,
	.dash-status--unprotected {
		background: var(--clr-background-400);
		color: var(--clr-fog-400);
	}

	.dash-status--paused,
	.dash-status--closed {
		background: color-mix(in srgb, var(--clr-rust-400) 11%, var(--clr-white-400));
		color: var(--clr-rust-400);
	}

	.dash-panel {
		background: var(--clr-white-400);
		border: 1px solid var(--clr-line-400);
		border-radius: calc(var(--border-radius) * 1.5);
		overflow: hidden;
	}

	.dash-panel__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0.9rem 1.25rem;
		border-bottom: 1px solid var(--clr-line-400);
		font-family: var(--ff-code);
		font-size: 0.72rem;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--clr-fog-400);
	}

	.dash-panel__dot {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: var(--clr-accent-400);
		display: inline-block;
		margin-inline-end: 0.4rem;
	}

	.dash-panel__body {
		padding: 1.75rem;
	}

	.btn--alt.is-active {
		background: var(--clr-accent-100);
		color: var(--clr-accent-400);
	}

	.dash-panel__body form {
		gap: 1.1rem;
	}

	.dash-assistant__form {
		gap: 0.4rem;
	}

	.dash-assistant__composer {
		display: flex;
		align-items: flex-end;
		gap: 0.5rem;
		background: var(--clr-background-400);
		border: 1px solid transparent;
		border-radius: 1.1rem;
		padding: 0.5rem 0.5rem 0.5rem 1rem;
		transition: border-color 150ms ease, box-shadow 150ms ease;
	}

	.dash-assistant__composer:focus-within {
		border-color: var(--clr-accent-400);
		box-shadow: 0 0 0 3px var(--clr-accent-100);
	}

	.dash-assistant__composer.invalid {
		border-color: var(--clr-rust-400);
	}

	.dash-assistant__input {
		flex: 1;
		min-width: 0;
		resize: none;
		max-height: 220px;
		border: none;
		background: transparent;
		padding: 0.35rem 0;
		line-height: 1.4;
	}

	.dash-assistant__input:focus {
		outline: none;
	}

	.dash-assistant__input::placeholder {
		color: var(--clr-fog-400);
	}

	.dash-assistant__send {
		flex: none;
		display: grid;
		place-items: center;
		width: 2.15rem;
		height: 2.15rem;
		padding: 0;
		border-radius: 50%;
		background: var(--clr-accent-400);
		color: var(--clr-accent-contrast-400);
	}

	.dash-assistant__send:hover {
		background: var(--clr-accent-800);
	}

	.dash-panel__actions {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-block-start: 0.5rem;
	}

	.dash-assistant__turns .dash-assistant-turn:first-child {
		margin-block-start: 1.25rem;
		padding-block-start: 1.25rem;
		border-top: 1px solid var(--clr-line-400);
	}

	.dash-assistant__turns .dash-assistant-turn + .dash-assistant-turn {
		margin-block-start: 1rem;
		padding-block-start: 1rem;
		border-top: 1px dashed var(--clr-line-400);
	}

	.dash-assistant-turn__question {
		color: var(--clr-fog-400);
		font-style: italic;
		margin: 0 0 0.5rem;
	}

	.dash-assistant-turn__answer {
		margin: 0;
		white-space: pre-wrap;
	}

	.dash-assistant-turn__answer.error {
		color: var(--clr-rust-400);
	}

	.dash-assistant-turn__sources {
		margin: 0.4rem 0 0;
		font-size: 0.75rem;
		color: var(--clr-fog-400);
	}

	.dash-empty {
		padding: 3rem 1.5rem;
		text-align: center;
	}

	.dash-empty__icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		height: 2.75rem;
		border-radius: 10px;
		background: var(--clr-accent-100);
		color: var(--clr-accent-400);
		margin-block-end: 1rem;
	}

	.dash-empty h2 {
		font-size: 1.05rem;
		margin: 0 0 0.4rem;
	}

	.dash-empty p {
		color: var(--clr-fog-400);
		max-width: 40ch;
		margin: 0 auto;
	}

	.dash-empty--page {
		padding-block: 5rem;
	}

	.dash-stub-pill {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		font-family: var(--ff-code);
		font-size: 0.68rem;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		color: var(--clr-rust-400);
		background: color-mix(in srgb, var(--clr-rust-400) 12%, var(--clr-white-400));
		padding: 0.25rem 0.55rem;
		border-radius: 5px;
		margin-block-start: 1.1rem;
	}

	.dash-stats {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		gap: 1rem;
		margin-block: 1.5rem;
	}

	.dash-stat {
		display: flex;
		flex-direction: column;
		gap: 0.45rem;
		background: var(--clr-white-400);
		border: 1px solid var(--clr-line-400);
		border-radius: calc(var(--border-radius) * 1.5);
		padding: 1.1rem 1.25rem 1.25rem;
	}

	.dash-stat--link {
		color: inherit;
		text-decoration: none;
		cursor: pointer;
		transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
	}

	.dash-stat--link:hover {
		border-color: var(--clr-accent-400);
		box-shadow: 0 8px 22px color-mix(in srgb, var(--clr-accent-400) 10%, transparent);
		transform: translateY(-2px);
	}

	.dash-stat--link:focus-visible {
		outline: 3px solid color-mix(in srgb, var(--clr-accent-400) 35%, transparent);
		outline-offset: 2px;
	}

	.dash-stat__head {
		display: flex;
		align-items: center;
		gap: 0.4rem;
		font-family: var(--ff-code);
		font-size: 0.68rem;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--clr-fog-400);
	}

	.dash-stat__dot {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: var(--clr-accent-400);
		display: inline-block;
		flex: none;
		animation: ob-pulse 2.2s ease-in-out infinite;
	}

	.dash-stat__icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		color: var(--clr-accent-400);
	}

	.dash-stat--expiry .dash-stat__icon {
		color: var(--clr-rust-400);
	}

	.dash-stat__value {
		font-size: 1.85rem;
		font-weight: 700;
		letter-spacing: -0.02em;
	}

	.dash-stat__value--date {
		font-size: clamp(1.25rem, 2.2vw, 1.55rem);
		line-height: 1.2;
	}

	.dash-stat--stub .dash-stat__value {
		color: var(--clr-fog-400);
	}

	.dash-stat--stub .dash-stub-pill {
		margin-block-start: 0.1rem;
	}

	.dash-stat__meta {
		font-size: 0.8rem;
		color: var(--clr-fog-400);
	}

	.dash-stat__action {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.5rem;
		margin-block-start: auto;
		padding-block-start: 0.3rem;
		font-size: 0.78rem;
		font-weight: 600;
		color: var(--clr-accent-400);
	}

	.dash-stat__delta-row {
		display: flex;
		align-items: baseline;
		gap: 0.4rem;
	}

	.dash-stat__delta {
		font-family: var(--ff-code);
		font-size: 0.8rem;
		font-weight: 600;
	}

	.dash-stat__delta--good {
		color: var(--clr-accent-400);
	}

	.dash-stat__delta--bad {
		color: var(--clr-rust-400);
	}

	.dash-stat__delta--neutral {
		color: var(--clr-fog-400);
	}

	.dash-stat__submeta {
		font-family: var(--ff-code);
		font-size: 0.72rem;
		color: var(--clr-fog-400);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.account-menu {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
		max-width: 560px;
	}

	.account-menu__item {
		display: flex;
		align-items: center;
		gap: 1rem;
		background: var(--clr-white-400);
		border: 1px solid var(--clr-line-400);
		border-radius: calc(var(--border-radius) * 1.5);
		padding: 1.1rem 1.25rem;
		color: inherit;
		text-decoration: none;
		transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
	}

	.account-menu__item:hover {
		border-color: var(--clr-accent-400);
		box-shadow: 0 8px 22px color-mix(in srgb, var(--clr-accent-400) 10%, transparent);
		transform: translateY(-2px);
	}

	.account-menu__item:focus-visible {
		outline: 3px solid color-mix(in srgb, var(--clr-accent-400) 35%, transparent);
		outline-offset: 2px;
	}

	.account-menu__icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: 2.5rem;
		height: 2.5rem;
		border-radius: 50%;
		background: var(--clr-background-400);
		color: var(--clr-accent-400);
	}

	.account-menu__body {
		display: flex;
		flex-direction: column;
		gap: 0.2rem;
		min-width: 0;
	}

	.account-menu__label {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		font-weight: 600;
	}

	.account-menu__pill {
		display: inline-flex;
		align-items: center;
		gap: 0.35rem;
		font-family: var(--ff-code);
		font-size: 0.66rem;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		padding: 0.15rem 0.5rem;
		border-radius: var(--border-radius);
		background: var(--clr-info-100);
		color: var(--clr-info-400);
	}

	.account-menu__pill::before {
		content: "";
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background: currentColor;
	}

	.account-menu__desc {
		font-size: 0.85rem;
		color: var(--clr-fog-400);
	}

	.account-menu__chevron {
		margin-inline-start: auto;
		flex: none;
		color: var(--clr-fog-400);
	}

	.qr-workspace {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
		align-items: start;
		gap: clamp(1.25rem, 4vw, 3rem);
	}

	.qr-preview {
		min-width: 0;
	}

	.qr-preview__head {
		display: flex;
		align-items: end;
		justify-content: space-between;
		gap: 1rem;
		margin-block-end: 1rem;
	}

	.qr-preview__head h2 {
		margin: 0;
		font-size: 1.35rem;
	}

	.qr-preview__size {
		font-family: var(--ff-code);
		font-size: 0.7rem;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--clr-fog-400);
	}

	.qr-print-sheet {
		display: grid;
		place-items: center;
		padding: clamp(1rem, 4vw, 2.5rem);
		border: 1px solid var(--clr-line-400);
		border-radius: calc(var(--border-radius) * 2);
		background-color: #ddd8cc;
		background-image: radial-gradient(color-mix(in srgb, var(--clr-black-400) 9%, transparent) 0.7px, transparent 0.7px);
		background-size: 5px 5px;
	}

	.qr-table-card {
		position: relative;
		display: flex;
		width: min(100%, 105mm);
		min-height: 148mm;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		padding: 12mm 10mm 10mm;
		border: 1px solid #c9bfae;
		background: #fffdf8;
		color: #1c332d;
		box-shadow: 0 18px 45px color-mix(in srgb, var(--clr-black-400) 18%, transparent);
		text-align: center;
		box-sizing: border-box;
	}

	.qr-table-card::before {
		content: "";
		position: absolute;
		inset: 5mm;
		border: 1px solid #d8cfbf;
		pointer-events: none;
	}

	.qr-table-card__ornament {
		position: relative;
		z-index: 1;
		margin-block-end: 3mm;
		color: #a67c52;
		font-size: 0.9rem;
	}

	.qr-table-card__ornament--bottom {
		margin: 3mm 0 0;
	}

	.qr-table-card__eyebrow {
		position: relative;
		z-index: 1;
		margin: 0 0 2mm;
		font-family: var(--ff-code);
		font-size: 0.58rem;
		font-weight: 700;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: #826a51;
	}

	.qr-table-card h2 {
		position: relative;
		z-index: 1;
		margin: 0;
		font-family: var(--ff-display);
		font-size: clamp(1.7rem, 5vw, 2.4rem);
		font-weight: 500;
		letter-spacing: -0.03em;
		line-height: 1;
	}

	.qr-table-card__event {
		position: relative;
		z-index: 1;
		margin: 2.5mm 0 5mm;
		font-family: var(--ff-display);
		font-size: 0.9rem;
		font-style: italic;
		color: #6e736c;
	}

	.qr-table-card__code {
		position: relative;
		z-index: 1;
		display: block;
		width: 52mm;
		height: 52mm;
		background: #fff;
	}

	.qr-table-card__instruction {
		position: relative;
		z-index: 1;
		max-width: 36ch;
		margin: 4mm 0 3mm;
		font-size: 0.72rem;
		line-height: 1.5;
		color: #4f5c57;
	}

	.qr-table-card__passcode {
		position: relative;
		z-index: 1;
		display: inline-flex;
		align-items: center;
		gap: 2mm;
		padding: 1.8mm 3mm;
		border: 1px solid #d8cfbf;
		border-radius: 999px;
		font-family: var(--ff-code);
		font-size: 0.6rem;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}

	.qr-table-card__passcode strong {
		font-size: 0.74rem;
		letter-spacing: 0.12em;
		color: #1c332d;
	}

	.qr-table-card__url {
		position: relative;
		z-index: 1;
		max-width: 76mm;
		margin: 3mm 0 0;
		overflow-wrap: anywhere;
		font-family: var(--ff-code);
		font-size: 0.5rem;
		color: #7b817c;
	}

	.qr-actions {
		padding: 1.4rem;
		border: 1px solid var(--clr-line-400);
		border-radius: calc(var(--border-radius) * 1.5);
		background: var(--clr-white-400);
	}

	.qr-actions h2 {
		margin: 0 0 0.45rem;
		font-size: 1.15rem;
	}

	.qr-actions > p {
		margin: 0 0 1.2rem;
		color: var(--clr-fog-400);
		font-size: 0.88rem;
	}

	.qr-print-button,
	.qr-download {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		box-sizing: border-box;
		text-align: center;
	}

	.qr-download {
		margin-block-start: 0.65rem;
		text-decoration: none;
	}

	.qr-tips {
		display: grid;
		gap: 0.7rem;
		margin: 1.3rem 0 0;
		padding: 1.1rem 0 0 1.1rem;
		border-top: 1px solid var(--clr-line-400);
		color: var(--clr-fog-400);
		font-size: 0.78rem;
		line-height: 1.45;
	}

	@media (max-width: 820px) {
		.qr-workspace {
			grid-template-columns: 1fr;
		}

		.qr-actions {
			order: -1;
		}
	}

	.dash-share {
		display: block;
		width: 100%;
		text-align: left;
		background: var(--clr-white-400);
		border: 1px solid var(--clr-line-400);
		border-radius: calc(var(--border-radius) * 1.5);
		padding: 1.25rem 1.4rem 1.4rem;
		margin-block: 1.5rem;
		cursor: pointer;
		transition: border-color 150ms ease, box-shadow 150ms ease, transform 100ms ease;
	}

	.dash-share:hover {
		border-color: var(--clr-accent-400);
		box-shadow: 0 0 0 3px var(--clr-accent-100);
	}

	.dash-share:active {
		transform: scale(0.995);
	}

	.dash-share__label {
		display: block;
		font-size: 0.72rem;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--clr-fog-400);
		margin-block-end: 0.6rem;
	}

	.dash-share__text {
		font-family: var(--ff-display);
		font-style: italic;
		font-size: 0.95rem;
		line-height: 1.5;
		color: var(--clr-black-400);
		margin: 0 0 0.9rem;
		white-space: pre-line;
	}

	.dash-share__indicator {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		font-family: var(--ff-code);
		font-size: 0.7rem;
		line-height: 1;
		letter-spacing: 0.03em;
		text-transform: uppercase;
		color: var(--clr-fog-400);
	}

	.dash-share__indicator-icon {
		display: block;
		flex: none;
	}

	.dash-share__indicator-icon--check {
		display: none;
	}

	.dash-share.is-copied .dash-share__indicator-icon--copy {
		display: none;
	}

	.dash-share.is-copied .dash-share__indicator-icon--check {
		display: inline-flex;
	}

	.dash-share.is-copied .dash-share__indicator {
		color: var(--clr-accent-400);
	}

	.dash-share.is-copy-error .dash-share__indicator {
		color: var(--clr-rust-400);
	}

	.dash-gallery-cta {
		display: block;
		width: 100%;
		text-align: left;
		text-decoration: none;
		background: var(--clr-white-400);
		border: 1px solid var(--clr-line-400);
		border-radius: calc(var(--border-radius) * 1.5);
		padding: 1.25rem 1.4rem 1.4rem;
		margin-block: 1.5rem;
		transition: border-color 150ms ease, box-shadow 150ms ease, transform 100ms ease;
	}

	.dash-gallery-cta:hover {
		border-color: var(--clr-accent-400);
		box-shadow: 0 0 0 3px var(--clr-accent-100);
	}

	.dash-gallery-cta:focus-visible {
		outline: 3px solid color-mix(in srgb, var(--clr-accent-400) 35%, transparent);
		outline-offset: 2px;
	}

	.dash-gallery-cta:active {
		transform: scale(0.995);
	}

	.dash-gallery-cta__label {
		display: block;
		font-size: 0.72rem;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--clr-fog-400);
		margin-block-end: 0.6rem;
	}

	.dash-gallery-cta__title {
		display: block;
		font-family: var(--ff-display);
		font-size: 1.05rem;
		line-height: 1.4;
		color: var(--clr-black-400);
		margin-block-end: 0.35rem;
	}

	.dash-gallery-cta__body {
		display: block;
		font-size: 0.9rem;
		line-height: 1.55;
		color: var(--clr-fog-400);
		margin-block-end: 0.9rem;
	}

	.dash-gallery-cta__action {
		display: inline-flex;
		align-items: center;
		gap: 0.35rem;
		font-size: 0.82rem;
		font-weight: 600;
		color: var(--clr-accent-400);
	}

	.photo-section {
		margin-block: 2rem;
	}

	.photo-section__head {
		display: flex;
		align-items: end;
		justify-content: space-between;
		gap: 1rem;
		margin-block-end: 1rem;
	}

	.photo-section__eyebrow {
		font-family: var(--ff-code);
		font-size: 0.68rem;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		color: var(--clr-fog-400);
		margin: 0 0 0.35rem;
	}

	.photo-section h2 {
		font-size: 1.35rem;
		margin: 0;
	}

	.photo-section__view-all, .photo-back-link {
		font-family: var(--ff-code);
		font-size: 0.72rem;
		font-weight: 600;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--clr-black-400);
		text-decoration: none;
	}

	.photo-section__view-all:hover, .photo-back-link:hover {
		color: var(--clr-accent-400);
	}

	.photo-section__empty {
		padding: 1.25rem;
		background: var(--clr-white-400);
		border: 1px dashed var(--clr-line-400);
		border-radius: calc(var(--border-radius) * 1.5);
		color: var(--clr-fog-400);
		margin: 0;
	}

	.photo-section__empty p {
		margin: 0;
	}

	.photo-section__empty-actions {
		display: flex;
		flex-wrap: wrap;
		gap: 0.65rem;
		margin-block-start: 1rem;
	}

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

	.photo-grid--all {
		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	}

	.upload-selection-bar {
		position: sticky;
		top: 0.75rem;
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		margin-block-end: 1rem;
		padding: 0.7rem;
		border: 1px solid color-mix(in srgb, var(--clr-line-400) 80%, transparent);
		border-radius: calc(var(--border-radius) * 1.5);
		background: color-mix(in srgb, var(--clr-white-400) 92%, transparent);
		box-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--clr-black-400) 8%, transparent);
		backdrop-filter: blur(12px);
	}

	.upload-selection-bar__status {
		display: flex;
		align-items: center;
		gap: 0.85rem;
		color: var(--clr-fog-400);
		font-family: var(--ff-code);
		font-size: 0.75rem;
	}

	.upload-selection-bar__toggle {
		white-space: nowrap;
	}

	.upload-selection-bar__actions {
		display: flex;
		align-items: center;
		gap: 0.55rem;
	}

	.upload-selection-bar__delete {
		display: inline-flex;
		align-items: center;
		min-height: 2.75rem;
		gap: 0.4rem;
		border: 1px solid color-mix(in srgb, var(--clr-error-400) 45%, transparent);
		background: transparent;
		color: var(--clr-error-400);
	}

	.upload-selection-bar__delete:hover:not(:disabled) {
		background: color-mix(in srgb, var(--clr-error-400) 12%, transparent);
	}

	.upload-selection-bar__delete:disabled {
		opacity: 0.5;
	}

	.delete-confirmation {
		width: min(420px, calc(100vw - 2rem));
		max-width: none;
		padding: clamp(1.25rem, 4vw, 1.75rem);
		border: 1px solid var(--clr-line-400);
		border-radius: calc(var(--border-radius) * 1.5);
		background: var(--clr-white-400);
		box-shadow: 0 1.5rem 4rem color-mix(in srgb, var(--clr-black-400) 28%, transparent);
		color: var(--clr-black-400);
	}

	.delete-confirmation::backdrop {
		background: color-mix(in srgb, var(--clr-black-400) 58%, transparent);
		backdrop-filter: blur(3px);
	}

	.delete-confirmation__icon {
		display: grid;
		width: 2.75rem;
		height: 2.75rem;
		place-items: center;
		margin-block-end: 1rem;
		border-radius: 999px;
		background: color-mix(in srgb, var(--clr-error-400) 12%, transparent);
		color: var(--clr-error-400);
	}

	.delete-confirmation__icon svg {
		width: 1.25rem;
		height: 1.25rem;
	}

	.delete-confirmation__copy h2 {
		margin: 0 0 0.5rem;
		font-size: clamp(1.35rem, 5vw, 1.65rem);
	}

	.delete-confirmation__copy p {
		margin: 0;
		color: var(--clr-fog-400);
		line-height: 1.55;
	}

	.delete-confirmation__actions {
		display: flex;
		justify-content: flex-end;
		gap: 0.65rem;
		margin-block-start: 1.5rem;
	}

	.delete-confirmation__actions button {
		min-height: 3rem;
	}

	.delete-confirmation__confirm {
		background: var(--clr-error-400);
		color: var(--clr-white-400);
	}

	.delete-confirmation__confirm:hover {
		background: color-mix(in srgb, var(--clr-error-400) 84%, var(--clr-black-400));
	}

	@media (max-width: 420px) {
		.delete-confirmation__actions {
			flex-direction: column-reverse;
		}

		.delete-confirmation__actions button {
			width: 100%;
		}
	}

	.download-set {
		display: grid;
		gap: 1.2rem;
		max-width: 760px;
		padding: clamp(1rem, 3vw, 2rem);
		border: 1px solid var(--clr-line-400);
		border-radius: calc(var(--border-radius) * 2);
		background: var(--clr-white-400);
	}

	.download-set__summary {
		display: flex;
		justify-content: space-between;
		gap: 1rem;
		padding-block-end: 1rem;
		border-bottom: 1px solid var(--clr-line-400);
	}

	.download-set__parts {
		display: grid;
		gap: 0.7rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.download-set__part {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: 1rem;
		border-radius: var(--border-radius);
		background: var(--clr-mist-400);
	}

	.download-set__part div,
	.download-set__part span {
		display: block;
	}

	.download-set__part span,
	.download-set__expiry {
		color: var(--clr-fog-400);
		font-size: 0.85rem;
	}

	.photo-card {
		position: relative;
		aspect-ratio: 1;
		overflow: hidden;
		border-radius: var(--border-radius);
		background: var(--clr-line-400);
	}

	.photo-card__media {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.photo-card__video-placeholder {
		background: var(--clr-line-400);
	}

	.photo-card__preview {
		position: absolute;
		inset: 0;
		z-index: 1;
		padding: 0;
		border: 0;
		background: transparent;
		cursor: zoom-in;
	}

	.photo-card__preview:focus-visible {
		outline: 3px solid var(--clr-accent-400);
		outline-offset: -3px;
	}

	.photo-card__video-icon {
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 1;
		display: grid;
		width: 4rem;
		height: 4rem;
		place-items: center;
		color: #3B4A34;
		transform: translate(-50%, -50%);
		pointer-events: none;
	}

	.photo-card--selected {
		box-shadow: inset 0 0 0 4px var(--clr-accent-400);
	}

	.photo-card--selected .photo-card__media {
		transform: scale(0.98);
	}

	.photo-card__select {
		position: absolute;
		top: 0.55rem;
		right: 0.55rem;
		z-index: 3;
		display: grid;
		width: 2rem;
		height: 2rem;
		place-items: center;
		border-radius: 999px;
		background: color-mix(in srgb, var(--clr-white-400) 90%, transparent);
		box-shadow: 0 0.15rem 0.5rem color-mix(in srgb, var(--clr-black-400) 25%, transparent);
		cursor: pointer;
	}

	.photo-card__select input {
		width: 1.1rem;
		height: 1.1rem;
		margin: 0;
		accent-color: var(--clr-accent-400);
		cursor: pointer;
	}

	.photo-card__processing {
		position: absolute;
		inset: 0;
		display: none;
		place-items: center;
		padding: 1rem;
		background: var(--clr-line-400);
		color: var(--clr-fog-400);
		font-size: 0.75rem;
		text-align: center;
	}

	.photo-card--processing .photo-card__processing {
		display: grid;
	}

	.photo-card__guest {
		position: absolute;
		z-index: 2;
		left: 0.55rem;
		bottom: 0.55rem;
		max-width: calc(100% - 1.1rem);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding: 0.3rem 0.5rem;
		border-radius: 999px;
		background: color-mix(in srgb, var(--clr-black-400) 72%, transparent);
		color: var(--clr-white-400);
		font-size: 0.72rem;
		line-height: 1.2;
		pointer-events: none;
	}

	.media-preview {
		width: min(92vw, 1100px);
		max-width: none;
		height: min(88vh, 800px);
		height: min(88dvh, 800px);
		max-height: calc(100dvh - 1rem);
		overflow: hidden;
		padding: 0;
		border: 0;
		border-radius: var(--border-radius);
		background: var(--clr-black-400);
		box-shadow: 0 1.5rem 4rem color-mix(in srgb, var(--clr-black-400) 45%, transparent);
	}

	.media-preview::backdrop {
		background: color-mix(in srgb, var(--clr-black-400) 78%, transparent);
	}

	.media-preview__content {
		display: grid;
		width: 100%;
		height: 100%;
		min-width: 0;
		min-height: 0;
		overflow: hidden;
		place-items: center;
	}

	.media-preview__media {
		display: block;
		width: 100%;
		height: 100%;
		min-width: 0;
		min-height: 0;
		max-width: 100%;
		max-height: 100%;
		object-fit: contain;
	}

	.media-preview__close {
		position: absolute;
		top: 0.65rem;
		right: 0.65rem;
		z-index: 1;
		display: grid;
		width: 2.25rem;
		height: 2.25rem;
		place-items: center;
		padding: 0;
		border: 0;
		border-radius: 999px;
		background: color-mix(in srgb, var(--clr-black-400) 68%, transparent);
		color: var(--clr-white-400);
		font-size: 1.75rem;
		line-height: 1;
		cursor: pointer;
	}

	.media-preview__close:hover {
		background: var(--clr-black-400);
	}

	.media-preview__delete {
		position: absolute;
		top: 0.65rem;
		left: 0.65rem;
		z-index: 2;
		display: grid;
		width: 2.75rem;
		height: 2.75rem;
		place-items: center;
		padding: 0;
		border: 0;
		border-radius: 999px;
		background: color-mix(in srgb, var(--clr-black-400) 68%, transparent);
		color: var(--clr-white-400);
		cursor: pointer;
	}

	.media-preview__delete:hover:not(:disabled) {
		background: var(--clr-error-400);
	}

	.media-preview__delete:disabled {
		opacity: 0.55;
		cursor: default;
	}

	.media-preview__count {
		position: absolute;
		top: max(0.8rem, env(safe-area-inset-top, 0px));
		left: 50%;
		z-index: 2;
		margin: 0;
		padding: 0.35rem 0.6rem;
		border-radius: 999px;
		background: color-mix(in srgb, var(--clr-black-400) 58%, transparent);
		color: var(--clr-white-400);
		font-family: var(--ff-code);
		font-size: 0.7rem;
		line-height: 1;
		transform: translateX(-50%);
		pointer-events: none;
	}

	.media-preview__nav {
		position: absolute;
		top: 50%;
		z-index: 2;
		display: grid;
		place-items: center;
		width: 2.75rem;
		height: 2.75rem;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: color-mix(in srgb, var(--clr-black-400) 64%, transparent);
		color: var(--clr-white-400);
		box-shadow: 0 0.25rem 1rem color-mix(in srgb, var(--clr-black-400) 28%, transparent);
		transform: translateY(-50%);
		cursor: pointer;
		touch-action: manipulation;
		transition: opacity 0.15s ease, background 0.15s ease;
	}

	.media-preview__nav--previous {
		left: max(0.65rem, env(safe-area-inset-left, 0px));
	}

	.media-preview__nav--next {
		right: max(0.65rem, env(safe-area-inset-right, 0px));
	}

	.media-preview__nav:hover:not(:disabled) {
		background: var(--clr-black-400);
	}

	.media-preview__nav:disabled {
		opacity: 0.24;
		cursor: default;
	}

	.media-preview__hint {
		position: absolute;
		left: 50%;
		bottom: max(0.85rem, env(safe-area-inset-bottom, 0px));
		z-index: 2;
		display: flex;
		align-items: center;
		gap: 0.5rem;
		width: max-content;
		max-width: calc(100% - 2rem);
		margin: 0;
		padding: 0.55rem 0.8rem;
		border-radius: 999px;
		background: color-mix(in srgb, var(--clr-black-400) 72%, transparent);
		color: var(--clr-white-400);
		font-family: var(--ff-code);
		font-size: 0.72rem;
		line-height: 1.2;
		transform: translateX(-50%);
		pointer-events: none;
		animation: media-preview-hint 3s ease both;
	}

	.media-preview__hint[hidden] {
		display: none;
	}

	.media-preview--has-download .media-preview__hint {
		bottom: calc(max(0.85rem, env(safe-area-inset-bottom, 0px)) + 3.25rem);
	}

	.media-preview--navigable.media-preview--image .media-preview__content {
		touch-action: pan-y;
	}

	.media-preview__download {
		position: absolute;
		left: 50%;
		bottom: 0.75rem;
		z-index: 3;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.45rem;
		min-height: 2.75rem;
		padding: 0.65rem 0.95rem;
		border: 1px solid color-mix(in srgb, var(--clr-black-400) 14%, transparent);
		border-radius: var(--border-radius);
		background: var(--clr-white-400);
		color: var(--clr-accent-800);
		box-shadow: 0 0.3rem 1.1rem color-mix(in srgb, var(--clr-black-400) 45%, transparent);
		font-family: var(--ff-code);
		font-size: 0.8rem;
		font-weight: 700;
		line-height: 1.2;
		text-decoration: none;
		transform: translateX(-50%);
		touch-action: manipulation;
		white-space: nowrap;
	}

	.media-preview__download:hover {
		background: var(--clr-accent-100);
		color: var(--clr-accent-800);
	}

	@keyframes media-preview-hint {
		0% {
			opacity: 0;
			transform: translate(-50%, 0.4rem);
		}

		12%, 78% {
			opacity: 1;
			transform: translate(-50%, 0);
		}

		100% {
			opacity: 0;
			transform: translate(-50%, 0.2rem);
		}
	}

	@media (max-width: 520px) {
		.media-preview--navigable {
			width: 100vw;
			height: 100vh;
			height: 100dvh;
			max-height: none;
			border-radius: 0;
		}

		.media-preview--navigable .media-preview__close {
			top: max(0.65rem, env(safe-area-inset-top, 0px));
			right: max(0.65rem, env(safe-area-inset-right, 0px));
		}

		.media-preview--navigable.media-preview--has-download[open] {
			display: grid;
			grid-template-rows: minmax(0, 1fr) auto;
			padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
		}

		.media-preview--navigable.media-preview--has-download .media-preview__content {
			height: auto;
		}

		.media-preview--navigable .media-preview__download {
			position: static;
			width: calc(100% - 1.5rem);
			min-height: 3.5rem;
			margin: 0.75rem auto 0;
			font-size: 1rem;
			font-weight: 700;
			transform: none;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.media-preview__nav {
			transition: none;
		}

		.media-preview__hint {
			animation: none;
		}
	}

	@media (max-width: 520px) {
		.dash-stats {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 0.65rem;
		}

		.dash-stat {
			padding: 0.85rem;
		}

		.dash-stat__value {
			font-size: 1.5rem;
		}

		.dash-stat__value--date {
			font-size: 1.05rem;
		}

		.dash-stat__meta,
		.dash-stat__action {
			font-size: 0.7rem;
		}

		.upload-selection-bar {
			top: calc(env(safe-area-inset-top, 0px) + 4.65rem);
			align-items: stretch;
			flex-direction: column;
		}

		.upload-selection-bar__status {
			justify-content: space-between;
		}

		.upload-selection-bar__actions {
			display: grid;
			grid-template-columns: 1fr 1fr;
		}

		.download-set__summary,
		.download-set__part {
			align-items: stretch;
			flex-direction: column;
		}

		.download-set__part .btn {
			text-align: center;
		}

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

	.dash-panel__foot {
		display: flex;
		justify-content: flex-end;
		padding: 0.85rem 1.25rem;
		border-top: 1px solid var(--clr-line-400);
	}

	.dash-empty--inline {
		display: flex;
		align-items: center;
		gap: 1rem;
		text-align: left;
		padding: 1.1rem 1.25rem;
	}

	.dash-empty--inline .dash-empty__icon {
		margin-block-end: 0;
		flex: none;
	}

	.dash-empty--inline h2 {
		font-size: 0.95rem;
	}

	.dash-empty--inline p {
		margin: 0;
		max-width: 52ch;
	}

	.dash-empty--inline .dash-stub-pill {
		margin-block-start: 0;
		margin-inline-start: auto;
		flex: none;
	}

	.dash-panel__actions {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		margin-block-start: 1rem;
	}

	.dash-panel .ob-ledger__row:last-child {
		border-bottom: none;
	}

	.sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.report-panel + .report-panel {
		margin-block-start: 1.25rem;
	}

	.report-chart__meta {
		margin: 0 0 1.25rem;
		font-size: 0.85rem;
		color: var(--clr-fog-400);
	}

	.report-chart {
		display: flex;
		align-items: flex-end;
		gap: 0.5rem;
		height: 140px;
	}

	.report-chart__bar {
		display: flex;
		flex: 1;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		height: 100%;
		min-width: 0;
	}

	.report-chart__fill {
		width: 100%;
		max-width: 26px;
		min-height: 2px;
		border-radius: 4px 4px 0 0;
		background: var(--clr-line-400);
	}

	.report-chart__fill--rust {
		background: var(--clr-rust-400);
	}

	.report-chart__fill--accent {
		background: var(--clr-accent-400);
	}

	.report-chart__label {
		margin-block-start: 0.5rem;
		font-family: var(--ff-code);
		font-size: 0.62rem;
		color: var(--clr-fog-400);
		white-space: nowrap;
	}

	.report-chart__total {
		margin: 1rem 0 0;
		font-size: 0.8rem;
		color: var(--clr-fog-400);
	}

	.report-chart__delta {
		margin: 0.35rem 0 0;
		font-family: var(--ff-code);
		font-size: 0.8rem;
		font-weight: 600;
	}

	.report-chart__delta--good {
		color: var(--clr-accent-400);
	}

	.report-chart__delta--bad {
		color: var(--clr-rust-400);
	}

	.report-chart__delta--neutral {
		color: var(--clr-fog-400);
	}

	.report-chart__standout {
		margin: 0.35rem 0 0;
		font-size: 0.8rem;
		color: var(--clr-fog-400);
	}

	.health-score {
		margin: 0 0 1.5rem;
		font-family: var(--ff-code);
		font-size: 2.4rem;
		font-weight: 700;
		color: var(--clr-black-400);
	}

	.health-rows {
		display: flex;
		flex-direction: column;
		gap: 0.85rem;
	}

	.health-row {
		display: grid;
		grid-template-columns: 6.5rem 1fr 2.5rem;
		align-items: center;
		gap: 0.85rem;
	}

	.health-row--stub {
		grid-template-columns: 6.5rem 1fr auto;
	}

	.health-row__label {
		font-size: 0.85rem;
		font-weight: 600;
		color: var(--clr-fog-400);
	}

	.health-bar {
		height: 10px;
		border-radius: 999px;
		background: var(--clr-background-400);
		overflow: hidden;
	}

	.health-bar__fill {
		display: block;
		height: 100%;
		border-radius: 999px;
		background: var(--clr-accent-400);
	}

	.health-bar--stub {
		background-image: repeating-linear-gradient(
			90deg,
			var(--clr-line-400),
			var(--clr-line-400) 4px,
			transparent 4px,
			transparent 8px
		);
	}

	.health-row__value {
		font-family: var(--ff-code);
		font-size: 0.85rem;
		font-weight: 600;
		text-align: end;
		color: var(--clr-fog-400);
	}

	.health-row__meta {
		grid-column: 1 / -1;
		display: flex;
		align-items: baseline;
		gap: 0.4rem;
		font-size: 0.75rem;
	}

	.health-row__status {
		font-weight: 600;
		color: var(--clr-black-400);
	}

	.health-row__explanation {
		color: var(--clr-fog-400);
	}

	.health-methodology {
		margin: 1.5rem 0 0;
		font-size: 0.78rem;
		color: var(--clr-fog-400);
	}

	@media (min-width: 620px) {
		.report-chart__label {
			font-size: 0.68rem;
		}
	}

	@media screen and (min-width: 780px) {
		.app-shell__frame {
			flex-direction: row;
		}

		.app-topbar {
			display: none;
		}

		.app-sidebar {
			position: sticky;
			inset-block: auto;
			left: auto;
			right: auto;
			flex: none;
			width: 240px;
			height: 100vh;
			top: 0;
			z-index: auto;
			box-shadow: none;
			transform: none;
			transition: none;
			border-bottom: none;
			border-right: 1px solid var(--clr-line-400);
		}

		.app-sidebar__brand {
			display: inline-flex;
		}

		.app-shell__body {
			flex: 1;
			min-width: 0;
		}

		.app-main {
			padding: 2.5rem 3rem 4rem;
		}
	}

	/* Below the desktop breakpoint the sidebar becomes a full-screen app-style
	   menu takeover instead of a compact drawer - big rows, thumb-friendly
	   spacing, and the deep hedge color used elsewhere for "live" surfaces. */
	@media screen and (max-width: 779px) {
		.app-main {
			padding-bottom: calc(var(--app-bottom-nav-height) + 2rem);
		}

		.app-bottom-nav {
			position: fixed;
			inset-inline: 0;
			bottom: 0;
			z-index: 37;
			display: grid;
			grid-template-columns: repeat(4, minmax(0, 1fr));
			gap: 0.35rem;
			min-height: var(--app-bottom-nav-height);
			padding: 0.4rem 0.55rem calc(0.4rem + env(safe-area-inset-bottom, 0px));
			border-top: 1px solid color-mix(in srgb, var(--clr-line-400) 82%, transparent);
			background: color-mix(in srgb, var(--clr-white-400) 94%, transparent);
			box-shadow: 0 -0.6rem 1.8rem color-mix(in srgb, var(--clr-black-400) 8%, transparent);
			backdrop-filter: blur(14px);
		}

		.app-bottom-nav__link {
			display: flex;
			min-width: 0;
			min-height: 3.5rem;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			gap: 0.2rem;
			border-radius: calc(var(--border-radius) * 1.25);
			color: var(--clr-fog-400);
			font-size: 0.68rem;
			font-weight: 600;
			line-height: 1;
			text-decoration: none;
			touch-action: manipulation;
			-webkit-tap-highlight-color: transparent;
		}

		.app-bottom-nav__link svg {
			width: 21px;
			height: 21px;
		}

		.app-bottom-nav__link:active {
			background: var(--clr-background-400);
		}

		.app-bottom-nav__link:focus-visible {
			outline: 3px solid color-mix(in srgb, var(--clr-accent-400) 35%, transparent);
			outline-offset: -2px;
		}

		.app-bottom-nav__link--active {
			background: var(--clr-accent-100);
			color: var(--clr-accent-400);
		}

		.event-settings__save-bar {
			bottom: var(--app-bottom-nav-height);
			padding-bottom: 0.85rem;
		}

		.app-sidebar {
			padding-inline: 0;
			padding-block: calc(env(safe-area-inset-top, 0px) + 1.5rem) calc(env(safe-area-inset-bottom, 0px) + 1.5rem);
			background: var(--clr-accent-800);
		}

		.app-sidebar__group--primary {
			display: none;
		}

		.app-sidebar__brand {
			padding-inline: 1.5rem;
			color: var(--clr-accent-contrast-400);
		}

		.app-sidebar__brand .brand-logo {
			filter: brightness(0) invert(1);
		}

		.app-sidebar__nav ul {
			gap: 0;
		}

		.app-sidebar__link {
			min-height: 4.25rem;
			padding-inline: 1.5rem;
			gap: 1rem;
			border-radius: 0;
			border-bottom: 1px solid color-mix(in srgb, var(--clr-accent-contrast-400) 12%, transparent);
			color: var(--clr-accent-contrast-400);
			font-family: var(--ff-display);
			font-size: 1.3rem;
			touch-action: manipulation;
			-webkit-tap-highlight-color: transparent;
		}

		.app-sidebar__link svg {
			width: 22px;
			height: 22px;
			opacity: 0.7;
		}

		.app-sidebar__link-description {
			display: block;
			margin-top: 0.15rem;
			font-family: var(--ff-primary);
			font-size: 0.8rem;
			font-weight: 500;
			line-height: 1.3;
			opacity: 0.72;
		}

		.app-sidebar__link:hover {
			background: color-mix(in srgb, var(--clr-accent-contrast-400) 8%, transparent);
			color: var(--clr-accent-contrast-400);
		}

		.app-sidebar__link--active {
			background: color-mix(in srgb, var(--clr-flash-400) 16%, transparent);
			color: var(--clr-flash-400);
			box-shadow: inset 4px 0 0 0 var(--clr-flash-400);
		}

		.app-sidebar__link--active:hover {
			background: color-mix(in srgb, var(--clr-flash-400) 16%, transparent);
			color: var(--clr-flash-400);
		}

		.app-sidebar__footer {
			margin-top: auto;
			padding-inline: 1.5rem;
			border-top: 1px solid color-mix(in srgb, var(--clr-accent-contrast-400) 12%, transparent);
		}

		.app-sidebar__support {
			min-height: 3rem;
			padding-inline: 0;
			border-bottom: none;
			font-size: 1rem;
		}

		.app-sidebar__business {
			font-size: 0.85rem;
			color: color-mix(in srgb, var(--clr-accent-contrast-400) 75%, transparent);
		}

		.app-sidebar__business-mark {
			background: var(--clr-flash-400);
		}

		.app-sidebar__signout {
			display: flex;
			align-items: center;
			min-height: 3rem;
			padding-inline: 1rem;
			margin-inline-end: -1rem;
			border-radius: 999px;
			color: var(--clr-accent-contrast-400);
			font-size: 0.9rem;
			touch-action: manipulation;
			-webkit-tap-highlight-color: transparent;
			transition: background 0.15s ease;
		}

		.app-sidebar__signout:hover {
			background: color-mix(in srgb, var(--clr-accent-contrast-400) 12%, transparent);
			color: var(--clr-accent-contrast-400);
		}
	}

	@media screen and (min-width: 560px) {
		.ob-grid-2 {
			grid-template-columns: 1fr 1fr;
		}
	}

	@media screen and (min-width: 860px) {
		.ob-shell--wide {
			max-width: 1180px;
		}

		.ob-integrations-grid {
			display: grid;
			grid-template-columns: 1.2fr 1fr;
			gap: 1.75rem;
			align-items: start;
		}
	}

	@media screen and (min-width: 400px) {
		.top-bar ul {
			justify-content: flex-start;
		}

		.cols-33 {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}

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

	@media print {
		@page {
			size: A6 portrait;
			margin: 0;
		}

		body.qr-code-page {
			background: #fff;
		}

		.qr-code-page .app-topbar,
		.qr-code-page .app-sidebar,
		.qr-code-page .app-bottom-nav,
		.qr-code-page .nav-backdrop,
		.qr-code-page .skip-nav-link,
		.qr-code-page .qr-page-head,
		.qr-code-page .qr-paused-warning,
		.qr-code-page .qr-preview__head,
		.qr-code-page .qr-actions {
			display: none !important;
		}

		.qr-code-page .app-shell__frame,
		.qr-code-page .app-shell__body,
		.qr-code-page .app-main,
		.qr-code-page .qr-workspace,
		.qr-code-page .qr-preview,
		.qr-code-page .qr-print-sheet {
			display: block;
			width: auto;
			max-width: none;
			margin: 0;
			padding: 0;
			border: 0;
			border-radius: 0;
			background: #fff;
		}

		.qr-code-page .qr-table-card {
			width: 105mm;
			height: 148mm;
			min-height: 148mm;
			border: 0;
			box-shadow: none;
			print-color-adjust: exact;
			-webkit-print-color-adjust: exact;
		}
	}

	@media screen and (min-width: 880px) {

		.nav-toggle {
			display: none;
		}

		.nav-backdrop {
			display: none;
		}

		.nav {
			position: static;
			flex: 1;
			transform: none;
			opacity: 1;
			visibility: visible;
			pointer-events: auto;
			transition: none;
			background: transparent;
			border-bottom: none;
			border-radius: 0;
			box-shadow: none;
			overflow: visible;
		}

		.nav::before {
			display: none;
		}

		.nav-links {
			flex-direction: row;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
			padding: 0;
			gap: 0.15rem;
		}

		.nav-links li {
			opacity: 1;
			transform: none;
			animation: none;
		}

		.nav-links li + li {
			border-top: none;
		}

		.nav-mobile-actions {
			display: none;
		}

		.nav-actions .nav-signin {
			display: inline-flex;
		}

		.nav-actions .nav-cta {
			display: inline-flex;
		}

		.nav-links a,
		.nav-links button {
			width: auto;
			padding-block: 0.55rem;
			padding-inline: 0.85rem;
			border-radius: 999px;
			text-align: center;
		}

		.nav-links a::before,
		.nav-links button::before {
			content: none;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.nav,
		.nav.is-open,
		.nav-backdrop,
		.nav-toggle::before,
		.nav-links li,
		.nav-mobile-actions,
		.app-sidebar {
			transition: none;
			animation: none;
		}

		.nav-links li,
		.nav-mobile-actions {
			opacity: 1;
			transform: none;
		}
	}
}

@layer utility {
	.center {
		max-width: 440px;
		margin-inline: auto;
	}
}

@layer components {
	.auth-eyebrow {
		display: inline-flex;
		align-items: center;
		gap: 0.55rem;
		font-family: var(--ff-primary);
		font-size: 0.72rem;
		font-weight: 600;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--clr-rust-400);
		margin-block-end: 1rem;
	}

	.auth-eyebrow::before {
		content: "";
		width: 16px;
		height: 1px;
		background: var(--clr-rust-400);
	}
}

/* Auth shell (sign in / sign up): unlayered so it always wins over the
   layered rules above without fighting cascade order. */

.fos-auth-shell {
	min-height: 100dvh;
	display: flex;
}

.fos-auth-panel {
	flex: 1 1 480px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 3rem 1.5rem;
	background: var(--clr-background-400);
}

.fos-auth-brand {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	text-decoration: none;
	margin-block-end: 1.6rem;
}

.fos-auth-brand-logo {
	display: block;
	width: min(100%, 170px);
	height: auto;
}

.fos-auth-card {
	width: 100%;
	max-width: 420px;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	background: var(--clr-white-400);
	border: 1px solid var(--clr-line-400);
	border-radius: 18px;
	padding: 2.2rem;
	box-shadow: 0 30px 70px -35px rgba(21, 24, 26, 0.22);
}

.fos-auth-card::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--clr-accent-400), var(--clr-rust-400));
}

.fos-auth-card > .fos-auth-brand {
	order: 1;
}

.fos-auth-card > .auth-eyebrow {
	order: 2;
	justify-content: center;
	text-align: center;
}

.fos-auth-card > .auth-eyebrow::after {
	content: "";
	width: 16px;
	height: 1px;
	background: var(--clr-rust-400);
}

.fos-auth-card > h1 {
	order: 3;
	margin: 0 0 0.5rem;
	font-family: var(--ff-display);
	font-size: 1.85rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-align: center;
}

.fos-auth-card > p {
	order: 4;
	margin: 0 0 1.6rem;
	color: var(--clr-fog-400);
	font-size: 0.94rem;
	line-height: 1.5;
	text-align: center;
}

.fos-auth-card > .message-banner {
	order: 5;
	margin: 0 0 1.4rem;
}

.fos-auth-card > .sign-in-alt {
	order: 6;
	margin-block-start: 0 !important;
	margin-block-end: 1.6rem;
}

.fos-auth-card > form {
	order: 7;
	background: none;
	border: none;
	box-shadow: none;
	padding: 0;
	border-radius: 0;
	overflow: visible;
}

.fos-auth-card > form::before {
	content: none;
}

.fos-auth-card .g_id_signin {
	display: flex;
	justify-content: center;
}

.signup-google {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.8rem;
}

.fos-auth-card > .signup-google-terms {
	order: 8;
	margin-block-start: 1rem;
	text-align: center;
}

.signup-google-terms p {
	margin: 0;
	color: var(--clr-fog-400);
	font-size: 0.72rem;
	line-height: 1.45;
}

.signup-google .sign-in-alt__title {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	white-space: nowrap;
}

.signup-google .sign-in-alt__title::before,
.signup-google .sign-in-alt__title::after {
	content: "";
	flex: 1;
	border-bottom: 1px solid var(--clr-line-400);
}

.fos-auth-card a:not(.btn) {
	color: var(--clr-accent-400);
	font-weight: 600;
	text-underline-offset: 2px;
}

.fos-auth-card a:not(.btn):hover {
	color: var(--clr-accent-800);
}

.fos-auth-card .sign-in-alt__title {
	order: 3;
	font-family: var(--ff-code);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--clr-fog-400);
}

.fos-auth-card .sign-in-alt__title::before,
.fos-auth-card .sign-in-alt__title::after {
	border-bottom-color: var(--clr-line-400);
}

.signup-actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.85rem;
	margin-block-start: 0.35rem;
}

.signup-actions button {
	width: 100%;
	min-height: 3.5rem;
	padding-block: 0.85rem;
	font-weight: 700;
}

.signup-actions a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	text-align: center;
	font-size: 0.9rem;
}

.signup-terms > label {
	position: relative;
	display: block;
	min-height: 2.75rem;
	padding-inline-start: 2rem;
	line-height: 1.5;
	cursor: pointer;
}

.signup-terms input[type="checkbox"] {
	position: absolute;
	inset-block-start: 0.1rem;
	inset-inline-start: 0;
	width: 1.3rem;
	height: 1.3rem;
	margin: 0;
}

.signup-terms a {
	display: inline-block;
	padding-block: 0.2rem;
	margin-block: -0.2rem;
}

/* Right-side product preview panel */

.fos-auth-visual {
	flex: 1 1 480px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2.25rem;
	padding: 3rem;
	background: var(--clr-accent-100);
	border-inline-start: 1px solid var(--clr-line-400);
}

.fos-auth-browser {
	width: 100%;
	max-width: 460px;
	background: var(--clr-white-400);
	border: 1px solid var(--clr-line-400);
	overflow: hidden;
	box-shadow: 0 40px 80px -40px rgba(33, 27, 18, 0.35);
}

.fos-auth-browser-bar {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.6rem 0.8rem;
	border-bottom: 1px solid var(--clr-line-400);
	background: var(--clr-background-400);
}

.fos-auth-browser-dots {
	display: flex;
	gap: 0.3rem;
}

.fos-auth-browser-dots span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--clr-line-400);
	display: inline-block;
}

.fos-auth-browser-url {
	flex: 1;
	text-align: center;
	font-family: var(--ff-display);
	font-style: italic;
	font-size: 0.72rem;
	color: var(--clr-fog-400);
	background: var(--clr-white-400);
	border: 1px solid var(--clr-line-400);
	border-radius: 5px;
	padding: 0.2rem 0.6rem;
	max-width: 200px;
	margin-inline: auto;
}

.fos-auth-browser-main {
	flex: 1;
	min-width: 0;
	padding: 1.4rem 1rem 1.6rem;
	background: var(--clr-background-400);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.2rem;
}

.fos-auth-browser-label {
	font-size: 0.68rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--clr-rust-400);
	margin: 0;
	align-self: flex-start;
}

.fos-auth-print-row {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 1rem;
	padding-block: 0.4rem 0.6rem;
}

.fos-auth-print {
	width: 92px;
	background: var(--clr-white-400);
	padding: 0.4rem 0.4rem 0;
	box-shadow: 0 14px 26px -14px rgba(33, 27, 18, 0.4);
}

.fos-auth-print--a { transform: rotate(-6deg); }
.fos-auth-print--b { transform: rotate(3deg); margin-block-end: 0.6rem; }
.fos-auth-print--c { transform: rotate(-2deg); }

.fos-auth-print-photo {
	width: 100%;
	aspect-ratio: 4 / 5;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--clr-rust-400) 55%, transparent);
}

.fos-auth-print--a .fos-auth-print-photo { background: linear-gradient(150deg, #F1E3C6, #C89A5B); }
.fos-auth-print--b .fos-auth-print-photo { background: linear-gradient(150deg, #E7D3D2, #B98A8B); }
.fos-auth-print--c .fos-auth-print-photo { background: linear-gradient(150deg, #D9DECB, #8B9873); }

.fos-auth-print-caption {
	margin: 0.45rem 0 0.55rem;
	font-family: var(--ff-display);
	font-style: italic;
	font-size: 0.68rem;
	text-align: center;
	color: var(--clr-black-400);
}

.fos-auth-uploaded-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	background: var(--clr-accent-100);
	color: var(--clr-accent-800);
	border-radius: 999px;
	padding: 0.45rem 0.95rem;
	font-size: 0.78rem;
	font-weight: 600;
}

.fos-auth-uploaded-pill svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.fos-auth-quote {
	max-width: 420px;
	margin: 0;
	text-align: center;
}

.fos-auth-quote p {
	margin: 0 0 0.7rem;
	font-family: var(--ff-display);
	font-style: italic;
	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: -0.005em;
	line-height: 1.4;
	color: var(--clr-black-400);
}

.fos-auth-quote cite {
	font-style: normal;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--clr-rust-400);
}

@media (max-width: 980px) {
	.fos-auth-visual {
		display: none;
	}
}

@media (max-width: 480px) {
	.fos-auth-panel {
		padding: 1rem 0.75rem;
	}

	.fos-auth-card {
		padding: 1.35rem;
		border-radius: 14px;
	}

	.fos-auth-card > .fos-auth-brand {
		min-height: 2.75rem;
		margin-block-end: 1.1rem;
	}

	.fos-auth-card input:not([type="checkbox"], [type="radio"]),
	.fos-auth-card .signup-actions button {
		min-height: 3.25rem;
	}

	.fos-auth-card .field-password input {
		padding-inline-end: 3.25rem;
	}

	.fos-auth-card .field-password__toggle {
		inset-inline-end: 0;
		width: 2.75rem;
	}
}

/* Guest passcode/upload screens share the auth shell, but a guest here is
   mid-task on their phone, not filling out a signup form - once the desktop
   split-screen illustration is gone, drop the floating card chrome too so it
   reads as a native full-bleed screen instead of a dialog on a page. */
@media (max-width: 980px) {
	.guest-flow .fos-auth-panel {
		padding-block: calc(env(safe-area-inset-top, 0px) + 2rem) calc(env(safe-area-inset-bottom, 0px) + 2rem);
		min-height: 100dvh;
	}

	.guest-flow .fos-auth-card {
		max-width: 480px;
		background: none;
		border: none;
		box-shadow: none;
		padding: 0;
		overflow: visible;
	}

	.guest-flow .fos-auth-card::before {
		content: none;
	}
}

.guest-flow .fos-auth-card > .center {
	text-align: center;
}

.guest-flow__head {
	margin-block-end: 1.75rem;
}

.guest-flow__head h1 {
	margin: 0;
}

.guest-flow__nav-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	width: min(100%, 22rem);
	min-height: 3.25rem;
	margin-block-start: 1rem;
	padding: 0.75rem 1.15rem;
	border: 1px solid var(--clr-accent-400);
	border-radius: calc(var(--border-radius) * 1.5);
	background: var(--clr-accent-400);
	box-shadow: 0 16px 30px -20px rgba(33, 27, 18, 0.55);
	color: var(--clr-accent-contrast-400);
	font-family: var(--ff-display);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.15s ease, filter 0.15s ease;
}

.guest-flow__nav-action:hover {
	color: var(--clr-accent-contrast-400);
	filter: brightness(1.08);
}

.guest-flow__nav-action:active {
	transform: scale(0.98);
}

.guest-flow__nav-action:focus-visible {
	outline: 2px solid var(--clr-accent-400);
	outline-offset: 3px;
}

.guest-flow__nav-action svg {
	flex: none;
}

.guest-flow__nav-action--secondary {
	border-color: var(--clr-line-400);
	background: var(--clr-white-400);
	box-shadow: 0 12px 24px -22px rgba(33, 27, 18, 0.45);
	color: var(--clr-accent-400);
}

.guest-flow__nav-action--secondary:hover {
	color: var(--clr-accent-800);
}

/* Keep the upload screen's brand as a quiet footer. The upload queue can grow
   without pulling it up alongside the thumbnails. */
.guest-flow--upload .fos-auth-card {
	min-height: calc(100dvh - 6rem);
}

.guest-flow--gallery .fos-auth-card {
	width: min(100%, 960px);
	max-width: 960px;
}

/* Uploading and browsing are the guest's primary tasks, so give both pages
   the full desktop canvas instead of keeping the auth shell's promo split. */
@media (min-width: 981px) {
	.guest-flow--upload .fos-auth-visual,
	.guest-flow--gallery .fos-auth-visual {
		display: none;
	}

	.guest-flow--upload .fos-auth-panel,
	.guest-flow--gallery .fos-auth-panel {
		min-width: 0;
		flex-basis: 100%;
	}

	.guest-flow--upload .fos-auth-card {
		max-width: 760px;
	}

	.guest-flow--gallery .fos-auth-card {
		width: min(100%, 1200px);
		max-width: 1200px;
	}
}

.guest-flow--gallery .fos-auth-brand {
	align-self: center;
	margin-block: 2.5rem 0.45rem;
}

.guest-flow .fos-auth-card > .guest-flow__create-link {
	align-self: center;
	margin: 0;
	color: var(--clr-fog-400);
	font-size: 0.78rem;
	font-weight: 600;
	text-underline-offset: 0.2em;
}

.guest-flow--gallery .guest-flow__create-link {
	order: 2;
}

.guest-flow--upload .fos-auth-brand {
	order: 10;
	align-self: center;
	margin-block: auto 0.45rem;
	padding-block-start: 2.5rem;
}

.guest-flow--upload .guest-flow__create-link {
	order: 11;
}

@media (max-width: 980px) {
	.guest-flow--upload .fos-auth-card {
		min-height: calc(100dvh - 4rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
	}

	.guest-flow__head {
		margin-block-end: 2rem;
	}

	.guest-flow__nav-action {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.guest-flow__nav-action {
		transition: none;
	}

	.guest-flow__nav-action:active {
		transform: none;
	}
}

.guest-flow--passcode #form__passcode {
	margin-block-start: 0.4rem;
	padding-block: 1rem;
	padding-inline: 0;
	border: none;
	border-bottom: 2px solid var(--clr-line-400);
	border-radius: 0;
	background: none;
	font-family: var(--ff-display);
	font-size: 2.1rem;
	font-weight: 600;
	letter-spacing: 0.5em;
	text-align: center;
	text-indent: 0.5em;
	box-shadow: none;
}

.guest-flow--passcode #form__passcode:focus {
	border-bottom-color: var(--clr-accent-400);
	box-shadow: none;
}

.guest-flow--passcode label[for="form__passcode"] {
	display: block;
	text-align: center;
	font-size: 0.85rem;
	color: var(--clr-fog-400);
}

.guest-flow--passcode .btn {
	width: 100%;
	min-height: 3.25rem;
	margin-block-start: 1.5rem;
	border-radius: calc(var(--border-radius) * 1.5);
	font-family: var(--ff-display);
	font-size: 1.05rem;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

@layer components {
	.blog-shell {
		width: min(100%, 1040px);
		margin-inline: auto;
		padding-block: 1.5rem 2rem;
	}

	.blog-shell--article {
		width: min(100%, 920px);
	}

	.blog-eyebrow {
		margin: 0 0 0.7rem;
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.11em;
		text-transform: uppercase;
		color: var(--clr-rust-400);
	}

	.blog-index-head {
		max-width: 720px;
		padding-block: clamp(2rem, 7vw, 5.5rem);
	}

	.blog-index-head h1,
	.blog-article__head h1,
	.blog-article h2,
	.blog-cta h2 {
		font-family: var(--ff-display);
		color: var(--clr-accent-800);
	}

	.blog-index-head h1 {
		margin: 0 0 1.2rem;
		font-size: clamp(2.7rem, 7vw, 5.2rem);
		font-weight: 600;
		line-height: 0.98;
	}

	.blog-index-head > p:last-child {
		margin: 0;
		font-size: clamp(1.05rem, 2vw, 1.25rem);
		line-height: 1.7;
		color: var(--clr-fog-400);
	}

	.blog-index-list {
		padding-block-end: 3rem;
	}

	.blog-index-list > h2 {
		margin: 0 0 1.2rem;
		font-size: 0.8rem;
		font-weight: 700;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--clr-fog-400);
	}

	.blog-card {
		position: relative;
		max-width: 820px;
		padding: clamp(1.5rem, 4vw, 2.5rem);
		background: color-mix(in srgb, var(--clr-background-400) 72%, white);
		border: 1px solid var(--clr-line-400);
		border-radius: calc(var(--border-radius) * 2);
		box-shadow: 0 24px 60px -48px rgba(33, 42, 28, 0.55);
	}

	.blog-card__meta,
	.blog-byline {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.45rem 0.75rem;
		font-size: 0.82rem;
		color: var(--clr-fog-400);
	}

	.blog-card__meta span {
		font-weight: 700;
		color: var(--clr-rust-400);
	}

	.blog-card h3 {
		max-width: 680px;
		margin: 0.8rem 0;
		font-family: var(--ff-display);
		font-size: clamp(1.65rem, 4vw, 2.5rem);
		font-weight: 600;
		line-height: 1.12;
	}

	.blog-card h3 a {
		color: var(--clr-accent-800);
		text-decoration: none;
	}

	.blog-card h3 a::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	.blog-card h3 a:focus-visible::after {
		outline: 3px solid var(--clr-rust-400);
		outline-offset: 4px;
		border-radius: calc(var(--border-radius) * 2);
	}

	.blog-card > p {
		max-width: 650px;
		margin: 0 0 1rem;
		line-height: 1.65;
		color: var(--clr-fog-400);
	}

	.blog-text-link {
		position: relative;
		z-index: 1;
		font-weight: 700;
		color: var(--clr-accent-400);
		text-underline-offset: 3px;
	}

	.blog-breadcrumbs {
		margin-block: 0.5rem 2.25rem;
		font-size: 0.82rem;
		color: var(--clr-fog-400);
	}

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

	.blog-breadcrumbs li:not(:last-child)::after {
		content: "/";
		margin-inline-start: 0.45rem;
		color: var(--clr-line-400);
	}

	.blog-breadcrumbs a,
	.blog-article a:not(.btn) {
		color: var(--clr-accent-400);
		text-underline-offset: 3px;
	}

	.blog-breadcrumbs a:focus-visible,
	.blog-article a:focus-visible,
	.blog-table-wrap:focus-visible {
		outline: 3px solid var(--clr-rust-400);
		outline-offset: 4px;
	}

	.blog-article {
		max-width: 780px;
		margin-inline: auto;
	}

	.blog-article__head {
		padding-block: clamp(1rem, 5vw, 3rem) clamp(2.5rem, 7vw, 5rem);
		border-bottom: 1px solid var(--clr-line-400);
	}

	.blog-article__head h1 {
		margin: 0;
		font-size: clamp(2.45rem, 7vw, 4.6rem);
		font-weight: 600;
		line-height: 1.02;
	}

	.blog-article__standfirst {
		margin: 1.4rem 0;
		font-size: clamp(1.08rem, 2.5vw, 1.3rem);
		line-height: 1.65;
		color: var(--clr-fog-400);
	}

	.blog-article section {
		padding-block: clamp(2.2rem, 6vw, 3.75rem) 0;
	}

	.blog-article h2 {
		margin: 0 0 1rem;
		font-size: clamp(1.7rem, 4vw, 2.35rem);
		font-weight: 600;
		line-height: 1.15;
	}

	.blog-article h3 {
		margin: 0 0 0.8rem;
		color: var(--clr-accent-800);
	}

	.blog-article section > p,
	.blog-article section > ul {
		font-size: 1.02rem;
		line-height: 1.78;
	}

	.blog-article section > p {
		margin: 0 0 1.15rem;
	}

	.blog-quick-answer {
		margin-block-start: 2.5rem;
		padding: clamp(1.5rem, 4vw, 2.25rem) !important;
		background: var(--clr-accent-100);
		border: 1px solid color-mix(in srgb, var(--clr-accent-400) 25%, transparent);
		border-radius: calc(var(--border-radius) * 1.5);
	}

	.blog-quick-answer p:last-child {
		margin-bottom: 0;
	}

	.blog-table-wrap {
		overflow-x: auto;
		margin-block-start: 1.5rem;
		border: 1px solid var(--clr-line-400);
		border-radius: var(--border-radius);
		-webkit-overflow-scrolling: touch;
	}

	.blog-comparison-table {
		width: 100%;
		min-width: 650px;
		border-collapse: collapse;
		background: color-mix(in srgb, var(--clr-background-400) 75%, white);
		font-size: 0.92rem;
	}

	.blog-comparison-table caption {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.blog-comparison-table th,
	.blog-comparison-table td {
		padding: 0.9rem 1rem;
		border-bottom: 1px solid var(--clr-line-400);
		text-align: left;
		vertical-align: top;
	}

	.blog-comparison-table thead th {
		background: var(--clr-accent-400);
		color: var(--clr-accent-contrast-400);
	}

	.blog-comparison-table tbody th {
		width: 34%;
		color: var(--clr-accent-800);
	}

	.blog-comparison-table tbody tr:last-child > * {
		border-bottom: 0;
	}

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

	.blog-choice-grid > div {
		padding: 1.4rem;
		border: 1px solid var(--clr-line-400);
		border-radius: var(--border-radius);
	}

	.blog-choice-grid ul {
		margin: 0;
		padding-inline-start: 1.2rem;
		line-height: 1.65;
	}

	.blog-choice-grid li + li {
		margin-block-start: 0.55rem;
	}

	.blog-cta {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 2rem;
		margin-block: 2rem;
		padding: clamp(1.5rem, 5vw, 3rem);
		background: var(--clr-accent-400);
		border-radius: calc(var(--border-radius) * 2);
		color: var(--clr-accent-contrast-400);
	}

	.blog-cta--article {
		margin-block-start: 4rem;
	}

	.blog-cta .blog-eyebrow {
		color: color-mix(in srgb, var(--clr-accent-contrast-400) 72%, var(--clr-flash-400));
	}

	.blog-cta h2 {
		margin: 0 0 0.65rem;
		font-size: clamp(1.55rem, 4vw, 2.25rem);
		color: var(--clr-accent-contrast-400);
	}

	.blog-cta p:last-child {
		max-width: 590px;
		margin: 0;
		line-height: 1.55;
	}

	.blog-cta .btn {
		flex: 0 0 auto;
		background: var(--clr-flash-400);
		color: var(--clr-flash-ink-400);
	}

	.blog-article__foot {
		margin-block-start: 3rem;
		padding-block-start: 1.5rem;
		border-top: 1px solid var(--clr-line-400);
		font-size: 0.8rem;
		line-height: 1.55;
		color: var(--clr-fog-400);
	}

	.blog-article__foot p {
		margin: 0 0 0.7rem;
	}

	@media (max-width: 680px) {
		.blog-shell {
			padding-block-start: 0.5rem;
		}

		.blog-choice-grid {
			grid-template-columns: 1fr;
		}

		.blog-cta {
			align-items: flex-start;
			flex-direction: column;
		}

		.blog-cta .btn {
			width: 100%;
			text-align: center;
		}
	}
}