/* =====================================================================
 * Go Top — service page: chatgpt-ads
 *
 * Two authored moments, both native to the subject:
 *   1. The stage — one conversation the reader watches play, with the
 *      three beats hung off a spine beside it.
 *   2. The plot  — one tradeoff chart: cost on X, quality on Y.
 *
 * Motion plays once on scroll-in (.is-visible from the slug JS), never
 * loops in the reader's peripheral vision, and is fully frozen under
 * prefers-reduced-motion. Scoped to the slug so nothing leaks.
 * ===================================================================== */

.gtp-service[data-service-slug="chatgpt-ads"]{
    --cg-ease:cubic-bezier(.16,1,.3,1);
    --cg-cyan:#5EEAFF;
    --cg-cyan-2:#A8F2FF;
}

/* =====================================================================
 * HERO MOCK
 * ===================================================================== */

.gtp-svc-cgmock{
    position:relative;display:flex;flex-direction:column;gap:14px;
    width:100%;max-width:520px;margin-inline:auto;padding:4px;
    direction:rtl;isolation:isolate;
}
.gtp-svc-cgmock__glow{
    position:absolute;z-index:-1;border-radius:50%;
    pointer-events:none;filter:blur(46px);
}
.gtp-svc-cgmock__glow--a{
    inset-block-start:-34px;inset-inline-end:-26px;width:190px;height:190px;
    background:radial-gradient(circle,rgba(94,234,255,0.28),transparent 68%);
}
.gtp-svc-cgmock__glow--b{
    inset-block-end:-30px;inset-inline-start:-30px;width:210px;height:210px;
    background:radial-gradient(circle,rgba(94,234,255,0.14),transparent 70%);
}
.gtp-svc-cgmock__thread{
    position:relative;display:flex;flex-direction:column;gap:12px;
    padding:16px 16px 18px;border-radius:22px;
    border:1px solid rgba(94,234,255,0.18);
    background:rgba(12,22,38,0.78);
    box-shadow:0 22px 56px -20px rgba(0,0,0,0.6);
    overflow:hidden;
}
.gtp-svc-cgmock__head{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding-block-end:10px;border-block-end:1px solid rgba(94,234,255,0.12);
}
.gtp-svc-cgmock__dots{display:inline-flex;gap:6px}
.gtp-svc-cgmock__dots>span{width:9px;height:9px;border-radius:50%;background:rgba(94,234,255,0.30)}
.gtp-svc-cgmock__dots>span:first-child{background:rgba(94,234,255,0.55)}
.gtp-svc-cgmock__tag{
    font-size:10px;letter-spacing:.14em;color:var(--cg-cyan);opacity:.85;white-space:nowrap;
}
.gtp-svc-cgmock__turn{display:flex;align-items:flex-start;gap:10px}
.gtp-svc-cgmock__avatar{
    flex:0 0 auto;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
    border:1px solid rgba(94,234,255,0.22);background:rgba(94,234,255,0.06);
    color:rgba(220,230,245,0.78);
}
.gtp-svc-cgmock__avatar svg{width:15px;height:15px}
.gtp-svc-cgmock__avatar--ai{color:var(--cg-cyan);border-color:rgba(94,234,255,0.40);background:rgba(94,234,255,0.10)}
.gtp-svc-cgmock__bubble{
    margin:0;padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.55;
    color:#E6EEF8;background:rgba(255,255,255,0.045);border:1px solid rgba(255,255,255,0.06);
}
.gtp-svc-cgmock__bubble--ai{
    display:flex;flex-direction:column;gap:8px;min-width:190px;flex:1 1 auto;
    background:rgba(94,234,255,0.05);border-color:rgba(94,234,255,0.14);
}
.gtp-svc-cgmock__line{
    display:block;height:8px;border-radius:99px;
    background:linear-gradient(90deg,rgba(94,234,255,0.34),rgba(94,234,255,0.06));
}
.gtp-svc-cgmock__line--1{width:92%}
.gtp-svc-cgmock__line--2{width:78%}
.gtp-svc-cgmock__line--3{width:56%}
.gtp-svc-cgmock__ad{
    position:relative;margin-inline-start:38px;padding:12px;border-radius:16px;
    border:1px solid rgba(94,234,255,0.34);
    background:linear-gradient(140deg,rgba(94,234,255,0.10),rgba(12,22,38,0.55) 62%);
    overflow:hidden;
}
.gtp-svc-cgmock__ad-label{
    display:inline-block;margin-block-end:8px;padding:2px 8px;border-radius:99px;
    font-size:9.5px;letter-spacing:.12em;color:#040A13;background:var(--cg-cyan);
}
.gtp-svc-cgmock__ad-body{display:flex;align-items:center;gap:10px}
.gtp-svc-cgmock__ad-thumb{
    flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;
    border:1px solid rgba(94,234,255,0.24);background:rgba(94,234,255,0.08);color:var(--cg-cyan);
}
.gtp-svc-cgmock__ad-thumb svg{width:19px;height:19px}
.gtp-svc-cgmock__ad-copy{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto}
.gtp-svc-cgmock__ad-title{font-size:13.5px;font-weight:600;color:#F4F7FB;line-height:1.35}
.gtp-svc-cgmock__ad-text{font-size:12px;color:rgba(220,230,245,0.6);line-height:1.4}
.gtp-svc-cgmock__ad-cta{
    flex:0 0 auto;padding:6px 12px;border-radius:99px;font-size:11.5px;font-weight:600;
    color:var(--cg-cyan);border:1px solid rgba(94,234,255,0.36);background:rgba(94,234,255,0.06);
    white-space:nowrap;
}
.gtp-svc-cgmock__ad-sweep{display:none}
.gtp-svc-cgmock__strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0;padding:0;list-style:none}
.gtp-svc-cgmock__stat{
    display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;border-radius:12px;
    border:1px solid rgba(94,234,255,0.18);background:rgba(10,18,32,0.62);text-align:center;
}
.gtp-svc-cgmock__stat-v{font-size:17px;font-weight:700;color:var(--cg-cyan);line-height:1.2;direction:ltr}
.gtp-svc-cgmock__stat-k{font-size:10.5px;color:rgba(220,230,245,0.6);line-height:1.35}
.gtp-svc-cgmock__stat--live{position:relative}
.gtp-svc-cgmock__stat-dot{
    position:absolute;inset-block-start:8px;inset-inline-end:8px;width:6px;height:6px;border-radius:50%;
    background:var(--cg-cyan);
}

