/*
  Polar — site styles.

  A dark charcoal page with light ink, one accent. The accent is the blue
  from the Polar logo and is spent on a few solid blocks (the main call to
  action, button hovers) and the line drawings, never as tints or glows.
  Hierarchy comes from scale: a display size for the few words that can
  carry it, then a large jump down to body. Structure comes from rules: a
  heavy ink rule opens a group of columns, hairlines separate items inside
  it.
*/

@font-face {
	font-family: "Geist";
	src: url("../fonts/Geist-VariableFont_wght.ttf") format("truetype");
	font-weight: 100 900;
	font-display: swap;
}

:root {
	color-scheme: dark;
	--paper: #1f2023;
	--paper-raised: #28292d;
	--ink: #ededeb;
	--ink-2: #b4b5b9;
	--ink-3: #8b8c91;
	--hair: #36373c;
	--watermark: #26272b;

	/* Console: a dark panel, so the plugin's own chat colours read as they do in game */
	--console-bg: #161719;
	--console-raised: #1d1e21;
	--console-hair: #2e2f33;
	--console-dim: #8f8f89;
	--mc-label: #b7cfed;
	--mc-alert: #6ea2e2;
	--mc-number: #ffca6b;
	--mc-text: #f2f2ef;
	--mc-muted: #8f8f89;
	--mc-faint: #5a5a56;
	--mc-green: #3fae49;
	--mc-red: #f05252;

	--accent: #3c6fd8;
	--accent-hover: #4a7de6;
	--accent-ink: #6ea2e2; /* the accent as text: the logo blue is too dim on the dark paper */
	--on-accent: #ffffff;

	--night: #161719;
	--night-ink: #f2f2ef;
	--night-ink-2: #a3a39d;
	--night-hair: #2e2f33;
	--night-watermark: #1d1e21;

	--r: 6px;
	--r-lg: 10px;

	--t-xs: 0.8125rem;
	--t-sm: 0.9375rem;
	--t-base: 1.0625rem;
	--t-lg: 1.375rem;
	--t-xl: clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem);
	--t-2xl: clamp(2.75rem, 1.6rem + 4.6vw, 5.5rem);

	--gutter: clamp(16px, 4vw, 48px);
	--max: 1320px;
	--section: clamp(96px, 12vw, 176px);

	--ease: cubic-bezier(0.2, 0, 0, 1);
	--mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
	padding: 0;
}

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

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	background: var(--paper);
	color: var(--ink);
	font-family: "Geist", system-ui, sans-serif;
	font-size: var(--t-base);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	font-variant-numeric: lining-nums;
	overflow-x: hidden;
}

img,
svg {
	display: block;
	max-width: 100%;
}

a {
	color: inherit;
	text-decoration: none;
}

button,
input {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: 0;
	cursor: pointer;
}

