/* ================= GOOGLE ADS HERO IMAGE ================= */

/* ================= GOOGLE ADS EXPLAINED ================= */
.google-ads-explained {
    background: #ffffff;
}

/* ================= INTRODUCTION ================= */
.google-ads-explained__intro {
    position: relative;
    height: 100%;
    padding: 36px;
    overflow: hidden;
    border: 1px solid #def2f8;
    border-radius: 24px;
    background: linear-gradient(145deg, #effafd, #f9fdfe);
}

.google-ads-explained__intro::after {
    content: "";
    position: absolute;
    right: -110px;
    bottom: -140px;
    width: 300px;
    height: 300px;
    border: 1px solid rgba(8, 112, 175, 10%);
    border-radius: 50%;
    pointer-events: none;
}

/* Google Ads logo image */
.google-ads-explained__intro-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin-bottom: 26px;
    border: 1px solid #def2f8;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(8, 112, 175, 6%);
}

.google-ads-explained__intro-logo img {
    display: block;
    width: 46px;
    height: 46px;
    object-fit: contain;
}

.google-ads-explained__intro .seo-text {
    position: relative;
    z-index: 1;
    margin-bottom: 0;
    line-height: 1.85;
}

/* ================= PROCESS ================= */
.google-ads-explained__process {
    padding: 8px 0;
}

.google-ads-explained__heading {
    margin: 0 0 26px;
    color: var(--cs-heading);
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.4px;
}

.google-ads-explained__steps {
    padding: 0;
    margin: 0;
    list-style: none;
}

.google-ads-explained__steps > li {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding-bottom: 26px;
}

.google-ads-explained__steps > li:last-child {
    padding-bottom: 0;
}

/* Vertical connecting line */
.google-ads-explained__steps > li:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 48px;
    bottom: 0;
    left: 23px;
    width: 2px;
    background: rgb(221, 236, 241);
}

.google-ads-explained__step-number {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border: 1px solid #c9e0e8;
    border-radius: 14px;
    background: #f0fafd;
    color: var(--cs-primary);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.google-ads-explained__steps > li:first-child .google-ads-explained__step-number {
    border-color: var(--cs-primary);
    background: var(--cs-primary);
    color: #ffffff;
}

.google-ads-explained__steps p {
    min-width: 0;
    margin: 0;
    padding-top: 8px;
    color: var(--cs-text);
    font-size: 15px;
    line-height: 1.8;
}

/* ================= QUALITY STATEMENT ================= */
.google-ads-explained__quality {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
    padding: 24px 28px;
    border: 1px solid #def2f8;
    border-radius: 18px;
    background: #f2fbfe;
}

.google-ads-explained__quality-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    border: 1px solid #def2f8;
    border-radius: 14px;
    background: #ffffff;
    color: var(--cs-primary);
    font-size: 22px;
}

.google-ads-explained__quality p {
    min-width: 0;
    margin: 0;
    color: var(--cs-text);
    font-size: 15px;
    line-height: 1.8;
}

.google-ads-explained__quality strong {
    color: var(--cs-heading);
    font-weight: 600;
}

/* ================= DARK PAID SEARCH PANEL ================= */
.google-ads-paid-search {
    position: relative;
    margin-top: 28px;
    padding: 40px;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 8%);
    border-radius: 24px;
    background: radial-gradient(ellipse at 8% 15%, rgba(8, 112, 175, 18%), transparent 48%),
        radial-gradient(ellipse at 92% 85%, rgba(48, 164, 237, 16%), transparent 45%),
        var(--case-dark, #262626);
    box-shadow: 0 12px 30px rgba(38, 38, 38, 10%);
}

.google-ads-paid-search::after {
    content: "";
    position: absolute;
    top: -150px;
    right: -130px;
    width: 380px;
    height: 380px;
    border: 1px solid rgb(255 255 255 / 6%);
    border-radius: 50%;
    pointer-events: none;
}

.google-ads-paid-search > .row {
    position: relative;
    z-index: 1;
}

