:root { --navy: #115576; --navy-2: #165d80; --blue: #087dad; --orange: #087fac; --orange-2: #066f99; --paper: #f3faff; --line: #d3e8f2; --ink: #24485b; --muted: #567889; --shadow: 0 15px 38px #258eb312; }
.contact-strip { background: rgb(8, 127, 173); color: rgb(255, 255, 255); font-size: 0.8rem; }
.language-control select { background: rgb(6, 103, 142); font-size: 0.8rem; max-width: 175px; }
.contact-strip > .wrap > span { opacity: 1; }
.site-header { box-shadow: rgba(33, 152, 196, 0.063) 0px 3px 18px; }
.site-header nav > a, .nav-group > summary { font-size: 0.88rem; }
.site-header nav { gap: 19px; }
.header-inner { gap: 19px; }
.brand-copy b { color: rgb(21, 155, 200); }
.mark { background: rgb(12, 142, 192); }
.header-cta, .button { background: rgb(8, 127, 172); }
.header-cta:hover, .button:hover { background: rgb(7, 107, 147); }
.site-header nav a.active::after { background: rgb(21, 155, 200); }
.site-header nav > a:hover, .site-header nav > a.active, .nav-group[open] > summary { color: rgb(8, 127, 172); }
.blue-hero { background: linear-gradient(110deg, rgb(232, 248, 255) 0%, rgb(215, 242, 255) 54%, rgb(183, 231, 250) 100%); color: var(--navy); }
.blue-hero .eyebrow { color: rgb(8, 117, 158); }
.blue-hero h1 { color: rgb(17, 85, 118); }
.hero-intro { color: rgb(59, 108, 131); }
.blue-hero .button.outline { color: rgb(17, 97, 135); border-color: rgb(109, 181, 209); background: rgba(255, 255, 255, 0.4); }
.blue-hero .button.outline:hover { background: rgb(255, 255, 255); }
.hero-product { border: 1px solid rgb(155, 212, 234); box-shadow: rgba(35, 140, 172, 0.09) 0px 20px 50px; }
.blue-hero .hero-search { box-shadow: rgba(39, 139, 167, 0.063) 0px 7px 20px; border: 1px solid rgb(158, 212, 232); }
.hero-search button { background: rgb(8, 127, 172); }
.proof-bar { background: rgb(249, 253, 255); }
.proof-bar b { color: rgb(6, 127, 170); }
.section-head h2, .company-split h2 { color: rgb(17, 85, 118); }
.range-copy { background: rgb(246, 252, 255); }
.range-card:hover { border-color: rgb(98, 186, 222); }
.range-copy > span { color: rgb(8, 127, 172); }
.company-feature { background: rgb(234, 247, 253); }
.company-visual { border: 1px solid rgb(208, 233, 244); }
.since { background: rgb(18, 139, 183); }
.process-section { background: rgb(220, 242, 253); color: rgb(17, 85, 118); border-block: 1px solid rgb(197, 232, 246); }
.process-section .eyebrow { color: rgb(8, 117, 158); }
.process div { border-color: rgb(166, 214, 233); }
.process strong { color: rgb(8, 127, 172); }
.process span { color: rgb(70, 113, 134); }
.industry-card { background: rgb(241, 250, 255); }
.industry-card:hover { background: rgb(227, 245, 253); border-color: rgb(121, 196, 223); }
.closing-cta { background: rgb(204, 238, 252); }
.closing-cta p:last-child { color: rgb(40, 103, 129); }
.page-hero { background: linear-gradient(110deg, rgb(229, 247, 255), rgb(194, 235, 251)); color: rgb(17, 85, 118); border-bottom: 1px solid rgb(182, 222, 238); }
.page-hero h1, .page-hero .product-title { color: rgb(17, 85, 118) !important; }
.page-hero .lead { color: rgb(65, 109, 130); }
.page-hero .eyebrow { color: rgb(9, 127, 169); }
.breadcrumbs { color: rgb(70, 123, 146); }
.catalog-summary div { border-color: rgb(162, 206, 222); }
.catalog-summary span { color: rgb(66, 111, 132); }
.catalog-summary strong { color: rgb(17, 100, 135); }
.catalog-grid .product-card:hover { border-color: rgb(117, 192, 221); box-shadow: rgba(22, 138, 178, 0.075) 0px 12px 24px; }
.tag.orange { color: rgb(6, 100, 139); background: rgb(191, 232, 248); }
.tag { background: rgb(238, 250, 255); color: rgb(44, 110, 137); }
.aside-card { background: rgb(226, 244, 252); border: 1px solid rgb(173, 217, 235); color: rgb(17, 85, 118); }
.aside-card p, .aside-card .text-link { color: rgb(62, 115, 139); }
.aside-card a:not(.button) { color: rgb(11, 115, 158); }
.button.secondary { color: rgb(18, 87, 121); border-color: rgb(112, 173, 202); }
.site-footer { background: rgb(21, 91, 123); }
.site-footer p, .site-footer > div a:not(.brand) { color: rgb(210, 234, 244); }
.footer-bottom { color: rgb(190, 220, 233); border-color: rgb(64, 124, 148); }
.footer-brand .brand-copy small { color: rgb(186, 220, 234); }
.footer-brand .brand-copy b { color: rgb(138, 218, 251); }
.contact-rail { background: rgb(19, 140, 187); box-shadow: rgba(46, 144, 178, 0.208) 0px 5px 22px; }
.contact-rail a:hover, .contact-rail button:hover { background: rgb(7, 106, 149); }
.photo-status { color: rgb(70, 108, 128); background: rgb(237, 249, 253); }
.notice { background: rgb(228, 245, 253); color: rgb(43, 99, 125) !important; }
.sky-panel { background: rgb(229, 246, 254) !important; }
.support-nav { position: relative; }
.support-menu { position: absolute; top: 86px; inset-inline-start: -22px; min-width: 230px; max-width: 310px; padding: 13px 22px; background: rgb(255, 255, 255); border-width: 3px 1px 1px; border-style: solid; border-color: rgb(21, 155, 200) rgb(196, 226, 239) rgb(196, 226, 239); border-image: none; border-radius: 0px 0px 7px 7px; box-shadow: rgba(34, 120, 155, 0.133) 0px 14px 32px; z-index: 65; }
.site-header nav .support-menu a { display: block; padding: 11px 0px; color: rgb(36, 92, 118); font-size: 0.92rem; white-space: normal; }
.site-header nav .support-menu a:hover { color: rgb(0, 135, 185); }
.site-header nav .support-menu a::after { display: none; }
.support-nav:has(a.active) > summary { color: rgb(7, 130, 179); }
.advantage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.advantage-card { border: 1px solid var(--line); padding: 32px; border-radius: 8px; background: rgb(251, 254, 255); }
.advantage-card > span { display: block; color: rgb(59, 170, 211); font-size: 1.9rem; font-weight: 700; margin-bottom: 24px; }
.advantage-card h2 { font-size: 1.4rem; line-height: 1.3; color: rgb(17, 85, 118); margin: 0px 0px 14px; }
.advantage-card p { color: var(--muted); margin: 0px; line-height: 1.8; }
.support-cta { display: flex; align-items: center; justify-content: space-between; gap: 35px; }
.support-cta h2 { margin: 0px 0px 10px; color: var(--navy); font-size: 1.8rem; }
.support-cta p { margin: 0px; color: var(--muted); }
.support-cta .button { flex-shrink: 0; }
.faq-page-list { max-width: 900px; }
.faq-page-list .faq { margin-bottom: 20px; padding: 10px 0px 25px; }
.faq-page-list summary { font-size: 1.08rem; }
.faq-page-list p { font-size: 1rem; line-height: 1.8; max-width: 850px; }
.faq-page-list details:last-child { margin-bottom: 0px; }
.blog-layout { display: grid; grid-template-columns: minmax(0px, 1fr) 265px; gap: 40px; }
.blog-controls { display: grid; grid-template-columns: minmax(0px, 1fr) 185px; gap: 12px; margin-bottom: 28px; }
.blog-controls input, .blog-controls select { width: 100%; min-width: 0px; height: 48px; border: 1px solid rgb(180, 213, 229); border-radius: 5px; background: rgb(255, 255, 255); padding: 0px 13px; color: var(--ink); font-size: 0.93rem; }
.blog-list { display: grid; gap: 25px; }
.blog-card { display: grid; grid-template-columns: 225px minmax(0px, 1fr); border: 1px solid rgb(213, 233, 242); border-radius: 7px; overflow: hidden; background: rgb(255, 255, 255); }
.blog-picture { background: rgb(255, 255, 255); display: grid; place-items: center; padding: 20px; border-inline-end: 1px solid rgb(237, 245, 250); min-height: 250px; }
.blog-picture img { width: 100%; height: 200px; object-fit: contain; }
.blog-card-body { padding: 25px; }
.blog-category { display: inline-block; color: rgb(8, 123, 168); font-size: 0.8rem; font-weight: 700; margin-bottom: 12px; }
.blog-card h2 { font-size: 1.3rem; line-height: 1.4; margin: 0px 0px 12px; color: rgb(17, 85, 118); }
.blog-card h2 a { text-decoration: none; }
.blog-card h2 a:hover { text-decoration: underline; color: rgb(8, 127, 172); }
.blog-card p { color: var(--muted); font-size: 0.95rem; margin: 0px 0px 18px; line-height: 1.7; }
.blog-card .text-link { font-size: 0.88rem; }
.blog-side-card { padding: 25px; border: 1px solid rgb(209, 232, 243); border-radius: 7px; margin-bottom: 22px; background: rgb(249, 253, 255); }
.blog-side-card h2 { font-size: 1.15rem; color: rgb(17, 85, 118); margin: 0px 0px 18px; }
.blog-side-card > a:not(.button) { display: block; font-size: 0.94rem; text-decoration: none; color: rgb(65, 114, 138); padding: 9px 0px; border-bottom: 1px solid rgb(225, 240, 247); }
.blog-side-card > a:hover { color: rgb(8, 127, 172); }
.blog-side-card p { font-size: 0.94rem; color: var(--muted); line-height: 1.7; }
.blog-side-card .button { font-size: 0.88rem; padding: 0px 17px; }
.blog-sidebar, .article-sidebar { min-width: 0px; }
.blog-pagination { display: flex; gap: 17px; align-items: center; justify-content: center; margin-top: 35px; }
.blog-pagination button { border: 1px solid rgb(181, 217, 233); color: rgb(21, 101, 134); padding: 8px 16px; background: rgb(255, 255, 255); border-radius: 4px; cursor: pointer; }
.blog-pagination button:hover:not(:disabled) { background: rgb(234, 247, 253); }
.blog-pagination button:disabled { opacity: 0.35; cursor: default; }
.blog-pagination span { font-size: 0.9rem; color: var(--muted); }
.language-note { background: rgb(238, 249, 253); border-inline-start: 3px solid rgb(108, 187, 216); color: rgb(60, 110, 132); padding: 10px 14px; font-size: 0.88rem; margin: 0px 0px 22px; }
.article-layout { display: grid; grid-template-columns: minmax(0px, 1fr) 280px; gap: 55px; }
.article-content { min-width: 0px; }
.article-content > figure { margin: 28px 0px 30px; border: 1px solid rgb(211, 232, 243); border-radius: 7px; padding: 26px; }
.article-content > figure img { width: 100%; height: 330px; object-fit: contain; }
.article-content figcaption { font-size: 0.8rem; color: var(--muted); text-align: center; margin-top: 16px; }
.article-byline { color: rgb(105, 138, 155); font-size: 0.85rem; margin: 18px 0px; }
.article-content section { scroll-margin-top: 115px; }
.article-content section h2 { font-size: 1.55rem; color: rgb(17, 85, 118); line-height: 1.3; margin: 33px 0px 13px; }
.article-content section p { font-size: 1.04rem; line-height: 1.95; margin: 0px; color: rgb(63, 98, 116); }
.article-action { margin: 32px 0px; }
.article-reference { font-size: 0.85rem; color: var(--muted); padding-block: 20px; border-top: 1px solid var(--line); }
.article-reference a { color: rgb(8, 121, 167); }
.article-related { border-top: 1px solid var(--line); padding-top: 22px; margin-top: 25px; }
.article-related h2 { font-size: 1.35rem; color: rgb(17, 85, 118); }
.article-related > a { display: block; padding: 12px 0px; text-decoration: none; color: rgb(8, 120, 166); font-size: 0.95rem; }
.article-sidebar { position: sticky; top: 110px; align-self: start; }
.toc-link { display: block; width: 100%; border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor rgb(220, 238, 246); border-image: none; background: transparent; padding: 12px 0px; text-align: start; font-size: 0.92rem; color: rgb(65, 111, 133); cursor: pointer; line-height: 1.6; }
.toc-link:hover { color: rgb(8, 127, 172); text-decoration: underline; }
@media (max-width: 1250px) {
  .site-header nav { gap: 14px; }
  .site-header nav > a, .nav-group > summary { font-size: 0.83rem; }
  .header-inner { gap: 15px; }
  .brand-copy strong { font-size: 1.18rem; }
  .blog-layout { grid-template-columns: minmax(0px, 1fr) 235px; gap: 25px; }
  .blog-card { grid-template-columns: 180px minmax(0px, 1fr); }
  .blog-card-body { padding: 22px; }
  .blog-picture { padding: 15px; }
  .article-layout { gap: 32px; grid-template-columns: minmax(0px, 1fr) 250px; }
}
@media (max-width: 1020px) {
  .site-header .menu-toggle { display: block; }
  .site-header nav { display: none; position: absolute; left: 0px; right: 0px; top: 87px; padding: 14px 24px; background: rgb(255, 255, 255); border-top: 1px solid var(--line); max-height: calc(100dvh - 120px); overflow: auto; gap: 0px; box-shadow: rgba(20, 90, 117, 0.1) 0px 15px 25px; }
  .site-header nav.open { display: grid; }
  .site-header nav > a, .nav-group > summary { font-size: 0.97rem; padding: 13px 0px; }
  .mega, .support-menu { position: static; box-shadow: none; max-width: none; width: 100%; min-width: 0px; margin-bottom: 10px; border-radius: 4px; }
  .mega { grid-template-columns: 1fr 1fr; padding: 18px; gap: 20px; }
  .mega > div:first-child { grid-column: 1 / -1; }
  .site-header nav a.active::after { bottom: 7px; }
  .support-menu { padding: 8px 20px; }
  .site-header nav .support-menu a { font-size: 0.95rem; }
  .site-header .header-cta { display: none; }
  .blog-card { grid-template-columns: 1fr; }
  .blog-picture { border-inline-end: 0px; border-bottom: 1px solid rgb(237, 245, 250); min-height: 220px; }
  .blog-layout { gap: 24px; }
  .article-layout { grid-template-columns: 1fr; }
  .article-sidebar { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
}
@media (max-width: 820px) {
  .site-header nav { top: 75px; }
  .blog-layout { grid-template-columns: 1fr; }
  .blog-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .blog-list { grid-template-columns: 1fr 1fr; gap: 20px; }
  .blog-controls { grid-template-columns: minmax(0px, 1fr) 160px; }
  .blog-card-body { padding: 20px; }
  .blog-card h2 { font-size: 1.15rem; }
  .blog-card p { font-size: 0.9rem; }
  .blog-picture { min-height: 195px; }
  .blog-picture img { height: 165px; }
  .support-cta { display: block; }
  .support-cta .button { margin-top: 23px; }
  .advantage-grid { gap: 18px; }
  .advantage-card { padding: 24px; }
  .article-sidebar { gap: 18px; }
}
@media (max-width: 620px) {
  .site-header nav { top: 69px; }
  .contact-strip { font-size: 0.75rem; }
  .language-control select { font-size: 0.76rem; max-width: 140px; }
  .advantage-grid, .blog-list, .blog-sidebar, .article-sidebar { grid-template-columns: 1fr; }
  .advantage-card { padding: 26px; }
  .support-cta h2 { font-size: 1.6rem; }
  .faq-page-list summary { font-size: 1rem; }
  .faq-page-list p { font-size: 0.96rem; }
  .blog-controls { grid-template-columns: 1fr; }
  .blog-card { grid-template-columns: 1fr; }
  .blog-picture { min-height: 220px; }
  .blog-picture img { height: 190px; }
  .blog-card-body { padding: 24px; }
  .blog-card h2 { font-size: 1.25rem; }
  .blog-card p { font-size: 0.98rem; }
  .blog-sidebar { gap: 0px; }
  .article-content > figure { padding: 20px; }
  .article-content > figure img { height: 260px; }
  .article-content section h2 { font-size: 1.4rem; }
  .article-content section p { font-size: 1rem; line-height: 1.85; }
  .article-content section { scroll-margin-top: 90px; }
  .article-sidebar { gap: 0px; }
}