/* ==========================================================================
   صفحه‌های محتوایی — درباره ما، تماس با ما، قوانین
   ==========================================================================

   نسخه‌ی قبلی این سه صفحه یک قالبِ تکراری بود: عنوانِ وسط‌چین، سه کارتِ
   هم‌شکل، یک دکمه. تمیز بود ولی طراحی نبود — و هر سه صفحه دقیقاً شبیه هم
   بودند.

   این نسخه هر صفحه را با ساختارِ خودش می‌سازد:

     • «درباره ما»  → هیروِ دوستونه با پنلِ نشانِ برند، بعد ردیف‌های ویژگی با
                       شماره، و یک نوارِ پایانیِ دعوت به اقدام.
     • «تماس با ما» → فرمِ بزرگ در یک ستون و کاشی‌های کانالِ ارتباطی در ستونِ
                       دیگر، به‌جای فهرستِ ساده‌ی متنی.
     • «قوانین»     → فهرستِ چسبنده‌ی کناری + جست‌وجو + آکاردئونِ شماره‌دار.

   رنگ‌ها دقیقاً همان پالتِ سایت‌اند و همه از متغیرهای `--pub-*` می‌آیند
   (سبزِ #10b981 → #059669، سطحِ #161b22، پس‌زمینه‌ی #0d1117 و معادل‌های روشن).
   هیچ رنگِ تازه‌ای اضافه نشده است.

   دامنه‌ی اثر: همه‌چیز زیرِ `.cnt-page` است و روی هیچ صفحه‌ی دیگری نمی‌افتد.
   ========================================================================== */

.cnt-page {
    min-height: auto;
    padding: 0 0 4.5rem;
    overflow: hidden;
}

.cnt-wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
    z-index: 1;
}

.cnt-wrap--narrow {
    max-width: 900px;
}

/* ==========================================================================
   هیروِ صفحه
   ========================================================================== */
.cnt-hero {
    position: relative;
    padding: 4.2rem 0 3.2rem;
    /* همان لهجه‌ی گرادیانِ صفحه‌ی اصلی، فقط ملایم‌تر */
    background:
        radial-gradient(ellipse 80% 60% at 70% -10%, var(--pub-glow), transparent 60%),
        radial-gradient(circle at 10% 90%, var(--pub-glow), transparent 45%);
}

.cnt-hero::after {
    /* خطِ نازکِ جداکننده‌ی هیرو از بدنه */
    content: '';
    position: absolute;
    bottom: 0;
    right: 10%;
    left: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--pub-border-accent), transparent);
}

.cnt-hero__grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 2.5rem;
    align-items: center;
}

.cnt-hero--center .cnt-hero__grid {
    grid-template-columns: 1fr;
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
}

.cnt-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--pub-primary);
    background: var(--pub-glow);
    border: 1px solid var(--pub-border-accent);
    padding: 0.35rem 0.95rem;
    border-radius: 50px;
    margin-bottom: 1.1rem;
}

.cnt-title {
    font-size: clamp(1.9rem, 4.2vw, 2.9rem);
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -0.5px;
    color: var(--pub-text);
    margin: 0 0 1rem;
}

