/*
Theme Name: pipbeam beta
Theme URI: https://pipbeam.com
Author: pipbeam
Description: Announcement site for pipbeam PANEL and the running beta round. One page, no checkout: the only action is joining the beta on support.pipbeam.com.
Version: 1.0.8
Requires at least: 6.0
Requires PHP: 8.0
License: Proprietary
Text Domain: pipbeam-beta
*/

/* ---------------------------------------------------------------------------
   Fonts. One family, one variable file per subset: Archivo carries the whole
   page across its width axis (62-125%) and weight axis (400-800), so the
   display voice and the body voice are the same object under tension.
   --------------------------------------------------------------------------- */

@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 400 800;
	font-stretch: 62% 125%;
	font-display: swap;
	src: url("assets/fonts/archivo-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;
}

@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 400 800;
	font-stretch: 62% 125%;
	font-display: swap;
	src: url("assets/fonts/archivo-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;
}

/* ---------------------------------------------------------------------------
   Tokens
   --------------------------------------------------------------------------- */

:root {
	/* Ground and surfaces */
	--bg: #06070c;
	--bg-2: #0a0d13;
	--surface: #0f131b;
	--surface-2: #141924;

	/* Hairlines */
	--line: rgba(255, 255, 255, 0.08);
	--line-2: rgba(255, 255, 255, 0.14);
	--line-3: rgba(255, 255, 255, 0.22);

	/* Ink */
	--ink: #e9edf4;
	--ink-2: #c8cfdb;
	--ink-3: #99a2b4;
	--ink-4: #8b93a5;
	--ink-5: #5b6273;

	/* Brand */
	--green: #22c55e;
	--green-hi: #34d65d;
	--green-dim: rgba(34, 197, 94, 0.12);

	/* Chart semantics. These mean one thing only: the three lines of a trade,
	   plus the two states the guards use. Never repurposed as generic UI color. */
	--stop: #ff6347;
	--entry: #1e90ff;
	--target: #3cb371;
	--guard: #ffbe5a;
	--trail: #ee82ee;

	/* Metrics */
	--page: 1240px;
	--narrow: 74ch;
	--radius: 14px;
	--radius-sm: 9px;

	--shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.9);
	--shadow-lift: 0 26px 60px -20px rgba(0, 0, 0, 0.95);

	--ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------------------------------------------------------------------------
   Reset and page
   --------------------------------------------------------------------------- */

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: 96px;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink-2);
	font-family: "Archivo", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
	font-size: 17px;
	line-height: 1.62;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img,
svg {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--ink);
	text-decoration-color: var(--line-3);
	text-underline-offset: 0.22em;
	text-decoration-thickness: 1px;
	transition: color 0.18s var(--ease), text-decoration-color 0.18s var(--ease);
}

a:hover {
	color: #fff;
	text-decoration-color: var(--green);
}

/* Browser surfaces belong to the design, not to the browser. */
::selection {
	background: rgba(34, 197, 94, 0.28);
	color: #fff;
}

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

html {
	scrollbar-color: #262c38 var(--bg);
	scrollbar-width: thin;
	caret-color: var(--green);
}

::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}

::-webkit-scrollbar-track {
	background: var(--bg);
}

::-webkit-scrollbar-thumb {
	background: #262c38;
	border: 3px solid var(--bg);
	border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
	background: #333b4a;
}

.skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--green);
	color: #05210f;
	padding: 12px 18px;
	font-weight: 700;
	z-index: 100;
}

.skip:focus {
	left: 12px;
	top: 12px;
}