/* Left heading */
.google-ads-paid-search__heading {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.google-ads-paid-search__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border: 1px solid rgba(60, 174, 245, 25%);
    border-radius: 16px;
    background: rgba(8, 112, 175, 14%);
    color: #69c1f8;
    font-size: 23px;
}

.google-ads-paid-search h3 {
    min-width: 0;
    margin: 0;
    color: #ffffff;
    font-size: clamp(23px, 2.1vw, 28px);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.4px;
}

.google-ads-paid-search h3 span {
    display: block;
    margin-top: 5px;
    color: #69c1f8;
}

/* Right content */
.google-ads-paid-search__content {
    padding-left: 28px;
    border-left: 1px solid rgb(255 255 255 / 13%);
}

.google-ads-paid-search__content > p {
    margin: 0;
    color: #c5d8de;
    font-size: 15px;
    line-height: 1.85;
}

/* Highlighted final sentence */
.google-ads-paid-search__takeaway strong {
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.8;
}

/* ================= TABLET ================= */
@media (max-width: 991.98px) {
    .google-ads-explained__intro {
        padding: 32px;
    }

    .google-ads-explained__process {
        padding: 0;
    }

    .google-ads-paid-search {
        padding: 32px;
    }

    .google-ads-paid-search__content {
        padding: 24px 0 0;
        border-left: 0;
        border-top: 1px solid rgb(255 255 255 / 13%);
    }
}

/* ================= MOBILE ================= */
@media (max-width: 575.98px) {
    .google-ads-explained__intro {
        padding: 26px 22px;
        border-radius: 20px;
    }

    .google-ads-explained__intro-logo {
        width: 64px;
        height: 64px;
        margin-bottom: 22px;
        border-radius: 17px;
    }

    .google-ads-explained__intro-logo img {
        width: 38px;
        height: 38px;
    }

    .google-ads-explained__heading {
        margin-bottom: 22px;
    }

    .google-ads-explained__steps > li {
        gap: 16px;
        padding-bottom: 24px;
    }

    .google-ads-explained__step-number {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        border-radius: 12px;
        font-size: 13px;
    }

    .google-ads-explained__steps > li:not(:last-child)::before {
        top: 42px;
        left: 20px;
    }

    .google-ads-explained__steps p {
        padding-top: 5px;
        font-size: 14px;
    }

    .google-ads-explained__quality {
        align-items: flex-start;
        gap: 15px;
        padding: 22px 20px;
        border-radius: 16px;
    }

    .google-ads-explained__quality-icon {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        border-radius: 12px;
        font-size: 19px;
    }

    .google-ads-explained__quality p {
        font-size: 14px;
    }

    .google-ads-paid-search {
        margin-top: 24px;
        padding: 26px 22px;
        border-radius: 20px;
    }

    .google-ads-paid-search__heading {
        gap: 15px;
    }

    .google-ads-paid-search__icon {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
        border-radius: 13px;
        font-size: 19px;
    }

    .google-ads-paid-search h3 {
        font-size: 22px;
    }

    .google-ads-paid-search__content {
        padding-top: 22px;
    }
}

/* ================= PPC EXPLAINED ================= */
.ppc-explained {
    background: #ffffff;
}

/* Subsection headings */
.ppc-explained__heading {
    margin: 0 0 24px;
    color: var(--cs-heading);
    font-size: clamp(21px, 2vw, 27px);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.4px;
}

.ppc-explained__comparison,
.ppc-explained__benefits {
    min-width: 0;
    margin-top: 44px;
}

/* ================= COMPARISON TABLE ================= */
.ppc-explained__table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--cs-border);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 8px 28px rgba(57, 57, 57, 3%);
    /* Hide the scrollbar; retain touch and keyboard scrolling */
    scrollbar-width: none;
}

.ppc-explained__table-scroll::-webkit-scrollbar {
    display: none;
}

.ppc-explained__table-scroll:focus-visible {
    outline: 3px solid var(--cs-primary);
    outline-offset: 5px;
}

.ppc-explained__table {
    width: 100%;
    min-width: 820px;
    margin: 0;
    border-collapse: collapse;
    table-layout: fixed;
}

.ppc-explained__label-column {
    width: 23%;
}

