/* Copyright site design system: tokens and shared chrome (all pages), then the skin for pages built on the legacy
   style.css. Keep it last in the head. Rules for the checkout funnel itself live in checkout.css. */
:root {
    --ink: #12263f;
    --muted: #55677d;
    --line: #dfe5ed;
    --bg: #f5f7fb;
    --card: #fff;
    --brand: #1d5ea8;
    --brand-deep: #123a6b;
    --brand-soft: #e8f1fb;
    --accent: #ff9a1f;
    --accent-deep: #f08a05;
    --ok: #16794c;
    --err: #b3261e;
    --err-soft: #fdecea;
    --radius: 14px;
    --shadow: 0 1px 2px rgba(18, 38, 63, .06), 0 8px 24px rgba(18, 38, 63, .07);
    --shadow-hover: 0 2px 4px rgba(18, 38, 63, .08), 0 14px 34px rgba(18, 38, 63, .13);
    --wrap: 1240px;
    --s: 0px; /* grows with the height of desktop screens, see below */
    --hero: radial-gradient(900px 340px at 90% -10%, rgba(120, 186, 255, .3), transparent 70%), linear-gradient(120deg, #123a6b, #1d5ea8);
}

/* --s runs from 0 (screen 600px high or less) to 200px (800px high or more): only the home banner and its form use it. */
@media (min-width: 1280px) { :root { --s: clamp(0px, calc(100vh - 600px), 200px); } }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 400 16px/1.6 "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
body > form#form1 { display: flex; flex-direction: column; min-height: 100vh; margin: 0; }
main { display: block; flex: 1 0 auto; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

[class*="ck-"], [class*="ck-"] *, [class*="sx-"], [class*="sx-"] * { box-sizing: border-box; }
.ck-wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.ck-narrow { max-width: 780px; }
.ck-section { padding-block: 44px; }
.ck-band { background: var(--card); border-block: 1px solid var(--line); }
.ck-h2 { margin: 0 0 22px; font-size: 1.4rem; font-weight: 800; line-height: 1.2; color: var(--ink); }
.ck-i { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ck-skip { position: absolute; left: -999px; top: 0; background: #fff; padding: 8px 14px; z-index: 10; }
.ck-skip:focus { left: 8px; top: 8px; }
.ck-link { color: var(--brand); font-weight: 600; text-underline-offset: 3px; }

/* Buttons */
.ck-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 12px 22px; border: 2px solid transparent; border-radius: 10px;
    font: inherit; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer;
    transition: background-color .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.ck-btn--primary { background: var(--accent); color: var(--ink); box-shadow: 0 6px 16px rgba(240, 138, 5, .28); }
.ck-btn--primary:hover { background: var(--accent-deep); transform: translateY(-1px); color: var(--ink); }
.ck-btn--ghost { border-color: var(--brand); color: var(--brand); background: transparent; }
.ck-btn--ghost:hover { background: var(--brand-soft); color: var(--brand); }
.ck-btn--block { display: flex; width: 100%; }
.ck-btn--lg { padding: 16px 24px; font-size: 1.08rem; }
.ck-btn[disabled] { opacity: .65; cursor: progress; transform: none; }

/* Header: one row on desktop, burger with a side drawer below 1280px. The drawer overlays the page, it never pushes it down. */
.ck-header { background: var(--card); border-bottom: 1px solid var(--line); }
.ck-header__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; padding-block: 8px; }
.ck-logo { flex: none; }
.ck-logo img { display: block; width: 190px; height: auto; }
.ck-header__actions { display: flex; flex: none; align-items: center; gap: 8px; }
.ck-header__actions .ck-btn { padding: 8px 12px; font-size: .88rem; white-space: nowrap; }
.ck-header__actions .ck-btn--primary { box-shadow: none; }
.ck-iconbtn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: var(--brand); }
.ck-iconbtn:hover { background: var(--brand-soft); }
.ck-iconbtn__text { display: none; }
.ck-burger, .ck-menu__close { display: none; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--ink); font-size: 1.15rem; cursor: pointer; }
.ck-burger:hover, .ck-menu__close:hover { background: var(--brand-soft); }
.ck-menu { flex: 1 1 auto; min-width: 0; }
.ck-menu ul { display: flex; justify-content: center; gap: 4px 12px; margin: 0; padding: 0; list-style: none; }
.ck-menu li { margin: 0; padding: 0; background: none; }
.ck-menu ul a { color: var(--ink); font-size: .8rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.ck-menu ul a:hover, .ck-menu ul a[aria-current] { color: var(--brand); text-decoration: underline; text-underline-offset: 4px; }
.ck-menu__head, .ck-menu__extra, .ck-scrim { display: none; }
/* Tall desktop screens have the room: logo and buttons on one row, menu on its own, like the original site. */
@media (min-width: 1280px) and (min-height: 880px) {
    .ck-header__row { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "logo actions" "menu menu"; gap: 8px 18px; padding-block: 10px 0; }
    .ck-logo { grid-area: logo; }
    .ck-logo img { width: 250px; }
    .ck-header__actions { grid-area: actions; justify-self: end; gap: 12px; }
    .ck-header__actions .ck-btn { padding: 10px 18px; font-size: .95rem; }
    .ck-iconbtn { display: inline-flex; align-items: center; gap: 8px; width: auto; height: auto; padding: 8px 10px; font-size: .92rem; font-weight: 600; text-decoration: none; }
    .ck-iconbtn__text { display: inline; }
    .ck-menu { grid-area: menu; padding-block: 10px; border-top: 1px solid var(--line); }
    .ck-menu ul { justify-content: flex-start; gap: 4px 28px; }
    .ck-menu ul a { font-size: .92rem; }
}
@media (max-width: 1279.98px) {
    .ck-iconbtn, .ck-header__cta { display: none; }
    .ck-burger { display: inline-grid; }
    .ck-menu {
        position: fixed; top: 0; right: 0; bottom: 0; z-index: 1000; display: flex; flex-direction: column; flex: none;
        width: min(320px, 86vw); padding: 12px 20px 24px; background: var(--card); box-shadow: -14px 0 40px rgba(8, 26, 54, .25); overflow-y: auto;
        transform: translateX(100%); visibility: hidden; transition: transform .22s ease, visibility .22s;
    }
    .is-menu-open .ck-menu { transform: none; visibility: visible; }
    .ck-menu__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
    .ck-menu__title { font-size: 1.05rem; font-weight: 800; }
    .ck-menu__close { display: inline-grid; margin-right: -8px; }
    .ck-menu ul { flex-direction: column; gap: 0; }
    .ck-menu ul a { display: block; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 1rem; white-space: normal; }
    .ck-menu__extra { display: grid; gap: 10px; margin-top: 20px; }
    .ck-scrim { display: block; position: fixed; inset: 0; z-index: 999; background: rgba(8, 26, 54, .45); opacity: 0; visibility: hidden; transition: opacity .22s, visibility .22s; }
    .is-menu-open .ck-scrim { opacity: 1; visibility: visible; }
    html.is-menu-open { overflow: hidden; }
}

/* Footer */
.ck-footer { background: var(--brand-deep); color: #c9d8ea; font-size: .9rem; }
.ck-footer__grid { display: grid; grid-template-columns: 1.2fr 1.6fr 1fr; gap: 28px 40px; padding-block: 38px 26px; }
.ck-footer__brand img { display: block; width: 170px; height: auto; margin-bottom: 12px; }
.ck-footer__brand p { margin: 0; max-width: 300px; }
.ck-footer__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; margin: 0; padding: 0; list-style: none; }
.ck-footer__links li { margin: 0; padding: 0; background: none; }
.ck-footer a { color: #fff; text-decoration: none; }
.ck-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ck-footer__secure-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: #fff; font-weight: 700; }
.ck-footer__secure-title .ck-i { color: #ffc069; }
.ck-footer__bottom { padding-block: 16px 22px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .84rem; }
.ck-footer__bottom p { margin: 0; }

/* Heroes shared by every template */
.ck-hero, .slider_contact_page, .sx-hero { background: var(--hero); color: #fff; }

/* Plan cards: checkout and home page */
.ck-plan {
    display: flex; flex-direction: column; padding: 24px;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
    transition: transform .16s, box-shadow .16s;
}
.ck-plan:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.ck-plan h3 { margin: 0; color: var(--ink); font-size: 1.16rem; font-weight: 800; line-height: 1.2; }
.ck-plan h3 a { color: inherit; text-decoration: none; }
.ck-plan h3 a:hover { color: var(--brand); text-decoration: underline; }
.ck-plan__desc { margin: 4px 0 0; color: var(--muted); font-size: .92rem; }
.ck-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 0; }
.ck-plan .ck-price { margin-top: 14px; }
.ck-price__num { color: var(--brand-deep); font-size: 1.75rem; font-weight: 800; letter-spacing: -.01em; }
.ck-price__num label, .ck-price__num span { margin: 0; color: inherit; font: inherit; }
.ck-price__per { color: var(--muted); font-size: 1rem; font-weight: 700; }
.ck-tag { align-self: flex-start; margin: 6px 0 0; padding: 2px 10px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: .78rem; font-weight: 700; }
.ck-features { display: grid; gap: 8px; margin: 18px 0 22px; padding: 0; list-style: none; font-size: .93rem; }
.ck-features li { display: flex; gap: 9px; align-items: flex-start; margin: 0; padding: 0; background: none; }
.ck-features .ck-i { margin-top: 3px; color: var(--ok); }
.ck-plan .ck-btn { margin-top: auto; }

/* ---------------------------------------------------------------------------------------------
   Home
   --------------------------------------------------------------------------------------------- */
/* Same proportions everywhere. Only the banner grows with the screen height, to give the form room. */
.sx-hero { padding-block: max(16px, calc(8px + var(--s) * .08)); }
.sx-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 36px; align-items: center; }
.sx-hero h1 { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.2rem); font-weight: 800; line-height: 1.15; letter-spacing: -.01em; color: #fff; }
.sx-hero__sub { margin: 6px 0 0; color: #ffd08a; font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.sx-hero__text { margin: 8px 0 0; color: #e4eefa; font-size: .93rem; line-height: 1.5; }
.sx-hero__band { margin: 6px 0 0; color: #c9dcf2; font-size: .86rem; line-height: 1.4; }
.sx-hero__form { padding: calc(14px + var(--s) * .04) calc(16px + var(--s) * .04); background: var(--card); border-radius: var(--radius); box-shadow: 0 14px 34px rgba(8, 26, 54, .32); color: var(--ink); }
.sx-hero__form h2 { margin: 0 0 calc(8px + var(--s) * .03); color: var(--ink); font-size: calc(17.3px + var(--s) * .0135); font-weight: 800; line-height: 1.25; }
.sx-hero__form h2 span { color: inherit; }
.sx-hero__fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: max(8px, calc(5px + var(--s) * .035)); }
.sx-hero__form .sx-field { margin: 0; }
[data-site] .sx-hero__form .sx-field input { min-height: max(42px, calc(36px + var(--s) * .05)); padding: 8px 12px; font-size: .95rem; }
[data-site] .sx-hero__form input[type="submit"] { display: block; width: 100%; margin-top: calc(8px + var(--s) * .02); padding: calc(11px + var(--s) * .015) 20px; }
/* Two columns where four lines would push the offers off the screen, or where the form spans the whole page */
@media (min-width: 1001px) and (max-height: 719.98px), (min-width: 641px) and (max-width: 1000px) {
    .sx-hero { padding-block: calc(16px + var(--s) * .09); }
    .sx-hero__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(8px + var(--s) * .02); }
    [data-site] .sx-hero__form .sx-field input { min-height: calc(42px + var(--s) * .03); }
}
.ck-btn.sx-hero__cta { margin-top: 8px; padding: 7px 18px; background: linear-gradient(135deg, #ffc24d, var(--accent)); color: var(--ink); font-size: .92rem; box-shadow: 0 6px 18px rgba(255, 154, 31, .45); }
.ck-btn.sx-hero__cta:hover { background: linear-gradient(135deg, #ffcb66, var(--accent-deep)); color: var(--ink); box-shadow: 0 10px 24px rgba(255, 154, 31, .55); transform: translateY(-1px); }
.sx-hero__cta .ck-i { transition: transform .15s; }
.sx-hero__cta:hover .ck-i { transform: translateX(3px); }
@media (min-height: 720px) { .ck-btn.sx-hero__cta { margin-top: 16px; padding: 12px 26px; font-size: 1rem; } }
/* The smallest laptop screens: beside the text, or the offers would leave the screen */
@media (min-width: 1001px) and (max-height: 639.98px) {
    .sx-hero__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 6px; }
    .sx-hero__foot .sx-hero__band, .ck-btn.sx-hero__cta { margin-top: 0; }
    .sx-hero__cta .ck-i { display: none; }
}
.sx-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.sx-planrow { padding-block: 14px 20px; }
.sx-plan { padding: 14px 16px; }
.sx-plan__head { display: flex; align-items: center; gap: 10px; }
.sx-plan__icon { flex: none; width: 40px; height: auto; }
.sx-plan__name { min-width: 0; }
.sx-plan h3 { font-size: 1.05rem; }
.sx-plan .ck-plan__desc { margin-top: 2px; font-size: .82rem; line-height: 1.3; }
.ck-plan__desc img { height: 16px; width: auto; vertical-align: middle; }
.sx-plan__price { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 10px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.sx-plan .ck-price { flex-wrap: nowrap; gap: 4px; margin: 0; white-space: nowrap; }
.sx-plan .ck-price__num { font-size: 1.3rem; }
.sx-plan .ck-price__per { font-size: .82rem; }
.sx-plan .ck-tag { align-self: center; margin: 0; padding: 1px 8px; font-size: .7rem; }
.sx-plan .ck-features { gap: 3px; margin: 8px 0 10px; font-size: .82rem; line-height: 1.35; }
.sx-plan .ck-features .ck-i { width: 1.1em; height: 1.1em; margin-top: 1px; }
.sx-plan__cta { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.sx-plan__cta .ck-btn { flex: 1; margin: 0; padding: 10px 16px; font-size: .95rem; box-shadow: none; }
.sx-plan__cta .sx-addfile { margin: 0; white-space: nowrap; }
@media (min-width: 1280px) and (min-height: 880px) {
    .sx-hero__text { font-size: 1rem; }
    .sx-planrow { padding-block: 24px 30px; }
    .sx-plan { padding: 18px 20px; }
    .sx-plan .ck-features { gap: 5px; margin: 12px 0 14px; font-size: .88rem; }
}
.sx-strip { background: var(--card); border-bottom: 1px solid var(--line); }
.sx-strip p, .sx-strip h3 { margin: 0; padding-block: 15px; color: var(--brand-deep); font-size: 1.04rem; font-weight: 700; line-height: 1.4; text-align: center; }

.sx-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.sx-plans .ck-plan { margin: 0; }
.sx-addfile { color: var(--brand); font-size: .85rem; font-weight: 600; }

.sx-proof { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 36px; align-items: start; }
.sx-stats h3 { margin: 0 0 14px; font-size: 1.4rem; font-weight: 800; line-height: 1.25; color: var(--ink); }
.sx-stats ul { margin: 0; padding: 0; list-style: none; }
.sx-stats li { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line); background: none; color: var(--muted); font-size: .98rem; }
.sx-stats li:last-child { border-bottom: 0; }
.sx-stats li span { color: var(--brand); font-weight: 800; }
.sx-logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sx-logos .item_portfolio { float: none; width: auto; height: 104px; margin: 0; padding: 0; background-color: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; position: relative; }
.sx-logos .item_portfolio span { position: absolute; inset: 0; width: auto; height: auto; margin: 0; background-position: center; background-repeat: no-repeat; background-size: contain; }

.sx-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.sx-quote { display: flex; flex-direction: column; margin: 0; padding: 24px; background: var(--bg); border-radius: var(--radius); }
.sx-quote__who { display: flex; align-items: center; gap: 14px; }
.sx-quote__who img { width: 58px; height: 58px; flex: none; border-radius: 50%; object-fit: cover; }
.sx-quote h4 { margin: 0; font-size: 1rem; font-weight: 800; line-height: 1.3; color: var(--ink); }
.sx-quote__role { margin: 0; color: var(--muted); font-size: .88rem; }
.sx-quote__text { flex: 1; margin: 14px 0; font-size: .98rem; font-style: italic; }
.sx-quote .ck-link { align-self: flex-start; }

.sx-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; margin: 0; padding: 0; list-style: none; }
.sx-steps li { margin: 0; padding: 0; background: none; }
.sx-steps__icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 12px; border-radius: 13px; background: var(--brand-soft); color: var(--brand); font-size: 1.32rem; }
.sx-steps h4 { margin: 0 0 6px; font-size: 1.02rem; font-weight: 800; line-height: 1.3; color: var(--ink); }
.sx-steps p { margin: 0; color: var(--muted); font-size: .93rem; }

.sx-cta { background: var(--hero); color: #fff; }
.sx-cta__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 36px; padding-block: 36px; }
.sx-cta h2 { margin: 0; font-size: 1.5rem; font-weight: 800; line-height: 1.25; color: #fff; }
.sx-cta p { margin: 6px 0 0; color: #e4eefa; }

.sx-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; }
.sx-links > li { margin: 0; padding: 0; background: none; }
.sx-links h3 { margin: 0 0 12px; font-size: 1.1rem; font-weight: 800; color: var(--ink); }
.sx-links ul { margin: 0; padding: 0; list-style: none; }
.sx-links li li { margin: 0; padding: 7px 0; border-bottom: 1px solid var(--line); background: none; font-size: .93rem; }
.sx-links li li h4 { margin: 0 0 3px; font-size: .95rem; font-weight: 700; }
.sx-links li li p { margin: 0; color: var(--muted); font-size: .88rem; }
.sx-links a { color: var(--brand); text-decoration: none; }
.sx-links a:hover { text-decoration: underline; }
.sx-links .read_all_news { display: inline-block; float: none; margin: 8px 0 0; font-size: .9rem; font-weight: 600; }
.sx-links > li.sx-empty { display: none; }
.date_news { display: none; }

/* Promo tab: keeps its behaviour, out of the way on small screens */
@media (max-width: 960px) { .pop_up_promo { display: none; } }

/* ---------------------------------------------------------------------------------------------
   Legacy templates
   --------------------------------------------------------------------------------------------- */
.wrapper { box-sizing: border-box; width: 100%; max-width: var(--wrap); padding-inline: 20px; }

[data-site] main input[type="text"], [data-site] main input[type="email"], [data-site] main input[type="password"], [data-site] main input[type="tel"], [data-site] main select, [data-site] main textarea,
.sx-field input {
    box-sizing: border-box; width: 100%; min-height: 48px; margin: 0; padding: 10px 13px;
    border: 1.5px solid #c6d1de; border-radius: 9px; background: #fff; box-shadow: none;
    color: var(--ink); font: inherit; font-size: 1rem;
}
[data-site] main textarea { min-height: 170px; resize: vertical; }
[data-site] main input:focus, [data-site] main textarea:focus, [data-site] main select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(29, 94, 168, .18); }
[data-site] main input::placeholder, [data-site] main textarea::placeholder { color: #6d7d90; }
[data-site] main input[type="submit"], [data-site] main input[type="button"] {
    display: inline-block; width: auto; height: auto; min-height: 0; padding: 14px 28px; border: 0; border-radius: 10px;
    background: var(--accent); background-image: none; box-shadow: 0 6px 16px rgba(240, 138, 5, .28);
    color: var(--ink); font: inherit; font-weight: 700; line-height: 1.2; text-shadow: none; text-transform: none; cursor: pointer;
    transition: background-color .15s, transform .15s;
}
[data-site] main input[type="submit"]:hover, [data-site] main input[type="button"]:hover { background: var(--accent-deep); transform: translateY(-1px); }

/* Article, contact and gallery templates */
.slider_contact_page { height: auto; margin: 0; padding-block: 38px; background: var(--hero); }
.slider_contact_page h1, body.article-page .slider_contact_page h1, h1.header_title {
    margin: 0; padding: 0; background: none; color: #fff; font-size: clamp(1.6rem, 1.15rem + 1.8vw, 2.4rem); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; text-transform: none;
}
.woman_contact { display: none; }
#main_contact { padding-block: 32px 56px; background: var(--bg); border: 0; }
#main_contact > .wrapper { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 26px; align-items: start; }
#main_contact > .wrapper::before, #main_contact > .wrapper::after { display: none; }
#main_contact .sidebar { float: none; width: auto; margin: 0; padding: 0; background: none; }
#main_contact .sidebar > ul { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
#main_contact .sidebar > ul::before, #main_contact .sidebar > ul::after { display: none; }
#main_contact .sidebar > ul > li {
    float: none; width: auto; margin: 0; padding: 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
#main_contact .sidebar .block_news:not(:has(li)) { display: none; }
#main_contact .sidebar .icon_widget, .address_box .icon_widget, .email_box .icon_widget { display: none; }
#main_contact .sidebar h3, #main_contact .sidebar h4, body.article-page #main_contact .sidebar h3 {
    float: none; width: auto; margin: 0 0 10px; padding: 0; color: var(--ink); font-size: 1rem; font-weight: 800; line-height: 1.3; text-transform: none;
}
#main_contact .sidebar ul ul { margin: 0; padding: 0; list-style: none; }
#main_contact .sidebar li li { margin: 0; padding: 7px 0; border-bottom: 1px solid var(--line); background: none; font-size: .92rem; line-height: 1.4; }
#main_contact .sidebar li li:last-child { border-bottom: 0; }
#main_contact .sidebar li li::before { display: none; }
#main_contact .sidebar a { color: var(--brand); font-size: .92rem; font-weight: 400; line-height: 1.4; text-decoration: none; }
#main_contact .sidebar a:hover { text-decoration: underline; }
#main_contact .sidebar p { margin: 0 0 4px; color: var(--muted); font-size: .94rem; line-height: 1.5; }
#main_contact .sidebar iframe { display: block; width: 100%; height: 190px; margin-top: 10px; border-radius: 10px; }
.sx-sidecta h3 { font-size: 1.08rem !important; }
.sx-sidecta p { margin: 0 0 14px !important; }

#main_contact .main_content {
    float: none; width: auto; min-height: 0; margin: 0; padding: 32px; position: static;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
#main_contact .main_content > h3 { margin: 0 0 18px; padding: 0; background: none; border: 0; color: var(--ink); font-size: 1.25rem; font-weight: 800; line-height: 1.3; text-transform: none; }
body.article-page #main_contact .main_content > h3:first-child { display: none; }
.meta-article { display: none; }
.left_side, .right_side { float: none; width: auto; margin: 0; }
.left_side input, .right_side textarea { margin-bottom: 14px !important; }
.box_captcha { margin: 8px 0 18px; padding: 0; border: 0; }
.box_captcha label { display: block; margin-bottom: 8px; font-size: .92rem; font-weight: 600; }
#main_contact .main_content input[type="submit"] { float: none; display: block; width: 100%; max-width: 300px; }
.sx-contact-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }

.wrap-text-content { padding: 0; font-size: 1rem; line-height: 1.7; color: var(--ink); }
.wrap-text-content * { font-family: inherit !important; }
.wrap-text-content p, .wrap-text-content span, .wrap-text-content div, .wrap-text-content li, .wrap-text-content font, .wrap-text-content td {
    color: inherit !important; font-size: inherit !important; line-height: inherit !important; text-align: left !important;
}
.wrap-text-content p { margin: 0 0 16px; }
.wrap-text-content h1, .wrap-text-content h2, .wrap-text-content h3, .wrap-text-content h4,
.wrap-text-content h1 *, .wrap-text-content h2 *, .wrap-text-content h3 *, .wrap-text-content h4 * {
    color: var(--ink) !important; font-weight: 800 !important; line-height: 1.3 !important; text-align: left !important;
}
.wrap-text-content h1, .wrap-text-content h1 * { font-size: 1.5rem !important; }
.wrap-text-content h2, .wrap-text-content h2 * { font-size: 1.28rem !important; }
.wrap-text-content h3, .wrap-text-content h4, .wrap-text-content h3 *, .wrap-text-content h4 * { font-size: 1.1rem !important; }
.wrap-text-content h1, .wrap-text-content h2, .wrap-text-content h3, .wrap-text-content h4 { margin: 26px 0 10px !important; }
.wrap-text-content > :first-child { margin-top: 0 !important; }
.wrap-text-content img { max-width: 100%; height: auto; margin: 4px 0 12px 16px; border-radius: 10px; }
.wrap-text-content table { max-width: 100%; height: auto !important; }
.wrap-text-content a { color: var(--brand); }
.wrap-text-content ul, .wrap-text-content ol { margin: 0 0 16px; padding-left: 22px; }

/* Login, password, thank-you and other single-card templates */
.registration_second_workflow { padding-block: 40px 60px; background: var(--bg); }
[data-site] .registration_second_workflow .main_content { float: none; width: auto; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; text-align: left; }
.sx-page { max-width: 960px; margin-inline: auto; }
.sx-page--narrow { max-width: 560px; }
.sx-page h1 { margin: 0 0 8px; color: var(--ink); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); font-weight: 800; line-height: 1.2; text-align: left; }
.sx-card { padding: 30px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); text-align: left; }
.sx-card h3 { margin: 0 0 8px; color: var(--ink); font-size: 1.2rem; font-weight: 800; line-height: 1.3; }
.sx-card p { margin: 0 0 14px; }
.sx-muted, .sx-card .sx-muted { color: var(--muted); font-size: .93rem; }
.sx-field { margin-bottom: 14px; }
.sx-field > label, .sx-field > span.sx-label { display: block; margin-bottom: 5px; font-size: .9rem; font-weight: 700; }
.sx-validator { display: block; margin-top: 4px; color: var(--err); font-size: .85rem; font-weight: 600; }
.sx-check { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; font-size: .93rem; }
.sx-check input { width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--brand); }
.sx-check label { font-size: .93rem; }
.sx-card input[type="submit"] { display: block; width: 100%; }
.sx-error { display: block; margin-top: 12px; padding: 10px 14px; background: var(--err-soft); border-radius: 9px; color: var(--err); font-weight: 600; font-size: .93rem; }
.sx-status { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; font-size: 1.7rem; }
.sx-status--ok { background: #e6f5ec; color: var(--ok); }
.sx-status--err { background: var(--err-soft); color: var(--err); }
.sx-result { text-align: center; }
.sx-result h1, .sx-result .sx-result__title { display: block; margin: 0 0 12px; color: var(--ink); font-size: 1.5rem; font-weight: 800; line-height: 1.25; text-align: center; }
.sx-result__text { display: block; margin-bottom: 20px; color: var(--ink); font-size: 1rem; line-height: 1.65; text-align: left; }
.sx-result__actions a { display: inline-flex; }

/* Remaining legacy forms and tables stay readable and never overflow */
.registration_window, .inner_registration { box-sizing: border-box; max-width: 100%; }
.certificate_page_content_wrapper, .certificate_page_content { max-width: 100%; }

/* ---------------------------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------------------------- */
@media (max-width: 1000px) {
    .sx-proof { grid-template-columns: minmax(0, 1fr); }
    .sx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #main_contact > .wrapper { grid-template-columns: minmax(0, 1fr); }
    #main_contact .main_content { order: -1; }
    .ck-footer__grid { grid-template-columns: 1fr 1fr; }
    .ck-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
    .sx-plans, .sx-quotes, .sx-links { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .ck-section { padding-block: 32px; }
    .sx-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sx-logos .item_portfolio { height: 86px; }
    .sx-steps { grid-template-columns: minmax(0, 1fr); }
    .sx-cta .ck-btn { width: 100%; }
    .sx-contact-fields { grid-template-columns: minmax(0, 1fr); }
    #main_contact .main_content { padding: 20px; }
    .wrap-text-content img { float: none !important; display: block; margin: 8px 0 14px; }
    .sx-card { padding: 20px; }
    .ck-footer__grid { grid-template-columns: minmax(0, 1fr); }
    [data-site] main input[type="text"], [data-site] main input[type="email"], [data-site] main input[type="password"], [data-site] main input[type="tel"], [data-site] main textarea, .sx-field input { font-size: 16px; }
    #main_contact .main_content input[type="submit"] { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------------------------------------
   Overrides of legacy rules with higher specificity
   --------------------------------------------------------------------------------------------- */
#main_contact .sidebar > ul > li { padding: 20px !important; margin: 0 !important; border-bottom: 1px solid var(--line) !important; }
#main_contact .sidebar li li { padding: 8px 0 !important; margin: 0 !important; height: auto !important; border-bottom: 1px solid var(--line) !important; background: none !important; list-style: none; }
#main_contact .sidebar li li:last-child { border-bottom: 0 !important; }
#main_contact .sidebar li li a, .item-bar-copyrights li a { display: inline !important; padding: 0 !important; background: none !important; color: var(--brand) !important; font-size: .92rem !important; line-height: 1.4 !important; }
#main_contact .sidebar h3, #main_contact .sidebar h4 { padding: 0 !important; margin: 0 0 8px !important; color: var(--ink) !important; text-transform: none !important; }
#main_contact .sidebar p { padding: 0 !important; margin: 0 0 4px !important; }
#main_contact .sidebar .sx-sidecta p { margin: 0 0 14px !important; }
#main_contact .sidebar a.ck-btn { display: flex; color: var(--ink); font-size: 1rem; font-weight: 700; }
#main_contact .sidebar a.ck-btn:hover { text-decoration: none; }
#main_contact .left_side, #main_contact .right_side { float: none; width: auto; margin: 0; padding: 0; }
#main_contact .main_content input[type="text"], #main_contact .main_content input[type="email"] { width: 100%; margin: 0 0 14px; padding: 10px 13px; border: 1.5px solid #c6d1de; border-radius: 9px; box-shadow: none; background: #fff; font-size: 1rem; }
#main_contact .main_content textarea { width: 100%; height: calc(100% - 14px); min-height: 170px; margin: 0; padding: 12px 13px; border: 1.5px solid #c6d1de; border-radius: 9px; box-shadow: none; background: #fff; font: inherit; font-size: 1rem; }
#main_contact .main_content .box_captcha { margin: 8px 0 18px; padding: 0; border: 0; }
#main_contact .main_content .box_captcha label { display: none; }
#main_contact .main_content input[type="submit"] {
    float: none; display: block; width: 100%; max-width: 300px; height: auto; margin: 0; padding: 14px 28px; border: 0; border-radius: 10px;
    background: var(--accent); box-shadow: 0 6px 16px rgba(240, 138, 5, .28); color: var(--ink); font: inherit; font-weight: 700; line-height: 1.2; text-align: center; text-indent: 0; text-shadow: none;
}
#main_contact .main_content input[type="submit"]:hover { background: var(--accent-deep); }
#main_contact p { font-size: inherit; }
[data-site] .sx-card input[type="submit"], [data-site] .sx-hero__form input[type="submit"] { display: block; width: 100%; }
.sx-links { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.sx-links .block_news:not(:has(li)) { display: none; }
.sx-quote { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.sx-logos .item_portfolio { display: grid; place-items: center; position: static; float: none; }
.sx-logos .item_portfolio span { position: static; margin: 0 !important; max-width: 100%; }
@media (max-width: 1000px) {
    .sx-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 640px) {
    .ck-logo img { width: 170px; }
    .ck-header__row { min-height: 56px; }
    .ck-header__actions .ck-btn { padding: 7px 12px; font-size: .84rem; }
    .sx-hero__text, .sx-hero__band { display: none; }
    .sx-field--wide { grid-column: 1 / -1; }
    #main_contact .main_content input[type="submit"] { max-width: none; }
}

/* YouTube plans and quotation forms */
.sx-yt-head { max-width: var(--wrap); margin: 0 auto 18px; padding-inline: 20px; }
.sx-yt-head h1 { margin: 0 0 6px; color: var(--ink); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); font-weight: 800; line-height: 1.2; }
.sx-yt-head p { margin: 0; }
.registration_second_workflow .slider_registration { box-sizing: border-box; max-width: var(--wrap); height: auto; margin-inline: auto; padding: 0 20px; background: none; overflow-x: auto; }
.slider_registration > br { display: none; }
.slider_registration table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line) !important; border-radius: var(--radius); background: #fff; font-size: .95rem; overflow: hidden; }
.slider_registration th { padding: 12px 14px; background: var(--brand-deep) !important; color: #fff !important; font-size: .88rem; font-weight: 700; text-align: left; }
.slider_registration td { padding: 11px 14px; border-top: 1px solid var(--line); background: #fff !important; color: var(--ink) !important; }
.slider_registration td input[type="radio"] { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
.registration_second_workflow .registration_window { margin: 20px 0 0; padding: 0; background: none; border: 0; }
.registration_second_workflow .inner_registration {
    box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; width: auto; margin: 0; padding: 28px;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.registration_second_workflow .inner_registration::before, .registration_second_workflow .inner_registration::after { display: none; }
.inner_registration .left_part, .inner_registration .right_part { float: none; width: auto; margin: 0; padding: 0; border: 0; background: none; }
.registration_second_workflow .inner_registration .left_part h4, .registration_second_workflow .inner_registration .right_part h4 { margin: 0 0 14px; padding: 0; color: var(--ink); font-size: 1.15rem; font-weight: 800; line-height: 1.3; text-transform: none; }
.registration_second_workflow .left_part label { display: block; float: none; width: auto; height: auto; margin: 0 0 12px; padding: 0; color: var(--ink); font-size: .9rem; font-weight: 700; line-height: 1.4; }
.registration_second_workflow .left_part label:after { display: none; }
.registration_second_workflow .left_part input[type="text"], .registration_second_workflow .left_part input[type="email"], .registration_second_workflow .left_part input[type="text"].optional-input {
    float: none; width: 100%; height: auto; min-height: 48px; margin: 5px 0 0; padding: 10px 13px; border: 1.5px solid #c6d1de; border-radius: 9px; background: #fff; box-shadow: none; font: inherit; font-weight: 400;
}
.registration_second_workflow .terms_conditions { margin: 0 0 14px; color: var(--muted); font-size: .88rem; font-weight: 400; line-height: 1.5; text-align: left; }
.registration_second_workflow .inner_registration input[type="submit"] { float: none; display: block; width: 100%; height: auto; margin: 0 0 14px; padding: 14px 24px; background: var(--accent); color: var(--ink); text-indent: 0; }
.registration_second_workflow .inner_registration input[type="submit"]:hover { background: var(--accent-deep); }
.registration_second_workflow .inner_registration .world_map_block { margin: 14px 0 0; padding: 0; background: none; border: 0; }
.inner_registration .world_map_block .background_map { display: none; }
.registration_second_workflow .inner_registration .world_map_block p { position: static; width: auto; margin: 0; padding: 0; background: none; color: var(--muted); font-size: .88rem; line-height: 1.5; text-align: left; }
.inner_registration img { max-width: 100%; height: auto; }

/* The certificate is a fixed-layout document with its own typography */
.certificate-page { font-size: 12px; line-height: normal; }
.certificate_page_banner { background: var(--hero); }

/* Result pages, CMS tables, dead widgets */
.sx-result h1 { display: block; margin: 0 0 12px; font-size: 1.5rem; text-align: center; }
.wrap-text-content table { display: block; width: auto !important; overflow-x: auto; }
img[alt="Bookmark"] { display: none; }
@media (max-width: 820px) {
    .registration_second_workflow .inner_registration { grid-template-columns: minmax(0, 1fr); padding: 20px; }
}

/* CMS form controls build their label after the input: keep the label on top, two columns on wide screens */
.registration_second_workflow .left_part { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; align-content: start; }
.registration_second_workflow .left_part > h4 { grid-column: 1 / -1; }
.registration_second_workflow .left_part > .clearfix { display: none; }
.registration_second_workflow .left_part label { display: flex; flex-direction: column; }
.registration_second_workflow .left_part label input { order: 1; }
@media (max-width: 640px) {
    .registration_second_workflow .left_part { grid-template-columns: minmax(0, 1fr); }
}

/* The promo tab sits in the page margin: below this width it would cover the content */
@media (max-width: 1500px) { .pop_up_promo { display: none; } }

/* Client access page */
.sx-login { display: flex; flex: 1 0 auto; align-items: center; justify-content: center; padding: clamp(20px, 5vh, 56px) 20px; background: var(--bg); }
main:has(.sx-login) { display: flex; flex-direction: column; }
.sx-login__inner { width: 100%; max-width: 1000px; }
.sx-login__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); overflow: hidden; background: var(--card); border-radius: 20px; box-shadow: 0 2px 6px rgba(18, 38, 63, .08), 0 24px 56px rgba(18, 38, 63, .16); }
.sx-login__side { display: flex; flex-direction: column; padding: 40px; background: var(--hero); color: #e4eefa; }
.sx-login__emblem { width: 76px; height: 76px; margin-bottom: 18px; padding: 7px; background: #fff; border-radius: 50%; box-shadow: 0 6px 18px rgba(8, 26, 54, .3); }
.sx-login__side h1 { margin: 0; color: #fff; font-size: 2rem; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.sx-login__lead { margin: 10px 0 0; font-size: 1.02rem; line-height: 1.5; }
.sx-login__benefits { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; font-weight: 600; }
.sx-login__benefits li { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 0; background: none; line-height: 1.4; }
.sx-login__benefits .ck-i { margin-top: 1px; color: #ffc069; }
.sx-login__help { margin-top: auto; padding: 16px 18px; background: rgba(255, 255, 255, .1); border-radius: 12px; font-size: .88rem; line-height: 1.5; }
.sx-login__benefits + .sx-login__help { margin-top: 26px; }
.sx-login__help h4 { margin: 0 0 6px; color: #fff; font-size: .95rem; font-weight: 700; }
.sx-login__help p { margin: 0; }
.sx-login__form { padding: 40px; }
.sx-login__form h2 { margin: 0 0 20px; color: var(--ink); font-size: 1.4rem; font-weight: 800; line-height: 1.25; }
.sx-login__form .sx-field label { display: block; margin-bottom: 6px; font-size: .9rem; font-weight: 700; }
.sx-inputwrap { position: relative; }
.sx-inputwrap > .ck-i { position: absolute; top: 15px; left: 14px; color: var(--muted); pointer-events: none; }
[data-site] main .sx-inputwrap input[type="text"], [data-site] main .sx-inputwrap input[type="password"] { min-height: 50px; padding-left: 44px; padding-right: 46px; }
.sx-pass-toggle { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.sx-pass-toggle:hover, .sx-pass-toggle[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand); }
.sx-pass-toggle[hidden] { display: none; }
.sx-login__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 4px 0 18px; font-size: .9rem; }
.sx-login__row .sx-check { display: inline-flex; margin: 0; }

.sx-login__row a { color: var(--brand); font-weight: 600; text-underline-offset: 3px; }
[data-site] .sx-login__form input[type="submit"] { display: block; width: 100%; padding: 15px 24px; font-size: 1.05rem; }
.sx-login__new { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.sx-login__new p { margin: 0 0 10px; color: var(--muted); font-size: .92rem; text-align: center; }
.sx-login__note { margin: 14px 0 0; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.sx-login__errslot .sx-error { margin: 0 0 16px; }
@media (max-width: 860px) {
    .sx-login__card { grid-template-columns: minmax(0, 1fr); }
    .sx-login__side { padding: 24px; }
    .sx-login__form { padding: 24px; }
    .sx-login__emblem { width: 56px; height: 56px; padding: 5px; margin-bottom: 10px; }
    .sx-login__side h1 { font-size: 1.6rem; }
    .sx-login__benefits, .sx-login__help { display: none; }
    .sx-login__lead { margin-top: 6px; font-size: .95rem; }
}

/* ---------------------------------------------------------------------------------------------
   Articles: a reading column and a call to action that stays in view. Content.aspx.cs cleans up the
   CMS markup, so these rules style real headings, paragraphs and figures.
   --------------------------------------------------------------------------------------------- */
.sx-arthero { padding-block: 26px 32px; }
.sx-crumbs { display: flex; flex-wrap: wrap; gap: 2px 8px; margin: 0 0 10px; color: #c9dcf2; font-size: .86rem; }
.sx-crumbs a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.sx-artmeta { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; color: #c9dcf2; font-size: .9rem; }
.sx-artmeta .ck-i { width: 1.05em; height: 1.05em; }

#main_contact.sx-article > .wrapper { grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: auto 1fr; grid-template-areas: "main side" "foot side"; gap: 20px 28px; }
body.article-page #main_contact.sx-article .main_content { grid-area: main; padding: 36px 44px 40px; }
#main_contact.sx-article .main_content .sx-artnext { margin: 30px auto 0; }
#main_contact.sx-article .sidebar { grid-area: side; align-self: stretch; }
#main_contact.sx-article .sidebar > ul { display: flex; flex-direction: column; gap: 16px; height: 100%; }

.sx-article .wrap-text-content { width: auto; max-width: 720px; margin-inline: auto; font-size: 1.0625rem; line-height: 1.75; }
.sx-article .wrap-text-content { overflow-wrap: anywhere; }
.sx-article .wrap-text-content::after { content: ""; display: block; clear: both; }
.sx-article .wrap-text-content p { margin: 0 0 18px; }
.sx-article .wrap-text-content h2, .sx-article .wrap-text-content h2 * { color: var(--brand-deep) !important; font-size: 1.35rem !important; }
.sx-article .wrap-text-content h2 { margin: 34px 0 10px !important; scroll-margin-top: 16px; }
.sx-article .wrap-text-content > h2:first-child { margin-top: 0 !important; }
.sx-article .wrap-text-content .sx-lead { margin: 0 0 20px !important; padding-bottom: 18px; border-bottom: 1px solid var(--line); color: var(--ink) !important; font-size: 1.4rem !important; }
.sx-article .wrap-text-content ul { margin: 0 0 18px; padding-left: 22px; list-style: disc; }
.sx-article .wrap-text-content li { margin: 0 0 8px; padding: 0; background: none; }
.sx-article .wrap-text-content a { text-underline-offset: 2px; }

.sx-article .sx-fig { float: right; max-width: 42%; margin: 6px 0 14px 26px; }
.sx-article .sx-fig img { display: block; width: auto !important; max-width: 100%; height: auto; margin: 0; border-radius: 12px; box-shadow: var(--shadow); }
.sx-article .sx-fig--wide { float: none; max-width: 100%; margin: 0 0 22px; }

.sx-toc { margin: 0 0 26px; padding: 14px 18px; background: var(--brand-soft); border-radius: 12px; font-size: .95rem; line-height: 1.45; }
.sx-toc summary { color: var(--brand-deep); font-weight: 800; cursor: pointer; }
.sx-article .wrap-text-content .sx-toc ol { margin: 10px 0 2px; padding-left: 22px; list-style: decimal; }
.sx-article .wrap-text-content .sx-toc li { margin: 0 0 5px; break-inside: avoid; }
.sx-article .wrap-text-content .sx-toc a { text-decoration: none; }
.sx-article .wrap-text-content .sx-toc a:hover { text-decoration: underline; }
.sx-article .wrap-text-content .sx-toc--long ol { column-count: 2; column-gap: 32px; }

.sx-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; clear: both; margin: 8px 0 24px; }
.sx-pack { display: flex; flex-direction: column; gap: 8px; padding: 18px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); }
.sx-article .wrap-text-content .sx-pack img { display: block; width: auto; max-width: 100%; max-height: 130px; margin: 0 auto 4px; }
body.article-page #main_contact .main_content .wrap-text-content .sx-pack p { margin: 0; font-size: .92rem !important; line-height: 1.45 !important; text-align: center !important; }
.sx-article .wrap-text-content .sx-pack .ck-btn { align-self: center; margin-top: auto; padding: 9px 20px; color: var(--ink); font-size: .92rem; text-decoration: none; }
.sx-tablewrap { clear: both; overflow-x: auto; margin: 0 0 20px; }

.sx-artnext { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; align-items: center; clear: both; max-width: 720px; margin-top: 30px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none; transition: background-color .15s, border-color .15s; }
.sx-artnext:hover { background: var(--brand-soft); border-color: var(--brand); }
.sx-artnext__label { grid-column: 1; color: var(--muted); font-size: .82rem; font-weight: 600; }
.sx-artnext__title { grid-column: 1; color: var(--brand-deep); font-weight: 800; line-height: 1.35; }
.sx-artnext .ck-i { grid-column: 2; grid-row: 1 / span 2; color: var(--brand); transition: transform .15s; }
.sx-artnext:hover .ck-i { transform: translateX(3px); }

#main_contact.sx-article .sidebar li li.is-current { margin-inline: -10px !important; padding: 8px 10px !important; background: var(--brand-soft) !important; border-bottom-color: transparent !important; border-radius: 8px; }
#main_contact.sx-article .sidebar li li.is-current a { color: var(--brand-deep) !important; font-weight: 700; }

#main_contact.sx-article .sidebar .sx-sidecta { position: sticky; top: 16px; padding: 22px !important; background: var(--hero); border: 0 !important; color: #fff; }
.sx-sidecta__emblem { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 12px; background: #fff; border-radius: 50%; box-shadow: 0 4px 12px rgba(8, 26, 54, .25); }
.sx-sidecta__emblem img { display: block; width: 38px; height: auto; }
#main_contact.sx-article .sidebar .sx-sidecta h3 { margin-bottom: 6px !important; color: #fff !important; font-size: 1.2rem !important; }
#main_contact.sx-article .sidebar .sx-sidecta p { color: #e4eefa; }
#main_contact.sx-article .sidebar .sx-sidecta__trust { display: grid; gap: 7px; margin: 0 0 18px; }
#main_contact.sx-article .sidebar .sx-sidecta__trust li { display: flex; align-items: flex-start; gap: 8px; padding: 0 !important; border: 0 !important; color: #fff; font-size: .9rem; font-weight: 600; }
.sx-sidecta__trust .ck-i { width: 1.15em; height: 1.15em; color: #ffd08a; }

.sx-artfoot { grid-area: foot; align-self: start; padding: 20px 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
#main_contact .sx-artfoot h3 { float: none; width: auto; margin: 0 0 12px; padding: 0 !important; background: none; color: var(--ink) !important; font-size: 1rem; font-weight: 800; line-height: 1.3; text-transform: none !important; }
.sx-artfoot ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sx-artfoot li { margin: 0; padding: 0; background: none; }
.sx-artfoot li::before { display: none; }
.sx-artfoot a { display: inline-flex; padding: 7px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; color: var(--brand); font-size: .9rem; font-weight: 600; text-decoration: none; }
.sx-artfoot a:hover { background: var(--brand-soft); border-color: var(--brand); }

@media (max-width: 1000px) {
    #main_contact.sx-article > .wrapper { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "main" "side" "foot"; }
    #main_contact.sx-article .sidebar > ul { height: auto; }
    #main_contact.sx-article .sidebar .sx-sidecta { position: static; order: -1; }
}
@media (max-width: 640px) {
    body.article-page #main_contact.sx-article .main_content { padding: 22px 20px 24px; }
    .sx-article .wrap-text-content { font-size: 1rem; }
    .sx-article .sx-fig { float: none; max-width: 100%; margin: 0 0 18px; }
    .sx-article .sx-fig img { margin-inline: auto; }
    .sx-article .wrap-text-content .sx-toc--long ol { column-count: 1; }
    .sx-packs { grid-template-columns: minmax(0, 1fr); }
    .sx-artfoot { padding: 18px 20px; }
}

/* Official certificate gallery: search first, then one card per certificate */
.sx-artsub { max-width: 780px; margin: 10px 0 0; color: #e4eefa; font-size: 1rem; line-height: 1.55; }
body.article-page #main_contact.sx-gallery .main_content { padding: 0; background: none; border: 0; box-shadow: none; }
.sx-search { display: grid; gap: 8px; margin: 0 0 18px; padding: 18px 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.sx-search__label { color: var(--ink); font-size: .95rem; font-weight: 700; }
.sx-search__row { display: flex; gap: 10px; }
#main_contact .main_content input.sx-search__input { flex: 1; min-width: 0; margin: 0; }
#main_contact .main_content input[type="submit"].sx-search__btn { flex: none; width: auto; max-width: none; margin: 0; padding: 10px 26px; }
.sx-search__clear { justify-self: start; color: var(--brand); font-size: .9rem; font-weight: 600; }

table.sx-certs, table.sx-certs > tbody { display: block; width: auto; border: 0; background: none; }
table.sx-certs > tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
table.sx-certs > tbody > tr { display: block; background: none; }
table.sx-certs > tbody > tr:only-child, table.sx-certs > tbody > tr.sx-pager { grid-column: 1 / -1; }
table.sx-certs > tbody > tr > td { display: block; height: 100%; padding: 0; border: 0; background: none; }

.sx-cert { display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 18px 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.sx-cert__head { display: flex; align-items: center; gap: 12px; }
#main_contact.sx-gallery .main_content .sx-cert__emblem { display: block; flex: none; width: 46px; height: auto; margin: 0; }
.sx-cert__name { display: grid; gap: 2px; min-width: 0; }
.sx-cert__id { color: var(--brand-deep); font-size: .95rem; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; text-decoration: none; }
.sx-cert__id:hover { color: var(--brand); text-decoration: underline; }
.sx-cert__date { color: var(--muted); font-size: .82rem; line-height: 1.35; }
body.article-page #main_contact .main_content .sx-cert__desc { display: -webkit-box; margin: 0; overflow: hidden; color: var(--ink); font-size: .93rem; line-height: 1.55; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 5; }
.sx-cert__data { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; margin: 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: .85rem; line-height: 1.4; }
.sx-cert__data dt { color: var(--muted); font-weight: 600; }
.sx-cert__data dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.sx-cert__data .sx-cert__hash { font-family: Consolas, Menlo, monospace; font-size: .8rem; }
.sx-cert__foot { display: grid; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
body.article-page #main_contact .main_content .sx-cert__status { display: flex; gap: 7px; margin: 0; color: var(--ok); font-size: .82rem; font-weight: 600; line-height: 1.35; }
.sx-cert__status .ck-i { margin-top: 1px; }
.sx-cert__link { display: inline-flex; align-items: center; gap: 7px; color: var(--brand); font-size: .9rem; font-weight: 700; text-decoration: none; }
.sx-cert__link:hover { text-decoration: underline; }
.sx-cert__link .ck-i { transition: transform .15s; }
.sx-cert__link:hover .ck-i { transform: translateX(3px); }

.sx-noresult { padding: 28px 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); text-align: center; }
body.article-page #main_contact .main_content .sx-noresult p { margin: 0 0 16px; color: var(--ink); font-size: 1rem; }

.sx-pager td { padding: 0; }
table.sx-certs tr.sx-pager > td { padding-top: 8px; }
.sx-pager table, .sx-pager tbody { display: block; width: auto; }
.sx-pager tr { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.sx-pager tr td { display: block; }
.sx-pager a, .sx-pager span { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; color: var(--brand); font-size: .92rem; font-weight: 700; text-decoration: none; }
.sx-pager a:hover { background: var(--brand-soft); border-color: var(--brand); }
.sx-pager span { background: var(--brand); border-color: var(--brand); color: #fff; }

@media (max-width: 820px) {
    table.sx-certs > tbody { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
    .sx-search__row { flex-direction: column; }
    #main_contact .main_content input[type="submit"].sx-search__btn { width: 100%; }
}

/* Client logos: the legacy fixed width spilled out of the page between 1001px and 1125px. */
.sx-proof > * { min-width: 0; }
.sx-logos.portfolio_logo_area { width: auto; max-width: 100%; }

/* Ad landing pages */
.sx-landing { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.sx-landing__title { margin: 0 0 16px; color: var(--ink); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); font-weight: 800; line-height: 1.25; }
.sx-landing__title span { color: var(--accent-deep); }
.sx-landing__video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0b1b30; border-radius: var(--radius); box-shadow: var(--shadow); }
.sx-landing__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sx-landing__side { display: grid; gap: 14px; padding: 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.sx-landing__trust { display: grid; gap: 8px; margin: 0; color: var(--ink); }
@media (max-width: 1000px) { .sx-landing { grid-template-columns: minmax(0, 1fr); } }

.sx-landing__trust li { display: flex; align-items: center; gap: 8px; font-size: .92rem; font-weight: 600; }
.sx-landing__trust .ck-i { color: var(--ok); }

/* The French menu is longer: on the one-row header the banner and side panels carry the call to action. */
@media (min-width: 1280px) and (max-height: 879.98px) { .ck-header__cta { display: none; } }

/* White version of the main logo, sharp at this size. */
.ck-footer__brand img { width: 190px; }

/* This site's logo is wider than the one the header was sized for. */
.ck-logo img { width: 250px; }
@media (min-width: 1280px) and (min-height: 880px) { .ck-logo img { width: 345px; } }
@media (max-width: 640px) { .ck-logo img { width: 215px; } }
@media (max-width: 400px) { .ck-logo img { width: 175px; } }
@media (max-width: 359.98px) { .ck-logo img { width: 135px; } }

/* A link block the CMS leaves empty is not shown. */
.sx-links > li:not(:has(li)) { display: none; }