@font-face {
	font-family: "Barlow";
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url("/assets/barlow-latin-400-normal.b0a8ad37ac.woff2") format("woff2");
}
@font-face {
	font-family: "Barlow";
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	src: url("/assets/barlow-latin-600-normal.4b52ddd483.woff2") format("woff2");
}
@font-face {
	font-family: "Barlow";
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url("/assets/barlow-latin-700-normal.2d797dd8b3.woff2") format("woff2");
}
@font-face {
	font-family: "Barlow Condensed";
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url("/assets/barlow-condensed-latin-700-normal.3787a5a419.woff2") format("woff2");
}
@font-face {
	font-family: "Barlow Condensed";
	font-weight: 800;
	font-style: normal;
	font-display: swap;
	src: url("/assets/barlow-condensed-latin-800-normal.2515494e8c.woff2") format("woff2");
}
@font-face {
	font-family: "Barlow Condensed";
	font-weight: 800;
	font-style: italic;
	font-display: swap;
	src: url("/assets/barlow-condensed-latin-800-italic.59b4810062.woff2") format("woff2");
}

:root {
	--ink: #0c0e12;
	--ink-raised: #1a1f26;
	--ink-line: #3a414b;
	--ink-line-strong: #4a515c;
	--paper: #eceef0;
	--white: #ffffff;
	--yellow: #ffd400;
	--yellow-soft: #fff6c2;
	--text-soft: #4a515b;
	--rule: #c9ced4;
	--on-dark: #f1f3f5;
	--on-dark-soft: #c9ced4;
	--on-dark-muted: #a3abb5;
	--link: #1d5fb8;
	--green: #9fd6a0;
	--blue: #7fb2f5;
	--font-text: Barlow, system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
	--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	--gutter: 48px;
	--header-height: 80px;
	--focus: var(--link);
}

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--header-height) + 16px);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-text);
	font-size: 18px;
	line-height: 1.55;
	overflow-wrap: break-word;
}

img {
	max-width: 100%;
}

a {
	color: var(--link);
}
a:hover {
	color: var(--ink);
}

:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
}
.on-dark :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible {
	--focus: var(--yellow);
}

.skip-link {
	position: absolute;
	left: 8px;
	top: -100px;
	z-index: 100;
	background: var(--yellow);
	color: var(--ink);
	font-weight: 700;
	padding: 10px 16px;
	text-decoration: none;
}
.skip-link:focus {
	top: 8px;
}

.container {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Typography */

.eyebrow {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 16px;
	line-height: 1.55;
	color: var(--text-soft);
}
.on-dark .eyebrow {
	color: var(--on-dark-muted);
}

.title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: 56px;
	line-height: 1;
}

.lead {
	margin: 0;
	font-size: 19px;
	color: var(--text-soft);
	max-width: 36em;
}
.lead-strong {
	color: var(--ink);
}
.on-dark .lead {
	color: var(--on-dark-soft);
}

.stack-sm {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.stack {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* Buttons */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 44px;
	padding: 14px 26px;
	border: 2px solid var(--ink);
	background: transparent;
	color: var(--ink);
	font: 700 18px/1.2 var(--font-text);
	text-decoration: none;
	cursor: pointer;
}
.button svg {
	flex: none;
}
.button-primary {
	background: var(--yellow);
	border-color: var(--yellow);
	color: var(--ink);
}
.button-primary:hover {
	background: var(--white);
	border-color: var(--white);
	color: var(--ink);
}
.button-ghost {
	border-color: var(--on-dark);
	color: var(--on-dark);
	padding-inline: 24px;
}
.button-ghost:hover {
	background: var(--on-dark);
	color: var(--ink);
}
.button-dark {
	background: var(--ink);
	color: var(--white);
}
.button-dark:hover {
	background: var(--white);
	color: var(--ink);
}
.button-outline:hover {
	background: var(--ink);
	color: var(--white);
}

/* Header */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--ink);
	border-bottom: 4px solid var(--yellow);
	max-height: 100vh;
	max-height: 100dvh;
	overflow-y: auto;
}

