/* ==========================================================================
   Run: Managed Meta Ads. A tabbed product showcase on the alternate ground.
   Four scenes of layered planes that float on the ground (no frame), like the
   hero. js/run.js drives tabs and writes depth as `translate` on the active
   panel's planes. States: .is-armed (JS ready) hides planes until the panel
   gets .is-play. Under reduced motion every scene shows its final state.
   Without JS the tabs cannot work, so all four panels are laid out in turn.
   ========================================================================== */
#run { overflow-x: clip; }
#run .run__head { max-width: 46rem; }
#run .run__lead { margin-top: 22px; }
.run__show { margin-top: clamp(44px, 5.5vw, 68px); }

/* ---- tabs: a segmented control, a sliding thumb, a timer line ----------- */
.run__tabscroll { overflow-x: auto; scrollbar-width: none; margin: -6px; padding: 6px; }
.run__tabscroll::-webkit-scrollbar { display: none; }
.run__tabs { position: relative; display: inline-flex; gap: 2px; padding: 5px; border-radius: var(--r-pill); background: rgba(10, 11, 15, 0.055); }
.run__thumbwrap { position: absolute; inset: 5px; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(16, 24, 40, 0.08)) drop-shadow(0 6px 12px rgba(16, 24, 40, 0.09)); }
.run__thumb { position: absolute; inset: 0; border-radius: var(--r-pill); background: #fff; clip-path: inset(0 var(--tr, 100%) 0 var(--tl, 0px) round 999px); transition: clip-path 0.6s var(--ease); }
.run__tab { position: relative; display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 20px 0 16px; border: 0; border-radius: var(--r-pill); background: none; color: var(--soft); font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; cursor: pointer; transition: color 0.3s; -webkit-tap-highlight-color: transparent; }
.run__tab svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.3s; }
.run__tab:hover, .run__tab[aria-selected="true"] { color: var(--ink); }
.run__tab[aria-selected="true"] svg { stroke: var(--blue); }
.run__tab:focus-visible { outline-offset: 0; border-radius: var(--r-pill); }
.run__timer { position: absolute; left: 20px; right: 20px; bottom: 6px; height: 2px; border-radius: 2px; background: rgba(8, 102, 255, 0.14); overflow: hidden; opacity: 0; transition: opacity 0.3s; }
.run__timer i { display: block; height: 100%; background: var(--blue); transform: scaleX(0); transform-origin: left; }
#run.is-auto .run__tab[aria-selected="true"] .run__timer { opacity: 1; }
#run:not(.is-armed) .run__tab[aria-selected="true"] { background: #fff; box-shadow: var(--shadow-sm); }

/* ---- stage: copy column + one scene area, all panels share one grid cell -- */
.run__stage { --cw: 340px; --gap: 64px; --ch: 560px; --dw: 640px; --dh: 500px; position: relative; display: grid; grid-template-columns: var(--cw) minmax(0, 1fr); column-gap: var(--gap); margin-top: 28px; }
/* The scene area has no frame: planes float on the ground. It only carries the soft glow. */
.run__canvas { grid-column: 2; grid-row: 1; position: relative; height: var(--ch); pointer-events: none; }
.run__glow { position: absolute; left: 14%; top: 2%; width: 80%; height: 96%; background: radial-gradient(closest-side, rgba(8, 102, 255, 0.12), rgba(8, 102, 255, 0.035) 60%, transparent), radial-gradient(closest-side at 30% 72%, rgba(37, 211, 102, 0.09), transparent 70%); transition: transform 1.1s var(--ease); }
#run[data-tab="1"] .run__glow { transform: translate(-16%, 4%) scale(1.06); }
#run[data-tab="2"] .run__glow { transform: translate(-4%, -8%) scale(0.96); }
#run[data-tab="3"] .run__glow { transform: translate(-20%, 8%) scale(1.02); }

