.jc-about {
    --ja-red: var(--red-500, #ED3500);
    --ja-red-dark: var(--red-600, #BE2A00);
    --ja-red-rule: #D31A1A;
    --ja-red-50: #FFF0EB;
    --ja-surface: #F5F4F8;
    --ja-border: #BDB9CF;
    --ja-border-subtle: #E5E5E5;
    --ja-text: #15101F;
    --ja-muted: #342E47;
    --ja-dark-1: var(--purple-600, #584877);
    --ja-dark-2: var(--neutral-800, #342E47);
    --ja-shadow: 0 2px 10px rgba(97, 91, 130, .16);
    --ja-radius-card: 12px;
    --ja-radius: var(--border-radius-xl, 16px);
    --ja-gap: 20px;
    --ja-font-display: 'Manrope', 'Manrope Fallback', Arial, sans-serif;

    margin: 16px 0 var(--spacing-20, 20px);
    color: var(--ja-text);
}

.jc-about *,
.jc-about *::before,
.jc-about *::after {
    box-sizing: border-box;
}

.jc-about article > div {
    margin: 0;
}

.jc-about__title, .jc-about__title h2 {
    margin: 0 !important;
    font-family: var(--ja-font-display);
    font-size: 28px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: var(--ja-text) !important;
}

.jc-about__intro {
    margin: 0 0 var(--ja-gap);
}

.jc-about .jc-about__intro p:last-child {
    margin-bottom: 0 !important;
}

.jc-about__grid {
    display: grid;
    gap: var(--ja-gap);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.jc-about__grid--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.jc-about__grid--cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.jc-about__card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--ja-border);
    border-radius: var(--ja-radius-card);
    box-shadow: var(--ja-shadow);
}

.jc-card-default{
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.jc-about__card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.jc-about .jc-about__card-title {
    margin: 0 !important;
    font-size: 22px !important;
    line-height: 33px !important;
    font-weight: 700 !important;
    color: var(--ja-text) !important;
}

.jc-about__card-title a {
    color: inherit;
    text-decoration: none;
}

.jc-about__card-title a:hover {
    text-decoration: underline;
}

.jc-about__card-text {
    font-size: 14px;
    line-height: 21px;
    color: var(--ja-muted);
}

.jc-about .jc-about__card-text p {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 21px !important;
    color: var(--ja-muted) !important;
}

.jc-about .jc-about__card-text p:last-child,
.jc-about .jc-about__card-text ul:last-child {
    margin-bottom: 0 !important;
}

.jc-about .jc-about__card-text ul {
    margin: 0 0 6px;
    padding: 0 0 0 18px;
}

.jc-about .jc-about__card-text li {
    margin-bottom: 4px;
    font-size: 14px;
    line-height: 21px;
}

.jc-about__card--tile {
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.jc-about__card--tile .jc-about__card-body {
    padding: 24px;
    justify-content: flex-start;
    border: 1px solid var(--ja-border);
    border-radius: var(--ja-radius-card);
}

.jc-about__tile {
    display: flex;
    flex: 0 0 180px;
    align-items: center;
    justify-content: center;
    align-self: center;
    min-height: 128px;
    color: #fff;
    border-radius: var(--border-radius-xl) 0 0 var(--border-radius-xl);
    --ja-tile-gradient: radial-gradient(var(--ja-red), var(--ja-red-dark));
    background: var(--ja-tile-gradient);
}

.jc-about__card--dark .jc-about__tile {
    --ja-tile-gradient: radial-gradient(var(--ja-dark-1), var(--ja-dark-2));
}

.jc-about__tile--controller {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-10 -10 103 78%22 fill=%22none%22%3E%3Cg fill=%22%23fff%22 filter=%22url(%23g)%22%3E%3Cmask id=%22m%22%3E%3Cpath d=%22M19.422 0h44.156a16.62 16.62 0 0 1 11.119 4.27 16.56 16.56 0 0 1 5.39 10.607c.025.211.041.418.07.626C80.493 18.295 83 39.17 83 45.57c0 3.297-1.312 6.458-3.647 8.789A12.46 12.46 0 0 1 70.55 58c-4.15 0-6.225-2.071-8.3-4.143L56.382 48a8.3 8.3 0 0 0-5.868-2.428H32.486A8.3 8.3 0 0 0 26.618 48l-5.868 5.858C18.675 55.93 16.6 58 12.45 58a12.46 12.46 0 0 1-8.803-3.64A12.42 12.42 0 0 1 0 45.57c0-6.396 2.507-27.276 2.843-30.068.029-.212.045-.415.07-.63A16.56 16.56 0 0 1 8.304 4.269 16.62 16.62 0 0 1 19.422 0%22/%3E%3C/mask%3E%3Cpath d=%22M16.6 22.357a2.5 2.5 0 0 0 0 5zm16.6 5a2.5 2.5 0 1 0 0-5zm-5.8-10.786a2.5 2.5 0 0 0-5 0zm-5 16.572a2.5 2.5 0 0 0 5 0zM53.95 26.5a2.5 2.5 0 0 0 0 5zm.041 5a2.5 2.5 0 0 0 0-5zM66.4 18.214a2.5 2.5 0 0 0 0 5zm.041 5a2.5 2.5 0 0 0 0-5zM16.6 24.857v2.5h8.3v-5h-8.3zm8.3 0v2.5h8.3v-5h-8.3zm0-8.286h-2.5v8.286h5v-8.286zm0 8.286h-2.5v8.286h5v-8.286zM53.95 29v2.5h.041v-5h-.041zm12.45-8.286v2.5h.041v-5H66.4zM63.578 0l.001-5h-.001zM19.422 0v-5h-.001zM8.304 4.27 4.958.553zm-5.39 10.603 4.966.574.004-.03.003-.03zm-.071.63-4.954-.681-.005.041-.005.042zM20.75 53.857l3.532 3.539zM26.618 48l3.533 3.539zm5.868-2.428v-5zm18.028 0v-5zM56.382 48l-3.533 3.538zm5.868 5.858 3.532-3.538zm17.103.503-3.532-3.539zm.804-38.857 4.964-.598-.005-.048-.007-.049zm-.07-.626-4.974.512.004.037.004.036zM63.578 0v-5H19.422V5h44.156zM19.422 0l-.001-5A21.62 21.62 0 0 0 4.958.554L8.304 4.27l3.347 3.715A11.6 11.6 0 0 1 19.423 5zM8.304 4.27 4.958.553A21.56 21.56 0 0 0-2.06 14.36l4.973.513 4.974.513a11.56 11.56 0 0 1 3.764-7.402zm-5.39 10.603-4.968-.574c-.053.465-.032.347-.057.523l4.954.68 4.953.682c.026-.189.044-.357.056-.474l.028-.263zm-.071.63-4.964-.598C-2.432 17.489-5 38.788-5 45.571H5c0-6.01 2.446-26.47 2.807-29.47zM0 45.57h-5c0 4.626 1.84 9.06 5.114 12.327l3.533-3.538 3.532-3.539A7.42 7.42 0 0 1 5 45.571zm3.647 8.789L.114 57.898A17.46 17.46 0 0 0 12.45 63V53a7.46 7.46 0 0 1-5.271-2.179zM12.45 58v5c6.345 0 9.704-3.48 11.833-5.604l-3.533-3.539-3.532-3.538c-1.104 1.1-1.724 1.687-2.41 2.097-.536.322-1.207.584-2.358.584zm8.3-4.143 3.532 3.539 5.869-5.858-3.533-3.539-3.532-3.538-5.868 5.858zM26.618 48l3.533 3.538a3.3 3.3 0 0 1 2.336-.966v-5l-.002-5a13.3 13.3 0 0 0-9.4 3.89zm5.868-2.428v5h18.028v-10H32.486zm18.028 0-.001 5c.878 0 1.718.349 2.336.966L56.382 48l3.533-3.538a13.3 13.3 0 0 0-9.4-3.89zM56.382 48l-3.533 3.539 5.869 5.858 3.532-3.539 3.532-3.538-5.868-5.858zm5.868 5.858-3.532 3.539C60.846 59.52 64.204 63 70.55 63V53c-1.151 0-1.822-.263-2.359-.584-.685-.41-1.305-.996-2.409-2.097zM70.55 58v5a17.46 17.46 0 0 0 12.336-5.102l-3.532-3.538-3.533-3.539A7.46 7.46 0 0 1 70.55 53zm8.804-3.64 3.532 3.538A17.42 17.42 0 0 0 88 45.571H78a7.42 7.42 0 0 1-2.179 5.25zM83 45.57h5c0-6.787-2.568-28.082-2.879-30.666l-4.964.598-4.964.597C75.554 19.101 78 39.558 78 45.571zm-2.843-30.068 4.952-.695c-.026-.185.003-.008-.057-.516l-4.965.585-4.966.585.027.25c.012.115.03.29.058.485zm-.07-.626 4.973-.512A21.56 21.56 0 0 0 78.044.556l-3.347 3.715-3.347 3.714a11.56 11.56 0 0 1 3.763 7.404zM74.697 4.27 78.044.556A21.62 21.62 0 0 0 63.58-5l-.001 5-.001 5c2.873 0 5.642 1.065 7.773 2.985z%22 mask=%22url(%23m)%22/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id=%22g%22 x=%22-25%25%22 y=%22-35%25%22 width=%22150%25%22 height=%22170%25%22 color-interpolation-filters=%22sRGB%22%3E%3CfeGaussianBlur in=%22SourceAlpha%22 stdDeviation=%225%22 result=%22b%22/%3E%3CfeFlood flood-color=%22%2306B6D4%22 result=%22c%22/%3E%3CfeComposite in=%22c%22 in2=%22b%22 operator=%22in%22 result=%22glow%22/%3E%3CfeMerge%3E%3CfeMergeNode in=%22glow%22/%3E%3CfeMergeNode in=%22SourceGraphic%22/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E"), var(--ja-tile-gradient);
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: 103px 78px, cover;
}

.jc-about__tile--chat,
.jc-about__tile--review {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 103 100%22%3E%3Cg filter=%22url(%23a)%22%3E%3Cmask id=%22b%22 fill=%22%23fff%22%3E%3Cpath d=%22M78 22c8.284 0 15 6.716 15 15v23.883c0 8.284-6.716 15-15 15H66.83L51.491 88.969 36.155 75.883H25c-8.284 0-15-6.716-15-15V37c0-8.284 6.716-15 15-15z%22/%3E%3C/mask%3E%3Cpath fill=%22%23fff%22 d=%22M66.83 75.883v-5h-1.844l-1.402 1.196zM51.491 88.969l-3.245 3.803 3.245 2.77 3.246-2.77zM36.155 75.883l3.246-3.804-1.403-1.196h-1.843zm-11.155 0v5zM25 22v-5zm53 0v5c5.523 0 10 4.477 10 10h10c0-11.046-8.954-20-20-20zm15 15h-5v23.883h10V37zm0 23.883h-5c0 5.523-4.477 10-10 10v10c11.046 0 20-8.954 20-20zm-15 15v-5H66.83v10H78zm-11.17 0-3.246-3.804-15.337 13.086 3.245 3.804 3.246 3.803 15.337-13.086zM51.491 88.969l3.246-3.804L39.4 72.08l-3.246 3.804-3.245 3.803 15.337 13.086zM36.155 75.883v-5H25v10h11.155zm-11.155 0v-5c-5.523 0-10-4.477-10-10H5c0 11.045 8.954 20 20 20zm-15-15h5V37H5v23.883zM10 37h5c0-5.523 4.477-10 10-10V17C13.954 17 5 25.954 5 37zm15-15v5h53V17H25z%22 mask=%22url(%23b)%22/%3E%3Cpath fill=%22%23fff9f9%22 d=%22M37.448 36.602a1.22 1.22 0 0 1 2.104 0l2.615 4.469c.172.294.46.503.795.575l5.077 1.094a1.21 1.21 0 0 1 .65 1.993l-3.461 3.856a1.2 1.2 0 0 0-.304.93l.524 5.145c.094.924-.849 1.606-1.703 1.231l-4.754-2.085a1.22 1.22 0 0 0-.982 0l-4.754 2.085c-.854.375-1.797-.307-1.703-1.231l.524-5.145a1.2 1.2 0 0 0-.304-.93l-3.461-3.856a1.21 1.21 0 0 1 .65-1.993l5.077-1.095c.335-.072.623-.28.795-.574zm26 0a1.22 1.22 0 0 1 2.104 0l2.615 4.469c.172.294.46.503.795.575l5.077 1.094a1.21 1.21 0 0 1 .65 1.993l-3.461 3.856a1.2 1.2 0 0 0-.304.93l.524 5.145c.094.924-.849 1.606-1.703 1.231l-4.754-2.085a1.22 1.22 0 0 0-.982 0l-4.754 2.085c-.854.375-1.797-.307-1.703-1.231l.524-5.145a1.2 1.2 0 0 0-.304-.93l-3.461-3.856a1.21 1.21 0 0 1 .65-1.993l5.077-1.095c.335-.072.623-.28.795-.574z%22/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id=%22a%22 width=%22120%22 height=%22120%22 x=%22-9%22 y=%22-10%22 color-interpolation-filters=%22sRGB%22 filterUnits=%22userSpaceOnUse%22%3E%3CfeFlood flood-opacity=%220%22 result=%22BackgroundImageFix%22/%3E%3CfeColorMatrix in=%22SourceAlpha%22 result=%22hardAlpha%22 values=%220 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0%22/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation=%225%22/%3E%3CfeComposite in2=%22hardAlpha%22 operator=%22out%22/%3E%3CfeColorMatrix values=%220 0 0 0 0.0235294 0 0 0 0 0.713726 0 0 0 0 0.831373 0 0 0 1 0%22/%3E%3CfeBlend in2=%22BackgroundImageFix%22 result=%22glow%22/%3E%3CfeBlend in=%22SourceGraphic%22 in2=%22glow%22 result=%22shape%22/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E"), var(--ja-tile-gradient);
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: 103px 100px, cover;
}

.jc-about__tile--news {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 100%22%3E%3Cg fill=%22%23fff%22 filter=%22url(%23a)%22%3E%3Cpath d=%22M16.2 53.641c0 1.47 1.219 2.642 2.686 2.714 2.22.109 4.53.427 6.871.904 10.174 2.075 20.977 7.157 27.978 11.111 1.788 1.009 4.065-.263 4.065-2.315V33.68c0-1.996-2.163-3.251-3.925-2.313-11.34 6.039-21.11 9.311-28.118 10.931-2.78.643-5.127 1.025-6.965 1.216-1.428.15-2.592 1.32-2.592 2.755zM63 66.055c0 6.228-6.74 9.714-11.824 6.842-6.787-3.833-17.045-8.622-26.457-10.542-2.136-.435-4.178-.714-6.087-.807C14.66 61.353 11 58.14 11 53.64v-7.37c0-4.374 3.457-7.532 7.252-7.928l1.297-.16c1.395-.195 3.084-.5 5.038-.952 6.561-1.516 15.902-4.627 26.842-10.453l.483-.236c5.019-2.257 11.087 1.27 11.088 7.14z%22/%3E%3Cpath d=%22M22.083 57.874a2.6 2.6 0 0 1 3.143 1.909l2.392 9.8c.146.597.186 1.215.117 1.824l-.82 7.193h7.066l-1.508-6.604a5.2 5.2 0 0 1 .208-2.999l2.128-5.619a2.601 2.601 0 1 1 4.862 1.843l-2.128 5.617 1.506 6.604c.743 3.255-1.73 6.358-5.068 6.358h-7.066a5.2 5.2 0 0 1-5.167-5.79l.82-7.192-2.395-9.801a2.6 2.6 0 0 1 1.91-3.143M86.4 46.336a2.6 2.6 0 0 1 0 5.2H73.352a2.6 2.6 0 0 1 0-5.2zM78.105 24.79a2.6 2.6 0 0 1 3.732 3.62L71.005 39.58a2.6 2.6 0 0 1-3.733-3.62zm-9.143 36.372a2.6 2.6 0 0 1 3.676 0l10.4 10.4a2.6 2.6 0 1 1-3.676 3.676l-10.4-10.4a2.6 2.6 0 0 1 0-3.676%22/%3E%3Cpath d=%22M31.8 39.6v20.8h-5.2V39.6z%22/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id=%22a%22 width=%22120%22 height=%22120%22 x=%22-10%22 y=%22-10%22 color-interpolation-filters=%22sRGB%22 filterUnits=%22userSpaceOnUse%22%3E%3CfeFlood flood-opacity=%220%22 result=%22BackgroundImageFix%22/%3E%3CfeColorMatrix in=%22SourceAlpha%22 result=%22hardAlpha%22 values=%220 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0%22/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation=%225%22/%3E%3CfeComposite in2=%22hardAlpha%22 operator=%22out%22/%3E%3CfeColorMatrix values=%220 0 0 0 0.0235294 0 0 0 0 0.713726 0 0 0 0 0.831373 0 0 0 1 0%22/%3E%3CfeBlend in2=%22BackgroundImageFix%22 result=%22glow%22/%3E%3CfeBlend in=%22SourceGraphic%22 in2=%22glow%22 result=%22shape%22/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E"), var(--ja-tile-gradient);
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: 100px 100px, cover;
}

.jc-about__tile--guides {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 100%22%3E%3Cg filter=%22url(%23a)%22%3E%3Ccircle cx=%2250%22 cy=%2250%22 r=%2235.5%22 stroke=%22%23fff%22 stroke-width=%225%22/%3E%3Ccircle cx=%2249.5%22 cy=%2233.5%22 r=%225.5%22 fill=%22%23fff%22/%3E%3Crect width=%227%22 height=%2227%22 x=%2246%22 y=%2245%22 fill=%22%23fff%22 rx=%223.5%22/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id=%22a%22 width=%22120%22 height=%22120%22 x=%22-10%22 y=%22-10%22 color-interpolation-filters=%22sRGB%22 filterUnits=%22userSpaceOnUse%22%3E%3CfeFlood flood-opacity=%220%22 result=%22BackgroundImageFix%22/%3E%3CfeColorMatrix in=%22SourceAlpha%22 result=%22hardAlpha%22 values=%220 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0%22/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation=%225%22/%3E%3CfeComposite in2=%22hardAlpha%22 operator=%22out%22/%3E%3CfeColorMatrix values=%220 0 0 0 0.0235294 0 0 0 0 0.713726 0 0 0 0 0.831373 0 0 0 1 0%22/%3E%3CfeBlend in2=%22BackgroundImageFix%22 result=%22glow%22/%3E%3CfeBlend in=%22SourceGraphic%22 in2=%22glow%22 result=%22shape%22/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E"), var(--ja-tile-gradient);
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: 100px 100px, cover;
}

.jc-about__tile .jc-about__icon--line {
    width: 64px;
    height: 64px;
    stroke-width: 1.6;
}

.jc-about .jc-about__card--plain .jc-about__card-title {
    color: var(--ja-red) !important;
}

.jc-about__card--chip {
    gap: 20px;
    padding: 30px;
    box-shadow: none;
}

.jc-about__card--chip .jc-about__card-body {
    gap: 12px;
}

.jc-about__chip {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    color: var(--ja-red);
    background: var(--ja-red-50);
    border-radius: var(--ja-radius-card);
}

.jc-about__chip svg {
    width: 30px;
    height: 30px;
}

.jc-about__icon--fill {
    fill: currentColor;
    stroke: none;
}

.jc-about .jc-about__card--chip .jc-about__card-title {
    font-size: 20px !important;
    line-height: 30px !important;
    color: var(--ja-red) !important;
}

.jc-about .jc-about__card--chip .jc-about__card-text,
.jc-about .jc-about__card--chip .jc-about__card-text p,
.jc-about .jc-about__card--chip .jc-about__card-text li {
    font-size: 16px !important;
    line-height: 24px !important;
    color: var(--ja-text) !important;
}

.jc-about__card--chip::after {
    content: "";
    display: block;
    width: 24px;
    height: 2px;
    margin-top: auto;
    background: var(--ja-red-rule);
    border-radius: 2px;
}

.jc-about .jc-about__team {
    display: flex;
    gap: 17px;
    justify-content: space-evenly;
    margin: 0;
    padding: 0;
    list-style: none;
}

.jc-about__member {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.jc-about__avatar {
    width: 175px;
    height: 175px;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid var(--ja-border-subtle);
    border-radius: 50%;
    background: #fff;
}

.jc-about__avatar img,
.jc-about__avatar-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jc-about .jc-about__member-name {
    margin: 0 !important;
    font-family: var(--ja-font-display);
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 600;
    color: var(--ja-text) !important;
}

.jc-about__member-name a {
    color: inherit;
    text-decoration: none;
}

.jc-about__member-name a:hover {
    text-decoration: underline;
}

.jc-about .jc-about__member-role {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 21px !important;
    font-weight: 600;
    color: var(--ja-text) !important;
}

.jc-about__methods {
    display: flex;
    flex-direction: column;
    gap: var(--ja-gap);
}

.jc-about__method {
    display: flex;
    gap: 24px;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--ja-border);
    border-radius: var(--ja-radius-card);
}

.jc-about__method-media {
    flex: 0 0 190px;
}

.jc-about .jc-about__method-media .imgintxt {
    float: none !important;
    width: 228px !important;
    height: 228px;
    max-width: 100%;
    margin: 0 !important;
}

.jc-about__method-media img,
.jc-about__method-media picture {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--ja-radius-card);
}

.jc-about__method-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.jc-about .jc-about__method .jc-about__card-title {
    font-size: 20px !important;
    line-height: 30px !important;
    color: var(--ja-red) !important;
}

.jc-about .jc-about__method .jc-about__card-text p,
.jc-about .jc-about__method .jc-about__card-text li {
    font-size: 16px !important;
    line-height: 24px !important;
    color: var(--ja-text) !important;
}

.jc-about__panel {
    padding: 24px;
    background: var(--ja-surface);
    border-radius: var(--ja-radius);
}

.jc-about .jc-about__panel-title {
    margin: 0 0 16px !important;
    font-family: var(--ja-font-display);
    font-size: 20px !important;
    line-height: 30px !important;
    font-weight: 700 !important;
    color: var(--ja-text) !important;
}

.jc-about .jc-about__checklist ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.jc-about__checklist li {
    position: relative;
    margin: 0 0 12px;
    padding-left: 36px;
    font-size: 16px;
    line-height: 24px;
}

.jc-about__checklist li:last-child {
    margin-bottom: 0;
}

.jc-about__checklist li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23ED3500'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.jc-about .jc-about__checklist p:last-child {
    margin-bottom: 0 !important;
}

.jc-about__contact {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px 20px;
    background: #fff;
    border: 1px solid var(--ja-border);
    border-radius: var(--ja-radius);
}

.jc-about__contact-head {
    display: flex;
    align-items: center;
    gap: 16px;
}

.jc-about__contact-head .jc-about__chip {
    width: 48px;
    height: 48px;
    color: var(--red-400, #F55733);
}

.jc-about__contact-head .jc-about__chip svg {
    width: 24px;
    height: 24px;
}

.jc-about__contact-body {
    font-size: 16px;
    line-height: 24px;
}

.jc-about .jc-about__contact-body p {
    margin-bottom: 12px;
}

.jc-about .jc-about__contact-body p:nth-last-of-type(2) {
    margin-bottom: 0 !important;
}

.jc-about .jc-about__socials {
    display: flex;
    gap: 20px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.jc-about__socials a {
    display: inline-flex;
    color: var(--ja-text);
}

.jc-about__socials svg {
    width: 22px;
    height: 22px;
}

.jc-about__socials svg path,
.jc-about__socials svg rect {
    fill: currentColor;
}

.jc-about--contact{
    margin-top: 48px;
}

#content .expert-box-container {
    display: grid;
}

#content .expert-box-container .expert-photo {
    grid-area: photo;
}

#content .expert-box-container {
    grid-template-areas: "photo wrap icon" "quote quote quote";
    gap: 20px;
}

#content .expert-box-container .expert-profile {
    display: contents;
}

@media (max-width: 1023px) {
    .jc-about__grid--cols-3,
    .jc-about__grid--cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .jc-about__avatar {
        width: 140px;
        height: 140px;
    }

    .jc-about__card--tile {
        flex-direction: column;
    }

    .jc-about__tile{
        width: 100%;
        max-width: 220px;
        max-height: 128px;
        border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0;
    }

    .jc-about__card-body{
        height: 100%;
    }
}

@media (max-width: 768px) {
    .jc-about {
        margin-bottom: 32px;
    }

    .jc-about .jc-about__team {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .jc-about__card--chip {
        padding: 24px;
    }

    .jc-about__contact .jc-about__title, .jc-about__contact .jc-about__title h2{
        font-size: 20px !important;
        line-height: 30px !important;
    }

    .jc-about__method-media img,
    .jc-about__method-media picture {
        max-width: 194px !important;
    }

    .jc-about__method {
        gap: 32px;
    }

    .jc-about .jc-about__method-media .imgintxt {
        float: none !important;
        width: auto !important;
        max-width: 194px !important;
        max-height: 194px;
    }

    .jc-about--contact {
        margin-top: 28px;
    }
}

@media( max-width: 670px){
    .jc-about__grid {
        grid-template-columns : repeat(1, minmax(0, 1fr));
    }

    .jc-about__card--tile {
        flex-direction: row;
    }

    .jc-about__tile {
        max-width: 150px;
        max-height: 150px;
        height: 100%;
        border-radius: var(--border-radius-xl) 0 0 var(--border-radius-xl);
    }

    .jc-about__card--tile .jc-about__card-body{
        min-height: 160px;
    }

    .jc-about .jc-about__card-title {
        font-size: 18px !important;
        line-height: 27px !important;
    }

    .jc-about__method {
        flex-direction: column;
        gap: 16px;
    }

    .jc-about__method-media {
        flex-basis: auto;
        max-width: 194px;
    }
}

@media (max-width: 479px) {

    .jc-about__tile {
        flex-basis: auto;
        width: 100%;
        min-height: 96px;
    }

    .jc-about__avatar {
        width: 120px;
        height: 120px;
    }
}

@media (max-width: 430px) {
    .jc-about .jc-about__team {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .jc-about__avatar {
        width: 175px;
        height: 175px;
    }

    .jc-about__member{
        max-width: 300px;
        margin-inline: auto;
    }

    .jc-about .jc-about__team{
        gap: 20px;
    }
}

@media (max-width: 420px) {
    .jc-about__card--tile {
        flex-direction: column;
    }

    .jc-about__tile {
        flex-basis: auto;
        width: 100%;
        min-height: 96px;
        height: auto;
        border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0;
    }
}

/* ---- *index* table of contents, About page only ----------------------
   Same markup and jQuery toggle as everywhere else; getIndexHtml() adds
   class="jc-about-toc" and style="--jc-toc-rows:N" (N = ceil(items/3)) on
   #articleindex-ocrb when the page carries *about-... shortcodes.
   Values from the Figma "Table of Content" instance: header 65px, padding
   16/20, neutral-100 #ECEAF1; list padding 12/20, gaps 12; item padding 10,
   gap 10, 33px badge, Heading 6 18/28.
   Layout is a column-major grid with a fixed row count, so item positions do
   not depend on the container height: the jQuery slide animates the height
   without reflowing the columns (CSS multi-column would re-balance mid-slide).
   The toggle checks :visible, so "open by default" via CSS closes on the first
   click and reopens on the next. --------------------------------------- */

#articleindex-ocrb.jc-about-toc {
    margin: 16px 0 var(--space-section, 48px);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(97, 91, 130, .16);
    overflow: hidden;
}

/* header row */
#articleindex-ocrb.jc-about-toc > #articleindextitle {
    height: 65px;
    padding: 16px 20px;
    background: #ECEAF1;
    border-radius: 16px 16px 0 0;
    color: #15101F;
    font-family: 'Manrope', 'Manrope Fallback', Arial, sans-serif;
    font-size: 22px;
    line-height: 33px;
    font-weight: 700;
}

/* no radius change on .closed: the class is set when the slide STARTS, so the
   header corners would round off while the list is still collapsing. The
   wrapper's overflow:hidden + radius 16 rounds the card once the list is gone. */

#articleindex-ocrb.jc-about-toc > #articleindextitle .title {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}

/* the white "resumen" icon is invisible on the light header: swap it for a dark list glyph */
#articleindex-ocrb.jc-about-toc > #articleindextitle .tops_icon {
    display: none;
}

