/* Dayhunt website — global tokens and base styles.

   The green family is the product brand (mirrored from the webapp design
   system) and is reserved for buttons, rings and match states. Blue is the
   landing-only accent: headline highlights, chips and background waves.
   Backgrounds stay white or near-white — no large blue fills. */

@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("/fonts/figtree-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: "Figtree";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("/fonts/figtree-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;
}

:root {
	color-scheme: light;

	/* Ink and surfaces */
	--ink: #080a0b;
	--muted: #5c666e;
	--paper: #ffffff;
	--canvas: #f7f9fc;
	--hero-surface: #fbfbfa;
	--line: #e7ecf3;

	/* Brand green — product identity, used on actions and match states */
	--green: #12b76a;
	--green-dark: #12b76a;
	--green-soft: #e4f7ee;
	--green-line: #c2ecd6;

	/* Landing accent blue — type highlights, chips, background waves.
	   A theme class on <html> via BaseLayout's theme prop can swap this whole group. */
	--blue: #3b6cd1;
	--blue-rgb: 59 108 209;
	--blue-light: #7fa3ee;
	--blue-soft: #eef3fc;
	--blue-line: #dbe5f8;
	--wave-stroke: #a9c2f2;

	--violet-soft: #f3edff;
	--violet-ink: #6d4ad6;

	/* Hero globe artwork is painted in the old #2563eb; tone it down to cobalt */
	--hero-art-filter: hue-rotate(-1deg) saturate(0.76);

	/* Blue gradient — headline accents and large blue fills inside UI mocks */
	--blue-gradient: linear-gradient(100deg, #345fbf 0%, #5a89e0 52%, var(--blue) 100%);
	/* Same direction at a quarter of the contrast — for fills inside UI mocks */
	--blue-grad-soft-1: #3562c4;
	--blue-grad-soft-2: #4372d8;
	--blue-gradient-soft: linear-gradient(100deg, var(--blue-grad-soft-1) 0%, var(--blue-grad-soft-2) 52%, var(--blue) 100%);
	/* Lighter variant for accents on the dark closing band */
	--blue-gradient-light: linear-gradient(100deg, #7aa2ea 0%, #8fb1f0 52%, #7fa3ee 100%);

	/* Warm neutral panel — used where a tinted panel must not add more green */
	--sand-soft: #faf7f1;
	--sand-line: #ece5d6;

	/* Typography */
	--text-xs: 12px;
	--text-sm: 14px;
	--text-base: 16px;
	--text-lead: 17px;
	--weight-body: 500;
	--weight-ui: 700;
	--weight-display: 900;

	/* Radii */
	--r-sm: 10px;
	--r-md: 16px;
	--r-lg: 24px;
	--r-xl: 32px;
	--r-pill: 999px;

	/* Elevation — soft, cool-tinted */
	--shadow-sm: 0 1px 2px rgb(16 32 64 / 6%), 0 6px 16px rgb(16 32 64 / 4%);
	--shadow-md: 0 2px 4px rgb(16 32 64 / 5%), 0 14px 36px rgb(16 32 64 / 8%);
	--shadow-lg: 0 8px 24px rgb(16 32 64 / 8%), 0 32px 64px rgb(16 32 64 / 10%);
	/* Rhythm */
	--gutter: 24px;
	--shell: 1080px;
	--section-y: clamp(64px, 8vw, 120px);

	font-family: "Figtree", ui-sans-serif, system-ui, -apple-system,
		BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

html {
	min-width: 320px;
	scroll-behavior: smooth;
	/* Header height plus breathing room for in-page anchors */
	scroll-padding-top: 96px;
	touch-action: pan-x pan-y;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	touch-action: manipulation;
	color: var(--ink);
	background: var(--paper);
	font-family: inherit;
	font-size: var(--text-base);
	font-weight: var(--weight-body);
	line-height: 1.55;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1,
h2,
h3 {
	margin: 0;
	font-weight: var(--weight-display);
	letter-spacing: 0;
	line-height: 1.06;
}

p {
	margin: 0;
}

a {
	color: inherit;
	text-decoration: none;
}

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

:focus-visible {
	outline: 3px solid rgb(18 183 106 / 45%);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---- Shared primitives ---- */

.shell {
	width: min(100% - (var(--gutter) * 2), var(--shell));
	margin-inline: auto;
}

.section {
	position: relative;
	padding-block: var(--section-y);
}

.accent {
	color: var(--blue);
}

.accent-gradient {
	display: inline-block;
	color: var(--blue);
	background: var(--blue-gradient);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.section-head {
	max-width: 720px;
	margin-inline: auto;
	text-align: center;
}

.section-head h2 {
	margin-top: 20px;
	font-size: clamp(32px, 5.2vw, 52px);
}

.section-head p {
	margin-top: 18px;
	color: var(--muted);
	font-size: var(--text-lead);
	font-weight: var(--weight-body);
	line-height: 1.5;
}

/* Buttons */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 52px;
	padding-inline: 26px;
	border: 0;
	border-radius: var(--r-pill);
	font-size: var(--text-lead);
	font-weight: var(--weight-ui);
	letter-spacing: 0;
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, opacity 0.18s ease;
	white-space: nowrap;
}

.btn svg {
	flex: none;
}

.btn-primary {
	background: var(--green);
	color: #fff;
	box-shadow: none;
}

.btn-primary:hover {
	opacity: 0.9;
}

.btn-ghost {
	background: var(--paper);
	color: var(--ink);
	box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm);
}

.btn-ghost:hover {
	transform: translateY(-1px);
	box-shadow: inset 0 0 0 1px var(--blue-line), var(--shadow-md);
}

.btn-sm {
	height: 42px;
	padding-inline: 20px;
	font-size: var(--text-sm);
}

.btn-lg {
	height: 60px;
	padding-inline: 34px;
	font-size: var(--text-lead);
}

/* A trailing arrow already adds visual weight on the right */
.btn:has(> svg:last-child) {
	padding-right: 20px;
}

.btn-lg:has(> svg:last-child) {
	padding-right: 26px;
}

/* Chips */

.chip {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding-inline: 11px;
	border-radius: var(--r-pill);
	background: var(--blue-soft);
	color: var(--blue);
	font-size: var(--text-xs);
	font-weight: var(--weight-ui);
}

/* Scroll reveal: elements with data-reveal fade and rise when they enter the
   viewport and reset when they leave it entirely, so they replay on return.
   Only active when JS has marked the document (html.js); otherwise visible. */

html.js [data-reveal] {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: var(--reveal-delay, 0s);
}

html.js [data-reveal].is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html.js [data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}

	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

/* ==========================================================================
   Components. Astro scoped these per component; here every class that two
   components shared carries the component's own prefix instead.
   ========================================================================== */

/* ---- Logo: the Dayhunt mark followed by the word ---- */

.brand-logo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--ink);
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
}

.brand-logo img {
	width: 30px;
	height: 30px;
}

.brand-logo.is-light {
	gap: 9px;
	color: #fff;
	font-size: 24px;
}

.brand-logo.is-light img {
	width: 34px;
	height: 34px;
}

/* ---- Header ---- */

.header-actions[hidden] {
	display: none;
}

.header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid transparent;
	background: var(--hero-surface);
	backdrop-filter: blur(14px);
	transition: border-color 0.18s ease, background-color 0.18s ease;
}

.header.is-scrolled {
	border-bottom-color: rgb(231 236 243 / 70%);
	background: rgb(255 255 255 / 92%);
}

.header-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: 64px;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 16px;
}

