/*!
 * GoTop Service — meta-ads scoped CSS.
 * Loaded only when data-service-slug="meta-ads".
 * Design: dark base + cyan primary (GO TOP language) + controlled multi-hue
 * gradient accents (cyan → purple → pink → orange) used ONLY as glow, stroke,
 * story ring, and creative frame — never as flat background fills.
 *
 * Sections:
 *   1. Hero Social Creative Studio  (.gtp-svc-metastudio)
 *   2. Scroll Stopper Lab           (.gtp-svc-scrollab)
 *   3. Creative Lab gallery         (.gtp-svc-creativelab)
 *   4. Audience Funnel              (.gtp-svc-metafunnel)
 *   5. Six-step method              (.gtp-svc-what--sixblock, .gtp-svc-method--six)
 *   6. Meta KPI viz variants        (--stars, --freq, --chat, --abc)
 *   7. reduced-motion overrides
 */

:root {
    --gtp-meta-cyan:   #5EEAFF;
    --gtp-meta-purple: #A879FF;
    --gtp-meta-pink:   #FF6EC7;
    --gtp-meta-orange: #FFB35B;
}

/* ============================================================
 * 1. HERO — Social Creative Studio
 * ============================================================ */

.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio {
    position: relative;
    width: 100%;
    min-height: 480px;
    padding: 24px 22px;
    border-radius: 22px;
    border: 1px solid rgba(94, 234, 255, 0.18);
    background:
        linear-gradient(180deg, rgba(94, 234, 255, 0.04), rgba(10, 18, 32, 0.75)),
        var(--gtp-svc-surface);
    overflow: hidden;
    isolation: isolate;
}

.gtp-svc-metastudio__glow {
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    filter: blur(48px);
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}
.gtp-svc-metastudio__glow--a {
    top: -80px;
    inset-inline-end: -40px;
    background: radial-gradient(circle, rgba(168, 121, 255, 0.55) 0%, rgba(94, 234, 255, 0.2) 55%, transparent 75%);
}
.gtp-svc-metastudio__glow--b {
    bottom: -100px;
    inset-inline-start: -60px;
    background: radial-gradient(circle, rgba(255, 110, 199, 0.5) 0%, rgba(255, 179, 91, 0.22) 55%, transparent 75%);
}

/* Ads Manager mini panel */
.gtp-svc-metastudio__panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 20px;
    border-radius: 12px;
    background: rgba(6, 12, 22, 0.85);
    border: 1px solid rgba(94, 234, 255, 0.22);
}
.gtp-svc-metastudio__panel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--gtp-svc-fmono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gtp-meta-cyan);
}
.gtp-svc-metastudio__panel-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 6px rgba(74, 222, 128, 0.7);
    animation: gtpMetaLiveDot 1.6s ease-in-out infinite;
}
@keyframes gtpMetaLiveDot { 0%,100%{opacity:1} 50%{opacity:.4} }
.gtp-svc-metastudio__panel-title { flex: 1 1 auto; color: rgba(230, 240, 250, 0.85); }
.gtp-svc-metastudio__panel-status {
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(74, 222, 128, 0.14);
    color: rgba(160, 240, 195, 0.98);
    font-size: 10px;
}

.gtp-svc-metastudio__objectives {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.gtp-svc-metastudio__objectives li {
    padding: 5px 12px;
    border-radius: 999px;
    font-family: var(--gtp-svc-fhead);
    font-size: 11.5px;
    font-weight: 700;
    color: rgba(220, 230, 245, 0.7);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(94, 234, 255, 0.15);
}
.gtp-svc-metastudio__objectives li.is-active {
    color: #0a0f1a;
    background: linear-gradient(90deg, var(--gtp-meta-cyan), var(--gtp-meta-purple));
    border-color: transparent;
    box-shadow: 0 0 12px rgba(94, 234, 255, 0.35);
}

.gtp-svc-metastudio__creatives {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(94, 234, 255, 0.15);
}
.gtp-svc-metastudio__cv {
    width: 24px; height: 24px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--gtp-svc-fmono);
    font-size: 11px;
    font-weight: 700;
    color: rgba(230, 240, 250, 0.75);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(94, 234, 255, 0.2);
}
.gtp-svc-metastudio__cv.is-winner {
    color: #0a0f1a;
    background: linear-gradient(135deg, var(--gtp-meta-cyan), var(--gtp-meta-pink));
    border-color: transparent;
    box-shadow: 0 0 12px rgba(255, 110, 199, 0.4);
    animation: gtpMetaCvWinner 2.6s ease-in-out infinite;
}
@keyframes gtpMetaCvWinner {
    0%,100% { transform: scale(1); }
    50%     { transform: scale(1.08); }
}
.gtp-svc-metastudio__cv-label {
    font-family: var(--gtp-svc-fmono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(220, 230, 245, 0.5);
}

/* Phone stage */
.gtp-svc-metastudio__phones {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}
.gtp-svc-metastudio__phone {
    position: relative;
    border-radius: 16px;
    padding: 14px 10px 12px;
    background: rgba(8, 14, 26, 0.92);
    border: 1px solid rgba(94, 234, 255, 0.14);
    aspect-ratio: 9 / 16;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
}
.gtp-svc-metastudio__phone-notch {
    position: absolute;
    top: 6px; left: 50%;
    transform: translateX(-50%);
    width: 40px; height: 4px;
    border-radius: 999px;
    background: rgba(94, 234, 255, 0.28);
}
.gtp-svc-metastudio__label {
    align-self: center;
    margin-top: 6px;
    font-family: var(--gtp-svc-fmono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(94, 234, 255, 0.85);
}

.gtp-svc-metastudio__ad {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(94, 234, 255, 0.1);
}
.gtp-svc-metastudio__ad-head { display: flex; align-items: center; gap: 6px; font-size: 10px; color: rgba(220, 230, 245, 0.68); }
.gtp-svc-metastudio__ad-avatar { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, var(--gtp-meta-purple), var(--gtp-meta-pink)); }
.gtp-svc-metastudio__ad-name { font-family: var(--gtp-svc-fmono); font-size: 9.5px; }
.gtp-svc-metastudio__ad-media {
    flex: 1 1 auto;
    min-height: 60px;
    border-radius: 8px;
    position: relative;
    background:
        linear-gradient(135deg, rgba(94, 234, 255, 0.16), rgba(168, 121, 255, 0.2) 60%, rgba(255, 110, 199, 0.16)),
        rgba(6, 12, 22, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.gtp-svc-metastudio__ad-hook {
    font-family: var(--gtp-svc-fhead);
    font-size: 11px;
    font-weight: 800;
    color: rgba(240, 246, 255, 0.95);
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.35);
}
.gtp-svc-metastudio__ad-copy {
    font-family: var(--gtp-svc-fmono);
    font-size: 9.5px;
    letter-spacing: 0.06em;
    color: rgba(220, 230, 245, 0.65);
}
.gtp-svc-metastudio__ad-reactions {
    display: flex;
    gap: 4px;
}
.gtp-svc-metastudio__ad-reactions span {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(94, 234, 255, 0.6);
}
.gtp-svc-metastudio__ad-reactions span:nth-child(2) { background: rgba(255, 110, 199, 0.75); animation: gtpMetaReactBounce 2s ease-in-out infinite; }
.gtp-svc-metastudio__ad-reactions span:nth-child(3) { background: rgba(255, 179, 91, 0.75); animation: gtpMetaReactBounce 2s ease-in-out infinite 0.6s; }
@keyframes gtpMetaReactBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }

/* Story phone */
.gtp-svc-metastudio__story-progress {
    display: flex;
    gap: 3px;
    padding: 0 4px;
}
.gtp-svc-metastudio__story-progress span {
    flex: 1 1 auto;
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.15);
}
.gtp-svc-metastudio__story-progress span.is-active {
    background: var(--gtp-meta-cyan);
    animation: gtpMetaStoryFill 4s linear infinite;
    transform-origin: left;
}
@keyframes gtpMetaStoryFill {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
.gtp-svc-metastudio__ad--story { padding: 0; border: none; background: transparent; position: relative; }
.gtp-svc-metastudio__story-ring {
    position: absolute;
    top: 4px; left: 4px;
    width: 22px; height: 22px;
    border-radius: 50%;
    padding: 2px;
    background: conic-gradient(var(--gtp-meta-orange), var(--gtp-meta-pink), var(--gtp-meta-purple), var(--gtp-meta-cyan), var(--gtp-meta-orange));
    z-index: 2;
    animation: gtpMetaStoryRing 6s linear infinite;
}
.gtp-svc-metastudio__story-ring::before {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: rgba(8, 14, 26, 0.92);
}
@keyframes gtpMetaStoryRing { to { transform: rotate(360deg); } }
.gtp-svc-metastudio__ad-media--story {
    background:
        linear-gradient(180deg, rgba(255, 110, 199, 0.24), rgba(168, 121, 255, 0.24) 50%, rgba(94, 234, 255, 0.24)),
        rgba(6, 12, 22, 0.7);
    min-height: 100%;
    flex: 1 1 auto;
}
.gtp-svc-metastudio__ad-cta {
    text-align: center;
    padding: 6px;
    font-family: var(--gtp-svc-fmono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #0a0f1a;
    background: rgba(240, 246, 255, 0.9);
    border-radius: 999px;
    margin: 6px 6px 0;
}

/* Reel phone */
.gtp-svc-metastudio__ad--reel { padding: 0; border: none; background: transparent; }
.gtp-svc-metastudio__ad-media--reel {
    position: relative;
    background:
        linear-gradient(160deg, rgba(255, 179, 91, 0.28), rgba(255, 110, 199, 0.24) 60%, rgba(94, 234, 255, 0.24)),
        rgba(6, 12, 22, 0.7);
    min-height: 100%;
    flex: 1 1 auto;
}
.gtp-svc-metastudio__reel-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 32px; height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    color: white;
    z-index: 2;
    animation: gtpMetaReelPulse 2.4s ease-in-out infinite;
}
.gtp-svc-metastudio__reel-play svg { width: 14px; height: 14px; }
@keyframes gtpMetaReelPulse {
    0%,100% { transform: translate(-50%,-50%) scale(1); }
    50%     { transform: translate(-50%,-50%) scale(1.12); }
}
.gtp-svc-metastudio__ad-hook--reel { position: absolute; bottom: 8px; left: 8px; right: 8px; text-align: center; font-size: 10px; }
.gtp-svc-metastudio__ad-side {
    position: absolute;
    right: 6px; top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 2;
}
.gtp-svc-metastudio__ad-side span {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
}

.gtp-svc-metastudio__foot {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    font-family: var(--gtp-svc-fmono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(220, 230, 245, 0.5);
}
.gtp-svc-metastudio__platform { color: rgba(220, 230, 245, 0.75); }

/* Mobile — collapse phones to 3-col but scaled down */
@media (max-width: 640px) {
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio {
        min-height: 380px;
        padding: 18px 14px;
    }
    .gtp-svc-metastudio__phones { gap: 6px; }
    .gtp-svc-metastudio__phone { padding: 10px 6px 8px; gap: 6px; border-radius: 12px; }
    .gtp-svc-metastudio__label { font-size: 9px; margin-top: 4px; }
    .gtp-svc-metastudio__ad-name { font-size: 8.5px; }
    .gtp-svc-metastudio__ad-hook { font-size: 9.5px; padding: 2px 5px; }
    .gtp-svc-metastudio__ad-copy { font-size: 8px; }
    .gtp-svc-metastudio__panel { padding: 10px 12px; margin-bottom: 14px; }
    .gtp-svc-metastudio__panel-title { font-size: 10px; }
    .gtp-svc-metastudio__objectives li { font-size: 10px; padding: 4px 9px; }
    .gtp-svc-metastudio__foot { flex-wrap: wrap; margin-top: 14px; font-size: 9.5px; }
}

/* ============================================================
 * v6 REBUILD — Scroll Stopper Lab showcase.
 * Story is the featured big ad, Feed + Reel are compact side cards.
 * No 4-part wireframe zones. Micro-annotations (Hook / Offer / Ad CTA)
 * sit as small labels inside the mockup, not as dashed anatomy boxes.
 * ============================================================ */

.gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__showcase {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* v7: equal cards per feedback */
    grid-template-rows: auto;
    gap: 18px;
    margin-top: 40px;
    align-items: stretch;
    max-width: 1020px; /* v7: 900-1050 target */
    margin-inline: auto;
}
@media (max-width: 1024px) {
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__showcase {
        grid-template-columns: 1fr 1fr;
    }
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__ad--story {
        grid-column: 1 / -1;
        grid-row: 1;
    }
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__ad--feed {
        grid-column: 1;
        grid-row: 2;
    }
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__ad--reel {
        grid-column: 2;
        grid-row: 2;
    }
}
@media (max-width: 640px) {
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__showcase {
        grid-template-columns: 1fr;
    }
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__ad--story,
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__ad--feed,
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__ad--reel {
        grid-column: 1;
    }
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__ad--feed { grid-row: 2; }
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__ad--reel { grid-row: 3; }
}

.gtp-svc-scrollab__ad {
    position: relative;
    padding: 16px 16px 18px;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(94, 234, 255, 0.03), transparent 60%),
        var(--gtp-svc-surface);
    border: 1px solid rgba(94, 234, 255, 0.16);
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
}
.gtp-svc-scrollab__ad--story.is-hero {
    padding: 16px 16px 18px; /* v7: same as others for consistent height */
    border-color: rgba(255, 110, 199, 0.32);
    box-shadow: 0 0 0 1px rgba(255, 110, 199, 0.08) inset,
                0 20px 50px -30px rgba(168, 121, 255, 0.35);
    background:
        linear-gradient(180deg, rgba(255, 110, 199, 0.05), transparent 60%),
        var(--gtp-svc-surface);
}

/* Thumb-stop chip — INSIDE the card, not escaping */
.gtp-svc-scrollab__thumbstop {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-family: var(--gtp-svc-fmono);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #0a0f1a;
    background: linear-gradient(90deg, var(--gtp-meta-cyan), var(--gtp-meta-pink));
    box-shadow: 0 6px 16px -6px rgba(255, 110, 199, 0.5);
}
.gtp-svc-scrollab__thumbstop svg { width: 12px; height: 12px; }

/* Head row */
.gtp-svc-scrollab__ad-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.gtp-svc-scrollab__ad-format {
    font-family: var(--gtp-svc-fmono);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gtp-meta-cyan);
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(94, 234, 255, 0.07);
    border: 1px solid rgba(94, 234, 255, 0.28);
}
.gtp-svc-scrollab__ad--story .gtp-svc-scrollab__ad-format {
    color: var(--gtp-meta-pink);
    background: rgba(255, 110, 199, 0.07);
    border-color: rgba(255, 110, 199, 0.35);
}
.gtp-svc-scrollab__ad-brand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--gtp-svc-fmono);
    font-size: 10px;
    color: rgba(230, 240, 250, 0.75);
    letter-spacing: 0.05em;
}
.gtp-svc-scrollab__ad-avatar {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gtp-meta-cyan), var(--gtp-meta-pink));
    flex: 0 0 auto;
}
.gtp-svc-scrollab__ad-duration {
    font-family: var(--gtp-svc-fmono);
    font-size: 11px;
    color: rgba(230, 240, 250, 0.85);
    letter-spacing: 0.06em;
}

/* Story progress bars */
.gtp-svc-scrollab__ad-progress {
    display: flex;
    gap: 4px;
}
.gtp-svc-scrollab__ad-progress span {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.14);
}
.gtp-svc-scrollab__ad-progress span.is-active {
    background: linear-gradient(90deg, var(--gtp-meta-cyan), var(--gtp-meta-pink));
}

/* Canvas — the ad content */
.gtp-svc-scrollab__ad-canvas {
    position: relative;
    padding: 20px 18px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1 1 auto;
    overflow: hidden;
}
/* v7: unified canvas heights so cards read as equal-height set */
.gtp-svc-scrollab__ad-canvas--story {
    min-height: 240px;
    background:
        radial-gradient(circle at 15% 15%, rgba(255, 179, 91, 0.28), transparent 55%),
        radial-gradient(circle at 85% 85%, rgba(94, 234, 255, 0.24), transparent 55%),
        linear-gradient(180deg, rgba(255, 110, 199, 0.24), rgba(168, 121, 255, 0.28) 50%, rgba(94, 234, 255, 0.22)),
        rgba(6, 12, 22, 0.5);
    justify-content: space-between;
}
.gtp-svc-scrollab__ad-canvas--feed {
    min-height: 240px;
    background:
        linear-gradient(135deg, rgba(94, 234, 255, 0.2), rgba(168, 121, 255, 0.16)),
        rgba(6, 12, 22, 0.6);
    justify-content: space-between;
}
.gtp-svc-scrollab__ad-canvas--reel {
    min-height: 240px;
    background:
        radial-gradient(circle at 50% 40%, rgba(94, 234, 255, 0.25), transparent 55%),
        radial-gradient(circle at 60% 80%, rgba(168, 121, 255, 0.3), transparent 55%),
        linear-gradient(160deg, rgba(255, 179, 91, 0.15), rgba(255, 110, 199, 0.14) 60%, rgba(94, 234, 255, 0.14)),
        rgba(6, 12, 22, 0.55);
    justify-content: space-between;
}