/* =====================================================================
 * 1. THE STAGE
 * ===================================================================== */

.gtp-svc-cgstage{position:relative;padding-block:clamp(56px,8vw,104px)}

.gtp-svc-cgstage__split{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    gap:clamp(28px,4vw,64px);
    align-items:center;
    margin-block-start:clamp(32px,5vw,56px);
}

.gtp-svc-cgstage__convo{position:relative;min-width:0}
.gtp-svc-cgstage__convo::before{
    content:"";position:absolute;inset:-14% -8%;z-index:0;pointer-events:none;
    background:
        radial-gradient(60% 50% at 78% 22%,rgba(94,234,255,.16),transparent 70%),
        radial-gradient(52% 44% at 18% 82%,rgba(94,234,255,.09),transparent 72%);
    filter:blur(6px);
}
.gtp-svc-cgstage__pane{
    position:relative;z-index:1;
    display:flex;flex-direction:column;gap:14px;
    padding:clamp(18px,2.2vw,28px);
    border-radius:24px;
    border:1px solid rgba(94,234,255,.16);
    background:linear-gradient(168deg,rgba(16,28,46,.92),rgba(7,14,26,.94));
    box-shadow:0 34px 80px -34px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.045);
}

.gtp-svc-cgstage__turn{display:flex;align-items:flex-start;gap:12px}
.gtp-svc-cgstage__turn--user{justify-content:flex-start}

