/* forrealz! — component styles. Consumes tokens.css custom properties only;
   never hardcode a color or font here. */

* { box-sizing: border-box; }

/* Type renders at the size we set on every device: no iOS/Android font
   boosting, no synthesized weights when a face is missing. */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	font-synthesis: none;
}

body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--color-charcoal);
	background: var(--color-white);
	line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }
body.nav-open { overflow: hidden; }
a { color: var(--color-coral-text); }
.brand-realz { color: var(--color-coral); }

.wrap {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 24px;
}

/* ---------- Header / footer frame ---------- */
.site-header,
.site-footer {
	background: var(--color-charcoal);
	color: var(--color-bg);
}

/* Pinned while scrolling. z-index: 50 is deliberately below the mobile nav
   overlay's 60 — when that overlay opens it should still cover everything,
   including this sticky bar (whose own .logo/.header-right sit above it
   via their own z-index: 65, so the hamburger's X stays visible on top of
   both). */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
}

.header-bar {
	display: flex;
	align-items: center;
	gap: 28px;
	padding-top: 18px;
	padding-bottom: 18px;
}

.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo-img { height: 36px; width: auto; display: block; }

.site-nav { flex: 1; }
.site-nav ul {
	display: flex;
	gap: 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-nav a {
	color: var(--color-bg);
	text-decoration: none;
	font-size: 15px;
	font-weight: 600;
}
.site-nav a:hover { color: var(--color-coral); }

.header-right {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-shrink: 0;
}

.lang-switch {
	color: var(--color-bg);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	border: 1px solid rgba(255,255,255,0.3);
	border-radius: var(--radius-pill);
	padding: 4px 12px;
}
.lang-switch:hover { border-color: var(--color-coral); color: var(--color-coral); }

.social-links {
	display: flex;
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.social-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	color: var(--color-bg);
}
.social-icon svg { width: 19px; height: 19px; }
.social-icon:hover { color: var(--color-coral); }

.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 30px;
	height: 30px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}
.nav-toggle span {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--color-bg);
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.header-download {
	display: none;
	color: var(--color-charcoal);
	background: var(--color-coral);
	text-decoration: none;
	font-size: 13px;
	font-weight: 700;
	border-radius: var(--radius-pill);
	padding: 7px 14px;
	white-space: nowrap;
}
.header-download:hover { background: var(--color-white); }

/* Mobile-only home for the social icons (duplicated from .header-right into
   the nav overlay); hidden on the compact top bar and on desktop, where
   .header-right already shows the real ones. The language switch stays in
   .header-right at every width — there's room for it in the top bar. */
.nav-extra { display: none; }

/* Full-screen overlay nav on tablet/mobile, closer to an app-style menu
   than a header dropdown. Switches later (1180px, not the site's usual
   900px) because the inline desktop nav has 7 links plus the lang switch,
   social icons and download button all in one row — the German labels
   ("Wie funktioniert's", "Leute kennenlernen", "Expats in Berlin"...) need
   real room or they wrap mid-word. */
@media (max-width: 1180px) {
	/* .site-nav is fixed/out-of-flow here, leaving just the logo and
	   header-right as flex children — space-between pins the logo left
	   and the download button + hamburger right instead of them all
	   clustering together on the left. */
	.header-bar { gap: 14px; justify-content: space-between; }
	/* .logo and .header-right are SIBLINGS of .site-nav (all three are
	   direct children of .header-bar) — .site-nav's z-index: 60 would
	   otherwise paint over both of them once the overlay opens, hiding
	   the hamburger's X state entirely. Raising these above it is what
	   actually fixes that (a z-index on an ancestor like .site-header
	   does not: it only governs stacking one level too high, against
	   .site-header's own siblings, not against .site-nav). */
	.logo,
	.header-right {
		position: relative;
		z-index: 65;
	}
	.header-right { gap: 12px; }
	.nav-toggle { display: flex; }
	.header-download { display: inline-flex; }
	/* The lang switch stays put; only the social icons move into the
	   nav-extra overlay below — the top bar has room for the switch but
	   not for it plus 3 icons plus the download button and hamburger. */
	.header-right .social-links { display: none; }
	.site-nav {
		position: fixed;
		inset: 0;
		z-index: 60;
		background: var(--color-charcoal);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: clamp(16px, 4vh, 32px);
		padding: 24px 0;
		overflow-y: auto;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	}
	.site-nav.is-open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
	/* Direct-child selector: the main links list only. A plain ".site-nav
	   ul" would also match the nested .social-links list one level down
	   and force it into this same column via a higher-specificity clash,
	   which is exactly what was fighting the "icons side by side" fix. */
	.site-nav > ul {
		flex-direction: column;
		align-items: center;
		gap: 2px;
	}
	/* Same direct-child scoping as above: only the main nav links, not the
	   social icon links nested inside .nav-extra one level down. */
	.site-nav > ul a {
		display: block;
		padding: 8px 0;
		font-size: clamp(19px, 5.2vh, 26px);
		font-weight: 700;
	}
	/* Social icons side by side in one row — keeps the overlay shorter and
	   every icon (YouTube included) reliably reachable. */
	.nav-extra {
		display: flex;
		align-items: center;
		flex-shrink: 0;
	}
	.nav-extra .social-links { gap: 20px; }
}