.bar {
	display: flex;
	align-items: center;
	gap: 36px;
	min-height: 76px;
}

.brand {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--yellow);
}
a.brand:hover {
	color: var(--yellow);
}
.brand svg {
	width: 34px;
	height: 34px;
	flex: none;
}
.brand-name {
	font-family: var(--font-display);
	font-weight: 800;
	font-style: italic;
	text-transform: uppercase;
	font-size: 28px;
	line-height: 1;
}

.nav {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	gap: 6px 26px;
}
.nav a {
	color: var(--on-dark-muted);
	text-decoration: none;
	font-weight: 600;
	font-size: 16px;
}
.nav a:hover,
.login:hover {
	color: var(--on-dark);
}

.lang {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 19px;
}
.lang a {
	color: var(--on-dark-muted);
	text-decoration: none;
	line-height: 1.1;
	padding: 4px 0;
}
.lang a:hover {
	color: var(--on-dark);
}
.lang a[aria-current="page"] {
	color: var(--on-dark);
	border-bottom: 3px solid var(--yellow);
}

.login {
	color: var(--on-dark);
	font-weight: 600;
	font-size: 16px;
	text-decoration: none;
}

.bar .button {
	min-height: 0;
	padding: 10px 18px;
	font-size: 16px;
}

.menu-button {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--ink-line-strong);
	background: transparent;
	color: var(--on-dark);
	place-items: center;
	cursor: pointer;
}
.menu-button .icon-close {
	display: none;
}
.menu-open .menu-button .icon-open {
	display: none;
}
.menu-open .menu-button .icon-close {
	display: block;
}

/* Hero */

.hero {
	background: var(--ink);
	color: var(--on-dark);
	overflow: hidden;
}
.hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 11fr) minmax(0, 13fr);
	gap: 48px;
	align-items: center;
	padding-top: 96px;
	padding-bottom: 120px;
}
.hero-copy {
	display: flex;
	flex-direction: column;
	gap: 28px;
	min-width: 0;
}
.hero-eyebrow {
	margin: 0;
	font-weight: 600;
	font-size: 18px;
	line-height: 1.4;
	color: var(--on-dark-muted);
	max-width: 30em;
}
.hero-title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-style: italic;
	text-transform: uppercase;
	font-size: clamp(54px, 5.6vw, 80px);
	line-height: 0.95;
}
.hero-title em {
	font-style: inherit;
	background: var(--yellow);
	color: var(--ink);
	padding: 0 0.12em;
	white-space: nowrap;
}
.pills {
	list-style: none;
	margin: -6px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--ink);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.55;
	text-decoration: none;
	padding: 5px 13px;
	border-radius: 999px;
}
a.pill:hover {
	color: var(--ink);
	box-shadow: 0 0 0 3px var(--on-dark);
}
.pill-ai {
	background: var(--yellow);
}
.pill-open {
	background: var(--green);
}
.pill-lang {
	background: var(--blue);
}
.hero-text {
	margin: 0;
	font-size: 21px;
	line-height: 1.5;
	color: var(--on-dark-soft);
	max-width: 34em;
}
.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 4px;
}
.hero-note {
	margin: 0;
	font-size: 15px;
	color: var(--on-dark-muted);
	max-width: 36em;
}