/* Reel play icon */
.gtp-svc-scrollab__ad-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 42px; height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    color: white;
    animation: gtpMetaReelPulse 2.4s ease-in-out infinite;
}
.gtp-svc-scrollab__ad-play svg { width: 16px; height: 16px; }

/* Hook — the main headline in the mockup */
.gtp-svc-scrollab__ad-hook {
    margin: 0;
    font-family: var(--gtp-svc-fhead);
    font-weight: 800;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.98);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.gtp-svc-scrollab__ad--story .gtp-svc-scrollab__ad-hook { font-size: 15px; max-width: 96%; } /* v7: same weight as feed/reel */
.gtp-svc-scrollab__ad--feed  .gtp-svc-scrollab__ad-hook { font-size: 15px; }
.gtp-svc-scrollab__ad--reel  .gtp-svc-scrollab__ad-hook {
    font-size: 14px;
    align-self: flex-start;
    padding: 5px 10px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.4);
    max-width: 96%;
}

/* Offer row */
.gtp-svc-scrollab__ad-offer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #0a0f1a;
    font-family: var(--gtp-svc-fmono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* v7: mock CTA becomes a tiny inline label at bottom — not a button-looking
   element. Reads as "part of the mock ad", never as a real site CTA. */
.gtp-svc-scrollab__ad-cta-mock {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    align-self: flex-start;
    padding: 0;
    background: none;
    border: none;
    font-family: var(--gtp-svc-fmono);
    font-size: 10px;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.04em;
}
.gtp-svc-scrollab__ad-cta-arrow { display: none; }
.gtp-svc-scrollab__ad-cta-text {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
}
.gtp-svc-scrollab__ad--feed .gtp-svc-scrollab__ad-cta-mock,
.gtp-svc-scrollab__ad--reel .gtp-svc-scrollab__ad-cta-mock {
    align-self: flex-start;
}

/* Micro annotations — Hook / Offer / Ad CTA labels inside the mockup */
.gtp-svc-scrollab__annot {
    font-family: var(--gtp-svc-fmono);
    font-size: 8.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.gtp-svc-scrollab__annot--top-left {
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    z-index: 3;
}
.gtp-svc-scrollab__annot--inline {
    background: none;
    border: none;
    padding: 0;
    color: rgba(10, 15, 26, 0.55);
    letter-spacing: 0.14em;
    font-size: 8px;
    padding-inline-end: 4px;
    border-inline-end: 1px solid rgba(10, 15, 26, 0.15);
}
.gtp-svc-scrollab__ad-cta-mock .gtp-svc-scrollab__annot--inline {
    color: rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 255, 255, 0.18);
}

/* Note text at bottom */
.gtp-svc-scrollab__ad-note {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--gtp-svc-text-dim);
}
.gtp-svc-scrollab__ad--story .gtp-svc-scrollab__ad-note { font-size: 14px; }

/* ============================================================
 * 2. SCROLL STOPPER LAB (v3-v5 rules kept below for regression safety
 *    — the old __card layout is not rendered anymore).
 * ============================================================ */

.gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab {
    padding: clamp(60px, 8vw, 90px) 0;
    background: linear-gradient(180deg, var(--gtp-svc-bg) 0%, var(--gtp-svc-bg-alt) 100%);
}

.gtp-svc-scrollab__stage {
    position: relative;
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: clamp(16px, 2vw, 28px);
    align-items: stretch;
    margin-top: 32px;
}

/* Vertical scroll indicator on the right (LTR) — in RTL becomes on the right */
.gtp-svc-scrollab__scrollbar {
    position: relative;
    width: 4px;
    justify-self: center;
    align-self: stretch;
    border-radius: 4px;
    background: rgba(94, 234, 255, 0.1);
    overflow: visible;
}
.gtp-svc-scrollab__thumb {
    position: absolute;
    left: -3px; right: -3px;
    top: 42%;
    height: 40px;
    border-radius: 6px;
    background: linear-gradient(180deg, var(--gtp-meta-cyan), var(--gtp-meta-purple), var(--gtp-meta-pink));
    box-shadow: 0 0 14px rgba(168, 121, 255, 0.6);
    animation: gtpScrollabThumb 4.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
@keyframes gtpScrollabThumb {
    0%   { top: 8%;  opacity: 0.9; }
    35%  { top: 42%; opacity: 1; }   /* stops on middle (winner) */
    65%  { top: 42%; opacity: 1; }
    100% { top: 78%; opacity: 0.4; }
}

.gtp-svc-scrollab__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: clamp(14px, 2vw, 24px);
}

.gtp-svc-scrollab__card {
    position: relative;
    padding: 18px 16px;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(94, 234, 255, 0.04), transparent 70%),
        var(--gtp-svc-surface);
    border: 1px solid rgba(94, 234, 255, 0.16);
    display: flex;
    flex-direction: column;
    gap: 12px;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .55s ease, transform .55s ease;
    transition-delay: calc(var(--i) * 0.12s);
}
[data-meta-scrollab].is-visible .gtp-svc-scrollab__card { opacity: 1; transform: none; }

.gtp-svc-scrollab__card.is-winner {
    border-color: rgba(255, 110, 199, 0.35);
    box-shadow: 0 0 0 1px rgba(255, 110, 199, 0.14), 0 20px 40px -24px rgba(168, 121, 255, 0.4);
}
.gtp-svc-scrollab__winner-pill {
    position: absolute;
    top: -12px; inset-inline-start: 16px;
    padding: 4px 10px;
    border-radius: 999px;
    font-family: var(--gtp-svc-fmono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #0a0f1a;
    background: linear-gradient(90deg, var(--gtp-meta-cyan), var(--gtp-meta-pink));
    box-shadow: 0 6px 20px -6px rgba(255, 110, 199, 0.5);
}

.gtp-svc-scrollab__card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--gtp-svc-fmono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.gtp-svc-scrollab__format { color: var(--gtp-meta-cyan); }
.gtp-svc-scrollab__index  { color: rgba(220, 230, 245, 0.35); }

.gtp-svc-scrollab__mock {
    position: relative;
    min-height: 340px;
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: rgba(6, 12, 22, 0.7);
    border: 1px solid rgba(94, 234, 255, 0.1);
    overflow: hidden;
}
.gtp-svc-scrollab__zone {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 7px 9px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(94, 234, 255, 0.2);
}
.gtp-svc-scrollab__zone-label {
    font-family: var(--gtp-svc-fmono);
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.7;
}
.gtp-svc-scrollab__zone-copy {
    font-family: var(--gtp-svc-fbody);
    font-size: 11.5px;
    line-height: 1.35;
    color: rgba(240, 246, 255, 0.92);
}
.gtp-svc-scrollab__zone--hook {
    color: var(--gtp-meta-orange);
    border-color: rgba(255, 179, 91, 0.4);
    background: rgba(255, 179, 91, 0.06);
}
.gtp-svc-scrollab__zone--creative {
    flex: 1 1 auto;
    justify-content: center;
    background:
        linear-gradient(135deg, rgba(94, 234, 255, 0.1), rgba(168, 121, 255, 0.14) 60%, rgba(255, 110, 199, 0.1)),
        rgba(6, 12, 22, 0.7);
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.06);
    text-align: center;
}
.gtp-svc-scrollab__zone--creative .gtp-svc-scrollab__zone-copy {
    color: rgba(240, 246, 255, 0.9);
}
.gtp-svc-scrollab__zone--offer {
    color: var(--gtp-meta-purple);
    border-color: rgba(168, 121, 255, 0.35);
    background: rgba(168, 121, 255, 0.06);
}
/* v4: mock CTA desaturated so it reads as part of an ad preview,
   not a real site CTA that a visitor might click. */
.gtp-svc-scrollab__zone--cta {
    background: rgba(94, 234, 255, 0.06);
    border: 1px dashed rgba(94, 234, 255, 0.32);
    align-items: center;
    padding: 8px 10px;
}
.gtp-svc-scrollab__zone--cta .gtp-svc-scrollab__zone-copy {
    color: rgba(94, 234, 255, 0.95);
    font-weight: 700;
    font-size: 12px;
}
.gtp-svc-scrollab__card--story.is-winner .gtp-svc-scrollab__zone--cta {
    background: rgba(255, 110, 199, 0.08);
    border-color: rgba(255, 110, 199, 0.4);
}
.gtp-svc-scrollab__card--story.is-winner .gtp-svc-scrollab__zone--cta .gtp-svc-scrollab__zone-copy {
    color: rgba(255, 110, 199, 0.95);
}

/* v4: preview label at the top of each card */
.gtp-svc-scrollab__preview-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 3px 8px;
    border-radius: 6px;
    font-family: var(--gtp-svc-fmono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(220, 230, 245, 0.55);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(94, 234, 255, 0.12);
    margin-bottom: 4px;
}
.gtp-svc-scrollab__preview-tag::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: rgba(94, 234, 255, 0.6);
    box-shadow: 0 0 6px rgba(94, 234, 255, 0.5);
}

.gtp-svc-scrollab__note {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--gtp-svc-text-dim);
}

/* Story-specific zones */
.gtp-svc-scrollab__story-bars {
    display: flex; gap: 3px; padding-bottom: 2px;
}
.gtp-svc-scrollab__story-bars span {
    flex: 1 1 auto; height: 2px; border-radius: 2px;
    background: rgba(255, 255, 255, 0.15);
}
.gtp-svc-scrollab__story-bars span.is-active {
    background: linear-gradient(90deg, var(--gtp-meta-cyan), var(--gtp-meta-pink));
}

/* Reel play glyph */
.gtp-svc-scrollab__reel-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    color: white;
    z-index: 3;
    pointer-events: none;
}
.gtp-svc-scrollab__reel-play svg { width: 18px; height: 18px; }

/* Mobile */
@media (max-width: 900px) {
    .gtp-svc-scrollab__grid { grid-template-columns: 1fr; }
    .gtp-svc-scrollab__stage { grid-template-columns: 1fr; }
    .gtp-svc-scrollab__scrollbar { display: none; }
    .gtp-svc-scrollab__mock { aspect-ratio: 4 / 3; }
}

/* ============================================================
 * 3. CREATIVE LAB — 6 unique ad mockups
 * ============================================================ */

.gtp-service[data-service-slug="meta-ads"] .gtp-svc-creativelab {
    padding: clamp(60px, 8vw, 90px) 0;
}

.gtp-svc-creativelab__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 24px);
    margin-top: 32px;
}
@media (max-width: 900px) {
    .gtp-svc-creativelab__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .gtp-svc-creativelab__grid { grid-template-columns: 1fr; }
}

.gtp-svc-creativelab__card {
    position: relative;
    padding: 18px 18px 20px;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(94, 234, 255, 0.04), transparent 70%),
        var(--gtp-svc-surface);
    border: 1px solid rgba(94, 234, 255, 0.16);
    display: flex;
    flex-direction: column;
    gap: 12px;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .55s ease, transform .55s ease, border-color .25s ease;
    transition-delay: calc(var(--i) * 0.08s);
}
[data-meta-lab].is-visible .gtp-svc-creativelab__card { opacity: 1; transform: none; }
.gtp-svc-creativelab__card:hover {
    border-color: rgba(94, 234, 255, 0.36);
    transform: translateY(-2px);
}

.gtp-svc-creativelab__tag {
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: 999px;
    font-family: var(--gtp-svc-fmono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gtp-meta-cyan);
    background: rgba(94, 234, 255, 0.08);
    border: 1px solid rgba(94, 234, 255, 0.22);
}

.gtp-svc-creativelab__mock {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(6, 12, 22, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
}
.gtp-svc-creativelab__text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--gtp-svc-text-dim);
}

/* Card 1: Product */
.gtp-svc-creativelab__mock-image {
    position: relative;
    flex: 1 1 auto;
    background:
        radial-gradient(circle at 30% 30%, rgba(94, 234, 255, 0.25), transparent 55%),
        linear-gradient(135deg, rgba(168, 121, 255, 0.18), rgba(255, 110, 199, 0.14));
}
.gtp-svc-creativelab__product-shape {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 60px; height: 60px;
    border-radius: 16px;
    background: linear-gradient(160deg, rgba(240, 246, 255, 0.9), rgba(220, 230, 245, 0.5));
    box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.5);
}
.gtp-svc-creativelab__price-chip {
    position: absolute;
    top: 8px; inset-inline-end: 8px;
    padding: 4px 8px;
    border-radius: 8px;
    font-family: var(--gtp-svc-fhead);
    font-size: 10px;
    font-weight: 800;
    color: #0a0f1a;
    background: var(--gtp-meta-orange);
}
.gtp-svc-creativelab__mock-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: rgba(6, 12, 22, 0.85);
    border-top: 1px solid rgba(94, 234, 255, 0.1);
}
.gtp-svc-creativelab__mock-title { font-family: var(--gtp-svc-fhead); font-size: 12px; font-weight: 700; color: rgba(240, 246, 255, 0.92); }
.gtp-svc-creativelab__mock-cta {
    padding: 4px 10px;
    border-radius: 999px;
    font-family: var(--gtp-svc-fmono);
    font-size: 10px;
    font-weight: 700;
    color: #0a0f1a;
    background: linear-gradient(90deg, var(--gtp-meta-cyan), var(--gtp-meta-purple));
}

/* Card 2: Service */
.gtp-svc-creativelab__mock-image--service {
    background: linear-gradient(150deg, rgba(94, 234, 255, 0.12), rgba(168, 121, 255, 0.12));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px;
}
.gtp-svc-creativelab__service-icon {
    width: 34px; height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gtp-meta-cyan), var(--gtp-meta-purple));
    color: #0a0f1a;
}
.gtp-svc-creativelab__service-icon svg { width: 18px; height: 18px; }
.gtp-svc-creativelab__service-line {
    width: 60%; height: 6px;
    border-radius: 3px;
    background: rgba(240, 246, 255, 0.14);
}
.gtp-svc-creativelab__service-line--short { width: 30%; }

/* Card 3: Before / After */
.gtp-svc-creativelab__mock--split {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}
.gtp-svc-creativelab__split-half { flex: 1 1 50%; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 10px; }
.gtp-svc-creativelab__split-half--before { background: linear-gradient(180deg, rgba(220, 230, 245, 0.12), rgba(150, 160, 180, 0.16)); }
.gtp-svc-creativelab__split-half--after  { background: linear-gradient(180deg, rgba(94, 234, 255, 0.18), rgba(168, 121, 255, 0.22)); }
.gtp-svc-creativelab__split-label {
    font-family: var(--gtp-svc-fmono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(240, 246, 255, 0.9);
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.35);
}
.gtp-svc-creativelab__split-divider {
    position: absolute;
    top: 0; bottom: 0; left: 50%;
    width: 2px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.6) 45%, rgba(255, 255, 255, 0.6) 55%, transparent);
    transform: translateX(-50%);
}

/* Card 4: Testimonial */
.gtp-svc-creativelab__mock--testimonial {
    background: linear-gradient(180deg, rgba(255, 110, 199, 0.08), rgba(168, 121, 255, 0.08));
    padding: 14px;
    justify-content: space-between;
}
.gtp-svc-creativelab__quote-mark {
    font-family: Georgia, serif;
    font-size: 44px;
    line-height: 0.6;
    color: var(--gtp-meta-pink);
}
.gtp-svc-creativelab__quote-line {
    height: 6px; width: 90%;
    border-radius: 3px;
    background: rgba(240, 246, 255, 0.14);
    margin-top: 6px;
}
.gtp-svc-creativelab__quote-line--short { width: 55%; }
.gtp-svc-creativelab__quote-attrib {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.gtp-svc-creativelab__quote-avatar { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, var(--gtp-meta-cyan), var(--gtp-meta-purple)); }
.gtp-svc-creativelab__quote-name { font-family: var(--gtp-svc-fmono); font-size: 10.5px; color: rgba(240, 246, 255, 0.85); flex: 1 1 auto; }
.gtp-svc-creativelab__quote-stars { color: var(--gtp-meta-orange); font-size: 10px; letter-spacing: 1px; }

