/*
 * Deliver Ease UK — core theme styles.
 * Palette/type/hero/grid decisions per PLAN_DESIGN_SYSTEM.md. Ported from the concept preview
 * (concept-board.html) into real theme classes (deu- prefix, to avoid collisions with Astra's
 * and WooCommerce's own class names).
 */

:root {
	--deu-indigo: #241b4e;
	--deu-indigo-2: #34285f;
	--deu-indigo-3: #1a1440;
	--deu-coral: #ff5f4d;
	--deu-coral-deep: #e64a3a;
	--deu-gold: #ffb84d;
	--deu-mist: #f5f2fa;
	--deu-mist-2: #ece6f5;
	--deu-paper: #ffffff;
	--deu-ink: #241f2e;
	--deu-ink-soft: #6b6478;
	--deu-line: #e2dcee;
}

body {
	color: var(--deu-ink);
	font-family: "Mulish", "Segoe UI", Arial, sans-serif;
	background: var(--deu-mist);
}
h1, h2, h3, h4 {
	font-family: "Sora", "Segoe UI", Arial, sans-serif;
	text-wrap: balance;
}

.deu-wrap { max-width: 1180px; margin-inline: auto; padding-inline: 20px; }

.deu-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-family: "Sora", sans-serif; font-weight: 700; font-size: 14px;
	padding: 12px 22px; border-radius: 999px; border: none; cursor: pointer;
	transition: transform .15s ease, filter .15s ease; text-decoration: none;
}
.deu-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.deu-btn-coral { background: var(--deu-coral); color: #fff; box-shadow: 0 10px 22px rgba(255,95,77,.35); }
.deu-btn-ghost-light { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.28); }

/* ---------- header ---------- */
.deu-header { position: sticky; top: 0; z-index: 40; background: var(--deu-indigo); border-bottom: 1px solid rgba(255,255,255,.08); }
.deu-nav-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 14px; }
.deu-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none; }
.deu-brand-word { font-weight: 700; font-size: 18px; color: #fff; letter-spacing: -.01em; font-family: "Sora", sans-serif; }
.deu-brand-word span { color: var(--deu-coral); }

.deu-main-links { display: flex; align-items: center; }
.deu-main-links ul { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.deu-main-links a {
	font-size: 14.5px; font-weight: 600; color: #cfc9de; padding-block: 4px; border-bottom: 2px solid transparent;
	text-decoration: none;
}
.deu-main-links a:hover, .deu-main-links .current-menu-item > a { color: #fff; border-color: var(--deu-coral); }

.deu-nav-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.deu-nav-login { font-size: 14px; font-weight: 600; color: #cfc9de; text-decoration: none; }
.deu-nav-login:hover { color: #fff; }

.deu-menu-toggle {
	display: none; width: 40px; height: 40px; align-items: center; justify-content: center;
	border: 1px solid rgba(255,255,255,.28); border-radius: 8px; background: rgba(255,255,255,.06);
	color: #fff; font-size: 18px; cursor: pointer; flex-shrink: 0;
}
@media (max-width: 900px) {
	.deu-main-links { display: none; }
	.deu-menu-toggle { display: inline-flex; }
	.deu-main-links.is-open {
		display: block; position: absolute; top: 100%; left: 0; right: 0;
		background: var(--deu-indigo); border-bottom: 1px solid rgba(255,255,255,.1);
		box-shadow: 0 16px 30px rgba(20,14,45,.3); padding: 8px 0;
	}
	.deu-main-links.is-open ul { flex-direction: column; align-items: stretch; gap: 0; }
	.deu-main-links.is-open a { padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,.08); }
	.deu-nav-row { position: relative; flex-wrap: wrap; }
}

/* ---------- hero ---------- */
.deu-hero { background: var(--deu-indigo); overflow: hidden; }
.deu-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 48px; padding-block: 68px 84px; }
.deu-hero-copy { display: flex; flex-direction: column; gap: 20px; }
.deu-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--deu-gold); }
.deu-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--deu-coral); border-radius: 2px; }
.deu-hero-copy h1 { font-size: clamp(32px, 4vw, 48px); line-height: 1.08; color: #fff; margin: 0; }
.deu-hero-copy p.sub { color: #c7c1da; font-size: 17px; max-width: 46ch; line-height: 1.6; margin: 0; }
.deu-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.deu-trust-strip { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; }
.deu-trust-strip span { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #b6b0cb; font-weight: 600; }
.deu-trust-strip svg { width: 15px; height: 15px; color: var(--deu-gold); flex-shrink: 0; }

.deu-hero-visual { position: relative; aspect-ratio: 4/3; border-radius: 20px; overflow: hidden; isolation: isolate; }
.deu-hero-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.deu-hero-visual .deu-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(26,20,64,.55), rgba(26,20,64,0) 55%); }
.deu-hero-route { position: absolute; inset: 0; width: 100%; height: 100%; }
.deu-hero-badge {
	position: absolute; left: 22px; bottom: 22px; background: #fff; color: var(--deu-indigo);
	border-radius: 14px; padding: 12px 16px; box-shadow: 0 16px 32px rgba(20,14,45,.35);
	font-family: "Sora", sans-serif; font-weight: 700; font-size: 13px; display: flex; gap: 10px; align-items: center;
}
.deu-hero-badge .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--deu-coral); }
@media (max-width: 900px) { .deu-hero-grid { grid-template-columns: 1fr; padding-block: 44px 52px; } .deu-hero-visual { aspect-ratio: 16/10; } }