@media (max-width: 380px) {
	.header-download { padding: 7px 10px; font-size: 12px; }
}

.site-footer .wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 32px;
	padding-bottom: 32px;
	font-size: 14px;
}

.site-footer .legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer .legal-links a {
	color: var(--color-bg);
	text-decoration: none;
}

.site-footer .legal-links a:hover { color: var(--color-coral); }

/* In portrait/narrow widths the three footer groups (copyright, legal
   links, social icons) stack and center instead of staying left/space-
   between — otherwise the legal-links row wraps its last item (Support/
   Datenschutz) onto its own ragged-left line. */
@media (max-width: 600px) {
	.site-footer .wrap { flex-direction: column; text-align: center; }
	.site-footer .legal-links,
	.site-footer .social-links { justify-content: center; }
}

/* ---------- Scroll-reveal (assets/js/reveal.js toggles .is-visible via
   IntersectionObserver on a fixed selector list — no per-page markup
   needed). Motivation: state transition (content entering view), applied
   once per element. Reduced-motion gets the finished state immediately. ---------- */
.reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---------- Page content primitives ---------- */
main { display: block; }

.hero {
	position: relative;
	background: var(--color-charcoal);
	color: var(--color-white);
	text-align: center;
	padding: 64px 0;
	overflow: hidden;
}

/* Subtle depth so the dark bookend sections aren't a completely flat color
   fill. z-index: -1 (not just "behind in source order") so it can never
   paint over .hero-copy/.hero-media/.breadcrumb regardless of how their own
   stacking contexts resolve. */
.hero::before,
.closing-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(120% 140% at 12% 0%, rgba(255, 255, 255, 0.07), transparent 55%);
	pointer-events: none;
}

.hero h1 {
	font-weight: 700;
	font-size: clamp(34px, 6vw, 64px);
	line-height: 1.08;
	letter-spacing: -0.01em;
	margin: 0 0 20px;
}

/* Homepage hero headline: short, punchy, uppercase — the same treatment
   used across the brand's print posters (bold grotesque, all-caps, tight
   tracking) rather than a sentence-style headline. */
.hero-grid h1 {
	text-transform: uppercase;
	letter-spacing: -0.02em;
	font-size: clamp(38px, 7vw, 72px);
}

/* ---------- Homepage hero rotator: "The Social Network for" on its own
   line, then a second line that scrolls in from the top through the
   phrases of the line family (one pillar per phrase). The track holds the
   first phrase twice so the loop closes without a jump. Both lines share
   one size with no wrapping, so the block looks the same on every device;
   the longest phrase is checked at 320px. ---------- */
