/*
 * Lipso RP design system v1.0, the same tokens the landing ships
 * (lipso-landing/src/styles/global.css). Copied rather than imported because
 * these are two separately deployed static bundles; anything changed here
 * must be changed there.
 *
 * Telegram's own theme is deliberately NOT adopted for colour. This product
 * is one near-black cinematic surface everywhere it appears, and a webview
 * that repaints itself in whatever the user's client theme happens to be
 * would be the only screen in the product that does not look like the
 * product. What is adopted from Telegram is everything structural: the
 * viewport height, the safe areas, the header/background colour of the
 * chrome around us, and the back button.
 */
:root {
	--bg: #06070c;
	--surface: #0b0d16;
	--cyan: #33e1e8;
	--cyan-hover: #8cf3f7;
	--magenta: #f0439c;
	--text: #e6e9f2;
	--text-2: #9ba2b8;
	--text-3: #767ca0;
	--line: rgba(230, 233, 242, 0.14);
	--line-strong: rgba(230, 233, 242, 0.24);

	--font-display: 'Unbounded', 'Arial Narrow', sans-serif;
	--font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

	--page-pad: 16px;
	--ease-signal: cubic-bezier(0.23, 1, 0.32, 1);

	/* Telegram reports the usable height as a CSS variable of its own on new
	   clients; app.js keeps this in sync on older ones too. */
	--vh: 100vh;

	color-scheme: dark;
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	background: var(--bg);
	overflow-x: hidden;
}

body {
	color: var(--text);
	font-family: var(--font-mono);
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
	overscroll-behavior-y: none;
}

h1,
h2 {
	font-family: var(--font-display);
	margin: 0;
	font-weight: 300;
}

::selection {
	background: var(--magenta);
	color: var(--bg);
}

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

/* Texture, mounted once and never animated: the landing's two overlays, at
   the same strength. Both are pointer-transparent. */
.noise,
.scanlines {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 3;
}
.noise {
	opacity: 0.035;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scanlines {
	opacity: 0.5;
	background: repeating-linear-gradient(
		180deg,
		rgba(6, 7, 12, 0) 0px,
		rgba(6, 7, 12, 0) 2px,
		rgba(6, 7, 12, 0.28) 3px,
		rgba(6, 7, 12, 0) 4px
	);
}

.boot,
.failure {
	padding: 48px var(--page-pad);
	color: var(--text-3);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.failure {
	color: var(--text-2);
	text-transform: none;
	letter-spacing: 0;
	font-size: 13px;
	line-height: 1.6;
}

/* ---- shared chrome ---------------------------------------------------- */

.screen {
	position: relative;
	z-index: 1;
	min-height: var(--vh);
	padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

.eyebrow {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 18px var(--page-pad) 14px;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cyan);
}
.eyebrow .right {
	color: var(--text-3);
}

.page-title {
	padding: 0 var(--page-pad) 6px;
	font-size: clamp(26px, 8vw, 38px);
	font-weight: 200;
	line-height: 1.02;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

.page-sub {
	margin: 0;
	padding: 10px var(--page-pad) 20px;
	max-width: 34em;
	font-size: 12.5px;
	line-height: 1.65;
	color: var(--text-2);
}

.rule {
	height: 1px;
	background: var(--line);
	margin: 0 var(--page-pad);
}

/* ---- 01 / picker ------------------------------------------------------ */

.grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: var(--line);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	margin-top: 8px;
}
@media (min-width: 560px) {
	.grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.card {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	background: var(--surface);
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: transform 260ms var(--ease-signal);
}
.card:active {
	transform: scale(0.985);
}
.card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The portraits are a second of network on a phone; fading them in beats
	   ten holes punched into the grid one at a time. */
	opacity: 0;
	transition: opacity 420ms var(--ease-signal);
}
.card img.ready {
	opacity: 1;
}
.card .scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(6, 7, 12, 0.05) 0%, rgba(6, 7, 12, 0) 38%, rgba(6, 7, 12, 0.94) 100%),
		linear-gradient(160deg, rgba(51, 225, 232, 0.16), rgba(240, 67, 156, 0.14));
}
.card .num {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding: 12px 14px;
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.14em;
	color: var(--cyan);
}
.card .caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 14px 14px 18px;
}
/* The caption's parts are spans -- a <button> may not contain block elements
   in valid HTML -- so they are made to behave like the paragraphs they are. */