.cnt-title span {
    background: linear-gradient(135deg, var(--pub-primary), var(--pub-accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cnt-lead {
    font-size: 1rem;
    line-height: 2.1;
    color: var(--pub-text-muted);
    margin: 0 0 1.6rem;
    max-width: 560px;
}

.cnt-hero--center .cnt-lead {
    margin-inline: auto;
}

.cnt-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.cnt-hero--center .cnt-actions {
    justify-content: center;
}

/* ------------------------------------------------- پنلِ نشانِ برند (هیرو) */
.cnt-emblem {
    position: relative;
    /* `width: 100%` لازم است. با `margin-inline-start: auto` به‌تنهایی، آیتمِ
       گرید به اندازه‌ی محتوایش جمع می‌شد؛ و چون تنها محتوای غیرمطلقش هسته‌ای
       با `width: 38%` است، عرضِ والد صفر می‌شد و درصدِ فرزند هم صفر — یعنی
       کلِ نشان نامرئی. `justify-self` کارِ آن مارجینِ خودکار را می‌کند بدونِ
       اینکه اندازه را خراب کند. */
    width: 100%;
    max-width: 340px;
    aspect-ratio: 1 / 1;
    justify-self: end;
    display: grid;
    place-items: center;
}

/* حلقه‌های هم‌مرکز — با CSS ساخته می‌شوند، پس تصویری برای لود شدن نیست */
.cnt-emblem__ring {
    position: absolute;
    border-radius: 50%;
    /* `--pub-border` برای مرزِ کارت ساخته شده و برای یک دایره‌ی بزرگ آن‌قدر
       کم‌رنگ است که اصلاً دیده نمی‌شود. */
    border: 1px solid var(--pub-border-accent);
}

.cnt-emblem__ring--1 { inset: 0;   opacity: 0.55; }
.cnt-emblem__ring--2 { inset: 15%; opacity: 0.8; }
.cnt-emblem__ring--3 { inset: 30%; }

.cnt-emblem__core {
    position: relative;
    width: 38%;
    aspect-ratio: 1 / 1;
    border-radius: 28%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--pub-primary), var(--pub-accent));
    color: #fff;
    font-size: 1.8rem;
    box-shadow: 0 16px 40px rgba(16, 185, 129, 0.35);
}

/* چیپ‌های شناور روی حلقه‌ها */
.cnt-emblem__chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--pub-text);
    background: var(--pub-surface);
    border: 1px solid var(--pub-border);
    box-shadow: var(--pub-shadow-sm);
    padding: 0.35rem 0.75rem;
    border-radius: 50px;
}

.cnt-emblem__chip i {
    color: var(--pub-primary);
    font-size: 0.72rem;
}

/* ⚠ اینجا عمداً `nth-of-type` استفاده *نشده* است: همه‌ی فرزندهای این پنل
   `<span>` هستند (حلقه‌ها، هسته و چیپ‌ها)، پس `nth-of-type` روی حلقه‌ها
   می‌افتاد و هیچ چیپی موقعیت نمی‌گرفت. کلاسِ صریح این ابهام را ندارد. */
.cnt-emblem__chip--a { top: 4%;    right: -2%; }
.cnt-emblem__chip--b { bottom: 26%; left: -6%; }
.cnt-emblem__chip--c { bottom: 0;   right: 14%; }

/* ==========================================================================
   بدنه‌ی صفحه
   ========================================================================== */
.cnt-section {
    padding-top: 3.2rem;
}

.cnt-section__head {
    margin-bottom: 1.8rem;
}

.cnt-section__title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--pub-text);
    margin: 0 0 0.4rem;
}

.cnt-section__sub {
    font-size: 0.92rem;
    color: var(--pub-text-muted);
    line-height: 1.9;
    margin: 0;
}

/* ------------------------------------------------------ ردیف‌های ویژگی */
/* به‌جای سه کارتِ هم‌شکلِ وسط‌چین، ردیف‌هایی با شماره و متنِ راست‌چین که
   خواندنشان در فارسی طبیعی‌تر است. */
.cnt-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 1rem;
}

.cnt-feature {
    position: relative;
    display: flex;
    gap: 1rem;
    background: var(--pub-surface);
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius);
    padding: 1.4rem 1.3rem;
    overflow: hidden;
    transition: transform var(--pub-transition), border-color var(--pub-transition),
                box-shadow var(--pub-transition);
}

.cnt-feature::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--pub-primary), var(--pub-accent));
    opacity: 0;
    transition: opacity var(--pub-transition);
}

.cnt-feature:hover {
    transform: translateY(-4px);
    border-color: var(--pub-border-accent);
    box-shadow: var(--pub-shadow);
}

.cnt-feature:hover::before {
    opacity: 1;
}

.cnt-feature__num {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    font-size: 1rem;
    background: var(--pub-glow);
    border: 1px solid var(--pub-border-accent);
    color: var(--pub-primary);
}

.cnt-feature__body h3 {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--pub-text);
    margin: 0 0 0.45rem;
}

.cnt-feature__body p {
    font-size: 0.9rem;
    line-height: 2;
    color: var(--pub-text-muted);
    margin: 0;
}

/* --------------------------------------------------- نوارِ دعوت به اقدام */
.cnt-band {
    position: relative;
    margin-top: 3.2rem;
    border-radius: var(--pub-radius);
    padding: 2.2rem 2rem;
    text-align: center;
    background: var(--pub-surface);
    border: 1px solid var(--pub-border-accent);
    overflow: hidden;
}

