.mswd {
    --mswd-accent:#f1cb10; --mswd-bg:#fbf8ee; --mswd-navy:#07172b; --mswd-card:#fff;
    --mswd-ink:#10263b; --mswd-muted:#4a6073; --mswd-intro-text:#f5f8fb;
    padding:clamp(48px,7vw,96px) clamp(20px,4vw,48px);
    background:radial-gradient(ellipse at 0% 0%,#e8c65a26,transparent 58%),var(--mswd-bg); border-block:1px solid #dbc99552; font-family:Inter,system-ui,sans-serif;
}
.mswd *, .mswd *::before { box-sizing:border-box; }
.mswd-wrap {
    width:min(100%,1200px); margin-inline:auto; display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:clamp(18px,3vw,42px); align-items:stretch;
}
.mswd-intro {
    padding:clamp(26px,3.4vw,49px); border-radius:22px;
    display:flex; flex-direction:column; justify-content:center;
    background:radial-gradient(ellipse at 92% 3%,#203c53,transparent 62%),var(--mswd-navy);
    color:var(--mswd-intro-text);
}
.mswd .mswd-kicker { margin:0 0 17px; color:var(--mswd-accent); font-size:.76rem; font-weight:750; letter-spacing:.12em; text-transform:uppercase; }
.mswd h1 { margin:0; color:inherit; font-size:clamp(2rem,3.3vw,3.1rem); line-height:1.06; letter-spacing:-.045em; overflow-wrap:anywhere; text-wrap:balance; }
.mswd-description { margin:20px 0 0; line-height:1.65; }
.mswd-actions { display:flex; align-items:flex-start; flex-direction:column; gap:10px; margin-top:27px; }
.mswd .mswd-actions a { display:inline-flex; align-items:center; min-height:44px; padding:10px 15px; border-radius:8px; font-weight:700; text-decoration:none; }
.mswd .mswd-primary { background:var(--mswd-accent); color:#102035; }
.mswd .mswd-secondary { color:inherit; border:1px solid #ffffff45; }
.mswd-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.mswd .mswd-card {
    position:relative; display:block; min-width:0; padding:22px 28px 22px 20px;
    border:1px solid #e9e0cc; border-radius:15px; background:var(--mswd-card); box-shadow:0 3px 12px #46350008;
    color:var(--mswd-ink); text-decoration:none; overflow-wrap:anywhere;
}
.mswd-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:11px; color:#745700; background:#fff4c5; }
.mswd-icon svg { width:24px; height:24px; }
.mswd h3 { margin:13px 0 6px; color:inherit; font-size:1.05rem; line-height:1.3; }
.mswd-card-description { margin:0; color:var(--mswd-muted); font-size:.9rem; line-height:1.55; }
.mswd-arrow { position:absolute; top:21px; right:18px; font-size:1.2rem; }
.mswd a:focus-visible { outline:2px solid #ad7800; outline-offset:3px; }
.mswd-hover a.mswd-card:is(:hover,:focus-visible) { border-color:var(--mswd-accent); box-shadow:0 10px 28px #10263b12; }
.mswd-hover .mswd-actions a:hover { filter:brightness(1.12); }
@media (max-width:900px) { .mswd-wrap { grid-template-columns:1fr; } .mswd-actions { flex-direction:row; flex-wrap:wrap; } }
@media (max-width:520px) { .mswd-grid { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:no-preference) {
    .mswd-entrance .mswd-intro.mswd-in-view { animation:mswd-intro-in .68s cubic-bezier(.2,.75,.25,1) both; }
    .mswd-scroll .mswd-card.mswd-in-view { animation:mswd-card-in .55s cubic-bezier(.2,.75,.25,1) both; }
    .mswd-scroll .mswd-card.mswd-in-view:nth-child(even) { animation-delay:.075s; }
    .mswd-hover .mswd-card { transition:translate .22s ease,border-color .22s ease,box-shadow .22s ease; }
    .mswd-hover .mswd-icon, .mswd-hover .mswd-arrow { transition:background-color .22s ease,translate .22s ease; }
    .mswd-hover a.mswd-card:is(:hover,:focus-visible) { translate:0 -4px; box-shadow:0 14px 30px #46350016; }
    .mswd-hover a.mswd-card:is(:hover,:focus-visible) .mswd-icon { background:var(--mswd-accent); }
    .mswd-hover a.mswd-card:is(:hover,:focus-visible) .mswd-arrow { translate:2px -2px; }
    @keyframes mswd-intro-in { from { opacity:.25; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
    @keyframes mswd-card-in { from { opacity:.35; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
}

/* The introduction spans the section. The card grid establishes service priority. */
.mswd {
    background:var(--mswd-bg);
    border-block:0;
}
.mswd-wrap { display:block; }
.mswd-intro {
    position:relative;
    overflow:hidden;
    isolation:isolate;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(220px,.45fr);
    column-gap:clamp(24px,5vw,72px);
    padding:clamp(26px,4.8vw,64px);
}
.mswd-intro::after {
    content:"";
    position:absolute;
    z-index:-1;
    inset:0;
    pointer-events:none;
    background:radial-gradient(ellipse at 98% 8%,#d7b94b24,transparent 47%);
}
.mswd .mswd-kicker { grid-column:1; }
.mswd h1 { grid-column:1; max-width:19ch; text-wrap:pretty; }
.mswd-description { grid-column:1; max-width:58ch; }
.mswd-actions { grid-column:2; grid-row:1 / span 3; align-self:center; margin:0; }
.mswd-grid { margin-top:20px; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; }
.mswd .mswd-card {
    grid-column:span 2;
    border-radius:12px;
    padding:19px 36px 19px 19px;
    box-shadow:none;
}
.mswd .mswd-card-featured {
    grid-column:span 3;
    padding:25px 40px 25px 24px;
    border-top:3px solid var(--mswd-accent);
}
.mswd-card-featured h3 { font-size:1.3rem; }
.mswd-card-featured .mswd-card-description { max-width:42ch; }
.mswd .mswd-card:not(.mswd-card-featured) .mswd-icon { width:34px; height:34px; border-radius:8px; }
.mswd .mswd-card:not(.mswd-card-featured) .mswd-icon svg { width:19px; height:19px; }
@media (max-width:760px) {
    .mswd-intro { display:block; }
    .mswd-actions { margin-top:20px; }
    .mswd-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .mswd .mswd-card, .mswd .mswd-card-featured { grid-column:auto; }
}
@media (max-width:520px) {
    .mswd-grid { grid-template-columns:1fr; }
}

.mswd { --mswd-bg:#f1f5f9; }
.mswd-intro {
    border:1px solid #254159;
    background:radial-gradient(ellipse at 92% 3%,#193951,transparent 64%),var(--mswd-navy);
}
.mswd-intro::after {
    background:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);
    background-size:34px 34px;
    mask-image:linear-gradient(90deg,transparent 24%,#000);
}
.mswd .mswd-card { border-color:#dce5ee; }
.mswd .mswd-card-featured { border-top-color:var(--mswd-accent); }
@media (min-width:761px) {
    .mswd-grid:has(> :nth-child(6):last-child) .mswd-card:not(.mswd-card-featured) { grid-column:span 3; }
}

.mswd { --mswd-bg:#edf3f8; }
.mswd-intro {
    border-radius:20px;
    border-color:#203b52;
    box-shadow:0 12px 32px #07172b19;
    background:
        radial-gradient(ellipse at 86% 16%,#224a61 0%,transparent 60%),
        var(--mswd-navy);
}
.mswd-intro::after {
    background:
        repeating-radial-gradient(circle at 90% 50%,#c3e6ff17 0 1px,transparent 1px 44px);
    mask-image:linear-gradient(90deg,transparent 38%,#000);
}
.mswd h1 { max-width:22ch; }
.mswd-description { max-width:53ch; }
.mswd-actions { align-items:stretch; justify-self:end; width:min(100%,230px); }
.mswd .mswd-actions a { justify-content:center; text-align:center; }
.mswd .mswd-secondary { background:#091c2d65; border-color:#a5c6df60; }
.mswd-grid { margin-top:clamp(18px,2.4vw,30px); }
.mswd .mswd-card { border-radius:15px; }
.mswd .mswd-card-featured {
    background:linear-gradient(125deg,#fff 45%,#fdf9e8);
    border:1px solid #d9e3ec;
    border-top:3px solid var(--mswd-accent);
    box-shadow:0 5px 18px #10263b08;
}
.mswd-card-featured .mswd-icon {
    width:48px;
    height:48px;
    background:#112e47;
    color:#ffe48a;
}
.mswd .mswd-card-featured .mswd-arrow { color:#775900; }
.mswd-hover a.mswd-card-featured:is(:hover,:focus-visible) .mswd-icon {
    background:#224865;
    color:#fff0b8;
}
@media (max-width:760px) {
    .mswd-actions { width:auto; }
    .mswd .mswd-actions a { min-width:min(100%,160px); }
}

.mswd-section-title,.mswd-guide h2 { margin:clamp(25px,5vw,56px) 0 14px; color:var(--mswd-ink); }
.mswd-section-title { scroll-margin-top:96px; }
.mswd-guide ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; padding:0; list-style-position:inside; }
.mswd-guide li,.mswd-guide details { padding:18px; border:1px solid #dce5ee; border-radius:12px; background:var(--mswd-card); color:var(--mswd-ink); }
.mswd-guide li h3 { display:inline; }
.mswd-guide li p,.mswd-guide details p { margin:8px 0 0; color:var(--mswd-muted); }
.mswd-guide details { margin:8px 0; }
.mswd-guide summary { cursor:pointer; font-weight:700; }
.mswd-closing { margin-top:32px; padding:clamp(22px,4vw,45px); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; border-radius:16px; background:var(--mswd-navy); color:var(--mswd-intro-text); }
.mswd-closing h2 { margin:0; color:inherit; }
.mswd-closing a { padding:12px 16px; border-radius:8px; font-weight:700; text-decoration:none; }
@media (max-width:700px) { .mswd-guide ol { grid-template-columns:1fr; } }