/* ---------------------------------------------------------------------------
   Type
   --------------------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
	color: var(--ink);
	margin: 0;
	font-weight: 800;
	font-stretch: 112%;
	letter-spacing: -0.032em;
	line-height: 1.04;
	text-wrap: balance;
}

h1 {
	font-size: clamp(2.6rem, 6.4vw, 5rem);
}

h2 {
	font-size: clamp(2rem, 4.1vw, 3.1rem);
}

h3 {
	font-size: clamp(1.32rem, 2.1vw, 1.72rem);
	letter-spacing: -0.022em;
	line-height: 1.18;
}

h4 {
	font-size: 1.06rem;
	font-stretch: 105%;
	letter-spacing: -0.012em;
	line-height: 1.3;
}

p {
	margin: 0 0 1.05em;
	max-width: var(--narrow);
}

p:last-child {
	margin-bottom: 0;
}

strong {
	color: var(--ink);
	font-weight: 700;
}

.lead {
	font-size: clamp(1.12rem, 1.7vw, 1.32rem);
	color: var(--ink-2);
	line-height: 1.55;
}

.muted {
	color: var(--ink-3);
}

.num {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* ---------------------------------------------------------------------------
   Layout
   --------------------------------------------------------------------------- */

.wrap {
	width: min(100% - 48px, var(--page));
	margin-inline: auto;
}

.section {
	padding: clamp(72px, 9vw, 132px) 0;
}

.section--tight {
	padding: clamp(56px, 6vw, 88px) 0;
}

.section--band {
	background: var(--bg-2);
	border-block: 1px solid var(--line);
}

.section > .wrap > h2,
.section > .wrap > .section-head > h2 {
	margin-bottom: 0.55em;
}

.section-head {
	max-width: 78ch;
	margin-bottom: clamp(40px, 5vw, 68px);
}

.section-head p {
	font-size: clamp(1.06rem, 1.5vw, 1.22rem);
	color: var(--ink-3);
}

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

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 26px;
	border-radius: 10px;
	border: 1px solid transparent;
	font-weight: 700;
	font-size: 1.02rem;
	font-stretch: 104%;
	letter-spacing: -0.012em;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.18s var(--ease), background-color 0.18s var(--ease),
		border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.btn--primary {
	background: var(--green);
	color: #04210f;
	box-shadow: 0 14px 30px -14px rgba(34, 197, 94, 0.75);
}

.btn--primary:hover {
	background: var(--green-hi);
	color: #04210f;
	transform: translateY(-2px);
	box-shadow: 0 20px 38px -14px rgba(34, 197, 94, 0.85);
}

.btn--ghost {
	background: transparent;
	color: var(--ink);
	border-color: var(--line-2);
}

.btn--ghost:hover {
	color: #fff;
	border-color: var(--line-3);
	background: rgba(255, 255, 255, 0.04);
	transform: translateY(-2px);
}

.btn--sm {
	padding: 10px 16px;
	font-size: 0.92rem;
}

.btn .arrow {
	transition: transform 0.2s var(--ease);
}

.btn:hover .arrow {
	transform: translateX(3px);
}

.terms {
	margin-top: 14px;
	font-size: 0.94rem;
	color: var(--ink-4);
	text-wrap: balance;
}

.terms b {
	color: var(--ink-2);
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Navigation
   --------------------------------------------------------------------------- */

.nav {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 14px 0;
	background: rgba(6, 7, 12, 0.86);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--line);
}

.nav > .wrap {
	display: flex;
	align-items: center;
	gap: 28px;
	width: min(100% - 48px, var(--page));
}

.nav-logo {
	display: block;
	line-height: 0;
	text-decoration: none;
}

.nav-logo img {
	width: 118px;
	height: 39px;
}

.nav-links {
	display: flex;
	gap: 26px;
	margin-left: auto;
	font-size: 0.96rem;
}

.nav-links a {
	color: var(--ink-3);
	text-decoration: none;
}

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

.nav-cta {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* ---------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------- */

.hero {
	padding: clamp(56px, 8vw, 104px) 0 0;
}

.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 26px;
	padding: 7px 13px 7px 10px;
	border: 1px solid var(--line-2);
	border-radius: 999px;
	font-size: 0.86rem;
	color: var(--ink-3);
}