.gtp-svc-cgstage__said{
    margin:0;padding:13px 16px;
    border-radius:16px 16px 16px 5px;
    font-size:clamp(14px,1.35vw,15.5px);line-height:1.6;
    color:#EEF4FB;
    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.07);
    max-width:86%;
}

.gtp-svc-cgstage__mark{
    flex:0 0 auto;display:grid;place-items:center;
    width:32px;height:32px;border-radius:50%;
    color:var(--cg-cyan);
    background:rgba(94,234,255,.09);
    border:1px solid rgba(94,234,255,.3);
}
.gtp-svc-cgstage__mark svg{width:17px;height:17px;display:block}
.gtp-svc-cgstage__mark--ghost{opacity:.3;border-style:dashed}

.gtp-svc-cgstage__reply{
    flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:9px;
    padding:14px 16px;border-radius:16px 16px 5px 16px;
    background:rgba(94,234,255,.045);
    border:1px solid rgba(94,234,255,.13);
}
.gtp-svc-cgstage__ln{
    display:block;height:9px;border-radius:99px;width:var(--w,90%);
    background:linear-gradient(270deg,rgba(94,234,255,.36),rgba(94,234,255,.07));
}

.gtp-svc-cgstage__placement{
    position:relative;
    display:flex;align-items:center;gap:12px;
    margin-inline-start:44px;
    padding:14px 16px;
    border-radius:16px;
    border:1px solid rgba(94,234,255,.42);
    background:linear-gradient(145deg,rgba(94,234,255,.15),rgba(12,24,42,.7) 70%);
    box-shadow:0 20px 44px -22px rgba(94,234,255,.5);
}
.gtp-svc-cgstage__sponsored{
    flex:0 0 auto;align-self:flex-start;
    padding:3px 9px;border-radius:99px;
    font-size:10px;font-weight:700;letter-spacing:.09em;
    color:#04121C;background:var(--cg-cyan);
}
.gtp-svc-cgstage__offer{display:flex;flex-direction:column;gap:4px;min-width:0}
.gtp-svc-cgstage__offer-t{
    font-size:clamp(13.5px,1.3vw,15px);font-weight:600;color:#F6FAFE;line-height:1.35;
}
.gtp-svc-cgstage__offer-s{font-size:12.5px;color:rgba(214,228,242,.66);line-height:1.45}

.gtp-svc-cgstage__beats{
    position:relative;
    margin:0;padding:0;
    list-style:none;
    display:flex;flex-direction:column;
    gap:clamp(22px,2.6vw,34px);
}
.gtp-svc-cgstage__beats::before{
    content:"";position:absolute;
    inset-block:6px 6px;
    inset-inline-start:5px;
    width:1px;
    background:linear-gradient(180deg,
        transparent,
        rgba(94,234,255,.34) 12%,
        rgba(94,234,255,.34) 88%,
        transparent);
}
.gtp-svc-cgstage__beat{position:relative;padding-inline-start:26px}
.gtp-svc-cgstage__beat::before{
    content:"";position:absolute;
    inset-block-start:9px;inset-inline-start:0;
    width:11px;height:11px;border-radius:50%;
    background:#0A1220;
    border:2px solid rgba(94,234,255,.5);
    box-shadow:0 0 0 4px rgba(94,234,255,.07);
}
.gtp-svc-cgstage__beat-t{
    margin:0 0 7px;
    font-size:clamp(16.5px,1.6vw,19px);font-weight:600;line-height:1.35;
    color:#F4F8FC;
}
.gtp-svc-cgstage__beat-p{
    margin:0;font-size:14.5px;line-height:1.65;color:rgba(214,228,242,.76);
}

/* ---------------------------------------------------------------------
 * Stage motion — the focal moment, played ONCE.
 *
 * A single boot sequence, not a loop: the surface draws itself, the
 * question is typed a character at a time behind a clip, the assistant
 * mark spins up, the answer streams, and the ad materialises through a
 * scan rather than sliding in. Roughly 4.6s end to end, then it rests
 * in its final state. Looping this in the reader's peripheral vision
 * would cost attention it has already earned.
 * ------------------------------------------------------------------- */

