From 5be6eae0834ace107dd65ba39f6acf6f117b9852 Mon Sep 17 00:00:00 2001
From: Matt Batchelder <matt@buzzbee.dev>
Date: Sat, 21 Feb 2026 17:36:46 -0500
Subject: [PATCH] Sync: add devices split card section and styles for improved
 presentation of player options

---
 pages/devices.php         | 17 ++++++++++++++++-
 theme/assets/css/main.css | 38 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 54 insertions(+), 1 deletion(-)

diff --git a/pages/devices.php b/pages/devices.php
index bbc3606..ec334ec 100644
--- a/pages/devices.php
+++ b/pages/devices.php
@@ -25,5 +25,20 @@ return <<<'ORIBI_SYNC_CONTENT'
 
 <!-- wp:oribi/intro-section {"variant":"normal","label":"Bundles Available","heading":"Player + Display Packages","description":"Donu0027t have screens yet? We offer turnkey bundles pairing our player device with a commercial-grade display rated for 24/7 operation — brighter, tougher, and longer-lasting than consumer TVs. Available from 32" to 75". Contact us for volume pricing and custom configurations.","visual":""} /-->
 
-<!-- wp:oribi/cta-banner {"heading":"Not Sure What You Need?","text":"Tell us about your space and we'll recommend the right player, display, and mounting solution for your environment.","btnText":"Request a Quote","btnUrl":"/contact"} /-->
+<!-- wp:html -->
+<section class="section">
+	<div class="container">
+		<div class="devices-split-card">
+			<div class="devices-split-card__panel">
+				<h3>Pre-Configured OTS Players</h3>
+				<p>Every player device ordered through OTS arrives pre-configured and already paired with your Command Center. Plug in power and HDMI, connect to your network, and your screens are ready to publish.</p>
+			</div>
+			<div class="devices-split-card__panel devices-split-card__panel--brand">
+				<h3>Bring Your Own Player (BYO)</h3>
+				<p>Already have compatible media players? We can onboard BYO hardware and connect it to your Command Center. Our team will confirm compatibility requirements and provide setup guidance before rollout.</p>
+			</div>
+		</div>
+	</div>
+</section>
+<!-- /wp:html -->
 ORIBI_SYNC_CONTENT;
diff --git a/theme/assets/css/main.css b/theme/assets/css/main.css
index bf35c9d..9fbf684 100644
--- a/theme/assets/css/main.css
+++ b/theme/assets/css/main.css
@@ -3232,6 +3232,44 @@ p:last-child { margin-bottom: 0; }
 .cta-banner h2 { color: #fff; margin-bottom: 1rem; }
 .cta-banner p { color: rgba(255,255,255,.85); margin-bottom: 2rem; font-size: 1.1rem; }
 
+.devices-split-card {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  border-radius: var(--radius-xl);
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+  background: var(--card-bg);
+}
+
+.devices-split-card__panel {
+  padding: clamp(1.5rem, 3vw, 2.5rem);
+}
+
+.devices-split-card__panel h3 {
+  margin-bottom: .85rem;
+}
+
+.devices-split-card__panel p {
+  color: var(--color-text-muted);
+  line-height: 1.75;
+}
+
+.devices-split-card__panel--brand {
+  background: var(--color-primary);
+  color: var(--color-bg);
+}
+
+.devices-split-card__panel--brand h3,
+.devices-split-card__panel--brand p {
+  color: inherit;
+}
+
+@media (max-width: 768px) {
+  .devices-split-card {
+    grid-template-columns: 1fr;
+  }
+}
+
 /* ── 15. Footer ────────────────────────────────────────────── */
 .site-footer {
   background: #111111;