/* ---------------------------------------------------------------------------
   Colours and geometry are admccube's `src/theme/tokens.css`. Change a colour
   there first, then here. The three --store-* and --play-* values are the only
   additions: they belong to Apple's and Google's badges, not to C-CUBE.

   No Tailwind and no build step: three static pages must render for a Google
   reviewer with no JavaScript at all.
   --------------------------------------------------------------------------- */

:root {
	--canvas: #f6f7f9;
	--panel: #ffffff;
	--panel-2: #f7f8fa;
	--line: #e4e6ec;
	--line-soft: #eceef2;
	--ink: #141b34;
	--ink-2: #4a5165;
	--muted: #62697c;
	--brand: #007aff;
	--brand-soft: #f2f7ff;
	--brand-line: #cfe3ff;
	--link: #0062cc;
	--warn-soft: #fdf3e1;
	--warn-ink: #5c3b00;
	--r: 10px;
	--r-lg: 16px;

	--store-bg: #000000;
	--store-line: #a6a6a6;
	--play-blue: #00a0ff;
	--play-green: #32d074;
	--play-yellow: #ffce00;
	--play-red: #ff3a44;
}

@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
		U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The naira sign is in this subset, not in latin. */
@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("/fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
	unicode-range:
		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
		U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
		U+2C60-2C7F, U+A720-A7FF;
}

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
}

svg {
	display: block;
}

:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---------------------------------------------------------------------------
   The landing: exactly one viewport, on a blurred black-into-blue gradient.
   Every size hangs off --u, the smaller of a share of the height and of the
   width, so the whole composition shrinks together rather than clipping.
   --------------------------------------------------------------------------- */

/* On the root as well: body's own overflow would otherwise pass up to the
   viewport and stop clipping the oversized gradient layers. */
.landing-root {
	overflow: hidden;
}

.landing {
	--u: min(1dvh, 1.72vw);
	height: 100vh;
	height: 100dvh;
	overflow: clip;
	position: relative;
	isolation: isolate;
	display: grid;
	/* Equal rows above and below, so the content sits at the true centre of the
	   screen rather than the centre of what the footer leaves. */
	grid-template-rows: 1fr auto 1fr;
	justify-items: center;
	background: #000000;
	color: #ffffff;
}

/* Both layers overshoot the screen so the blur never shows a soft edge. */
.landing::before,
.landing::after {
	content: "";
	position: absolute;
	inset: -12%;
	pointer-events: none;
}

.landing::before {
	z-index: -2;
	background: linear-gradient(
		45deg,
		#000000 0%,
		#000000 30%,
		#00132f 48%,
		#003a8c 68%,
		var(--brand) 92%
	);
	filter: blur(36px);
}

/* The gloss: a highlight in the blue corner and a sheen along the diagonal. */
.landing::after {
	z-index: -1;
	background:
		radial-gradient(ellipse 55% 45% at 84% 14%, rgb(255 255 255 / 0.3), transparent 70%),
		linear-gradient(135deg, transparent 54%, rgb(0 122 255 / 0.14) 66%, transparent 78%);
	filter: blur(28px);
}

.landing main {
	grid-row: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 20px;
	text-align: center;
}

.hero-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.landing .hero-mark {
	width: calc(var(--u) * 15);
	height: calc(var(--u) * 15);
}

.landing .tile-light {
	fill: #ffffff;
}

.landing .tile-brand {
	fill: var(--brand);
}

.wordmark {
	margin: calc(var(--u) * 1.8) 0 0;
	font-size: calc(var(--u) * 6);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.035em;
	/* Tracking pulls the box in past the last letter, which would sit it off centre. */
	padding-right: 0.035em;
}