.header-login {
	font-size: var(--text-sm);
	font-weight: var(--weight-ui);
	white-space: nowrap;
}

.header-login:hover {
	color: var(--blue);
}

@media (max-width: 560px) {
	.header-bar {
		height: 56px;
	}

	.header-actions {
		gap: 14px;
	}

	.header-actions .btn-sm {
		height: 36px;
		padding-inline: 16px;
		font-size: 13px;
	}
}

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

.hero {
	position: relative;
	isolation: isolate;
	padding-top: clamp(48px, 7vw, 84px);
	padding-bottom: clamp(72px, 10vw, 140px);
	background: var(--hero-surface);
	text-align: center;
	overflow: hidden;
}

.hero::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	height: clamp(120px, 15vw, 200px);
	background: linear-gradient(180deg, transparent, var(--canvas));
	content: "";
	pointer-events: none;
}

.hero-art {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	z-index: 0;
	width: min(100%, 1536px);
	opacity: 0.36;
	pointer-events: none;
	transform: translateX(-50%);
}

.hero-art-fade {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	z-index: 1;
	width: min(100%, 1536px);
	background: linear-gradient(
		90deg,
		var(--hero-surface) 0%,
		transparent 18%,
		transparent 82%,
		var(--hero-surface) 100%
	);
	pointer-events: none;
	transform: translateX(-50%);
}

