/* ==========================================================================
   /industries/web-design-for-trades: this page's illustration kit
   (resources/views/industries/wd/trades/*). The layout loads it after
   ind-wdp.css on this page only, and every rule is scoped to the page.
   Scenes rest in their finished, readable state; motion runs only once a
   tile is revealed (.is-in) or a visual is on (.is-on), never under reduced
   motion.
   ========================================================================== */

/* ---- S3: the scene frames (dark panel, 1px edge, 16px radius) ---- */
.wdp[data-wd-page="trades"] :is(.wdt-serp,.wdt-stale,.wdt-branch){border-radius:16px;border:1px solid var(--edge);background:#0A0B0E;overflow:hidden}

/* ---- 01 serp: the site sinks down page 2 and fades out of sight ---- */
.wdp[data-wd-page="trades"] .wdt-serp{--rh:40px}
.wdp[data-wd-page="trades"] .wdt-serp__meta{display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid var(--edge);color:var(--text-dim);font-size:12.5px}
.wdp[data-wd-page="trades"] .wdt-serp__meta svg{flex:0 0 auto;color:var(--coral)}
.wdp[data-wd-page="trades"] .wdt-serp__body{display:grid;grid-template-columns:minmax(0,1fr) 4px;gap:14px;padding:6px 12px 8px 14px}
.wdp[data-wd-page="trades"] .wdt-serp__list{list-style:none;margin:0;padding:0;display:grid;grid-auto-rows:var(--rh)}
.wdp[data-wd-page="trades"] .wdt-serp__list li{display:flex;align-items:center;gap:12px;min-width:0}
.wdp[data-wd-page="trades"] .wdt-serp__fav{flex:0 0 auto;width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.1)}
.wdp[data-wd-page="trades"] .wdt-serp__ghost > span{flex:1;display:grid;gap:6px}
.wdp[data-wd-page="trades"] .wdt-serp__ghost b{display:block;width:52%;height:6px;border-radius:3px;background:rgba(255,255,255,.2)}
.wdp[data-wd-page="trades"] .wdt-serp__ghost b + b{width:86%;height:5px;background:rgba(255,255,255,.07)}
.wdp[data-wd-page="trades"] .wdt-serp__ghost:nth-child(2) b:first-child{width:40%}
.wdp[data-wd-page="trades"] .wdt-serp__ghost:nth-child(3) b:first-child{width:60%}
.wdp[data-wd-page="trades"] .wdt-serp__you{position:relative;z-index:1;margin:3px -8px;padding:0 8px;border-radius:10px;border:1px dashed var(--coral-line);background:#130E0F}
.wdp[data-wd-page="trades"] .wdt-serp__you .wdt-serp__fav{background:none;border:1.5px dashed var(--coral-line)}
.wdp[data-wd-page="trades"] .wdt-serp__url{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:600;color:var(--text-soft);opacity:.45}
.wdp[data-wd-page="trades"] .wdt-serp__rank{flex:0 0 auto;padding:4px 10px;border-radius:100px;background:var(--coral-soft);color:var(--coral);font-style:normal;font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
/* a scrollbar, its thumb far down the page */
.wdp[data-wd-page="trades"] .wdt-serp__bar{position:relative;border-radius:4px;background:rgba(255,255,255,.05)}
.wdp[data-wd-page="trades"] .wdt-serp__bar i{position:absolute;left:0;right:0;bottom:0;height:28%;border-radius:4px;background:rgba(255,255,255,.24)}
.wdp[data-wd-page="trades"] .wdp-tile.is-in .wdt-serp__list{animation:wdtSerpFade 9s linear infinite}
.wdp[data-wd-page="trades"] .wdp-tile.is-in .wdt-serp__you{animation:wdtSerpSink 9s var(--ease) infinite,wdtSerpTint 9s ease infinite}
.wdp[data-wd-page="trades"] .wdp-tile.is-in .wdt-serp__url{animation:wdtSerpGhost 9s ease infinite}
.wdp[data-wd-page="trades"] .wdp-tile.is-in .wdt-serp__rank{animation:wdtSerpRank 9s var(--ease) infinite}
.wdp[data-wd-page="trades"] .wdp-tile.is-in .wdt-serp__ghost:nth-child(1){animation:wdtSerpUp1 9s var(--ease) infinite}
.wdp[data-wd-page="trades"] .wdp-tile.is-in .wdt-serp__ghost:nth-child(2){animation:wdtSerpUp2 9s var(--ease) infinite}
.wdp[data-wd-page="trades"] .wdp-tile.is-in .wdt-serp__ghost:nth-child(3){animation:wdtSerpUp3 9s var(--ease) infinite}
.wdp[data-wd-page="trades"] .wdp-tile.is-in .wdt-serp__bar i{animation:wdtSerpThumb 9s var(--ease) infinite}
@keyframes wdtSerpFade{0%{opacity:0}4%,91%{opacity:1}97%,100%{opacity:0}}
@keyframes wdtSerpSink{0%,12%{transform:translateY(calc(var(--rh) * -3))}20%,26%{transform:translateY(calc(var(--rh) * -2))}
  34%,40%{transform:translateY(calc(var(--rh) * -1))}48%,100%{transform:none}}
@keyframes wdtSerpTint{0%,12%{border-color:var(--gold-line);background:#17130B}44%,100%{border-color:var(--coral-line);background:#130E0F}}
@keyframes wdtSerpGhost{0%,44%{opacity:1;filter:none}58%,100%{opacity:.45;filter:blur(.4px)}}
@keyframes wdtSerpRank{0%,50%{opacity:0;transform:scale(.8)}58%,100%{opacity:1;transform:none}}
@keyframes wdtSerpUp1{0%,12%{transform:translateY(var(--rh))}20%,100%{transform:none}}
@keyframes wdtSerpUp2{0%,26%{transform:translateY(var(--rh))}34%,100%{transform:none}}
@keyframes wdtSerpUp3{0%,40%{transform:translateY(var(--rh))}48%,100%{transform:none}}
@keyframes wdtSerpThumb{0%,8%{transform:translateY(-257%)}48%,100%{transform:none}}

/* ---- 02 clones: three copies of one template; yours can't grow ---- */
.wdp[data-wd-page="trades"] .wdt-clone{--fh:142px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.wdp[data-wd-page="trades"] .wdt-clone__site{display:grid;gap:9px;justify-items:center;min-width:0}
.wdp[data-wd-page="trades"] .wdt-clone__frame{position:relative;display:block;width:100%;height:var(--fh);border-radius:14px;border:1px solid var(--edge);background:#0A0B0E;overflow:hidden}
.wdp[data-wd-page="trades"] .wdt-clone__site.is-yours .wdt-clone__frame{border-color:var(--coral-line);box-shadow:0 0 0 3px rgba(255,122,107,.06)}
.wdp[data-wd-page="trades"] .wdt-clone__print{display:grid;gap:10px;padding:12px}
.wdp[data-wd-page="trades"] .wdt-clone__nav{display:flex;justify-content:space-between;align-items:center}
.wdp[data-wd-page="trades"] .wdt-clone__nav i{display:block;width:34%;height:5px;border-radius:3px;background:rgba(255,255,255,.2)}
.wdp[data-wd-page="trades"] .wdt-clone__nav i + i{width:24%;height:9px;border-radius:5px;background:rgba(255,255,255,.1)}
.wdp[data-wd-page="trades"] .wdt-clone__hero{display:grid;grid-template-columns:46% minmax(0,1fr);gap:8px;align-items:center}
.wdp[data-wd-page="trades"] .wdt-clone__img{display:block;height:50px;border-radius:7px;background:repeating-linear-gradient(135deg,rgba(255,255,255,.11) 0 4px,rgba(255,255,255,.04) 4px 8px)}
.wdp[data-wd-page="trades"] .wdt-clone__txt{display:grid;gap:5px}
.wdp[data-wd-page="trades"] .wdt-clone__txt i{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.3)}
.wdp[data-wd-page="trades"] .wdt-clone__txt i:nth-child(2){width:72%;background:rgba(255,255,255,.14)}
.wdp[data-wd-page="trades"] .wdt-clone__txt .wdt-clone__btn{width:62%;height:9px;margin-top:2px;border-radius:5px;background:rgba(255,255,255,.2)}
.wdp[data-wd-page="trades"] .wdt-clone__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.wdp[data-wd-page="trades"] .wdt-clone__cards i{display:block;height:24px;border-radius:5px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.04)}
/* the section yours tries to add: the template's edge stops it */
.wdp[data-wd-page="trades"] .wdt-clone__add{position:absolute;left:12px;right:12px;bottom:8px;display:grid;place-items:center;height:16px;border-radius:5px;
  border:1px dashed var(--coral-line);background:rgba(255,122,107,.06);color:var(--coral);transform-origin:top}
.wdp[data-wd-page="trades"] .wdt-clone__add::before{content:"";width:9px;height:9px;transform:rotate(45deg);
  background:linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat}
.wdp[data-wd-page="trades"] .wdt-clone__frame::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);box-shadow:0 0 14px 2px rgba(244,160,0,.45)}
.wdp[data-wd-page="trades"] .wdt-clone__tag{font-style:normal;font-size:12px;font-weight:600;color:var(--text-dim);white-space:nowrap}
.wdp[data-wd-page="trades"] .wdt-clone__site.is-yours .wdt-clone__tag{color:var(--coral)}
.wdp[data-wd-page="trades"] .wdt-clone__site.is-yours .wdt-clone__tag::before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:currentColor;vertical-align:1px}
.wdp[data-wd-page="trades"] .wdp-tile.is-in .wdt-clone__print{animation:wdtPrint 10s linear calc(var(--k) * 1.3s) infinite backwards}
.wdp[data-wd-page="trades"] .wdp-tile.is-in .wdt-clone__frame::after{animation:wdtScan 10s linear calc(var(--k) * 1.3s) infinite backwards}
.wdp[data-wd-page="trades"] .wdp-tile.is-in .wdt-clone__add{animation:wdtBump 10s var(--ease) infinite}
.wdp[data-wd-page="trades"] .wdp-tile.is-in .wdt-clone__site.is-yours .wdt-clone__frame{animation:wdtEdge 10s ease infinite}
.wdp[data-wd-page="trades"] .wdp-tile.is-in .wdt-clone__add::before{animation:wdtPlus 10s var(--ease) infinite}
@keyframes wdtPrint{0%,5%{clip-path:inset(0 0 100% 0);opacity:1}17%,86%{clip-path:inset(0 0 0 0);opacity:1}93%,100%{clip-path:inset(0 0 0 0);opacity:0}}
@keyframes wdtScan{0%,4%{transform:translateY(0);opacity:0}6%,16%{opacity:1}17.5%,100%{transform:translateY(var(--fh));opacity:0}}
@keyframes wdtBump{0%,50%{opacity:0;transform:scaleY(0);color:var(--gold);border-color:var(--gold-line);background:var(--gold-soft)}
  57%{opacity:1;transform:scaleY(1.35);color:var(--gold);border-color:var(--gold-line);background:var(--gold-soft)}
  61%{transform:scaleY(.7);color:var(--coral);border-color:var(--coral-line);background:rgba(255,122,107,.06)}
  64%{transform:translateX(-3px) scaleY(1)}67%{transform:translateX(3px)}70%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes wdtPlus{0%,60%{transform:none}66%,100%{transform:rotate(45deg)}}
@keyframes wdtEdge{0%,57%,72%,100%{box-shadow:0 0 0 3px rgba(255,122,107,.06)}61%,66%{box-shadow:0 0 0 3px rgba(255,122,107,.06),inset 0 -3px 0 var(--coral),0 6px 18px -6px rgba(255,122,107,.6)}}

/* ---- 03 abandoned: the enquiry is sent and goes nowhere ---- */
.wdp[data-wd-page="trades"] .wdt-stale__form{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 40px;gap:8px;padding:14px;border-bottom:1px solid var(--edge)}
.wdp[data-wd-page="trades"] .wdt-stale__in{display:flex;align-items:center;height:36px;padding:0 11px;border-radius:9px;border:1px solid var(--edge-2);background:rgba(255,255,255,.03)}
.wdp[data-wd-page="trades"] .wdt-stale__in i{display:block;width:68%;height:5px;border-radius:3px;background:rgba(255,255,255,.22);transform-origin:left}
.wdp[data-wd-page="trades"] .wdt-stale__in + .wdt-stale__in i{width:52%}
.wdp[data-wd-page="trades"] .wdt-stale__send{position:relative;display:grid;place-items:center;height:36px;border-radius:9px;background:var(--gold);color:#111}
.wdp[data-wd-page="trades"] .wdt-stale__x{position:absolute;right:-6px;top:-7px;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;
  background:var(--coral);color:#1A0F10;font-size:9px;font-weight:800;line-height:1;box-shadow:0 0 0 3px #0A0B0E}
.wdp[data-wd-page="trades"] .wdt-stale__plane{position:absolute;right:27px;top:26px;color:var(--gold);opacity:0;pointer-events:none}
.wdp[data-wd-page="trades"] .wdt-stale__rows{display:grid}
.wdp[data-wd-page="trades"] .wdt-stale__rows > span{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;color:var(--text-dim)}
.wdp[data-wd-page="trades"] .wdt-stale__rows > span + span{border-top:1px solid var(--edge)}
.wdp[data-wd-page="trades"] .wdt-stale__rows em{display:inline-flex;align-items:center;gap:9px;min-width:0;font-style:normal}
.wdp[data-wd-page="trades"] .wdt-stale__dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.2)}
.wdp[data-wd-page="trades"] .wdt-stale__rows b{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft);white-space:nowrap}
.wdp[data-wd-page="trades"] .wdt-stale__rows .is-broken .wdt-stale__dot{background:var(--coral);box-shadow:0 0 8px rgba(255,122,107,.7)}
.wdp[data-wd-page="trades"] .wdt-stale__rows .is-broken b{color:var(--coral)}
.wdp[data-wd-page="trades"] .wdp-tile.is-in .wdt-stale__in i{animation:wdtFill 8s var(--ease) infinite}
.wdp[data-wd-page="trades"] .wdp-tile.is-in .wdt-stale__in + .wdt-stale__in i{animation-name:wdtFill2}
.wdp[data-wd-page="trades"] .wdp-tile.is-in .wdt-stale__send{animation:wdtPress 8s ease infinite}
.wdp[data-wd-page="trades"] .wdp-tile.is-in .wdt-stale__plane{animation:wdtPlane 8s ease-in-out infinite}
.wdp[data-wd-page="trades"] .wdp-tile.is-in .wdt-stale__x{animation:wdtFail 8s var(--ease) infinite}
.wdp[data-wd-page="trades"] .wdp-tile.is-in .wdt-stale__form{animation:wdtShake 8s ease infinite}
.wdp[data-wd-page="trades"] .wdp-tile.is-in .is-broken .wdt-stale__dot{animation:wdtDead 8s ease infinite}
@keyframes wdtFill{0%,5%{transform:scaleX(0)}15%,92%{transform:scaleX(1)}98%,100%{transform:scaleX(0)}}
@keyframes wdtFill2{0%,15%{transform:scaleX(0)}25%,92%{transform:scaleX(1)}98%,100%{transform:scaleX(0)}}
@keyframes wdtPress{0%,29%,35%,100%{transform:none}31%{transform:scale(.88)}}
@keyframes wdtPlane{0%,31%{opacity:0;transform:none}34%{opacity:1;transform:translate(-4px,-12px)}42%{opacity:1;transform:translate(-40px,-22px) rotate(-8deg)}
  47%{opacity:1;transform:translate(-62px,-14px) rotate(24deg)}55%{opacity:0;transform:translate(-80px,42px) rotate(95deg)}100%{opacity:0;transform:translate(-80px,42px) rotate(95deg)}}
@keyframes wdtFail{0%,54%{opacity:0;transform:scale(0)}59%{opacity:1;transform:scale(1.25)}62%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:scale(0)}}
@keyframes wdtShake{0%,56%,66%,100%{transform:none}58%{transform:translateX(-4px)}60%{transform:translateX(4px)}62%{transform:translateX(-3px)}64%{transform:translateX(2px)}}
@keyframes wdtDead{0%,54%,72%,100%{box-shadow:0 0 8px rgba(255,122,107,.7)}58%,66%{box-shadow:0 0 0 5px rgba(255,122,107,.18),0 0 14px rgba(255,122,107,.9)}}