/* resting state = the finished state, so no-JS and reduced-motion are correct */
.gtp-svc-cgstage__turn,
.gtp-svc-cgstage__placement,
.gtp-svc-cgstage__beat{opacity:1}
.gtp-svc-cgstage__ln{transform:scaleX(1)}

.js-gtp-svc-anim .gtp-svc-cgstage__pane{
    clip-path:inset(0 0 100% 0 round 24px);
    transition:clip-path 1.05s cubic-bezier(.65,0,.35,1);
}
.js-gtp-svc-anim .gtp-svc-cgstage__pane::after{
    content:"";position:absolute;inset-inline:0;top:0;height:2px;
    background:linear-gradient(90deg,transparent,var(--cg-cyan),transparent);
    opacity:0;
    box-shadow:0 0 14px 2px rgba(94,234,255,.55);
}

/* the question types itself */
.js-gtp-svc-anim .gtp-svc-cgstage__said{
    opacity:0;
    clip-path:inset(0 0 0 100%);
}
.js-gtp-svc-anim .gtp-svc-cgstage__said::after{
    content:"";position:absolute;inset-block:12px;inset-inline-start:12px;
    width:2px;background:var(--cg-cyan);opacity:0;
}
.gtp-svc-cgstage__said{position:relative}

.js-gtp-svc-anim .gtp-svc-cgstage__mark{
    opacity:0;transform:scale(.5) rotate(-90deg);
    transition:opacity .5s ease,transform .75s cubic-bezier(.16,1,.3,1);
}
.js-gtp-svc-anim .gtp-svc-cgstage__reply{
    opacity:0;transition:opacity .4s ease;
}
.js-gtp-svc-anim .gtp-svc-cgstage__ln{
    transform:scaleX(0);transform-origin:right center;
    transition:transform .55s cubic-bezier(.2,.85,.35,1);
}
.js-gtp-svc-anim .gtp-svc-cgstage__placement{
    opacity:0;
    clip-path:inset(0 0 100% 0 round 16px);
    transition:opacity .35s ease,clip-path .7s cubic-bezier(.65,0,.35,1);
}
.js-gtp-svc-anim .gtp-svc-cgstage__placement::after{
    content:"";position:absolute;inset:0;border-radius:16px;pointer-events:none;
    background:linear-gradient(100deg,transparent 35%,rgba(94,234,255,.4) 50%,transparent 65%);
    opacity:0;
}
.js-gtp-svc-anim .gtp-svc-cgstage__beat{
    opacity:0;transform:translateY(12px);
    transition:opacity .6s var(--cg-ease),transform .6s var(--cg-ease);
}
.js-gtp-svc-anim .gtp-svc-cgstage__beat::before{
    transform:scale(.3);opacity:0;
    transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .4s ease,box-shadow .5s ease;
}
.js-gtp-svc-anim .gtp-svc-cgstage__beats::before{
    transform:scaleY(0);transform-origin:top;
    transition:transform 1.1s cubic-bezier(.65,0,.35,1);
}

/* ---- the sequence ---- */
.gtp-svc-cgstage.is-visible .gtp-svc-cgstage__pane{clip-path:inset(0 0 0 0 round 24px)}
.gtp-svc-cgstage.is-visible .gtp-svc-cgstage__pane::after{animation:cgBootLine 1.05s cubic-bezier(.65,0,.35,1) forwards}

.gtp-svc-cgstage.is-visible .gtp-svc-cgstage__said{
    animation:cgType 1.25s steps(34,end) .85s forwards;
}
.gtp-svc-cgstage.is-visible .gtp-svc-cgstage__said::after{
    animation:cgCaretRun 1.25s steps(34,end) .85s forwards,cgCaretBlink .55s steps(2,start) .85s 3;
}