.hero-badge img {
	width: 76px;
	height: 25px;
}

.hero h1 {
	max-width: 17ch;
}

.hero .lead {
	margin-top: 26px;
	max-width: 62ch;
}

.hero-actions {
	margin-top: 36px;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}

.hero-shot {
	margin-top: clamp(48px, 6vw, 76px);
	position: relative;
	border-top: 1px solid var(--line-2);
	border-bottom: 1px solid var(--line-2);
	background: #000;
	overflow: hidden;
}

.hero-shot img {
	width: 100%;
	height: auto;
	opacity: 0.97;
}

.hero-caption {
	width: min(100% - 48px, var(--page));
	margin: 18px auto 0;
	color: var(--ink-4);
	font-size: 0.94rem;
	max-width: 88ch;
}

/* Legend keyed to the colors in the shot above it. */
.legend {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 12px;
	font-size: 0.92rem;
	color: var(--ink-3);
}

.legend span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.legend i {
	width: 20px;
	height: 2px;
	border-radius: 2px;
	display: block;
}

/* ---------------------------------------------------------------------------
   Screenshot frames. Panel shots are 0.32-0.38 aspect: they are always capped
   by height and never stretched to a column width.
   --------------------------------------------------------------------------- */

.shot {
	display: inline-block;
	padding: 10px;
	background: var(--surface);
	border: 1px solid var(--line-2);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	line-height: 0;
	transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease),
		border-color 0.22s var(--ease);
}

.shot:hover {
	transform: translateY(-3px);
	border-color: var(--line-3);
	box-shadow: var(--shadow-lift);
}

/* Product screenshots are drawn at 1:1. Resampling a 290px panel capture to
   fit a column turns its 7px labels into mush, and this page's whole argument
   is that you can read what it shows. Layouts widen to suit the image, never
   the other way round. */
.shot img {
	border-radius: 7px;
	width: auto;
	height: auto;
	max-width: 100%;
}

.shot-row {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(18px, 2.4vw, 34px);
	align-items: flex-start;
}

.figure {
	margin: 0;
}

.figure figcaption {
	margin-top: 14px;
	color: var(--ink-4);
	font-size: 0.92rem;
	max-width: 46ch;
	line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   The guard moment
   --------------------------------------------------------------------------- */

.guard {
	background: var(--bg-2);
	border-block: 1px solid var(--line);
}

.guard-statement {
	max-width: 26ch;
	font-size: clamp(2.1rem, 4.6vw, 3.4rem);
}

.guard-pair {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(20px, 3vw, 40px);
	margin-top: clamp(36px, 4vw, 56px);
}

.guard-state {
	flex: 0 1 auto;
}

.guard-state .shot img {
	max-height: none;
	width: 340px;
}

.guard-state h3,
.guard-state h4 {
	margin-top: 18px;
	color: var(--ink);
	/* Subtitle-Stufe aus DESIGN.md. Muss hier stehen, weil ein blankes h3
	   sonst die groessere globale Regel erbt und mit der Abschnitts-
	   ueberschrift konkurriert. Die Ebene ist h3, damit die Gliederung
	   keine Stufe ueberspringt; die Groesse bleibt die eines Untertitels. */
	font-size: 1.06rem;
	font-weight: 800;
	font-stretch: 105%;
	line-height: 1.3;
	letter-spacing: -0.012em;
}

.guard-state p {
	margin-top: 6px;
	color: var(--ink-4);
	font-size: 0.96rem;
	max-width: 38ch;
}

.guard-list {
	list-style: none;
	margin: clamp(40px, 5vw, 64px) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	column-gap: clamp(24px, 3vw, 44px);
	row-gap: 34px;
	border-top: 1px solid var(--line-2);
}

.guard-list li {
	padding: 26px 0 0;
}

.guard-list h4 {
	margin-bottom: 8px;
}

.guard-list p {
	color: var(--ink-4);
	font-size: 0.95rem;
	line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   Facts band
   --------------------------------------------------------------------------- */

.facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	column-gap: clamp(24px, 3vw, 44px);
	row-gap: 34px;
	border-top: 1px solid var(--line-2);
}

.facts div {
	padding: 26px 0 0;
}

.facts dt {
	font-size: 0.78rem;
	font-weight: 700;
	font-stretch: 88%;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--ink-4);
	margin-bottom: 10px;
}