/* Card 5: Offer */
.gtp-svc-creativelab__mock--offer {
    background: linear-gradient(160deg, rgba(255, 179, 91, 0.18), rgba(255, 110, 199, 0.14));
    padding: 14px;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.gtp-svc-creativelab__offer-burst {
    width: 56px; height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gtp-meta-orange);
    animation: gtpMetaOfferSpin 10s linear infinite;
}
.gtp-svc-creativelab__offer-burst svg { width: 100%; height: 100%; }
@keyframes gtpMetaOfferSpin { to { transform: rotate(360deg); } }
.gtp-svc-creativelab__offer-main {
    font-family: var(--gtp-svc-fhead);
    font-size: 15px;
    font-weight: 800;
    color: rgba(240, 246, 255, 0.95);
}
.gtp-svc-creativelab__offer-timer {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}
.gtp-svc-creativelab__offer-timer span {
    width: 18px; height: 18px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 179, 91, 0.4);
}

/* Card 6: Retargeting */
.gtp-svc-creativelab__mock--retarget {
    background: linear-gradient(180deg, rgba(94, 234, 255, 0.14), rgba(168, 121, 255, 0.12));
    padding: 12px;
    justify-content: space-between;
    align-items: stretch;
}
.gtp-svc-creativelab__retarget-badge {
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: 999px;
    font-family: var(--gtp-svc-fhead);
    font-size: 11px;
    font-weight: 700;
    color: #0a0f1a;
    background: linear-gradient(90deg, var(--gtp-meta-cyan), var(--gtp-meta-pink));
}
.gtp-svc-creativelab__retarget-cart {
    display: flex;
    gap: 6px;
    align-self: flex-start;
    margin-top: 8px;
}
.gtp-svc-creativelab__retarget-cart span {
    width: 24px; height: 24px;
    border-radius: 4px;
    background: rgba(240, 246, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.gtp-svc-creativelab__retarget-cta {
    text-align: center;
    padding: 6px;
    border-radius: 999px;
    font-family: var(--gtp-svc-fmono);
    font-size: 10.5px;
    font-weight: 700;
    color: rgba(240, 246, 255, 0.95);
    background: rgba(6, 12, 22, 0.65);
    border: 1px solid rgba(94, 234, 255, 0.3);
}

/* ============================================================
 * v6 REBUILD — Audience Journey as horizontal timeline.
 * Node structure: dot + kicker + title + text + ad-type row + chips.
 * Desktop = row with connector line. Mobile = vertical timeline.
 * ============================================================ */

.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metafunnel__journey {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2.4vw, 32px);
    margin-top: 44px;
    padding-top: 28px;
}

/* v6: Timeline track hidden on desktop — was misaligned with cards.
   On mobile still shown as vertical stripe. */
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metafunnel__track {
    display: none;
}

.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metafunnel__stage-node {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 28px 22px 22px;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(94, 234, 255, 0.03), transparent 70%),
        var(--gtp-svc-surface);
    border: 1px solid rgba(94, 234, 255, 0.14);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .55s ease, transform .55s ease;
    transition-delay: calc(var(--i) * 0.14s);
}
[data-meta-funnel].is-visible .gtp-svc-metafunnel__stage-node {
    opacity: 1;
    transform: none;
}

/* v7: Node dots removed ENTIRELY (desktop + mobile) per feedback —
   floating dots without a connecting line read as broken. Cards stand on
   their own without any timeline decoration. */
.gtp-svc-metafunnel__node-dot { display: none !important; }

/* Kicker index */
.gtp-svc-metafunnel__node-index {
    font-family: var(--gtp-svc-fmono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gtp-meta-cyan);
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(94, 234, 255, 0.06);
    border: 1px solid rgba(94, 234, 255, 0.24);
}
.gtp-svc-metafunnel__stage-node--warm .gtp-svc-metafunnel__node-index {
    color: var(--gtp-meta-purple);
    background: rgba(168, 121, 255, 0.06);
    border-color: rgba(168, 121, 255, 0.32);
}
.gtp-svc-metafunnel__stage-node--hot .gtp-svc-metafunnel__node-index {
    color: var(--gtp-meta-pink);
    background: rgba(255, 110, 199, 0.06);
    border-color: rgba(255, 110, 199, 0.32);
}

.gtp-svc-metafunnel__node-title {
    margin: 0;
    font-family: var(--gtp-svc-fhead);
    font-size: clamp(17px, 1.4vw, 20px);
    font-weight: 800;
    line-height: 1.3;
    color: var(--gtp-svc-text);
}
.gtp-svc-metafunnel__node-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--gtp-svc-text-dim);
}

/* Ad-type row (mini indicator) */
.gtp-svc-metafunnel__adtype {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(94, 234, 255, 0.12);
}
.gtp-svc-metafunnel__adtype-label {
    font-family: var(--gtp-svc-fmono);
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(220, 230, 245, 0.5);
}
.gtp-svc-metafunnel__adtype-value {
    font-family: var(--gtp-svc-fmono);
    font-size: 12px;
    color: rgba(240, 246, 255, 0.94);
    letter-spacing: 0.04em;
}

.gtp-svc-metafunnel__node-chips {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.gtp-svc-metafunnel__node-chips li {
    padding: 4px 10px;
    border-radius: 999px;
    font-family: var(--gtp-svc-fmono);
    font-size: 10.5px;
    color: rgba(220, 230, 245, 0.85);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(94, 234, 255, 0.16);
}

/* v7 Mobile — just clean stacked cards, no timeline/dots */
@media (max-width: 900px) {
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-metafunnel__journey {
        grid-template-columns: 1fr;
        padding-top: 0;
        padding-inline-start: 0;
        gap: 16px;
    }
}

/* ============================================================
 * 4. AUDIENCE FUNNEL (legacy CSS below kept for regression safety;
 *    old .gtp-svc-metafunnel__stage HTML is not rendered anymore)
 * ============================================================ */

.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metafunnel {
    padding: clamp(60px, 8vw, 90px) 0;
    background: linear-gradient(180deg, var(--gtp-svc-bg-alt) 0%, var(--gtp-svc-bg) 100%);
}

.gtp-svc-metafunnel__stage {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 24px);
    margin-top: 32px;
    position: relative;
}
@media (max-width: 900px) { .gtp-svc-metafunnel__stage { grid-template-columns: 1fr; } }

.gtp-svc-metafunnel__col {
    position: relative;
    padding: 22px 20px;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(94, 234, 255, 0.04), transparent 70%),
        var(--gtp-svc-surface);
    border: 1px solid rgba(94, 234, 255, 0.16);
    display: flex;
    flex-direction: column;
    gap: 12px;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .55s ease, transform .55s ease;
    transition-delay: calc(var(--i) * 0.12s);
}
[data-meta-funnel].is-visible .gtp-svc-metafunnel__col { opacity: 1; transform: none; }

.gtp-svc-metafunnel__col--cold::before { background: linear-gradient(180deg, rgba(94, 234, 255, 0.55), transparent 65%); }
.gtp-svc-metafunnel__col--warm::before { background: linear-gradient(180deg, rgba(168, 121, 255, 0.6), transparent 65%); }
.gtp-svc-metafunnel__col--hot::before  { background: linear-gradient(180deg, rgba(255, 110, 199, 0.65), transparent 65%); }

.gtp-svc-metafunnel__col::before {
    content: "";
    position: absolute;
    top: 0; inset-inline-start: 0;
    width: 3px;
    bottom: 40%;
    border-radius: 0 3px 3px 0;
}

.gtp-svc-metafunnel__col-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--gtp-svc-fmono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.gtp-svc-metafunnel__col-index { color: rgba(220, 230, 245, 0.35); }
.gtp-svc-metafunnel__col--cold .gtp-svc-metafunnel__col-temp { color: var(--gtp-meta-cyan); }
.gtp-svc-metafunnel__col--warm .gtp-svc-metafunnel__col-temp { color: var(--gtp-meta-purple); }
.gtp-svc-metafunnel__col--hot  .gtp-svc-metafunnel__col-temp { color: var(--gtp-meta-pink); }

.gtp-svc-metafunnel__col-title {
    margin: 0;
    font-family: var(--gtp-svc-fhead);
    font-size: 18px;
    font-weight: 800;
    color: var(--gtp-svc-text);
    line-height: 1.35;
}
.gtp-svc-metafunnel__col-text {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--gtp-svc-text-dim);
    flex: 1 1 auto;
}

.gtp-svc-metafunnel__chips {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px dashed rgba(94, 234, 255, 0.15);
}
.gtp-svc-metafunnel__chips li {
    padding: 4px 10px;
    border-radius: 999px;
    font-family: var(--gtp-svc-fmono);
    font-size: 11px;
    color: rgba(220, 230, 245, 0.75);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(94, 234, 255, 0.14);
}

/* ============================================================
 * 5. SIX-STEP METHOD — small icons, proper card style, 3×2 grid
 * v2 rebuild: icons were rendered enormous because the shared
 * .gtp-svc-method__step assumes a specific card layout that
 * doesn't exist in the six-block variant. This resets the card
 * style entirely for meta-ads sixblock.
 * ============================================================ */

.gtp-service[data-service-slug="meta-ads"] .gtp-svc-what--sixblock { padding: clamp(56px, 8vw, 88px) 0; }

.gtp-service[data-service-slug="meta-ads"] .gtp-svc-what--sixblock .gtp-svc-method--six {
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 22px);
}
@media (max-width: 900px) { .gtp-service[data-service-slug="meta-ads"] .gtp-svc-what--sixblock .gtp-svc-method--six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gtp-service[data-service-slug="meta-ads"] .gtp-svc-what--sixblock .gtp-svc-method--six { grid-template-columns: 1fr; } }

.gtp-service[data-service-slug="meta-ads"] .gtp-svc-what--sixblock .gtp-svc-method__step {
    position: relative;
    padding: 26px 22px 22px;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(94, 234, 255, 0.04), transparent 70%),
        var(--gtp-svc-surface);
    border: 1px solid rgba(94, 234, 255, 0.16);
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s ease, transform .5s ease, border-color .25s ease;
    transition-delay: calc(var(--i) * 0.08s);
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-what--sixblock .gtp-svc-method__step.is-visible {
    opacity: 1;
    transform: none;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-what--sixblock .gtp-svc-method__step:hover {
    border-color: rgba(94, 234, 255, 0.36);
}

/* Number badge — small pill in top corner */
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-what--sixblock .gtp-svc-method__n {
    position: absolute;
    top: 16px;
    inset-inline-start: 16px;
    padding: 3px 8px;
    border-radius: 6px;
    font-family: var(--gtp-svc-fmono);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: var(--gtp-meta-cyan);
    background: rgba(94, 234, 255, 0.08);
    border: 1px solid rgba(94, 234, 255, 0.28);
}

/* v6: Icons REMOVED entirely. Number gets a large editorial treatment.
   Timeline connector runs between rows on desktop, vertical on mobile. */
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-what--sixblock .gtp-svc-method__icon {
    display: none;
}

.gtp-service[data-service-slug="meta-ads"] .gtp-svc-what--sixblock .gtp-svc-method--six {
    position: relative;
    padding-top: 12px;
}
/* Desktop connector — subtle horizontal line between top row cards */
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-what--sixblock .gtp-svc-method--six::before {
    content: "";
    position: absolute;
    top: 40px;
    inset-inline-start: 8%;
    inset-inline-end: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(94, 234, 255, 0.3), rgba(255, 110, 199, 0.3), transparent);
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}
@media (max-width: 900px) {
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-what--sixblock .gtp-svc-method--six::before {
        display: none;
    }
}

