:root {
    color-scheme: light;
    --sf-ink: #231937;
    --sf-muted: #665b75;
    --sf-paper: #faf8fd;
    --sf-purple: #7040bd;
    --sf-purple-hover: #582d9c;
    --sf-plum: #281641;
    --sf-border: #e7dff0;
    --sf-lavender: #eee3fb;
    --sf-teal: #14645a;
    --sf-mint: #dcf3ec;
    --sf-blue: #285b9b;
    --sf-sky: #e2efff;
    --sf-coral: #9c3f4f;
    --sf-amber: #875410;
    --sf-peach: #fff0da;
    --sf-lime: #e5fa9e;
    --sf-container-max: 1300px;
    --sf-gutter: clamp(16px, 3vw, 36px);
    --sf-hero-copy-width: 1.4fr;
    --sf-hero-image-width: 1fr;
    font-family: Outfit, Cairo, sans-serif;
}

* { box-sizing: border-box; }
html[dir="rtl"] { font-family: Cairo, Outfit, sans-serif; }
body { margin: 0; background: var(--sf-paper); color: var(--sf-ink); line-height: 1.55; }
button { font: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--sf-purple); outline-offset: 4px; }
.sf-wrap { width: min(100% - 2 * var(--sf-gutter), var(--sf-container-max)); margin-inline: auto; }
.sf-skip { position: fixed; z-index: 1100; inset-block-start: 12px; inset-inline-start: 12px; transform: translateY(-160%); padding: 10px 16px; border-radius: 8px; background: #fff; }
.sf-skip:focus { transform: none; }

.sf-page-loader, .sf-page-loader[hidden] { display: none; }

@media screen and (prefers-reduced-motion: no-preference) {
    .sf-page-loader {
        position: fixed;
        z-index: 1150;
        inset: 0;
        display: grid;
        place-items: center;
        padding: 24px;
        background:
            radial-gradient(ellipse at 50% 42%, rgb(115 64 221 / 48%), transparent 48%),
            radial-gradient(ellipse at 91% 8%, rgb(109 65 204 / 35%), transparent 42%),
            linear-gradient(145deg, #160d2d, #241247 52%, #120a24);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 460ms cubic-bezier(.32, .05, .34, 1), visibility 0s linear 460ms;
    }
    .sf-page-loading .sf-page-loader {
        opacity: 1;
        visibility: visible;
        transition: none;
        animation: sf-loader-timeout 460ms ease 2400ms forwards;
    }
    .sf-page-loader-logo { display: block; width: clamp(112px, 14vw, 148px); max-width: 100%; height: auto; }
    .sf-page-loading .sf-page-loader-logo { animation: sf-loader-intro 620ms cubic-bezier(.25, .58, .25, 1) both; }
}

@keyframes sf-loader-intro {
    from { opacity: .4; transform: translateY(8px) scale(.96); }
    to { opacity: 1; transform: none; }
}
@keyframes sf-loader-timeout { to { opacity: 0; visibility: hidden; } }

body.sf-storefront { font-family: Outfit, Cairo, sans-serif !important; background: var(--sf-paper); color: var(--sf-ink); line-height: 1.55; }
html[dir="rtl"] body.sf-storefront { font-family: Cairo, Outfit, sans-serif !important; }

.sf-storefront .sf-navbar.nav-new {
    inset-block-start: clamp(8px, 1.3vw, 16px);
    inset-inline: max(var(--sf-gutter), calc((100% - var(--sf-container-max)) / 2));
    width: auto;
    border: 1px solid rgb(255 255 255 / 25%);
    border-radius: 34px;
    background: linear-gradient(110deg, rgb(112 64 189 / 28%), transparent 75%) rgb(40 22 65 / 88%);
    box-shadow: inset 0 1px rgb(255 255 255 / 12%), 0 14px 36px rgb(18 9 40 / 28%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    backdrop-filter: blur(22px) saturate(140%);
    font-family: inherit !important;
    transition: top 280ms ease, left 280ms ease, right 280ms ease, border-radius 280ms ease, background-color 280ms ease, border-color 280ms ease;
}
.sf-storefront .sf-navbar > .container { width: 100%; max-width: var(--sf-container-max); min-height: 62px; padding-inline: clamp(12px, 2vw, 24px); }
.sf-storefront .sf-navbar .navbar-brand { margin-inline: 0; }
.sf-storefront .sf-navbar.nav-new.scrolled {
    inset-block-start: 0;
    inset-inline: 0;
    border-radius: 0;
    border-color: transparent transparent rgb(255 255 255 / 21%);
    background-color: rgb(40 22 65 / 97%);
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .sf-storefront .sf-navbar.nav-new { transition: none; }
}
.sf-storefront .sf-navbar #navbarNav .nav-main-links > .nav-item > .nav-link {
    color: #f3edff;
    font-weight: 400;
}
.sf-storefront .sf-navbar #navbarNav .nav-main-links > .nav-item > .nav-link:is(:hover, :focus-visible, .show, .active) {
    color: #fff !important;
    background: rgb(255 255 255 / 14%);
}
.sf-storefront .sf-navbar #navbarNav .nav-main-links > .nav-item > .nav-link.active::after {
    width: 50%;
    height: 2px;
    background: var(--sf-lime);
}
.sf-storefront .sf-navbar #navbarNav .nav-lang-toggle {
    min-height: 40px;
    border: 1px solid rgb(255 255 255 / 22%) !important;
    background: rgb(255 255 255 / 9%);
    color: #fff;
}
.sf-storefront .sf-navbar #navbarNav .nav-lang-toggle:hover { background: rgb(255 255 255 / 17%); }
.sf-storefront .sf-navbar #navbarNav :is(.nav-lang-label, .nav-lang-caret) { color: inherit; opacity: 1; }
.sf-storefront .sf-navbar .sf-navbar-login {
    background: var(--sf-purple);
    color: #fff;
    white-space: nowrap;
}
.sf-storefront .sf-navbar .sf-navbar-login:hover { background: var(--sf-purple-hover); }
.sf-storefront .sf-navbar :is(.nav-link, .navbar-toggler, .sf-navbar-login, .sf-navbar-sign-in, .nav-profile-toggle, .notification-bell-wrapper):focus-visible,
:is(.sf-hero, .sf-footer) :focus-visible { outline-color: var(--sf-lime); }
.sf-storefront .sf-navbar :is(.notification-bell-wrapper svg path, .notification-bell-wrapper:hover svg path) { stroke: #fff; }
.sf-navbar .sf-mobile-account-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 40px;
    padding: 0 10px;
    border: 1px solid rgb(255 255 255 / 25%);
    border-radius: 999px;
    background: rgb(255 255 255 / 10%);
    color: #fff;
}
.sf-navbar .sf-mobile-account-toggle:is(:hover, [aria-expanded="true"]) { background: rgb(255 255 255 / 20%); }
.sf-storefront .sf-navbar .navbar-toggler {
    min-width: 40px;
    min-height: 40px;
    border: 1px solid rgb(255 255 255 / 25%);
    background: rgb(255 255 255 / 10%);
}
.sf-storefront .sf-navbar .navbar-toggler-icon {
    background-color: #fff;
    box-shadow: 0 6px #fff, 0 -6px #fff;
    background-image: none !important;
}
.sf-storefront .sf-navbar-tools { gap: 7px; }
.sf-navbar .sf-navbar-sign-in {
    border: 1px solid rgb(255 255 255 / 22%);
    background: var(--sf-purple);
    color: #fff;
}
.sf-navbar .sf-navbar-sign-in:hover { background: var(--sf-purple-hover); color: #fff; }
.sf-storefront .sf-navbar .dropdown-menu {
    margin-block-start: 10px;
    padding: 8px;
    max-inline-size: calc(100vw - 24px);
    max-block-size: calc(100dvh - 92px);
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--sf-border);
    border-radius: 20px;
    background: var(--sf-paper);
    color: var(--sf-ink);
    text-align: start;
    box-shadow: 0 18px 46px rgb(40 22 65 / 26%);
}
.sf-storefront .sf-navbar #navbarNav .dropdown-menu-support {
    inline-size: min(350px, calc(100vw - 24px));
    min-inline-size: 0;
    inset-inline: 0 auto !important;
}
.sf-storefront .sf-navbar .dropdown-menu-notifs { min-inline-size: min(380px, calc(100vw - 24px)); }
.sf-storefront .sf-navbar :is(.dropdown-menu-arrow, .dropdown-menu-profile, .nav-lang-menu) { min-inline-size: 206px; }
.sf-storefront .sf-navbar :is(.support-dd-head, .notif-header, .sf-nav-menu-label) {
    margin: 0 0 6px;
    padding: 11px 12px;
    border: 0;
    border-radius: 13px;
    background: linear-gradient(120deg, var(--sf-plum), var(--sf-purple-hover));
    color: #fff;
}
.sf-storefront .sf-navbar :is(.support-dd-head .t, .notif-header h6) { color: #fff; font-size: 15px; }
.sf-storefront .sf-navbar .support-dd-head .s { margin-top: 3px; color: #f3eaff; line-height: 1.4; }
.sf-storefront .sf-navbar .notif-header a { color: var(--sf-lime); }
.sf-storefront .sf-navbar :is(.notif-body, .notif-footer) { border-radius: 12px; background: transparent; }
.sf-storefront .sf-navbar .notif-footer { border-color: var(--sf-border); }
.sf-storefront .sf-navbar .support-dd-item {
    display: flex;
    align-items: center;
    padding: 9px;
    border-radius: 12px;
    color: var(--sf-ink);
}
.sf-storefront .sf-navbar .support-dd-ic { border-radius: 50%; background: var(--sf-lavender); color: var(--sf-purple); }
.sf-storefront .sf-navbar .support-dd-head .support-dd-ic { background: #fff !important; color: var(--sf-purple) !important; }
.sf-storefront .sf-navbar .support-dd-ttl { color: var(--sf-plum); font-size: 14px; text-align: start; }
.sf-storefront .sf-navbar .support-dd-desc { color: var(--sf-muted); text-align: start; }
.sf-storefront .sf-navbar .support-dd-foot { margin-top: 4px; padding: 6px 0 0; border-color: var(--sf-border); }
.sf-storefront .sf-navbar .support-dd-foot a { display: block; padding: 8px; border-radius: 12px; color: var(--sf-purple-hover); }
.sf-storefront .sf-navbar .sf-nav-menu-label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.sf-storefront .sf-navbar :is(.dropdown-item-profile, .dropdown-menu-arrow .dropdown-item, .nav-lang-item) {
    display: flex;
    align-items: center;
    gap: 9px;
    min-block-size: 42px;
    padding: 7px 9px;
    border-radius: 12px;
    color: var(--sf-ink);
    text-align: start;
}
.sf-storefront .sf-navbar :is(.dropdown-item-profile, .dropdown-menu-arrow .dropdown-item) > i {
    display: grid;
    flex: 0 0 28px;
    block-size: 28px;
    place-items: center;
    border-radius: 50%;
    background: var(--sf-lavender);
    color: var(--sf-purple);
}
.sf-storefront .sf-navbar .text-danger > i { background: #fff0f3; color: var(--sf-coral); }
.sf-storefront .sf-navbar :is(.support-dd-item, .support-dd-foot a, .dropdown-item, .dropdown-item-profile, .nav-lang-item):is(:hover, :focus-visible, .active) {
    background: var(--sf-lavender);
    color: var(--sf-purple-hover);
    box-shadow: none;
    transform: none;
}
.sf-storefront .sf-navbar .dropdown-menu :focus-visible { outline-offset: -3px; }
.sf-storefront .sf-navbar :is(.dropdown-item, .dropdown-item-profile) { white-space: normal; }
.sf-storefront .sf-navbar :is(.support-toggle, .nav-lang-toggle, .sf-mobile-account-toggle)[aria-expanded="true"] > .fe-chevron-down {
    transform: rotate(180deg);
}
.sf-navbar .sf-mobile-account-toggle:focus-visible { outline-color: var(--sf-lime); }

@media (prefers-reduced-motion: no-preference) {
    .sf-storefront .sf-navbar .dropdown-menu.show { animation: sf-nav-menu-in 220ms ease-out; }
}
@media (prefers-reduced-motion: reduce) {
    .sf-storefront .sf-navbar :is(.dropdown-menu, .support-dd-item, .dropdown-item-profile, .nav-lang-item, .support-toggle i) { transition: none; }
}
@keyframes sf-nav-menu-in {
    from { opacity: 0; translate: 0 -5px; }
    to { opacity: 1; translate: 0 0; }
}

.sf-storefront .sf-nav-drawer {
    width: min(380px, calc(100% - 24px));
    border: 0;
    border-start-end-radius: 0px;
    border-end-end-radius: 0px;
    background: var(--sf-paper);
    color: var(--sf-ink);
    text-align: start;
    overflow: hidden;
    box-shadow: 0 0 42px rgb(40 22 65 / 26%);
}
.sf-storefront .sf-nav-drawer .offcanvas-header {
    align-items: center;
    gap: 12px;
    padding: max(16px, env(safe-area-inset-top)) 18px 17px;
    background: radial-gradient(ellipse at top right, rgb(147 97 226 / 35%), transparent 72%), var(--sf-plum);
    color: #fff;
}
.sf-storefront .sf-nav-drawer .btn-close {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    border: 1px solid rgb(255 255 255 / 30%);
    border-radius: 50%;
    background-color: rgb(255 255 255 / 12%);
    filter: none;
    opacity: 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 4 8 8M12 4l-8 8' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.sf-nav-drawer .btn-close:focus-visible { outline-color: var(--sf-lime); }
.sf-storefront .sf-nav-drawer .offcanvas-body { padding: 14px; overscroll-behavior: contain; }
.sf-drawer-links { display: grid; gap: 5px; }
.sf-drawer-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    inline-size: 100%;
    min-block-size: 48px;
    padding: 6px 9px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: transparent;
    color: var(--sf-plum);
    font-weight: 600;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}
.sf-drawer-icon {
    display: grid;
    inline-size: 34px;
    block-size: 34px;
    place-items: center;
    border-radius: 50%;
    background: var(--sf-lavender);
    color: var(--sf-purple-hover);
}
.sf-drawer-row:is(:hover, :focus-visible, [aria-current], [aria-expanded="true"]),
.sf-drawer-languages[open] > summary {
    border-color: var(--sf-border);
    background: #fff;
    color: var(--sf-purple-hover);
}
.sf-drawer-caret { color: var(--sf-purple); font-size: 14px; }
.sf-drawer-row[aria-expanded="true"] .sf-drawer-caret,
.sf-drawer-languages[open] .sf-drawer-caret { transform: rotate(180deg); }
.sf-drawer-submenu {
    margin: 4px 0 6px 0;
    margin-inline-start: 16px;
    padding: 4px;
    border-inline-start: 2px solid #dfc8f6;
    list-style: none;
}
.sf-drawer-submenu :is(a, .nav-lang-item) {
    display: flex;
    align-items: center;
    gap: 9px;
    min-block-size: 40px;
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--sf-ink);
    font-size: 14px;
    text-align: start;
    text-decoration: none;
}
.sf-drawer-submenu a > i { color: var(--sf-purple); }
.sf-drawer-submenu :is(a, .nav-lang-item):is(:hover, :focus-visible, [aria-current]) {
    background: var(--sf-lavender);
    color: var(--sf-purple-hover);
    transform: none;
}
.sf-drawer-languages { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--sf-border); }
.sf-drawer-languages summary::-webkit-details-marker { display: none; }
.sf-drawer-languages small { display: block; color: var(--sf-muted); font-weight: 400; }
.sf-drawer-footer { padding: 12px 14px max(14px, env(safe-area-inset-bottom)); border-top: 1px solid var(--sf-border); background: #fff; }
.sf-drawer-footer .sf-button { width: 100%; }

.sf-hero {
    --sf-hero-direction: to right;
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: center;
    min-height: clamp(600px, 52vw, 760px);
    padding-block: clamp(104px, 9vw, 128px) clamp(32px, 4vw, 56px);
    overflow: hidden;
    background: var(--sf-plum);
    color: #fff;
}
html[dir="rtl"] .sf-hero { --sf-hero-direction: to left; }
.sf-hero-backdrop {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.sf-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(var(--sf-hero-direction), rgb(25 14 48 / 94%), rgb(37 19 66 / 75%) 43%, rgb(37 19 66 / 18%) 100%),
        linear-gradient(0deg, rgb(24 15 47 / 66%), transparent 54%);
}
.sf-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, var(--sf-hero-copy-width)) minmax(0, var(--sf-hero-image-width));
    align-items: center;
    gap: clamp(24px, 5vw, 45px);
}
.sf-hero-copy { display: flex; flex-direction: column; align-items: flex-start; }
.sf-hero-visual {
    --sf-hero-frame-inset: 8px;
    --sf-hero-image-radius: clamp(17px, 2.3vw, 28px);
    position: relative;
    isolation: isolate;
    display: grid;
    align-self: stretch;
    min-block-size: clamp(420px, 43vw, 590px);
    margin: 0;
    padding: var(--sf-hero-frame-inset);
    border: 1px solid rgb(255 255 255 / 34%);
    border-radius: clamp(23px, 3vw, 39px);
    background: linear-gradient(145deg, rgb(255 255 255 / 30%), rgb(112 64 189 / 55%));
    box-shadow: inset 0 1px rgb(255 255 255 / 20%), 0 25px 64px rgb(19 9 44 / 45%);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.sf-hero-visual::after {
    content: '';
    position: absolute;
    inset-block-end: -1px;
    inset-inline: 18%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #c9aafa, transparent);
    pointer-events: none;
}
.sf-hero-visual img {
    position: absolute;
    inset: var(--sf-hero-frame-inset);
    z-index: -1;
    display: block;
    width: calc(100% - 2 * var(--sf-hero-frame-inset));
    height: calc(100% - 2 * var(--sf-hero-frame-inset));
    border-radius: var(--sf-hero-image-radius);
    object-fit: cover;
    object-position: center;
}
.sf-hero-visual-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(84px, 12vw, 160px);
    min-inline-size: 0;
    padding: clamp(12px, 2.1vw, 28px);
    border-radius: var(--sf-hero-image-radius);
    background: linear-gradient(180deg, rgb(25 14 48 / 54%), transparent 28%),
        linear-gradient(0deg, #1c112e 3%, rgb(28 17 46 / 88%) 20%, transparent 67%);
}
.sf-hero-visual-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border: 1px solid rgb(255 255 255 / 32%);
    border-radius: 999px;
    background: rgb(36 21 59 / 88%);
    color: var(--sf-lime);
    font-size: clamp(11px, 1vw, 13px);
    font-weight: 700;
}
.sf-hero-visual-label::before {
    content: '';
    flex: 0 0 6px;
    block-size: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 10px rgb(229 250 158 / 65%);
}
.sf-hero-visual-title {
    max-inline-size: 24ch;
    margin: 0;
    color: #fff;
    font-size: clamp(20px, 2.5vw, 36px);
    font-weight: 700;
    line-height: 1.25;
    text-wrap: balance;
}
.sf-hero .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: clamp(12px, 1.6vw, 18px);
    padding: 7px 12px;
    border: 1px solid rgb(255 255 255 / 30%);
    border-radius: 999px;
    background: rgb(255 255 255 / 12%);
    color: #f3eaff;
    font-size: 13px;
    font-weight: 700;
}
.sf-hero .hero-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sf-lime); }