/* ---------- platform strip ---------- */
.deu-platform-strip { background: var(--deu-mist-2); padding-block: 26px; border-bottom: 1px solid var(--deu-line); }
.deu-platform-strip .deu-wrap { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; justify-content: center; }
.deu-platform-strip .deu-label { font-size: 12.5px; font-weight: 700; color: var(--deu-ink-soft); text-transform: uppercase; letter-spacing: .08em; }
.deu-platform-strip .deu-chips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.deu-chip {
	font-family: "Sora", sans-serif; font-weight: 600; font-size: 13.5px; color: var(--deu-indigo);
	background: var(--deu-paper); border: 1px solid var(--deu-line); padding: 8px 16px; border-radius: 999px;
}

/* ---------- section head ---------- */
.deu-section { padding-block: 76px; }
.deu-section-head { display: flex; flex-direction: column; gap: 12px; max-width: 60ch; margin-bottom: 40px; }
.deu-section-head h2 { font-size: clamp(24px, 3vw, 32px); color: var(--deu-indigo); margin: 0; }
.deu-section-head p { margin: 0; color: var(--deu-ink-soft); font-size: 15.5px; }

/* ---------- why cards ---------- */
.deu-why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.deu-why-card { background: var(--deu-paper); border: 1px solid var(--deu-line); border-radius: 16px; padding: 26px 22px; display: flex; flex-direction: column; gap: 12px; }
.deu-why-card .deu-icon { width: 42px; height: 42px; border-radius: 12px; background: var(--deu-mist-2); display: flex; align-items: center; justify-content: center; color: var(--deu-coral); }
.deu-why-card h3 { font-size: 16.5px; color: var(--deu-indigo); margin: 0; }
.deu-why-card p { margin: 0; font-size: 14px; color: var(--deu-ink-soft); line-height: 1.55; }
@media (max-width: 900px) { .deu-why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .deu-why-grid { grid-template-columns: 1fr; } }

