/*
 * avyune.com
 *
 * Every value here comes from MASTER.md, the same source mobile/src/theme.ts
 * reads. A colour, size or duration that is not in that document does not
 * belong on this page either: the site is the app's front door, and a front
 * door in a different style is a different house.
 *
 * Two places this extends the app's system, both because a web page is not a
 * phone screen:
 *   - one larger display size for the hero on wide screens, 44/52, because 30pt
 *     in the middle of a 1440px window reads as a caption
 *   - a reading measure, 36rem, because the app never has to stop a paragraph
 *     from running the width of a monitor
 */

:root {
	color-scheme: light dark;

	/* Light, cool paper. Ratios are against --bg, from MASTER.md. */
	--bg: #fafafc;
	--surface: #ffffff;
	--sunken: #f2f2f8;
	--border: #e1e2ed;
	--border-strong: #c6c8d9;
	--text: #151621;          /* 17.24:1 */
	--muted: #535465;         /* 7.13:1 */
	--faint: #858699;         /* 3.43:1, labels only */
	--accent: #4450e0;        /* 5.81:1 */
	--on-accent: #ffffff;     /* 6.05:1 on accent */
	--accent-soft: #e8eafa;
	--accent-pale: #c7ceff;   /* the orb's lit side, never text */
	--success: #1f6b3a;
	--danger: #9a2b2b;

	--serif: ui-serif, "New York", "Iowan Old Style", Georgia, "Times New Roman", serif;
	--sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* 4pt base */
	--xs: 4px;
	--sm: 8px;
	--md: 12px;
	--lg: 16px;
	--xl: 24px;
	--xxl: 32px;
	--xxxl: 48px;

	--r-sm: 8px;
	--r-md: 12px;
	--r-lg: 18px;

	--state: 160ms;
	--entry: 260ms;
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	--measure: 36rem;
}

@media (prefers-color-scheme: dark) {
	:root {
		/* Dark, deep ink. */
		--bg: #0a0a0d;
		--surface: #131319;
		--sunken: #0d0d12;
		--border: #23242f;
		--border-strong: #3a3b48;
		--text: #f1f2f6;        /* 17.67:1 */
		--muted: #9a9cac;       /* 7.27:1 */
		--faint: #6d6f83;       /* 4.00:1 */
		--accent: #8e97ff;      /* 7.55:1 */
		--on-accent: #0c0f2a;   /* 7.18:1 on accent */
		--accent-soft: #17192d;
		--accent-pale: #dde2ff;
		--success: #7ecfa0;
		--danger: #e98a8a;
	}
}

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

/* `hidden` has to win over every layout rule below. Without this, a
   `display: grid` on .field showed the "which language?" box to everyone,
   including people who had just picked English. */
[hidden] {
	display: none !important;
}

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

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 16px/24px var(--sans);
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--accent);
	text-underline-offset: 3px;
}

/* A visible focus ring on everything that takes focus. Removing it is the most
   common way a keyboard user is locked out of a page that otherwise works. */
:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: var(--r-sm);
}

.skip {
	position: absolute;
	left: var(--lg);
	top: -100px;
	padding: var(--sm) var(--md);
	background: var(--surface);
	border: 1px solid var(--border-strong);
	border-radius: var(--r-md);
	z-index: 10;
}
.skip:focus {
	top: var(--lg);
}

.wrap {
	max-width: 56rem;
	margin: 0 auto;
	padding-inline: var(--lg);
}

@media (min-width: 768px) {
	.wrap {
		padding-inline: var(--xxl);
	}
}

/* ---- header ------------------------------------------------------------ */

.top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lg);
	padding-block: var(--lg);
	padding-top: max(var(--lg), env(safe-area-inset-top));
}

.wordmark {
	display: inline-flex;
	align-items: center;
	gap: var(--sm);
	color: var(--text);
	text-decoration: none;
	font: 600 20px/27px var(--sans);
	min-height: 44px;
}
.wordmark svg {
	width: 32px;
	height: 32px;
}

.langs {
	display: flex;
	gap: var(--xs);
}
.langs a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding-inline: var(--md);
	border-radius: var(--r-md);
	color: var(--muted);
	text-decoration: none;
	font: 500 14px/20px var(--sans);
	transition: background-color var(--state) var(--ease), color var(--state) var(--ease);
}
.langs a:hover {
	background: var(--sunken);
	color: var(--text);
}
.langs a[aria-current="true"] {
	color: var(--text);
	background: var(--sunken);
}

