.vpn-setup {
    --vpn-line:var(--line,#c6d6ea);
    --vpn-accent:var(--accent,var(--coral,#164caa));
    --vpn-surface:var(--surface,#fff);
    --vpn-panel:var(--wash,#eaf2ff);
    display:grid;
    grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);
    align-items:start;
    gap:clamp(20px,5vw,64px);
    padding:clamp(20px,4vw,44px);
    border:1px solid var(--vpn-line);
    border-radius:var(--radius,20px);
    background:linear-gradient(145deg,var(--vpn-panel),var(--vpn-surface));
    overflow-wrap:anywhere;
}
.folio-workshop-home .vpn-setup { width:min(1200px,calc(100% - 2 * var(--gutter))); margin-inline:auto; }
.vpn-setup-heading h2 { max-width:18em; text-wrap:balance; }
.vpn-setup-heading p { margin:10px 0 0; color:var(--muted); }
.vpn-setup-body { min-width:0; }
#vpn-client-platforms { scroll-margin-top:20px; }
.vpn-platforms {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(112px,100%),1fr));
    gap:8px;
}
.vpn-platforms a {
    display:flex;
    gap:8px;
    align-items:center;
    min-height:48px;
    padding:8px 10px;
    border:1px solid var(--vpn-line);
    border-radius:clamp(4px,var(--radius,13px),13px);
    background:var(--vpn-surface);
    color:var(--ink);
    font-size:14px;
    font-weight:700;
    line-height:1.35;
    text-decoration:none;
}
.vpn-platforms a:hover { border-color:var(--vpn-accent); color:var(--vpn-accent); }
.vpn-platforms span { display:grid; place-items:center; flex:0 0 19px; color:var(--vpn-accent); }
.vpn-platforms svg { display:block; width:19px; height:19px; fill:currentColor; }
.vpn-help-links { display:flex; align-items:center; flex-wrap:wrap; gap:0 20px; margin-top:9px; }
.vpn-help-links a { display:inline-flex; align-items:center; gap:6px; min-height:44px; color:var(--vpn-accent); font-size:15px; }
.ed .vpn-plan-lead { margin:-12px 0 20px; max-width:54ch; }
.ed .vpn-download-help {
    padding:clamp(18px,4vw,36px);
    margin-top:24px;
    background:var(--wash);
    border:1px solid var(--line);
    border-radius:var(--radius);
}
.vpn-download-help p { margin:8px 0; }
.vpn-download-help a { display:inline-flex; align-items:center; min-height:44px; margin-inline-end:18px; }
.ed .ed-hero-copy > p { text-wrap:pretty; }
.ed .ed-secondary { max-inline-size:100%; }
.ed .ed-overview { scroll-margin-top:20px; }
.ed .ed-section-stack { row-gap:clamp(56px,7vw,108px); }
.ed .ed-download-section { scroll-margin-top:18px; }
.ed .ed-downloads .ed-platform-icon {
    border-radius:10px;
    background:var(--wash);
}
.ed .ed-downloads > li > a { white-space:nowrap; }
.ed .ed-downloads > li > a:hover { text-underline-offset:4px; }
.ed .vpn-steps {
    counter-reset:vpn-step;
    margin:0;
    gap:0;
}
.ed .vpn-steps li {
    display:grid;
    grid-template-columns:34px minmax(0,1fr);
    column-gap:12px;
    counter-increment:vpn-step;
}
.ed .vpn-steps li::before {
    content:counter(vpn-step);
    grid-row:1 / span 2;
    display:grid;
    align-self:start;
    place-items:center;
    aspect-ratio:1;
    background:var(--wash);
    border:1px solid var(--line);
    border-radius:50%;
    color:var(--accent);
    font-size:16px;
    font-weight:700;
}
.ed .vpn-steps p { grid-column:2; }

/* Adapt the device and support area to the page's existing composition. */
.ed:is([data-ed-plans="rows"],[data-plan-layout="ledger"],[data-plan-layout="directory"]) .vpn-setup {
    background:var(--surface);
    border-inline-start:4px solid var(--vpn-accent);
}
.ed:is([data-ed-plans="matrix"],[data-plan-layout="matrix"]) .vpn-platforms {
    gap:1px;
    padding:1px;
    background:var(--vpn-line);
}
.ed:is([data-ed-plans="matrix"],[data-plan-layout="matrix"]) .vpn-platforms a { border:0; border-radius:0; }
.ed:is([data-ed-plans="ribbon"],[data-plan-layout="ticket"]) .vpn-platforms a { border-radius:999px; }
.ed:is([data-ed-plans="bare"],[data-plan-layout="poster"]) .vpn-setup {
    background:none;
    border-inline:0;
    border-radius:0;
}
@media(min-width:900px) {
    .ed:is([data-composition="journal"],[data-composition="folio"],[data-composition="gallery"]) .vpn-setup {
        grid-template-columns:minmax(0,1fr);
        gap:18px;
    }
    .ed:is([data-composition="journal"],[data-composition="folio"],[data-composition="gallery"]) .vpn-setup-heading {
        display:flex;
        flex-wrap:wrap;
        align-items:baseline;
        gap:8px 20px;
    }
}
@media(max-width:720px) {
    .vpn-setup { grid-template-columns:minmax(0,1fr); gap:16px; }
    .vpn-setup-heading h2 { font-size:24px; }
}
@media(max-width:360px) {
    .vpn-setup { padding:16px; }
    .vpn-platforms { grid-template-columns:repeat(2,minmax(0,1fr)); }
}