.hero-visual {
	position: relative;
	width: 100%;
	max-width: 560px;
	justify-self: end;
	padding: 0 0 48px 56px;
}
.browser {
	background: var(--ink-raised);
	border: 1px solid var(--ink-line);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 30px 60px rgb(0 0 0 / 0.45);
}
.browser-bar {
	height: 38px;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 14px;
	border-bottom: 1px solid var(--ink-line);
}
.browser-bar i {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--ink-line-strong);
}
.browser-url {
	margin-left: 14px;
	flex: 1;
	max-width: 340px;
	background: var(--ink);
	color: var(--on-dark-muted);
	font-size: 13px;
	padding: 3px 12px;
	border-radius: 5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.browser img {
	display: block;
	width: 100%;
	height: auto;
}

.phone-mini {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 176px;
	background: #2a3038;
	border-radius: 30px;
	padding: 7px;
	box-shadow: 0 24px 48px rgb(0 0 0 / 0.55);
}
.phone-mini div {
	border-radius: 24px;
	overflow: hidden;
	height: 340px;
	background: var(--paper);
}
.phone-mini img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

/* Sections */

.section {
	padding: 112px 0;
}
.section-light {
	background: var(--white);
	border-top: 1px solid var(--rule);
}
.section-light.section-bordered {
	border-bottom: 1px solid var(--rule);
}
.section-paper {
	background: var(--paper);
	border-top: 1px solid var(--rule);
}
.section-dark {
	background: var(--ink);
	color: var(--on-dark);
}
.section-head {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 760px;
}
.container-stack {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

/* How it works */

.steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}
.step {
	background: var(--white);
	border: 2px solid var(--ink);
	box-shadow: 5px 5px 0 var(--ink);
	padding: 26px 24px 28px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.step-number {
	width: 44px;
	height: 44px;
	background: var(--yellow);
	border: 2px solid var(--ink);
	display: grid;
	place-items: center;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 28px;
	line-height: 1;
}
.step h3 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: 27px;
	line-height: 1.05;
}
.step p {
	margin: 0;
	font-size: 17px;
	color: var(--text-soft);
}
/* The video is portrait: beside the steps on desktop so it does not take a whole screen. */
.how {
	display: grid;
	grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}
.how .steps {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.how-video video {
	display: block;
	width: 100%;
	height: auto;
	background: var(--ink);
	border: 2px solid var(--ink);
	box-shadow: 5px 5px 0 var(--ink);
}

/* Two-zone layouts: DOM order is the mobile reading order, areas rearrange it on desktop */

.split {
	display: grid;
	gap: 0 72px;
	align-items: center;
}
.split > * {
	min-width: 0;
}
.split-ai {
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	grid-template-areas:
		"intro media"
		"rest media";
	row-gap: 24px;
}
.split-judges {
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	grid-template-areas:
		"media intro"
		"media rest";
	row-gap: 24px;
}
.split-live {
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	grid-template-areas:
		"intro media"
		"rest media";
	row-gap: 24px;
}
.split-story {
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	grid-template-areas:
		"media intro"
		"media rest";
	row-gap: 22px;
}
.area-intro {
	grid-area: intro;
	align-self: end;
}
.area-rest {
	grid-area: rest;
	align-self: start;
}
.area-media {
	grid-area: media;
}

/* AI connector */

.chat-shot {
	border-radius: 22px;
	overflow: hidden;
	border: 1px solid var(--ink-line);
	box-shadow: 0 30px 60px rgb(0 0 0 / 0.45);
}
.chat-shot img {
	display: block;
	width: 100%;
	height: auto;
}
.connect-steps {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.connect-steps li {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
}
.connect-steps .num {
	width: 32px;
	height: 32px;
	border: 2px solid var(--yellow);
	color: var(--yellow);
	display: grid;
	place-items: center;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 20px;
	line-height: 1;
}
.connect-steps .body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}
.address {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--ink-line-strong);
	background: var(--ink-raised);
}
.address code {
	flex: 1;
	min-width: 0;
	padding: 10px 14px;
	font-family: var(--font-mono);
	font-size: 16px;
	color: var(--yellow);
	overflow-wrap: anywhere;
}
.copy-button {
	display: none;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 16px;
	border: 0;
	border-left: 1px solid var(--ink-line-strong);
	background: transparent;
	color: var(--on-dark);
	font: 600 15px var(--font-text);
	cursor: pointer;
}
.copy-button:hover {
	background: var(--on-dark);
	color: var(--ink);
}
.js .copy-button {
	display: flex;
}

/* Phone mock-ups */

.phone {
	justify-self: center;
	width: 320px;
	max-width: 100%;
	background: var(--ink);
	border-radius: 46px;
	padding: 10px;
	box-shadow: 0 24px 48px rgb(12 14 18 / 0.22);
}
.phone div {
	border-radius: 37px;
	overflow: hidden;
	aspect-ratio: 300 / 640;
	background: var(--white);
}
.phone-paper div {
	background: var(--paper);
}
.phone img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

.checks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.checks li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}
.checks svg {
	flex: none;
	margin-top: 2px;
}