/* Number becomes editorial — big + accent */
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-what--sixblock .gtp-svc-method__step {
    padding: 34px 24px 24px;
    position: relative;
    background:
        linear-gradient(180deg, rgba(94, 234, 255, 0.03), transparent 60%),
        var(--gtp-svc-surface);
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-what--sixblock .gtp-svc-method__n {
    position: static !important;
    display: inline-block !important;
    font-family: var(--gtp-svc-fhead);
    font-size: 38px;
    font-weight: 800;
    line-height: 1.05;
    color: var(--gtp-meta-cyan);
    background: transparent !important;
    border: none !important;
    letter-spacing: -0.01em;
    padding: 0 !important;
    margin-bottom: 18px; /* v6: more breathing room */
    width: auto !important;
    height: auto !important;
    min-width: 46px;
    text-align: start;
    opacity: 0.85;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-what--sixblock .gtp-svc-method__title {
    margin-top: 4px;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-what--sixblock .gtp-svc-method__title {
    position: relative;
    padding-bottom: 10px;
    margin-top: 4px;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-what--sixblock .gtp-svc-method__title::after {
    content: "";
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--gtp-meta-cyan), var(--gtp-meta-pink));
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-what--sixblock .gtp-svc-method__text {
    margin-top: 6px;
}

.gtp-service[data-service-slug="meta-ads"] .gtp-svc-what--sixblock .gtp-svc-method__title {
    margin: 4px 0 0;
    font-family: var(--gtp-svc-fhead);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--gtp-svc-text);
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-what--sixblock .gtp-svc-method__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--gtp-svc-text-dim);
}

@media (max-width: 640px) {
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-what--sixblock .gtp-svc-method__step { padding: 22px 18px 18px; }
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-what--sixblock .gtp-svc-method__icon { width: 42px; height: 42px; margin-top: 24px; }
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-what--sixblock .gtp-svc-method__title { font-size: 16px; }
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-what--sixblock .gtp-svc-method__text { font-size: 13.5px; }
}

/* ============================================================
 * 5b. CLIENTS SECTION (broken in v1 — base CSS was scoped only to
 * organic-seo, meta-ads had no styling and logos stacked as a raw
 * bullet list). Rebuild with a solid, non-magic grid.
 * ============================================================ */

.gtp-service[data-service-slug="meta-ads"] .gtp-svc-clients {
    padding: clamp(56px, 8vw, 84px) 0;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-clients__grid {
    list-style: none;
    margin: 40px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-clients__item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 12px;
    min-height: 128px;
    border-radius: var(--gtp-svc-radius);
    background: rgba(10, 18, 32, 0.55);
    border: 1px solid rgba(94, 234, 255, 0.14);
    transition: border-color .35s ease, background .35s ease, transform .35s ease, box-shadow .35s ease;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-clients__item:hover {
    border-color: rgba(94, 234, 255, 0.5);
    background: rgba(94, 234, 255, 0.06);
    transform: translateY(-3px);
    box-shadow: 0 18px 34px -18px rgba(94, 234, 255, 0.45);
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-clients__logo {
    display: block;
    max-width: 100%;
    max-height: 100px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(1) brightness(1.5) contrast(0.9);
    filter: url(#gtpClientsCyan);
    opacity: 0.95;
    transition: filter .35s ease, opacity .35s ease;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-clients__item:hover .gtp-svc-clients__logo {
    filter: grayscale(0) brightness(1.05);
    filter: url(#gtpClientsCyanBright);
    opacity: 1;
}

@media (max-width: 1024px) {
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-clients__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-clients { padding: 52px 0 60px; }
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-clients__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-top: 28px;
    }
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-clients__item {
        padding: 10px;
        min-height: 100px;
    }
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-clients__logo { max-height: 78px; }
}

/* ============================================================
 * 6. META KPI viz variants — --stars, --freq, --chat, --abc
 * (viz base rules come from google-ads CSS which is not loaded here,
 * so we redefine the shared base too for meta-ads)
 * ============================================================ */

.gtp-service[data-service-slug="meta-ads"] .gtp-svc-kpi__viz {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px dashed rgba(94, 234, 255, 0.18);
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    flex-wrap: wrap;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-kpi__viz-caption,
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-kpi__viz-badge,
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-kpi__viz-mult {
    white-space: nowrap;
}

/* Mobile KPI stack (same technique as google-ads) */
@media (max-width: 640px) {
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-kpi {
        flex-direction: column !important;
        align-items: stretch;
        padding: 22px 20px !important;
        gap: 12px !important;
    }
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-kpi__viz {
        margin-top: 4px;
        padding-top: 12px;
        min-height: 40px;
        gap: 12px;
        justify-content: space-between;
    }
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-kpi__viz > svg {
        max-width: 84px; height: auto; flex: 0 0 auto;
    }
}

/* Reused-from-Google-Ads viz classes — redefined here because google-ads CSS
   is only loaded on google-ads slug. Same visual language. */
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-kpi__viz--bars { justify-content: flex-start; }
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-kpi__viz--bars span {
    display: inline-block;
    width: 8px; height: 32px;
    background: linear-gradient(180deg, rgba(94,234,255,0.95) 0%, rgba(94,234,255,0.35) 100%);
    border-radius: 2px 2px 0 0;
    transform-origin: bottom center;
    transform: scaleY(0);
    animation: gtpMetaKpiBar 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-kpi__viz--bars span:nth-child(1) { animation-delay: 0.05s; }
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-kpi__viz--bars span:nth-child(2) { animation-delay: 0.15s; }
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-kpi__viz--bars span:nth-child(3) { animation-delay: 0.25s; }
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-kpi__viz--bars span:nth-child(4) { animation-delay: 0.35s; }
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-kpi__viz--bars span:nth-child(5) {
    animation-delay: 0.45s;
    box-shadow: 0 0 12px rgba(94,234,255,0.55);
}
@keyframes gtpMetaKpiBar { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.gtp-service[data-service-slug="meta-ads"] .gtp-svc-kpi__viz--trend svg { width: 88px; height: 26px; flex: 0 0 auto; }
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-kpi__viz--trend path {
    stroke-dasharray: 180; stroke-dashoffset: 180;
    animation: gtpMetaKpiTrend 1.1s ease-out 0.1s forwards;
}
@keyframes gtpMetaKpiTrend { to { stroke-dashoffset: 0; } }

.gtp-service[data-service-slug="meta-ads"] .gtp-svc-kpi__viz-badge {
    font-family: var(--gtp-svc-fmono);
    font-size: 10px; letter-spacing: 0.14em;
    padding: 3px 8px; border-radius: 999px;
    border: 1px solid rgba(94,234,255,0.35);
    color: rgba(94,234,255,0.95);
    background: rgba(94,234,255,0.06);
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-kpi__viz-badge--good {
    border-color: rgba(122,220,156,0.4);
    color: rgba(160,240,195,0.98);
    background: rgba(122,220,156,0.08);
}

.gtp-service[data-service-slug="meta-ads"] .gtp-svc-kpi__viz--percent { justify-content: flex-start; }
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-kpi__viz-percent {
    font-family: var(--gtp-svc-fmono);
    font-weight: 700; font-size: 22px;
    color: rgba(94,234,255,1);
    padding: 4px 10px; border-radius: 8px;
    background: rgba(94,234,255,0.09);
    border: 1px solid rgba(94,234,255,0.28);
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-kpi__viz-caption {
    font-family: var(--gtp-svc-fmono);
    font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(226,232,246,0.55);
}

.gtp-service[data-service-slug="meta-ads"] .gtp-svc-kpi__viz--mult { justify-content: flex-start; }
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-kpi__viz-mult {
    font-family: var(--gtp-svc-fmono);
    font-weight: 700; font-size: 11px;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(94,234,255,1);
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-kpi__viz-mult-arc { width: 60px; height: 22px; flex: 0 0 auto; }
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-kpi__viz-mult-arc path:first-child {
    stroke-dasharray: 90; stroke-dashoffset: 90;
    animation: gtpMetaKpiArc 1s ease-out 0.15s forwards;
}
@keyframes gtpMetaKpiArc { to { stroke-dashoffset: 0; } }

/* v6: 3 new KPI viz variants (Cost per Lead / Conversion / ROAS) */
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-kpi__viz--metagauge svg { width: 90px; height: 46px; flex: 0 0 auto; }
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-kpi__viz--minifunnel .gtp-svc-kpi__viz-minifunnel {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--gtp-svc-fmono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    flex-wrap: wrap;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-kpi__viz--minifunnel .gtp-svc-kpi__viz-mf-step {
    padding: 3px 7px;
    border-radius: 6px;
    background: rgba(94, 234, 255, 0.06);
    border: 1px solid rgba(94, 234, 255, 0.24);
    color: rgba(94, 234, 255, 0.95);
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-kpi__viz--minifunnel .gtp-svc-kpi__viz-mf-step.is-final {
    background: linear-gradient(90deg, rgba(94, 234, 255, 0.14), rgba(255, 110, 199, 0.14));
    border-color: rgba(255, 110, 199, 0.4);
    color: rgba(255, 110, 199, 0.98);
    font-weight: 800;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-kpi__viz--minifunnel .gtp-svc-kpi__viz-mf-arrow {
    color: rgba(220, 230, 245, 0.4);
    font-size: 12px;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-kpi__viz--revenue svg { width: 100px; height: 40px; flex: 0 0 auto; }

/* Meta-only KPI viz variants */
.gtp-svc-kpi__viz--stars .gtp-svc-kpi__viz-stars {
    display: inline-flex;
    gap: 2px;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 1px;
}
.gtp-svc-kpi__viz--stars .gtp-svc-kpi__viz-stars span { color: rgba(255, 255, 255, 0.16); }
.gtp-svc-kpi__viz--stars .gtp-svc-kpi__viz-stars span.is-on   { color: var(--gtp-meta-orange); }
.gtp-svc-kpi__viz--stars .gtp-svc-kpi__viz-stars span.is-half {
    background: linear-gradient(90deg, var(--gtp-meta-orange) 50%, rgba(255,255,255,0.16) 50%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.gtp-svc-kpi__viz--freq .gtp-svc-kpi__viz-freq {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.gtp-svc-kpi__viz--freq .gtp-svc-kpi__viz-freq span {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(168, 121, 255, 1);
    animation: gtpMetaKpiFreq 1.8s ease-in-out infinite;
}
.gtp-svc-kpi__viz--freq .gtp-svc-kpi__viz-freq span:nth-child(2) { animation-delay: 0.15s; background: rgba(168, 121, 255, 0.85); }
.gtp-svc-kpi__viz--freq .gtp-svc-kpi__viz-freq span:nth-child(3) { animation-delay: 0.3s;  background: rgba(168, 121, 255, 0.65); }
.gtp-svc-kpi__viz--freq .gtp-svc-kpi__viz-freq span:nth-child(4) { animation-delay: 0.45s; background: rgba(168, 121, 255, 0.45); }
@keyframes gtpMetaKpiFreq { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.7); opacity: 0.6; } }

.gtp-svc-kpi__viz--chat .gtp-svc-kpi__viz-chat {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 12px;
    border-radius: 12px 12px 12px 4px;
    background: rgba(255, 110, 199, 0.14);
    border: 1px solid rgba(255, 110, 199, 0.35);
}
.gtp-svc-kpi__viz--chat .gtp-svc-kpi__viz-chat span {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--gtp-meta-pink);
    animation: gtpMetaKpiChat 1.4s ease-in-out infinite;
}
.gtp-svc-kpi__viz--chat .gtp-svc-kpi__viz-chat span:nth-child(2) { animation-delay: 0.2s; }
.gtp-svc-kpi__viz--chat .gtp-svc-kpi__viz-chat span:nth-child(3) { animation-delay: 0.4s; }
@keyframes gtpMetaKpiChat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

.gtp-svc-kpi__viz--abc .gtp-svc-kpi__viz-abc {
    display: inline-flex;
    gap: 6px;
}
.gtp-svc-kpi__viz--abc .gtp-svc-kpi__viz-abc span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    border-radius: 6px;
    font-family: var(--gtp-svc-fmono);
    font-weight: 700;
    font-size: 11px;
    color: rgba(220, 230, 245, 0.6);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(94, 234, 255, 0.16);
}
.gtp-svc-kpi__viz--abc .gtp-svc-kpi__viz-abc span.is-winner {
    color: #0a0f1a;
    background: linear-gradient(135deg, var(--gtp-meta-cyan), var(--gtp-meta-pink));
    border-color: transparent;
    box-shadow: 0 0 10px rgba(255, 110, 199, 0.4);
    transform: scale(1.08);
}

/* ============================================================
 * 7. Reduced motion
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio__panel-dot,
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio__cv.is-winner,
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio__story-progress span.is-active,
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio__story-ring,
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio__reel-play,
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio__ad-reactions span,
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__thumb,
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-creativelab__offer-burst,
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-kpi__viz--bars span,
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-kpi__viz--trend path,
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-kpi__viz-mult-arc path:first-child,
    .gtp-svc-kpi__viz--freq .gtp-svc-kpi__viz-freq span,
    .gtp-svc-kpi__viz--chat .gtp-svc-kpi__viz-chat span {
        animation: none !important;
    }
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-kpi__viz--bars span { transform: scaleY(1); }
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-kpi__viz--trend path { stroke-dashoffset: 0; }
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-kpi__viz-mult-arc path:first-child { stroke-dashoffset: 0; }
}

/* ============================================================
 * v4 REBUILD — Hero replaced with card-based Creative Studio.
 * The old .gtp-svc-metastudio__phone rules above are now dead CSS
 * (no phones in HTML anymore) but kept so no styles regress.
 * v4 uses .gtp-svc-metastudio__strip + __grid + __card.
 * ============================================================ */

.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio {
    overflow: hidden; /* v4: keep glow inside; badges are now INSIDE cards */
    max-width: 500px; /* v7: further tightened to balance hero copy on desktop */
    margin-inline: auto;
}

/* Top strip */
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio__strip {
    position: relative;
    z-index: 2;
    padding: 12px 14px;
    margin-bottom: 22px;
    border-radius: 14px;
    background: rgba(6, 12, 22, 0.88);
    border: 1px solid rgba(94, 234, 255, 0.24);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.gtp-svc-metastudio__strip-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.gtp-svc-metastudio__strip-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 6px rgba(74, 222, 128, 0.7);
    flex: 0 0 auto;
    animation: gtpMetaLiveDot 1.6s ease-in-out infinite;
}
.gtp-svc-metastudio__strip-title {
    font-family: var(--gtp-svc-fmono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gtp-meta-cyan);
    flex: 1 1 auto;
}
.gtp-svc-metastudio__strip-status {
    font-family: var(--gtp-svc-fmono);
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 6px;
    color: rgba(160, 240, 195, 0.98);
    background: rgba(74, 222, 128, 0.14);
    letter-spacing: 0.08em;
}
.gtp-svc-metastudio__strip-row--test {
    padding-top: 8px;
    border-top: 1px dashed rgba(94, 234, 255, 0.15);
    gap: 12px;
}
.gtp-svc-metastudio__test-label {
    font-family: var(--gtp-svc-fmono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(220, 230, 245, 0.55);
    flex: 0 0 auto;
}
.gtp-svc-metastudio__test-chips {
    display: inline-flex;
    gap: 6px;
    flex: 0 0 auto;
}
.gtp-svc-metastudio__test-winner {
    margin-inline-start: auto;
    font-family: var(--gtp-svc-fmono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gtp-meta-pink);
}

/* AD PREVIEW GRID — 3 card layout */
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.gtp-svc-metastudio__card {
    position: relative;
    background: rgba(8, 14, 26, 0.94);
    border: 1px solid rgba(94, 234, 255, 0.16);
    border-radius: 16px;
    padding: 14px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 300px;
    overflow: hidden; /* guarantees nothing escapes */
}
.gtp-svc-metastudio__card.is-winner {
    border-color: rgba(255, 110, 199, 0.55);
    background:
        linear-gradient(180deg, rgba(255, 110, 199, 0.05), transparent 30%),
        rgba(8, 14, 26, 0.94);
    box-shadow: 0 0 0 1px rgba(255, 110, 199, 0.15) inset,
                0 20px 40px -24px rgba(168, 121, 255, 0.5);
}
.gtp-svc-metastudio__winner-chip {
    position: static;
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px 3px 6px;
    border-radius: 999px;
    font-family: var(--gtp-svc-fhead);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #0a0f1a;
    background: linear-gradient(90deg, var(--gtp-meta-cyan), var(--gtp-meta-pink));
    box-shadow: 0 4px 12px -4px rgba(255, 110, 199, 0.4);
    z-index: 3;
    margin-bottom: -4px;
    animation: gtpMetaWinnerPulse 3.2s ease-in-out infinite;
}
.gtp-svc-metastudio__winner-chip svg { width: 11px; height: 11px; }

.gtp-svc-metastudio__card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.gtp-svc-metastudio__card-tag {
    font-family: var(--gtp-svc-fmono);
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(220, 230, 245, 0.5);
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(94, 234, 255, 0.12);
}
.gtp-svc-metastudio__card-fmt {
    font-family: var(--gtp-svc-fmono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gtp-meta-cyan);
}

/* Story progress bars — sit under head */
.gtp-svc-metastudio__story-bars {
    display: flex;
    gap: 3px;
}
.gtp-svc-metastudio__story-bars span {
    flex: 1 1 auto;
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.15);
}
.gtp-svc-metastudio__story-bars span.is-active {
    background: linear-gradient(90deg, var(--gtp-meta-cyan), var(--gtp-meta-pink));
}

/* Visual area — abstract gradient blob, no empty rectangles */
.gtp-svc-metastudio__card-visual {
    position: relative;
    flex: 1 1 auto;
    min-height: 110px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(6, 12, 22, 0.7);
}
.gtp-svc-metastudio__card-visual--story {
    aspect-ratio: 3 / 4;
    flex: 0 1 auto;
    min-height: 90px;
}
.gtp-svc-metastudio__card-blob {
    position: absolute;
    inset: 0;
}
.gtp-svc-metastudio__card-blob--reel {
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 179, 91, 0.4), transparent 55%),
        radial-gradient(circle at 70% 70%, rgba(255, 110, 199, 0.35), transparent 55%),
        linear-gradient(135deg, rgba(94, 234, 255, 0.16), rgba(168, 121, 255, 0.18));
}
.gtp-svc-metastudio__card-blob--story {
    background:
        radial-gradient(circle at 50% 30%, rgba(255, 110, 199, 0.4), transparent 60%),
        radial-gradient(circle at 50% 80%, rgba(168, 121, 255, 0.4), transparent 60%),
        linear-gradient(180deg, rgba(94, 234, 255, 0.12), rgba(255, 110, 199, 0.12));
}
.gtp-svc-metastudio__card-blob--feed {
    background:
        radial-gradient(circle at 50% 50%, rgba(240, 246, 255, 0.55), transparent 45%),
        linear-gradient(135deg, rgba(94, 234, 255, 0.22), rgba(168, 121, 255, 0.22));
}

.gtp-svc-metastudio__card-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 40px; height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    color: white;
    z-index: 2;
    animation: gtpMetaReelPulse 2.4s ease-in-out infinite;
}
.gtp-svc-metastudio__card-play svg { width: 16px; height: 16px; }

/* Body — headline + Ad CTA */
.gtp-svc-metastudio__card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px dashed rgba(94, 234, 255, 0.12);
}
.gtp-svc-metastudio__card-headline {
    margin: 0;
    font-family: var(--gtp-svc-fhead);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.4;
    color: rgba(240, 246, 255, 0.95);
    padding-top: 4px;
}
.gtp-svc-metastudio__card-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.gtp-svc-metastudio__card-cta-label {
    font-family: var(--gtp-svc-fmono);
    font-size: 8.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(220, 230, 245, 0.4);
}
/* Ad CTA pill — DESATURATED so it doesn't compete with real site CTA.
   Uses outline+color instead of full gradient fill. */
.gtp-svc-metastudio__card-cta-pill {
    padding: 4px 12px;
    border-radius: 999px;
    font-family: var(--gtp-svc-fmono);
    font-size: 10.5px;
    font-weight: 700;
    color: rgba(94, 234, 255, 0.95);
    background: rgba(94, 234, 255, 0.08);
    border: 1px solid rgba(94, 234, 255, 0.35);
}
.gtp-svc-metastudio__card--story.is-winner .gtp-svc-metastudio__card-cta-pill {
    color: rgba(255, 110, 199, 0.98);
    background: rgba(255, 110, 199, 0.08);
    border-color: rgba(255, 110, 199, 0.4);
}

/* ============================================================
 * v6 REBUILD — asymmetric Meta Creative Studio.
 * Story is the featured big ad, Reel + Feed are side cards.
 * Every mockup has editorial composition (typography + color blocks
 * + micro-marks), NO placeholder rectangles or skeleton lines.
 * ============================================================ */

.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio__grid--asym {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-rows: minmax(180px, 1fr) minmax(180px, 1fr);
    gap: 14px;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio__ad--story {
    grid-column: 1;
    grid-row: 1 / span 2;
    min-height: 340px; /* v7: shorter to balance overall hero height */
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio__ad--reel {
    grid-column: 2;
    grid-row: 1;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio__ad--feed {
    grid-column: 2;
    grid-row: 2;
}

/* Shared ad card container */
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio__ad {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(8, 14, 26, 0.94);
    border: 1px solid rgba(94, 234, 255, 0.16);
    overflow: hidden;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio__ad--story.is-featured {
    border-color: rgba(255, 110, 199, 0.4);
    box-shadow: 0 0 0 1px rgba(255, 110, 199, 0.1) inset,
                0 20px 60px -30px rgba(168, 121, 255, 0.4);
}

/* Top bar — format + brand/meta */
.gtp-svc-metastudio__ad-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.gtp-svc-metastudio__ad-format {
    font-family: var(--gtp-svc-fmono);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gtp-meta-cyan);
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(94, 234, 255, 0.07);
    border: 1px solid rgba(94, 234, 255, 0.28);
}
.gtp-svc-metastudio__ad--story .gtp-svc-metastudio__ad-format {
    color: var(--gtp-meta-pink);
    background: rgba(255, 110, 199, 0.07);
    border-color: rgba(255, 110, 199, 0.35);
}
.gtp-svc-metastudio__ad-brand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--gtp-svc-fmono);
    font-size: 10px;
    color: rgba(230, 240, 250, 0.85);
    letter-spacing: 0.05em;
}
.gtp-svc-metastudio__ad-avatar {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gtp-meta-cyan), var(--gtp-meta-pink));
    flex: 0 0 auto;
}
.gtp-svc-metastudio__ad-sponsored {
    opacity: 0.55;
    font-size: 9.5px;
    padding-inline-start: 4px;
    border-inline-start: 1px solid rgba(255, 255, 255, 0.15);
}
.gtp-svc-metastudio__ad-duration,
.gtp-svc-metastudio__ad-reactions {
    font-family: var(--gtp-svc-fmono);
    font-size: 10.5px;
    color: rgba(230, 240, 250, 0.85);
    letter-spacing: 0.06em;
}
.gtp-svc-metastudio__ad-reactions { display: inline-flex; gap: 6px; font-size: 12px; }
.gtp-svc-metastudio__ad-reactions span { color: rgba(230, 240, 250, 0.75); }

/* Canvas — the "creative" area */
.gtp-svc-metastudio__ad-canvas {
    position: relative;
    flex: 1 1 auto;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 14px;
    gap: 10px;
    min-height: 100px;
}

/* Story canvas — vertical editorial composition */
.gtp-svc-metastudio__ad-canvas--story {
    background:
        radial-gradient(circle at 20% 15%, rgba(255, 179, 91, 0.32), transparent 55%),
        radial-gradient(circle at 80% 80%, rgba(94, 234, 255, 0.28), transparent 55%),
        linear-gradient(180deg, rgba(255, 110, 199, 0.25), rgba(168, 121, 255, 0.3) 55%, rgba(94, 234, 255, 0.28)),
        rgba(6, 12, 22, 0.5);
    justify-content: space-between;
    min-height: 200px; /* v7: reduced */
}
.gtp-svc-metastudio__story-editorial {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.gtp-svc-metastudio__story-mini {
    align-self: flex-start;
    font-family: var(--gtp-svc-fmono);
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(240, 246, 255, 0.7);
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.35);
}
.gtp-svc-metastudio__story-headline {
    margin: 0;
    font-family: var(--gtp-svc-fhead);
    font-size: clamp(19px, 1.9vw, 24px);
    font-weight: 800;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.98);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    max-width: 92%;
}
.gtp-svc-metastudio__story-offer-tag {
    align-self: flex-start;
    padding: 5px 12px;
    border-radius: 999px;
    font-family: var(--gtp-svc-fmono);
    font-size: 10.5px;
    color: #0a0f1a;
    background: rgba(255, 255, 255, 0.94);
    letter-spacing: 0.04em;
}
.gtp-svc-metastudio__story-swipe-hint {
    align-self: center;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-family: var(--gtp-svc-fmono);
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.92);
    padding: 8px 14px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.35);
    letter-spacing: 0.05em;
}
.gtp-svc-metastudio__story-swipe-arrow svg { width: 14px; height: 14px; }
.gtp-svc-metastudio__story-swipe-arrow {
    animation: gtpMetaSwipeBob 2.4s ease-in-out infinite;
}
@keyframes gtpMetaSwipeBob {
    0%, 100% { transform: translateY(-2px); }
    50%      { transform: translateY(2px); }
}

/* Story progress bar (sits above canvas) */
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio__ad--story .gtp-svc-metastudio__story-progress {
    display: flex;
    gap: 4px;
    padding: 0;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio__ad--story .gtp-svc-metastudio__story-progress span {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.14);
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio__ad--story .gtp-svc-metastudio__story-progress span.is-active {
    background: linear-gradient(90deg, var(--gtp-meta-cyan), var(--gtp-meta-pink));
}

/* Reel canvas — play area with caption + scrub bar */
.gtp-svc-metastudio__ad-canvas--reel {
    background:
        radial-gradient(circle at 50% 30%, rgba(94, 234, 255, 0.25), transparent 55%),
        radial-gradient(circle at 60% 80%, rgba(168, 121, 255, 0.3), transparent 55%),
        linear-gradient(160deg, rgba(255, 179, 91, 0.15), rgba(255, 110, 199, 0.12) 60%, rgba(94, 234, 255, 0.14)),
        rgba(6, 12, 22, 0.55);
    justify-content: space-between;
    min-height: 130px;
}
.gtp-svc-metastudio__reel-play {
    align-self: center;
    width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: 1.5px solid rgba(255, 255, 255, 0.48);
    color: white;
    animation: gtpMetaReelPulse 2.4s ease-in-out infinite;
}
.gtp-svc-metastudio__reel-play svg { width: 16px; height: 16px; }
.gtp-svc-metastudio__reel-caption {
    align-self: flex-start;
    font-family: var(--gtp-svc-fhead);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.95);
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.4);
    max-width: 92%;
}
.gtp-svc-metastudio__reel-scrub {
    display: block;
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.16);
    overflow: hidden;
}
.gtp-svc-metastudio__reel-scrub-fill {
    display: block;
    height: 100%;
    width: var(--w, 40%);
    background: linear-gradient(90deg, var(--gtp-meta-cyan), var(--gtp-meta-pink));
}

/* Feed canvas — post-style composition */
.gtp-svc-metastudio__ad-canvas--feed {
    background:
        linear-gradient(135deg, rgba(94, 234, 255, 0.18), rgba(168, 121, 255, 0.14)),
        rgba(6, 12, 22, 0.65);
    justify-content: space-between;
    min-height: 130px;
}
.gtp-svc-metastudio__feed-tag {
    align-self: flex-start;
    padding: 3px 9px;
    border-radius: 6px;
    font-family: var(--gtp-svc-fmono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    color: rgba(240, 246, 255, 0.9);
    background: rgba(0, 0, 0, 0.4);
    text-transform: uppercase;
}
.gtp-svc-metastudio__feed-headline {
    margin: 0;
    font-family: var(--gtp-svc-fhead);
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.98);
    max-width: 96%;
}
.gtp-svc-metastudio__feed-signature {
    align-self: flex-end;
    font-family: var(--gtp-svc-fmono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.72);
    text-transform: uppercase;
}

/* Meta row — Ad CTA label + value + featured mark */
.gtp-svc-metastudio__ad-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 8px;
    border-top: 1px dashed rgba(94, 234, 255, 0.14);
}
.gtp-svc-metastudio__ad-meta-label {
    font-family: var(--gtp-svc-fmono);
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(220, 230, 245, 0.45);
}
.gtp-svc-metastudio__ad-meta-value {
    font-family: var(--gtp-svc-fmono);
    font-size: 11px;
    color: rgba(240, 246, 255, 0.92);
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(94, 234, 255, 0.06);
    border: 1px dashed rgba(94, 234, 255, 0.3);
    flex: 1 1 auto;
    text-align: center;
    min-width: 0;
}
.gtp-svc-metastudio__ad--story .gtp-svc-metastudio__ad-meta-value {
    color: rgba(255, 110, 199, 0.98);
    background: rgba(255, 110, 199, 0.06);
    border-color: rgba(255, 110, 199, 0.4);
}
.gtp-svc-metastudio__ad-featured-mark {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--gtp-svc-fmono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gtp-meta-pink);
}
.gtp-svc-metastudio__ad-featured-mark svg { width: 12px; height: 12px; }

/* Mobile — stack Story big first, then Reel + Feed side by side */
@media (max-width: 900px) {
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio__grid--asym {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 10px;
    }
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio__ad--story {
        grid-column: 1 / -1;
        grid-row: 1;
        min-height: 320px;
    }
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio__ad--reel {
        grid-column: 1;
        grid-row: 2;
    }
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio__ad--feed {
        grid-column: 2;
        grid-row: 2;
    }
}
@media (max-width: 520px) {
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio__grid--asym {
        grid-template-columns: 1fr;
    }
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio__ad--reel,
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio__ad--feed {
        grid-column: 1;
    }
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio__ad--reel { grid-row: 2; }
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio__ad--feed { grid-row: 3; }
    .gtp-svc-metastudio__story-headline { font-size: 18px; }
}

/* v5: Actual ad content inside each preview card — replaces the v4 blurry
   radial blob visuals that made previews look like empty screens. */

/* Kill v4 blob backgrounds — visuals now have real content */
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio__card-visual {
    background: rgba(6, 12, 22, 0.55);
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 8px;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio__card-visual--story {
    padding: 0;
}
.gtp-svc-metastudio__card-blob { display: none; }

/* Reel — filmstrip + stage with caption + play + time */
.gtp-svc-metastudio__reel-strip {
    display: flex;
    gap: 4px;
    align-items: center;
    height: 10px;
}
.gtp-svc-metastudio__reel-strip span {
    flex: 1;
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(94, 234, 255, 0.16), rgba(94, 234, 255, 0.08));
    border: 1px solid rgba(94, 234, 255, 0.14);
}
.gtp-svc-metastudio__reel-stage {
    flex: 1 1 auto;
    position: relative;
    border-radius: 8px;
    background:
        linear-gradient(160deg, rgba(255, 179, 91, 0.14), rgba(255, 110, 199, 0.16) 60%, rgba(94, 234, 255, 0.14)),
        rgba(0, 0, 0, 0.4);
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100px;
}
.gtp-svc-metastudio__reel-caption {
    font-family: var(--gtp-svc-fhead);
    font-size: 11px;
    font-weight: 700;
    color: rgba(240, 246, 255, 0.95);
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.5);
    align-self: flex-start;
}
.gtp-svc-metastudio__reel-time {
    align-self: flex-end;
    font-family: var(--gtp-svc-fmono);
    font-size: 9px;
    color: rgba(240, 246, 255, 0.85);
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.5);
}
.gtp-svc-metastudio__card--reel .gtp-svc-metastudio__card-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 36px; height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    color: white;
}
.gtp-svc-metastudio__card--reel .gtp-svc-metastudio__card-play svg { width: 14px; height: 14px; }