.hero-grid .hero-rotator {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* Measured in Plus Jakarta Sans Bold with the -0.02em tracking: at 320px
	   (288px of room) the longest phrase, "Unternehmungen", is 286px at 30px
	   and the static line is 280px at 0.68em; at 390px both have air. */
	font-size: clamp(30px, 8.5vw, 72px);
	line-height: 1.1;
	white-space: nowrap;
	min-width: 0;
}
.hero-static,
.hero-roll { display: block; }
.hero-static {
	font-size: 0.68em;
	line-height: 1.2;
	margin-bottom: 0.08em;
}
.hero-roll {
	height: 1.1em;
	overflow: hidden;
	color: var(--color-coral);
}
.hero-roll-track {
	display: flex;
	flex-direction: column;
	animation: hero-roll 12s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.hero-roll-track > span {
	display: block;
	height: 1.1em;
	line-height: 1.1;
}
/* Four phrases, each held for ~2.4s and swapped in ~0.5s; the fifth copy
   equals the first, so the jump back to 0 is invisible. */
@keyframes hero-roll {
	0%, 21% { transform: translateY(0); }
	25%, 46% { transform: translateY(-1.1em); }
	50%, 71% { transform: translateY(-2.2em); }
	75%, 96% { transform: translateY(-3.3em); }
	100% { transform: translateY(-4.4em); }
}
@media (prefers-reduced-motion: reduce) {
	.hero-roll-track { animation: none; }
}
@media (max-width: 900px) {
	.hero-grid .hero-rotator { align-items: center; }
}

/* Screen-reader only text (the rotator's visual copy is aria-hidden; this
   carries the master line for assistive tech and search). */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.hero .sub-line {
	font-size: 18px;
	color: var(--color-bg);
	max-width: 640px;
	margin: 0 auto 32px;
}

.store-buttons {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.store-buttons img { height: 50px; width: auto; }

.btn-cta {
	display: inline-flex;
	align-items: center;
	color: var(--color-charcoal);
	background: var(--color-coral);
	text-decoration: none;
	font-weight: 700;
	font-size: 16px;
	border-radius: var(--radius-pill);
	padding: 14px 28px;
}
.btn-cta:hover { background: var(--color-white); }

.fine-print {
	font-size: 13px;
	color: var(--color-muted);
}
.hero .fine-print,
.closing-cta .fine-print { color: var(--color-bg); opacity: 0.75; }

/* ---------- Homepage hero: copy beside a portrait (9:16) autoplaying
   teaser video, overlapping it slightly (Breeze-style). On mobile the two
   columns stack, with the video below the headline instead of beside it. ---------- */
.hero-grid {
	display: grid;
	grid-template-columns: 1fr 340px;
	align-items: center;
	gap: 40px;
	text-align: left;
}

.hero-copy { position: relative; z-index: 2; }

/* Wordmark above the headline, sized to sit in proportion with it: roughly
   about 1.5x the height of the headline's two lines combined. */
.hero-logo {
	display: block;
	height: clamp(96px, 16vw, 160px);
	width: auto;
	margin: 0 0 12px;
}

/* ---------- Download CTA (reusable): QR code on desktop/web, app-store
   badges on a phone — never both at once, toggled purely by CSS. Use
   render_download_cta() for the primary download moment on a page (usually
   the hero); a secondary/repeat CTA further down can just call
   render_store_buttons() alone. */
.download-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}
.download-cta .store-buttons { margin-bottom: 0; display: none; }
/* The homepage hero is the one asymmetric, left-aligned layout. */
.hero-grid .download-cta { justify-content: flex-start; }

.qr-block { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.qr-block img { border-radius: var(--radius-sm); background: var(--color-white); padding: 6px; }
.qr-block span {
	font-size: 13px;
	color: var(--color-bg);
	opacity: 0.8;
	line-height: 1.3;
	max-width: 160px;
	text-align: center;
}
.download-cta .qr-block { display: flex; }

.hero-media { position: relative; z-index: 1; }
.hero-video {
	display: block;
	width: 100%;
	aspect-ratio: 9 / 16;
	object-fit: cover;
	border-radius: var(--radius-lg);
	box-shadow: 0 30px 60px -30px rgba(var(--shadow-charcoal), 0.6);
	background: var(--color-charcoal);
}

@media (min-width: 901px) {
	.hero-copy { margin-right: -48px; }
}

@media (max-width: 900px) {
	.hero-grid { grid-template-columns: 1fr; text-align: center; gap: 8px; }
	.hero-copy { margin-right: 0; }
	.hero-logo { margin-left: auto; margin-right: auto; }
	.hero-grid .download-cta { justify-content: center; margin-bottom: 24px; }
	.hero-media { max-width: 240px; margin: -12px auto 0; }
}

/* The actual QR-vs-badges swap: desktop/web gets the QR, a phone gets the
   badges — applies to every render_download_cta(), hero-grid or plain hero. */
@media (max-width: 900px) {
	.download-cta .store-buttons { display: flex; }
	.download-cta .qr-block { display: none; }
}

.content-section {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 32px 24px 48px;
}

.content-section h2 {
	font-weight: 700;
	font-size: clamp(28px, 4vw, 40px);
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin-bottom: 12px;
}

/* The centered heading block (render_section_heading()) sits directly above
   its section body. Without this, its own 48px bottom padding stacks on top
   of the body's top padding and leaves a big hole under the headline. */
.section-heading { padding-bottom: 8px; }
.section-heading + .content-section { padding-top: 0; }
.section-heading + .content-section > :first-child { margin-top: 0; }
.section-heading + .steps-grid { padding-top: 16px; }

/* A centered call-to-action row at the end of a text section. */
.cta-row { text-align: center; margin: 32px 0 0; }

/* Breadcrumbs live inside the (dark) hero now, right above the h1, instead
   of as a separate light-colored strip above it. */
.hero .breadcrumb {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 0 16px;
	font-size: 14px;
	color: rgba(245, 244, 242, 0.6);
}
.hero .breadcrumb a { color: var(--color-bg); text-decoration: none; font-weight: 600; }
.hero .breadcrumb a:hover { color: var(--color-coral); }
.hero .breadcrumb strong { color: var(--color-white); font-weight: 700; }

.card-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 24px 48px;
}

/* When a card grid opens its section directly (no render_section_heading()
   above it), it needs the same top padding content-section gets — otherwise
   the cards sit flush against the section's top edge. */
.card-grid:first-child {
	padding-top: 32px;
}

@media (max-width: 900px) {
	.card-grid { grid-template-columns: repeat(2, 1fr); }
}

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

.card-grid a,
.card-grid > div {
	display: block;
	padding: 24px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	text-decoration: none;
	color: var(--color-charcoal);
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.card-grid a:hover {
	border-color: var(--color-coral);
	transform: translateY(-3px);
	box-shadow: 0 12px 24px -16px rgba(var(--shadow-coral), 0.45);
}

/* Opt-in modifier for text-only card grids that have no image/icon to give
   elevation a reason to exist (e.g. the homepage "Deliberately different"
   section) — hairline-divided list instead of bordered boxes, so the page
   doesn't repeat the same boxed-card look in every section. */
.card-grid--plain {
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
	border-top: 1px solid var(--color-border);
}
.card-grid--plain > a,
.card-grid--plain > div {
	background: none;
	border: none;
	border-radius: 0;
	padding: 28px 32px;
	border-bottom: 1px solid var(--color-border);
}
.card-grid--plain > a:nth-child(odd),
.card-grid--plain > div:nth-child(odd) {
	border-right: 1px solid var(--color-border);
}
.card-grid--plain a:hover {
	transform: none;
	box-shadow: none;
	border-color: var(--color-border);
	background: var(--color-bg);
}
@media (max-width: 600px) {
	.card-grid--plain { grid-template-columns: 1fr; }
	.card-grid--plain > a:nth-child(odd),
	.card-grid--plain > div:nth-child(odd) { border-right: none; }
}

.card-grid h3 {
	margin: 0 0 8px;
	font-size: 19px;
	color: var(--color-coral-text);
}

.card-grid p { margin: 0; font-size: 15px; }

.card-grid .card-icon {
	display: block;
	width: 32px;
	height: 32px;
	margin-bottom: 12px;
	color: var(--color-coral-text);
}
.card-grid .card-icon svg { width: 100%; height: 100%; }

/* A small highlighted callout inside a section (e.g. the "Tip for the Drop
   text" example under a steps grid) — tinted so it reads as an aside without
   needing its own section/background band. */
.tip-callout {
	max-width: 640px;
	margin: 0 auto 48px;
	padding: 16px 24px;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	font-size: 15px;
	text-align: center;
}
.section-tint .tip-callout { background: var(--color-white); }

/* A lightweight sub-heading introducing a block within a merged section
   (e.g. "Popular spots" above a venue card grid, inside the same section
   as the steps above it) — smaller and less padded than render_section_heading(). */
.subhead {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 24px;
	margin-bottom: 24px;
	font-size: clamp(21px, 2.6vw, 26px);
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* When a card grid ends with exactly one orphaned item on its own row of the
   3-column desktop layout (i.e. count % 3 === 1), center it instead of
   leaving it flush left. Only applies at the width where the grid is still
   3 columns; the 900px/600px breakpoints below reset it since there's no
   orphan once the grid drops to 2 or 1 columns. */
@media (min-width: 901px) {
	.card-grid > :last-child:nth-child(3n+1) { grid-column: 2; }
}

/* ---------- Comparison pages ("/…-alternative/") ----------
   Running prose uses the same content width as the rest of the site. */
.content-section--prose h2 {
	font-size: clamp(24px, 3vw, 32px);
	margin-top: 8px;
}
.content-section--prose h3 {
	font-size: 20px;
	margin: 28px 0 8px;
}
.content-section--prose p { margin: 0 0 16px; }
.content-section--prose ul { padding-left: 22px; margin: 0 0 16px; }
.content-section--prose li { margin-bottom: 8px; }

.page-meta {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 24px 24px 0;
	font-size: 13px;
	color: var(--color-muted);
}

/* One competitor column, one forrealz! column, a leading row label. Scrolls
   sideways on a narrow phone rather than squeezing three columns. */
.compare-table {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 24px 56px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.compare-table table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	font-size: 15px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
}
.compare-table th,
.compare-table td {
	padding: 14px 16px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--color-border);
}
.compare-table thead th {
	background: var(--color-bg);
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.compare-table tbody th {
	font-weight: 600;
	width: 26%;
	color: var(--color-charcoal);
}
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: none; }

.faq-list {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 24px 48px;
}


.faq-list details {
	border-bottom: 1px solid var(--color-border);
	padding: 16px 0;
}

.faq-list summary {
	cursor: pointer;
	font-weight: 600;
	font-size: 17px;
}

.faq-list p { margin: 12px 0 0; }

.closing-cta {
	position: relative;
	background: var(--color-charcoal);
	color: var(--color-white);
	text-align: center;
	padding: 56px 0;
	overflow: hidden;
}

.closing-cta h2 {
	font-weight: 700;
	font-size: clamp(28px, 4vw, 40px);
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0 0 24px;
}

/* ---------- Feature grid (real app screenshots on the homepage) ---------- */
.feature-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 24px 24px 48px;
}

.feature-card { text-align: center; }

.feature-card img {
	width: 100%;
	max-width: 220px;
	aspect-ratio: 402 / 778; /* the app without status bar and home indicator (assets/images/app/screen-*.jpg) */
	object-fit: cover;
	margin: 0 auto 20px;
	border-radius: var(--radius-lg);
	box-shadow: 0 20px 36px -22px rgba(var(--shadow-charcoal), 0.35);
}

.feature-card h3 {
	font-weight: 700;
	font-size: clamp(19px, 2.4vw, 22px);
	margin: 0 0 8px;
}
.feature-card p { margin: 0; font-size: 15px; color: var(--color-muted); }

@media (max-width: 900px) {
	.feature-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
}

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

/* ---------- Step path (homepage "Four steps", render_steps_with_screens())
   Same grid as .feature-grid, plus a connecting dot-and-line between steps
   so the sequence reads as a path, not four disconnected cards — this is
   what actually distinguishes it from the plain feature grid below it,
   instead of every homepage section defaulting to the same look. Desktop
   only: once the grid wraps to 2 or 1 columns, a straight connector between
   visually stacked items would point the wrong way, so it's dropped. ---------- */
.steps-path .step-number {
	color: var(--color-coral-text);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
@media (min-width: 901px) {
	.steps-path .feature-card { position: relative; }
	.steps-path .step-number { position: relative; display: inline-block; padding-left: 16px; }
	.steps-path .step-number::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: var(--color-coral);
		transform: translateY(-50%);
	}
	.steps-path .feature-card:not(:first-child) .step-number::after {
		content: "";
		position: absolute;
		right: 100%;
		top: 50%;
		width: 28px;
		height: 2px;
		background: var(--color-border);
		transform: translateY(-50%);
	}
}

@media (min-width: 901px) {
	.feature-grid-3 { grid-template-columns: repeat(3, 1fr); max-width: 900px; }
}

/* ---------- Audience grid ("who it's for", homepage) ---------- */
.audience-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 24px 48px;
}

