:root{--blue: #0061A0; --navy: #17324D; --text: #2B3440; --pale: #EAF3F8; --line: #dceaf2;}
body{font-family: Roboto, Arial, sans-serif; font-size: 16px; line-height: 1.65; color: var(--text);}
.wrap{width: min(1200px, 100% - 72px);}
h1, h2, h3{letter-spacing: -0.025em; font-weight: 750;}
h1{font-size: 54px; line-height: 1.08;}
h2{font-size: 32px; line-height: 1.2; margin-bottom: 20px;}
h3{font-size: 20px; line-height: 1.28;}
p{margin-bottom: 18px;}
.btn{background: linear-gradient(rgb(255, 121, 13), rgb(250, 96, 0)); color: rgb(23, 50, 77); border: 1px solid rgb(237, 91, 0); box-shadow: rgba(249, 96, 0, 0.094) 0px 2px 4px; border-radius: 5px; padding: 12px 24px; min-height: 47px; font-weight: 750;}
.btn:hover{background: rgb(235, 88, 0);}
.link{border: 0px; font-size: 15px; font-weight: 650;}
.eyebrow{font-size: 12px; letter-spacing: 0.115em; margin-bottom: 17px; font-weight: 750;}
.eyebrow::before{display: none;}
.hero{padding: 0px; background: linear-gradient(110deg, rgb(242, 250, 255) 0%, rgb(234, 245, 251) 55%, rgb(231, 242, 248) 100%); overflow: hidden;}
.hero-grid{grid-template-columns: 1fr 1fr; gap: 0px; min-height: 460px; position: relative;}
.hero-copy{position: relative; z-index: 2; padding: 58px 0px 35px;}
.hero h1{font-size: 54px; margin-bottom: 18px;}
.hero .lead{font-size: 21px; line-height: 1.42; margin-bottom: 12px;}
.hero-sub{font-size: 16px; color: rgb(72, 97, 118);}
.actions{gap: 24px; margin-top: 25px;}
.hero-visual{height: 100%; min-height: 460px; position: relative; margin-right: calc(0.5 * (-100vw + min(1200px, -72px + 100vw))); overflow: hidden;}
.hero-visual > img{width: 100%; height: 100%; position: absolute; object-fit: cover; object-position: 56% center;}
.hero-visual::after{content: ""; position: absolute; inset: 0px; background: linear-gradient(90deg, rgb(234, 245, 251) 0%, rgba(234, 245, 251, 0.333) 10%, transparent 35%); pointer-events: none;}
.visual-labels{position: absolute; right: 6%; top: 25%; z-index: 2; display: flex; flex-direction: column; gap: 8px;}
.visual-labels span{display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 650; color: var(--navy); background: rgba(255, 255, 255, 0.95); box-shadow: rgba(23, 50, 77, 0.07) 0px 5px 20px; border: 1px solid rgb(255, 255, 255); padding: 11px 16px; border-radius: 7px;}
.icon{width: 30px; height: 30px; flex-shrink: 0; color: var(--blue); vertical-align: middle;}
.visual-labels .icon{width: 25px; height: 25px;}
.hero-benefits{padding: 0px; list-style: none; display: flex; gap: 18px; margin: 27px 0px 0px; position: relative; width: max-content;}
.hero-benefits li{font-size: 12px; display: flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--navy);}
.hero-benefits .icon{width: 16px; height: 16px; border-radius: 50%; color: white; background: var(--blue); padding: 2px; stroke-width: 2.5;}
.how-section{padding: 30px 0px 34px; background: rgb(255, 255, 255);}
.how-section h2{font-size: 25px; margin-bottom: 24px;}
.how-steps{display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px;}
.how-step{display: flex; align-items: center; gap: 13px; position: relative;}
.how-step:not(:last-child)::after{content: "›"; position: absolute; right: -23px; top: 19px; color: rgb(121, 157, 183); font-size: 28px; font-weight: 400;}
.step-index{background: rgb(217, 237, 249); color: var(--navy); font-size: 14px; width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; flex-shrink: 0;}
.icon-ring{width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid rgb(196, 222, 239); border-radius: 50%; background: rgb(250, 253, 255); flex-shrink: 0;}
.how-step h3{font-size: 15px; letter-spacing: 0px; margin-bottom: 7px;}
.how-step p{font-size: 13px; line-height: 1.5; margin: 0px; color: rgb(82, 106, 125);}
.section{padding: 58px 0px;}
.pale{background: linear-gradient(105deg, rgb(237, 248, 253), rgb(234, 243, 248));}
.gray{background: rgb(246, 248, 250);}
.split{gap: 65px; align-items: center;}
.recognition h2{font-size: 31px;}
.checks li{font-size: 15px; padding: 12px 0px 12px 28px;}
.checks li::before{content: "✓"; font-size: 15px;}
.tech-line{padding: 28px 24px; border-radius: 8px; border-color: rgb(212, 230, 242); box-shadow: rgba(0, 97, 160, 0.027) 0px 4px 16px;}
.tech-line h3{font-size: 23px;}
.tech-result{background: rgb(0, 97, 160); border-radius: 5px; font-weight: 500;}
.page-hero{padding: 0px; background: linear-gradient(110deg, rgb(241, 249, 255), rgb(230, 242, 250)); border-bottom: 1px solid rgb(219, 234, 244); overflow: hidden;}
.masthead{display: grid; grid-template-columns: 1.45fr 0.75fr; gap: 55px; align-items: center; min-height: 335px;}
.masthead > div:first-child{padding: 35px 0px 40px;}
.breadcrumb{margin-bottom: 23px; font-size: 12px;}
.page-hero h1{font-size: 40px; line-height: 1.15; margin-bottom: 18px; max-width: 850px;}
.page-hero .lead{font-size: 18px; line-height: 1.55; margin-bottom: 0px;}
.masthead-art{height: 235px; position: relative; border-radius: 12px; box-shadow: rgba(23, 50, 77, 0.047) 0px 12px 35px; margin: 25px 0px;}
.masthead-art img{width: 100%; height: 100%; object-fit: cover; border-radius: 12px;}
.masthead-icon{position: absolute; width: 63px; height: 63px; bottom: -17px; left: -17px; background: white; border: 1px solid rgb(214, 232, 243); border-radius: 50%; display: grid; place-items: center; box-shadow: rgba(23, 50, 77, 0.063) 0px 5px 17px;}
.masthead-icon .icon{width: 32px; height: 32px;}
.content-grid{grid-template-columns: 230px minmax(0px, 1fr); gap: 65px;}
.toc{background: rgb(242, 248, 252); border: 1px solid rgb(222, 235, 244); padding: 20px; border-radius: 7px; position: sticky; top: 25px;}
.toc strong{font-size: 15px; color: var(--navy); display: block; margin-bottom: 12px;}
.toc a{font-size: 13px; padding: 7px 0px; line-height: 1.45;}
.prose{font-size: 17px;}
.prose h2{font-size: 28px; padding-top: 0px;}
.prose section{margin-bottom: 48px;}
.note{border-left: 3px solid rgb(0, 97, 160); border-radius: 0px 7px 7px 0px; background: rgb(238, 247, 252); font-size: 16px;}
.two{gap: 45px;}
.inner-page .two > div:has(.checks){padding: 30px; border: 1px solid rgb(222, 235, 243); background: white; border-radius: 8px;}
.inner-page .tech-line{min-height: 165px;}
.fine{font-size: 13px;}
@media (min-width: 1450px){
.hero{padding: 0px;}
.hero-grid{min-height: 490px;}
.hero-visual{min-height: 490px;}
}
@media (max-width: 1180px){
.wrap{width: calc(100% - 48px);}
.hero h1{font-size: 48px;}
.hero .lead{font-size: 19px;}
.hero-visual{margin-right: -24px;}
.visual-labels{right: 4%;}
.hero-benefits{gap: 12px;}
.hero-benefits li{font-size: 11px;}
.how-steps{gap: 25px;}
.how-step{gap: 10px;}
.how-step:not(:last-child)::after{right: -17px;}
.how-step h3{font-size: 14px;}
.step-index{display: none;}
.split{gap: 35px;}
.content-grid{gap: 35px;}
.masthead{gap: 35px;}
}
@media (max-width: 1000px){
.hero-benefits{flex-wrap: wrap; width: auto; max-width: 550px; gap: 10px 18px;}
.hero-benefits li{font-size: 12px;}
.hero .lead{font-size: 18px;}
.desktop-break{display: none;}
.visual-labels{top: 30%; right: 4%;}
.visual-labels span{font-size: 12px; padding: 9px 11px;}
.hero-copy{padding: 45px 0px 35px;}
.hero h1{font-size: 44px;}
.hero-grid, .hero-visual{min-height: 440px;}
.page-hero h1{font-size: 34px;}
}
@media (max-width: 900px){
.hero-grid{grid-template-columns: 1fr 1fr; gap: 0px;}
.hero-visual{min-height: 470px;}
.hero h1{font-size: 42px;}
.hero-copy{padding: 42px 0px 32px;}
.hero .actions{gap: 15px;}
.hero .actions .link{font-size: 13px;}
.hero .actions .btn{padding: 12px 20px;}
.how-steps{gap: 25px; grid-template-columns: 1fr;}
.how-step{gap: 17px; align-items: center;}
.how-step h3{font-size: 17px;}
.how-step p{font-size: 14px;}
.how-step:not(:last-child)::after{display: none;}
.step-index{display: grid;}
.how-section{padding: 30px 0px;}
.split{grid-template-columns: 1fr; gap: 32px;}
.section{padding: 45px 0px;}
.masthead{grid-template-columns: 1fr 0.6fr; gap: 30px;}
.masthead-art{height: 220px;}
.page-hero .lead{font-size: 17px;}
.content-grid{grid-template-columns: 1fr;}
.toc{position: static; display: block; columns: 2;}
.toc strong{column-span: all;}
.toc a{break-inside: avoid;}
.two{gap: 25px;}
.prose{max-width: none;}
}
@media (max-width: 650px){
.wrap{width: calc(100% - 36px);}
.hero-grid{grid-template-columns: 1fr;}
.hero-copy{padding: 36px 0px 20px;}
.hero h1{font-size: 44px; line-height: 1.08;}
.hero .lead{font-size: 20px;}
.hero-sub{font-size: 15px;}
.hero-visual{min-height: 280px; margin: 0px -18px; height: 280px;}
.hero-visual > img{object-position: 50% 55%;}
.hero-visual::after{background: linear-gradient(rgb(234, 245, 251) 0%, transparent 22%);}
.visual-labels{right: 6%; top: 25%; gap: 6px;}
.visual-labels span{padding: 8px 11px; font-size: 12px;}
.hero-benefits{gap: 10px 15px; margin-top: 23px;}
.hero-benefits li{font-size: 12px;}
.hero .actions{gap: 22px;}
.hero .actions .link{font-size: 14px;}
.how-section h2{font-size: 25px;}
.how-steps{gap: 21px;}
.icon-ring{width: 49px; height: 49px;}
.how-step{gap: 12px;}
.how-step h3{font-size: 16px;}
.how-step p{font-size: 14px;}
 h2, .recognition h2{font-size: 28px;}
.section{padding: 38px 0px;}
.masthead{grid-template-columns: 1fr; gap: 0px;}
.masthead > div:first-child{padding: 27px 0px 20px;}
.page-hero h1{font-size: 34px;}
.page-hero .lead{font-size: 17px;}
.masthead-art{height: 155px; margin: 0px 0px 27px 15px;}
.masthead-art img{object-position: 50% 55%;}
.masthead-icon{left: -15px; bottom: -10px; width: 51px; height: 51px;}
.breadcrumb{margin-bottom: 20px;}
.toc{columns: 1;}
.toc a{font-size: 14px;}
.prose h2{font-size: 26px;}
.prose{font-size: 16px;}
.two{grid-template-columns: 1fr;}
.inner-page .two > div:has(.checks){padding: 24px;}
.tech-line{padding: 20px 14px; gap: 8px; grid-template-columns: 1fr 22px 1fr;}
.tech-line h3{font-size: 18px;}
.tech-line p{font-size: 12px;}
.tech-result{font-size: 13px;}
.inner-page .tech-line{min-height: 145px;}
.hero .eyebrow{font-size: 11px;}
}
@media (prefers-reduced-motion: no-preference){
 .btn{transition: box-shadow 0.18s, background 0.18s;}
}
@media (max-width: 360px){
.hero h1{font-size: 40px;}
.tech-line h3{font-size: 16px;}
.hero-benefits{gap: 8px;}
}
.how-steps{grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 24px;}
.how-step{flex-wrap: wrap; align-content: start;}
.how-step > div{flex-basis: 100%;}
.how-step::after{display: none;}
.system-equation{padding: 28px; background: rgb(234, 243, 248); border-radius: 12px; display: grid; gap: 8px; text-align: center;}
.system-equation span{font-size: 18px; font-weight: 600; color: rgb(23, 50, 77);}
.system-equation b{color: rgb(0, 97, 160);}
.system-equation strong{border-top: 1px solid rgb(197, 220, 233); padding-top: 20px; margin-top: 12px; color: rgb(0, 97, 160); font-size: 21px;}
blockquote{border-left: 3px solid rgb(0, 97, 160); margin: 24px 0px; padding: 10px 24px; background: rgb(234, 243, 248);}
@media (max-width: 1000px){
.how-steps{grid-template-columns: repeat(2, minmax(0px, 1fr));}
}
@media (max-width: 650px){
.how-steps{grid-template-columns: 1fr;}
.how-step{display: grid; grid-template-columns: 24px 52px 1fr; gap: 12px;}
.how-step > div{grid-column: 3;}
.system-equation{padding: 24px 18px;}
.how-step h3{overflow-wrap: normal;}
}