/* Story — vertical stage with caption + offer + swipe up */
.gtp-svc-metastudio__story-stage {
    position: relative;
    flex: 1 1 auto;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 220px;
    background:
        linear-gradient(180deg, rgba(255, 110, 199, 0.24), rgba(168, 121, 255, 0.22) 55%, rgba(94, 234, 255, 0.2)),
        rgba(0, 0, 0, 0.4);
    border-radius: 8px;
}
.gtp-svc-metastudio__story-caption {
    font-family: var(--gtp-svc-fhead);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    color: rgba(240, 246, 255, 0.95);
    padding: 5px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.5);
}
.gtp-svc-metastudio__story-offer {
    align-self: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-family: var(--gtp-svc-fmono);
    font-size: 10px;
    letter-spacing: 0.08em;
    color: rgba(240, 246, 255, 0.95);
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.gtp-svc-metastudio__story-swipe {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(240, 246, 255, 0.94);
    color: #0a0f1a;
    font-family: var(--gtp-svc-fmono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.gtp-svc-metastudio__story-swipe svg { width: 10px; height: 10px; }

/* Feed — brand line, headline, text lines, offer row */
.gtp-svc-metastudio__feed-stage {
    flex: 1 1 auto;
    padding: 10px;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(94, 234, 255, 0.15), rgba(168, 121, 255, 0.14)),
        rgba(6, 12, 22, 0.72);
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 130px;
}
.gtp-svc-metastudio__feed-title {
    font-family: var(--gtp-svc-fhead);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    color: rgba(240, 246, 255, 0.96);
}
.gtp-svc-metastudio__feed-lines {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.gtp-svc-metastudio__feed-lines span {
    height: 5px;
    border-radius: 2px;
    background: rgba(240, 246, 255, 0.14);
}
.gtp-svc-metastudio__feed-lines span.is-short { width: 60%; }
.gtp-svc-metastudio__feed-offer {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding: 5px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.4);
}
.gtp-svc-metastudio__feed-offer-tag {
    font-family: var(--gtp-svc-fmono);
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gtp-meta-cyan);
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(94, 234, 255, 0.1);
    border: 1px solid rgba(94, 234, 255, 0.25);
}
.gtp-svc-metastudio__feed-offer-text {
    font-family: var(--gtp-svc-fmono);
    font-size: 10.5px;
    color: rgba(240, 246, 255, 0.9);
}

.gtp-svc-metastudio__card-caption {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--gtp-svc-text-dim);
}

/* Legacy body class kept working — headline gone but caption is used now */

/* Mobile — stack cards vertically with sensible heights */
@media (max-width: 640px) {
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio {
        padding: 16px 14px;
        min-height: 0;
    }
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio__grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .gtp-svc-metastudio__card { min-height: 0; padding: 14px 14px 12px; }
    .gtp-svc-metastudio__card-visual { min-height: 90px; }
    .gtp-svc-metastudio__card-visual--story { aspect-ratio: auto; min-height: 90px; }
    .gtp-svc-metastudio__card-headline { font-size: 13.5px; }
    .gtp-svc-metastudio__strip { padding: 10px 12px; margin-bottom: 14px; }
    .gtp-svc-metastudio__strip-title { font-size: 10.5px; }
    .gtp-svc-metastudio__strip-row--test { gap: 10px; }
    .gtp-svc-metastudio__test-winner { margin-inline-start: 0; font-size: 9.5px; }
}
@media (max-width: 380px) {
    .gtp-svc-metastudio__test-label { display: none; }
}

/* ============================================================
 * v3 additions — Hero real-content + value-bullet visuals +
 * Method chips + Funnel connector + Creative Wall brand bars +
 * Before/After stagger
 * ============================================================ */

/* ---------- v3: Hero mockup — real content ---------- */

.gtp-svc-metastudio__ad-sponsored { opacity: 0.55; font-weight: 500; }

.gtp-svc-metastudio__ad-hook {
    /* Override earlier — allow multi-word Hebrew hook */
    max-width: 90%;
    text-align: center;
    line-height: 1.35;
    font-size: 11.5px;
    padding: 5px 10px;
    background: rgba(0, 0, 0, 0.5);
    color: rgba(240, 246, 255, 0.96);
    border-radius: 6px;
    align-self: center;
    margin-top: 6px;
}
.gtp-svc-metastudio__ad-hook--reel { max-width: 88%; }

.gtp-svc-metastudio__ad-visual {
    position: absolute;
    bottom: 8px; left: 50%;
    transform: translateX(-50%);
    width: 42px; height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gtp-svc-metastudio__ad-visual-shape {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: linear-gradient(160deg, rgba(240, 246, 255, 0.9), rgba(220, 230, 245, 0.5));
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.6);
}
.gtp-svc-metastudio__ad-visual-glow {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(94, 234, 255, 0.35), transparent 65%);
    filter: blur(10px);
}

.gtp-svc-metastudio__ad-copy {
    font-family: var(--gtp-svc-fmono);
    font-size: 10px;
    letter-spacing: 0.06em;
    color: rgba(220, 230, 245, 0.7);
    text-align: center;
    padding: 2px 4px;
}
.gtp-svc-metastudio__ad-cta {
    align-self: center;
    padding: 6px 14px;
    border-radius: 999px;
    font-family: var(--gtp-svc-fhead);
    font-size: 10.5px;
    font-weight: 800;
    color: #0a0f1a;
    background: linear-gradient(90deg, var(--gtp-meta-cyan), var(--gtp-meta-purple));
    box-shadow: 0 6px 18px -8px rgba(168, 121, 255, 0.5);
}
.gtp-svc-metastudio__ad-cta--story,
.gtp-svc-metastudio__ad-cta--reel {
    background: rgba(240, 246, 255, 0.94);
    color: #0a0f1a;
    margin: 6px 6px 0;
    font-size: 10px;
}
.gtp-svc-metastudio__ad-reactions {
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    color: rgba(240, 246, 255, 0.85);
}
.gtp-svc-metastudio__ad-reactions span {
    width: auto; height: auto;
    border-radius: 0;
    background: none;
}
.gtp-svc-metastudio__ad-side {
    font-size: 11px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.9);
}
.gtp-svc-metastudio__ad-side span {
    width: auto; height: auto;
    border-radius: 0;
    background: none;
}