.tagline {
	margin: calc(var(--u) * 3.6) 0 0;
	font-size: max(18px, calc(var(--u) * 3.3));
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.tagline em {
	font-style: normal;
	color: var(--brand-line);
}

.pitch {
	max-width: 62ch;
	margin: calc(var(--u) * 1.2) 0 0;
	font-size: max(13px, calc(var(--u) * 1.9));
	line-height: 1.5;
	color: rgb(255 255 255 / 0.74);
	text-wrap: pretty;
}

.stores {
	display: flex;
	gap: 12px;
	justify-content: center;
	margin-top: calc(var(--u) * 3);
}

.store {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: clamp(44px, calc(var(--u) * 6.4), 60px);
	padding: 0 14px 0 12px;
	border: 1px solid var(--store-line);
	border-radius: 9px;
	background: var(--store-bg);
	color: #ffffff;
	text-align: left;
	text-decoration: none;
	white-space: nowrap;
	font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

.store[href]:hover {
	background: #1c1c1e;
}

.store svg {
	width: clamp(22px, calc(var(--u) * 3.3), 30px);
	height: clamp(22px, calc(var(--u) * 3.3), 30px);
	flex: none;
}

.store span {
	display: flex;
	flex-direction: column;
	line-height: 1.08;
}

.store small {
	font-size: clamp(9px, calc(var(--u) * 1.25), 11.5px);
	font-weight: 500;
	letter-spacing: 0.01em;
}

.store b {
	font-size: clamp(15.5px, calc(var(--u) * 2.5), 22px);
	font-weight: 600;
	letter-spacing: -0.01em;
}

.play-a {
	fill: var(--play-blue);
}
.play-b {
	fill: var(--play-green);
}
.play-c {
	fill: var(--play-yellow);
}
.play-d {
	fill: var(--play-red);
}
.apple {
	fill: #ffffff;
}

.landing footer {
	grid-row: 3;
	align-self: end;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2px 18px;
	padding: calc(var(--u) * 1.6) 16px max(calc(var(--u) * 2), env(safe-area-inset-bottom));
	font-size: 12.5px;
	color: rgb(255 255 255 / 0.66);
}

.landing footer a {
	color: #ffffff;
	font-weight: 600;
	/* A 24px tap target with no layout change. */
	padding: 4px 0;
	text-decoration: none;
}

.landing footer a:hover {
	text-decoration: underline;
}

.landing footer span {
	padding: 4px 0;
}

/* A phone on its side: logo beside the words, or the height runs out. */
@media (max-height: 520px) and (min-aspect-ratio: 5/4) {
	.landing {
		--u: 1dvh;
	}
	.landing main {
		display: grid;
		grid-template-columns: auto minmax(0, 500px);
		grid-template-rows: auto auto auto;
		align-content: center;
		justify-content: center;
		column-gap: calc(var(--u) * 7);
		padding: 0 max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left));
	}
	.landing .hero-brand {
		grid-row: 1 / 4;
		align-self: center;
	}
	.landing .hero-mark {
		width: calc(var(--u) * 26);
		height: calc(var(--u) * 26);
	}
	.wordmark {
		font-size: calc(var(--u) * 9);
	}
	.tagline {
		margin-top: 0;
	}
	.pitch {
		margin-top: 4px;
	}
	.stores {
		margin-top: 10px;
	}
	.landing footer {
		padding: 6px 16px 8px;
	}
}

/* A phone's footer: the links on one line, the copyright under them. */
@media (max-width: 480px) {
	.landing footer span {
		order: 1;
		flex-basis: 100%;
		padding: 0;
		text-align: center;
	}
}

/* The narrowest phones, where two badges barely fit side by side. */
@media (max-width: 359px) {
	.landing main {
		padding-left: 12px;
		padding-right: 12px;
	}
	.landing .store {
		padding: 0 8px;
		gap: 6px;
	}
	.landing .stores {
		gap: 8px;
	}
	.landing .store svg {
		width: 20px;
		height: 20px;
	}
	.landing .store small {
		font-size: 8.5px;
	}
	.landing .store b {
		font-size: 14px;
	}
}

/* A short upright phone: the mark gives up the space the fixed text cannot. */
@media (max-height: 540px) and (max-aspect-ratio: 5/4) {
	.landing .hero-mark {
		width: calc(var(--u) * 13);
		height: calc(var(--u) * 13);
	}
	.wordmark {
		font-size: calc(var(--u) * 5.5);
	}
	.pitch {
		font-size: 12px;
		line-height: 1.4;
	}
}

/* ---------------------------------------------------------------------------
   The legal pages: long and quiet, on the console's light canvas.
   --------------------------------------------------------------------------- */

.doc-page {
	background: var(--canvas);
	color: var(--ink);
	font-size: 15.5px;
	line-height: 1.65;
}

.doc-head {
	border-bottom: 1px solid var(--line);
	background: var(--panel);
}