/* ---- 04 services: the job gets a page of its own ---- */
.wdp[data-wd-page="trades"] .wdt-branch__body{display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);align-items:center;padding:20px 16px}
.wdp[data-wd-page="trades"] .wdt-branch__cat,.wdp[data-wd-page="trades"] .wdt-branch__page{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px 11px;align-items:center;min-width:0;padding:14px;border-radius:14px}
.wdp[data-wd-page="trades"] .wdt-branch__cat{border:1px dashed var(--coral-line);background:rgba(255,122,107,.04)}
.wdp[data-wd-page="trades"] .wdt-branch__page{border:1px solid var(--teal-line);background:rgba(79,191,160,.07);box-shadow:0 0 30px -12px rgba(79,191,160,.55)}
.wdp[data-wd-page="trades"] .wdt-branch__ic{grid-row:span 2;align-self:start;display:grid;place-items:center;width:30px;height:30px;border-radius:9px}
.wdp[data-wd-page="trades"] .wdt-branch__cat .wdt-branch__ic{color:var(--coral);background:var(--coral-soft)}
.wdp[data-wd-page="trades"] .wdt-branch__page .wdt-branch__ic{color:var(--teal);background:rgba(79,191,160,.16)}
.wdp[data-wd-page="trades"] .wdt-branch__txt{min-width:0;font-size:13.5px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.wdp[data-wd-page="trades"] .wdt-branch__cat .wdt-branch__txt{color:var(--text-dim)}
.wdp[data-wd-page="trades"] .wdt-branch__page .wdt-branch__txt{font-family:var(--font-head);font-size:14.5px;font-weight:700;color:var(--text)}
.wdp[data-wd-page="trades"] .wdt-branch__chip{justify-self:start;display:inline-flex;align-items:center;gap:7px;padding:4px 10px;border-radius:100px;font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.wdp[data-wd-page="trades"] .wdt-branch__cat .wdt-branch__chip{color:var(--coral);background:var(--coral-soft)}
.wdp[data-wd-page="trades"] .wdt-branch__page .wdt-branch__chip{color:var(--teal);background:rgba(79,191,160,.16)}
.wdp[data-wd-page="trades"] .wdt-branch__sig{display:inline-flex;gap:2px;align-items:flex-end;height:10px}
.wdp[data-wd-page="trades"] .wdt-branch__sig i{display:block;width:3px;border-radius:1px;background:currentColor;transform-origin:bottom}
.wdp[data-wd-page="trades"] .wdt-branch__sig i:nth-child(1){height:30%}.wdp[data-wd-page="trades"] .wdt-branch__sig i:nth-child(2){height:55%}
.wdp[data-wd-page="trades"] .wdt-branch__sig i:nth-child(3){height:78%}.wdp[data-wd-page="trades"] .wdt-branch__sig i:nth-child(4){height:100%}
/* the branch from the category to the page */
.wdp[data-wd-page="trades"] .wdt-branch__wire{position:relative;height:2px;margin:0 8px;border-radius:2px;background:rgba(255,255,255,.08)}
.wdp[data-wd-page="trades"] .wdt-branch__wire::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--coral),var(--gold) 55%,var(--teal));transform-origin:left}
.wdp[data-wd-page="trades"] .wdt-branch__wire::after{content:"";position:absolute;right:-1px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-top:2px solid var(--teal);border-right:2px solid var(--teal);transform:rotate(45deg)}
.wdp[data-wd-page="trades"] .wdt-branch__wire i{position:absolute;left:0;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px rgba(244,160,0,.9);opacity:0}
.wdp[data-wd-page="trades"] .wdp-tile.is-in .wdt-branch__wire::before{animation:wdtDraw 8s var(--ease) infinite}
.wdp[data-wd-page="trades"] .wdp-tile.is-in .wdt-branch__wire i{animation:wdtTravel 8s var(--ease) infinite}
.wdp[data-wd-page="trades"] .wdp-tile.is-in .wdt-branch__page{animation:wdtLight 8s var(--ease) infinite}
.wdp[data-wd-page="trades"] .wdp-tile.is-in .wdt-branch__cat{animation:wdtDim 8s ease infinite}
.wdp[data-wd-page="trades"] .wdp-tile.is-in .wdt-branch__sig i{animation:wdtSig 8s var(--ease) infinite}
.wdp[data-wd-page="trades"] .wdp-tile.is-in .wdt-branch__sig i:nth-child(2){animation-name:wdtSig2}
.wdp[data-wd-page="trades"] .wdp-tile.is-in .wdt-branch__sig i:nth-child(3){animation-name:wdtSig3}
.wdp[data-wd-page="trades"] .wdp-tile.is-in .wdt-branch__sig i:nth-child(4){animation-name:wdtSig4}
@keyframes wdtDraw{0%,10%{transform:scaleX(0)}28%,90%{transform:scaleX(1);opacity:1}97%,100%{transform:scaleX(1);opacity:0}}
@keyframes wdtTravel{0%,10%{left:0;opacity:0}13%{opacity:1}28%{left:100%;opacity:1}33%,100%{left:100%;opacity:0}}
@keyframes wdtLight{0%,26%{opacity:.35;transform:scale(.97);border-color:var(--edge-2);box-shadow:none}
  34%,90%{opacity:1;transform:none;border-color:var(--teal-line);box-shadow:0 0 30px -12px rgba(79,191,160,.55)}
  97%,100%{opacity:.35;transform:scale(.97);border-color:var(--edge-2);box-shadow:none}}