/* Figma icon_ToC: two rounded bars, 33×33 */
#articleindex-ocrb.jc-about-toc > #articleindextitle .title::before {
    content: "";
    flex: 0 0 auto;
    width: 33px;
    height: 33px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 33 33' fill='none'%3E%3Crect width='25' height='3' x='4' y='7.5' fill='%2315101f' rx='1.5'/%3E%3Crect width='25' height='3' x='4' y='22.5' fill='%2315101f' rx='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

#articleindex-ocrb.jc-about-toc > #articleindextitle .toplist_header {
    float: none;
    margin: 0;
    line-height: 33px;
    color: #15101F;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* chevron: up while open (default and .opened), down when .closed */
#articleindex-ocrb.jc-about-toc .table-of-content-icon-wide,
#articleindex-ocrb.jc-about-toc .table-of-content-icon-wide.opened {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2315101F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12.5 10 7.5 15 12.5'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform .25s ease;
}

#articleindex-ocrb.jc-about-toc .table-of-content-icon-wide.closed {
    transform: rotate(180deg);
}

#articleindex-ocrb.jc-about-toc > ul.table-of-content {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--jc-toc-rows, 3), auto);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    /* plain padding on purpose: jQuery slideUp/Down animates height, padding and
       margin together, so the box collapses to exactly 0 with no end snap
       (a border inset survives the animation and snaps away at display:none) */
    padding: 12px 20px;
    margin: 0;
    border: 0;
    max-height: none;
    overflow: visible;
    counter-reset: jc-toc;
}