code {
	font-family: var(--mono);
	font-size: 0.9em;
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

.wrap {
	width: 100%;
	max-width: var(--max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

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

/* ---------- Type ---------- */

/* The highlighted word in the headline: a blue run from the light console
   blue to the accent, repeated on each line it wraps onto. */
.display-highlight {
	background: linear-gradient(100deg, #b7cfed 0%, var(--accent-ink) 45%, var(--accent-hover) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.h2 {
	font-size: var(--t-2xl);
	font-weight: 750;
	line-height: 0.96;
	letter-spacing: -0.045em;
}

.h3 {
	font-size: var(--t-lg);
	font-weight: 650;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

.lead {
	font-size: var(--t-lg);
	line-height: 1.4;
	letter-spacing: -0.01em;
	color: var(--ink-2);
	max-width: 34rem;
}

.small {
	font-size: var(--t-sm);
	color: var(--ink-2);
}

.text-link {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 150ms var(--ease);
}

.text-link:hover {
	color: var(--accent-ink);
}

/* ---------- Buttons ---------- */

/* External-link arrow. Drawn as an icon so it keeps the same size and weight
   everywhere and sits on the text's centre line, unlike the ↗ glyph. */
.ext {
	display: inline-block;
	flex: none;
	width: 0.7em;
	height: 0.7em;
	margin-left: 0.15em;
	vertical-align: -0.02em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9 9 3M4 3h5v5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9 9 3M4 3h5v5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.btn .ext {
	margin-left: -6px;
}

/* On hover the button's hover colour slides in from the left, and the label
   changes colour right at the edge of it.

   The box is painted by one gradient twice its width, hover colour on the
   left half and resting colour on the right, shown right-aligned at rest and
   left-aligned on hover. It is one layer, so nothing underneath can show
   along the rounded corners.

   site.js puts the label in a face and lays a copy over it in the hover
   colours. On hover the copy is uncovered from the left while the original
   is covered from the left, both measured over the same padding box as the
   gradient and on the same timing, so the edges stay together. Without the
   script the label simply changes colour. */
.btn {
	--btn-pad: 20px;
	--btn-text: var(--ink);
	--btn-text-hover: var(--btn-text);
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 48px;
	padding: 0 var(--btn-pad);
	border-radius: var(--r);
	font-size: var(--t-sm);
	font-weight: 600;
	white-space: nowrap;
	color: var(--btn-text);
	background: linear-gradient(to right, var(--btn-fill, transparent) 50%, var(--btn-base, transparent) 50%) right center / 200% 100% no-repeat padding-box;
	transition: background-position 320ms var(--ease), color 320ms var(--ease), border-color 320ms var(--ease);
}

.btn:hover {
	color: var(--btn-text-hover);
	background-position: left center;
}

.btn.has-faces {
	padding: 0;
}

.btn-face {
	display: flex;
	flex: 1 0 auto;
	align-self: stretch;
	align-items: center;
	justify-content: inherit;
	gap: inherit;
	padding: 0 var(--btn-pad);
	color: var(--btn-text);
	clip-path: inset(0 0 0 0);
	transition: clip-path 320ms var(--ease);
}

.btn-face-hover {
	position: absolute;
	inset: 0;
	color: var(--btn-text-hover);
	clip-path: inset(0 100% 0 0);
}

.btn.has-faces:hover .btn-face {
	clip-path: inset(0 0 0 100%);
}

.btn.has-faces:hover .btn-face-hover {
	clip-path: inset(0 0 0 0);
}

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

.btn svg {
	width: 16px;
	height: 16px;
	flex: none;
}

.btn-ink {
	--btn-base: var(--ink);
	--btn-fill: var(--accent);
	--btn-text: var(--paper);
	--btn-text-hover: var(--on-accent);
}

.btn-line {
	--btn-fill: var(--ink);
	--btn-text: var(--ink);
	--btn-text-hover: var(--paper);
	border: 1px solid var(--ink);
}

/* The accent button flips to ink, the reverse of the ink button */
.btn-accent {
	--btn-base: var(--accent);
	--btn-fill: var(--ink);
	--btn-text: var(--on-accent);
	--btn-text-hover: var(--paper);
}

/* Same as the outline button elsewhere: a solid border that stays put while
   the fill slides in */
.night .btn-line {
	--btn-fill: var(--night-ink);
	--btn-text: var(--night-ink);
	--btn-text-hover: var(--night);
	border-color: var(--night-ink);
}

/* ---------- Navigation ---------- */

.nav {
	position: fixed;
	top: 16px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 50;
	width: max-content;
	max-width: calc(100% - 2 * var(--gutter));
}

.nav-bar {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 4px;
	background: var(--paper-raised);
	border: 1px solid var(--hair);
	border-radius: var(--r-lg);
}

.nav-brand {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 12px 0 8px;
	font-weight: 700;
	font-size: var(--t-sm);
	letter-spacing: -0.01em;
}

.nav-brand img {
	width: 22px;
	height: auto;
}

.nav-links {
	display: flex;
	align-items: center;
	list-style: none;
}

.nav-links a {
	display: block;
	padding: 8px 12px;
	border-radius: var(--r);
	font-size: var(--t-sm);
	color: var(--ink-3);
	transition: color 150ms var(--ease);
}

.nav-links a:hover,
.nav-links a[aria-current="true"] {
	color: var(--ink);
}

.nav-links a[aria-current="true"] {
	font-weight: 600;
}

/* Reserve the bold width up front, so a link doesn't grow and push its
   neighbours when it becomes the current one while scrolling. */
.nav-links a[data-label]::after {
	content: attr(data-label);
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	font-weight: 600;
}

.nav-cta {
	--btn-pad: 14px;
	height: 36px;
	margin-left: 4px;
}

.nav-toggle {
	display: none;
	height: 36px;
	padding: 0 14px;
	border-radius: var(--r);
	font-size: var(--t-sm);
	font-weight: 600;
}

.nav-toggle:hover {
	background: var(--paper);
}

@media (max-width: 860px) {
	.nav {
		left: var(--gutter);
		right: var(--gutter);
		transform: none;
		width: auto;
		max-width: none;
	}

	.nav-bar {
		flex-wrap: wrap;
		/* Only the columns are spaced; the folded menu row adds no height */
		row-gap: 0;
		justify-content: space-between;
	}

	.nav-toggle {
		display: block;
	}

	.nav-cta {
		display: none;
	}

	/* The menu folds open under the bar: its height, rule and spacing grow
	   together, then the links drop in one after another. Closed, it is
	   hidden from focus and assistive tech once the fold has finished. */
	.nav-links {
		order: 3;
		flex-basis: 100%;
		flex-direction: column;
		align-items: stretch;
		max-height: 0;
		overflow: hidden;
		visibility: hidden;
		padding: 0;
		margin-top: 0;
		border-top: 0 solid var(--hair);
		transition:
			max-height 280ms var(--ease),
			padding 280ms var(--ease),
			margin-top 280ms var(--ease),
			border-width 280ms var(--ease),
			visibility 0s linear 280ms;
	}

	.nav.open .nav-links {
		max-height: 560px;
		visibility: visible;
		padding: 4px 0;
		margin-top: 4px;
		border-top-width: 1px;
		transition:
			max-height 360ms var(--ease),
			padding 360ms var(--ease),
			margin-top 360ms var(--ease),
			border-width 360ms var(--ease),
			visibility 0s;
	}

	.nav-links li {
		opacity: 0;
		transform: translateY(-6px);
		transition: opacity 160ms var(--ease), transform 160ms var(--ease);
	}

	.nav.open .nav-links li {
		opacity: 1;
		transform: none;
		transition-duration: 280ms;
	}

	.nav.open .nav-links li:nth-child(2) { transition-delay: 25ms; }
	.nav.open .nav-links li:nth-child(3) { transition-delay: 50ms; }
	.nav.open .nav-links li:nth-child(4) { transition-delay: 75ms; }
	.nav.open .nav-links li:nth-child(5) { transition-delay: 100ms; }
	.nav.open .nav-links li:nth-child(6) { transition-delay: 125ms; }
	.nav.open .nav-links li:nth-child(7) { transition-delay: 150ms; }
	.nav.open .nav-links li:nth-child(8) { transition-delay: 175ms; }
	.nav.open .nav-links li:nth-child(9) { transition-delay: 200ms; }

	/* The open menu: the page's sections, then a labelled group of resources
	   that leave the site, hairlines between rows, the client area last as the
	   one solid button. */
	.nav-links li {
		margin-inline: 12px;
	}

	.nav-links li:not(.nav-group) + li:not(.nav-group, .nav-mobile-cta) {
		border-top: 1px solid var(--hair);
	}

	.nav-links .nav-group {
		padding: 18px 0 6px;
		font-size: var(--t-xs);
		color: var(--ink-3);
	}

	.nav-links a {
		display: flex;
		align-items: center;
		padding: 13px 0;
		border-radius: 0;
		font-size: var(--t-base);
		color: var(--ink);
	}

	/* Only the desktop bar needs the bold width reserved */
	.nav-links a[data-label]::after {
		display: none;
	}

	.nav-links .nav-mobile-only {
		display: block;
	}

	.nav-links .nav-mobile-cta {
		margin: 16px 4px 4px;
	}

	.nav-links .nav-mobile-cta a {
		justify-content: center;
		align-items: center;
		gap: 0;
		height: 48px;
		padding: 0 20px;
		border-radius: var(--r);
		background: var(--ink);
		color: var(--paper);
		font-size: var(--t-sm);
		font-weight: 600;
	}

	/* Dims the page behind the open menu; a tap on it closes the menu */
	.nav::before {
		content: "";
		position: fixed;
		inset: 0;
		z-index: -1;
		background: rgba(12, 13, 15, 0.6);
		opacity: 0;
		visibility: hidden;
		transition: opacity 280ms var(--ease), visibility 0s linear 280ms;
	}

	.nav.open::before {
		opacity: 1;
		visibility: visible;
		transition: opacity 360ms var(--ease), visibility 0s;
	}
}

@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
	.nav::before,
	.nav.open::before,
	.nav-links,
	.nav.open .nav-links,
	.nav-links li,
	.nav.open .nav-links li {
		transition: none;
	}
}

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

/* ---------- Watermark ---------- */

.watermark {
	position: absolute;
	z-index: 0;
	font-size: clamp(9rem, 32vw, 30rem);
	font-weight: 800;
	line-height: 0.8;
	letter-spacing: -0.06em;
	color: var(--watermark);
	pointer-events: none;
	user-select: none;
	white-space: nowrap;
}

/* ---------- Hero ---------- */

.hero {
	position: relative;
	overflow: hidden;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	padding-top: 104px;
	padding-bottom: 32px;
}

.hero .watermark {
	left: 0;
	bottom: -0.04em;
}

/* The hero wordmark drifts slowly to the left. The track holds two identical
   halves, so moving it by half its width loops without a jump. */
.watermark-track {
	display: flex;
	width: max-content;
	animation: watermark-drift 60s linear infinite;
}

.watermark-track span {
	padding-right: 0.35em;
}

@keyframes watermark-drift {
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.watermark-track {
		animation: none;
		transform: translateX(-0.2em);
	}
}

.hero-grid {
	position: relative;
	z-index: 1;
	flex: 1;
	display: grid;
	align-content: center;
}

.hero-main {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	max-width: 1000px;
}

.hero-title {
	font-size: clamp(2.5rem, 1.2rem + 4vw, 4.75rem);
	font-weight: 750;
	line-height: 1.04;
	letter-spacing: -0.04em;
}

.hero-lead {
	max-width: 36em;
	margin-top: 28px;
	font-size: var(--t-lg);
	line-height: 1.5;
	color: var(--ink-2);
}

.hero-lead b {
	font-weight: 600;
	color: var(--accent-ink);
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 40px;
}

.hero-foot {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 24px;
	margin-top: 40px;
	font-size: var(--t-xs);
	color: var(--ink-2);
}

.hero-foot b {
	display: block;
	font-size: var(--t-lg);
	font-weight: 650;
	color: var(--ink);
	letter-spacing: -0.02em;
}

.hero-foot p:last-child {
	text-align: right;
}

@media (max-width: 860px) {
	.hero {
		padding-top: 112px;
	}

	.hero .watermark {
		bottom: -0.06em;
		font-size: 44vw;
	}

	.watermark-track {
		animation-duration: 40s;
	}
}

/* ---------- Drop-in ---------- */

/* The pieces of each main section fade in and drop a short way into place as
   they come into view, after a short pause plus their place in their group.
   site.js marks them (.drop) and sets .drop-ready only when it will also
   reveal them, so without the script, or with reduced motion, nothing is
   hidden. */
.drop-ready .drop {
	opacity: 0;
	transform: translateY(-18px);
	transition:
		opacity 600ms var(--ease) calc(200ms + var(--drop-delay, 0ms)),
		transform 700ms var(--ease) calc(200ms + var(--drop-delay, 0ms));
}

.drop-ready .drop.dropped {
	opacity: 1;
	transform: none;
}

/* ---------- Illustrations ---------- */

/* Line drawings in the page's own palette: hairlines and ink for structure,
   the accent for what is legitimate or Polar's, the game's red for what is
   caught. The data dots stand still for reduced motion (site.js). */

/* Strategy: a small diagram over each column */
.col-art {
	display: block;
	width: 100%;
	max-width: 320px;
	height: auto;
	margin: 0 auto 24px;
	overflow: visible;
}

.art-rule,
.art-track {
	stroke: var(--hair);
	fill: var(--hair);
}

.art-limit {
	stroke: var(--ink-3);
	stroke-dasharray: 4 5;
}

.art-note {
	font-size: 13px;
	fill: var(--ink-3);
}

.art-title {
	font-size: 15px;
	font-weight: 650;
	fill: var(--ink);
}

.art-bar {
	fill: var(--paper-raised);
	stroke: var(--ink-3);
}

.art-ghost {
	fill: none;
	stroke: var(--mc-red);
	stroke-dasharray: 4 4;
}

.art-solid,
.art-fill {
	fill: var(--accent);
}

.art-arrow,
.art-cross {
	fill: none;
	stroke: var(--ink-2);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.art-cross {
	stroke: var(--mc-red);
	stroke-width: 2.4;
}

.art-line {
	stroke: var(--ink-3);
	stroke-width: 2;
	stroke-linecap: round;
}

.art-dashed {
	stroke-dasharray: 2 6;
}

.art-strong {
	stroke: var(--accent-ink);
	stroke-width: 3;
}

.art-dot {
	fill: var(--ink-3);
}

.art-box {
	fill: var(--paper-raised);
	stroke: var(--ink-3);
}

.art-flow {
	fill: none;
	stroke: var(--hair);
	stroke-width: 1.5;
}

.art-packets,
.flow-up-packets {
	fill: var(--accent-ink);
}

/* Features: a line icon over each heading */
.col-icon {
	display: block;
	width: 32px;
	height: 32px;
	margin-bottom: 18px;
	color: var(--accent-ink);
}

/* Cloud: the server and the cloud, with data going up and verdicts coming
   back */
.cloud-art {
	display: block;
	width: 100%;
	max-width: 520px;
	height: auto;
	margin-top: clamp(32px, 4vw, 48px);
}

.cloud-art .flow,
.cloud-art .flow-head {
	fill: none;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cloud-art .flow-up {
	stroke: var(--accent-ink);
}

.cloud-art .flow-down {
	stroke: var(--ink-3);
}

.cloud-art .flow-label {
	font-size: 13px;
	fill: var(--ink-3);
}

.flow-down-packets {
	fill: var(--ink-2);
}

.cloud-art .box {
	fill: var(--paper-raised);
	stroke: var(--hair);
}

.cloud-art .box-cloud {
	stroke: var(--accent-ink);
}

.cloud-art .box-rule {
	stroke: var(--hair);
}

.cloud-art .box-title {
	font-size: 16px;
	font-weight: 650;
	fill: var(--ink);
}

.cloud-art .box-sub {
	font-size: 14px;
	fill: var(--ink-2);
}

/* ---------- Sections ---------- */

.section {
	position: relative;
	padding-block: var(--section);
}

.section + .section {
	padding-top: 0;
}

.section-head {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px 48px;
	align-items: end;
	margin-bottom: clamp(56px, 7vw, 96px);
}

.section-head .lead {
	justify-self: end;
}

/* Lead under the heading instead of beside it */
.section-head.stacked {
	grid-template-columns: 1fr;
	gap: 24px;
}

.section-head.stacked .lead {
	justify-self: start;
	max-width: 36em;
}

@media (max-width: 860px) {
	.section-head {
		grid-template-columns: 1fr;
	}

	.section-head .lead {
		justify-self: start;
	}
}

/* Columns opened by a heavy rule */
.cols {
	display: grid;
	grid-template-columns: repeat(var(--n, 3), 1fr);
	gap: 56px 32px;
	list-style: none;
}

.col {
	padding-top: 20px;
	border-top: 2px solid var(--ink);
}

.col .h3 + p,
.col .h3 + div {
	margin-top: 12px;
}

.col p {
	color: var(--ink-2);
	max-width: 30rem;
}

.col p + p {
	margin-top: 12px;
}

.col-light {
	border-top-width: 1px;
}

@media (max-width: 1000px) {
	.cols {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.cols {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

/* ---------- Console ---------- */

.console-grid {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: 48px clamp(32px, 5vw, 80px);
	align-items: center;
}

.console-copy .lead {
	margin-top: 28px;
}

.console {
	background: var(--console-bg);
	color: var(--mc-text);
	border-radius: var(--r-lg);
	overflow: hidden;
	font-family: var(--mono);
	font-size: var(--t-xs);
	line-height: 1.6;
}

.console-top {
	padding: 12px 16px;
	border-bottom: 1px solid var(--console-hair);
	font-family: "Geist", system-ui, sans-serif;
	font-size: var(--t-sm);
	font-weight: 600;
}

.chat {
	position: relative;
}

.console-output {
	height: 360px;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 12px 0;
	scrollbar-width: thin;
	scrollbar-color: var(--console-hair) transparent;
}

.console-output div {
	padding: 1px 16px;
	word-break: break-word;
}

.completions {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	max-height: 200px;
	overflow-y: auto;
	background: var(--console-raised);
	border-top: 1px solid var(--console-hair);
	scrollbar-width: thin;
	scrollbar-color: var(--console-hair) transparent;
}

.singleCompletion {
	padding: 6px 16px;
	cursor: pointer;
	transition: background-color 120ms var(--ease);
}

.singleCompletion:hover,
.singleCompletion.selected {
	background: var(--paper-raised);
}

.singleCompletion.selected {
	box-shadow: inset 2px 0 0 var(--accent);
}

.command-container {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 16px;
	border-top: 1px solid var(--console-hair);
}

.command-container span {
	color: var(--console-dim);
}

.command {
	flex: 1;
	min-width: 0;
	height: 48px;
	background: transparent;
	border: 0;
	outline: 0;
	font-family: var(--mono);
	font-size: var(--t-sm);
	color: var(--mc-text);
}

.command::placeholder {
	color: var(--console-dim);
}

.console:focus-within {
	box-shadow: 0 0 0 2px var(--accent);
}

@media (max-width: 1000px) {
	.console-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.console-output {
		height: 300px;
	}
}

/* ---------- Cloud ---------- */

.split {
	display: grid;
	/* The left column widens if needed so the heading stays on one line */
	grid-template-columns: minmax(min-content, 5fr) 7fr;
	gap: 48px clamp(32px, 5vw, 80px);
	align-items: start;
}

.split .h2 {
	white-space: nowrap;
}

.split .lead {
	margin-top: 28px;
}

.rows {
	list-style: none;
	border-top: 2px solid var(--ink);
}

.rows li {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 8px 32px;
	padding: 24px 0;
	border-bottom: 1px solid var(--hair);
}

.rows h3 {
	font-size: var(--t-base);
	font-weight: 650;
	letter-spacing: -0.01em;
}

.rows p {
	color: var(--ink-2);
}

.rows p + p {
	margin-top: 10px;
}

@media (max-width: 1000px) {
	.split {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.rows li {
		grid-template-columns: 1fr;
	}
}


/* ---------- Docs prompt ---------- */

.prompt {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: end;
	gap: 24px 48px;
	margin-top: clamp(64px, 8vw, 112px);
	padding-top: 24px;
	border-top: 2px solid var(--ink);
}

.prompt p {
	margin-top: 8px;
	color: var(--ink-2);
	max-width: 34rem;
}

/* ---------- Pricing ---------- */

/* One table: plan heads across the top, limits as rows, buttons at the foot.
   On narrow screens it scrolls sideways with the row labels pinned. */
.plans-scroll {
	overflow-x: auto;
}

.plans {
	width: 100%;
	min-width: 760px;
	border-collapse: collapse;
	table-layout: fixed;
	text-align: left;
}

.plans th,
.plans td {
	padding: 14px 16px 14px 0;
	vertical-align: top;
	font-weight: inherit;
}

.plans tr > :first-child {
	width: 20%;
	position: sticky;
	left: 0;
	z-index: 1;
	background: var(--paper);
}

.plans thead > tr > * {
	padding-top: 20px;
	padding-bottom: 28px;
	border-top: 2px solid var(--ink);
}

.plans tbody th {
	color: var(--ink-2);
	font-size: var(--t-sm);
}

.plans tbody td {
	font-size: var(--t-base);
	font-weight: 600;
}

.plans tbody tr {
	border-top: 1px solid var(--hair);
}

.plans tbody tr:last-child {
	border-bottom: 1px solid var(--hair);
}

/* A rule between the row labels and the values */
.plans tbody th {
	border-right: 1px solid var(--hair);
}

.plans tr > :not(:first-child) {
	padding-left: 20px;
}

.plans .plan-inf span[aria-hidden] {
	font-size: 1.35em;
	line-height: 1;
}

.plans .plan-no {
	color: var(--ink-3);
	font-weight: 400;
}

.plans tfoot td {
	padding-top: 32px;
}

.plans tfoot .btn {
	width: 100%;
	justify-content: center;
}

/* On narrow screens the table becomes one card per plan: every cell is laid
   out in a single column and grouped by plan with `order`, and each limit
   shows its row label (data-label) beside the value. */
@media (max-width: 1000px) {
	.plans-scroll {
		overflow: visible;
	}

	.plans {
		display: grid;
		min-width: 0;
	}

	.plans thead,
	.plans tbody,
	.plans tfoot,
	.plans tr {
		display: contents;
	}

	.plans tr > :first-child {
		display: none;
	}

	.plans tr > :nth-child(2) { order: 1; }
	.plans tr > :nth-child(3) { order: 2; }
	.plans tr > :nth-child(4) { order: 3; }
	.plans tr > :nth-child(5) { order: 4; }

	.plans th,
	.plans td {
		display: block;
		padding-right: 0;
		padding-left: 0;
	}

	.plans thead th {
		padding-bottom: 20px;
	}

	.plans thead th:not(:nth-child(2)) {
		margin-top: 56px;
	}

	.plans tbody td {
		display: flex;
		justify-content: space-between;
		gap: 16px;
		padding: 12px 0;
		border-top: 1px solid var(--hair);
	}

	.plans tbody tr:last-child td {
		border-bottom: 1px solid var(--hair);
	}

	.plans tbody td::before {
		content: attr(data-label);
		color: var(--ink-2);
		font-size: var(--t-sm);
		font-weight: 400;
	}

	.plans tfoot td {
		padding-top: 20px;
	}

	.plans .plan-desc {
		min-height: 0;
	}
}

.plan-figure {
	font-size: clamp(3.5rem, 2rem + 4vw, 6rem);
	font-weight: 760;
	line-height: 0.9;
	letter-spacing: -0.05em;
	font-variant-numeric: tabular-nums;
}

.plan-unit {
	margin-top: 10px;
	font-size: var(--t-sm);
	color: var(--ink-2);
}

.plan-name {
	margin-top: 36px;
	font-size: var(--t-lg);
	font-weight: 650;
	letter-spacing: -0.02em;
}

.plan-desc {
	margin-top: 8px;
	color: var(--ink-2);
	font-size: var(--t-sm);
	line-height: 1.5;
	/* Room for three lines, so the prices below line up */
	min-height: 4.5em;
}

.plan-price {
	margin-top: 20px;
	font-size: var(--t-sm);
	color: var(--ink-2);
}

.plan-price b {
	font-size: var(--t-xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--ink);
}

.footnote {
	margin-top: 48px;
	font-size: var(--t-sm);
	color: var(--ink-2);
}

/* ---------- Night: closing call to action + footer ---------- */

.night {
	position: relative;
	overflow: hidden;
	background: var(--night);
	color: var(--night-ink);
}

.night .watermark {
	color: var(--night-watermark);
	right: -0.06em;
	top: 0.12em;
}

.closing {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: 48px clamp(32px, 5vw, 80px);
	padding-block: var(--section) clamp(72px, 9vw, 128px);
}

.closing .lead {
	margin-top: 28px;
	color: var(--night-ink-2);
}

.closing-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 40px;
}

.closing-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-self: center;
}

.closing-nav h2 {
	padding-bottom: 12px;
	border-bottom: 1px solid var(--night-hair);
	font-size: var(--t-xs);
	font-weight: 600;
	color: var(--night-ink-2);
}

.closing-nav ul {
	list-style: none;
	margin-top: 8px;
}

.closing-nav a {
	display: inline-block;
	padding: 5px 0;
	font-size: var(--t-sm);
	transition: color 150ms var(--ease);
}

.closing-nav a:hover {
	color: var(--night-ink-2);
}

.footer {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 16px 48px;
	padding-block: 28px;
	border-top: 1px solid var(--night-hair);
	font-size: var(--t-xs);
	color: var(--night-ink-2);
}

.footer-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--night-ink);
	font-size: var(--t-sm);
	font-weight: 700;
}

.footer-brand img {
	width: 24px;
	height: auto;
}

.footer p {
	max-width: 36rem;
}

.footer-legal {
	text-align: right;
}

@media (max-width: 900px) {
	.closing {
		grid-template-columns: 1fr;
	}

	.footer {
		grid-template-columns: 1fr;
	}

	.footer-legal {
		text-align: left;
	}
}

/* ---------- Legal pages ---------- */

.doc-head {
	padding-top: 168px;
	padding-bottom: clamp(48px, 6vw, 80px);
}

.doc-head p {
	margin-top: 24px;
	font-size: var(--t-sm);
	color: var(--ink-2);
}

.doc {
	display: grid;
	grid-template-columns: minmax(0, 46rem);
	padding-top: 32px;
	padding-bottom: var(--section);
	border-top: 2px solid var(--ink);
	color: var(--ink-2);
}

.doc section + section {
	margin-top: 48px;
}

.doc h2 {
	margin-bottom: 16px;
	font-size: var(--t-lg);
	font-weight: 650;
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var(--ink);
}

.doc h3 {
	margin: 28px 0 10px;
	font-size: var(--t-base);
	font-weight: 650;
	color: var(--ink);
}

.doc p + p,
.doc p + ul,
.doc p + ol,
.doc ul + p,
.doc ol + p,
.doc div + p,
.doc p + div {
	margin-top: 14px;
}

.doc div > div + div {
	margin-top: 16px;
}

.doc ul,
.doc ol {
	padding-left: 1.25rem;
}

.doc li + li {
	margin-top: 8px;
}

.doc li::marker {
	color: var(--ink-3);
}

.doc strong,
.doc b,
.doc em {
	color: var(--ink);
	font-weight: 600;
	font-style: normal;
}

.doc a {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}

.doc a:hover {
	color: var(--accent-ink);
}