@keyframes wdtDim{0%,30%,96%,100%{opacity:1}40%,88%{opacity:.62}}
@keyframes wdtSig{0%,34%,97%,100%{transform:scaleY(0)}40%,90%{transform:none}}
@keyframes wdtSig2{0%,37%,97%,100%{transform:scaleY(0)}43%,90%{transform:none}}
@keyframes wdtSig3{0%,40%,97%,100%{transform:scaleY(0)}46%,90%{transform:none}}
@keyframes wdtSig4{0%,43%,97%,100%{transform:scaleY(0)}49%,90%{transform:none}}

/* ---- S4: the site mock (shared .wdp-site__* parts, plus this trade's own) ---- */
.wdp[data-wd-page="trades"] .wdt-site .wdp-site__links{display:flex}
@container (max-width:420px){.wdp[data-wd-page="trades"] .wdt-site .wdp-site__links{display:none}}
.wdp[data-wd-page="trades"] .wdt-site__call{box-shadow:0 0 0 0 rgba(244,160,0,.5)}
.wdp[data-wd-page="trades"] .wdp-ana .wdp-site__nav.is-on .wdt-site__call{animation:wdtCall 1.5s ease-out infinite}
@keyframes wdtCall{from{box-shadow:0 0 0 0 rgba(244,160,0,.6)}to{box-shadow:0 0 0 10px rgba(244,160,0,0)}}
.wdp[data-wd-page="trades"] .wdt-site__trust .is-star{background:var(--gold-soft);color:#F7C766}
.wdp[data-wd-page="trades"] .wdt-site__svc span{position:relative;padding-right:18px}
.wdp[data-wd-page="trades"] .wdt-site__svc i{display:grid;place-items:center}
.wdp[data-wd-page="trades"] .wdt-site__svc svg{width:10px;height:10px;fill:none;stroke:var(--gold);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.wdp[data-wd-page="trades"] .wdt-site__svc b{position:absolute;right:10px;top:13px;width:6px;height:6px;border-top:1.5px solid var(--text-dim);border-right:1.5px solid var(--text-dim);transform:rotate(45deg)}
.wdp[data-wd-page="trades"] .wdt-site__areas{display:flex;flex-wrap:wrap;gap:6px;padding:10px 16px;border-top:1px solid var(--edge)}
.wdp[data-wd-page="trades"] .wdt-site__areas span{display:inline-flex;align-items:center;gap:5px;padding:4px 9px 4px 7px;border-radius:100px;border:1px solid var(--edge);color:var(--text-soft);font-size:10.5px;white-space:nowrap}
.wdp[data-wd-page="trades"] .wdt-site__areas svg{flex:0 0 auto;color:var(--gold)}
.wdp[data-wd-page="trades"] .wdt-site__form{grid-template-columns:repeat(4,minmax(0,1fr)) auto}
.wdp[data-wd-page="trades"] .wdt-site__form i{display:flex;align-items:center;padding-left:8px}
.wdp[data-wd-page="trades"] .wdt-site__form svg{width:11px;height:11px;fill:none;stroke:var(--text-dim);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ---- S5: the three approach visuals ---- */
/* rank: the suburb page climbs past the competitor */
.wdp[data-wd-page="trades"] .wdt-rank__race{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:64px 64px;gap:8px 12px}
.wdp[data-wd-page="trades"] .wdt-rank__n{display:grid;place-items:center;align-self:center;width:44px;height:44px;border-radius:12px;font-family:var(--font-head);font-weight:800;font-size:16px}
.wdp[data-wd-page="trades"] .wdt-rank__n--1{grid-area:1/1;background:var(--gold);color:#111;box-shadow:0 0 22px -4px rgba(244,160,0,.6)}
.wdp[data-wd-page="trades"] .wdt-rank__n--2{grid-area:2/1;border:1px solid var(--edge-2);background:rgba(255,255,255,.04);color:var(--text-dim)}
.wdp[data-wd-page="trades"] .wdt-rank__you,.wdp[data-wd-page="trades"] .wdt-rank__them{display:grid;gap:7px;align-content:center;min-width:0;padding:0 14px;border-radius:14px}
.wdp[data-wd-page="trades"] .wdt-rank__you{grid-area:1/2;position:relative;z-index:1;border:1px solid var(--gold-line);background:#1C170C}
.wdp[data-wd-page="trades"] .wdt-rank__them{grid-area:2/2;border:1px solid var(--edge);background:#111317}
.wdp[data-wd-page="trades"] .wdt-rank__you .wdp-serp__url{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wdp[data-wd-page="trades"] .wdt-rank__them span{font-size:13px;font-weight:600;color:var(--text-dim)}
.wdp[data-wd-page="trades"] .wdt-rank__them .wdp-serp__l{width:74%;background:rgba(255,255,255,.12)}
.wdp[data-wd-page="trades"] .wdt-rank__chips{display:flex;flex-wrap:wrap;gap:8px}
.wdp[data-wd-page="trades"] .wdt-rank__chips span{padding:6px 12px;border-radius:100px;border:1px solid rgba(79,191,160,.25);background:var(--teal-soft);color:var(--teal);font-size:12.5px;font-weight:600}
.wdp[data-wd-page="trades"] :is(.wdp-vis.is-on,.wdp-chap__vis) .wdt-rank__you{animation:wdtClimb 9s var(--ease) infinite}
.wdp[data-wd-page="trades"] :is(.wdp-vis.is-on,.wdp-chap__vis) .wdt-rank__them{animation:wdtDrop 9s var(--ease) infinite}
.wdp[data-wd-page="trades"] :is(.wdp-vis.is-on,.wdp-chap__vis) .wdt-rank__n--1{animation:wdtCrown 9s var(--ease) infinite}
/* competitor first; your page climbs past it, holds, and the race resets unseen */
@keyframes wdtClimb{0%{opacity:0;transform:translateY(72px)}4%,14%{opacity:1;transform:translateY(72px)}30%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes wdtDrop{0%{opacity:0;transform:translateY(-72px)}4%,14%{opacity:1;transform:translateY(-72px)}30%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes wdtCrown{0%,26%,40%,100%{transform:none}32%{transform:scale(1.12);box-shadow:0 0 30px 2px rgba(244,160,0,.7)}}

/* convert: sixty seconds on the clock and a call button that rings */
.wdp[data-wd-page="trades"] .wdt-quote__title{display:flex;align-items:center;gap:11px}
.wdp[data-wd-page="trades"] .wdt-quote__clock{display:grid;place-items:center;color:var(--gold)}
.wdp[data-wd-page="trades"] .wdt-quote__track,.wdp[data-wd-page="trades"] .wdt-quote__sweep{fill:none;stroke-width:2.2}
.wdp[data-wd-page="trades"] .wdt-quote__track{stroke:rgba(244,160,0,.2)}
.wdp[data-wd-page="trades"] .wdt-quote__sweep{stroke:var(--gold);stroke-dasharray:100;stroke-dashoffset:0;stroke-linecap:round;transform:rotate(-90deg);transform-origin:12px 13px}
.wdp[data-wd-page="trades"] .wdt-quote__fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:8px 18px 4px}
.wdp[data-wd-page="trades"] .wdt-quote__fields .wdp-panel__row,.wdp[data-wd-page="trades"] .wdt-quote__fields .wdp-panel__row:first-child{justify-content:flex-start;gap:10px;height:42px;padding:0 13px;
  border:1px solid var(--edge-2);border-radius:11px;background:rgba(255,255,255,.03)}
.wdp[data-wd-page="trades"] .wdt-quote__fields svg{flex:0 0 auto;width:15px;height:15px;fill:none;stroke:var(--text-dim);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.wdp[data-wd-page="trades"] .wdt-quote__fields i{display:block;width:52%;height:6px;border-radius:3px;background:rgba(255,255,255,.14)}
.wdp[data-wd-page="trades"] .wdt-quote__acts{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:10px;padding:12px 18px 18px}
.wdp[data-wd-page="trades"] .wdt-quote__call{position:relative;display:grid;place-items:center;height:50px;padding:0 12px;border-radius:13px;background:var(--gold);color:#111;
  font-family:var(--font-head);font-weight:800;font-size:14.5px;letter-spacing:.05em;white-space:nowrap;box-shadow:0 14px 30px -14px rgba(244,160,0,.8)}
.wdp[data-wd-page="trades"] .wdt-quote__call > span{position:relative}
.wdp[data-wd-page="trades"] .wdt-quote__ring{position:absolute;inset:0;border-radius:inherit;border:2px solid var(--gold);opacity:0;pointer-events:none}
.wdp[data-wd-page="trades"] .wdt-quote__send{display:grid;place-items:center;height:50px;padding:0 12px;border-radius:13px;border:1px solid var(--edge-2);color:var(--text-soft);
  font-weight:600;font-size:13.5px;white-space:nowrap}
.wdp[data-wd-page="trades"] :is(.wdp-vis.is-on,.wdp-chap__vis) .wdt-quote__sweep{animation:wdtSweep 6s linear infinite}
.wdp[data-wd-page="trades"] :is(.wdp-vis.is-on,.wdp-chap__vis) .wdt-quote__ring{animation:wdtRing 2.4s ease-out infinite}
.wdp[data-wd-page="trades"] :is(.wdp-vis.is-on,.wdp-chap__vis) .wdt-quote__ring + .wdt-quote__ring{animation-delay:1.2s}
@keyframes wdtSweep{from{stroke-dashoffset:100}}
@keyframes wdtRing{0%{opacity:.75;transform:none}100%{opacity:0;transform:scale(1.08,1.5)}}

/* grow: the owner's own page list, the newest suburb page just added */
.wdp[data-wd-page="trades"] .wdt-pages .wdp-panel__rows{padding-bottom:16px}
.wdp[data-wd-page="trades"] .wdt-pages__title{display:flex;align-items:center;gap:12px}
.wdp[data-wd-page="trades"] .wdt-pages__title .wdp-grow{color:var(--gold)}
.wdp[data-wd-page="trades"] .wdt-pages__path{display:inline-flex;align-items:center;gap:10px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.wdp[data-wd-page="trades"] .wdt-pages__path svg{flex:0 0 auto;color:var(--text-dim)}
.wdp[data-wd-page="trades"] .wdt-pages__live{width:7px;height:7px;border-radius:50%;background:currentColor}
.wdp[data-wd-page="trades"] .wdt-pages .wdt-pages__new{flex-wrap:wrap;row-gap:8px;margin-top:8px;padding:12px;border:1px dashed var(--gold-line);border-radius:12px;background:var(--gold-soft)}
.wdp[data-wd-page="trades"] .wdt-pages__new .wdt-pages__path{font-weight:600;color:var(--gold)}
.wdp[data-wd-page="trades"] .wdt-pages__new b.is-gold{background:rgba(244,160,0,.16)}
.wdp[data-wd-page="trades"] :is(.wdp-vis.is-on,.wdp-chap__vis) .wdt-pages__live{animation:wdtLive 2.2s ease-out infinite}
.wdp[data-wd-page="trades"] .wdp-vis.is-on .wdt-pages__new{animation:wdtAdded 1.6s 1s var(--ease) both}
@keyframes wdtLive{from{box-shadow:0 0 0 0 rgba(79,191,160,.7)}to{box-shadow:0 0 0 7px rgba(79,191,160,0)}}
@keyframes wdtAdded{0%{box-shadow:0 0 0 0 rgba(244,160,0,.5)}100%{box-shadow:0 0 0 14px rgba(244,160,0,0)}}

/* ==========================================================================
   Phones: the tiles are a one-at-a-time swipe (about 286px inside)
   ========================================================================== */
@media (max-width:700px){
  .wdp[data-wd-page="trades"] :is(.wdt-serp,.wdt-stale,.wdt-branch) .wdp-defer__bar{padding:8px 12px}
  .wdp[data-wd-page="trades"] .wdt-serp{--rh:30px}
  .wdp[data-wd-page="trades"] .wdt-serp__meta{padding:6px 12px;font-size:12px}
  .wdp[data-wd-page="trades"] .wdt-serp__body{gap:10px;padding:4px 10px 5px 12px}
  .wdp[data-wd-page="trades"] .wdt-serp__list li{gap:9px}
  .wdp[data-wd-page="trades"] .wdt-serp__fav{width:13px;height:13px}
  .wdp[data-wd-page="trades"] .wdt-serp__rank{padding:3px 8px;font-size:10px;letter-spacing:.05em}

  .wdp[data-wd-page="trades"] .wdt-clone{--fh:96px;gap:8px}
  .wdp[data-wd-page="trades"] .wdt-clone__site{gap:7px}
  .wdp[data-wd-page="trades"] .wdt-clone__print{gap:6px;padding:8px}
  .wdp[data-wd-page="trades"] .wdt-clone__img{height:30px}
  .wdp[data-wd-page="trades"] .wdt-clone__cards i{height:15px}
  .wdp[data-wd-page="trades"] .wdt-clone__add{left:8px;right:8px;bottom:6px;height:13px}
  .wdp[data-wd-page="trades"] .wdt-clone__tag{font-size:11.5px}

  .wdp[data-wd-page="trades"] .wdt-stale__form{padding:12px}
  .wdp[data-wd-page="trades"] .wdt-stale__in,.wdp[data-wd-page="trades"] .wdt-stale__send{height:34px}
  .wdp[data-wd-page="trades"] .wdt-stale__plane{top:24px;right:25px}
  .wdp[data-wd-page="trades"] .wdt-stale__rows > span{padding:9px 12px}

  .wdp[data-wd-page="trades"] .wdt-branch__body{grid-template-columns:minmax(0,1fr);padding:9px 10px}
  .wdp[data-wd-page="trades"] .wdt-branch__cat,.wdp[data-wd-page="trades"] .wdt-branch__page{grid-template-columns:minmax(0,1fr);gap:5px;padding:8px 10px;border-radius:12px}
  .wdp[data-wd-page="trades"] .wdt-branch__ic{display:none}
  .wdp[data-wd-page="trades"] .wdt-branch__txt{font-size:12px;line-height:1.3}
  .wdp[data-wd-page="trades"] .wdt-branch__page .wdt-branch__txt{font-size:13px}
  .wdp[data-wd-page="trades"] .wdt-branch__chip{padding:3px 9px;font-size:10.5px}
  .wdp[data-wd-page="trades"] .wdt-branch__wire{justify-self:center;width:2px;height:13px;margin:0}
  .wdp[data-wd-page="trades"] .wdt-branch__wire::before{background:linear-gradient(var(--coral),var(--gold) 55%,var(--teal));transform-origin:top}
  .wdp[data-wd-page="trades"] .wdt-branch__wire::after{right:auto;left:50%;top:auto;bottom:0;margin:0 0 0 -3.5px;transform:rotate(135deg)}
  .wdp[data-wd-page="trades"] .wdp-tile.is-in .wdt-branch__wire::before{animation-name:wdtDrawY}
  .wdp[data-wd-page="trades"] .wdp-tile.is-in .wdt-branch__wire i{left:50%;animation-name:wdtTravelY}
  @keyframes wdtDrawY{0%,10%{transform:scaleY(0)}28%,90%{transform:scaleY(1);opacity:1}97%,100%{transform:scaleY(1);opacity:0}}
  @keyframes wdtTravelY{0%,10%{top:0;opacity:0}13%{opacity:1}28%{top:100%;opacity:1}33%,100%{top:100%;opacity:0}}

  /* S4: the links take a row of their own under the logo and the phone button */
  .wdp[data-wd-page="trades"] .wdt-site .wdp-site__nav{flex-wrap:wrap;row-gap:6px}
  .wdp[data-wd-page="trades"] .wdt-site .wdp-site__links{display:flex;order:3;width:100%;margin-left:0;gap:14px;font-size:10.5px}
  .wdp[data-wd-page="trades"] .wdt-site__call{margin-left:auto}
  .wdp[data-wd-page="trades"] .wdt-site__svc b{top:50%;margin-top:-3px}
  .wdp[data-wd-page="trades"] .wdt-site__areas{gap:5px;padding:8px 12px}
  .wdp[data-wd-page="trades"] .wdt-site__areas span{padding:3px 8px 3px 6px;font-size:10px}
  .wdp[data-wd-page="trades"] .wdt-site__form{grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:5px}
  .wdp[data-wd-page="trades"] .wdt-site__form i:nth-child(3){display:flex}
  .wdp[data-wd-page="trades"] .wdt-site__form i{justify-content:center;padding-left:0}

  /* S5: the visuals are fitted to a short stage */
  .wdp[data-wd-page="trades"] .wdt-rank__you .wdp-serp__url{white-space:normal;overflow-wrap:anywhere;line-height:1.3}
  .wdp[data-wd-page="trades"] .wdt-rank__you .wdp-serp__l--s{display:none}
  .wdp[data-wd-page="trades"] .wdt-quote__acts{padding-bottom:16px}
}

/* the narrowest phones: the scrollbar gives its room to the row */
@media (max-width:380px){
  .wdp[data-wd-page="trades"] .wdt-serp__body{grid-template-columns:minmax(0,1fr)}
  .wdp[data-wd-page="trades"] .wdt-serp__bar{display:none}
}

@media (prefers-reduced-motion:reduce){
  .wdp[data-wd-page="trades"] :is(.wdt-serp__list,.wdt-serp__list li,.wdt-serp__url,.wdt-serp__rank,.wdt-serp__bar i,.wdt-clone__print,.wdt-clone__frame,.wdt-clone__add,
    .wdt-stale__in i,.wdt-stale__send,.wdt-stale__plane,.wdt-stale__x,.wdt-stale__form,.wdt-stale__dot,.wdt-branch__wire i,
    .wdt-branch__page,.wdt-branch__cat,.wdt-branch__sig i,.wdt-site__call,.wdt-rank__you,.wdt-rank__them,.wdt-rank__n,.wdt-quote__sweep,.wdt-quote__ring,
    .wdt-pages__live,.wdt-pages__new),
  .wdp[data-wd-page="trades"] .wdt-clone__frame::after,.wdp[data-wd-page="trades"] .wdt-clone__add::before,.wdp[data-wd-page="trades"] .wdt-branch__wire::before{animation:none!important}
}