.msww {
    --msww-bg:#f4f7fb; --msww-navy:#091c32; --msww-intro-text:#fff;
    --msww-card:#fff; --msww-ink:#10283f; --msww-muted:#4c6275; --msww-accent:#f1cb10;
    padding:clamp(48px,7vw,92px) clamp(20px,4vw,48px);
    background:var(--msww-bg); font-family:Inter,system-ui,sans-serif;
}
.msww *, .msww *::before { box-sizing:border-box; }
.msww-wrap { max-width:1200px; margin:auto; }
.msww-intro {
    display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,.55fr);
    column-gap:clamp(20px,5vw,70px); padding:clamp(24px,4vw,54px); border-radius:20px;
    color:var(--msww-intro-text);
    background:radial-gradient(ellipse at 100% 10%,#234b65,transparent 65%),var(--msww-navy);
}
.msww .msww-kicker { color:var(--msww-accent); margin:0 0 10px; font-size:.75rem; font-weight:750; letter-spacing:.12em; }
.msww h2 { grid-column:1; color:inherit; margin:0; font-size:clamp(1.95rem,4vw,3.45rem); line-height:1.08; letter-spacing:-.04em; text-wrap:balance; }
.msww-description { grid-column:1; margin:14px 0 0; max-width:55ch; line-height:1.6; }
.msww-actions { grid-area:1 / 2 / span 3; justify-self:end; align-self:center; display:flex; flex-wrap:wrap; gap:9px; }
.msww .msww-actions a { display:inline-flex; align-items:center; padding:10px 15px; min-height:44px; border-radius:8px; font-weight:700; font-size:.88rem; text-decoration:none; }
.msww .msww-primary { background:var(--msww-accent); color:#10243b; }
.msww .msww-secondary { border:1px solid #9db8cc7a; color:var(--msww-intro-text); }
.msww .msww-grid { position:relative; list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; padding:0; margin:clamp(22px,4vw,44px) 0 0; }
.msww-grid::before { content:''; position:absolute; inset:17px 16.66% auto; height:1px; background:#cbd9e6; }
.msww-step { position:relative; display:flex; flex-direction:column; min-width:0; margin:0; }
.msww-step-number {
    display:grid; place-items:center; align-self:center; width:35px; height:35px; margin-bottom:13px;
    border-radius:50%; background:var(--msww-navy); color:var(--msww-intro-text); font-weight:750;
}
.msww .msww-card { display:block; position:relative; flex:1; padding:20px; border:1px solid #dce6ee; border-radius:14px; color:var(--msww-ink); background:var(--msww-card); text-decoration:none; overflow-wrap:anywhere; }
.msww-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:10px; color:#6e5200; background:#fff1bd; }
.msww-icon svg { width:23px; height:23px; }
.msww h3 { color:inherit; margin:13px 0 6px; font-size:1.05rem; line-height:1.3; }
.msww-card-description { margin:0; color:var(--msww-muted); font-size:.9rem; line-height:1.55; }
.msww-arrow { position:absolute; top:20px; inset-inline-end:20px; }
.msww a:focus-visible { outline:2px solid #9e7700; outline-offset:3px; }
.msww-hover .msww-card:is(:hover,:focus-within) { border-color:#b69739; box-shadow:0 10px 25px #10283f13; }
.msww-hover .msww-actions a:hover { filter:brightness(1.12); }
@media (max-width:760px) {
    .msww .msww-grid { grid-template-columns:1fr; }
    .msww-grid::before { display:none; }
}
@media (max-width:700px) { .msww-intro { display:block; } .msww-actions { margin-top:20px; } }
@media (max-width:520px) {
    .msww .msww-grid { grid-template-columns:1fr; }
    .msww-step { flex-direction:row; align-items:flex-start; gap:10px; }
    .msww-step-number { align-self:flex-start; flex:none; margin:14px 0 0; }
}
@media (prefers-reduced-motion:no-preference) {
    .msww-entrance .msww-intro.msww-in-view, .msww-scroll .msww-step.msww-in-view { animation:msww-reveal .55s ease-out both; }
    .msww-scroll .msww-step.msww-in-view:nth-child(even) { animation-delay:.08s; }
    .msww-hover .msww-card { transition:translate .2s ease,border-color .2s ease,box-shadow .2s ease; }
    .msww-hover .msww-card:is(:hover,:focus-within) { translate:0 -3px; }
    @keyframes msww-reveal { from { opacity:.4; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
}

.msww {
    background:linear-gradient(180deg,#ffffff85,transparent 75%),var(--msww-bg);
}
.msww-intro {
    position:relative;
    isolation:isolate;
    overflow:hidden;
    border:1px solid #28475f;
    box-shadow:0 14px 35px #091c321c;
    background:
        radial-gradient(ellipse at 95% 20%,#23485d,transparent 60%),
        var(--msww-navy);
}
.msww-intro::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:linear-gradient(#c5e7ff12 1px,transparent 1px),
               linear-gradient(90deg,#c5e7ff12 1px,transparent 1px);
    background-size:32px 32px;
    mask-image:linear-gradient(90deg,transparent 25%,#000);
}
.msww .msww-kicker { display:flex; align-items:center; gap:9px; }
.msww-kicker::before { content:""; width:16px; height:2px; background:currentColor; }
.msww-actions { justify-content:flex-end; }
.msww .msww-secondary { background:#091c3255; }
.msww .msww-grid { gap:clamp(12px,1.6vw,22px); }
.msww-grid::before {
    inset-block-start:19px;
    background:linear-gradient(90deg,#c4d4e4,#b99c48,#c4d4e4);
}
.msww-step-number {
    width:39px;
    height:39px;
    margin-bottom:16px;
    color:var(--msww-ink);
    background:var(--msww-card);
    border:1px solid #c5d2df;
    box-shadow:0 0 0 5px var(--msww-bg);
    font-variant-numeric:tabular-nums;
}
.msww .msww-card {
    padding:clamp(17px,2vw,25px);
    border-radius:16px;
    box-shadow:0 4px 14px #10283f08;
}
.msww-icon { width:44px; height:44px; border:1px solid #e9d58b; border-radius:11px; }
.msww h3 { margin:15px 0 7px; }
.msww-hover .msww-card:is(:hover,:focus-within) { box-shadow:0 10px 25px #10283f18; }
.msww-hover .msww-step:is(:hover,:focus-within) .msww-step-number { border-color:var(--msww-accent); }
@media (max-width:700px) {
    .msww-actions { justify-content:flex-start; }
}
@media (max-width:520px) {
    .msww-step-number { width:32px; height:32px; margin:13px 0 0; box-shadow:none; }
}