.hero-art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center bottom;
	filter: var(--hero-art-filter, none);
}

/* Twinkling lights over the globe artwork. Coordinates live in the artwork's
   own 1536x1024 space; the SVG uses the same cover/bottom fit as the image so
   they stay pinned to land at every viewport. */
.hero-lights {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	z-index: 0;
	width: min(100%, 1536px);
	height: 100%;
	pointer-events: none;
	transform: translateX(-50%);
}

.light {
	fill: #fff;
	filter: blur(1.5px);
	opacity: 0;
	transform: scale(0);
	transform-box: fill-box;
	transform-origin: center;
	animation: light-twinkle var(--dur) ease-in-out var(--delay) infinite;
}

@keyframes light-twinkle {
	0%,
	100% {
		opacity: 0;
		transform: scale(0);
	}

	50% {
		opacity: 0.95;
		transform: scale(1);
	}
}

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

.hero h1 {
	margin-top: 0;
	font-size: clamp(40px, 6.5vw, 76px);
	letter-spacing: 0;
}

/* The last line is mostly lowercase, so its x-height leaves a wider gap
   above it than the caps of the first line leave above the accent. Nudging
   the accent down evens the two gaps without touching the line box. */
.headline-accent {
	position: relative;
	top: 0.1em;
	display: inline-block;
	color: var(--blue);
	background: var(--blue-gradient);
	background-clip: text;
	font-size: 1.08em;
	font-weight: var(--weight-display);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.lede {
	max-width: 620px;
	margin: 24px auto 0;
	color: var(--muted);
	font-size: var(--text-lead);
	font-weight: var(--weight-body);
	line-height: 1.5;
}

.hero-cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 32px;
}

.social-proof {
	display: grid;
	justify-items: center;
	gap: 10px;
	margin-top: 30px;
}

.proof-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.proof-avatars {
	display: flex;
	padding-left: 7px;
}

.proof-avatar {
	width: 32px;
	height: 32px;
	margin-left: -7px;
	border: 2px solid var(--paper);
	border-radius: 50%;
	box-shadow: 0 3px 10px rgb(16 32 64 / 12%);
	object-fit: cover;
}

.proof-stars {
	display: flex;
	gap: 2px;
}

.proof-stars span {
	display: grid;
	place-items: center;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background: #fff;
}

.proof-stars svg {
	width: 17px;
	height: 17px;
	fill: #12b76a;
}

.proof-rating {
	color: var(--ink);
	font-size: var(--text-lead);
	font-weight: 600;
}

.proof-copy {
	color: var(--muted);
	font-size: var(--text-sm);
	font-weight: var(--weight-body);
}