.audience-card img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-lg);
	margin-bottom: 16px;
	box-shadow: 0 20px 36px -22px rgba(var(--shadow-charcoal), 0.35);
}

.audience-card h3 { font-weight: 700; font-size: 18px; margin: 0 0 6px; }
.audience-card p { margin: 0; font-size: 15px; color: var(--color-muted); }

@media (max-width: 900px) {
	.audience-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
}

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

/* ---------- Venue card grid (dynamic Suggestions on activity pages) ----------
   Reuses .audience-card's exact image treatment — the plain .card-grid has no image slot at
   all, and this is the "venue card grid" the .subhead comment above already anticipates. */
.venue-card-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 24px 48px;
}

.venue-card img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-lg);
	margin-bottom: 16px;
	box-shadow: 0 20px 36px -22px rgba(var(--shadow-charcoal), 0.35);
}

.venue-card h3 { font-weight: 700; font-size: 18px; margin: 0 0 6px; }
.venue-card p { margin: 0; font-size: 15px; color: var(--color-muted); }
.venue-card .venue-address { font-size: 13px; margin-top: 4px; }

@media (max-width: 900px) {
	.venue-card-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
}

@media (max-width: 560px) {
	.venue-card-grid { grid-template-columns: 1fr; }
}

/* ---------- Drop cards (/drops/): upcoming community Drops of Spark Hosts from the
   admin feed (render_drop_cards()). Shares .venue-card-grid for the grid; the card itself
   is a bordered box like .card-grid > div because it carries structured meta (host, time,
   place, activity, community, capacity) and one CTA, not a photo. ---------- */