.gtp-svc-cgstage.is-visible .gtp-svc-cgstage__mark{
    opacity:1;transform:none;transition-delay:2.15s;
}
.gtp-svc-cgstage.is-visible .gtp-svc-cgstage__reply{opacity:1;transition-delay:2.35s}
.gtp-svc-cgstage.is-visible .gtp-svc-cgstage__ln{transform:scaleX(1)}
.gtp-svc-cgstage.is-visible [data-step="2"] .gtp-svc-cgstage__ln:nth-child(1){transition-delay:2.5s}
.gtp-svc-cgstage.is-visible [data-step="2"] .gtp-svc-cgstage__ln:nth-child(2){transition-delay:2.66s}
.gtp-svc-cgstage.is-visible [data-step="2"] .gtp-svc-cgstage__ln:nth-child(3){transition-delay:2.82s}

.gtp-svc-cgstage.is-visible .gtp-svc-cgstage__placement{
    opacity:1;clip-path:inset(0 0 0 0 round 16px);
    transition-delay:3.25s;
}
.gtp-svc-cgstage.is-visible .gtp-svc-cgstage__placement::after{
    animation:cgMaterialise .9s cubic-bezier(.4,0,.2,1) 3.35s forwards;
}
.gtp-svc-cgstage.is-visible .gtp-svc-cgstage__sponsored{
    animation:cgBadgeOnce .8s cubic-bezier(.16,1,.3,1) 3.5s backwards;
}

.gtp-svc-cgstage.is-visible [data-step="4"]{opacity:1;transition-delay:4.1s}
.gtp-svc-cgstage.is-visible [data-step="4"] .gtp-svc-cgstage__ln{transition-delay:4.25s}
.gtp-svc-cgstage.is-visible [data-step="4"] .gtp-svc-cgstage__mark{transition-delay:4.1s}

.gtp-svc-cgstage.is-visible .gtp-svc-cgstage__beats::before{transform:scaleY(1);transition-delay:.4s}
.gtp-svc-cgstage.is-visible .gtp-svc-cgstage__beat{opacity:1;transform:none}
.gtp-svc-cgstage.is-visible .gtp-svc-cgstage__beat::before{transform:scale(1);opacity:1}
.gtp-svc-cgstage.is-visible .gtp-svc-cgstage__beat:nth-child(1){transition-delay:1.5s}
.gtp-svc-cgstage.is-visible .gtp-svc-cgstage__beat:nth-child(1)::before{transition-delay:1.6s}
.gtp-svc-cgstage.is-visible .gtp-svc-cgstage__beat:nth-child(2){transition-delay:2.9s}
.gtp-svc-cgstage.is-visible .gtp-svc-cgstage__beat:nth-child(2)::before{transition-delay:3.0s}
.gtp-svc-cgstage.is-visible .gtp-svc-cgstage__beat:nth-child(3){transition-delay:3.9s}
.gtp-svc-cgstage.is-visible .gtp-svc-cgstage__beat:nth-child(3)::before{transition-delay:4.0s}

@keyframes cgBootLine{
    0%  {opacity:0;transform:translateY(0)}
    12% {opacity:1}
    88% {opacity:1;transform:translateY(var(--pane-h,340px))}
    100%{opacity:0;transform:translateY(var(--pane-h,340px))}
}
@keyframes cgType{
    0%  {opacity:1;clip-path:inset(0 0 0 100%)}
    100%{opacity:1;clip-path:inset(0 0 0 0)}
}
@keyframes cgCaretRun{
    0%  {opacity:1;inset-inline-start:calc(100% - 14px)}
    100%{opacity:0;inset-inline-start:12px}
}
@keyframes cgCaretBlink{50%{opacity:0}}
@keyframes cgMaterialise{
    0%  {opacity:0;transform:translateX(-30%)}
    30% {opacity:1}
    100%{opacity:0;transform:translateX(30%)}
}
@keyframes cgBadgeOnce{
    0%  {transform:scale(.6);box-shadow:0 0 0 0 rgba(94,234,255,.5)}
    60% {transform:scale(1.06);box-shadow:0 0 0 9px rgba(94,234,255,.16)}
    100%{transform:scale(1);box-shadow:0 0 0 0 rgba(94,234,255,0)}
}

/* =====================================================================
 * 2. THE PLOT
 * ===================================================================== */

