:root { --ink:#08101c; --navy:#123154; --blue:#007fae; --aqua:#8bd5e8; --mist:#eef3f6; --white:#fff; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { background:var(--ink); color:var(--white); font-family:Montserrat,sans-serif; font-weight:500; margin:0; } a { color:inherit; text-decoration:none; } img { max-width:100%; }
.container { margin:0 auto; max-width:1180px; padding:0 28px; }
.warranty { aspect-ratio:6824 / 2639; background:url('assets/warranty-install.png') center/cover no-repeat; color:var(--navy); overflow:hidden; padding:0; position:relative; }.warranty .container { inset:0; max-width:none; padding:0; position:absolute; text-align:center; width:100%; }.warranty img { left:50%; max-width:none; position:absolute; top:52%; transform:translate(-50%,-50%); width:clamp(280px,28vw,540px); }.warranty h2 { bottom:5%; color:var(--navy); font-size:clamp(1.25rem,3vw,2.1rem); font-weight:700; left:0; line-height:1.1; margin:0 auto; max-width:100%; padding:0 28px; position:absolute; right:0; text-transform:uppercase; }
@media(max-width:760px){.warranty{aspect-ratio:auto;background-position:42% center;min-height:540px;padding:0}.warranty .container{min-height:inherit;position:relative}.warranty img{max-width:min(68vw,320px);top:49%;width:auto}.warranty h2{bottom:6%;padding:0 20px}}

/* Raymote app section. */
.raymote-section { background:#221f20; color:rgba(255,255,255,.9); text-shadow:none; }
#raymote .row { align-items:center; display:flex; }
#raymote .showcase { background:transparent; min-height:0; padding:0; position:static; }
#raymote .showcase::before, #raymote .showcase::after { display:none; }
#raymote .showcase img { margin:0 auto; max-height:520px; max-width:100%; position:static; }
#raymote h2 { font-size:24px; }
#raymote p { line-height:1.65; }
#raymote .store-badges { margin:30px 0 0; }
#raymote .store-badges li { padding:0 10px 0 0; }
#raymote .store-badges img { display:block; height:54px; width:auto; }

/* Designed to stand out: use the supplied joined product composition. */
.design-section { background:#eee; color:var(--navy); text-shadow:none; }
#design .row { align-items:center; display:flex; }
#design h2 { color:var(--navy); font-size:24px; text-transform:uppercase; }
#design p { color:var(--navy); line-height:1.65; }
#design .design-product-image { max-width:100%; }
@media (max-width:767px) { #design .row { display:block; } #design .design-product-image { margin-top:30px; } }

#features { background-color:#221f20; }
#features .feature-icon { background:transparent; border-radius:0; display:block; height:120px; margin:0 auto 28px; object-fit:contain; width:120px; }
#features > .container > .row:first-child h2 { font-size:24px; }
#features h3 { font-size:18px; font-weight:700; text-transform:uppercase; }
#features p { line-height:1.65; }
@media (max-width:767px) { #features .col-sm-4 + .col-sm-4 { margin-top:45px; } }

/* Keep product renders and their captions aligned despite different aspect ratios. */
.product-section { background:#eee; color:var(--navy); text-shadow:none; }
#products .row { display:flex; flex-wrap:wrap; }
#products .col-sm-6 { align-items:center; display:flex; flex-direction:column; }
#products .product-image { align-items:center; display:flex; height:420px; justify-content:center; width:100%; }
#products .product-image img { max-height:400px; width:auto; }
#products h2, #products p { color:var(--navy); }
#products h2 { font-size:18px; line-height:1.25; margin-bottom:4px; }
#products p { line-height:1.4; margin-bottom:30px; }
#products .product-button { background:transparent; border:1px solid var(--navy); color:var(--navy) !important; min-width:170px; }
#products .product-button:hover { background:var(--navy); color:var(--white) !important; }

.site-footer { background:#221f20; color:rgba(255,255,255,.65); padding:55px 20px 40px; }
.site-footer img { display:block; margin:0 auto 28px; width:150px; }
.site-footer p { font-size:12px; margin:0; }
/* First screen: preserve the template intro layout and adapt it to the supplied artwork. */
.intro .intro-body:before { background:transparent; }
.intro h1 { letter-spacing:.05em; text-transform:uppercase; }
.intro .intro-body p { line-height:1.65; }

@media (max-width:767px) { #products .product-image { height:320px; } #products .product-image img { max-height:300px; } }
@media (max-width:767px) { .site-footer img { width:128px; } }
@media (max-width:767px) { #raymote .row { display:block; } #raymote .showcase { margin-bottom:40px; } #raymote .store-badges img { height:48px; } }