.drop-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}
.drop-card-host { display: flex; align-items: center; gap: 12px; }
.drop-card-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}
.drop-card-avatar--placeholder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--color-bg);
	color: var(--color-muted);
	font-weight: 700;
	font-size: 18px;
}
.drop-card-host-name { font-weight: 700; font-size: 15px; margin-right: 6px; }
.drop-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: var(--radius-pill);
	background: var(--color-coral);
	color: var(--color-charcoal);
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}
.drop-card-when { margin: 0; font-weight: 700; font-size: 16px; }
.drop-card-text { margin: 0; font-size: 15px; flex: 1 1 auto; }
.drop-card-meta { list-style: none; margin: 0; padding: 0; font-size: 14px; color: var(--color-muted); }
.drop-card-meta li { margin: 0 0 2px; }
.drop-card-meta a { color: var(--color-coral-text); }
.drop-card .btn-cta { align-self: flex-start; margin-top: 6px; font-size: 15px; padding: 12px 22px; }
.drop-card .btn-cta:hover { background: var(--color-coral-text); color: var(--color-white); }

/* A render_download_cta() on a light band (the Drops page empty state) needs a readable
   QR caption; the default caption color is tuned for the dark hero. */
.section-white .qr-block span,
.section-tint .qr-block span { color: var(--color-muted); opacity: 1; }

