/*
 * DermaPL — Landing (front page) styles.
 *
 * Public marketing page served by index.php to logged-out visitors.
 * Consumes design-tokens.css; every selector is scoped under `.dp-home`
 * so it can never leak into the clinic app surface.
 *
 * Positioning: DermaPL is a *clinic-operations / treatment-management*
 * platform — equipment, treatment programs, pricing research, events,
 * version history. The printable price list is one output, not the core.
 *
 * Abstract blue imagery lives in assets/home/ (hero-bg, hero-visual,
 * feature-accent, og-image) — generated, optimized JPGs.
 *
 * Style direction matches the SaaS: blue accent (--dp-blue-600),
 * cool-gray neutrals, translucent glass surfaces over the page gradient.
 */

.dp-home {
	font-family: var(--dp-font-sans);
	color: var(--dp-text-primary);
	background: var(--dp-bg-page);
	background-attachment: fixed;
	line-height: var(--dp-leading-normal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.dp-home *,
.dp-home *::before,
.dp-home *::after { box-sizing: border-box; }
.dp-home a { color: inherit; text-decoration: none; }
.dp-home p { margin: 0; }
.dp-home ul { margin: 0; padding: 0; list-style: none; }
.dp-home img { max-width: 100%; }
.dp-home h1, .dp-home h2, .dp-home h3 { margin: 0; font-weight: var(--dp-weight-bold); }

.dp-home__wrap {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 var(--dp-space-6);
}

/* Buttons — reuse .dp-btn / .dp-btn--primary from frontend.css, add a size. */
.dp-home .dp-btn--lg {
	height: var(--dp-control-h-lg);
	padding: 0 var(--dp-space-6);
	font-size: var(--dp-text-md);
	border-radius: var(--dp-radius-lg);
}

/* ================================================================
 * Sticky nav
 * ================================================================ */
.dp-home-nav {
	position: sticky;
	top: 0;
	z-index: var(--dp-z-sticky);
	background: rgba(255, 255, 255, 0.78);
	-webkit-backdrop-filter: blur(var(--dp-blur-md));
	backdrop-filter: blur(var(--dp-blur-md));
	border-bottom: 1px solid var(--dp-border-subtle);
}
.dp-home-nav__inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 var(--dp-space-6);
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.dp-home-nav__brand {
	display: flex;
	align-items: center;
	gap: var(--dp-space-2);
	font-size: var(--dp-text-xl);
	font-weight: var(--dp-weight-bold);
	letter-spacing: var(--dp-tracking-tight);
}
.dp-home-nav__mark {
	width: 26px;
	height: 26px;
	border-radius: var(--dp-radius-md);
	background: linear-gradient(135deg, var(--dp-blue-500), var(--dp-blue-700));
	box-shadow: var(--dp-shadow-sm);
	flex: none;
}
.dp-home-nav__actions {
	display: flex;
	align-items: center;
	gap: var(--dp-space-3);
}
.dp-home-nav__login {
	font-size: var(--dp-text-base);
	font-weight: var(--dp-weight-medium);
	color: var(--dp-text-secondary);
}
.dp-home-nav__login:hover { color: var(--dp-text-primary); }

/* ================================================================
 * Hero
 * ================================================================ */
.dp-home-hero {
	position: relative;
	overflow: hidden;
	padding: var(--dp-space-20) 0 var(--dp-space-16);
}
/* Abstract gradient image, faded + masked so headline text stays readable. */
.dp-home-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.55;
	z-index: 0;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 50%, transparent 100%);
}
.dp-home-hero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: var(--dp-space-16);
	align-items: center;
}
.dp-home-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--dp-space-2);
	padding: 5px var(--dp-space-3);
	background: var(--dp-color-primary-soft);
	color: var(--dp-color-primary);
	border-radius: var(--dp-radius-full);
	font-size: var(--dp-text-xs);
	font-weight: var(--dp-weight-semibold);
	letter-spacing: var(--dp-tracking-wide);
}
.dp-home-hero__title {
	margin: var(--dp-space-5) 0 var(--dp-space-4);
	font-size: 2.85rem;
	line-height: 1.18;
	letter-spacing: var(--dp-tracking-tight);
}
.dp-home-hero__title .dp-accent {
	background: linear-gradient(120deg, var(--dp-blue-600), var(--dp-blue-400));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.dp-home-hero__sub {
	font-size: var(--dp-text-xl);
	color: var(--dp-text-secondary);
	line-height: var(--dp-leading-relaxed);
	max-width: 32em;
}
.dp-home-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dp-space-3);
	margin-top: var(--dp-space-7);
}
.dp-home-hero__note {
	margin-top: var(--dp-space-3);
	font-size: var(--dp-text-sm);
	color: var(--dp-text-muted);
}
/* Hero illustration — abstract "scattered → unified" image. */
.dp-home-hero__illu {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--dp-radius-2xl);
	box-shadow: var(--dp-shadow-lg);
}