/* Winner badge on the winning phone */
.gtp-svc-metastudio__phone.is-winner {
    box-shadow: 0 0 0 1.5px rgba(255, 110, 199, 0.55), 0 22px 40px -22px rgba(168, 121, 255, 0.5);
    border-color: rgba(255, 110, 199, 0.4);
}
.gtp-svc-metastudio__winner-badge {
    position: absolute;
    top: -8px; inset-inline-start: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    font-family: var(--gtp-svc-fhead);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: #0a0f1a;
    background: linear-gradient(90deg, var(--gtp-meta-cyan), var(--gtp-meta-pink));
    box-shadow: 0 6px 16px -6px rgba(255, 110, 199, 0.5);
    z-index: 4;
    animation: gtpMetaWinnerPulse 3.2s ease-in-out infinite;
}
@keyframes gtpMetaWinnerPulse {
    0%,100% { transform: translateY(0) scale(1); }
    50%     { transform: translateY(-1px) scale(1.04); }
}

/* Tap indicator inside Story ad */
.gtp-svc-metastudio__story-tap {
    position: absolute;
    bottom: 20px; inset-inline-start: 50%;
    transform: translateX(-50%);
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
    animation: gtpMetaTap 2.4s ease-in-out infinite;
}
@keyframes gtpMetaTap {
    0%,100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); }
    50%     { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
}

/* Reel music badge */
.gtp-svc-metastudio__reel-music {
    position: absolute;
    bottom: 8px; inset-inline-end: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.5);
    font-family: var(--gtp-svc-fmono);
    font-size: 8.5px;
    color: rgba(240, 246, 255, 0.85);
    z-index: 3;
}
.gtp-svc-metastudio__reel-music svg { width: 10px; height: 10px; }

/* Typographic platform chips */
.gtp-svc-metastudio__foot {
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 14px;
    border-top: 1px dashed rgba(94, 234, 255, 0.14);
}
.gtp-svc-metastudio__platform-chip {
    padding: 3px 10px;
    border-radius: 999px;
    font-family: var(--gtp-svc-fmono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(230, 240, 250, 0.9);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(94, 234, 255, 0.22);
}
.gtp-svc-metastudio__platform-chip--alt {
    color: rgba(255, 110, 199, 0.95);
    border-color: rgba(255, 110, 199, 0.3);
    background: rgba(255, 110, 199, 0.06);
}

/* Hero benefits (--meta modifier) — custom accent */
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-hero__benefits--meta .gtp-svc-hero__benefit-icon {
    color: var(--gtp-meta-pink);
    border-color: rgba(255, 110, 199, 0.35);
    background: rgba(255, 110, 199, 0.06);
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-hero__benefits--meta .gtp-svc-hero__benefit-icon svg { color: var(--gtp-meta-cyan); }

/* v6 REBUILD: value cards as editorial capability strip.
   Card 1 (Creative) is a big feature card. Cards 2 & 3 are compact.
   Uses grid override on the shared .gtp-svc-hero__benefits container. */

.gtp-service[data-service-slug="meta-ads"] .gtp-svc-hero__benefits--meta {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
}
@media (max-width: 900px) {
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-hero__benefits--meta {
        grid-template-columns: 1fr 1fr;
    }
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-hero__benefits--meta .gtp-svc-hero__benefit--0 {
        grid-column: 1 / -1;
    }
}
@media (max-width: 520px) {
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-hero__benefits--meta {
        grid-template-columns: 1fr;
    }
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-hero__benefits--meta .gtp-svc-hero__benefit--0 {
        grid-column: 1;
    }
}

/* Card 1 (Creative) — feature card, distinct treatment */
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-hero__benefits--meta .gtp-svc-hero__benefit--0 {
    align-items: flex-start;
    text-align: right;
    padding: 26px 24px;
    background:
        linear-gradient(160deg, rgba(255, 110, 199, 0.09), rgba(168, 121, 255, 0.06) 55%, rgba(94, 234, 255, 0.04)),
        var(--gtp-svc-surface);
    border-color: rgba(255, 110, 199, 0.28);
    box-shadow: 0 20px 60px -32px rgba(168, 121, 255, 0.35);
    position: relative;
    overflow: hidden;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-hero__benefits--meta .gtp-svc-hero__benefit--0::before {
    content: "";
    position: absolute;
    top: 0; inset-inline-end: 0;
    width: 120px; height: 120px;
    background: radial-gradient(circle, rgba(255, 110, 199, 0.28), transparent 60%);
    filter: blur(28px);
    pointer-events: none;
}
/* Hide the generic icon square on card 1 — replace with typographic marker */
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-hero__benefits--meta .gtp-svc-hero__benefit--0 .gtp-svc-hero__benefit-icon {
    display: none;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-hero__benefits--meta .gtp-svc-hero__benefit--0::after {
    content: "01 · Creative";
    display: inline-block;
    align-self: flex-start;
    font-family: var(--gtp-svc-fmono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gtp-meta-pink);
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 110, 199, 0.08);
    border: 1px solid rgba(255, 110, 199, 0.32);
    order: -1;
    margin-bottom: 6px;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-hero__benefits--meta .gtp-svc-hero__benefit--0 .gtp-svc-hero__benefit-title {
    font-size: clamp(19px, 1.6vw, 22px);
    line-height: 1.25;
    text-align: right;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-hero__benefits--meta .gtp-svc-hero__benefit--0 .gtp-svc-hero__benefit-text {
    text-align: right;
    font-size: 14.5px;
    line-height: 1.65;
}

/* Cards 2 & 3 — compact */
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-hero__benefits--meta .gtp-svc-hero__benefit--1,
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-hero__benefits--meta .gtp-svc-hero__benefit--2 {
    padding: 22px 20px;
    align-items: flex-start;
    text-align: right;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-hero__benefits--meta .gtp-svc-hero__benefit--1 .gtp-svc-hero__benefit-icon,
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-hero__benefits--meta .gtp-svc-hero__benefit--2 .gtp-svc-hero__benefit-icon {
    display: none;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-hero__benefits--meta .gtp-svc-hero__benefit--1::before,
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-hero__benefits--meta .gtp-svc-hero__benefit--2::before {
    display: inline-block;
    align-self: flex-start;
    font-family: var(--gtp-svc-fmono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gtp-meta-cyan);
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(94, 234, 255, 0.06);
    border: 1px solid rgba(94, 234, 255, 0.22);
    margin-bottom: 6px;
    order: -1;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-hero__benefits--meta .gtp-svc-hero__benefit--1::before { content: "02 · Audiences"; }
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-hero__benefits--meta .gtp-svc-hero__benefit--2::before { content: "03 · Measurement"; }
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-hero__benefits--meta .gtp-svc-hero__benefit--1 .gtp-svc-hero__benefit-title,
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-hero__benefits--meta .gtp-svc-hero__benefit--2 .gtp-svc-hero__benefit-title {
    font-size: 15px;
    line-height: 1.3;
    text-align: right;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-hero__benefits--meta .gtp-svc-hero__benefit--1 .gtp-svc-hero__benefit-text,
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-hero__benefits--meta .gtp-svc-hero__benefit--2 .gtp-svc-hero__benefit-text {
    font-size: 13px;
    line-height: 1.55;
    text-align: right;
}

/* v5: benefit chip row — clean typographic chips replace v3 amateur SVG visuals */
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-hero__benefit-viz--chips {
    display: flex !important;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 14px;
    border-top: 1px dashed rgba(94, 234, 255, 0.16);
    width: 100%;
    margin-top: auto;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-hero__benefit-chip {
    padding: 3px 10px;
    border-radius: 999px;
    font-family: var(--gtp-svc-fmono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    color: rgba(220, 230, 245, 0.85);
    background: rgba(94, 234, 255, 0.06);
    border: 1px solid rgba(94, 234, 255, 0.22);
}

/* v3 amateur visuals disabled explicitly */
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-hero__benefit-viz--palette,
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-hero__benefit-viz--segments,
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-hero__benefit-viz--optimize {
    display: none !important;
}

/* v3: palette dot visual (card 1) */
.gtp-svc-hero__benefit-viz-palette {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.gtp-svc-hero__benefit-viz-palette-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
}
.gtp-svc-hero__benefit-viz-palette-dot--winner {
    animation: gtpMetaPaletteWinner 2.4s ease-in-out infinite;
    box-shadow: 0 0 12px rgba(255, 110, 199, 0.55);
}
@keyframes gtpMetaPaletteWinner {
    0%,100% { transform: scale(1); }
    50%     { transform: scale(1.25); }
}

/* v3: audience segments (card 2) — colored line + dots */
.gtp-svc-hero__benefit-viz--segments svg { width: 90px; height: 24px; }
.gtp-svc-hero__benefit-viz--segments circle:nth-child(4) { animation: gtpMetaSegPulse 2.4s ease-in-out infinite; }
.gtp-svc-hero__benefit-viz--segments circle:nth-child(5) { animation: gtpMetaSegPulse 2.4s ease-in-out infinite 0.6s; }
@keyframes gtpMetaSegPulse {
    0%,100% { transform: scale(1); transform-origin: center; }
    50%     { transform: scale(1.35); }
}

/* v3: optimize card (card 3) — trend + winning star */
.gtp-svc-hero__benefit-viz--optimize svg path:first-child {
    stroke-dasharray: 90;
    stroke-dashoffset: 90;
    animation: gtpMetaOptimizeDraw 1.4s ease-out forwards;
}
@keyframes gtpMetaOptimizeDraw { to { stroke-dashoffset: 0; } }

/* ---------- v4: KPI micro category label ---------- */

.gtp-service[data-service-slug="meta-ads"] .gtp-svc-kpi__cat {
    display: inline-block;
    align-self: flex-start;
    padding: 2px 8px;
    border-radius: 6px;
    font-family: var(--gtp-svc-fmono);
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gtp-meta-pink);
    background: rgba(255, 110, 199, 0.08);
    border: 1px solid rgba(255, 110, 199, 0.28);
    margin-top: 4px;
}

/* ---------- v3: Method chips ---------- */

.gtp-service[data-service-slug="meta-ads"] .gtp-svc-what--sixblock .gtp-svc-method__chip {
    margin-top: 12px;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(94, 234, 255, 0.06);
    border: 1px dashed rgba(94, 234, 255, 0.24);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-family: var(--gtp-svc-fmono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
}
.gtp-svc-method__chip-label {
    color: rgba(220, 230, 245, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 9.5px;
}
.gtp-svc-method__chip-name {
    color: var(--gtp-meta-cyan);
    font-weight: 800;
}

/* ---------- v3: Funnel connector ---------- */

.gtp-svc-metafunnel__flow {
    position: absolute;
    top: 82px;
    inset-inline-start: 8%;
    inset-inline-end: 8%;
    width: 84%;
    height: 6px;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s ease .3s;
}
[data-meta-funnel].is-visible .gtp-svc-metafunnel__flow { opacity: 0.85; }

.gtp-svc-metafunnel__col { z-index: 1; }

/* v5: Dot markers on the timeline, per column */
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metafunnel__col::after {
    content: "";
    position: absolute;
    top: 74px;
    inset-inline-end: 20px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(6, 12, 22, 0.9);
    box-shadow: 0 0 0 2px currentColor, 0 0 12px currentColor;
    z-index: 2;
    color: var(--gtp-meta-cyan);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity .55s ease, transform .55s ease;
    transition-delay: calc(var(--i) * 0.15s + 0.3s);
}
[data-meta-funnel].is-visible .gtp-svc-metafunnel__col::after { opacity: 1; transform: scale(1); }
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metafunnel__col--warm::after { color: var(--gtp-meta-purple); }
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metafunnel__col--hot::after  { color: var(--gtp-meta-pink); }

@media (max-width: 900px) {
    .gtp-svc-metafunnel__flow { display: none; }
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-metafunnel__col::after { display: none; }
}

/* Funnel spec list — per-column key/value rows */
.gtp-svc-metafunnel__spec {
    list-style: none;
    margin: 4px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.gtp-svc-metafunnel__spec li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(94, 234, 255, 0.1);
    border-radius: 8px;
}
.gtp-svc-metafunnel__spec-k {
    font-family: var(--gtp-svc-fmono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(220, 230, 245, 0.5);
    flex: 0 0 auto;
    min-width: 44px;
}
.gtp-svc-metafunnel__spec-v {
    font-size: 12.5px;
    line-height: 1.4;
    color: rgba(240, 246, 255, 0.88);
    flex: 1 1 auto;
}

/* ============================================================
 * v6 REBUILD — Creative Wall as real ad compositions.
 * No skeleton lines. No white/gray placeholder rectangles.
 * Product: SVG silhouette (bottle-like) with gradient fill.
 * Service: trust badge + review + star row (no line placeholders).
 * Before/After: two contrasting compositions (chaotic dots vs ordered rows).
 * Retargeting: cart icon + progress bar + label.
 * ============================================================ */

.gtp-service[data-service-slug="meta-ads"] .gtp-svc-creativelab__grid--four .gtp-svc-creativelab__ad {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(6, 12, 22, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.04);
    flex: 1 1 auto;
}
.gtp-svc-creativelab__ad-canvas {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 14px;
    border-radius: 10px;
    overflow: hidden;
    min-height: 280px;
    flex: 1 1 auto;
    justify-content: space-between;
}

/* PRODUCT — bottle silhouette + shine, no rounded square placeholder */
.gtp-svc-creativelab__ad-canvas--product {
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 179, 91, 0.28), transparent 55%),
        radial-gradient(circle at 70% 80%, rgba(94, 234, 255, 0.28), transparent 55%),
        linear-gradient(135deg, rgba(168, 121, 255, 0.28), rgba(255, 110, 199, 0.24));
    align-items: center;
    justify-content: space-between;
}
.gtp-svc-creativelab__product-silhouette {
    position: relative;
    display: block;
    width: 90px;
    height: 130px;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.4));
    animation: gtpMetaProductFloat 5s ease-in-out infinite;
}
.gtp-svc-creativelab__product-silhouette svg { width: 100%; height: 100%; }
@keyframes gtpMetaProductFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}
.gtp-svc-creativelab__product-shine {
    position: absolute;
    top: 45px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    width: 60px; height: 14px;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.5), transparent 70%);
    filter: blur(6px);
    pointer-events: none;
}
.gtp-svc-creativelab__product-badge {
    align-self: flex-end;
    padding: 4px 10px;
    border-radius: 999px;
    font-family: var(--gtp-svc-fhead);
    font-size: 11.5px;
    font-weight: 800;
    color: #0a0f1a;
    background: linear-gradient(90deg, var(--gtp-meta-orange), var(--gtp-meta-pink));
    box-shadow: 0 4px 12px -4px rgba(255, 179, 91, 0.5);
    z-index: 2;
}

/* SERVICE — trust + review + stars (no skeleton lines) */
.gtp-svc-creativelab__ad-canvas--service {
    background:
        linear-gradient(160deg, rgba(94, 234, 255, 0.18), rgba(168, 121, 255, 0.16)),
        rgba(6, 12, 22, 0.55);
    align-items: flex-start;
}
.gtp-svc-creativelab__service-trust {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 6px;
    border-radius: 999px;
    background: rgba(94, 234, 255, 0.16);
    border: 1px solid rgba(94, 234, 255, 0.42);
    font-family: var(--gtp-svc-fmono);
    font-size: 10px;
    font-weight: 700;
    color: rgba(240, 246, 255, 0.95);
    letter-spacing: 0.04em;
}
.gtp-svc-creativelab__service-trust svg { width: 12px; height: 12px; color: var(--gtp-meta-cyan); }
.gtp-svc-creativelab__service-review {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    width: 100%;
}
.gtp-svc-creativelab__service-stars {
    color: var(--gtp-meta-orange);
    font-size: 12px;
    letter-spacing: 2px;
}
.gtp-svc-creativelab__service-quote {
    font-family: var(--gtp-svc-fbody);
    font-size: 12.5px;
    line-height: 1.4;
    color: rgba(240, 246, 255, 0.94);
}
.gtp-svc-creativelab__service-attrib {
    font-family: var(--gtp-svc-fmono);
    font-size: 9.5px;
    color: rgba(220, 230, 245, 0.6);
    letter-spacing: 0.06em;
}

/* BEFORE / AFTER — chaotic dots vs ordered rows */
.gtp-svc-creativelab__ad-canvas--ba {
    background:
        linear-gradient(180deg, rgba(94, 234, 255, 0.05), rgba(168, 121, 255, 0.08)),
        rgba(6, 12, 22, 0.7);
    padding: 12px;
    gap: 8px;
}
.gtp-svc-creativelab__ba-split {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    border-radius: 10px;
    overflow: hidden;
    min-height: 130px;
}
.gtp-svc-creativelab__ba-side {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    justify-content: space-between;
}
.gtp-svc-creativelab__ba-side--before {
    background: linear-gradient(180deg, rgba(60, 66, 82, 0.4), rgba(30, 35, 46, 0.6));
    opacity: 0.85;
}
.gtp-svc-creativelab__ba-side--after {
    background: linear-gradient(180deg, rgba(94, 234, 255, 0.14), rgba(168, 121, 255, 0.18));
}
.gtp-svc-creativelab__ba-label {
    font-family: var(--gtp-svc-fmono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(240, 246, 255, 0.85);
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.4);
}
.gtp-svc-creativelab__ba-hint {
    font-family: var(--gtp-svc-fmono);
    font-size: 9.5px;
    color: rgba(220, 230, 245, 0.75);
    letter-spacing: 0.04em;
    text-align: center;
    line-height: 1.4;
}
/* "Before" — chaotic scattered dots */
.gtp-svc-creativelab__ba-noise {
    position: relative;
    display: block;
    width: 100%;
    height: 46px;
    flex: 1 1 auto;
}
.gtp-svc-creativelab__ba-noise span {
    position: absolute;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(220, 230, 245, 0.35);
}
.gtp-svc-creativelab__ba-noise span:nth-child(1) { top: 10%; left: 15%; }
.gtp-svc-creativelab__ba-noise span:nth-child(2) { top: 60%; left: 25%; }
.gtp-svc-creativelab__ba-noise span:nth-child(3) { top: 30%; left: 55%; }
.gtp-svc-creativelab__ba-noise span:nth-child(4) { top: 75%; left: 65%; }
.gtp-svc-creativelab__ba-noise span:nth-child(5) { top: 20%; left: 82%; }
/* "After" — ordered rows */
.gtp-svc-creativelab__ba-order {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    flex: 1 1 auto;
    justify-content: center;
    padding: 6px 4px;
}
.gtp-svc-creativelab__ba-order span {
    display: block;
    height: 5px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--gtp-meta-cyan), var(--gtp-meta-pink));
}
.gtp-svc-creativelab__ba-order span:nth-child(2) { width: 82%; opacity: 0.85; }
.gtp-svc-creativelab__ba-order span:nth-child(3) { width: 64%; opacity: 0.7; }
.gtp-svc-creativelab__ba-divider {
    position: absolute;
    top: 8px; bottom: 8px;
    left: 50%;
    width: 2px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.6) 40%, rgba(255, 255, 255, 0.6) 60%, transparent);
    transform: translateX(-50%);
}

/* RETARGETING — cart icon + progress */
.gtp-svc-creativelab__ad-canvas--retarget {
    background:
        linear-gradient(180deg, rgba(255, 110, 199, 0.14), rgba(94, 234, 255, 0.14)),
        rgba(6, 12, 22, 0.6);
    align-items: stretch;
}
.gtp-svc-creativelab__retarget-badge {
    align-self: flex-start;
    padding: 5px 12px;
    border-radius: 999px;
    font-family: var(--gtp-svc-fhead);
    font-size: 11.5px;
    font-weight: 800;
    color: #0a0f1a;
    background: linear-gradient(90deg, var(--gtp-meta-cyan), var(--gtp-meta-pink));
    box-shadow: 0 4px 12px -4px rgba(255, 110, 199, 0.5);
}
.gtp-svc-creativelab__retarget-visual {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(94, 234, 255, 0.14);
}
.gtp-svc-creativelab__retarget-cart-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 8px;
    background: rgba(94, 234, 255, 0.1);
    border: 1px solid rgba(94, 234, 255, 0.3);
    color: var(--gtp-meta-cyan);
    flex: 0 0 auto;
}
.gtp-svc-creativelab__retarget-cart-icon svg { width: 18px; height: 18px; }
.gtp-svc-creativelab__retarget-items {
    display: flex;
    gap: 4px;
    flex: 1 1 auto;
}
.gtp-svc-creativelab__retarget-items span {
    flex: 1;
    height: 26px;
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(168, 121, 255, 0.3), rgba(94, 234, 255, 0.2));
    border: 1px solid rgba(94, 234, 255, 0.14);
}
.gtp-svc-creativelab__retarget-progress-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.gtp-svc-creativelab__retarget-progress-track {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: rgba(94, 234, 255, 0.1);
    border: 1px solid rgba(94, 234, 255, 0.18);
    overflow: hidden;
}
.gtp-svc-creativelab__retarget-progress-fill {
    display: block;
    height: 100%;
    width: var(--fill, 78%);
    background: linear-gradient(90deg, var(--gtp-meta-cyan), var(--gtp-meta-pink));
}
.gtp-svc-creativelab__retarget-progress-label {
    align-self: flex-end;
    font-family: var(--gtp-svc-fmono);
    font-size: 10px;
    color: var(--gtp-meta-cyan);
    letter-spacing: 0.06em;
}