.run__panel { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: var(--cw) minmax(0, 1fr); column-gap: var(--gap); }
.js .run__panel { opacity: 0; visibility: hidden; transition: opacity 0.35s var(--ease), visibility 0s linear 0.35s; }
.js .run__panel.is-active { opacity: 1; visibility: visible; transition: opacity 0.45s var(--ease); }
.run__panel:focus-visible { outline-offset: 10px; border-radius: var(--r-lg); }
.run__copy { grid-column: 1; grid-row: 1; align-self: center; }
.run__copy p { margin-top: 16px; color: var(--soft); text-wrap: pretty; }
.run__copy .ticks { margin-top: 28px; }
.run__vis { grid-column: 2; grid-row: 1; position: relative; height: var(--ch); transition: transform 0.6s var(--ease), filter 0.6s var(--ease); }
.js .run__panel:not(.is-active) .run__vis { transform: scale(0.97) translateY(-6px); filter: blur(4px); }
.run__scene { position: absolute; left: 50%; top: 50%; width: var(--dw); height: var(--dh); margin: calc(var(--dh) / -2) 0 0 calc(var(--dw) / -2); transform: scale(var(--k, 1)); }

/* no JS: the tabs cannot switch, so every panel is laid out in turn and all copy is readable */
html:not(.js) #run .run__tabscroll, html:not(.js) #run .run__canvas { display: none; }
html:not(.js) #run .run__panel { grid-row: auto; }
html:not(.js) #run .run__panel + .run__panel { margin-top: 48px; }

/* copy enters with the panel */
#run.is-armed .run__copy > * { opacity: 0; transform: translateY(14px); transition: opacity 0.5s var(--ease), transform 0.7s var(--ease); }
#run.is-armed .is-play .run__copy > * { opacity: 1; transform: none; transition-delay: 200ms; }
#run.is-armed .is-play .run__copy > :nth-child(2) { transition-delay: 270ms; }
#run.is-armed .is-play .run__copy > :nth-child(3) { transition-delay: 340ms; }
/* outgoing copy clears first, so two blocks of text never overlap mid-switch */
#run.is-armed .run__panel:not(.is-active) .run__copy > * { opacity: 0; transform: translateY(-8px); transition: opacity 0.2s var(--ease), transform 0.4s var(--ease); transition-delay: 0s; }

/* ---- planes: entrance per panel; js/run.js sets `translate` for depth ---- */
.run__pl, .run__k-deck { position: absolute; }
.run__pl { transform: rotate(var(--r, 0deg)); }
#run.is-armed .run__pl { opacity: 0; transform: translate3d(var(--ix, 0px), var(--iy, 24px), 0) rotate(var(--ir, var(--r, 0deg))) scale(0.96); transition: opacity 0.6s var(--ease), transform 1s var(--ease), clip-path 0.9s var(--ease); }
#run.is-armed .is-play .run__pl { opacity: 1; transform: rotate(var(--r, 0deg)); transition-delay: var(--dl, 0ms); }
.run__line { fill: none; stroke: rgba(10, 11, 15, 0.18); stroke-width: 1.5; stroke-linecap: round; overflow: visible; }
#run.is-armed .run__line { transform: none; clip-path: inset(0 0 100% 0); }
#run.is-armed .is-play .run__line { clip-path: inset(0); }

