/* The homepage wears the dashboard's slate (tone-slate on body) and shows the product instead of
   describing it: every picture is the sample server, and nothing on it waits for a scroll or a script
   to appear. Sections are only as tall as what is in them, divided by a hairline, not a colour. */

body.marketing .home-section {
	padding-block: clamp(56px, 7vw, 96px);
	border-block-start: 1px solid var(--hairline);
}

body.marketing .home-band { background-color: var(--bg-raised); }

body.marketing .home-section h2 {
	font-size: clamp(28px, 3.2vw, 40px);
	letter-spacing: -0.03em;
}

body.marketing .home-head {
	display: grid;
	gap: 14px;
	max-inline-size: 720px;
	margin-block-end: clamp(28px, 4vw, 44px);
}

body.marketing .home-head > * { margin: 0; }

body.marketing .home-line {
	margin: 0;
	max-inline-size: 60ch;
	font-size: clamp(16px, 1.4vw, 18px);
	line-height: 1.55;
	color: var(--text-dim);
}

body.marketing .home-after { margin-block-start: clamp(24px, 3vw, 36px); }

/* --------------------------------------------------------------------------
   Hero: the words, then the dashboard itself
   -------------------------------------------------------------------------- */

body.marketing .home-hero {
	padding-block: calc(var(--header-height) + clamp(36px, 5vw, 64px)) clamp(48px, 6vw, 80px);
}

body.marketing .home-hero-head {
	display: grid;
	gap: 20px;
	margin-block-end: clamp(28px, 4vw, 44px);
}

@media (min-width: 960px) {
	body.marketing .home-hero-head {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		gap: 56px;
		align-items: end;
	}
}

body.marketing .home-hero-title > * { margin: 0; }

body.marketing .home-hero-title .eyebrow {
	margin-block-end: 12px;
	font-size: 15px;
	font-weight: 600;
}

body.marketing .home-hero h1 {
	max-inline-size: 14ch;
	font-size: clamp(34px, 5vw, 60px);
	line-height: 1.04;
	letter-spacing: -0.04em;
}

body.marketing .home-hero-side {
	display: grid;
	gap: 16px;
}

body.marketing .home-hero-side > * { margin: 0; }

body.marketing .home-sub {
	max-inline-size: 46ch;
	font-size: clamp(17px, 1.5vw, 19px);
	line-height: 1.5;
	color: var(--text-dim);
}

body.marketing .home-note {
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-tail);
}

body.marketing .home-note a {
	color: var(--accent);
	text-decoration: underline;
	text-decoration-color: var(--accent-glow);
	text-underline-offset: 3px;
}

body.marketing .home-note a:hover { text-decoration-color: var(--accent); }

@media (max-width: 639.98px) {
	body.marketing .home-actions > .btn { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   Pictures of the product, in a flat window frame
   -------------------------------------------------------------------------- */

body.marketing .home-figure {
	display: grid;
	gap: 12px;
	margin: 0;
	min-inline-size: 0;
}

body.marketing .home-figure > figcaption {
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-tail);
}

body.marketing .home-frame {
	display: block;
	overflow: hidden;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-lg);
	background-color: var(--panel);
	box-shadow: var(--shadow-lg);
	transition: border-color var(--dur) ease;
}

body.marketing .home-frame:hover { border-color: var(--accent-glow); }

body.marketing .home-frame img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

/* The overview's panels end two thirds of the way down its screen, so the frame ends there too. */
body.marketing .home-frame-hero img {
	aspect-ratio: 1280 / 690;
	object-fit: cover;
	object-position: left top;
}

body.marketing .home-frame-phone img {
	aspect-ratio: 390 / 720;
	object-fit: cover;
	object-position: left top;
}

@media (max-width: 639.98px) {
	body.marketing .home-frame-hero img { aspect-ratio: 390 / 520; }
	body.marketing .home-wide-only { display: none; }
}

@media (min-width: 640px) {
	body.marketing .home-narrow-only { display: none; }
}

/* --------------------------------------------------------------------------
   Coming from Ticket Tool: the four answers as rows
   -------------------------------------------------------------------------- */

body.marketing .home-split {
	display: grid;
	gap: 28px;
}

@media (min-width: 900px) {
	body.marketing .home-split {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: 56px;
		align-items: start;
	}
}

body.marketing .home-split-head {
	display: grid;
	gap: 14px;
	align-content: start;
}

body.marketing .home-split-head > * { margin: 0; }

body.marketing .home-facts {
	margin: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background-color: var(--panel);
	background-image: var(--surface);
}

body.marketing .home-fact {
	display: grid;
	gap: 4px;
	padding: 18px 22px;
}

body.marketing .home-fact + .home-fact { border-block-start: 1px solid var(--line); }

@media (min-width: 640px) {
	body.marketing .home-fact {
		grid-template-columns: 11em minmax(0, 1fr);
		gap: 20px;
	}
}

body.marketing .home-fact dt {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-tail);
}

body.marketing .home-fact dd {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--text);
}