.ppc-explained__ppc-column {
    background: #f1fbfe;
}

.ppc-explained__table th,
.ppc-explained__table td {
    padding: 21px 24px;
    border-bottom: 1px solid var(--cs-border);
    text-align: left;
    vertical-align: middle;
    overflow-wrap: break-word;
}

/* Table header */
.ppc-explained__table thead th {
    padding-top: 25px;
    padding-bottom: 25px;
    background: #f8fafc;
    color: var(--cs-heading);
    font-size: 16px;
    font-weight: 700;
}

.ppc-explained__table thead th:nth-child(2) {
    background: var(--cs-primary);
    color: #ffffff;
}

/* Table body */
.ppc-explained__table tbody th {
    background: #ffffff;
    color: var(--cs-heading);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.65;
}

.ppc-explained__table td {
    color: var(--cs-text);
    font-size: 14px;
    line-height: 1.75;
}

.ppc-explained__table td:nth-child(2) {
    color: #1b4864;
}

.ppc-explained__table tbody tr:last-child th,
.ppc-explained__table tbody tr:last-child td {
    border-bottom: 0;
}

/* First-column icons */
.ppc-explained__factor {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ppc-explained__factor > span:last-child {
    min-width: 0;
}

.ppc-explained__factor-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border: 1px solid #def2f8;
    border-radius: 10px;
    background: #f0fafd;
    color: var(--cs-primary);
    font-size: 15px;
}

/* Channel icons */
.ppc-explained__channel {
    display: flex;
    align-items: center;
    gap: 12px;
    line-height: 1.5;
}

.ppc-explained__channel > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border: 1px solid var(--cs-border);
    border-radius: 10px;
    background: #ffffff;
    color: var(--cs-primary);
    font-size: 15px;
}

.ppc-explained__table thead th:nth-child(2) .ppc-explained__channel > i {
    border-color: rgb(255 255 255 / 25%);
    background: rgb(255 255 255 / 15%);
    color: #ffffff;
}

.ppc-explained__channel small {
    display: block;
    font-size: 13px;
    font-weight: 500;
}

/* Mobile scroll hint */
.ppc-explained__swipe-hint {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 12px 0 0;
    color: var(--cs-text);
    font-size: 13px;
}

.ppc-explained__swipe-hint i {
    color: var(--cs-primary);
}

/* Contained grid avoids negative outer margins */
.ppc-explained__benefit-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.ppc-explained__benefit-list > li {
    display: flex;
    min-width: 0;
}

.ppc-explained__benefit {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--cs-border);
    border-radius: 16px;
    background: var(--cs-light);
    transition:
        border-color 250ms ease,
        background-color 250ms ease;
}

.ppc-explained__benefit > div {
    min-width: 0;
}

.ppc-explained__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border: 1px solid #def2f8;
    border-radius: 12px;
    background: #ffffff;
    color: var(--cs-primary);
    font-size: 18px;
}

.ppc-explained__benefit h4 {
    margin: 0 0 7px;
    color: var(--cs-heading);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.45;
}

.ppc-explained__benefit p {
    margin: 0;
    color: var(--cs-text);
    font-size: 14px;
    line-height: 1.75;
    overflow-wrap: break-word;
}

@media (hover: hover) {
    .ppc-explained__benefit:hover {
        border-color: #adcfe2;
        background: #f1fbfe;
    }
}

/* ================= RESPONSIVE ================= */
@media (max-width: 991.98px) {
    .ppc-explained__table th,
.ppc-explained__table td {
        padding: 19px 20px;
    }

    .ppc-explained__benefit-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 819.98px) {
    .ppc-explained__swipe-hint {
        display: flex;
    }
}