.callout {
	background: var(--yellow-soft);
	border: 2px solid var(--ink);
	padding: 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 10px;
}
.callout h3 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: 22px;
	line-height: 1.1;
}
.callout p {
	margin: 0;
	font-size: 17px;
}
.tags {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 15px;
	font-weight: 600;
}
.tags li {
	background: var(--white);
	border: 1px solid var(--ink);
	padding: 2px 10px;
}

/* Public page */

.facts {
	margin: 18px 0 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border-top: 2px solid var(--ink);
}
.facts div {
	padding: 18px 20px 18px 0;
	border-bottom: 1px solid var(--rule);
}
.facts div:nth-child(even) {
	padding: 18px 0 18px 20px;
	border-left: 1px solid var(--rule);
}
.facts dt {
	font-weight: 700;
}
.facts dd {
	margin: 4px 0 0;
	color: var(--text-soft);
	font-size: 16px;
}

/* Open source */

.oss {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
	grid-template-areas:
		"intro code"
		"links code"
		"contribute contribute";
	column-gap: 64px;
	row-gap: 22px;
	align-items: start;
}
.oss > * {
	min-width: 0;
}
.oss-links {
	grid-area: links;
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	font-weight: 600;
	font-size: 17px;
}
.code-card {
	grid-area: code;
	background: var(--ink);
	color: var(--on-dark);
	border-radius: 10px;
	overflow: hidden;
}
.code-card header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 18px;
	border-bottom: 1px solid var(--ink-line);
	font-family: var(--font-mono);
	font-size: 14px;
	color: var(--on-dark-muted);
}
.code-card .license {
	background: var(--yellow);
	color: var(--ink);
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 15px;
	padding: 1px 8px;
}
.code-card pre {
	margin: 0;
	padding: 22px 22px 26px;
	font-family: var(--font-mono);
	font-size: 15px;
	line-height: 1.65;
	overflow-x: auto;
}
.code-card .k {
	color: var(--yellow);
}
.code-card .s {
	color: var(--green);
}
.code-card .f {
	color: var(--blue);
}
.contribute {
	grid-area: contribute;
	display: flex;
	flex-direction: column;
	gap: 16px;
	border-top: 2px solid var(--ink);
	padding-top: 28px;
	margin-top: 26px;
}
.contribute h3 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: 30px;
	line-height: 1;
}
.contribute ol {
	margin: 0;
	padding-left: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 58em;
}

/* Story */

.story-figure {
	margin: 0;
	position: relative;
	padding-bottom: 72px;
}
.story-figure .photo {
	display: block;
	width: 100%;
	height: auto;
}
.story-figure .portrait {
	position: absolute;
	left: 24px;
	bottom: 0;
	width: 168px;
	height: 168px;
	border-radius: 50%;
	object-fit: cover;
	border: 6px solid var(--white);
	box-shadow: 0 10px 24px rgb(12 14 18 / 0.25);
}
.signature {
	margin: 0;
	font-weight: 600;
}

.photo-credit {
	margin: 0;
	font-size: 0.875rem;
	color: var(--text-soft);
}

/* Contact */

