/* Shared editorial presentation. Typography follows the existing home page.
 * Heading 32/28, lead 18/24, body 16/18 (mobile/desktop), Montserrat.
 * English ordinary headings use Title Case. Designated hero/case roles use
 * uppercase on every language, as required by the final customer review.
 */
.ab-editorial {
    --ab-heading: 32px;
    --ab-lead: 18px;
    --ab-copy: 16px;
    --ab-heading-case: none;
    --ab-performance-case: uppercase;
}
html[lang^="en"] .ab-editorial {
    --ab-heading-case: capitalize;
}
@media (min-width: 1200px) {
    .ab-editorial { --ab-heading: 28px; --ab-lead: 24px; --ab-copy: 18px; }
}
.ab-editorial :is(h1, h2, .about-values__title, .m-why__slide-heading) {
    font-family: Montserrat, sans-serif;
    /* main2.0.css has legacy mobile !important sizes; override only this role. */
    font-size: var(--ab-heading) !important;
    font-weight: 900;
    line-height: 1.65;
    text-transform: var(--ab-heading-case);
}
.ab-editorial :is(h1, h2) :is(span, b, strong) {
    font-size: inherit;
    line-height: inherit;
    text-align: inherit;
}
/* Page heroes follow the approved Main type role. Performance has its own
 * explicitly different role below; ordinary section headings stay separate.
 * Keep the existing media until the designer supplies its replacement. */
.ab-editorial h1:not(.visually-hidden):not([hidden]) {
    font-size: clamp(23px, calc(5vw - 15px), 45px) !important;
    font-weight: 700;
    line-height: 1.51;
    text-align: center;
}
.ab-editorial .m-intro {
    padding: 56px 0 64px;
}
.ab-editorial .m-intro .m-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
}
.ab-editorial .m-intro__text-block {
    width: 100%;
    min-width: 0;
    margin: 0;
    text-align: center;
}
.ab-editorial.page-template-mainpage h1.m-intro__heading {
    max-width: 1043.5px;
    margin: 0 auto 24px;
    color: #111;
    font-size: clamp(23px, calc(5vw - 15px), 45px) !important;
    font-weight: 700;
    line-height: 1.51;
    text-transform: var(--ab-performance-case);
}
.ab-editorial .m-intro__heading .colored { color: inherit; }
.ab-editorial .m-intro p.m-intro__text {
    max-width: 700px;
    margin: 0 auto 32px;
    font-weight: 400;
    line-height: 1.45;
}
/* Main CTA text2600-747/2640-500 and pill2600-746/2640-499.
 * Translated labels can enlarge the pill; do not hard-code its copy/height. */
.ab-editorial.page-template-mainpage .m-intro__btn {
    max-width: 100%;
    min-width: min(248.31px, 100%);
    min-height: 63.83px;
    padding: 14.305px 28px;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.51;
}
.ab-editorial .m-intro__video-block {
    width: min(100%, 456px);
    max-width: 456px;
    margin: 0 auto;
}
.ab-editorial .m-intro__video {
    width: 100%;
    height: auto;
    max-height: none;
    right: auto;
    margin: 0 auto;
}
@media (max-width: 759px) {
    .ab-editorial .m-intro { padding: 48px 0; }
    .ab-editorial .m-intro .m-container { gap: 32px; padding: 0; }
    .ab-editorial.page-template-mainpage h1.m-intro__heading { font-size: 23px !important; text-wrap: balance; }
    .ab-editorial .m-intro p.m-intro__text { max-width: 360px; }
    .ab-editorial .m-intro__video-block { max-width: 320px; }
    .ab-editorial.page-template-mainpage .m-intro__btn {
        min-width: min(166.07px, 100%);
        /* Source pill42.69px; retain a44px minimum pointer target. */
        min-height: 44px;
        padding: 9.24px 20px;
        font-size: 14.71px;
    }
}
/* Performance Hero: independent1920/320 source composition. Interpolate
 * type and whitespace to the next desktop endpoint instead of applying the
 * full86px canvas font at1200px. Native translated text keeps natural height.
 * H1's desktop Figma text box includes a trailing empty line: retain the two
 * actual content breaks, and account for the visible lead offset in the gap,
 * not by forcing a366px height or injecting a blank paragraph. */
.ab-editorial.page-template-performance .pm-intro {
    --ab-pm-header-flow: 64px;
    --ab-pm-title-top: clamp(120.76px, calc(23.40862069vw - 57.14551724px), 392.3px);
    --ab-pm-title-font: clamp(23px, calc(5.43103448vw - 18.27586207px), 86px);
    --ab-pm-title-gap: clamp(51.85px, calc(2.40862069vw + 33.54448276px), 79.79px);
    --ab-pm-lead-font: clamp(15px, calc(1.81034483vw + 1.24137931px), 36px);
    --ab-pm-lead-width: clamp(233.51px, calc(37.46551724vw - 51.22793103px), 668.11px);
    padding: calc(var(--ab-pm-title-top) - var(--ab-pm-header-flow)) 20px clamp(36.04px, calc(17.72413793vw - 98.66344828px), 241.64px);
}
@media (min-width: 1200px) {
    .ab-editorial.page-template-performance .pm-intro { --ab-pm-header-flow: 59.9px; }
}
@media (min-width: 760px) {
    /* Separate baked desktop crop2454-4912,1920x1081.06. Keep its source
     * maximum with the86px title endpoint; a wider monitor must not move
     * the decorative center down while the title stays in the same place. */
    .ab-editorial.page-template-performance .pm-intro { isolation: isolate; }
    .ab-editorial.page-template-performance .pm-intro::before {
        width: min(100%, 1920px);
        height: auto;
        aspect-ratio: 1920 / 1081.06;
        top: calc(0px - var(--ab-pm-header-flow));
        left: max(0px, calc(50% - 960px));
        background: url('../img/editorial/performance-20261012/hero-desktop.webp') center / 100% 100% no-repeat;
        -webkit-filter: none;
        filter: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        mix-blend-mode: multiply;
        pointer-events: none;
    }
    .ab-editorial.page-template-performance .pm-intro::after { display: none; }
}
.ab-editorial.page-template-performance h1.pm-intro__heading {
    display: block;
    width: 100%;
    max-width: min(100%, 72.109375vw, 1384.5px);
    margin: 0 auto var(--ab-pm-title-gap);
    color: #111;
    text-align: center;
    text-transform: var(--ab-performance-case);
    font-size: var(--ab-pm-title-font) !important;
    font-weight: 600;
    line-height: 1.22;
}
.ab-editorial.page-template-performance .ab-performance-heading-break { display: initial; }
.ab-editorial.page-template-performance h2.pm-form__heading {
    width: 100%;
    max-width: 754.93px;
    padding: 0;
    font-size: clamp(23px, calc(5vw - 15px), 45px) !important;
    font-weight: 700;
    line-height: 1.51;
    text-align: center;
    text-transform: var(--ab-performance-case);
}
.ab-editorial.page-template-performance .pm-intro__highlight {
    display: inline;
    padding: 0;
    background: none;
    box-shadow: none;
}
/* Performance has an independent hero lead: fresh Figma desktop36px/148%,
 * mobile15px/148%. Do not flatten it into Main's24px ordinary lead role. */
