/* Services hub: every rule is scoped to the hub or a named ANELOK tool. */
.anelok-services-grid,
.anelok-services-grid * {
    box-sizing: border-box;
}

.page-id-301236 .anelok-services-grid {
    width: min(1240px, calc(100vw - 120px));
    max-width: none;
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: clamp(56px, 6vw, 84px) !important;
    margin-left: 50% !important;
    padding: 0;
    transform: translateX(-50%);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.page-id-301236 .anelok-services-grid__inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
}

.anelok-services-card {
    display: block;
    min-width: 0;
    border-radius: 28px;
    overflow: hidden;
    text-decoration: none;
    line-height: 0;
    transform: translateZ(0);
    transition: transform .2s ease, box-shadow .2s ease;
}

/* The original Elementor page shell adds a second white card around the grid. */
.page-id-301236 #main-content {
    padding-top: clamp(18px, 2.2vw, 30px) !important;
    padding-bottom: 0 !important;
}

.page-id-301236 #post-301236 {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.anelok-services-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(37, 104, 150, .15);
}

.anelok-services-card:focus-visible {
    outline: 4px solid #2ca8ed;
    outline-offset: 5px;
}

.anelok-services-card img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    object-fit: contain;
}

/* Existing image splitter: keep the text and processing logic, remove only the oversized internal banner. */
.anelok-a4-page .anelok-splitter {
    max-width: 1080px;
    margin: 18px auto 30px;
    padding: 18px 28px 24px;
    border: 1px solid #f0d28a;
    border-radius: 22px;
    background: linear-gradient(155deg, #fffdf5, #fff5cf);
    box-shadow: 0 10px 28px rgba(211, 150, 35, .10);
}

.anelok-a4-page .anelok-splitter__hero {
    display: none !important;
}

.anelok-a4-page .anelok-splitter__steps {
    gap: clamp(26px, 4vw, 52px);
}

.anelok-a4-page .anelok-splitter__upload-card {
    border-color: #efd28b;
    box-shadow: 0 4px 16px rgba(184, 126, 23, .08);
}

.anelok-a4-page .anelok-splitter__drop,
.anelok-a4-page .anelok-splitter__settings input {
    border-color: #e8c56f;
}

.anelok-a4-page #anelok-splitter-submit,
.anelok-a4-page .anelok-splitter__download {
    background: linear-gradient(180deg, #ffbd31, #f19100);
    border-color: #e58c00;
}

/* Existing mirror tool: hide its redundant banner and use the gentle green of cover 5. */
.anelok-flip-page {
    margin: 14px 0 26px !important;
    padding: 22px 0 34px !important;
    background: linear-gradient(150deg, #f8fff5, #eaffdf) !important;
}

.anelok-flip-page .anelok-header,
.anelok-flip-page .anelok-hero-logo {
    display: none !important;
}

.anelok-flip-page .anelok-main-card {
    margin: 0 auto 24px !important;
    border: 1px solid #b8e8a9;
    border-radius: 24px;
    background: linear-gradient(155deg, #ffffff, #f0ffea) !important;
    box-shadow: 0 10px 28px rgba(67, 152, 58, .10);
}

.anelok-flip-page .anelok-panel,
.anelok-flip-page .anelok-upload-area,
.anelok-flip-page .anelok-toggle-chip {
    border-color: #b8dda9 !important;
    background-color: #fbfff9 !important;
}

.anelok-flip-page .anelok-btn {
    background: linear-gradient(180deg, #58dc5c, #20b935) !important;
    border-color: #18a72d !important;
}

.anelok-flip-page .anelok-benefits {
    margin-inline: auto;
}

/* New tools: colour-match covers 2–4 while keeping their tested browser logic. */
.aqr-tool {
    --aqr-title: #087bc9 !important;
    --aqr-text: #315f7f !important;
    --aqr-strong: #145b8c !important;
    --aqr-line: #a8ddf8 !important;
    --aqr-btn-top: #79d7ff !important;
    --aqr-btn-bottom: #2aa6ef !important;
    max-width: 1080px !important;
    margin: 18px auto 30px !important;
    padding: 24px clamp(18px, 3vw, 36px) 20px !important;
    border-color: #91d8fb !important;
    background: linear-gradient(155deg, #f4fcff, #dff4ff) !important;
}

.aqr-tool .aqr-primary {
    color: #074d7c !important;
    border-color: #56bff5 !important;
    background: linear-gradient(180deg, #79d7ff, #2aa6ef) !important;
}

.aqr-tool .aqr-input,
.aqr-tool .aqr-style-tile {
    border-color: #bfe7fb !important;
}

.aqr-tool .aqr-radio:checked + .aqr-style-tile {
    border-color: #57bdf0 !important;
    background: #e0f5ff !important;
}

.anp-converter {
    --anp-heading: #7040be !important;
    --anp-text: #514e6a !important;
    max-width: 1080px !important;
    margin: 18px auto 30px !important;
    padding: 24px clamp(18px, 4vw, 64px) 22px !important;
    border-color: #cbb6f7 !important;
    background: radial-gradient(ellipse at 50% 45%, #fdfbff, #eee5ff) !important;
}

.anp-converter .anp-drop {
    border-color: #b798ef !important;
}

.anp-converter .anp-primary {
    color: #49228d !important;
    border-color: #aa83ed !important;
    background: linear-gradient(180deg, #caa7ff, #9656ed) !important;
}

.anp-converter .anp-privacy svg,
.anp-converter .anp-check {
    color: #7c4bc4 !important;
}

.anj-converter {
    --anj-heading: #c13472 !important;
    --anj-text: #5f5361 !important;
    --anj-line: #f1a7c7 !important;
    --anj-accent: #e55391 !important;
    max-width: 1080px !important;
    margin: 18px auto 30px !important;
    padding: 24px clamp(18px, 4vw, 64px) 22px !important;
    border-color: #f0a8c6 !important;
    background: radial-gradient(ellipse at 50% 45%, #fffafd, #ffe8f1) !important;
}

.anj-converter .anj-drop,
.anj-converter .anj-editor {
    border-color: #ed91b8 !important;
}

.anj-converter .anj-primary {
    color: #8d1d50 !important;
    border-color: #ef75aa !important;
    background: linear-gradient(180deg, #ff9fc5, #ff5a9b) !important;
}

.anj-converter .anj-secondary {
    color: #9b2d5e !important;
    border-color: #efa5c4 !important;
    background: #fff !important;
}

.anj-converter .anj-privacy svg,
.anj-converter .anj-check {
    color: #d94282 !important;
}

@media (max-width: 980px) {
    .page-id-301236 .anelok-services-grid {
        width: min(820px, calc(100vw - 64px)) !important;
    }

    .page-id-301236 .anelok-services-grid__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .page-id-301236 .anelok-services-grid {
        width: calc(100vw - 44px) !important;
        margin-bottom: 48px !important;
    }

    .page-id-301236 .anelok-services-grid__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px !important;
    }

    .anelok-services-card {
        border-radius: 22px;
    }

    .anelok-a4-page .anelok-splitter {
        padding: 16px 14px 20px;
    }

    .anelok-flip-page {
        padding: 14px 0 26px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .anelok-services-card {
        transition: none;
    }
}