.sf-hero .hero-title-new {
    margin: 0;
    color: #fff;
    font-size: clamp(34px, 4.5vw, 66px);
    font-weight: 700;
    line-height: 1.09;
    letter-spacing: -.045em;
    /* text-wrap: balance; */
    /* text-transform: uppercase; */
}
.sf-hero .w4jobsname {color: #dec8ff; }
html[dir="rtl"] :is(.sf-kicker, .sf-hero .hero-title-new, .sf-section h2) { letter-spacing: normal; }

.sf-hero .hero-desc-new {
    max-width: 48ch;
    margin: 12px 0px 36px;
    color: #f2e9ff;
    font-size: clamp(16px, 1.5vw, 19px);
    line-height: 1.2;
    font-weight: 300;
}
.sf-hero .features-card {
    order: 1;
    width: 100%;
    margin-top: clamp(18px, 2.2vw, 26px);
    padding-top: 12px;
    border-top: 1px solid rgb(255 255 255 / 22%);
}
.sf-hero .features-card-title { margin: 0 0 10px; color: #e7d9ff; font-size: 12px; font-weight: 700; }
.sf-hero .features-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sf-hero .feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 7px 10px;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 26px;
    background: rgb(255 255 255 / 9%);
    color: #f4ebff;
    font-size: 15px;
    line-height: 1.2;
}

.sf-hero .icon-wrapper {
    display: grid;
    flex: 0 0 30px;
    place-items: center;
    height: 30px;
    border: 1px solid rgb(255 255 255 / 24%);
    border-radius: 20px;
    box-shadow: inset 0 1px rgb(255 255 255 / 18%), 0 3px 8px rgb(15 8 31 / 32%);
}
.sf-hero svg { width: 15px; height: 15px; }
.sf-hero .hero-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(16px, 2vw, 22px); }
.sf-hero .hero-buttons .btn { border: 1px solid rgb(255 255 255 / 35%); background: rgb(255 255 255 / 11%); color: #fff; }
.sf-hero .hero-buttons .btn:hover { background: rgb(255 255 255 / 22%); color: #fff; }
.sf-storefront .sf-hero .hero-buttons .btn-primary { background: var(--sf-purple); box-shadow: 0 8px 22px rgb(112 64 189 / 38%); }
.sf-storefront .sf-hero .hero-buttons .btn-primary:hover { background: var(--sf-purple-hover); }

@media screen and (prefers-reduced-motion: no-preference) {
    html:not(.sf-page-loading) body:has([data-sf-home-hero], [data-sf-page-hero]) .sf-navbar {
        animation: sf-page-nav-in 660ms ease-out;
    }
    html:not(.sf-page-loading) :is([data-sf-home-hero] .sf-hero-copy, [data-sf-page-hero]) > * {
        animation: sf-page-hero-in 900ms cubic-bezier(.25, .58, .25, 1) var(--sf-hero-delay, 0ms) backwards;
    }
    [data-sf-home-hero] .hero-title-new { --sf-hero-delay: 65ms; }
    [data-sf-home-hero] .hero-desc-new { --sf-hero-delay: 135ms; }
    [data-sf-home-hero] .features-card { --sf-hero-delay: 205ms; }
    [data-sf-home-hero] .hero-buttons { --sf-hero-delay: 275ms; }
    [data-sf-page-hero] > h1,
    .sf-login-story[data-sf-page-hero] > h2 { --sf-hero-delay: 65ms; }
    [data-sf-page-hero] > h1 + p,
    .sf-login-story[data-sf-page-hero] > .sf-login-benefits { --sf-hero-delay: 135ms; }
    .sf-login-story[data-sf-page-hero] > .sf-login-quotes { --sf-hero-delay: 205ms; }
    [data-sf-page-hero] > .sf-blog-detail-meta { --sf-hero-delay: 205ms; }
    [data-sf-page-hero] > .hero-meta-cloud { --sf-hero-delay: 135ms; }
    html:not(.sf-page-loading) body:has([data-sf-home-hero], [data-sf-page-hero]) .sf-navbar:focus-within,
    html:not(.sf-page-loading) :is([data-sf-home-hero] .sf-hero-copy, [data-sf-page-hero]) > :focus-within {
        animation-duration: 1ms;
        animation-delay: 0ms;
    }

    .sf-page-reveal:not(:focus-within, :target) {
        animation: sf-page-reveal 940ms cubic-bezier(.25, .58, .25, 1) var(--sf-reveal-delay, 0ms) backwards;
    }
    :is(.sf-cgv-document > .legal-section, .sf-blog-prose) {
        --sf-reveal-opacity: .65;
        --sf-reveal-travel: 12px;
    }
    .sf-login-panel .sf-page-reveal {
        --sf-reveal-opacity: .65;
        --sf-reveal-travel: 10px;
    }
}

@media screen and (min-width: 768px) and (prefers-reduced-motion: no-preference) {
    html:not(.sf-page-loading) [data-sf-home-hero] .sf-hero-visual {
        animation: sf-home-visual-in 1100ms cubic-bezier(.25, .58, .25, 1) 140ms backwards;
    }
}

@keyframes sf-page-nav-in {
    from { opacity: .7; }
    to { opacity: 1; }
}
@keyframes sf-page-hero-in {
    from { opacity: .42; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}
@keyframes sf-home-visual-in {
    from { opacity: .38; transform: translateY(16px) scale(.978); }
    to { opacity: 1; transform: none; }
}
@keyframes sf-page-reveal {
    from { opacity: var(--sf-reveal-opacity, .24); transform: translateY(var(--sf-reveal-travel, clamp(14px, 2.2vw, 28px))); }
    to { opacity: 1; transform: none; }
}
.sf-button { border: 1px solid transparent; }
.sf-button-lime, .sf-hero .icon-wrapper { color: #292335; background: var(--sf-lime); }
.sf-button-lime:hover { color: #292335; background: #f2ffc7; }
.sf-button-purple { color: #fff; background: var(--sf-purple); }
.sf-button-purple:hover { color: #fff; background: var(--sf-purple-hover); }


.sf-section { margin-block: clamp(40px, 7vw, 82px); scroll-margin-block-start: 104px; }
.sf-section-head { margin-bottom: 24px; }
.sf-kicker { margin: 0 0 12px; color: var(--sf-purple-hover); font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.sf-section h2 { margin: 0; font-size: clamp(30px, 4vw, 52px); line-height: 1.12; letter-spacing: -.035em; }
.sf-section-head p:last-of-type { margin: 10px 0 0; color: var(--sf-muted); }
.sf-section-head .sf-kicker:last-of-type { margin: 0 0 12px; color: var(--sf-purple-hover); }
.sf-section:not(.sf-categories) :is(.sf-section-head, .langues-box) h2 {
    text-wrap: balance;
}
.sf-section:not(.sf-categories) .sf-section-head h2::before,
.sf-qwasar-copy h2::before,
.sf-language-card .big-title-2::before {
    content: '';
    display: block;
    width: 36px;
    height: 3px;
    margin-bottom: 12px;
    border-radius: 999px;
    background: var(--sf-purple);
}
.sf-section:not(.sf-categories) .sf-section-head p:not(.sf-kicker) { max-width: 62ch; }
.sf-offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2.1vw, 24px); }
.sf-offer { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--sf-border); border-radius: 21px; background: #fff; box-shadow: 0 8px 22px rgb(40 21 64 / 6%); }
.sf-offer-cover { position: relative; display: grid; place-items: center; aspect-ratio: 12 / 5; border-bottom: 3px solid var(--sf-purple); background: var(--sf-plum) url("../../images/w4j_background.png") center / cover; color: #fff; }
.sf-offer-cover img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.sf-offer-cover > span[aria-hidden] { font-size: clamp(34px, 5vw, 54px); font-weight: 800; letter-spacing: -.06em; }
.sf-offer-cover > span[aria-hidden] span { color: var(--sf-lime); }
.sf-discount { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; padding: 4px 10px; border-radius: 999px; color: #fff; background: var(--sf-amber); font-size: 13px; font-weight: 700; }
.sf-offer-body { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: clamp(15px, 2vw, 23px); overflow-wrap: anywhere; }
.sf-offer h3, .sf-steps h3, .sf-empty h3 { margin: 0; font-size: 21px; line-height: 1.24; }
.sf-offer h3 a { color: var(--sf-purple); text-decoration: none; }
.sf-offer h3 a:hover { color: var(--sf-purple-hover); text-decoration: underline; }
.sf-offer-description { margin: 9px 0 0; color: var(--sf-muted); }
.sf-offer-features { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 18px; padding: 0; list-style: none; }
.sf-offer-features li { padding: 4px 9px; border-radius: 999px; background: var(--sf-mint); color: var(--sf-teal); font-size: 12px; font-weight: 600; }
.sf-offer-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--sf-border); }
.sf-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.sf-price strong { color: var(--sf-purple); font-size: 25px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.sf-price del { color: var(--sf-muted); font-size: 13px; }
.sf-empty { grid-column: 1 / -1; padding: 28px; border: 1px dashed #cfc0e2; border-radius: 18px; background: #fff; }
.sf-empty p { color: var(--sf-muted); }

.sf-categories .sf-section-head {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: end;
    gap: clamp(12px, 4vw, 54px);
    margin-bottom: clamp(20px, 3vw, 34px);
}
.sf-categories .sf-section-head h2 {
    max-width: 19ch;
    padding-top: 14px;
    background: linear-gradient(var(--sf-purple), var(--sf-purple)) no-repeat;
    background-size: 36px 3px;
    text-wrap: balance;
}
html[dir="rtl"] .sf-categories .sf-section-head h2 { background-position: top right; }
.sf-categories .sf-section-head p {
    max-width: 48ch;
    margin: 0;
    padding-inline-start: 16px;
    border-inline-start: 1px solid #d9c6ef;
}
.sf-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 2vw, 22px);
}
.sf-card-grid .cats-card {
    --sf-card-accent: var(--sf-purple);
    --sf-card-padding: clamp(18px, 2.6vw, 30px);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 190px;
    padding: var(--sf-card-padding);
    border-radius: 22px;
    background: var(--sf-card-accent);
    color: #fff;
    box-shadow: inset 0 1px rgb(255 255 255 / 24%), 0 9px 22px rgb(40 22 65 / 14%);
    overflow-wrap: anywhere;
}
.sf-card-grid .cats-card::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset-block-start: -100px;
    inset-inline-end: -56px;
    width: 210px;
    height: 210px;
    border: 1px solid rgb(255 255 255 / 21%);
    border-radius: 50%;
    box-shadow: 0 0 0 20px rgb(255 255 255 / 6%), 0 0 0 40px rgb(255 255 255 / 4%);
    pointer-events: none;
}
.sf-card-grid .cats-card:nth-child(2) { --sf-card-accent: var(--sf-teal); }
.sf-card-grid .cats-card:nth-child(3) { --sf-card-accent: var(--sf-coral); }
.sf-card-grid .cats-card:nth-child(4) { --sf-card-accent: var(--sf-blue); }
.sf-card-grid .cats-card:nth-child(5) { --sf-card-accent: var(--sf-amber); }
.sf-card-grid .cats-card:nth-child(6) { --sf-card-accent: var(--sf-purple-hover); }
.sf-card-grid .sf-category-index {
    position: absolute;
    inset-block-start: var(--sf-card-padding);
    inset-inline-end: var(--sf-card-padding);
    padding: 3px 9px;
    border: 1px solid rgb(255 255 255 / 40%);
    border-radius: 999px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.sf-card-grid .img-cats {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    border-radius: 15px;
    background: #fff;
    color: var(--sf-card-accent);
    font-size: 22px;
}
.sf-card-grid .cats-card h3 { margin: 0 0 8px; color: inherit; font-size: clamp(20px, 2vw, 25px); font-weight: 700; line-height: 1.2; }
.sf-card-grid .cats-card p { max-width: 42ch; margin: 0; font-size: 15px; line-height: 1.55; }

.sf-platform-grid { grid-template-rows: repeat(2, minmax(230px, auto)); }
.sf-platform-grid .sf-platform-card {
    display: flex;
    flex-direction: column;
    gap: 26px;
    color: #fff;
    text-decoration: none;
    transition: transform .35s ease, box-shadow .35s ease;
}
.sf-platform-grid .sf-platform-card:first-child {
    grid-row: span 2;
    background: var(--sf-purple) url('../../images/w4j_background.png') center / cover;
}
.sf-platform-grid .sf-platform-card:nth-child(2) { --sf-card-accent: var(--sf-amber); }
.sf-platform-grid .sf-platform-card:nth-child(3) { --sf-card-accent: var(--sf-teal); }
.sf-platform-grid .sf-platform-card:last-child { grid-column: span 2; }
.sf-platform-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sf-platform-grid .img-cats { flex-shrink: 0; margin: 0; }
.sf-platform-arrow {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--sf-card-accent);
    background: #fff;
    font-size: 18px;
    transition: transform .35s ease;
}
.sf-platform-copy { margin-top: auto; }
.sf-platform-topic { display: block; margin-bottom: 10px; color: #fff; font-size: 12px; font-weight: 400; }
.sf-platform-grid .sf-platform-card:first-child h3 { font-size: clamp(30px, 3vw, 42px); }
.sf-platform-grid .sf-platform-card p { max-width: 58ch; }
.sf-platform-grid .sf-platform-card:hover { color: #fff; transform: translateY(-4px); box-shadow: 0 16px 30px rgb(40 22 65 / 18%); }
.sf-platform-card:hover .sf-platform-arrow { transform: rotate(45deg); }
.sf-platform-grid .sf-platform-card:focus-visible { outline: 3px solid var(--sf-purple); outline-offset: 5px; }
@media (min-width: 601px) and (max-width: 960px) {
    .sf-platform-grid .sf-platform-card:first-child { grid-row: auto; }
    .sf-platform-grid .sf-platform-card:last-child { grid-column: auto; }
}
@media (max-width: 600px) {
    .sf-card-grid.sf-platform-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
    .sf-platform-grid .sf-platform-card { min-height: 230px; }
    .sf-platform-grid .sf-platform-card:first-child { grid-row: auto; }
    .sf-platform-grid .sf-platform-card:last-child { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .sf-platform-grid .sf-platform-card, .sf-platform-arrow { transition: none; }
    .sf-platform-grid .sf-platform-card:hover, .sf-platform-card:hover .sf-platform-arrow { transform: none; }
}

.sf-journey .journey-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(18px, 4vw, 50px);
}
.sf-journey .journey-image {
    padding: 16px 16px 0;
    border: 1px solid var(--sf-border);
    border-radius: 22px;
    background: radial-gradient(ellipse at bottom, var(--sf-lavender), #fff 80%);
}
.sf-journey .journey-image img { display: block; width: min(100%, 420px); height: auto; margin-inline: auto; }
.sf-journey .modern-stepper { display: grid; gap: 10px; }
.sf-journey .step {
    --sf-step-accent: var(--sf-purple);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border: 1px solid var(--sf-border);
    border-inline-start: 4px solid var(--sf-step-accent);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 16px rgb(40 21 64 / 6%);
}
.sf-journey .step-number {
    display: grid;
    flex: 0 0 38px;
    place-items: center;
    height: 38px;
    border-radius: 12px;
    background: var(--sf-step-accent);
    color: #fff;
    font-weight: 700;
}
.sf-journey .step h3 { margin: 0; color: inherit; font-size: 17px; }
.sf-journey .step:nth-child(2), .sf-journey .step-card:nth-child(2) { --sf-step-accent: var(--sf-teal); }
.sf-journey .step:nth-child(3), .sf-journey .step-card:nth-child(3) { --sf-step-accent: var(--sf-blue); }
.sf-journey .step:nth-child(4), .sf-journey .step-card:nth-child(4) { --sf-step-accent: var(--sf-amber); }
.sf-courses {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 2.2vw, 24px);
}
.sf-journey .step-container { margin-top: clamp(24px, 4vw, 52px); }
.sf-journey .step-card {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    align-items: center;
    gap: clamp(20px, 5vw, 72px);
    padding-block: clamp(24px, 4vw, 48px);
    border-top: 1px solid var(--sf-border);
}
.sf-journey .step-card:last-child { padding-bottom: 0; }
@media (width > 650px) {
    .sf-journey .step-card:nth-child(even) {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    }
    .sf-journey .step-card:nth-child(even) .step-image { order: 1; }
}
.sf-journey .step-image img {
    display: block;
    width: 100%;
    height: auto;
   
    border-radius: clamp(16px, 2.2vw, 26px);
    object-fit: cover;
}
.sf-journey .step-title { margin: 0 0 14px; font-size: clamp(22px, 2.8vw, 34px); font-weight: 700; line-height: 1.16; }
.sf-journey .step-title::before {
    content: '';
    display: block;
    width: 34px;
    height: 3px;
    margin-bottom: 12px;
    border-radius: 999px;
    background: var(--sf-step-accent, var(--sf-purple));
}
.sf-journey .feature-text { color: var(--sf-muted); }
.sf-courses .course-card {
    overflow: hidden;
    border: 1px solid var(--sf-border);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 8px 22px rgb(40 21 64 / 6%);
}
.sf-courses .course-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 7;
    object-fit: cover;
    border-bottom: 3px solid var(--sf-purple);
}
.sf-courses .course-content { padding: clamp(16px, 2.6vw, 28px); }
.sf-courses .course-title { margin: 0 0 12px; font-size: clamp(19px, 2.2vw, 26px); }
.sf-courses .course-title { color: var(--sf-purple); }
.sf-journey .feature-list, .sf-courses .course-features { margin: 0; padding: 0; list-style: none; }
.sf-journey .feature-list li, .sf-courses .course-features li { display: flex; align-items: baseline; gap: 9px; margin-block: 7px; }
.sf-journey .feature-icon, .sf-courses .course-features li::before { flex-shrink: 0; color: var(--sf-step-accent, var(--sf-purple)); font-weight: 700; }
.sf-courses .course-features li::before { content: '✓'; }
.sf-courses .sf-section-head { grid-column: 1 / -1; margin-bottom: 0; }
.sf-courses .course-card, .sf-courses .course-content { display: flex; flex-direction: column; }
.sf-courses .course-content { flex: 1; }
.sf-courses .course-img-container { position: relative; order: -1; }
.sf-courses .course-img-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgb(40 22 65 / 23%), transparent 50%);
    pointer-events: none;
}
.sf-courses .course-badge {
    position: absolute;
    z-index: 1;
    inset-block-start: 12px;
    inset-inline-end: 12px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--sf-purple);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}
.sf-courses .course-card:nth-child(3) .course-badge { background: var(--sf-teal); }
.sf-courses .course-card:nth-child(4) .course-badge { background: var(--sf-blue); }
.sf-courses .course-card:nth-child(5) .course-badge { background: var(--sf-coral); }
.sf-courses .course-desc { color: var(--sf-muted); }
.sf-courses .course-features { margin-bottom: 18px; padding-top: 8px; border-top: 1px solid var(--sf-border); }
.sf-courses .btn-course {
    align-self: flex-start;
    margin-top: auto;
    background: var(--sf-purple);
    color: #fff;
}
.sf-courses .btn-course:hover { background: var(--sf-purple-hover); }
html[dir="rtl"] .sf-courses .btn-course i { transform: scaleX(-1); }

.sf-qwasar {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    align-items: center;
    gap: clamp(18px, 4vw, 46px);
}
.sf-qwasar > img, .sf-general-faq-grid > img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--sf-border);
    border-radius: 22px;
    box-shadow: 0 12px 26px rgb(40 21 64 / 12%);
}
.sf-qwasar-copy p { margin: 12px 0; color: var(--sf-muted); }
.sf-qwasar-programs { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 20px; padding: 0; list-style: none; }
.sf-qwasar-programs li { padding: 5px 10px; border-radius: 999px; background: var(--sf-purple); color: #fff; font-size: 13px; }
.sf-qwasar-programs li:nth-child(3n + 2) { background: var(--sf-teal); }
.sf-qwasar-programs li:nth-child(3n) { background: var(--sf-blue); }

.sf-language-card + .sf-language-card { padding-top: clamp(20px, 4vw, 48px); border-top: 1px solid var(--sf-border); }
.sf-language-card .langues-box p { margin: 10px 0 20px; color: var(--sf-muted); }
.sf-language-grid, .sf-newsletter .newsletter-grid, .sf-general-faq-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(16px, 4vw, 42px);
}
.sf-language-grid, .sf-newsletter .newsletter-grid { align-items: center; }

.sf-language-card + .sf-language-card .img-fluid { background: var(--sf-mint); }
.sf-language-grid .web-title { color: var(--sf-purple); font-size: clamp(20px, 2.4vw, 28px); font-weight: 700; }
.sf-language-grid :is(.formations-desc-2, .web-desc) { color: var(--sf-muted); }
.sf-language-grid ul { padding-inline-start: 1.3rem; }
.sf-language-grid .btn-number-1, .sf-newsletter .btn-subscribe, .sf-join .w4j-hero-btn {
    border: 0;
    background: var(--sf-purple);
    color: #fff;
}
.sf-language-grid .btn-number-1:hover, .sf-newsletter .btn-subscribe:hover { background: var(--sf-purple-hover); }
.sf-join {
    padding: clamp(38px, 7vw, 94px) clamp(18px, 5vw, 68px);
    border-radius: clamp(20px, 3vw, 34px);
    background:
        radial-gradient(ellipse at center, rgb(29 16 53 / 93%), rgb(29 16 53 / 48%)),
        var(--sf-plum) url("../../images/w4j_background.png") center / cover no-repeat;
    color: #fff;
    text-align: center;
}
.sf-join .w4j-hero-title { max-width: 24ch; margin-inline: auto; color: #fff; text-wrap: balance; }
.sf-join .w4j-hero-badge, .sf-newsletter .newsletter-heading-badge {
    display: inline-flex;
    margin-bottom: 12px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #eee4ff;
    color: var(--sf-purple-hover);
    font-size: 13px;
    font-weight: 700;
}
.sf-join .w4j-hero-subtitle { max-width: 56ch; margin: 14px auto 24px; color: #f2e9ff; }
.sf-join .w4j-hero-btn { background: var(--sf-lime); color: #292335; }
.sf-join .w4j-hero-btn:hover { background: #f2ffc7; }
.sf-join .w4j-hero-btn:focus-visible { outline-color: var(--sf-lime); }
.sf-join svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.sf-newsletter .newsletter-heading-badge { background: var(--sf-coral); color: #fff; }
.sf-newsletter .highlight { color: var(--sf-purple); }
.sf-newsletter .newsletter-lead { margin: 12px 0 18px; color: var(--sf-muted); }
.sf-newsletter .newsletter-highlights { display: grid; gap: 8px; }
.sf-newsletter .newsletter-highlight-item { display: flex; align-items: center; gap: 10px; }
.sf-newsletter .newsletter-highlight-bullet { display: grid; flex: 0 0 32px; place-items: center; height: 32px; border-radius: 10px; background: var(--sf-lavender); }
.sf-newsletter .newsletter-form-card {
    min-width: 0;
    padding: clamp(16px, 3vw, 30px);
    border: 1px solid var(--sf-border);
    border-top: 4px solid var(--sf-purple);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 9px 24px rgb(40 21 64 / 9%);
}
.sf-newsletter .newsletter-form-card h3 { margin: 0 0 8px; color: var(--sf-purple); font-size: 24px; }
.sf-newsletter .newsletter-form-card p { color: var(--sf-muted); }
.sf-newsletter .form-control { min-height: 46px; margin: 6px 0 12px; border-color: #cfc2df; border-radius: 12px; }
.sf-newsletter .form-control:focus { border-color: var(--sf-purple); box-shadow: 0 0 0 3px var(--sf-lavender); }
.sf-newsletter .btn-subscribe { width: 100%; }
.sf-newsletter .newsletter-privacy { margin: 12px 0 0; font-size: 13px; }
.sf-newsletter .newsletter-privacy a, .sf-general-faq-answer a { color: var(--sf-purple-hover); }
.sf-general-faq-grid > img { max-height: 430px; object-fit: cover; }
.sf-general-faq-answer { padding: 0 16px 16px; color: var(--sf-muted); }

.sf-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 22px); margin: 0; padding: 0; list-style: none; }
.sf-steps li {
    --sf-step-accent: var(--sf-purple);
    padding: clamp(16px, 2.4vw, 26px);
    border: 1px solid var(--sf-border);
    border-top: 4px solid var(--sf-step-accent);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 7px 20px rgb(40 21 64 / 8%);
}
.sf-steps li:nth-child(2) { --sf-step-accent: var(--sf-teal); }
.sf-steps li:nth-child(3) { --sf-step-accent: var(--sf-blue); }
.sf-step-number { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 14px; border-radius: 11px; color: #fff; background: var(--sf-step-accent); font-weight: 700; }
.sf-steps p { margin: 8px 0 0; color: var(--sf-muted); }

.sf-faq { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(12px, 4vw, 48px); }
.sf-contact { display: inline-block; margin-top: 16px; color: var(--sf-purple-hover); font-weight: 700; text-underline-offset: 3px; }
.sf-faq-list { display: grid; gap: 10px; align-content: start; }
.sf-faq-list details { border: 1px solid var(--sf-border); border-radius: 16px; background: #fff; box-shadow: 0 4px 12px rgb(40 21 64 / 5%); }
.sf-faq-list details[open] { border-color: #d7c1ef; border-inline-start: 3px solid var(--sf-purple); background: #faf5ff; }
.sf-faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 16px; font-weight: 700; list-style: none; cursor: pointer; }
.sf-faq-list summary::-webkit-details-marker { display: none; }
.sf-faq-list summary::after { content: '+'; display: grid; flex: 0 0 30px; place-items: center; height: 30px; border-radius: 9px; background: var(--sf-lavender); color: var(--sf-purple-hover); font-size: 20px; line-height: 1; }
.sf-faq-list details[open] summary::after { content: '−'; background: var(--sf-purple); color: #fff; }
.sf-faq-list p { margin: 0; padding: 0 16px 16px; color: var(--sf-muted); }
.sf-general-faq-answer p { padding: 0; margin-bottom: 8px; }
.sf-general-faq-answer > :last-child { margin-bottom: 0; }

:is(.sf-about-hero, .sf-testimonials-hero, .sf-blog-hero, .sf-cgv-hero, .sf-contact-hero) {
    margin-top: clamp(90px, 8vw, 112px);
    padding: clamp(36px, 6vw, 78px) clamp(18px, 5vw, 56px);
    border-radius: clamp(20px, 3vw, 36px);
    background:
        radial-gradient(ellipse at center, rgb(35 18 63 / 94%), rgb(35 18 63 / 65%)),
        var(--sf-plum) url("../../images/w4j_background.png") center / cover no-repeat;
    color: #fff;
    box-shadow: 0 18px 42px rgb(40 22 65 / 20%);
    text-align: center;
}
.sf-about-mission {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    align-items: center;
    gap: clamp(24px, 5vw, 72px);
}
:is(.sf-about-breadcrumb, .sf-testimonials-breadcrumb, .sf-blog-breadcrumb, .sf-cgv-breadcrumb, .sf-contact-breadcrumb) {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0 0 16px;
    padding: 5px 12px;
    border: 1px solid rgb(255 255 255 / 25%);
    border-radius: 999px;
    background: rgb(255 255 255 / 9%);
    color: #e6d4ff;
    font-size: 14px;
    font-weight: 600;
}
:is(.sf-about-breadcrumb, .sf-testimonials-breadcrumb, .sf-blog-breadcrumb, .sf-cgv-breadcrumb, .sf-contact-breadcrumb) a { color: inherit; text-underline-offset: 3px; }
:is(.sf-about-hero, .sf-testimonials-hero, .sf-blog-hero, .sf-cgv-hero, .sf-contact-hero) h1 { margin: 0; font-size: clamp(38px, 5.1vw, 72px); line-height: 1.05; font-weight: 700; text-wrap: balance; }
:is(.sf-about-lead, .sf-testimonials-lead, .sf-blog-lead, .sf-contact-lead) { max-width: 55ch; margin: 16px auto 0; color: #f2e9ff; font-size: clamp(16px, 1.8vw, 21px); text-wrap: pretty; }
:is(.sf-about-hero, .sf-testimonials-hero, .sf-blog-hero, .sf-cgv-hero, .sf-contact-hero) :focus-visible { outline-color: var(--sf-lime); }

.sf-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(20px, 4vw, 48px);
}
.sf-contact-panel {
    padding: clamp(18px, 3.5vw, 40px);
    border: 1px solid var(--sf-border);
    border-block-start: 4px solid var(--sf-purple);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 16px 36px rgb(40 22 65 / 8%);
}
:is(.sf-contact-grid, .sf-interest-panel) h2 {
    margin: 0 0 12px;
    color: var(--sf-purple);
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 700;
}
.sf-contact-intro { max-width: 62ch; margin-bottom: 24px; color: var(--sf-muted); }
.sf-contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.sf-contact-field { display: grid; min-width: 0; gap: 6px; }
.sf-contact-field-wide { grid-column: 1 / -1; }
.sf-contact-field label { font-size: 14px; font-weight: 700; }
.sf-contact-field .form-control {
    min-height: 46px;
    padding: 10px 14px;
    border-color: #d0bfdc;
    border-radius: 12px;
    color: var(--sf-ink);
    text-align: start;
}
.sf-contact-field .form-control:focus { border-color: var(--sf-purple); box-shadow: 0 0 0 3px var(--sf-lavender); }
.sf-contact-field textarea { resize: vertical; }
.sf-contact-channels.sf-card-grid {
    grid-template-columns: minmax(0, 1fr);
    margin: 0 0 14px;
}
.sf-contact-channels .cats-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: clamp(10px, 1.4vw, 16px);
    min-height: 0;
}
.sf-contact-channels .img-cats { margin-bottom: 0; }
.sf-contact-channels .cats-card h3 { padding-inline-end: 44px; }
.sf-contact-channels a { color: inherit; font-weight: 700; text-underline-offset: 3px; }
.sf-contact-channels a:hover { color: var(--sf-lime); }
.sf-contact-channels a:focus-visible { outline-color: #fff; }
.sf-contact-map { display: block; width: 100%; height: 235px; border: 1px solid var(--sf-border); border-radius: 16px; }

.sf-interest-panel h2 { margin-bottom: clamp(16px, 3vw, 26px); }
.sf-interest-form .sf-login-input { min-width: 0; }

@media (max-width: 900px) {
    .sf-contact-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575px) {
    .sf-contact-form { grid-template-columns: minmax(0, 1fr); }
    .sf-contact-form .sf-button { width: 100%; }
}

.sf-login {
    display: grid;
    grid-template-areas: 'image form';
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 100vh;
    min-height: 100dvh;
    background: #fff;
}
html[dir="rtl"] .sf-login { grid-template-areas: 'form image'; }
.sf-login-image {
    grid-area: image;
    display: grid;
    place-items: center;
    padding: clamp(24px, 4vw, 64px);
    background:
        linear-gradient(150deg, rgb(25 13 51 / 65%), rgb(33 15 65 / 40%) 54%, rgb(25 13 51 / 80%)),
        var(--sf-plum) url("../../images/w4j_background.png") center / cover no-repeat;
    color: #fff;
}
.sf-login-image :focus-visible { outline-color: var(--sf-lime); }
.sf-login-story { width: min(100%, 540px); }
.sf-login-eyebrow {
    display: inline-block;
    margin: 0 0 14px;
    padding: 6px 12px;
    border: 1px solid rgb(255 255 255 / 32%);
    border-radius: 999px;
    background: rgb(25 13 51 / 65%);
    color: var(--sf-lime);
    font-size: 13px;
    font-weight: 700;
}
.sf-login-story h2 { max-inline-size: 19ch; margin: 0; font-size: clamp(30px, 3.6vw, 54px); font-weight: 700; line-height: 1.1; text-wrap: balance; }
.sf-login-benefits { display: grid; gap: 8px; margin: clamp(16px, 2.4vh, 26px) 0; padding: 0; list-style: none; }
.sf-login-benefits li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border: 1px solid rgb(255 255 255 / 23%); border-radius: 14px; background: rgb(31 16 64 / 72%); }
.sf-login-benefit-icon { display: grid; flex: 0 0 36px; block-size: 36px; place-items: center; border-radius: 11px; background: var(--sf-lime); color: #292335; font-size: 17px; }
.sf-login-benefits p { margin: 2px 0 0; color: #f1e9ff; font-size: 14px; }
.sf-login-quotes { padding: 14px 16px; border-inline-start: 3px solid var(--sf-lime); border-radius: 12px; background: rgb(24 12 48 / 80%); }
.sf-login-quotes :is(figure, blockquote) { margin-block: 0; }
.sf-login-quotes p { margin: 0 0 8px; font-size: 14px; }
.sf-login-quotes figcaption { color: #e5d6fc; font-size: 13px; font-weight: 700; }
.sf-login-quote-controls { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.sf-login-quote-controls button {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgb(255 255 255 / 36%);
    border-radius: 50%;
    background: transparent;
    color: #fff;
}
.sf-login-quote-controls button:hover { background: var(--sf-lime); color: #292335; }
html[dir="rtl"] .sf-login-quote-controls i { transform: scaleX(-1); }

.sf-login-panel {
    grid-area: form;
    display: grid;
    place-items: center;
    padding: clamp(14px, 3vw, 48px);
    background:
        radial-gradient(ellipse at top right, #e9d9ff, transparent 60%),
        radial-gradient(ellipse at bottom left, #ecf4d9, transparent 50%),
        var(--sf-paper);
}
.sf-login-panel-inner { width: min(100%, 500px); }
.sf-login-brand { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 20px; }
.sf-login-logo { display: inline-block; border-radius: 6px; }
.sf-login-logo img { display: block; width: 88px; height: auto; }
.sf-login-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid #d3e895;
    border-radius: 999px;
    background: var(--sf-lime);
    color: #292335;
    font-size: 13px;
    font-weight: 700;
}
.sf-login-header { margin-bottom: 22px; }
.sf-login-header h1 { margin: 0; color: var(--sf-plum); font-size: clamp(30px, 3.4vw, 48px); font-weight: 700; line-height: 1.1; text-wrap: balance; }
.sf-login-header h1 bdi { color: var(--sf-purple-hover); }
.sf-login-header > p:last-child { max-inline-size: 44ch; margin: 12px 0 0; color: var(--sf-muted); }
.sf-login-social { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sf-login-social .sf-button { border-color: #747775; background: #fff; color: #1f1f1f; }
.sf-login-social .sf-button:hover { border-color: var(--sf-purple); box-shadow: 0 0 0 2px var(--sf-lavender); }
.sf-login-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--sf-muted); font-size: 13px; text-align: center; }
.sf-login-divider::before, .sf-login-divider::after { content: ''; flex: 1; height: 1px; background: var(--sf-border); }
.sf-login-form { display: grid; gap: 14px; }
.sf-login-field > label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; }
.sf-login-input { display: flex; align-items: center; gap: 8px; padding-inline: 8px 5px; border: 1px solid #d0bfdc; border-radius: 999px; background: #fff; }
.sf-login-input > i { display: grid; flex: 0 0 30px; place-items: center; height: 30px; border-radius: 50%; background: var(--sf-lavender); color: var(--sf-purple-hover); font-size: 15px; }
.sf-login-input > .fe-lock { background: var(--sf-lime); color: #292335; }
.sf-login-input:focus-within { border-color: var(--sf-purple); background: #fff; box-shadow: 0 0 0 3px var(--sf-lavender); }
.sf-login-input:has([aria-invalid="true"]) { border-color: var(--sf-coral); }
.sf-login-input :is(.form-control, .form-select) { min-width: 0; min-height: 46px; border: 0; background-color: transparent; color: var(--sf-ink); }
.sf-login-input .form-control { padding-inline: 0 7px; }
.sf-login-input .form-select { padding-inline: 0 32px; }
.sf-login-input :is(.form-control, .form-select):focus { box-shadow: none; outline: none; }
.sf-login-input .form-control::placeholder { color: var(--sf-muted); }
html[dir="rtl"] .sf-login-input .form-control:placeholder-shown { text-align: right; }
html[dir="rtl"] .sf-login-input .form-select { background-position: left 12px center; }
.sf-login-password-toggle { flex: 0 0 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--sf-purple-hover); }
.sf-login-password-toggle:hover { background: var(--sf-lavender); }
.sf-login-password-note:not(:empty) { display: block; margin-block-start: 4px; margin-inline-start: 8px; }
.sf-login-options { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; font-size: 14px; }
.sf-login-options label { display: inline-flex; align-items: center; gap: 7px; margin: 0; }
.sf-login-options input { width: 16px; height: 16px; accent-color: var(--sf-purple); }
.sf-login-options a, .sf-login-register a { color: var(--sf-purple-hover); font-weight: 700; text-underline-offset: 3px; }
.sf-login-submit { width: 100%; box-shadow: 0 6px 16px rgb(88 45 156 / 24%); }
.sf-login-submit:disabled { opacity: 0.6; box-shadow: none; }
.sf-login-register { margin: 18px 0 0; color: var(--sf-muted); font-size: 14px; text-align: center; }

.sf-auth-register .sf-login-image {
    position: sticky;
    inset-block-start: 0;
    align-self: start;
    min-block-size: 100vh;
    min-block-size: 100dvh;
}
.sf-register-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 205px), 1fr)); gap: 12px; }
.sf-register-phone .iti { flex: 1; min-width: 0; direction: ltr; }
.sf-register-consent { padding: 12px 14px; border-radius: 16px; background: var(--sf-lavender); color: var(--sf-ink); font-size: 14px; }
.sf-register-consent p { margin: 0 0 10px; }
.sf-register-consent > div { display: flex; align-items: baseline; gap: 8px; }
.sf-register-consent input { flex-shrink: 0; accent-color: var(--sf-purple); }
.sf-register-consent a { color: var(--sf-purple-hover); font-weight: 700; text-underline-offset: 3px; }

@media (max-width: 850px) {
    html[dir] .sf-login { grid-template-areas: 'form'; grid-template-columns: minmax(0, 1fr); }
    .sf-login-image { display: none; }
}
@media (max-width: 440px) {
    .sf-login-social { grid-template-columns: minmax(0, 1fr); }
}

.sf-program { --sf-program-accent: var(--sf-purple); --sf-program-tint: var(--sf-lavender); }
.sf-program-data, .sf-course-detail-front, .sf-course-detail-data { --sf-program-accent: var(--sf-teal); --sf-program-tint: var(--sf-mint); }
.sf-program-security, .sf-course-detail-back, .sf-course-detail-security { --sf-program-accent: var(--sf-blue); --sf-program-tint: var(--sf-sky); }
.sf-program-web3, .sf-course-detail-web3 { --sf-program-accent: var(--sf-amber); --sf-program-tint: var(--sf-peach); }
.sf-program-hero {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(20px, 5vw, 72px);
    margin-top: clamp(90px, 8vw, 112px);
    padding: clamp(24px, 5vw, 72px);
    border-radius: clamp(20px, 3vw, 36px);
    background:
        linear-gradient(115deg, rgb(35 18 63 / 98%), rgb(35 18 63 / 73%)),
        var(--sf-plum) url("../../images/programs/hero-background.webp") center / cover no-repeat;
    color: #fff;
    box-shadow: 0 18px 42px rgb(40 22 65 / 20%);
}
.sf-program-hero h1 {
    margin: 0;
    font-size: clamp(34px, 5vw, 68px);
    font-weight: 700;
    line-height: 1.08;
    text-wrap: balance;
}
.sf-program-hero-copy > p { max-width: 62ch; margin: 16px 0 24px; color: #f2e9ff; font-size: clamp(16px, 1.8vw, 20px); }
.sf-program-hero :focus-visible, .sf-program-enrollment :focus-visible { outline-color: var(--sf-lime); }
.sf-program-emblem {
    display: grid;
    width: min(100%, 216px);
    aspect-ratio: 1;
    place-items: center;
    justify-self: center;
    border: 1px solid rgb(255 255 255 / 26%);
    border-radius: 32%;
    background: linear-gradient(135deg, rgb(255 255 255 / 20%), rgb(255 255 255 / 5%));
    box-shadow: inset 0 0 0 10px rgb(255 255 255 / 6%), 0 18px 40px rgb(20 10 38 / 24%);
}
.sf-program-emblem span {
    display: grid;
    width: 60%;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 32%;
    background: var(--sf-program-tint);
    color: var(--sf-program-accent);
    font-size: clamp(32px, 5vw, 64px);
    line-height: 1;
}
.sf-program-intro {
    margin-bottom: clamp(28px, 5vw, 64px);
    padding-inline-start: clamp(16px, 3vw, 32px);
    border-inline-start: 3px solid var(--sf-program-accent);
}
.sf-program-intro .sf-section-head { margin-bottom: 14px; }
.sf-program-intro > p { max-width: 75ch; margin: 0; color: var(--sf-muted); }
.sf-program-intro a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.sf-program .sf-program-courses { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-program-web3 .sf-program-courses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-program-courses .course-card { color: inherit; text-decoration: none; transition: border-color 180ms, box-shadow 180ms; }
.sf-program-courses .course-card:hover { border-color: var(--sf-program-accent); box-shadow: 0 14px 28px rgb(40 21 64 / 12%); }
.sf-program-courses .course-img { aspect-ratio: 16 / 9; border-color: var(--sf-program-accent); }
.sf-program-courses .course-title { font-weight: 700; }
.sf-program-courses .sf-button { align-self: flex-start; margin-top: auto; }
.sf-program-courses .course-card:hover .sf-button { background: var(--sf-purple-hover); }
.sf-program-outcomes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(16px, 4vw, 40px);
    margin: 0;
    padding: 0;
    list-style: none;
}
.sf-program-outcomes li { display: flex; align-items: flex-start; gap: 14px; padding-block: 18px; border-top: 1px solid var(--sf-border); }
.sf-program-outcomes li > span {
    display: grid;
    flex: 0 0 40px;
    height: 40px;
    place-items: center;
    border-radius: 12px;
    background: var(--sf-program-tint);
    color: var(--sf-program-accent);
    font-weight: 700;
}
.sf-program-outcomes h3 { margin: 0 0 5px; font-size: 19px; font-weight: 700; }
.sf-program-outcomes p { margin: 0; color: var(--sf-muted); }
.sf-program-enrollment {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: clamp(20px, 4vw, 42px);
    border-radius: 24px;
    background: linear-gradient(135deg, var(--sf-plum), var(--sf-purple-hover));
    color: #fff;
}
.sf-program-enrollment > div { flex: 1 1 480px; }
.sf-program-enrollment h2 { font-size: clamp(24px, 3vw, 40px); }
.sf-program-enrollment p { max-width: 70ch; margin: 10px 0 0; color: #f2e9ff; }

.sf-passport-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 52px); }
.sf-passport-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sf-passport-actions a { max-width: 100%; text-align: center; }
.sf-passport-outline { border-color: rgb(255 255 255 / 40%); background: rgb(255 255 255 / 9%); color: #fff; }
.sf-passport-outline:hover { border-color: var(--sf-lime); color: var(--sf-lime); }
.sf-passport-visual {
    position: relative;
    margin: 0;
    padding: 7px;
    border: 1px solid rgb(255 255 255 / 33%);
    border-radius: 24px;
    background: rgb(255 255 255 / 15%);
    box-shadow: 0 16px 36px rgb(20 10 38 / 28%);
}
.sf-passport-visual > img:first-child { display: block; width: 100%; height: auto; border-radius: 17px; }
.sf-passport-logo {
    position: absolute;
    inset-inline-end: 17px;
    inset-block-end: 17px;
    width: clamp(108px, 42%, 192px);
    height: auto;
    padding: 8px 10px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 5px 15px rgb(20 10 38 / 22%);
}
.sf-passport-overview, .sf-passport-themes {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(18px, 4vw, 48px);
    padding: clamp(18px, 3.4vw, 42px);
    border: 1px solid var(--sf-border);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 10px 28px rgb(40 22 65 / 7%);
}
.sf-passport-list, .sf-passport-methods { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.sf-passport-list li { display: flex; align-items: baseline; gap: 10px; color: var(--sf-muted); }
.sf-passport-list i { flex-shrink: 0; color: var(--sf-teal); }
.sf-passport-methods li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 14px;
    background: var(--sf-lavender);
    color: var(--sf-purple-hover);
    font-weight: 700;
}
.sf-passport-methods li:nth-child(2) { background: var(--sf-mint); color: var(--sf-teal); }
.sf-passport-methods li:nth-child(3) { background: var(--sf-sky); color: var(--sf-blue); }
.sf-passport-methods li > span { display: grid; flex: 0 0 36px; height: 36px; place-items: center; border-radius: 50%; background: #fff; }
.sf-passport-level {
    --sf-level-accent: var(--sf-purple-hover);
    --sf-level-tint: var(--sf-lavender);
    overflow: hidden;
    border: 1px solid var(--sf-border);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 9px 22px rgb(40 22 65 / 8%);
}
.sf-passport-level:nth-child(2) { --sf-level-accent: var(--sf-teal); --sf-level-tint: var(--sf-mint); }
.sf-passport-level:nth-child(3) { --sf-level-accent: var(--sf-blue); --sf-level-tint: var(--sf-sky); }
.sf-passport-level-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 14px;
    padding: clamp(14px, 2vw, 24px);
    background: var(--sf-level-tint);
    color: var(--sf-level-accent);
}
.sf-passport-level-head h3 { margin: 0; font-size: clamp(22px, 2.5vw, 28px); font-weight: 700; }
.sf-passport-level-head span { padding: 4px 10px; border-radius: 999px; background: var(--sf-level-accent); color: #fff; font-size: 13px; font-weight: 700; }
.sf-passport-level dl { margin: 0; padding: clamp(14px, 2vw, 24px); }
.sf-passport-level dl > div + div { margin-block-start: 12px; padding-block-start: 12px; border-block-start: 1px solid var(--sf-border); }
.sf-passport-level dd { margin: 4px 0 0; color: var(--sf-muted); font-size: 15px; }
.sf-passport-themes .sf-button { margin-block-start: 20px; }
.sf-passport-themes > img { display: block; width: 100%; height: auto; border-radius: 17px; }

.sf-language-hero {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    padding-block: clamp(36px, 7vw, 88px);
    background:
        radial-gradient(ellipse at 75% 0%, rgb(150 92 239 / 38%), transparent 56%),
        linear-gradient(135deg, var(--sf-plum), #39215c);
    text-align: center;
}
.sf-language-hero .sf-program-hero-copy > p { margin-inline: auto; }
.sf-language-courses .course-card { --sf-language-accent: var(--sf-purple); }
.sf-language-courses .course-card:nth-child(2) { --sf-language-accent: var(--sf-teal); }
.sf-language-courses .course-card:nth-child(3) { --sf-language-accent: var(--sf-blue); }
.sf-language-courses .course-card:nth-child(4) { --sf-language-accent: var(--sf-coral); }
.sf-language-courses .course-img { aspect-ratio: 16 / 10; border-color: var(--sf-language-accent); }
.sf-language-courses .course-title { color: var(--sf-language-accent); font-weight: 700; }
.sf-language-courses .course-desc { margin: 0; }
.sf-language-overview .sf-program-outcomes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-language-overview > .sf-button { margin-block-start: 14px; }
.sf-language-partner {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr);
    align-items: start;
    gap: clamp(18px, 4vw, 48px);
    padding: clamp(20px, 4vw, 52px);
    border: 1px solid var(--sf-border);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 10px 28px rgb(40 22 65 / 7%);
}
.sf-language-partner p { max-width: 76ch; margin: 0 0 12px; color: var(--sf-muted); }
.sf-language-partner p:last-child { margin-bottom: 0; }
.sf-language-partner .sf-section-head { margin-bottom: 0; }
.sf-language-partner h2 { font-size: clamp(26px, 3vw, 40px); }

@media (min-width: 961px) {
    .sf-passport-benefits, .sf-language-courses { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .sf-passport-hero, .sf-passport-overview, .sf-passport-themes,
    .sf-language-partner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 650px) {
    .sf-language-overview .sf-program-outcomes { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 980px) {
    .sf-program .sf-program-courses, .sf-program-outcomes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .sf-program-hero, .sf-program .sf-program-courses, .sf-program-outcomes { grid-template-columns: minmax(0, 1fr); }
    .sf-program-emblem { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .sf-program-courses .course-card { transition: none; }
}

.sf-course-hero { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.sf-course-hero h1 { font-size: clamp(32px, 4.5vw, 60px); }
.sf-course-objectives-title { margin: 0 0 10px; font-size: 18px; font-weight: 700; }
.sf-course-objectives, .sf-course-prerequisites { display: grid; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; }
.sf-course-objectives li, .sf-course-prerequisites li { display: flex; align-items: baseline; gap: 10px; }
.sf-course-objectives i { color: var(--sf-lime); }
.sf-course-summary {
    overflow: hidden;
    border-radius: clamp(16px, 2vw, 24px);
    background: #fff;
    color: var(--sf-ink);
    box-shadow: 0 16px 44px rgb(15 6 34 / 28%);
}
.sf-course-summary :focus-visible { outline-color: var(--sf-purple); }
.sf-course-summary-media { position: relative; }
.sf-course-summary-media img { display: block; width: 100%; height: auto; }
.sf-course-badge {
    position: absolute;
    inset-block-start: 14px;
    inset-inline-start: 14px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--sf-program-tint);
    color: var(--sf-program-accent);
    font-size: 13px;
    font-weight: 700;
}
.sf-course-summary-body { padding: clamp(16px, 2.8vw, 28px); }
.sf-course-summary-body h2 { margin: 0 0 12px; color: var(--sf-purple); font-size: 21px; font-weight: 700; }
.sf-course-prerequisites i { color: var(--sf-program-accent); }
.sf-course-summary-body .sf-button { width: 100%; }
.sf-course-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(24px, 5vw, 64px); }
.sf-course-content h2 { font-size: clamp(27px, 3.5vw, 42px); }
.sf-course-overview > p { max-width: 65ch; margin: 0 0 14px; color: var(--sf-muted); }
.sf-course-overview-list { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--sf-border); }
.sf-course-overview-list h3 { margin: 0 0 12px; color: var(--sf-purple); font-size: 19px; font-weight: 700; }
.sf-course-overview-list ul { margin: 0; color: var(--sf-muted); }
.sf-course-curriculum { margin: 0; padding: 0; list-style: none; }
.sf-course-curriculum li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    padding-block: 15px;
    border-block-start: 1px solid var(--sf-border);
}
.sf-course-topic-number {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 10px;
    background: var(--sf-program-tint);
    color: var(--sf-program-accent);
    font-size: 14px;
    font-weight: 700;
}
.sf-course-curriculum h3 { margin: 0; padding-block-start: 5px; color: var(--sf-ink); font-size: 17px; font-weight: 700; line-height: 1.4; }
.sf-course-curriculum p { margin: 6px 0 0; color: var(--sf-muted); }

@media (max-width: 860px) {
    .sf-course-hero, .sf-course-content { grid-template-columns: minmax(0, 1fr); }
    .sf-course-summary { width: min(100%, 520px); }
}

.sf-about-content :is(.sf-about-why, .sf-about-values) .sf-section-head {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: end;
    gap: clamp(12px, 4vw, 48px);
}
.sf-about-content :is(.sf-about-why, .sf-about-values) .sf-section-head p {
    margin: 0;
    padding-inline-start: 16px;
    border-inline-start: 2px solid #d9c6ef;
}

.sf-about-mission-art img { display: block; width: min(100%, 475px); height: auto; }
.sf-about-mission-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sf-about-mission-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--sf-border);
    border-inline-start: 3px solid var(--sf-about-accent, var(--sf-purple));
    border-radius: 14px;
    background: #fff;
}
.sf-about-mission-list li span, .sf-about-icon {
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--sf-about-accent, var(--sf-purple));
    color: #fff;
}
.sf-about-mission-list li span { flex: 0 0 38px; height: 38px; font-size: 13px; font-weight: 700; }
.sf-about-reasons {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(12px, 2vw, 22px);
}
.sf-about-reason {
    padding: clamp(18px, 2.5vw, 28px);
    border: 1px solid var(--sf-border);
    border-radius: 20px;
    box-shadow: 0 7px 18px rgb(40 21 64 / 8%);
}
.sf-about-reason {
    border-color: transparent;
    background:
        radial-gradient(circle at 100% 0%, rgb(255 255 255 / 12%), transparent 42%),
        var(--sf-about-accent, var(--sf-purple));
    color: #fff;
}
.sf-about-reason:nth-child(2), .sf-about-mission-list li:nth-child(2) { --sf-about-accent: var(--sf-teal); }
.sf-about-reason:nth-child(3), .sf-about-mission-list li:nth-child(3) { --sf-about-accent: var(--sf-blue); }
.sf-about-reason:nth-child(4) { --sf-about-accent: var(--sf-coral); }
.sf-about-icon { width: 46px; height: 46px; margin-bottom: 14px; font-size: 22px; }
.sf-about-reason .sf-about-icon { background: #fff; }
.sf-about-icon img { width: 28px; height: 28px; object-fit: contain; }
.sf-about-reason h3 { margin: 0 0 8px; font-size: 21px; font-weight: 700; }
.sf-about-reason p { margin: 0; }
.sf-about-content .newsletter-highlight-bullet { background: var(--sf-mint); }
.sf-about-content .newsletter-form-card { border-top-color: var(--sf-teal); }

.sf-kb-search {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    max-width: 760px;
    margin-bottom: 22px;
    padding: 8px 10px 8px 16px;
    border: 1px solid var(--sf-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 24px rgb(40 22 65 / 7%);
}
.sf-kb-search > i { color: var(--sf-purple); font-size: 20px; }
.sf-kb-search .form-control { min-height: 46px; border: 0; border-radius: 10px; color: var(--sf-ink); }
.sf-kb-search .form-control:focus { box-shadow: 0 0 0 3px var(--sf-lavender); }
.sf-kb-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.sf-kb-status p { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0; color: var(--sf-muted); }
.sf-kb-status strong { color: var(--sf-purple-hover); }
.sf-kb-status[hidden] { display: none; }
.sf-kb-empty { padding: 16px; border-inline-start: 3px solid var(--sf-purple); border-radius: 10px; background: var(--sf-lavender); color: var(--sf-ink); }
.sf-kb-topics { margin: 0; padding: 0; list-style: none; }
.sf-kb-topics > .cats-card { padding: 0; }
.sf-kb-topics .sf-category-index { pointer-events: none; }
.sf-kb-topic {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    padding: var(--sf-card-padding);
    border-radius: inherit;
    color: inherit;
    text-decoration: none;
}
.sf-kb-topic:hover { color: inherit; }
.sf-kb-topic:focus-visible { outline-color: #fff; outline-offset: -5px; }
.sf-kb-topic-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 14px;
    width: 100%;
    margin-top: auto;
    padding-block-start: 18px;
    font-size: 14px;
}
.sf-kb-topic-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid rgb(255 255 255 / 40%);
    border-radius: 999px;
    background: rgb(255 255 255 / 12%);
    font-weight: 700;
}
.sf-kb-topic:is(:hover, :focus-visible) .sf-kb-topic-link { background: var(--sf-lime); color: #292335; }
.sf-kb-help nav { display: flex; flex-wrap: wrap; gap: 10px; }
.sf-kb-outline { border-color: var(--sf-border); background: #fff; color: var(--sf-purple-hover); }
.sf-kb-outline:hover { background: var(--sf-lavender); color: var(--sf-purple-hover); }

.sf-kb-article-tools, .sf-kb-article-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sf-kb-help > .sf-kb-article-actions { flex: 0 1 auto; }
.sf-kb-article-tools { justify-content: center; margin-top: 24px; }
.sf-kb-article-tools .badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--sf-lavender);
    color: var(--sf-purple-hover);
}
.sf-kb-questions, .sf-kb-guide, .sf-kb-video { width: min(100%, 980px); margin-inline: auto; }
.sf-kb-questions, .sf-kb-guide .steps { display: grid; gap: 12px; }
.sf-kb-question, .sf-kb-guide .step {
    --sf-kb-accent: var(--sf-purple-hover);
    --sf-kb-tint: var(--sf-lavender);
    border: 1px solid var(--sf-border);
    border-inline-start: 3px solid var(--sf-kb-accent);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 20px rgb(40 22 65 / 5%);
}
.sf-kb-question:nth-child(3n + 2), .sf-kb-guide .step:nth-child(3n + 2) { --sf-kb-accent: var(--sf-teal); --sf-kb-tint: var(--sf-mint); }
.sf-kb-question:nth-child(3n), .sf-kb-guide .step:nth-child(3n) { --sf-kb-accent: var(--sf-blue); --sf-kb-tint: var(--sf-sky); }
.sf-kb-question summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: clamp(12px, 2vw, 18px);
    border-radius: 13px;
    cursor: pointer;
    list-style: none;
}
.sf-kb-question summary::-webkit-details-marker { display: none; }
.sf-kb-question summary:hover, .sf-kb-question[open] summary { background: var(--sf-kb-tint); }
.sf-kb-question-label, .sf-kb-guide .step-top { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.sf-kb-question-icon, .sf-kb-guide .step-badge {
    display: grid;
    flex: 0 0 38px;
    height: 38px;
    place-items: center;
    border-radius: 11px;
    background: var(--sf-kb-tint);
    color: var(--sf-kb-accent);
    font-size: 16px;
    font-weight: 700;
}
.sf-kb-question-title, .sf-kb-question-subtitle { display: block; overflow-wrap: anywhere; }
.sf-kb-question-title { color: var(--sf-ink); font-size: clamp(16px, 2vw, 20px); font-weight: 700; }
.sf-kb-question-subtitle { margin-top: 3px; color: var(--sf-muted); font-size: 14px; }
.sf-kb-question-chevron { flex-shrink: 0; color: var(--sf-kb-accent); }
.sf-kb-question[open] .sf-kb-question-chevron { transform: rotate(180deg); }
.sf-kb-answer { padding: clamp(14px, 2.5vw, 24px); }
.sf-kb-answer, .sf-kb-step-copy { color: var(--sf-muted); overflow-wrap: anywhere; }
.sf-kb-answer > :last-child, .sf-kb-step-copy > :last-child { margin-bottom: 0; }
.sf-kb-answer :is(ol, ul), .sf-kb-step-copy :is(ol, ul) { padding-inline: 24px 0; }
.sf-kb-answer li + li, .sf-kb-step-copy li + li { margin-top: 5px; }
.sf-kb-article :is(.tip, .note, .warn) {
    margin: 14px 0 0;
    padding: 12px 14px;
    border-inline-start: 3px solid var(--sf-teal);
    border-radius: 10px;
    background: var(--sf-mint);
    color: var(--sf-ink);
}
.sf-kb-article :is(.tip, .note, .warn) > i:first-child { margin-inline-end: 6px; }
.sf-kb-article .note { border-color: var(--sf-blue); background: var(--sf-sky); }
.sf-kb-article .warn { border-color: var(--sf-amber); background: var(--sf-peach); }
.sf-kb-answer a, .sf-kb-step-copy a { color: var(--sf-purple-hover); text-underline-offset: 3px; }
.sf-kb-article :is(.faq-media, .figure) { display: block; margin: 16px 0; border: 1px solid var(--sf-border); border-radius: 14px; }
.sf-kb-article :is(.faq-media, .figure) img { display: block; max-width: 100%; height: auto; margin-inline: auto; border-radius: 13px 13px 0 0; }
.sf-kb-article :is(.caption, .figcap) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; color: var(--sf-muted); }
.sf-kb-article .caption { justify-content: space-between; }
.sf-kb-article .caption .badge { background: var(--sf-lavender); color: var(--sf-purple-hover); }
.sf-kb-guide .card-h, .sf-kb-video .v-h { margin-bottom: 20px; }
.sf-kb-guide .card-sub, .sf-kb-video .v-sub { margin: 10px 0 0; color: var(--sf-muted); }
.sf-kb-guide .step { padding: clamp(14px, 2.6vw, 24px); }
.sf-kb-guide .step-title { margin: 0 0 8px; color: var(--sf-ink); font-size: 20px; font-weight: 700; }
.sf-kb-player video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; background: var(--sf-plum); }

@media (max-width: 480px) {
    .sf-kb-search { grid-template-columns: auto minmax(0, 1fr); padding: 10px; }
    .sf-kb-search .sf-button { grid-column: 1 / -1; }
}

.sf-testimonials .sf-section-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: end;
    gap: 12px 24px;
}
.sf-testimonial-count {
    color: var(--sf-muted);
    font-size: 14px;
    font-weight: 600;
}
.sf-testimonial-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 clamp(24px, 4vw, 56px);
}
.sf-testimonial { min-width: 0; }
.sf-testimonial:not(.sf-testimonial-featured) { border-bottom: 1px solid var(--sf-border); }
.sf-testimonial-link {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: clamp(12px, 2vw, 22px);
    height: 100%;
    padding-block: clamp(16px, 2.4vw, 28px);
    color: var(--sf-ink);
    text-decoration: none;
}
.sf-testimonial-link:hover { color: inherit; }
.sf-testimonial-thumbnail {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 10px;
    background: var(--sf-plum);
}
.sf-testimonial-thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-testimonial-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.sf-testimonial h3 { margin: 0; font-size: clamp(17px, 1.7vw, 21px); font-weight: 700; line-height: 1.3; text-wrap: pretty; }
.sf-testimonial-play { color: var(--sf-purple-hover); }
.sf-testimonial-play i { border: 1px solid #ceb6e8; }
.sf-testimonial-link:is(:hover, :focus-visible) .sf-testimonial-play { text-decoration: underline; text-underline-offset: 3px; }
.sf-testimonial-featured {
    grid-column: 1 / -1;
    margin-bottom: clamp(6px, 1.5vw, 18px);
    border: 1px solid var(--sf-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 28px rgb(40 21 64 / 8%);
}
.sf-testimonial-featured .sf-testimonial-link {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(16px, 3vw, 40px);
    padding: clamp(14px, 2vw, 26px);
    border-radius: inherit;
}
.sf-testimonial-featured .sf-testimonial-thumbnail { border-radius: 12px; }
.sf-testimonial-featured .sf-testimonial-copy { gap: 16px; padding: clamp(4px, 1.5vw, 18px); }
.sf-testimonial-feature-label {
    padding-inline-start: 10px;
    border-inline-start: 2px solid var(--sf-purple);
    color: var(--sf-purple-hover);
    font-size: 14px;
    font-weight: 700;
}
.sf-testimonial-featured h3 { font-size: clamp(22px, 3.2vw, 42px); text-wrap: balance; }
.sf-testimonial-featured .sf-testimonial-play { background: var(--sf-purple); color: #fff; }
.sf-testimonial-featured .sf-testimonial-play i { border: 0; }
.sf-testimonial-modal .modal-content { overflow: hidden; border: 0; border-radius: 18px; background: #fff; }
.sf-testimonial-modal .modal-header { gap: 12px; }
.sf-testimonial-modal .modal-title { color: var(--sf-ink); font-size: clamp(17px, 2vw, 23px); }
.sf-testimonial-modal .btn-close { margin: 0; flex-shrink: 0; }
.sf-testimonial-player { aspect-ratio: 16 / 9; background: var(--sf-plum); }
.sf-testimonial-player iframe { display: block; width: 100%; height: 100%; border: 0; }

.sf-blog-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(245px, .36fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: start;
}
.sf-blog-article { border-top: 1px solid var(--sf-border); }
.sf-blog-article:last-child { border-bottom: 1px solid var(--sf-border); }
.sf-blog-article-link {
    display: grid;
    grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
    align-items: start;
    gap: clamp(14px, 2.3vw, 28px);
    padding-block: clamp(16px, 2.5vw, 28px);
    color: var(--sf-ink);
    text-decoration: none;
}
.sf-blog-image {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 14px;
    background: var(--sf-lavender);
    color: var(--sf-purple);
    font-size: 30px;
}
.sf-blog-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-blog-meta, .sf-blog-article-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 14px; }
.sf-blog-meta time, .sf-blog-comments { color: var(--sf-muted); font-size: 13px; }
.sf-blog-category {
    padding: 3px 9px;
    border-radius: 5px;
    background: var(--sf-lavender);
    color: var(--sf-purple-hover);
    font-size: 12px;
    font-weight: 700;
}
.sf-blog-copy h3 { margin: 10px 0; color: var(--sf-ink); font-size: clamp(20px, 2.3vw, 30px); line-height: 1.18; text-wrap: pretty; }
.sf-blog-copy p { margin: 0 0 12px; color: var(--sf-muted); }
.sf-blog-read { color: var(--sf-purple-hover); font-size: 14px; font-weight: 700; }
.sf-blog-article-link:hover :is(h3, .sf-blog-read) { color: var(--sf-purple-hover); text-decoration: underline; text-underline-offset: 3px; }
.sf-blog-sidebar { display: grid; gap: 16px; }
.sf-blog-panel {
    padding: clamp(16px, 2vw, 24px);
    border: 1px solid var(--sf-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 7px 20px rgb(40 21 64 / 6%);
}
.sf-blog-layout .sf-blog-panel h2 { margin: 0 0 14px; font-size: 18px; font-weight: 700; letter-spacing: normal; }
.sf-blog-panel :is(ul, p) { margin: 0; padding: 0; }
.sf-blog-panel ul { list-style: none; }
.sf-blog-panel a { color: var(--sf-ink); text-decoration: none; }
.sf-blog-filters a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border-radius: 8px; }
.sf-blog-filters a:is([aria-current="page"], :hover) { background: var(--sf-lavender); color: var(--sf-purple-hover); }
.sf-blog-count { color: var(--sf-purple-hover); font-size: 13px; font-variant-numeric: tabular-nums; }
.sf-blog-recent li + li { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--sf-border); }
.sf-blog-recent a { display: flex; align-items: center; gap: 9px; line-height: 1.3; }
.sf-blog-recent a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.sf-blog-recent img { flex: 0 0 54px; width: 54px; height: 42px; border-radius: 7px; object-fit: cover; }
.sf-blog-recent time { display: block; margin-top: 4px; color: var(--sf-muted); font-size: 12px; }
.sf-blog-topics { display: flex; flex-wrap: wrap; gap: 6px; }
.sf-blog-topics li { padding: 4px 8px; border: 1px solid var(--sf-border); border-radius: 5px; color: var(--sf-muted); font-size: 12px; }
.sf-blog-empty { padding: 22px; border: 1px dashed var(--sf-border); border-radius: 12px; color: var(--sf-muted); }
.sf-blog-pagination { margin-top: 22px; }
.sf-blog-pagination .pagination { flex-wrap: wrap; }
.sf-blog-pagination .page-link { color: var(--sf-purple-hover); }
.sf-blog-pagination .active .page-link { border-color: var(--sf-purple); background: var(--sf-purple); color: #fff; }

.sf-blog-detail-hero h1 { max-width: 24ch; margin-inline: auto; font-size: clamp(30px, 4.6vw, 62px); overflow-wrap: anywhere; }
.sf-blog-detail-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-top: 20px; color: #f2e9ff; font-size: 14px; }
.sf-blog-detail-meta i { margin-inline-end: 3px; }
.sf-blog-detail-meta a { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.sf-blog-detail-main { display: grid; gap: clamp(20px, 3vw, 36px); min-width: 0; }
.sf-blog-detail-article, .sf-blog-discussion { padding: clamp(16px, 3vw, 34px); }
.sf-blog-cover { display: block; width: 100%; height: auto; border-radius: 14px; }
.sf-blog-cover + .sf-blog-prose { margin-top: clamp(20px, 3vw, 34px); }
.sf-blog-prose { color: var(--sf-ink); font-size: clamp(16px, 1.7vw, 18px); line-height: 1.7; overflow-wrap: anywhere; }
.sf-blog-prose :is(h2, h3, h4) { margin: 1.3em 0 .5em; color: var(--sf-purple-hover); font-weight: 700; line-height: 1.25; }
.sf-blog-prose h2 { font-size: clamp(22px, 3vw, 32px); }
.sf-blog-prose h3 { font-size: clamp(19px, 2.6vw, 25px); }
.sf-blog-prose > :first-child { margin-top: 0; }
.sf-blog-prose > :last-child { margin-bottom: 0; }
.sf-blog-prose a, .sf-blog-comment-compose a { color: var(--sf-purple-hover); text-decoration: underline; text-underline-offset: 3px; }
.sf-blog-prose :is(img, video) { max-width: 100%; height: auto; }
.sf-blog-prose iframe { max-width: 100%; }
.sf-blog-prose :is(pre, table) { display: block; max-width: 100%; overflow-x: auto; }
.sf-blog-detail-article .sf-blog-prose p { margin: 0 0 1em; }
.sf-blog-detail-article .sf-blog-prose :is(ul, ol) { padding-inline-start: 1.5em; margin-bottom: 1em; }
.sf-blog-detail-article .sf-blog-prose ul { list-style: disc; }
.sf-blog-detail-article .sf-blog-prose ol { list-style: decimal; }
.sf-blog-related-category { display: block; margin-bottom: 3px; color: var(--sf-purple-hover); }
.sf-blog-comment { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding-block: 14px; border-block-start: 1px solid var(--sf-border); }
.sf-blog-comment img { border-radius: 50%; object-fit: cover; background: var(--sf-lavender); }
.sf-blog-comment time { display: block; color: var(--sf-muted); font-size: 13px; }
.sf-blog-comment p { margin-top: 5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.sf-blog-delete { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #f1dce2; border-radius: 999px; background: #fff5f7; color: var(--sf-coral); }
.sf-blog-delete:hover { background: #fbe3ea; }
.sf-blog-comment-compose { margin-top: 16px; padding-top: 16px; border-block-start: 1px solid var(--sf-border); }
.sf-blog-comment-compose h3 { margin: 0 0 12px; font-size: 18px; font-weight: 700; }
.sf-blog-comment-compose .form-control { margin-bottom: 12px; border-color: var(--sf-border); border-radius: 12px; }
.sf-blog-comment-compose .form-control:focus { border-color: var(--sf-purple); box-shadow: 0 0 0 3px var(--sf-lavender); }
.sf-blog-comment-compose .sf-blog-feedback { margin-top: 12px; }
.sf-blog-discussion { scroll-margin-top: 95px; }

.sf-cgv-layout {
    display: grid;
    grid-template-columns: minmax(230px, .38fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(18px, 3vw, 36px);
}
.sf-cgv-toc, .sf-cgv-document {
    border: 1px solid var(--sf-border);
    border-radius: 18px;
    background: #fff;
}
.sf-cgv-toc {
    position: sticky;
    top: 88px;
    max-height: calc(100dvh - 108px);
    overflow: auto;
    padding: 18px;
    border-top: 4px solid var(--sf-purple);
}
.sf-cgv-layout .sf-cgv-toc h2 { margin-bottom: 12px; font-size: 19px; letter-spacing: normal; }
.sf-cgv-toc ol { margin: 0; padding: 0; list-style: none; }
.sf-cgv-toc a { display: block; padding: 6px 8px; border-radius: 7px; color: var(--sf-ink); font-size: 14px; line-height: 1.4; text-decoration: none; }
.sf-cgv-toc a:is(:hover, :focus-visible) { background: var(--sf-lavender); color: var(--sf-purple-hover); }
.sf-cgv-toc .sf-cgv-toc-notice, .sf-cgv-toc a span { color: var(--sf-purple-hover); font-weight: 700; }
.sf-cgv-document {
    padding: clamp(16px, 4vw, 48px);
    box-shadow: 0 10px 24px rgb(40 21 64 / 7%);
    overflow-wrap: anywhere;
}
:is(.sf-cgv-hero, .sf-cgv-document, .sf-cgv-document .legal-section) { scroll-margin-block-start: 92px; }
.sf-cgv-document .legal-section + .legal-section { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--sf-border); }
.sf-cgv-document :is(#cgv-notice, #terms-preamble, #privacy-intro, .sf-policy-intro) {
    padding: clamp(14px, 2vw, 22px);
    border-inline-start: 4px solid var(--sf-purple);
    border-radius: 12px;
    background: var(--sf-lavender);
}
.sf-cgv-layout .sf-cgv-document h2 {
    margin: 0 0 12px;
    color: var(--sf-purple-hover);
    font-size: clamp(18px, 2vw, 25px);
    line-height: 1.3;
    letter-spacing: normal;
}
.sf-cgv-document :is(.legal-text, .legal-list) { max-width: 76ch; margin-bottom: 12px; color: var(--sf-ink); line-height: 1.75; }
.sf-cgv-document .legal-list { padding-inline-start: 1.35rem; }
.sf-cgv-document .legal-list li + li { margin-top: 6px; }
.sf-cgv-document .legal-section > :last-child { margin-bottom: 0; }
.sf-cgv-document a { color: var(--sf-purple-hover); text-underline-offset: 3px; }
.sf-cgv-end { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 18px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--sf-border); }
.sf-cgv-end p { margin: 0; color: var(--sf-muted); }
.sf-cgv-end a { font-weight: 700; }

.sf-support-page { padding-block: clamp(90px, 8vw, 112px) clamp(24px, 4vw, 52px); }
.sf-support-page > .container { width: 100%; max-width: none; margin-top: 0 !important; padding-inline: 0; }
.sf-support-page :is(.faq-wrap, .guide-wrap) { padding-block: 0; }
.sf-support-page :is(.sf-support-hero, .kb-hero, .faq-hero, .guide-hero, .hero-card) {
    padding: clamp(28px, 5vw, 62px) clamp(16px, 4vw, 48px);
    border-radius: clamp(18px, 3vw, 32px);
    background:
        linear-gradient(120deg, rgb(35 18 63 / 94%), rgb(35 18 63 / 65%)),
        var(--sf-plum) url("../../images/w4j_background.png") center / cover no-repeat;
    color: #fff;
    box-shadow: 0 14px 32px rgb(40 22 65 / 16%);
}
.sf-support-page :is(.sf-support-hero, .kb-hero, .faq-hero, .guide-hero) h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(29px, 4.1vw, 56px);
    line-height: 1.1;
    text-wrap: balance;
}
.sf-support-hero { text-align: center; }
.sf-support-hero > p:last-child { max-width: 62ch; margin: 14px auto 0; color: #f2e9ff; }
.sf-support-breadcrumb { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; color: #e9d9ff; font-size: 14px; }
.sf-support-breadcrumb a { color: inherit; text-underline-offset: 3px; }
.sf-support-page :is(.sf-support-hero, .kb-hero, .faq-hero, .guide-hero, .hero-card) :focus-visible { outline-color: var(--sf-lime); }
.sf-support-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 2vw, 22px);
}
.sf-support-channel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.sf-support-channel-foot { display: grid; width: 100%; gap: 8px; margin-top: auto; padding-block-start: 16px; }
.sf-support-channel-foot a { color: inherit; font-weight: 700; text-underline-offset: 3px; }
.sf-support-channel-foot :focus-visible { outline-color: #fff; }
.sf-support-channel-foot > a { justify-self: start; }
.sf-support-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sf-support-guides { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding-block: 20px; border-block: 1px solid var(--sf-border); }
.sf-support-guides p { margin: 10px 0 0; color: var(--sf-muted); }
.sf-support-modal .modal-content { overflow: hidden; border: 0; border-radius: 22px; background: var(--sf-paper); box-shadow: 0 24px 72px rgb(28 14 46 / 35%); }
.sf-support-modal-header {
    position: relative;
    padding: clamp(20px, 4vw, 34px);
    padding-inline-end: 58px;
    background: radial-gradient(ellipse at top, var(--sf-purple), var(--sf-plum) 90%);
    color: #fff;
}
.sf-support-modal .modal-title { color: #fff; font-size: clamp(20px, 2.8vw, 27px); font-weight: 700; line-height: 1.15; }
.sf-support-modal-header p { max-width: 62ch; margin: 9px 0 0; color: #f0e6ff; }
.sf-support-modal-header .btn-close { position: absolute; inset-block-start: 15px; inset-inline-end: 15px; margin: 0; opacity: 1; }
.sf-support-modal .modal-body { padding: clamp(14px, 3vw, 24px); }
.sf-support-options .sf-support-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    padding: clamp(14px, 2.5vw, 20px);
    text-decoration: none;
}
.sf-support-options .img-cats { margin-bottom: 4px; }
.sf-support-option strong { font-size: 18px; }
.sf-support-option-description { font-size: 14px; }
.sf-support-option-action { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 700; }
.sf-support-option:is(:hover, :focus-visible) .sf-support-option-action { text-decoration: underline; text-underline-offset: 3px; }
.sf-support-modal-note { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 0; color: var(--sf-muted); font-size: 13px; }
.sf-support-modal-note i { color: var(--sf-purple); }
.sf-support-page :is(.kb-card, .faq-card) { border-color: var(--sf-border); box-shadow: 0 8px 24px rgb(40 21 64 / 9%); }
.sf-support-page :is(.kb-search-btn, .kb-btn-primary, .btnx.primary) { background: var(--sf-purple); border-color: var(--sf-purple); color: #fff; }
.sf-support-page :is(.faq-item[open], .kb-results) { border-color: var(--sf-border); }
.sf-ticket-type {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--sf-mint);
    color: var(--sf-teal);
    font-size: 13px;
    font-weight: 700;
}
.sf-ticket-type-technical { background: var(--sf-sky); color: var(--sf-blue); }
.sf-ticket-create {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, .38fr);
    align-items: start;
    gap: clamp(16px, 3vw, 36px);
    margin-block: clamp(24px, 4vw, 48px) 0;
}
.sf-ticket-form-panel, .sf-ticket-tips {
    min-width: 0;
    padding: clamp(16px, 3vw, 36px);
    border: 1px solid var(--sf-border);
    border-top: 4px solid var(--sf-purple);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 24px rgb(40 21 64 / 8%);
}
.sf-ticket-form-panel form { display: grid; gap: 18px; }
.sf-ticket-field { display: grid; min-width: 0; gap: 6px; }
.sf-ticket-field label { font-size: 14px; font-weight: 700; }
.sf-ticket-field label > span, .sf-ticket-error { color: #a82d4f; }
.sf-ticket-error { margin: 0; font-size: 13px; }
.sf-ticket-field .form-control { min-height: 44px; border-color: #d0bfdc; border-radius: 10px; color: var(--sf-ink); }
.sf-ticket-field .form-control:focus { border-color: var(--sf-purple); box-shadow: 0 0 0 3px var(--sf-lavender); }
.sf-ticket-field .form-control.is-invalid { border-color: #a82d4f; }
.sf-ticket-attachments { min-width: 0; margin: 0; padding: 0; }
.sf-ticket-attachments legend { margin: 0 0 10px; font-size: 16px; font-weight: 700; }
.sf-ticket-files { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sf-ticket-file { padding: 12px; border: 1px dashed #c9b5dc; border-radius: 12px; background: #f8f3fd; }
.sf-ticket-file label i { color: var(--sf-purple); }
.sf-ticket-form-actions { display: flex; justify-content: flex-end; padding-top: 14px; border-top: 1px solid var(--sf-border); }
.sf-ticket-tips { border-top-color: var(--sf-teal); }
.sf-ticket-tips > i, .sf-ticket-check {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 12px;
    border-radius: 12px;
    background: var(--sf-mint);
    color: var(--sf-teal);
    font-size: 22px;
}
.sf-ticket-create .sf-ticket-tips h2 { margin: 0 0 10px; font-size: 23px; letter-spacing: normal; }
.sf-ticket-tips p { margin: 0 0 12px; color: var(--sf-muted); }
.sf-ticket-tips-track { padding-top: 14px; border-top: 1px solid var(--sf-border); }
.sf-ticket-tips-track a { color: var(--sf-purple-hover); font-weight: 700; text-underline-offset: 3px; }
.sf-ticket-confirmation .modal-content { overflow: hidden; border: 0; border-radius: 20px; }
.sf-ticket-confirmation-header { position: relative; padding: 22px 24px 18px; border-top: 4px solid var(--sf-teal); background: linear-gradient(135deg, var(--sf-mint), #fff 88%); }
.sf-ticket-confirmation-header .btn-close { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; }
.sf-ticket-confirmation-header p { margin: 0 0 5px; color: var(--sf-teal); font-size: 13px; font-weight: 700; }
.sf-ticket-confirmation-header h2 { margin: 0; color: var(--sf-ink); font-size: clamp(22px, 3vw, 30px); }
.sf-ticket-confirmation .modal-body, .sf-ticket-confirmation .modal-footer { padding: 16px 24px; }
.sf-ticket-confirmation .modal-body > p { margin: 0; color: var(--sf-muted); }
.sf-ticket-reference { display: grid; justify-items: start; gap: 5px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--sf-lavender); color: var(--sf-purple-hover); }
.sf-ticket-reference strong { font-size: 22px; letter-spacing: .04em; overflow-wrap: anywhere; }
.sf-ticket-reference small { color: var(--sf-ink); }
.sf-ticket-dismiss { border-color: var(--sf-border); color: var(--sf-ink); }
.sf-ticket-dismiss:hover { background: var(--sf-lavender); color: var(--sf-ink); }
.sf-track-panel { max-width: 680px; margin-inline: auto; padding: clamp(16px, 3vw, 34px); border: 1px solid var(--sf-border); border-radius: 18px; background: #fff; }
.sf-track-panel form { display: grid; gap: 16px; }
.sf-track-panel form > button { justify-self: start; }
.sf-track-panel .track-label { display: block; margin-bottom: 5px; font-weight: 600; }
.sf-track-panel .track-input { width: 100%; min-height: 44px; padding: 8px 11px; border: 1px solid #d0bfdc; border-radius: 9px; background: #fff; color: var(--sf-ink); }
.sf-track-panel :is(.track-error, .track-required) { color: #a82d4f; }
.sf-track-panel .track-input.is-invalid { border-color: #a82d4f; }
.sf-track-panel .g-recaptcha { max-width: 100%; overflow-x: auto; }
.sf-ticket-links { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.sf-ticket-links a { text-underline-offset: 3px; }
.sf-support-page #track-modal-backdrop {
    position: fixed;
    z-index: 1090;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgb(40 22 65 / 68%);
}
.sf-support-page .newsletter-modal {
    position: relative;
    width: min(100%, 460px);
    max-height: 90dvh;
    overflow: auto;
    padding: 24px;
    border-radius: 18px;
    background: #fff;
    color: var(--sf-ink);
    box-shadow: 0 18px 42px rgb(20 10 36 / 25%);
}
.sf-support-page .newsletter-modal-close { position: absolute; inset-block-start: 8px; inset-inline-end: 10px; border: 0; background: transparent; color: var(--sf-muted); font-size: 24px; }
.sf-support-page .newsletter-modal-icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 10px; border-radius: 12px; background: var(--sf-mint); color: var(--sf-teal); }
.sf-support-page .newsletter-modal-icon--warning { background: var(--sf-peach); color: var(--sf-amber); }
.sf-support-page .newsletter-modal-icon svg { width: 24px; height: 24px; }
.sf-support-page .newsletter-modal-subtitle { color: var(--sf-purple-hover); font-size: 13px; font-weight: 700; }
.sf-support-page .newsletter-modal-title { margin: 6px 0 10px; font-size: 23px; }
.sf-support-page .newsletter-modal-footer { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.sf-support-page .newsletter-modal-footer .btn-primary { border-color: var(--sf-purple); background: var(--sf-purple); }

.sf-footer {
    padding-top: clamp(28px, 4vw, 52px);
    border-top: 1px solid #7951ac;
    background: radial-gradient(ellipse at top, #48266f, transparent 70%), #241636;
    color: #e9def4;
    font-size: 14px;
}
.sf-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .95fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(22px, 3vw, 40px);
    padding-block: clamp(26px, 4vw, 48px);
}
.sf-footer h2 { margin: 0 0 16px; color: #fff; font-size: 18px; font-weight: 700; }
.sf-footer-grid > :is(.sf-footer-contact, nav) {
    padding-inline-start: clamp(16px, 2.5vw, 34px);
    border-inline-start: 1px solid rgb(255 255 255 / 17%);
}
.sf-footer a { color: inherit; text-decoration: none; text-underline-offset: 3px; }
.sf-footer a:hover { color: #fff; text-decoration: underline; }
.sf-footer ul { margin: 0; padding: 0; list-style: none; }
.sf-footer address { margin: 0; }
.sf-footer address p { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; }
.sf-footer address a { overflow-wrap: anywhere; }
.sf-footer address i {
    display: grid;
    flex: 0 0 29px;
    place-items: center;
    height: 29px;
    border-radius: 8px;
    background: rgb(255 255 255 / 10%);
    color: #e0c8ff;
}
.sf-footer .sf-footer-contact-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; color: var(--sf-lime); font-weight: 600; }
.sf-footer nav ul { display: grid; gap: 8px 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-footer-brand > a { display: inline-block; margin-bottom: 12px; }
.sf-footer-brand img { display: block; width: 96px; height: auto; }
.sf-footer-brand p { max-width: 38ch; margin: 0; line-height: 1.65; }
.sf-footer-subscribe {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr);
    align-items: center;
    gap: clamp(16px, 2.5vw, 36px);
    padding: clamp(18px, 2.8vw, 32px);
    border-radius: 24px;
    background: linear-gradient(110deg, var(--sf-lavender), #fff 65%);
    color: var(--sf-ink);
    box-shadow: 0 12px 32px rgb(15 8 27 / 24%);
}
.sf-footer-subscribe-copy { display: flex; align-items: flex-start; gap: 12px; }
.sf-footer-mail-icon {
    display: grid;
    flex: 0 0 42px;
    place-items: center;
    height: 42px;
    border-radius: 13px;
    background: var(--sf-purple);
    color: #fff;
    font-size: 19px;
}
.sf-footer-subscribe h2 { margin: 0 0 4px; color: var(--sf-ink); font-size: clamp(21px, 2.4vw, 28px); }
.sf-footer-subscribe-copy p { max-width: 42ch; margin: 0; color: var(--sf-muted); }
.sf-footer-subscribe form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) auto;
    align-items: end;
    gap: 10px;
}
.sf-footer-field { display: grid; gap: 5px; min-width: 0; }
.sf-footer-subscribe label { color: var(--sf-ink); font-size: 13px; font-weight: 600; }
.sf-footer-subscribe input {
    width: 100%;
    min-height: 46px;
    padding: 7px 10px;
    border: 1px solid #a995bd;
    border-radius: 12px;
    background: #fff;
    color: var(--sf-ink);
    font: inherit;
}
.sf-footer-subscribe :focus-visible { outline-color: var(--sf-purple); }
.sf-footer-subscribe input[aria-invalid="true"] { border-color: var(--sf-coral); }
.sf-footer-feedback { margin: 0; color: var(--sf-coral); font-size: 13px; }
.sf-footer-feedback[role="status"] {
    grid-column: 1 / -1;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--sf-mint);
    color: var(--sf-teal);
}
.sf-footer-base { border-top: 1px solid rgb(255 255 255 / 14%); background: #1b1129; }
.sf-footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 24px;
    padding-block: 20px;
}
.sf-footer-payments, .sf-footer-social { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.sf-footer-social { margin-top: 18px; }
.sf-footer-payments li { display: grid; place-items: center; width: 54px; height: 32px; padding: 5px; border-radius: 7px; background: #fff; }
.sf-footer-payments img { display: block; width: 100%; height: 100%; max-height: 22px; object-fit: contain; }
.sf-footer-social a {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgb(255 255 255 / 23%);
    border-radius: 50%;
    background: rgb(255 255 255 / 8%);
    color: #fff;
}
.sf-footer-social a:hover { background: var(--sf-purple); text-decoration: none; }

@media (max-width: 960px) {
    .sf-offers, .sf-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sf-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sf-about-reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sf-footer-brand { grid-column: 1 / -1; }
    .sf-footer-grid > .sf-footer-contact { padding-inline-start: 0; border-inline-start: 0; }
    .sf-footer-subscribe { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
    .sf-categories .sf-section-head { grid-template-columns: minmax(0, 1fr); }
    .sf-categories .sf-section-head p { padding-inline-start: 0; border-inline-start: 0; }
    .sf-journey .journey-content, .sf-qwasar, .sf-language-grid,
    .sf-newsletter .newsletter-grid, .sf-general-faq-grid,
    .sf-about-mission { grid-template-columns: minmax(0, 1fr); }
    .sf-blog-layout { grid-template-columns: minmax(0, 1fr); }
    .sf-cgv-layout { grid-template-columns: minmax(0, 1fr); }
    .sf-cgv-toc { position: static; max-height: 250px; }
    .sf-support-options { grid-template-columns: minmax(0, 1fr); }
    .sf-ticket-create { grid-template-columns: minmax(0, 1fr); }
    .sf-about-mission-art { order: 1; }
    .sf-about-content :is(.sf-about-why, .sf-about-values) .sf-section-head { grid-template-columns: minmax(0, 1fr); }
    .sf-about-content :is(.sf-about-why, .sf-about-values) .sf-section-head p { padding-inline-start: 0; border-inline-start: 0; }
    .sf-hero { min-height: 0; }
    .sf-hero::after { background: linear-gradient(180deg, rgb(26 16 54 / 92%), rgb(26 16 54 / 52%)); }
    .sf-hero-inner { grid-template-columns: minmax(0, 1fr); }
    .sf-hero-visual {
        width: min(100%, 550px);
        min-block-size: clamp(280px, 70vw, 400px);
        justify-self: center;
    }
}

@media (max-width: 420px) {
    .sf-hero .features-container { grid-template-columns: minmax(0, 1fr); }
    .sf-hero .hero-buttons { width: 100%; }
    .sf-hero .hero-buttons > a { flex: 1 1 auto; }
}

@media (max-width: 650px) {
    .sf-ticket-files { grid-template-columns: minmax(0, 1fr); }
    .sf-offers, .sf-card-grid, .sf-journey .step-card, .sf-courses, .sf-steps, .sf-faq { grid-template-columns: minmax(0, 1fr); }
    .sf-faq .sf-section-head { margin-bottom: 0; }
    .sf-footer-grid { grid-template-columns: minmax(0, 1fr); }
    .sf-about-reasons { grid-template-columns: minmax(0, 1fr); }
    .sf-testimonial-grid, .sf-testimonial-featured .sf-testimonial-link { grid-template-columns: minmax(0, 1fr); }
    .sf-blog-article-link { grid-template-columns: minmax(0, 1fr); }
    .sf-blog-image { aspect-ratio: 16 / 9; }
    .sf-footer-grid > nav { padding: 18px 0 0; border-inline-start: 0; border-top: 1px solid rgb(255 255 255 / 17%); }
    .sf-footer-subscribe form { grid-template-columns: minmax(0, 1fr); }
    .sf-footer-inner { align-items: flex-start; flex-direction: column; }
}

/* Shared styling for storefront actions. Each action sets its own button colors. */
.sf-storefront :is(.sf-button, .sf-button-shape) {
    --sf-action-icon-size: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-block-size: 40px;
    max-inline-size: 100%;
    padding: 3px 14px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
@media (min-width: 992px) {
    .sf-storefront :is(.sf-button, .sf-button-shape) { font-size: 14px; }
}
.sf-storefront :is(.sf-button, .sf-button-shape):where(:has(> :is(i, svg, .sf-button-icon))) {
    padding-inline-end: 5px;
}
.sf-storefront :is(.sf-button, .sf-button-shape) > :is(i, svg, .sf-button-icon) {
    display: grid;
    flex: 0 0 var(--sf-action-icon-size);
    order: 1;
    place-items: center;
    inline-size: var(--sf-action-icon-size);
    block-size: var(--sf-action-icon-size);
    margin: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--sf-action-icon-color, var(--sf-purple));
    font-size: 16px;
}
.sf-storefront :is(.sf-button-lime, .sf-join .w4j-hero-btn) { --sf-action-icon-color: currentColor; }
.sf-storefront :is(.sf-button, .sf-button-shape) > svg { padding: 8px; }
.sf-storefront .sf-login :is(.sf-button, .sf-button-shape) > :is(i, svg, .sf-button-icon) {
    background: transparent;
    color: inherit;
}
.sf-storefront .sf-button-icon-only { min-inline-size: 40px; padding-inline: 3px; }
.sf-storefront :is(.sf-button, .sf-button-shape):disabled { cursor: not-allowed; }
.sf-storefront :is(.sf-button, .sf-button-shape):focus-visible { outline-style: solid; outline-width: 3px; }

.sf-tour { --sf-tour-direction: to right; }
[dir="rtl"] .sf-tour { --sf-tour-direction: to left; }
.sf-tour .modal-dialog { max-width: min(1040px, calc(100% - 24px)); margin-inline: auto; }
.sf-tour .modal-content {
    border: 1px solid rgb(230 218 255 / 36%);
    border-radius: clamp(20px, 3vw, 30px);
    background:
        linear-gradient(var(--sf-tour-direction), rgb(22 12 46 / 96%), rgb(26 14 55 / 82%) 56%, rgb(26 14 54 / 24%)),
        url("../../images/w4j_background.png") center / cover no-repeat;
    background-color: rgb(25 13 48 / 82%);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    color: #fff;
    box-shadow: inset 0 1px rgb(255 255 255 / 18%), 0 30px 88px rgb(19 10 38 / 58%);
}
.sf-tour .modal-body { padding: 0; }
.sf-tour-layout {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: clamp(24px, 4vw, 52px);
    min-block-size: 424px;
    padding: clamp(22px, 4vw, 52px) clamp(24px, 5vw, 68px);
}
.sf-tour-brand {
    display: flex;
    align-items: center;
    gap: clamp(12px, 2vw, 20px);
    padding-inline-end: 44px;
}
.sf-tour-brand img { display: block; width: clamp(72px, 10vw, 104px); height: auto; }
.sf-tour-edition {
    padding-inline-start: clamp(12px, 2vw, 20px);
    border-inline-start: 1px solid rgb(255 255 255 / 32%);
    color: #ebe1fa;
    font-size: 13px;
    font-weight: 500;
}
.sf-tour-copy {
    max-inline-size: min(620px, 75%);
    align-self: center;
}
.sf-tour-slide .sf-tour-slide-label {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--sf-lime);
    font-size: 13px;
    font-weight: 600;
}
.sf-tour-slide-label > i { font-size: 17px; }
.sf-tour-slide h3 {
    margin: 17px 0 12px;
    color: #fff;
    font-size: clamp(28px, 4.5vw, 58px);
    font-weight: 600;
    line-height: 1.12;
    text-wrap: balance;
}
.sf-tour-slide p { max-inline-size: 52ch; margin: 0; color: #f0e7fa; font-size: 16px; line-height: 1.65; }
.sf-tour-close {
    position: absolute;
    z-index: 2;
    inset-block-start: 26px;
    inset-inline-end: 26px;
    display: grid;
    inline-size: 36px;
    block-size: 36px;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 28%);
    border-radius: 50%;
    background: rgb(255 255 255 / 14%);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}
.sf-tour-close:hover, .sf-tour-back:not(:disabled):hover { background: rgb(255 255 255 / 24%); }
.sf-tour :focus-visible { outline-color: var(--sf-lime); }
.sf-tour-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px 16px;
    padding: 14px clamp(24px, 5vw, 68px);
    border-top: 1px solid rgb(255 255 255 / 18%);
    background: rgb(22 12 46 / 65%);
}
.sf-tour-steps, .sf-tour-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.sf-tour-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-inline-size: 38px;
    min-block-size: 38px;
    padding: 6px 8px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #f4eaff;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}
.sf-tour-step:hover { border-bottom-color: rgb(255 255 255 / 45%); }
.sf-tour-step-number { color: #e1d1fd; }
.sf-tour-step[aria-current="step"] { border-bottom-color: var(--sf-lime); color: #fff; }
.sf-tour-step[aria-current="step"] .sf-tour-step-number { color: var(--sf-lime); }
.sf-tour-back { border-color: rgb(255 255 255 / 28%); background: rgb(255 255 255 / 10%); color: #fff; }
.sf-tour-back-label { display: inline-flex; align-items: center; gap: 7px; }
.sf-tour-back:disabled { opacity: .55; }
[dir="rtl"] .sf-tour-actions :is(.fe-arrow-left, .fe-arrow-right) { transform: scaleX(-1); }

@media (max-width: 880px) {
    .sf-tour-step-name { display: none; }
}
@media (max-width: 650px) {
    .sf-tour .modal-content {
        background-image: linear-gradient(180deg, rgb(23 12 48 / 68%), rgb(23 12 48 / 94%) 70%), url("../../images/w4j_background.png");
    }
    .sf-tour-layout { gap: 20px; min-block-size: 0; padding: 18px 18px 24px; }
    .sf-tour-copy { max-inline-size: none; }
    .sf-tour-close { inset-block-start: 12px; inset-inline-end: 12px; }
    .sf-tour-slide h3 { margin-top: 12px; }
    .sf-tour-slide p { font-size: 15px; }
    .sf-tour-footer { justify-content: center; gap: 9px 14px; padding: 10px 14px; }
}

@media (prefers-reduced-motion: no-preference) {
    .sf-tour.fade .modal-dialog {
        transform: translateY(12px) scale(.99);
        transition: transform 480ms cubic-bezier(.22, .7, .3, 1);
    }
    .sf-tour.show .modal-dialog { transform: none; }
    .sf-tour-step { transition: border-color 240ms ease, color 240ms ease; }

    .sf-tour[data-sf-tour-direction="forward"] .sf-tour-slide { --sf-tour-enter-x: 12px; }
    .sf-tour[data-sf-tour-direction="backward"] .sf-tour-slide { --sf-tour-enter-x: -12px; }
    [dir="rtl"] .sf-tour[data-sf-tour-direction="forward"] .sf-tour-slide { --sf-tour-enter-x: -12px; }
    [dir="rtl"] .sf-tour[data-sf-tour-direction="backward"] .sf-tour-slide { --sf-tour-enter-x: 12px; }
    .sf-tour[data-sf-tour-direction] .sf-tour-slide { --sf-tour-enter-y: 0px; }

    .sf-tour.show :is(.sf-tour-brand, .sf-tour-footer),
    .sf-tour.show .sf-tour-slide:not([hidden]) > * {
        animation: sf-tour-slide-in 520ms cubic-bezier(.22, .7, .3, 1) var(--sf-tour-delay, 0ms) backwards;
    }
    .sf-tour-slide h3 { --sf-tour-delay: 70ms; }
    .sf-tour-slide h3 + p, .sf-tour-footer { --sf-tour-delay: 140ms; }
}
@keyframes sf-tour-slide-in {
    from { opacity: .35; transform: translate(var(--sf-tour-enter-x, 0px), var(--sf-tour-enter-y, 7px)); }
    to { opacity: 1; transform: none; }
}