/* shared bits */
.run__card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-md); font-size: 14px; line-height: 1.3; }
.run__card small { display: block; font-size: 12.5px; color: var(--soft); }
.run__sk { display: block; width: var(--w, 100%); height: 8px; border-radius: 4px; background: #eaecf0; }
.run__ico { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--ink); }
.run__ico--blue { background: var(--blue); }
.run__ico svg, .run__k-win svg, .run__k-s2 svg, .run__o-review svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---- 1. Campaigns --------------------------------------------------------- */
.run__c-l1 { left: 0; top: 66px; width: 640px; height: 84px; }
.run__c-l2 { left: 0; top: 202px; width: 640px; height: 36px; }
.run__c-lm { display: none; }
.run__c-root { left: 180px; top: 0; width: 280px; display: flex; align-items: center; gap: 12px; padding: 12px; font-size: 15px; box-shadow: var(--shadow-lg); }
.run__c-set { top: 150px; width: 0; }
.run__c-s1 { left: 92px; }
.run__c-s2 { left: 320px; }
.run__c-s3 { left: 548px; }
.run__node { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px 0 8px; border-radius: var(--r-pill); background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-md); font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--ink); white-space: nowrap; transform: translateX(-50%); }
.run__node small { display: block; font-size: 12px; font-weight: 500; color: var(--soft); }
.run__node > i { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #f1f3f6; }
.run__node svg { width: 18px; height: 18px; fill: none; stroke: var(--ink-2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.run__c-ads { top: 238px; width: 104px; height: 124px; margin-left: -52px; }
.run__c-a1 { left: 92px; }
.run__c-a2 { left: 320px; }
.run__c-a3 { left: 548px; }
.run__c-ads i { position: absolute; inset: 0; border-radius: 12px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); overflow: hidden; }
.run__c-ads i:first-child { transform: translate(-12px, 7px) rotate(-8deg); }
.run__c-ads i::before { content: ""; display: block; height: 70px; background: linear-gradient(160deg, #e8f0ff, #cfe0ff 45%, #b9f0cf); }
.run__c-ads i:first-child::before { background: linear-gradient(160deg, #eef1f6, #dde3ec); }
.run__c-a2 i:last-child::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23fff'/%3E%3Cpath d='M10 8v8l6-4z' fill='%230a0b0f'/%3E%3C/svg%3E") center / 26px no-repeat, linear-gradient(160deg, #1c202b, #363c4c 55%, #3e5b82); }
.run__c-a3 i:last-child::before { background: radial-gradient(circle at 80% 90%, rgba(255, 255, 255, 0.55) 0 30%, transparent 31%), linear-gradient(200deg, #dfe9ff, #aac6ff 58%, #a8e8c4); }
.run__c-ads i::after { content: ""; display: block; height: 21px; margin: 12px 12px 0; background: linear-gradient(#eaecf0, #eaecf0) 0 0 / 100% 7px no-repeat, linear-gradient(#eaecf0, #eaecf0) 0 14px / 58% 7px no-repeat; }
.run__c-rule { left: 372px; top: 414px; }
.run__c-pace { left: 8px; top: 392px; width: 258px; padding: 16px 18px 18px; box-shadow: var(--shadow-lg); }
.run__track { position: relative; display: block; height: 8px; margin-top: 14px; border-radius: 4px; background: #eceef2; }
.run__track i { position: absolute; inset: 0; border-radius: 4px; background: var(--blue); clip-path: inset(0 38% 0 0 round 4px); }
.run__track em { position: absolute; inset: -5px 0; transform: translateX(-38%); }
.run__track em::after { content: ""; position: absolute; right: -9px; top: 0; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--line-2), var(--shadow-sm); }
#run.is-armed .run__track i { clip-path: inset(0 100% 0 0 round 4px); transition: clip-path 1.1s var(--ease-io); }
#run.is-armed .run__track em { transform: translateX(-100%); transition: transform 1.1s var(--ease-io); }
#run.is-armed .is-play .run__track i { clip-path: inset(0 38% 0 0 round 4px); transition-delay: 1.3s; }
#run.is-armed .is-play .run__track em { transform: translateX(-38%); transition-delay: 1.3s; }

/* ---- 2. Creative: three versions deal, shuffle twice, one wins ----------- */
.run__k { --L: translate(-172px, 28px) rotate(-8deg) scale(0.84); --C: translate(0, 0) scale(0.94); --R: translate(172px, 28px) rotate(8deg) scale(0.84); --W: translate(0, -10px) scale(1); --L2: translate(-196px, 42px) rotate(-10deg) scale(0.8); --R2: translate(196px, 42px) rotate(10deg) scale(0.8); }
.run__k-deck { inset: 0; }
.run__k-card { position: absolute; left: 195px; top: 112px; transform: var(--s4); z-index: var(--z4); }
.run__k-a { --s1: var(--L); --s2: var(--C); --s3: var(--L); --s4: var(--L2); --z1: 1; --z2: 3; --z3: 1; --z4: 1; }
.run__k-b { --s1: var(--R); --s2: var(--L); --s3: var(--C); --s4: var(--W); --z1: 2; --z2: 2; --z3: 3; --z4: 4; }
.run__k-c { --s1: var(--C); --s2: var(--R); --s3: var(--R); --s4: var(--R2); --z1: 3; --z2: 1; --z3: 2; --z4: 2; }
/* the two versions that lose recede behind an opaque veil (no see-through ghosting) */
.run__k-a::after, .run__k-c::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-md); background: rgba(255, 255, 255, 0.55); pointer-events: none; }
#run.is-armed .run__k-a::after, #run.is-armed .run__k-c::after { opacity: 0; transition: opacity 0.6s var(--ease); }
#run.is-armed .is-play .run__k-a::after, #run.is-armed .is-play .run__k-c::after { opacity: 1; transition-delay: 2.9s; }
#run.is-armed .run__k-card { opacity: 0; transform: translateY(40px) scale(0.88); }
#run.is-armed .is-play .run__k-card { opacity: 1; transform: var(--s4); animation: run-deal 2.9s var(--ease) 0.15s both; }
@keyframes run-deal {
  0% { opacity: 0; transform: translateY(40px) scale(0.88); z-index: var(--z1); }
  22%, 30% { opacity: 1; transform: var(--s1); z-index: var(--z1); }
  50%, 58% { opacity: 1; transform: var(--s2); z-index: var(--z2); }
  78%, 86% { opacity: 1; transform: var(--s3); z-index: var(--z3); }
  100% { opacity: 1; transform: var(--s4); z-index: var(--z4); }
}
.run__k-tag { position: absolute; left: 12px; top: 12px; padding: 4px 9px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.92); font-size: 11.5px; font-style: normal; font-weight: 600; color: var(--ink-2); }
.run__k-vid { position: absolute; inset: 0; background: linear-gradient(160deg, #1c202b, #363c4c 55%, #3e5b82); }
.run__k-vid b { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: rgba(255, 255, 255, 0.94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 3.6v8.8l7-4.4z' fill='%230a0b0f'/%3E%3C/svg%3E") 55% 50% / 18px no-repeat; box-shadow: var(--shadow-md); }
.run__k-vid em { position: absolute; left: 14px; right: 14px; bottom: 14px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.25) linear-gradient(#fff, #fff) 0 0 / 38% 100% no-repeat; }
.run__k-alt { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(200deg, #dfe9ff, #aac6ff 58%, #a8e8c4); }
.run__k-alt::before { content: ""; position: absolute; right: -34px; bottom: -46px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); }
.run__k-alt::after { content: ""; position: absolute; left: 22px; bottom: 30px; width: 124px; height: 46px; border-radius: 12px; background: rgba(255, 255, 255, 0.82); box-shadow: 0 8px 20px -8px rgba(16, 24, 40, 0.2); }
.run__k-win { position: absolute; top: -14px; right: -12px; display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px 7px 9px; border-radius: var(--r-pill); background: var(--blue); color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 12px 24px -10px rgba(16, 24, 40, 0.45); }
.run__k-win svg { width: 18px; height: 18px; stroke-width: 2.2; }
#run.is-armed .run__k-win { opacity: 0; transform: scale(0.6) translateY(8px); transition: opacity 0.4s var(--ease), transform 0.7s var(--ease); }
#run.is-armed .is-play .run__k-win { opacity: 1; transform: none; transition-delay: 3.1s; }
.run__k-status { left: 170px; top: 26px; width: 300px; display: grid; justify-items: center; }
.run__k-status > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 15px 0 12px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-md); font-size: 14px; font-weight: 600; color: var(--ink-2); white-space: nowrap; transition: opacity 0.4s var(--ease), transform 0.6s var(--ease); }
.run__k-s1 { opacity: 0; }
.run__k-s1 i { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.run__k-s2 svg { width: 18px; height: 18px; stroke: var(--blue); stroke-width: 2.2; }
#run.is-armed .run__k-s1 { opacity: 1; }
#run.is-armed .run__k-s2 { opacity: 0; transform: translateY(8px); }
#run.is-armed .is-play .run__k-s1 { opacity: 0; transform: translateY(-8px); transition-delay: 3s; }
#run.is-armed .is-play .run__k-s2 { opacity: 1; transform: none; transition-delay: 3.1s; }
.run__k-copy { left: 2px; top: 370px; width: 238px; padding: 16px 18px 18px; box-shadow: var(--shadow-lg); z-index: 6; }
.run__k-copy b { display: block; margin: 3px 0 14px; font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }
.run__k-copy b::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 3px; vertical-align: -3px; background: var(--blue); }
.run__k-copy .run__sk + .run__sk { margin-top: 8px; }

/* ---- 3. Optimisation: the weekly review moves budget to the stronger ad --- */
/* Two real ads. Budget flows along the arc; the weaker ad dims and sinks, the stronger one lifts. */
.run__o-ad { top: 96px; }
.run__o-weak { --s: 0.78; left: 44px; }
.run__o-strong { --s: 0.9; left: 360px; top: 90px; }
.run__o-card { position: relative; width: calc(250px * var(--s)); height: calc(273px * var(--s)); transform: var(--lift); transition: transform 0.9s var(--ease); }
.run__o-weak .run__o-card { --lift: translateY(10px) scale(0.96); }
.run__o-strong .run__o-card { --lift: translateY(-14px) scale(1.03); }
.run__o-card .ad { transform: scale(var(--s)); transform-origin: 0 0; transition: opacity 1s var(--ease); }
.run__o-weak .ad { opacity: 0.5; }
.run__o-tag { position: absolute; right: -10px; top: -24px; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 13px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-md); font-size: 13.5px; font-style: normal; font-weight: 600; color: var(--soft); white-space: nowrap; transition: opacity 0.4s var(--ease), transform 0.7s var(--ease); }
.run__o-tag--up { right: -12px; padding: 0 14px 0 9px; border-color: transparent; background: var(--blue); color: #fff; box-shadow: 0 12px 24px -10px rgba(16, 24, 40, 0.45); }
.run__o-tag--up svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.run__o-arc { left: 88px; top: 16px; width: 300px; height: 64px; }
.run__o-arc svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: rgba(8, 102, 255, 0.5); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 7; }
.run__o-arc svg path + path { stroke: var(--blue); stroke-dasharray: none; }
.run__o-dot { position: absolute; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 2.5px #fff, 0 3px 8px rgba(16, 24, 40, 0.28); opacity: 0; }
.run__o-review { left: 238px; top: 0; }
.run__o-review span { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 13px 0 8px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 600; white-space: nowrap; transform: translateX(-50%); }
.run__o-review svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#run.is-armed .run__o-card { transform: none; }
#run.is-armed .run__o-weak .ad { opacity: 1; }
#run.is-armed .run__o-tag { opacity: 0; transform: scale(0.7) translateY(8px); }
#run.is-armed .run__o-arc svg { clip-path: inset(-12px 100% -12px -12px); transition: clip-path 1s var(--ease-io); }
#run.is-armed .is-play .run__o-arc svg { clip-path: inset(-12px -12px -12px -12px); transition-delay: 0.8s; }
#run.is-armed .is-play .run__o-dot { animation: run-flow 1.25s linear 1.05s both; }
#run.is-armed .is-play .run__o-dot + .run__o-dot { animation-delay: 1.25s; }
#run.is-armed .is-play .run__o-dot + .run__o-dot + .run__o-dot { animation-delay: 1.45s; }
#run.is-armed .is-play .run__o-weak .ad { opacity: 0.5; transition-delay: 1.4s; }
#run.is-armed .is-play .run__o-card { transform: var(--lift); transition-delay: 1.5s; }
#run.is-armed .is-play .run__o-strong .run__o-card { transition-delay: 2.1s; }
#run.is-armed .is-play .run__o-tag { opacity: 1; transform: none; transition-delay: 1.9s; }
#run.is-armed .is-play .run__o-tag--up { transition-delay: 2.5s; }
/* points on the arc (a cubic from 8,60 to 292,60), spaced to ease in and out */
@keyframes run-flow {
  0% { opacity: 0; transform: translate(8px, 60px) scale(0.5); }
  12% { opacity: 1; }
  22% { transform: translate(30px, 44px); }
  33% { transform: translate(64px, 32px); }
  42% { transform: translate(105px, 25px); }
  50% { transform: translate(150px, 22px); }
  58% { transform: translate(195px, 25px); }
  67% { transform: translate(236px, 32px); }
  78% { transform: translate(270px, 44px); }
  88% { opacity: 1; }
  100% { opacity: 0; transform: translate(292px, 60px) scale(0.5); }
}
.run__o-cpl { left: 0; top: 332px; }
.run__o-leads { --r: -2deg; --ir: -7deg; left: 304px; top: 354px; width: 316px; padding: 16px 18px 8px; box-shadow: var(--shadow-lg); }
.run__o-leads > b { font-size: 14.5px; }
.run__o-leads ul { list-style: none; margin-top: 10px; }
.run__o-leads li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.run__av { width: 26px; height: 26px; flex: none; border-radius: 50%; background: linear-gradient(135deg, #e3e7ee, #c7cfdb); }
.run__tag { margin-left: auto; padding: 4px 10px; border-radius: var(--r-pill); background: rgba(37, 211, 102, 0.14); color: #0b6e35; font-size: 12px; font-style: normal; font-weight: 600; white-space: nowrap; }
.run__tag--no { background: #eff1f4; color: var(--soft); }
#run.is-armed .run__tag { opacity: 0; transform: scale(0.8); transition: opacity 0.4s var(--ease), transform 0.6s var(--ease); }
#run.is-armed .is-play .run__tag { opacity: 1; transform: none; transition-delay: var(--t, 0ms); }

/* ---- 4. Reporting: one report, three plain headings ----------------------- */
.run__r-back { left: 262px; top: 38px; width: 326px; height: 446px; padding: 36px 30px; border-radius: 16px; }
.run__r-back .run__sk { margin-bottom: 12px; opacity: 0.7; }
.run__r-doc { left: 128px; top: 6px; width: 378px; padding: 34px 34px 38px; border-radius: 16px; box-shadow: var(--shadow-lg); }
.run__r-top { display: flex; align-items: center; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.run__r-top svg { width: 30px; height: 30px; flex: none; fill: var(--logo-ink); }
.run__r-top b { display: block; font-family: var(--display); font-size: 23px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.run__r-sec { margin-top: 26px; }
.run__r-h { display: block; margin-bottom: 13px; font-size: 15px; font-weight: 650; }
.run__r-sec .run__sk + .run__sk, .run__r-mark + .run__sk { margin-top: 10px; }
.run__r-mark { position: relative; display: block; }
.run__r-mark::before { content: ""; position: absolute; inset: -6px -8px; border-radius: 7px; background: var(--blue-soft); }
.run__r-mark .run__sk { position: relative; background: rgba(8, 102, 255, 0.28); }
.run__r-todo { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.run__r-todo em { width: 16px; height: 16px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.run__r-toast { left: -4px; top: 414px; }
.run__r-when { left: 402px; top: 60px; }
#run.is-armed .run__r-h, #run.is-armed .run__r-todo em { opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease), transform 0.6s var(--ease); }
#run.is-armed .run__r-doc .run__sk { clip-path: inset(0 100% 0 0 round 4px); transition: clip-path 0.7s var(--ease); }
#run.is-armed .run__r-mark::before { clip-path: inset(0 100% 0 0 round 7px); transition: clip-path 0.8s var(--ease); }
#run.is-armed .is-play .run__r-h, #run.is-armed .is-play .run__r-todo em { opacity: 1; transform: none; transition-delay: var(--d); }
#run.is-armed .is-play .run__r-doc .run__sk { clip-path: inset(0 0 0 0 round 4px); transition-delay: var(--d); }
#run.is-armed .is-play .run__r-mark::before { clip-path: inset(0 0 0 0 round 7px); transition-delay: 1.2s; }

/* ---- laptop: a narrower copy column keeps scenes near full size ----------- */
@media (max-width: 1200px) { .run__stage { --cw: 300px; --gap: 48px; } }

/* ---- tablet: canvas on top, copy below ------------------------------------ */
@media (max-width: 1023px) {
  .run__stage { --ch: 540px; grid-template-columns: minmax(0, 1fr); }
  .run__canvas { grid-column: 1; align-self: start; }
  .run__panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--ch) auto; }
  .run__vis { grid-column: 1; grid-row: 1; }
  .run__copy { grid-column: 1; grid-row: 2; align-self: start; max-width: 36em; padding-top: 36px; }
}

/* ---- mobile: its own composition ------------------------------------------ */
@media (max-width: 699px) {
  #run .run__lead { margin-top: 18px; }
  .run__tabscroll { margin: -6px calc(-1 * var(--gutter)); padding: 6px var(--gutter); -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); }
  .run__tab { height: 44px; padding: 0 16px 0 13px; font-size: 15px; }
  .run__timer { left: 16px; right: 16px; bottom: 5px; }
  .run__stage { --ch: 500px; --dw: 340px; --dh: 470px; margin-top: 20px; }
  .run__copy { padding-top: 30px; }
  .run__copy .ticks { margin-top: 22px; }
  /* campaigns: a vertical tree */
  .run__c-l1, .run__c-l2, .run__c-ads, .run__c-pace { display: none; }
  .run__c-lm { display: block; left: -16px; top: 64px; width: 100px; height: 290px; }
  .run__c-root { left: 30px; }
  .run__c-set { left: 84px; }
  .run__node { transform: none; padding-right: 16px; font-size: 13.5px; }
  .run__c-s1 { top: 104px; }
  .run__c-s2 { top: 200px; }
  .run__c-s3 { top: 296px; }
  .run__c-rule { left: 8px; top: 386px; }
  /* creative */
  .run__k { --L: translate(-74px, 30px) rotate(-8deg) scale(0.7); --C: translate(0, 0) scale(0.84); --R: translate(74px, 30px) rotate(8deg) scale(0.7); --W: translate(0, -8px) scale(0.9); --L2: translate(-70px, 38px) rotate(-9deg) scale(0.66); --R2: translate(70px, 38px) rotate(9deg) scale(0.66); }
  .run__k-card { left: 45px; top: 70px; }
  .run__k-status { left: 20px; top: 6px; }
  .run__k-copy { left: 8px; top: 346px; width: 234px; padding: 14px 16px 16px; }
  .run__k-copy b { font-size: 15px; margin-bottom: 12px; }
  /* optimisation: the same story at phone size */
  .run__o-weak { --s: 0.54; left: 12px; top: 70px; }
  .run__o-strong { --s: 0.6; left: 176px; top: 62px; }
  .run__o-weak .run__o-card { --lift: translateY(6px) scale(0.96); }
  .run__o-strong .run__o-card { --lift: translateY(-10px) scale(1.03); }
  .run__o-tag { height: 26px; padding: 0 10px; font-size: 12.5px; top: -21px; right: -6px; }
  .run__o-tag--up { right: -8px; padding: 0 11px 0 7px; }
  .run__o-tag--up svg { width: 14px; height: 14px; }
  .run__o-arc { left: 20px; top: 14px; scale: 0.6; transform-origin: 50% 0; }
  .run__o-review { top: -8px; }
  .run__o-review span { font-size: 12.5px; height: 28px; }
  .run__o-cpl { left: 6px; top: 262px; }
  .run__o-leads { --r: -1deg; left: 34px; top: 338px; width: 292px; }
  /* reporting */
  .run__r-back { left: 56px; top: 40px; width: 270px; height: 392px; }
  .run__r-doc { left: 22px; top: 12px; width: 296px; padding: 24px 24px 28px; }
  .run__r-when, .run__r-top + .run__r-sec .run__sk:last-child, .run__r-todo + .run__r-todo { display: none; }
  .run__r-toast { left: 4px; top: 386px; }
}

@media (prefers-reduced-motion: reduce) {
  #run *, #run *::before, #run *::after { transition: none !important; animation: none !important; }
}