/* ---------- Section background bands (charcoal/white/tint contrast alone
   marks the boundary between sections, no divider line needed) ---------- */
.section-white { background: var(--color-white); }
.section-tint { background: var(--color-bg); }

.steps-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 48px 24px;
}

@media (max-width: 900px) {
	.steps-grid { grid-template-columns: repeat(2, 1fr); }
}

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

.steps-grid > div {
	padding: 24px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}
.section-tint .steps-grid > div { background: var(--color-bg); }

.steps-grid .step-number {
	color: var(--color-coral-text);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.steps-grid h3 { margin: 8px 0 8px; font-size: 19px; }
.steps-grid p { margin: 0; font-size: 15px; }

/* ---------- Legal markdown pages ---------- */
.legal-md-content {
	max-width: 760px;
	margin: 0 auto;
	padding: 48px 24px;
}
.legal-md-content h1 { font-size: 32px; }
.legal-md-content h2 { font-size: 22px; margin-top: 32px; }
.legal-md-content a { color: var(--color-coral-text); }

/* ---------- Forms (delete-me, partner enquiry, Spark Host) ---------- */
.delete-me-form,
.partner-form {
	max-width: 480px;
	margin: 0 auto;
	padding: 0 24px 48px;
}
.delete-me-form label,
.partner-form label { font-weight: 600; }
.delete-me-form input[type="email"],
.partner-form input[type="text"],
.partner-form input[type="email"],
.partner-form input[type="tel"],
.partner-form select,
.partner-form textarea {
	width: 100%;
	padding: 12px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: 16px;
	font-family: var(--font-body);
	margin-top: 6px;
}
.partner-form textarea { resize: vertical; }
/* The Spark Host form has long labels and four consent boxes; the 480px cap
   shared by the short forms makes it a narrow column on desktop. */
.spark-host-form { max-width: 760px; }
.spark-host-form fieldset { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 8px 16px; margin: 0 0 16px; }
.spark-host-form legend { font-weight: 600; padding: 0 6px; }
.spark-host-form .form-hint { margin: 4px 0 12px; font-size: 14px; color: var(--color-muted); }
.spark-host-form .form-check { display: flex; align-items: flex-start; gap: 10px; }
.spark-host-form .form-check input[type="checkbox"] { flex: 0 0 auto; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--color-coral-text); }
.spark-host-form .form-check label { font-weight: 400; }
.spark-host-form .form-check a { color: var(--color-coral-text); }
.spark-host-form select {
	width: 100%;
	padding: 12px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: 16px;
	font-family: var(--font-body);
	margin-top: 6px;
}
.delete-me-form .cf-turnstile,
.partner-form .cf-turnstile { margin: 16px 0; }
.delete-me-form button,
.partner-form button {
	background: var(--color-coral);
	color: var(--color-charcoal);
	border: none;
	border-radius: var(--radius-pill);
	padding: 14px 28px;
	font-size: 16px;
	font-weight: 700;
	font-family: var(--font-body);
	cursor: pointer;
}
.delete-me-form button:hover,
.partner-form button:hover { background: var(--color-coral-text); color: var(--color-white); }