body.marketing .home-links {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Inline, so a link that wraps keeps its chevron at the end of its words; the padding makes it a 44px target. */
body.marketing :is(.home-links, .home-after) .link-more {
	display: inline-block;
	padding-block: 10px;
	font-size: 16px;
	line-height: 1.5;
}

body.marketing :is(.home-links, .home-after) .link-more::after { margin-inline-start: 0.3em; }

@media (min-width: 900px) {
	body.marketing .home-links-row {
		grid-auto-flow: column;
		justify-content: start;
		gap: 32px;
	}
}

/* --------------------------------------------------------------------------
   What a member sees: Discord's message layout, drawn in this page's tokens
   -------------------------------------------------------------------------- */

body.marketing .home-pair {
	display: grid;
	gap: 28px;
	align-items: start;
}

@media (min-width: 900px) {
	body.marketing .home-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Discord's blurple is the one colour here that is Discord's rather than ours: it marks the APP tag,
   a mention, the answers embed and a primary button, as it does in the client. */
body.marketing .dc {
	--dc-blurple: #5865f2;
	padding: 16px 20px 22px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-lg);
	background-color: var(--panel);
	box-shadow: var(--shadow-lg);
	font-size: 14px;
	line-height: 1.45;
	color: var(--text-dim);
	overflow-wrap: anywhere;
}

body.marketing .dc p { margin: 0; }

body.marketing .dc > .dc-channel {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-block-end: 16px;
	padding-block-end: 12px;
	border-block-end: 1px solid var(--line);
	font-weight: 600;
	color: var(--text);
}

body.marketing .dc-hash {
	font-size: 18px;
	font-weight: 500;
	color: var(--text-faint);
}

body.marketing .dc-msg {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: 14px;
}

body.marketing .dc-msg + .dc-msg { margin-block-start: 18px; }

body.marketing .dc-avatar {
	inline-size: 40px;
	block-size: 40px;
	border-radius: 50%;
	object-fit: cover;
}

body.marketing .dc-avatar-member {
	display: grid;
	place-items: center;
	background-color: var(--line-strong);
	color: var(--text);
	font-weight: 600;
}

body.marketing .dc-body {
	display: grid;
	gap: 8px;
	justify-items: start;
	min-inline-size: 0;
}

body.marketing .dc-author {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--text);
}

body.marketing .dc-author b { font-weight: 600; }

body.marketing .dc-app {
	padding: 1px 5px;
	border-radius: 4px;
	background-color: var(--dc-blurple);
	color: var(--text);
	font-size: 10px;
	font-weight: 700;
	line-height: 1.4;
}

body.marketing .dc-mention {
	padding-inline: 2px;
	border-radius: 3px;
	background-color: color-mix(in srgb, var(--dc-blurple) 30%, transparent);
	color: var(--text);
	font-weight: 500;
}

body.marketing .dc-embed {
	display: grid;
	gap: 8px;
	justify-self: stretch;
	max-inline-size: 460px;
	padding: 12px 16px;
	border-inline-start: 4px solid var(--accent);
	border-radius: 4px;
	background-color: var(--bg-raised);
}

body.marketing .dc-embed-answers { border-inline-start-color: var(--dc-blurple); }

body.marketing .dc-embed b {
	display: block;
	font-weight: 600;
	color: var(--text);
}

body.marketing .dc-embed-title {
	font-weight: 700;
	color: var(--text);
}

body.marketing .dc-embed-foot {
	font-size: 12px;
	color: var(--text-faint);
}

body.marketing .dc-select {
	justify-self: stretch;
	max-inline-size: 460px;
	overflow: hidden;
	border: 1px solid var(--line-strong);
	border-radius: 8px;
	background-color: var(--bg);
}

body.marketing .dc-select-box {
	padding: 10px 12px;
	border-block-end: 1px solid var(--line);
	color: var(--text-faint);
}

body.marketing .dc-options {
	margin: 0;
	padding: 4px 0;
	list-style: none;
}

body.marketing .dc-option {
	display: grid;
	gap: 2px;
	padding: 8px 12px;
}

body.marketing .dc-option b {
	font-weight: 500;
	color: var(--text);
}

body.marketing .dc-option span {
	font-size: 13px;
	color: var(--text-faint);
}

body.marketing .dc-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

body.marketing .dc-button {
	padding: 5px 14px;
	border-radius: 8px;
	background-color: var(--line-strong);
	color: var(--text);
	font-weight: 500;
}

body.marketing .dc-button-danger { background-color: var(--bad-strong); }
body.marketing .dc-button-primary { background-color: var(--dc-blurple); }

@media (max-width: 479.98px) {
	body.marketing .dc { padding-inline: 14px; }
	body.marketing .dc-msg { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
	body.marketing .dc-avatar { inline-size: 32px; block-size: 32px; }
}

/* --------------------------------------------------------------------------
   Pricing and the closer
   -------------------------------------------------------------------------- */

body.marketing .home-tier-premium { border-color: color-mix(in srgb, var(--premium) 45%, transparent); }
body.marketing .home-tier-premium .tier-name { color: var(--premium); }
body.marketing .home-tier-premium .tier-list li::before { border-color: var(--premium); }

body.marketing .home-closer .home-actions { margin-block-end: 28px; }

body.marketing.tone-slate .site-footer { border-block-start: 1px solid var(--hairline); }