/* ================================================================
 * Stats strip
 * ================================================================ */
.dp-home-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--dp-space-4);
	margin: var(--dp-space-4) 0 var(--dp-space-20);
}
.dp-home-stat {
	background: var(--dp-surface-raised);
	-webkit-backdrop-filter: blur(var(--dp-blur-sm));
	backdrop-filter: blur(var(--dp-blur-sm));
	border: 1px solid var(--dp-border-subtle);
	border-radius: var(--dp-radius-xl);
	padding: var(--dp-space-5) var(--dp-space-6);
	box-shadow: var(--dp-shadow-glass);
}
.dp-home-stat__num {
	font-size: var(--dp-text-3xl);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-blue-700);
	letter-spacing: var(--dp-tracking-tight);
}
.dp-home-stat__label {
	margin-top: 2px;
	font-size: var(--dp-text-sm);
	color: var(--dp-text-secondary);
}

/* ================================================================
 * Generic section
 * ================================================================ */
.dp-home-section { padding: var(--dp-space-20) 0; }
/* Section with a faint abstract background accent behind it. */
.dp-home-section--accent { position: relative; overflow: hidden; }
.dp-home-section__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.4;
	z-index: 0;
	pointer-events: none;
}
.dp-home-section--accent .dp-home__wrap { position: relative; z-index: 1; }
.dp-home-section__head {
	text-align: center;
	max-width: 40em;
	margin: 0 auto var(--dp-space-12);
}
.dp-home-section__kicker {
	font-size: var(--dp-text-sm);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-color-primary);
	letter-spacing: var(--dp-tracking-wide);
}
.dp-home-section__title {
	margin-top: var(--dp-space-2);
	font-size: var(--dp-text-4xl);
	letter-spacing: var(--dp-tracking-tight);
	line-height: 1.25;
}
.dp-home-section__lead {
	margin-top: var(--dp-space-3);
	font-size: var(--dp-text-lg);
	color: var(--dp-text-secondary);
	line-height: var(--dp-leading-relaxed);
}

/* ================================================================
 * Problem section — name the pain before offering the solution
 * ================================================================ */
.dp-pain-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--dp-space-5);
}
.dp-pain {
	background: var(--dp-surface-raised);
	-webkit-backdrop-filter: blur(var(--dp-blur-sm));
	backdrop-filter: blur(var(--dp-blur-sm));
	border: 1px solid var(--dp-border-subtle);
	border-radius: var(--dp-radius-xl);
	padding: var(--dp-space-6);
	box-shadow: var(--dp-shadow-glass);
}
.dp-pain__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--dp-radius-lg);
	background: rgba(239, 68, 68, 0.10);
	color: var(--dp-danger-500);
	font-size: var(--dp-text-lg);
	font-weight: var(--dp-weight-bold);
	margin-bottom: var(--dp-space-4);
}
.dp-pain__title {
	font-size: var(--dp-text-lg);
	margin-bottom: var(--dp-space-2);
}
.dp-pain__desc {
	font-size: var(--dp-text-base);
	color: var(--dp-text-secondary);
	line-height: var(--dp-leading-relaxed);
}

/* ================================================================
 * Operations cycle — the core narrative of how a clinic runs
 * ================================================================ */
.dp-cycle__track {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--dp-space-5);
}
.dp-cycle__step {
	position: relative;
	background: var(--dp-surface-raised);
	-webkit-backdrop-filter: blur(var(--dp-blur-sm));
	backdrop-filter: blur(var(--dp-blur-sm));
	border: 1px solid var(--dp-border-subtle);
	border-radius: var(--dp-radius-xl);
	padding: var(--dp-space-6);
	box-shadow: var(--dp-shadow-glass);
}
.dp-cycle__step:not(:last-child)::after {
	content: "→";
	position: absolute;
	top: 50%;
	right: calc(var(--dp-space-5) / -2);
	transform: translate(50%, -50%);
	color: var(--dp-blue-400);
	font-size: 1.15rem;
	font-weight: var(--dp-weight-bold);
}
.dp-cycle__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--dp-radius-full);
	background: var(--dp-color-primary);
	color: var(--dp-text-on-primary);
	font-weight: var(--dp-weight-bold);
	font-size: var(--dp-text-base);
	margin-bottom: var(--dp-space-3);
}
.dp-cycle__title {
	font-size: var(--dp-text-lg);
	margin-bottom: var(--dp-space-1);
}
.dp-cycle__desc {
	font-size: var(--dp-text-sm);
	color: var(--dp-text-secondary);
	line-height: var(--dp-leading-relaxed);
}
.dp-cycle__loop {
	margin-top: var(--dp-space-6);
	text-align: center;
	font-size: var(--dp-text-sm);
	font-weight: var(--dp-weight-semibold);
	color: var(--dp-color-primary);
}