/* Shared: caption + Ad CTA */
.gtp-svc-creativelab__ad-caption {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.4);
}
.gtp-svc-creativelab__ad-hook {
    margin: 0;
    font-family: var(--gtp-svc-fhead);
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.98);
}
.gtp-svc-creativelab__ad-sub {
    margin: 0;
    font-family: var(--gtp-svc-fbody);
    font-size: 12px;
    line-height: 1.35;
    color: rgba(220, 230, 245, 0.85);
}
.gtp-svc-creativelab__ad-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px dashed rgba(255, 255, 255, 0.35);
}
.gtp-svc-creativelab__ad-cta-label {
    font-family: var(--gtp-svc-fmono);
    font-size: 8.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}
.gtp-svc-creativelab__ad-cta-value {
    font-family: var(--gtp-svc-fmono);
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.04em;
}

/* Kill v4 CSS that still applied on the four-grid variant */
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-creativelab__grid--four .gtp-svc-creativelab__mock,
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-creativelab__grid--four .gtp-svc-creativelab__mock-image,
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-creativelab__grid--four .gtp-svc-creativelab__mock-copy,
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-creativelab__grid--four .gtp-svc-creativelab__product-shape,
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-creativelab__grid--four .gtp-svc-creativelab__service-line {
    display: none;
}

/* ---------- v4: Creative Wall — 4 cards, equal height, no placeholders ---------- */

.gtp-service[data-service-slug="meta-ads"] .gtp-svc-creativelab__grid--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
}
@media (max-width: 1120px) {
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-creativelab__grid--four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 520px) {
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-creativelab__grid--four {
        grid-template-columns: 1fr;
    }
}

.gtp-service[data-service-slug="meta-ads"] .gtp-svc-creativelab__grid--four .gtp-svc-creativelab__card {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-creativelab__grid--four .gtp-svc-creativelab__mock {
    aspect-ratio: auto;
    padding: 12px;
    gap: 10px;
    display: flex;
    flex-direction: column;
    min-height: 240px;
    background:
        linear-gradient(180deg, rgba(94, 234, 255, 0.04), transparent 70%),
        rgba(6, 12, 22, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    flex: 1 1 auto;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-creativelab__grid--four .gtp-svc-creativelab__mock-image {
    aspect-ratio: 5 / 3;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    flex: 0 0 auto;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-creativelab__grid--four .gtp-svc-creativelab__mock-copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
    border: none;
    flex: 1 1 auto;
    justify-content: flex-end;
}

.gtp-service[data-service-slug="meta-ads"] .gtp-svc-creativelab__preview-tag {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 6px;
    font-family: var(--gtp-svc-fmono);
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(220, 230, 245, 0.5);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(94, 234, 255, 0.12);
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-creativelab__preview-tag::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: rgba(94, 234, 255, 0.6);
}

.gtp-service[data-service-slug="meta-ads"] .gtp-svc-creativelab__mock-hook {
    margin: 0;
    font-family: var(--gtp-svc-fhead);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
    color: rgba(240, 246, 255, 0.96);
}
.gtp-svc-creativelab__mock-sub {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: rgba(220, 230, 245, 0.7);
}

.gtp-service[data-service-slug="meta-ads"] .gtp-svc-creativelab__grid--four .gtp-svc-creativelab__mock-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
    padding: 8px 0 0;
    border-top: 1px dashed rgba(94, 234, 255, 0.12);
    /* v4: reset v3 background — was a solid cyan-purple gradient making
       the whole row look like a real site CTA. */
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-weight: normal;
    font-size: inherit;
    border-radius: 0;
    border: none;
    border-top: 1px dashed rgba(94, 234, 255, 0.12);
}
.gtp-svc-creativelab__cta-label {
    font-family: var(--gtp-svc-fmono);
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(220, 230, 245, 0.4);
}
/* Desaturated Ad CTA pill so visitor doesn't confuse it with a real button */
.gtp-svc-creativelab__cta-pill {
    padding: 4px 12px;
    border-radius: 999px;
    font-family: var(--gtp-svc-fmono);
    font-size: 10.5px;
    font-weight: 700;
    color: rgba(94, 234, 255, 0.95);
    background: rgba(94, 234, 255, 0.08);
    border: 1px solid rgba(94, 234, 255, 0.35);
}

/* Retargeting mini progress bar */
.gtp-svc-creativelab__retarget-progress {
    position: relative;
    height: 6px;
    border-radius: 3px;
    background: rgba(94, 234, 255, 0.08);
    border: 1px solid rgba(94, 234, 255, 0.16);
    align-self: center;
    width: 60%;
    overflow: hidden;
}
.gtp-svc-creativelab__retarget-bar-fill {
    display: block;
    width: var(--fill, 78%);
    height: 100%;
    background: linear-gradient(90deg, var(--gtp-meta-cyan), var(--gtp-meta-pink));
}

/* Legacy: keep v3 rules that this block does NOT override (brandbar unused now,
   Testimonial + Offer cards not rendered). Below preserved to avoid regressions
   on the four remaining cards' inner mocks. */

/* ---------- v3: Creative Wall — brand bar + hook + fuller mocks ---------- */

.gtp-svc-creativelab__brandbar {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--gtp-svc-fmono);
    font-size: 9.5px;
    color: rgba(230, 240, 250, 0.68);
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(94, 234, 255, 0.1);
    margin-bottom: 4px;
}
.gtp-svc-creativelab__brand-avatar {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gtp-meta-cyan), var(--gtp-meta-purple));
    flex: 0 0 auto;
}
.gtp-svc-creativelab__brand-name {
    letter-spacing: 0.08em;
}

.gtp-svc-creativelab__mock {
    aspect-ratio: auto;
    padding: 12px;
    gap: 8px;
    background:
        linear-gradient(180deg, rgba(94, 234, 255, 0.04), transparent 70%),
        rgba(6, 12, 22, 0.85);
}
.gtp-svc-creativelab__mock-image {
    aspect-ratio: 5 / 3;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    flex: 0 0 auto;
}

.gtp-svc-creativelab__mock-hook {
    font-family: var(--gtp-svc-fhead);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.4;
    color: rgba(240, 246, 255, 0.94);
    padding: 2px 0;
}

.gtp-svc-creativelab__mock-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0 0;
    border-top: 1px dashed rgba(94, 234, 255, 0.14);
}

/* Testimonial mock */
.gtp-svc-creativelab__mock--testimonial {
    aspect-ratio: auto;
    padding: 14px;
    background: linear-gradient(180deg, rgba(255, 110, 199, 0.08), rgba(168, 121, 255, 0.08));
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 130px;
}
.gtp-svc-creativelab__quote-copy {
    margin: 0;
    font-family: var(--gtp-svc-fbody);
    font-size: 12px;
    line-height: 1.5;
    color: rgba(240, 246, 255, 0.92);
}
.gtp-svc-creativelab__quote-attrib {
    margin-top: auto;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--gtp-svc-fmono);
    font-size: 10.5px;
}
.gtp-svc-creativelab__quote-name { color: rgba(240, 246, 255, 0.85); flex: 1 1 auto; }
.gtp-svc-creativelab__quote-stars { color: var(--gtp-meta-orange); }

/* Split before/after inside mock-image */
.gtp-svc-creativelab__mock-image.gtp-svc-creativelab__mock--split {
    display: flex;
    aspect-ratio: 5 / 3;
    position: relative;
}
.gtp-svc-creativelab__split-half {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 10px;
    flex: 1 1 50%;
}
.gtp-svc-creativelab__split-half--before { background: linear-gradient(180deg, rgba(220, 230, 245, 0.12), rgba(150, 160, 180, 0.16)); }
.gtp-svc-creativelab__split-half--after  { background: linear-gradient(180deg, rgba(94, 234, 255, 0.18), rgba(168, 121, 255, 0.22)); }

/* Offer mock — bigger burst + digital timer */
.gtp-svc-creativelab__mock--offer {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    aspect-ratio: 5 / 3;
    background: linear-gradient(160deg, rgba(255, 179, 91, 0.2), rgba(255, 110, 199, 0.16));
    align-items: center;
    justify-content: center;
}
.gtp-svc-creativelab__offer-timer {
    display: flex;
    gap: 3px;
    align-items: center;
}
.gtp-svc-creativelab__offer-timer span {
    width: auto; height: auto;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 179, 91, 0.5);
    border-radius: 4px;
    padding: 2px 6px;
    font-family: var(--gtp-svc-fmono);
    font-size: 11px;
    font-weight: 700;
    color: rgba(240, 246, 255, 0.95);
    min-width: 16px;
    text-align: center;
}
.gtp-svc-creativelab__offer-timer span:nth-child(3) {
    background: none;
    border: none;
    padding: 0 2px;
}

/* Retargeting mock */
.gtp-svc-creativelab__mock--retarget {
    padding: 14px;
    aspect-ratio: 5 / 3;
    background: linear-gradient(180deg, rgba(94, 234, 255, 0.14), rgba(168, 121, 255, 0.12));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
}

/* ---------- v5: Before/After — visual differentiation ---------- */

