/*
Theme Name:   Omni S2
Theme URI:    https://example.com/omni-s2
Description:  Standalone one-page theme for the Omni S2 robot vacuum. Activate it and the full landing page renders — no page builder, no parent theme, no plugins.
Author:       Omni S2
Version:      1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  omni-s2
*/

/* ==========================================================================
   TOKENS
   ========================================================================== */

:root {
	--ink:        #0E1013;
	--navy:       #0F2745;
	--navy-hover: #163A63;
	--text:       #16181B;
	--body:       #575E66;
	--muted:      #8A9099;
	--line:       #E3E6E9;
	--surface:    #FFFFFF;
	--surface-2:  #F4F5F6;
	--star:       #F5A623;
	--yes:        #22A45D;
	--no:         #E04B4B;
	--radius:     10px;
	--radius-sm:  6px;
	--shadow:     0 1px 3px rgba(14,16,19,.06), 0 8px 24px rgba(14,16,19,.05);
	--wrap:       1180px;
	--pad:        clamp(20px, 4vw, 40px);
	--sec:        clamp(52px, 7vw, 96px);
	--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ==========================================================================
   RESET
   ========================================================================== */

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

body {
	margin: 0;
	font-family: var(--font);
	color: var(--body);
	background: var(--surface);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
	color: var(--text);
	letter-spacing: -.022em;
	line-height: 1.12;
	margin: 0 0 .5em;
	font-weight: 700;
}

h1 { font-size: clamp(2.4rem, 5.5vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.35rem); }
h3 { font-size: clamp(1.05rem, 1.6vw, 1.2rem); font-weight: 600; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--navy); }

.wrap {
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--pad);
}
.hero h1 { margin-bottom: .2em; }
.hero__lede { margin-bottom: 1.2em; }
.hero .list { margin-bottom: 1em; }
.hero .list li { padding-block: 4px; }
.hero .price { margin-block: .8em .2em; }
.hero .price__note { margin-bottom: 1em; }
.hero .wrap { padding-block: clamp(28px, 4vw, 48px); }
.hero { min-height: min(72vh, 660px); }
.section { padding-block: var(--sec); }
.section--tint { background: var(--surface-2); }

.eyebrow {
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: .9em;
}

.center { text-align: center; }
.section-title { text-align: center; margin-bottom: clamp(28px, 4vw, 48px); }

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
	display: inline-block;
	background: var(--navy);
	color: #fff;
	border: 1px solid var(--navy);
	border-radius: var(--radius-sm);
	padding: 14px 32px;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background .18s ease, transform .18s ease;
}

.btn:hover { background: var(--navy-hover); border-color: var(--navy-hover); transform: translateY(-1px); }

.btn--ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn--ghost:hover { background: var(--surface-2); border-color: var(--muted); transform: none; }