.cnt-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 100% at 50% 0%, var(--pub-glow), transparent 70%);
    pointer-events: none;
}

.cnt-band__inner {
    position: relative;
}

.cnt-band h2 {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--pub-text);
    margin: 0 0 0.5rem;
}

.cnt-band p {
    font-size: 0.93rem;
    line-height: 2;
    color: var(--pub-text-muted);
    max-width: 560px;
    margin: 0 auto 1.3rem;
}

/* ==========================================================================
   تماس با ما
   ========================================================================== */
.ct-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 1.2rem;
    align-items: start;
}

.ct-card {
    background: var(--pub-surface);
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius);
    padding: 1.6rem 1.5rem;
    box-shadow: var(--pub-shadow-sm);
}

.ct-card__title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--pub-text);
    margin: 0 0 1.2rem;
}

.ct-card__title i {
    color: var(--pub-primary);
    font-size: 0.95rem;
}

/* کاشی‌های کانالِ ارتباطی — هرکدام یک لینکِ کامل و قابلِ کلیک */
.ct-channels {
    display: grid;
    gap: 0.6rem;
}

.ct-channel {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 0.95rem;
    border-radius: var(--pub-radius-sm);
    border: 1px solid var(--pub-border);
    background: var(--pub-surface-2);
    text-decoration: none;
    transition: border-color var(--pub-transition), transform var(--pub-transition),
                background var(--pub-transition);
}

.ct-channel:hover {
    border-color: var(--pub-border-accent);
    transform: translateX(-4px);   /* در RTL یعنی حرکت به سمتِ ادامه‌ی متن */
}

.ct-channel__icon {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    color: var(--pub-primary);
    background: var(--pub-glow);
    border: 1px solid var(--pub-border-accent);
}

.ct-channel__text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.ct-channel__label {
    font-size: 0.78rem;
    color: var(--pub-text-muted);
}

.ct-channel__value {
    font-size: 0.93rem;
    font-weight: 700;
    color: var(--pub-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ct-channel__value[dir="ltr"] {
    direction: ltr;
    text-align: right;
}

.ct-channel__go {
    margin-inline-start: auto;
    color: var(--pub-text-muted);
    font-size: 0.8rem;
    flex: none;
    transition: color var(--pub-transition);
}

.ct-channel:hover .ct-channel__go {
    color: var(--pub-primary);
}

/* یادداشتِ پایینِ ستونِ کانال‌ها */
.ct-note {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin-top: 1rem;
    padding: 0.8rem 0.9rem;
    border-radius: var(--pub-radius-sm);
    background: var(--pub-glow);
    border: 1px solid var(--pub-border-accent);
    font-size: 0.82rem;
    line-height: 1.95;
    color: var(--pub-text);
}

.ct-note i {
    color: var(--pub-primary);
    margin-top: 0.28rem;
    flex: none;
}

.ct-submit {
    width: 100%;
    margin-top: 0.3rem;
}

/* ==========================================================================
   قوانین
   ========================================================================== */
.rl-grid {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 1.4rem;
    align-items: start;
}

/* ------------------------------------------------------- فهرستِ کناری */
.rl-toc {
    position: sticky;
    top: 92px;                 /* هدرِ ثابتِ سایت حدود ۷۶ پیکسل است */
    background: var(--pub-surface);
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius);
    padding: 1.1rem 1rem;
    box-shadow: var(--pub-shadow-sm);
}

.rl-toc__title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--pub-text-muted);
    margin: 0 0 0.8rem;
}

.rl-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    max-height: 52vh;
    overflow-y: auto;
    /* جا برای نوارِ اسکرول تا روی متن نیفتد */
    padding-inline-end: 0.35rem;

    /* ------------------------------------------------------------------
       نوارِ اسکرولِ سفارشی
       ------------------------------------------------------------------
       نوارِ پیش‌فرضِ ویندوز پهن و خاکستری است و وسطِ این کارتِ تیره کاملاً
       بیگانه می‌افتد. اینجا باریک و هم‌رنگِ خودِ سایت می‌شود.

       فایرفاکس فقط `scrollbar-width` و `scrollbar-color` را می‌فهمد و کروم/
       اج/سافاری فقط `::-webkit-scrollbar` را؛ پس هر دو نوشته شده‌اند و هر
       مرورگری همان را می‌گیرد که می‌شناسد. */
    scrollbar-width: thin;
    scrollbar-color: var(--rl-thumb) transparent;
}