@media (max-width: 560px) {
	.hero-art-fade {
		background: linear-gradient(
			90deg,
			rgb(251 251 250 / 33%) 0%,
			transparent 7%,
			transparent 93%,
			rgb(251 251 250 / 33%) 100%
		);
	}

	.social-proof {
		margin-top: 26px;
	}

	.proof-row {
		gap: 9px;
	}

	.proof-avatar {
		width: 28px;
		height: 28px;
	}

	.proof-copy {
		font-size: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.light {
		opacity: 0.35;
		transform: none;
		animation: none;
	}
}

/* ---- Closing band; the footer continues the same surface below ---- */

.band {
	position: relative;
	isolation: isolate;
	padding-block: var(--section-y) clamp(48px, 6vw, 80px);
	overflow: hidden;
	background: var(--ink);
	color: #fff;
	text-align: center;
}

/* Two slow-drifting blue glows behind the copy */
.band-glow,
.band-glow::after {
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	filter: blur(70px);
	pointer-events: none;
	content: "";
}

.band-glow {
	top: -160px;
	left: 50%;
	width: 760px;
	height: 440px;
	background: radial-gradient(closest-side, rgb(255 255 255 / 7%), transparent);
	transform: translateX(-50%);
	animation: glow-drift 14s ease-in-out infinite alternate;
}

.band-glow::after {
	top: 160px;
	left: 55%;
	width: 420px;
	height: 300px;
	background: radial-gradient(closest-side, rgb(255 255 255 / 4%), transparent);
	animation: glow-drift-2 18s ease-in-out infinite alternate;
}

@keyframes glow-drift {
	from { transform: translateX(-60%) translateY(0); }
	to { transform: translateX(-40%) translateY(40px); }
}

@keyframes glow-drift-2 {
	from { transform: translate(-40px, 0); }
	to { transform: translate(60px, -30px); }
}

.band .shell {
	position: relative;
}

.band h2 {
	color: #fff;
	font-size: clamp(30px, 4.6vw, 48px);
}

/* Lighter blue gradient so it reads on the dark surface */
.accent-light {
	display: inline-block;
	color: var(--blue-light);
	background: var(--blue-gradient-light);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.band > .shell > p {
	max-width: 560px;
	margin: 18px auto 0;
	color: rgb(255 255 255 / 70%);
	font-size: var(--text-lead);
	font-weight: var(--weight-body);
	line-height: 1.5;
}

.band .btn {
	margin-top: 32px;
}

@media (prefers-reduced-motion: reduce) {
	.band-glow,
	.band-glow::after {
		animation: none;
	}
}

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

.footer {
	padding-block: clamp(40px, 5vw, 56px) 32px;
	border-top: 1px solid rgb(255 255 255 / 12%);
	background: var(--ink);
	color: rgb(255 255 255 / 70%);
}

.footer-top {
	display: grid;
	grid-template-columns: 1.8fr 1fr 1fr;
	gap: 40px;
}

.footer-brand p {
	max-width: 320px;
	margin-top: 18px;
	color: rgb(255 255 255 / 70%);
	font-size: var(--text-sm);
	font-weight: var(--weight-body);
	line-height: 1.55;
}

.footer h3 {
	font-size: var(--text-sm);
	font-weight: var(--weight-ui);
	letter-spacing: 0;
	text-transform: uppercase;
	color: rgb(255 255 255 / 55%);
}

.footer ul {
	margin: 16px 0 0;
	padding: 0;
	display: grid;
	gap: 12px;
	list-style: none;
	color: #fff;
	font-size: var(--text-sm);
	font-weight: var(--weight-ui);
}

.footer ul a:hover {
	color: var(--green);
}

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: clamp(40px, 5vw, 56px);
	padding-top: 24px;
	border-top: 1px solid rgb(255 255 255 / 12%);
	color: rgb(255 255 255 / 55%);
	font-size: var(--text-sm);
	font-weight: var(--weight-body);
}

@media (max-width: 780px) {
	.footer-top {
		grid-template-columns: 1fr 1fr;
	}

	.footer-brand {
		grid-column: 1 / -1;
	}
}

/* ==========================================================================
   Legal pages: the title with the gradient accent on its last word, a
   sticky sidebar that switches between the three policies, and the article
   itself in a white card.
   ========================================================================== */

/* ---- Body: sidebar and card on the canvas surface ---- */

.legal-body {
	padding-block: clamp(40px, 6vw, 80px) var(--section-y);
	background: var(--canvas);
}

.legal h1 {
	font-size: clamp(32px, 4.4vw, 48px);
}

.legal-updated {
	margin-top: 14px;
	color: var(--muted);
	font-size: var(--text-sm);
	font-weight: var(--weight-body);
}

.legal-grid {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: clamp(32px, 4vw, 56px);
	align-items: start;
}

/* Sits level with the article card, under the title */
.legal-side {
	position: sticky;
	top: 96px;
	padding-top: 0;
}

.legal-side h3 {
	color: var(--muted);
	font-size: var(--text-sm);
	font-weight: var(--weight-ui);
	text-transform: uppercase;
}

.legal-side ul {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.policies ul {
	display: grid;
	gap: 6px;
}

.policies a {
	display: block;
	padding: 9px 12px;
	border-radius: var(--r-sm);
	color: var(--ink);
	font-size: var(--text-sm);
	font-weight: var(--weight-ui);
	transition: background 0.18s ease, color 0.18s ease;
}

.policies a:hover {
	background: rgb(255 255 255 / 80%);
}

.policies a[aria-current="page"] {
	background: var(--blue-soft);
	color: var(--blue);
}

/* ---- Article ---- */

.legal-card {
	margin-top: 28px;
	padding: clamp(28px, 4vw, 56px);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--paper);
	box-shadow: var(--shadow-sm);
	color: var(--ink);
	font-size: var(--text-lead);
	font-weight: var(--weight-body);
	line-height: 1.6;
}

.legal-card h2 {
	font-size: 24px;
	line-height: 1.2;
}

.legal-card h2:not(:first-child) {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--line);
}