.form-notice {
	max-width: 480px;
	margin: 0 auto 24px;
	padding: 16px 24px;
	border-radius: var(--radius-sm);
	text-align: center;
	font-weight: 600;
}
.form-notice.success { background: #D1FAE5; color: #047857; }
.form-notice.error { background: #FEE2E2; color: #B91C1C; }

/* ---------- Cookie banner ---------- */
.cookie-banner {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 80;
	background: var(--color-charcoal);
	color: var(--color-bg);
	box-shadow: 0 -12px 24px -12px rgba(var(--shadow-charcoal), 0.35);
}

.cookie-banner-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	padding-top: 16px;
	padding-bottom: 16px;
}

.cookie-banner p { margin: 0; font-size: 14px; max-width: 640px; }
.cookie-banner a { color: var(--color-coral); }

.cookie-banner button {
	background: var(--color-coral);
	color: var(--color-charcoal);
	border: none;
	border-radius: var(--radius-pill);
	padding: 10px 22px;
	font-size: 14px;
	font-weight: 700;
	font-family: var(--font-body);
	cursor: pointer;
	flex-shrink: 0;
}
.cookie-banner button:hover { background: var(--color-white); }

/* ---------- Poster landing pages (/missing/*, /de/suche/*): continue the
   printed "MISSING" poster for the person who just scanned it. Mobile first;
   the desktop rules at the bottom only widen and re-balance. ---------- */
.poster-hero {
	background: var(--color-muted);
	padding: 32px 0 40px;
	overflow: hidden;
}
/* The poster itself: a sheet of paper on the wall, slightly tilted, with a
   strip of coral tape across two opposite corners holding it up. */
.poster-hero .wrap {
	position: relative;
	max-width: 560px;
	margin: 0 20px;
	padding: 36px 24px 32px;
	background: var(--color-bg);
	color: var(--color-charcoal);
	text-align: left;
	box-shadow: 0 14px 34px rgba(var(--shadow-charcoal), 0.45);
	transform: rotate(-0.8deg);
}
.poster-hero .wrap::before,
.poster-hero .wrap::after {
	content: "";
	position: absolute;
	width: 92px;
	height: 24px;
	background: var(--color-coral);
	opacity: 0.88;
}
.poster-hero .wrap::before { top: 2px; right: -30px; transform: rotate(38deg); }
.poster-hero .wrap::after { bottom: 2px; left: -30px; transform: rotate(38deg); }
@media (min-width: 600px) {
	.poster-hero .wrap { margin: 0 auto; }
}
.poster-hero h1 { margin: 0 0 20px; line-height: 1; }
.poster-stamp {
	display: block;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: clamp(48px, 17vw, 96px);
	line-height: 0.9;
	margin-bottom: 8px;
}
.poster-who {
	display: block;
	font-weight: 600;
	font-size: clamp(20px, 5.5vw, 32px);
	line-height: 1.25;
	color: var(--color-muted);
}
.poster-lead {
	font-size: clamp(18px, 4.6vw, 22px);
	line-height: 1.45;
	font-weight: 600;
	max-width: 560px;
	margin: 0 0 28px;
}
.poster-hero .download-cta,
.poster-hero .store-buttons { justify-content: flex-start; margin-bottom: 14px; }
.poster-hero .qr-block { flex-direction: row; gap: 16px; }
.poster-hero .qr-block span { color: var(--color-charcoal); opacity: 1; font-size: 18px; font-weight: 700; text-align: left; max-width: 180px; }
/* A touch device never needs a QR code to reach the app, whatever its width (large phones, tablets). */
@media (pointer: coarse) {
	.poster-hero .download-cta .store-buttons { display: flex; }
	.poster-hero .download-cta .qr-block { display: none; }
}
.poster-hero .fine-print { color: var(--color-muted); opacity: 1; margin: 0; }

.poster-moments { background: var(--color-charcoal); color: var(--color-bg); padding: 48px 0; }
.poster-moments h2 { font-size: clamp(24px, 6vw, 34px); margin: 0 0 24px; line-height: 1.15; }
.poster-moments ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.poster-moments li {
	border-left: 4px solid var(--color-coral);
	padding: 4px 0 4px 16px;
	font-size: clamp(18px, 4.6vw, 22px);
	line-height: 1.4;
}

.poster-turn { background: var(--color-white); padding: 48px 0; }
.poster-turn h2 { font-size: clamp(24px, 6vw, 34px); margin: 0 0 24px; line-height: 1.15; text-wrap: balance; }
.poster-drop {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 20px;
	margin-bottom: 32px;
	max-width: 480px;
	box-shadow: 0 10px 28px rgba(var(--shadow-charcoal), 0.12);
	transform: rotate(-1deg);
}
.poster-drop-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted); }
.poster-drop p { font-size: 20px; font-weight: 700; line-height: 1.3; margin: 8px 0 16px; }
.poster-drop-pick {
	display: inline-block;
	background: var(--color-coral);
	color: var(--color-charcoal);
	font-weight: 700;
	font-size: 15px;
	border-radius: var(--radius-pill);
	padding: 10px 22px;
}
.poster-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; max-width: 480px; }
.poster-steps li { display: flex; gap: 16px; align-items: flex-start; }
.poster-step-n {
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-pill);
	background: var(--color-charcoal);
	color: var(--color-white);
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}
.poster-steps strong { display: block; font-size: 18px; line-height: 1.3; }
.poster-steps span:not(.poster-step-n) { display: block; color: var(--color-muted); font-size: 15px; }