/* Before column: muted, cool, less contrast */
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-ba__col--before {
    background: linear-gradient(180deg, rgba(10, 18, 32, 0.55), rgba(6, 12, 22, 0.75));
    border-color: rgba(220, 230, 245, 0.08);
    opacity: 0.86;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-ba__col--before .gtp-svc-ba__badge {
    color: rgba(220, 230, 245, 0.65);
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-ba__col--before li {
    color: rgba(220, 230, 245, 0.7);
}

/* After column: cyan glow accent + brighter */
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-ba__col--after {
    background: linear-gradient(180deg, rgba(94, 234, 255, 0.05), rgba(10, 18, 32, 0.75));
    border-color: rgba(94, 234, 255, 0.32);
    box-shadow: 0 20px 60px -30px rgba(94, 234, 255, 0.35),
                0 0 0 1px rgba(94, 234, 255, 0.05) inset;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-ba__col--after .gtp-svc-ba__badge {
    color: #0a0f1a;
    background: linear-gradient(90deg, var(--gtp-meta-cyan), var(--gtp-meta-pink));
    border-color: transparent;
    font-weight: 800;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-ba__col--after li {
    color: rgba(240, 246, 255, 0.95);
    font-weight: 500;
}

/* Middle connector — bigger visible arrow */
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-ba__arrow {
    color: var(--gtp-meta-cyan);
    filter: drop-shadow(0 0 8px rgba(94, 234, 255, 0.6));
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-ba__arrow svg {
    width: 28px;
    height: 28px;
}

/* ---------- v3: Before/After stagger + connector ---------- */

.gtp-service[data-service-slug="meta-ads"] .gtp-svc-ba {
    position: relative;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-ba__col li {
    opacity: 0;
    transform: translateY(8px);
    animation: gtpMetaBaFadeIn 0.5s ease forwards;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-ba__col li:nth-child(1) { animation-delay: 200ms; }
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-ba__col li:nth-child(2) { animation-delay: 260ms; }
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-ba__col li:nth-child(3) { animation-delay: 320ms; }
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-ba__col li:nth-child(4) { animation-delay: 380ms; }
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-ba__col li:nth-child(5) { animation-delay: 440ms; }
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-ba__col li:nth-child(6) { animation-delay: 500ms; }
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-ba__col li:nth-child(7) { animation-delay: 560ms; }
@media (prefers-reduced-motion: reduce) {
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-ba__col li {
        opacity: 1; transform: none; animation: none;
    }
}
@keyframes gtpMetaBaFadeIn { to { opacity: 1; transform: none; } }

/* Middle arrow — desktop only */
@media (min-width: 900px) {
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-ba::before {
        content: "";
        position: absolute;
        top: 20%; bottom: 20%;
        inset-inline-start: 50%;
        transform: translateX(-50%);
        width: 40px;
        border-inline-start: 1px dashed rgba(94, 234, 255, 0.24);
        border-inline-end:   1px dashed rgba(255, 110, 199, 0.24);
        opacity: 0.7;
    }
}


/* ============================================================
   v8 REBUILD — HERO / SCROLL-STOP STUDIO / AUDIENCE JOURNEY
   Scoped to [data-service-slug="meta-ads"]. Appended after v7.
   ============================================================ */

/* --------- HERO: proportional grid + mini proof panel --------- */

.gtp-service[data-service-slug="meta-ads"] .gtp-svc-hero__inner {
    max-width: 1160px;
}

@media (min-width: 1024px) {
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-hero__grid {
        max-width: 1120px;
        margin-inline: auto;
        grid-template-columns: minmax(440px, 500px) minmax(460px, 500px);
        gap: 82px;
        align-items: center;
    }
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-hero {
        padding-block: 72px 88px;
    }
}

/* Cap the metastudio visual on desktop */
@media (min-width: 1024px) {
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio {
        max-width: 480px;
        margin-inline: auto;
    }
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio__ad--story {
        min-height: 320px;
    }
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio__ad-canvas--story {
        min-height: 188px;
    }
}

/* Mini proof panel — glass card, 3 rows */
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-hero__proof {
    margin-top: 22px;
    padding: 16px 18px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(94, 234, 255, 0.045), rgba(255, 110, 199, 0.03));
    border: 1px solid rgba(94, 234, 255, 0.14);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 500px;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-hero__proof-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-hero__proof-glow {
    flex: 0 0 auto;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(94, 234, 255, 0.95), rgba(255, 110, 199, 0.6));
    box-shadow: 0 0 10px rgba(94, 234, 255, 0.55);
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-hero__proof-text {
    flex: 1 1 auto;
    font-size: 14px;
    line-height: 1.4;
    color: rgba(232, 240, 255, 0.9);
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-hero__proof-chip {
    flex: 0 0 auto;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(94, 234, 255, 0.1);
    border: 1px solid rgba(94, 234, 255, 0.28);
    color: rgba(94, 234, 255, 0.95);
    text-transform: uppercase;
}

@media (max-width: 900px) {
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-hero__proof {
        margin-inline: auto;
        max-width: 100%;
    }
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-hero__proof-text {
        font-size: 13px;
    }
}

/* --------- SCROLL-STOP STUDIO --------- */

.gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__studio {
    margin-top: 40px;
    max-width: 1120px;
    margin-inline: auto;
    display: grid;
    gap: 36px;
    grid-template-columns: 38fr 62fr;
    align-items: stretch;
}

/* STRATEGY PANEL (right in RTL) */
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__strategy {
    padding: 28px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(94, 234, 255, 0.06), rgba(11, 15, 22, 0.9));
    border: 1px solid rgba(94, 234, 255, 0.16);
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__strategy-kicker {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: rgba(94, 234, 255, 0.9);
    text-transform: uppercase;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__strategy-title {
    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
    color: #F1F3F8;
    margin: 0;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__step {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 12px;
    align-items: start;
    padding-block: 12px;
    border-block-start: 1px solid rgba(94, 234, 255, 0.09);
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__step:first-child {
    border-block-start: 0;
    padding-block-start: 0;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__step-n {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 22px;
    font-weight: 400;
    color: rgba(94, 234, 255, 0.85);
    line-height: 1;
    padding-top: 2px;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__step-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 4px;
    color: #F1F3F8;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__step-text {
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
    color: rgba(232, 240, 255, 0.72);
}

/* CREATIVE PREVIEW (left in RTL) */
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__preview {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
}

.gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__mock {
    position: relative;
    border-radius: 20px;
    padding: 14px 14px 18px;
    background: linear-gradient(160deg, #2b1d3a 0%, #1a1230 40%, #331a3a 75%, #4a1a3a 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
    min-height: 460px;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__mock::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 60% at 50% 0%, rgba(94, 234, 255, 0.14), transparent 60%),
                radial-gradient(80% 50% at 50% 100%, rgba(255, 110, 199, 0.16), transparent 60%);
    pointer-events: none;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__mock > * {
    position: relative;
    z-index: 1;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__mock-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__mock-brand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__mock-avatar {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5EEAFF, #FF6EC7);
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__mock-progress {
    display: flex;
    gap: 4px;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__mock-progress span {
    flex: 1;
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.18);
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__mock-progress span.is-active {
    background: linear-gradient(90deg, rgba(94, 234, 255, 0.9), rgba(255, 110, 199, 0.9));
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__mock-canvas {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px 8px;
    gap: 18px;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__mock-hook {
    font-size: 20px;
    line-height: 1.35;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__mock-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__mock-tag {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__mock-tag--accent {
    background: rgba(94, 234, 255, 0.18);
    border-color: rgba(94, 234, 255, 0.42);
    color: #E9FBFF;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__mock-swipe {
    align-self: center;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.65);
    text-transform: uppercase;
    border: 1px dashed rgba(255, 255, 255, 0.2);
}

/* MINIS */
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__minis {
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: space-between;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__mini {
    flex: 1;
    border-radius: 14px;
    padding: 16px;
    background: linear-gradient(180deg, rgba(20, 26, 38, 0.9), rgba(11, 15, 22, 0.9));
    border: 1px solid rgba(94, 234, 255, 0.12);
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 220px;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__mini--reel {
    background: linear-gradient(180deg, rgba(31, 20, 34, 0.9), rgba(11, 15, 22, 0.9));
    border-color: rgba(255, 110, 199, 0.2);
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__mini-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__mini-hook {
    font-size: 15px;
    line-height: 1.4;
    font-weight: 600;
    color: #F1F3F8;
    margin: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__mini-note {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 9px;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
    align-self: flex-end;
}

/* Hide old showcase entirely (safety — was replaced but any stray refs) */
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__showcase { display: none !important; }

/* SCROLL-STOP mobile */
@media (max-width: 900px) {
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__studio {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__strategy {
        padding: 22px;
    }
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__preview {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__mock {
        min-height: 400px;
        max-width: 320px;
        margin-inline: auto;
    }
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__minis {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__mini {
        min-height: 180px;
        padding: 14px;
    }
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__mini-hook {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__minis {
        grid-template-columns: 1fr;
    }
}

/* --------- AUDIENCE JOURNEY --------- */

.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metafunnel__journey {
    max-width: 1080px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-inline-start: 0;
    padding-top: 0;
}

/* Inner progress strip — inside wrapper, self-contained */
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metafunnel__strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 14px 24px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(94, 234, 255, 0.05), rgba(255, 110, 199, 0.03));
    border: 1px solid rgba(94, 234, 255, 0.14);
    width: 100%;
    max-width: 620px;
    margin-inline: auto;
    box-sizing: border-box;
    align-self: center;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metafunnel__strip-node {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 0.08em;
    color: rgba(232, 240, 255, 0.88);
    text-transform: uppercase;
    flex-shrink: 0;
    white-space: nowrap;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metafunnel__strip-label {
    white-space: nowrap;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metafunnel__strip-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(94, 234, 255, 0.6);
    box-shadow: 0 0 8px rgba(94, 234, 255, 0.5);
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metafunnel__strip-node.is-warm .gtp-svc-metafunnel__strip-dot {
    background: rgba(190, 160, 255, 0.75);
    box-shadow: 0 0 8px rgba(190, 160, 255, 0.5);
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metafunnel__strip-node.is-hot .gtp-svc-metafunnel__strip-dot {
    background: rgba(255, 110, 199, 0.85);
    box-shadow: 0 0 8px rgba(255, 110, 199, 0.5);
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metafunnel__strip-line {
    flex: 1 1 40px;
    max-width: 80px;
    height: 1px;
    background: linear-gradient(90deg, rgba(94, 234, 255, 0.4), rgba(255, 110, 199, 0.4));
}

/* STAGES grid */
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metafunnel__stages {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

/* STAGE cards */
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metafunnel__stage {
    position: relative;
    padding: 24px 22px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(20, 26, 38, 0.85), rgba(11, 15, 22, 0.9));
    border: 1px solid rgba(94, 234, 255, 0.12);
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metafunnel__stage-top {
    position: absolute;
    top: 0; inset-inline: 0;
    height: 3px;
    background: linear-gradient(90deg, rgba(94, 234, 255, 0.8), rgba(94, 234, 255, 0));
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metafunnel__stage--warm .gtp-svc-metafunnel__stage-top {
    background: linear-gradient(90deg, rgba(190, 160, 255, 0.8), rgba(190, 160, 255, 0));
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metafunnel__stage--hot .gtp-svc-metafunnel__stage-top {
    background: linear-gradient(90deg, rgba(255, 110, 199, 0.85), rgba(255, 110, 199, 0));
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metafunnel__stage-label {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: rgba(94, 234, 255, 0.9);
    text-transform: uppercase;
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(94, 234, 255, 0.08);
    border: 1px solid rgba(94, 234, 255, 0.24);
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metafunnel__stage--warm .gtp-svc-metafunnel__stage-label {
    color: rgba(210, 190, 255, 0.95);
    background: rgba(190, 160, 255, 0.08);
    border-color: rgba(190, 160, 255, 0.28);
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metafunnel__stage--hot .gtp-svc-metafunnel__stage-label {
    color: rgba(255, 200, 225, 0.95);
    background: rgba(255, 110, 199, 0.08);
    border-color: rgba(255, 110, 199, 0.28);
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metafunnel__stage-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: #F1F3F8;
    margin: 0;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metafunnel__stage-text {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(232, 240, 255, 0.72);
    margin: 0;
}

/* Mini ad logic panel (audience/message/ad) */
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metafunnel__logic {
    margin: 8px 0 0;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(94, 234, 255, 0.04);
    border: 1px solid rgba(94, 234, 255, 0.12);
    display: flex;
    flex-direction: column;
    gap: 0;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metafunnel__logic-row {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 10px;
    padding-block: 8px;
    border-block-start: 1px dashed rgba(94, 234, 255, 0.14);
    align-items: center;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metafunnel__logic-row:first-child {
    border-block-start: 0;
    padding-block-start: 0;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metafunnel__logic-row:last-child {
    padding-block-end: 0;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metafunnel__logic-row dt {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.06em;
    color: rgba(94, 234, 255, 0.85);
    text-transform: uppercase;
    margin: 0;
    white-space: nowrap;
    align-self: center;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metafunnel__logic-row dd {
    font-size: 13px;
    line-height: 1.4;
    color: rgba(232, 240, 255, 0.88);
    margin: 0;
}

/* Kill old floating track + node dots + old stage-node styles */
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metafunnel__track,
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metafunnel__node-dot,
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-metafunnel__stage-node { display: none !important; }

/* AUDIENCE mobile */
@media (max-width: 900px) {
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-metafunnel__strip { display: none; }
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-metafunnel__stages {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-metafunnel__stage {
        padding: 20px 18px;
    }
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-metafunnel__stage-title {
        font-size: 17px;
    }
}

/* ============================================================
   v9 — HERO proportion fix + SCROLL-STOP micro-animations
   Scoped to [data-service-slug="meta-ads"]. Appended after v8.
   ============================================================ */

/* --------- HERO: shrink the metastudio VERTICALLY (desktop only) --------- */

@media (min-width: 1024px) {
    /* Cap visual container height + safety-crop overflow (design preserved). */
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-hero__visual {
        max-height: 680px;
        overflow: hidden;
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }

    /* Reduce vertical footprint of the metastudio without changing its look:
       shrink internal min-heights + tighten paddings + smaller gaps. */
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio {
        padding: 18px 18px 16px;
        gap: 14px;
    }
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio__ad--story {
        min-height: 260px;
    }
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio__ad-canvas--story {
        min-height: 150px;
    }
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio__ad--reel {
        min-height: 122px;
    }
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio__ad--feed {
        min-height: 122px;
    }
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio__ad-canvas--reel,
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio__ad-canvas--feed {
        min-height: 68px;
    }
    /* Tighter internal grid gap. */
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio__grid,
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio__grid--asym {
        gap: 10px;
    }
    /* Slightly smaller strip. */
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio__strip {
        padding-block: 10px;
    }
    /* Compact foot chip row. */
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio__foot {
        padding-block: 6px;
    }
    /* Re-tune hero vertical padding — less air, tighter frame. */
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-hero {
        padding-block: 56px 72px;
    }
    /* Center align columns so shorter visual doesn't leave a big gap top/bottom. */
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-hero__grid {
        align-items: center;
    }
}

/* --------- SCROLL-STOP micro-animations (subtle, slow, loop) --------- */

/* Story mockup — progress bar chase + hook breath + Offer tag pulse */
@keyframes gtp-svc-mock-progress-chase {
    0%   { transform: scaleX(0.25); opacity: 0.85; }
    50%  { transform: scaleX(1);    opacity: 1;    }
    100% { transform: scaleX(0.25); opacity: 0.85; }
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__mock-progress span.is-active {
    transform-origin: right center; /* RTL: grow from right */
    animation: gtp-svc-mock-progress-chase 5.2s ease-in-out infinite;
}

@keyframes gtp-svc-mock-hook-breath {
    0%, 100% { opacity: 0.92; }
    50%      { opacity: 1;    }
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__mock-hook {
    animation: gtp-svc-mock-hook-breath 6.5s ease-in-out infinite;
}

@keyframes gtp-svc-mock-offer-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(94, 234, 255, 0.0);
        border-color: rgba(94, 234, 255, 0.42);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(94, 234, 255, 0.16);
        border-color: rgba(94, 234, 255, 0.7);
    }
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__mock-tag--accent {
    animation: gtp-svc-mock-offer-pulse 3.4s ease-in-out infinite;
}

/* Reel mini — bottom shimmer scrub + hook soft appear */
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__mini--reel {
    position: relative;
    overflow: hidden;
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__mini--reel::after {
    content: "";
    position: absolute;
    inset-inline: 16px;
    bottom: 40px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(255,110,199,0) 0%, rgba(255,110,199,0.75) 50%, rgba(255,110,199,0) 100%);
    transform: translateX(-100%);
    animation: gtp-svc-mini-scrub 4.8s ease-in-out infinite;
    pointer-events: none;
}
@keyframes gtp-svc-mini-scrub {
    0%   { transform: translateX(-100%); opacity: 0.6; }
    50%  { transform: translateX(0%);    opacity: 1;   }
    100% { transform: translateX(100%);  opacity: 0.6; }
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__mini--reel .gtp-svc-scrollab__mini-duration {
    animation: gtp-svc-mock-hook-breath 4.2s ease-in-out infinite;
}

/* Feed mini — icon pulse + hook soft glow */
@keyframes gtp-svc-mini-icons-pulse {
    0%, 100% { opacity: 0.55; letter-spacing: 0.08em; }
    50%      { opacity: 1;    letter-spacing: 0.14em; }
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__mini--feed .gtp-svc-scrollab__mini-icons {
    display: inline-flex;
    animation: gtp-svc-mini-icons-pulse 3.8s ease-in-out infinite;
}

@keyframes gtp-svc-mini-hook-glow {
    0%, 100% { text-shadow: 0 0 0 rgba(94,234,255,0);   }
    50%      { text-shadow: 0 0 12px rgba(94,234,255,0.28); }
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__mini--feed .gtp-svc-scrollab__mini-hook {
    animation: gtp-svc-mini-hook-glow 5.6s ease-in-out infinite;
}

/* Story swipe — subtle dashed border breath */
@keyframes gtp-svc-mock-swipe-breath {
    0%, 100% { border-color: rgba(255,255,255,0.18); opacity: 0.75; }
    50%      { border-color: rgba(255,255,255,0.42); opacity: 1;    }
}
.gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__mock-swipe {
    animation: gtp-svc-mock-swipe-breath 4.4s ease-in-out infinite;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__mock-progress span.is-active,
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__mock-hook,
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__mock-tag--accent,
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__mock-swipe,
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__mini--reel::after,
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__mini--reel .gtp-svc-scrollab__mini-duration,
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__mini--feed .gtp-svc-scrollab__mini-icons,
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-scrollab__mini--feed .gtp-svc-scrollab__mini-hook {
        animation: none !important;
    }
}

/* --------- v10: 360px overflow safety net ---------
   scope: meta-ads slug only. The metastudio's decorative glow divs bleed 10px
   past the viewport at 360w. `overflow: hidden` is already on .gtp-svc-metastudio
   but the glow reaches the wrapper before clip on some layouts — add a mobile
   safety clip on the hero visual wrapper so the page can never scroll H at 360.
   No visual change: glows stay inside their frame either way.
*/
@media (max-width: 480px) {
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-hero__visual,
    .gtp-service[data-service-slug="meta-ads"] .gtp-svc-metastudio {
        overflow-x: clip;
    }
}