/* ---- type ---------------------------------------------------------------- */

h1,
h2 {
	font-family: var(--serif);
	font-weight: 400;
	text-wrap: balance;
	margin: 0;
}
h1 {
	font-size: 30px;
	line-height: 38px;
	letter-spacing: -0.3px;
}
@media (min-width: 768px) {
	h1 {
		font-size: 44px;
		line-height: 52px;
		letter-spacing: -0.6px;
	}
}
h2 {
	font-size: 26px;
	line-height: 34px;
	letter-spacing: -0.2px;
}
h3 {
	font: 600 18px/26px var(--sans);
	margin: 0;
}
p {
	margin: 0;
}
.lede {
	font: 19px/30px var(--serif);
	color: var(--muted);
	max-width: var(--measure);
}
.muted {
	color: var(--muted);
}
.label {
	font: 600 12px/16px var(--sans);
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--faint);
}

/* ---- sections ------------------------------------------------------------ */

main > section {
	padding-block: var(--xxxl);
	border-top: 1px solid var(--border);
}
main > section:first-child {
	border-top: 0;
	padding-top: var(--xl);
}
.stack {
	display: grid;
	gap: var(--lg);
}
.stack-lg {
	display: grid;
	gap: var(--xl);
}
.prose {
	max-width: var(--measure);
}

/* ---- hero ---------------------------------------------------------------- */

.hero {
	display: grid;
	gap: var(--xl);
}
.orb {
	width: 88px;
	height: 88px;
	margin-left: -12px;
}
@media (min-width: 768px) {
	.orb {
		width: 112px;
		height: 112px;
	}
}

/* One breath on arrival, then still. MASTER.md forbids motion that repeats
   while a person is reading, and a hero is where people read first. */