.poster-trust { background: var(--color-bg); padding: 28px 0; border-top: 1px solid var(--color-border); }
.poster-trust ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-weight: 600; }
.poster-trust li::before { content: "\2713"; color: var(--color-coral-text); margin-right: 10px; font-weight: 700; }

@media (min-width: 901px) {
	.poster-hero { padding: 64px 0; }
	.poster-hero .wrap { padding: 48px 44px 40px; }
	.poster-hero .wrap::before,
	.poster-hero .wrap::after { width: 130px; height: 30px; }
	.poster-moments ul { grid-template-columns: repeat(3, 1fr); gap: 32px; }
	.poster-turn .wrap { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; align-items: center; }
	.poster-turn h2 { grid-column: 1 / -1; }
	.poster-drop { margin-bottom: 0; }
	.poster-trust ul { grid-template-columns: repeat(3, 1fr); text-align: center; }
}

/* Minimal chrome for landing pages: logo + language switch only, legal links only. */
.site-header--minimal { position: static; }
.site-header--minimal .header-bar { justify-content: space-between; padding-top: 12px; padding-bottom: 12px; }
.site-footer--minimal { padding: 20px 0; text-align: center; }
.site-footer--minimal .legal-links { justify-content: center; margin: 0; }

.poster-try { font-size: clamp(17px, 4.4vw, 20px); line-height: 1.45; max-width: 560px; margin: 0 0 24px; }
.poster-scans { font-weight: 700; font-size: clamp(17px, 4.4vw, 20px); line-height: 1.4; max-width: 560px; margin: 0 0 24px; }

/* Poster pages: the two store badges always sit side by side, shrinking to fit a narrow phone. */
.poster-hero .store-buttons,
.closing-cta .store-buttons { flex-wrap: nowrap; gap: 8px; }
.poster-hero .store-buttons a,
.closing-cta .store-buttons a { flex: 0 1 150px; min-width: 0; }
.poster-hero .store-buttons img,
.closing-cta .store-buttons img { width: 100%; height: auto; }

.poster-hero .poster-scans { margin: 0 0 24px; padding-top: 14px; border-top: 2px solid var(--color-charcoal); font-size: clamp(15px, 4vw, 17px); }

/* Event landing pages (/websummit/): the hero carries a paragraph and buttons
   under the rotator, so it keeps clear of the video instead of overlapping it. */
@media (min-width: 901px) {
	.hero-grid--event { gap: 64px; }
	.hero-grid--event .hero-copy { margin-right: 0; }
	.hero-grid--event .store-buttons { justify-content: flex-start; }
}
.hero-grid--event .hero-copy p { margin-top: 16px; }
@media (max-width: 900px) {
	.hero-grid--event .store-buttons { justify-content: center; margin-bottom: 32px; }
	.hero-grid--event .hero-media { margin-top: 0; }
}

/* Web Summit page: the attendee social card, linked to the Web Summit app. */
.ws-social-card { display: block; max-width: 600px; margin: 8px auto 0; }
.ws-social-card img {
	display: block; width: 100%; height: auto;
	border-radius: var(--radius-md);
	box-shadow: 0 30px 60px -30px rgba(var(--shadow-charcoal), 0.6);
}