/* Light product area between the blue hero and offline presentation. */
.features { color: #102b40; }
.features::before { background: #f8fafc; }
.features .section-heading h2 { color: #102b40; }
.features .section-heading p { color: #53697b; }
.features .eyebrow { color: #276695; }
.feature-tabs button { color: #17344b; }
.feature-tabs button:hover { background: #eaf1f7; }
.feature-tabs button.active { background: #e3eff9; border-left-color: #246fa8; }
.feature-tabs span, .feature-tabs small { color: #536c80; }
.feature-tabs button.active span, .feature-tabs button.active small { color: #235f8c; }
.product-window { box-shadow: 0 18px 48px #163b541c; }
.workflow { position: relative; isolation: isolate; }
.workflow::before { content: ''; position: absolute; inset-block: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: #edf2f6; z-index: -1; }
.steps article { background: #fff; }
.theme-controls { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px; margin-top: 22px; color: #b5cbdc; font-size: 14px; }
.theme-swatches { display: flex; gap: 6px; }
.theme-swatches button { position: relative; width: 36px; height: 36px; padding: 0; background: transparent; border: 1px solid transparent; border-radius: 50%; cursor: pointer; }
.theme-swatches button::after { content: ''; position: absolute; inset: 6px; background: var(--swatch); border-radius: 50%; }
.theme-swatches button[aria-pressed=true] { border-color: #fff; }
.theme-disclaimer { text-align: center; color: #8aa6ba; font-size: 12px; margin: 10px 0 0; }
#themeImage { aspect-ratio: 16 / 9; object-fit: contain; background: #061728; }
.hero-product { margin-top: 36px; }
.download-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.download-options button { font-size: 14px; letter-spacing: 0; }
.contact-links { display: grid; gap: 12px; min-width: 260px; }
.contact-links a { padding: 14px 18px; border: 1px solid #ffffff42; border-radius: 10px; background: #ffffff0c; }
.contact-links a:hover { background: #ffffff20; }
.contact-links small, .contact-links strong { display: block; }
.contact-links small { color: #d4e5f2; font-size: 12px; margin-bottom: 4px; }
.contact-links strong { color: #fff; font-size: 16px; overflow-wrap: anywhere; }
@media(max-width:720px) { .contact-links { min-width: 0; width: 100%; } }
@media(max-width:720px) { .theme-controls { gap: 10px; } }