.gtp-svc-cgplot{position:relative;padding-block:clamp(56px,8vw,104px)}
.gtp-svc-cgplot__fig{margin:clamp(30px,4vw,48px) auto 0;max-width:720px}

.gtp-svc-cgplot__frame{
    position:relative;
    padding:clamp(16px,2vw,26px) clamp(14px,2vw,24px) clamp(30px,3vw,38px);
    border-radius:24px;
    border:1px solid rgba(94,234,255,.15);
    background:linear-gradient(170deg,rgba(15,27,45,.9),rgba(6,13,24,.93));
    box-shadow:0 34px 80px -36px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.04);
}
.gtp-svc-cgplot__svg{display:block;width:100%;height:auto;max-height:340px}

.gtp-svc-cgplot__axis{
    position:absolute;
    font-size:11.5px;letter-spacing:.02em;
    color:rgba(206,222,238,.5);
    white-space:nowrap;
}
.gtp-svc-cgplot__axis--y{
    top:clamp(10px,1.4vw,18px);
    right:clamp(14px,2vw,26px);
}
.gtp-svc-cgplot__axis--y::after{content:" \2191";opacity:.6}
.gtp-svc-cgplot__axis--x{
    bottom:clamp(8px,1vw,13px);
    left:50%;transform:translateX(-50%);
}
.gtp-svc-cgplot__axis--x::after{content:" \2192";opacity:.6}

.gtp-svc-cgplot__lbl{font-size:12px;fill:rgba(206,222,238,.55)}
.gtp-svc-cgplot__tick text{font-size:10px;fill:rgba(206,222,238,.34);letter-spacing:.02em}
.gtp-svc-cgplot__lbl--on{fill:var(--cg-cyan-2);font-weight:600}
.gtp-svc-cgplot__lbl{direction:rtl;unicode-bidi:isolate}

.gtp-svc-cgplot__cap{
    margin:16px auto 0;max-width:74ch;
    font-size:12.5px;line-height:1.65;
    color:rgba(200,216,232,.55);
    text-align:center;
}

.gtp-svc-cgplot__reads{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(18px,2.4vw,32px) clamp(26px,3.4vw,52px);
    margin:clamp(30px,4vw,48px) 0 0;padding:0;list-style:none;
}
.gtp-svc-cgplot__read{position:relative;padding-inline-start:18px}
.gtp-svc-cgplot__read::before{
    content:"";position:absolute;
    inset-block-start:9px;inset-inline-start:0;
    width:6px;height:6px;border-radius:50%;
    background:rgba(94,234,255,.6);
}
.gtp-svc-cgplot__read-t{
    margin:0 0 6px;font-size:15.5px;font-weight:600;line-height:1.35;color:#F2F7FC;
}
.gtp-svc-cgplot__read-p{
    margin:0;font-size:14px;line-height:1.65;color:rgba(212,226,240,.72);
}

/* ---------------------------------------------------------------------
 * Plot motion — the instrument powers up once, then keeps a slow scan.
 * The scan is the only looping element and it stops when offscreen.
 * ------------------------------------------------------------------- */

.js-gtp-svc-anim .gtp-svc-cgplot__trend{
    stroke-dasharray:460;stroke-dashoffset:460;
    transition:stroke-dashoffset 1.4s var(--cg-ease);
}
.js-gtp-svc-anim .gtp-svc-cgplot__area{
    opacity:0;transition:opacity 1s ease .55s;
}
.js-gtp-svc-anim .gtp-svc-cgplot__guides{
    opacity:0;transition:opacity .7s ease;
}
.js-gtp-svc-anim .gtp-svc-cgplot__node{
    opacity:0;transform:translateY(10px);
    transition:opacity .6s var(--cg-ease),transform .6s var(--cg-ease);
}
.js-gtp-svc-anim .gtp-svc-cgplot__halo{opacity:0;transition:opacity 1s ease}
.js-gtp-svc-anim .gtp-svc-cgplot__ring{
    transform-box:fill-box;transform-origin:center;
    transform:scale(.4);opacity:0;
    transition:transform .7s var(--cg-ease),opacity .7s ease;
}
.js-gtp-svc-anim .gtp-svc-cgplot__read{
    opacity:0;transform:translateY(10px);
    transition:opacity .5s var(--cg-ease),transform .5s var(--cg-ease);
}
.gtp-svc-cgplot__scan{opacity:0}

