@layer components {
	[hidden] {
		display: none !important;
	}

	.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;
	}

	.site-title img {
		width: 100%;
	}

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

	.header {
		display: flex;
		flex-direction: column;
	}

	.main {
		padding-block-end: 1.5rem;
	}

	.footer {
		text-align: center;
	}

	.nav ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.5rem;
		margin: 0;
		padding: 0;
	}

	.nav li {
		list-style: none;
	}

	.nav a,
	.nav button {
		display: block;
		padding-block: 1rem;
		padding-inline: 1rem;
	}

	.cols-halves {
		display: grid;
		gap: 1rem;
	}

	.cols-thirds {
		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 tr:hover {
		background: var(--clr-accent-100);
	}

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

	.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;
	}

	.site--marketing {
		color: #d5def2;
		background:
			radial-gradient(circle at 50% 18%, rgb(22 58 128 / 35%), transparent 40%),
			radial-gradient(circle at 50% 48%, rgb(8 22 58 / 45%), transparent 55%),
			#030712;
		min-height: 100vh;
	}

	.site--marketing .nav a,
	.site--marketing .nav button {
		border: 1px solid rgb(181 202 255 / 20%);
		border-radius: 999px;
		padding: 0.5rem 0.9rem;
		text-decoration: none;
		color: #d5def2;
		background: rgb(8 16 35 / 45%);
	}

	.site--marketing .nav a:hover,
	.site--marketing .nav button:hover {
		border-color: rgb(181 202 255 / 45%);
		color: #fff;
	}

	.site--marketing .btn--link {
		background: rgb(8 16 35 / 45%);
		color: #d5def2;
	}

	.site--marketing .site-title a {
		color: #f8fbff;
		text-decoration: none;
	}

	.header--marketing,
	.main--marketing,
	.footer--marketing {
		max-width: 1120px;
	}

	.header--marketing {
		flex-direction: row;
		align-items: center;
		padding: 1.2rem 1rem 0;
	}

	.site-title--marketing {
		padding: 0;
		font-size: 1rem;
		font-weight: 600;
		letter-spacing: 0.03em;
	}

	.site-title--marketing a {
		color: #f8fbff;
		text-decoration: none;
	}

	.nav--marketing ul {
		gap: 1rem;
	}

	.nav--marketing a {
		padding: 0.5rem 0.9rem;
		border: 1px solid rgb(181 202 255 / 20%);
		border-radius: 999px;
		font-size: 0.92rem;
		text-decoration: none;
		color: #d5def2;
	}

	.nav--marketing a:hover {
		border-color: rgb(181 202 255 / 45%);
		color: #fff;
	}

	.main--marketing {
		padding-block: 3rem;
		padding-inline: 1rem;
	}

	.home-hero {
		max-width: 760px;
		margin-inline: auto;
		text-align: center;
	}

	.home-hero__kicker {
		margin: 0;
		color: #95a8d6;
		font-size: 0.92rem;
		text-transform: uppercase;
		letter-spacing: 0.07em;
	}

	.home-hero h1 {
		margin: 0.8rem 0 0;
		color: #f8fbff;
		font-size: clamp(2rem, 5vw, 3.7rem);
		line-height: 1.08;
	}

	.home-hero__summary {
		margin: 1rem auto 0;
		max-width: 640px;
		color: #a9b6d7;
		font-size: 1.05rem;
	}

	.home-deploy-card {
		max-width: 760px;
		margin: 2.2rem auto 0;
		padding: 1.5rem;
		border: 1px solid rgb(89 113 161 / 34%);
		border-radius: 16px;
		background: linear-gradient(180deg, rgb(5 11 24 / 85%), rgb(3 7 18 / 95%));
		box-shadow:
			0 0 0 1px rgb(133 155 219 / 12%) inset,
			0 30px 75px rgb(2 8 22 / 70%);
	}

	.home-deploy-card h2 {
		margin: 0.2rem 0 0.9rem;
		color: #edf4ff;
		font-size: 1.03rem;
		font-weight: 600;
	}

	.home-chip-row,
	.home-chip-cloud {
		display: flex;
		flex-wrap: wrap;
		gap: 0.55rem;
	}

	.home-chip-row {
		margin-block-end: 1.2rem;
	}

	.home-repo-picker {
		margin-block: 0.2rem 1.2rem;
	}

	.home-repo-picker h3 {
		margin: 0 0 0.7rem;
		color: #dfe9ff;
		font-size: 0.9rem;
		font-weight: 600;
	}

	.home-repo-list {
		display: grid;
		gap: 0.5rem;
		max-height: 230px;
		padding: 0.15rem;
		overflow: auto;
	}

	.home-repo-option {
		display: flex;
		align-items: center;
		gap: 0.55rem;
		padding: 0.45rem 0.55rem;
		border: 1px solid rgb(151 173 226 / 20%);
		border-radius: 10px;
		background: rgb(7 14 31 / 70%);
		color: #c8d5f5;
		font-size: 0.85rem;
	}

	.home-repo-option input {
		margin: 0;
		accent-color: #8fb0ff;
	}

	.home-ssh-key-picker {
		margin-block: 0.25rem 1.2rem;
	}

	.home-ssh-key-picker h3 {
		margin: 0;
		color: #dfe9ff;
		font-size: 0.9rem;
		font-weight: 600;
	}

	.home-ssh-key-picker__note {
		margin: 0.45rem 0 0.55rem;
		color: #a6b7df;
		font-size: 0.8rem;
	}

	.home-ssh-key-picker__input {
		display: block;
		width: 100%;
		padding: 0.6rem 0.7rem;
		border: 1px solid rgb(151 173 226 / 25%);
		border-radius: 10px;
		background: rgb(7 14 31 / 70%);
		color: #d6e1fb;
		font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
		font-size: 0.78rem;
		line-height: 1.4;
		resize: vertical;
	}

	.home-ssh-key-picker__help {
		margin-top: 0.55rem;
		color: #b7c8ee;
		font-size: 0.8rem;
	}

	.home-ssh-key-picker__help summary {
		cursor: pointer;
		color: #dbe7ff;
	}

	.home-ssh-key-picker__help pre {
		margin: 0.45rem 0 0.6rem;
		overflow-x: auto;
		padding: 0.45rem 0.5rem;
		border-radius: 8px;
		background: rgb(3 10 24 / 85%);
		color: #e9f0ff;
		font-size: 0.76rem;
		line-height: 1.35;
	}

	.home-ssh-key-picker__help p {
		margin: 0.45rem 0;
	}

	.home-chip {
		padding: 0.44rem 0.78rem;
		border: 1px solid rgb(151 173 226 / 24%);
		border-radius: 10px;
		background: rgb(6 12 27 / 65%);
		color: #c8d5f5;
		font-size: 0.87rem;
	}

	button.home-chip {
		appearance: none;
		cursor: pointer;
		font: inherit;
		line-height: inherit;
	}

	button.home-chip:focus-visible {
		outline: 2px solid rgb(191 211 255 / 85%);
		outline-offset: 2px;
	}

	.home-chip small {
		color: #8396c1;
		font-size: 0.75rem;
	}

	.home-chip--active {
		border-color: rgb(159 186 255 / 55%);
		background: rgb(25 52 113 / 50%);
		color: #eff5ff;
	}

	.home-profile {
		display: grid;
		gap: 0.2rem;
		margin: 1.1rem 0 1.2rem;
		padding: 0.75rem 0.9rem;
		border: 1px solid rgb(151 173 226 / 22%);
		border-radius: 10px;
		background: rgb(7 14 31 / 80%);
	}

	.home-profile strong {
		color: #f2f6ff;
		font-size: 0.95rem;
	}

	.home-profile span {
		color: #97a8d3;
		font-size: 0.82rem;
	}

	.site--marketing .home-deploy-card__cta {
		display: inline-block;
		padding: 0.8rem 1.1rem;
		border-radius: 10px;
		background: linear-gradient(180deg, #f8fbff, #d8e5ff);
		color: #0b132b;
		text-decoration: none;
		font-weight: 700;
	}

	.site--marketing .home-deploy-card__cta:hover {
		filter: brightness(1.07);
	}

	.home-deploy-card__note {
		margin: 0.9rem 0 0;
		color: #93a4cf;
		font-size: 0.85rem;
	}

	.home-deploy-card__subnote {
		margin: -0.55rem 0 1rem;
		color: #93a4cf;
		font-size: 0.78rem;
	}

	.home-boxagent-status {
		display: grid;
		gap: 0.65rem;
		margin-top: 1rem;
		padding: 0.9rem;
		border: 1px solid rgb(151 173 226 / 22%);
		border-radius: 11px;
		background: rgb(8 15 34 / 72%);
	}

	.home-boxagent-status__head {
		display: flex;
		justify-content: space-between;
		gap: 0.75rem;
		flex-wrap: wrap;
	}

	.home-boxagent-status__head h3 {
		margin: 0;
		color: #eaf1ff;
		font-size: 0.95rem;
	}

	.home-boxagent-status__head p {
		margin: 0;
		color: #9eb2e2;
		font-size: 0.82rem;
	}

	.home-boxagent-status__poll {
		display: inline-flex;
		align-items: center;
		gap: 0.3rem;
		margin-left: 0.35rem;
		color: #8ea5dc;
		font-size: 0.76rem;
		white-space: nowrap;
	}

	.home-boxagent-status__poll::before {
		content: "";
		width: 0.45rem;
		height: 0.45rem;
		border-radius: 999px;
		background: rgb(151 173 226 / 65%);
	}

	.home-boxagent-status__poll[data-state="polling"] {
		color: #c6d8ff;
	}

	.home-boxagent-status__poll[data-state="polling"]::before {
		background: #8fb0ff;
		animation: home-poll-pulse 1s ease-in-out infinite;
	}

	.home-boxagent-status__poll[data-state="paused"] {
		color: #7f91bd;
	}

	.home-boxagent-status__poll[data-state="paused"]::before {
		background: rgb(127 145 189 / 65%);
	}

	@keyframes home-poll-pulse {
		0%,
		100% {
			opacity: 0.5;
		}

		50% {
			opacity: 1;
		}
	}

	.home-boxagent-status__summary {
		margin: 0;
		color: #c6d4f7;
		font-size: 0.88rem;
	}

	.home-boxagent-status__provisioning-note {
		margin: -0.2rem 0 0;
		color: #9fb4e6;
		font-size: 0.79rem;
	}

	.home-boxagent-status__login-ready {
		display: inline-flex;
		align-items: center;
		gap: 0.45rem;
		width: fit-content;
		margin: 0;
		padding: 0.32rem 0.55rem;
		border: 1px solid rgb(151 173 226 / 24%);
		border-radius: 999px;
		background: rgb(7 14 31 / 74%);
		color: #d4def7;
		font-size: 0.81rem;
		font-weight: 500;
	}

	.home-boxagent-status__login-ready[data-ready="false"] {
		border-color: rgb(251 146 60 / 45%);
		background: rgb(80 38 11 / 30%);
		color: #ffd9b0;
	}

	.home-boxagent-status__login-ready[data-ready="true"] {
		border-color: rgb(52 211 153 / 45%);
		background: rgb(12 59 42 / 34%);
		color: #b9f2dc;
	}

	.home-boxagent-status__login-ready strong {
		color: inherit;
	}

	.home-boxagent-status__login-ready span {
		font-weight: 700;
	}

	.home-boxagent-status__error {
		margin: 0;
		color: #ffc2c2;
		font-size: 0.82rem;
	}

	.home-boxagent-status__details {
		display: grid;
		gap: 0.35rem;
		padding: 0.7rem;
		border-radius: 9px;
		background: rgb(3 9 22 / 72%);
	}

	.home-boxagent-status__details p {
		margin: 0;
		color: #adc0ec;
		font-size: 0.83rem;
	}

	.home-boxagent-status__details code {
		display: inline-block;
		padding: 0.08rem 0.35rem;
		border-radius: 5px;
		background: rgb(20 41 88 / 55%);
		color: #f1f6ff;
	}

	.home-boxagent-status__repo-key {
		display: grid;
		gap: 0.4rem;
		padding: 0.7rem;
		border-radius: 9px;
		background: rgb(7 17 38 / 82%);
	}

	.home-boxagent-status__repo-key p {
		margin: 0;
		color: #bed0f9;
		font-size: 0.81rem;
	}

	.home-boxagent-status__repo-key pre {
		margin: 0;
		overflow-x: auto;
		padding: 0.45rem 0.5rem;
		border-radius: 8px;
		background: rgb(3 10 24 / 85%);
		color: #e9f0ff;
		font-size: 0.76rem;
		line-height: 1.35;
	}

	.home-boxagent-status__repo-key-note {
		color: #9cb2e4;
	}

	.home-boxagent-status__forwarding {
		display: grid;
		gap: 0.4rem;
		padding: 0.7rem;
		border-radius: 9px;
		background: rgb(4 12 28 / 78%);
	}

	.home-boxagent-status__forwarding p {
		margin: 0;
		color: #bed0f9;
		font-size: 0.81rem;
	}

	.home-boxagent-status__forwarding code {
		display: inline-block;
		padding: 0.08rem 0.35rem;
		border-radius: 5px;
		background: rgb(20 41 88 / 55%);
		color: #f1f6ff;
		font-size: 0.76rem;
	}

	.home-boxagent-status__forwarding-note {
		color: #f2b884 !important;
	}

	.home-boxagent-status__actions {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.home-boxagent-status__manage,
	.home-boxagent-status__retry {
		font-size: 0.84rem;
	}

	.home-boxagent-status__manage-note {
		margin: 0;
		align-self: center;
		color: #f6d08a;
		font-size: 0.81rem;
	}

	.home-compare,
	.home-use-cases {
		max-width: 960px;
		margin: 4.4rem auto 0;
	}

	.home-section-tag {
		margin: 0;
		text-align: center;
		color: #d95f6c;
		font-size: 0.8rem;
		text-transform: uppercase;
		letter-spacing: 0.08em;
	}

	.home-compare h2,
	.home-use-cases h2 {
		margin: 0.8rem 0 0;
		text-align: center;
		color: #f1f5ff;
		font-size: clamp(1.65rem, 4vw, 2.75rem);
	}

	.home-compare__grid {
		display: grid;
		gap: 1.2rem;
		margin-block-start: 1.6rem;
	}

	.home-compare__column {
		padding: 1rem;
		border: 1px solid rgb(97 122 174 / 35%);
		border-radius: 14px;
		background: rgb(4 10 24 / 72%);
	}

	.home-compare__column h3 {
		margin: 0;
		color: #e8efff;
		font-size: 1rem;
	}

	.home-compare__column ul {
		margin: 0.9rem 0 0;
		padding: 0;
	}

	.home-compare__column li {
		display: flex;
		justify-content: space-between;
		gap: 1rem;
		padding: 0.36rem 0;
		list-style: none;
		color: #b7c4e4;
		font-size: 0.9rem;
		border-bottom: 1px solid rgb(101 126 178 / 20%);
	}

	.home-compare__total {
		margin: 0.8rem 0 0;
		color: #dce8ff;
		font-size: 1rem;
	}

	.home-compare__column--highlight {
		background:
			radial-gradient(circle at 20% 15%, rgb(63 95 163 / 30%), transparent 52%),
			rgb(7 15 35 / 82%);
	}

	.home-compare__time {
		margin: 0.8rem 0 0.35rem;
		color: #f8fbff;
		font-size: 2.1rem;
		font-weight: 700;
	}

	.home-compare__column--highlight p {
		color: #b9c8ea;
		font-size: 0.95rem;
		line-height: 1.55;
	}

	.home-use-cases p {
		margin: 0.8rem 0 0;
		text-align: center;
		color: #9baedb;
		font-size: 1.1rem;
	}

	.home-usage-policy {
		max-width: 960px;
		margin: 4.4rem auto 0;
		padding: 1rem;
		border: 1px solid rgb(97 122 174 / 35%);
		border-radius: 14px;
		background: rgb(4 10 24 / 72%);
	}

	.home-usage-policy h2 {
		margin: 0;
		color: #f1f5ff;
		font-size: 1.2rem;
	}

	.home-usage-policy p {
		margin: 0.75rem 0 0;
		color: #b7c4e4;
		font-size: 0.92rem;
		line-height: 1.5;
	}

	.home-chip-cloud {
		justify-content: center;
		margin-block-start: 1.4rem;
	}

	.footer--marketing {
		padding: 3rem 1rem 2.2rem;
		text-align: center;
		color: #7f92bf;
		font-size: 0.88rem;
	}

	@media screen and (min-width: 400px) {
		.header {
			flex-direction: row;
		}

		.nav {
			margin-inline-start: auto;
		}

		.top-bar ul {
			justify-content: flex-start;
		}

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

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

	@media screen and (min-width: 860px) {
		.home-compare__grid {
			grid-template-columns: 1fr 1fr;
		}
	}
}

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