.btn--light { background: #fff; color: var(--ink); border-color: #fff; }
.btn--light:hover { background: #E9EBED; border-color: #E9EBED; }

.btn--sm { padding: 10px 24px; font-size: .85rem; background: var(--ink); border-color: var(--ink); }
.btn--sm:hover { background: #2A2E34; border-color: #2A2E34; }

/* ==========================================================================
   HEADER
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255,255,255,.92);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--line);
}

.site-header .wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 64px;
}

.brand {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--text);
	text-decoration: none;
	letter-spacing: -.02em;
	white-space: nowrap;
}

.brand span { font-weight: 400; color: var(--muted); }

.nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 30px); }

.nav a {
	font-size: .88rem;
	font-weight: 500;
	color: var(--text);
	text-decoration: none;
	white-space: nowrap;
}

.nav a:hover { color: var(--navy); }

.nav-toggle { display: none; }

/* ==========================================================================
   HERO
   ========================================================================== */



/* Icon bullet lists */
.list { list-style: none; margin: 0 0 1.4em; padding: 0; }

.list li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-block: 7px;
	font-size: .94rem;
	color: var(--text);
}

.list--check li::before {
	content: "\2713";
	flex: 0 0 18px;
	color: var(--navy);
	font-weight: 700;
}

.list--x li::before {
	content: "\2715";
	flex: 0 0 18px;
	color: var(--no);
	font-weight: 700;
}

/* Price */
.price { display: flex; align-items: baseline; gap: 13px; margin-bottom: .2em; }
.price__was { font-size: 1.05rem; color: var(--muted); text-decoration: line-through; }
.price__now { font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 700; color: var(--text); letter-spacing: -.03em; }
.price__note { font-size: .8rem; color: var(--muted); margin-bottom: 1.7em; }

.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* ==========================================================================
   TRUST BAR
   ========================================================================== */

.trustbar { border-bottom: 1px solid var(--line); background: var(--surface); }

.trustbar .wrap {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	padding-block: 24px;
}

.trust__title { font-size: .9rem; font-weight: 600; color: var(--text); margin: 0 0 2px; }
.trust__sub { font-size: .78rem; color: var(--muted); margin: 0; }

/* ==========================================================================
   DARK SECTIONS
   ========================================================================== */

.dark { background: var(--ink); color: #C7CCD2; }
.dark h1, .dark h2, .dark h3 { color: #fff; }
.dark .eyebrow { color: #8A9099; }
.dark .list li { color: #C7CCD2; }

.vs-grid {
	display: grid;
	grid-template-columns: 38% 1fr;
	gap: clamp(24px, 4vw, 52px);
	align-items: center;
}

.vs-pair { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.vs-badge {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--ink);
	border: 2px solid rgba(255,255,255,.2);
	color: #fff;
	font-size: .78rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.vs-pair figure { margin: 0; }
.vs-pair img { border-radius: var(--radius-sm); }

.vs-pair figcaption {
	text-align: center;
	font-size: .8rem;
	color: #9AA1A9;
	margin-top: 10px;
}

/* Lifestyle band */
.band { background: var(--ink); color: #C7CCD2; }

.band-grid { display: grid; grid-template-columns: 34% 1fr; align-items: center; }

.band-copy { padding: clamp(32px, 5vw, 64px) var(--pad); }

.band-icons { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 26px; }
.band-icons div { font-size: .8rem; color: #9AA1A9; }
.band-icons strong { display: block; color: #fff; font-size: .88rem; font-weight: 600; }

.band-media img { height: 100%; object-fit: cover; }

/* ==========================================================================
   FEATURE ROWS
   ========================================================================== */

.feature {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--surface);
	border: 1px solid var(--line);
	margin-bottom: -1px;
	align-items: stretch;
}

.feature__body { padding: clamp(24px, 3.4vw, 46px); display: flex; flex-direction: column; justify-content: center; }
.feature__body p { font-size: .92rem; max-width: 46ch; margin: 0; }
.feature__body h3 { margin-bottom: .55em; }
.feature__media img { width: 100%; height: 100%; object-fit: cover; }

.feature--flip .feature__media { order: -1; }

/* ==========================================================================
   COMPARISON TABLE
   ========================================================================== */

.compare-grid { display: grid; grid-template-columns: 1fr 300px; gap: clamp(24px, 4vw, 48px); align-items: center; }

.compare { overflow-x: auto; }

.compare table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: .9rem; min-width: 460px; }

.compare th, .compare td { border: 1px solid var(--line); padding: 12px 18px; text-align: left; }

.compare thead th { background: var(--surface-2); font-weight: 600; color: var(--text); font-size: .84rem; }

.compare tbody td:first-child { color: var(--text); }

.yes::before { content: "\2713"; color: var(--yes); font-weight: 700; margin-right: 9px; }
.no::before  { content: "\2715"; color: var(--no);  font-weight: 700; margin-right: 9px; }

/* ==========================================================================
   STEPS
   ========================================================================== */

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 26px); }

.step {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 24px;
	display: grid;
	grid-template-columns: 1fr 96px;
	gap: 16px;
	align-items: center;
	transition: box-shadow .2s ease;
}

.step:hover, .quote:hover { box-shadow: var(--shadow); }

.step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--navy);
	color: #fff;
	font-size: .82rem;
	font-weight: 700;
	margin-bottom: 12px;
}

.step h3 { font-size: .98rem; margin-bottom: .4em; }
.step p { font-size: .85rem; margin: 0; }
.step img { border-radius: var(--radius-sm); }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */

.quote {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 24px;
	transition: box-shadow .2s ease;
}

.quote__stars { color: var(--star); letter-spacing: 2px; font-size: .9rem; margin-bottom: 12px; }
.quote p { font-size: .89rem; font-style: italic; color: var(--text); margin-bottom: 14px; }
.quote__author { font-size: .82rem; color: var(--muted); }

/* ==========================================================================
   FAQ  (native details/summary — no JavaScript)
   ========================================================================== */

.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.faq {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.faq summary {
	list-style: none;
	cursor: pointer;
	padding: 16px 20px;
	font-size: .92rem;
	font-weight: 500;
	color: var(--text);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
	content: "+";
	font-size: 1.2rem;
	font-weight: 400;
	color: var(--muted);
	line-height: 1;
	flex: 0 0 auto;
}

.faq[open] summary::after { content: "\2013"; }
.faq summary:hover { background: var(--surface-2); }

.faq__body { padding: 0 20px 18px; font-size: .89rem; }
.faq__body p { margin: 0; }

/* ==========================================================================
   FINAL CTA + FOOTER
   ========================================================================== */

.cta { background: var(--ink); color: #C7CCD2; }
.cta-grid { display: grid; grid-template-columns: 1fr 40%; gap: clamp(24px, 4vw, 48px); align-items: center; }
.cta h2 { color: #fff; }
.cta .list li { color: #9AA1A9; font-size: .82rem; }
.cta .list--check li::before { color: #fff; }

.site-footer {
	background: var(--ink);
	border-top: 1px solid rgba(255,255,255,.09);
	color: #7C838B;
	font-size: .8rem;
	padding-block: 24px;
	text-align: center;
}

.site-footer a { color: #9AA1A9; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 980px) {
	.hero .wrap,
	.vs-grid,
	.band-grid,
	.compare-grid,
	.cta-grid { grid-template-columns: 1fr; }

	.hero__media { order: -1; }
	.compare-grid > figure { display: none; }
	.band-media img { max-height: 320px; }
	.grid-3 { grid-template-columns: 1fr; }
	.faq-grid { grid-template-columns: 1fr; }
	.trustbar .wrap { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
	.feature { grid-template-columns: 1fr; }
	.feature .feature__media { order: -1; }
	.vs-badge { width: 44px; height: 44px; font-size: .7rem; }
	.step { grid-template-columns: 1fr; }
	.step img { display: none; }

	/* Collapse nav links, keep the Buy button visible */
	.nav a:not(.btn) { display: none; }
	.site-header .wrap { min-height: 58px; }
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

a:focus-visible, summary:focus-visible, button:focus-visible {
	outline: 2px solid var(--navy);
	outline-offset: 3px;
}

.dark a:focus-visible, .cta a:focus-visible { outline-color: #fff; }

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: #fff;
	padding: 10px 18px;
	z-index: 100;
}

.skip-link:focus { left: 8px; top: 8px; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

html { scroll-behavior: smooth; scroll-padding-top: 76px; }
/* ==========================================================================
   OMNI S2 — PATCH BLOCK
   ==========================================================================

   HOW TO USE
   ----------
   1. WordPress > Appearance > Theme File Editor > style.css
   2. Scroll to the very bottom of the file.
   3. Delete every earlier patch you pasted (anything below the
      "ACCESSIBILITY" section, including any block marked 1.0.1, 1.0.2,
      or 1.0.3, and any rule containing !important).
   4. Paste this entire file in its place.
   5. Update File, then reload the site with Ctrl+Shift+R.

   This replaces all previous patches. Do not keep the old ones as well —
   duplicated rules fight each other and make problems hard to trace.

   ========================================================================== */


/* --------------------------------------------------------------------------
   1.  HEADER BUTTON
   The .nav a rule was beating .btn on specificity, so the Buy Now button
   in the header rendered dark text on a dark background.
   -------------------------------------------------------------------------- */

.nav a.btn,
.nav a.btn:visited,
.nav a.btn:hover {
	color: #fff;
}


/* --------------------------------------------------------------------------
   2.  LIFESTYLE BAND
   The light-on-dark heading rules were written for .dark but this section
   uses .band, so its heading rendered near-black on near-black.
   -------------------------------------------------------------------------- */

.band h2,
.band h3,
.band strong {
	color: #fff;
}

.band .eyebrow {
	color: #8A9099;
}


/* --------------------------------------------------------------------------
   3.  BULLET LISTS
   Gutenberg puts the class directly on the <ul>, so the original
   descendant selector never matched.
   -------------------------------------------------------------------------- */

ul.omni-list,
ol.omni-list,
ul.list,
ol.list {
	list-style: none;
	margin: 0 0 1.4em;
	padding: 0;
}


/* --------------------------------------------------------------------------
   4.  MISSING IMAGES
   Any section whose photo has not been supplied collapses to a single
   full-width column instead of leaving an empty half.

   Affects: Self-Emptying Station row, the comparison table's side image,
   and the three How It Works thumbnails.
   -------------------------------------------------------------------------- */

.feature__media:not(:has(img)),
.band-media:not(:has(img)),
.compare-grid > figure:not(:has(img)) {
	display: none;
}

.feature:not(:has(.feature__media img)) {
	grid-template-columns: 1fr;
}

.compare-grid:not(:has(figure img)) {
	grid-template-columns: 1fr;
}

.band-grid:not(:has(.band-media img)) {
	grid-template-columns: 1fr;
}

/* Steps become text-only cards. */
.step {
	grid-template-columns: 1fr;
}

/* A feature row with no photo reads better centred and narrower. */
.feature:not(:has(img)) .feature__body {
	text-align: center;
}

.feature:not(:has(img)) .feature__body p {
	max-width: 60ch;
	margin-inline: auto;
}


/* --------------------------------------------------------------------------
   5.  FULL-BLEED HERO
   The hero photo becomes the section background, with a white gradient
   over the left side so the headline stays readable.

   TWO VALUES TO TUNE:

   background-position  — slides the photo sideways.
                          Lower % moves the product left, higher moves it
                          right. Currently 70%.

   The 52% stop in the  — controls where the white fade ends.
   gradient below         Raise it if the text is hard to read, lower it
                          if too much of the room is washed out.
   -------------------------------------------------------------------------- */

.hero {
	background-image: url('images/hero.webp');
	background-size: cover;
	background-position: 30% 22%;
	background-repeat: no-repeat;
	position: relative;
	min-height: min(78vh, 720px);
	display: flex;
	align-items: center;
}

.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		rgba(255,255,255,.97) 0%,
		rgba(255,255,255,.95) 34%,
		rgba(255,255,255,.75) 50%,
		rgba(255,255,255,.2) 68%,
		rgba(255,255,255,0) 80%
	);
}

.hero .wrap {
	position: relative;
	z-index: 1;
	grid-template-columns: 1fr;
	max-width: var(--wrap);
	width: 100%;
	padding-block: clamp(40px, 6vw, 72px);
}

.hero__copy { max-width: 28rem; }
.hero__media { display: none; }
.page-content h2 { font-size: 1.25rem; margin-top: 1.8em; }
.page-content p { margin-bottom: 1em; }
.page-content ul { padding-left: 1.2em; margin-bottom: 1em; }
.page-content li { margin-bottom: .4em; }
.page-content a { text-decoration: underline; }
.topbar {
	background: var(--ink);
	color: #C7CCD2;
	font-size: .82rem;
	font-weight: 500;
	text-align: center;
	padding: 10px 16px;
	position: relative;
	z-index: 60;
}

@media (max-width: 600px) {
	.topbar { font-size: .76rem; padding: 8px 12px; }
}
/* --- waitlist form --- */
.waitlist-form { max-width: 26rem; margin-top: 1.4em; }

.waitlist-form input[type="email"] {
	width: 100%;
	padding: 14px 16px;
	font-family: var(--font);
	font-size: .95rem;
	color: #fff;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.2);
	border-radius: var(--radius-sm);
	margin-bottom: 10px;
	box-sizing: border-box;
}

.waitlist-form input[type="email"]::placeholder { color: #8A9099; }

.waitlist-form input[type="email"]:focus {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.waitlist-form button.primary {
	display: inline-block;
	background: #fff;
	color: var(--ink);
	border: 1px solid #fff;
	border-radius: var(--radius-sm);
	padding: 14px 32px;
	font-family: var(--font);
	font-size: .95rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background .18s ease;
}

.waitlist-form button.primary:hover { background: #E9EBED; border-color: #E9EBED; }

.waitlist-form .ml-form-successContent h4 { color: #fff; margin-bottom: .4em; }
.waitlist-form .ml-form-successContent p { color: #C7CCD2; margin: 0; }

.sr-only {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0,0,0,0); border: 0;
}