/* ================================================================
 * Feature grid — management tools
 * ================================================================ */
.dp-home-features {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--dp-space-5);
}
.dp-feature {
	background: var(--dp-surface-raised);
	-webkit-backdrop-filter: blur(var(--dp-blur-sm));
	backdrop-filter: blur(var(--dp-blur-sm));
	border: 1px solid var(--dp-border-subtle);
	border-radius: var(--dp-radius-xl);
	padding: var(--dp-space-6);
	box-shadow: var(--dp-shadow-glass);
	transition: transform var(--dp-duration-base) var(--dp-ease-out),
		box-shadow var(--dp-duration-base) var(--dp-ease-out);
}
.dp-feature:hover {
	transform: translateY(-3px);
	box-shadow: var(--dp-shadow-lg);
}
.dp-feature__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--dp-radius-lg);
	background: var(--dp-color-primary-soft);
	color: var(--dp-blue-700);
	margin-bottom: var(--dp-space-4);
}
.dp-feature__icon svg { width: 22px; height: 22px; }
.dp-feature__title {
	font-size: var(--dp-text-xl);
	margin-bottom: var(--dp-space-2);
}
.dp-feature__desc {
	font-size: var(--dp-text-base);
	color: var(--dp-text-secondary);
	line-height: var(--dp-leading-relaxed);
}

/* ================================================================
 * AI section — planning support, given a distinct dark band
 * ================================================================ */
.dp-home-ai {
	background:
		radial-gradient(900px 380px at 80% -10%, rgba(59, 130, 246, 0.16), transparent 70%),
		linear-gradient(180deg, #0f1f3d 0%, #16294d 100%);
	color: var(--dp-neutral-50);
	border-radius: var(--dp-radius-3xl);
	margin: var(--dp-space-12) 0;
	padding: var(--dp-space-16) 0;
}
.dp-home-ai .dp-home-section__title { color: var(--dp-neutral-0); }
.dp-home-ai .dp-home-section__kicker { color: var(--dp-blue-300); }
.dp-home-ai .dp-home-section__lead { color: var(--dp-blue-100); }
.dp-home-ai__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--dp-space-5);
}
.dp-ai-card {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--dp-radius-2xl);
	padding: var(--dp-space-7);
}
.dp-ai-card__badge {
	display: inline-block;
	padding: 4px var(--dp-space-3);
	border-radius: var(--dp-radius-full);
	background: rgba(96, 165, 250, 0.18);
	color: var(--dp-blue-200);
	font-size: var(--dp-text-xs);
	font-weight: var(--dp-weight-semibold);
	letter-spacing: var(--dp-tracking-wide);
	margin-bottom: var(--dp-space-4);
}
.dp-ai-card__title {
	font-size: var(--dp-text-2xl);
	margin-bottom: var(--dp-space-3);
}
.dp-ai-card__desc {
	font-size: var(--dp-text-base);
	color: var(--dp-blue-100);
	line-height: var(--dp-leading-relaxed);
}

/* ================================================================
 * Output section — the price list as a *result* of management
 * ================================================================ */
.dp-home-output { padding: var(--dp-space-20) 0; }
.dp-output__grid {
	display: grid;
	grid-template-columns: 0.95fr 1.05fr;
	gap: var(--dp-space-16);
	align-items: center;
}
.dp-output__title {
	margin: var(--dp-space-2) 0 var(--dp-space-3);
	font-size: var(--dp-text-4xl);
	letter-spacing: var(--dp-tracking-tight);
	line-height: 1.25;
}
.dp-output__lead {
	font-size: var(--dp-text-lg);
	color: var(--dp-text-secondary);
	line-height: var(--dp-leading-relaxed);
	margin-bottom: var(--dp-space-5);
}
.dp-output__list li {
	display: flex;
	align-items: flex-start;
	gap: var(--dp-space-2);
	padding: var(--dp-space-2) 0;
	font-size: var(--dp-text-base);
	color: var(--dp-text-secondary);
}
.dp-output__list li::before {
	content: "✓";
	color: var(--dp-success-500);
	font-weight: var(--dp-weight-bold);
	flex: none;
}