.facts dd {
	margin: 0;
	color: var(--ink-2);
	font-size: 0.98rem;
	line-height: 1.5;
}

.facts dd b {
	color: var(--ink);
}

/* ---------------------------------------------------------------------------
   FAQ
   --------------------------------------------------------------------------- */

.faq {
	border-top: 1px solid var(--line);
	max-width: 90ch;
}

.faq details {
	border-bottom: 1px solid var(--line);
}

.faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 24px 0;
	cursor: pointer;
	list-style: none;
	color: var(--ink);
	font-size: clamp(1.04rem, 1.6vw, 1.18rem);
	font-weight: 700;
	font-stretch: 104%;
	letter-spacing: -0.015em;
	transition: color 0.18s var(--ease);
}

.faq summary::-webkit-details-marker {
	display: none;
}

.faq summary:hover {
	color: #fff;
}

.faq summary svg {
	flex: none;
	color: var(--ink-4);
	transition: transform 0.24s var(--ease), color 0.18s var(--ease);
}

.faq details[open] summary svg {
	transform: rotate(45deg);
	color: var(--green);
}

.faq .answer {
	padding-bottom: 26px;
	color: var(--ink-3);
}

/* ---------------------------------------------------------------------------
   Closing call to action
   --------------------------------------------------------------------------- */

.close-cta {
	text-align: center;
	padding: clamp(80px, 10vw, 150px) 0;
	border-top: 1px solid var(--line);
	background: radial-gradient(120% 140% at 50% 0%, rgba(34, 197, 94, 0.09), transparent 62%);
}

.close-cta h2 {
	margin-inline: auto;
	max-width: 20ch;
}

.close-cta p {
	margin: 22px auto 0;
	max-width: 56ch;
	color: var(--ink-3);
}

.close-cta .hero-actions {
	justify-content: center;
}

.close-cta .terms {
	margin-top: 18px;
}

.pending {
	margin: 0 auto 30px;
	max-width: 60ch;
	padding: 16px 20px;
	border: 1px solid rgba(255, 190, 90, 0.34);
	border-radius: 10px;
	color: var(--ink-2);
	font-size: 0.98rem;
	line-height: 1.5;
	text-align: left;
}

.pending b {
	color: var(--guard);
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */

.site-footer {
	border-top: 1px solid var(--line);
	padding: 56px 0 72px;
	color: var(--ink-4);
	font-size: 0.94rem;
}

.footer-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	justify-content: space-between;
	align-items: flex-start;
}

.footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.footer-links a {
	color: var(--ink-3);
	text-decoration: none;
}

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

.site-footer img {
	width: 110px;
	height: 36px;
	opacity: 0.8;
}

.footer-note {
	margin-top: 30px;
	max-width: 70ch;
	line-height: 1.55;
}

/* ---------------------------------------------------------------------------
   Motion. One-shot only: an entrance for the hero and a reveal as sections
   arrive. Nothing on this page animates forever.
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.js .reveal {
		opacity: 0;
		transform: translateY(18px);
	}

	.js .reveal.is-in {
		opacity: 1;
		transform: none;
		transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
	}

	.js .hero .reveal {
		transition-delay: var(--d, 0ms);
	}
}

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */

@media (max-width: 1080px) {
	.planner {
		grid-template-columns: 1fr;
	}

}