.ab-editorial.page-template-performance .pm-intro p.pm-intro__text {
    max-width: min(100%, var(--ab-pm-lead-width));
    margin: 0 auto;
    color: #111;
    text-align: center;
    font-size: var(--ab-pm-lead-font);
    font-weight: 400;
    line-height: 1.48;
}
@media (max-width: 759px) {
    /* Figma image35 export2672-1435 already includes its rotation/crop.
     * Canvas top18.92 is above the Hero's normal header flow. The23px
     * mobile title keeps this320px decoration centered instead of scaling
     * it down into Traffic on wider phones. Native text stays independent. */
    .ab-editorial.page-template-performance .pm-intro { isolation: isolate; }
    .ab-editorial.page-template-performance .pm-intro::before {
        width: min(100%, 320px);
        height: auto;
        aspect-ratio: 320 / 331.98;
        top: calc(18.92px - var(--ab-pm-header-flow));
        left: max(0px, calc(50% - 160px));
        background: url('../img/editorial/performance-20261012/hero-mobile.png') center / 100% 100% no-repeat;
        -webkit-filter: none;
        filter: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        mix-blend-mode: multiply;
        pointer-events: none;
    }
    .ab-editorial.page-template-performance .pm-intro::after { display: none; }
    .ab-editorial.page-template-performance h1.pm-intro__heading { max-width: min(100%, calc(100vw - 86.49px)); }
    .ab-editorial.page-template-performance h2.pm-form__heading { max-width: min(100%, calc(100vw - 60.54px)); }
    /* The approved mobile CTA has no floating legacy ornaments. Their fixed
     * negative offsets otherwise cover translated headings and form fields. */
    .ab-editorial.page-template-performance .pm-form__img-block { display: none; }
    .ab-editorial.page-template-performance .pm-intro p.pm-intro__text { max-width: min(100%, 233.51px); font-size: 15px; }
}
.ab-editorial .pm-intro__heading .colored { display: inline; }
.ab-editorial .clients-page :is(.title, .c-form-title):not(h1) { font-size: var(--ab-heading); font-weight: 900; line-height: 1.65; }
.ab-editorial .clients-page :is(.title, .c-form-title) { text-transform: var(--ab-heading-case); }
.ab-editorial .clients-page .title span { font-size: inherit; line-height: inherit; }
/* A linked sentence is inline text, not a flex row of separate words/anchors. */
.ab-editorial .clients .title-descr.seo-context { display: block; margin-top: 16px; }
.seo-context a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
.ab-editorial h3:not(.visually-hidden) { font-size: var(--ab-lead); font-weight: 900; line-height: 1.65; text-transform: var(--ab-heading-case); }
.ab-editorial :is(.m-intro__text, .pm-intro__text, .price-intro__subtitle, .clients .title-descr, .t-intro__text, .t-why__subheading, .about-hero__subtitle, .faq-form__text) {
    font-family: Montserrat, sans-serif;
    font-size: var(--ab-lead);
    font-weight: 600;
    line-height: 1.65;
}
/* Immediate hero leads share weight/color, not section captions or sizes. */
.ab-editorial :is(.m-intro__text, .pm-intro__text, .price-intro__subtitle, .clients .title-descr, .t-intro__text, .about-hero__subtitle) {
    font-weight: 400;
    color: #111;
}
.ab-editorial :is(.m-why__slide-text, .m-why__hook-text, .pm-form__text, .price-hooks__text, .price-hooks__item-text, .price-how__text, .price-form__text, .c-form-descr, .t-service__text, .t-why__text, .t-trust__text, .about-hero__text, .about-steps__item p, .about-values__list p, .about-faq__answer, .vacancy-text, .vacancy-about__item-text, .c-form__text, .c-form__contacts, .c-faq__text, .faq__text) {
    font-family: Montserrat, sans-serif;
    font-size: var(--ab-copy);
    font-weight: 600;
    line-height: 1.65;
}
.ab-editorial :is(.pm-form__heading, .pm-form__text, .price-intro__heading, .price-intro__subtitle, .price-hooks__heading, .price-hooks__text, .price-how__heading, .price-form__heading, .price-form__text, .t-intro__heading, .t-intro__text, .t-form__heading, .t-form .t-service__text, .vacancy-about__heading, .vacancy-vacancies__heading, .vacancy-vacancies__text, .faq__heading, .faq-form__heading, .faq-form__text, .c-intro__heading) {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.ab-editorial :is(.about-hero__title, .about-hero__subtitle, .about-hero__text) {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.ab-editorial :is(.pm-intro__heading, .price-intro__heading, .clients .title, .t-intro__heading, .about-hero__title, .vacancy-team__heading, .faq__heading, .c-intro__heading) {
    margin-bottom: 24px;
}
.ab-editorial :is(.pm-form__heading, .price-form__heading, .c-form-title, .t-form__heading, .faq-form__heading) { margin-bottom: 24px; }
.ab-editorial :is(.pm-form__text, .price-form__text, .t-form .t-service__text, .faq-form__text) { margin-bottom: 32px; }
.ab-editorial .price-intro__subtitle { max-width: 900px; margin-bottom: 48px; }
.ab-editorial .price-intro__heading .colored { display: inline; }
.ab-editorial .price-hooks__items-block { align-items: flex-start; }
.ab-editorial .price-hooks__item { text-align: center; gap: 20px; }
.ab-editorial .price-hooks__item img { width: 80px; height: 80px; max-height: none; object-fit: contain; flex: 0 0 80px; margin: 0; }
@media (min-width: 600px) {
    .ab-editorial .price-hooks__item { display: flex; flex-direction: column; }
}
@media (min-width: 1200px) {
    .ab-editorial .price-hooks__item img { width: 110px; height: 110px; flex-basis: 110px; }
}
.ab-editorial .price-how__heading { max-width: none; margin-bottom: 48px; }
.ab-editorial .price-how__heading .colored { display: inline; text-align: inherit; }
.ab-editorial :is(.price-intro__card-heading, .price-how__item-heading, .price-how__item-lead, .faq__item-heading, .c-faq__item-heading, .about-faq__question) { font-size: var(--ab-lead); line-height: 1.65; }
.ab-editorial :is(.price-intro__card-heading, .price-how__item-heading, .price-how__item-lead) { text-transform: var(--ab-heading-case); }
.ab-editorial :is(.price-intro__card-lead, .price-intro__card-text, .price-how__item-text, .pm-srcs__text, .pm-srcs__slider-text, .pm-service__text, .about-team__quotes blockquote, .about-values__block p, .clients-page .customers-text) { font-size: var(--ab-copy); line-height: 1.65; }
.ab-editorial .t-why__slider-text { font-size: var(--ab-copy); font-weight: 600; line-height: 1.65; }

/* The existing flame list now has the same alignment in all five slides. */
.ab-editorial .m-why__slide-item { align-items: flex-start; }
.ab-editorial .m-why__slide-heading { margin-right: 0; }
.ab-editorial .m-why__slide-list { min-width: 0; }
.ab-editorial .m-why__slide-list-item { padding-left: 64px; margin-bottom: 24px; }
.ab-editorial .m-why__slide-list-item::before { width: 40px; height: 40px; top: 0; }
.ab-editorial .m-why__slide-lead { font-size: var(--ab-lead); font-weight: 900; line-height: 1.65; margin-bottom: 8px; }
.ab-editorial .m-why__slide-list-intro { margin-bottom: 24px; }
.ab-editorial .m-why__hook-item { display: flex; flex-direction: column; align-items: center; }
.ab-editorial .m-why__hook-lead { font-size: var(--ab-lead); line-height: 1.65; margin-bottom: 12px; }
.ab-editorial .m-why__brand-heading,
.ab-editorial .m-why__brand-slider { display: none; }
.ab-editorial .m-trust__brands-item { min-width: 0; }
@media (min-width: 990px) {
    /* Reserve two title lines so translated categories share the same logo rows.
       Trade one line of the old 55px gap for this space; do not enlarge the block. */
    .ab-editorial .m-trust__brands-item-heading {
        min-height: 3.3em;
        margin-bottom: calc(55px - 1.65em);
    }
    /* The slider already supplies the gap before its link. The final logo
       must not add the old inter-row margin a second time. */
    .ab-editorial .m-trust__brands-item > .m-trust-brands-block:last-child {
        margin-bottom: 0;
    }
    /* Optical sizing for the two existing tall/padded approved logos, not
     * asset replacement or recoloring. Shared minimum keeps rows aligned. */
    .ab-editorial.page-template-mainpage .m-trust-brands-block { min-height: 80px; }
    .ab-editorial.page-template-mainpage .m-trust__brand-img[src$="/img/main/new/bigo.png"] { height: 72px; max-height: 72px; }
    .ab-editorial.page-template-mainpage .m-trust__brand-img[src$="/img/main/new/traveloka-small.png"] { height: 80px; max-height: 80px; }
}
.ab-editorial .m-trust-brands-block {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 56px;
}
.ab-editorial .m-trust__brand-img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(100%, 190px);
    max-height: 48px;
    object-fit: contain;
}
.ab-editorial .m-trust-brands-block--labelled { gap: 8px; }
.ab-editorial .m-trust-brands-block--labelled .m-trust__brand-img {
    width: 40px;
    height: 40px;
    margin: 0;
}
.ab-editorial .m-trust__brand-label {
    color: #202020;
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
}
@media (min-width: 990px) {
    .ab-editorial .m-why__slide-heading { flex: 0 0 35%; max-width: 35%; }
    .ab-editorial .m-why__slide-list { flex: 0 0 55%; max-width: 55%; }
}

/* Performance: use the approved light cards and align content across slides. */
.ab-editorial .pm-srcs { background: #fff; padding: 64px 0; }
.ab-editorial .pm-srcs__heading { color: #111; text-align: center; margin-bottom: 32px; }
.ab-editorial .pm-srcs__slider-item {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 420px;
    padding: 32px 24px;
    text-align: left;
    background: #f7f7fb;
    border-radius: 24px;
}
.ab-editorial .pm-srcs__slider-item--programmatic,
.ab-editorial .pm-srcs__slider-item--direct { background: #fff6eb; }
.ab-editorial h3.pm-srcs__slider-heading {
    color: #ff8200;
    font-size: 18px;
    line-height: 1.35;
    margin-bottom: 24px;
    min-height: 4.05em;
}
.ab-editorial .pm-srcs__slider-heading::after { display: none; }
.ab-editorial .pm-srcs__slider-lead {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    min-height: 4.5em;
    margin-bottom: 12px;
}
.ab-editorial .pm-srcs__slider-text {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    white-space: pre-line;
}
.ab-editorial .pm-srcs__slider-text::before {
    content: '';
    display: block;
    width: 42px;
    height: 42px;
    margin-bottom: 16px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.ab-editorial .pm-srcs__slider-item--social .pm-srcs__slider-text::before { background-image: url('../img/what/performance-traffic-social.svg'); }
.ab-editorial .pm-srcs__slider-item--programmatic .pm-srcs__slider-text::before { background-image: url('../img/what/performance-traffic-programmatic.svg'); }
.ab-editorial .pm-srcs__slider-item--search .pm-srcs__slider-text::before { background-image: url('../img/what/performance-traffic-search.svg'); }
.ab-editorial .pm-srcs__slider-item--direct .pm-srcs__slider-text::before { background-image: url('../img/what/performance-traffic-direct.svg'); }
/* Performance source transition: Figma 2453-4801/4802 (desktop) and
 * 2672-1262/1263 (mobile). This is a semibold lead with a secondary link,
 * not ordinary body copy followed by a large CTA. Keep native CMS text/URL. */
.ab-editorial.page-template-performance p.pm-srcs__text {
    color: #0b132a;
    font-size: 24px;
    font-weight: 600;
    line-height: 29.16px;
    margin: 0 auto 4px;
}
.ab-editorial.page-template-performance a.pm-srcs__link {
    display: inline-block;
    max-width: 100%;
    color: #728491;
    font-size: 18px;
    font-weight: 400;
    line-height: 29.16px;
    border-bottom: 0;
    float: none;
    text-decoration: none;
    text-underline-offset: 0.2em;
}
.ab-editorial.page-template-performance a.pm-srcs__link:is(:hover, :focus-visible) {
    text-decoration: underline;
}
@media (max-width: 759px) {
    .ab-editorial.page-template-performance p.pm-srcs__text {
        max-width: 222.42px;
        font-size: 18px;
        line-height: 26px;
    }
    .ab-editorial.page-template-performance a.pm-srcs__link { font-size: 11px; }
}
/* End Performance source transition. */
.ab-editorial .pm-srcs__slider .slick-dots .slick-active button { background: #ff8200; }
@media (max-width: 759px) {
    .ab-editorial .pm-srcs__slider-item { min-height: 385px; }
    .ab-editorial h3.pm-srcs__slider-heading,
    .ab-editorial .pm-srcs__slider-lead { min-height: 0; }
}

/* The approved Verticals layout is a compact panel, not the legacy emoji list. */
.ab-editorial .pm-offer { padding: 48px 0 64px; }
.ab-editorial .pm-offer__heading {
    max-width: none;
    margin: 0 0 28px;
    text-align: center;
}
.ab-editorial .pm-offer__heading .colored {
    display: inline;
    color: #111;
    text-align: inherit;
}
.ab-editorial .pm-offer__items-wrapper { display: block; padding: 0; }
.ab-editorial .pm-offer__list {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: center;
    align-items: center;
    gap: 28px 18%;
    max-width: 1000px;
    min-width: 0;
    padding: 80px 12%;
    border: 0;
    border-radius: 48px;
    background: #f7f7fb;
    box-shadow: none;
}
.ab-editorial .pm-offer__list::before {
    content: '';
    display: block !important;
    position: absolute;
    z-index: 0;
    width: min(100%, 1035.76px);
    height: auto;
    aspect-ratio: 1;
    left: 50%;
    top: 50%;
    /* Figma's signed rotation is the opposite of CSS clockwise rotation. */
    transform: translate(-50%, -50%) rotate(24.99deg);
    background: url('../img/what/performance-verticals-artwork.webp') center / contain no-repeat;
    mix-blend-mode: multiply;
    pointer-events: none;
}
.ab-editorial .pm-offer__item {
    position: relative;
    z-index: 1;
    display: block;
    flex: none;
    width: fit-content;
    max-width: 100%;
    margin: 0;
    padding: 10px 24px;
    border-radius: 99px;
    background: #fff;
    color: #111;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
    text-align: center;
}
.ab-editorial .pm-offer__item::before,
.ab-editorial .pm-offer__icon,
.ab-editorial .pm-offer__item--more { display: none; }
.ab-editorial .pm-offer__item:nth-child(1) { grid-area: 1 / 1; }
.ab-editorial .pm-offer__item:nth-child(6) { grid-area: 1 / 2; }
.ab-editorial .pm-offer__item:nth-child(5) { grid-area: 2 / 1; }
.ab-editorial .pm-offer__item:nth-child(3) { grid-area: 2 / 2; }
.ab-editorial .pm-offer__item:nth-child(2) { grid-area: 3 / 1; }
.ab-editorial .pm-offer__item:nth-child(4) { grid-area: 3 / 2; }
@media (min-width: 760px) {
    .ab-editorial .pm-offer .pm-container {
        padding-top: 56px;
        border-radius: 48px;
        background: #f7f7fb;
        overflow: hidden;
    }
    .ab-editorial .pm-offer__list {
        border-radius: 0;
        background: transparent;
        min-height: clamp(520px, 53vw, 760px);
        align-content: space-between;
    }
}
@media (max-width: 759px) {
    .ab-editorial .pm-offer { padding: 40px 0 56px; }
    .ab-editorial .pm-offer .pm-container {
        padding-top: 24px;
        border-radius: 28px;
        background: #f7f7fb;
        overflow: hidden;
    }
    .ab-editorial .pm-offer__heading { margin-bottom: 0; }
    .ab-editorial .pm-offer__list {
        min-height: 490px;
        /* The panel, not the inset list, clips the decorative source art. */
        overflow: visible;
        align-content: space-between;
        gap: 22px 12px;
        padding: 72px 0 76px;
        border-radius: 0;
        background: transparent;
    }
    .ab-editorial .pm-offer__list::before {
        width: 501.77px;
        max-width: none;
        top: calc(50% + 20px);
        transform: translate(-50%, -50%) rotate(38.85deg);
    }
    .ab-editorial .pm-offer__item {
        width: 100%;
        padding: 10px 12px;
        font-size: 13px;
    }
}

/* Reserve space for the existing illustration instead of letting it cover text. */
.ab-editorial .clients-page .c-form-wrapper { align-items: stretch; gap: 32px; }
.ab-editorial .clients-page .c-form-block { flex: 1 1 0; min-width: 0; max-width: none; margin-right: 0; padding-bottom: 280px; }
.ab-editorial .clients-page .c-form-wrapper > .wpcf7 { flex: 1 1 0; min-width: 0; }
.ab-editorial .clients-page .c-form-title { margin-right: 0; }
.ab-editorial .clients-page .c-form-wrapper::before { width: 240px; height: 280px; max-height: none; left: 60px; bottom: 0; }
.ab-editorial .clients-tab.partners .part-item--wide img { max-width: 105px; max-height: 64px; }
.ab-editorial .clients-tab.partners .part-item--foodpanda img { max-width: 135px; max-height: 88px; }
.ab-editorial .clients-tab.partners .part-item--traveloka img {
    box-sizing: border-box;
    width: 60px;
    height: 60px;
    padding: 6px;
    border-radius: 12px;
    background: #2d83df;
}
@media (min-width: 1200px) {
    /* All five native partner categories can use the existing container;
     * do not strand the last filter under a legacy680px cap. */
    .ab-editorial.page-template-clients .clients-tab.partners .tab > .tabs { max-width: 100%; }
}
@media (max-width: 989px) {
    .ab-editorial .clients-page .c-form-wrapper { flex-direction: column; padding-bottom: 300px; }
    .ab-editorial .clients-page .c-form-block { padding-bottom: 0; margin-bottom: 0; }
    .ab-editorial .clients-page .c-form-wrapper::before { left: auto; right: 12px; }
}
@media (max-width: 767px) {
    .ab-editorial .clients-tab.partners .part-item img { transform: translateY(-10px); }
    .ab-editorial .clients-tab.partners .part-item--wide img { max-width: 85px; max-height: 48px; }
    .ab-editorial .clients-tab.partners .part-item--foodpanda img { max-width: 95px; max-height: 64px; }
    .ab-editorial .clients-tab.partners .part-item--traveloka img { width: 44px; height: 44px; }
    .ab-editorial .clients-tab.partners .part-item .name {
        left: 3px;
        right: 3px;
        bottom: 5px;
        opacity: 1;
        font-size: 10px;
        line-height: 1.1;
        overflow-wrap: anywhere;
    }
}
.ab-editorial .vacancy-about__heading span,
.ab-editorial .vacancy-vacancies__heading span { text-align: center; }
.ab-editorial .vacancy-about__heading-text--left { padding-left: 0; }
.ab-editorial .vacancy-about__item-lead { font-size: var(--ab-lead); line-height: 1.65; font-weight: 900; text-transform: var(--ab-heading-case); }
.ab-editorial .vacancy-about__wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
.ab-editorial .vacancy-about__item { width: auto; min-width: 0; margin: 0; }
.ab-editorial .vacancy-about__icon { width: 80px; height: 80px; max-height: none; object-fit: contain; object-position: left center; margin: 0 0 16px; }
.ab-editorial .vacancy-about__item-lead { min-height: 0; margin: 0 0 16px; overflow-wrap: anywhere; }
.ab-editorial .vacancy-about__item-text { max-width: none; }
/* Align the real content of each row, not a fixed two/three-line title box. */
@supports (grid-template-rows: subgrid) {
    .ab-editorial .vacancy-about__item {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 3;
        row-gap: 16px;
    }
    .ab-editorial .vacancy-about__icon,
    .ab-editorial .vacancy-about__item-lead { margin: 0; }
}
@media (max-width: 599px) {
    /* The last benefit no longer supplies a bottom margin after the grid repair. */
    .ab-editorial .vacancy-vacancies { padding-top: 48px; }
}
@media (max-width: 399px) {
    .ab-editorial .vacancy-about__wrapper { grid-template-columns: minmax(0, 1fr); }
    .ab-editorial .vacancy-about__item-lead { min-height: 0; overflow-wrap: normal; }
}
@media (min-width: 760px) {
    .ab-editorial .vacancy-about__wrapper { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
}

/* Contacts: both columns stay inside the orange section at every breakpoint. */
.ab-editorial .c-main .c-form { background: #ff8200; padding: 48px 24px; }
.ab-editorial .c-main .c-form__container { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
.ab-editorial .c-main .c-form__text-block { max-width: none; margin: 0; padding: 0; }
.ab-editorial .c-main .c-form__form { margin-top: 0; min-width: 0; width: 100%; }
.ab-editorial .c-main .c-form__container > .wpcf7 { min-width: 0; width: 100%; }
.ab-editorial .c-form__contact-row { margin: 0 0 24px; }
.ab-editorial .c-form__contact-row > p { margin: 0 0 8px; font-size: var(--ab-copy); font-weight: 600; }
.ab-editorial .c-form__contacts--mail { margin: 0; overflow-wrap: anywhere; }
.ab-editorial .c-form__contacts--address { margin: 0; }
.ab-editorial .c-main .c-faq { padding-bottom: 32px; }
.ab-editorial .c-main .c-faq__btn-link:last-of-type { margin-bottom: 0; }
.ab-editorial .c-main .c-faq__btn-link { min-width: min(300px, 100%); max-width: 100%; box-sizing: border-box; }
.ab-editorial .c-main { margin-bottom: 0; padding-bottom: 0; }
@media (min-width: 990px) {
    .ab-editorial .c-main .c-form { padding: 64px max(32px, calc((100vw - 1240px) / 2)); }
    .ab-editorial .c-main .c-form__container { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
}

/* Shared narrow header sizing lives in responsive-fixes.css for all templates. */

/* The native Payment Models click handler writes inline colors. Keep the
 * existing orange hover/selected feedback after any step has been clicked. */
@media (min-width: 600px) {
    .ab-editorial.page-template-price .price-how__btn:is(:hover, :focus-visible, .price-how__btn--active) {
        color: #ff8200 !important;
    }
}

/* Cases: one responsive card slider, using the original case artwork and copy.
 * Reset both dimensions: uploads carry intrinsic width/height attributes, and
 * changing just one CSS dimension distorted the old logos and phone graphics.
 */
.ab-editorial .m-cases :is(.m-cases__img, .m-cases__logo, .m-cases__text-logo) {
    width: auto;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}
.ab-editorial .m-cases--editorial { padding-bottom: 64px; }
.ab-editorial .m-cases--editorial .m-container {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 1280px;
    padding: 0 64px;
    margin: 0 auto;
}
.ab-editorial.page-template-mainpage .m-cases--editorial .m-cases__heading {
    margin: 0 0 24px;
    font-size: clamp(23px, calc(2.7273vw + 2.2727px), 35px) !important;
    font-weight: 700;
    line-height: 1.51;
    text-align: center;
    text-transform: var(--ab-performance-case);
}
.ab-editorial .m-cases--editorial .m-cases__slider { display: none; }
.ab-editorial .m-cases--editorial .m-cases__slider-wrapper { display: block; margin: 0; }
.ab-editorial .m-cases--editorial .m-cases__info-slider { display: block; min-width: 0; width: 100%; }
.ab-editorial .m-cases--editorial .slick-list { border-radius: 40px; }
.ab-editorial .m-cases--editorial .slick-track { display: flex; align-items: stretch; }
.ab-editorial .m-cases--editorial .ab-case-card {
    box-sizing: border-box;
    display: grid !important;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 48px;
    min-width: 0;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 48px;
    border-radius: 40px;
    background: #f7f7fb;
    float: none;
    flex: 0 0 auto;
}
.ab-editorial .m-cases--editorial .ab-case-card > .m-cases__img {
    display: block;
    max-width: 100%;
    max-height: 460px;
    margin: 0 auto;
    justify-self: center;
}
.ab-editorial .m-cases--editorial .m-cases__text-block {
    min-width: 0;
    margin: 0;
    order: initial;
}
.ab-editorial .m-cases--editorial .m-cases__heading-block {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin: 0 0 24px;
}
.ab-editorial .m-cases--editorial .m-cases__heading-logo-block {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    padding: 12px;
    margin: 0;
    border-radius: 16px;
    background: #fff;
    box-shadow: none;
}
.ab-editorial .m-cases--editorial .m-cases__text-logo {
    display: block;
    max-width: 100%;
    max-height: 48px;
}
.ab-editorial .m-cases--editorial .m-cases__heading-text-block {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    order: initial;
}
.ab-editorial .m-cases--editorial .m-heading__info {
    margin: 0 0 6px;
    color: #62626c;
    font-size: 14px;
    line-height: 1.4;
    order: -1;
}
.ab-editorial .m-cases--editorial .m-heading__name {
    margin: 0;
    color: #111;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
}
.ab-editorial .m-cases--editorial .ab-case-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.ab-editorial .m-cases--editorial .ab-case-metric {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 20px;
    border-radius: 20px;
    background: #fff;
}
.ab-editorial .m-cases--editorial .ab-case-metric .m-heading__num-text {
    margin: 0;
    color: #62626c;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    text-transform: uppercase;
    order: -1;
}
.ab-editorial .m-cases--editorial .ab-case-metric .m-cases__num {
    margin: 0;
    color: #111;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.ab-editorial .m-cases--editorial .ab-case-channel {
    display: table;
    max-width: 100%;
    margin: 0;
    padding: 10px 20px;
    border-radius: 99px;
    color: #111;
    background: #ff9b22;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}
.ab-editorial .m-cases--editorial .m-cases__info-slider > .slick-arrow {
    top: 50%;
    bottom: auto;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    background-color: #fff;
    border: 1px solid #d8dee7;
}
.ab-editorial .m-cases--editorial .m-cases__info-slider > .slick-prev { left: -52px; }
.ab-editorial .m-cases--editorial .m-cases__info-slider > .slick-next { right: -52px; }
.ab-editorial .m-cases--editorial .m-cases__info-slider > .slick-arrow:focus-visible {
    outline: 3px solid #ff8200;
    outline-offset: 3px;
}
@media (min-width: 990px) {
    .ab-editorial.page-template-mainpage .m-cases--editorial .m-cases__heading {
        position: absolute;
        top: 40px;
        left: 52%;
        right: 112px;
        z-index: 2;
        margin: 0;
        text-align: right;
    }
    .ab-editorial .m-cases--editorial .m-cases__text-block { padding-top: 80px; }
}
@media (max-width: 989px) {
    .ab-editorial .m-cases--editorial .ab-case-card {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        padding: 32px;
    }
    .ab-editorial .m-cases--editorial .ab-case-card > .m-cases__img { max-height: 320px; }
}
/* The intermediate one-column layout needs a real image box before native
 * lazy loading starts. Auto/auto collapses to zero until the image decodes,
 * pushing the following content down by 320px. Contain preserves the artwork. */
@media (min-width: 600px) and (max-width: 989px) {
    .ab-editorial.page-template-mainpage .m-cases--editorial .ab-case-card > .m-cases__img {
        width: 100%;
        height: 320px;
        object-fit: contain;
    }
}
@media (max-width: 599px) {
    .ab-editorial .m-cases--editorial .m-container { padding: 0 20px; }
    .ab-editorial.page-template-mainpage .m-cases--editorial .m-cases__heading { font-size: 23px !important; }
    .ab-editorial .m-cases--editorial .slick-list { border-radius: 28px; }
    .ab-editorial .m-cases--editorial .ab-case-card { padding: 28px 20px; border-radius: 28px; }
    .ab-editorial .m-cases--editorial .ab-case-card > .m-cases__img { max-height: 280px; }
    .ab-editorial .m-cases--editorial .m-cases__heading-logo-block { flex-basis: 56px; width: 56px; height: 56px; }
    .ab-editorial .m-cases--editorial .m-heading__name { font-size: 24px; }
    .ab-editorial .m-cases--editorial .ab-case-metrics { gap: 12px; }
    .ab-editorial .m-cases--editorial .ab-case-metric { padding: 16px 12px; border-radius: 16px; }
    .ab-editorial .m-cases--editorial .ab-case-metric .m-cases__num { font-size: 22px; }
    .ab-editorial .m-cases--editorial .m-cases__info-slider { padding-bottom: 64px; }
    .ab-editorial .m-cases--editorial .m-cases__info-slider > .slick-arrow { top: auto; bottom: 0; margin: 0; }
    .ab-editorial .m-cases--editorial .m-cases__info-slider > .slick-prev { left: calc(50% - 48px); }
    .ab-editorial .m-cases--editorial .m-cases__info-slider > .slick-next { right: calc(50% - 48px); }
}

@media (max-width: 379px) {
    .ab-editorial .m-cases--editorial .ab-case-metrics { grid-template-columns: minmax(0, 1fr); }
}

/* Footer adaptation of the approved gray canvas: css/shared-footer.css. */

/* Approved traffic list: six columns of three logos, with no distorted SVGs. */
.ab-editorial .m-src__slider-block {
    display: grid;
    grid-template-rows: repeat(3, 64px);
    justify-items: center;
    align-items: center;
    gap: 24px;
    flex: 1 1 0;
    min-width: 0;
    /* Reserve a gutter even when six desktop columns become narrower than
       the logo's intrinsic width. Keep the same inset as the phone slider. */
    padding-left: 8px;
    padding-right: 8px;
    box-sizing: border-box;
}
.ab-editorial .m-src__img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(150px, 100%);
    max-height: 48px;
    margin: 0;
    object-fit: contain;
}
.ab-editorial .m-src__img[src$="/telegram.svg"] {
    max-height: 64px;
}

/* Why Choose: the approved traffic card composition, without rewriting CMS
 * copy. Other records share the grid while keeping their actual item counts.
 * Icons use the exported Figma group; the mobile list treatment is below.
 */
.ab-editorial.page-template-mainpage .ab-why-canvas {
    box-sizing: border-box;
    width: 100%;
    padding: 40px 0;
    margin-bottom: 80px;
    /* Fresh Rectangle259 source:100px desktop,40px mobile. Intermediate
     * widths adapt fluidly; source text/slider heights remain intrinsic. */
    border-radius: clamp(40px, calc(13.636364vw - 63.636364px), 100px);
    background: #f6f8fb;
}
@media (max-width: 759px) {
    .ab-editorial.page-template-mainpage .ab-why-canvas { background: #f5f8fb; }
}
/* Figma keeps a section gap before the four USP cards. The old Verified
 * carousel after them is gone, so its separate 80/150px margin must not
 * remain in addition to m-why's own bottom padding. */
.ab-editorial.page-template-mainpage .m-why .m-why__hook-block { margin-bottom: 0; }
@media (min-width: 990px) {
    .ab-editorial.page-template-mainpage .ab-why-canvas { margin-bottom: 150px; }
}
/* The canvas belongs to the full section, not inside its content gutter.
 * Native m-container spacing is applied once, inside the canvas; no viewport
 * units or negative breakout margins that would overflow the scrollbar. */
.ab-editorial.page-template-mainpage .ab-why-inner { box-sizing: border-box; width: 100%; }
.ab-editorial.page-template-mainpage .ab-why-canvas .m-why__heading {
    text-align: center;
    margin-bottom: 16px;
    font-size: clamp(23px, calc(5vw - 15px), 45px) !important;
    font-weight: 700;
    line-height: 1.51;
    color: #000;
    text-transform: var(--ab-performance-case);
}
.ab-editorial.page-template-mainpage .ab-why-canvas .m-why__heading .colored { color: inherit; }
.ab-editorial.page-template-mainpage .ab-why-canvas .m-why__link { margin: 24px auto 0; }
/* Figma 2600-787 / 2640-567: regular 24px / 15px at 151%, not the
 * legacy text--big semibold role. Keep the native editable subtitle. */
.ab-editorial.page-template-mainpage .ab-why-canvas .m-why__subheading {
    text-align: center;
    margin-bottom: 32px;
    font-family: Montserrat, sans-serif;
    font-size: clamp(15px, calc(1.5vw + 6px), 24px);
    font-weight: 400;
    line-height: 1.51;
}
.ab-editorial .m-why__slider--editorial { margin: 0; padding-bottom: 0; }
.ab-editorial .m-why__slider--editorial .slick-track {
    display: flex;
    align-items: stretch;
}
.ab-editorial .m-why__slider--editorial .ab-why-card {
    display: grid !important;
    flex: 0 0 auto;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: stretch;
    gap: 24px;
    height: auto;
    min-width: 0;
}
.ab-editorial .ab-why-heading-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    min-width: 0;
    padding: 32px;
    border-radius: 24px;
    background: #fff;
}
/* Figma2600-809:45px Bold at136%; mobile2640-589:22px. This finite source
 * role must override the blanket legacy28/32px heading !important above.
 * Native translations retain written case and can grow the card naturally. */
.ab-editorial.page-template-mainpage .ab-why-card .m-why__slide-heading {
    flex: initial;
    max-width: none;
    margin: 0;
    color: #ff8200;
    font-size: clamp(22px, calc(3.833334vw - 1px), 45px) !important;
    font-weight: 700;
    line-height: 1.36;
    text-transform: var(--ab-performance-case);
    overflow-wrap: anywhere;
}
.ab-editorial.page-template-mainpage .ab-why-card--traffic .m-why__slide-heading { color: #111; }
.ab-editorial .ab-why-card--traffic .ab-why-heading-highlight { color: #ff8200; }
@media (max-width: 759px) {
    /* Main mobile text boxes2640-603/2640-589 retain the source wraps on
     * wider phones too. Native translations can add lines naturally. */
    .ab-editorial.page-template-mainpage .ab-why-canvas .m-why__heading {
        max-width: 191.59px;
        margin-inline: auto;
    }
    .ab-editorial.page-template-mainpage .ab-why-card--traffic .m-why__slide-heading {
        max-width: min(100%, 264.63px);
    }
}
.ab-editorial .ab-why-card .m-why__slide-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 24px;
    flex: initial;
    max-width: none;
    min-width: 0;
    padding: 0;
    margin: 0;
    list-style: none;
}
.ab-editorial .ab-why-card .m-why__slide-list-item {
    box-sizing: border-box;
    min-width: 0;
    padding: 24px;
    margin: 0;
    border-radius: 24px;
    background: #fff;
}
.ab-editorial .ab-why-card .m-why__slide-list-item::before {
    display: block;
    position: static;
    width: 69.55px;
    height: 78.37px;
    margin-bottom: 16px;
    background: url('../img/editorial/why-flame-figma.png') center / contain no-repeat;
}
.ab-editorial .ab-why-card .m-why__slide-lead {
    margin: 0 0 12px;
    color: #111;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.ab-editorial .ab-why-card .m-why__slide-text {
    margin: 0;
    color: #24242c;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.ab-editorial .ab-why-card .m-why__slide-list-intro { grid-column: 1 / -1; margin: 0; }
.ab-editorial .ab-why-additional { padding: 0; margin: 0; list-style: none; }
.ab-editorial .ab-why-additional .m-why__slide-list-item { padding: 16px; border-radius: 16px; background: #fff6eb; }
.ab-editorial .ab-why-additional .m-why__slide-list-item::before { display: none; }
.ab-editorial .ab-why-additional .m-why__slide-lead { font-size: 14px; margin: 0; text-transform: var(--ab-performance-case); }
/* Flat source dots, with24px hit areas. Keep accessible native Slick arrows
 * beside them, but remove the unrelated white discs and drop shadows. */
.ab-editorial.page-template-mainpage .m-why__slider--editorial > .slick-dots {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    gap: 0;
    padding: 0;
    margin: 24px auto 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}
.ab-editorial.page-template-mainpage .m-why__slider--editorial > .slick-dots li { margin: 0; padding: 0; }
.ab-editorial.page-template-mainpage .m-why__slider--editorial > .slick-dots button {
    position: relative;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    opacity: 1;
}
.ab-editorial.page-template-mainpage .m-why__slider--editorial > .slick-dots button::before {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: #dedee3;
}
.ab-editorial.page-template-mainpage .m-why__slider--editorial > .slick-dots .slick-active button::before { background: #ff8200; }
.ab-editorial.page-template-mainpage .m-why__slider--editorial > .slick-arrow {
    top: auto;
    bottom: -4px;
    width: 32px;
    height: 32px;
    background-color: transparent;
    background-position: center;
    border-radius: 0;
    box-shadow: none;
}
.ab-editorial.page-template-mainpage .m-why__slider--editorial > .slick-prev { left: calc(50% - 104px); }
.ab-editorial.page-template-mainpage .m-why__slider--editorial > .slick-next { left: auto; right: calc(50% - 104px); }
.ab-editorial.page-template-mainpage .m-why__slider--editorial :is(.slick-arrow, .slick-dots button):focus-visible {
    outline: 2px solid #ff8200;
    outline-offset: 1px;
}
.ab-editorial.page-template-mainpage .m-trust__tag:focus-visible {
    outline: 2px solid #ff8200;
    outline-offset: -2px;
}
@media (max-width: 989px) {
    .ab-editorial.page-template-mainpage .ab-why-canvas { padding: 32px 0; }
    .ab-editorial .m-why__slider--editorial .ab-why-card { grid-template-columns: minmax(0, 1fr); }
    .ab-editorial .ab-why-heading-card { padding: 24px; gap: 24px; }
    .ab-editorial .ab-why-card .m-why__slide-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
}
@media (max-width: 599px) {
    .ab-editorial.page-template-mainpage .ab-why-canvas { padding: 24px 0; }
    .ab-editorial.page-template-mainpage .ab-why-heading-card { padding: 24px 16px; }
    .ab-editorial .ab-why-card .m-why__slide-list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .ab-editorial .ab-why-card .m-why__slide-list-item { padding: 20px; border-radius: 20px; }
    .ab-editorial .ab-why-additional .m-why__slide-list-item { padding: 16px; border-radius: 16px; }
}

/* Creative Production: approved heading/list composition with the three real
 * existing creatives retained until their replacement assets are supplied.
 * The existing mobile Slick slider stays intact; no artificial text cards.
 */
.ab-editorial .pm-service {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: 24px 40px;
    width: 100%;
    max-width: 1560px;
    margin: 0 auto;
    padding: 64px 24px;
    box-sizing: border-box;
}
.ab-editorial .pm-service .pm-container--service-1,
.ab-editorial .pm-service__text-block { display: contents; }
.ab-editorial .pm-service__heading {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    max-width: 938.3px;
    margin: 0 auto 24px;
    text-align: center;
    color: #111;
    line-height: 1.35;
    /* Dedicated Figma 2511-908 / 2684-1750 role, not ordinary EN Title Case.
     * Keep translated headings in their native written case. */
    text-transform: var(--ab-performance-case);
}
.ab-editorial .pm-service__heading .colored {
    display: block;
    /* main2.0.css still forces the legacy mobile span left with !important.
     * Both source heading parts share one centered role (2684-1750). */
    text-align: inherit !important;
    color: inherit;
}
.ab-editorial .pm-service__intro {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    font-family: Montserrat, sans-serif;
    /* Figma2511-1031; this is a lead, not ordinary body copy. */
    font-size: 28px;
    font-weight: 600;
    line-height: 41.71px;
}
.ab-editorial .pm-service__features {
    display: grid;
    grid-column: 1;
    grid-row: 3;
    gap: 20px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ab-editorial .pm-service__feature {
    position: relative;
    box-sizing: border-box;
    min-width: 0;
    min-height: 127.11px;
    padding: 18px 20px 18px 132.4px;
    border-radius: 24px;
    background: #fff6eb;
}
.ab-editorial .pm-service__feature:nth-child(even) { background: #f7f7fb; }
.ab-editorial .pm-service__feature::before {
    position: absolute;
    top: 18px;
    left: 20px;
    /* White holder2538-70, image2600-533 are separate Figma layers. */
    width: 92.4px;
    height: 91.11px;
    /* Original586px PNG includes transparent padding. At holder width its
     * visible312x429px flame matches the Figma crop; do not squash the square
     * original into the60.83x72.81px cropped layer. Why-card artwork is separate. */
    background: #fff url('../img/editorial/creative-flame-figma-20261011.webp') center / 92.4px 92.4px no-repeat;
    border-radius: 50%;
    content: '';
}
.ab-editorial h3.pm-service__feature-heading {
    margin: 0;
    color: #111;
    font-size: 20px;
    font-weight: 600;
    line-height: 29.16px;
    text-transform: var(--ab-heading-case);
    overflow-wrap: anywhere;
}
.ab-editorial .pm-service__feature-text {
    margin: 0;
    color: #24242c;
    font-family: Montserrat, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 29.16px;
    overflow-wrap: anywhere;
}
.ab-editorial .pm-service .pm-container--service-2 {
    grid-column: 2;
    grid-row: 2 / span 2;
    align-self: start;
    min-width: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 48px 0 0;
}
.ab-editorial .pm-service__items {
    min-width: 0;
    width: 100%;
    padding: 0;
}
.ab-editorial .pm-service__items:not(.slick-initialized) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 16px;
}
.ab-editorial .pm-service__items.slick-initialized { display: block; }
.ab-editorial .pm-service__items > div { margin-bottom: 0; }
.ab-editorial .pm-service__items .pm-service__img {
    position: static;
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 3 / 4;
    object-fit: contain;
    object-position: center;
    margin: 0;
    padding: 12px;
    border-radius: 24px;
    background: #f7f7fb;
}
.ab-editorial .pm-service__items .slick-slide > div { margin: 0 12px; }
.ab-editorial .pm-service__items .slick-dots { margin: 24px auto 0; }
@media (min-width: 1200px) {
    /* Frame30 uses a portrait strip clipped by its right edge, not three
     * shrinking columns. Rectangles268/269:354x589.94,25.33px apart.
     * Keep the heading centered on the page and translated copy free to
     * grow independently of those decorative media proportions. */
    .ab-editorial .pm-service {
        max-width: none;
        grid-template-columns: clamp(24px, calc((100% - 1446.84px) / 2), 236.58px) minmax(0, 590.55px) clamp(40px, calc(12.638889vw - 111.666667px), 131px) minmax(0, 1fr);
        gap: 0;
        padding: 64px 0;
        overflow: hidden;
    }
    .ab-editorial .pm-service__heading { margin-bottom: 59.03px; }
    .ab-editorial .pm-service__intro {
        grid-column: 2;
        max-width: 579.44px;
        margin-bottom: 38.96px;
    }
    .ab-editorial .pm-service__features {
        grid-column: 2;
        gap: 8.61px;
    }
    .ab-editorial .pm-service__feature {
        min-height: 126.35px;
        border-radius: 45px;
        background: #fff5e9;
    }
    .ab-editorial .pm-service__feature:nth-child(even) { background: #f6f8fb; }
    .ab-editorial .pm-service .pm-container--service-2 {
        grid-column: 4;
        align-self: start;
        padding-top: 12.13px;
    }
    .ab-editorial .pm-service__items:not(.slick-initialized) {
        width: max-content;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 354px;
        gap: 25.33px;
    }
    .ab-editorial .pm-service__items .pm-service__img {
        height: auto;
        aspect-ratio: 354 / 589.94;
        border-radius: 45px;
        background: rgb(226 232 240 / 46%);
    }
}
@media (max-width: 1199px) {
    .ab-editorial .pm-service { grid-template-columns: minmax(0, 1fr); padding: 48px 24px; }
    .ab-editorial .pm-service .pm-container--service-2 { grid-column: 1; grid-row: 4; padding-top: 16px; }
}
@media (max-width: 759px) {
    .ab-editorial .pm-service { padding: 40px 10px; }
    .ab-editorial .pm-service__heading { max-width: 259.46px; margin-bottom: 8px; }
    .ab-editorial .pm-service__intro { text-align: center; }
    .ab-editorial .pm-service__feature { min-height: 84.79px; padding: 18px 12px 18px 71.33px; border-radius: 23.09px; }
    /* Mobile holder2684-1743 and image2684-1754. Text may grow in translation. */
    .ab-editorial .pm-service__feature::before {
        top: 18px;
        left: 12px;
        width: 49.33px;
        height: 48.64px;
        background-size: 49.33px 49.33px;
    }
    .ab-editorial .pm-service__items .pm-service__img { padding: 12px; border-radius: 20px; }
}
/* Mobile Creative source Rectangles275–277 and322/323: compact feature rows,
 * then a226.98x259.83 strip with the next item visible. Keep current images
 * contained until replacement creatives arrive; do not crop their content.
 * With JS the existing Slick controls/slide state remain. Without JS this
 * same strip is horizontally scrollable, not three shrunken columns. */
@media (max-width: 759px) {
    .ab-editorial.page-template-performance .pm-service__features { gap: 7.21px; }
    .ab-editorial.page-template-performance .pm-service__feature { background: #fff5e9; }
    .ab-editorial.page-template-performance .pm-service__feature:nth-child(even) { background: #f6f8fb; }
    .ab-editorial.page-template-performance .pm-service__items:not(.slick-initialized) {
        width: 100%;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 226.98px;
        align-items: start;
        gap: 8.7px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }
    .ab-editorial.page-template-performance .pm-service__items > div,
    .ab-editorial.page-template-performance .pm-service__items > img { scroll-snap-align: start; }
    /* Current native slides are IMG nodes, not assumed DIV wrappers. The
     *226.98px frame plus its external8.7px gap gives a235.68px stride. */
    .ab-editorial.page-template-performance .pm-service__items .slick-slide { width: 226.98px; margin-right: 8.7px; }
    .ab-editorial.page-template-performance .pm-service__items .slick-slide > div { margin: 0; }
    .ab-editorial.page-template-performance .pm-service__items .pm-service__img {
        aspect-ratio: 226.98 / 259.83;
        border-radius: 20px;
        background: rgb(226 232 240 / 46%);
    }
}
/* End mobile Creative source strip. */

/* Main USP cards (#10 / #65): existing four CMS items and their copy stay
 * unchanged. Icons are exact Figma geometry with only empty HTML blur layers
 * removed; source exports are retained in tests/fixtures/main-usp-figma.
 * CSS backgrounds remain decorative.
 */
.ab-editorial .m-why .m-why__hook-block {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    width: 100%;
    min-width: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    box-sizing: border-box;
}
.ab-editorial .m-why .m-why__hook-block > .m-why__hook-block-img {
    display: none;
}
.ab-editorial .m-why .m-why__hook-block > .m-why__hook-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 24px;
    border-radius: 24px;
    background: #fff4ea;
    box-sizing: border-box;
    text-align: left;
}
.ab-editorial .m-why .m-why__hook-block > .m-why__hook-item:nth-child(even) {
    background: #f6f8fb;
}
.ab-editorial .m-why .m-why__hook-block > .m-why__hook-item::before {
    display: block;
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
    background-position: left top;
    background-size: contain;
    background-repeat: no-repeat;
    content: '';
}
.ab-editorial .m-why .m-why__hook-block > .m-why__hook-item:nth-child(1)::before {
    background-image: url('../img/editorial/usp-figma-like.svg');
}
.ab-editorial .m-why .m-why__hook-block > .m-why__hook-item:nth-child(2)::before {
    background-image: url('../img/editorial/usp-figma-geos.svg');
}
.ab-editorial .m-why .m-why__hook-block > .m-why__hook-item:nth-child(3)::before {
    background-image: url('../img/editorial/usp-figma-windows.svg');
}
.ab-editorial .m-why .m-why__hook-block > .m-why__hook-item:nth-child(4)::before {
    background-image: url('../img/editorial/usp-figma-years.svg');
}
.ab-editorial .m-why .m-why__hook-block .m-why__hook-lead {
    margin: 0 0 12px;
    color: #111;
    font-size: var(--ab-heading);
    font-weight: 900;
    line-height: 1.25;
    text-align: left;
    text-transform: var(--ab-heading-case);
    overflow-wrap: anywhere;
}
.ab-editorial .m-why .m-why__hook-block .m-why__hook-text {
    margin: 0;
    color: #24242c;
    font-size: var(--ab-copy);
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    overflow-wrap: anywhere;
}
@media (min-width: 600px) {
    .ab-editorial .m-why .m-why__hook-block { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    .ab-editorial .m-why .m-why__hook-block { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
}
/* End Main USP cards. */

/* Contacts narrow form containment: the live body uses page-template-contacts.
 * Legacy mobile padding left too little room for the localized submit button.
 * Keep this override confined to Contacts; no form content or rules change.
 */
@media (max-width: 599px) {
    .ab-editorial.page-template-contacts .c-main .c-form__container > .wpcf7,
    .ab-editorial.page-template-contacts .c-main .c-form__form {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }
    .ab-editorial.page-template-contacts .c-main .c-form__form {
        margin-top: 0;
        padding: 24px 20px;
    }
    .ab-editorial.page-template-contacts .c-main .c-form__form > p {
        min-width: 0;
        max-width: 100%;
    }
    .ab-editorial.page-template-contacts .c-main :is(.c-form__input, .c-form__textarea) {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }
    .ab-editorial.page-template-contacts .c-main .c-form__btn {
        display: block;
        width: auto;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        margin: 0 auto 20px;
        padding: 14px 24px;
        font-size: 18px;
        line-height: 1.45;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .ab-editorial.page-template-contacts .c-main .c-form__heading {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: normal;
    }
}
/* End Contacts narrow form containment. */

/* Home narrow containment: keep the full UC Browser name visible and allow
 * long localized words to wrap, without hiding text or changing the copy. */
@media (max-width: 599px) {
    .ab-editorial .m-trust-brands-block--labelled {
        flex-direction: column;
        gap: 8px;
    }
    .ab-editorial .m-trust-brands-block--labelled .m-trust__brand-label {
        max-width: 100%;
        white-space: normal;
        text-align: center;
        overflow-wrap: anywhere;
    }
    .ab-editorial :is(.m-src__heading, .m-form__heading) {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: normal;
    }
}
/* End Home narrow containment. */

/* A long translated source name must not escape its narrow traffic card. */
@media (max-width: 599px) {
    .ab-editorial .pm-srcs__slider-heading {
        overflow-wrap: anywhere;
        word-break: normal;
    }
}

/* Legacy case text inherited English capitalization in every language. Keep
 * translated metric units/channel names in their actual written case. */
html:not([lang^="en"]) .ab-editorial .m-cases--editorial :is(.m-cases__num, .ab-case-channel, .m-heading__name) {
    text-transform: none;
}

/* FAQ CTA copy uses the same body-text role as the other consultation forms. */
.ab-editorial .faq-form .faq-form__text { font-size: var(--ab-copy); }

/* Performance CTA: measured Rectangle259/271/274/43, desktop and mobile,
 * recorded in performance-form-figma-20261012.json. Keep natural text heights
 * and native CF7 validation; do not impose the canvas's fixed total height.
 * Customer follow-up 2026-11-03: make the panel standalone, with four
 * rounded corners and white gutters before the unchanged shared footer. */
.ab-editorial.page-template-performance .pm-form {
    padding: 103.59px 0 160.59px;
    width: calc(100% - clamp(32px, 6vw, 128px));
    max-width: 1760px;
    margin: 0 auto 64px;
    border-radius: 100px;
    background: #f6f8fb;
}
.ab-editorial.page-template-performance .pm-form .pm-container { position: relative; z-index: 2; }
.ab-editorial.page-template-performance .pm-form__form {
    box-sizing: border-box;
    width: 100%;
    max-width: 641.76px;
    margin: 77.38px auto 0;
    padding: 0;
    border-radius: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.ab-editorial.page-template-performance .pm-form__form > p { margin: 0; }
.ab-editorial.page-template-performance .pm-form__form > p > br { display: none; }
.ab-editorial.page-template-performance .pm-form__form .wpcf7-form-control-wrap {
    display: block;
    min-width: 0;
    margin-bottom: 19.3733px;
}
.ab-editorial.page-template-performance .pm-form__input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 102.39px;
    margin: 0;
    padding: 36.195px 48px;
    border: 0;
    border-radius: 40px;
    background: #fff;
    color: #171b2d;
    font: 400 20px/1.5 Montserrat, sans-serif;
}
.ab-editorial.page-template-performance .pm-form__input::placeholder { color: #171b2d; opacity: 1; }
.ab-editorial.page-template-performance .pm-form__input:focus-visible {
    outline: 3px solid #ff8200;
    outline-offset: 3px;
}
.ab-editorial.page-template-performance .pm-form__form .wpcf7-not-valid-tip { padding: 8px 24px 0; }
.ab-editorial.page-template-performance .pm-form__btn {
    box-sizing: border-box;
    max-width: 100%;
    min-width: min(276.54px, 100%);
    min-height: 57.39px;
    margin-top: 77.37px;
    padding: 10.575px 36px;
    border: 0;
    border-radius: 999px;
    /* Figma Submit: 2514-1293 desktop, 2684-1833 mobile below. */
    font: 400 24px/1.51 Montserrat, sans-serif;
    overflow-wrap: anywhere;
}
/* The legacy hover makes the fill transparent. The source pill has no
 * layout border, so retain its hover contour with an inset outline instead
 * of leaving only orange text or adding2px to the measured button height. */
.ab-editorial.page-template-performance .pm-form__btn:hover {
    outline: 1px solid #ff8200;
    outline-offset: -1px;
}
.ab-editorial.page-template-performance .pm-form__btn:focus-visible {
    outline: 3px solid #171b2d;
    outline-offset: 3px;
}
/* The old orange strip and floating emojis are not in the approved CTA. */
.ab-editorial.page-template-performance .pm-form__img-block { display: none; }
@media (max-width: 759px) {
    /* Independent mobile Group6225,2684-1816, not the desktop crop.
     * Its three glass images and masks are already composited in the export;
     * translated/native content still determines the section height. */
    .ab-editorial.page-template-performance .pm-form {
        padding: 55.93px 0 67.9px;
        margin-bottom: 144px;
        border-radius: 40px;
        background: #f5f8fb;
        background-image: url('../img/editorial/performance-20261012/form-background-mobile.webp');
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
    }
    .ab-editorial.page-template-performance .pm-form .pm-container { padding: 0 15px; }
    .ab-editorial.page-template-performance .pm-form__form { margin-top: 36.67px; }
    .ab-editorial.page-template-performance .pm-form__form .wpcf7-form-control-wrap { margin-bottom: 12.0467px; }
    .ab-editorial.page-template-performance .pm-form__input { min-height: 63.64px; padding: 22.07px 18px; border-radius: 24.86px; font-size: 13px; }
    .ab-editorial.page-template-performance .pm-form__btn { min-width: min(166.07px, 100%); min-height: 42.69px; margin-top: 32.05px; font-size: 14.71px; padding: 10.239px 24px; }
}
/* End Performance CTA field presentation. */

@media (min-width: 760px) {
    /* Source Group6225 is the complete background, not an uncomposited
     * glass image. Its fills, clipping and blur are already baked; retain
     * intrinsic form height and do not blur or rotate it again. */
    .ab-editorial.page-template-performance .pm-form {
        background-image: url('../img/editorial/performance-20261012/form-background-desktop.webp');
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
    }
}

/* Figma Performance CTA mascot, exported group2757-804 (720x936 at2x).
 * Decoration only: native CF7 markup, editable copy and submission stay intact.
 * Reserve the pictured overlap at the right of fields so entered text and
 * validation messages never disappear beneath the character. */
.ab-editorial.page-template-performance .pm-form .wpcf7 { position: relative; }
.ab-editorial.page-template-performance .pm-form__form::after {
    content: "";
    position: absolute;
    left: calc(100% - 106px);
    bottom: -13px;
    width: 359.12px;
    height: 467.36px;
    background: url('../img/editorial/performance-mascot-figma-20261012.webp') left bottom / 100% 100% no-repeat;
    pointer-events: none;
}
@media (min-width: 1200px) {
    /* Separate Star5,2609-265: supplied2x PNG already has21.36deg baked.
     * The rotated39.42px source frame is51.07px, not a39.42px PNG box.
     * Canvas bbox490.85/4605.59 relative to first field639.12/4631.13. */
    .ab-editorial.page-template-performance .pm-form__form::before {
        content: "";
        position: absolute;
        left: -148.27px;
        top: -25.54px;
        width: 51.07px;
        height: 51.07px;
        background: url('../img/editorial/performance-20261012/form-left-star-desktop.png') center / 100% 100% no-repeat;
        pointer-events: none;
    }
    .ab-editorial.page-template-performance .pm-form__input { padding-right: 144px; }
    .ab-editorial.page-template-performance .pm-form__form .wpcf7-not-valid-tip { padding-right: 144px; }
    .ab-editorial.page-template-performance .pm-form__form .wpcf7-response-output { margin-right: 144px; }
}
@media (max-width: 1199px) {
    /* Mobile node2684-1838:97.08x139.79, beneath Submit, outside the gray
     * panel. Use a CSS crop of the same source, not a redrawn/resampled image.
     * The three stars reuse the original big star in the PNG sprite. */
    .ab-editorial.page-template-performance .pm-form { margin-bottom: 144px; }
    .ab-editorial.page-template-performance .pm-form__form::after {
        left: calc(50% - 48.23px);
        bottom: -156px;
        width: 97.08px;
        height: 139.79px;
        background-size: 128.2px 166.66px;
    }
    .ab-editorial.page-template-performance .pm-form__form::before,
    .ab-editorial.page-template-performance .pm-form .wpcf7::before,
    .ab-editorial.page-template-performance .pm-form .wpcf7::after {
        content: "";
        position: absolute;
        width: var(--ab-star-size);
        height: var(--ab-star-size);
        background-image: url('../img/editorial/performance-mascot-figma-20261012.webp');
        background-repeat: no-repeat;
        background-size: calc(var(--ab-star-size) * 5) calc(var(--ab-star-size) * 6.5);
        background-position: calc(var(--ab-star-size) * -3.486111) calc(var(--ab-star-size) * -0.131944);
        pointer-events: none;
    }
    .ab-editorial.page-template-performance .pm-form__form::before {
        --ab-star-size: 25.82px;
        left: calc(50% + 48.165px);
        bottom: -141.365px;
    }
    .ab-editorial.page-template-performance .pm-form .wpcf7::before {
        --ab-star-size: 15.95px;
        left: calc(50% - 69.06px);
        bottom: -39.93px;
        transform: rotate(-29.12deg);
    }
    .ab-editorial.page-template-performance .pm-form .wpcf7::after {
        --ab-star-size: 11.09px;
        left: calc(50% + 75.45px);
        bottom: -105.89px;
        transform: rotate(-38.12deg);
    }
}
/* End Performance CTA mascot. */

/* Main hero lead: Inspector nodes2600-704/2640-457 use Regular24/15 at151%.
 * The shared lead600 rule is not this particular role. Keep all translations. */
.ab-editorial.page-template-mainpage h1.m-intro__heading { margin-bottom: 12px; }
.ab-editorial.page-template-mainpage .m-intro p.m-intro__text {
    max-width: 695.88px;
    font-size: clamp(15px, calc(2.045455vw - 0.545455px), 24px);
    font-weight: 400;
    line-height: 1.51;
}
@media (max-width: 759px) {
    .ab-editorial.page-template-mainpage .m-intro p.m-intro__text { max-width: min(100%, 249.9px); }
}
/* End Main hero lead source role. */

/* Main mobile Cases: the approved canvas places the phone beside brand
 * identity, then stacks both metric panels across the card's full width.
 * Flatten only the generic text wrapper visually; preserve every CMS node. */
@media (max-width: 599px) {
    .ab-editorial.page-template-mainpage .m-cases--editorial .ab-case-card {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        grid-template-areas: "phone identity" "metrics metrics" "channel channel";
        column-gap: 12px;
    }
    .ab-editorial.page-template-mainpage .m-cases--editorial .m-cases__text-block { display: contents; }
    .ab-editorial.page-template-mainpage .m-cases--editorial .ab-case-card > .m-cases__img { grid-area: phone; }
    .ab-editorial.page-template-mainpage .m-cases--editorial .m-cases__heading-block {
        grid-area: identity;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin: 0;
    }
    .ab-editorial.page-template-mainpage .m-cases--editorial .m-heading__name { overflow-wrap: anywhere; }
    .ab-editorial.page-template-mainpage .m-cases--editorial .ab-case-metrics {
        grid-area: metrics;
        min-width: 0;
        grid-template-columns: minmax(0, 1fr);
        margin-bottom: 0;
    }
    .ab-editorial.page-template-mainpage .m-cases--editorial .ab-case-channel {
        grid-area: channel;
        justify-self: start;
    }
}
/* End Main mobile Cases composition. */

/* Corresponding page hero leads match Main's approved regular 24/15px role.
 * Keep each existing line-height and width. The
 * Clients context paragraph is body copy, not its H1-adjacent hero lead. */
.ab-editorial.page-template-price .price-intro p.price-intro__subtitle,
.ab-editorial.page-template-clients .main-title.clients > .m-container > h1.title + div.title-descr:not(.seo-context),
.ab-editorial.page-template-testimonials .t-intro p.t-intro__text,
.ab-editorial.page-template-about_us .about-hero p.about-hero__text {
    /* Override the legacy mobile Testimonials 18px !important, locally. */
    font-size: clamp(15px, calc(2.045455vw - 0.545455px), 24px) !important;
    font-weight: 400;
    color: #111;
}
/* End corresponding page hero lead sizes. */

/* Main USP source roles (#10 / #65): Figma desktop2600-828/829 and
 * mobile2640-630/631. Keep the existing four cards, translations, grid and
 * exact usp-figma SVG exports already connected above.
 */
.ab-editorial.page-template-mainpage .m-why .m-why__hook-block > .m-why__hook-item {
    align-items: flex-start;
    text-align: left;
}
.ab-editorial.page-template-mainpage .m-why .m-why__hook-block > .m-why__hook-item::before {
    background-position: left top;
}
.ab-editorial.page-template-mainpage .m-why .m-why__hook-block .m-why__hook-lead {
    min-width: 0;
    max-width: 100%;
    font-family: Montserrat, sans-serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 45.58px;
    color: #0b132a;
    text-align: left;
    text-transform: none;
    overflow-wrap: anywhere;
}
.ab-editorial.page-template-mainpage .m-why .m-why__hook-block .m-why__hook-text {
    min-width: 0;
    max-width: 100%;
    font-family: Montserrat, sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 31.86px;
    color: #0b132a;
    text-align: left;
    overflow-wrap: anywhere;
}
@media (max-width: 599px) {
    .ab-editorial.page-template-mainpage .m-why .m-why__hook-block {
        grid-template-columns: minmax(0, 1fr);
    }
    .ab-editorial.page-template-mainpage .m-why .m-why__hook-block > .m-why__hook-item {
        display: grid;
        grid-template-columns: 60px minmax(0, 1fr);
        column-gap: 20px;
        row-gap: 8px;
        align-items: start;
        min-width: 0;
        padding: 20px;
    }
    .ab-editorial.page-template-mainpage .m-why .m-why__hook-block > .m-why__hook-item::before {
        grid-column: 1;
        grid-row: 1 / span 2;
        align-self: center;
        margin: 0;
    }
    .ab-editorial.page-template-mainpage .m-why .m-why__hook-block .m-why__hook-lead {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
        font-size: 25px;
        line-height: 31.2px;
    }
    .ab-editorial.page-template-mainpage .m-why .m-why__hook-block .m-why__hook-text {
        grid-column: 2;
        grid-row: 2;
        margin: 0;
        font-size: 13px;
        line-height: 16px;
    }
}
/* End Main USP source roles. */

/* Main Cases text roles: approved desktop/mobile Inspector properties.
 * Keep card geometry, source copy and written case; allow long localized
 * names and currency values to wrap instead of fixing or clipping heights. */
.ab-editorial.page-template-mainpage .m-cases--editorial :is(.m-heading__name, .m-heading__info, .ab-case-metric .m-cases__num, .ab-case-metric .m-heading__num-text, .ab-case-channel) {
    min-width: 0;
    max-width: 100%;
    font-family: Montserrat, sans-serif;
    line-height: 1.51;
    overflow-wrap: anywhere;
    word-break: normal;
}
.ab-editorial.page-template-mainpage .m-cases--editorial .m-heading__name {
    font-size: clamp(23px, calc(6.67vw - 17.02px), 63.02px);
    font-weight: 600;
    color: #000;
}
.ab-editorial.page-template-mainpage .m-cases--editorial .m-heading__info {
    font-size: clamp(11px, calc(1.5vw + 2px), 20px);
    font-weight: 400;
    color: #000;
}
.ab-editorial.page-template-mainpage .m-cases--editorial .ab-case-metric .m-cases__num {
    font-size: clamp(25px, calc(3.333334vw + 5px), 45px);
    font-weight: 600;
    color: #000;
}
.ab-editorial.page-template-mainpage .m-cases--editorial .ab-case-metric .m-heading__num-text {
    font-size: clamp(10px, calc(0.666667vw + 6px), 14px);
    font-weight: 600;
    color: #000;
}
.ab-editorial.page-template-mainpage .m-cases--editorial .ab-case-channel {
    font-size: clamp(13px, calc(2.051667vw + 0.69px), 25.31px);
    font-weight: 600;
    color: #fff;
    background: #ff8200;
}
@media (max-width: 599px) {
    .ab-editorial.page-template-mainpage .m-cases--editorial .m-heading__name { font-size: 23px; }
    .ab-editorial.page-template-mainpage .m-cases--editorial .m-heading__info { font-size: 11px; }
    .ab-editorial.page-template-mainpage .m-cases--editorial .ab-case-metric .m-cases__num { font-size: 25px; }
    .ab-editorial.page-template-mainpage .m-cases--editorial .ab-case-metric .m-heading__num-text { font-size: 10px; }
    .ab-editorial.page-template-mainpage .m-cases--editorial .ab-case-channel { font-size: 13px; }
}
@media (min-width: 1200px) {
    .ab-editorial.page-template-mainpage .m-cases--editorial .m-heading__name { font-size: 63.02px; }
    .ab-editorial.page-template-mainpage .m-cases--editorial .m-heading__info { font-size: 20px; }
    .ab-editorial.page-template-mainpage .m-cases--editorial .ab-case-metric .m-cases__num { font-size: 45px; }
    .ab-editorial.page-template-mainpage .m-cases--editorial .ab-case-metric .m-heading__num-text { font-size: 14px; }
    .ab-editorial.page-template-mainpage .m-cases--editorial .ab-case-channel { font-size: 25.31px; }
}
/* End Main Cases text roles. */

/* Main Why body: source2600-802/2640-616 Regular18/13 at151%.
 * Mobile Figma2640-593 uses a39.91x44.97 icon beside the text, not above it.
 * Keep native line breaks and allow longer translations to wrap naturally.
 * Reuse the same list treatment across all5 slides (original task8). */
.ab-editorial.page-template-mainpage .ab-why-card > .m-why__slide-list .m-why__slide-lead {
    /* Figma2600-801/2640-581, freshly inspected:20/14px Bold151%,
     * uppercase in the EN mockups. Preserve the written translated case. */
    font-size: 20px;
    font-weight: 700;
    line-height: 1.51;
    text-transform: var(--ab-performance-case);
}
.ab-editorial.page-template-mainpage .ab-why-card .m-why__slide-text {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.51;
}
@media (max-width: 599px) {
    .ab-editorial.page-template-mainpage .m-why > .m-container,
    .ab-editorial.page-template-mainpage .ab-why-inner { padding: 0 12px; }
    .ab-editorial.page-template-mainpage .ab-why-card > .m-why__slide-list { gap: 8px; }
    .ab-editorial.page-template-mainpage .ab-why-card > .m-why__slide-list > .m-why__slide-list-item {
        position: relative;
        min-height: 77px;
        padding: 16px 14px 16px 66px;
    }
    .ab-editorial.page-template-mainpage .ab-why-card > .m-why__slide-list > .m-why__slide-list-item::before {
        position: absolute;
        left: 14px;
        top: 16px;
        width: 39.91px;
        height: 44.97px;
        margin: 0;
    }
    .ab-editorial.page-template-mainpage .ab-why-card > .m-why__slide-list .m-why__slide-lead {
        font-size: 14px;
        font-weight: 700;
        line-height: 1.51;
    }
    .ab-editorial.page-template-mainpage .ab-why-card .m-why__slide-text { font-size: 13px; }
}
/* End Main Why body source role. */

/* Corresponding ordinary section typography uses Main's approved roles.
 * Source Why heading2600-854/2640-603: 45/23px700 at151%; body2600-802/
 * 2640-616: 18/13px400 at151%. Transfer only these finite corresponding roles.
 * Keep hero leads, Main Cases/Why/USP, Performance-specific cards and CTA,
 * icon captions, FAQ question labels, form fields and navigation independent.
 * Preserve alignment, colors, written-language case and semantic inline bold.
 */
.ab-editorial.page-template-mainpage h2.m-trust__heading,
.ab-editorial.page-template-mainpage h2.m-src__heading,
.ab-editorial.page-template-mainpage h2.m-form__heading,
.ab-editorial.page-template-performance h2.pm-srcs__heading,
.ab-editorial.page-template-performance h2.pm-offer__heading,
.ab-editorial.page-template-performance h2.pm-service__heading,
.ab-editorial.page-template-performance h2.pm-what__heading,
.ab-editorial.page-template-price h2.price-hooks__heading,
.ab-editorial.page-template-price h2.price-how__heading,
.ab-editorial.page-template-price h2.price-form__heading,
.ab-editorial.page-template-clients .clients-page h2.title:not(.visually-hidden),
.ab-editorial.page-template-clients h2.c-form-title,
.ab-editorial.page-template-testimonials h2.t-why__heading,
.ab-editorial.page-template-testimonials h2.t-trust__heading,
.ab-editorial.page-template-testimonials h2.t-service__heading,
.ab-editorial.page-template-testimonials h2.t-form__heading,
.ab-editorial.page-template-about_us h2.about-team__heading,
.ab-editorial.page-template-about_us h2.about-steps__heading,
.ab-editorial.page-template-about_us h2.about-faq__heading,
.ab-editorial.page-template-about_us h3.about-values__title,
.ab-editorial.page-template-vacancies h2.vacancy-about__heading,
.ab-editorial.page-template-vacancies h2.vacancy-vacancies__heading,
.ab-editorial.page-template-new_faq h2.faq-form__heading,
.ab-editorial.page-template-contacts h2.c-form__heading,
.ab-editorial.page-template-contacts h2.c-faq__heading {
    font-family: Montserrat, sans-serif;
    font-size: clamp(23px, calc(5vw - 15px), 45px) !important;
    font-weight: 700;
    line-height: 1.51;
}
/* Native task1 discussion: ordinary EN headings capitalize each word;
 * other locales retain their written case. These two About caption roles
 * are not H1/H2/H3 elements; keep prose and inline body emphasis untouched. */
.ab-editorial.page-template-about_us .about-faq__question,
.ab-editorial.page-template-about_us .about-values__list > li > div > strong:first-child {
    text-transform: var(--ab-heading-case);
}
.ab-editorial.page-template-price p.price-intro__card-lead,
.ab-editorial.page-template-price p.price-intro__card-text,
.ab-editorial.page-template-price p.price-hooks__text,
.ab-editorial.page-template-price p.price-how__item-text,
.ab-editorial.page-template-price p.price-form__text,
.ab-editorial.page-template-clients .clients-page .customers-text,
.ab-editorial.page-template-clients p.c-form-descr,
.ab-editorial.page-template-clients .main-title.clients p.title-descr.seo-context,
.ab-editorial.page-template-testimonials p.t-why__subheading,
.ab-editorial.page-template-testimonials p.t-why__slider-text,
.ab-editorial.page-template-testimonials .t-service p.t-service__text,
.ab-editorial.page-template-testimonials .t-form p.t-service__text,
.ab-editorial.page-template-performance p.pm-what__slider-text,
.ab-editorial.page-template-about_us .about-values__list p,
.ab-editorial.page-template-about_us .about-steps__item p,
.ab-editorial.page-template-about_us .about-faq__answer,
.ab-editorial.page-template-vacancies p.vacancy-about__item-text,
.ab-editorial.page-template-vacancies p.vacancy-vacancies__text,
.ab-editorial.page-template-new_faq p.faq__text,
.ab-editorial.page-template-new_faq p.faq-form__text,
.ab-editorial.page-template-contacts p.c-form__text,
.ab-editorial.page-template-contacts .c-form__contacts,
.ab-editorial.page-template-contacts p.c-faq__text:not(.c-faq__text--lead) {
    font-family: Montserrat, sans-serif;
    font-size: clamp(13px, calc(0.833333vw + 8px), 18px);
    font-weight: 400;
    line-height: 1.51;
}
/* About #40: quoted body copy shares Main's size, without flattening its
 * distinct quote weight or the native author emphasis. */
.ab-editorial.page-template-about_us .about-team__quotes blockquote {
    font-size: clamp(13px, calc(0.833333vw + 8px), 18px);
    line-height: 1.51;
}
.ab-editorial.page-template-mainpage h2.m-src__heading > span.ab-section-subtitle,
.ab-editorial.page-template-mainpage h2.m-form__heading > span.ab-section-subtitle {
    display: block;
    margin: 12px 0 0;
    font-family: Montserrat, sans-serif;
    font-size: clamp(13px, calc(0.833333vw + 8px), 18px);
    font-weight: 400;
    line-height: 1.51;
    text-transform: none;
}
/* End corresponding ordinary section typography. */

/* FAQ categories are subordinate to the page title, not another H1-sized role. */
.ab-editorial.page-template-new_faq h2.faq__section-heading {
    font-size: clamp(20px, 2vw, 28px) !important;
    font-weight: 700;
    line-height: 1.5;
}
.ab-editorial.page-template-new_faq .faq__heading { margin-bottom: 40px; }

/* Approved localized restorations have their own finite compatibility roles;
 * the original bounded typography groups above remain unchanged. */
.ab-editorial.page-template-testimonials h2.t-honor__heading {
    font-family: Montserrat, sans-serif;
    font-size: clamp(23px, calc(5vw - 15px), 45px) !important;
    font-weight: 700;
    line-height: 1.51;
}
/* Preserve the three approved localized portraits alongside the current
 * team copy. No old statistics, positioning hacks or portrait cropping.
 * Captions and description remain native editable page content. */
.ab-editorial.page-template-about_us .about-team .about-team__people {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: clamp(8px, 3vw, 40px);
    max-width: 900px;
    margin: 0 auto;
}
.ab-editorial.page-template-about_us .about-team .about-team__person {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    margin: 0;
}
.ab-editorial.page-template-about_us .about-team .about-team__photo {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}
.ab-editorial.page-template-about_us .about-team .about-team__name {
    max-width: 100%;
    min-height: 3.02em;
    margin: 12px 0 0;
    font-family: Montserrat, sans-serif;
    font-size: clamp(13px, calc(0.833333vw + 8px), 18px);
    line-height: 1.51;
    text-align: center;
    white-space: normal;
}
.ab-editorial.page-template-about_us .about-team p.about-team__description {
    max-width: 800px;
    margin: 28px auto 36px;
    font-family: Montserrat, sans-serif;
    font-size: clamp(13px, calc(0.833333vw + 8px), 18px);
    font-weight: 400;
    line-height: 1.51;
}
/* Restored localized Honors keeps its exact native facts. Make the existing
 * second heading line explicit; its old adjacent spans otherwise glue words.
 * Smooth the legacy 420px number-size jump and keep both mobile columns equal. */
.ab-editorial.page-template-testimonials .t-honor__heading--right {
    display: block;
    text-align: inherit;
}
.ab-editorial.page-template-testimonials .t-honor__item { min-width: 0; }
@media (max-width: 759px) {
    .ab-editorial.page-template-testimonials .t-honor-block {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ab-editorial.page-template-testimonials .t-honor__num {
        font-size: clamp(30px, 7vw, 50px);
    }
    /* The literal Portuguese word "milhões+" must fit a120px column at320.
     * Preserve its native wording rather than abbreviating it to another fact. */
    html[lang^="pt"] .ab-editorial.page-template-testimonials .t-honor__num {
        font-size: clamp(24px, 7.5vw, 30px);
    }
}
@media (min-width: 760px) {
    .ab-editorial.page-template-testimonials .t-honor__heading--right { text-align: right; }
}

/* Testimonials #37: keep the owner's exact written case, including lowercase
 * "by". The inherited .heading capitalization must not change native copy. */
.ab-editorial.page-template-testimonials h2.t-trust__heading {
    text-transform: none;
}

/* Performance Traffic has three distinct source text roles. Do not flatten
 * its semibold primary line into ordinary prose, or its card headings into H2.
 * Inspector: desktop2486-468/469/470, mobile2684-1913/1914/1915. */
.ab-editorial.page-template-performance h3.pm-srcs__slider-heading {
    font-size: 28px;
    font-weight: 700;
    line-height: 41.71px;
    color: #ff8302;
}
.ab-editorial.page-template-performance p.pm-srcs__slider-lead {
    font-size: 20px;
    font-weight: 600;
    line-height: 29.16px;
    color: #0b132a;
}
.ab-editorial.page-template-performance p.pm-srcs__slider-text {
    font-size: 18px;
    font-weight: 400;
    line-height: 29.16px;
    color: #0b132a;
}
.ab-editorial.page-template-performance h2.pm-srcs__heading {
    text-transform: var(--ab-performance-case);
}
.ab-editorial.page-template-performance h2.pm-offer__heading {
    text-transform: var(--ab-performance-case);
}
@media (max-width: 759px) {
    .ab-editorial.page-template-performance p.pm-service__intro {
        font-size: 15px;
        line-height: 23px;
    }
    /* Dedicated mobile Figma roles2684-1747, not ordinary18px body copy. */
    .ab-editorial.page-template-performance h3.pm-service__feature-heading,
    .ab-editorial.page-template-performance p.pm-service__feature-text {
        font-size: 12px;
        line-height: 17px;
    }
    .ab-editorial.page-template-performance h3.pm-service__feature-heading { margin-bottom: 0; }
    .ab-editorial.page-template-performance h2.pm-srcs__heading {
        max-width: 172.15px;
        margin-left: auto;
        margin-right: auto;
    }
    .ab-editorial.page-template-performance h3.pm-srcs__slider-heading { font-size: 23px; line-height: 32.65px; }
    .ab-editorial.page-template-performance p.pm-srcs__slider-lead { font-size: 15.16px; line-height: 22.83px; }
    .ab-editorial.page-template-performance p.pm-srcs__slider-text { font-size: 13px; line-height: 22.83px; }
    .ab-editorial.page-template-performance h2.pm-offer__heading { font-size: 22px !important; }
}
/* End Performance Traffic source roles. */

/* Traffic mobile card width: source heading234.35px inside an approximately
 * 270px card. Keep a small adjacent-card peek without squeezing the text. */
@media (max-width: 759px) {
    .ab-editorial.page-template-performance .pm-srcs__slider-item { padding-left: 16px; padding-right: 16px; }
}
/* End Traffic mobile card width. */

/* Verticals: source2521-1372/2684-1706 pill roles38.17/13.79px700 at136%.
 * Desktop keeps the three paired rows. Mobile follows the staggered source
 * positions around the artwork; grid flow allows translated labels to grow. */
.ab-editorial.page-template-performance .pm-offer__list {
    max-width: 1275px;
    padding: 80px 4%;
    column-gap: 6%;
}
.ab-editorial.page-template-performance .pm-offer__item {
    font-size: clamp(24px, calc(3.220455vw - 0.475458px), 38.17px);
    line-height: 1.36;
    font-weight: 700;
    color: #000;
    overflow-wrap: anywhere;
}
@media (max-width: 759px) {
    .ab-editorial.page-template-performance .pm-offer__list {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        min-height: 450px;
        gap: 22px 6px;
        padding: 48px 0 36px;
    }
    .ab-editorial.page-template-performance .pm-offer__item { width: fit-content; font-size: 13.79px; }
    .ab-editorial.page-template-performance .pm-offer__item:nth-child(1) { grid-area: 1 / 1 / 2 / 11; justify-self: start; }
    .ab-editorial.page-template-performance .pm-offer__item:nth-child(6) { grid-area: 2 / 8 / 3 / 13; justify-self: end; }
    .ab-editorial.page-template-performance .pm-offer__item:nth-child(5) { grid-area: 3 / 1 / 4 / 9; justify-self: start; }
    .ab-editorial.page-template-performance .pm-offer__item:nth-child(3) { grid-area: 3 / 9 / 4 / 13; justify-self: end; margin-top: 16px; }
    .ab-editorial.page-template-performance .pm-offer__item:nth-child(2) { grid-area: 4 / 3 / 5 / 8; }
    .ab-editorial.page-template-performance .pm-offer__item:nth-child(4) { grid-area: 5 / 8 / 6 / 13; justify-self: end; }
}
/* End Verticals source roles and mobile composition. */

/* Between the mobile carousel and four-column desktop, keep readable card
 * columns rather than shrinking the desktop text into100px-wide columns. */
@media (min-width: 760px) and (max-width: 1199px) {
    .ab-editorial.page-template-performance .pm-srcs__slider { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .ab-editorial.page-template-performance .pm-srcs__slider-item { width: auto; min-width: 0; margin: 0; }
    .ab-editorial.page-template-performance .pm-srcs__slider-item :is(.pm-srcs__slider-heading, .pm-srcs__slider-lead, .pm-srcs__slider-text) { overflow-wrap: anywhere; }
}
/* End Traffic tablet columns. */

/* Share desktop/tablet text rows so translated headings cannot push the lead
 * and icon/body down in just one card. Subgrid grows to the longest text;
 * no measured heights, truncation or per-language offsets are needed. */
@media (min-width: 760px) {
    .ab-editorial.page-template-performance .pm-srcs__slider { display: grid; grid-template-rows: auto auto auto; column-gap: 16px; }
    /* The legacy flex cards cap themselves at150/200/280px. Grid tracks now
     * own their width: retaining that cap leaves most of each tablet cell empty. */
    .ab-editorial.page-template-performance .pm-srcs__slider-item { display: grid; grid-template-rows: subgrid; grid-row: span 3; width: auto; max-width: none; min-width: 0; margin: 0; }
}
@media (min-width: 1200px) {
    .ab-editorial.page-template-performance .pm-srcs__slider { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* End Traffic shared desktop text rows. */

/* Traffic desktop: fresh Figma2486-553 and the individual text boxes.
 * Keep comment22's compact lead-to-body gap rather than restoring the large
 * blank area in the static mockup. These are minimums/caps, not fixed heights:
 * native translated copy still grows the shared rows. Mobile owns its own
 * source geometry and Slick sizing, so these rules start at four columns. */
@media (min-width: 1200px) {
    /* Source heading1252.33+68px, panel1363.02:42.69px. */
    .ab-editorial.page-template-performance h2.pm-srcs__heading { margin-bottom: 42.69px; }
    .ab-editorial.page-template-performance .pm-srcs__slider {
        width: calc(100% - 48px);
        max-width: 1446.12px;
        padding: 0;
        margin-left: auto;
        margin-right: auto;
    }
    .ab-editorial.page-template-performance .pm-srcs__slider-item {
        padding: 44.61px 27.76px 32px;
    }
    .ab-editorial.page-template-performance h3.pm-srcs__slider-heading {
        max-width: min(100%, var(--ab-traffic-heading-width));
        min-height: 113.38px;
        margin-bottom: 12px;
    }
    .ab-editorial.page-template-performance p.pm-srcs__slider-lead {
        max-width: min(100%, var(--ab-traffic-lead-width));
        min-height: 88px;
    }
    .ab-editorial.page-template-performance p.pm-srcs__slider-text {
        max-width: min(100%, var(--ab-traffic-body-width));
    }
    /* English source caps are not fixed translated-copy line widths. */
    html:lang(es) .ab-editorial.page-template-performance p.pm-srcs__slider-text,
    html:lang(pt) .ab-editorial.page-template-performance p.pm-srcs__slider-text,
    html:lang(ru) .ab-editorial.page-template-performance p.pm-srcs__slider-text { max-width: 100%; }
    .ab-editorial.page-template-performance .pm-srcs__slider-item--social {
        --ab-traffic-heading-width: 286.44px;
        --ab-traffic-lead-width: 208.55px;
        --ab-traffic-body-width: 281.15px;
        --ab-traffic-icon-size: 57px auto;
    }
    .ab-editorial.page-template-performance .pm-srcs__slider-item--programmatic {
        --ab-traffic-heading-width: 251.59px;
        --ab-traffic-lead-width: 229.71px;
        --ab-traffic-body-width: 189.47px;
        --ab-traffic-icon-size: 51px 50px;
    }
    .ab-editorial.page-template-performance .pm-srcs__slider-item--search {
        --ab-traffic-heading-width: 265.5px;
        --ab-traffic-lead-width: 237.76px;
        --ab-traffic-body-width: 214.41px;
        --ab-traffic-icon-size: 50px 50px;
    }
    .ab-editorial.page-template-performance .pm-srcs__slider-item--direct {
        --ab-traffic-heading-width: 273.17px;
        --ab-traffic-lead-width: 156.43px;
        --ab-traffic-body-width: 199.71px;
        --ab-traffic-icon-size: 41px auto;
    }
    /* Existing native SVGs have their own transparent canvas. The users SVG
     * needs62px for its57px-wide intrinsic aspect ratio; a shared holder keeps
     * the four body starts aligned, without cropping or stretching that SVG. */
    .ab-editorial.page-template-performance .pm-srcs__slider-text::before {
        width: 57px;
        height: 62px;
        background-size: var(--ab-traffic-icon-size);
        background-position: left center;
    }
}
/* End Traffic desktop source geometry. */

/* Main Why traffic: keep the approved English source phrase on one physical
 * line at intermediate widths too. Let the grid use one roomy column when
 * two source-sized cards don't fit; don't shrink text or force native nowrap.
 * At desktop the existing two equal columns remain, at phone one remains. */
.ab-editorial.page-template-mainpage .ab-why-card--traffic .m-why__slide-list {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));
}
/* End Main Why traffic intermediate text column. */

/* Between tablet and wide desktop, the left title column leaves too little
 * room for two reason cards. Stack the title without changing source type;
 * keep the four reasons in two equal columns instead of a 3+1 or narrow row. */
@media (min-width: 990px) and (max-width: 1439px) {
    .ab-editorial .m-why__slider--editorial .ab-why-card { grid-template-columns: minmax(0, 1fr); }
    .ab-editorial .ab-why-heading-card { gap: 24px; }
    .ab-editorial.page-template-mainpage .m-why__slider--editorial .m-why__slide-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* End Main Why intermediate-width composition. */

/* At1440px, an unrestricted1fr title column has only336px for text and
 * splits OPTIMIZATION at the approved45px source size. Reserve376px of
 * text width plus the native32px side padding; let the reason list flex. */
@media (min-width: 1440px) {
    .ab-editorial.page-template-mainpage .m-why__slider--editorial .ab-why-card {
        grid-template-columns: minmax(440px, 1fr) minmax(0, 2fr);
    }
}
/* End Main Why narrow-desktop title width. */

/* Main contact form: leave enough text space for full localized placeholders
 * on narrow phones. Only the three inputs change; desktop, textarea, form
 * fields, validation and mail delivery retain their existing behavior. */
@media (max-width: 759px) {
    .ab-editorial.page-template-mainpage .m-form__input {
        font-size: 16px;
        padding: 16px 12px;
    }
}
/* End Main contact form narrow input space. */

/* Performance Travel pill: widen its text column symmetrically around the
 * existing grid center. Keep the source font, content and five other pills. */
@media (max-width: 759px) {
    .ab-editorial.page-template-performance .pm-offer__item:nth-child(2) {
        grid-area: 4 / 2 / 5 / 9;
    }
}
/* End Performance Travel pill text space. */

/* Payment-model comment: native multiline input leaves the complete localized
 * question visible without shrinking the source font or widening the form. */
.ab-editorial.page-template-price textarea.price-form__input {
    line-height: 1.5;
    min-height: calc(4.5em + 20px);
    resize: vertical;
    display: block;
}
/* End Payment-model multiline comment. */

/* Testimonials mobile CTA: keep the decoration in the orange strip below the
 * form, not on the localized heading. Desktop artwork stays unchanged. */
@media (max-width: 599px) {
    .ab-editorial.page-template-testimonials .t-form__img--heart {
        max-height: 80px;
        bottom: 20px;
        left: 20px;
    }
    .ab-editorial.page-template-testimonials .t-form__img--ghost {
        max-height: 70px;
        top: auto;
        bottom: 20px;
        right: 15px;
    }
    .ab-editorial.page-template-testimonials .t-form__img--like {
        max-height: 44px;
        top: auto;
        bottom: 25px;
        left: 130px;
    }
    .ab-editorial.page-template-testimonials .t-form__svg--mob {
        max-height: 24px;
        top: auto;
        bottom: 105px;
        left: 140px;
    }
    .ab-editorial.page-template-testimonials .t-form__svg--right {
        max-height: 24px;
        bottom: 110px;
        right: 25px;
    }
}
/* End Testimonials mobile CTA decoration. */

/* Keep the complete external Clutch header on narrow phones. The iframe's
 * native content and automatic height remain owned by Clutch. */
@supports (zoom: 1) {
    .ab-editorial.page-template-testimonials .clutch-widget iframe[src^="https://widget.clutch.co/widgets/get/4"] {
        width: var(--ab-clutch-width, 100%) !important;
        zoom: var(--ab-clutch-scale, 1);
    }
    @media (max-width: 599px) {
        .ab-editorial.page-template-testimonials .t-trust__clutch-block.t-container { padding-inline: 0; }
    }
}
/* End narrow Clutch widget fit. */

/* Contacts App URL: keep the complete localized label on narrow screens. */
@media (max-width: 599px) {
    .ab-editorial.page-template-contacts .c-main input[name="apps"].c-form__input {
        font-size: 16px;
    }
}
/* End Contacts narrow App URL label. */

/* Clients App URL: align with other fields without clipping long labels. */
@media (max-width: 599px) {
    .ab-editorial.page-template-clients .c-form input[name="apps"] {
        padding-left: 24px;
        padding-right: 24px;
        font-size: 16px;
    }
}
/* End Clients narrow App URL label. */

/* Approved native multiline comments; retain each form's existing typography,
   spacing, validation and mail handling. */
.ab-editorial.page-template-contacts .c-main textarea.c-form__input,
.ab-editorial.page-template-testimonials textarea.t-form__input,
.ab-editorial.page-template-new_faq textarea.faq-form__input {
    line-height: 1.5;
    min-height: calc(4.5em + 20px);
    resize: vertical;
    display: block;
}
/* End Contacts/Testimonials/FAQ multiline comments. */

/* Approved multiline fields retain input-style placeholders. */
.ab-editorial :is(textarea.price-form__input, textarea.c-form__input, textarea.t-form__input, textarea.faq-form__input)::placeholder {
    color: #a3a3a3;
    opacity: 1;
}
.ab-editorial :is(textarea.price-form__input, textarea.c-form__input, textarea.t-form__input, textarea.faq-form__input):focus::placeholder {
    color: transparent;
}

/* Models phone CTA: the old negative offset positioned the decorative
 * background from a guessed form height and could cover editable copy.
 * Share real heading/caption/form rows; retain the original 300px art tail.
 * The container keeps its native horizontal padding and all form fields.
 */
@media (max-width: 599px) {
    .ab-editorial.page-template-price .price-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto 300px;
        isolation: isolate;
    }
    .ab-editorial.page-template-price .price-form > .container {
        display: grid;
        grid-column: 1;
        grid-row: 1 / 4;
        grid-template-rows: subgrid;
        margin: 0 auto;
        position: relative;
        z-index: 1;
    }
    .ab-editorial.page-template-price .price-form > .container > .price-form__heading { grid-row: 1; }
    .ab-editorial.page-template-price .price-form > .container > .price-form__text { grid-row: 2; }
    .ab-editorial.page-template-price .price-form > .container > .wpcf7 { grid-row: 3; }
    .ab-editorial.page-template-price .price-form > .price-form__img-block {
        grid-column: 1;
        grid-row: 3 / 5;
        min-height: 0;
        margin-top: 0;
        z-index: 0;
    }
}
/* End Models phone CTA intrinsic background rows. */

/* Models process is tabbed from 600px and stacked below it. The native
 * content's desktop click handler leaves inline display:none on inactive
 * panels. Do not let that hide mobile steps after an orientation/size change.
 * Retain the selected desktop tab and all editable content. */
@media not all and (min-width: 600px) {
    .ab-editorial.page-template-price .price-how .price-how__items-block > .price-how__item {
        display: block !important;
    }
}
/* End Models process mobile visibility. */

/* The centered Process heading no longer reserves the legacy side-title
 * space. Keep its panel in normal flow and let translated steps determine
 * height, while preserving the native minimum space for the decorative art.
 * Fixed heights and negative offsets otherwise cover the heading/next CTA. */
@media (min-width: 600px) {
    .ab-editorial.page-template-price .price-how .price-how__items-block {
        margin-top: 0;
        height: auto;
        min-height: 370px;
    }
}
@media (min-width: 992px) {
    .ab-editorial.page-template-price .price-how .price-how__items-block { min-height: 520px; }
}
@media (min-width: 1280px) {
    .ab-editorial.page-template-price .price-how .price-how__items-block { min-height: 718px; }
}
/* End Models process intrinsic panel height. */

/* Main contact consent row: CF7's generated paragraph and line breaks must
 * not separate the native checkbox from its label. Keep the existing square,
 * gap, type, color, checked state and all form data/validation unchanged. */
.ab-editorial.page-template-mainpage .m-form__checkbox-wrapper > p {
    display: flex;
    margin: 0;
    min-width: 0;
}
.ab-editorial.page-template-mainpage .m-form__checkbox-wrapper > p > br,
.ab-editorial.page-template-mainpage .m-form__checkbox-label > br {
    display: none;
}
.ab-editorial.page-template-mainpage .m-form__checkbox-text {
    min-width: 0;
}
/* End Main contact consent row. */

/* Main Cases long native values: keep short source metrics at45/25px;
 * only long editable phrases grow25→32px across the990→1200px range.
 * Balance existing line breaks without rewriting copy or currency spacing. */
.ab-editorial.page-template-mainpage .m-cases--editorial .ab-case-metric .m-cases__num {
    text-wrap: balance;
}
.ab-editorial.page-template-mainpage .m-cases--editorial .ab-case-metric .m-cases__num.ab-case-value--long {
    font-size: clamp(25px, calc(3.333334vw - 8px), 32px);
}
/* End Main Cases long native values. */

/* Fit the existing Clients Clutch header at narrow widths without replacing
 * vendor content. Zoom scales the native auto height as well as its width. */
@supports (zoom: 1) {
    .ab-editorial.page-template-clients .m-main.clients-page .widget .clutch-widget iframe[src^="https://widget.clutch.co/widgets/get/4"] {
        width: var(--ab-clutch-width, 100%) !important;
        zoom: var(--ab-clutch-scale, 1);
    }
}
/* End Clients narrow Clutch widget fit. */

/* Keep the five native review controls on one row on phones. The legacy
 * 50px margins squeeze the inline bullets into two lines at 320px. */
@media (max-width: 767px) {
    .ab-editorial.page-template-clients .m-main.clients-page .our-customers-slider .c-nav .swiper-pagination {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        width: auto;
        flex-shrink: 0;
        margin-inline: 12px;
    }
}
/* End Clients phone review controls. */

/* One review is shown until the native Swiper breakpoint at 1023px.
 * Put its arrows below the card, not over the editable quote. */
@media (min-width: 768px) and (max-width: 1022px) {
    .ab-editorial.page-template-clients .m-main.clients-page .our-customers-slider .c-nav {
        position: static;
        transform: none;
        padding: 0;
        margin-top: 25px;
        pointer-events: auto;
    }
}
/* End Clients single-review arrows. */

/* Main Cases: current Figma cards (12/67), re-read 2026-10-10.
 * Native text/images remain untouched. The phone extends above the mobile
 * panel within the slide's bounds, so Slick can still clip adjacent slides. */
.ab-editorial.page-template-mainpage .m-cases--editorial::after {
    display: none;
}
.ab-editorial.page-template-mainpage .m-cases--editorial .m-cases__heading .colored {
    color: inherit;
}
.ab-editorial.page-template-mainpage .m-cases--editorial .ab-case-metric {
    position: relative;
    gap: 8px;
    border-radius: 16px;
}
.ab-editorial.page-template-mainpage .m-cases--editorial .ab-case-metric::after {
    content: "";
    position: absolute;
    top: 16px;
    right: 16px;
    width: 18px;
    height: 18px;
    background: url('../img/editorial/case-metric-download-figma.svg') center / contain no-repeat;
    pointer-events: none;
}
.ab-editorial.page-template-mainpage .m-cases--editorial .ab-case-metric:nth-child(2)::after {
    background-image: url('../img/editorial/case-metric-trend-figma.svg');
}
.ab-editorial.page-template-mainpage .m-cases--editorial .ab-case-metric .m-heading__num-text {
    padding-right: 24px;
}
.ab-editorial.page-template-mainpage .m-cases--editorial .ab-case-channel {
    box-sizing: border-box;
    display: block;
    width: min(100%, 400px);
    border-radius: 14px;
    padding: 8px 20px;
}
.ab-editorial.page-template-mainpage .m-cases--editorial .slick-dots {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
    margin: 12px auto 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}
.ab-editorial.page-template-mainpage .m-cases--editorial .slick-dots li {
    margin: 0;
    padding: 0;
}
.ab-editorial.page-template-mainpage .m-cases--editorial .slick-dots button {
    position: relative;
    opacity: 1;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.ab-editorial.page-template-mainpage .m-cases--editorial .slick-dots button::before {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: #dedee3;
    opacity: 1;
}
.ab-editorial.page-template-mainpage .m-cases--editorial .slick-dots .slick-active button::before {
    background: #ff8200;
}
.ab-editorial.page-template-mainpage .m-cases--editorial .slick-dots button:focus-visible {
    outline: 2px solid #ff8200;
    outline-offset: 1px;
}
@media (min-width: 990px) {
    /* Figma2600-639:1459.78x623.71 gray panel; the phone projects above it.
     * Let translated/native text increase height instead of clipping content. */
    .ab-editorial.page-template-mainpage .m-cases--editorial {
        position: relative;
        width: min(1587.78px, calc(100vw - 32px));
        left: 50%;
        transform: translateX(-50%);
    }
    .ab-editorial.page-template-mainpage .m-cases--editorial .m-container { max-width: 1587.78px; }
    .ab-editorial.page-template-mainpage .m-cases--editorial .slick-list { border-radius: 0; }
    .ab-editorial.page-template-mainpage .m-cases--editorial .ab-case-card {
        position: relative;
        isolation: isolate;
        grid-template-columns: minmax(0, 1fr);
        min-height: clamp(560px, calc(50.25vw - 64.32px), 733.71px);
        padding: clamp(160px, calc(17.6vw - 22.53px), 257px)
            clamp(48px, calc(8.28vw - 10.6px), 121px)
            clamp(40px, calc(4.66vw - 5.965px), 68px)
            clamp(280px, calc(34.2vw - 43.78px), 499px);
        background: none;
    }
    .ab-editorial.page-template-mainpage .m-cases--editorial .ab-case-card::before {
        content: "";
        position: absolute;
        inset: clamp(60px, calc(7.534vw - 9.643px), 110px) 0 0;
        z-index: -1;
        border-radius: clamp(40px, 5.21vw, 100px);
        background: #f6f8fb;
        pointer-events: none;
    }
    .ab-editorial.page-template-mainpage .m-cases--editorial .ab-case-card > .m-cases__img {
        position: absolute;
        top: 0;
        left: 1.64%;
        width: min(30%, 438px);
        height: clamp(450px, calc(47.95vw - 61.38px), 700px);
        max-height: none;
        margin: 0;
        object-fit: contain;
        object-position: center top;
    }
    .ab-editorial.page-template-mainpage .m-cases--editorial .m-cases__heading {
        top: clamp(110px, calc(12.05vw - 15.42px), 176px);
        right: clamp(112px, calc(8.28vw + 53.4px), 185px);
    }
    .ab-editorial.page-template-mainpage .m-cases--editorial .m-cases__text-block { padding-top: 0; }
    .ab-editorial.page-template-mainpage .m-cases--editorial .m-cases__heading-block { gap: 28px; margin-bottom: 36px; }
    .ab-editorial.page-template-mainpage .m-cases--editorial .m-cases__heading-logo-block {
        flex: 0 0 clamp(72px, calc(9.86vw - 12.62px), 144px);
        width: clamp(72px, calc(9.86vw - 12.62px), 144px);
        height: clamp(72px, calc(9.86vw - 12.62px), 144px);
        padding: 24px;
        border-radius: 30px;
    }
    .ab-editorial.page-template-mainpage .m-cases--editorial .m-cases__text-logo { max-height: 96px; }
    .ab-editorial.page-template-mainpage .m-cases--editorial .m-cases__heading-text-block { text-align: center; }
    .ab-editorial.page-template-mainpage .m-cases--editorial .m-heading__info { margin-bottom: 0; }
    .ab-editorial.page-template-mainpage .m-cases--editorial .ab-case-metrics { margin-bottom: 36px; }
    .ab-editorial.page-template-mainpage .m-cases--editorial .ab-case-metric { min-height: 132px; padding: 16px 28px; border-radius: 25px; }
    .ab-editorial.page-template-mainpage .m-cases--editorial .ab-case-metric::after {
        top: 20px;
        right: 28px;
        width: 23px;
        height: 21px;
        background-image: url('../img/editorial/case-metric-download-desktop-figma.svg');
    }
    .ab-editorial.page-template-mainpage .m-cases--editorial .ab-case-metric:nth-child(2)::after {
        width: 23px;
        height: 23px;
        background-image: url('../img/editorial/case-metric-trend-desktop-figma.svg');
    }
    .ab-editorial.page-template-mainpage .m-cases--editorial .ab-case-metric .m-heading__num-text { padding-right: 32px; }
    .ab-editorial.page-template-mainpage .m-cases--editorial .slick-dots { margin-top: 32px; }
    .ab-editorial.page-template-mainpage .m-cases--editorial .m-cases__info-slider > .slick-arrow {
        top: calc(50% + 28px);
        height: 44px;
        background-color: transparent;
        background-image: url('../img/editorial/case-arrow-right-figma.svg');
        background-position: center;
        background-size: 37.46px 41.62px;
        border: 0;
        box-shadow: none;
    }
    .ab-editorial.page-template-mainpage .m-cases--editorial .m-cases__info-slider > .slick-prev { left: -60px; transform: rotate(180deg); }
    .ab-editorial.page-template-mainpage .m-cases--editorial .m-cases__info-slider > .slick-next { right: -60px; transform: none; }
}
@media (max-width: 599px) {
    .ab-editorial.page-template-mainpage .m-cases--editorial .m-container { padding-inline: 10px; }
    .ab-editorial.page-template-mainpage .m-cases--editorial .slick-list { border-radius: 0; }
    .ab-editorial.page-template-mainpage .m-cases--editorial .ab-case-card {
        position: relative;
        isolation: isolate;
        padding: 62px 10px 44px;
        column-gap: 10px;
        row-gap: 8px;
        border-radius: 24px;
        background: none;
    }
    .ab-editorial.page-template-mainpage .m-cases--editorial .ab-case-card::before {
        content: "";
        position: absolute;
        inset: 46px 0 0;
        z-index: -1;
        border-radius: 20px;
        background: #f6f8fb;
        pointer-events: none;
    }
    .ab-editorial.page-template-mainpage .m-cases--editorial .ab-case-card > .m-cases__img {
        width: 100%;
        height: 230px;
        max-height: none;
        object-position: top;
        align-self: start;
        margin: -62px auto -28px;
    }
    .ab-editorial.page-template-mainpage .m-cases--editorial .m-cases__heading-block {
        min-height: 128px;
        align-items: flex-end;
        align-self: start;
        gap: 6px;
        text-align: right;
    }
    .ab-editorial.page-template-mainpage .m-cases--editorial .m-cases__heading-text-block {
        width: 100%;
        text-align: right;
    }
    .ab-editorial.page-template-mainpage .m-cases--editorial .m-heading__info { margin-bottom: 0; }
    .ab-editorial.page-template-mainpage .m-cases--editorial .ab-case-metrics {
        position: relative;
        gap: 6px;
    }
    .ab-editorial.page-template-mainpage .m-cases--editorial .ab-case-metric {
        padding: 8px 10px;
        gap: 4px;
        border-radius: 14px;
    }
    .ab-editorial.page-template-mainpage .m-cases--editorial .ab-case-metric::after { top: 8px; right: 10px; }
    .ab-editorial.page-template-mainpage .m-cases--editorial .ab-case-channel {
        width: 100%;
        padding: 8px 10px;
        border-radius: 12px;
    }
    .ab-editorial.page-template-mainpage .m-cases--editorial .m-cases__info-slider { padding-bottom: 0; }
    .ab-editorial.page-template-mainpage .m-cases--editorial .m-cases__info-slider > .slick-arrow { display: none !important; }
    .ab-editorial.page-template-mainpage .m-cases--editorial .slick-dots { margin: -32px auto 8px; }
}
/* End Main Cases current Figma composition. */

/* Main Why canvas: let only its background reach the containing page width.
 * Move the native main width caps onto the unchanged sections and the Why
 * content wrappers; their text, media and gutters keep the same geometry. */
.ab-editorial.page-template-mainpage .m-main { max-width: none; }
.ab-editorial.page-template-mainpage .m-main > section:not(.m-why):not(.ab-hero-intro),
.ab-editorial.page-template-mainpage .ab-why-inner,
.ab-editorial.page-template-mainpage .m-why > .m-container {
    max-width: 480px;
    margin-inline: auto;
}
@media (min-width: 760px) {
    .ab-editorial.page-template-mainpage .m-main > section:not(.m-why):not(.ab-hero-intro),
    .ab-editorial.page-template-mainpage .ab-why-inner,
    .ab-editorial.page-template-mainpage .m-why > .m-container { max-width: 1440px; }
}
@media (min-width: 990px) {
    /* Cases already has a wider source composition and centers itself with
     * left/translate. Do not cap it or add a second, automatic centering. */
    .ab-editorial.page-template-mainpage .m-main > section.m-cases.m-cases--editorial {
        max-width: none;
        margin-inline: 0;
    }
}

/* End Main Why full-page canvas boundary. */

/* Desktop USP composition, measured in Frame 31: card 2600-822 is 344.4px
 * wide; icon 2600-844 is 125.67x86.33, not a 60px thumbnail. Keep the SVGs at
 * their own intrinsic dimensions in one 126px icon row. Padding and rhythm
 * ease down on narrower desktops; the existing mobile rows are unchanged. */
@media (min-width: 990px) {
    .ab-editorial.page-template-mainpage .m-why .m-why__hook-block > .m-why__hook-item {
        padding: clamp(24px, calc(3.75vw - 30px), 42px) clamp(24px, calc(4.8625vw - 46.02px), 47.34px);
        border-radius: 30px;
    }
    .ab-editorial.page-template-mainpage .m-why .m-why__hook-block > .m-why__hook-item::before {
        flex-basis: 126px;
        width: 126px;
        height: 126px;
        margin-bottom: clamp(20px, calc(5.833333vw - 64px), 48px);
        background-size: auto;
    }
}
@media (min-width: 1440px) {
    /* Rectangles253/254:344.4px cards with16.23px gaps. This direct
     * container owns only USP; it does not resize ordinary sections. */
    .ab-editorial.page-template-mainpage .m-why > .m-container {
        max-width: 1626.29px;
    }
    .ab-editorial.page-template-mainpage .m-why .m-why__hook-block { gap: 16.23px; }
}
/* End desktop USP composition. */

/* Restore native small-heading weights accidentally strengthened by the
 * generic editorial h3 rule. Keep the reviewed sizes, leading and casing. */
.ab-editorial.page-template-new_faq .faq__item-heading,
.ab-editorial.page-template-contacts .c-faq__item-heading { font-weight: 800; }
.ab-editorial.page-template-vacancies .vacancy-about__item-lead { font-weight: 700; }
@media (min-width: 600px) {
    .ab-editorial.page-template-vacancies .vacancy-about__item-lead { font-weight: 800; }
}
/* End native small-heading weight restoration. */

/* Wide Main Why: inspected Frame31 rectangles287/282/283/289. The
 * 477.46px title card +15.41px gutter +933.42px feature group occupy
 * 1426.29px, inside the existing100px content gutters. Minimum heights
 * reproduce the source; translated copy can enlarge the rows naturally. */
@media (min-width: 1440px) {
    .ab-editorial.page-template-mainpage .ab-why-inner { max-width: 1626.29px; }
    .ab-editorial.page-template-mainpage .m-why__slider--editorial .ab-why-card {
        grid-template-columns: minmax(0, 477.46fr) minmax(0, 933.42fr);
        gap: 15.41px;
    }
    .ab-editorial.page-template-mainpage .ab-why-heading-card {
        padding: 45.94px 38.785px 40.24px;
        border-radius: 32.78px;
    }
    .ab-editorial.page-template-mainpage .ab-why-heading-card > .m-why__slide-heading {
        width: calc(100% + 19.06px);
        margin-left: 13.285px;
    }
    .ab-editorial.page-template-mainpage .ab-why-card--traffic > .m-why__slide-list {
        column-gap: 9.66px;
        row-gap: 9.79px;
    }
    .ab-editorial.page-template-mainpage .ab-why-card--traffic > .m-why__slide-list > .m-why__slide-list-item {
        min-height: clamp(252px, 17.506vw, 336.11px);
        padding: 29.42px 43.28px;
        border-radius: 32.78px;
    }
    .ab-editorial.page-template-mainpage .ab-why-card > .m-why__slide-list > .m-why__slide-list-item .m-why__slide-lead {
        max-width: 311.39px;
    }
    .ab-editorial.page-template-mainpage .ab-why-card > .m-why__slide-list > .m-why__slide-list-item .m-why__slide-text {
        max-width: 316.76px;
    }
    .ab-editorial.page-template-mainpage .ab-why-additional .m-why__slide-list-item {
        min-height: 122.37px;
        padding: 32px 24px 32px 43.61px;
        border-radius: 27.46px;
        background: #fff4ea;
    }
    .ab-editorial.page-template-mainpage .ab-why-additional .m-why__slide-lead {
        max-width: 256.33px;
        font-size: 18px;
        font-weight: 700;
        line-height: 1.51;
        text-transform: var(--ab-performance-case);
    }
}

/* Full case links remain outside the flip button. The outer grid item owns
 * their height; the existing card keeps its responsive dimensions. */
.ab-editorial.page-template-clients .clients-tab.results .ab-card-with-case-link {
    min-width: 0;
    text-align: center;
}
.ab-editorial.page-template-clients .clients-tab.results .ab-full-case-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 8px;
    padding: 8px 16px;
    color: #b95000;
    text-decoration: underline;
    text-underline-offset: 4px;
    font-size: 16px;
    line-height: 1.4;
}
.ab-editorial.page-template-clients .clients-tab.results .ab-full-case-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
    border-radius: 4px;
}

/* The retained Swiper 5 runtime and plugin stylesheet use different
 * auto-height class names. Explicit intrinsic height keeps every translated
 * review inside its card, including after a desktop-to-mobile resize. */
.ab-editorial.page-template-performance .pm-what__slider { position: relative; }
.ab-editorial.page-template-performance .pm-what__slider .swiper-wrapper { align-items: flex-start; }
.ab-editorial.page-template-performance .pm-what__slider .swiper-slide { height: auto; }

/* Main Hero: the native CMS contains all five source exports. Rectangle57/58
 * form the center phone, independently of its screen image. The source mobile
 * frame clips this same wide composition; it does not squeeze three phones
 * into equal-width columns. Text and translated CTA heights remain natural. */
.ab-editorial.page-template-mainpage .m-main > section.ab-hero-intro {
    position: relative;
    max-width: none;
    /* Native header is59.90px; fresh H1 Top300.95 in Frame31. */
    padding-top: 241.05px;
    padding-bottom: 0;
}
.ab-editorial.page-template-mainpage .ab-hero-intro::after { content: none; }
/* Figma Group462 occupies the already-reserved gap above H1. Reuse the
 * theme's vector brand mark, without stretching it or adding CMS copy. */
.ab-editorial.page-template-mainpage .ab-hero-intro::before {
    content: '';
    position: absolute;
    top: 158.01px;
    bottom: auto;
    left: 50%;
    width: 239.9px;
    height: 32.76px;
    transform: translateX(-50%);
    opacity: 1;
    filter: none;
    background: url('../img/logo.svg') center / contain no-repeat;
    pointer-events: none;
}
.ab-editorial.page-template-mainpage .ab-hero-intro > .m-container {
    width: 100%;
    padding-inline: 0;
    gap: 0;
}
.ab-editorial.page-template-mainpage .ab-hero-intro .m-intro__text-block {
    width: calc(100% - 40px);
    max-width: 1440px;
}
.ab-editorial.page-template-mainpage .ab-hero-intro p.m-intro__text { margin-bottom: 37.82px; }
.ab-editorial.page-template-mainpage .ab-hero-intro .ab-hero-heading-break { display: block; }
.ab-editorial.page-template-mainpage .ab-hero-media {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: none;
    /* Four pixels reserve the centered source border's paint above its box. */
    padding-top: 4px;
    margin-top: 107.22px;
    margin-bottom: -198.81px;
    overflow: hidden;
}
.ab-editorial.page-template-mainpage .ab-hero-gallery {
    position: relative;
    width: clamp(1050.12px, calc(100% - 40px), 1426.65px);
    aspect-ratio: 1426.65 / 536.34;
    left: calc(50% - 1.085px);
    transform: translateX(-50%);
}
.ab-editorial.page-template-mainpage .ab-hero-phone {
    display: block;
    position: absolute;
    width: calc(100% * 259.39 / 1426.65);
}
.ab-editorial.page-template-mainpage .ab-hero-phone--outer-left {
    left: 0;
    top: calc(100% * 83.45 / 536.34);
    height: calc(100% * 452.89 / 536.34);
}
.ab-editorial.page-template-mainpage .ab-hero-phone--inner-left {
    left: calc(100% * 291.86 / 1426.65);
    top: calc(100% * 49.1 / 536.34);
    height: calc(100% * 453.89 / 536.34);
}
.ab-editorial.page-template-mainpage .ab-hero-phone--center {
    left: calc(100% * 586.81 / 1426.65);
    top: calc(100% * 1 / 536.34);
    width: calc(100% * 258.79 / 1426.65);
    height: calc(100% * 501.98 / 536.34);
}
.ab-editorial.page-template-mainpage .ab-hero-phone--inner-right {
    left: calc(100% * 877.9 / 1426.65);
    top: calc(100% * 49.1 / 536.34);
    height: calc(100% * 453.89 / 536.34);
}
.ab-editorial.page-template-mainpage .ab-hero-phone--outer-right {
    left: calc(100% * 1167.26 / 1426.65);
    top: calc(100% * 83.45 / 536.34);
    height: calc(100% * 452.89 / 536.34);
}
.ab-editorial.page-template-mainpage .ab-hero-image {
    display: block;
    position: absolute;
    width: 100%;
    max-width: none;
    height: auto;
    left: 0;
    top: 0;
    margin: 0;
}
/* Exported effect/stroke bounds extend outside the source layout boxes.
 * Preserve each image's real aspect ratio, rather than stretching its PNG. */
.ab-editorial.page-template-mainpage .ab-hero-image--outer-left {
    width: calc(100% * 267.5 / 259.39);
    left: calc(-100% * 4.055 / 259.39);
    top: calc(-100% * 4.055 / 452.89);
}
.ab-editorial.page-template-mainpage .ab-hero-image--center {
    width: calc(100% * 263 / 258.79);
    left: calc(-100% * 2.105 / 258.79);
    top: calc(-100% * 2.01 / 501.98);
}
.ab-editorial.page-template-mainpage .ab-hero-phone--center::after {
    content: '';
    position: absolute;
    z-index: 1;
    pointer-events: none;
    left: calc(-100% * 7.1 / 258.79);
    top: calc(-100% * 4.5 / 501.98);
    width: calc(100% * 266.39 / 258.79);
    height: calc(100% * 508.98 / 501.98);
    background: url('../img/editorial/hero-20261012/center-frame.svg') center / 100% 100% no-repeat;
}
.ab-editorial.page-template-mainpage .ab-hero-intro + .m-why::before,
.ab-editorial.page-template-mainpage .ab-hero-intro + .m-why::after { content: none; }
/* Before JS prepares the Why canvas (or with JS disabled), its original
 * first child needs the same clearance. The prepared USP wrapper is second
 * and therefore never receives this extra padding. */
.ab-editorial.page-template-mainpage .ab-hero-intro + .m-why > .m-container:first-child,
.ab-editorial.page-template-mainpage .ab-hero-intro + .m-why .ab-why-canvas {
    padding-top: 388.87px;
}
@media (max-width: 759px) {
    .ab-editorial.page-template-mainpage .m-main > section.ab-hero-intro {
        /* Fresh Mobile H1 Top151.84; do not fix the translated text height. */
        /* The mobile header is64px, versus59.90px on desktop. */
        padding-top: 87.84px;
    }
    .ab-editorial.page-template-mainpage .ab-hero-intro::before {
        top: 15.86px;
        width: 134.8px;
        height: 18.41px;
    }
    /* Source H1 occupies the320px frame; the lead retains its own249.9px cap. */
    .ab-editorial.page-template-mainpage .ab-hero-intro .m-intro__text-block { width: 100%; }
    .ab-editorial.page-template-mainpage .ab-hero-intro p.m-intro__text { margin-bottom: 37.43px; }
    .ab-editorial.page-template-mainpage .ab-hero-media {
        margin-top: 37.58px;
        margin-bottom: -265.48px;
    }
    .ab-editorial.page-template-mainpage .ab-hero-gallery {
        width: 1050.12px;
        left: calc(50% + 2.01px);
    }
    .ab-editorial.page-template-mainpage .ab-hero-intro + .m-why > .m-container:first-child,
    .ab-editorial.page-template-mainpage .ab-hero-intro + .m-why .ab-why-canvas {
        padding-top: 307.06px;
    }
}
/* End native five-phone Hero composition. */

/* Customer review, 14 October: bounded presentation fixes. */
/* Opening the popup intentionally focuses Name. Keep its placeholder readable
 * until typing, overriding the legacy global zero-size focus placeholder. */
.popup input:focus::placeholder {
    font-size: inherit;
    opacity: 1;
}
/* Legacy Clients CSS faded the lead even after its color matched Home. */
.ab-editorial.page-template-clients .clients .title-descr:not(.seo-context) {
    opacity: 1;
}
/* Supplied portrait/square marks need optical sizing beside wide wordmarks. */
.ab-editorial.page-template-mainpage .m-trust__brand-img[src$="/shopee-color-20261014.svg"] {
    height: 72px;
    max-height: 72px;
}
.ab-editorial.page-template-mainpage .m-trust__brand-img[src$="/aliexpress-color-20261014.webp"] {
    height: 80px;
    max-height: 80px;
}
/* Native translated labels can wrap; the old global .btn height clipped them. */
.ab-editorial.page-template-about_us .about-faq__buttons .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 65px;
    line-height: 1.5;
}