.doc-head-inner,
.doc,
.doc-foot-inner {
	max-width: 760px;
	margin: 0 auto;
	padding-left: 20px;
	padding-right: 20px;
}

.doc-head-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 14px;
	padding-bottom: 14px;
}

.lockup {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--ink);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.2px;
	text-decoration: none;
}

.lockup svg {
	width: 28px;
	height: 28px;
}

.tile-dark {
	fill: var(--ink);
}

.doc-page .tile-brand {
	fill: var(--brand);
}

.doc-head nav {
	display: flex;
	gap: 16px;
	font-size: 13.5px;
	font-weight: 600;
}

.doc-head nav a {
	color: var(--ink-2);
	text-decoration: none;
}

.doc-head nav a:hover,
.doc-head nav a[aria-current] {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.doc {
	padding-top: 40px;
	padding-bottom: 56px;
}

.doc h1 {
	margin: 0;
	font-size: clamp(30px, 6vw, 40px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.028em;
}

.doc .updated {
	margin: 8px 0 28px;
	font-size: 13.5px;
	color: var(--muted);
}

.doc h2 {
	margin: 44px 0 10px;
	scroll-margin-top: 16px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.02em;
}

.doc h3 {
	margin: 24px 0 6px;
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.doc p {
	margin: 0 0 12px;
}

.doc ul,
.doc ol {
	margin: 0 0 12px;
	padding-left: 22px;
}

.doc li {
	margin-bottom: 6px;
}

.doc a {
	color: var(--link);
	overflow-wrap: anywhere;
}

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

.doc mark[data-todo] {
	padding: 1px 5px;
	border-radius: 4px;
	background: var(--warn-soft);
	color: var(--warn-ink);
	font-weight: 600;
}

.short {
	margin: 0 0 12px;
	padding: 18px 20px;
	border: 1px solid var(--brand-line);
	border-radius: var(--r-lg);
	background: var(--brand-soft);
}

.short h2 {
	margin: 0 0 8px;
	font-size: 15.5px;
	letter-spacing: -0.01em;
}

.short ul {
	margin: 0;
}

.short li:last-child {
	margin-bottom: 0;
}

.toc {
	margin: 12px 0 0;
	padding: 16px 20px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--panel);
	font-size: 14px;
}

.toc ol {
	margin: 0;
	padding-left: 22px;
	columns: 2;
	column-gap: 28px;
}

.toc li {
	margin-bottom: 4px;
	break-inside: avoid;
}

.toc a {
	text-decoration: none;
}

.toc a:hover {
	text-decoration: underline;
}

.doc table {
	width: 100%;
	margin: 12px 0 16px;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--panel);
	font-size: 14px;
	line-height: 1.5;
}

.doc th,
.doc td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--line-soft);
	text-align: left;
	vertical-align: top;
}

.doc thead th {
	background: var(--panel-2);
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ink-2);
}

.doc thead th:first-child {
	border-top-left-radius: var(--r);
}

.doc thead th:last-child {
	border-top-right-radius: var(--r);
}

.doc tbody tr:last-child > * {
	border-bottom: 0;
}

.doc tbody th {
	font-weight: 600;
}

/* Tables turn into stacked rows on a phone: no sideways scrolling in a policy. */
@media (max-width: 620px) {
	.doc table,
	.doc tbody,
	.doc tr,
	.doc th,
	.doc td {
		display: block;
	}
	.doc thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}
	.doc tbody tr {
		padding: 10px 12px;
		border-bottom: 1px solid var(--line-soft);
	}
	.doc tbody tr:last-child {
		border-bottom: 0;
	}
	.doc th,
	.doc td {
		padding: 0;
		border: 0;
	}
	.doc td {
		margin-top: 4px;
		color: var(--ink-2);
	}
	.toc ol {
		columns: 1;
	}
}

.doc-foot {
	border-top: 1px solid var(--line);
	background: var(--panel);
	font-size: 13px;
	color: var(--muted);
}

.doc-foot-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 6px 20px;
	padding-top: 18px;
	padding-bottom: 18px;
}

.doc-foot a {
	color: var(--ink-2);
}

@media print {
	.doc-head nav,
	.toc,
	.doc-foot {
		display: none;
	}
	.doc-page {
		background: #ffffff;
	}
}