.orb .body {
	transform-origin: 50px 50px;
	animation: arrive 2800ms var(--ease) 1 both;
}
@keyframes arrive {
	0% {
		opacity: 0.4;
		transform: scale(0.94);
	}
	50% {
		opacity: 1;
		transform: scale(1.03);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

/* ---- the form ------------------------------------------------------------ */

.join {
	display: grid;
	gap: var(--md);
	max-width: 30rem;
	padding: var(--lg);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
}
.field {
	display: grid;
	gap: var(--xs);
}
.field label {
	font: 500 14px/20px var(--sans);
}
.row {
	display: grid;
	gap: var(--md);
}
@media (min-width: 560px) {
	.row {
		grid-template-columns: 1.4fr 1fr;
	}
}
input[type="email"],
input[type="text"],
select {
	width: 100%;
	min-height: 48px;
	padding: var(--md);
	/* 16px or iOS zooms the page when the field takes focus. */
	font: 16px/24px var(--sans);
	color: var(--text);
	background: var(--bg);
	border: 1px solid var(--border-strong);
	border-radius: var(--r-md);
	transition: border-color var(--state) var(--ease);
}
select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
		linear-gradient(135deg, var(--muted) 50%, transparent 50%);
	background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: var(--xxl);
}
input:focus,
select:focus {
	border-color: var(--accent);
	outline: none;
}
input[aria-invalid="true"] {
	border-color: var(--danger);
}
.hint {
	font: 14px/20px var(--sans);
	color: var(--muted);
}
.error {
	font: 14px/20px var(--sans);
	color: var(--danger);
	min-height: 0;
}
.error:empty {
	display: none;
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding-inline: var(--xl);
	border: 0;
	border-radius: var(--r-md);
	background: var(--accent);
	color: var(--on-accent);
	font: 600 16px/24px var(--sans);
	cursor: pointer;
	touch-action: manipulation;
	text-decoration: none;
	transition: transform 100ms var(--ease), opacity var(--state) var(--ease);
}
.button:active {
	transform: scale(0.97);
}
.button[disabled] {
	opacity: 0.5;
	cursor: progress;
}
.button.quiet {
	background: transparent;
	color: var(--text);
	border: 1px solid var(--border-strong);
}

.done {
	display: grid;
	gap: var(--sm);
	max-width: 30rem;
	padding: var(--lg);
	background: var(--accent-soft);
	border-radius: var(--r-lg);
}
.done[hidden] {
	display: none;
}

/* A trap for form-filling bots. Hidden from people and from screen readers. */
.trap {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---- blocks ---------------------------------------------------------------- */

.pains {
	display: grid;
	gap: var(--lg);
	padding: 0;
	margin: 0;
	list-style: none;
	max-width: var(--measure);
}
.pains li {
	padding-left: var(--lg);
	border-left: 2px solid var(--border-strong);
}
.pains strong {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 19px;
	line-height: 30px;
	display: block;
}

.benefits {
	display: grid;
	gap: var(--xl);
}
@media (min-width: 768px) {
	.benefits {
		grid-template-columns: repeat(3, 1fr);
	}
}
.benefit {
	display: grid;
	gap: var(--sm);
	align-content: start;
}
.benefit .detail {
	font: 14px/20px var(--sans);
	color: var(--accent);
}

.steps {
	display: grid;
	gap: var(--lg);
	padding: 0;
	margin: 0;
	list-style: none;
	counter-reset: step;
	max-width: var(--measure);
}
.steps li {
	display: grid;
	grid-template-columns: 32px 1fr;
	gap: var(--md);
	counter-increment: step;
}
.steps li::before {
	content: counter(step);
	font: 19px/30px var(--serif);
	color: var(--faint);
}

/* ---- languages ----------------------------------------------------------- */

.langtable {
	display: grid;
	gap: var(--md);
	max-width: var(--measure);
}
.langgroup {
	display: grid;
	gap: var(--xs);
	padding-block: var(--md);
	border-bottom: 1px solid var(--border);
}
.langgroup:last-child {
	border-bottom: 0;
}
.status {
	font: 600 12px/16px var(--sans);
	letter-spacing: 0.4px;
	text-transform: uppercase;
}
.status.ready {
	color: var(--success);
}
.status.review {
	color: var(--accent);
}
.status.no {
	color: var(--faint);
}

/* ---- pricing ------------------------------------------------------------- */

.plans {
	display: grid;
	gap: var(--lg);
}
@media (min-width: 640px) {
	.plans {
		grid-template-columns: 1fr 1fr;
	}
}
.plan {
	display: grid;
	gap: var(--md);
	align-content: start;
	padding: var(--xl);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
}
.plan.plus {
	border-color: var(--accent);
}
.price {
	font: 30px/38px var(--serif);
	/* Lining, not old-style: the platform serif draws an old-style zero, and a
	   price of "0" read as the letter O. */
	font-variant-numeric: tabular-nums lining-nums;
}
.price small {
	font: 14px/20px var(--sans);
	color: var(--muted);
}
.plan ul {
	display: grid;
	gap: var(--sm);
	padding: 0;
	margin: 0;
	list-style: none;
}
.plan li {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: var(--sm);
}
.plan li::before {
	content: "";
	width: 8px;
	height: 8px;
	margin-top: 8px;
	border-radius: 999px;
	background: var(--border-strong);
}
.plan.plus li::before {
	background: var(--accent);
}

/* ---- faq ----------------------------------------------------------------- */

.faq {
	display: grid;
	max-width: var(--measure);
}
.faq details {
	border-bottom: 1px solid var(--border);
}
.faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lg);
	min-height: 56px;
	padding-block: var(--md);
	cursor: pointer;
	font: 600 16px/24px var(--sans);
	list-style: none;
}
.faq summary::-webkit-details-marker {
	display: none;
}
.faq summary::after {
	content: "+";
	font: 400 22px/1 var(--sans);
	color: var(--muted);
	transition: transform var(--state) var(--ease);
}
.faq details[open] summary::after {
	transform: rotate(45deg);
}
.faq details p {
	padding-bottom: var(--lg);
	color: var(--muted);
}

/* ---- footer -------------------------------------------------------------- */

.foot {
	display: grid;
	gap: var(--md);
	padding-block: var(--xxl);
	padding-bottom: max(var(--xxl), env(safe-area-inset-bottom));
	border-top: 1px solid var(--border);
	font: 14px/20px var(--sans);
	color: var(--muted);
}
.foot nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sm) var(--lg);
}
.foot a {
	color: var(--muted);
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* ---- Reduce Motion ------------------------------------------------------- */

/* Every duration to effectively nothing, and the orb holds a still frame
   rather than disappearing: an avatar that vanishes under an accessibility
   setting reads as broken. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
	}
	.button:active {
		transform: none;
	}
}