@media (max-width: 860px) {
	.nav-links {
		display: none;
	}

	.nav > .wrap {
		gap: 16px;
	}

	.nav-cta {
		margin-left: auto;
	}

	.compare-row {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.step {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.step-index {
		padding-top: 0;
	}
}

@media (max-width: 620px) {
	body {
		font-size: 16px;
	}

	.wrap,
	.nav > .wrap,
	.hero-caption {
		width: calc(100% - 32px);
	}

	/* One action in the bar. Signing in belongs to the support site and is in
	   the footer; here it only crowds the thing people came to press. */
	.nav-cta .btn--ghost {
		display: none;
	}

	.nav-cta .btn {
		white-space: nowrap;
	}

	/* The hero shot is 2.4:1. Shrunk to a phone it becomes a smudge, so the
	   phone gets an art-directed crop that keeps the panel legible. */
	.hero-shot img {
		width: 100%;
		height: 300px;
		object-fit: cover;
		object-position: left center;
	}

	.shot {
		padding: 7px;
	}

	/* Panel screenshots are 290-340px wide by nature. Scaling them into a
	   phone column destroys them, so they keep their real size and the row
	   becomes a swipeable strip. */
	.shot-row {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: 10px;
		scrollbar-width: thin;
	}

	.shot-row > * {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}

	.shot img {
		max-height: none;
		width: auto;
		max-width: none;
	}

	/* Every capture scrolls inside its own frame rather than being shrunk to
	   40%. One frame per figure, never a shared row: in a shared row the
	   tallest image sets the height and the shorter one leaves most of a
	   phone screen empty beside it. */
	.cc-media,
	.shot-row > .figure,
	.cc-split-main,
	.cc-split-side,
	.cc-split-full {
		overflow-x: auto;
		scrollbar-width: thin;
		padding-bottom: 10px;
	}

	.shot-row {
		display: block;
		overflow: visible;
	}

	.shot-row > .figure + .figure {
		margin-top: 30px;
	}

	.cc-block--split {
		display: block;
	}

	.cc-split-main,
	.cc-split-side {
		margin-top: 30px;
	}

	.figure figcaption {
		max-width: 300px;
	}

	.guard-state .shot img {
		width: 100%;
		max-height: none;
	}

	.guard-pair {
		display: block;
	}

	.guard-state + .guard-state {
		margin-top: 32px;
	}

	.hero-actions .btn {
		width: 100%;
		justify-content: center;
	}
}


/* ---------------------------------------------------------------------------
   Beta blocks. Two additions the sales page has no use for: the two-column
   ledger of what a tester gets and gives, and the invitation code.
   --------------------------------------------------------------------------- */

.deal {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(28px, 4vw, 64px);
}

.deal-col h3 {
	font-size: 1.06rem;
	font-weight: 800;
	font-stretch: 105%;
	letter-spacing: -0.012em;
	color: var(--ink);
	padding-bottom: 18px;
	border-bottom: 1px solid var(--line-2);
}

.ruled {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ruled li {
	padding: 18px 0;
	border-bottom: 1px solid var(--line);
	color: var(--ink-3);
	font-size: 0.98rem;
	line-height: 1.55;
	max-width: 46ch;
}

.ruled li b {
	color: var(--ink);
	font-weight: 700;
}

/* The one place on this page that earns a filled surface: the code is the
   artefact a visitor came to copy. */
.invite {
	margin-top: clamp(40px, 5vw, 68px);
	padding: clamp(22px, 3vw, 34px);
	background: var(--surface);
	border: 1px solid var(--line-2);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	max-width: 62ch;
}

.invite-label {
	font-size: 0.78rem;
	font-weight: 700;
	font-stretch: 88%;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--ink-4);
}

.invite-code {
	margin-top: 12px;
	font-size: clamp(1.6rem, 3.4vw, 2.3rem);
	font-weight: 800;
	font-stretch: 104%;
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
	color: var(--green);
	white-space: nowrap;
	overflow-x: auto;
}

.invite-how {
	margin-top: 18px;
	color: var(--ink-3);
	font-size: 0.98rem;
	line-height: 1.55;
}

.hero-badge span {
	white-space: nowrap;
}

@media (max-width: 620px) {
	.invite-code {
		letter-spacing: 0.04em;
	}
}

/* ---------------------------------------------------------------------------
   Language switcher and the hero's product logo. Added after the stylesheet
   was seeded from the sales theme; from here on this file is edited directly.
   --------------------------------------------------------------------------- */

.langs {
	display: flex;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--line);
	border-radius: 10px;
}

.langs button {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--ink-5);
	font: inherit;
	font-size: 0.76rem;
	font-weight: 700;
	font-stretch: 88%;
	letter-spacing: 0.08em;
	padding: 6px 9px;
	border-radius: 7px;
	cursor: pointer;
	transition: color 0.18s var(--ease), background 0.18s var(--ease);
}