.gtp-svc-cgplot.is-visible .gtp-svc-cgplot__trend{stroke-dashoffset:0}
.gtp-svc-cgplot.is-visible .gtp-svc-cgplot__area{opacity:1}
.gtp-svc-cgplot.is-visible .gtp-svc-cgplot__guides{opacity:1;transition-delay:1.25s}
.gtp-svc-cgplot.is-visible .gtp-svc-cgplot__node{opacity:1;transform:none}
.gtp-svc-cgplot.is-visible .gtp-svc-cgplot__ring{transform:scale(1);opacity:1}
.gtp-svc-cgplot.is-visible .gtp-svc-cgplot__halo{opacity:1;transition-delay:1.35s}
.gtp-svc-cgplot.is-visible .gtp-svc-cgplot__read{opacity:1;transform:none}
.gtp-svc-cgplot.is-visible .gtp-svc-cgplot__node--meta{transition-delay:.35s}
.gtp-svc-cgplot.is-visible .gtp-svc-cgplot__node--meta .gtp-svc-cgplot__ring{transition-delay:.45s}
.gtp-svc-cgplot.is-visible .gtp-svc-cgplot__node--google{transition-delay:.72s}
.gtp-svc-cgplot.is-visible .gtp-svc-cgplot__node--google .gtp-svc-cgplot__ring{transition-delay:.82s}
.gtp-svc-cgplot.is-visible .gtp-svc-cgplot__node--chat{transition-delay:1.15s}
.gtp-svc-cgplot.is-visible .gtp-svc-cgplot__node--chat .gtp-svc-cgplot__ring{transition-delay:1.25s}
.gtp-svc-cgplot.is-visible .gtp-svc-cgplot__read:nth-child(1){transition-delay:.20s}
.gtp-svc-cgplot.is-visible .gtp-svc-cgplot__read:nth-child(2){transition-delay:.30s}
.gtp-svc-cgplot.is-visible .gtp-svc-cgplot__read:nth-child(3){transition-delay:.40s}
.gtp-svc-cgplot.is-visible .gtp-svc-cgplot__read:nth-child(4){transition-delay:.50s}

/* the chat node keeps a slow breath; the field keeps a slow scan */
.gtp-svc-cgplot.is-live .gtp-svc-cgplot__pulse{
    transform-box:fill-box;transform-origin:center;
    animation:cgPlotPulse 3.6s ease-in-out infinite;
}
.gtp-svc-cgplot.is-live .gtp-svc-cgplot__scan{
    opacity:1;animation:cgPlotScan 7s linear infinite;
}
@keyframes cgPlotPulse{
    0%,100%{transform:scale(1);opacity:.55}
    50%    {transform:scale(1.28);opacity:0}
}
@keyframes cgPlotScan{
    0%  {transform:translateX(0)}
    100%{transform:translateX(700px)}
}

/* =====================================================================
 * CLIENTS — shared markup is styled per-slug; port it here.
 * Without this block the section renders unstyled.
 * ===================================================================== */