.legal-card p {
	margin-top: 14px;
}

.legal-card ul {
	margin: 14px 0 0;
	padding-left: 22px;
}

.legal-card li {
	margin-top: 8px;
}

.legal-card li::marker {
	color: var(--blue);
}

.legal-card a {
	color: var(--blue);
	font-weight: var(--weight-ui);
}

.legal-card a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- Narrow: the policy switcher becomes a chip row ---- */

@media (max-width: 980px) {
	.legal-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.legal-side {
		position: static;
	}

	.legal-side h3 {
		display: none;
	}

	/* Bleeds to the screen edges so the row scrolls under the gutters
	   instead of being clipped by them */
	.policies ul {
		display: flex;
		gap: 8px;
		margin: 0 calc(var(--gutter) * -1);
		padding-inline: var(--gutter);
		overflow-x: auto;
		scrollbar-width: none;
	}

	.policies ul::-webkit-scrollbar {
		display: none;
	}

	.policies a {
		padding: 0 16px;
		line-height: 38px;
		border: 1px solid var(--line);
		border-radius: var(--r-pill);
		background: var(--paper);
		white-space: nowrap;
	}

	.policies a[aria-current="page"] {
		border-color: var(--blue-line);
	}
}

@media (max-width: 560px) {
	.legal h1 {
		font-size: clamp(30px, 8.5vw, 36px);
	}

	.legal-card {
		padding: 24px 20px;
		border-radius: var(--r-md);
	}

	.legal-card h2 {
		font-size: 22px;
	}

	.legal-card h2:not(:first-child) {
		margin-top: 32px;
		padding-top: 26px;
	}
}

/* ==========================================================================
   404: one quiet card on the warm canvas, a short line of copy and the two
   ways out.
   ========================================================================== */

.notfound {
	display: grid;
	align-items: center;
	min-height: calc(100svh - 72px);
	padding-block: clamp(40px, 6vw, 80px);
	background: var(--canvas);
}

.notfound-card {
	display: grid;
	justify-items: center;
	gap: 14px;
	width: min(100%, 560px);
	margin-inline: auto;
	padding: clamp(36px, 5vw, 56px) clamp(24px, 4vw, 48px);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--paper);
	box-shadow: var(--shadow-sm);
	text-align: center;
}

.notfound-code {
	padding: 6px 14px;
	border: 1px solid var(--blue-line);
	border-radius: var(--r-pill);
	background: var(--blue-soft);
	color: var(--blue);
	font-size: var(--text-sm);
	font-weight: var(--weight-ui);
	letter-spacing: 0.04em;
}

.notfound h1 {
	font-size: clamp(32px, 4.4vw, 44px);
}

.notfound p {
	max-width: 380px;
	color: var(--muted);
	font-size: var(--text-lead);
	font-weight: var(--weight-body);
	line-height: 1.5;
}

.notfound-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 12px;
}

@media (max-width: 560px) {
	.notfound-card {
		border-radius: var(--r-md);
	}

	.notfound-actions {
		width: 100%;
	}

	.notfound-actions .btn {
		flex: 1 1 100%;
	}
}

/* ---- Where users get hired ---- */

.hired {
	padding-bottom: 0;
}

