/* Adaptive Ads page (/campaigns/; no "ads" in paths, ad blockers drop them): the ad-to-job loop, the channel cards and the cycle row. Shared hero, grid and card styles come from the page shell and so.css. */

/* the loop: four stations on one rail, then the return line back to the ad platforms */
.loop{border:1px solid var(--line);border-radius:var(--r-xl);background:linear-gradient(160deg,#0e1114,#07080a);padding:clamp(24px,3.4vw,48px);position:relative;overflow:hidden}
.loop:after{content:"";position:absolute;width:520px;height:520px;right:-220px;top:-260px;background:radial-gradient(circle,rgba(205,244,107,.10),transparent 60%);pointer-events:none}
.loopRail{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,2vw,24px);position:relative}
.loopRail:before{content:"";position:absolute;left:12%;right:12%;top:27px;height:1px;background:var(--line2)}
.loopRail .fill{position:absolute;left:12%;top:27px;height:1px;width:0;background:var(--accent);box-shadow:0 0 12px rgba(205,244,107,.6);transition:width .9s var(--ease)}
.node{position:relative;text-align:center}
.node .dot{width:54px;height:54px;margin:0 auto;border-radius:50%;border:1px solid var(--line2);background:#0a0c0e;display:grid;place-items:center;font:600 12px Inter,sans-serif;color:var(--muted);font-variant-numeric:tabular-nums;transition:border-color .4s,color .4s,background .4s,box-shadow .4s;position:relative;z-index:1}
.node b{display:block;margin-top:16px;font-size:clamp(17px,1.5vw,21px);letter-spacing:-.02em;font-weight:600;color:var(--text2);transition:color .4s}
.node span{display:block;margin-top:6px;color:var(--muted);font-size:14px;line-height:1.45}
.node.on .dot{border-color:var(--accent);color:#0a0c08;background:var(--accent);box-shadow:0 0 0 6px rgba(205,244,107,.10)}
.node.on b{color:var(--text)}
.loopBack{margin-top:clamp(26px,3vw,40px);display:flex;align-items:center;gap:16px;border:1px dashed rgba(205,244,107,.35);border-radius:99px;padding:14px 22px;color:var(--text2);font-size:15px;transition:background .5s,border-color .5s}
.loopBack svg{flex:0 0 22px;width:22px;height:22px;color:var(--accent);transform:scaleX(-1)}
.loopBack.on{background:rgba(205,244,107,.07);border-style:solid}
.loopBack b{color:var(--text);font-weight:600}

/* cycle row: four short steps, reusing the shell's .steps grid */
.cycle .step .n{color:var(--accent)}

/* ownership band */
.own{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden}
.own div{background:#08090b;padding:clamp(20px,2.2vw,28px)}
.own .verb{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.own h3{margin:10px 0 0;font-size:18px;letter-spacing:-.02em;font-weight:600;line-height:1.25}
.own p{margin:8px 0 0;color:var(--muted);font-size:14.5px}

/* link out to Smart Office */
.soLink{margin-top:22px;display:inline-flex}

@media(max-width:900px){
  .loopRail{grid-template-columns:1fr;gap:22px;padding-left:4px}
  .loopRail:before{left:27px;right:auto;top:27px;bottom:27px;width:1px;height:auto}
  .loopRail .fill{left:27px;top:27px;width:1px!important;height:0;transition:height .9s var(--ease)}
  .node{display:grid;grid-template-columns:54px 1fr;column-gap:18px;text-align:left;align-items:center}
  .node .dot{margin:0;grid-row:span 2}
  .node b{margin-top:0}
  .node span{margin-top:2px}
  .loopBack{border-radius:var(--r-lg);align-items:flex-start}
  .own{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.node .dot,.node b,.loopBack,.loopRail .fill{transition:none}}

/* channels: four cards side by side on desktop, two on tablet, one on phone */
.trades.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.trades.four .trade:last-child{grid-column:auto}
@media(max-width:1100px){.trades.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.trades.four{grid-template-columns:1fr}}

/* key words in lime, one per headline, like the rest of the site; dark green on the paper card */
.hl{color:var(--accent)}
.nextCard .hl{color:#4f6b1f}