@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700;800&display=swap');

:root {
    --spp-ink: #213468;
    --spp-muted: #5d6779;
    --spp-line: #dce2ea;
    --spp-blue: #006fbe;
    --spp-blue-dark: #00518c;
    --spp-gold: #f2bc2e;
    --spp-paper: #f6f8fb;
}

body.datax-single-product-prototype {
    margin: 0;
    color: #222329;
    background: #f4f4f4;
    font-family: "Nunito Sans", sans-serif;
    font-size: 16px;
}

.datax-single-product-prototype .spp-header a,
.datax-single-product-prototype .spp-shell a { color: inherit; }
.datax-single-product-prototype .spp-header svg,
.datax-single-product-prototype .spp-shell svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.spp-header { position: sticky; top: 0; z-index: 1000; border-bottom: 1px solid rgba(255,255,255,.09); color: #fff; background: rgba(17,29,49,.97); backdrop-filter: blur(16px); }
.spp-header-inner { width: min(1440px, calc(100% - 48px)); min-height: 76px; margin: auto; display: grid; grid-template-columns: 185px minmax(280px, 1fr) auto; gap: 28px; align-items: center; }
.spp-brand img { display: block; width: 160px; max-height: 48px; }
.spp-search { height: 43px; display: flex; overflow: hidden; border: 1px solid #cfd6e0; border-radius: 24px; background: #fff; }
.spp-search input { min-width: 0; flex: 1; border: 0; padding: 0 18px; color: var(--spp-ink); background: transparent; box-shadow: none; font: inherit; }
.spp-search input:focus { outline: 0; }
.spp-search button { width: 50px; border: 0; color: #fff; background: var(--spp-blue); cursor: pointer; }
.spp-search button svg { margin: auto; }
.spp-header-actions { display: flex; gap: 6px; align-items: center; }
.spp-menu { position: relative; }
.spp-menu summary, .spp-help { min-height: 44px; display: flex; gap: 7px; align-items: center; padding: 0 10px; border-radius: 9px; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; list-style: none; }
.spp-menu summary::-webkit-details-marker { display: none; }
.spp-menu summary:hover, .spp-help:hover { color: #fff; background: rgba(255,255,255,.1); }
.spp-menu-panel { position: absolute; top: calc(100% + 9px); right: 0; min-width: 210px; padding: 10px; border: 1px solid var(--spp-line); border-radius: 12px; background: #fff; box-shadow: 0 18px 45px rgba(23,33,56,.16); }
.spp-menu-panel a { display: block; padding: 9px 10px; border-radius: 7px; text-decoration: none; font-size: 13px; font-weight: 650; }
.spp-menu-panel a:hover { color: var(--spp-blue-dark); background: #edf7ff; }
.spp-preferences-panel > span { display: block; margin: 7px 7px 4px; color: var(--spp-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.spp-choice-row { display: flex; gap: 6px; margin-bottom: 7px; }
.spp-choice-row a, .spp-choice-row button { flex: 1; padding: 8px; border: 1px solid var(--spp-line); border-radius: 7px; color: var(--spp-ink); background: #fff; text-align: center; text-decoration: none; font: 700 12px/1 "Quicksand", sans-serif; cursor: pointer; }
.spp-choice-row .is-active { border-color: var(--spp-blue); color: #fff; background: var(--spp-blue); }

.spp-shell { width: 100%; margin: 0; padding: 0; }
.spp-product-overview { width: min(1440px, calc(100% - 52px)); margin: 34px auto 0; }
.spp-breadcrumb { margin: 0 0 10px; color: #70737c; font-size: 13px; }
.spp-breadcrumb a { color: var(--spp-blue-dark); font-weight: 700; text-decoration: none; }
.spp-title { margin: 0 0 25px; color: var(--spp-ink); font-size: 34px; font-weight: 700; line-height: 1.15; }
.spp-lead { margin-bottom: 34px; }
.spp-cover { display: none; overflow: hidden; margin: 0; border: 1px solid #d7d9df; border-radius: 8px; background: #fff; }
.spp-cover img { width: 100%; height: auto; display: block; aspect-ratio: 300/169; object-fit: cover; }
.spp-intro { max-width: 1120px; margin: 0; }
.spp-intro h2 { margin: 0 0 18px; color: #33363d; font-size: 17px; font-style: italic; font-weight: 400; line-height: 1.42; }
.spp-description > :first-child { margin-top: 0; }
.spp-description > :last-child { margin-bottom: 0; }
.spp-description p,
.spp-description li { color: #33363d; font-size: 17px; line-height: 1.42; }
.spp-description h2,
.spp-description h3,
.spp-description h4 { margin-bottom: 12px; color: var(--spp-ink); }
.spp-description a { color: var(--spp-blue); font-weight: 800; text-underline-offset: 3px; }
.spp-description ul { padding-left: 21px; }
.spp-details { display: grid; grid-template-columns: 170px 1fr; overflow: hidden; margin: 34px 0 0; border: 1px solid #d7d8dc; border-radius: 8px; background: #fff; font-size: 14px; line-height: 1.35; }
.spp-details dt,
.spp-details dd { margin: 0; padding: 10px 13px; border-bottom: 1px solid #ececef; }
.spp-details dt { color: var(--spp-ink); font-weight: 800; }
.spp-details dd { color: #33363d; }
.spp-details dt:nth-last-of-type(1),
.spp-details dd:last-child { border-bottom: 0; }

@media (min-width: 961px) {
    .spp-lead { display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: start; gap: 32px; }
    .spp-cover { display: block; }
    .spp-details { grid-column: 1 / -1; }
}

@media (min-width: 1280px) {
    .spp-lead { grid-template-columns: 300px minmax(0, 1fr) 380px; align-items: stretch; gap: 26px; }
    .spp-cover img { height: 100%; aspect-ratio: auto; object-fit: cover; object-position: left bottom; }
    .spp-details { grid-column: auto; grid-template-columns: 128px minmax(0, 1fr); align-self: stretch; margin: 0; }
    .spp-details dt,
    .spp-details dd { display: flex; align-items: center; padding: 9px 11px; }
    .spp-powerbi-frame { aspect-ratio: 16/9.5; }
}

.spp-powerbi { width: min(1440px, calc(100% - 52px)); margin: 10px auto 0; overflow: hidden; border: 5px solid #213468; border-radius: 10px; background: #fff; box-shadow: none; }
.spp-powerbi header { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 15px 22px; background: #213468; color: #fff; text-align: left; }
.spp-powerbi header span, .spp-purchase > header span { display: block; margin-bottom: 4px; color: #8ed8f5; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.spp-powerbi h2, .spp-purchase h2 { margin: 0; color: inherit; font-size: 21px; line-height: 1.2; }
.spp-powerbi-frame { aspect-ratio: 16/9; min-height: 0; }
.spp-powerbi iframe { width: 100%; height: 100%; display: block; border: 0; }
.spp-powerbi footer { padding: 13px 20px; border-top: 1px solid #dfe5ed; color: #4a5366; background: #f5f8fc; font-size: 13px; }
.spp-powerbi footer p { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 0; line-height: 1.4; text-align: center; }
.spp-powerbi footer a { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; padding: 7px 12px; border-radius: 999px; color: #fff; background: #169bd5; font-weight: 800; text-decoration: none; }
.spp-powerbi footer a:hover,
.spp-powerbi footer a:focus-visible { color: #fff; background: #213468; }

.spp-legacy-site { margin-top: 34px; }
.datax-single-product-prototype .spp-legacy-site,
.datax-single-product-prototype .spp-legacy-site .site-container,
.datax-single-product-prototype .spp-legacy-site .site-inner,
.datax-single-product-prototype .spp-legacy-site .content-sidebar-wrap,
.datax-single-product-prototype .spp-legacy-site .content,
.datax-single-product-prototype .spp-legacy-site .entry,
.datax-single-product-prototype .spp-legacy-site .entry-content,
.datax-single-product-prototype .spp-legacy-content,
.datax-single-product-prototype .spp-legacy-content .product,
.datax-single-product-prototype .spp-legacy-content .container-fluid,
.datax-single-product-prototype .spp-legacy-content .product-content { background: transparent; }
.datax-single-product-prototype .spp-legacy-site .site-inner { width: min(1440px, calc(100% - 52px)); max-width: none; margin: 0 auto; padding: 0; }
.datax-single-product-prototype .spp-legacy-content .container-fluid { padding-right: 0; padding-left: 0; }
.datax-single-product-prototype .spp-legacy-content .product .product-content { display: block; padding-top: 0 !important; padding-bottom: 0 !important; }
.spp-commercial-grid { display: grid; width: 100% !important; max-width: none !important; grid-template-columns: minmax(330px, .82fr) minmax(0, 1.18fr); gap: 26px; align-items: start; margin-right: 0 !important; margin-bottom: 34px; margin-left: 0 !important; font-family: "Nunito Sans", sans-serif; }
.spp-commercial-grid-purchase-only { grid-template-columns: minmax(0, 1fr); }
.spp-benefits-panel { min-width: 0; padding: 26px 28px; border: 1px solid #d7d8dc; border-radius: 8px; background: #fff; }
.spp-benefits-panel h2,
.spp-benefits-panel h3,
.spp-benefits-panel h4 { margin: 0 0 16px; color: #213468; font-size: 22px; font-weight: 700; line-height: 1.2; }
.spp-benefits-panel p,
.spp-benefits-panel li { color: #33363d; font-size: 17px; line-height: 1.42; }
.spp-benefits-panel ul { margin-bottom: 18px; padding-left: 21px; }
.spp-benefits-panel > :last-child { margin-bottom: 0; }
.spp-keywords-panel { min-width: 0; }
.spp-keywords-panel #product_catalog_terms { width: 100%; }
.spp-keywords-panel #product_catalog_terms > .text-center { min-height: 190px; border: 1px solid #d7d8dc; border-radius: 8px; background: #fff; }
.spp-purchase-panel { min-width: 0; overflow-x: auto; }
.spp-commercial-grid .spp-purchase-panel,
.spp-commercial-grid .spp-purchase-panel * { font-family: "Nunito Sans", sans-serif !important; }
.datax-single-product-prototype .spp-commercial-grid .spp-purchase-panel > .product-summary-section { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; }
.datax-single-product-prototype #product_catalog_terms .keywords-content { overflow: hidden; padding: 24px 20px; border: 1px solid #d7d8dc; border-radius: 8px; background: #fff; }
.datax-single-product-prototype #product_catalog_terms .keywords-content,
.datax-single-product-prototype #product_catalog_terms .keywords-content * { font-family: "Nunito Sans", sans-serif !important; }

.spp-after-grid { margin-top: 50px; display: grid; grid-template-columns: 1fr; gap: 30px; align-items: start; }
.spp-after-grid-purchase-only { grid-template-columns: 1fr; }
.spp-benefits, .spp-purchase, .spp-tags, .spp-related { border: 1px solid var(--spp-line); border-radius: 18px; background: #fff; }
.spp-benefits { padding: 30px; }
.spp-benefits h2, .spp-tags h2, .spp-related > h2 { margin: 0 0 20px; color: var(--spp-ink); font-size: 27px; }
.spp-rich-text { color: #354056; font-size: 15px; line-height: 1.72; }
.spp-rich-text > :first-child { margin-top: 0; }
.spp-rich-text > :last-child { margin-bottom: 0; }
.spp-rich-text ul { padding-left: 19px; }
.spp-rich-text li { margin-bottom: 8px; }
.spp-purchase { overflow: hidden; }
.spp-purchase > header { padding: 25px 28px; color: #fff; background: var(--spp-ink); }
.spp-purchase-legacy { padding: 0 24px 22px; }
.spp-purchase-legacy .product-summary-section { width: 100%; padding: 0; }
.spp-purchase-legacy .product-summary-section > .row { margin-right: 0; margin-left: 0; }
.spp-purchase-legacy .share-social-networks { margin-top: 22px; }
.spp-purchase-legacy .pbi-minimal-wrapper { display: none !important; }

.spp-tags { margin-top: 42px; padding: 28px 30px; }
.spp-tags > div { display: flex; flex-wrap: wrap; gap: 9px; }
.spp-tag { display: inline-flex; padding: 8px 13px; border-radius: 999px; font-size: 12px; font-weight: 750; }
.spp-tag-1 { color: #0b6547; background: #dff7ed; }
.spp-tag-2 { color: #075b91; background: #dcefff; }
.spp-tag-3 { color: #77520a; background: #fff0bd; }
.spp-tag-4 { color: #70426f; background: #f3e2f4; }
.spp-related { margin-top: 42px; padding: 30px; }
.spp-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.spp-related article { overflow: hidden; border: 1px solid var(--spp-line); border-radius: 14px; background: #fff; }
.spp-related-image { aspect-ratio: 16/9; display: block; overflow: hidden; background: var(--spp-paper); }
.spp-related-image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .25s ease; }
.spp-related article:hover img { transform: scale(1.035); }
.spp-related article > div { padding: 18px; }
.spp-related h3 { margin: 0 0 12px; color: var(--spp-ink); font-size: 16px; line-height: 1.35; }
.spp-related h3 a { text-decoration: none; }
.spp-related article span { display: inline-flex; padding: 5px 9px; border-radius: 999px; color: #075b91; background: #dcefff; font-size: 11px; font-weight: 800; }

.spp-footer { padding: 34px max(24px, calc((100% - 1240px)/2)); display: flex; justify-content: space-between; gap: 20px; color: #dbe6f1; background: #111d31; font-size: 13px; }
.spp-footer nav { display: flex; flex-wrap: wrap; gap: 22px; }
.spp-footer a { color: #fff; text-decoration: none; }
.spp-footer p { margin: 0; }

@media (max-width: 1050px) {
    .spp-header-inner { grid-template-columns: 150px 1fr; }
    .spp-header-actions { grid-column: 1 / -1; justify-content: flex-end; padding-bottom: 10px; }
    .spp-brand img { width: 135px; }
    .spp-after-grid { grid-template-columns: 1fr; }
    .spp-commercial-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .spp-header-inner { width: min(calc(100% - 28px), 1240px); }
    .spp-header-inner { grid-template-columns: 1fr auto; gap: 10px; padding-top: 10px; }
    .spp-search { grid-column: 1 / -1; grid-row: 2; }
    .spp-header-actions { grid-row: 1; grid-column: 2; padding: 0; }
    .spp-header-actions span, .spp-help span { display: none; }
    .spp-menu summary, .spp-help { padding: 0 8px; }
    .spp-menu-panel { position: fixed; top: 62px; right: 14px; }
    .spp-product-overview { width: min(calc(100% - 28px), 1440px); margin-top: 26px; }
    .spp-title { margin-bottom: 25px; font-size: 28px; }
    .spp-intro h2 { font-size: 16px; }
    .spp-description p,
    .spp-description li { font-size: 16px; }
    .spp-details { grid-template-columns: 120px minmax(0, 1fr); margin-top: 26px; font-size: 13px; }
    .spp-details dt,
    .spp-details dd { padding: 9px 10px; }
    .spp-powerbi { width: min(calc(100% - 28px), 1440px); margin-top: 10px; }
    .spp-powerbi header { min-height: 0; align-items: flex-start; flex-direction: column; gap: 10px; padding: 15px 16px; }
    .spp-powerbi h2 { font-size: 18px; }
    .spp-powerbi-frame { min-height: 0; aspect-ratio: 16/9; }
    .spp-powerbi footer { padding: 14px 21px; }
    .datax-single-product-prototype .spp-legacy-site .site-inner { width: min(calc(100% - 28px), 1440px); }
    .spp-benefits-panel { padding: 21px 18px; }
    .spp-benefits-panel h2,
    .spp-benefits-panel h3,
    .spp-benefits-panel h4 { font-size: 23px; }
    .spp-after-grid { margin-top: 34px; }
    .spp-benefits, .spp-tags, .spp-related { padding: 22px; }
    .spp-purchase-legacy { padding: 0 12px 16px; overflow-x: auto; }
    .spp-related-grid { grid-template-columns: 1fr; }
    .spp-footer { flex-direction: column; }
}