.hired-card {
	position: relative;
	max-width: 760px;
	margin-inline: auto;
	padding: clamp(32px, 5vw, 56px) clamp(16px, 4vw, 48px) clamp(20px, 4vw, 40px);
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background:
		radial-gradient(ellipse 60% 40% at 50% 0%, rgb(var(--blue-rgb) / 9%), transparent 70%),
		radial-gradient(circle, rgb(16 32 64 / 7%) 1px, transparent 1.5px) 0 0 / 22px 22px,
		var(--paper);
}

.hired-card .section-head h2 {
	margin-top: 0;
}

.hired-logos {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(16px, 3vw, 28px);
	margin: clamp(28px, 4vw, 44px) 0 0;
	padding: clamp(20px, 4vw, 32px);
	list-style: none;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--paper);
	box-shadow: var(--shadow-md);
}

.hired-logos li {
	display: grid;
	place-items: center;
}

.hired-logos img {
	width: min(100%, 72px);
	height: auto;
	aspect-ratio: 1;
	border-radius: 14px;
}

@media (min-width: 720px) {
	.hired-logos {
		grid-template-columns: repeat(8, 1fr);
	}
}

/* ---- Trust and numbers ---- */

.trust-card {
	max-width: 760px;
	padding: clamp(32px, 5vw, 56px) clamp(16px, 4vw, 48px);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: linear-gradient(160deg, var(--canvas) 0%, var(--blue-soft) 100%);
}

.trust-card h2 {
	margin-top: 0;
}

.trust-stats {
	display: grid;
	gap: 28px;
	max-width: 760px;
	margin: 24px auto 0;
	padding: clamp(28px, 4vw, 44px) 24px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--paper);
	text-align: center;
}

.trust-stats div {
	display: flex;
	flex-direction: column-reverse;
	gap: 6px;
}

.trust-stats dd {
	margin: 0;
	color: #1f2933;
	font-size: clamp(36px, 5vw, 44px);
	font-weight: 600;
	line-height: 1.05;
}

.trust-stats dt {
	color: var(--muted);
	font-size: var(--text-sm);
}

@media (min-width: 720px) {
	.trust-stats {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* The card padding leaves less room than a full section: a smaller size
   keeps "Where Dayhunt users" and "Join the 850K+ people" on one line. */
.hired-card .section-head h2,
.trust-card h2 {
	font-size: clamp(26px, 6.8vw, 48px);
}

/* ---- Desktop: the two blocks become wide split panels ----
   Stacked centered cards read as a stretched phone layout on a wide
   screen, so the copy moves to the left and the logos or the numbers sit
   beside it. */
@media (min-width: 960px) {
	.hired-card {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		align-items: center;
		gap: 48px;
		max-width: none;
		padding: 56px;
		background:
			radial-gradient(ellipse 50% 60% at 0% 0%, rgb(var(--blue-rgb) / 9%), transparent 70%),
			radial-gradient(circle, rgb(16 32 64 / 7%) 1px, transparent 1.5px) 0 0 / 22px 22px,
			var(--paper);
	}

	.hired-card .section-head {
		margin: 0;
		text-align: left;
	}

	/* Sized to the column, so each line of the title stays whole. */
	.hired-card .section-head h2,
	.trust-card h2 {
		font-size: clamp(34px, 3.3vw, 44px);
	}

	.hired-logos {
		grid-template-columns: repeat(4, 1fr);
		margin: 0;
		gap: 24px;
		padding: 28px;
	}

	.trust .shell {
		display: grid;
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		align-items: center;
		gap: 48px;
		padding: 56px;
		border: 1px solid var(--line);
		border-radius: var(--r-lg);
		background: linear-gradient(120deg, var(--canvas) 0%, var(--blue-soft) 100%);
	}

	.trust-card {
		max-width: none;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		text-align: left;
	}

	.trust-stats {
		grid-template-columns: 1fr;
		gap: 0;
		max-width: none;
		margin: 0;
		padding: 8px 28px;
		box-shadow: var(--shadow-md);
		text-align: left;
	}

	.trust-stats div {
		flex-direction: row-reverse;
		justify-content: space-between;
		align-items: baseline;
		gap: 16px;
		padding: 18px 0;
	}

	.trust-stats div + div {
		border-top: 1px solid var(--line);
	}

	.trust-stats dd {
		font-size: 36px;
	}

	.trust-stats dt {
		font-size: var(--text-base);
		text-align: right;
	}
}