.sp-home {
    --sp-ink:#080f3e;
    --sp-blue:#2460ff;
    --sp-muted:#596985;
    --sp-pale:#eaf5ff;
    --sp-line:#e4edf7;
    --sp-benefits-edge:#bdd3fc;
    --sp-vendors-edge:#031a2e;
    --sp-protection-surface:#060d13;
    margin:0;
    background:#fff;
    color:var(--sp-ink);
    font-family:'Inter',sans-serif;
    font-size:16px;
    line-height:1.5
}
.sp-home * {
    box-sizing:border-box
}
.sp-home h1,.sp-home h2,.sp-home h3,.sp-home p {
    font-family:inherit;
    color:inherit;
    margin:0
}
.sp-home h1,.sp-home h2 {
    font-weight:700;
    letter-spacing:-.035em;
    line-height:1.12;
    text-wrap:balance
}
.sp-home h1 {
    font-size:clamp(36px,4.2vw,60px)
}
.sp-home h2 {
    font-size:clamp(28px,3vw,40px)
}
.sp-home h3 {
    font-size:17px;
    line-height:1.35;
    font-weight:600;
    letter-spacing:-.025em
}
.sp-home a {
    text-decoration:none;
    color:inherit
}
.sp-home p {
    color:var(--sp-muted)
}
.sp-home ::selection {
    background:#bfd8ff;
    color:#080f3e
}
.sp-home :focus-visible {
    outline:3px solid #1556ef;
    outline-offset:5px
}
.sp-wrap {
    width:min(1160px,88%);
    margin-inline:auto
}
.sp-icon {
    width:28px;
    height:28px;
    flex-shrink:0;
    color:var(--sp-blue)
}
.sp-brand {
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-size:24px;
    font-weight:700;
    letter-spacing:-.04em;
    white-space:nowrap
}
.sp-brand>.sp-icon {
    width:31px;
    height:38px;
    fill:var(--sp-blue);
    stroke:none
}
.sp-header {
    background:#e8f4ff;
    position:relative;
    top:0;
    left:0;
    right:0;
    z-index:5
}
.sp-header-inner {
    height:84px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px
}
.sp-header nav {
    display:flex;
    gap:35px;
    font-size:14px
}
.sp-header nav a:hover,.sp-footer a:hover {
    color:var(--sp-blue)
}
.sp-header-help {
    font-size:14px;
    border:1px solid var(--sp-blue);
    border-radius:7px;
    padding:8px 16px;
    background:#edf6ff99
}
.sp-menu {
    display:none
}
.sp-hero {
    position:relative;
    isolation:isolate;
    background:#e8f4ff;
    overflow:hidden
}
.sp-hero-photo {
    position:absolute;
    right:0;
    top:0;
    width:65%;
    height:100%;
    object-fit:cover;
    object-position:center 45%;
    z-index:-2
}
.sp-hero:after {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,#e8f4ff 0%,#e8f4ff 32%,#e8f4ffcc 43%,#e8f4ff00 63%);
    z-index:-1
}
.sp-hero-inner {
    min-height:470px;
    padding-top:130px;
    padding-bottom:62px;
    display:flex;
    align-items:center;
    position:relative
}
.sp-hero-copy {
    width:58%;
    max-width:660px
}
.sp-hero-copy p {
    font-size:19px;
    line-height:1.45;
    max-width:500px;
    margin:20px 0 27px
}
.sp-actions {
    display:flex;
    gap:16px;
    flex-wrap:wrap
}
.sp-button {
    min-height:48px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    padding:13px 23px;
    background:var(--sp-blue);
    color:#fff!important;
    border:1px solid var(--sp-blue);
    border-radius:7px;
    font-size:15px;
    font-weight:600;
    transition:background .18s
}
.sp-button .sp-icon {
    width:19px;
    height:19px;
    color:inherit
}
.sp-button:hover {
    background:#164bd4
}
.sp-button--outline {
    background:#ffffff50;
    color:#1246cd!important
}
.sp-button--outline:hover {
    background:#fff
}
.sp-button--outline .sp-icon {
    display:none
}
.sp-dashboard {
    position:absolute;
    right:-1%;
    top:105px;
    width:222px;
    padding:17px;
    background:#ffffffed;
    border-radius:14px;
    box-shadow:0 10px 30px #23396c12;
    font-size:12px
}
.sp-dashboard p {
    font-size:12px;
    margin-bottom:14px
}
.sp-dashboard a {
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 10px;
    border:1px solid #edf1f8;
    border-radius:7px;
    margin-top:5px;
    background:#ffffffa0
}
.sp-dashboard a .sp-icon {
    width:25px;
    height:25px
}
.sp-dashboard a span:last-child {
    margin-left:auto
}
.sp-audiences {
    background:#f1f1ff
}
.sp-audiences>.sp-wrap {
    display:grid;
    grid-template-columns:repeat(3,1fr)
}
.sp-audiences a {
    display:flex;
    align-items:center;
    gap:24px;
    padding:26px 0
}
.sp-audiences a+a {
    border-left:1px solid #b8cde5;
    padding-left:36px
}
.sp-icon-circle {
    width:70px;
    height:70px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#eaf5ff;
    flex-shrink:0
}
.sp-audiences .sp-icon-circle {
    background:#f7fbff;
    border:1px solid #fff
}
.sp-icon-circle>.sp-icon {
    width:36px;
    height:36px
}
.sp-audiences strong {
    display:flex;
    align-items:center;
    gap:12px;
    font-size:19px;
    font-weight:600
}
.sp-audiences strong .sp-icon {
    width:17px;
    height:17px;
    color:var(--sp-ink)
}
.sp-audiences a>span>span {
    font-size:14px;
    color:var(--sp-muted);
    display:block;
    margin-top:5px
}
.sp-benefits-band {
    --sp-blue:#1645c7;
    --sp-muted:#425574;
    --sp-line:#c6d6ed;
    background:
        linear-gradient(to top,var(--sp-benefits-edge) 0 40px,transparent 200px),
        radial-gradient(ellipse at top right,#eef0f7 0%,transparent 65%),
        linear-gradient(135deg,#b5cefc 0%,#d1dffd 55%,#bdd3fc 100%);
}
.sp-section-divider {
    --sp-divider-upper:var(--sp-benefits-edge);
    --sp-divider-lower:var(--sp-vendors-edge);
    background:var(--sp-divider-lower);
    line-height:0;
}
.sp-section-divider svg {
    display:block;
    width:100%;
    height:auto;
}
.sp-section-divider-upper { fill:var(--sp-divider-upper); }
.sp-section-divider-lower { fill:var(--sp-divider-lower); }
.sp-section-divider--vendors {
    --sp-divider-upper:var(--sp-vendors-edge);
    --sp-divider-lower:var(--sp-protection-surface);
}
.sp-benefits {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    grid-template-areas:"intro visual" "benefits visual";
    gap:40px 52px;
    padding-block:120px 80px;
}
.sp-benefits-intro { grid-area:intro; }
.sp-home .sp-benefits-label {
    color:var(--sp-blue);
    font-size:12px;
    font-weight:600;
    letter-spacing:.06em;
    margin-bottom:16px;
}
.sp-home .sp-benefits-intro h2 { font-size:clamp(30px,3vw,44px); line-height:1.15; }
.sp-home .sp-benefits-intro h2+p { margin-top:22px; font-size:17px; line-height:1.6; }
.sp-benefits-intro .sp-actions { margin-top:26px; gap:12px; }
.sp-benefits-intro .sp-button { font-size:13px; padding:12px 16px; gap:10px; }
.sp-benefits-intro .sp-button--outline .sp-icon { display:block; }
.sp-benefits-list { grid-area:benefits; align-self:start; }
.sp-home .sp-benefits-list>h3 { margin-bottom:20px; font-size:20px; }
.sp-benefits-item { position:relative; border-top:1px solid var(--sp-line); padding:22px 0 22px 24px; }
.sp-benefits-item:last-child { border-bottom:1px solid var(--sp-line); }
.sp-benefits-item::before {
    content:"";
    position:absolute;
    left:0;
    top:22px;
    bottom:22px;
    width:3px;
    border-radius:2px;
    background:var(--sp-blue);
    opacity:0;
    transition:opacity .25s;
}
.sp-benefits-item.is-active::before { opacity:1; }
.sp-home .sp-benefits-item h4 { margin:0; font-family:inherit; }
.sp-benefits-item button {
    display:block;
    width:100%;
    padding:0;
    border:0;
    background:transparent;
    text-align:left;
    font:inherit;
    cursor:pointer;
}
.sp-benefit-title { display:block; font-size:21px; line-height:1.35; font-weight:500; letter-spacing:-.025em; color:var(--sp-muted); transition:color .25s; }
.sp-benefits-item.is-active .sp-benefit-title,.sp-benefits-item button:hover .sp-benefit-title { color:var(--sp-blue); }
.sp-home .sp-benefits-item>p { margin-top:16px; font-size:15px; line-height:1.6; color:var(--sp-ink); }
.sp-benefits-visual { grid-area:visual; position:relative; overflow:hidden; min-height:720px; border-radius:16px; background:var(--sp-pale); }
.sp-benefits-visual>img {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    opacity:0;
    transition:opacity .3s cubic-bezier(.16,1,.3,1);
}
.sp-benefits-visual>img.is-active { opacity:1; }
.sp-benefits-caption { position:absolute; padding:9px 13px; border:0; border-radius:4px; background:#fff; color:var(--sp-ink); font-size:12px; line-height:1.4; }
.sp-benefits-caption { top:24px; left:24px; max-width:calc(100% - 48px); }
@media(max-width:1000px) {
    .sp-benefits { gap:32px; padding-block:90px 60px; }
    .sp-benefit-title { font-size:19px; }
}
@media(max-width:700px) {
    .sp-benefits { grid-template-columns:1fr; grid-template-areas:"intro" "visual" "benefits"; gap:30px; padding-block:64px 48px; }
    .sp-benefits-visual { min-height:0; aspect-ratio:4/3; }
    .sp-benefits-caption { top:16px; left:16px; max-width:calc(100% - 32px); }
    .sp-benefits-item { padding-block:20px; }
}
@media(prefers-reduced-motion:reduce) {
    .sp-benefits-visual>img,.sp-benefits-item::before,.sp-benefit-title { transition:none; }
}
/* One connected platform, using the supplied vendor hub artwork. */
.sp-vendors {
    overflow: hidden;
    background:
        linear-gradient(to bottom,var(--sp-vendors-edge) 0 40px,transparent 200px),
        linear-gradient(to top,var(--sp-vendors-edge) 0 40px,transparent 200px),
        radial-gradient(ellipse at 100% 0%, #074498 0%, #072950 34%, transparent 72%),
        linear-gradient(110deg, #031a2e, #062447);
    color: #fff;
}
.sp-vendors-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr);
    align-items: center;
    gap: 24px;
    width: min(1580px, 90%);
    min-height: clamp(480px, 32.4vw, 564px);
}
.sp-vendors-copy { position: relative; z-index: 1; min-width: 0; padding-block: 48px; }
.sp-home .sp-vendors-label {
    margin-bottom: 16px;
    color: #accdf5;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .18em;
}
.sp-home .sp-vendors-copy h2 {
    color: #fff;
    font-size: clamp(30px, 3.1vw, 50px);
    line-height: 1.15;
    letter-spacing: -.025em;
    text-wrap: initial;
}
.sp-home .sp-vendors-description {
    max-width: 590px;
    margin-top: 20px;
    color: #c2d6f0;
    font-size: clamp(16px, 1.3vw, 21px);
    line-height: 1.5;
}
.sp-vendors .sp-vendors-button {
    margin-top: 24px;
    padding: 14px 28px;
    border: 1px solid #fff;
    border-radius: 12px;
    background: #f7f9ff;
    color: #0860f8!important;
    font-size: 17px;
    font-weight: 600;
}
.sp-vendors .sp-vendors-button:hover { background: #dceaff; border-color: #dceaff; }
.sp-vendors-button .sp-icon { width: 22px; height: 22px; color: currentColor; }
.sp-vendors-art {
    position: relative;
    min-width: 0;
    width: calc(100% + 5vw);
    aspect-ratio: 1100 / 564;
}
.sp-vendors-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
    /* Blend the supplied graphic into the band and mask its original copy. */
    mask-image:
        linear-gradient(90deg, transparent, #000 6%),
        linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent),
        radial-gradient(ellipse 10% 20% at 0% 57%, transparent 80%, #000 100%);
    mask-composite: intersect;
}
@media (max-width: 1100px) {
    .sp-vendors-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px; }
    .sp-home .sp-vendors-label { font-size: 11px; letter-spacing: .12em; }
    .sp-vendors .sp-vendors-button { font-size: 15px; padding: 12px 22px; }
}
@media (max-width: 800px) {
    .sp-vendors-inner { grid-template-columns: 1fr; gap: 30px; width: 89%; padding-block: 48px 30px; }
    .sp-vendors-copy { max-width: 620px; padding-block: 0; }
    .sp-home .sp-vendors-copy h2 { font-size: clamp(30px, 6vw, 44px); }
    .sp-home .sp-vendors-description { font-size: 17px; }
    .sp-vendors-art { width: calc(100% + 11vw); margin-left: -5.5vw; }
}
/* Image-led protection rows; native scrolling keeps every card usable without JS. */
.sp-protection {
    background:var(--sp-protection-surface);
    color:#f5f8ff;
    padding-block:12px 48px;
}
.sp-protection-inner { width:min(1280px,92%); }
.sp-protection-row { padding-block:38px 24px; }
.sp-protection-row+.sp-protection-row { border-top:1px solid #1c2935; padding-top:48px; }
.sp-protection-heading {
    display:grid;
    grid-template-columns:minmax(0,1.45fr) minmax(0,.95fr) auto;
    align-items:end;
    gap:28px;
    margin-bottom:26px;
}
.sp-home .sp-protection-label {
    color:#42a5ff;
    font-size:12px;
    font-weight:600;
    letter-spacing:.025em;
    margin-bottom:12px;
}
.sp-home .sp-protection-heading h2 {
    color:#f5f8ff;
    font-size:clamp(29px,3.25vw,46px);
    line-height:1.08;
    letter-spacing:-.035em;
    text-wrap:initial;
}
.sp-protection-heading h2 span { color:#c0ddff; }
.sp-home .sp-protection-intro {
    color:#c2ccd6;
    font-size:14px;
    line-height:1.55;
    max-width:340px;
    padding-bottom:3px;
}
.sp-protection-controls { display:flex; gap:12px; padding-bottom:5px; }
.sp-protection-arrow {
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    padding:0;
    border:1px solid #216bd5;
    border-radius:50%;
    background:#0748ba;
    color:#fff;
    cursor:pointer;
    transition:background .2s;
}
.sp-protection-arrow svg { width:21px; height:21px; }
.sp-protection-arrow--previous svg { transform:rotate(180deg); }
.sp-protection-arrow:hover:not(:disabled) { background:#1263ec; }
.sp-protection-arrow:disabled {
    background:#101a23;
    color:#8291a1;
    border-color:#1c2935;
    cursor:default;
}
.sp-protection-track {
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:calc((100% - 48px)/4);
    gap:16px;
    margin:0;
    padding:0;
    list-style:none;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
}
.sp-protection-track::-webkit-scrollbar { display:none; }
.sp-protection-card {
    position:relative;
    min-width:0;
    aspect-ratio:2 / 3;
    overflow:hidden;
    border:1px solid #20303f;
    border-radius:14px;
    background:#0b151e;
    scroll-snap-align:start;
}
.sp-protection-card>a { display:block; height:100%; position:relative; }
.sp-protection-art {
    position:absolute;
    inset:0;
    background-image:url('../img/protection/protection-atlas.webp');
    background-size:400% 200%;
    background-position:var(--art-x) var(--art-y);
    background-repeat:no-repeat;
}
.sp-protection-card>a::after {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,#08121bee 0%,#08121bd9 25%,#08121b5c 42%,transparent 65%);
    pointer-events:none;
}
.sp-protection-card-copy { position:relative; z-index:1; padding:20px 16px; }
.sp-home .sp-protection-card h3 {
    display:flex;
    align-items:center;
    gap:12px;
    min-height:40px;
    color:#fff;
    font-size:15px;
    font-weight:600;
    line-height:1.25;
    letter-spacing:-.025em;
}
.sp-protection-icon {
    flex-shrink:0;
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    background:#075bf0;
    border-radius:9px;
    color:#fff;
}
.sp-protection-icon svg { width:25px; height:25px; }
.sp-home .sp-protection-card-copy p {
    color:#d0d9e5;
    margin-top:14px;
    font-size:14px;
    line-height:1.5;
}
.sp-protection-card:hover { border-color:#4887dd; }
.sp-protection-card>a:focus-visible { outline:3px solid #70b5ff; outline-offset:-4px; border-radius:13px; }
.sp-protection-pagination { display:flex; gap:14px; justify-content:center; margin-top:20px; }
.sp-protection-pagination[hidden] { display:none; }
.sp-protection-dot {
    display:grid;
    place-items:center;
    width:24px;
    height:24px;
    border:0;
    padding:0;
    background:transparent;
    cursor:pointer;
}
.sp-protection-dot::after { content:''; width:7px; height:7px; border-radius:50%; background:#728195; }
.sp-protection-dot[aria-current="true"]::after { background:#1678ff; width:9px; height:9px; }
.sp-protection-status { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.sp-home .sp-protection-note { color:#9cabbc; font-size:12px; margin-top:8px; }
@media (max-width:1000px) {
    .sp-protection-heading { grid-template-columns:minmax(0,1fr) auto; gap:20px; }
    .sp-protection-intro { grid-column:1; grid-row:2; }
    .sp-protection-controls { grid-column:2; grid-row:1 / 3; align-self:end; }
    .sp-protection-track { grid-auto-columns:calc((100% - 16px)/2); }
    .sp-protection-card { aspect-ratio:3 / 4; }
}
@media (max-width:600px) {
    .sp-protection { padding-bottom:32px; }
    .sp-protection-row { padding-block:28px 24px; }
    .sp-protection-row+.sp-protection-row { padding-top:32px; }
    .sp-protection-heading { column-gap:14px; }
    .sp-home .sp-protection-heading h2 { font-size:clamp(27px,7.3vw,36px); }
    .sp-protection-heading>div:first-child { grid-column:1 / -1; }
    .sp-protection-controls { grid-row:2; }
    .sp-home .sp-protection-label { font-size:10px; }
    .sp-home .sp-protection-intro { font-size:13px; }
    .sp-protection-arrow { width:44px; height:44px; }
    .sp-protection-controls { gap:8px; }
    .sp-protection-track { grid-auto-columns:86%; }
    .sp-protection-card { aspect-ratio:2 / 3; }
    .sp-home .sp-protection-card h3 { font-size:17px; }
    .sp-protection-card-copy { padding:20px; }
}
@media (prefers-reduced-motion:reduce) {
    .sp-protection-arrow { transition:none; }
}

.sp-faq {
    padding-block:28px 20px
}
.sp-faq h2 {
    text-align:center;
    font-size:32px;
    margin-bottom:20px
}
.sp-faq details {
    border:1px solid var(--sp-line);
    border-radius:5px;
    margin:5px 0;
    overflow:hidden
}
.sp-faq summary {
    display:flex;
    align-items:center;
    gap:19px;
    list-style:none;
    padding:10px 18px;
    cursor:pointer;
    font-size:15px;
    font-weight:600
}
.sp-faq summary::-webkit-details-marker {
    display:none
}
.sp-faq summary:before {
    content:'⌄';
    font-size:17px;
    color:var(--sp-blue)
}
.sp-faq summary:after {
    content:'+';
    font-size:22px;
    line-height:1;
    font-weight:400;
    margin-left:auto
}
.sp-faq details[open] summary:after {
    content:'−'
}
.sp-faq details>p {
    font-size:14px;
    padding:15px 48px;
    background:#f0f7ff
}

.sp-footer {
    background:#142f50;
    color:#fff;
    padding:26px 0 35px
}
.sp-footer>.sp-wrap {
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    column-gap:45px;
    align-items:center
}
.sp-footer .sp-brand {
    grid-column:1;
    grid-row:1;
    font-size:24px
}
.sp-footer>.sp-wrap>p {
    grid-column:1;
    grid-row:2;
    font-size:12px;
    color:#d2deec;
    padding-left:40px
}
.sp-footer nav {
    flex-wrap:wrap;
    justify-content:center;
    grid-column:2;
    grid-row:1 / 3;
    display:flex;
    gap:12px 35px;
    font-size:13px
}
.sp-footer-legal {
    grid-column:3;
    grid-row:1 / 3;
    display:flex;
    gap:18px;
    justify-content:flex-end;
    font-size:11px;
    color:#c0cfe2
}
@media(min-width:1500px) {
    .sp-hero-inner {
        min-height:560px
    }
}
@media(max-width:1000px) {
    .sp-wrap {
        width:91%
    }
    .sp-header nav {
        gap:22px
    }
    .sp-brand {
        font-size:21px
    }
    .sp-dashboard {
        width:185px;
        right:0;
        font-size:10px;
        padding:12px
    }
    .sp-dashboard a {
        gap:8px;
        padding:10px 5px
    }
    .sp-dashboard a .sp-icon {
        width:20px
    }
    .sp-hero-copy {
        width:65%
    }
    .sp-hero-copy p {
        max-width:410px;
        font-size:17px
    }
    .sp-hero-inner {
        min-height:435px
    }
    .sp-audiences a {
        gap:15px
    }
    .sp-audiences a+a {
        padding-left:20px
    }
    .sp-audiences strong {
        font-size:17px
    }
    .sp-audiences .sp-icon-circle {
        width:60px;
        height:60px
    }

    .sp-footer>.sp-wrap {
        column-gap:20px
    }
    .sp-footer nav {
        gap:20px
    }
}
@media(max-width:700px) {
    .sp-wrap {
        width:89%
    }
    .sp-header-inner {
        height:74px;
        gap:12px
    }
    .sp-brand {
        font-size:21px
    }
    .sp-header-help {
        font-size:11px;
        padding:7px 9px;
        margin-left:auto
    }
    .sp-menu {
        display:flex;
        order:3;
        flex-direction:column;
        gap:4px;
        padding:8px;
        background:none;
        border:0;
        color:var(--sp-ink)
    }
    .sp-menu span {
        height:2px;
        width:21px;
        background:currentColor
    }
    .sp-header nav {
        display:none;
        position:absolute;
        top:67px;
        left:5.5%;
        right:5.5%;
        padding:22px;
        background:#fff;
        border:1px solid var(--sp-line);
        border-radius:10px;
        box-shadow:0 10px 25px #142f501a
    }
    .sp-header nav.is-open {
        display:flex;
        flex-direction:column;
        gap:18px
    }
    .sp-hero-inner {
        padding-top:30px;
        padding-bottom:250px;
        min-height:546px;
        align-items:flex-start
    }
    .sp-hero-copy {
        width:100%;
        max-width:none
    }
    .sp-home h1 {
        font-size:clamp(33px,8.5vw,49px)
    }
    .sp-hero-copy p {
        font-size:16px;
        max-width:420px;
        margin:18px 0 23px
    }
    .sp-button {
        font-size:13px;
        padding:12px 17px;
        gap:12px;
        min-height:45px
    }
    .sp-actions {
        gap:10px
    }
    .sp-hero-photo {
        top:auto;
        bottom:0;
        width:100%;
        height:300px;
        object-position:center 48%
    }
    .sp-hero:after {
        background:linear-gradient(180deg,#e8f4ff 0%,#e8f4ff 47%,#e8f4ff00 73%)
    }
    .sp-dashboard {
        display:none
    }
    .sp-audiences>.sp-wrap {
        grid-template-columns:1fr
    }
    .sp-audiences a {
        padding:17px 0;
        gap:20px
    }
    .sp-audiences a+a {
        padding-left:0;
        border-left:0;
        border-top:1px solid #e0ecf9
    }
    .sp-audiences .sp-icon-circle {
        height:52px;
        width:52px
    }
    .sp-audiences .sp-icon {
        width:29px;
        height:29px
    }
    .sp-audiences strong {
        font-size:17px
    }
    .sp-audiences strong .sp-icon {
        width:16px;
        height:16px
    }
    .sp-audiences a>span>span {
        font-size:13px;
        margin-top:2px
    }
    .sp-home h3 {
        font-size:16px
    }

    .sp-faq {
        padding-block:32px
    }
    .sp-faq h2 {
        font-size:28px
    }
    .sp-faq summary {
        font-size:13px;
        padding:12px;
        gap:10px
    }
    .sp-faq details>p {
        font-size:13px;
        padding:14px 30px
    }

    .sp-footer>.sp-wrap {
        grid-template-columns:1fr;
        gap:7px
    }
    .sp-footer nav {
        justify-content:flex-start;
        grid-column:1;
        grid-row:3;
        gap:25px;
        flex-wrap:wrap;
        margin-top:20px
    }
    .sp-footer-legal {
        grid-column:1;
        grid-row:4;
        justify-content:flex-start;
        margin-top:15px
    }
    .sp-footer>.sp-wrap>p {
        padding-left:40px
    }
    .sp-footer {
        padding-block:25px
    }
}
/* The home header occupies its own row above the hero photograph. */
body.sp-home {
    padding-top:0
}

/* Match the reference's continuous, panoramic hero composition. */
@media (min-width: 701px) {
    .sp-header-inner {
        height: 76px;
    }
    .sp-hero-photo {
        width: 100%;
        height: 100%;
        right: 0;
        object-position: center bottom;
    }
    .sp-hero:after {
        background: linear-gradient(90deg, #e8f4ff 0%, #e8f4ff 33%, rgba(232,244,255,.8) 42%, rgba(232,244,255,0) 54%);
    }
    .sp-hero-inner {
        min-height: clamp(360px, 33.333vw, 680px);
        padding-top: 70px;
        padding-bottom: 65px;
    }
    .sp-hero-copy {
        width: 55%;
        max-width: 680px;
    }
    .sp-hero h1 {
        font-size: clamp(36px, 4.35vw, 62px);
        line-height: 1.1;
        letter-spacing: -.04em;
        text-wrap: initial;
    }
    .sp-hero-copy p {
        max-width: 510px;
        margin: 18px 0 28px;
        font-size: 20px;
        line-height: 1.4;
    }
    .sp-dashboard {
        width: clamp(210px, 19vw, 270px);
        right: -2%;
        top: 94px;
        padding: 18px;
        font-size: 14px;
    }
    .sp-dashboard p {
        font-size: 13px;
    }
    .sp-dashboard a {
        padding: 15px 10px;
        gap: 14px;
    }
}
@media (min-width: 701px) and (max-width: 1000px) {
    .sp-header-inner { height: 68px; }
    .sp-hero-inner { padding-top: 47px; padding-bottom: 45px; }
    .sp-hero-copy { width: 57%; }
    .sp-hero-copy p { font-size: 16px; max-width: 370px; }
    .sp-dashboard { width: 190px; padding: 12px; font-size: 11px; top: 85px; }
    .sp-dashboard a { padding: 11px 5px; gap: 9px; }
    .sp-dashboard p { font-size: 11px; }
}
@media (max-width: 700px) {
    .sp-header { background: #e8f4ff; }
}
@media (min-width: 1001px) {
    .sp-header-inner,
    .sp-hero-inner {
        width: min(1280px, 88%);
    }
    .sp-hero-photo {
        object-position: left top;
    }
}

/* Photo-led home hero with navigation layered over the image. */
.sp-home {
    --sp-hero-inset: 32px;
    --sp-hero-frame: #e8f4ff;
    --sp-header-height: 84px;
    padding-top: var(--sp-hero-inset);
    background: var(--sp-hero-frame);
    /* Clip horizontal overflow without creating a sticky scroll container. */
    overflow-x: clip;
}
.sp-home .sp-header {
    position: sticky;
    top: 0;
    width: 100%;
    margin-inline: 0;
    background: transparent;
    color: #fff;
    transition: color .2s;
}
.sp-home .sp-header-inner { height: var(--sp-header-height); }
.sp-home .sp-header .sp-brand > .sp-icon { fill: currentColor; }
.sp-home .sp-header-help {
    display: inline-grid;
    place-items: center;
    color: inherit;
    border-color: currentColor;
    background: transparent;
    border-radius: 24px;
}
.sp-home .sp-header-help span { grid-area: 1 / 1; }
.sp-home .sp-header-help-hover { visibility: hidden; }
.sp-home .sp-header-help:is(:hover, :focus-visible) .sp-header-help-default { visibility: hidden; }
.sp-home .sp-header-help:is(:hover, :focus-visible) .sp-header-help-hover { visibility: visible; }
.sp-home .sp-header nav a:hover { text-decoration: underline; text-underline-offset: 5px; color: inherit; }
.sp-home .sp-header.is-scrolled {
    background: rgb(255 255 255 / 92%);
    color: var(--sp-ink);
    box-shadow: none;
}
.sp-home .sp-header :focus-visible,
.sp-home .sp-hero :focus-visible { outline-color: currentColor; }
.sp-home #main-content {
    /* Contain the hero's negative margin so the colored top inset stays visible. */
    display: flow-root;
    background: #fff;
}
.sp-home .sp-hero-frame {
    margin-top: calc(-1 * var(--sp-header-height));
    padding: 0 var(--sp-hero-inset) var(--sp-hero-inset);
    background: var(--sp-hero-frame);
}
.sp-home .sp-hero {
    margin: 0;
    border-radius: 24px;
    background: #142f50;
    color: #fff;
}
.sp-home .sp-hero-photo {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.sp-home .sp-hero:after { background: #040b20a6; }
.sp-home .sp-hero-inner {
    min-height: clamp(580px, 80svh, 820px);
    padding-top: calc(var(--sp-header-height) + 64px);
    padding-bottom: 64px;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
}
.sp-home .sp-hero-copy { width: 100%; max-width: 1000px; }
.sp-home .sp-hero h1 { color: #fff; font-size: clamp(36px, 4.35vw, 68px); text-wrap: balance; }
.sp-home .sp-hero-copy p { color: #fff; max-width: 700px; margin: 28px 0 40px; }
.sp-home .sp-hero-copy .sp-hero-label {
    margin: 0 0 20px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .06em;
}
.sp-home .sp-hero .sp-actions { justify-content: flex-start; }
.sp-home .sp-hero .sp-button { border-radius: 28px; }
.sp-home .sp-hero .sp-button--outline { background: transparent; color: #fff!important; border-color: #fff; }
.sp-home .sp-hero .sp-button--outline:hover { background: #fff; color: var(--sp-ink)!important; }
@media (max-width: 1000px) {
    .sp-home { --sp-header-height: 74px; }
}
@media (max-width: 700px) {
    .sp-home { --sp-hero-inset: 12px; }
    .sp-home .sp-hero { border-radius: 18px; }
    .sp-home .sp-hero-inner { min-height: 660px; min-height: min(760px, max(660px, 90svh)); padding-top: 130px; padding-bottom: 56px; }
    .sp-home .sp-hero-photo { object-position: 62% center; }
    .sp-home .sp-hero-copy p { margin: 24px 0 32px; font-size: 17px; }
    .sp-home .sp-menu { color: inherit; min-width: 44px; min-height: 44px; justify-content: center; align-items: center; }
    .sp-home .sp-header nav { top: var(--sp-header-height); color: var(--sp-ink); }
    .sp-home .sp-header .sp-brand { font-size: clamp(16px, 4.5vw, 21px); gap: 5px; }
    .sp-home .sp-header .sp-brand > .sp-icon { width: 24px; }
    .sp-home .sp-header-inner { width: 94%; gap: 8px; }
    .sp-home .sp-header-help { padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .sp-home .sp-header { transition: none; }
}

/* Keep audience links within the hero's light blue surround. */
.sp-home .sp-hero-frame .sp-audiences {
    background: var(--sp-hero-frame);
    padding-top: 8px;
}

/* Family protection, practical support, and expert services. */
.sp-family {
    position: relative;
    background: #fff;
}
.sp-family-photo {
    position: absolute;
    inset: 0 auto 0 0;
    width: 53%;
}
.sp-family-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.sp-family-photo:after {
    content: '';
    position: absolute;
    inset: 0 0 0 auto;
    width: 18%;
    background: linear-gradient(90deg, #fff0, #fff);
}
.sp-family-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 520px;
    align-items: center;
}
.sp-family-copy {
    position: relative;
    grid-column: 2;
    padding: 48px 0 48px 44px;
}
.sp-home .sp-guidance-label {
    margin-bottom: 12px;
    color: var(--sp-blue);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .09em;
    line-height: 1.5;
}
.sp-family h2 {
    font-size: clamp(28px, 2.6vw, 36px);
}
.sp-family-description {
    margin-top: 16px !important;
}
.sp-family-benefits {
    display: grid;
    gap: 22px;
    padding: 0;
    margin: 26px 0;
    list-style: none;
}
.sp-family-benefits li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.sp-guidance-icon {
    display: inline-flex;
    width: 58px;
    height: 58px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    color: var(--sp-blue);
    background: #e5f0ff;
}
.sp-guidance-icon .sp-icon {
    width: 30px;
    height: 30px;
}
.sp-family-benefits .sp-guidance-icon {
    width: 50px;
    height: 50px;
}
.sp-family-benefits h3 {
    margin-bottom: 4px;
    font-size: 16px;
}
.sp-family-benefits p {
    font-size: 15px;
    line-height: 1.5;
}
.sp-practical-support {
    padding: 52px 0 38px;
    background: #edf7ff;
}
.sp-guidance-heading {
    margin-bottom: 28px;
    text-align: center;
}
.sp-guidance-heading h2 {
    font-size: clamp(27px, 2.7vw, 36px);
}
.sp-guidance-heading > p:last-child {
    margin: 12px auto 0;
    max-width: 1000px;
}
.sp-practical-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.sp-practical-card {
    padding: 24px;
    border-radius: 14px;
    background: #fff;
}
.sp-practical-card h3 {
    margin: 14px 0 8px;
}
.sp-practical-card p {
    font-size: 15px;
    line-height: 1.5;
}
.sp-guidance-actions {
    justify-content: center;
    margin-top: 24px;
}
.sp-expertise {
    padding: 52px 0 44px;
    background: #fff;
}
.sp-expertise .sp-guidance-heading h2 {
    font-size: clamp(27px, 2.4vw, 34px);
}
.sp-expertise-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}
.sp-expertise-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex: 0 0 calc((100% - 42px) / 4);
    min-width: 0;
    padding: 20px 16px;
    border: 1px solid var(--sp-line);
    border-radius: 14px;
}
.sp-expertise-card:nth-child(n+5) {
    flex-basis: 27%;
}
.sp-expertise-card h3 {
    margin: 3px 0 8px;
    font-size: 15px;
}
.sp-expertise-card p {
    font-size: 14px;
    line-height: 1.5;
}
.sp-expertise-card .sp-guidance-icon {
    width: 50px;
    height: 50px;
}
@media (max-width: 1000px) {
    .sp-family-copy { padding-left: 28px; }
    .sp-practical-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sp-expertise-card,
    .sp-expertise-card:nth-child(n+5) { flex-basis: calc((100% - 14px) / 2); }
}
@media (max-width: 700px) {
    .sp-family-photo { position: relative; width: 100%; }
    .sp-family-photo img { height: auto; max-height: 420px; object-fit: cover; }
    .sp-family-photo:after { display: none; }
    .sp-family-inner { display: block; min-height: 0; }
    .sp-family-copy { padding: 32px 0 40px; }
    .sp-practical-support,
    .sp-expertise { padding: 40px 0; }
    .sp-guidance-heading { margin-bottom: 24px; }
    .sp-practical-card { padding: 20px; }
}
@media (max-width: 560px) {
    .sp-practical-grid { grid-template-columns: 1fr; }
    .sp-expertise-card,
    .sp-expertise-card:nth-child(n+5) { flex-basis: 100%; padding: 20px; }
    .sp-guidance-actions { flex-direction: column; align-items: stretch; gap: 12px; }
    .sp-family .sp-button { width: 100%; }
}

/* Credit monitoring and cyber-insurance guidance. */
.sp-financial {
    padding: 44px 0 32px;
    background: #edf7ff;
}
.sp-financial .sp-guidance-heading {
    margin-bottom: 24px;
}
.sp-financial-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}
.sp-financial-card {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    padding: 26px;
    border-radius: 14px;
    background: #fff;
}
.sp-financial-card > div { min-width: 0; }
.sp-financial-card .sp-guidance-icon {
    width: 76px;
    height: 76px;
}
.sp-financial-card .sp-icon {
    width: 38px;
    height: 38px;
}
.sp-financial-card h3 { margin: 4px 0 8px; }
.sp-financial-card p {
    font-size: 15px;
    line-height: 1.5;
}
.sp-home .sp-financial-note {
    margin-top: 16px;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}
.sp-financial .sp-guidance-actions { margin-top: 16px; }
@media (max-width: 700px) {
    .sp-financial { padding: 40px 0; }
    .sp-financial-grid { grid-template-columns: 1fr; gap: 16px; }
    .sp-financial-card { padding: 22px; gap: 16px; }
    .sp-financial-card .sp-guidance-icon { width: 58px; height: 58px; }
    .sp-financial-card .sp-icon { width: 30px; height: 30px; }
}