From a89a078da4b15ffb1a1d56c01e5d7fa3161ba149 Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@dailysh.it>
Date: Fri, 16 Jan 2026 15:26:10 +0100
Subject: [PATCH] fix: move device notice under section cards on landing page

---
 src/index.html | 9 +++------
 src/main.css   | 6 ------
 2 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/src/index.html b/src/index.html
index e5d7492..cf36049 100644
--- a/src/index.html
+++ b/src/index.html
@@ -169,6 +169,9 @@
 								<span class="section-card-progress" id="tailwind-progress"></span>
 							</a>
 						</div>
+						<p class="device-notice" data-i18n-html="deviceNotice">
+							<strong>Best on desktop or tablet (landscape).</strong> Mobile works, but larger screens make coding easier.
+						</p>
 					</section>
 
 					<section class="coming-soon">
@@ -214,12 +217,6 @@
 						</div>
 					</section>
 
-					<section class="device-notice">
-						<p data-i18n-html="deviceNotice">
-							<strong>Best on desktop or tablet (landscape).</strong> Mobile works, but larger screens make coding easier.
-						</p>
-					</section>
-
 					<section class="landing-cta">
 						<h2 data-i18n="landingCtaTitle">Start Learning Today</h2>
 						<a href="#welcome/0" class="cta-button" data-i18n="landingCtaButton">Let's get crispy!</a>
diff --git a/src/main.css b/src/main.css
index b4716ab..41e9bbc 100644
--- a/src/main.css
+++ b/src/main.css
@@ -2388,17 +2388,11 @@ input:checked + .toggle-slider::before {
 .device-notice {
 	margin-top: var(--spacing-lg);
 	text-align: center;
-	padding: 1rem;
-}
-
-.device-notice p {
-	display: inline-block;
 	padding: 0.75rem 1.5rem;
 	background: linear-gradient(135deg, rgba(145, 99, 184, 0.1), rgba(212, 90, 160, 0.1), rgba(26, 175, 184, 0.1));
 	border-radius: var(--border-radius-md);
 	color: var(--light-text);
 	font-size: 0.9rem;
-	margin: 0;
 }
 
 .device-notice strong {