/* ----- Output visual: glass mock of a printed price list ----- */
.dp-mock {
	background: var(--dp-surface-elevated);
	-webkit-backdrop-filter: blur(var(--dp-blur-lg));
	backdrop-filter: blur(var(--dp-blur-lg));
	border: 1px solid var(--dp-border-subtle);
	border-radius: var(--dp-radius-2xl);
	box-shadow: var(--dp-shadow-xl);
	overflow: hidden;
	transform: rotate(-1.4deg);
	transition: transform var(--dp-duration-slow) var(--dp-ease-out);
}
.dp-mock:hover { transform: rotate(0deg); }
.dp-mock__bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: var(--dp-space-3) var(--dp-space-4);
	background: rgba(255, 255, 255, 0.55);
	border-bottom: 1px solid var(--dp-border-subtle);
}
.dp-mock__dot {
	width: 10px;
	height: 10px;
	border-radius: var(--dp-radius-full);
	background: var(--dp-neutral-300);
}
.dp-mock__tag {
	margin-left: auto;
	font-size: var(--dp-text-2xs);
	font-weight: var(--dp-weight-semibold);
	color: var(--dp-text-muted);
	letter-spacing: var(--dp-tracking-wide);
}
.dp-mock__body { padding: var(--dp-space-5) var(--dp-space-6) var(--dp-space-6); }
.dp-mock__title { font-size: var(--dp-text-lg); font-weight: var(--dp-weight-bold); }
.dp-mock__cat {
	margin: var(--dp-space-4) 0 var(--dp-space-2);
	padding-bottom: var(--dp-space-1);
	border-bottom: 2px solid var(--dp-blue-600);
	font-size: var(--dp-text-sm);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-blue-700);
}
.dp-mock__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--dp-space-3);
	padding: var(--dp-space-2) 0;
	border-bottom: 1px dashed var(--dp-border-subtle);
	font-size: var(--dp-text-sm);
}
.dp-mock__row:last-child { border-bottom: 0; }
.dp-mock__name { color: var(--dp-text-primary); font-weight: var(--dp-weight-medium); }
.dp-mock__price { white-space: nowrap; font-weight: var(--dp-weight-semibold); }
.dp-mock__old {
	margin-right: 6px;
	color: var(--dp-text-disabled);
	text-decoration: line-through;
	font-weight: var(--dp-weight-regular);
}
.dp-mock__sale { color: var(--dp-danger-500); }

/* ================================================================
 * Persona section — speak directly to who feels this
 * ================================================================ */
.dp-persona-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--dp-space-5);
}
.dp-persona {
	background: var(--dp-surface-raised);
	-webkit-backdrop-filter: blur(var(--dp-blur-sm));
	backdrop-filter: blur(var(--dp-blur-sm));
	border: 1px solid var(--dp-border-subtle);
	border-radius: var(--dp-radius-xl);
	padding: var(--dp-space-7);
	box-shadow: var(--dp-shadow-glass);
}
.dp-persona__badge {
	display: inline-block;
	padding: 4px var(--dp-space-3);
	border-radius: var(--dp-radius-full);
	background: var(--dp-color-primary-soft);
	color: var(--dp-blue-700);
	font-size: var(--dp-text-xs);
	font-weight: var(--dp-weight-semibold);
	letter-spacing: var(--dp-tracking-wide);
	margin-bottom: var(--dp-space-4);
}
.dp-persona__title {
	font-size: var(--dp-text-2xl);
	margin-bottom: var(--dp-space-2);
}
.dp-persona__desc {
	font-size: var(--dp-text-base);
	color: var(--dp-text-secondary);
	line-height: var(--dp-leading-relaxed);
}

/* ================================================================
 * Pricing
 * ================================================================ */