@media (max-width: 575.98px) {
    .ppc-explained__comparison,
.ppc-explained__benefits {
        margin-top: 32px;
    }

    .ppc-explained__heading {
        margin-bottom: 20px;
    }

    .ppc-explained__table-scroll {
        border-radius: 15px;
    }

    .ppc-explained__benefit-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .ppc-explained__benefit {
        gap: 14px;
        padding: 20px;
        border-radius: 14px;
    }

    .ppc-explained__icon {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
        font-size: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ppc-explained__benefit {
        transition: none;
    }
}

/* ================= SECTION ================= */
.ads-horizontal {
    --cards: 2;
    --gap: 24px;
    position: relative;
    background: #ffffff;
}

/* inner wrapper carries the shared section spacing (the section itself is pinned by JS) */
.ads-horizontal__sticky {
    padding: var(--cs-section-y) 0;
}

/* Vertical fallback without JavaScript */
.ads-horizontal__viewport {
    padding: 14px 0 24px;
}

.ads-horizontal__track {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap);
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Scroll-controlled horizontal layout */
.ads-horizontal.is-horizontal .ads-horizontal__sticky {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    height: 100vh;
    height: 100svh;
    padding: 24px 0;
}

.ads-horizontal.is-horizontal .ads-horizontal__viewport {
    overflow: hidden;
}

.ads-horizontal.is-horizontal .ads-horizontal__track {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: max-content;
    will-change: transform;
}

.ads-horizontal.is-horizontal .ads-horizontal__card {
    flex: 0 0 var(--card-width);
    width: var(--card-width);
}

/* ================= CARD ================= */
.ads-horizontal__card {
    --accent: var(--cs-primary);
    --surface: #effafd;
    --line: #d9f0f8;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    gap: 22px;
    min-width: 0;
    padding: 28px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: linear-gradient(125deg, var(--surface), #ffffff);
}

.ads-horizontal__card--purple {
    --accent: var(--cs-purple);
    --surface: #f0fafe;
    --line: #dceef9;
}

.ads-horizontal__card--cyan {
    --accent: var(--cs-cyan);
    --surface: #eef8fb;
    --line: #d7eaf1;
}

.ads-horizontal__card--green {
    --accent: var(--cs-green);
    --surface: #f0f6f8;
    --line: #d9ece2;
}

.ads-horizontal__card--pink {
    --accent: var(--cs-pink);
    --surface: #f3fbfe;
    --line: #ddecf1;
}

/* Decorative rings */
.ads-horizontal__card::before,
.ads-horizontal__card::after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    border: 1px solid var(--line);
    border-radius: 50%;
    pointer-events: none;
}

.ads-horizontal__card::before {
    top: -140px;
    right: -80px;
}

.ads-horizontal__card::after {
    right: -120px;
    bottom: -180px;
}

/* ================= CONTENT ================= */
.ads-horizontal__content {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.ads-horizontal__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-bottom: 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #ffffff;
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
}

.ads-horizontal__content h3 {
    margin: 0 0 14px;
    color: var(--cs-heading);
    font-size: 23px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.4px;
}

.ads-horizontal__content p {
    margin: 0;
    color: var(--cs-text);
    font-size: 14px;
    line-height: 1.8;
}

/* ================= IMAGE ================= */
.ads-horizontal__image {
    position: relative;
    z-index: 1;
    min-width: 0;
    aspect-ratio: 4 / 5;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: #ffffff;
    box-shadow: 0 16px 28px rgba(57, 57, 57, 9%);
    transform: rotate(3deg);
}

.ads-horizontal__image img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
    object-position: center;
}

/* ================= LINK ================= */
.ads-horizontal__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
    text-decoration: none;
}

.ads-horizontal__link > span:last-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ffffff;
    font-size: 19px;
}

.ads-horizontal__link:hover > span:first-child {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.ads-horizontal__link:focus-visible {
    outline: 3px solid var(--cs-primary);
    outline-offset: 5px;
    border-radius: 4px;
}

/* ================= RESPONSIVE ================= */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .ads-horizontal__card {
        gap: 16px;
        padding: 22px;
    }

    .ads-horizontal__content h3 {
        font-size: 20px;
    }
}