.section-contact {
	background: var(--yellow);
	padding: 96px 0;
	border-top: 2px solid var(--ink);
	border-bottom: 2px solid var(--ink);
}
.contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 56px;
	align-items: center;
}
.contact-title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-style: italic;
	text-transform: uppercase;
	font-size: 64px;
	line-height: 0.95;
}
.contact-text {
	margin: 18px 0 0;
	font-size: 20px;
	max-width: 34em;
}
.contact-actions {
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: flex-start;
}
.contact-actions p {
	margin: 0;
	font-size: 15px;
}
.contact-actions .button-outline {
	padding-block: 13px;
}

/* Footer */

.site-footer {
	background: var(--ink);
	color: var(--on-dark-muted);
	padding: 64px 0 40px;
	font-size: 16px;
}
.site-footer .container {
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr));
	gap: 40px;
}
.footer-brand {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.footer-brand p {
	margin: 0;
	max-width: 24em;
}
.footer-brand .brand svg {
	width: 30px;
	height: 30px;
}
.footer-brand .brand-name {
	font-size: 24px;
}
.footer-col {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.footer-col h2 {
	margin: 0;
	color: var(--on-dark);
	font: 700 16px/1.55 var(--font-text);
}
.site-footer a {
	color: var(--on-dark-muted);
}
.site-footer a.brand,
.site-footer a.brand:hover {
	color: var(--yellow);
	text-decoration: none;
}
.site-footer a:hover {
	color: var(--on-dark);
}
.footer-legal {
	border-top: 1px solid var(--ink-line);
	padding-top: 22px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	font-size: 15px;
}
.footer-legal p {
	margin: 0;
}

/* Text pages (legal notice, 404) */

.page {
	padding: 72px 0 96px;
}
.page .container {
	max-width: 860px;
	display: flex;
	flex-direction: column;
	gap: 28px;
}
.page h1 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: 56px;
	line-height: 1;
}
.page h2 {
	margin: 12px 0 0;
	font-family: var(--font-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: 30px;
	line-height: 1.05;
	scroll-margin-top: calc(var(--header-height) + 16px);
}
.page p,
.page ul {
	margin: 0;
}
.page ul {
	padding-left: 22px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.page dl {
	margin: 0;
	display: grid;
	grid-template-columns: minmax(0, 14em) minmax(0, 1fr);
	border-top: 2px solid var(--ink);
}
.page dt,
.page dd {
	margin: 0;
	padding: 12px 16px 12px 0;
	border-bottom: 1px solid var(--rule);
}
.page dt {
	font-weight: 700;
}
.todo {
	background: var(--yellow);
	color: var(--ink);
	font-weight: 700;
	padding: 1px 6px;
}
.notfound-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* Collapsed navigation */

@media (max-width: 1100px) {
	.bar {
		flex-wrap: wrap;
		gap: 0 16px;
		min-height: 60px;
	}
	.brand {
		flex: 1;
		min-height: 56px;
	}
	.brand svg {
		width: 28px;
		height: 28px;
	}
	.brand-name {
		font-size: 23px;
	}
	.lang {
		font-size: 18px;
		gap: 12px;
	}
	.menu-button {
		display: grid;
		margin-left: -4px;
	}
	.nav,
	.login,
	.bar > .button {
		order: 4;
		flex: 1 0 100%;
	}
	.nav {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 0;
		padding-top: 4px;
		border-top: 1px solid var(--ink-line);
	}
	.nav a,
	.login {
		display: flex;
		align-items: center;
		min-height: 44px;
		font-size: 17px;
	}
	.bar > .button {
		margin: 8px 0 16px;
		min-height: 44px;
	}
	.js .site-header:not(.menu-open) .nav,
	.js .site-header:not(.menu-open) .login,
	.js .site-header:not(.menu-open) .bar > .button {
		display: none;
	}
	.bar > .button {
		order: 6;
	}
	.login {
		order: 5;
	}
	:root {
		--header-height: 64px;
	}
}

/* Single-column layouts */

@media (max-width: 960px) {
	:root {
		--gutter: 32px;
	}
	.hero-grid {
		grid-template-columns: minmax(0, 1fr);
		padding-top: 64px;
		padding-bottom: 72px;
		gap: 40px;
	}
	.hero-title {
		font-size: clamp(46px, 9vw, 72px);
	}
	.hero-visual {
		justify-self: start;
	}
	.steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.how {
		grid-template-columns: minmax(0, 1fr);
	}
	.how-video {
		justify-self: center;
		width: 100%;
		max-width: 420px;
	}
	.section {
		padding: 80px 0;
	}
	.title {
		font-size: 46px;
	}
	.split {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "intro" "media" "rest";
		gap: 24px;
	}
	.split .area-intro,
	.split .area-rest {
		align-self: start;
	}
	.split .area-media:not(.phone) {
		justify-self: center;
		width: 100%;
	}
	.split-ai .area-media {
		max-width: 640px;
		justify-self: start;
	}
	.split-story .area-media {
		max-width: 560px;
		justify-self: start;
	}
	.oss {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "intro" "code" "contribute" "links";
	}
	.contact-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}
	.contact-title {
		font-size: 52px;
	}
	.footer-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.footer-brand {
		grid-column: 1 / -1;
	}
}

/* Phone */

@media (max-width: 720px) {
	:root {
		--gutter: 16px;
	}
	body {
		font-size: 17px;
	}
	.hero-grid {
		padding-top: 40px;
		padding-bottom: 48px;
		gap: 22px;
	}
	.hero-copy {
		gap: 22px;
	}
	.hero-eyebrow {
		font-size: 15px;
	}
	.hero-title {
		font-size: 50px;
	}
	.pills {
		margin-top: -4px;
		gap: 8px;
	}
	.pill {
		font-size: 14px;
		padding: 4px 11px;
	}
	.hero-text {
		font-size: 18px;
	}
	.hero-actions {
		flex-direction: column;
		gap: 12px;
	}
	.hero-actions .button {
		padding-inline: 20px;
	}
	.hero-note {
		font-size: 14px;
	}
	.hero-visual {
		height: 270px;
		margin-top: 8px;
		padding: 0;
		max-width: none;
		justify-self: stretch;
	}
	.browser {
		position: absolute;
		left: 64px;
		top: 0;
		width: 380px;
		border-radius: 8px;
	}
	.browser-bar {
		height: 26px;
		gap: 6px;
		padding: 0 10px;
	}
	.browser-bar i {
		width: 8px;
		height: 8px;
	}
	.browser-url {
		display: none;
	}
	.phone-mini {
		top: 30px;
		bottom: auto;
		width: 128px;
		border-radius: 22px;
		padding: 5px;
		box-shadow: 0 18px 36px rgb(0 0 0 / 0.55);
	}
	.phone-mini div {
		height: 230px;
		border-radius: 18px;
	}
	.section {
		padding: 56px 0;
	}
	.container-stack {
		gap: 24px;
	}
	.section-head {
		gap: 10px;
	}
	.eyebrow {
		font-size: 15px;
	}
	.title {
		font-size: 38px;
	}
	.lead {
		font-size: 17px;
	}
	.steps,
	.how .steps {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}
	.step {
		box-shadow: 4px 4px 0 var(--ink);
		padding: 18px;
		display: grid;
		grid-template-columns: 40px minmax(0, 1fr);
		gap: 4px 14px;
	}
	.step-number {
		grid-row: span 2;
		width: 40px;
		height: 40px;
		font-size: 24px;
	}
	.step h3 {
		font-size: 23px;
		line-height: 1.1;
	}
	.step p {
		font-size: 16px;
	}
	.split {
		gap: 20px;
	}
	.chat-shot {
		border-radius: 16px;
	}
	.connect-steps {
		font-size: 16px;
		gap: 16px;
	}
	.connect-steps li {
		grid-template-columns: 32px minmax(0, 1fr);
		gap: 12px;
	}
	.connect-steps .num {
		width: 30px;
		height: 30px;
		font-size: 19px;
	}
	.address {
		flex-direction: column;
		border: 0;
		background: transparent;
		gap: 10px;
	}
	.address code {
		border: 1px solid var(--ink-line-strong);
		background: var(--ink-raised);
		font-size: 12px;
		padding: 10px 12px;
	}
	.copy-button {
		align-self: flex-start;
		border: 1px solid var(--ink-line-strong);
	}
	.phone {
		width: 250px;
		border-radius: 38px;
		padding: 8px;
		box-shadow: 0 18px 36px rgb(12 14 18 / 0.22);
	}
	.phone div {
		border-radius: 31px;
		aspect-ratio: 234 / 470;
	}
	.checks {
		gap: 12px;
		font-size: 16px;
	}
	.checks li {
		gap: 12px;
	}
	.callout {
		padding: 16px;
		gap: 8px;
		margin-top: 0;
	}
	.callout h3 {
		font-size: 21px;
	}
	.callout p {
		font-size: 16px;
	}
	.tags {
		display: none;
	}
	.facts {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 0;
	}
	.facts div,
	.facts div:nth-child(even) {
		padding: 14px 0;
		border-left: 0;
	}
	.facts dd {
		margin-top: 2px;
	}
	.code-card {
		display: none;
	}
	.oss {
		grid-template-areas: "intro" "contribute" "links";
		row-gap: 20px;
	}
	.oss-links {
		flex-direction: column;
		gap: 0;
		border-top: 1px solid var(--rule);
	}
	.oss-links li {
		border-bottom: 1px solid var(--rule);
	}
	.oss-links a {
		display: block;
		padding: 12px 0;
	}
	.contribute {
		padding-top: 20px;
		margin-top: 0;
		gap: 12px;
		font-size: 16px;
	}
	.contribute h3 {
		font-size: 24px;
	}
	.contribute ol {
		padding-left: 22px;
		gap: 10px;
	}
	.story-figure {
		padding-bottom: 52px;
	}
	.story-figure .portrait {
		left: 14px;
		width: 112px;
		height: 112px;
		border-width: 5px;
		border-color: var(--paper);
		box-shadow: 0 8px 18px rgb(12 14 18 / 0.25);
	}
	.section-contact {
		padding: 48px 0;
	}
	.contact-grid {
		gap: 16px;
	}
	.contact-title {
		font-size: 44px;
	}
	.contact-text {
		font-size: 17px;
		margin-top: 16px;
	}
	.contact-actions {
		gap: 14px;
		align-items: stretch;
	}
	.contact-actions .button {
		font-size: 17px;
		padding-inline: 18px;
		overflow-wrap: anywhere;
	}
	.contact-actions p {
		font-size: 14px;
	}
	.site-footer {
		padding: 40px 0 32px;
		font-size: 15px;
	}
	.site-footer .container {
		gap: 28px;
	}
	.footer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 16px;
	}
	.footer-brand {
		gap: 10px;
	}
	.footer-brand .brand svg {
		width: 26px;
		height: 26px;
	}
	.footer-brand .brand-name {
		font-size: 21px;
	}
	.footer-col {
		gap: 8px;
	}
	.footer-legal {
		flex-direction: column;
		gap: 6px;
		padding-top: 18px;
		font-size: 14px;
	}
	.page {
		padding: 40px 0 64px;
	}
	.page h1 {
		font-size: 38px;
	}
	.page h2 {
		font-size: 26px;
	}
	.page dl {
		grid-template-columns: minmax(0, 1fr);
	}
	.page dt {
		border-bottom: 0;
		padding-bottom: 0;
	}
}

@media (max-width: 380px) {
	.hero-title {
		font-size: 44px;
	}
	.title {
		font-size: 34px;
	}
	.contact-title {
		font-size: 38px;
	}
}