.dp-home-pricing__card {
	max-width: 420px;
	margin: 0 auto;
	background: var(--dp-surface-elevated);
	-webkit-backdrop-filter: blur(var(--dp-blur-md));
	backdrop-filter: blur(var(--dp-blur-md));
	border: 1px solid var(--dp-border-default);
	border-radius: var(--dp-radius-2xl);
	box-shadow: var(--dp-shadow-xl);
	padding: var(--dp-space-8);
	text-align: center;
}
.dp-home-pricing__name {
	font-size: var(--dp-text-sm);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-muted);
	text-transform: uppercase;
	letter-spacing: 2px;
}
.dp-home-pricing__price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 6px;
	margin: var(--dp-space-2) 0;
}
.dp-home-pricing__price strong {
	font-size: 2.6rem;
	letter-spacing: var(--dp-tracking-tight);
}
.dp-home-pricing__price span { color: var(--dp-text-muted); }
.dp-home-pricing__trial {
	display: inline-block;
	margin-bottom: var(--dp-space-5);
	padding: 4px var(--dp-space-3);
	background: var(--dp-color-primary-soft);
	color: var(--dp-color-primary);
	border-radius: var(--dp-radius-full);
	font-size: var(--dp-text-sm);
	font-weight: var(--dp-weight-semibold);
}
.dp-home-pricing__features {
	margin: 0 0 var(--dp-space-6);
	padding: var(--dp-space-5) 0 0;
	border-top: 1px solid var(--dp-border-subtle);
	text-align: left;
}
.dp-home-pricing__features li {
	display: flex;
	align-items: flex-start;
	gap: var(--dp-space-2);
	padding: var(--dp-space-2) 0;
	font-size: var(--dp-text-base);
	color: var(--dp-text-secondary);
}
.dp-home-pricing__features li::before {
	content: "✓";
	color: var(--dp-success-500);
	font-weight: var(--dp-weight-bold);
	flex: none;
}
.dp-home-pricing__card .dp-btn { width: 100%; }

/* ================================================================
 * Final CTA band
 * ================================================================ */
.dp-home-final {
	text-align: center;
	background:
		radial-gradient(700px 300px at 50% 0%, rgba(255, 255, 255, 0.16), transparent 70%),
		linear-gradient(135deg, var(--dp-blue-600), var(--dp-blue-800));
	color: var(--dp-neutral-0);
	border-radius: var(--dp-radius-3xl);
	margin: var(--dp-space-12) 0 var(--dp-space-20);
	padding: var(--dp-space-16) var(--dp-space-6);
}
.dp-home-final__title {
	font-size: var(--dp-text-4xl);
	letter-spacing: var(--dp-tracking-tight);
}
.dp-home-final__sub {
	margin: var(--dp-space-3) auto var(--dp-space-7);
	max-width: 32em;
	font-size: var(--dp-text-lg);
	color: var(--dp-blue-100);
}
.dp-home-final .dp-btn--primary {
	background: var(--dp-neutral-0);
	color: var(--dp-blue-700);
	border-color: var(--dp-neutral-0);
}
.dp-home-final .dp-btn--primary:hover {
	background: var(--dp-blue-50);
	color: var(--dp-blue-800);
}

/* ================================================================
 * Footer
 * ================================================================ */
.dp-home-foot {
	border-top: 1px solid var(--dp-border-subtle);
	padding: var(--dp-space-8) 0;
}
.dp-home-foot__inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 var(--dp-space-6);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dp-space-4);
	flex-wrap: wrap;
	font-size: var(--dp-text-sm);
	color: var(--dp-text-muted);
}
.dp-home-foot__links { display: flex; gap: var(--dp-space-5); }
.dp-home-foot__links a:hover { color: var(--dp-text-primary); }

/* ================================================================
 * Responsive
 * ================================================================ */
@media (max-width: 980px) {
	.dp-home-hero__grid,
	.dp-output__grid { grid-template-columns: 1fr; gap: var(--dp-space-10); }
	.dp-home-hero__title,
	.dp-output__title { font-size: 2.3rem; }
	.dp-home-features { grid-template-columns: repeat(2, 1fr); }
	.dp-pain-grid { grid-template-columns: repeat(2, 1fr); }
	.dp-home-ai__grid,
	.dp-persona-grid { grid-template-columns: 1fr; }
	.dp-cycle__track { grid-template-columns: repeat(2, 1fr); }
	.dp-cycle__step:not(:last-child)::after { display: none; }
	.dp-mock { transform: rotate(0deg); }
}
@media (max-width: 640px) {
	.dp-home-hero { padding: var(--dp-space-12) 0; }
	.dp-home-hero__title,
	.dp-output__title { font-size: 1.95rem; }
	.dp-home-hero__sub { font-size: var(--dp-text-lg); }
	.dp-home-stats { grid-template-columns: 1fr; }
	.dp-home-features,
	.dp-pain-grid { grid-template-columns: 1fr; }
	.dp-cycle__track { grid-template-columns: 1fr; }
	.dp-home-section,
	.dp-home-output { padding: var(--dp-space-12) 0; }
	.dp-home-section__title,
	.dp-home-final__title { font-size: var(--dp-text-3xl); }
	.dp-home-nav__login { display: none; }
	.dp-home-hero__cta .dp-btn { width: 100%; }
}