@media (max-width: 767.98px) {
    .ads-horizontal {
        --cards: 1;
        --gap: 18px;
    }

    .ads-horizontal__track {
        grid-template-columns: minmax(0, 1fr);
    }

    .ads-horizontal__card {
        padding: 24px;
    }

    .ads-horizontal__image {
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 575.98px) {
    .ads-horizontal__card {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        padding: 22px;
        border-radius: 20px;
    }

    .ads-horizontal__content h3 {
        font-size: 22px;
    }

    .ads-horizontal__image {
        aspect-ratio: 16 / 12;
        margin: 0 4px;
        transform: rotate(2deg);
    }
}

/* ================= GOOGLE ADS CHALLENGES ================= */
.ads-issues {
    background: var(--cs-grad-light);
}

/* Unified panel */
.ads-issues__panel {
    overflow: hidden;
    border: 1px solid var(--cs-border, #e5eff2);
    border-radius: 24px;
    background: var(--cs-white, #ffffff);
    box-shadow: 0 16px 45px rgba(57, 57, 57, 5%);
}

/* Bootstrap list */
.ads-issues__list {
    padding: 10px 28px 0px;
    margin: 0;
    list-style: none;
}

.ads-issues__list > li {
    display: flex;
    min-width: 0;
}

/* Horizontal items */
.ads-issues__item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    padding: 28px 0;
}

/* Icon: bold colour, simple shape */
.ads-issues__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    color: var(--cs-white, #ffffff);
    background: var(--cs-primary, #0870af);
    font-size: 23px;
    box-shadow: 0 6px 14px rgba(8, 112, 175, 12%);
}

/* Alternate purple icons */
.ads-issues__list > li:nth-child(even) .ads-issues__icon {
    background: var(--cs-purple, #30a4ed);
    box-shadow: 0 6px 14px rgba(48, 164, 237, 12%);
}

/* Text */
.ads-issues__content {
    min-width: 0;
}

.ads-issues__content h3 {
    margin: 0 0 7px;
    color: var(--cs-heading, #393939);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.45;
}

.ads-issues__content p {
    margin: 0;
    color: var(--cs-text, #74787b);
    font-size: 15px;
    line-height: 1.7;
}

/* Desktop separators */
@media (min-width: 992px) {
    .ads-issues__list > li:nth-child(odd) {
        padding-right: 32px;
        border-right: 1px solid var(--cs-border, #e5eff2);
    }

    .ads-issues__list > li:nth-child(even) {
        padding-left: 32px;
    }

    .ads-issues__list > li:nth-child(-n + 6) {
        border-bottom: 1px solid var(--cs-border, #e5eff2);
    }
}

/* Integrated dark footer */
.ads-issues__audit {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 28px 32px;
    background: radial-gradient(ellipse at 8% 15%, rgba(8, 112, 175, 18%), transparent 48%),
        radial-gradient(ellipse at 92% 85%, rgba(48, 164, 237, 16%), transparent 45%),
        var(--case-dark, #262626);
}

.ads-issues__audit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(105, 193, 248, 25%);
    border-radius: 14px;
    color: #69c1f8;
    background: rgba(8, 112, 175, 15%);
    font-size: 24px;
}

.ads-issues__audit p {
    margin: 0;
    color: #c1d4db;
    font-size: 16px;
    line-height: 1.75;
}

.ads-issues__audit strong {
    color: var(--cs-white, #ffffff);
    font-weight: 700;
}

/* Tablet */
@media (max-width: 991.98px) {
    .ads-issues__list {
        padding: 6px 28px;
    }

    .ads-issues__list > li:not(:last-child) {
        border-bottom: 1px solid var(--cs-border, #e5eff2);
    }

    .ads-issues__item {
        padding: 25px 0;
    }

    .ads-issues__audit {
        padding: 26px 28px;
    }
}

/* Mobile */
@media (max-width: 575.98px) {
    .ads-issues__panel {
        border-radius: 18px;
    }

    .ads-issues__list {
        padding: 4px 20px;
    }

    .ads-issues__item {
        gap: 15px;
        padding: 23px 0;
    }

    .ads-issues__icon {
        flex-basis: 46px;
        width: 46px;
        height: 46px;
        border-radius: 13px;
        font-size: 20px;
    }

    .ads-issues__content h3 {
        margin-bottom: 7px;
        font-size: 17px;
    }

    .ads-issues__audit {
        align-items: flex-start;
        gap: 15px;
        padding: 24px 20px;
    }

    .ads-issues__audit-icon {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        border-radius: 12px;
        font-size: 21px;
    }

    .ads-issues__audit p {
        font-size: 14px;
    }
}

/* ================= AD COPY & LANDING PAGE OPTIMIZATION ================= */
.ad-conversion {
    background: var(--cs-light, #f7fcfd);
}

/* Bootstrap list */
.ad-conversion__list {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.ad-conversion__list > li {
    display: flex;
}

/* Cards */
.ad-conversion__card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    padding: 27px;
    border: 1px solid var(--cs-border, #e5eff2);
    border-radius: 18px;
    background: var(--cs-white, #ffffff);
    box-shadow: 0 6px 18px rgba(57, 57, 57, 3%);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

/* Number and icon */
.ad-conversion__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.ad-conversion__number {
    color: #adcfe2;
    font-size: 38px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -1.5px;
}

.ad-conversion__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border: 1px solid #ddf1f8;
    border-radius: 14px;
    color: var(--cs-primary, #0870af);
    background: #effafd;
    font-size: 21px;
}

/* Content */
.ad-conversion__card h3 {
    margin: 0 0 12px;
    color: var(--cs-heading, #393939);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.45;
}

.ad-conversion__card p {
    margin: 0;
    color: var(--cs-text, #74787b);
    font-size: 14px;
    line-height: 1.85;
}

/* Small colour variation */
.ad-conversion__list > li:nth-child(3n + 2) .ad-conversion__icon {
    border-color: #def3fa;
    color: var(--cs-purple, #30a4ed);
    background: #f0fafe;
}

.ad-conversion__list > li:nth-child(3n) .ad-conversion__icon {
    border-color: #cde6ee;
    color: #084870;
    background: #eef6f9;
}

/* Bottom CTA strip */
.ad-conversion__cta {
    margin-top: 30px;
    padding: 28px 30px;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 18px;
    background: radial-gradient(ellipse at 8% 15%, rgba(8, 112, 175, 18%), transparent 48%),
        radial-gradient(ellipse at 92% 85%, rgba(48, 164, 237, 16%), transparent 45%),
        var(--case-dark, #262626);
}

.ad-conversion__cta-content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.ad-conversion__cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border: 1px solid rgba(105, 193, 248, 25%);
    border-radius: 15px;
    color: #69c1f8;
    background: rgba(8, 112, 175, 15%);
    font-size: 24px;
}

.ad-conversion__cta-content p {
    margin: 0;
    color: #c1d4db;
    font-size: 15px;
    line-height: 1.85;
}

.ad-conversion__cta-content strong {
    color: var(--cs-white, #ffffff);
    font-weight: 600;
}

/* Button */
.ad-conversion__action {
    display: flex;
    justify-content: flex-end;
}

/* Hover */
@media (hover: hover) {
    .ad-conversion__card:hover {
        border-color: #4fb1ed;
        box-shadow: 0 12px 28px rgba(8, 112, 175, 7%);
    }
}

/* Tablet */
@media (max-width: 991.98px) {
    .ad-conversion__action {
        justify-content: flex-start;
    }
}

/* Mobile */
@media (max-width: 575.98px) {
    .ad-conversion__card {
        padding: 24px;
        border-radius: 16px;
    }

    .ad-conversion__top {
        margin-bottom: 18px;
    }

    .ad-conversion__number {
        font-size: 34px;
    }

    .ad-conversion__card h3 {
        font-size: 17px;
    }

    .ad-conversion__cta {
        margin-top: 24px;
        padding: 24px;
        border-radius: 16px;
    }

    .ad-conversion__cta-content {
        align-items: flex-start;
        gap: 15px;
    }

    .ad-conversion__cta-icon {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        font-size: 20px;
    }

    .ad-conversion__cta-content p {
        font-size: 14px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ad-conversion__card {
        transition: none;
    }
}

/* ================= GOOGLE ADS TOOLS ================= */
.campaign-tools {
    background: #ffffff;
}

/* Bootstrap grid */
.campaign-tools__list {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.campaign-tools__list > li {
    display: flex;
    min-width: 0;
}

/* Cards */
.campaign-tools__card {
    position: relative;
    width: 100%;
    min-width: 0;
    padding: 28px;
    overflow: hidden;
    border: 1px solid var(--cs-border);
    border-radius: 20px;
    background: linear-gradient(135deg, #ffffff 45%, #f3fbfe);
    box-shadow: 0 6px 22px rgba(57, 57, 57, 3%);
    transition:
        border-color 250ms ease,
        box-shadow 250ms ease,
        transform 250ms ease;
}

/* Soft detail behind the logo */
.campaign-tools__card::before {
    content: "";
    position: absolute;
    top: -50px;
    right: -45px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: rgba(8, 112, 175, 4%);
    pointer-events: none;
}

/* Heading and logo */
.campaign-tools__top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.campaign-tools__top h3 {
    min-width: 0;
    margin: 0;
    color: var(--cs-heading);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -0.3px;
}

.campaign-tools__top h3 span {
    white-space: nowrap;
}

/* Logo tile */
.campaign-tools__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    border: 1px solid #e1edf3;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(57, 57, 57, 5%);
    transform: rotate(5deg);
}

.campaign-tools__logo img {
    display: block;
    width: 42px;
    height: 42px;
    object-fit: contain;
    transform: rotate(-5deg);
}

/* Description */
.campaign-tools__card p {
    position: relative;
    margin: 0;
    padding-top: 18px;
    border-top: 1px solid var(--cs-border);
    color: var(--cs-text);
    font-size: 15px;
    line-height: 1.75;
}

/* Hover */
@media (hover: hover) {
    .campaign-tools__card:hover {
        border-color: #adcfe2;
        box-shadow: 0 14px 30px rgba(8, 112, 175, 7%);
        transform: translateY(-3px);
    }
}

/* Small desktop */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .campaign-tools__card {
        padding: 24px;
    }

    .campaign-tools__top {
        gap: 14px;
    }

    .campaign-tools__top h3 {
        font-size: 18px;
    }

    .campaign-tools__logo {
        flex-basis: 62px;
        width: 62px;
        height: 62px;
    }

    .campaign-tools__logo img {
        width: 36px;
        height: 36px;
    }
}

/* Mobile */
@media (max-width: 575.98px) {
    .campaign-tools__card {
        padding: 24px;
        border-radius: 18px;
    }

    .campaign-tools__top {
        gap: 16px;
        margin-bottom: 18px;
    }

    .campaign-tools__top h3 {
        font-size: 18px;
    }

    .campaign-tools__logo {
        flex-basis: 62px;
        width: 62px;
        height: 62px;
        border-radius: 16px;
    }

    .campaign-tools__logo img {
        width: 36px;
        height: 36px;
    }

    .campaign-tools__card p {
        padding-top: 16px;
        font-size: 14px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .campaign-tools__card {
        transition: none;
    }

    .campaign-tools__card:hover {
        transform: none;
    }
}

/* ================= ACCOUNT OWNERSHIP ================= */
.ads-ownership {
    background: var(--cs-white);
}

/* Dark background panel */
.ads-ownership__panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 32px;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 24px;
    background: radial-gradient(ellipse at 8% 15%, rgba(8, 112, 175, 18%), transparent 48%),
        radial-gradient(ellipse at 92% 85%, rgba(48, 164, 237, 16%), transparent 45%),
        var(--cs-grad-dark);
    box-shadow: 0 18px 44px rgba(38, 38, 38, 12%);
}

/* Decorative rings */
.ads-ownership__panel::before,
.ads-ownership__panel::after {
    content: "";
    position: absolute;
    z-index: -1;
    border: 1px solid rgb(255 255 255 / 6%);
    border-radius: 50%;
    pointer-events: none;
}

.ads-ownership__panel::before {
    top: -150px;
    right: -110px;
    width: 380px;
    height: 380px;
}

.ads-ownership__panel::after {
    top: -110px;
    right: -70px;
    width: 300px;
    height: 300px;
}

/* Left image frame */
.ads-ownership__visual {
    position: relative;
    padding: 8px;
    border: 1px solid rgb(255 255 255 / 16%);
    border-radius: 20px;
    background: rgb(255 255 255 / 5%);
    box-shadow: 0 14px 30px rgb(0 0 0 / 15%);
}

.ads-ownership__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    object-position: center;
    border-radius: 13px;
}

/* All content on the right */
.ads-ownership__content {
    min-width: 0;
    padding: 10px 12px 10px 0;
}

/* Shield icon */
.ads-ownership__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: 24px;
    border: 1px solid rgba(105, 193, 248, 25%);
    border-radius: 17px;
    color: #69c1f8;
    background: rgba(8, 112, 175, 15%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%);
    font-size: 27px;
}

.ads-ownership__check {
    position: absolute;
    right: -6px;
    bottom: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 3px solid var(--case-dark);
    border-radius: 50%;
    color: var(--cs-white);
    background: var(--cs-green);
    font-size: 10px;
}

/* Paragraph */
.ads-ownership__content p {
    max-width: 640px;
    margin: 0;
    color: #c1d4db;
    font-size: 15px;
    line-height: 1.9;
}

.ads-ownership__content strong {
    color: var(--cs-white);
    font-weight: 600;
}

/* Tablet */
@media (max-width: 991.98px) {
    .ads-ownership__panel {
        padding: 28px;
    }

    .ads-ownership__visual {
        max-width: 580px;
        margin-inline: auto;
    }

    .ads-ownership__image {
        aspect-ratio: 16 / 10;
    }

    .ads-ownership__content {
        padding: 4px 0 0;
    }

    .ads-ownership__content p {
        max-width: none;
    }
}

/* Mobile */
@media (max-width: 575.98px) {
    .ads-ownership__panel {
        padding: 20px;
        border-radius: 19px;
    }

    .ads-ownership__visual {
        padding: 6px;
        border-radius: 16px;
    }

    .ads-ownership__image {
        aspect-ratio: 4 / 3;
        border-radius: 10px;
    }

    .ads-ownership__icon {
        width: 52px;
        height: 52px;
        margin-bottom: 20px;
        border-radius: 15px;
        font-size: 24px;
    }

    .ads-ownership__content p {
        font-size: 14px;
        line-height: 1.85;
    }
}

/* ================= GOOGLE ADS + SEO CTA ================= */
.ads-seo-cta {
    background: var(--cs-white);
}

.ads-seo-cta__wrap {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 38px 40px;
    border: 1px solid #d8eaf5;
    border-radius: 22px;
    background: linear-gradient(120deg, #effafd, #f8fdfe);
}

/* Subtle corner decoration */
.ads-seo-cta__wrap::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -100px;
    bottom: -130px;
    width: 300px;
    height: 300px;
    border: 45px solid rgba(8, 112, 175, 4%);
    border-radius: 50%;
    pointer-events: none;
}

/* Paired icons */
.ads-seo-cta__icons {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.ads-seo-cta__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid #ddeef4;
    border-radius: 12px;
    color: var(--cs-primary);
    background: var(--cs-white);
    font-size: 19px;
}

.ads-seo-cta__plus {
    color: var(--cs-primary);
    font-size: 20px;
    font-weight: 600;
}

.ads-seo-cta__content p {
    max-width: 800px;
    margin: 0;
    color: var(--cs-text);
    font-size: 15px;
    line-height: 1.85;
}

/* CTA */
.ads-seo-cta__action {
    display: flex;
    justify-content: flex-end;
}

/* Tablet */
@media (max-width: 991.98px) {
    .ads-seo-cta__action {
        justify-content: flex-start;
    }
}

/* Mobile */
@media (max-width: 575.98px) {
    .ads-seo-cta__wrap {
        padding: 28px 22px;
        border-radius: 18px;
        text-align: center;
    }

    .ads-seo-cta__icons,
.ads-seo-cta__action {
        justify-content: center;
    }

    .ads-seo-cta__content p {
        font-size: 14px;
        line-height: 1.8;
    }
}