/* ---------- getting started teaser ---------- */
.deu-gs-section { background: var(--deu-indigo); color: #fff; }
.deu-gs-section .deu-section-head h2, .deu-gs-section .deu-section-head p { color: #fff; }
.deu-gs-section .deu-section-head p { color: #c7c1da; }
.deu-gs-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.deu-gs-step { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 26px; }
.deu-gs-step .deu-num {
	font-family: "Sora", sans-serif; font-weight: 700; font-size: 13px; color: var(--deu-indigo);
	background: var(--deu-gold); width: 30px; height: 30px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.deu-gs-step h3 { font-size: 16.5px; margin: 0 0 8px; }
.deu-gs-step p { margin: 0; font-size: 14px; color: #c7c1da; line-height: 1.55; }
.deu-gs-cta { margin-top: 32px; display: flex; justify-content: center; }
@media (max-width: 900px) { .deu-gs-steps { grid-template-columns: 1fr; } }

/* ---------- guides ---------- */
.deu-guide-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.deu-guide-card { background: var(--deu-paper); border: 1px solid var(--deu-line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; }
.deu-guide-card .deu-cover {
	height: 108px; display: flex; align-items: flex-end; padding: 12px 14px; position: relative;
	background-size: cover; background-position: center;
}
.deu-guide-card .deu-cover::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,15,45,.55), rgba(20,15,45,0) 60%); }
.deu-guide-card .deu-tag {
	position: relative; z-index: 1; font-family: "Sora", sans-serif; font-weight: 700; font-size: 11px; color: #fff;
	background: rgba(0,0,0,.28); padding: 5px 10px; border-radius: 999px;
}
.deu-guide-card .deu-body { padding: 16px 16px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.deu-guide-card h3 { font-size: 15px; line-height: 1.35; color: var(--deu-indigo); margin: 0; }
.deu-guide-card .deu-read-more { margin-top: auto; font-size: 13px; font-weight: 700; color: var(--deu-coral-deep); }
@media (max-width: 900px) { .deu-guide-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .deu-guide-grid { grid-template-columns: 1fr; } }

/* ---------- freebie capture ---------- */
.deu-freebie-section { background: var(--deu-mist-2); }
.deu-freebie-card { background: var(--deu-paper); border-radius: 22px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; box-shadow: 0 24px 60px rgba(36,27,78,.1); }
.deu-freebie-copy { padding: 42px; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.deu-freebie-copy h2 { font-size: clamp(22px, 3vw, 28px); color: var(--deu-indigo); margin: 0; }
.deu-freebie-copy p { margin: 0; color: var(--deu-ink-soft); font-size: 15px; line-height: 1.6; }
.deu-freebie-checklist { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.deu-freebie-checklist span { display: flex; gap: 8px; align-items: center; font-size: 13.5px; font-weight: 600; color: var(--deu-ink); }
.deu-freebie-checklist svg { width: 16px; height: 16px; color: var(--deu-gold); flex-shrink: 0; }
.deu-freebie-form { background: var(--deu-indigo); padding: 42px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.deu-freebie-form .deu-fine { font-size: 12px; color: #9b93b8; margin: 0; }
@media (max-width: 900px) { .deu-freebie-card { grid-template-columns: 1fr; } }

/* ---------- shop teaser ---------- */
.deu-shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.deu-shop-card { background: var(--deu-paper); border: 1px solid var(--deu-line); border-radius: 16px; overflow: hidden; }
.deu-shop-card .deu-cover { height: 150px; background: var(--deu-mist-2); position: relative; background-size: cover; background-position: center; }
.deu-shop-card .deu-badge { position: absolute; top: 12px; left: 12px; font-family: "Sora", sans-serif; font-weight: 700; font-size: 10.5px; padding: 5px 10px; border-radius: 999px; color: #fff; }
.deu-badge-affiliate { background: var(--deu-indigo); }
.deu-badge-own { background: var(--deu-coral-deep); }
.deu-shop-card .deu-body { padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.deu-shop-card h3 { font-size: 15px; color: var(--deu-indigo); margin: 0; }
.deu-shop-card .deu-price { font-family: "Sora", sans-serif; font-weight: 700; color: var(--deu-coral-deep); font-size: 15px; }
@media (max-width: 900px) { .deu-shop-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .deu-shop-grid { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.deu-footer { background: var(--deu-indigo-3); color: #cfc9de; padding-block: 56px 28px; }
.deu-footer-grid { display: grid; grid-template-columns: 1.3fr .8fr .8fr .8fr; gap: 40px; }
.deu-footer-brand p { font-size: 13.5px; color: #9b93b8; line-height: 1.6; max-width: 34ch; margin: 12px 0 0; }
.deu-footer-col h4 { font-size: 13px; color: #fff; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 14px; }
.deu-footer-col ul { list-style: none; margin: 0; padding: 0; }
.deu-footer-col a { display: block; font-size: 13.5px; color: #b6b0cb; padding-block: 5px; text-decoration: none; }
.deu-footer-col a:hover { color: #fff; }
.deu-footer-bottom {
	display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
	margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1);
	font-size: 12.5px; color: #837bab;
}
@media (max-width: 900px) { .deu-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .deu-footer-grid { grid-template-columns: 1fr; } }