.dx-solution-page { background: #fff; color: #203554; }
.dx-solution-page :is(a, summary):focus-visible { outline: 3px solid #2665b0; outline-offset: 4px; }
.dx-solution-hero { padding: 28px 0 60px; background: radial-gradient(ellipse at 92% 20%, #e9f5f1, transparent 48%), #f7faff; border-bottom: 1px solid #e2eaf2; }
.dx-solution-breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; color: #60728b; font-size: 12px; }
.dx-solution-breadcrumbs a { color: #315984; }
.dx-solution-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(25px, 5vw, 70px); }
.dx-solution-hero h1 { margin: 12px 0 20px; color: #192e54; font-size: clamp(34px, 4.2vw, 58px); line-height: 1.08; letter-spacing: -.045em; }
.dx-solution-hero__grid > div > p:not(.dx-eyebrow) { max-width: 660px; color: #576c86; font-size: 17px; line-height: 1.75; }
.dx-solution-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin: 26px 0; }
.dx-solution-actions > a:not(.dx-button) { color: #305784; font-size: 13px; font-weight: 750; }
.dx-solution-hero ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.dx-solution-hero li { padding: 6px 10px; border: 1px solid #dbe6ee; border-radius: 7px; color: #4d6684; font-size: 11px; background: #fff; }
.dx-solution-hero figure { margin: 0; padding: clamp(14px, 2vw, 28px); border: 1px solid #dbe6ee; border-radius: 22px; background: #fff; box-shadow: 0 18px 45px #25425e09; }
.dx-solution-hero img { display: block; width: 100%; height: auto; }
.dx-solution-hero figcaption { margin-top: 14px; color: #62758d; font-size: 11px; line-height: 1.5; text-align: center; }
.dx-solution-body { max-width: 1200px; padding-block: 52px; }
.dx-solution-body h2, .dx-solution-close h2 { margin: 8px 0 18px; color: #1b3156; font-size: clamp(26px, 3vw, 38px); line-height: 1.2; letter-spacing: -.035em; }
.dx-solution-body p { color: #566b84; line-height: 1.75; }
.dx-solution-answer { max-width: 900px; padding: 0 0 40px; }
.dx-solution-answer > p:last-child { font-size: 17px; }
.dx-solution-section { padding-block: 38px; border-top: 1px solid #e5ebf2; scroll-margin-top: 115px; }
.dx-solution-section header { margin-bottom: 25px; }
.dx-solution-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.dx-solution-steps li { min-width: 0; padding: 20px; border: 1px solid #dfe7f0; border-radius: 16px; background: #f9fbfe; }
.dx-solution-steps li > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: #e9f2fc; color: #316295; font-size: 11px; font-weight: 800; }
.dx-solution-steps h3, .dx-solution-features h3 { margin: 17px 0 8px; font-size: 18px; line-height: 1.35; color: #20385b; }
.dx-solution-steps p { margin: 0; font-size: 13px; }
.dx-solution-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.dx-solution-features article { padding: 24px; border: 1px solid #e0e9ed; border-radius: 16px; background: linear-gradient(125deg, #f4faf7, #fff); }
.dx-solution-features article:nth-child(even) { background: linear-gradient(125deg, #f6f3fb, #fff); }
.dx-solution-features h3 { margin-top: 0; }
.dx-solution-features p { margin: 0; font-size: 14px; }
.dx-solution-fit { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); align-items: start; gap: 32px; }
.dx-solution-fit aside { padding: 24px; border: 1px solid #dce7ee; border-radius: 16px; background: #f6f9fd; }
.dx-solution-fit aside h3 { margin: 0; font-size: 18px; }
.dx-solution-fit aside p { font-size: 13px; }
.dx-solution-fit a { color: #305d8c; font-weight: 700; font-size: 13px; }
.dx-solution-resources > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.dx-solution-resources > div > a { display: flex; flex-direction: column; gap: 10px; padding: 22px; border: 1px solid #dbe5ef; border-radius: 14px; background: #fbfcff; color: #244b76; }
.dx-solution-resources > div > a:hover { border-color: #89aac8; }
.dx-solution-resources a > span { color: #687d97; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.dx-solution-resources strong { font-size: 17px; line-height: 1.4; }
.dx-solution-resource-note { font-size: 12px; }
.dx-solution-faq { max-width: 950px; }
.dx-solution-faq details { padding: 0 18px; margin: 10px 0; border: 1px solid #dfe7f0; border-radius: 12px; background: #fff; }
.dx-solution-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; color: #234164; font-size: 15px; font-weight: 700; cursor: pointer; list-style: none; }
.dx-solution-faq summary::-webkit-details-marker { display: none; }
.dx-solution-faq summary > span { color: #537ca5; font-size: 20px; }
.dx-solution-faq details[open] summary > span { transform: rotate(45deg); }
.dx-solution-faq details > p { margin: 0 0 20px; font-size: 14px; }
.dx-solution-faq a { color: #305d8c; text-decoration: underline; }
.dx-solution-close { padding-block: 45px; background: #eff7f4; border-top: 1px solid #dceae5; }
.dx-solution-close .dx-container { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.dx-solution-close .dx-button { flex-shrink: 0; }
.dx-solution-close p:not(.dx-eyebrow) { margin-bottom: 0; color: #5b7380; }
@media (max-width: 1050px) { .dx-solution-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) { .dx-solution-hero__grid, .dx-solution-fit { grid-template-columns: minmax(0, 1fr); } .dx-solution-hero figure { max-width: 640px; } .dx-solution-close .dx-container { align-items: start; flex-direction: column; } }
@media (max-width: 560px) { .dx-solution-steps, .dx-solution-features, .dx-solution-resources > div { grid-template-columns: minmax(0, 1fr); } .dx-solution-breadcrumbs { margin-bottom: 28px; font-size: 11px; } .dx-solution-hero { padding-bottom: 36px; } .dx-solution-section { padding-block: 28px; } .dx-solution-body { padding-block: 32px; } .dx-solution-steps li { padding: 18px; } }
