@media only screen and (min-width: 0rem) {#products {background-color: #fff;padding: var(--sectionPadding);}#products .cs-container {display: flex;flex-direction: column;align-items: center;margin: auto;max-width: 68.75rem;width: 100%;gap: clamp(3rem, 6vw, 4rem);}#products .cs-content {display: flex;flex-direction: column;align-items: center;width: 100%;text-align: center;}#products .cs-product {display: flex;flex-direction: column;background-color: #f7f7f7;width: 100%;overflow: hidden;}#products .cs-monitor {position: relative;display: flex;flex-direction: column;align-items: center;width: 100%;padding: clamp(1.25rem, 5vw, 3rem) clamp(1.25rem, 5vw, 3rem) 0;box-sizing: border-box;}#products .cs-screen {position: relative;width: 100%;background-color: #1a1a1a;padding: clamp(0.5rem, 1.5vw, 1rem);border-radius: clamp(0.5rem, 1.5vw, 1rem);box-sizing: border-box;box-shadow: inset 0 0 0 1px #3a3a3a, 0 1.25rem 2.5rem rgba(0, 0, 0, 0.25);}#products .cs-screen:after {content: "";position: absolute;inset: clamp(0.5rem, 1.5vw, 1rem);background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 40%);pointer-events: none;}#products .cs-picture {display: block;width: 100%;}#products .cs-picture img {display: block;width: 100%;height: auto;}#products .cs-stand {width: 18%;height: clamp(1.5rem, 5vw, 3.5rem);background: linear-gradient(to bottom, #9a9a9a, #c8c8c8);clip-path: polygon(15% 0, 85% 0, 100% 100%, 0 100%);}#products .cs-base {width: 34%;height: clamp(0.375rem, 1vw, 0.625rem);background: linear-gradient(to bottom, #d4d4d4, #a8a8a8);border-radius: 0.25rem 0.25rem 0.125rem 0.125rem;box-shadow: 0 0.375rem 0.75rem rgba(0, 0, 0, 0.15);}#products .cs-phone {position: absolute;right: clamp(0.5rem, 3vw, 2rem);bottom: 0;z-index: 1;width: 22%;max-width: 13.75rem;background-color: #1a1a1a;padding: clamp(0.25rem, 0.8vw, 0.5rem);border-radius: clamp(0.875rem, 3vw, 1.75rem);box-sizing: border-box;box-shadow: inset 0 0 0 1px #3a3a3a, 0 1rem 2rem rgba(0, 0, 0, 0.35);}#products .cs-phone:before {content: "";position: absolute;top: calc(clamp(0.25rem, 0.8vw, 0.5rem) + 4%);left: 50%;z-index: 1;width: 7%;aspect-ratio: 1;background-color: #1a1a1a;border-radius: 50%;transform: translateX(-50%);}#products .cs-phone-picture {display: block;width: 100%;border-radius: clamp(0.625rem, 2.2vw, 1.25rem);overflow: hidden;}#products .cs-phone-picture img {display: block;width: 100%;height: auto;}#products .cs-info {display: flex;flex-direction: column;align-items: flex-start;padding: clamp(1.5rem, 5vw, 3rem);}#products .cs-title {margin: 0 0 1rem 0;}#products .cs-subtitle {font-size: clamp(1.25rem, 2.5vw, 1.5625rem);line-height: 1.3em;font-weight: 700;margin: 0 0 1.25rem 0;color: var(--primary);}#products .cs-text {max-width: none;margin: 0 0 1.25rem 0;}#products .cs-features {margin: 0 0 2rem 0;padding: 0;display: flex;flex-direction: column;gap: 0.75rem;}#products .cs-feature {position: relative;list-style: none;padding-left: 2rem;font-size: clamp(0.875rem, 1.5vw, 1rem);line-height: 1.5em;color: var(--bodyTextColor);}#products .cs-feature:before {content: "";position: absolute;top: 0.125rem;left: 0;width: 1.25rem;height: 1.25rem;background: url("/assets/images/tick-circle.svg") no-repeat center/contain;}}@media only screen and (min-width: 0rem) {body.dark-mode #products {background-color: var(--dark);}body.dark-mode #products .cs-product {background-color: var(--medium);}body.dark-mode #products .cs-title, body.dark-mode #products .cs-subtitle, body.dark-mode #products .cs-text, body.dark-mode #products .cs-feature {color: var(--bodyTextColorWhite);}body.dark-mode #products .cs-text, body.dark-mode #products .cs-feature {opacity: 0.8;}}