#articleindex-ocrb.jc-about-toc .table-of-content li,
#articleindex-ocrb.jc-about-toc ul.table-of-content ul.table-of-content {
    display: contents !important;
}

#articleindex-ocrb.jc-about-toc .table-of-content li > div {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    margin: 0;
    min-width: 0;
    overflow: visible;
    background: #fff;
}

/* 33px numbered badge */
#articleindex-ocrb.jc-about-toc .table-of-content li > div::before {
    counter-increment: jc-toc;
    content: counter(jc-toc);
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    border-radius: 20px;
    background: #ECEAF1;
    color: #000;
    font-family: 'Manrope', 'Manrope Fallback', Arial, sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
}

/* the +/- expander of nested levels is not part of the design */
#articleindex-ocrb.jc-about-toc .table-of-content li > div > span {
    display: none;
}

/* Figma "Desktop/Heading 6" */
#articleindex-ocrb.jc-about-toc .table-of-content a {
    display: block;
    margin: 0;
    margin-top: 3px;
    min-width: 0;
    color: #15101F;
    font-family: 'Manrope', 'Manrope Fallback', Arial, sans-serif;
    font-size: 18px;
    line-height: 28px;
    font-weight: 700;
    text-decoration: none;
}

#articleindex-ocrb.jc-about-toc .table-of-content a:hover {
    text-decoration: underline;
}

@media (max-width: 1023px) {
    #articleindex-ocrb.jc-about-toc > ul.table-of-content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(calc(var(--jc-toc-rows, 3) * 2), auto);
    }
}

@media (max-width: 767px) {
    #articleindex-ocrb.jc-about-toc > #articleindextitle {
        height: auto;
        padding: 14px 16px;
        font-size: 20px;
        line-height: 30px;
    }

    #articleindex-ocrb.jc-about-toc > ul.table-of-content {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 8px 16px 16px;
    }

    #articleindex-ocrb.jc-about-toc .table-of-content a {
        font-size: 16px;
        line-height: 24px;
    }
}