.gtp-service[data-service-slug="chatgpt-ads"] .gtp-svc-clients{padding:72px 0 84px}
.gtp-service[data-service-slug="chatgpt-ads"] .gtp-svc-clients__grid{
    list-style:none;margin:40px auto 0;padding:0;
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;
}
.gtp-service[data-service-slug="chatgpt-ads"] .gtp-svc-clients__item{
    display:flex;align-items:center;justify-content:center;
    padding:12px 10px;min-height:132px;height:132px;
    border-radius:var(--gtp-svc-radius,14px);
    background:rgba(10,18,32,0.55);
    border:1px solid rgba(94,234,255,0.14);
    box-sizing:border-box;overflow:hidden;
    transition:border-color .3s ease,background .3s ease,transform .3s ease,box-shadow .3s ease;
}
.gtp-service[data-service-slug="chatgpt-ads"] .gtp-svc-clients__logo{
    display:block;width:100%;max-width:100%;height:108px;max-height:108px;object-fit:contain;
    filter:brightness(0) saturate(100%) invert(77%) sepia(13%) saturate(1762%) hue-rotate(150deg) brightness(104%) contrast(101%);
    opacity:0.9;transition:opacity .35s ease,filter .35s ease;
}
.gtp-service[data-service-slug="chatgpt-ads"] .gtp-svc-clients__item:focus-within{
    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);
}
@media (hover:hover){
    .gtp-service[data-service-slug="chatgpt-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="chatgpt-ads"] .gtp-svc-clients__item:hover .gtp-svc-clients__logo{
        filter:brightness(0) saturate(100%) invert(85%) sepia(19%) saturate(810%) hue-rotate(162deg) brightness(104%) contrast(102%);
        opacity:1;
    }
}
@media (max-width:900px){
    .gtp-service[data-service-slug="chatgpt-ads"] .gtp-svc-clients__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:720px){
    .gtp-service[data-service-slug="chatgpt-ads"] .gtp-svc-clients{padding:56px 0 68px}
    .gtp-service[data-service-slug="chatgpt-ads"] .gtp-svc-clients__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
    .gtp-service[data-service-slug="chatgpt-ads"] .gtp-svc-clients__item{min-height:108px;height:108px;padding:8px}
    .gtp-service[data-service-slug="chatgpt-ads"] .gtp-svc-clients__logo{max-height:84px;height:84px}
}

/* =====================================================================
 * RESPONSIVE
 * ===================================================================== */

@media (max-width:1000px){
    .gtp-svc-cgstage__split{grid-template-columns:1fr;gap:34px}
    .gtp-svc-cgplot__reads{grid-template-columns:1fr;gap:20px}
}
@media (max-width:560px){
    .gtp-svc-cgstage__pane{padding:16px}
    .gtp-svc-cgstage__said{max-width:100%}
    .gtp-svc-cgstage__placement{margin-inline-start:0;flex-direction:column;align-items:flex-start;gap:9px}
    .gtp-svc-cgmock__ad-cta{display:none}
    .gtp-svc-cgmock__stat-v{font-size:15px}
    .gtp-svc-cgplot__axis--y{display:none}
}

/* =====================================================================
 * REDUCED MOTION
 * ===================================================================== */

@media (prefers-reduced-motion:reduce){
    .gtp-svc-cgstage__turn,
    .gtp-svc-cgstage__placement,
    .gtp-svc-cgstage__beat,
    .gtp-svc-cgplot__node,
    .gtp-svc-cgplot__read{
        opacity:1 !important;transform:none !important;transition:none !important;
    }
    .gtp-svc-cgstage__ln{transform:scaleX(1) !important;transition:none !important}
    .gtp-svc-cgstage__beat::before{transform:scale(1) !important;opacity:1 !important;transition:none !important}
    .gtp-svc-cgplot__trend{stroke-dashoffset:0 !important;transition:none !important}
    .gtp-svc-cgplot__halo,
    .gtp-svc-cgplot__area,
    .gtp-svc-cgplot__guides{opacity:1 !important;transition:none !important}
    .gtp-svc-cgplot__ring{transform:scale(1) !important;opacity:1 !important;transition:none !important}
    .gtp-svc-cgplot__scan,
    .gtp-svc-cgplot__pulse{display:none !important}
    .gtp-svc-cgstage__said,
    .gtp-svc-cgstage__said::after,
    .gtp-svc-cgstage__mark,
    .gtp-svc-cgstage__placement,
    .gtp-svc-cgstage__sponsored,
    .gtp-svc-cgstage__ln,
    .gtp-svc-cgstage__beat::before{animation:none !important}
    .gtp-svc-cgstage__said::after{display:none !important}
}