/* رنگِ دسته‌ی نوار جدا تعریف شده تا در هر پوسته به‌اندازه‌ی کافی دیده شود.
   `--pub-border-accent` برای *مرزِ* کارت ساخته شده و آن‌قدر کم‌رنگ است که
   به‌عنوانِ دسته‌ی اسکرول تقریباً نامرئی می‌شد. */
.rl-toc__list {
    --rl-thumb: rgba(16, 185, 129, 0.45);
}

body.light-mode .rl-toc__list {
    --rl-thumb: rgba(4, 120, 87, 0.4);
}

.rl-toc__list::-webkit-scrollbar {
    width: 6px;
}

.rl-toc__list::-webkit-scrollbar-track {
    background: transparent;
}

.rl-toc__list::-webkit-scrollbar-thumb {
    background: var(--rl-thumb);
    border-radius: 50px;
}

.rl-toc__list::-webkit-scrollbar-thumb:hover {
    background: var(--pub-primary);
}

.rl-toc__list a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.55rem;
    border-radius: 9px;
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--pub-text-muted);
    text-decoration: none;
    transition: background var(--pub-transition), color var(--pub-transition);
}

.rl-toc__list a:hover,
.rl-toc__list a.is-current {
    background: var(--pub-glow);
    color: var(--pub-primary);
}

.rl-toc__num {
    flex: none;
    min-width: 20px;
    height: 20px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    background: var(--pub-surface-2);
    border: 1px solid var(--pub-border);
    color: var(--pub-text-muted);
}

.rl-toc__list a:hover .rl-toc__num,
.rl-toc__list a.is-current .rl-toc__num {
    background: var(--pub-primary);
    border-color: transparent;
    color: #fff;
}

/* ------------------------------------------------------- نوارِ ابزار */
.rl-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.rl-search {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.rl-search input {
    width: 100%;
    padding: 0.72rem 2.5rem 0.72rem 0.95rem;
    border-radius: var(--pub-radius-sm);
    border: 1px solid var(--pub-border);
    background: var(--pub-surface);
    color: var(--pub-text);
    font-family: inherit;
    font-size: 0.9rem;
    outline: none;
    transition: border-color var(--pub-transition), box-shadow var(--pub-transition);
}

.rl-search input:focus {
    border-color: var(--pub-primary);
    box-shadow: 0 0 0 3px var(--pub-glow);
}

.rl-search i {
    position: absolute;
    top: 50%;
    right: 0.9rem;
    transform: translateY(-50%);
    color: var(--pub-text-muted);
    font-size: 0.85rem;
    pointer-events: none;
}

.rl-toggle-all {
    padding: 0.72rem 1.1rem;
    border-radius: var(--pub-radius-sm);
    border: 1px solid var(--pub-border);
    background: var(--pub-surface);
    color: var(--pub-text);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--pub-transition), color var(--pub-transition);
}

.rl-toggle-all:hover {
    border-color: var(--pub-primary);
    color: var(--pub-primary);
}

/* --------------------------------------------------------- آکاردئون */
.rl-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.rl-item {
    background: var(--pub-surface);
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius-sm);
    overflow: hidden;
    transition: border-color var(--pub-transition), box-shadow var(--pub-transition);
    scroll-margin-top: 96px;   /* تا لینکِ فهرست زیرِ هدرِ ثابت نیفتد */
}

.rl-item.is-open {
    border-color: var(--pub-border-accent);
    box-shadow: 0 6px 22px rgba(16, 185, 129, 0.12);
}

.rl-item.is-hidden {
    display: none;
}

.rl-item__head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 1.1rem;
    border: 0;
    background: transparent;
    color: var(--pub-text);
    font-family: inherit;
    font-size: 0.96rem;
    font-weight: 600;
    line-height: 1.8;
    text-align: right;
    cursor: pointer;
    transition: color var(--pub-transition);
}

.rl-item__head:hover {
    color: var(--pub-primary);
}

.rl-item__num {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-size: 0.78rem;
    font-weight: 700;
    background: var(--pub-surface-2);
    border: 1px solid var(--pub-border);
    color: var(--pub-text-muted);
    transition: background var(--pub-transition), color var(--pub-transition),
                border-color var(--pub-transition);
}