.card .caption,
.card .name,
.card .line {
	display: block;
}
.card .name {
	margin: 0 0 7px;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(15px, 3.6vw, 20px);
	line-height: 1.05;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--text);
}
.card .line {
	margin: 0;
	font-size: 11px;
	line-height: 1.45;
	color: var(--text-2);
}

.foot-note {
	padding: 22px var(--page-pad) 0;
	font-size: 11px;
	line-height: 1.7;
	color: var(--text-3);
}

/* ---- 02 / scenario ---------------------------------------------------- */

.hero {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--surface);
}
.hero img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 22%;
	opacity: 0;
	transition: opacity 420ms var(--ease-signal);
}
.hero img.ready {
	opacity: 1;
}
.hero .scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(6, 7, 12, 0.12) 0%, rgba(6, 7, 12, 0) 34%, rgba(6, 7, 12, 0.97) 100%),
		linear-gradient(160deg, rgba(51, 225, 232, 0.14), rgba(240, 67, 156, 0.12));
}
.hero .caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0 var(--page-pad) 18px;
}
.hero .name {
	margin: 0 0 8px;
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(28px, 9vw, 44px);
	line-height: 1;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}
.hero .line {
	margin: 0;
	font-size: 12px;
	letter-spacing: 0.02em;
	color: var(--cyan);
}

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 16px var(--page-pad) 4px;
}
.chip {
	padding: 6px 10px;
	border: 1px solid var(--line-strong);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-2);
}
.chip.accent {
	border-color: var(--magenta);
	color: var(--magenta);
}

.card-text {
	margin: 0;
	padding: 16px var(--page-pad) 0;
	font-size: 13px;
	line-height: 1.75;
	color: var(--text-2);
}
.card-text + .card-text {
	padding-top: 10px;
}

.prices {
	margin: 22px var(--page-pad) 0;
	border-top: 1px solid var(--line);
}
.prices dl {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0;
	margin: 0;
}
.prices dt,
.prices dd {
	margin: 0;
	padding: 11px 0;
	border-bottom: 1px solid var(--line);
	font-size: 12px;
}
.prices dt {
	color: var(--text-2);
}
.prices dd {
	text-align: right;
	color: var(--text);
}
.prices dd.free {
	color: var(--cyan);
}

/* ---- actions ---------------------------------------------------------- */

.actions {
	padding: 24px var(--page-pad) 0;
	display: grid;
	gap: 10px;
}

.btn {
	display: block;
	width: 100%;
	padding: 15px 18px;
	border: 0;
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		transform 160ms var(--ease-signal),
		box-shadow 160ms var(--ease-signal),
		background-color 160ms var(--ease-signal);
}
/* Primary is cyan with a hard magenta shadow, once per screen -- the
   landing's rule, kept. */
.btn.primary {
	background: var(--cyan);
	color: #06070c;
	box-shadow: 5px 5px 0 var(--magenta);
}
.btn.primary:active {
	transform: translate(3px, 3px);
	box-shadow: 2px 2px 0 var(--magenta);
}
.btn.secondary {
	background: transparent;
	color: var(--text-2);
	border: 1px solid var(--line-strong);
	box-shadow: none;
}
.btn.secondary:active {
	transform: scale(0.99);
	color: var(--text);
}
.btn[disabled] {
	opacity: 0.55;
	cursor: default;
	transform: none;
}

.note {
	padding: 14px var(--page-pad) 0;
	font-size: 11px;
	line-height: 1.7;
	color: var(--text-3);
}
.note.error {
	color: var(--magenta);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}