.langs button:hover {
	color: var(--ink-2);
}

.langs button[aria-pressed="true"] {
	background: var(--surface);
	color: var(--ink);
}

/* One switcher is in the nav bar, one in the footer. Only one shows at a
   time: below 860px the bar needs its width for the single call to action. */
.langs--footer {
	display: none;
	margin-top: 22px;
	width: max-content;
}

/* The announcement is about the product, so the product's own logo carries the
   top of the page instead of being tucked into the badge. Served pre-scaled at
   460x152 for a 230x76 slot rather than shrunk from the 1169px master. */
.hero-logo {
	width: 230px;
	height: 76px;
	margin-bottom: 26px;
}

.hero-badge .dot {
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--green);
}

@media (max-width: 860px) {
	.nav .langs {
		display: none;
	}

	.langs--footer {
		display: flex;
	}
}

@media (max-width: 620px) {
	.hero-logo {
		width: 184px;
		height: 61px;
	}
}

/* ---------------------------------------------------------------------------
   Legal pages. They run through index.php, which is otherwise unused, so the
   long-form vocabulary lives here: headings inside prose, lists, rules.
   --------------------------------------------------------------------------- */

.entry-content {
	max-width: 74ch;
}

.entry-content h2 {
	font-size: clamp(1.32rem, 2.1vw, 1.72rem);
	font-weight: 800;
	font-stretch: 112%;
	letter-spacing: -0.022em;
	line-height: 1.18;
	margin: clamp(38px, 4vw, 56px) 0 14px;
}

.entry-content h2:first-child {
	margin-top: 0;
}

.entry-content p {
	margin: 0 0 16px;
	color: var(--ink-2);
}

.entry-content .lead {
	color: var(--ink-3);
	margin-bottom: 34px;
}

.entry-content .muted {
	color: var(--ink-4);
	font-size: 0.94rem;
}

.entry-content ul {
	margin: 0 0 16px;
	padding-left: 20px;
	color: var(--ink-2);
}

.entry-content li {
	margin-bottom: 8px;
}

.entry-content strong {
	color: var(--ink);
	font-weight: 700;
}

.entry-content code {
	font-size: 0.92em;
	padding: 2px 6px;
	border-radius: 5px;
	background: var(--surface);
	border: 1px solid var(--line);
	color: var(--ink);
}

.entry-content hr {
	margin: clamp(48px, 6vw, 76px) 0;
	border: 0;
	border-top: 1px solid var(--line);
}

/* The legal pages are a document, not the landing page: the title sits on the
   page rather than being an announcement. */
.site-main h1 {
	font-size: clamp(2rem, 4.1vw, 3.1rem);
}

.footer-links--legal {
	margin-top: 14px;
}

.footer-links--legal a {
	/* --ink-5 kam auf 3,3:1 und blieb damit unter dem Mindestkontrast.
	   Ausgerechnet beim Impressum, das leicht erkennbar sein muss. */
	color: var(--ink-4);
	font-size: 0.92rem;
}

.footer-links--legal a:hover {
	color: var(--ink-2);
}