.rl-item.is-open .rl-item__num {
    background: linear-gradient(135deg, var(--pub-primary), var(--pub-accent));
    border-color: transparent;
    color: #fff;
}

.rl-item__title {
    flex: 1;
    min-width: 0;
}

.rl-item__chevron {
    flex: none;
    color: var(--pub-primary);
    transition: transform var(--pub-transition);
}

.rl-item.is-open .rl-item__chevron {
    transform: rotate(180deg);
}

.rl-item__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--pub-transition);
}

.rl-item.is-open .rl-item__body {
    grid-template-rows: 1fr;
}

.rl-item__inner {
    overflow: hidden;
}

.rl-item__inner > div {
    padding: 0 1.1rem 1.1rem 3.7rem;
    font-size: 0.92rem;
    line-height: 2.1;
    color: var(--pub-text-muted);
    white-space: pre-line;      /* خطوطِ متنِ قانون حفظ می‌شوند */
}

/* ------------------------------------------------------- حالت‌های خالی */
.cnt-empty {
    text-align: center;
    background: var(--pub-surface);
    border: 1px dashed var(--pub-border);
    border-radius: var(--pub-radius);
    padding: 2.6rem 1.5rem;
    color: var(--pub-text-muted);
    font-size: 0.93rem;
}

/* ==========================================================================
   خوانایی در حالت روشن
   ==========================================================================
   سبزِ برند (#10b981) روی پس‌زمینه‌ی روشن کنتراستِ حدود ۲.۵ به ۱ می‌دهد و حدِ
   استاندارد ۴.۵ است. فقط در حالتِ روشن و فقط در همین صفحه‌ها یک پله تیره‌تر
   می‌شود؛ متغیرِ سراسری دست نمی‌خورد تا بقیه‌ی سایت تغییری نکند.
   ========================================================================== */
body.light-mode .cnt-tag,
body.light-mode .cnt-feature__num,
body.light-mode .cnt-emblem__chip i,
body.light-mode .ct-card__title i,
body.light-mode .ct-channel__icon,
body.light-mode .ct-note i,
body.light-mode .rl-toc__list a:hover,
body.light-mode .rl-toc__list a.is-current,
body.light-mode .rl-item__head:hover,
body.light-mode .rl-item__chevron,
body.light-mode .rl-toggle-all:hover,
body.light-mode .ct-channel:hover .ct-channel__go {
    color: #047857;
}

body.light-mode .cnt-title span {
    background: linear-gradient(135deg, #047857, #059669);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* عنصرهایی که پس‌زمینه‌ی سبزِ تو‌پر دارند باید متنِ سفید نگه دارند */
body.light-mode .rl-toc__list a:hover .rl-toc__num,
body.light-mode .rl-toc__list a.is-current .rl-toc__num,
body.light-mode .rl-item.is-open .rl-item__num,
body.light-mode .cnt-emblem__core {
    color: #ffffff;
}

/* ==========================================================================
   ریسپانسیو
   ========================================================================== */
@media (max-width: 900px) {
    .cnt-hero__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* در موبایل نشان زیرِ متن می‌آید و وسط می‌ایستد */
    .cnt-emblem {
        justify-self: center;
        max-width: 260px;
    }

    .ct-grid,
    .rl-grid {
        grid-template-columns: 1fr;
    }

    .rl-toc {
        position: static;
    }

    .rl-toc__list {
        max-height: none;
        flex-direction: row;
        flex-wrap: wrap;
    }
}

@media (max-width: 600px) {
    .cnt-wrap {
        padding: 0 1rem;
    }

    .cnt-hero {
        padding: 3rem 0 2.4rem;
    }

    .cnt-section {
        padding-top: 2.4rem;
    }

    .cnt-feature {
        padding: 1.1rem 1rem;
        gap: 0.8rem;
    }

    .cnt-band {
        padding: 1.7rem 1.2rem;
        margin-top: 2.4rem;
    }

    .ct-card {
        padding: 1.2rem 1.1rem;
    }

    .rl-item__inner > div {
        padding: 0 1rem 1rem 1rem;
    }

    .cnt-emblem__chip {
        font-size: 0.68rem;
        padding: 0.28rem 0.6rem;
    }
}