/* Workflow automation — premium conversion wa-4 */
.wa-mkt{line-height:1.45;color-scheme:dark}
.wa-mkt .we2-lead{line-height:1.5;max-width:42rem;font-size:clamp(16px,1.35vw,18px)}
.wa-mkt .wa-hero{padding-block:clamp(16px,2.5vw,28px) 12px}
.wa-hero__fine{margin:14px 0 0;max-width:40rem;font-size:13.5px;line-height:1.45;color:#9aa6b4}

/* Hero visual: photo + sample overlay */
.wa-hero-viz{min-width:0;align-self:stretch}
.wa-hero-viz__frame{
  position:relative;min-height:280px;border:1px solid rgba(255,255,255,.16);
  background:#05080d;overflow:hidden;isolation:isolate
}
.wa-hero-viz__photo{
  display:block;width:100%;height:100%;min-height:280px;max-height:420px;
  object-fit:cover;object-position:center 30%
}
.wa-hero-viz__glass{
  position:absolute;inset:0;background:linear-gradient(115deg,rgba(5,8,13,.15) 0%,rgba(5,8,13,.72) 55%,rgba(5,8,13,.88) 100%);
  pointer-events:none
}
.wa-sample--overlay{
  position:absolute;left:14px;right:14px;bottom:14px;z-index:1;
  border:1px solid rgba(255,255,255,.22);background:rgba(5,8,13,.92);backdrop-filter:blur(6px);
  display:grid;grid-template-rows:auto 1fr
}
.wa-sample__bar{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;
  padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.12);background:rgba(12,18,28,.9)
}
.wa-sample__mark{font:600 11px/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:#8ebef2}
.wa-sample__meta{font-size:12.5px;color:#9aa6b4}
.wa-sample__body{padding:14px 16px 16px;display:grid;gap:10px}
.wa-sample__title{margin:0;font:600 1rem/1.3 var(--font-sans);color:#f2f4f7}
.wa-sample__steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.wa-sample__steps li{
  margin:0;display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:10px;
  padding:8px 0;border-top:1px solid rgba(255,255,255,.1)
}
.wa-sample__steps b{font:600 12px/1.35 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:#8ebef2}
.wa-sample__steps span{font-size:14px;line-height:1.4;color:#d5dbe3}

/* Role tabs + split photo panels */
.wa-roles{display:grid;gap:14px}
.wa-roles__tabs{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  border:1px solid rgba(255,255,255,.22);max-width:36rem
}
.wa-roles__tabs button{
  min-height:48px;border:0;background:transparent;color:#d5dbe3;
  font:600 14px/1.2 var(--font-sans);cursor:pointer;padding:0 12px
}
.wa-roles__tabs button[aria-selected=true]{background:#fff;color:#121212}
.wa-roles__tabs button:focus-visible{outline:2px solid #52a8ff;outline-offset:2px}
.wa-roles__panel{
  border:1px solid rgba(255,255,255,.14);background:#05080d;overflow:hidden
}
.wa-roles__panel--split{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.wa-roles__media{min-width:0;background:#070b12;border-right:1px solid rgba(255,255,255,.1)}
.wa-roles__media img{
  display:block;width:100%;height:100%;min-height:220px;max-height:320px;
  object-fit:cover;object-position:center
}
.wa-roles__copy{padding:clamp(18px,2.4vw,28px);display:grid;gap:12px;align-content:start}
.wa-roles__copy h3{margin:0;font:600 clamp(1.1rem,1.4vw,1.3rem)/1.25 var(--font-sans);color:#f2f4f7;text-wrap:balance}
.wa-roles__copy p,.wa-roles__copy li{margin:0;font-size:16px;line-height:1.5;color:#d5dbe3}
.wa-roles__copy ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.wa-roles__copy li{position:relative;padding-left:14px;font-size:15px}
.wa-roles__copy li:before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;background:#8ebef2}
.wa-roles__copy .we2-btn{justify-self:start;margin-top:4px;min-height:44px}

/* Approval console demo */
.wa-console{
  border:1px solid rgba(255,255,255,.16);background:#05080d;overflow:hidden;display:grid
}
.wa-console__chrome{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.12);background:#0c121c
}
.wa-console__dots{
  width:42px;height:10px;border-radius:0;
  background:radial-gradient(circle at 5px 5px,#5c6674 4px,transparent 5px),
    radial-gradient(circle at 21px 5px,#5c6674 4px,transparent 5px),
    radial-gradient(circle at 37px 5px,#5c6674 4px,transparent 5px)
}
.wa-console__title{margin:0;font:600 13.5px/1.3 var(--font-sans);color:#f2f4f7}
.wa-console__meta{margin:0 0 0 auto;font:600 11px/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:#8ebef2}
.wa-flow__tabs{
  display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid rgba(255,255,255,.12);overflow:auto
}
.wa-flow__tabs button{
  flex:1 1 auto;min-height:46px;min-width:7rem;padding:0 14px;border:0;border-right:1px solid rgba(255,255,255,.1);
  background:transparent;color:#d5dbe3;font:600 13.5px/1.2 var(--font-sans);cursor:pointer;white-space:nowrap
}
.wa-flow__tabs button:last-child{border-right:0}
.wa-flow__tabs button[aria-selected=true]{background:#fff;color:#121212}
.wa-flow__tabs button:focus-visible{outline:2px solid #52a8ff;outline-offset:2px}
.wa-console__body{
  display:grid;grid-template-columns:minmax(12rem,17rem) minmax(0,1fr);gap:0;min-width:0
}
.wa-console__ticket{
  padding:18px 16px;border-right:1px solid rgba(255,255,255,.12);background:#070b12;display:grid;gap:12px;align-content:start
}
.wa-console__label{margin:0;font:600 11px/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:#8ebef2}
.wa-console__case{margin:0;font-size:14.5px;line-height:1.4;color:#f2f4f7}
.wa-console__facts{margin:0;display:grid;gap:8px}
.wa-console__facts div{
  display:grid;grid-template-columns:4.5rem minmax(0,1fr);gap:8px;
  padding:8px 0;border-top:1px solid rgba(255,255,255,.08)
}
.wa-console__facts dt{margin:0;font:600 12px/1.35 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:#8ebef2}
.wa-console__facts dd{margin:0;font-size:14px;line-height:1.4;color:#d5dbe3}
.wa-flow__stage{padding:18px 16px 20px;min-width:0;display:grid;gap:14px;align-content:start}
.wa-flow__nodes{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px
}
.wa-flow__nodes li{
  margin:0;padding:14px 12px;border:1px solid rgba(255,255,255,.16);background:#0c121c;
  display:grid;gap:6px;min-width:0;transition:border-color .2s ease,background .2s ease,opacity .2s ease
}
.wa-flow__nodes li.is-active{border-color:rgba(82,168,255,.75);background:#0d1826}
.wa-flow__nodes li.is-muted{opacity:.42}
.wa-flow__nodes li.is-danger{border-color:rgba(229,115,115,.75);background:#1a0e10}
.wa-flow__nodes li.is-warn{border-color:rgba(255,193,7,.55);background:#16140a}
.wa-flow__nodes li.is-ok{border-color:rgba(102,187,106,.65);background:#0d1610}
.wa-flow__nodes b{font:600 13.5px/1.25 var(--font-sans);color:#f2f4f7}
.wa-flow__nodes span{font-size:12.5px;line-height:1.35;color:#d5dbe3}
.wa-flow__caption{margin:0;max-width:62ch;font-size:15px;line-height:1.5;color:#d5dbe3}
.wa-mid-cta{margin-top:20px}

/* Packages */
.wa-pkgs{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px
}
.wa-pkgs__card{
  margin:0;padding:18px 16px;min-width:0;border:1px solid rgba(255,255,255,.14);
  background:#05080d;display:grid;gap:10px;align-content:start
}
.wa-pkgs__card--focus{border-color:rgba(82,168,255,.55);box-shadow:inset 0 0 0 1px rgba(82,168,255,.16)}
.wa-pkgs__tag{margin:0;font:600 11px/1.3 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:#8ebef2}
.wa-pkgs h3{margin:0;font:600 1.1rem/1.25 var(--font-sans);color:#f2f4f7}
.wa-pkgs__price{margin:0;font:600 14px/1.35 var(--font-sans);color:#f2f4f7}
.wa-pkgs p,.wa-pkgs li{margin:0;font-size:14.5px;line-height:1.45;color:#d5dbe3}
.wa-pkgs ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.wa-pkgs li{position:relative;padding-left:14px}
.wa-pkgs li:before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;background:#8ebef2}
.wa-pkgs__out{font-size:13px!important;color:#9aa6b4!important}
.wa-pkgs .we2-btn{margin-top:4px;justify-self:start;min-height:44px}

/* Deliverable previews (HW receive pattern) */
.wa-receive{
  list-style:none;margin:0 0 20px;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px
}
.wa-receive__card{
  margin:0;min-width:0;overflow:hidden;
  border:1px solid rgba(255,255,255,.14);background:#05080d;
  display:grid;grid-template-rows:auto 1fr;
  transition:border-color .2s ease
}
.wa-receive__card:hover{border-color:rgba(255,255,255,.32)}
.wa-receive__img{
  display:block;width:100%;aspect-ratio:2.1 / 1;max-height:140px;
  height:auto;object-fit:cover;object-position:center;background:#070b12
}
.wa-receive__body{padding:14px 16px 16px;display:grid;gap:6px;align-content:start}
.wa-receive__tag{margin:0;font:600 11px/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:#8ebef2}
.wa-receive__body h3{margin:0;font:600 1.05rem/1.25 var(--font-sans);color:#f2f4f7;text-wrap:balance}
.wa-receive__body p{margin:0;font-size:14.5px;line-height:1.45;color:#d5dbe3;text-wrap:pretty}

.wa-diy{border:1px solid rgba(255,255,255,.14);background:#05080d;padding:20px 18px;display:grid;gap:14px}
.wa-diy h3{margin:0;font:600 1.1rem/1.25 var(--font-sans);color:#f2f4f7}
.wa-diy__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.wa-diy__label{margin:0 0 6px;font:600 11px/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:#8ebef2}
.wa-diy p{margin:0;font-size:15px;line-height:1.5;color:#d5dbe3}
.wa-diy__note{color:#9aa6b4!important;font-size:14px!important}

/* Form helpers */
.wa-after{margin:12px 0 0;padding:0 0 0 1.15rem;color:#d5dbe3;font-size:15px;line-height:1.5;display:grid;gap:6px}
.wa-agency-link{margin:18px 0 0;font-size:13px}
.wa-agency-link a{color:#9aa6b4;text-underline-offset:2px}
.wa-agency-link a:hover{color:#cfe3ff}
.wa-form-mode{margin:0 0 10px;font:600 12px/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:#8ebef2}
.wa-more-toggle{
  display:inline-flex;align-items:center;min-height:44px;margin:4px 0 10px;padding:0;border:0;
  background:transparent;color:#8ebef2;font:600 14px/1.3 var(--font-sans);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px
}
.wa-more-toggle:focus-visible{outline:2px solid #52a8ff;outline-offset:3px}
.wa-more{display:grid;gap:12px;margin-bottom:8px}

.wa-mkt [data-reveal]{opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .4s ease}
.wa-mkt [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .wa-mkt [data-reveal],.wa-flow__nodes li,.wa-receive__card{transition:none}
  .wa-mkt [data-reveal]{opacity:1;transform:none}
}

@media (max-width:1100px){
  .wa-pkgs,.wa-receive{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wa-flow__nodes{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wa-roles__panel--split{grid-template-columns:minmax(0,1fr)}
  .wa-roles__media{border-right:0;border-bottom:1px solid rgba(255,255,255,.1)}
  .wa-roles__media img{max-height:200px;min-height:160px}
  .wa-console__body{grid-template-columns:minmax(0,1fr)}
  .wa-console__ticket{border-right:0;border-bottom:1px solid rgba(255,255,255,.12)}
}
@media (max-width:760px){
  .wa-roles__tabs,.wa-pkgs,.wa-receive,.wa-diy__grid,.wa-flow__nodes{grid-template-columns:minmax(0,1fr)}
  .wa-sample__steps li{grid-template-columns:minmax(0,1fr);gap:4px}
  .wa-hero-viz__frame{display:grid;grid-template-rows:auto auto;min-height:0}
  .wa-hero-viz__photo{max-height:180px;min-height:160px;grid-row:1}
  .wa-hero-viz__glass{display:none}
  .wa-sample--overlay{
    position:relative;left:auto;right:auto;bottom:auto;inset:auto;
    border:0;border-top:1px solid rgba(255,255,255,.14);
    background:#05080d;backdrop-filter:none
  }
  .wa-sample__body,.wa-sample__bar{padding:14px 16px}
  .wa-mkt .we2-actions{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
  .wa-mkt .we2-actions .we2-btn{width:100%;max-width:100%;justify-content:center;box-sizing:border-box}
  .ec-hero__grid{grid-template-columns:minmax(0,1fr)!important}
  .wa-console__meta{margin-left:0}
  .wa-flow__tabs{scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .wa-mkt .ec-sticky:not([hidden]){display:flex}
  .wa-pkgs .we2-btn,.wa-roles__copy .we2-btn,.wa-mid-cta .we2-btn{width:100%;justify-content:center;box-sizing:border-box}
}
@media (min-width:1440px){
  .wa-hero-viz__photo{max-height:460px}
  .wa-receive__img{max-height:160px}
}